电子商务网站建设教程-项目三设计电子商务网站前台用户系统.pptxVIP

在本项目中，通过3个工作任务，向读者展示出电子商务网站的前台设计，包括首页、二级页面的设计要点、风格、特点，然后带领读者分析网站的艺术性。在达到网站功能要求的同时，也要注重网站的艺术美。 设计制作美滋滋瓜子网站首页 设计美滋滋瓜子网站的二级页面 分析电子商务网站艺术设计 设计制作美滋滋瓜子网站首页 设计制作美滋滋瓜子网站首页 首页的功能模块 首页设计的要点 首页设计的方法 李佳是某网站设计公司的程序员，接到主管任务，她负责制作美滋滋瓜子网站首页。要求在首页展现出美滋滋瓜子的8个栏目，还要规划页面布局，展现产品。 设计制作美滋滋瓜子网站首页 任务一：设计制作美滋滋瓜子网站首页 由于首页是网站的形象页面，一个网站能否吸引浏览者留在该站中漫游，全凭首页设计效果的好坏。首页设计对于任何网站都是至关重要的。因此，李佳使用Dreamweaver对首页做规划布局。 任务一：设计制作美滋滋瓜子网站首页 任务 实施 设计制作美滋滋瓜子网站首页 1.规划与构思 规划美滋滋瓜子网站，把它分为关于美滋滋、品牌战略、新闻中心、产品中心、网上订单、招贤纳士、联系我们、留言板这8 个栏目。首页页头应包括 Logo、导航、Banner 等版块；首页页中应包括新品推荐、新品展示、行业新闻、企业新闻、必威体育精装版公告、食品知识、在线调查等版块；首页页尾应包括联络信息、计数器等版块。 2.定义首页尺寸规格、背景与布局安排 （1）设计版面布局，绘制草图，如下图所示。 （2）在 Dreamweaver 中新建文档，将其命名并保存。然后设置其页面属性，如下图 所示。 3. 设计页头 （1） 用布局表格工具绘制表格，表格宽度为 779 像素。用布局单元格工具绘制单元格， 如下图所示。 （2）在左边的单元格内插入网站 Logo，如下左图所示。 （3）在右上部单元格内插入导航 1，如下右图 所示。 （4）在右下部单元格内插入导航 2。由于导航 2 为 Flash 制作，所以选择菜单栏中的“插入”| “媒体”| “Flash”，如下图所示。 （5）制作 Banner。插入一个 779 像素宽的表格，在表格中插入 Banner 动画。最后的页头效果如下图 所示。 4.设计页中 （1）确定网页内容部分分为 3 列。插入一个宽为 779 像素的表格，将其拆分成 3 列，宽度分别为 “159、338、219”，如下图所示。 （2）制作左边的表格。插入一个百分比表格，然后将其拆分成 6 行，如下图所示。 （3）在第一、第四个单元格 内插入栏 目标识 ，在第二个单元格 内插入文字，将第三 ，第五个单元格高度分别设置为 159 像素与 140 像素 ，并将背景 图插入 ，如下图所示。 （4）制作中间部分的内容框。插入一个百分比表格，然后将其拆分成 6 行。在第一，第三，第五个单元格内插入栏 目标识，在第二，第四，第六个单元格内插入背景图，单元格 高度分别设置为 “130、137、103”，如下图所示。 （5）制作内容部分的最后一栏。将表格宽度定位百分比，再将表格拆分成 4 栏。在第一、第三个单元格内插入栏 目标识，在第二、第四个单元格内插入背景图，如下图所示。 5.设计页尾 （1）插入一个宽为 779 像素的表格，设置其高为 10 像素，以红色填充(#C30000)，如下图 所示。 （2）插入一个 779 ×76 像素的表格，在其中插入背景图，效果如下图 所示。 （1）整个网页的样式设计已基本上完成，接下来要填充内容。 （2）在插入网页内容时，中列表格用到了表格的 CSS 定义。在此，具体说一下如何给 表定义 CSS 样式。选中单元格，然后右击鼠标，在弹出的菜单上选择 “CSS 样式”| “新 建”，如下左图所示。 由于网页中只用到虚线的表框，所以在弹出的对话框 内选择 “边 框”，再根据自己的需要对表格进行定义，最后应用到所要定义的表格上，如下右图所示。 6.填充内容 （3）完成设计后，浏览一下整体的效果，如下图所示。 设计美滋滋瓜子网站的二级页面 设计美滋滋瓜子网站的二级页面 新闻页面设计 产品页面设计 客户支持页面设计 企业信息页面设计 王晶是某网络设计公司程序员，接到主管任务，他与李佳共同制作美滋滋瓜子网站。王晶负责二级页面的制作，要求，展示出新闻页面、产品页面、客户支持页成、企业信息页面。 设计美滋滋瓜子网站的二级页面 任务二：设计美滋滋瓜子网站的二级页面 由于一整个完整的美滋滋瓜子网站不光要有首页，还要有相关连的二级页面，包括网站新闻、产品、客户支持等二级页面的设计方法，构造出站点整体和谐、风格统一的网站页面。因此，王晶要用制作二级页面来完成此任务。 任务二：设计美滋滋瓜子网站的二级页面 任务 实施 设计美滋滋瓜子网站的二级页面 (1