网页制作教程(2)

2008-02-23 06:03:27来源：互联网阅读 ()

　　<hr>

　　<h1 align=center><a href="http://192.168.0.2">链接到校园网</a></h1>

　　<h2 align=center><a href="pic.jpg">链接到我的图片</a></h2>

　　<h3 align=center><a href="test1.htm" target="_blank">链接到test1</a></h3>

　　<hr>

　　<h4 align=center>下面是个带边框的表格</h4>

　　<table border>

　　<tr>

　　<th>Food</th>

　　<th>Drink</th>

　　<th>Sweet</th>

　　<tr>

　　<td>A</td>

　　<td>B</td>

　　<td>C</td>

　　</table>

　　</body>

　　</html>

　　二、准备工作

　　制作网页前重要的工作是规划好网页的架构，一般开设images、common、temp三个子目录，根据需要再开设media子目录，images目录中放不同栏目的页面都要用到的公共图片，例如网站的标志、banner条、菜单、按钮等；common子目录中放css、js、php、include等公共文档；temp子目录放各种临时备用的文档；media子目录中放flash、avi、quick time等多媒体文档。

　　在根目录中原则上按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images和media的子目录用以放置此栏目专有的图片和多媒体文档，假如这个栏目的内容特别多，又分出很多下级栏目，能够相应的再开设其他目录。

　　除非有特别情况，目录、文档的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特别字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证实，用拼音命名的目录往往一个月后连自己都看不懂。

　　网站的首页文档一般取名：index.htm

　　放置在页面顶部的广告、装饰图案等长方形的图片取名：banner

　　标志性的图片取名：logo

　　在页面上位置不固定并且带有链接的小图片取名：button

　　在页面上某一个位置连续出现，性质相同的链接栏目的图片取名：menu

　　装饰用的照片取名：pic

　　不带链接表示标题的图片取名：title

　　三、制作软件介绍

　　下面介绍3个做网页的辅助软件，有了软件并不一定能够把网页做好，关键还得看懂HTML代码具体表示什么意思。

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

　　

软件名称	描述	长处	缺点	如何获取
Microsoft FrontPage	微软Office套件之一，网页制作解决方案，适合初、中级用户使用	和Word软件的良好兼容，现成的各种模板	操作、修改繁琐，有冗余代码	Office套件里带有
Macromedia Dreamweaver	Macromedia公司的网页制作3剑客之一（另外2个是Flash、Firework），适合专业用户使用	操作灵活，效率高，网页可读性好，解决IE和Netscape的兼容性	几乎没有	需要另外购买或下载
东方网页王5.0企业版	国内交大铭泰软件公司的网页制作解决方案，适合初级用户使用	操作简便，形象直观，模板丰富	扩展度不够，制作不灵活，修改繁琐	需要另外购买或下载

　　四、Dreamweaver初步（见演示）

　　1．工具栏

　　2．属性栏

　　3．定义本地站点

　　4．编辑站点主页

　　5．定义背景颜色和图象

　　6．定义页面标题

　　7．创建链接

　　8．编辑表格

　　

　　

　　

　　

　　

　　

五、网页设计配色出色十例

（1）这是个大型的NBA网站。通常我们经常看到的此类网站以白色为背景，但是这个网站却用灰黑色RGB为（48，48，48/#333333）（以下颜色都用RGB表示），文章标题用色为RGB为（203，201，153/#CCCC99），菜单使用的RGB为（112，119，112/#707770）。这样的配色能够显示独特的个性，又不失大型网站的风采。

　　

　　

　　

　　

　　

　　

　　

　　