网页设计与制作项目教程(微课版)电子书

内容提要

前言

单元1 网页赏析、创建站点与浏览网页

【教学导航】

【本单元单词】

【预备知识】

HTML与CSS网页设计概述

1.1 认识网页、网页相关的名词、Web标准

1.1.1 认识网页

1.1.2 网页相关的名词

1.1.3 Web标准

1.2 HTML、CSS简介

1.2.1 HTML简介

1.2.2 CSS简介

1.3 常见浏览器介绍

1.4 使用谷歌浏览器调试开发网页

1.5 网页赏析

1.6 Dreamweaver简介

1.6.1 Dreamweaver界面介绍

1.6.2 Dreamweaver初始化设置

1.6.3 使用Dreamweaver创建网页

1.6.4 使用Dreamweaver创建站点

【操作准备】

【模仿训练】

任务1.1 创建北京大学网站站点并浏览网页

任务1.1.1 分析北京大学站点的目录结构

任务1.1.2 赏析北京大学网站的首页、列表页和详情页

任务1.1.3 创建北京大学网站的本地站点

任务1.1.4 认识Dreamweaver的工作界面

任务1.1.5 打开与保存网页文档index.html

任务1.1.6 在浏览器中浏览网页index.html

【拓展训练】

任务1.2 创建绿色食品网站站点并浏览网页

【单元小结】

【单元习题】

单元2 网站项目开发环境搭建

【教学导航】

【本单元单词】

【预备知识】

HTML入门

2.1 HTML文档基本格式、HTML标记及其属性、头部标记

2.1.1 认识HTML文档基本格式

2.1.2 HTML标记及其属性

2.1.3 头部标记

2.2 标题段落标记、文本样式标记

2.2.1 标题段落标记

2.2.2 文本样式标记

2.3 文本格式化标记、特殊字符标记

2.3.1 文本格式化标记

2.3.2 特殊字符标记

2.4 常用图像格式、图像标记、相对路径和绝对路径

2.4.1 常用图像格式

2.4.2 图像标记

2.4.3 相对路径和绝对路径

2.5 <div>和<span>标记

2.6 注释标记

【操作准备】

【模仿训练】

任务2.1 北京大学网站项目开发环境搭建

任务2.1.1 认识手册（HTML手册-W3CSchool线下教程.chm）的使用界面

任务2.1.2 认识编辑器（Sublime Text）的使用界面

任务2.1.3 使用谷歌浏览器（Google Chrome）审查元素

任务2.1.4 创建北京大学网站站点文件夹

任务2.1.5 网页基本骨架搭建

【拓展训练】

任务2.2 绿色食品网站项目开发环境搭建

【单元小结】

【单元习题】

单元3 图文混排网页的制作

【教学导航】

【本单元单词】

【预备知识】

CSS入门

3.1 掌握CSS样式规则、CSS样式表的引入方式

3.1.1 CSS样式规则

3.1.2 引入CSS样式表的方式

3.2 CSS基础选择器

3.2.1 标记选择器

3.2.2 id选择器

3.2.3 类选择器（class选择器）

3.2.4 通配符选择器

3.3 CSS文本相关样式

3.3.1 CSS文本相关样式的重要性

3.3.2 CSS字体样式属性

3.4 CSS文本外观属性

3.5 CSS复合选择器

3.5.1 交集选择器（标签指定式选择器）

3.5.2 并集选择器（逗号选择器）

3.5.3 后代选择器（包含选择器）

3.5.4 选择器的综合使用

3.6 CSS三大特性：继承性、层叠性和优先级

3.6.1 CSS的继承性

3.6.2 CSS的层叠性

3.6.3 CSS的优先级

【操作准备】

【模仿训练】

任务3.1 制作图文混排效果的网页

任务3.1.1 建立站点目录结构

任务3.1.2 创建与保存网页文档task3-1.html

任务3.1.3 图文混排网页页面结构分析

任务3.1.4 在网页中插入相应的标签、文字和图片

任务3.1.5 插入与文本相关的元素并设置其属性

任务3.1.6 设置图片元素的属性

【拓展训练】

任务3.2 制作绿色食品网站图文混排效果的网页

【单元小结】

【单元习题】

单元4 表格与表格布局网页的制作

【教学导航】

【本单元单词】

【预备知识】

表格、表格布局及CSS控制表格样式

4.1 表格

4.2 表格布局

4.3 CSS控制表格样式

【操作准备】

【模仿训练】

任务4.1 北京大学网站表格与表格布局网页的制作

任务4.1.1 表格及细线表格的制作

任务4.1.2 滚动文本效果的制作

任务4.1.3 表格布局网页的制作

【拓展训练】

任务4.2 绿色食品网站表格与表格布局网页的制作

【单元小结】

【单元习题】

单元5 包含Flash元素和超级链接的网页制作

【教学导航】

【本单元单词】

【预备知识】

列表和超级链接

5.1 列表

5.1.1 认识列表

5.1.2 无序列表（ul）

5.1.3 有序列表（ol）

5.1.4 定义列表（dl）

5.1.5 列表嵌套

5.2 CSS控制列表样式

5.3 超级链接

5.3.1 超级链接

5.3.2 设置文本超链接

5.3.3 给超链接添加提示文字

5.3.4 设置图像超链接

5.3.5 使用锚在网页内部链接（锚点链接）

5.3.6 电子邮件的链接

5.3.7 设置超级链接的样式

【操作准备】

【模仿训练】

任务5.1 北京大学网站包含Flash元素和超级链接的网页制作

任务5.1.1 北京大学网站包含Flash元素的网页制作

任务5.1.2 北京大学网站包含超链接的网页制作

【拓展训练】

任务5.2 绿色食品网站包含Flash元素和超级链接的网页制作

【单元小结】

【单元习题】

单元6 表单网页的制作

【教学导航】

【本单元单词】

【预备知识】

表单

6.1 表单的构成与创建

6.1.1 认识表单

6.1.2 创建表单

6.2 表单控件

6.2.1 input控件

6.2.2 textarea控件

6.2.3 select控件

【操作准备】

【模仿训练】

任务6.1 北京大学网站新生注册表单网页的制作

任务6.1.1 插入表单域、设置属性及其表格布局

任务6.1.2 插入表单控件并设置其属性

任务6.1.3 插入表单外框并设置其属性

【拓展训练】

任务6.2 绿色食品网站表单网页的制作

【单元小结】

【单元习题】

单元7 CSS布局与网页美化

【教学导航】

【本单元单词】

【预备知识】

CSS核心内容：标准文档流、盒子模型、浮动与定位

7.1 标准文档流

7.1.1 标准“流”的微观现象

7.1.2 块级元素和行内元素

7.1.3 块级元素和行内元素的相互转换

7.1.4 块级元素和行内元素的区别

7.2 盒模型

7.2.1 认识盒子模型

7.2.2 盒子模型的组成属性

7.2.3 盒子的宽度和高度

7.2.4 盒子外边距合并问题

7.3 浮动

7.3.1 认识浮动

7.3.2 元素的浮动属性float

7.3.3 清除浮动带来的影响

7.3.4 overflow属性

7.4 定位

7.4.1 元素的定位属性

7.4.2 常见的几种定位模式

【操作准备】

【模仿训练】

任务7.1 北京大学网站CSS布局与网页美化

任务7.1.1 北京大学新闻网单个盒子的制作

任务7.1.2 北京大学新闻网头条推荐盒子的制作

任务7.1.3 北京大学新闻网选项卡的制作

任务7.1.4 北京大学后勤网套餐展示盒子的制作

任务7.1.5 北京大学首页水平列表菜单的制作

【拓展训练】

任务7.2 绿色食品网站CSS布局与网页美化

【单元小结】

【单元习题】

单元8 网站首页的设计与制作

【教学导航】

【本单元单词】

【预备知识】

CSS布局与浏览器兼容性

8.1 CSS布局

8.1.1 版心与CSS布局流程

8.1.2 用CSS进行网页布局

8.1.3 网页模块命名规范

8.2 浏览器兼容性

8.2.1 CSS Hack

8.2.2 IE条件注释语句

8.2.3 !important解决div高度自适应问题（兼容IE 6和火狐浏览器）

8.2.4 常见的IE 6兼容性问题

【操作准备】

【模仿训练】

任务8.1 北京大学网站首页的设计与制作

任务8.1.1 北京大学网站首页整体页面结构的制作

任务8.1.2 北京大学网站首页头部的制作

任务8.1.3 北京大学网站首页中部的制作

任务8.1.4 北京大学网站首页尾部的制作

【拓展训练】

任务8.2 绿色食品网站首页的设计与制作

【单元小结】

单元9 网站列表页的设计与制作

【教学导航】

【操作准备】

【模仿训练】

任务9.1 北京大学网站列表页的设计与制作

任务9.1.1 北京大学网站列表页整体页面结构的制作

任务9.1.2 北京大学网站列表页头部的制作

任务9.1.3 北京大学网站列表页中部（xiaonav）的制作

任务9.1.4 北京大学网站列表页中部（navbar）的制作

任务9.1.5 北京大学网站列表页中部（main）的制作

任务9.1.6 北京大学网站列表页尾部的制作

【拓展训练】

任务9.2 绿色食品网站列表页的设计与制作

【单元小结】

单元10 网站详情页的设计与制作

【教学导航】

【操作准备】

【模仿训练】

任务10.1 北京大学网站详情页的设计与制作

任务10.1.1 北京大学网站详情页整体页面结构的制作

任务10.1.2 北京大学网站详情页topbar部分的制作

任务10.1.3 北京大学网站详情页Flash部分的制作

任务10.1.4 北京大学网站详情页navbar部分的制作

任务10.1.5 北京大学网站详情页so部分的制作

任务10.1.6 北京大学网站详情页content部分的制作

任务10.1.7 北京大学网站详情页footer部分的制作

【拓展训练】

任务10.2 绿色食品网站详情页的设计与制作

【单元小结】