网页设计与制作

基于工作过程的网页设计与制作教程

本章要点

基于工作过程的

网页设计与制作教程

基于工作过程的网页设计与制作教程情境1：俞晨视觉传奇个人主页

图 1-5 设置表格属性

1.1.2 网页的基本要素 图 1-6 俞晨视觉传奇网站default.html 网页基本构成要素

LOGO

网页文本网页图像

网页页脚网页导航

超级链接

1.1.2 网页的基本要素1．页面标题

1.1.2 网页的基本要素2．网站标志

1.1.2 网页的基本要素

4．页眉和页脚、导航栏、图片、文本

1.1.2 网页的基本要素5．多媒体

1.2 网页的基本概念

1．互联网

图

1.2 网页的基本概念2．万维网

1.2 网页的基本概念2．万维网

1.2 网页的基本概念2．万维网

1.2 网页的基本概念3．Web浏览器

1.2 网页的基本概念4．网页与网站

1.3网站的分类与赏析1.网站的分类

1.3 网站的分类与赏析

2.网站的赏析-门户类网站

2.网站的赏析-门户类网站 1.3 网站的分类与赏析 YAHOO 的网站以浅蓝、紫色系为主要色调，右上新业务栏会不时变化相应的主题，根据相应的主题来定制不同的颜色，使用户总有即时、新鲜的感觉。 （1）框架结构-首页上左中右下结构是框架,确切地说是左中右结构。整个网站的主要内容主要集中在中和右的信息

内容上。

（2）色彩与某些门户网站相比较，YAHOO 网站的用色比较清爽、干净。整体看来，YAHOO 使用了蓝色、紫色两套邻近色，辅助以灰色，使色彩过渡和谐。点睛色无疑为顶部左侧醒目突出网站的标志“YAHOO ！”，这也是网站中纯度最高的颜色。

YAHOO 网站不仅对色相的微妙区别把握得很好，而且对色彩的纯度

主次的把握也值得称赞。

（3）文字颜色使用了低纯度的普蓝和黑色，其中普蓝色的文字是网站的超级链接形式，鼠标放上去后会有微妙的明度变化以及下划线的出现。

说明性文字用的是黑色。信息内容框里的标题，主次关系排视觉第一位，内容框里的主要内容缩小字号，都做了粗细的变化。从文字上看，又一次体会到了门户网站对细节的推敲的严谨性。 （4）图形第一屏上最大的图片为右方的YAHOO ！Travel ，它能够直接体现出YAHOO 收益的新业务。其次为屏幕中央的新闻照片，其它则为左侧

的导航图片（个性服务）。

在整个网站里，破除单调呆板印象，使整个版面生动的点睛之笔是左侧的8个图标，也是网站为用户订制的特色服务。

1.3 网站的分类与赏析

2.网站的赏析-数码产品类网站

2.网站的赏析-数码产品类网站

1.3 网站的分类与赏析

（1）色彩分析使用蓝色来体现具有科技感的网站早已司空见惯，该实例大胆的采用了红、橙色来作为主色调，同时选用银灰色来作为辅助色。页面整体布局体现了产品的时代科技感，同时也体现了产品的活力潮流感。

选用红、橙色是依据网站

logo 、手机屏幕的色彩方案而设定的，是一种能同时体现企业形象与产品风格的设计方案。热情、充满活力的红色和橙色很好的体现了音乐手机的时尚魅力，让用户第一眼就被网站亮丽的色彩所吸引，这在当今网络上数以亿计的网页中显得尤为重要。银灰色的选用主要是起到了辅助衬托的作用，它不仅不抢主色调的风采，反而增加了页面的对比度。因为既然选用了红、橙色来作为主色调，那么就尽量少用或不用其他诸如蓝、绿等比较抢眼的颜色，否则将会出现主次不分明、画面凌乱的副作用。

（2）布局分析该网页的整体页面属于上下型结构，导航和 Banner 区域为一块，内容区域为另外一块。导航和Banner 区域的边框和内容区域的边框风格一致，这样既有整体性也有对比性。放在Banner 区域左边的会员登录框被包围在“电子线路板”的圆角线条框内，体现科技感的同时也符合了用户从“从左至右”的习惯。内容区域使用的是左右结构。左边使用了一张较大的手机屏幕图，然后将主要内容放置其中显得特别突出；右边使用了两幅广告图来推荐主要的业务；下面是文字类新闻标题。图文并茂显得画面更丰富多彩。

本章总结

基于工作过程的

网页设计与制作教程

1.4 习题

谢谢大家