维普资讯 http://www.cqvip.com ２００７年９月 湖北成人教育学院学报 Ｓｅｐ，２ ０ ０ ７ 第ｌ３卷第５期 Ｊｏｕｒｎａｌ ｏｆ ＨｕＢｅｉ Ａｄｕｌｔ Ｅｄｕｃａｔｉｏｎ Ｉｎｓｔｉｔｕｔｅ Ｖ Ｏ １．１３ Ｎ Ｏ．５ 浅谈网站的设计与制做 喻 会 （长江职业学院，湖北武汉，４３００７４） 【摘要］计算机网络的飞速发展，推动了网站的产生，网站是企业或个人在网络上展现形象的平台，是浏览者了解企 业或个人的一个途径。本文主要论述了网站构建的过程及方法，并基于设计和制做的过程提出了自己的一些看法和建 议。 ［关键词】网站；设计；制做 ［中图分类号］ＴＰ３０ ［文献标识码］Ａ ［文章编号］１６７３－３８７８（２００＂／）ｏ５－－ｏｌｏ２—ｏ２ ２ｌ世纪，计算机成为人类的常用现代工具。随着信 的话，相信这样的网页一定会受到大家的欢迎。 息技术发展和应用的突飞猛进，Ｉｎｔｅｒａｃｔ得到了普及，互联 二、网页色彩搭配 网使全球信息共享成为现实，很多机构、个人都需要或者 如果说内容是网页的骨架，那么色彩就在网页中起到 是希望在网络上拥有自己的网页来介绍自己、展现自己。 画龙点睛的作用。用户对网页第一印象就是从色彩开始， 网站从大的方面来说有两种性质：盈利性与非盈利性，但 其在不知不觉中左右着浏览者的情绪。网页的不同色彩 无论从哪个方面来说都是为了外界了解自身，让世界每个 搭配会产生不同的视觉效果，如果网页的色彩搭配合理、 角落都有可能知道自己的存在。 协调和谐就会给浏览者带来视觉和心理上好的享受，从而 有了需求，于是就出现了供给。如今有越来越多的人 吸引浏览者的注意，达到网页设计的目的。一个网站的格 加入到网页设计与制做的队伍之中。－有些初学者在刚开 调往往取决于色彩的选择和搭配，色彩必须要符合网站的 始做网站的时候，一上来就直接开始动手制做，然后等到 内容，具体来说，网页色彩搭配应该遵循几个原则： 做了一部分之后发现：布局不合理、内容区域分配不当或 １．色彩的合理性网页的色彩要漂亮，能够吸引浏览 色彩搭配不合理等，于是再做修改，或者是从头开始再做。 者的注意，能够给浏览者留下深刻的印象，避免使用大面 这样既消耗了精力又浪费了时间，初学者的学习热情会受 积的高纯度色相，以免产生过强的刺激使人眼疲劳。 挫。其实一个网站的完整建构过程分为设计和制做两个 ２．色彩的独特性网页的色彩搭配应该能够展现网站 部分，可以从以下几个步骤来进行分析： 的特色，使浏览者“过目不忘”，不落俗套。 一、内容的确定、资料收集 ３．色彩的合适性网页的色彩搭配应该与网站的内 内容：传统观念下，就是你想要呈现给读者看的东西； 容、性质和气氛相适应。 就是读者想要从你的网站看到的东西；就是一些文字、图 ４．色彩的联想性色彩的心理作用使人看到某种色彩 片、声音、影像等。只要可以透过数位传输，都可以是网站 时产生联想，在网页色彩应用上充分考虑色彩的联想性， 的内容。有些机构网站，内容是由机构提供，在此不做阐 可以使浏览者产生更深层次的心灵感应，印象更加深刻。 述；而个人网站的建设，在内容的选择上就比较自由了。 三、网页布局设计 网络上放眼望去，许多个人网站简直就是“杂货店”．内容 网页布局设计就是把网页的基本组成元素在页面中 包罗万象、杂乱无章、找不到重点。所以，确定内容首先要 合理的安排，组建成一个整体，就好比给网站加上一个好 确定主题，然后把功夫下在选材及资料的收集上。选材要 看而吸引人的外表。一般网页都包含以下几个部分： 尽量做到“少”而“精”，又必须突出“新”，如能坚持勤更新 １．页面标题。用于指示网页的主要内容。 ［收稿日期］２００７—０６—１５ ・】Ｏ２・ 维普资讯 http://www.cqvip.com ２．网站标志。它是一个网站的特色和内涵的集中体 现。 误。同样，网站中的元素都不要用中文命名，例如使用的 图片的名称是中文的，那么在浏览的时候看到的不是图 片，而是一个红叉。 ３．页眉。指页面的上部，通常位于水平放置的导航栏 上面。 合理的利用模板和库功能，提高制做的速度和质量。 ４．导航栏。是网页的重要组成元素，它的任务实帮助 浏览者在站点内快捷查找信息。 网站中的网页大部分格局都是相似的，利用模板能够先将 统一的格局建好，然后应用到网页中再添加新的内容，对 网站进行更新时直接修改模板就可以同时更新所有应用 了该模板的页面。有些元素在网站中要多次出现，如文 本、表格、表单、导航条等，可以保存为库项目，直接引用。 掌握好ｐｈｏｔｏｐｈ０ｐ、ｌｆａｓｈ等辅助工具，制作出漂亮的精 美的图片、动画为网站增色。但图片、动画是为主页内容 服务的，不要让整个版面太花花绿绿，喧宾夺主。利用网 络资源可以在网上搜索一些图片、图库和动画。 利用ＣＳＳ技术快速有效的设置网页格式和ｊａｖａｓｃｒｉｐｔ 来为网页完成某些特殊的功能。 ５．内容板块。是页面的主体，往往根据内容的多少划 分为几个栏目。 ６．页脚。是指页面的下面部分，通常放置版权信息、 联系方式等。 了解了网页的基本组成后就可以开始页面布局的设 计了。首先要对页面的整体布局进行认真的构思，此时需 要设计者充分发挥自己的想象力，结合考虑现有的内容进 行整合创作，参考多种布局结构，吸取别人的精华融合自 己的独特创意，并要考虑技术实现的可行性。然后在纸上 绘制草图，将头脑中的构思轮廓具体化，这样有助于发现 构思中不合理的地方，进而加以修正。绘制草图只需要粗 略的勾画出创意的轮廓，并尽可能多画几张，最后从中选 熟悉ｈｔｍｌ代码，了解ｈｔｍｌ代码中常用标记符的作用。 网页的本质其实就是ｈｔｍｌ源代码，了解了ｈｔ】１１ｌ代码能够 帮助我们更好的制做网页。有的人可能会说： Ｄｒｅａｍｗｅａｖｅｒ就是制做网页的工具了，为什么我们还要掌 握ｈｔｍｌ呢？其实Ｄｒｅａｍｗｅａｖｅｒ虽然说能够帮助我们简单 定一个满意的方案做创作的基础。接下来对草图进行细 化及方案确定，将页面元素等内容具体的摆放在草图上， 对页面元素进行具体尺寸的描述，确定最终方案。 四、设计方案的实施 快捷的制做网页，但是在有些效果的制做上还是有缺陷。 比如：有时我们可能需要在网站的ｌｏｇｏ图片上覆盖一个 简单的ｆｌａｓｈ动画增加网站的可鉴赏性，此时就需要使 ｌｆｓｈ的背景变成透明的。我们直接在网页代码中找到＜ ａｅｍｂｅｄ＞标记符，再加入ｗｍｏｄｅ＝ｔｒａｎｓｐａｒｅｎｔ就可以实现透 明了，它加入的位置如下：＜ｅｍｂｅｄ ｓｒｃ＝ ｗｍｏｄｅ＝ｔｒａｎｓｐａｒｅｎｔ ｗｉｄｔｈ＝ 宰丰 ｈｅｉｇｈｔ： 网站的设计工作做完了之后，接下来就是网站的制做 部分了。制做网页的工具很多，最著名的就是Ｍａｃｒｏｍｅｄｉａ 公司的Ｄｒｅａｍｗｅａｖｅｒ，利用这些专用的网页设计软件对网 页中的元素进行修饰、排版、布局、链接的设置，综合整理 成一个完整的网站。 ． ＞ 为了在制做的过程中对页面元素进行有效的管理，方 便网站的上传，一般会先建网站的目录，即指建立网站时 创建的目录，目录结构的好坏，对浏览者来说并没有什么 ＜／ｅｒａｂｅｄ＞，在此最好把不相关的＜ｏｂｊｅｃｔ＞和＜ｐａｒａｍ＞ 全部删除。 网站制做好之后，还要对网站进行测试，来检测网页、 图片等是否链接正常，内容是否正确等。及时发现问题作 太大的感觉，但是对于站点本身的上传维护，内容未来的 扩充和移植有着重要的影响。下面是建立目录结构的一 些建议： 出修改。测试通过后，一个完整的网站就建设好了，此时就 可以进行上传了，浏览者就可以通过网络来欣赏该网站了。 网站的设计与制做是一个创造性的过程，吸引浏览者 来浏览，激发浏览者的观看欲，提高浏览率是制做网站的 目的。将内容、设计、技术紧密的结合在一起，积极、主动、 创新，坚持更新，就能建构出成功的网站。 参考文献： １．不要将所有文件都存放在根目录下，会造成文件管 理混乱你常常搞不清哪些文件需要编辑和更新，哪些无用 的文件可以删除，哪些是相关联的文件，影响工作效率。 另外，上传速度慢。所以，尽可能减少根目录的文件存放 数。 ２．按栏目内容建立子目录，例如建立ｉｍａｇｅ文件夹放 图片、建立ｍｕｉｓｃ文件夹放音乐等，方便制做网站时搜索 相关的对象，以及日后网站的更新。 ３．目录的层次不要太深，最好不要超过３层，便于维 护管理。 ． ［１］莫治雄．网页设计实训教程［Ｍ］．清华大学出版社， ２０Ｄ３． ［２］赵丰年．网页制做教程［Ｍ］．人民邮电出版社，２００６． （３］刘艳丽．网页设计与黼做实用教程（Ｍ］．高等教育出 版社。２００４． ４．不要使用中文来对目录命名，因为现在很多工具都 不支持中文路径，如果目录用中文命名，将会出现链接错 ｆ责任编辑：毛维） ・１Ｏ３・