当前课程知识点：界面设计导论 > 第四章：从设计到实现：H5网页基础概念 > 前言 > 前言
大家好
欢迎大家回到界面设计导论的课程
我是来自清华美院的康莹老师
很高兴能够在这里认识大家
在本章的课程中呢
我将带领大家学习
如何使用html语言
将我们的设计稿实现出来
制作成静态网页
本课程主要是面对
具有设计背景
或者对设计感兴趣的初学者同学
所以我们将手把手地
带领大家通过一个设计案例的制作
来学习html语言的相关知识点
以及程序的编写方法
我们本章的内容属于技术性的章节
所以希望大家在学习的过程中
能够勤查资料
多试多练多思考
举一反三
最终把自己的设计稿也能够实现出来
这也是我们本章节最终的作业
如果大家有什么问题
欢迎大家来到平台上交流
好 现在我们回到正题
在开始写程序之前呢
我们要先选择好工具
工欲善其事
必先利其器嘛
因此
我们要先搞清楚
我们自己的工作目标和定位
并选择好我们能够使用的顺手的工具
来编写程序
这样才会大大缩减编程的难度
提高工作的效率
目前呢
市面上有很多可供编程的工具
再加上html语言
对编程环境的要求并不是太高
即使用记事本也可以编写
因此我们有很多种选择
让我们可以挑选出
最符合自己习惯的工具
并加强练习
甚至可以熟练的混合使用几种工具
充分发挥它们各自的优势
但是我们并不建议频繁更改工具
这样会增加很多不必要的学习时间
对我们初学者来说
学习好一种工具就完全够用了
那么下面介绍几种常用的工具
第一种是Webstrome
第二种是notepad
还有大家常用的Dreamweaver
大家如果有兴趣的话
可以分别去了解一下它们的功能和特点
这里我们就不多赘述了
在接下来的课程中
我们将选择用Webstrome
来带领大家制作我们的设计案例
我们先来看一下我们要做的这个案例
我们来看一下要做的这个案例的设计图
再放大看一下
这是我们的设计稿
这个呢是做成html页面之后的效果
有一些基本的交互功能
大家看一下
可以切换
可以有一些输入框
我们现在呢
再来仔细的看一下这个设计稿
在ps里把设计稿打开来看一下
这里呢这里是涂层
例如我们现在
想把这个头像部分给隐藏
我们可以在图层里找到这个元素
开关前面的这个小眼睛的图标
就可以来控制这个元素的显示
接下来我们看一下
Webstrome的下载和安装
先打开Webstrome的官方网址
点击download下载
出现了下载页
在这里呢我们选择适用的操作系统
有windows的 有苹果的
我们现在是苹果的
选择苹果
然后点download下载
左下角出现了下载的文件
这是下载好的文件
双击安装就可以了
好 再双击安装的图标
来打开这个软件
打开这个软件之后
我们点击file
新建一个工程
给这个工程起一个工程名
例如demo01
创建
可以选择新的窗口
也可以选择在本窗口中打开
这里就出现了这个demo01的工程
在Finder文件管理中间
找到这个相应的工程的文件夹
之后 我们所有的文件和文件夹
都会存储到这里
在工程名这里点击右键
新建一个html文件
我们起名叫index
类型是html5的文件
点OK
这里就出现了html5最基本的代码
好 本课就讲到这里
非常感谢大家的学习
谢谢
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
