安徽广播电视大学开放教育专科计算机网络技术专业毕业论文
一、网站的主题
本网站的主题是从合肥的概况、历史、文化、科教等各方面的视角全方位的展示了合肥的悠久历史与文化底蕴;以及新时代大建设大发展过程中展现出的蓬勃朝气与风采。
网站以“我们的合肥我们的家”命名,给大家更加情切的感觉,给了那些希望走进合肥、了解合肥,喜爱合肥的朋友们一个了解合肥的平台。网站板块分为:走进合肥、合肥文化、合肥历史、合肥美景、合肥科教五大板块。其中
走进合肥板块分为:地理位置、行政区划、民族人口、自然气候、市树市花等几方面介绍了合肥的概括。
合肥文化板块分为:地名由来、古今名人、文化艺术、民俗风情、历史流痕等几方面介绍了合肥在文化发展过程中的历程。
合肥历史板块分为:城市由来、历史沿革、城址变迁等几方面介绍了合肥的悠久历史。
合肥美景板块分为:古刹寺庙、自然景观、人文景观、社会景观等几个方面介绍了合肥优美的景色。
合肥科教板块分为:科教创新、科教城市、合肥职教城、合肥高校、合肥大学城等几方面介绍了合肥的科教城市的美誉。
二、网站的总体规划
1、预早筹划、目标明确、定位正确
设计主页未必很艰难。但这一工作与编制传统的宣传品一样,都需要我们谨慎处理和筹划。换言之,我们必须首先 确定自己需要传达的主要信息,然后细意斟酌、把所有意念合情合理地组织起来;之后是设计一个页面式样,试用于有代表性的用户,接着重复修订,务求尽善尽美。网页的设计是网页的重要组成部分。要将网站作为在因特网--这个新媒体平台,明确设计站点的目的和用户需求,是重要的必不可少的。结合设计者表达目的与受众群体需求的平衡,从而作出切实可行的计划。挑选与锤炼的关键信息,利用一个逻辑结构有序地组织起来,开发一个页面设计原型,选择用户代表来进行测试,并逐步精炼这个原型,形成创意。
分析有些网站的效果不如预想的好,主要原因是对用户的需求理解有偏差,缺少用户的检验造成的。设计者常常将主观目标放在首位,而对用户和潜在的用户的真正需求了解不多。所以,网站应清楚地了解本网站的受众群体的基本情况,如受教育程度、收入水平、
- 5 -
安徽广播电视大学开放教育专科计算机网络技术专业毕业论文
需要信息的范围及深度等,从而能够有的放矢。
2、主题鲜明、富有特色、尽量精简
在目标明确的基础上,完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位,规划网站的组织结构。
Web站点应针对所服务对象(机构或人)不同而具有不同的形式。有些站点只提供简洁文本信息;有些则采用多媒体表现手法,提供华丽的图像、闪烁的灯光、复杂的页面布置,甚至可以下载声音和录像片段。最好的Web站点将把图形图像表现手法与有效的组织与通信结合起来。
要做到主题鲜明突出,力求简洁,要点明确,以简单明确的语言和画面告诉大家本站点的主题,吸引对本站点有需求的人的视线,对无关的人员也能留下一定的印象。对于一些行业标志和公司的标志应充分加以利用。 调动一切手段充分表现网站的个性和情趣,突出个性,办出网站的特色。
主页的作用好比一本书的封面,是为了吸引用户测览你的网址内容。因此,主页的设汁应以醒目为上、令人一目了然。切勿堆砌太多不必要的细节,或使画面过于复杂。在主页上清楚列出三项要点,例如机构名称、提供的产品或服务 、以及主页内容(亦即你的其他页面还载有什么资料)。应切记页面给人的第一观感最为重要。在网上到处浏览的人很多。如果你的主页真没有吸引力,很难令他们深入观赏。
3、善用图像、尽量简朴
用户在网上四处漫游,你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力,所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款,使其别具特色,令人过目不忘。图像的内容应有一定的实际作用,切忌虚饰浮夸。最佳的图像应集美观与传讯于一身。注意图画可以弥补文字之不足,但并不能够完全取代文字。很多用户把浏览软件设定为略去图像,以求节省时间他们只看文字。因此,制作主页时,必须注意将图像所带的重要信息或联接其他页面的指示用文字重复表达—次。用“纯文中”模式测试已制成的主页,确保其传达到所有信息。
现今大部分用户那是用调制解调器接驳万维网,所以他们一般都要花很多时间等待主页传送到自己的系统。主页上的图形应力求简朴, 避免耽搁用户的时间。图像愈大、颜色愈深,传送页面的时间愈长。这并不是说你要完全略去图像不用,只是提醒你要注注意使用图像所引起的效果。主页上的颜色最好不超过六十四种,页顶图像最好保持在大约10KB(千字节)以下。切勿禁不住诱惑,觉得非要放入大幅的图画不可;应考虑只用三两幅短小精悍的图像。主页整体上要能够迅速传送。如果载入的时间超过十至十五秒,很多用户
- 6 -
安徽广播电视大学开放教育专科计算机网络技术专业毕业论文
就会等得不耐烦。如果情况许可,最好先测试你的主页在稍差的条件下的传送速率,14.4千波特的调制解调器,或透过 Prodigy 等网上服务接驳万维网等。
此外、还须注意配合最低档的设备,例如标准的小型显示器,不要假设人人都用高解像度的大荧幕。运用先进浏览软件所提供的一些尖端功能是可以的、但应确保你的主页在次一级的浏览软件上(例如某些网上服务所提供的专用浏览软件)仍可畅顺地显现。
三、网页风格布局的设计
风格一词在词典上的解释是“气度、作风;某一时期流行的一种艺术形式”。具体到网页设计的基础上,网页设计师的风格就是在运用自己的所拥有的手段,包括所拥有的审美的素质、应用软件的能力、以及感受生活的敏锐的觉察力,来建立起自己独特的设计形式、独特的作风。从这个概念出发,设计师就应该有自己的风格。
在网络如此发达的今天,网页也是五花八门,千奇百怪,但是作为一个设计师的地位还没有得到应有的提升,造成今天的网页设计师的风格没有真正的得以体现,使网页的设计在一个低层次的水平上重复。同时由于大家的相互“借鉴”,使网页的页面布局基本上成了某种约定俗成。这样的直接后果是网页作为新的媒体,本应该是方便人们的使用为目标的,却有很多的地方不能够使人满意,而这些不令人满意的地方却原封不动的保留了下来,有些是功能上的,例如在按钮或者是导航的设置上,有些形成了常规的按钮安排方式是令人不方便的。同样在一些用色的规范或者是其它元素的应用限制了设计师作用的发挥,造成了这样的僵化模式。所以在这个新的时代,急切的呼唤具有自己的风格的设计师来作出一些更好更方便的网页来。
本网站首先采用PHOTOSHOP制作了效果图片,进行裁切后保存为WAB格式。再利用DW导入后进行网页的编辑和排版。整体网页采用表格方式进行定位,表格边框宽度值为950像素,这样的优点可以根据不同用户的不同浏览器以及分辨率随时调整网页内容,同时浏览者也看不到表格线。我使用的是首页与二级页面风格布局差异化的设计,首页以图片和文字结合导航条链接组成一个整体画面,色调上主要为三原色红黄蓝的渐变风格,主旨在于表现合肥城市的生机勃勃、兴兴向荣。首页的风格布局仿佛一扇大门,点击各个链接进入二级页面,风格一变别有洞天。页面布局发生了改变。内容主要有七大部分:走进合肥、合肥文化、合肥历史、合肥美食、合肥科教。其中每个栏目下面都还有分支分类,每个分类都有对应的图片或是文字等相关信息。页面布局结构最上部为一幅宽度与网页宽度相同的FLASH动画,画面背景为合肥天鹅湖畔景色,配以滑动的线条和网站名称和LOGO的动画。左下部为各个分类的别表,不同的板块有不同的分类。右下部为各分类的内容,主要以文字、动画、文字组成,色调分明一目了然。
- 7 -
安徽广播电视大学开放教育专科计算机网络技术专业毕业论文
四、网站制作过程中主要用到的开发工具
本网站制作规程主要使用的软件: Macromedia Dreamweaver 8.0 Macromedia Flash MX 2004 Adobe Photoshop CS3
1、 Macromedia Dreamweaver 8
Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件,随着Dreamweaver 8的发布,更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身,具有可视化、支持多平台和跨浏览器的特性,是目前网站设计、开发、制作的首选工具。 1、灵活的编写方式
Dreamweaver具有灵活编写网页的特点,不但将世界一流水平的“设计”和“代码”编辑器合二为一,而且在设计窗口中还精化了源代码,能帮助用户按工作需要定制自己的用户界面。
2、可视化编辑界面
Dreamweaver是一种所见即所得的HTML编辑器,可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写,同时亦保证了其专业性和兼容性,并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面,Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。
3、功能更多的CSS支持——CSS可视化设计、CSS检查工具 4、动态跨浏览器验证
当保存时系统自动检查当前文档的跨浏览器有效性,可以指定何种浏览器为测试用浏览器,同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。
5、强大的WEB站点管理功能 6、内建的图形编辑引擎 7、Dreamweaver的集成特性
Dreamweaver 8继承了Fireworks、Flash和Shockwave的集成特性,可以在这些Web创作工具之间自由地切换,轻松地创建美观实用的网页。
8、丰富的媒体支持能力
- 8 -
安徽广播电视大学开放教育专科计算机网络技术专业毕业论文
可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒体。Dreamweaver具有强大的多媒体处理功能,在设计DHTML和CSS方面表现得极为出色,它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。
9、超强的扩展能力
Dreamweaver还支持第三方插件,任何人都可以根据自己的需要扩展Dreamweaver的功能,并且可以发布这些插件。
2、 Adobe Photoshop CS3
Adobe Photoshop是公认的最好的通用平面美术设计软件。由Adobe公司开发设计。其用户界面易懂,功能完善,性能稳定,所以,在几乎所有的广告、出版、软件公司,Photoshop都是首选的平面工具。
Photoshop的专长在于图像处理,而不是图形创作。有必要区分一下这两个概念。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果,其重点在于对图像的处理加工;图形创作软件是按照自己的构思创意,使用矢量图形来设计图形,这类软件主要有Adobe公司的另一个著名软件Illustrator和Micromedia公司的Freehand。
Photoshop CS3 新增的特性及功能:
1、Photoshop CS3最大的改变是工具箱,变成可伸缩的,可为长单条和短双条。 2、工具箱上的快速蒙版模式和屏幕切换模式也改变了切换方法。
3、工具箱的选择工具选项中,多了一个组选择模式,可以自己决定选择组或者单独的图层。
4、工具箱多了快速选择工具Quick Selection Tool,应该魔术棒的快捷版本,可以不用任何快捷键进行加选, 按往不放可以像绘画一样选择区域,非常神奇。当然选项栏也有新、加、减三种模式可选,快速选择颜色差异大的图像会非常的直观、快捷。
5、所有的选择工具都包含重新定义选区边缘(Refine Edge)的选项,比如定义边缘的半径,对比度,羽化程度等等,可以对选区进行收缩和扩充。另外还有多种显示模式可选,比如快速蒙版模式和蒙版模式等,非 常 方便。举例来说,您做了一个简单的羽化,可以直接预览和调整不同羽化值的效果。当然,选择菜单里熟悉 的羽化命令从此退出历史舞台。
6、调板可以缩为精美的图标,有点儿像CorelDraw的泊坞窗,或者像Flash的面板收缩状态,不过相比之下这个更酷,两层的收缩,感觉超棒!
7、多了一个“克隆(仿制)源”调板,是和仿制图章配合使用的,允许定义多个克隆
- 9 -