DW网页设计教学—单元8 规划网站与设计网页

1、操作演练操作演练1.2技术提升技术提升1.3操作准备操作准备1.1考核评价考核评价1.4操作准备操作准备1.1操作准备操作准备1.1操作准备操作准备1.1操作准备操作准备1.1操作准备操作准备8.1操作演练操作演练1.2操作演练操作演练1.2操作演练操作演练1.2操作演练操作演练1.2操作演练操作演练1.2操作演练操作演练8.2技术提升技术提升1.3技术提升技术提升1.3技术提升技术提升8.3考核评价考核评价1.4考核评价考核评价8.4 本单元以本单元以“购物网站购物网站”为例全面介绍一个完整为例全面介绍一个完整网站的开发流程，主要包括熟悉网站开发规范、网站的开发流程，主要包括熟悉网站开发规范

2、、规划网站、设计网页、制作网站模板、制作网站规划网站、设计网页、制作网站模板、制作网站首页和二级页面、测试网站、发布网站、推广与首页和二级页面、测试网站、发布网站、推广与维护网站。维护网站。教学目标教学目标（1 1）熟悉网站开发流程和规范）熟悉网站开发流程和规范（2 2）合理规划网站的风格、栏目结构、目录结构和链接结构）合理规划网站的风格、栏目结构、目录结构和链接结构（3 3）学会设计网页模板、首页和二级页面的布局结构）学会设计网页模板、首页和二级页面的布局结构（4 4）熟练制作网站模板）熟练制作网站模板（5 5）熟练制作网站的首页和二级页面）熟练制作网站的首页和二级页面（6 6）熟练测试网站

3、）熟练测试网站（7 7）学会编写）学会编写javascriptjavascript程序代码验证注册页面中输入的内容程序代码验证注册页面中输入的内容（8 8）掌握发布网站的方法）掌握发布网站的方法（9 9）了解域名的申请方法）了解域名的申请方法（1010）了解宣传与推广网站的方法）了解宣传与推广网站的方法教学方法教学方法任务驱动法、分组讨论法、理论实践一体化、讲练结合任务驱动法、分组讨论法、理论实践一体化、讲练结合课时建议课时建议1010课时（包含考核评价）课时（包含考核评价） 在本地硬盘（例如在本地硬盘（例如D盘）中创建一个文件夹盘）中创建一个文件夹“网页设计与制作案例网页设计与制作案例”，将

4、光盘中的，将光盘中的“单元单元8”（包括所有子文件夹以及文件）拷贝到该文件夹中包括所有子文件夹以及文件）拷贝到该文件夹中。 使用创建站点向导创建名称为使用创建站点向导创建名称为“单元单元8”的本的本地站点。地站点。【任务任务8-1】熟悉网站开发流程和熟悉网站开发流程和规范规范【任务描述任务描述】（1）熟悉网站开发的基本开发流程）熟悉网站开发的基本开发流程（2）熟悉网站开发的常用规范）熟悉网站开发的常用规范【任务实施任务实施】1网站开发的基本流程网站开发的基本流程第一个阶段：规划网站和准备素材阶段第一个阶段：规划网站和准备素材阶段第二个阶段：设计、制作网页阶段第二个阶段：设计、制作网页阶段第三个

5、阶段：测试、发布、推广与维护网站阶段第三个阶段：测试、发布、推广与维护网站阶段2网站开发常用的命名规范网站开发常用的命名规范（1）文件夹的常用名称）文件夹的常用名称（2）CSS样式文件的常用名称样式文件的常用名称（3）CSS样式表文件中类和样式表文件中类和ID标识的常用名称标识的常用名称（4）网页导航栏的常用名称）网页导航栏的常用名称（5）网页图片的常用名称）网页图片的常用名称3网页版面的尺寸规范网页版面的尺寸规范（1）网页的宽度）网页的宽度（2）网页的长度）网页的长度（3）网页文件大小）网页文件大小 一般来说，网页广告都有一定的规格要求，也就是一般来说，网页广告都有一定的规格要求，也就是标准

6、尺寸，全尺寸标准尺寸，全尺寸banner不超过不超过14KB。 各类网页广告的标准尺寸如表各类网页广告的标准尺寸如表8-6所示。所示。【任务任务8-2】规划网站规划网站【任务描述任务描述】 对本单元拟对开发网站的功能、主题、风格、栏目对本单元拟对开发网站的功能、主题、风格、栏目结构、版式结构、链接结构、目录结构、内容版块等方结构、版式结构、链接结构、目录结构、内容版块等方面进行合理规划。面进行合理规划。【任务实施任务实施】1网站需求分析网站需求分析 本单元拟开发的网站为一个购物网站，一般本单元拟开发的网站为一个购物网站，一般的购物网站都为动态网站，后台为数据库，前台的购物网站都为动态网站，后台

7、为数据库，前台使用使用ASP.NET、PHP和和JSP开发平台实现其功能。开发平台实现其功能。 通常购物网站的基本功能模块包括商品列表通常购物网站的基本功能模块包括商品列表、商品详情显示、搜索商品、用户注册、用户登、商品详情显示、搜索商品、用户注册、用户登录、选购商品、收藏商品、帮助中心、结算中心录、选购商品、收藏商品、帮助中心、结算中心、订单查询等，这些功能模块一般使用三层架构、订单查询等，这些功能模块一般使用三层架构（用户界面层、业务逻辑层、数据访问层）实现（用户界面层、业务逻辑层、数据访问层）实现。 本单元所创建的网站，其主题是实现网上购物本单元所创建的网站，其主题是实现网上购物，主要展

8、示商品信息和商品图片，便于购买者浏览，主要展示商品信息和商品图片，便于购买者浏览和选购。和选购。 本单元所创建的网站命名为本单元所创建的网站命名为“易购网易购网”，与，与“e购网购网”谐音，其意为借助网络方便购物。谐音，其意为借助网络方便购物。 本单元所创建的购物网站属于电子商务类网站，首页本单元所创建的购物网站属于电子商务类网站，首页主体部分的版式结构拟采用左、中、右三列式布局，并且主体部分的版式结构拟采用左、中、右三列式布局，并且左、右两侧较窄，中列较宽。左、右两侧较窄，中列较宽。 商品展示页面、商品详情页面、帮助页面拟采用左、商品展示页面、商品详情页面、帮助页面拟采用左、右二列式布局，左

9、侧较窄，右侧较宽。右二列式布局，左侧较窄，右侧较宽。 购物车页面中部拟采用表格布局。购物车页面中部拟采用表格布局。 网站的主色调为黑色和灰色，局部使用红色、绿色和网站的主色调为黑色和灰色，局部使用红色、绿色和蓝色，简洁明了、清晰可见，视觉效果好。蓝色，简洁明了、清晰可见，视觉效果好。 各个页面拟采用风格一致的顶部导航和底部各个页面拟采用风格一致的顶部导航和底部导航，顶部包括广告动画和当前购物车中的商品导航，顶部包括广告动画和当前购物车中的商品信息，首页中拟增设左侧商品类型导航和商品品信息，首页中拟增设左侧商品类型导航和商品品牌导航。牌导航。 首页的主体部分拟分为商品类别导航、广告首页的主体部分

10、拟分为商品类别导航、广告专区、商品品牌导航、焦点图片区、热卖专区、专区、商品品牌导航、焦点图片区、热卖专区、低价专区、促销专业、畅销排行区、热门搜索区低价专区、促销专业、畅销排行区、热门搜索区9个组成部分。个组成部分。 1）规划网站的栏目结构）规划网站的栏目结构 构建目录结构的基本要求有：构建目录结构的基本要求有：（1）不要将所有文件都存放在根目录下）不要将所有文件都存放在根目录下（2）按栏目内容建立子目录）按栏目内容建立子目录（3）在每个主目录下都建立独立的）在每个主目录下都建立独立的image、flash等子目录等子目录（4）目录的层次不要太深）目录的层次不要太深 2）规划网站的链接结构）

11、规划网站的链接结构 本单元所创建的本单元所创建的“易购网易购网”拟混合使用这两种链接结构拟混合使用这两种链接结构，表，表8-4所示的一级栏目、二级栏目和三级栏目在任意一个网所示的一级栏目、二级栏目和三级栏目在任意一个网页都能访问，任意一个网页也能访问用户登录页面和用户注页都能访问，任意一个网页也能访问用户登录页面和用户注册面，这些链接结构为网状链接结构。册面，这些链接结构为网状链接结构。【任务任务8-3】设计网页设计网页【任务描述任务描述】 （1）设计）设计“易购网易购网”通用模板、商品列表展示页通用模板、商品列表展示页面模板、帮助页面模板的布局结构。面模板、帮助页面模板的布局结构。 （2）设

12、计）设计“易购网易购网”首页主体部分、商品列表页首页主体部分、商品列表页面和单件商品详情页面的布局结构。面和单件商品详情页面的布局结构。 （3）创建）创建CSS样式表文件和定义样式表文件和定义CSS样式实现各个样式实现各个网页模板和网页的布局结构。网页模板和网页的布局结构。【任务实施任务实施】 1设计设计“易购网易购网”的通用模板的布局结构的通用模板的布局结构 “易购网易购网”的通用模板从上至下划分为的通用模板从上至下划分为7个板个板 块，分别为顶部导航菜单、块，分别为顶部导航菜单、LOGO图片和图片和Flash动动 画、下拉菜单、页面主体内容、帮助导航栏、友画、下拉菜单、页面主体内容、帮助导

13、航栏、友 情链接和版权信息。情链接和版权信息。 “易购网易购网”的通用模板布局设计示意图如图的通用模板布局设计示意图如图 8-3所示，由图可以看出该布局结构各板块的宽所示，由图可以看出该布局结构各板块的宽 度为度为990px，居中显示。，居中显示。 2设计商品列表展示页面模板的布局结构设计商品列表展示页面模板的布局结构 商品列表展示页面模板的页面内容分布示意图如图商品列表展示页面模板的页面内容分布示意图如图8-4所示。所示。 商品列表展示页面模板的分布设计示意图如图商品列表展示页面模板的分布设计示意图如图8-5所所示，由图可以看出左侧宽度为示，由图可以看出左侧宽度为190px，右侧宽度为，右侧

14、宽度为790px，两者之间的间距为，两者之间的间距为10px。 3设计帮助页面模板的布局结构。设计帮助页面模板的布局结构。 帮助页面模板的页面内容示意图如图帮助页面模板的页面内容示意图如图8-6所示。所示。 帮助页面模板的布局设计示意图如图帮助页面模板的布局设计示意图如图8-7所示，由图可所示，由图可以看出左侧宽度为以看出左侧宽度为230px，右侧宽度为，右侧宽度为750px，两者之间，两者之间的间距为的间距为10px。 4设计设计“易购网易购网”首页主体部分的布局结构首页主体部分的布局结构 “易购网易购网”首页的主体部分分为首页的主体部分分为7个板块，左列个板块，左列分别为顶商品类别导航菜单

15、、商品广告图片和商品分别为顶商品类别导航菜单、商品广告图片和商品品牌专区，中列分别为焦点图片、热卖商品专区和品牌专区，中列分别为焦点图片、热卖商品专区和低价商品专区，右列分别为商品广告图片、商品促低价商品专区，右列分别为商品广告图片、商品促销公告、畅销商品排行和热门商品搜索。销公告、畅销商品排行和热门商品搜索。 首页主体部分的页面内容分布示意图如图首页主体部分的页面内容分布示意图如图8-8所示。所示。 首页主体部分整体布局设计示意图如图首页主体部分整体布局设计示意图如图8-9所所示，由图可以看出该布局结构主体部分宽度为示，由图可以看出该布局结构主体部分宽度为990px，居中显示。，居中显示。

16、整体为左右结构，左列宽度为整体为左右结构，左列宽度为190px，为左浮，为左浮动，右列宽度为动，右列宽度为790px，为右浮动，由于总宽度为，为右浮动，由于总宽度为990px，所以左列与右列之间有，所以左列与右列之间有10px的间距。的间距。 5设计商品列表页面的布局结构设计商品列表页面的布局结构 商品列表页面的内容分布示意图如图商品列表页面的内容分布示意图如图8-11所示。所示。 商品列表页面基于商品列表展示页面模板创建的，其整商品列表页面基于商品列表展示页面模板创建的，其整体布局设计如图体布局设计如图8-4所示，其局部布局设计示意图如图所示，其局部布局设计示意图如图8-12所所示。示。 6

17、设计商品详情页面的布局结构设计商品详情页面的布局结构 商品详情页面的内容分布示意图如图商品详情页面的内容分布示意图如图8-13所示。所示。 商品详情页面的整体布局设计示意图如图商品详情页面的整体布局设计示意图如图8-14所示。所示。 商品详情页面的局部布局设计示意图如图商品详情页面的局部布局设计示意图如图8-15所示。所示。【任务任务8-4】制作网站模板制作网站模板【任务描述任务描述】（1）创建）创建“易购网易购网”通用模板通用模板index.dwt。（2）创建帮助页面模板）创建帮助页面模板help.dwt。（3）创建商品列表展示页面模板）创建商品列表展示页面模板goodslist.dwt。【

18、任务实施任务实施】 1创建创建“易购网易购网”的通用模板的通用模板index.dwt（1）创建）创建CSS样式表文件样式表文件global.css和定义和定义CSS样式样式（2）利用）利用【新建文档新建文档】对话框新建对话框新建HTML模板模板（3）编辑网页内容）编辑网页内容（4）定义可编辑区域）定义可编辑区域（5）保存网页与浏览网页效果）保存网页与浏览网页效果 2创建帮助页面模板创建帮助页面模板help.dwt （1）创建）创建CSS样式表文件样式表文件help.css和定义和定义CSS样式样式 （2）基于网页模板）基于网页模板index.dwt创建网页文档创建网页文档 （3）编辑网页）编辑

19、网页help08.html （4）创建嵌套模板）创建嵌套模板help.dwt （5）链接外部样式表文件）链接外部样式表文件help.css （6）定义可编辑区域）定义可编辑区域 3创建商品列表展示页面模板创建商品列表展示页面模板goodslist.dwt （1）创建）创建CSS样式表文件样式表文件pages.css和定义和定义CSS样式样式 （2）基于网页模板）基于网页模板index.dwt创建网页文档创建网页文档 （3）编辑网页）编辑网页goodslist08.html （4）创建嵌套模板）创建嵌套模板goodslist.dwt （5）链接外部样式表文件）链接外部样式表文件pages.css

20、 （6）定义可编辑区域）定义可编辑区域【任务任务8-5】制作网站的帮助页制作网站的帮助页面和注册登录页面面和注册登录页面【任务描述任务描述】 （1）基于模板）基于模板help.dwt创建易购网的帮助页面创建易购网的帮助页面help0801.html和和help0802.html。 （2）基于模板）基于模板index.dwt创建易购网的注册页面创建易购网的注册页面register08.html和登录页面和登录页面login08.html。【任务实施任务实施】 1基于模板基于模板help.dwt创建易购网的帮助页面创建易购网的帮助页面 （1）基于网页模板）基于网页模板help.dwt创建网页文档创

21、建网页文档 （2）在样式表文件）在样式表文件help.css中定义样式中定义样式 打开样式表文件打开样式表文件help.css，添加所需的，添加所需的CSS样样式定义。式定义。 （3）编辑网页文档）编辑网页文档help0801.html （4）保存网页与浏览网页效果）保存网页与浏览网页效果 2基于模板基于模板index.dwt创建易购网的注册页面和登创建易购网的注册页面和登录页面录页面 （1）基于网页模板）基于网页模板index.dwt创建网页文档创建网页文档 （2）创建）创建CSS样式表文件样式表文件user.css和定义和定义CSS样式样式 （3）链接外部样式表文件）链接外部样式表文件us

22、er.css （4）编写验证注册页面中输入内容的）编写验证注册页面中输入内容的javascript代码代码 （5）编辑网页）编辑网页login08.html （6）保存网页与浏览网页效果）保存网页与浏览网页效果【任务任务8-6】制作网站的首页和制作网站的首页和商品列表页面商品列表页面【任务描述任务描述】 （1）基于模板）基于模板index.dwt创建易购网的首页创建易购网的首页default.html。 （2）基于模板）基于模板goodslist.dwt创建易购网的商品列表创建易购网的商品列表页面页面goodslist0802.html。 （3）基于模板）基于模板index.dwt创建易购网的

23、内容页面创建易购网的内容页面goodsdetail0801.html、goodsdetail0802.html、goodslist0801.html和和shoppingCart08.html。【任务实施任务实施】 1基于模板基于模板index.dwt创建易购网的首页创建易购网的首页default.html （1）基于网页模板）基于网页模板index.dwt创建网页文档创建网页文档default.html （2）创建）创建CSS样式表文件样式表文件index.css和定义和定义CSS样式样式 （3）链接外部样式表文件）链接外部样式表文件index.css （4）编辑网页）编辑网页default.

24、html （5）保存网页）保存网页default.html与浏览网页效果与浏览网页效果 保存网页保存网页default.html，然后按快捷键，然后按快捷键F12浏览该网浏览该网页，其浏览效果如彩图页，其浏览效果如彩图5所示。所示。 2基于模板基于模板goodslist.dwt创建易购网的商品列表页面创建易购网的商品列表页面 （1）基于网页模板）基于网页模板goodslist.dwt创建网页文档创建网页文档goodslist0802.html （2）编辑网页）编辑网页goodslist0802.html （3）保存网页）保存网页goodslist0802.html与浏览网页效果与浏览网页效果

25、3基于模板基于模板index.dwt创建易购网的内容页面创建易购网的内容页面（1）基于网页模板）基于网页模板index.dwt创建网页文档创建网页文档goodsdetail0801.html（2）编辑网页）编辑网页goodsdetail0801.html（3）保存网页）保存网页goodsdetail0801.html与浏览网页效果与浏览网页效果【任务任务8-7】设置网站链接设置网站链接【任务描述任务描述】 根据任务根据任务8-2中所规划的链接关系，创建必要中所规划的链接关系，创建必要的超链接。的超链接。【任务实施任务实施】 根据表根据表8-29的要求设置的要求设置“易购网易购网”中的超链接中的

26、超链接。文档名称文档名称链接位置链接位置链接内容链接内容链接对象链接对象目标目标index.dwtindex.dwt顶部导航栏顶部导航栏【请登录请登录】login08.htmllogin08.html默认默认【免费注册免费注册】register08.htmlregister08.html默认默认购物车购物车shoppingCart08.htmlshoppingCart08.html默认默认帮助中心帮助中心help0801.htmlhelp0801.html默认默认网站主导航网站主导航首页首页default.htmldefault.html默认默认办公设备办公设备goodslist0801.ht

27、mlgoodslist0801.html默认默认手机通讯手机通讯goodslist0802.htmlgoodslist0802.html默认默认help.dwthelp.dwt左侧导航栏左侧导航栏标准快递标准快递help0801.htmlhelp0801.html默认默认订单状态订单状态help0802.htmlhelp0802.html默认默认default.htmldefault.html左侧商品类别导航栏左侧商品类别导航栏打印机打印机goodsdetail0801.htmlgoodsdetail0801.html默认默认iPodiPodgoodsdetail0802.htmlgoodsd

28、etail0802.html默认默认低价专区低价专区08index09.jpg08index09.jpggoodsdetail0802.htmlgoodsdetail0802.html_blank_blank畅销排行畅销排行08index02s.jpg08index02s.jpggoodsdetail0801.htmlgoodsdetail0801.html_blank_blankgoodslist0801.htmlgoodslist0801.html办公设备办公设备2010061801s.jpg2010061801s.jpggoodsdetail0801.htmlgoodsdetail080

29、1.html_blank_blank表表8-298-29“易购网易购网”中设置的超链接中设置的超链接【任务任务8-8】测试网站测试网站【任务描述任务描述】 （1）清理网页文档。）清理网页文档。 （2）检查）检查“易购网易购网”中的链接和浏览器兼容性，验中的链接和浏览器兼容性，验证网页中标记。证网页中标记。 （3）测试本地站点，创建网站报告。）测试本地站点，创建网站报告。【任务实施任务实施】1清理文档清理文档 清理文档的具体步骤如下：清理文档的具体步骤如下： （1）打开需要清理的网页文档。）打开需要清理的网页文档。 （2）在）在Dreamweaver CS4主界面中，单击菜主界面中，单击菜 单命

30、令单命令【命令命令】【清理清理XHTML】，打开，打开 【清理清理HTML/XHTML】对话框，在对话框，在“移除移除” 选项组中选择选项组中选择“空标签区块空标签区块”、“多余的嵌多余的嵌 套标签套标签”复选框，也可以在复选框，也可以在“指定的标签指定的标签” 文本框中输入所要删除的标签。文本框中输入所要删除的标签。 在在“选项选项”选项组中选中选项组中选中“尽可能合并嵌套的尽可能合并嵌套的标签标签”和和“完成后显示记录完成后显示记录”复选框，如图复选框，如图8-32所示。所示。 然后单击然后单击【确定确定】按钮，按钮，Dreamweaver CS4自动自动开始清理工作。开始清理工作。 （3

31、）单击菜单命令）单击菜单命令【命令命令】【清理清理Word生成的生成的HTML】，打开，打开【清理清理Word生成的生成的HTML】对话框，对话框，在该对话框中进行相应的设置之后，如图在该对话框中进行相应的设置之后，如图8-34所示，然所示，然后单击该对话框的后单击该对话框的【确定确定】按钮即可。按钮即可。2测试网页测试网页（1）检查链接）检查链接（2）检查浏览器兼容性）检查浏览器兼容性（3）验证标记）验证标记3测试本地站点测试本地站点（1）检查链接）检查链接（2）检查页面效果）检查页面效果（3）检查网页的容错性）检查网页的容错性（4）检查兼容性）检查兼容性 以用户身份测试网站的功能。以用户身

32、份测试网站的功能。 主要测试内容有：评价每个页面的风格、颜色搭主要测试内容有：评价每个页面的风格、颜色搭配、页面布局、文字的字体、大小等方面与网站的配、页面布局、文字的字体、大小等方面与网站的整体风格是否统一、协调；页面布局是否合理；各整体风格是否统一、协调；页面布局是否合理；各种链接所放的位置是否合适；页面切换是否简便；种链接所放的位置是否合适；页面切换是否简便；对于当前访问位置是否明确等。对于当前访问位置是否明确等。 5负载测试负载测试 安排多个用户访问网站，让网站在高强度、长时安排多个用户访问网站，让网站在高强度、长时间的环境中进行测试。间的环境中进行测试。 主要测试内容有：网站在多个用

33、户访问时访问速主要测试内容有：网站在多个用户访问时访问速度是否正常；网站所在服务器是否会出现内存溢出度是否正常；网站所在服务器是否会出现内存溢出、CPU资源占用是否不正常等。资源占用是否不正常等。6创建网站报告创建网站报告 Dreamweaver CS4能够自动检测网站内部的网页能够自动检测网站内部的网页文件，生成关于文件信息、文件，生成关于文件信息、HTML代码信息的报告代码信息的报告，以便网站设计者对网页文档进行修改。，以便网站设计者对网页文档进行修改。【任务任务8-9】发布网站发布网站【任务描述任务描述】（1）尝试申请一定容量大小的免费网站空间。）尝试申请一定容量大小的免费网站空间。（2

34、）尝试上传网站中的网页文档和素材到远端服务器。）尝试上传网站中的网页文档和素材到远端服务器。（3）尝试从远端服务器获取文件。）尝试从远端服务器获取文件。【任务实施任务实施】1申请网站空间申请网站空间2上传文件上传文件（1）使用）使用Dreamweaver上传文件上传文件（2）使用）使用CuteFTP上传文件上传文件 获取文件之前同样要连接远端服务器，获取文件获取文件之前同样要连接远端服务器，获取文件的操作如下：的操作如下： （1）在远端服务器浏览窗口中选择需要获取的文件或）在远端服务器浏览窗口中选择需要获取的文件或者文件夹。者文件夹。 （2）单击）单击【获取文件获取文件】按钮按钮 ，文件即会被

35、下载到，文件即会被下载到本地站点中。本地站点中。【任务任务8-10】推广与维护网站推广与维护网站【任务描述任务描述】 熟悉宣传与推广网站的途径和方法。熟悉宣传与推广网站的途径和方法。【任务实施任务实施】1宣传与推广网站宣传与推广网站（1）注册到搜索引擎）注册到搜索引擎（2）参加广告交换组织）参加广告交换组织（3）借助网络广告）借助网络广告（4）添加到网址导航网站）添加到网址导航网站（5）通过邮件推广）通过邮件推广（6）利用友情链接）利用友情链接（7）BBS宣传宣传（8）传统宣传方式）传统宣传方式2网站的维护网站的维护（1）使用设计备注）使用设计备注（2）使用遮盖）使用遮盖（3）取出文件和存回文

36、件）取出文件和存回文件3网站的更新网站的更新 网站更新主要包括以下方面：网站更新主要包括以下方面：（1）完善内容）完善内容（2）更新内容）更新内容（3）更新风格）更新风格【考核任务描述考核任务描述】 教材配套光盘中已提供了考核评价项教材配套光盘中已提供了考核评价项目所需的网页素材，请完成以下操作。目所需的网页素材，请完成以下操作。 （1）拟开发一个旅游网站，该旅游网站的）拟开发一个旅游网站，该旅游网站的名称为名称为“易游天下网易游天下网”，对该网站的风格，对该网站的风格、栏目结构、目录结构和链接结构进行规、栏目结构、目录结构和链接结构进行规划与设计。划与设计。 （2）对）对“易游天下网易游天下

37、网”的文件名称、的文件名称、CSS样式样式 名称、图像名称进行规划设计。名称、图像名称进行规划设计。 （3）对）对“易游天下网易游天下网”首页的布局结构进行规划，利首页的布局结构进行规划，利用用Word文字处理软件或者文字处理软件或者Photoshop图像处理绘制网图像处理绘制网站首页的布局结构图。站首页的布局结构图。 （4）为）为“易游天下网易游天下网”首页的主体布局结构定义首页的主体布局结构定义CSS样样式，并利用教材配套光盘中提供的网页素材创建首页式，并利用教材配套光盘中提供的网页素材创建首页的主体布局结构。的主体布局结构。 如果时间允许请参考彩图如果时间允许请参考彩图7制作完善的制作完

38、善的“易游天下易游天下网网”首页。首页。【评价要点评价要点】 本单元的考核评价表如表本单元的考核评价表如表8-30所示。所示。【单元小结单元小结】 本单元以本单元以“购物网站购物网站”为例全面介绍了网站的开发流程为例全面介绍了网站的开发流程，重点对网站的功能、主题、风格、栏目结构、版式结构、，重点对网站的功能、主题、风格、栏目结构、版式结构、链接结构、目录结构、内容版块等方面进行规划。链接结构、目录结构、内容版块等方面进行规划。 还介绍了网页布局结构和功能的设计、网站模板制作、还介绍了网页布局结构和功能的设计、网站模板制作、首页和二级页面的制作等。首页和二级页面的制作等。 一个网站开发完成后必

39、须经过认真的测试才能发一个网站开发完成后必须经过认真的测试才能发 布，以免浏览网站时出现一些错误。布，以免浏览网站时出现一些错误。 一个网站要发布在服务器上去，才能被他人浏览。一个网站要发布在服务器上去，才能被他人浏览。 本单元还介绍了测试网站、申请网站域名和网页空间、本单元还介绍了测试网站、申请网站域名和网页空间、发布网站、宣传与推广网站等。发布网站、宣传与推广网站等。考核要点考核要点考核内容考核内容标准分标准分计分计分（1 1）对）对“易游天下网易游天下网”的风格、栏目结构、目录结构和链接结构进行规划与设的风格、栏目结构、目录结构和链接结构进行规划与设计计3 3（2 2）对）对“易游天下网

40、易游天下网”的文件名称、的文件名称、CSSCSS样式名称、图像名称进行规划设计样式名称、图像名称进行规划设计2 2（3 3）对）对“易游天下网易游天下网”首页的布局结构进行规划，绘制布局结构图首页的布局结构进行规划，绘制布局结构图3 3（4 4）为）为“易游天下网易游天下网”首页的主体布局结构定义首页的主体布局结构定义CSSCSS样式，并利用教材配套光样式，并利用教材配套光盘中提供的网页素材创建首页的主体布局结构盘中提供的网页素材创建首页的主体布局结构4 4（5 5）认真完成本单元的任务，态度端正、操作规范、命名规范、代码规范、学）认真完成本单元的任务，态度端正、操作规范、命名规范、代码规范、学习效果较好习效果较好2 2小计小计1414加分项加分项参考彩图参考彩图7 7制作完善的制作完善的“易游天下网易游天下网”首页首页5 5评价方式评价方式自我评价自我评价小组评价小组评价教师评价教师评价考核得分考核得分表表8-308-30单元单元8 8的考核评价表的考核评价表