关于“网页设计制作”的基础知识概要
2006年4月8日 | 作者: 牧天 | 分类: Tips, XHTML/HTML
前天晚上，6G 站员一行去新校区举办了“网页制作与网站建设”技术宣讲会。
由于新校区那边主要都是大一的新生，估计他们在网页设计制作这方面有所了解或了解较多的人很少，所以我们准备的讲座内容都是比较基础而又带有启发性的。
下面是我在讲座时的主要提纲，总结得很粗糙，而且好多需要扩展的地方都是直接讲出来或是给他们演示出来的，并没有写在这里，提纲发在这里，仅供大家做个参考！
“网页设计制作”的基础知识概要
/ 网站设计，包含的内容非常多。大体分两个方面：
一方面是纯网站本身的设计比如文字排版，图片制作，平面设计，三维立体设计，静态无声图文，动态有声影像等；
另一方面是网站的延伸设计，包括网站的主题定位和浏览群的定位，智能交互，制作策划，形象包装，宣传营销等等。// 网站制作流程：
- 网站定位（定位你网站的主题和名称、CI形象）
- 栏目策划（确定网站的栏目和版块、目录结构和链接结构）
- 技术策划（确定制作网站所要使用的技术、所需实现的功能）
- 设计制作页面效果图（网站整体风格和视觉效果设计）
- 效果图切片（分析如何最佳地匹配浏览器）
- 设计制作网页媒体（Flash、Music、Vedio）
- 静态页生成（完成网站的层次结构和链接结构）
- 添加前台脚本、代码优化（添加JS、Ajax等）
- 代码校验、标准测试（浏览器兼容测试、服务器加载测试、网页标准检测）
- 添加前台程序并制作后台（ASP、PHP、CGI、.NET、JSP）
- 程序测试
- 发布站点
- 后续工作：域名、备案、服务器、主机、配置、维护
/ 以下因素你考虑了吗？
- 效果与速度
- 以用户为中心，从浏览者的角度考虑
- 交互性与亲和度
- 考虑不同的浏览器和分辨率
- 字体的设置和表格的嵌套
- 新技术的运用取舍
- 语句文字–融入感情
/ 浏览器：
IE → MyIE、Maxthon、GreenBrowser、TT
Firefox、Mozilla
NetScape
Opear/ 屏幕宽度：
800×600：778px
1024×768：1004px// 切片：
软件：Photoshop、Fireworks
切片技巧
导出格式：GIF、JPG、PNG// 静态页：
/ 基本HTML文档：
<html”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>标题</title>
</head>
<body>
正文
</body>
</html>/ 基本标签：
<table> </table>
<tbody> </tbody>
<p> </p>
<a name=” ” id=” “> </a>
<img src=” ” alt=”描述” name=” ” width=” ” height=” ” id=” ” style=”background-color: #” />
<embed src=” ” width=” ” height=” “></embed>
<form id=” ” name=” ” method=” ” action=” “></form>
<div></div>/ HTML注释：
<!– 注释内容 –>/网页文件声明：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>/ META标记：
<meta name=”robots” content=”all” />
<meta name=”keywords” content=” ” />
<meta name=”description” content=” ” />
<meta name=”author” content=” ” />
<meta name=”copyright” content=” ” />
<link rel=”icon” href=”/favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />
<link rel=”stylesheet” type=”text/css” href=” ” />/ 使用标签注意：
1、为了保证网站能够与下一代的web 语言xml 标准兼容，所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写 <a href=”url”> 而不 是 <a href=url>。2、如果<td>中没有任何嵌套的表格，</td> 结束标记应该与 <td> 处于同一行，不要换行，如我们注意在源代码中不应有这样的代码：
<td><img src=”../images/sample.gif”>
</td>
而应该是这样的：
<td><img src=”../images/sample.gif”></td>
这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：
<td><img src=”../images/sample.gif”> </td>3、不允许没有任何内容的空的单元格存在，高度大于等于12px 的单元格应该 在 <td> 和 </td> 之间写一个 ，如果高度小于12px, 则应该 在 <td> 和 </td> 之间插入一个1*1 大小的透明的gif 图片，这是因为某些浏览器认为空单元格非法而不会予以解释。
4、Width 和height 的写法也有统一的规范，一般情况下只有一列的表格，width 写在<table> 的标签内，只有一行的表格，height 写在 <table> 的标签内，多行多列的表格，width 和height 写在第一行或者第一列的 <td> 标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的，也就是你改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。
// CSS的使用：
CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。
基本格式如下：
selector { property: value}
选择符 { 属性：值}选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：
body { color: black}选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。
如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：
p { font-family: “sans serif”}（定义段落字体为sans serif）如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：
p { text-align: center; color: red}（段落居中排列；并且段落中的文字为红色）为了使你定义的样式表方便阅读，你可以采用分行的书写格式：
p
{
text-align: center;
color: black;
font-family: arial
}
（段落排列居中，段落中文字为黑色，字体是arial）/ 当前文档调用：
<style type=”text/css”>
<!–
–>
</style>/ 外部调用：
<link rel=”stylesheet” type=”text/css” href=”css/styles.css” />更多关于CSS的内容请看：
http://www.uiland.com/?p=34（CSS 语法）// 关于DIV…
// 站点结构：
/ 索引文件：
index.htm (html/asp/php/cgi/jsp)
default.htm (html/asp/php/cgi/jsp)/ 站点文件夹：
images (logo、banner、button)
common (css、js、include)
temp (photos、documents)
media (flash、video)注意：目录文件的名称全部用小写英文字母、数字、连字符、下划线的组合，绝不能有汉字、空格和特殊字符。
/ 路径问题：
绝对路径
相对路径：相对站点根目录、相对文件// 其它注意问题：
1. 在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免 <colspan> <rowspan> 两个标记，经验表明，这两个标记会带来许多麻烦。
2. 一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody>标记，以便能够使这个大表格分块显示。
3. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记 。
4. 原则上，我们禁止用 <img width=? height=?> 来人为干预图片显示的尺寸，而且建议 <img> 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给 <img>附上 width 和 height 属性。
5. 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用<br> 来人工干预分段。
6. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。
7. 所有的字号都应该用样式表来实现，禁止在页面中出现 <font size=?> 标记。
8. 请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
9. 中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。
10. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.
11. 网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：<a href=”aboutus/index.htm”> 而应该这样：<a href=”aboutus/”>
12. 嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。
13.“网页大小”定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在34K以下为合适。
14. 为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。
专业性好强，呵呵！ [ft]
呵呵，丫头，这还都是最基础的！ [tong] 该学的还好多…
确实挺专业呵，可以再形象一些：）
设计制作网页媒体（Flash、Music、Vedio）
video
To: iceshow
呵呵，网页媒体（Flash、Music、Vedio）这方面 Neo 替我搞定了，所以我只串讲下面的内容就行了… [tong]
Very Good