网页设计——入门与提高 作者 王维 吴菲 王丽娜 第17章.pptVIP

第17章 电子商务网站制作 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 17.1 分析图纸 本实例是一个销售“日常生活用品”的购物网站 ，其页面设计如图所示。 网站设计图 17.1.1 设计分析 该网站的主色调是白色、绿色和浅灰色，配以少量的淡绿色，文字为灰色和橙色。本实例中的网站是销售基本生活用品的网站，因此选用白色做背景色，使整个页面看起来干净、整洁；配以绿色则使页面看起来清新、环保。大量的圆角背景图使页面显得平和而有层次。 网站配色方案 17.1.2 布局分析 通过观察设计图，可以总结出页面布局细节。 页面整体有一个淡绿色的背景色。 页面整体在窗口中左右居中显示。 页面头部Flash为透明背景的，而背景则通过层来放置。 导航栏部分，当鼠标指向链接的时候会出现图片的交替效果。 页面中有表单设计，即“会员登录”。 商品分类为部分为无序列表。 所有商品均为“图片+介绍”的方式呈现。 17.1.2 布局分析 为了实现页面的整体居中，需要一个最外层（id=main）来放置所有的内容 ，如图所示。 main层 17.1.2 布局分析 主要内容为5个层，分别是网站的标识层（id=logo）；网站导航栏层（id=nav）；网站左侧链接层（id=link）；网站主要商品层（id=box）；网站页脚层（id=footer）。其中，为了实现两列的显示，加入了两个定位层，link层和box层。 logo层 nav层 17.1.2 布局分析 link层 box层 footer层 17.1.2 布局分析 左侧链接层包括3个部分：会员登录层（id=login）、栏目分类链接层（id=sort）以及主题活动层（id=info）。 login层 sort层 info层 17.1.2 布局分析 右侧主要商品层包括3个部分：免费试用产品层（id=free）、热销产品层（id=hot）以及新品上市层（id=new）。 free层 hot层 new层 17.2 拆分图纸 通过观察图纸，已经对网页的版式与颜色有了基本的认识，下面要把制作HTML页面需要的“原料”分离出来。这些原料一般包括尺寸、颜色、背景图、装饰性的线框、特殊字体的文字、装饰图片等。 提取颜色 拆分元素 拆分图纸 17.2.1 提取颜色 1. 基本配色 窗口背景色为淡绿色f5ffd5。 页面背景色为白色#ffffff。 页面中的绿色颜色值为#adc923。 热销产品部分的灰色背景为#f6f4f5。 页面中的橙色文字颜色值为#de7524。 页面中的灰色文字颜色值为#666666。 17.2.1 提取颜色 2. 导航栏配色 本实例中导航栏部分，未访问过的链接（link）状态时为绿色圆角矩形背景，黑色文字，无下划线；鼠标悬停（hover）状态时为灰色圆角矩形，白色文字，无下划线。 link状态 hover状态 17.2.2 拆分元素 1. 提取尺寸 这里所说的尺寸，包括宽度（width）、高度（height）、边界（margin）、填充（padding）、边框（border）以及XY坐标等。 17.2.2 拆分元素 logo层背景图 nav层背景图 login层背景图 sort层背景图 17.3 组装 在制作HTML页面之前，需要先建立一个站点。 在计算机中建立一个文件夹，将其命名为“site”（文件夹名称可以根 据站点的内容自己设置，但不能使用中文名称）。 在site文件夹中再建立一个文件夹，命名为“images”，专门放置网站 中要用到的图片。现在，将前几步截取出来的图片，放置到images 文件夹中。 如果网站还应用到其他的元素，也将其分类放置，例如：flash动画 放置到“flash”文件夹；音频和视频文件放置到“media”文件夹。 网页文件如果比较少，可以直接放置到site文件夹下；如果页面比较 多，也可以为每个页面单独建立文件夹。本实例中直接放置在site文、 件夹下即可。 17.3.1 定义站点 将建立好的文件夹，用Dreamweaver定义成站点，这样软件就会对这个站点内的文件进行管理，比如自动更新链接、创建更新模板等，同时也方便对站点内的文件进行管理和操作，还可以共享文件以及将站点文件传输到Web服务器等。 站点 17.3.2 整体布局 logo层 link层 main层 login层 s