1、网页设计与制作项目教程项目三 网站规划与设计【项目目标】【项目目标】能力目标：学完本项目后，应能够：(1)掌握网站规划与设计要点(2)明确网站规划与设计的一般流程(3)设计合适的网页版式。知识目标：(1)了解网站规划与设计的一般流程。(2)懂得网页的版式设计的基本原则。网页设计与制作项目教程任务1 网站需求分析【任务目标】【任务目标】“MobileShop”企业的电子商务需求，既可能来自企业本身发展的需要，也可能是迫于竞争对手的压力，或者二者兼而有之，请从企业网站实施的背景、原因、资源和目的四个方面来分析企业是否有开展电子商务的需求，存在哪些需求，需求的迫切性以及这些需求将给企业带来什么样的市
2、场机会和市场空间。【任务实施】【任务实施】(小组分析讨论，协作完成）1、企业网站实施背景2、企业网站实施原因3、企业网站实施资源4、企业网站实施目的网页设计与制作项目教程任务2 网站规划【任务目标】【任务目标】为“MobileShop”电子规划电子商务网站。【任务实施】【任务实施】电子商务网站规划是指在网站建设前确定网站的主题和建站目标，对网站目标定位，进行内容功能规划。网站规划的步骤如图3-2-1所示。网页设计与制作项目教程任务3 网页整体设计【任务目标】【任务目标】为“MobileShop”电子设计电子商务网站。【任务实施】【任务实施】1、网站功能设计（1）网站前台系统前台系统：会员注册、
3、登录、商品显示、搜索、分类等功能模块。前台系统的功能模块如图所示图3-3-1所示。（2）网站后台系统后台系统：商品管理、分类管理、订单管理、用户管理等功能模块。后台系统的功能模块如图所示图3-3-2所示。2、网站前台布局（1）Logo“MobileShop”电子网站的Logo,如3-3-3所示。图3-3-3“MobileShop”电子网站名称及Logo2、网站前台布局（2）设计网页版式网页版式可选择采用匡字型布局，如图3-3-4所示。2、网站前台布局（3）色彩及文字由于该客户群追求高端时尚的电子产品，所以网站主色调采用白色，导航栏配以黑色的背景，标题栏的文字则以浅灰色，文字主体选择黑色，产品价
4、格则以深灰色标出。整体布局简洁大方，图文匹配。2、网站前台布局（4）店头效果图店头效果图如图3-3-5所示。网页设计与制作项目教程任务4 网站首页版式设计【任务目标】【任务目标】网站首页，即主页、起始页，也就是打开网站后看到的第一个页面。网站的首页就好像人的脸部一样，它给人的是第一印象，也称网上第一视觉效应，它的设计直接关乎整个网站的风格以及整体效果，本任务是设计一个网站首页版式。【任务实施】【任务实施】网站首页设计在于网页风格定位，资料图片选取，文字表达样式，以及相关的代码描述等等。以一个企业网站为例，网站首页版式的设计步骤如下。1、确定网站的主题前期必须与用户沟通好，明确用户的要求，建站的
5、目的，所要达到的效果。2、确定网站风格明确了建站的目的和需求后，紧接着我们需要建立出网页的总体设计方案，对网站整体风格和特色作出定位，规划网站的组织结构。网站风格必须与企业logo相一致，才能凸显网站的特色。3、通过专业的软件对网站进行版式设计 我们模仿以下的公司首页效果图来对首页进行布局，如图3-4-1所示。网页设计与制作项目教程任务5 网站子页版式设计【任务目标】【任务目标】本任务的目标是设计网站子页面的版式。【任务实施】【任务实施】本任务主要通过层标签来设计一个子页面的版式，通过层和表格的对比了解两种对齐方式的优缺点，运用时可根据自己的需要来选择。AP Div是网页设计中一个非常重要的元
6、素，它可以随意放置于网页中的任意位置，不受任何限制。在dreamweaver CS6中，可以通过拖拽鼠标的方式进行绘制，制作的AP Div之间可以互相重叠，但是在默认情况下，所有的AP Div之间并没有嵌套关系，要利用AP Div实现页面布局，则最好使得AP Div可以互相嵌套，这需要在首选参数中进行相应的设置。AP Div可以包含文本、图像、媒体、表格等一切可以放置到HTML中的元素，甚至可以在AP Div内放置AP Div，也可以与表格进行相互的转换。为了布局的方便，在进行布局之前应进行整体的页面规划，如图3-5-1所示。【项目总结】【项目总结】网页设计是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化等），进行网站功能策划，然后进行页面设计和美化工作。要规划网页的功能和布局，一个优秀的网站要有一个明确的主题，也就是在网页设计之前要明确你这个网站有什么目的，用来做什么，所有页面要围绕这个主题来制作，网站前期规划与设计的好坏直接影响着网站的设计与实施。【项目检测】【项目检测】一、练习题1.调研一家小型实体花店对网店的需求。2.根据花店需求设计网页布局结构图。二、拓展练习 请写一份介绍家乡的网站规划书，并为该网站设计首页版式。网页设计与制作项目教程项目五 建设第三方网店
