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

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

1、第16章小型企业网站制作16.1分析图纸本实例是一个研发雨水利用技术的公司网站，其页面设计如图所示。网站首页设计图网站内容页设计图16.1.1设计分析该网站的主色调是蓝色、灰色和白色，配以少量的黄绿色，文字为黑色。蓝色非常纯净，通常让人联想到“海洋”、“水”，符合公司的主题。并且“蓝色”代表的是沉稳、理智、准确，在商业设计中，强调科技，效率的企业形象。黄绿色的使用，则使整个网站显得朝气蓬勃。对于页面的重点部分“公司简介”等，采用了白色和浅灰色作为背景色，使得其非常醒目凸出；黑色的文字清晰且容易辨认。网站配色方

2、案16.1.2布局分析搞清楚网页的布局，对于后面搭建页面非常重要，因为这将指导我们如何裁切设计图以及如何组装HTML页面。当拿到设计稿以后，不要忙于着手切图，先看一下总体的布局设计，分析一下版式结构，对于以后HTML页面的搭建方法有一个大体的规划以后，再根据考虑好的规划来切图。本实例中，整个网站的布局十分简单明了，主要是为了突出内容。首页内容页16.1.2布局分析1.首页观察首页设计图，可以明显看出，首页主要分为左右两部分，左边是网站标识和研发项目，右边是公司简介、栏目列表和版本选择。具体分析如下：页面整体有

3、一个灰色的背景色，内容部分同页面顶部有一段距离。页面整体在窗口中左右居中显示。公司项目介绍部分的背景是一张背景图，并且下边有一条白色的虚线。网站标识、公司定位和语言版本选择部分，都采用了特殊字体，需要以图片的形式放置在网页上。重点内容部分的蓝色背景上有白线的底纹。栏目列表部分为无序列表，类型为“方块”。16.1.2布局分析为了实现页面的整体居中，需要一个最外层（id=main）来放置所有的内容，如图所示。main层16.1.2布局分析主要内容为左右并列的两个层，左边为放置标识和公司研发项目的层（id=left

4、），右边为放置重点内容和语言版本选择的层（id=box）。left层box层16.1.2布局分析公司标识层（id=logo）和研发项目层（id=explain）为上下顺序。logo层explain层16.1.2布局分析重点内容层（id=text）和语言版本选择层（id=ver）为上下顺序。text层ver层16.1.2布局分析2.内容页观察内容页设计图，可以看出页面主要分为上下两个部分。上部分为“页头部”，下部分为主要内容部分。这种版式是小型网站比较常用的版式，其中下部分分为左右两部分，左窄右宽。具体分析如下

5、：页面整体有一个灰色的背景色，内容部分同页面顶部有一段距离。页面整体在窗口中左右居中显示。网页头的部分，背景是一张背景图，并且下边有一条白色的虚线。网站标识和语言版本选择部分都采用了特殊字体，需要以图片的形式放置在网页上。左边的栏目选择部分有草绿色的左边框，并且行与行之间有间隙。虽然栏目选择部分具有底色和边框色，但是其组织形式还是无序列表，所以，此处的结构同首页一样，只是需要设置不同的外观样式。16.1.2布局分析为了实现页面的整体居中，需要一个最外层（id=main）来放置所有的内容。main层16.1.2

6、布局分析主要内容为上下两个层，上边为放置标识和语言版本选择的层（id=header），下边为放置栏目选择、内容和客服专线的层（id=box）。header层box层16.1.2布局分析企业标识层（id=logo）和语言选择层（id=ver）为左右顺序。logo层ver层16.1.2布局分析放置栏目的层（id=menu）为左对齐，内容层（id=text）和客服专线层（id=footer）则为右对齐。menu层text层footer层16.2拆分图纸通过观察图纸，已经对网页的版式与颜色有了基本的认识，下面要把制作

7、HTML页面需要的“原料”分离出来。这些原料一般包括尺寸、颜色、背景图、装饰性的线框、特殊字体的文字、装饰图片等。提取颜色拆分首页拆分内容页拆分图纸16.2.1提取颜色1.基本配色因为本实例所使用的颜色较少，图片也比较简洁，所以颜色的提取也相对简单。首页配色分析内容页配色分析16.2.1提取颜色未访问过的链接（link）已访问过的链接（visited）鼠标悬停（hover）当前激活链接（active）#000000，无下划线#666666，无下划线#a9d418，无下划线无定义2.超链接配色超链接配色，包括未

8、访问过的链接（link）、已访问过的链接（visited）、鼠标悬停（hover）以及当前激活链接（active）4种。首页超链接配色表内容页超链接配色表未访问过的链接（link）已访问过的链接（visited）鼠标悬停（hover）当前激活链接（active）#FFFFFF，无下划线#999999，无下划线#a9d418，无下划线无定义16.2.2拆分首页1.提取尺寸这里所说的尺寸，包括宽度（wi