论中小型企业网站设计与制作.doc

1、 论中小型企业网站设计与制作檀志鹏（太原师范学院计算机系200102班 太原 030012）指导老师：郝 宁【内容提要】中小型企业在不断发展壮大的过程中,对内要不断完善自己的管理水平,对外要迎接日益激烈的市场竞争,信息技术为它们提供了最好的解决途径。本文主要阐述中小型企业网站制作及在制作过程中设计、排版、规划等方面所需注意的一些知识和技术，重点讨论页面设计中版面布局、色彩、字体、表格、图片等方面的设计要点，旨在通过这篇文章使大家了解在中小型企业网站制作过程中必须重点考虑的几个问题。【关键词】网站设计 版面布局 字体设置 表格设计 meta标签 在这个高速发展的商业化社会里，时间就是金钱。许多企

2、业都为求生存而不断的寻求制胜法宝，不断的与时间进行赛跑。而计算机网络和企业网站的出现，为他们提供了实现企业信息化的条件，使他们能够通过企业网站展示企业形象、宣传企业理念、推广产品从而大幅度提高企业的核心竞争力。在天津市友联机电设备有限公司网站建设中，着重强调企业品牌的打造和系列产品的展示，通过整个制作过程我深刻体会到页面的整体设计是一个中小型企业网站成功与否的关键，而首页的设计又是重中之重。下文将详细介绍其网站的主要制作过程和设计理念。一、天津市友联机电设备有限公司网站制作过程1.1需要使用的网页工具在网站的制作过程中主要用到的工具是Dreamweaver MX7.0和Photoshop 7.

3、0，下面分别对它们做一个简单的介绍。1、DreamweaverDreamweaver MX 是一个完整、集成的解决方案，可为您提供可视化的布局工具、快速的 web 应用程序开发以及广泛的代码编辑支持。Dreamweaver具有“设计互动式网页”的功能。我们可以利用Dreamweaver的“图层”(Layer)和“时间轴”(Time Line)功能，来让图片或文字随意地在网页中自由移动。移动的方式可以是绕着我们所设定的路径(path)移动，也可以是左右或直线的移动。 另外，我们还可以设计让文字或图片配合鼠标的点选有更多的变化。也就是说，当鼠标经过文字或图片，文字或图片会产生变化的动态效果。 Dr

4、eamweaver还可以插入Flash制作的.swf动画文件和 Firework设计的HTML文件，让网页更加活泼。对想要在视觉化环境下制作复杂网页的专业网页制作者来说，Dreamweaver已经在网页编辑工具中独占熬头，成为专业人士编写网页的最佳选择。为了迎合市场，Dreamweaver内置的功能是越来越多、越来越丰富、齐全，正版用户还可以去macromedia公司还可以下载Dreamweaver的升级包。2、PhotoshopPhotoshop和Dreamweaver可以配合使用，相比之下，Dreamweaver负责网页设计和网站管理，而Photoshop则侧重于网页图形设计方面。 首先我

5、们需要使用Photoshop设计好网页的整体效果图，利用Photoshop制作某些效果，额外收集某些图片，并在完成细节处理、背景图处理，以及网页的图标、按钮的设计工作之后，才可使用Photoshop进行后期的压缩处理以及导出。当然，一个优秀的网站是离不开动画的，无论是动画Logo还是Banner，或者网站宣传动画等，都需要使用动画制作软件-Flash完成所有的操作。作为一款占据霸主地位的动画制作软件，Flash使用的矢量技术可以使动画在实现出色效果的同时，只占据极少的数据量，使网站可以兼顾效果与速度。而且，Flash自带的绘图功能完全可以满足大多数设计的需要，还可以帮助我们实现网页中的动感、交

6、互功能。 1.2设计版面布局在谈版面布局之前首先让我们来介绍一下首页设计的步骤：首页，从根本上说就是全站内容的目录，是一个索引。但只是罗列目录显然是不够的，如何设计好一个首页呢？一般的步骤是：1.2.1确定首页的功能模块首页的内容模块是指我们需要在首页上实现的主要内容和功能。一般的站点都需要这样一些模块：网站名称(logo)，广告条(banner)，主菜单(menu)，新闻(whats new)，搜索(search)，友情链接(links)，邮件列表(maillist)，计数器(count)，版权(copyright)。选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计首先需要确定的

7、。1.2.2设计首页的版面在功能模块确定后，开始设计首页的版面。就象搭积木，每个模块是一个单位积木，如何拼搭出一座漂亮的房子，这就靠创意和想象力了。设计版面的最好方法是：找一张白纸，一支笔，先将理想中的草图勾勒出来，然后再用网页制作软件实现。天津市友联机电设备有限公司主营工控设备和系列机柜，因此版面主要突出产品目录，页面设计简洁明快，使访问者能快速浏览到所有产品，是整个网站的设计核心。1.2.3处理技术上的细节设计版面布局.版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768

8、像素等不同尺寸。我设计的网站建议使用IE4.0以上浏览器软件及 1024*768 分辨率访问本网站布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。1.2.4版面布局的一般步骤1、草案(这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽可能多画几张，最后选定一个满意的作为继续创作的脚本。)2、粗略布局（在草案的基础上，将确定需要放置的功能模块安排到页面上。这里我们必须遵循突出重点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼，最突出的位置，然后在考虑次要模块的排放。）3、定案（将粗略布局精细化，具体化。）1.2.5布局过程遵循的原

9、则1、正常平衡：亦称匀称。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。2、异常平衡：即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。3、对比：所谓对比，不仅利用色彩、色调等技巧来做表现，在内容上也可涉及古与今、新与旧、贫与富等对比。4、凝视：所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。5、空白：空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。 6、尽量用图片解说：此法对不能用语言说服、或用语言无法表达的情感

10、，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。1.2.6常用的版面布局形式1、“T”结构布局。所谓“T”结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母“T”,所以我们称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。2、“口”型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大

11、。缺点是页面拥挤，不够灵活。同时也有将四边空出，只用中间的窗口型进行设计的。3、“三”型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。4、对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。5、POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。以上总结了目前网络上常见的布局，其实还

12、有许许多多别具一格的布局，关键在于创意和设计了。1.2.7版面布局的技巧加强视觉效果1、强文案的可视度和可读性2、统一感的视觉3、新鲜和个性是布局的最高境界1.3色彩的搭配网页的色彩是树立网站形象的关键之一，色彩搭配却是大家头疼的问题。网页的背景，文字，图标，边框，超链接等，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花

13、。1.3.1 非彩色的搭配黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。1.3.2. 彩色的搭配1、一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。2、用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我所作的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。3、用一个色系。简单的说就是

14、用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我们可以在photoshop里按前景色方框，在跳出的拾色器窗中选择自定义，然后在色库中选就可以了。4、用黑色和一种彩色。比如大红的字体配黑色的边框感觉很跳。1.3.3网页配色不要将所有颜色都用到，尽量控制在三种色彩以内。背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。 1.4 网页字体的设置1.4.1 字符集的设定在查看html文件原代码时，我们经常可以在文件头和之间看到这么一句代码： 它的作用就是告诉浏览器：这个HTML文件是采用gb2312字符集制作的。当浏览器读到这一

15、代码，便以gb2312字符集来解释和翻译网页原代码，然后我们就可以看到正确的网页。gb2312就是我们最熟悉的GB简体码，英文是iso-8859-1字符集。其它还有BIG5,UTF-8,Shift-JIS,EUC,KOI8-2等字符集，分别用于不同的字体显示。1.4.2.字体的使用在网页里，字体的定义语句是： 显示文字其中Arial就是一种字体的名称。默认的浏览器定义的标准字体是中文宋体和英文times new Roma字体。也就是说，如果没有设置任何字体，或者浏览者的操作系统没有我们设置的字体，网页将以这两种标准字体显示。如果一定要用一种特殊的字体来体现网站的风格，那么如何让大家可以真正看到

16、我们设计页面呢？解决的办法是：用图片。将需要用这种字体的地方用图片代替，以保证所有人看到的页面是同一效果。1.4.3 字体的样式(style)字体的样式有四种：正常体(regular),斜体(Italic),粗体(Bold),粗斜体(Bold Italic)。1.4.4 字体的效果这里指通过html语言设定可以直接显示的效果，在html里的语句设定为： 显示文字其中，overline是指上划线效果。其它常用的效果还有：underline(下划线)，uppercase(大写)等等。1.4.5 字体大小的控制字体大小的控制是个重点。一般字体默认的大小是12pt(镑)，用语句可以将文字增大2pt。现

17、在网络上最流行的小中文字体大小为9pt。1.4.6网页设计中字体的使用原则1、不要使用超过3种以上的字体。字体太多则显得杂乱，没有主题。2、不要用太大的字。因为版面是宝贵，有限的，粗陋的大字体不能带给访问者更多信息。 3、不要使用不停闪烁的文字。想让浏览者多停留一会儿的话，就不要使用闪烁的文字。4、原则上标题的字体较正文大，颜色也应有所区别。1.5网页中表格的运用表格的嵌套并不是表格处理最困难的地方，无论多复杂的版面，悉心琢磨一番总能找到解决的办法。我们需要考虑的是：用什么样的嵌套排版方式使网页的下载速度达到最快。我们知道：浏览器在读取网页html原代码时，是读完整一个table再将它显示出来

18、。也就是说从标签开始，要读到标签时，才将表格中的内容显示在屏幕上。而且显示也有优先级，先读到的先显示。这样的话，如果一个大表格中含有多个子表格，必须等大表格读完，才能将子表格一起显示出来。我们在访问一些站点时，等待多时无结果，按停止按钮却一下显示出页面就是这个原因。1.5.1设计页面表格整个页面不要都套在一个表格里，尽量拆分成多个表格：1、一表格的结构尽量整齐； 2、表格嵌套层次尽量要少。实验证明：越复杂，嵌套层次越多的表格下载速度越慢。1.6设计中meat标签META标签，是HTML语言head区的一个辅助性标签。在几乎所有的page里，我们都可以看到类似下面这段html代码：这就是meta

19、标签的典型运用。根据HTML语言标准注释：meta标签是对网站发展非常重要的标签，它可以用于鉴别作者，设定页面格式，标注内容提要和关键字，以及刷新页面等等。meta标签分两大部分：HTTP-EQUIV和NAME变量。HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。最常用的几个：1、refresh(刷新)说明：需要定时让网页自动链接到其它网页的话，就用这句了。用法：注意：其中的5是指停留5秒钟后自动刷新到URL网址。2、content-Type(显示字符集的设定)说明：设定页面使用的字符集。用法： 说明此网页是用GB2312字符编码。m

20、eat标签的NAME变量语法格式是： 其中xxx主要有下面几种参数：1、Keywords(关键字)说明：keywords用来告诉搜索引擎你网页的关键字是什么。举例： 2、description(简介)说明：description用来告诉搜索引擎你的网站主要内容。举例： 3、robots(机器人向导)说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。举例：4、author(作者)说明：标注网页的作者举例：Keywords和description的设定：在met

21、a标签中最重要的就是:Keywords和description的设定。这两个语句可以让搜索引擎能准确的发现我们的网站，吸引更多的人来访问站点!所以,我们必须记住添加keywords和description的meta标签，并尽可能写好关键字和简介。写keywords的禁忌是：1、要用常见词汇。例如www,homepage,net,web等。2、不要用形容词，副词。例如最好的，最大的等。3、不要用笼统的词汇，要尽量精确。例如不用摩托罗拉手机,改用V998等这里，是一段微软多媒体网站的关键字的例子：二、网站的推广与宣传一个好的网站的每天的点击率是很高的。网民数呈快速增长趋势；宽带及无线互联网市场已开

22、始启动，蛋糕前景已可触及。因此，如何利用互联网宣传自己是每个企业和个人所考虑的问题。而网站着眼于提高网站知名度，吸引网友访问。针对这个问题一般可以采用以下几个方法：1、到各搜索引擎注册、登记 这个方法相信很多网友都尝试过，但却发现效果不明显，为什么呢？原因不外乎有三：首先，网上的搜索引擎实在太多了，想要一个一个地去注册登记恐怕是不大可能的事。借助Addweb等注册软件也未必可以帮你全部注册成功。其次，如果你做的是中文主页，那么在国外的著名搜索引擎YAHOO、EXCITE等注册后，会到你主页访问的外国朋友又会有多少呢？再次，假若有人到这些引擎查询，得到的查询结果有可能成百上千。如果你的主页排位不

23、是名列前茅的话，那么愿不断往下查看直到找到你主页的人又有多少呢？因此，单靠这种方法就想提高访问率，无疑是守株待兔。 建议：到中文搜索引擎注册是必需的，如：SOHOO、我是野虎、YEAH搜索、中文YAHOO等搜索网站。而且还要在自己主页中多加上一些方便搜索引擎查找的“关键字”。很可惜，至今还没有人开发集中在中文搜索引擎站点注册登记的软件，不然就会方便和省时很多了。 2、参加广告交换组织 目前网上有不少大大小小的广告交换组织，其中网盟就是一个较著名的站点。加入这些组织的前提就是你得在自己的主页上放置其他站点的广告banner，这些广告组织会根据你主页上显示其他网站banner的多少而按一定比例在其

24、他网站上显示你的主页banner。这也会为你带来访问者。但是，你的网站访问率太低，广告交换带来的效果就不会太好。而且无法保证你的banner显示后，会有多少朋友点击它而访问你的主页。 建议：适当地参加一至两个交换组织，但不要太滥（最好是提供1换1方案的）。若你的主页上同时出现好几个广告banner，一来会像一件打满了补丁的衣服，极不美观；二来太多商业广告会令不少访问者反感，效果适得其反。3、通过Email通知朋友 建议：发出的Email邀请信要有诚意，将你的网站更新的内容简要地介绍给朋友。倘若朋友表示不愿再收到类似的信件时，就不要再将通知邮件寄给他了。 4、与其他主页互建友情链接 这个方法我认

25、为比参加广告交换组织要有效得多，起码你可以选择将广告放置到哪个主页。你能选择与那些访问率较高的主页建立友情链接，这样造访你主页的朋友肯定会多起来。 建议：友情链接是相互建立的，要别人加上你的链接，你也应该在自己主页的首页或专门做“友情链接”专页放置对方的banner，并适当做出推荐。这样才能吸引更多人与你共建链接。此外，你的banner要注意制作得漂亮、醒目，使人一看就有兴趣点击。 5、处处留言、引人注意 这也是一个很好的方法。在网上浏览时，当你看到一个不错的网站,可考虑在这个网站的留言簿留下赞美的语句，并把你的网站介绍、地址一并写下来。将来其他朋友留言时就会看到你的留言，说不定会有兴趣到你的

26、主页参观。以上提到的是人留言簿，还有一些是商业网站留言簿，如网易网上家园、自贡169留言簿等。后者每天都有数百人在上面留言，访问率高。在那里留言对于让别人认识你的主页效果更明显。 建议：留言时用语要真诚、简洁，切莫将与主题无关的语句也写在上面。篇幅尽量简短，更不要将同一篇留言反复写在别人的留言簿上。 6、多参与论坛、新闻组的讨论 到论坛和新闻组发布帖子,藉此宣传自己的网站也不错。因为这些地方每天都会有数以千计的网友在那儿进行各式各样的讨论、发表见解。像四通利方论坛,每天都是人山人海，若能够在那里宣传一番，肯定能为你的主页访问人次再进账不少。此外新闻组也是宣传的好地方。建议：在论坛留言与在留言簿

27、留言所要注意的相差不多，不要老是写“到我的主页来访问”之类的话。应多与网友交流学习,在适当地方提一下自己的主页地址便可以了。这样就不会有刚开始效果很好，到后来就没多少人来访问的情况出现了。在使用新闻组的时候可每隔一段时间就转到别的新闻组，多结交新朋友，讨论新的话题。 7、到各大报刊发表文章 作为一名电脑爱好者，学习和使用电脑应该有一段时间了吧。在使用软、硬件和上网的过程中积累了哪些值得与别人交流的经验和心得呢？不要吝惜你的言语，将它写出来，与人真挚交流，不去计较得失。不要将好的经验自己独享，快拿起笔写出来与广大朋友一起分享吧！写好后将它寄往像CPCW网站等比较出名的报刊，让更多人与你一同成长。

28、在文章的末尾可注明你的主页地址和Email地址，如果你的文章很受欢迎,一定会有很多朋友来访问你的主页。 建议：千万不要一稿多投，既不道德,也很容易被封杀。稿件不被采用也不要灰心，有志者事竟成，应该再尝试写更多更好的文章投稿。若文章发表，一定有很多网友来信与你交流，最好做到来信必回，尽自己的能力帮助他们解决问题，与他们交朋友。这样他们的来访会更稳定。 相信经过采用以上方法，你的主页会逐渐被人认识，访问率也会不断提高。当然,主页的维护更新工作要做得更好，那样才能维持一定的访问人数。最后希望你我的主页都能客似云来！ 1、与同类企业交换链接；2、花钱与大网站上做链接或投网络广告；3、与知名网站合作专题

29、；4、开展有奖网络调查；5、结合传统活动举办网上网下相结合活动； 6、电子邮件营销；7、结合网站自身，利用已建立的用户数据库成立网上俱乐部；8、建立网站论坛，扩大与用户间的互动；9、与媒体、运营商等合作举办活动，企业出奖品的同时又起来宣传自身的目的。【参考文献】【01】 向元杰著，Flash MX编程轻松上手，清华大学出版社，2002.11.01【02】 网冠科技著，DREAMWEAVER时尚创作百例，机械工业出版社，2004.06.01【03】 吕少华著，网页标题制作技巧与实例，清华大学出版社，2000.01.15【04】 Daniel著 成栋等译，FrontPage 2000从入门到精通，

30、 电子工业出版社，2000.01.01【05】 美Jakob Nielsen著，Web可用性设计，人民邮电出版社 2000.11.01【06】 天蓝工作室著，网站架构与美工黄金组合，人民邮电出版社 2000.12.01【07】 伍梵华著，网页设计与网站开发HTML网页制作网站开发完全实战，航空工业出版社，2000.06.01【08】 樊志育著，广告制作，人民邮电出版社，2003.08.01【09】 龙马工作室箸，Dreamweaver MX 2004中文版完全自学手册，人民邮电出版社 2004.09.01【10】 洪恩软件著，Dreamweaver MX 2004入门与进阶实例，吉林电子出版社

31、，2005.03.01【11】 于利轩箸，Flash MX编程魔法石，中国水利水电出版社，003.03.01【12】 刘瑞新箸，Photoshop CS图形图像，机械工业出版社，2004.10.01【13】 黄竣箸，Dreamweaver MX中文版精彩设计百例，中国水利水电出版社，2003.01.01【14】 Toolbang韩箸，Dreamweaver MX 2004经典案例课堂，中国青年出版社，2004.11.01【15】 李波箸，Flash MX娱乐制作大本营，电脑报社，2004.11.01Suggestion for Medium Small Enterprises Websit D

32、esignTan Zhipeng【Abstract】 During the developing and extending process,the medium small enterprises should continuously perfect their own management level inside, and face the increasingly vigorous market competition outside ,for which the information technique provides the best method. This text ma

33、inly elaborates the website manufacture for the medium small enterprises and some noticeable knowledge and technique concerning the design,formatting and programming in the manufacturing process,meanwhile it mainly discusses the layout,colour,written form,table,picphone etc.in the page design .The p

34、urpose of this text is to make people understand Some key problems that must be considered in the website manufacturing process for the medium small enterprises.【Keywords】the website design layout of the page written form designthe form design label of meta后 记通过这次毕业实践，我受益匪浅。对网页的制作设计过程有了一定深度的认识，了解到在网

35、页设计之初首先要重点考虑的一些问题。由于以前制作网页时总是拿到手就做，在制作之初从来没有怎么认真考虑过，每次总是做过一段时间后感觉不好再来修改，费时费力。通过这次毕业实践使我真正了解了网页设计的具体流程。当然在首页设计中还有许多需要注意的方面在论文中没有谈到，例如还要考虑不同的浏览器和分辨率，各种图片的搭配方法等，由于时间关系，这里就不再写了。处在这样一个科学技术飞速发展的时代，我们应该感到一种幸福的危机感。幸福的是，这个时代永远不会埋没人才，每个人都应该有切合自己实际的奋斗目标，真心的努力不可能得不到回报；但是我们时刻不要忘记危机感，因为社会的淘汰非常残酷，他的残酷是能找到充分理由的，只有没有上进心的懒人才会被淘汰。如果要想跟上E时代的步伐，就必须促使我们不知疲倦地吸收新知识，提高自己各方面的素质，不断适应社会的变化，争取以最好的状态走上工作岗位，为实现心中的梦想而勤奋学习！致 谢在论文完成之际，谨向在毕业实践和书写论文过程中所有培养、关心、帮助过我的领导、老师和同学表示我最衷心的感谢！特别是在网上“龙城空间”、“太原电脑”两大专业论坛上的那些我原本并不认识的朋友给予的建议和帮助，谢谢大家！评 语：檀志鹏指导教师郝宁本文对中小型企业构建网站的过程以及需要遵循的原则进行了详细的介绍。设计合理，论述清楚，达到了学士学位论文的要求。