HTML+DIV+CSS网页设计与布局实用教程

目 录 第1章 HTML入门 1 1.1 什么是HTML 1 1.1.1 HTML的特点 1 1.1.2 HTML的历史 2 1.2 HTML文件的基本结构 2 1.2.1 HTML文件结构 2 1.2.2 编写HTML文件的注意事项 4 1.3 HTML文件的编写方法 4 1.3.1 使用记事本编写HTML页面 4 1.3.2 使用Dreamweaver CC 编写HTML页面 6 1.4 网页设计与开发的过程 7 1.4.1 明确网站定位 7 1.4.2 收集信息和素材 7 1.4.3 规划栏目结构 8 1.4.4 设计网页图像 9 1.4.5 制作页面 9 1.4.6 实现后台功能 10 1.4.7 网站的测试与发布 12 本章小结 12 练习题 13 第2章 HTML基本标签 14 2.1 HTML页面主体标签 14 2.1.1 定义网页背景色：bgcolor 14 2.1.2 设置背景图片：background 15 2.1.3 设置文字颜色：text 16 2.1.4 设置链接文字属性 17 2.1.5 设置页面边距 20 2.2 head部分标签 21 2.2.1 标题标签： 21 2.2.2 定义页面关键字 22 2.2.3 定义页面描述 23 2.2.4 定义网页编辑工具 24 2.2.5 定义作者信息 24 2.2.6 定义网页文字及语言 25 2.2.7 定义网页的定时跳转 25 2.3 综合实例——创建基本的HTML 文件 26 本章小结 29 练习题 29 第3章 用HTML设置文字、段落 与列表 31 3.1 标题字 31 3.1.1 标题字标签： 31 3.1.2 标题字对齐属性：align 32 3.2 插入其他标记 33 3.2.1 输入空格符号 33 3.2.2 输入特殊符号 34 3.3 设置段落的格式 35 3.3.1 段落标签： 35 3.3.2 段落的对齐属性：align 36 3.3.3 不换行标签： 37 3.3.4 换行标签： 38 3.4 水平线标签 39 3.4.1 插入水平线标签： 39 3.4.2 设置水平线宽度与高度的 属性：width、size 40 3.4.3 设置水平线的颜色：color 41 3.4.4 设置水平线的对齐方式： align 42 3.4.5 水平线去掉阴影：noshade 43 3.5 使用设置滚动效果 44 3.5.1 标签及其属性 44 3.5.2 使用标签插入滚动 公告 45 3.6 综合实例——设置页面文本及段落 49 本章小结 51 练习题 52 第4章 列表的建立和使用 53 4.1 使用无序列表 53 4.1.1 无序列表标签： 53 4.1.2 设置无序列表类型的 属性type 54 4.1.3 菜单列表标签： 55 4.1.4 目录列表： 56 4.2 使用有序列表 58 4.2.1 有序列表标签： 58 4.2.2 有序列表类型的属性：type 59 4.2.3 有序列表的起始数值：start 60 4.3 列表条目元素 61 4.3.1 项目符号的类型：type 61 4.3.2 条目编号：value 62 4.4 定义列表标签 63 本章小结 65 练习题 65 第5章 用HTML创建精彩的图像和 多媒体页面 67 5.1 网页中常见的图像格式 67 5.2 插入图像并设置图像属性 68 5.2.1 图像标签： 68 5.2.2 图像的源文件：src 69 5.2.3 图像的提示文字：alt 70 5.2.4 图像的宽度和高度：width、 height 71 5.3 添加多媒体文件 72 5.3.1 添加多媒体文件标签： 72 5.3.2 设置自动运行：autostart 73 5.4 添加背景音乐 74 5.4.1 设置背景音乐： 74 5.4.2 设置循环播放次数：loop 75 5.5 插入Flash动画 76 5.6 综合实例 77 综合实例1——创建多媒体网页 78 综合实例2——创建图文混合排版 网页 79 本章小结 82 练习题 82 第6章 用HTML创建超链接 84 6.1 超链接的基本概念 84 6.2 创建基本超链接 84 6.2.1 超链接标签 85 6.2.2 设置目标窗口 86 6.3 创建图像超链接 87 6.3.1 设置图像超链接 87 6.3.2 设置图像热区链接 88 6.4 创建锚点链接 90 6.4.1 创建锚点 90 6.4.2 锚点链接 92 6.5 外部链接 95 6.5.1 链接到外部网站 96 6.5.2 链接到E-Mail 96 6.5.3 链接到FTP 97 6.5.4 链接到Telnet 98 6.5.5 下载文件 99 6.6 综合实例——给网页添加链接 100 本章小结 102 练习题 102 第7章 用HTML创建表格 103 7.1 创建并设置表格属性 103 7.1.1 表格的基本标签： 103 7.1.2 表格宽度和高度：width、 height 104 7.1.3 表格的标题： 105 7.1.4 表格的表头： 107 7.1.5 表格对齐方式：align 109 7.1.6 表格的边框宽度：border 110 7.1.7 表格边框颜色：bordercolor 111 7.1.8 单元格间距：cellspacing 112 7.1.9 单元格边距：cellpadding 113 7.1.10 表格的背景色：bgcolor 114 7.1.11 表格的背景图像： background 115 7.2 表格的结构标签 117 7.2.1 设计表头样式： 117 7.2.2 设计表主体样式： 118 7.2.3 设计表尾样式： 120 7.3 综合实例——使用表格排版网页 121 本章小结 126 练习题 126 第8章 用表单创建交互式网页 128 8.1 插入表单： 128 8.1.1 处理动作：action 128 8.1.2 表单名称：name 129 8.1.3 传送方法：method 129 8.1.4 编码方式：enctype 130 8.1.5 目标显示方式：target 131 8.2 表单控件： 132 8.2.1 文本字段：text 132 8.2.2 密码域：password 134 8.2.3 单选按钮：radio 135 8.2.4 复选框：checkbox 136 8.2.5 普通按钮：button 138 8.2.6 提交按钮：submit 139 8.2.7 重置按钮：reset 140 8.2.8 图像域：image 142 8.2.9 隐藏域：hidden 143 8.2.10 文件域：file 144 8.3 选择列表条目标签： 145 8.4 选择列表标签： 147 8.4.1 高度属性：size 147 8.4.2 多项选择属性：multiple 148 8.5 文本区域标签： 150 本章小结 151 练习题 151 第9章 HTML 5的结构 153 9.1 认识HTML 5 153 9.2 HTML 5的新特性 154 9.3 HTML 5与HTML 4的区别 155 9.3.1 HTML 5的语法变化 155 9.3.2 HTML 5中的标记方法 155 9.3.3 HTML 5语法中的3个 要点 156 9.4 新增的主体结构标签 157 9.4.1 标签 157 9.4.2 标签 158 9.4.3 标签 159 9.4.4 标签 160 9.4.5 标签 161 9.4.6 pubdate属性 162 9.5 新增的非主体结构标签 163 9.5.1 标签 163 9.5.2 标签 164 9.5.3 标签 165 9.5.4 标签 166 本章小结 167 练习题 167 第10章 CSS基础知识 169 10.1 为什么要在网页中加入CSS 169 10.1.1 什么是CSS 169 10.1.2 使用CSS的好处 170 10.1.3 如何编写CSS 171 10.1.4 CSS的基本语法 171 10.1.5 浏览器与CSS 172 10.2 基本CSS选择器 172 10.2.1 标签选择器 173 10.2.2 class选择器 173 10.2.3 ID选择器 174 10.3 在HTML中使用CSS 176 10.3.1 链接外部样式表 176 10.3.2 行内方式 177 10.3.3 嵌入外部样式表 177 10.3.4 定义内部样式表 177 本章小结 178 练习题 178 第11章 用CSS设计丰富的文字 效果 180 11.1 设计网页中的文字样式 180 11.1.1 字体 181 11.1.2 字号 182 11.1.3 加粗 183 11.1.4 样式 184 11.1.5 变体属性 185 11.1.6 文字修饰 186 11.2 设计文本的段落样式 187 11.2.1 行高 187 11.2.2 对齐 188 11.2.3 缩进 190 11.2.4 单词间距 191 11.2.5 首字下沉 192 11.2.6 大小写转换 192 11.3 综合实例——用CSS排版网页 文字 193 本章小结 197 练习题 197 第12章 用CSS设计图像和背景 199 12.1 设置网页的背景 199 12.1.1 背景颜色：background- color 199 12.1.2 背景图像：background- image 200 12.2 设置背景图像的属性 202 12.2.1 设置背景重复： background-repeat 202 12.2.2 设置固定背景： background-attachment 203 12.2.3 设置背景定位： background-position 204 12.3 设置网页图像的样式 206 12.3.1 设置图像边框 206 12.3.2 图文混合排版 208 12.4 综合实例——给图片添加边框 209 本章小结 212 练习题 212 第13章 用CSS设计表格和表单 样式 214 13.1 网页中的表格 214 13.1.1 表格对象标签 214 13.1.2 在Dreamweaver中插入 表格 215 13.1.3 设置表格的颜色 216 13.1.4 设置表格的边框样式 217 13.1.5 设置表格的阴影 219 13.2 网页中的表单 219 13.2.1 表单对象 219 13.2.2 表单标签 220 13.2.3 表单的布局设计 220 13.2.4 设置边框样式 224 13.2.5 设置背景样式 224 13.2.6 设置输入文本的样式 225 13.3 综合实例 225 综合实例1——制作变换背景色的 表格 225 综合实例2——设计表单的样式 227 本章小结 229 练习题 230 第14章 用CSS制作链接与网站 导航 231 14.1 链接标签 231 14.1.1 a:link 231 14.1.2 a:visited 232 14.1.3 a:active 233 14.1.4 a:hover 234 14.2 创建按钮式超链接 235 14.3 控制鼠标指针 237 14.4 设置项目列表样式 238 14.4.1 列表符号类型：list-style- type 238 14.4.2 列表符号的混用 241 14.4.3 列表图像属性：list-style- image 242 14.4.4 列表综合属性：list-style 243 14.5 创建简单的导航菜单 244 14.5.1 简单的竖直排列菜单 244 14.5.2 横竖自由转换导航菜单 246 本章小结 247 练习题 247 第15章 CSS DIV布局定位基础 248 15.1 网站与Web标准 248 15.1.1 什么是Web标准 248 15.1.2 为什么要建立Web标准 249 15.1.3 怎样改善现有网站 250 15.2 标签与标签 251 15.2.1 概述 251 15.2.2 与的区别 252 本章小结 254 练习题 254 第16章 CSS盒子模型 255 16.1 “盒子”与“模型”的概念 255 16.2 边框：border 257 16.2.1 边框宽度：border-width 257 16.2.2 边框颜色：border-color 258 16.2.3 边框样式：border-style 259 16.3 设置内边距：padding 261 16.3.1 顶部属性：padding-top 261 16.3.2 右侧属性：padding-right 262 16.3.3 底部属性：padding- bottom 263 16.3.4 左侧属性：padding-left 264 16.4 设置外边距：margin 265 16.4.1 顶部边界属性：margin- top 266 16.4.2 右侧边界属性：margin- right 267 16.4.3 底部边界属性：margin- bottom 268 16.4.4 左侧边界属性：margin- left 268 本章小结 269 练习题 270 第17章 盒子的浮动与定位 271 17.1 盒子的浮动 271 17.1.1 元素的浮动属性：float 271 17.1.2 清除浮动属性：clear 275 17.2 元素的定位 277 17.2.1 元素的定位属性： position 277 17.2.2 上边偏移属性top、下边偏移 属性bottom 279 17.2.3 左边偏移属性left、右边偏移 属性right 280 17.3 盒子的定位 281 17.3.1 定位：absolute 282 17.3.2 固定定位：fixed 284 17.3.3 相对定位：relative 286 17.3.4 静态定位：static 288 17.4 z-index空间位置 289 本章小结 291 练习题 291 第18章 CSS DIV布局方法 292 18.1 CSS布局理念 292 18.2 固定宽度布局 293 18.2.1 1列固定宽度 294 18.2.2 两列固定宽度 295 18.2.3 圆角框 297 18.3 可变宽度布局 299 18.3.1 1列自适应 299 18.3.2 两列宽度自适应 300 18.3.3 两列右列宽度自适应 302 18.3.4 3列浮动中间宽度自适应 302 18.3.5 3行2列居中高度自适应 304 18.4 CSS布局与传统的表格方式布局 分析 306 本章小结 309 练习题 309 第19章 CSS 3入门基础 310 19.1 预览激动人心的CSS 3 310 19.1.1 CSS 3的发展历史 310 19.1.2 CSS 3新增特性 311 19.1.3 主流浏览器对CSS 3的 支持 315 19.2 使用CSS 3实现圆角表格 316 19.3 使用CSS 3制作图片滚动菜单 318 19.4 使用CSS 3制作文字立体效果 323 19.5 使用CSS 3制作多彩的网页 图片库 324 本章小结 327 练习题 328 第20章 设计和制作适合手机浏览的 网页 329 20.1 怎样进行网站策划 329 20.1.1 网站策划的原则 329 20.1.2 网站策划的关键点 330 20.2 网站的定位 331 20.3 确定网站的目标用户 332 20.4 网站的内容策划 333 20.4.1 网站内容策划的重要性 333 20.4.2 如何做好网站内容策划 333 20.5 手机网页设计 334 20.6 整体布局 335 20.6.1 设计分析 335 20.6.2 排版架构 336 20.7 制作首页 339 20.7.1 定义页面的整体样式 339 20.7.2 body_header部分制作 340 20.7.3 body_banner部分制作 340 20.7.4 body_main部分制作 342 20.7.5 body_footer部分制作 344 本章小结 345 练习题 345 第21章 公司宣传网站的布局 347 21.1 案例概述 347 21.2 内容分析 348 21.3 HTML结构设计 349 21.4 页面方案设计 351 21.5 定义页面的整体样式 352 21.6 制作页面头部 354 21.6.1 制作页面头部的结构 355 21.6.2 定义页面头部的样式 355 21.7 制作左侧导航 356 21.7.1 制作左侧导航部分的 结构 357 21.7.2 定义左侧导航的样式 357 21.8 制作联系我们部分 359 21.8.1 制作联系我们部分的 结构 359 21.8.2 定义联系我们内容的 样式 359 21.9 制作公司介绍部分 360 21.9.1 制作公司介绍部分结构 360 21.9.2 定义公司介绍部分的 样式 360 21.10 制作图片展示和新闻动态 361 21.10.1 制作页面结构 361 21.10.2 定义页面样式 362 21.11 制作酒店订购部分 363 21.11.1 制作页面结构 363 21.11.2 定义页面样式 364 21.12 制作底部版权部分 365 本章小结 365 练习题 366