网页UI设计师一般对CSS都有一定了解,但是毕竟Wiki大部分都是生工的同学,就写一篇博客简单介绍一下网页设计。
# 网页编程语言
网页编程的三剑客:HTML、CSS、JavaScript
# HTML
整个网页的框架,相当于人的骨架。
主要通过是标签(元素)标记不同内容。
# CSS
美化网页,相当于人的衣服。
主要是通过属性来对元素进行修改。
# JavaScript
动态交互,相当于可以响应的人。
通过脚本来对事件(鼠标、键盘等操作)进行响应。
# 三层盒子模型
HTML框架是由元素所组成,即DOM树由多个分支组成。下图就是一个简单的DOM树:
每个元素中包含一定内容,如:其他元素、文字、图片、视频、音频等等。
比如上图中h2
元素为二级标题(文本内容),里面包含的a
元素为超链接(网页URL)。
这些元素怎么组成网页?
其实可以将这些元素理解成长方形的空盒子,网页是一个盒子,网页里面可以放盒子,然后盒子里面可以放盒子,这样不断嵌套,组成一个完整的网站页面。 (这句话肯定是错误的,但是这样理解也没问题)
也许有人觉得为什么看到的网站很绚烂,不是一个个长方形的。这就是CSS的修饰作用,CSS就是作用在这些元素的盒子模型之上的。
盒子模型
盒子模型:
- 元素内容(content)、内边距(padding):第二层
- 背景图(background-image):第三层
- 背景色(background-color):第四层
- 整个盒子的外边距(margin):第五层
当然现在更通用的是这种三层盒子模型:
# 设计网页
理解了盒子模型之后,设计就很简单了,和PPT没什么区别。
JavaScript脚本,有三种交互方式:
- 通过用户通过设备对元素进行操作(如:点击网页某一部分),然后进行响应;
- 通过用户通过设备对网页(也可以说是浏览器)进行操作(如:下拉页面),然后进行响应;
- 设置定时器进行操作(如:三秒后出现一个图片等等),进行响应。