试谈中小型企业网站设计与制作37562.docx
《试谈中小型企业网站设计与制作37562.docx》由会员分享,可在线阅读,更多相关《试谈中小型企业网站设计与制作37562.docx(22页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、论中小型企业网站设计与制作檀志鹏(太原师范范学院计计算机系系20001022班 太原 03000122)指导老师:郝 宁【内容提要要】中小型型企业在在不断发发展壮大大的过程程中,对对内要不不断完善善自己的的管理水水平,对对外要迎迎接日益益激烈的的市场竞竞争,信信息技术术为它们们提供了了最好的的解决途途径。本本文主要要阐述中中小型企企业网站站制作及及在制作作过程中中设计、排排版、规规划等方方面所需需注意的的一些知知识和技技术,重重点讨论论页面设设计中版版面布局局、色彩彩、字体体、表格格、图片片等方面面的设计计要点,旨旨在通过过这篇文文章使大大家了解解在中小小型企业业网站制制作过程程中必须须重点考
2、考虑的几几个问题题。【关键词】网站设设计 版面面布局 字字体设置置 表格设设计 meeta标标签 在这个高速速发展的的商业化化社会里里,时间间就是金金钱。许许多企业业都为求求生存而而不断的的寻求制制胜法宝宝,不断断的与时时间进行行赛跑。而而计算机机网络和和企业网网站的出出现,为为他们提提供了实实现企业业信息化化的条件件,使他他们能够够通过企企业网站站展示企企业形象象、宣传传企业理理念、推推广产品品从而大大幅度提提高企业业的核心心竞争力力。在天津市市友联机机电设备备有限公公司网站站建设中中,着重重强调企企业品牌牌的打造造和系列列产品的的展示,通通过整个个制作过过程我深深刻体会会到页面面的整体体设
3、计是是一个中中小型企业网站站成功与与否的关关键,而而首页的的设计又又是重中中之重。下下文将详详细介绍绍其网站站的主要要制作过过程和设设计理念念。一、天津市市友联机机电设备备有限公公司网站站制作过过程1.1需要要使用的的网页工工具在网站的制制作过程程中主要要用到的的工具是是Dreeamwweavver MX77.0和和Phootosshopp 7.0,下下面分别别对它们们做一个个简单的的介绍。1、DreeamwweavverDreammweaaverr MXX 是一一个完整整、集成成的解决方方案,可可为您提提供可视视化的布局工工具、快快速的 weeb 应应用程序序开发以以及广泛泛的代码编编辑支持
4、持。Drreammweaaverr具有“设计互互动式网网页”的功能能。我们们可以利利用Drreammweaaverr的“图层”(Laayerr)和“时间轴轴”(Tiime Linne)功功能,来来让图片片或文字字随意地地在网页页中自由由移动。移移动的方方式可以以是绕着着我们所所设定的的路径(patth)移移动,也也可以是是左右或或直线的的移动。 另外,我我们还可可以设计计让文字字或图片片配合鼠鼠标的点点选有更更多的变变化。也也就是说说,当鼠鼠标经过过文字或或图片,文文字或图图片会产产生变化化的动态态效果。 Dreeamwweavver还还可以插插入Fllashh制作的的.swwf动画画文件和和
5、 Fiirewworkk设计的的HTMML文件件,让网网页更加加活泼。对想要在视视觉化环环境下制制作复杂杂网页的的专业网网页制作作者来说说,Drreammweaaverr已经在在网页编编辑工具具中独占占熬头,成成为专业业人士编编写网页页的最佳佳选择。为为了迎合合市场,Dreamweaver内置的功能是越来越多、越来越丰富、齐全,正版用户还可以去macromedia公司还可以下载Dreamweaver的升级包。2、PhootosshoppPhotooshoop和Dreeamwweavver可可以配合合使用,相相比之下下,Drreammweaaverr负责网网页设计计和网站站管理,而而Phooto
6、sshopp则侧重重于网页页图形设设计方面面。 首首先我们们需要使使用Phhotooshoop设计计好网页页的整体体效果图图,利用用Phootosshopp制作某某些效果果,额外外收集某某些图片片,并在在完成细细节处理理、背景景图处理理,以及及网页的的图标、按按钮的设设计工作作之后,才才可使用用Phootosshopp进行后后期的压压缩处理理以及导导出。当当然,一一个优秀秀的网站站是离不不开动画画的,无无论是动动画Loogo还还是Baanneer,或或者网站站宣传动动画等,都都需要使使用动画画制作软软件-Flaash完完成所有有的操作作。作为为一款占占据霸主主地位的的动画制制作软件件,Flla
7、shh使用的的矢量技技术可以以使动画画在实现现出色效效果的同同时,只只占据极极少的数数据量,使使网站可可以兼顾顾效果与与速度。而而且,FFlassh自带带的绘图图功能完完全可以以满足大大多数设设计的需需要,还还可以帮帮助我们们实现网网页中的的动感、交交互功能能。 1.2设计计版面布布局在谈版面布布局之前前首先让让我们来来介绍一一下首页页设计的的步骤:首页,从根根本上说说就是全全站内容容的目录录,是一一个索引引。但只只是罗列列目录显显然是不不够的,如如何设计计好一个个首页呢呢?一般般的步骤骤是:1.2.11确定首首页的功功能模块块首页的的内容模模块是指指我们需需要在首首页上实实现的主主要内容容和
8、功能能。一般般的站点点都需要要这样一一些模块块:网站名称(loggo),广广告条(bannnerr),主主菜单(mennu),新闻(whhats nnew),搜索索(seearcch),友情链接(links),邮件列表(maiilliist),计数数器(ccounnt),版版权(ccopyyrigght)。选择哪哪些模块块,实现现哪些功功能,是是否需要要添加其其他模块块都是首首页设计计首先需需要确定定的。1.2.22设计首首页的版版面在功能能模块确确定后,开开始设计计首页的的版面。就就象搭积积木,每每个模块块是一个个单位积积木,如如何拼搭搭出一座座漂亮的的房子,这这就靠创创意和想想象力了了。设
9、计计版面的的最好方方法是:找一张张白纸,一一支笔,先先将理想想中的草草图勾勒勒出来,然然后再用用网页制制作软件件实现。天津市友联机电设备有限公司主营工控设备和系列机柜,因此版面主要突出产品目录,页面设计简洁明快,使访问者能快速浏览到所有产品,是整个网站的设计核心。1.2.33处理技技术上的的细节设计版面布布局.版版面指的的是浏览览器看到到的完整整的一个个页面(可可以包含含框架和和层)。因因为每个个人的显显示器分分辨率不不同,所所以同一一个页面面的大小小可能出出现6440*4480像像素,8800*6000像素,110244*7668像素素等不同同尺寸。我我设计的的网站建建议使用用IE44.0以
10、以上浏览览器软件件及 110244*7668 分分辨率访访问本网网站布局局,就是是以最适适合浏览览的方式式将图片片和文字字排放在在页面的的不同位位置。1.2.44版面布布局的一一般步骤骤1、草案(这属于于创造阶阶段,不不讲究细细腻工整整,不必必考虑细细节功能能,只以以粗陋的的线条勾勾画出创创意的轮轮廓即可可。尽可可能多画画几张,最最后选定定一个满满意的作作为继续续创作的的脚本。)2、粗略布布局(在在草案的的基础上上,将确确定需要要放置的的功能模模块安排排到页面面上。这这里我们们必须遵遵循突出出重点、平平衡谐调调的原则则,将网网站标志志,主菜菜单等最最重要的的模块放放在最显显眼,最最突出的的位置
11、,然然后在考考虑次要要模块的的排放。)3、定案(将将粗略布布局精细细化,具具体化。)1.2.55布局过过程遵循循的原则则1、正常平平衡:亦亦称匀称。多指指左右、上上下对照照形式,主主要强调调秩序,能能达到安安定诚实实、信赖赖的效果果。2、异常平平衡:即即非对照照形式,但但也要平平衡和韵韵律,当当然都是是不均整整的,此此种布局局能达到到强调性性、不安安性、高高注目性性的效果果。3、对比:所谓对对比,不不仅利用用色彩、色色调等技技巧来做做表现,在在内容上上也可涉涉及古与与今、新新与旧、贫贫与富等等对比。4、凝视:所谓凝凝视是利利用页面面中人物物视线,使使浏览者者仿照跟跟随的心心理,以以达到注注视页
12、面面的效果果,一般般多用明明星凝视视状。5、空白:空白有有两种作作用,一一方面对对其他网网站表示示突出卓卓越,另另一方面面也表示示网页品品位的优优越感,这这种表现现方法对对体显网网页的格格调十分分有效。 6、尽量用用图片解解说:此此法对不不能用语语言说服服、或用用语言无无法表达达的情感感,特别别有效。图图片解说说的内容容,可以以传达给给浏览者者的更多多的心理理因素。1.2.66常用的的版面布布局形式式1、“T”结构布布局。所所谓“T”结构。就就是指页页面顶部部为横条条网站标标志+广告条条,下方方左面为为主菜单单,右面面显示内内容的布布局,因因为菜单单条背景景较深,整整体效果果类似英英文字母母“
13、T”,所以我我们称之之为“T”形布局局。这是是网页设设计中用用的最广广泛的一一种布局局方式。这这种布局局的优点点是页面面结构清清晰,主主次分明明。是最最容易上上手的布布局方法法。缺点点是规矩矩呆板,如如果细节节色彩上上不注意意,很容容易让人人“看之无无味”。2、“口”型布局局。这是是一个象象形的说说法,就就是页面面一般上上下各有有一个广广告条,左左面是主主菜单,右右面放友友情连接接等,中中间是主主要内容容。这种种布局的的优点是是充分利利用版面面,信息息量大。缺缺点是页页面拥挤挤,不够够灵活。同同时也有有将四边边空出,只只用中间间的窗口口型进行行设计的的。3、“三”型布局局。这种种布局多多用于国
14、国外站点点,国内内用的不不多。特特点是页页面上横横向两条条色块,将将页面整整体分割割为四部部分,色色块中大大多放广广告条。4、对称对对比布局局。顾名名思义,采采取左右右或者上上下对称称的布局局,一半半深色,一一半浅色色,一般般用于设设计型站站点。优优点是视视觉冲击击力强,缺缺点是将将两部分分有机的的结合比比较困难难。5、POPP布局。PPOP引引自广告告术语,就就是指页页面布局局象一张张宣传海海报,以以一张精精美图片片作为页页面的设设计中心心。常用用于时尚尚类站点点,比如如ELLLE.ccom。优优点显而而易见:漂亮吸吸引人。缺缺点就是是速度慢慢。作为为版面布布局还是是值得借借鉴的。以上总结了
15、了目前网网络上常常见的布布局,其其实还有有许许多多多别具具一格的的布局,关关键在于于创意和和设计了了。1.2.77版面布布局的技技巧加强视觉效效果1、强文案案的可视视度和可可读性2、统一感感的视觉觉3、新鲜和和个性是是布局的的最高境境界1.3色彩彩的搭配配网页的色彩彩是树立立网站形形象的关关键之一一,色彩彩搭配却却是大家家头疼的的问题。网网页的背背景,文文字,图图标,边边框,超超链接等等,应该该采用什什么样的的色彩,应应该搭配配什么色色彩才能能最好的的表达出出预想的的内涵呢呢?网页页制作用用彩色还还是非彩彩色好呢呢?根据据专业的的研究机机构研究究表明:彩色的的记忆效效果是黑黑白的33.5倍倍。
16、也就就是说,在在一般情情况下,彩彩色页面面较完全全黑白页页面更加加吸引人人。通常常的做法法是:主主要内容容文字用用非彩色色(黑色),边框框,背景景,图片片用彩色色。这样样页面整整体不单单调,看看主要内内容也不不会眼花花。1.3.11 非彩彩色的搭搭配黑白是最基基本和最最简单的的搭配,白白字黑底底,黑底底白字都都非常清清晰明了了。灰色色是万能能色,可可以和任任何彩色色搭配,也也可以帮帮助两种种对立的的色彩和和谐过渡渡。如果果实在找找不出合合适的色色彩,那那么用灰灰色试试试,效果果绝对不不会太差差。1.3.22. 彩彩色的搭搭配1、一种色色彩。这这里是指指先选定定一种色色彩,然然后调整整透明度度或
17、者饱饱和度,(说得通俗些就是将色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。2、用两种种色彩。先先选定一一种色彩彩,然后后选择它它的对比比色(在phootosshopp里按cttrl+shiift+I)。我我所作的的主页用用蓝色和和黄色就就是这样样确定的的。整个个页面色色彩丰富富但不花花稍。3、用一个个色系。简简单的说说就是用用一个感感觉的色色彩,例例如淡蓝蓝,淡黄黄,淡绿绿;或者者土黄,土土灰,土土蓝。确确定色彩彩的方法法各人不不同,我我们可以以在phhotooshoop里按按前景色色方框,在在跳出的的拾色器器窗中选选择自定义义,然后后在色库中选就就可以了了
18、。4、用黑色色和一种种彩色。比比如大红红的字体体配黑色色的边框框感觉很很跳。1.3.33网页配配色不要将所有有颜色都都用到,尽尽量控制制在三种种色彩以以内。背背景和前前文的对对比尽量量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。 1.4 网网页字体体的设置置1.4.11 字符符集的设设定在查看httml文文件原代代码时,我我们经常常可以在在文件头头和之间间看到这这么一句句代码: 它的作作用就是是告诉浏浏览器:这个HHTMLL文件是是采用ggb23312字字符集制制作的。当当浏览器器读到这这一代码码,便以以gb223122字符集集来解释释和翻译译网页原原代码,然然后我们们就可
19、以以看到正正确的网网页。ggb23312就就是我们们最熟悉悉的GBB简体码码,英文文是isso-888599-1字字符集。其其它还有有BIGG5,UUTF-8,SShifft-JJIS,EUCC,KOOI8-2等字字符集,分分别用于于不同的的字体显显示。1.4.22.字体体的使用用在网页里,字字体的定定义语句句是: 显示文文字其中AAriaal就是是一种字字体的名名称。默认的的浏览器器定义的的标准字字体是中中文宋体体和英文文timmes neww Rooma字字体。也也就是说说,如果果没有设设置任何何字体,或或者浏览览者的操操作系统统没有我我们设置置的字体体,网页页将以这这两种标标准字体体显示
20、。如如果一定定要用一一种特殊殊的字体体来体现现网站的的风格,那那么如何何让大家家可以真真正看到到我们设设计页面面呢?解解决的办办法是:用图片片。将需需要用这这种字体体的地方方用图片片代替,以以保证所所有人看看到的页页面是同同一效果果。1.4.33 字体体的样式式(sttylee)字体的样式式有四种种:正常常体(rreguularr),斜斜体(IItallic),粗体体(Boold),粗斜斜体(BBoldd Ittaliic)。1.4.44 字体体的效果果这里指指通过hhtmll语言设设定可以以直接显显示的效效果,在在htmml里的的语句设设定为: 显示文文字其中,ovverllinee是指上上
21、划线效效果。其其它常用用的效果果还有:undderllinee(下划划线),uppperccasee(大写写)等等。1.4.55 字体体大小的的控制字体大大小的控控制是个个重点。一一般字体体默认的的大小是是12ppt(镑镑),用语语句可以以将文字字增大22pt。现现在网络络上最流流行的小小中文字字体大小小为9ppt。1.4.66网页设设计中字字体的使使用原则则1、不要使使用超过过3种以上上的字体体。字体体太多则则显得杂杂乱,没没有主题题。2、不要用用太大的的字。因因为版面面是宝贵贵,有限限的,粗粗陋的大大字体不不能带给给访问者者更多信信息。 3、不要使使用不停停闪烁的的文字。想想让浏览览者多停
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 中小型企业 网站 设计 制作 37562
限制150内