网页设计与制作
2013-4
人民邮电出版社
王君学,古淑强
王君学、古淑强主编的这本《网页设计与制作(第2版)》按照项目教学法组织教学内容。全书由14个项目构成，主要内容包括在网页中插入文本、图像、媒体、超级链接、表单等网页元素及其属性设置，使用Photoshop CS3处理图像，使用Flash 8制作动画，运用表格、框架、Div+CSS等工具对网页进行布局，使用模板和库制作网页，使用行为完善网页功能，使用层和时间轴制作动画，在可视化环境下创建应用程序以及创建、管理和维护网站的基本知识。
《网页设计与制作(第2版)》可作为中等职业学校“网页设计与制作”课程的教材，也可以作为网页设计爱好者的参考用书。
项目一 认识Dreamweaver 8 1 任务一 Dreamweaver基础 1 （一）基本概念 1 （二）HTML基础 4 任务二 认识网页制作工具 6 （一）了解网页制作工具 6 （二）了解Dreamweaver 6 任务三 制作“人生”网页 7 （一）定义站点 7 （二）创建和保存文件 8 （三）设置文本属性 9 （四）保存和管理工作区布局 11 项目实训 制作“经典摘要”网页 12 项目小结 13 思考与练习 13 项目二 创建和管理站点 15 任务一 新建站点 15 任务二 管理站点 18 （一）复制和编辑站点 18 （二）导出、删除和导入站点 19 任务三 管理站点内容 20 （一）设置首选参数 20 （二）创建文件夹和文件 22 （三）在站点地图中链接文件 23 项目实训 定义和管理站点 24 项目小结 25 思考与练习 25 项目三 文本——编排文化知识网页 26 任务一 添加文本 27 任务二 设置文本格式 29 （一）设置文档标题 29 （二）设置文档正文 30 任务三 完善辅助功能 33 项目实训 制作“敦煌壁画”网页 35 项目小结 36 思考与练习 36 项目四 图像和媒体——编排自然风景网页 38 任务一 在网页中使用图像 39 （一）处理图像 39 （二）插入图像 44 任务二 在网页中使用媒体 48 （一）制作Flash动画 48 （二）插入Flash动画 53 （三）插入图像查看器 55 （四）插入ActiveX视频 56 项目实训 设置“火焰山”网页 59 项目小结 60 思考与练习 60 项目五超级链接——设置站点导航网页 62 任务一 设置文本超级链接 63 任务二 设置锚记超级链接 66 任务三 设置电子邮件超级链接 67 任务四 设置图像和图像热点超级链接 68 项目实训 设置“望儿山的传说”网页 70 项目小结 71 思考与练习 72 项目六 表格——布局一翔网店主页 74 任务一 使用表格布局页眉 75 任务二 使用嵌套表格布局主体页面 80 （一）设置主体页面布局 81 （二）设置左侧页面布局 82 （三）设置右侧页面布局 83 任务三 使用表格布局页脚 86 项目实训 布局“电脑商城”网页 87 项目小结 88 思考与练习 89 项目七 Div+CSS——布局宝贝画展网页 91 任务一 制作页眉 92 （一）布局页眉 92 （二）设置导航栏 97 任务二 制作网页主体 100 （一）制作左侧栏目 100 （二）制作右侧栏目 102 任务三 制作页脚 108 项目实训 布局“家家乐”网页 109 项目小结 111 思考与练习 111 项目八 层和时间轴——制作海底探秘网页 114 任务一 使用层布局页面 115 （一）创建层 115 （二）设置层 119 任务二 使用时间轴制作动画 122 项目实训 制作“演员表”网页 127 项目小结 128 思考与练习 128 项目九 框架——制作林木论坛网页 131 任务一 创建论坛框架网页 132 （一）创建框架 132 （二）保存框架 133 任务二 设置论坛框架网页 135 （一）设置框架集和框架属性 135 （二）设置框架中链接的目标窗口 138 （三）使用浮动框架 138 （四）编辑无框架内容 139 项目实训 制作“竹子夜谈”网页 140 项目小结 141 思考与练习 141 项目十 库和模板——制作职业学校主页 143 任务一 制作库 144 （一）创建库项目 144 （二）编排库项目 145 任务二 制作模板 147 （一）创建模板 147 （二）插入库项目 148 （三）插入模板对象 149 任务三 制作主页 152 项目实训 制作“一翔学校”网页模板 154 项目小结 155 思考与练习 156 项目十一 行为——完善个人网页功能 158 任务一 设置页眉中的行为 159 （一）设置状态栏文本 159 （二）制作弹出式菜单 160 任务二 设置主体中的行为 161 （一）打开浏览器窗口 162 （二）交换图像 162 （三）控制Shockwave或Flash 163 （四）弹出信息 164 项目实训 制作弹出式菜单 165 项目小结 165 思考与练习 165 项目十二 表单——制作通行证注册网页 167 任务一 创建表单 168 任务二 验证表单 175 项目实训 制作表单网页 176 项目小结 178 思考与练习 178 项目十三 应用程序——制作重点学科信息管理系统 180 任务一 配置ASP网页开发环境 181 （一）配置Web服务器 181 （二）定义动态站点 181 任务二 制作前台页面 182 （一）创建数据库连接 182 （二）制作“index.asp”中的数据列表 185 （三）制作“list.asp”中的数据列表 191 （四）制作“content.asp”中的数据列表 194 任务三 制作后台页面 195 （一）制作添加内容页面 195 （二）制作编辑内容页面 198 （三）制作修改内容页面 201 （四）制作删除内容页面 203 任务四 用户身份验证 204 （一）制作用户注册页面 204 （二）用户登录和注销 205 （三）限制对页的访问 206 项目实训 制作“用户管理”页面 207 项目小结 210 思考与练习 210 项目十四 测试和发布网站 212 任务一 测试网站 212 （一）检查链接 212 （二）改变链接 213 （三）查找和替换 213 （四）清理文档 214 任务二 配置IIS服务器 215 （一）配置Web服务器 215 （二）配置FTP服务器 217 任务三 发布网站 217 （一）发布网站 217 （二）保持同步 219 项目实训 配置服务器和发布站点 220 项目小结 220 思考与练习 220
版权页： 插图： Div+CSS布局技术涉及网页两个重要的组成部分：结构和表现。在一个网页中，内容可以包含很多，如标题、正文、图像等，通过Div可以将这些内容元素放置到各个Div中，构成网页的“结构”；然后再运用CSS样式设置Div中的文字、图像、列表等元素的“表现”效果，这样就实现了网页内容与表现形式的分离，也使得网页运行效率更高，更加容易维护。但使用Div+CSS布局也会带来一些缺陷，其中最重要的一项就是浏览器的兼容性问题。在W3C标准推出后，虽然各厂商纷纷表示会遵从这些新的标准，但实际上却还是存在着一些问题，造成了网站在不同的浏览器下有着不同的显示效果。但是，目前的浏览器在下一代的研发中会逐渐解决这一问题，共同实现对Web新标准的统一支持。 表格和Div+CSS这两种网页布局技术都有各自的优势和缺陷，因此，在实际应用中将表格与Div+CSS两种布局技术相互配合使用可能效果最好。那么，在实践中什么时候使用表格技术，什么时候使用Div+CSS技术，这既需要考虑网页的实际设计需要、个人设计习惯，又需要综合考虑Web标准。一般，可以按以下原则来考虑：①网页各版块的布局和定位使用Div+CSS技术来完成；②网页显示数据的区域使用表格技术来完成。 在了解了以上基本知识后，本任务将使用表格与Div+CSS两种技术来布局页眉。 （一） 布局页眉 在现代网页布局中，经常用到Div，而Div本身只是一个区域标签，不能定位与布局，真正定位的是CSS代码。下面介绍使用Div标签和CSS样式布局页眉的基本方法。 【操作步骤】 1. 首先定义一个本地静态站点，然后将素材文件复制到站点根文件夹下。 2. 新建一个网页文档，并保存为“index.htm”。 3. 选择【修改】／【页面属性】命令，打开【页面属性】对话框。在【外观】分类中设置页面字体为“宋体”，大小为“14像素”，边距均为“2像素”；在匝标题／编码卫分类中设置标题为“宝贝画展”，然后单击按钮关闭对话框。 4. 在菜单栏中选择【插入】／【布局对象】／【DiV标签】命令，或在匝插入卫／匝布局卫面板中单击（插入Div标签）按钮，打开匝插入Div标签卫对话框，在【插入】下拉列表中选择“在插入点”选项，在【ID】下拉列表框中输入“head”，如图7—2所示。
《中等职业学校计算机系列教材:网页设计与制作(第2版)(项目教学)》可作为中等职业学校“网页设计与制作”课程的教材，也可以作为网页设计爱好者的参考用书。
