网页制作综合技术教程
2009-5
人民邮电出版社
温谦 等 著
351
无
随着互联网技术的迅速发展，网页设计、网站开发等职业随之应运而生了。在伴随着网站设计与开发技术发展的过程中，相应的工作流程也在不断地变化和完善。目前，网页设计与开发已经成为了一项综合性、技术性都很强的专业工作。因此，我们希望编写一本具有较强综合性和实践性的教学用书。本书结合了作者多年的网页设计、开发教学和工程实践经验，以HTML、CSS和JavaScript为主线，即以Dreamweavel为开发工具，通过实例介绍在Dreamweavel软件中如何运用HTML、CSS及JavaScript程序代码来制作网页。编写和出版本书的指导思想有如下三点： “技术原理”与“配套工具”相配合，先讲清原理，再实际操作；·网页设计的综合性很强，涉及很多不同方面的技术，因此本教程强调“综合”掌握相关技术，“综合”使用相应软件和工具； 教学与实践环节相配合。
HTML和CSS这两个标准，以及使用制作网页中常用的软件进行网页设计和制作的各方面内容和技巧。《网页制作综合技术教程》分为6部分18章，内容包括HTML网页设计、美工与动画元素设计、CSS页面样式设计、CSS页面布局设计、JavaScript基础以及综合案例等。全书遵循Web标准，强调网页中“表现”与“内容”分离的思想，从规范的角度全面系统地介绍网页设计的制作方法与技巧。书中给出了大量详细的案例，并进行了详细的分析，便于读者理解。《网页制作综合技术教程》可作为高等院校各专业“网页设计与制作”课程的教材，也可供网页设计、制作和开发人员参考使用。
第1部分 HTML网页设计第1章 网页设计基础知识 21.1 网页的基础概念 21.2 网页与HTML 31.3 Web标准 41.3.1 标准的重要性 41.3.2 “Web标准”概述 51.4 网页设计与开发过程 61.4.1 基本任务与角色 61.4.2 明确网站定位 71.4.3 收集信息和素材 71.4.4 策划栏目内容 71.4.5 设计页面方案 81.4.6 制作页面 81.4.7 实现后台功能 81.4.8 整合与测试网站 81.5 HTML基础 91.5.1 创建第一个HTML文件 91.5.2 HTML文件结构 101.6 简单的HTML案例 111.7 网页源文件的获取 141.7.1 直接查看源文件 141.7.2 保存网页 151.8 利用Dreamweaver快速建立基本文档 161.8.1 Dreamweaver简介 161.8.2 创建新的空白文档 171.8.3 案例——创建新文档 191.9 思考与练习 21第2章 用HTML设置文本和图像 232.1 文本排版 232.1.1 实现段落与段内换行 232.1.2 设置标题 252.1.3 使文字水平居中 252.1.4 设置文字段落的缩进 262.2 文字列表 262.2.1 建立无序列表 262.2.2 建立有序列表 272.3 HTML标记与HTML属性 282.3.1 控制段落的水平位置 282.3.2 设置背景颜色 282.3.3 文字的特殊样式 292.3.4 文字的大小和颜色 302.4 HTML标记和属性的局限性 312.5 特殊文字符号 312.6 使用图像 332.6.1 网页中的图像格式 332.6.2 简单案例 332.6.3 文件路径 342.7 设置图片的尺寸 362.8 设置图像的替换文本 372.9 利用Dreamweaver设置文本和图像 372.10 利用Dreamweaver代码视图提高效率 412.10.1 代码提示 412.10.2 代码折叠 422.10.3 拆分视图与代码快速定位 432.11 思考与练习 43第3章 超链接 453.1 设置文字超链接 453.1.1 URL的格式 453.1.2 URL的类型 463.2 设置页面内部链接 473.3 设置图片超链接 483.4 设置电子邮件链接 483.5 设置链接页面的目标窗口 493.6 创建热点区域 493.6.1 用HTML建立热点区域 503.6.2 利用Dreamweaver定位热点区域 513.7 框架之间的链接 533.7.1 建立框架与框架集 533.7.2 用cols属性将窗口分为左右部分 543.7.3 用rows属性将窗口分为上下部分 543.7.4 框架的嵌套 553.7.5 在框架中插入网页 553.7.6 在框架之间进行链接 563.7.7 嵌入式框架 583.8 网站的组织结构与维护 593.9 思考与练习 60第4章 使用表格与表单 614.1 使用表格 614.1.1 表格的基本结构 614.1.2 合并单元格 624.1.3 设置对齐方式 634.1.4 设置表格背景色和边框颜色 654.1.5 cellpadding属性和cellspacing属性 664.1.6 完整的表格标记 664.1.7 用表格进行页面布局的局限性 684.2 使用表单 714.2.1 表单的用途和原理 714.2.2 表单类型 724.3 Dreamweaver中的模板 764.3.1 认识模板 764.3.2 制作模板 774.3.3 使用模板 784.3.4 将文档和模板分离 804.4 思考与练习 81第2部分 美工与动画元素设计第5章 图像处理与设计基础 845.1 网页美术设计的基础知识 845.1.1 基本概念 845.1.2 Fireworks的基本操作流程 855.1.3 画布 885.2 在Fireworks中编辑位图 915.2.1 创建和取消选区 915.2.2 编辑选区中的像素区域 945.2.3 变形和扭曲 965.3 绘制矢量图形 975.3.1 创建基本矢量图形 975.3.2 调整矢量线条 995.4 美术基础理论 1015.4.1 平面构图 1015.4.2 色彩 1035.5 案例——科技网站页面设计 1055.5.1 绘制背景 1065.5.2 绘制主体区域 1065.5.3 制作Banner 1085.5.4 添加文字和素材 1095.6 思考与练习 110第6章 图像的优化与导出 1116.1 了解图像文件类型 1116.2 使用“图像预览”命令优化导出图像 1126.2.1 使用“图像预览”命令 1126.2.2 优化JPEG格式的图像 1136.2.3 优化GIF格式的图像 1136.3 使用“切片” 1156.3.1 切片与导出 1156.3.2 用切片实现“分别优化” 1196.4 思考与练习 121第7章 在网页中使用Flash 1227.1 使用Dreamweaver添加内置的Flash对象 1227.1.1 使用Dreamweaver内置的Flash按钮对象 1227.1.2 使用Dreamweaver内置的Flash文本对象 1237.2 Flash软件简介 1247.2.1 Flash的基本功能 1247.2.2 Flash的工作界面 1257.2.3 Flash的工作流程 1267.3 在Flash中绘制图形 1277.4 Flash动画基本原理 1287.5 创建形状补间动画 1297.6 动画补间 1317.7 在网页中发布Flash动画 1347.7.1 插入动画 1357.7.2 设置Flash对象的属性 1367.8 思考与练习 137第3部分 CSS样式设计第8章 （X）HTML与CSS概述 1408.1 HTML与XHTML 1408.1.1 追根溯源 1408.1.2 DOCTYPE的含义与选择 1418.1.3 XHTML与HTML的重要区别 1428.2 （X）HTML与CSS 1438.2.1 CSS标准 1438.2.2 传统HTML的缺点 1448.2.3 CSS的引入 1448.2.4 如何编辑CSS 1468.2.5 浏览器与CSS 1468.3 构造CSS规则 1478.4 基本CSS选择器 1488.4.1 标记选择器 1498.4.2 类别选择器 1498.4.3 ID选择器 1528.5 在HTML中使用CSS的方法 1538.5.1 行内式 1538.5.2 内嵌式 1548.5.3 链接式 1548.5.4 导入式 1558.5.5 各种方式的优先级问题 1578.6 思考与练习 159第9章 CSS样式设置实践 1609.1 手工编写页面 1609.1.1 构造页面框架 1609.1.2 设置标题 1619.1.3 控制图片 1629.1.4 设置正文 1629.1.5 设置整体页面 1639.1.6 对段落分别进行设置 1639.1.7 完整代码 1649.1.8 CSS的注释 1659.2 使用Dreamweaver进行CSS设置 1659.2.1 创建页面 1659.2.2 新建CSS规则 1679.2.3 编辑CSS规则 1699.2.4 为图像创建CSS规则 1709.3 复合选择器 1729.3.1 “交集”选择器 1729.3.2 “并集”选择器 1739.3.3 后代选择器 1759.4 CSS的继承特性 1769.4.1 继承关系 1779.4.2 CSS继承的运用 1789.5 CSS的层叠特性 1799.6 思考与练习 181第10章 用CSS设置文本和图像 18210.1 使用CSS设置文本样式 18210.1.1 长度单位 18210.1.2 准备页面 18310.1.3 设置文字的字体 18310.1.4 设置文字的倾斜效果 18410.1.5 设置文字的加粗效果 18510.1.6 英文字母大小写转换 18610.1.7 控制文字的大小 18610.1.8 文字的装饰效果 18710.1.9 设置段落首行缩进 18810.1.10 设置字词间距 18910.1.11 设置段落内部的文字行高 18910.1.12 设置段落之间的距离 19010.1.13 控制文本的水平位置 19110.1.14 设置文字与背景的颜色 19210.2 用CSS设置图像样式 19310.2.1 设置图片边框 19310.2.2 图片缩放 19510.2.3 图文混排 19610.2.4 案例——八大行星科普网页 19810.2.5 设置图片与文字的对齐方式 20110.3 用CSS设置背景样式 20510.3.1 设置背景颜色 20510.3.2 设置背景图像 20610.3.3 设置背景图像平铺 20710.3.4 设置背景图像位置 20910.3.5 固定背景图片位置 21110.3.6 设置标题的图像替换 21210.4 思考与练习 214第11章 用CSS设置链接与导航菜单 21611.1 丰富的超链接特效 21711.2 控制鼠标指针 21911.3 设置项目列表样式 21911.3.1 列表的符号 22011.3.2 图片符号 22111.4 创建简单的导航菜单 22311.4.1 简单的竖直排列菜单 22311.4.2 横竖自由转换菜单 22511.5 应用滑动门技术的玻璃效果菜单 22611.5.1 基本思路 22611.5.2 设置菜单整体效果 22711.5.3 使用“滑动门”技术设置玻璃材质背景 22811.5.4 进一步解决的问题 22911.6 思考与练习 230第12章 用CSS设置表格和表单样式 23112.1 控制表格 23112.1.1 设置表格的边框 23112.1.2 确定表格的宽度 23412.1.3 其他与表格相关的标记 23412.2 美化表格 23512.2.1 搭建HTML结构 23512.2.2 整体设置 23612.2.3 设置单元格样式 23712.2.4 斑马纹效果 23712.3 案例——日历 23812.3.1 搭建HTML结构 23912.3.2 设置整体样式和表头样式 24012.3.3 设置日历单元格样式 24112.4 CSS与表单 24312.4.1 表单中的元素 24412.4.2 多彩的下拉菜单 24612.5 案例——网上调查问卷 24712.6 思考与练习 249第4部分 CSS页面布局设计第13章 CSS盒子模型 25213.1 “盒子”与“模型”的概念探究 25213.2 边框 25313.2.1 设置边框样式 25413.2.2 属性值的简写形式 25513.3 设置内边距 25613.4 设置外边距 25713.5 盒子之间的关系 25813.5.1 HTML与DOM 25913.5.2 标准文档流 26113.5.3 标记与标记 26213.6 盒子在标准流中的定位原则 26413.6.1 行内元素之间的水平margin 26413.6.2 块级元素之间的竖直margin 26513.6.3 嵌套盒子之间的margin 26613.6.4 margin可以设置为负值 26813.7 盒子模型概念的案例 26913.8 思考与练习 272第14章 盒子的浮动与定位 27314.1 盒子的浮动 27314.1.1 准备代码 27314.1.2 实验1——设置第1个浮动的div 27414.1.3 实验2——设置第2个浮动的div 27514.1.4 实验3——设置第3个浮动的div 27514.1.5 实验4——改变浮动的方向 27514.1.6 实验5——再次改变浮动的方向 27614.1.7 实验6——全部向左浮动 27714.1.8 实验7——使用clear属性清除浮动的影响 27714.1.9 实验8——扩展盒子的高度 27814.2 盒子的定位 27914.2.1 静态定位 28014.2.2 相对定位 28014.2.3 绝对定位 28314.2.4 固定定位 28814.3 z-index空间位置 28814.4 盒子的display属性 28814.5 思考与练习 289第15章 CSS+div布局方法剖析 29015.1 CSS排版观念 29015.1.1 将页面用div分块 29015.1.2 设计各块的位置 29115.1.3 用CSS定位 29215.2 固定宽度且居中的版式 29415.2.1 方法一 29415.2.2 方法二 29615.3 左中右版式 29715.4 块的背景色问题 29915.5 div排版与传统的表格方式排版的分析 30115.6 排版实例：电子相册 30215.6.1 搭建框架 30315.6.2 幻灯片模式 30415.6.3 详细信息模式 30715.7 思考与练习 308第5部分 JavaScript基础第16章 使用JavaScript增强网页效果 31016.1 JavaScript概述 31016.1.1 JavaScript简介 31016.1.2 JavaScript的特点 31016.1.3 JavaScript与CSS 31116.2 JavaScript语法基础 31116.2.1 数据类型和变量 31216.2.2 表达式及运算符 31316.2.3 基本语句 31416.3 使用 Dreamweaver的“行为”功能 31716.3.1 “行为”的本质 31716.3.2 “行为”的构成 31816.3.3 案例——交换图像与恢复交换图像 31816.4 使用JavaScript库jQeury 32116.4.1 jQuery的概念 32216.4.2 jQuery的优势 32216.4.3 下载并使用jQuery 32516.4.4 用jQuery实现“前3行”特殊样式 32516.4.5 用jQuery实现渐变背景色表格效果 32616.5 思考与练习 327第6部分 综合案例第17章 综合案例——企业网站 33017.1 分析构架 33017.1.1 设计分析 33117.1.2 排版构架 33117.2 模块拆分 33217.2.1 Logo与顶端链接 33217.2.2 左侧导航与搜索 33317.2.3 主体内容 33417.2.4 内容Banner 33517.2.5 新闻快递 33517.2.6 公司咨询 33617.2.7 英文刊物 33717.3 整体调整 34017.4 思考与练习 340第18章 综合案例——网上购物网站 34118.1 分析构架 34118.1.1 设计分析 34118.1.2 排版构架 34218.2 模块分析 34318.2.1 Banner图片 34318.2.2 导航菜单 34418.2.3 鲜花导购 34518.2.4 主体内容 34818.3 整体调整 350参考文献 351
通常来说，最终导出的文件由于文件大小的限制，质量都会比制作出来的原始图像有所下降。例如，绘制的图像可能比较大，每一个细节都很清晰，但是这样的文件就会很大，而为了适用于网页，就必须在导出时做一些处理，尽可能在保持清晰的情况下减小文件大小。但是或多或少，图像质量还是有所损失，因此对于每一个作品都应该保留一个“源文件”，它是没有任何损失的，这样以后还可以随时导出为不同格式或质量的文件。这里所说的“优化”常常和“导出”同时进行，就是在导出的时候再进行优化。另外，要注意，所谓“优化”并不是使图像的质量更高，而是使文件变小。 优化和导出图像最方便的方法是使用“图像预览”命令。当绘制完成一幅图像以后，选择菜单栏中的“图像预览”命令，就会打开“图像预览”窗口，如图6．1所示，要做的工作就是在其中进行设置，然后单击“导出”按钮，导出最终的成果文件。“图像预览”的预览区域所显示的文档或图像与导出时的完全相同，该区域还估算当前导出设置下的文件大小和下载时间。在“预览图像”的左侧进行相关选项的设置，同时在右侧预览导出以后的效果，以及导出后的文件大小。随着参数的调整，预览图和文件大小的数值都会随之改变，直到满意后单击“导出”按钮即可。如果暂时不导出，可以单击“确定”按钮，这些设置会保存下来，下次预览的时候会按照设定的选项进行显示。
无