醉染图书网页设计与制作(HTML5+CSS3+JavaScript)9787302560074

章网页设计基础知识

【目标任务】

【知识技能】

1.1Web发展史

1.2网页基本概念

1.2.1互联网

1.2.2TCP/IP协议

1..万维网

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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.2.4特殊字符

2.2.5预格式文本

2.2.6水平线标签及其属

2.2.7文本格式化标签

2.2.8 ﹤ span ﹥ 标签

.图像标签及属

..1 ﹤ img ﹥ 标签基本语法

..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.3选择器

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..内边距属

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仿腾讯IM网页视差背景效果

【实训作业】

实训任务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..title属

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..表格相关的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..JavaScript的数据类型

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制作本章案例作业

0章响应式网页布局基础

【目标任务】

【知识技能】

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布局技术重构作业首页

参考文献

梁莉菁，萍乡学院信息与计算机工程学院，副教授，1969.5。
1987.8从事教学工作至今，一直从事一线教学工作，研究方向：网络多媒体教育技术应用；