|
一、制定网站设计方案
没有规矩，不成方圆，网站建设也是同样的道理。就像我们在每年年初要制定当年的工作计划一样，设计网站的结构和各种页面首先也要有一个计划。制定一个详细的设计方案，然后按照事先规划好的设计方案来分步实施，会少走很多弯路，至少不会因为一下子要改这里、一下子要改那里而毫无头绪。具体地说，网站设计方案主要应当包含三个方面的内容：
(一) 确定设计思想，如：网站总体包括哪些内容、主要服务对象是谁、怎样发布、怎样更新、怎样维护、由谁维护等等。
(二) 确定总体风格及技术规范，如：网站颜色和字体风格、布局、框架（包括统计标识），采用何种方式采集数据，采用何种方式显示数据，使用哪种数据库等等。
(三) 确定栏目规划，如：网站分为哪几个栏目，每个栏目是否还有子栏目，该栏目下主要有哪些内容，该栏目是一次性栏目（比如省局信息网的"50周年专栏"）还是经常性需要更新的栏目（比如省局信息网的"统计要闻"）栏目。
(四) 在纸上画好平面图（草图即可），最终对照成型的平面图进行主页设计。大家在实际操作过程中肯定会有这样的感觉，事先修改好总比事后再修改要方便。如果事先画好的平面图比较接近最终实际成形的框架，那么将意味着事半功倍的工作效率。
二、网页设计规范
网页制作一般采取由外到内，由粗到细的原则进行。即：先搭架子再填内容，先做主页再做二级、三级页面，最后做信息显示页面。
注意：在进行页面制作之前，做出网站的各类样式表，以保证网页设计方案中确定的风格及技术规范，比如说：标题1的文字大小、颜色；标题2的文字大小、颜色；正文的文字大小、颜色；超级链接的颜色、方式等等。样式表的作用就是对这些风格进行统一布置和管理，以达到整体的和谐效果。下面，具体介绍一下样式表的一些基本知识
◎ ［小知识］样式表
样式表又叫CSS，CSS是"Cascading Style Sheets"的简称，中文译为："串联式排版样式"`，也叫"串联样式表"。它的作用是用于定义文字属性，文本属性等网页中的基本信息，是网页中的字体大小颜色等等一系列基本信息不随着浏览器及系统显示的分辨率等因素的变化而变化，使得网页具有一定的"固定"性。
CSS具有以下特点：
· 通过修改页面调用的样式单，即可修改整个页面的样式。
· 使网页设计者能够控制以往无法控制的字体效果，如：下划线、字体风格等。
· 我们常见的鼠标指向时变色的链接，就是通过指定链接的不同行为的CSS来实现的。
· 执行速度快
· 不会对浏览者的系统造成任何影响
· 标准的CSS规则分为两部分：
◎ ［小知识］样式表的调用
CSS在网页中的应用分为外部引用和内部引用两种方式。
· 外部引用方式以.CSS为扩展名的纯文本文件保存需要描述的样式，在网页上使用<LINK>标签调用，例如：
<LINK HREF="Css/Style.css" REL=stylesheet Type=text/css >
<LINK>标签包括HREF；TYPE；REL三项属性设定，其中：
HREF：用来标定.CSS文件的地址URL.
REL：标示CSS的可选性－ stylesheet/altermate
TYPE：用于标示风格语言类型－ text/css
· 内部调用又称为内嵌方式，可以为当前网页指定风格。内部调用又可根据情况控制局部风格或整个网页，其中局部风格内嵌在网页中需定义风格的部分，而整体风格多放在网页的首部分，即：<head> </head>之间，应用在整个网页。
◎ ［小知识］样式表应用的基本格式
以内嵌式样式表为例：用HTML语言中的<STYLE></STYLE>标签来实现内嵌方式样式表的套用，如下：
<STYLE TYPE="TEXT/CSS" >
风格标定内容.......
</STYLE>
内容的基本语法由HTML样式元素和应用风格格式组成，如下：
HTML样式元素{property:value} 各个属性之间用";"号隔开
◎ ［小知识］最常用的CSS样式表内容
· 链接
例子1： 去掉链接的下划线，把鼠标放上后下划线重新出现。
是如何作到这一点的呢？在<head>和</head>之间加上如下的CSS语法控制：
<style type="text/css">
a:link { text-decoration: none}
a:visited { text-decoration: none }
a:hover {text-decoration:underline}
</style>
这样浏览器在执行时，就明白：
a:link 指正常的未被访问过的链接
a:hover 指正在点击的链接
a:visited 指已经访问过的链接
其中，text-decoration是文字修饰效果的意思，none参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线，换成overline则给超连文字加上划线，换成 line-through给超连文字加上删除线，blink则使文字在闪烁。
例子2：给链接加上颜色。
是如何作到这一点的呢？在<head>和</head>之间加上如下的CSS语法控制：
<style type="text/css">
a:link { text-decoration: none;color=#ec765a}
a:active { text-decoration: underline;color=black }
a:visited { text-decoration: none }
</style>
a:link中的color=#ec765a的效果是使正常的未被访问过的链接的链接显示红色，a:active的效果是使正在点击的链接显示黑色。依次类推您可以使您的超级链接变的很漂亮的！！
例子3：给不同的链接不同的效果
是如何作到这一点的呢？在<head>和</head>之间加上如下的CSS语法控制：
<style type="text/css">
A {COLOR: black; text-decoration:none}
A:visited {COLOR: black; text-decoration:none }
A:active {COLOR: red; text-decoration: underline}
A:hover {COLOR: red; text-decoration: underline}
A.a1:link{text-decoration:underline;color:black}
A.a1:visited{text-decoration:underline;color:black}
A.a1:active{text-decoration:underline;color:red}
A.a1:hover{text-decoration:underline; color:red}
A.a2:link{text-decoration:underline;color:#0143BD}
A.a2:visited{text-decoration:underline;color:#0143BD}
A.a2:active{text-decoration:underline;color:red}
A.a2:hover{text-decoration:underline; color:red}
A.a3:link{text-decoration:none;color:#ffffff}
A.a3:visited{text-decoration:none;color:#ffffff}
A.a3:active{text-decoration:none;color:#ffffff}
A.a3:hover{text-decoration:underline; color:#ffffff}
</style>
· 字体
字体属性描述:
font-family:字体族.
font-style:字形.itavic;oblique等
font-variant:文字字体
font-weight:字体权重.
font-size:字体大小.
font整体标定,以上属性分别列出即可.
例子1：控制字体大小
body, th, td, p {FONT-SIZE: 12px}
这样凡是在这些标记之下的所有文字，都会始终保持12px大小，而不会随浏览器轻易改变
· 段落
常用段落属性描述：
margin:指定边距大小分为margin-top/margin-right/margin-bottom/margin-left
text-aligh:指定块级元素的位置.left/right/center
text-indent:用于指定元素的缩进量.
letter-spacing:normal/length指定字符间距
word-spacing:normal/length字或是单词间的距离
line-height 行距
例子1：控制段落格式
.p1 {FONT-FAMILY: 宋体; FONT-SIZE: 12px; LINE-HEIGHT: 120%; margin-top:3px; margin-bottom:3px}
.p3 {FONT-FAMILY: 宋体; FONT-SIZE: 12px; LINE-HEIGHT: 120%; margin:5px}
.p4 {FONT-FAMILY: 宋体; FONT-SIZE: 12px; LINE-HEIGHT: 120%; margin:4px;text-indent:12px}
◎ ［小知识］一些局部使用CSS样式表的技巧
<font style="font:12px;color:red">这是一个测试</font>
<td style="border:1 solid #000000">这是一个测试</td>
<p style="margin-top:3;margin-bottom:3;font:14px">这是一个测试</p>
<table style="background-image: url('images/mainpage_06.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom"></table>
［摘自 《统计网站建设知识讲座》（湖南省统计局宣传中心编）］
|
阅读技巧
关闭窗口
