本书遵循“以真实项目为载体，以学习者为中心”的原则进行教学设计。读者通过制作5个由易到难的完整网页，循序渐进地学习静态网站的策划、制作及上传等全过程。本书选取具有深厚历史底蕴的景点“湘潭窑湾”作为引导项目的主题。引导项目分为3个子项目。项目1为网站总体设计，项目2为表格布局的网页制作，项目3为DIV+CSS布局的网页制作及上传。在引导项目中，以网页制作为主线设计了14个主任务、53个子任务。针对每个主任务，设计了学习导图、任务描述、任务实施、考核评价、问题探究等学习环节。每个子项目都配有同步测试和项目小结，用来巩固所学知识。同时，本书融入了湖湘文化、家国情怀、工匠精神等人文元素与思政元素。此外，本书还设计了1个综合实训项目，让学生根据自己的兴趣收集资料、积极探索和创新，应用在引导项目中所学的知识技能独立制作1个小型网站，进一步提高自身的思维迁移能力。本书是湖南省高职精品在线开放课程的配套教材，在超星“学银在线”平台中有课程标准、授课计划、微课视频、电子课件、拓展资源、网站源文件、素材等丰富的数字化教学资源，方便读者借鉴和使用。本书既可作为高等职业院校电子商务及计算机等专业的教材，也可作为网页制作的培训教材，还可供网页设计爱好者学习参考

前言 如今，互联网对全球经济格局和人们的生产、生活产生了深刻的改变。随着新一轮科技革命的深入推进，信息技术成为创新高地，数字经济成为新经济引擎，互联网在国民经济和社会中的作用显著提升。我国在建设网络强国的过程中，需要大量从事网站建设与维护的技能型人才。 网站设计与网页制作是电子商务专业的学生必须掌握的重要技术，学生对此也充满好奇和期待。然而初学者（尤其是文科生）看到一行行代码、枯燥的软件操作，以及各种陌生的概念，不免感到头疼和畏惧，而且即使按操作步骤做出了网页也不能很好地迁移技能。 本书打破传统教材的编写模式，以真实项目为载体，将项目分解为从易到难的工作任务，内容涵盖网站设计、Dreamweaver应用、网页布局、色彩搭配、HTML语言、CSS样式表、JavaScript应用及网站发布等，将网站建设必备的核心知识和技能融入具有深厚历史底蕴的景点网站引导项目，让学生切实体会所学技能与真实世界的联系，感受人文气息，开阔自身视野，增强学习兴趣。本书介绍了功能强大、易学易用的 Dreamweaver，让学生在基本不用手写代码的情况下完成任务，学习相关知识技能，让学生体验自己动手制作网页的快乐，获得成就感并树立自信心。此外，本书的综合实训项目旨在让学生选取自己感兴趣的主题制作1个小型网站，应用在引导项目中所学的知识技能，利用互联网的海量资源，积极开展团队合作，努力探索和创新，在设计、制作、上传网站的过程中，进一步提高思维迁移能力和自我认知能力。 本书的主要特色和创新如下。 1．以项目为载体，巧妙融入人文元素与思政元素 选取历史文化名城“湘潭”最具代表性的景点——“窑湾”作为引导项目的主题，既有地方特色又有文化内涵。在网站风格上体现古韵之美，在图片和内容的选择上体现中华优秀传统文化、湖湘文化等元素，让学生在制作网页时贴近生活，感受脚下这片热土的温度，激发学生兴趣，培养文化自信，转变专业技术课给人的刻板印象，即知识技能并不冰冷生硬，它们同样可以饱含人文精神和家国情怀。同时，在网站设计与网页制作的过程中，注重培养学生精益求精的工匠精神和开拓创新的互联网思维。每个子项目都融入一定的思政元素，从人文精神、家国情怀、湖湘文化、网络强国等方面开阔学生的视野和格局，以期达到“德技双修”的育人目的。 2．创新教学设计，精心设计教学流程 本书的开发与设计基于建构主义理论，针对工作岗位的职业要求，以项目为载体，以完整的工作过程为导向，将工作过程细化成具体的任务。 本书以“湘潭窑湾”网站为引导项目，精心设计了3个子项目、5个由易到难的网页、14个主任务、53个子任务。每个子项目设置了【学习目标】→【项目简介】→【操作准备】→【同步测试】→【项目小结】等栏目。每个主任务设置了5个学习环节：学习导图、任务描述、任务实施、考核评价、问题探究。另外，本书还设计了1个综合实训项目，帮助读者进一步巩固和应用在引导项目中所学的知识技能。综合实训项目包括6个任务：网站素材的收集和草图的制作、网站策划方案的撰写、网页制作、网站作品展示与互评、网站测试与发布、文档整理和提交。 3．依据学生的认知规律，创新教材内容 本书充分考虑学生的认知水平，依据由具体到抽象、由易到难、由简单到复杂的认知规律，重构教学内容。项目1网站总体设计，通过建立“湘潭窑湾”网站空站点，引出网站建设实施项目，介绍Dreamweaver的主要功能、网站建设流程、网页素材的准备，并对网站和网页的基础知识进行梳理和归纳。项目2表格布局的网页制作，通过制作3个不同难易程度的网页，介绍设置网页基本属性、编辑网页文本，以及表格布局的方法，通过简洁明了、高效快捷的表格布局有序地组织网页元素。在学习技能操作的同时分析HTML代码，让学生轻松掌握HTML。项目3 DIV+CSS布局的网页制作及上传，介绍了DIV+CSS布局，使用DIV对页面进行分块，设置CSS样式，搭建页面的基本框架，添加各种网页元素，以及多种视听效果和超链接。为了让学生较好地理解DIV+CSS布局，第4个网页的结构较为简单，同时加入丰富的特效。第5个网页综合性较强，如果让学生从头到尾全部自己制作，则花费时间太多，而在实际工作中通常并不会从零开始制作网页，而是会借鉴一些模板，只要明白了原理和方法就能轻松完成任务。因此，这个任务提供了网页的主体框架，留出“轮播图、视频、超链接”等几个主要的页面元素，让学生通过“填空练习”完成网页的制作。最后，详细介绍了域名注册、将网站上传到收费空间等内容。 4．应用现代信息技术，构建立体化教材，创新教育教学模式 本书是湖南省高职精品在线开放课程的配套教材。在超星“学银在线”平台上，与本书完全匹配的“网站设计与网页制作”在线开放课程（读者可在超星“学银在线”平台上搜索“网站设计与网页制作 周惠”）已运行多期，配有丰富的教学资源：课程标准、授课计划、微课视频、电子课件、拓展资源、网站源文件、素材等。书中各任务的教学资源全部采用颗粒化的方式组织，学生通过观看微课视频可以轻松学会其中介绍的核心内容，并通过实训任务及时巩固所学技能。同时，通过精选的拓展资源让学有余力的学生能进一步深入学习。 在线课程打破了纸质教材的局限性，拓展了教学资源，紧密联系实际，内容不断更新，既方便了学生自主学习，也有利于教师开展“线上+线下”的混合式教学。 本书由周惠、刘小园、余翼任主编，仇蕾、沈淼琼、赵雅洁任副主编。湖南电气职业技术学院周惠编写项目1、项目3的任务3.1和任务3.2，余翼编写项目2，沈淼琼编写项目3的任务3.3，赵雅洁编写项目3的任务3.4，仇蕾编写项目3的任务3.5，广东职业技术学院刘小园编写综合实训项目，其余内容由湘电集团刘露编写。本书配套的数字化教学资源由湖南电气职业技术学院周惠、余翼、张宇、郭飞雁等教师共同开发。在教材编写过程中，电子工业出版社的薛华强编辑给予了多方面的支持，并提出很多具有建设性的意见，在此表示衷心感谢！ 由于编者水平有限，书中难免存在疏漏之处，敬请读者批评指正。 编 者

项目1 网站总体设计 1 任务1.1　本地站点的创建与管理 2 1.1.1 创建本地站点 2 1.1.2 管理本地站点 4 1.1.3 管理站点内容 5 实训任务1.1 使用Dreamweaver创建并管理站点 7 任务1.2 网站建设流程分析 11 1.2.1 总体策划 11 1.2.2 网站形象设计 12 1.2.3　网站制作 13 1.2.4 网站测试 13 1.2.5 网站发布 14 实训任务1.2 网站栏目设置分析 14 任务1.3　网站结构和网站类型 16 1.3.1 网站结构设计 17 1.3.2　网站的分类 21 实训任务1.3 网站栏目设计与内容策划 28 任务1.4 网页的构成 32 1.4.1 网页的版面构成 32 1.4.2 网页布局设计 34 1.4.3 网页中色彩的应用 40 实训任务1.4 网页的版面设计 45 任务1.5 网站素材的准备 49 1.5.1 字体的下载与安装 50 1.5.2 导航素材的制作 51 1.5.3 轮播图的制作 53 1.5.4 图层分组 54 1.5.5 导出网页素材 55 实训任务1.5 网页素材的收集和处理 55 同步测试 58 项目小结 60 项目2 表格布局的网页制作 61 任务2.1 网页基本属性的设置及文本的编辑 62 2.1.1 设置网页属性 63 2.1.2 编辑网页文本 66 2.1.3 插入水平线和版权符号 68 实训任务2.1 “窑湾简介”网页的制作 69 任务2.2 利用表格布局网页 73 2.2.1 头部区表格的搭建 75 2.2.2 横幅区表格的搭建 77 2.2.3 主体内容区表格的搭建 77 2.2.4 底部区表格的搭建 78 实训任务2.2 “窑湾印象”网页布局框架的搭建 79 任务2.3 插入图片等网页元素 84 2.3.1 头部区背景图片的插入 85 2.3.2 插入Logo图片 86 2.3.3 插入天气预报的代码 86 2.3.4 在导航中插入“鼠标经过图像” 87 2.3.5 插入分割线和Banner图片 88 2.3.6 在左边列中插入背景图片 89 实训任务2.3 “窑湾印象”网页的制作 90 任务2.4 表单网页的制作 91 2.4.1 创建表单的过程分析 92 2.4.2 创建“窑湾印象”在线留言表单网页 93 实训任务2.4 用户注册页面的制作 97 同步测试 101 项目小结 104 项目3 DIV+CSS布局的网页制作及上传 105 任务3.1 DIV+CSS网页框架的制作 107 3.1.1 头部区框架的搭建 108 3.1.2 横幅区框架的搭建 114 3.1.3 主体内容区框架的搭建 116 3.1.4 底部区框架的搭建 119 3.1.5 主体框架的细化 120 实训任务3.1 制作“窑湾地理”网页框架 124 任务3.2 在DIV+CSS框架中添加网页元素 130 3.2.1 添加背景图片 131 3.2.2 插入图片 132 3.2.3 天气预报代码的添加 133 3.2.4 应用无序列表添加网页头部区的导航 134 3.2.5 应用定义列表添加主体内容区的二级导航 138 实训任务3.2 在“窑湾地理”网页中添加网页元素 143 任务3.3 网页视听效果的制作 148 3.3.1 轮播效果的制作 150 3.3.2 “鼠标经过图像”效果的制作 151 3.3.3 滚动字幕的制作 152 3.3.4 图片放大效果的制作 154 3.3.5 透明flash效果的制作 155 3.3.6 视频文件的添加 157 实训任务3.3 在“窑湾首页”中添加视听效果 158 任务3.4 超链接的创建 160 3.4.1 图片链接的创建 161 3.4.2 热点链接的创建 163 3.4.3 文字链接的创建 164 3.4.4 锚记链接的创建 166 实训任务3.4 在“窑湾首页”中添加超链接 167 任务3.5 域名注册和网站上传 170 3.5.1 域名的注册 171 3.5.2 上传到收费空间 173 实训任务3.5 注册域名 177 同步测试 179 项目小结 182 综合实训项目 小型网站的设计与制作 183 任务1 网站素材的收集和草图的制作 184 任务2 网站策划方案的撰写 184 任务3 网页制作 185 任务4 网站作品展示与互评 186 任务5 网站测试与发布 186 任务6 文档整理和提交 187