chapter8 other

来源：互联网发布：淘宝网客服联系打不开编辑：程序博客网时间：2024/05/21 09:10

由惊风转载自互联网。跟大家分享，不需要积分！

1.<!>跑马灯

<marquee>...</marquee>普通卷动

<marquee behavior=slide>...</marquee>滑动

<marquee behavior=scroll>...</marquee>预设卷动

<marquee behavior=alternate>...</marquee>来回卷动

<marquee direction=down>...</marquee>向下卷动

<marquee direction=up>...</marquee>向上卷动

<marquee direction=right></marquee>向右卷动

<marquee direction=’left’></marquee>向左卷动

<marquee loop=2>...</marquee>卷动次数

<marquee width=180>...</marquee>设定宽度

<marquee height=30>...</marquee>设定高度

<marquee bgcolor=FF0000>...</marquee>设定背景颜色

<marquee scrollamount=30>...</marquee>设定滚动速度

<marquee scrolldelay=300>...</marquee>设定卷动时间

<marquee onmouseover="this.stop()">...</marquee>鼠标经过上面时停止滚动

<marquee onmouseover="this.start()">...</marquee>鼠标离开时开始滚动

2.<!>字体效果

<h1>...</h1>标题字(最大)

<h6>...</h6>标题字(最小)

<b>...</b>粗体字

<strong>...</strong>粗体字(强调)（同上效果略同）

<i>...</i>斜体字

<em>...</em>斜体字(强调)

<dfn>...</dfn>斜体字(表示定义)

<u>...</u>底线

<ins>...</ins>底线(表示插入文字)

<strike>...</strike>横线

<s>...</s>删除线

<del>...</del>删除线(表示删除)

<kbd>...</kbd>键盘文字

<tt>...</tt> 打字体

<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)

<plaintext>...</plaintext>固定宽度字体(不执行标记符号)

<listing>...</listing>固定宽度小字体

<font color=00ff00>...</font>字体颜色

<font size=1>...</font>最小字体

<font style =’font-size:100 px’>...</font>无限增大

3.区断标记

<hr>水平线

<hr size=’9’>水平线(设定大小)

<hr width=’80%’>水平线(设定宽度)

<hr color=’ff0000’>水平线(设定颜色)

<br>(换行)

<nobr>...</nobr>水域(不换行)

<p>...</p>水域(段落)

<center>...</center>置中

4.<!>连结格式

<base href=位址>(预设好连结路径)

<a href=位址></a>外部连结

<a href=位址 target=’_blank’></a>外部连结(另开新视窗)

<a href=位址 target=’_top’></a>外部连结(全视窗连结)

<a href=位址 target=’页框名’></a>外部连结(在指定页框连结)

5.<!>贴图/音乐

<img src=图片位址>贴图

<img src=图片位址 width=’180’>设定图片宽度

<img src=图片位址 height=’30’>设定图片高度

<img src=图片位址 alt=’提示文字’>设定图片提示文字

<img src=图片位址’ border=’1’>设定图片边框

<bgsound src=MID音乐档位址>背景音乐设定

6.<!>表格语法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

<table height=高度>...</table>指定表格的高度大小(使用数字)

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

7.分割视窗

<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整

<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整

<frameset cols="20%,*">分割左右两个框架

<frameset cols="20%,*,20%">分割左中右三个框架

<分割上下两个框架

<frameset rows="20%,*,20%">分割上中下三个框架

属性：

cols垂直切割窗口（如左右分割两个窗口）接受整数值，百分数，*（*代表占用余下空间）数值的个数代表分成的部分数目，要以逗号分隔。例：cols="30,*,50%"可以切成三个视窗，第一部分是30像素（pixels）为绝对分割，第二部分是当分配完第一和第三视图后剩下的空间，第三部分则占整个窗口的50%宽度，为相对分割。

rows就是横向切割，将窗口上下分开，数值设置同上。

以上两属性尽量不要在同一个<frameset>标记中，因为王井（netscape）不支持，尽量采用多重分割。

frameborder 设置框架的边框，其值有0不要边框，1要边框。

border 设置框架边框厚度

framespacing 表示框架与框架间保留空白的距离

frame 元素（单标签）

语法格式：

属性：

name 框架名称，指定框架来做连接的目标窗口。

src 框架中要显示的网页文当url地址，每个个框架要对应一个html文挡。

scrolling 是否显示滚动条，yes/no,auto是自动。

noresize 设置不让使用者改变这个框架的大小，

8.noframe元素

指定当使用了框架的页面在不支持框架的浏览器中打开时显示的信息

语法格式：

......

</noframe>

9.表单<form></form>

语法格式：

....

</form>

method有两种提交方式get,post

action 是指明处理该表单的程序位置，这样表单所填的资料才能传给cgi做处里，可设定此参数为action="mailto:lwr8494@163.com"这样此表单所填的资料将会发送到这个邮箱地址。

method 是指传送信息给cgi等网络程序的方式。可选post方法， get方法，post方法容许传送大量信息。get方法只接受低于1k的信息。

申请表单用的是post搜索引擎用的是get

10.<! - - ... - ->注解

<A HREF TARGET> 指定超连结的分割视窗

<A HREF=#锚的名称>指定锚名称的超连结

<A HREF> 指定超连结

<A NAME=锚的名称>被连结点的名称

<ADDRESS>....</ADDRESS>用来显示电子邮箱地址

<B> 粗体字

<BASE TARGET> 指定超连结的分割视窗

<BASEFONT SIZE> 更改预设字形大小

<BGSOUND SRC> 加入背景音乐

<BIG> 显示大字体

<BLINK> 闪烁的文字

<BODY TEXT LINK VLINK>设定文字颜色

<BODY> 显示本文

<BR> 换行

<CAPTION ALIGN> 设定表格标题位置

<CAPTION>...</CAPTION>为表格加上标题

<CENTER> 向中对齐

<CITE>...<CITE> 用於引经据典的文字

<CODE>...</CODE> 用於列出一段程式码

<COMMENT>...</COMMENT>加上注解

<DD> 设定定义列表的项目解说

<DFN>...</DFN> 显示"定义"文字

<DIR>...</DIR> 列表文字标签

<DL>...</DL> 设定定义列表的标签

<DT> 设定定义列表的项目

<EM> 强调之用

<FONT FACE> 任意指定所用的字形

<FONT SIZE> 设定字体大小

<FORM ACTION> 设定户动式表单的处理方式

<FORM METHOD> 设定户动式表单之资料传送方式

<FRame MARGINHEIGHT>设定视窗的上下边界

<FRame MARGINWIDTH> 设定视窗的左右边界

<FRame NAME> 为分割视窗命名

<FRame NORESIZE> 锁住分割视窗的大小

<FRame SCROLLING> 设定分割视窗的卷轴

<FRame SRC> 将HTML档加入视窗

<FRameSET COLS> 将视窗分割成左右的子视窗

<FRameSET ROWS> 将视窗分割成上下的子视窗

<FRameSET>...</FRameSET>划分分割视窗

<H1>~<H6> 设定文字大小

<HEAD> 标示文件资讯

<HR> 加上分格线

<HTML> 文件的开始与结束

<I> 斜体字

<IMG ALIGN> 调整图形影像的位置

<IMG ALT> 为你的图形影像加注

<IMG DYNSRC LOOP> 加入影片

<IMG HEIGHT WIDTH> 插入图片并预设图形大小

<IMG HSPACE> 插入图片并预设图形的左右边界

<IMG LOWSRC> 预载图片功能

<IMG SRC BORDER> 设定图片边界

<IMG SRC> 插入图片

<IMG VSPACE> 插入图片并预设图形的上下边界

<INPUT TYPE NAME value>在表单中加入输入栏位

<ISINDEX> 定义查询用表单

<KBD>...</KBD> 表示使用者输入文字

<LI TYPE>...</LI> 列表的项目 ( 可指定符号 )

<MARQUEE> 跑马灯效果

<MENU>...</MENU> 条列文字标签

<MULTIPLE> 可同时选择多项的列表栏

<NOFRame> 定义不出现分割视窗的文字

<OL>...</OL> 有序号的列表

<OPTION> 定义表单中列表栏的项目

<P ALIGN> 设定对齐方向

<P> 分段

<PERSON>...</PERSON>显示人名

<PRE> 使用原有排列

<SAMP>...</SAMP> 用於引用字

<select >...</select >在表单中定义列表栏

<SMALL> 显示小字体

<STRIKE> 文字加横线

<STRONG> 用於加强语气

<SUB> 下标字

<SUP> 上标字

<TABLE BORDER=n> 调整表格的宽线高度

<TABLE CELLPADDING> 调整资料栏位之边界

<TABLE CELLSPACING> 调整表格线的宽度

<TABLE HEIGHT> 调整表格的高度

<TABLE WIDTH> 调整表格的宽度

<TABLE>...</TABLE> 产生表格的标签

<TD ALIGN> 调整表格栏位之左右对齐

<TD BGCOLOR> 设定表格栏位之背景颜色

<TD COLSPAN ROWSPAN>表格栏位的合并

<TD NOWRAP> 设定表格栏位不换行

<TD VALIGN> 调整表格栏位之上下对齐

<TD WIDTH> 调整表格栏位宽度

<TD>...</TD> 定义表格的资料栏位

<TEXTAREA NAME ROWS COLS>表单中加入多少列的文字输入栏

<TEXTAREA WRAP> 决定文字输入栏是自动否换行

<TH>...</TH> 定义表格的标头栏位

<TITLE> 文件标题

<TR>...</TR> 定义表格美一行

<TT> 打字机字体

<U> 文字加底线

<UL TYPE>...</UL> 无序号的列表 ( 可指定符号 )

<var>...</var> 用於显示变数

BlockQuotc文本缩进

11.表示颜色的有三种方式；

1，16进制颜色代码

语法：#RRGGBB

例：<font color="#ff0000">红色</font>

2，10进制RGB码

语法：RGB（RRR，GGG，BBB）

例：<font color="rgb(255,000,000)">红色</font>

3,直接用颜色的英文名称

例：<font color="red">红色</font>

12.<body>.....</body>属性可分为三种：

1，背景属性

包括：bgcolor,background

2,文字属性：

包括：text,link,alink,vlink,

3,留白属性：

其中分为：leftmargin,topmargin

.bgcolor背景色

语法格式：<body bgcolor="#ff0000">

.background背景图案。

语法格式：<body background="url">

.text文本颜色（非连接文字颜色）

.link连接文字颜色（可连接文字颜色）

.alink活动连接文字颜色（正被点击的可连接文字的颜色）

.vlink已访问连接文字颜色）（已经点击访问过的可连接文字的颜色）

语法格式：<body text="color" link="color" alink="color" vlink="color">

.leftmargin 页面左侧的留白距离

.topmargin 页面顶部的留白距离

语法格式：<body leftmargin="value" topmargin="value">

注：value为长度值为数字

13.align属性

语法：<h2 align="?">文字</h2>

其属性有三种：left靠左,center居中,right靠右

〈p〉</p>为段落标记，可利用以上属性对整个段落进行设置

〈br>为换行标记

<nobr></nobr>为不换行标记放在文字两边即可

例：<body>

<h3>江南逢李龟年</h3>

<p>歧王宅里寻常见<br>

催九堂前几度闻<br>

正是江南好风景<br>

落花时节又逢君</p>

</body>

14.预格式化：

<pre>......</pre> 浏览是效果和编写是效果格式一样

15.列表

1无序列表又称符号列表

语法格式：

<ul type="">type的属性可选直disc实心圆点,clrcle空心圆点,square实心方框

</ul>

2有序列表

语法格式：

</ol>

type的值是编号字符可选的有1...,a...,A...,i... ,I...

start为起始值例：如果start为3是那么将从3开始，而且必须是数字。

3定义列表

<dl>定义列表标记

<dt>标示定义条目

<dd>标示定义内容

语法格式：

<dl>

</dl>

16.连接和图像

语法格式：

属性：href连接目标值可以是url地址也可以是连接锚点

<a href="url">...</a>或者

name连接名称

语法格式：<a name="锚点名称">...</a>

例：<a name="abcdcf">...</a>

连接到该锚点的连接则应是：

target目标窗口语法格式：

-blank打开新窗口

_self当前窗口打开

一下两个仅在框架叶面中应用

_parent当前窗口的父级窗口（上一级）打开

_top在最高一级的窗口打开

windowname已命名的窗口或框架中打开连接

title连接提示

图像<img>语法格式：

border属性定义图片边框的宽度，默认值为0

align属性设置图片旁边文字的位置

语法格式：<img src="" align"">

可选值有：

top图片和文字顶部对齐

middle图片和文字居中对齐

bottom图片和文字底边对齐（默认）

left图片居左对齐，文字沿图片绕排

right图片居右对齐，文字沿图片绕排

absmiddle图片对齐到目前文字行绝对中央

absbottom图片对齐到目前文字行绝对底部

文字的排版

不换行空白标记

font元素

语法格式：

字体大小可选值为1--7，默认为3

例：〈font face="黑体" size="4" color="#ff00ff">....</font>

水平线<hr>

语法格式：<hr width="宽度" align="对齐方式默认居中center" size="水平线厚度默认为2" color="颜色" noshade>

noshade无阴影，既实线

层〈div><span>两种元素

<div>是块级元素，和段落元素<p>相似，不同的是两个<div>元素之间不会产生两个<p>元素之间的空行，

<span>是行内元素，可以定义段落中部分文字的属性

语法格式：

align设置层中元素的水平对齐方式

stule设置元素应用css规范的属性

表格语法格式：

</table>

border边框宽度默认值为0，既没有边框

cellspacing表格中单元格的边距大小，默认值为两个像素

cellpadding表格中单元格之间的间距大小，默认值为两个像素

tr元素

语法格式：

align属性对齐方式可选值如下：left,center,tight,默认为left

bgcolor指定该行的背景颜色

td元素

语法格式：

align属性的可选值有：left,center,right

valign属性的可选值有：top,middle,bottom

rowspan和colapan跨行和跨列的数量，默认为1

input元素语法格式：

type属性的可选值有：

text 单行文本框

属性：name文本框名称

value 文本框的初始值

size 文本框的长度

maxlength 可输入字符串最大的长度

radio 单选框

属性：name单选框名称

value 内部值

checked 默认选定

checkbox 复选框

属性：name复选框名称

value 内部值

checked 默认选定

reset 重置按钮

submit 确定按钮

属性：name按钮名称

value 显示在按钮上的文字

password 密码框

属性与文本框的属性完全相同

file 文件域

属性：name文件域名称

size 文件域的长度

maxlength 文件域可接受的字符数量的上限

hidden 隐藏域

属性：name隐藏域名称

value 内定值

image 图片域

属性：name所要代表的按钮，可以是submit,reset,或其他.

src 按钮图片的url地址

列表框<select>

语法格式：

.....

.....

</select>

select元素

语法格式：<select name="" size=""multiple></select>

name 指定列表框的名字

size 指定列表框显示列表项的条数，如果指定了该参数，select元素是个列表，否则是一个下拉列表框

multiple 指定了这个参数，则表示该列表框可选择多项，否则只可选择一项

option属性

语法格式：<option value="" selected></option>

value 该列表项的值

selected 如果设定了这个参数，默认为选定这一项

多行文本框<textarea>

属性：

name文本框的名称

cols文本框的宽度

rows文本框的高度

wrap文本框的折行方式可选值有：

off不保存换行信息

physical强迫浏览器在发送信息到web服务器端时必须将多行文本框的文字一行一行的送出，

virtual送出连续成串的字除非使用者按回车。

css层叠样式表

引入层叠样式表的方法包括：

外联式样式表

例：<head>

</head>

<body>

....

</body>

</html>

属性：rel 用来说明<link>元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址

内嵌式样式表：

例：<html>

<head>

<!--

td{font:9pt;color:red}

.font105{font:10.5pt;color:blue}

-->

</style>

</head>

</html>

元素内定

格式：<p style="font-size:10.5pt">

导入式样式表

〈html>

<head>

<!--

@import url(css/home.css);

-->

</style>

<body>

....

</body>

</html>

css的优先级

越接近目标的样式定义优先级越高，高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义

如果4种样式表对同一元素定义了不同的样式，那么他们的优先级顺序从高到低是，元素内定，内嵌样式表，导入样式表，外联样式表。

css结构

例：td{font-size:10.5pt;color:#666666}

css样式包含两个基础部分，

选择符<td>和声明{font-size:10.5pt;color:#666666}

声明也有两部分组成：

属性font-size,color和值10.5pt,#666666

选择符分为6种

1元素选择符

当页面上多个元素的样式相同时，可以将多个元素放在一起定义，中间以逗号分开例：td,p,li,input,select{font-size:12px;}

2class(类)选择符

例：〈head>

<!--

.red{font-size:10.5pt;color:#ff0000}

-->

</style>

</head>

<p class="red">士大夫井冈山地方官</p>

<p>九连环离开计划</p>

</body>

还有一种方法就是限定可以应用它的页面元素

例：〈head>

<!--

h1.red{color:#ff0000}

-->

</style>

</head>

<p class="red">士大夫井冈山地方官</p>

<h1 class="red">九连环离开计划</h1>

</body>

3 id选择符

与class选择附类似，只是把'.'换成'#'

例：<body>

<head>

<!--

#select{font-size:18px;color:#0000ff}

-->

</style>

</head>

<body>

<tr>

<td align="center" id="select">id选择符</td>

</tr>

</table>

</body>

</html>

我们看到在调用ID选择附时与CLASS选择附类似，只是将class=""换成了id=""，方便页面脚本语言的调用

关联选择符

<body>

<head>

<!--

td p{font-size:18px;color:#0000ff}

-->

</style>

</head>

<body>

<tr>

<td align="center"><p>关联选择符</p></td>

</tr>

</table>

<p>关联选择符</p>

</body>

</html>

我们设定了在元素中<td>的元素<p>所包含文字的样式，只有在两个条件都满足是，样式在会起作用，

伪类选择符

是只能用在css选择符里，而不能用在html代码中的选择符

例：

〈html>

<head>

<!--

a:link{color:#000000}

a:visited{color:#cccccc}

a:hover{color:#ff0000}

a:active{color:#ooooff}

-->

</style>

</head>

<body>

<p><a href="#">关联选择符</a><p>

〈/body>

</html>

正确的顺序是a:link\a:visited\a:hover否则会引起页面上连接颜色混乱

伪元素选择符

与伪类选择符定义类似，目前被大多数浏览器支持的有两个：首行伪元素（first-line）和首字符伪元素(first-letter)是用来实现首行大写和首行下沉效果的

例：首行

<html>

<head>

<style>

<!--

p:first-line{color:red;font-size:20pt}

-->

</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

长度随浏览器窗口大小而改变

首字

<html>

<head>

<style>

<!--

p:first-letter{color:red;font-size:50pt;float:left;}

-->

</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

以上两种都只能应用于块状元素上

css规则

1.继承

例：<html>

<head>

<!--

td{font-size:12pt}

p{color:red}

-->

</style>

</hesd>

<body>

<tr>

<p>css规则</p>

</td>

</table>

</body>

</html>

<p>为最高级<td>次一级两种css用在一个属性元素上，相同的覆盖，不同的继承，

2.组合

例:td{font-size:12pt}

p1{font-size:12pt}

组合后

td,.p1{font-size:12pt}

3.层叠

在样式里定义过后，在表格属性中又定义一次

<html>

<head>

<!--

red{color:#ff0000 limportant}

-->

</style>

</hesd>

<body>

<tr>

<td align="center" style="color:#0000ff" class="red">决撒地方官</td>

</tr>

</table>

</body>

</html>

css单位

分四大类：

1 长度单位

数值可以是整数，小数，正数，负数，0，后加单位（负值不要轻易使用）

换算关系：

1in(英寸)=6pc(派)

1in(英寸)=72pt(磅)

1in(英寸)=2.54(厘米)

1cm(厘米)=10mm(毫米)

1cm(厘米)=0.3937(英寸)

1pt(磅)=1/72in(英寸)=0.2478mm(毫米)

1pc(派)=1/6in(英寸)=我国新四号铅字的尺寸

2 百分比单位

3 颜色单位

4 url单位

div属性

color : #999999 文字颜色

font-family : 宋体文字字型

font-size : 10pt 文字大小

font-style:itelic 文字斜体育

font-variant:small-caps小字体

letter-spacing : 1pt文字间距

line-height : 200% 设定行高

font-weight:bold 文字粗体

vertical-align:sub 下标字

vertical-align:super上标字

text-decoration:line-through加?h除线

text-decoration:overline加顶线

text-decoration:underline加底线

text-decoration:none ?h除连接底线

text-transform : capitalize首字大写

text-transform : uppercase英文大写

text-transform : lowercase英文写

text-align:right 文字*右对齐

text-align:left 文字*左对齐

text-align:center 文字置中对齐

这些是一些简单的文字效果，可以应用到css的页面中。　

背景

background-color:black背景颜色

background-image : url(image/bg.gif)背景图片

background-attachment : fixed固定背景

background-repeat : repeat重复排列-网页预设

background-repeat : no-repeat不重复排列

background-repeat : repeat-x在x轴重复排列

background-repeat : repeat-y在y轴重复排列

background-position : 90% 90%背景图片x与y轴的位置　

链接

A 所有超连接

A:link 超连接文字格式

A:visited 浏览过的连接文字格式

A:active 按下连接的格式

A:hover 鼠标移至连接

边框

border-top : 1px solid black上框

border-bottom : 1px solid #6699cc下框

border-left : 1px solid #6699cc左框

border-right : 1px solid #6699cc右框

border: 1px solid #6699cc四边框

虚线

实线

网页的设计原则

一个成功抓住用户“眼球”并最终带来经济效益的企业网站首先需要一个优秀的设计，然后辅之优秀的制作。设计是网站的核心和灵魂，是一个感性思考与理性分析相结合的复杂的过程，它的方向取决于设计的任务，它的实现依赖于网页的制作。正所谓“功夫在诗外”，网页设计中最重要的东西，并非在软件的应用上，而是在我们对网页设计的理解以及设计制作的水平上，在于我们自身的美感以及对页面的把握上。

首先，我们要弄清楚网页设计的任务。

一、设计的任务

设计是一种审美活动，成功的设计作品一般都很艺术化。但艺术只是设计的手段，而并非设计的任务。设计的任务是要实现设计者的意图，而并非创造美。

网页设计的任务，是指设计者要表现的主题和实现的功能。站点的性质不同，设计的任务也不同。从形式上，可以将站点分为以下三类：

第一类是资讯类站点，像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息，而且访问量较大。因此需注意页面的分割、结构的合理、页面的优化、界面的亲和等问题。

第二类是资讯和形象相结合的网站，像一些较大的公司、国内的高校等。这类网站在设计上要求较高，既要保证资讯类网站的上述要求，同时又要突出企业、单位的形象。

第三类则是形象类网站，比如一些中小型的公司或单位。这类网站一般较小，有的则有几页，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。当然，这只是从整体上来看，具体情况还要具体分析。不同的站点还要区别对待。别忘了最重要的一点，那就是客户的要求，它也属于设计的任务。

明确了设计的任务之后，接下来要想的就是如何完成这个任务了。

二、设计的实现

设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制，这一部分可以在纸上完成。第二部分为网页的制作，这一过程是在计算机上完成的。

设计首页的第一步是设计版面布局。我们可以将网页看作传统的报刊杂志来编辑，这里面有文字、图像乃至动画，我们要做的工作就是以最适合的方式将图片和文字排放在页面的不同位置。

接下来我们要做的就是通过软件的使用，将设计的蓝图变为现实，最终的集成一般是在Dreamweaver里完成的。虽然在草图上，我们定出了页面的大体轮廓，但是灵感一般都是在制作过程中产生的。设计作品一定要有创意，这是最基本的要求，没有创意的设计是失败的。在制作的过程中，我们会碰到许多问题，其中最敏感的莫过于页面的颜色了。

三、色彩的运用

色彩是一种奇怪的东西，它是美丽而丰富的，它能唤起人类的心灵感知。一般来说，红色是火的颜色，热情、奔放；也是血的颜色，可以象征生命。黄色是明度最高的颜色，显得华丽、高贵、明快。绿色是大自然草木的颜色，意味着纯自然和生长，象征安宁和平与安全，如绿色食品。紫色是高贵的象征，有庄重感。白色能给人以纯洁与清白的感觉，表示和平与圣洁。

我们知道，颜色是光的折射产生的，红、黄、蓝是三原色，其它的色彩都可以用这三种色彩调和而成。换一种思路，我们可以用颜色的变化来表现光影效果，这无疑将使我们的作品更贴近现实。

色彩代表了不同的情感，有着不同的象征含义。这些象征含义是人们思想交流当中的一个复杂问题，它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。

单纯的颜色并没有实际的意义，和不同的颜色搭配，它所表现出来的效果也不同。比如绿色和金黄、淡白搭配，可以产生优雅，舒适的气氛。蓝色和白色混合，能体现柔顺、淡雅、浪漫的气氛。红色和黄色、金色的搭配能渲染喜庆的气氛。而金色和粟色的搭配则会给人带来暖意。设计的任务不同，配色方案也随之不同。考虑到网页的适应性，应尽量使用网页安全色。

但颜色的使用并没有一定的法则，如果一定要用某个法则去套，效果只会适得其反。经验上我们可先确定一种能表现主题的主体色，然后根据具体的需要，应用颜色的近似和对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体，以达到和谐、悦目的视觉效果。

四、网页布局类型

　　网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。

1、“国”字型：

2、拐角型：

　　这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。

3、标题正文型：

　　这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

4、左右框架型：

　　这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。

5、上下框架型：

　　与上面类似，区别仅仅在于是一种上下分为两页的框架。

6、综合框架型：

　　上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。

7、封面型：

　　这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。

8、Flash型：

　　其实这与封面型结构是类似的，只是这种类型采用目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。

9、变化型：

　　即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。

　　有关导航栏的位置

　　导航栏能让我们在浏览时容易的到达不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目，一般来讲，导航栏要在“第一屏”能显示出来，那种横向放置的导航栏要优于纵向的导航栏考虑，原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多。

　　什么样的布局是最好的

　　这是初学者可能会问的问题。其实这要具体情况具体分析的：比如如果内容非常多，就要考虑用“国字型”或拐角型；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型了，我只是想把这个留给读者了，因为，只有不断的变化才会提高，才会不断丰富我们的网页。

五、造型的组合

　　在网页设计中，我们主要通过视觉传达来表现主题。在视觉传达中，造型是很重要的一个元素。抛去是图还是文字的问题，画面上的所有元素可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里，是需要点、线、面的共同组合与搭配来构造整个页面的。

　　通常我们可以使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、交叉、节奏、韵律、归纳、变异、特写、反射等等，它们都有各自的特点。在设计中应根据具体情况，选择最适合的表现手法，这样有利于主题的表现。

　　通过点、线、面的组合，可以突出页面上的重要元素，突出设计的主题，增强美感，让观者在感受美的过程中领会设计的主题，从而实现设计的任务。

造型的巧妙运用不仅能带来极大的美感，而且能较好地突出企业形象，而且能将网页上的各种元素有机的组织起来，它甚至还可以引导观者的视线。

六、设计的原则

　　设计是有原则的，无论使用何种手法对画面中的元素进行组合，都一定要遵循五个大的原则：统一、连贯、分割、对比及和谐。

　　统一，是指设计作品的整体性，一致性。设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。

　　连贯，是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽，犹如一气呵成。

　　分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。在信息量很多时为使观者能够看清楚，就要注意到将画面进行有效的分割。分割不仅是表现形式的需要。换个角度来讲，分割也可以被视为对于页面内容的一种分类归纳。

　　对比就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如：多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。

　　和谐是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。　

七、网页的优化

　　在网页设计中，网页的优化是较为重要的一个环节。它的成功与否会影响页面的浏览速度和页面的适应性，影响观者对网站的印象。

　　在资讯类网站中，文字是页面中最大的构成元素，因此字体的优化显得尤为重要。使用css样式表指定文字的样式是必要的，通常我们将字体指定为宋体，大小指定为12px，颜色要视背景色而定，原则上以能看清且与整个页面搭配和谐为准。在白色的背景上，我们一般使用黑色，这样不易产生视觉疲劳，能保证浏览者较长时间地浏览网页。

　　图片是网页中的重要元素。图片的优化可以在保证浏览质量的前提下将其size降至最低，这样可以成倍地提高网页的下载速度。利用Photoshop或Fireworks可以将图片切成小块，分别进行优化。输出的格式可以为gif或jpeg，要视具体情况而定。一般我们把有较为复杂颜色变化的小块优化为jpeg，而把那种只有单纯色块的卡通画式的小块优化为gif，这是由这两种格式的特点决定的。

　　 DIV与表格(table)是页面中的重要元素,是页面排版的主要手段。我们可以设定DIV与表格的宽度、高度、边框、背景色、对齐方式等参数。很多时候，我们将表格的边框设为0，以此来定位页面中的元素，或者籍此确定页面中各元素的相对位置。我们知道：浏览器在读取网页html原代码时，是读完整个table才将它显示出来的。如果一个大表格中含有多个子表格，必须等大表格读完，才能将子表格一起显示出来。我们在访问一些站点时，等待多时无结果，按"停止"按钮却一下显示出页面就是这个原因。因此，我们在设计页面表格的时候，应该尽量避免将所有元素嵌套在一个表格里，而且表格嵌套层次尽量要少。因此我们可以采用DIV套表格的方式来减少嵌套，提高网页的浏览速度。

　　网页的适应性是很重要的，在不同的系统上，不同的分辨率下，不同的浏览器上，我们将会看到不同的结果，因此设计时要统筹考虑。一般我们在800*600下制作网页，最佳浏览效果也是在800*600分辨率下，在其它情况下只要保证基本一致，不出现较大问题即可。

　　说了这么多，只是希望能对做“网页设计”的同学有所帮助，希望同学们在做网页的时候能够从整体着眼，无愧于“设计”这两个字。

网页的色彩搭配

网站的整体风格是树立网站形象的关键，它的整体风格是留给浏览者的综合感受，是抓着浏览者视线的关键，但是网站风格是什么呢？

　　风格(style)是抽象的。这个“整体风格”包括站点的CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义等等诸多因素。举个例子：我们觉得网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的。这些都是网站给人们留下的不同感受。想让网站抓着人们的视线，就要有有自己独到的风格。网页的色彩是树立网站风格的关键之一，色彩搭配却是网站设计者们感到头疼的问题。网页的背景，文字，图标，边框，超链接...，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？

　　首先我们先来了解一些色彩的基本知识：

　　1.颜色是因为光的折射而产生的。

　　2.红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。

　　网页html语言中的色彩表达即是用这三种颜色的数值表示

　　例如：红色是color(255,0,0)十六进制的表示方法为(FF0000)

　　白色为(FFFFFF), 我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。

　　3.颜色分非彩色和彩色两类。

　　非彩色是指黑，白，灰系统色。

　　彩色是指除了非彩色以外的所有色彩。

　　4.任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。

　　网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。

　　●非彩色的搭配

　　黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。

　　●彩色的搭配

　　色彩千变万化，彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。

　　一、色环。我们将色彩按"红->黄->绿->蓝->红"依次过度渐变，就可以得到一个色彩环。色环的两端是暖色和寒色，当中是中型色。(如下图)

　　二、色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。

　　红色---是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。

　　绿色---介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。

　　它和金黄，淡白搭配，可以产生优雅，舒适的气氛。

　　橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。

　　黄色---具有快乐，希望，智慧和轻快的个性，它的明度最高。

　　蓝色---是最具凉爽，清新，专业的色彩。

　　它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:)

　　白色---具有洁白，明快，纯真，清洁的感受。

　　黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。

　　灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。

　　每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。

　　○网页色彩搭配的原理

　　1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。

　　2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。

　　3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

　　4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。

　　○网页色彩掌握的过程

　　随着网页制作经验的积累，我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。

　　○网页色彩搭配的技巧

　　文章写到这里，有心急的同学要问了：“到底用什么色彩搭配好看呢？你能不能推荐几种配色方案？”别急，这里有一点技巧，可以帮助你迅速成为调色大师:

　　1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

　　2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。如果主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

　　3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，可以在photoshop里按前景色方框，在跳出的拾色器窗中选择"自定义"，然后在"色库"中选就可以了。

　　4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。

　　在网页配色中，忌讳的是：

　　1.不要将所有颜色都用到，尽量控制在三种色彩以内。

　　2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。