建站流程 本章重点 本章介绍网站制作流程、经验、技巧以及在制作网页过程中可能需要注意的问题。 学习目的 了解网站的制作流程。

Presentation on theme: "建站流程 本章重点 本章介绍网站制作流程、经验、技巧以及在制作网页过程中可能需要注意的问题。 学习目的 了解网站的制作流程。"— Presentation transcript:

1 建站流程 本章重点 本章介绍网站制作流程、经验、技巧以及在制作网页过程中可能需要注意的问题。 学习目的 了解网站的制作流程。
掌握制作过程的一些经验和技巧。

2 网站的主题定位 制作网站首先要考虑网站的主题。好的网站不仅应该有美感、个性、创意，更要有质量。网站的内容是最重要的因素，空洞的网站对人没有任何吸引力。 网站、网页的主题定位要注意，网站的主题和名称一定要清楚明了，以避免盲目建设。

3 网站的题材 目前网站的题材主要有新闻、体育、聊天、即时信息、ICQ、社区、邮件列表、计算机技术、网页/网站开发、娱乐、旅行、参考、资讯、求职、家庭、教育、生活、时尚以及一些体现个人特色和爱好的网站。 这其中每一大类又可以细分，比如新闻可以分为国内新闻、国外新闻、体育新闻、甚至天气预报等具有新闻题材特性的类别；体育可以细分为篮球、足球、网球、游泳等更广泛的题材，而每一单项也可以又分为很多的类，比如体育里的足球，也可以分为更多的类别，如球星、球队、联赛、球技、球迷……甚至球队的球衣、球星的发型，都代表着一种个性、一种时尚乃至一种精神。网站的分类是一种树型结构。

4 定位题材的建议 主题最好是你最擅长并且最有兴趣的东西。
其中兴趣特别重要，只有有了兴趣才能创造出灵感。特别是个人网站，其最大的动力就是你对这方面是否特别感兴趣。没有兴趣很难有创作灵感;也不会常常去维护。当然不是说擅长就不重要，如果天天遇到这样、那样自己没有能力解决的问题，自然会非常沮丧，并且对网页以后的修改和维护工作丧失信心。如果你喜欢并擅长编程，就可以建立一个编程爱好者网站，把自己的编程乐趣和编程经验告诉更多的网友；对足球感兴趣，可以报道最新的战况，球星动态以及自己的一些看法、倡议等。这样在制作时，才不会觉得无聊或者力不从心。

5 主题要小而精。题材的定位要小，要精。 一般的网页爱好者不可能有足够的时间和精力去制作一个包罗万象的站点，虽然在做网站的时候很想要把所有精彩的东西都放在上面，但往往事与愿违，给人的感觉是没有主题，没有特色，什么都有却都很肤浅。 主题小但并不是内容少，它所涉及的本方面的信息却要全。一般来说，专题网站要比大而全的网站更受欢迎。举个例子来说，比如有两个网站，都是有关计算机教程的网站，一个哪一方面都有，每方面也都只有一两个，而另一个则主题比较少，甚至只有一个，但比较全，这样，在选择有关这方面的题材的时候，当然会毫不犹豫地选择第二个网站。

6 题材不要太滥或者目标太高。 "太滥"是指到处可见，人人都有的题材，这会给人没有特色的感觉，从而不能留下深刻的印象。"目标太高"是指在这一题材上已经有非常优秀、知名度很高的站点，要超过它是很困难的。除非你下决心和有实力竞争并超过它。记住，在互联网上只有第一，人们往往只记得最好的网站，第二、第三名的印象则会浅得多。

7 网站的名称很重要，网站名字的优劣决定着网站是否更容易被人接受。它在很大程度上也决定了整个网站的定位。好的名称必须有概括性、简短、有特色、容易记，还要符合自己网站的主题和风格，决不要取一个名不符实的“好名字”，别人第一次上了你的当，下次再也不会光顾了。"闪客帝国"网站。 该网站的名字“闪客帝国”就很好，很响亮，很大气。 网站的名称还要合情合理，最好能让人感觉到有亲切感，当然，还一定要合法，坚决不能带有反动的、色情的、迷信的、危害社会安全的名词语句。

8 资料搜集 互连网的强大就是它丰富的资源，可以搜集尽可能多的资料，并根据一定规则进行整理。当然，仅仅有这些资料还不足以使你的网站与众不同，还需要精心设计和搜集一些互连网上没有的东西，也就是属于自己的东西。比如，自己画的一幅漫画、在某一些方面不同众人的观点，都可以成为体现个性的一个方面。 资料收集非常重要，这决定网站是否有内容。就个人网站而言，针对喜欢的专题，可以到相关的网站上去浏览，并自己回答如下几个问题：他们是如何做的？如何设计的?有什么优、缺点?如果是自己来做的话，我将会怎么做?是否能做的比他做的更好?这些网站或网页有哪些方面值得我去学习的等诸如此类的问题。 另外，还要在网上找到你准备做的网页所需要的素材，比如哪一副画、哪些文章、哪些软件等等，如果有能力，自己亲自画画是最好的方法。 网页制作高手不是天生就有的，他们的基本功也都是从别人那里学来的。应该多去学习他们，学习他们那些更贴切的设计。

9 结构设计 设计网站的结构首先要把网站的内容列举出来，根据内容列一个结构化的蓝图，要先考虑用户如何访问网站?他们怎样从一个地万到另一个地方?怎样防止他们走丢? 先把每个页面当成一个固定点，像设计数据结构那样在草纸上做一个结构化的蓝本图。要根据实际情况设计各个页面之间的链接。先根据内容把目录设计成为树型，像是DOS目录一样。一般不要级数太多，尽可能少于四级目录，否则会让人感觉到比较烦琐，更不方便管理。然后再到每一点，把与本页面相关的内容再做一个链接，增加浏览者的浏览效率，增强网页的连贯性。如果内容太多，绘制一幅导航图也是非常必要的，这样可以让浏览者更好、更舒服地访问你的网站。如天极网

10 栏目和版块 网站的结构设计其实也就是合理的设计网站的栏目和版块。设计哪些栏目和版块呢?如何合理地去设计呢?
就像一篇好的文章一样，在设计的时候首先应该突出主题。网站的内容是网站的质，也是应该表现的。要把这些内容放在最显眼的地方，占最大的位置。比如你想做一个有关网站、网页制作的教程，打算在上面放四个栏目，网站介绍、教程、论坛、留言本，如果按照这样放上去，给人的感觉是重点不够突出，没有表现出教程的重要性，如果你改为网站介绍、教程目录、网页制作教程、网站制作教程、论坛、留言本，会让读者更快、更明了地知道你的网站所要表现的内容。 其次，应该有个网站指南或更新列表之类的栏目。如果想让你的网站有更多常来的访客，就要做一些更新列表之类的栏目，这样读者可以一目了然地知道更新的内容。

11 接着，要有一个与读者交流的栏目。每一个优秀的网站都是经过精心的策划反复修改的。而这些都离不开读者的建议。因为你是为读者服务的，就必须了解读者需求，了解他们的审美观点。当然，更改也要在保持自己个性的前提下。 最后，最好有个类似于FAQ之类的说明性的栏目，避免一些常见的问题被重复回答，也方便了网友。“5D多媒体”网站(

12 目录的结构设计 目录的结构设计要注意以下几点： 1．按栏目内容建立子目录。 2．在每个主目录下都建立独立的images目录。 3．目录的层次不要太深。 4．避免使用中文目录。 5．尽量使用意义明确的目录。

13 形象设计 网站的形象设计非常重要的，这就像一个人给大家留下印象似的，是否恰当合体，是否让人感到亲切，有美感，是否让人能够接近。 网站的标志 首先需要设计制作一个网站的标志(Logo)。就如同商标一样，Logo是站点特色和内涵的集中体现，是网站文化的浓缩，成功的网站标志让大家一看就能联想起他的站点。下面给出一些Logo仅供赏析。

14 网站的标准色彩 色彩是艺术表现的要素之一，它是光刺激眼睛再传导到大脑中枢而产生的一种感觉。而网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。按照色彩的记忆性原则，一般暖色较冷色的记忆性强。色彩还具有联想与象征的特质，如：红色象征火、血、太阳；蓝色象征大海、天空和水面等。所以设计出售冷食的虚拟店面，应使用消极而沉静的颜色，使人心理上感觉凉爽一些。 在色彩的运用过程中，还应注意的一个问题是:由于国家和种族的不同，宗教和信仰的不可生活的地理位置、文化修养的差异，不同的人群对色彩的喜恶程度有着很大差异。如：儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在沙漠中的人喜欢绿色。在设计中要考虑主要读者群的背景和构成。 只有在网页设计中，根据和谐、均衡和重点突出的原则，才能将不同的色彩进行组合、搭配来构成美丽的页面。

15 网站的标准字体 和网站色彩的设计一样，设计网站字体也是网页内涵的一种表现，合适的字体会让人感觉到美观、亲切，会让人心里感觉舒适。一般的网页默认的字体是宋体。如果你想体现你的"与众不同"和特有风格，可以做一些特效字体。需要说明的是：使用特效字体只能用图片的形式，因为很可能浏览者的电脑中没有安装你的特别字体。 目前中文网站普遍流行的是宋体9磅字，一般的操作系统都装有该字体，可以用CSS来做。

16 网站的宣传标语 这是网站的"心"，是网站的精神。必须用一句话甚至一个词来高度概括。类似实际生活中的广告一样，好的网站的宣传标语会使网站名气更大，更容易成为"名牌"。可以采用夸张、求实、奇特、幽默等各种各样的万法去实现。例如:飞利浦的"让我们做的更好"；e龙网的"e网情深"；Intel的"给你一个奔腾的心"等等。

17 主页设计 像设计任何东西一样，首先应该在草纸上画出一个草图。可以尽可能地发挥自己的想象力，想象它是一种意境。可以多画几张，然后从中选择出最佳的一个作为蓝本。 在草案的基础上，将你确定需要放置的功能模块安排到页面上。这些功能模块主要包含网站标志、主菜单、更新列表、搜索、友情链接、广告条、邮件列表、计数器、版权信息等。应该遵循突出重点、平衡谐调的原则，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的排放。 最后根据平面设计和网页制作的技巧，对整个布局进行精雕细琢，以达到更好的效果。其他页面的设计应该根据首页设计的风格进行。 网站或网页的设计，除了加强美感、增加阅览性之外，还要重视“体贴”。何为“体贴”?也就是处处站在访问者的角度去看问题、去考虑，更多地方便访问者。

18 其他页面设计 其他页面设计和制作没有首页制作那么繁杂，但设计和制作的方法和首页设计一样，需要注意以下几点： 1．和首页保持相同的风格。 2．要有返回首页的链接。 3．目录结构不要超过四层。

19 站点规划 在定义站点之前，首先要做好站点的规划，包括站点结构和导航系统的规划、网页模板和库的使用等等。
合理的站点结构，能够加快对站点的设计，提高工作效率，节省时间。如果你将一切网页都存储在一个目录下，当站点的规模越来越大时，管理起来就会变得很不容易。因此，一般来说，应该利用文件夹来管理文档。

20 在规划站点结构时，一般应该遵循如下一些规则:
用文件夹来保存文档 一般来说，应该用文件夹来合理构建文档的结构。首先为站点创建一个根文件夹 (根目录)，然后在其中创建多个子文件夹，再将文档分门别类存储到相应的文件夹下，必要时，可以创建多级子文件夹。

21 使用合理的文件名称 使用合理的文件名非常重要，特别是在网站的规模变得很大时。文件名应该容易理解，让人看了就能够知道网页表述的内容。 尽管中文文件名对于中国人来说，更清晰易懂，但是应该避免使用中文文件名，因为很多Internet服务器使用的是英文操作系统，不能对中文文件名提供很好的支持;而且l浏览网站的用户也可能使用英文操作系统，中文的文件名同样可能导致浏览错误或访问失败。如果实在对英文不熟悉，可以用汉语拼音。 很多Internet服务器采用Unix操作系统，它是区分文件的大小写的。 例如Index.HTML和index.HTMT，是完全不同的两个文件，而且可以同时出现在一个文件夹中。因此，建议在构建的站点中，全部使用小写的文件名称。

22 模板和库 使用Dreamweaver的模板和库，可以在不同的文档中重用页面布局和页面元素，给网页的维护带来很大的方便。因此，在规划站点时也应考虑模板和库的使用。 例如，如果网站中很多网页使用相同的布局，最好为这些布局相同的网页设计一个模板，然后以该模板为基础创建新的网页。当要修改这些网页的布局时，只要修改模板就可以了。对模板的修改将反映到所有应用该模板的网页上，无需一页一页进行修改，这就大大方便了对网页的维护。 如果有某一页面元素 (如一个搜索组件)将在网站的很多网页中使用，应该先设计好该元素，并把它存入库中，然后在网页上调用它。当要修改该元素时，只要修改库中该元素即可，修改后的元素将出现在所有调用它的网页上，免去了逐页修改的麻烦。

23 使用Alt 图像的Alt属性和Title属性往往被人忽视。但这些属性对于哪些由于种种原因不能或者暂时不想显示图像的用户来说是至关重要的。没有设置Alt属性的图片，使用IE并且设置为不显示图片的情况下浏览的结果。 在这种情况下，图像的可读性就非常差，甚至影响读者的阅读。

24 定义站点 定义站点的具体步骤为： 打开Dreamweaver MX，单击Site（站点）→ Edit Sites（编辑站点）菜单项，出现Edit Sites对话框，单击New按钮，新建一个站点。 在出现的Local Info（本地站点）设置对话框中进行设置。 在Category（种类）中选择Remote Info（远程站点信息）设置对话框来设置远程站点。

25 首页制作 首页是网站或网页的门槛，代表着整个网站的风格、脸面，首页制作的好坏决定着网页是否有吸引力的关键。因此，首页的设计和制作格外重要，应该花费更多的精力和时间来设计和制作，以免出现全部做好后再修改，那将是最浪费精力的事。在这一节中根据一个个人网站——熊猫在线来展示首页制作的具体过程。 拿出你在主页的设计阶段所设计的草图，开始首页的制作。

26 页面属性 制作首页的第一步是页面属性的设置。
在页面属性里，可以完成标题栏、背景图案、背景颜色、文本色彩、链接的颜色、激活链接的颜色、访问后链接的颜色、页面的版面设置、文档的编码方式 (比如简体中文、繁体中文等)、底图。

27 表格设计 制作首页的第二步是表格的设计。 表格在网页制作中有着不可代替的作用。它不仅可以布局，而且还可以给文本和图形定位。表格的制作需要比较多的经验和创造力，巧妙的使用表格会使你的网页设计得更加完美。在设计熊猫在线时所绘制的表格如图2-13所示。 图2-4熊猫在线的表格制作

28 填写内容 制作首页的第三步是内容的插入，也就是图片、文本的插入。 在插入文本时恰当地运用CSS，不仅可以减少网页的代码，而且比较容易更新，具体请参阅本书第六章。 插入内容时操作比较简单，但比较烦琐，需要提醒的是你一定要认真，以免出现错误。

29 添加链接和交互 制作首页的第四步是添加链接和交互。 链接是网页的灵魂，而交互能使网页更加丰富多彩。 在做链接时要注意路径问题，具体请参阅第七章链接。交互较为复杂，对于网页初学者来说，较难一些，在第九章行为中详细讲述。

30 添加链接和交互 制作首页的第四步是添加链接和交互。 链接是网页的灵魂，而交互能使网页更加丰富多彩。 在做链接时要注意路径问题，具体请参阅第七章链接。交互较为复杂，对于网页初学者来说，较难一些，在第九章行为中详细讲述。

31 测试 兼容性测试 Dreamweaver虽然考虑到了网页在不同版本、不同类型的测览器中的兼容性，但是也有一些元素是必须更新版本的测览器才能得以支持。可以用Check Target Browsers(检查浏览器)功能来测试所创作的页面，以检查网页在不同版本、不同类型的浏览器中的兼容性。

32 链接测试 在Dreamweaver中可以使用Check Links Sitewide(检查整个站点的链接)这一功能检查链接。来检查是否有孤立的链接，也就是废文件。 当然，也需要预览，单击每一个链接，看是否有效和正确。 实地测试 把网页上传到Internet服务器上，测试链接、下载速度等问题。 有可能预览成功的页面上传后却有问题。比如如果Internet服务器的文件名区分大小写，而所做的链接忽略了这一点，就可能导致不能正常链接。

33 申请域名、空间 主页制作完毕后，就需要着手域名、空间的申请。 申请顶级域名
首先要向中国互连网络信息中心(CNNIC)或者Intenic Registration Services申请一个自己的域名，形式为“ Service Provider，国际互连网服务提供商)为CNNIC代理这项业务，他们可以帮助你完成这项工作。目前。国内不允许以个人名义申请注册国内域名，如果想申请国内域名，必须提供申请单位的营业执照。但国际域名没有这个限制，个人可以申请注册国际域名。

34 申请免费域名 可以到一些提供免费域名的网站去申请注册免费的域名。一般需要所注册的域名、 地址和主页的URL地址。 申请专线 然后需要申请空间，如果是一个较大的企业，可以建立自己的机房，配备技术人员、服务器、路由器、网络管理软件等等，再向邮电局申请专线等等，从而建立一个属于自己的独立的网站。但这样做需要比较大的投资，而且日常费用也比较高。

35 其它方案 如果你是中小型企业或者个人，可以采用目前较为流行的几种方法 虚拟主机方案
租用ISP的Web服务器磁盘空间。将自己公司或个人的主页放在ISP的Web服务器上，这种方法对于一般中小型企业和个人来说将是最经济的方案。虚拟主机与真实主机在运作上毫无区别。特别适合那些信息量和数据量不大的网站。 服务器托管方案 如果企业的W由有较大的信息量和数据量，需要很大空间时，可以采用这种方案。将己经制作好的服务器主机放在ISP网络中心的机房里，借用ISP的网络通讯系统接入Internet。 免费方案 如果还没有申请国内、国际域名的条件，可以采用免费的个人空间和免费的域名。这些免费的个人空间和域名是许多商业网站为了提高自己的知名度而提供的，使用它们的代价是你必须加上他们的一些宣传他们的广告。

36 免费空间、域名推荐 下面推荐一些口碑不错、速度也较快的提供免费的个人空间和免费的域名的网址。 天极网
提供免费域名系统和多种免费域名的申请。 推荐的免费域名有：sheji.org、7758.net、mayi.net、yesky.net等。 网易 提供100兆免费主页空间，并提供免费域名。 免费域名形式：yeah.net，126.com。 搜狐 提供20兆免费主页空间，并提供三级域名。 免费域名形式you.home.sohu.com。

37 首都热线 topcool.net 20M记数器、留言簿等。 免费域名形式you.topcool.net。 深圳963 提供免费域名。 免费域名形式you.963.net。

38 上传 现在万事俱备，只欠“上传”，上传可以使用Dreamweaver的FTP功能上传，也可以使用一些FTP工具上传。
运行CuteFTP，设置本地站点文件夹。 选择File(文件)>Site Manager(站点管理)，在出现的FTP设置对话框中进行设置。 然后选择Connect(连接)就可以上传你的网页了。 将左边本地站点的内容拖进右边远程站点文件夹内。将本地站点的内容拖进远程站点 在浏览器的地址栏中键入域名，检验一下，网页上传成功了么?

39 宣传 像产品一样，再优秀的主页、网站如果不宣传，很难有较大访问量，如何使网站增大访问量呢?对于商业网站来说，一般采用四种方法：传统方式、网络广告、搜索注册、设置Meta，对于普通的个人主页来说，由于受到资金等多方面的原因，可以使用友情链接、搜索注册、设置Meta等方式。

40 传统方式 1．电视：无可疑问，目前电视还是最大的媒体，广大的收视群体也对广告有较好的效益。 2．报纸：报纸是仅次于电视的第二大媒体，也是使用传统方式宣传网址的最佳途径。 3．户外广告:在一些繁华、人流大的地方的广告牌上做广告也是比较好的方式。目前，在中关村、地铁的一些广告就是一些证明。 4．其它印刷品：公司信笺、名片、礼品包装部要印上网址名称。让客户在记住你名字、职位的同时，也看到并记住你的网址。

41 网络广告 由于广告的对象是网民，因此，使用网络广告不失是一种好的方式。网络广告是图形广告，目前各门户站点主页上部都有这样的横幅广告。 在选择这些广告的时候，需要重视以下两点: 1．选择访问率高的门户和网站。只有选择访问率高的网站才能达到“广而告之”的效果。 2．优秀的广告创意。广告词创意吸引浏览者的重要“手段”，要想唤起浏览者点击的欲望，必须给测览者点击你的图标的理由。图形的整体设计、色彩和图形的动态设计以及与网页的搭配都极其重要。

42 友情链接 对于个人主页和个人网站来说，友情链接可能是最好的方式。和访问量大的、优秀的个人主页相互交换链接能大大地提高主页的访问量。 注册搜索引擎 搜索一般有两种，一种是数据库中关键字搜索，一种是对网页META关键字的搜索。如果想让大型网站搜索到自己的网页，最好的方法是到该网站去注册，让网页信息在该网站的数据库中有一席之地。 在国外的网站中，建议到雅虎 ( 国内的网站建议到新浪 ( (

43 在注册时需要注意: 1．提交含有内容的URL，而不是仅仅提交根网址。 2．由于网络只有第一，没有第二，如果你的被搜索的名次比较靠后，就很少有人访问你的网页。需要提醒的是，一定要把握Keywords(关键字)和description(简介)，尽可能地让你的网页名词靠前，最好能在首页。

44 巧妙地设置Meta数据 除了在大型网站中的数据库中注册外，还要注意自己的网页中的Meta。 什么是Meta呢?
Meta是HTML语言head区的一个辅助性标签。如果你留心过网页的起始部分，很可能在中文网页中看到类似下面这段HTML代码： ――――――――――――――――――――― < head> < Meta http-equiv="Content-Type" content="text/HTML; charset=gb2312"> < /head> Meta标签可以用于鉴别作者，设定页面格式，标注内容提要和关键字，以及刷新页面等等。

45 Meta标签的NAME变量语法格式是：(Meta NAME=”xxx”CONTENT=”参数”>
参数为： l．Keywords(关键字) 说明：keywords用来告诉搜索引擎你网页的关键字是什么。 举例：<Meta NAME="keywords" CONTENT="life，universe，mankind，plants, relationships，the meaning of life，science”> 2．description(简介) 说明：description用来告诉搜索引擎你的网站主要内容。 举例：(Meta NAME description" CONTENT=”This page is about the meaning of life, the universe, mankind and plants."> 3．robots(自动向导) 说明： robots用来说明搜索哪些页面需要索引，哪些页面不需要索引。CONTENT的参数有all,none,index,noindex,fol1ow,nofo1low。默认值为all。 举例：(Meta NAME＝ ”robots” CONTENT＝”none”> 4．author(作者) 说明：标注网页制作者或制作组。 举例：<Meta name= ”AUTHOR” content=”

46 Dreamweaver 网站推荐 http://www.junstars.com 六月星星 梦想设计
六月星星 梦想设计 goeway网页制作指南 素材 5Dmedia－网站制作 骄阳网－网页教学 中国网站制作技术联盟 中国网页设计师联盟论坛 u8学院

47 http://www.518www.net/ 518万维网
创意先锋七色鸟 追梦工作室 Lycos中国－网站制作 新浪网-主页制作学园 我可以冲浪指南 世人网络学院 统一教学－ITNOW网校 网易－软件及网页教程 网页特效集锦 梦想网页家

48 http://www.tuxiangsheji.com/ 图像设计
有风的日子v4.0 海脉技术纵横 理想帝国－理想网页 逍遥岛 网页制作实例 ENET网络学院 网页制作初步 网页天堂