前言在线视频

大家好

欢迎大家回到界面设计导论的课程

我是来自清华美院的康莹老师

很高兴能够在这里认识大家

在本章的课程中呢

我将带领大家学习

如何使用html语言

将我们的设计稿实现出来

制作成静态网页

本课程主要是面对

具有设计背景

或者对设计感兴趣的初学者同学

所以我们将手把手地

带领大家通过一个设计案例的制作

来学习html语言的相关知识点

以及程序的编写方法

我们本章的内容属于技术性的章节

所以希望大家在学习的过程中

能够勤查资料

多试多练多思考

举一反三

最终把自己的设计稿也能够实现出来

这也是我们本章节最终的作业

如果大家有什么问题

欢迎大家来到平台上交流

好 现在我们回到正题

在开始写程序之前呢

我们要先选择好工具

工欲善其事

必先利其器嘛

因此

我们要先搞清楚

我们自己的工作目标和定位

并选择好我们能够使用的顺手的工具

来编写程序

这样才会大大缩减编程的难度

提高工作的效率

目前呢

市面上有很多可供编程的工具

再加上html语言

对编程环境的要求并不是太高

即使用记事本也可以编写

因此我们有很多种选择

让我们可以挑选出

最符合自己习惯的工具

并加强练习

甚至可以熟练的混合使用几种工具

充分发挥它们各自的优势

但是我们并不建议频繁更改工具

这样会增加很多不必要的学习时间

对我们初学者来说

学习好一种工具就完全够用了

那么下面介绍几种常用的工具

第一种是Webstrome

第二种是notepad

还有大家常用的Dreamweaver

大家如果有兴趣的话

可以分别去了解一下它们的功能和特点

这里我们就不多赘述了

在接下来的课程中

我们将选择用Webstrome

来带领大家制作我们的设计案例

我们先来看一下我们要做的这个案例

我们来看一下要做的这个案例的设计图

再放大看一下

这是我们的设计稿

这个呢是做成html页面之后的效果

有一些基本的交互功能

大家看一下

可以切换

可以有一些输入框

我们现在呢

再来仔细的看一下这个设计稿

在ps里把设计稿打开来看一下

这里呢这里是涂层

例如我们现在

想把这个头像部分给隐藏

我们可以在图层里找到这个元素

开关前面的这个小眼睛的图标

就可以来控制这个元素的显示

接下来我们看一下

Webstrome的下载和安装

先打开Webstrome的官方网址

点击download下载

出现了下载页

在这里呢我们选择适用的操作系统

有windows的 有苹果的

我们现在是苹果的

选择苹果

然后点download下载

左下角出现了下载的文件

这是下载好的文件

双击安装就可以了

好 再双击安装的图标

来打开这个软件

打开这个软件之后

我们点击file

新建一个工程

给这个工程起一个工程名

例如demo01

创建

可以选择新的窗口

也可以选择在本窗口中打开

这里就出现了这个demo01的工程

在Finder文件管理中间

找到这个相应的工程的文件夹

之后 我们所有的文件和文件夹

都会存储到这里

在工程名这里点击右键

新建一个html文件

我们起名叫index

类型是html5的文件

点OK

这里就出现了html5最基本的代码

好 本课就讲到这里

非常感谢大家的学习

谢谢