第十章 电子商务网页设计与制作实例.pptVIP

网页设计与制作 学时：60学时 第十章 电子商务网页设计与制作实例 了解：了解了解网页设计与制作的流程;了解如何使用工具进行网页设计与制作。 熟练掌握：掌握网页设计、网页制作、网页动画制作的技能; 掌握CSS样式表及表格的运用。 掌握：掌握网页三剑客软件在网站开发中的配合使用。 第一节 网站规划 一、确定网站的内容 一、确定网站的内容 要确定网站的内容，首先要了解客户的业务特性。本章制作的是一个电子商务网站。 为了使客户与网站开发人员，都能清晰地了解网站内容，应将规划的栏目制作成一张表格，并对各栏目中的主要内容进行简介，恒时尚服装商贸公司网站内容规划说明如表。 栏目分类 栏目名称 栏目内容简介 导航栏 时尚男人 提供网站的男式服装信息 优雅女人 提供网站女式服装信息 可爱宝贝 提供网站的儿童类服装信息 匡威鞋 网站的主打销售品牌——匡威鞋专栏介绍 特价专区 提供网站的特价服装商品信息 如何购买 网站商品购买方式指南 批发\代理 介绍恒时尚服装商贸公司批发方式与代理方式 联系 恒时尚服装商贸公司的联系方式 其他栏目 新货上架 提供网站必威体育精装版到货信息 品牌专区 罗列网站销售的品牌种类，并提供这些品牌商品的供货信息 产品分类 分类展示网站的商品，按男装、女装等类别进行分类，并提供各类别的商品的供货信息 会员登录 可注册为网站的会员，享受更多商品信息及服务项目 商品有哪些信誉好的足球投注网站 提供站内商品有哪些信誉好的足球投注网站，更方便地为浏览者提供商品信息服务 二、确定网站的结构 二、确定网站的结构 为了便于制作网页效果图时，能更好地完成工作，将导航结构绘制成网站结构图，如图。 首页 时尚男人 优雅女人 可爱宝贝 匡 威 鞋 特价专区 如何购买 批发\代理 联系我们 三、确定网页的版面布局 三、确定网页的版面布局 网页的版面布局，是指网页中各栏目内容在浏览器窗口中的位置，一般分为3种形式：通栏、二分栏、三分栏。 1.通栏 通栏式的布局，多用于形象宣传型网站，它的内容容量不大，但其视觉效果却很强烈。 2.二分栏 二分栏的布局多用于中小型企业网站，它的特点是将页面的主体内容分为左右两部分，一边为充满链接的侧边栏，一边为页面的主要内容。 3.三分栏 三分栏布局通常用于内容较多的网站，而且一般都用于首页或大型网站的子栏目首页。三分栏布局将网站的栏目按主次和内容比重不同，从左到右，将网页分成三栏，左、右两侧放置一些列表链接，中间部分放置网站中最重要的栏目。 四、确定网站的配色与风格 四、确定网站的配色与风格 要确定网站的配色与风格，仍要先根据客户的行业特点及客户销售的产品特性，为其制订配色与风格方案。 第二节 使用Fireworks绘制网页图像 一、获取网站logo 一、获取网站logo 使用蒙版完美获取网站Logo。 二、制作网页主体图像 二、制作网页主体图像 在本网站中，加入了一幅主体图像。主体图像的主要作用是展示网站形象，也是为了后期其主体动画的制作，其尺寸一般为通栏式，下面介绍本站主体图像的创建。 三、制作网页效果图 三、制作网页效果图 4．创建底部内容 3．创建中部内容 2．创建顶部内容 1．创建文档 第三节 使用Dreamweaver制作网站 一、网站的搭建 一、网站的搭建 在Dreamweaver中设置本地硬盘上一个文件夹为站点文件夹。 二、页面初始化 二、页面初始化 在Dreamweaver中打开index.html文件后，为其进行标题、边界距等网页初始化操作。 三、制作页首部分 三、制作页首部分 本部分将完成下图效果。 三、制作页面部分 三、制作页面部分 3．制作页面底部 2．制作页面中部 1．创建顶部内容 THE END