目录

第1章网页设计基础知识

 【目标任务】

 【知识技能】

1．1Web发展史

1．2网页基本概念

1．2．1互联网

1．2．2TCP/IP协议

1．2．3万维网

1．2．4超文本传输协议

1．2．5文件传输协议

1．2．6统一资源定位符

1．2．7IP地址

1．2．8域名地址

1．2．9域名系统

1．2．10超文本和超链接

1．2．11网页和网站

1．2．12静态网页与动态网页

1．2．13超文本标记语言

1．2．14层叠样式表

1．2．15JavaScript

1．2．16Web标准

1．3网站开发基本流程

1．4网页设计与制作的主流开发工具与浏览器

【项目实战】

项目11使用记事本等网页制作工具创建最简HTML结构网页

项目12在Dreamweaver中创建站点

【实训作业】

实训任务11创建站点目录结构及第一个HTML网页

实训任务12下载安装多种浏览器和主流开发工具

第2章HTML网页结构基础

【目标任务】

【知识技能】

2．1HTML文档基本格式

2．1．1文档类型声明 ﹤ !doctype html ﹥

2．1．2HTML页面结构

2．1．3文档标签 ﹤ html ﹥ … ﹤ /html ﹥

2．1．4文档头标签 ﹤ head ﹥ … ﹤ /head ﹥

2．1．5文件主体标签 ﹤ body ﹥ … ﹤ /body ﹥

2．1．6文档标题标签 ﹤ title ﹥ … ﹤ /title ﹥

2．1．7引用外部文件标签 ﹤ link/ ﹥

2．1．8内嵌样式标签 ﹤ style ﹥ … ﹤ /style ﹥

2．1．9页面元信息标签 ﹤ meta ﹥

2．1．10页面注释标签

2．1．11标签的属性

2．2HTML文本控制标签及属性

2．2．1标题标签及其属性

2．2．2段落标签及其属性

2．2．3换行标签

2．2．4特殊字符

2．2．5预格式文本

2．2．6水平线标签及其属性

2．2．7文本格式化标签

2．2．8 ﹤ span ﹥ 标签

2．3图像标签及属性

2．3．1 ﹤ img ﹥ 标签基本语法

2．3．2 ﹤ img ﹥ 标签其他属性

2．4超链接标签及属性

2．5列表标签及属性

2．5．1有序列表

2．5．2无序列表

2．5．3定义列表

2．6HTML5新增的语义化结构标签

2．6．1 ﹤ header ﹥ … ﹤ /header ﹥ 标签

2．6．2 ﹤ nav ﹥ … ﹤ /nav ﹥ 标签

2．6．3 ﹤ section ﹥ … ﹤ /section ﹥ 标签

2．6．4 ﹤ article ﹥ … ﹤ /article ﹥ 标签

2．6．5 ﹤ aside ﹥ … ﹤ /aside ﹥ 标签

2．6．6 ﹤ footer ﹥ … ﹤ /footer ﹥ 标签

2．6．7﹤ figure ﹥ … ﹤ /figure ﹥ 标签与 ﹤ figcaption ﹥ … ﹤ /figcaption ﹥ 

标签

【项目实战】

项目 21制作“网页设计与制作”课程作业网站

【实训作业】

实训任务21制作“第2章 HTML网页结构基础”案例作业网站

第3章CSS网页样式基础

【目标任务】

【知识技能】

3．1什么是CSS样式

3．2Dreamweaver CC中创建样式表并设置CSS样式的方法

3．2．1认识【CSS样式】面板

3．2．2创建并编辑CCS样式的过程

3．3引入CSS样式表的方法

3．3．1外部样式表

3．3．2内部样式表

3．3．3行内样式

3．3．4CSS样式表的混合使用

3．4CSS样式的语法规则

3．5CSS样式基础选择器

3．5．1标签选择器

3．5．2类选择器

3．5．3ID选择器

3．5．4通配符选择器

3．6常用CSS文本样式

3．6．1fontstyle（字体风格）

3．6．2fontvariant（变体）

3．6．3fontweight（字体粗细）

3．6．4fontsize（字号大小）

3．6．5lineheight（行高）

3．6．6fontfamily（字体） 

3．6．7font（综合设置字体样式）

3．6．8color（文本颜色）

3．6．9textdecoration（文本装饰）

3．6．10textalign（水平对齐方式）

3．6．11textindent（首行缩进）

3．7CSS控制列表样式

3．8CSS复合选择器

3．8．1群组选择器

3．8．2标签指定选择器

3．8．3后代选择器

3．8．4子选择器

3．9CSS的继承性

3．10 CSS的优先级

3．10．1外部样式表、内部样式表和行内样式的优先级

3．10．2基础选择器的优先级

3．10．3复合选择器的优先级

3．11CSS的层叠性

3．11．1样式不冲突的层叠

3．11．2样式冲突且存在优先级差别的层叠

3．11．3样式冲突且选择器优先级相同的层叠

3．11．4样式冲突且同一标签运用不同类型选择器的层叠

【项目实战】

项目31百度搜索结果网页局部样式设置

项目32端午节习俗新闻页面

【实训作业】

实训任务31Web前端试学班广告页局部样式设置

实训任务32“商品推荐”页局部样式设置

第4章CSS网页样式进阶

【目标任务】

【知识技能】

4．1认识盒子模型

4．2盒子模型相关属性

4．2．1宽高属性

4．2．2边框属性

4．2．3内边距属性

4．2．4外边距属性

4．2．5背景属性

4．3元素类型

4．3．1块级元素

4．3．2行内元素

4．3．3行内块元素

4．4元素类型的转换

4．5元素所占空间的计算

4．5．1元素未设置width 和height属性

4．5．2元素设置width 和height属性

4．5．3CSS3新增的 boxsizing 属性

4．6CSS3选择器与常用的样式属性

4．6．1CSS3简介

4．6．2CSS3兄弟选择器

4．6．3CSS3属性选择器

4．6．4CSS3伪类选择器

4．6．5CSS3圆角边框属性和阴影属性

4．6．6CSS3中的颜色设置

4．6．7CSS3中的过渡效果

【项目实战】

项目41利用盒子模型原理制作“专题学习”模块效果

项目42精灵图技术的运用

项目43仿腾讯IMQQ网页视差背景效果

【实训作业】

实训任务41使用精灵图技术制作淘宝首页局部效果

实训任务42商品展示页局部效果的实现

第5章网页布局基础

【目标任务】

【知识技能】

5．1DIV+CSS布局的思路

5．2文档流

5．3Float浮动

5．3．1浮动的基本语法

5．3．2浮动的基本原理

5．3．3清除浮动clear属性

5．3．4子元素浮动，父元素空间不足的情况

5．3．5浮动子元素对未设置高度的父元素的影响及解决办法

5．4overflow属性

5．5定位属性

5．5．1定位属性

5．5．2静态定位

5．5．3相对定位

5．5．4绝对定位

5．5．5固定定位

5．5．6zindex层叠等级属性

【项目实战】

项目51“国”字型布局网页效果制作

项目52商品广告版块效果制作

【实训作业】

实训任务51新浪微博发言版块制作

实训任务52制作第5章案例作业网站

第6章导航与超链接

【目标任务】

【知识技能】

6．1超链接的类型

6．2超链接的基本语法

6．2．1href属性

6．2．2target属性

6．2．3title属性

6．3电子邮件超链接

6．4文件下载超链接

6．5锚点链接

6．6图像热区超链接

6．7超链接样式的设置

6．8超链接伪类控制超链接

6．9列表技术制作导航

6．9．1纵向一级导航

6．9．2横向一级导航

6．9．3纵向二级导航

6．9．4横向二级导航

【项目实战】

项目61滑动门技术制作一级导航

项目62锚点链接制作类似选项卡侧边栏导航效果

【实训作业】

实训任务61微软商城网站页脚效果制作

实训任务62二级下拉导航菜单的制作

第7章表格及样式设置

【目标任务】

【知识技能】

7．1创建表格

7．2表格的基本语法

7．2．1表格的基本结构

7．2．2HTML表格的表头标签

7．2．3表格相关的HTML标签

7．2．4表格标签的属性

7．2．5合并单元格

7．3表格的样式设置

7．3．1表格的边框折叠样式

7．3．2表格的边框样式

7．3．3表格的背景

7．3．4表格内容的对齐

7．4常见表格的制作

7．4．1常规细线表格的制作

7．4．2隔行变色表格的制作

7．4．3nthchild()实现隔行变色

7．4．4仅横线或仅竖线表格

7．4．5鼠标悬停表格效果

【项目实战】

项目71制作中学期末考试成绩表

【实训作业】

实训任务71模拟制作GitHub表格样式效果

实训任务72模拟制作百度万年日历鼠标悬停效果

第8章表单及样式设置

【目标任务】

【知识技能】

8．1创建表单 

8．1．1插入表单菜单命令及表单工具组

8．1．2Dreamweaver CC创建表单的方法

8．2表单的基本语法

8．2．1表单标签

8．2．2表单元素

8．3 ﹤ input ﹥ 标签

8．3．1 ﹤ input ﹥ 标签的type类型

8．3．2HTML5 新增的type类型

8．4表单CSS样式的设置

8．4．1表单布局样式

8．4．2表单控件样式

【项目实战】

项目81京东商城的登录表单效果制作

【实训作业】

实训任务81模拟制作网易邮箱登录界面

实训任务82制作客户留言表单

第9章JavaScript基础

【目标任务】

【知识技能】

9．1JavaScript概述

9．1．1JavaScript在网页中的作用

9．1．2在网页中应用JavaScript

9．2JavaScript的语法基础

9．2．1JavaScript的代码格式

9．2．2JavaScript输出

9．2．3JavaScript的数据类型

9．2．4JavaScript运算符

9．2．5条件语句

9．2．6循环语句

9．3JavaScript对象

9．3．1JavaScript 对象

9．3．2BOM浏览器对象模型

9．3．3DOM文档对象模型

9．4JavaScript 函数

9．4．1JavaScript 函数

9．4．2函数的调用

9．4．3JavaScript 事件

【项目实战】

项目91仿淘宝首页焦点轮播图效果制作

项目92图片循环滚动仿跑马灯效果制作

【实训作业】

实训任务91仿焦点新闻效果制作纵向图片新闻循环滚动

实训任务92制作本章案例作业网站

第10章响应式网页布局基础

【目标任务】

【知识技能】

10．1响应式Web设计概述

10．2固定布局

10．3百分比布局

10．4相对字体大小

10．5弹性布局

10．6响应式图片

10．7弹性盒子

10．7．1设置父元素的display属性值为flex

10．7．2justifycontent属性

10．7．3alignitems属性

10．7．4flexdirection属性

10．7．5flexwrap属性

10．7．6flex属性

10．7．7order属性

10．7．8flexflow属性

10．8视口与媒体查询 

10．8．1视口

10．8．2媒体查询

10．9Bootstrap响应式网页设计

10．9．1Bootstrap获取与安装

10．9．2Bootstrap栅格系统

10．9．3Bootstrap组件

10．9．4JavaScript插件

【项目实战】

项目101利用百分比与固定布局相结合实现通栏布局

项目102利用媒体查询制作《福尔摩斯历险记》响应式网页

项目103Bootstrap网页布局案例“Flash云课堂”网站首页

【实训作业】

实训任务101制作“Web前端学习网”响应式网页框架

实训任务102利用Bootstrap布局技术重构作业网站首页

参考文献