网页设计——入门与提高 教学课件 作者 王维 吴菲 王丽娜 第17章.ppt

《网页设计——入门与提高 教学课件 作者 王维 吴菲 王丽娜 第17章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第17章电子商务网站制作17.1分析图纸本实例是一个销售“日常生活用品”的购物网站，其页面设计如图所示。网站设计图17.1.1设计分析该网站的主色调是白色、绿色和浅灰色，配以少量的淡绿色，文字为灰色和橙色。本实例中的网站是销售基本生活用品的网站，因此选用白色做背景色，使整个页面看起来干净、整洁；配以绿色则使页面看起来清新、环保。大量的圆角背景图使页面显得平和而有层次。网站配色方案17.1.2布局分析通过观察设计图，可以总结出页面布局细节。页面整体有一个淡绿色的背景色。页面整体在窗口中左右居中显示。页面头部Flash为透明背景的，而背景则通过层来放置。导航栏

2、部分，当鼠标指向链接的时候会出现图片的交替效果。页面中有表单设计，即“会员登录”。商品分类为部分为无序列表。所有商品均为“图片+介绍”的方式呈现。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

3、布局分析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页面需要的“原料”分离出来。这些原料一般包括尺寸、颜色、背景图、装饰性的线框、特殊字体的文字、

4、装饰图片等。提取颜色拆分元素拆分图纸17.2.1提取颜色1.基本配色窗口背景色为淡绿色f5ffd5。页面背景色为白色#ffffff。页面中的绿色颜色值为#adc923。热销产品部分的灰色背景为#f6f4f5。页面中的橙色文字颜色值为#de7524。页面中的灰色文字颜色值为#666666。17.2.1提取颜色2.导航栏配色本实例中导航栏部分，未访问过的链接（link）状态时为绿色圆角矩形背景，黑色文字，无下划线；鼠标悬停（hover）状态时为灰色圆角矩形，白色文字，无下划线。link状态hover状态17.2.2拆分元素1.提取尺寸这里所说的尺寸，包括宽度（

5、width）、高度（height）、边界（margin）、填充（padding）、边框（border）以及XY坐标等。17.2.2拆分元素logo层背景图nav层背景图login层背景图sort层背景图17.3组装在制作HTML页面之前，需要先建立一个站点。在计算机中建立一个文件夹，将其命名为“site”（文件夹名称可以根据站点的内容自己设置，但不能使用中文名称）。在site文件夹中再建立一个文件夹，命名为“images”，专门放置网站中要用到的图片。现在，将前几步截取出来的图片，放置到images文件夹中。如果网站还应用到其他的元素，也将其分类放置，例如

6、：flash动画放置到“flash”文件夹；音频和视频文件放置到“media”文件夹。网页文件如果比较少，可以直接放置到site文件夹下；如果页面比较多，也可以为每个页面单独建立文件夹。本实例中直接放置在site文、件夹下即可。17.3.1定义站点将建立好的文件夹，用Dreamweaver定义成站点，这样软件就会对这个站点内的文件进行管理，比如自动更新链接、创建更新模板等，同时也方便对站点内的文件进行管理和操作，还可以共享文件以及将站点文件传输到Web服务器等。站点17.3.2整体布局logo层link层main层login层sort层nav层info层b

7、ox层free层hot层new层footer层17.3.3插入内容logo层——flash动画nav层——列表login层——表单+列表sort层——列表info层——列表free层——图像hot层——无序列表+释义列表new层——无序列表+释义列表footer层——文本17.3.4设置CSS为页面设置CSS样式，通常包含以下几个步骤：定义通用规则定义标签定义各个层以及层里面的内容尺寸：长、宽背景：背景图、背景色位置：左中右、上中下、填充、边界边框：线型、宽度、颜色定义超链接