静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 教学案例39.docx

教学案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 教学案例三十九、制作电子商务网站 近几年，我国电子商务发展迅猛，互联网正以其蓬勃的发展速度席卷全球，它的虚拟商业行为改变着我们的生活方式，我国的商业模式也正在向网络化发展，电子商务正是顺应了这种发展的必然产物。本项目主要完成一个B2C电子商务网站前台设计及制作。B2C是英文Business-to-Customer（商家对顾客）的缩写，中文简称“商对客”。 8.1.1 任务分析 一个网站制作的成功与否与建站前的网站策划有着极为重要的关系。在建立网站前应明确建设网站的目的，确定网站制作的功能，确定网站规模，必要的市场分析等。只有详细的网站制作策划，才能避免在网站建设中出现（删除的）很多问题，保证网站建设顺利进行。 本项目在已经完成了制作网站前的市场分析、确定了网站建设的目的及功能定位、网站内容版块及网站效果图的基础上进行网站的设计及制作。 8.1.2 页面布局设计 1. 网站层次分析 建立网站的时候，首先要对网站进行分层设计，分析出网站的页面组成。 本项目网站层次分析示意图如图8-1所示： 图8-1 电子商务网站层次分析 2. 网站各页面效果图设计 图8-2 电子商务网站首页效果图设计 图8-3 电子商务网站商品展示页效果图设计 图8-4 电子商务网站商品详情页效果图设计 图8-5 电子商务网站会员注册页面效果图设计 图8-6 电子商务网站会员登录页面效果图设计 3. 网站各页面布局设计 从网站各页面效果图来看，网站首页（去掉“，”）自顶向下分为六个部分，网站头部、站内有哪些信誉好的足球投注网站、商品分类、畅销商品、新手指南、网站底部版权信息。其中，商品分类部分分为左中右三栏，畅销商品（去掉“部分”）分为左右两栏。根据这个构思，设计一个如图8-7所示的页面草图。 图8-7 电子商务网站首页布局草图设计 根据草图的设计，可运用DIV进行整个页面框架的布局。DIV布局代码如下： body !--头部-- div id=header /div !--站内有哪些信誉好的足球投注网站-- div id=tSearch /div !--商品主体分类-- div id=container div class=container_left!--商品左侧列表-- /div div class=container_mid!--商品中间内容-- /div div class=container_right!--商品右侧栏目-- /div /div !--畅销商品-- div id=contnt_2 div class=contnt_left_3!—左侧栏目-- /div div class=mod id=popular!—右侧栏目-- /div /div !--新手指南-- div class=bottom /div !--网站底部版权信息-- div id=link /div /body 其中，我们对每个“盒子”拟调用的ID选择器进行了命名，在后面建立CSS规则的时候，按照上面ID选择器的名称进行设置。 从页面效果图分析，商品展示页和商品详情页采用的布局形式和首页大体一致，只是在网站主体部分划分为左右两栏。页面草图如图8-8所示。 图8-8 电子商务网站其他页面布局草图设计 根据草图的设计，可运用DIV进行整个页面框架的布局。DIV布局代码如下： body !--头部-- div id=header /div !--站内有哪些信誉好的足球投注网站-- div id=tSearch /div !--商品主体分类-- div class=column div class=column_sidebar!—左侧栏目-- /div div class=column_min!—右侧栏目-- /div /div !--新手指南-- div class=bottom /div !--网站底部版权信息-- div id=link /div /body 由于主页布局包含了其他页面布局的设计，为了保持网站页面设计的统一性，我们需要建立一个统一的样式表规则文件，这样各个页面就可以直接调用这个样式表文件，减少代码的冗余。 在建立CSS样式规则的时候，我们主要考虑每个“盒子”的大小（width和height）、填充（padding