WEB前端开发：HTML + CSS网页布局

一、HTML+CSS网页设计与布局课程简介

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。本课程包括网页设计基础、HTML基础、CSS基础、CSS高级技术和CSS布局技术等内容。

本课程教学遵循Web标准，强调“表现”与“内容”的分离，抛弃了那些过时的HTML标记和属性，从更规范的角度全面、系统地介绍了网页设计制作方法与技巧。课程实战中依据大量详细的案例，并对案例进行分析，便于学员在理解的基础上，能够熟练掌握HTML+CSS技术。

二、HTML+CSS网页设计与布局课程目标

零点起航学校web前端HTML+CSS技术课程通过简洁清晰的教学，帮助学员掌握HTML与HTML5的基本语法、CSS与CSS3的基本语法、并能独立完成多种企业级布局设计任务，初步构建自身的前端开发技术体系。

1.HTML负责网页的结构层，是网页开发的基础，从最简单的网页骨架搭建入手，使用常见的HTML标签丰富网页结构。

2.在HTML搭建的网页结构基础上，通过CSS选择器精准选择标签，使用外观、盒模型相关属性完成网页全部内容，学习传统浮动、定位等完成网页布局，侧重使用Flex布局技巧精准控制网页布局，最终结合背景、圆角、阴影等装饰属性进一步美化网页效果，达到能够编写企业级大型综合网页。

3.借助PxCook工具，基于设计稿编写网页，确保网页的高度还原，通过综合运用HTML+CSS技术，按照实际项目开发流程，归纳开发技巧，提升综合实战水平。

三、HTML+CSS网页设计与布局课程大纲

第一部分 HTML基础篇

第1章 网页设计基础知识

1.1基础概念

1.2网页与HTML语言

1.3Web标准：结构、表现与行为

1.3.1标准的重要性

1.3.2“Web标准”概述

1.4初步理解网页设计与开发的过程

1.4.1基本任务与角色

1.4.2明确网站定位

1.4.3收集信息和素材

1.4.4策划栏目内容

1.4.5设计页面方案

1.4.6制作页面

1.4.7实现后台功能

1.4.8整合与测试网站

1.5与设计相关的技术因素

1.6本章小结

第2章 HTML网页文档结构

2.1HTML简介

2.1.1创建第一个HTML文件

2.1.2HTML文件结构

2.2简单的HTML案例

2.3网页源文件的获取

2.3.1直接查看源文件

2.3.2保存网页

2.4辅助：利用Dreamweaver快速建立基本文档

2.5本章小结

第3章 用HTML设置文本和图像

3.1文本排版

3.1.1实现段落与段内换行(p和br)

3.1.2设置标题(h1～h6)

3.1.3使文字水平居中(center)

3.1.4设置文字段落的缩进(blockquote)

3.2设置文字列表

3.2.1建立无序列表(ul)

3.2.2建立有序列表(ol)

3.3HTML标记与HTML属性

3.3.1用align属性控制段落的水平位置

3.3.2用bgcolor属性设置背景颜色

3.3.3设置文字的特殊样式

3.3.4设置文字的大小和颜色(font)

3.4忘记过时的HTML标记和属性

3.5特殊文字符号

3.6在网页中使用图像(img)

3.6.1网页中的图片格式

3.6.2一个简单的图片网页

3.6.3使用路径

3.7用width和height属性设置图片的尺寸

3.8用alt属性为图像设置替换文本

3.9辅助：利用Dreamweaver设置文本和图像

3.10辅助：利用Dreamweaver代码视图提高效率

3.10.1代码提示

3.10.2代码折叠

3.10.3使用拆分视图对代码快速定位

3.11本章小结

第4章 用HTML建立超链接

4.1设置基本文字超链接

4.1.1URL的格式

4.1.2URL的类型

4.2设置页面内部的特定目标的链接

4.3设置图片的超链接

4.4设置电子邮件链接

4.5设置以新窗口显示链接页面

4.6创建热点区域

4.6.1用HTML建立热点区域(map和area)

4.6.2辅助：利用Dreamweaver精确定位热点区域

4.7框架之间的链接

4.7.1建立框架与框架集(frame和frameset)

4.7.2用cols属性将窗口分为左右两部分

4.7.3用rows属性将窗口分为上中下三部分

4.7.4框架的嵌套

4.7.5用src属性在框架中插入网页

4.7.6用src属性在框架之间链接

4.7.7创建嵌入式框架(iframe)

4.8链接增多后网站的组织结构与维护5

4.9本章小结

第5章 用HTML创建表格

5.1表格基本结构(table)

5.2合并单元格

5.2.1用colspan属性左右合并单元格

5.2.2用rowspan属性上下合并单元格

5.3用align属性设置对齐方式

5.4用bgcolor属性设置表格背景色和边框颜色

5.5用cellpadding属性和cellspacing属性设定距离

5.6完整的表格标记(thead、tbody和tfoot)

5.7需要抛弃的方法：用表格进行页面布局

5.8本章小结

第二部分 CSS基础篇

第6章 (X)HTML与CSS概述

6.1HTML与XHTML

6.1.1追根溯源

6.1.2DOCTYPE(文档类型)的含义与选择

6.1.3XHTML与HTML的重要区别

6.2(X)HTML与CSS

6.2.1CSS标准

6.2.2传统HTML的缺点

6.2.3CSS的引入

6.2.4如何编辑CSS

6.2.5浏览器与CSS

6.3本章小结

第7章 CSS核心基础

7.1构造CSS规则

7.2基本CSS选择器

7.2.1标记选择器

7.2.2类别选择器

7.2.3ID选择器

7.3在HTML中使用CSS的方法

7.3.1行内样式

7.3.2内嵌式

7.3.3链接式

7.3.4导入样式

7.3.5各种方式的优先级问题

7.4本章小结

第8章 手工编写与借助工具

8.1从零开始

8.2设置标题

8.3控制图片

8.4设置正文

8.5设置整体页面

8.6对段落进行分别设置

8.7完整代码

8.8CSS的注释

8.9辅助：使用Dreamweaver创建页面

8.10辅助：在Dreamweaver中新建CSS规则

8.11辅助：在Dreamweaver中编辑CSS规则

8.12为图像创建CSS规则

8.13本章小结

第9章 CSS的高级特性

9.1复合选择器

9.1.1“交集”选择器

9.1.2“并集”选择器

9.1.3后代选择器

9.2CSS的继承特性

9.2.1继承关系

9.2.2CSS继承的运用

9.3CSS的层叠特性

9.4本章小结

第10章 用CSS设置文本样式

10.1长度单位

10.2颜色定义

10.3准备页面

10.4设置文字的字体

10.5设置文字的倾斜效果

10.6设置文字的加粗效果

10.7英文字母大小写转换

10.8控制文字的大小

10.9文字的装饰效果

10.10设置段落首行缩进

10.11设置字词间距

10.12设置段落内部的文字行高

10.13设置段落之间的距离

10.14控制文本的水平位置

10.15设置文字与背景的颜色

10.16设置段落的垂直对齐方式

10.16.1使用line-height属性进行设置

10.16.2更通用的解决方案

10.17本章小结

第11章 用CSS设置图像效果

11.1设置图片边框

11.1.1基本属性

11.1.2为不同的边框分别设置样式

11.2图片缩放

11.3图文混排

11.3.1文字环绕

11.3.2设置图片与文字的间距

11.4案例——八大行星科普网页

11.5设置图片与文字的对齐方式

11.5.1横向对齐方式

11.5.2纵向对齐方式

11.6本章小结

第12章 用CSS设置背景颜色与图像

12.1设置背景颜色

12.2设置背景图像

12.3设置背景图像平铺

12.4设置背景图像位置

12.5设置背景图片位置固定

12.6设置标题的图像替换

12.7使用滑动门技术的标题

12.8本章小结

第3部分 CSS高级篇

第13章  CSS盒子模型

13.1“盒子”与“模型”的概念探究

13.2边框(border)

13.2.1设置边框样式(border-style)

13.2.2属性值的简写形式

13.2.3边框与背景

13.3设置内边距(padding)

13.4设置外边距(margin)

13.5盒子之间的关系

13.5.1HTML与DOM

13.5.2标准文档流

13.5.3div标记与span标记

13.6盒子在标准流中的定位原则

13.6.1行内元素之间的水平margin

13.6.2块级元素之间的竖直margin

13.6.3嵌套盒子之间的margin

13.6.4margin属性可以设置为负值

13.7思考题

13.8本章小结

第14章 盒子的浮动与定位

14.1盒子的浮动

14.1.1准备代码

14.1.2案例1——设置第1个浮动的div

14.1.3案例2——设置第2个浮动的div

14.1.4案例3——设置第3个浮动的div

14.1.5案例4——改变浮动的方向

14.1.6案例5——再次改变浮动的方向

14.1.7案例6——全部向左浮动

14.1.8案例7——使用clear属性清除浮动的影响

14.1.9案例8——扩展盒子的高度

14.2盒子的定位

14.2.1静态定位(static)

14.2.2相对定位(relative)

14.2.3绝对定位(absolute)

14.2.4固定定位(fixed)

14.3z-index空间位置

14.4盒子的display属性

14.5本章小结

第15章 用CSS设置表格样式

15.1控制表格

15.1.1表格中的标记

15.1.2设置表格的边框

15.1.3确定表格的宽度

15.1.4其他与表格相关的标记

15.2美化表格

15.2.1搭建HTML结构

15.2.2整体设置

15.2.3设置单元格样式

15.2.4斑马纹效果

15.2.5设置列样式

15.3设置鼠标指针经过时整行变色提示的表格

15.3.1在Firefox和IE7中实现鼠标指针经过时整行变色

15.3.2在IE6中实现鼠标指针经过时整行变色

15.3.3最终合并代码

15.4辅助：使用jQuery实现更多效果

15.4.1用jQuery实现斑马纹效果

15.4.2用jQuery实现“前3行”特殊样式

15.4.3用jQuery实现渐变背景色表格效果

15.4.4用jQuery实现鼠标指针经过变色效果

15.5案例——日历

15.5.1搭建HTML结构

15.5.2设置整体样式和表头样式

15.5.3设置日历单元格样式

15.6本章小结

第16章 用CSS设置链接与导航菜单

16.1丰富的超链接特效

16.2创建按钮式超链接

16.3制作荧光灯效果的菜单

16.3.1HTML框架

16.3.2设置容器的CSS样式

16.3.3设置菜单项的CSS样式

16.4控制鼠标指针

16.5设置项目列表样式

16.5.1列表的符号

16.5.2图片符号

16.6创建简单的导航菜单

16.6.1简单的竖直排列菜单

16.6.2横竖自由转换菜单

16.7设置图片翻转效果

16.8应用滑动门技术的玻璃效果菜单

16.8.1基本思路

16.8.2设置菜单整体效果

16.8.3使用“滑动门”技术设置玻璃材质背景

16.8.4进一步解决的问题

16.9鼠标指针经过时给图片增加边框

16.10本章小结

第17章 用CSS建立表单

17.1表单的用途和原理

17.2表单输入类型

17.2.1文本输入框

17.2.2单选按钮

17.2.3复选按钮

17.2.4密码输入框

17.2.5按钮

17.2.6多行文本框

17.2.7列表框

17.3CSS与表单

17.3.1表单中的元素

17.3.2像文字一样的按钮

17.3.3多彩的下拉菜单

17.4案例——“数独”游戏网页

17.4.1搭建基本表格

17.4.2设置表格样式

17.4.3加入文本输入框

17.4.4设置文本输入框的样式

17.5对齐文本框和旁边的图像按钮

17.6本章小结

第18章 网页样式综合案例——灵活的电子相册

18.1搭建框架

18.2阵列模式

18.3单列模式

18.4改进阵列模式

18.5IE6兼容

18.6双向联动模式

18.6.1在Firefox中实现

18.6.2IE6兼容

18.6.3改变方向

18.7本章小结

第四部分 CSS布局篇

第19章 固定宽度布局剖析与制作

19.1向报纸学习排版思想

19.2CSS排版观念

19.2.1两列布局

19.2.2三列布局

19.2.3多列布局

19.2.4布局结构的表达式与结构图

19.3圆角框

19.3.1准备图像

19.3.2搭建HTML结构

19.3.3放置背景图像

19.3.4设置样式并修复缺口

19.4单列布局

19.4.1放置第一个圆角框

19.4.2设置圆角框的CSS样式

19.4.3放置其他圆角框

19.5“1-2-1”固定宽度布局

19.5.1准备工作

19.5.2绝对定位法

19.5.3浮动法

19.6“1-3-1”固定宽度布局

19.7“1-((1-2)+1)-1”固定宽度布局

19.8本章小结

第20章 变宽度网页布局剖析与制作

20.1“1-2-1”变宽度网页布局

20.1.1“1-2-1”等比例变宽布局

20.1.2“1-2-1”单列变宽布局

20.2“1-3-1”宽度适应布局

20.2.1“1-3-1”三列宽度等比例布局

20.2.2“1-3-1”单侧列宽度固定的变宽布局

20.2.3“1-3-1”中间列宽度固定的变宽布局

20.2.4进一步的思考

20.2.5“1-3-1”双侧列宽度固定的变宽布局

20.2.6“1-3-1”中列和侧列宽度固定的变宽布局

20.3变宽布局方法总结

20.4分列布局背景色问题

20.4.1设置固定宽度布局的列背景色

20.4.2设置特殊宽度变化布局的列背景色

20.4.3设置单列宽度变化布局的列背景色

20.5CSS排版与传统的表格方式排版的分析

20.6浏览器的兼容性问题

20.7CSS布局页面的调试技巧

20.7.1技巧1：设置背景色或者边框，确定错误范围

20.7.2技巧2：删除无关代码，暴露核心矛盾

20.7.3技巧3：先用Firefox调试，然后使它兼容IE

20.7.4技巧4：善于利用工具，提高调试效率

20.7.5技巧5：善于提问，寻求帮助

20.8本章小结

第21章 网页布局综合案例——儿童用品网上商店

21.1案例概述

21.2内容分析

21.3HTML结构设计

21.4原型设计

21.5页面方案设计

21.6布局设计

21.6.1整体样式设计

21.6.2页头部分

21.6.3内容部分

21.6.4页脚部分

21.7细节设计

21.7.1页头部分

21.7.2内容部分

21.7.3左侧的主要内容列

21.7.4右边栏

21.8CSS布局的优点

21.9交互效果设计

21.9.1次导航栏

21.9.2主导航栏

21.9.3账号区

21.9.4图像边框

21.9.5产品分类

21.10遵从Web标准的设计流程

21.11从“网页”到“网站”

21.11.1历史回顾

21.11.2不完善的办法

21.11.3服务器出场

21.11.4CMS出现

21.11.5具体操作

21.12本章小结

第22章 网站发布与管理

A.1在Internet上建立自己的Web站点

A.1.1制作网站内容

A.1.2申请域名

A.1.3信息发布

A.2租用虚拟主机空间

A.2.1了解基本的技术名词

A.2.2选择和租用虚拟主机

A.3向服务器上传网站内容

A.3.1使用Dreamweaver上传文件

A.3.2使用IE浏览器上传文件

A.3.3使用专业FTP工具上传文件

A.4网站管理

A.4.1修改密码

A.4.2集团邮箱管理

A.4.3注意事项

四、关于证书

1.学员学习完毕，经考核成绩合格，零点起航学校颁发培训证书。

2.学员可以参加教育部组织和实施的“Web程序设计(二级)”考试，获取国家级证书。