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