网页设计教程,网页设计入门

John 制作网页简明教程 2009/9/17 ??????????《www.bian-min.com》 2 目 录 一、认识网页 .................................................... 3 什么是网页................................................... 3 主页制作的基本条件........................................... 4 二、制作主页前的准备 ............................................ 4 1、主页题材.................................................. 4 2、规划框架.................................................. 4 3、资料收集.................................................. 5 三、如何选择网页制作工具 ........................................ 6 四、如何把握网页布局 ............................................ 8 1.页面尺寸................................................... 8 2.整体造型................................................... 8 3.页头....................................................... 9 4.文本....................................................... 9 5.页脚....................................................... 9 6.图片....................................................... 9 7.多媒体..................................................... 9 五、网站设计 26 条原则 ........................................... 9 六、规划站点 ................................................... 14 七、在 Dreamweaver 设置站点 ..................................... 15 一、申请免费空间............................................ 15 二、设置站点................................................ 15 八、制作 ................................................... 20 九、在 Dreamweaver 套用模板和修改模板........................... 35 ??????????《www.bian-min.com》 3 一、认识网页 什么是网页 你现在所看到的就是网页啦! 可是您知道为什么网页可以在 Internet上传播，为什么可以被您的电脑认识吗？还是让我 们来好好来认识网页。 网页的学名称作 HTML 文件，是一种可以在 www网上传输，并被浏览器认识和翻译成页面显 示出来的文件。 WWW是“World Wide Web"的缩写；HTML的意思则是“Hypertext Markup Language”,中文 翻译为“超文本标记语言”。“超文本”就是指页面内可以包含图片、链接、甚至音乐，程 序等非文字的元素。 网页就是由 HTML语言编写出来的。 看到这，您也许会想：我最怕编程了! 别急！其实 HTML语言只是一种排版语言，语法就类似于这样：“页高 8宽 5，(1,2)处插 入高 1宽 1的图片 A...” 如果您是使用 WPS或则 Word的高手，那么恭喜您，网页制作的 学习您已经走了一半路了！ HTML 全称 HyperText Markup Language，正式名称是超文本标记语言，HTML语言发展很快，已 历经 HTML1.0、HTML2.0和 HTML3.0、HTML4.0多个版本，现在 HTML5.0正在测试，同时 DHT ML (动态)、VHTML(虚拟)、SHTML等也飞速发展起来。我们现在一般只要掌握 HTML4.0就可 以了。 html利用标记（tag）用来描述网页的字体、大小、颜色及页面布局的语言，使用任何的 文本编辑器都可以对它进行编辑，与 VB、C++等编程语言有着本质上的区别。 举一个简单的例子： HTML 原代码： www.jzxue.com 从不懂上网到网络高手 在浏览器的显示效果： www.jzxue.com 从不懂上网到网络高手 其中 就是两个 HTML标记。它以起始标记及结束标记标记文字 www.jzxue. com，令它显示成粗体。 也有懒虫(像我一样:－)觉得一下要记住 HTML那么多枯燥的标记实在太麻烦了。那么有一 个偷懒的办法：找一个所见即所得的网页制作工具，即使一点 HTML语言都不会，也可以制 作出出色的网页。(嘘——，别声张！)后面，我会为大家介绍这类工具的。 说到底，我还是推荐您稍微了解一些 HTML的语法。这样，您可以更精确的控制页面的排版， 可以实现更多的功能。当大家称赞羡慕您的主页的时候，您就会觉得很值得哦！ ??????????《www.bian-min.com》 4 主页制作的基本条件 在 WWW上,不论你是资产上亿的大公司,还是捉襟见肘的穷学生,只要你建立了自己的主页, 你们的地位就是平等的。实际上,许多个人管理的站点比商业站点更加受欢迎。一切都在于 你的内容和创意.那么制作主页需要什么条件呢? 主页制作的基本条件有： 硬件： 一台电脑(64MB以上内存，当然越大越好啦)； 可以拨号上网； 如果你有条件的话,建议:配置扫描仪,这将大大方便图像和文字的输入; 软件： HTML编辑软件：常用的有 Frontpage、Hotdog等，本文重点介绍 Dreamweaver； 图像处理软件：常用的有 Photoshop、flash、Fireworks 等； 文件上传软件：常用的有 Cuteftp、WSftp等。 如果你已经万事具备了，我们继续下一步：制作主页前的准备. 二、制作主页前的准备 1、主页题材 下面我们开始着手策划制作主页。首先面临的问题便是我要制作什么内容，选择什么样的 主页题材。 网络上的主页题材千奇百怪、琳琅满目。只要你想的到，就可以把它制作出来。 以下列出一些常见的题材，是否对你有点启发。 给您的建议： (1)一般来说，个人主页的选材要小而精。如果你想制作一个包罗万象的站点，把所有您认 为精彩的东西都放在上面，那么往往会事与愿违的，给人的感觉是没有主题，没有特色，样 样有却样样都很肤浅，因为您不可能有那么多的精力去维护它。注意：网页的最大特点就是 更新快。目前最受欢迎的个人主页都是天天更新甚至几小时更新一次。 (2)题材最好是你自己擅长或者喜爱的内容。比如：您对诗歌感兴趣，可以放置自己的诗词； 对足球感兴趣，可以报道最新的球场战况等等。这样在制作时，才不会觉得无聊或者力不从 心。 (3)不要太滥或者目标太高。“太滥”是指到处可见，人人都有的题材；“目标太高”是指在这 一题材上已经有非常优秀，知名度很高的站点，你要超过它是很困难的。 OK!如果你已经有一个绝妙的主意了，那我们就开始下一步：规划框架。 2、规划框架 选定了一个好的题材，是不是可以立刻动手制作了？不，经验告诉我们，您必须规划框架， 这是很重要的一步！ 每个网站都是一项庞大的工程。好比造高楼，没有设计图纸，规划好结构，盲目的建造， ??????????《www.bian-min.com》 5 结果往往是倒塌；也好比写文章，构思好提纲，才不至于逻辑混乱，虎头蛇尾。 全面仔细规划架构好自己网站，不要急于求成。 规划一个网站，可以用树状结构先把每个页面的内容大纲列出来，尤其当你要制作一个很 大的网站 (有很多页面) 的时候，特别需要把这个架构规划好，也要考虑到以后可能的扩充 性，免得做好以后又要一改再改整个网站的架构，十分累人，也十分费钱。 大纲列出来后，你还必须考虑每个页面之间的链接关系。是星形、树形，或是网形链接。 这也是判别一个网站优劣的重要标志。链接混乱，层次不清的站点会造成浏览困难，影响内 容的发挥。 为了提高浏览效率，方便资料的寻找，本站的框架基本采用“蒲公英”式，即所有的主要链 接都在首页上，每个主链接再分别展开，主链接之间相互链接。 框架定下来了，然后开始一步一步有条理、有次序地做来，就胸有成竹得多，也为你的主 页将来发展打下良好的基础。 下一步，你可以动手制作具体内容了，我将告诉你一些收集资料的窍门。 3、资料收集 题材选定，框架选定，接下来就开始往主页里面填内容。我们称作 资料收集。 就个人主页而言，很少有人有能力完全靠自己来创作所有的内容。（一些高手能够提供自己 编的软件，文章或者音乐，是我非常佩服的！） 大部分人的方法是：从报纸、杂志、光盘等媒体中把相关的资料收集整理，再加上一定的 编辑后就可以了。 另外一个好的方法是从网络上收集，您只要到雅虎、搜狐等搜索引擎上查找相应的关键字， 就可以找到一大堆的资料。 如果您是英语高手，您可以到国外站点上把最新的信息、资料翻译成中文，提供给大家， 这叫“洋为中用”。 网络上的资料呈爆炸性的增长，只要注意收集某一非常细小的题材，随时供大家方便的查 找，您的主页就已经有做不完的活了。 但是，有一点必须注意！在 Copy 或引用他人的资料文章时，请您尊重知识版权。有特别 声明、禁止复制的请不要盗为己用。允许复制的也应该在引用时注明作者、出处。一般来说， 个人主页是非商业站点，只要你发封 Email 给作者，都会征得同意的。 还有就是收集的资料必须合法。按照我国《计算机信息网络国际联网安全保护管理办法》 的规定： 任何单位和个人不得利用国际联网制作、复制、查阅和传播下列信息： (一)煽动抗拒、破坏宪法和法律、行政法规实施的； (二)煽动颠覆国家政权，推翻社会主义的； (三)煽动分裂国家、破坏国家统一的； (四)煽动民族仇恨、民族歧视，破坏民族团结的； (五)捏造或者歪曲事实，散布谣言，扰乱社会秩序的； (六)宣扬封建迷信、淫秽、色情、赌博、暴力、凶杀、 恐怖，教唆犯罪的； (七)公然侮辱他人或者捏造事实诽谤他人的； (八)损害国家机关信誉的； (九)其他违反宪法和法律、行政法规的。 到这里我们已经完成了制作主页的准备工作了。 ??????????《www.bian-min.com》 6 三、如何选择网页制作工具 "工欲善其事，必先利其器"。制作网页第一件事就是选定一种网页制作软件。从原理上来讲， 虽然直接用记事也能写出网页，但是对网页制作必须具有一定的 html 基础，非初学者能及， 且效率也很低。用 WORD 也能做出网页，但有许多效果做不出来，且垃圾代码太多，也是 不可取的。我认为比较合适的网页制作软件首推 Dreamweaver，它简单易学，功能强大， 用它做出的网页垃圾代码也比较少，另外，它还可以在我们用所见即所得的环境制作网页的 同时可以在代检视窗中看到对应的 HTML 代码，这对我们学习 HTML 有很大好处。虽然用 Dreamweaver，即使我们一点不懂 HTML 也能做出漂亮的网页，但 HTML 毕竟是制作网 页的基础，我们要想把网页做活了，必须要知其然还要知其所以然，最终我们还是要熟练掌 握 HTML 才行。当然 Frontpage 也不错，但比起 Dreamweaver 来还是要稍逊一筹。 ●DreamWeaver——自制动态 HTML 动画的网页 DreamWeaver 是一个很酷的网页设计软件，它包括可视化编辑、HTML 代码编辑的软件 包，并支持 ActiveX、JavaScript、Java、Flash、ShockWave 等特性，而且它还能通过 拖拽从头到尾制作动态的 HTML 动画，支持动态 HTML(Dynamic HTML)的设计，使得页 面没有 plug－in 也能够在 Netscape 和 IE 4.0 浏览器中正确地显示页面的动画。同时它 还提供了自动更新页面信息的功能。 DreamWeaver 还采用了 Roundtrip HTML 技术。这项技术使得网页在 DreamWeaver 和 HTML 代码编辑器之间进行自由转换，HTML 句法及结构不变。这样，专业设计者可以 在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver 最具 挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。 下 载 Dreamweaver 注 ： 下 载 点 不 提 供 安 装 序 列 号 的 ， 请 复 制 ( WPD800-53931-95632-35191) ●Microsoft FrontPage 98——制作功能强大的网页 如果你曾对 Word 很熟悉，那么相信你用 FrontPage 98 进行网页设计一定会非常顺手。 使用 Frontpage98 制作网页，你能真正体会到“功能强大，简单易用”的含义。页面制作 由 Frontpage98 中的 Editor 完成，其工作窗口由 3 个标签页组成，分别是“所见即所得” 的编辑页，HTML 代码编辑页，预览页。Frontpage98 带有图形和 GIF 动画编辑器，支持 CGI 和 CSS。向导和模板都能使初学者在编辑网页时感到更加方便。 FrontPage 98 最强 大之处是其站点管理功能。在更新服务器上的站点时，不需要创建更改文件的目录。 FrontPage 98 会为你跟踪文件并拷贝那些新版本文件。FrontPage 98 是现有网页制作软 件中唯一既能在本地计算机上工作，又能通过 Internet 直接对远程服务器上的文件进行工 作的软件。 下载网址 http:∥www.microsoft.com/frontpage ●Netscape 编辑器——制作简单的网页 Netscape Communicator 和 Netscape Navigator Gold 3.0 版本都带有网页编辑器。 如果你喜欢用 Netscape 浏览器上网，那么使用 Netscape 编辑器真是简单方便！当你用 Netscape 浏览器显示网页时，单击编辑按钮，Netscape 就会把网页存储在硬盘中，然后 就可以开始编辑了。你也可以像使用 Word 那样编辑文字、字体、颜色，改变主页作者、 标题、背景颜色或图像，定义描点，插入链接，定义文档编码，插入图像，创建#格#等，是 不是与 Frontpage 98 还有些像。但是，Netscape 编辑器对复杂的网页设计就显得功能有 ??????????《www.bian-min.com》 7 限了，它连表单创建、多框架创建都不支持。 Netscape 编辑器是网页制作初学者很好的入门工具。如果你的网页主要是由文本和图片 组成的，Netscape 编辑器将是一个轻松的选择。如果你对 HTML 语言有所了解的话，能 够使用 Notepad 或 UltraEdit 等文本编辑器来编写少量的 HTML 语句，那么也可以弥补 Netscape 编辑器的一些不足。 ●Adobe Pagemill 3.0——制作多框架、表单和 Image Map 图像的网页 Pagemill 功能不算强大，但使用起来很方便，适合初学者制作较为美观、而不是非常复杂 的主页。如果你的主页需要很多框架、表单和 Image Map 图像，那么 Adobe Pagemill 3.0 的确是你的首选。 Pagemill 创建多框架页十分方便，你可以同时编辑各个框架中的内容。Pagemill 在服务 器端或客户端都可创建与处理 Image Map 图像，它也支持表单创建。Pagemill 允许在 HTML 代码上编写和修改，支持大部分常见的 HTML 扩展，还提供拼写检错、搜索替换等 文档处理工具。在 Pagemill 3.0 中还增加了站点管理能力，但仍不支持 CSS、TrueDoc 和动态 HTML 等高级特性。 Pagemill 另一大特色是有一个剪贴板，可以将任意多的文本、图形、表格拖放到里面，需 要时再打开，很方便。 下载网址 http:∥www.adobe.com ●Claris Home Page 3.0——快速创建动态的网页 如果使用 Claris Home Page 软件，你可以在几分钟之内创建一个动态网页。这是因为它 有一个很好的创建和编辑 Frame(框架)的工具，你不必花费太多的力气就可以增加新的 Frame(框架)。而且 Claris Home Page 3.0 集成了 FileMaker 数据库，增强的站点管理 特性还允许你检测页面的合法连接。不过界面设计过于粗糙，对 Image Map 图像的处理 也不完全。 下载网址 http:∥www.claris.com/software/highlights/clarispagetrial.html 提高 级软件 如果你对网页设计已经有了一定的基础，对 HTML 语言又有一定的了解，那么你可 以选择下面的几种软件来设计你的网页，他们一定会为你的网页添色不少。 ●HotDog Professional 5——制作要加入多种复杂技术的网页 HotDog 是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助 设计者制作页面中的复杂部分。 HotDog 的高级 HTML 支持插入 marquee，并能在预览 模式中以正常速度观看。这点非常难得，因为即使首创这种标签的 Microsoft 在 FrontPage 98 中也未提供这样的功能。HotDog 对 plug－in 的支持也远远超过其他产品，它提供的 对话框允许你以手动方式为不同格式的文件选择不同的选项。但对中文的处理不很方便。 HotDog 是个功能强大的软件，对于那些希望在网页中加入 CSS、Java、RealVideo 等 复杂技术的高级设计者，是个很好的选择。 下载网址 http:∥www.sausage.com ●HomeSite 3.0——制作可完全控制页面进程的网页 Allaire 的 HomeSite 3.0 是一个小巧而全能的 HTML 代码编辑器，有丰富的帮助功能， 支持 CGI 和 CSS 等等，并且可以直接编辑 perl 程序。HomeSite 工作界面繁简由人，根 据习惯，可以将其设置成像 Notepad 那样简单的编辑窗口，也可以在复杂的界面下工作。 HomeSite具有良好的站点管理功能，链接确认向导可以检查一个或多个文档的链接状况。 HomeSite 更适合那些比较复杂和精彩页面的设计。如果你希望能完全控制你制作的页面 的进程，HomeSite 3.0 是你最佳选择。不过对于生手过于复杂。 下载网址 http:∥www.allaire.com 或者 http:∥www.homesite－now.com ●HotMetal Pro 4.0——制作具有强大数据嵌入能力的网页 HotMetal 既提供“所见即所得”图形制作方式，又提供代码编辑方式，是个令各层次设计 ??????????《www.bian-min.com》 8 者都不至于失望的软件。但是初学者需要熟知 HTML，才能得心应手地使用这个软件。 HotMetal 具有强大的数据嵌入能力，利用它的数据插入向导，可以把外部的 Access、 Word、Excel 以及其它 ODBC 数据提出来，放入页面中。而且 HotMetal 能够把它们自动 转换为 HTML 格式，是不是很棒，此外它还能转换很多老格式的文档(如 WordStar 等)， 并能在转换过程中把这些文档里的图片自动转换为 GIF 格式。 HotMetal 为用户提供了“太多”的工具，而且它还可以用网状图或树状图表现整个站点文 档的链接状况。 下载网址：http:∥www.softquad.com 以上工具各有千秋，但对于 WEB 新手来说，"所见即所得"无疑是最方便的，所以我建议你 选择 DreamWeaver ，在网上人们习惯叫它为“DW”。下面我将在 DreamWeaver 里做实例，希望对你有所帮 助。 四、如何把握网页布局 最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。 在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一 种约定俗成的或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东 西。你当然也可以创造出自己的设计，但如果你是初学者，那么最好明白网页布局的基 本概念。 1.页面尺寸 由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范 围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在 800x600 的情况下，页面的显示尺寸为：780x428 个象素；分辨率在 640x480 的情况 下，页面的显示尺寸为:620X311 个象素；分辨率在 1024X768 的情况下，页面的显示尺 寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。 浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增 加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。 在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大 家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需 要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏 览。 2.整体造型 什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一 个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面 的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形 等。 对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多 ??????????《www.bian-min.com》 9 ICP 和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚 站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商 业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些 交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作 多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。 3.页头 页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页 眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵 涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜 广告。 4.文本 文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视 性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着 DHTML 的兴起，文本已经可以按照自己的要求放置到页面的任何位置。 5.页脚 页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。 你能看到，许多制作信息都是放置在页脚的。 6.图片 图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面 布局的关键。而你的布局思维也将体现在这里。 7.多媒体 除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但 随着动态网页的兴起，它们在网页布局上也将变得更重要。 五、网站设计 26 条原则 网站中有哪些关键技巧？有哪些陷阱？在这里告诉你：使网站赋予情趣的诀窍、 应该避免做什么、应使用什么工具软件以及他们喜爱和厌恶的网站。 ??????????《www.bian-min.com》 10 01 明确内容 如果你想成为一个网站设计者，并正想建一个网站的话，首先应该考虑网站的内容，包括网 站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。 02 抓住用户 如果用户不能够迅速地进入你的网站，或操作不便捷，网站设计就是失败的。不要让用户失 望而转向你的对手的网站。 03 优化内容 内容是核心。大约在两年以前，企业网站就像一本广告册子，更槽糕的是，网站使用了大量 的图片，似乎要几个世纪才能下载完。 Chanels 网站（www.channels.co.uk）在设计的 某些方面是成功的，但是内容太贪乏，并且要花很长时间才能找到所要的东西，因此不能算 是一个成功的网站。 04 快速下载 没有什么比要花很长时间下载页面更槽糕的了。作为一条经验，一个标准的网页应不大于 6 0K，通过 56K 调制解调器加载花 30 秒的时间。有的设计者说网页加载应在 15 秒内。 05 网站升级 时刻注意网站的运行状况。性能很好的主机随着访问人数的增加，可能会运行缓慢。但是， 如果你不想失去访问者的话，一定要仔细计划好你的升级计划。 06 坚持基本原则 即使你不懂 HTML 语言，你只需购买一个有版权的所见即所得的网页设计工具，如 Adobe PageMill 或 Microsoft FrontPage Express，就可以创建一个看起来很合理的网站。 但是，在设计时，这些软件包虽然不需要 HTML，却使网站速度下降。 为了成功地设计网 站，你必须理解 HTML 是如何工作的。大多数的网站设计者建议网络新手应从有关 HTML 的书中去寻找答案，用 Notepad 制作网页。 ??????????《www.bian-min.com》 11 07 学习 HTML 用 HTML 设计网站，可以控制设计的整个过程。但是，如果你仅仅是网站设计的新手，你 应该寻找一个允许修改 HTML 的软件包。HomeSite4 是一个很好的 Web 设计工具。在设 计过程中，HomeSite4 能帮助你学习 HTML。它还允许你切换到所见即所得的模式，以便 你在把网站发送到 Web 之前，预览你的网站。 08 用笔画一个网站的框架 圣人云：笔比剑更强大。在用计算机之前，用笔画一个网站的框架，显示出所有网页的相互 关系。计划好你的用户如何以最少的时间浏览你的网站。 09 “在计算机上永远也找不到好的方案”。 ——专家忠告 10 网站地图 许多设计者把他们的网站地图放在网站上，这种做法，却是弊大于利。绝大部分的访问者上 网是寻找一些特别的信息，他们对于你的网站是如何工作的，并没有兴趣。如果你觉得你的 网站需要地图，那很可能是需要改进你的导航和工具条。 11 “睁大你的眼睛，留意所有的事情。” “对最不相关的东西的观察可以得到最好的灵感。观察一个站点的结构和设计。理解站点结 构的关键元素，确保你的设计是围绕站点浏览进行的。” ——专家忠告 12 点击规则 听说过 3 次点击规则吗？对于小型网站，在你的主页上，没有任何一条信息，需要点击次 数超过 3 次的。对于大型网站，使用导航和工具条来改善操作。 13 特殊字体的应用 虽然你可以在你的 HTML 中使用特殊的字体，但是，你不可能预测你的访问者在他们的计 算机上将看到什么。在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可 能非常糟糕。一些网站设计员喜欢使用来定义特性，这虽然允许你使用特殊的字体，但是仍 需要一些变通的方法，以免你所选择的字体在访问者的计算机上不能显示。级联风格表 CS S 有助于解决这些问题，但是只有最新版的浏览器才支持 CSS。 ??????????《www.bian-min.com》 12 14 “使用切合实际的简便的命名规则。” ——专家忠告 15 检查错别字 好的拼写是人们一生中重要的技能。但是遗憾的是，许多设计者都缺少这种技能。确保你拼 写正确，并且格外注意平常容易误写的错别字。 16 避免长文本页面 在一个站点上有许多只有文本的页面，是令人乏味的，且也浪费 Web 的潜力。如果你有大 量的基于文本的文档，应当以 Adobe Acrobat 格式的文件形式来放置，以便你的访问者能 离线阅读。 17 不要使用卷滚条 人们厌恶在网上使用卷滚条。Trouble 网站（www.Trouble.co.uk）是一个典型的设计很 差的网站。它基于一个浮动的架构，为了阅读所有的文本，浏览者不得不使用卷滚条。 18 专家最喜爱的 Web 设计工具 1.Adobe Photoshop 2.Macromedia Flash 3.Adobe Illustrator 4.Adobe ImageRead 5.Dreamweaver 6.Macromedia Fireworks 7. Allaire Homesites 8.Microsoft Notepad 9. Macromedia Director 10. Lightwave 11. Macromedia Freehand 12．其它：Adobe Acrobat Exchange，Allaire ColdFusion,BBEdit,HTML Validato r 等。 ??????????《www.bian-min.com》 13 19 网站介绍 你应当有一个很清晰的网站介绍，告诉访问者你的网站能够提供些什么，以便访问者能找到 想要的东西。但是，许多设计者都没有这样做。有效的导航条和搜索工具使人们很容易找到 有用的信息，这对访问者很重要。告诉访问者你所提供的正是他们想要的信息。 20 “网站一旦发布，网站设计的优点和缺陷全都公布于世。没有什么方法使你能够比从自 己的错误、倾听其他人的建议和用户反馈意见中学到更多的东西。” ——专家忠告 21 闪烁让人头痛 通过使用标识可以吸引访问者对你的主页特殊部分的注意，但这也让你的访问者头痛。如果 你想使访问者再次光顾你的网站，就少用此方法。 22 背景颜色 背景颜色也会产生一些问题，可能会使网页难于阅读。你应当坚持使用白色的背景和黑色的 文本，另外还应当坚持使用通用字体。 23 向前和向后按钮 应当避免强迫用户使用向前和向后按钮。你的设计应当使用户能够很快地找到他们所要的东 西。绝大多数好的站点在每一页同样的位置上都有相同的导航条，使浏览者能够从每一页上 访问网站的任何部分。 24 “坚持你的信念。严格遵守各种规则。避免想当然。绝不 停止学习。” ——专家忠告 25 点击记数器 不要轻易考虑在你的网站上放置一个醒目的点击记数器。你设计网站是为了给访问者提供服 务，而不是推销你自己认为重要的东西。大多数浏览者认为计数器毫无意义，它们很容易被 做假，浏览者也不想看广告。如果你显示你的网站是多么受欢迎，你最好提供一个链接，显 示访问日志。 ??????????《www.bian-min.com》 14 26 不要用框架 与记数器一样，框架在网页上越来越流行。在大多数网站上，在屏幕的左边有一个框架。但 是设计者立刻就发现，在使用框架时产生了许多的问题。使用框架时如果没有 17 英寸的显 示屏几乎不可能显示整个网站。框架也使得网站内个人主页不能够成为书签。也许更重要的 是，搜索引擎常常被框架混淆，从而不能列出你的网站。 六、规划站点 规划站点，不像直接设计编写那么简单，事先需要做许多准备工作，不仅要准备建设站点需 要的素材文字资料、图像以及媒体文件），还要设计好资料整合的方式，并根据资料确定站 点的风格特点；同时在内部还要整齐、有序地排列归类站点中的文件，否则杂而乱的资料堆 积到一起，不仅不利于将来的维护和（包括站点的管理,) 同时还会因为页面间极为混乱的 关系而导致站点容易出现错误。 1.确定站点风格 访问互联网时，可以看到形形色色的站点，每一个站点都有自己的特色，不同类型的站点风 格特色更不 相同.站点的风格是整个网站的灵魂，没有风格，就不具有自己的特色，更谈不 上吸引用户访问站点。因此站 点设计者通常在设计之前都要规划好站点的风格。 一个站点究竟使用什么样的主题，要根据建站的性质来确定。公司站点主要是向外界展示公 司的形象，介 绍公司情况以及推销自己的产品；政府站点侧重网上办公，将办公的材料放 置到网上供人查阅；个人站点则希 望将个人的兴趣爱好展示出来，让别人通过自己的站点 了解自己，因此个性化更强一些。 2.规划站点结构 一般来说,一个站点包含的文件很多,大型站点更是如此.如果将所有的文件混杂在一起,则整 个站点显得杂乱无章,自己看起来也很不舒服且不易管理,因此需要对站点的内部结构进行规 划。应该将各个文件分门别类地放到不同的文件夹下，这样可以使整个站点结构看起来条理 清晰，井然有序，使人们通过浏览站点的结构，就可知道该站点大概内容。这样做主要是为 网页设计人员在修改管理页面文件时提供方便。在你电脑里除 C 盘外要新建一个站点的文 件夹，命名如 Myweb,也可以叫“我的站点”。然后在站点文件夹里再新建几个文件夹，如 下图： 图 13 站点文件夹 ??????????《www.bian-min.com》 15 ※ adm：放置后台管理程序，对于动态网站是少不了的一个文件夹 。 ※ audio：放置音频文件。 ※ backup ：放置备份文件。 ※ doc：放置 Word 文档。 ※ img：放置站点用到的图片。 ※ source：放置开发过程中编写的源文件，如 FLASH，photoshop 等编辑、末合并图层之前 的图片，保留源文件的目的是方便将来修改编辑。 ※ video：放置视频文件。 ※ zip：提供给客户下载的压缩文件。 ※ index.files：网站首页中的各种文件，首页使用率最高，为它单独建一个文件夹很有必要。 ※ web、web2：放置 WEB 文件夹。 这是文件夹通常命名情况，如果你记不住它，也可以自己重新命名，但不要用中文。 七、在 Dreamweaver 设置站点 一、申请免费空间 网站做好后放在哪里呢，这就要有一个空间。网上提供免费的空间很多，有的服务质量还是 可以的，但也有 服务质量差的。我第一个申请的免费空间在 http://wy8.net/，到现在还在用， 只不过速度稍慢一点；我第二个申请的免费空间是在中，http://free.icpcn.com/打开速度快， 服务质量还是可以的，但申请手续有点烦，在申请中如果有一个地方他们认为是不真实的可 能就不会批，申请可能在一到三天。 提供免费空间的网站很多,最近可用的一批免费空间，你可以点这里查找。 如果你的申请批下来了，会用电子邮件发送到你的邮箱，主要内容是：域名、空间大小、注 册名、FTP 密码 如果你不想用免费的空间，也可以用收费的空间，收费的空间申请很容易， 只要你的钱汇到了，马上就可以开通你的网站。在价格上也不等，从几十元到几百元以上， 根据你申请的空间大小来决定的。我们才学做网站，如果图片不多，FLASH放的少，有 100MB 足够你用了。 真的不想用收费的空间，又不想用免费的空间，那么你就用自己的电脑做服务器吧，详细内 容请看本站“初学园地”。 二、设置站点 有了空间后，我们就可以在 Dreamweaver 8 里做网页了。也可以先做好再申请空间，这个 由你自己定。我是 先申请一个空间后，才动手做网站的。 设置站点分为动态和静态二种，动态网站的设置在“初学园地”里有介绍，在这里我就不再重 复了，重点介静态站点的设置。 第一步：打开 Dreamweaver 8 在菜单栏单击“站点”指向“新建站点” ??????????《www.bian-min.com》 16 图 14 新建站点 第二步：在弹出的对话框里给站点起一个名子，并在下面打上网站域名，然后点“下一步” 如图 15 图 15 命名站点 第三步：在弹出的对话框里选择“否，我不想使用服务器技术”。然后点“下一步”， 如图 16 。 ??????????《www.bian-min.com》 17 图 16 选择“否，我不想使用服务器技术 ” 第四步：选择站点文件夹存放的位置，如图 17 ??????????《www.bian-min.com》 18 图 17 选择站点文件夹 第五步：按提示连接用 FTP、并打上由服务商给你的 FTP 地址，用户名和密码，并进行测 试。如图 18 ??????????《www.bian-min.com》 19 图 18 填写 FTP 地址及用户名和密码 第六步：测试服务器，提示成功。如图 19 ??????????《www.bian-min.com》 20 至此，站点设置工作完成。如果出现错误，你要认真核对你的用户名、密码和 FTP 地址。 八、制作模板 如果想让站点保持统一的风格或者站点中多个文档包含相同的内容。----对其进行编辑，未 免过于麻烦，中文版 Dreamweaver 8 提供的模板功能可以很方便地帮助用户解决这些难题。 模板由两部分组成：锁定区域和可编辑区域。对于刚创建的模板，所有的区域都是锁定的， 在定义模板时，可以在模板文件中定义可编辑的区域。套用该模板的页面，只有可编辑区域 是可以被改变的区域。 实践证明，用模板对于网页制作者来说省了很多的麻烦，也可以节约很多时间，同时也能减 少连接上的错误。 一、新建模板 在新建模板前，我劝你还是要对你的网站要在纸上画一个草图，再根据你的图纸来定你的模 板，我简单画了一个，供参考，样式是你自己设置的，我在这里只是举个例子。如图 14 ??????????《www.bian-min.com》 21 图 14 网站草图 打开 Dreamweaver 8 后，可以通过“窗口”下面的“资源”面板创建新的模板。快捷键是 F11。 如图 15 ??????????《www.bian-min.com》 22 图 15 打开资源，新建模板文档 这时你双击才命名的 muban 文件，便在 DW 里显示一个空白的文件。当你新建一个模板文 档时，Dreamweaver 8 将会在你的站点根目录下自动生成一个 Templates 文件夹，该文件夹 专门用于放置模板文档。如图 16 图 16 模板专用文件夹 下一步就是在这个空白的文档中建模板了。（这个空白文档和你做网页一样的） 当然也可以用别的方法来创建模板，如通过“插入”面板或者菜单选项可以完成模板文档的创 建，新建模板与创建模板略有不同。创建模板的操作方法哪下： （1）选择“窗口”面板|“插入”菜单选项，打开“插入”面板。 （2）在“插入”面板中选择“模板对象”向右点“创建模板”。 也可以在一般页面中象平时做网页一样，把页面做好，然后点左上“文件”“另存为模板”等。 在这里我就 不一一说了，你肯定能在实践中摸索出来的。 言规正传，下面我们开始在刚才打开的 muban 文件中建模板啦。 第一步：设置页面属性 （1）选择菜单“修改”向下单击“页面属性”，如图 17。在弹出的对话框里设置字体和边距。 Dreamweaver 8 默认设置网页都留有间隙，不怎么好看，所以要全部设置为“0”如图 18 再选择“链接”根据自己的喜好设置下划线和链接的颜色。如图 19 ??????????《www.bian-min.com》 23 图 17 打开页面属性 图 18 设置字体和边距 ??????????《www.bian-min.com》 24 图 19 设置下划线和链接颜色，然后点“确定”。 （2）选择菜单“编辑”向下单击“首选参数”，如图 20 在弹出的对话框里将“允许多个连续的 空格”打上 钩，否则你在 Dreamweaver 8 按空格键它是不动的，呵呵，没有象在 Word 里那么顺手。如 图 21 图 20 选择“首选参数” 图 21 在允许多个连续的空格前打上钩，然后点“确定”。 第二步：使用表格布局网页。 当然也可以用层。表格是网页布局设计的常用工具，它可以使插入页面中的图像和文本等对 象被限定在某一固 定位置。相对于没有使用表格的页面，使用表格的页面显得更加整齐有序。 （1）绘制表格 将光标置于需要插入表格的位置，然后选择菜单“插入”，向下单击“表格”，如图 22 在弹出 的对话框里 ??????????《www.bian-min.com》 25 根据以上草图确定行和列的数字，如图 23。 图 22 选择表格 图 23 设置表格行和列，然后点“确定”，在这里我们都设置为 1。 注：宽度通常设置在 780 以内，这可以在 800X600、1024X768 两种分辨率情况下使你的的 网页不变样，如果过大 超过 800，那么使用 800X600 分辨率的电脑看你的网页就会出现下滑块。 （2）设置表格属性 在“对齐”处选“居中”，在“填充”、“间距”、“边框”处全部设置为“0”。如图 25 ??????????《www.bian-min.com》 26 图 24 设置表格属性 （3）拷贝和粘贴单元格 将鼠标左键对着单元格边框点一下，然后再点右键，选“拷贝”,再将鼠标对着表格下面点右 键，选“粘贴”五次。如图 25 ??????????《www.bian-min.com》 27 图 25 拷贝和粘贴表格 这样做的目的是为了打散表格，能提高打开网页速度。当然也可以用一个整体的表格。 （4）设置单元格属性 表格第一行：我们将用来放置 FLASH 动画，或者图片。尺寸在 780X100，宽度已定下来了， 现在确定它的高度 将鼠标对着第一行点一下，然后在下面表格属性里“高”打上“100”按一下 回车，要注意所有表格属性栏下面的标题前面有小钩要去掉，如果不去掉，你打出来的字特 粗。 表格第二、第三行，是用来放置栏目的，一般高度设置“20”方法同第一行。 表格第四行是主要编辑区，我们暂时设置高为为“200”。再提醒一句，“标题”前面的小钩一 定要去掉哟~~ 表格第五行是放页脚的，一般高在 60 以内。 设置方法同上。 到此，插入表格和设置表格属性完成了。 第三步：制作页眉 插入 FLASH 动画 ：鼠标在第一行点一下，然后选择菜单“插入”指向“媒体”向右单击 “FLASH”在弹出的对话框里找到你制作的 FLASH 然后点“确定”。 ??????????《www.bian-min.com》 28 图 26 插入 FLASH 图 27 在站点文件夹里找到 FLASH，然后点“确定” 制作导航栏 在第二行里可以用插入表格的方法，根据你的栏目，设置列数，可以在属性里设置颜色，也 可以放置背景图片。 第三行，同上。 第四行是主要编辑区，我们暂时不动。 第四步：制作页脚 第五行是页脚，页脚里主要内容是版权、联系地址、电话、网站备案、联系人、网站统计等。 所有编辑完成后如图 28 图 28 完成页面编辑 注：栏目我在这里没有列出，但在做模板时要把所有栏目里的地址要做好链接。 第五步：定义可编辑区和重复区 定义重复区：页眉和页脚我们在这里都定义为重复区。 ??????????《www.bian-min.com》 29 将光标指向页眉目，然后选择菜单“插入”|“模板对象”| “重复区域”单击鼠标左键，这时 会弹 出“新建重复区域”RepeatRegion1 对话框，点确定。如图 29 图 29 定义重复区域 1 图 30 新建重复区域对话框 用同样方法在页脚处设置重复区域 2。 导航栏也定义为重复区域 3、4。 定义可编辑区域：我们是主要编辑区在第三。用同样方法把它设置为可