任磊论文改后稿 - 图文

更新时间:2023-03-08 05:14:45 阅读量: 综合文库 文档下载

说明:文章内容仅供预览,部分内容可能不全。下载后的文档,内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的,是否完整无缺。

安徽广播电视大学

毕业论文

“我们的合肥”网站的设计与制作

姓 名 任 磊

专 业 计算机网络技术 指导教师 马 宁

2010年12月

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

摘 要

在网络越来越接近我们生活的当今社会,Internet的应用已普及到了人们生活与工作的各个层面。网页作为一个宣传企业和展示自我的平台,其重要性也越来越受到人们的关注。因此网页制作业逐渐发展成为一种职业。目前用于网页制作的的软件非常多,但根据多位网页制作者多年的经验,Dreamweaver+Photoshop+Flash无疑是制作网页的最强组合,它们在制作网页效果图、制作网页动画,以及制作Web格式的页面中担任着重要的角色。随着Adobe公司发布的CS3系列设计软件的出现,Dreamweaver与Photoshop、Flash的结合更加紧密,使用更加方便。熟练地使用这三种设计软件,可以大大提高网页设计和制作的效率,以便制作出精美的网页。

商业网页是企业向用户和网名提供产品和服务的一种方式,是企业开展电子商务的基础设施和信息平台,其网页页面由具体的文字(标题、广告语、单位名称、Email地址等)、企业标志、商标、产品图形、和信息菜单等内容组成,这些元素的不同展现影响到读者的视觉习惯和心理变化。本文将对一个小型企业设计一个网页,以展现企业形象、介绍产品和服务、体现企业的发展战略。

关键词:网站设计;网页制作;Dreamweaver;Photoshop;Flash

- 1 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

目 录

前言: ................................................... 4 一、网站的主题 ............................................ 5 二、网站的总体规划......................................... 5 2.1预早筹划、目标明确、定位正确 .................................5 2.2主题鲜明、富有特色、尽量精简 .................................6 2.3善用图像、尽量简朴 ...........................................6 三、网页风格布局的设计 ..................................... 7 四、网站制作过程中主要用到的开发工具......................... 8 4.1 Macromedia Dreamweaver 8.....................................8 4.2 Adobe Photoshop CS3..........................................9 4.3 Adobe Flash CS3.............................................10 五、典型网页的设计过程与详例 ............................... 11 5.1典型网页的设计过程 .................................... 11 1.需求分析 ...................................................11 2.制作页面效果图 .............................................11 3.制作Flash动画 .............................................11 4.切图 .......................................................11 5.制作静态Web页面 ...........................................12 6.添加程序 ...................................................12 7. Web站点的发布、推广和维护.................................12 5.2典型网页的设计详例 .................................... 12 1.定义站点 ...................................................12 2.文件夹的设置 ...............................................13 3.设置页面属性 ...............................................13 4.页面的布局与色调 ...........................................14 六、网站的测试与发布 ...................................... 29 6.1网站测试 ....................................................30 1.测试的内容: ................................................30 2.运用Dreamweaver提供的站点报告测试功能 ......................30 6.2 使用LeapFTP将静态网页设计课程网站发布到服务器上............30 6.3网站维护 ....................................................31

- 2 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

总结............................................................31 参考文献........................................................31

- 3 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

前言

因特网正在改变世界,由于因特网具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点,在全球编制出了一张巨大无边的无形网络,涵盖了我们生活中的各个方面,已经发展成为了人们生活、学习、商务必不可少的部分。与此同时这张网中的重要组成部分网站,就仿佛这张网中的血液骨骼,也日新月异的成长发展着。

近几年来,网页设计技术一直在推陈出新.不断有新技术被推出并应用,实在令人眼花缭乱.这些网页设计技术可以分为静态网页技术和动态网页技术两种. 静态网页技术一般是指HTML和CSS技术.采用静态网页技术的网页只能在网页中展示文字和图片,但它却是所有网页设计的基础技术。动态网页技术是指让网页能够按照用户的需求做出动态响应的技术,例如JavaScript , VBScript及ASP等技术都属于动态网页技术的范畴. 目前,大部分制作网页的方式,都是运用网页设计软件,这些软件的功能相当强大,使用非常方便.不论是那一种网页设计软件,最后都是将所设计的网页转化为HTML,CSS,JavaScript/VBScript和ASP。

网页设计是指使用标识语言(markup language),通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输,最终以图形用户界面(GUI)的形式被用户所浏览。简单来说,网页设计的目的就是产生网站,什么是网站呢,就是服务器内的一系列网页的组合,终端用户发出请求后[[服务器通过传输特定的网页向用户传输所需的信息。简单的信息如文字,图片(GIFs, JPEGs,PNGs)和表格,都可以通过使用HTML/XHTML/XML放置到网站页面上。而更复杂的信息如vector graphics,动画,视频,声频则需要插件程序例如Flash, QuickTime, Java run-time environment,等等,这些插件程序也是通过HTML/XHTML/XML植入网页的。

随着浏览器和W3C标准一致性的改善,XHTML/XML(可扩展标识语言)与CSS(层叠样式表)共同用作网页内容的设计已经被广泛的接受和使用。最新的标准和建议则是朝着浏览器的能力扩充和改善发展,使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。

通常,网页可以分为静态网页和动态网页。静态网页页面上的内容和格式一般不会改变,只有网管可根据的需要更新页面。动态网页的内容随着用户的输入和互动而有所不同,或者随着用户,时间,数据修正等而改变。网页上的内容也可以由用户通过使用客户端描述语言(JavaScript, JScript, Actionscript,)来改变。当然更普遍的是由服务器端的描述语言(Perl,PHP, ASP, JSP, ColdFusion, 等)进行编译,从而对动态网页的内容进行改变。无论是客户端还是服务器端的改变都需要使用较为复杂的应用软件。

- 4 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

一、网站的主题

本网站的主题是从合肥的概况、历史、文化、科教等各方面的视角全方位的展示了合肥的悠久历史与文化底蕴;以及新时代大建设大发展过程中展现出的蓬勃朝气与风采。

网站以“我们的合肥我们的家”命名,给大家更加情切的感觉,给了那些希望走进合肥、了解合肥,喜爱合肥的朋友们一个了解合肥的平台。网站板块分为:走进合肥、合肥文化、合肥历史、合肥美景、合肥科教五大板块。其中

走进合肥板块分为:地理位置、行政区划、民族人口、自然气候、市树市花等几方面介绍了合肥的概括。

合肥文化板块分为:地名由来、古今名人、文化艺术、民俗风情、历史流痕等几方面介绍了合肥在文化发展过程中的历程。

合肥历史板块分为:城市由来、历史沿革、城址变迁等几方面介绍了合肥的悠久历史。

合肥美景板块分为:古刹寺庙、自然景观、人文景观、社会景观等几个方面介绍了合肥优美的景色。

合肥科教板块分为:科教创新、科教城市、合肥职教城、合肥高校、合肥大学城等几方面介绍了合肥的科教城市的美誉。

二、网站的总体规划

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 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

源(采样点),就好像

Word有多个剪贴版内容一样。另外克隆源可 以进行重叠预览,提供具体的采样坐标,可以对克隆源进行移位缩放、旋转、混合等编辑操作。克隆源可以是针对一个图层,也可以是上下两个,也可以是所有图 层,这比之前的版本多了一种模式。

8、在Adobe Bridge的预览中可以使用放大镜来放大局部图像,而且这个放大镜还可以移动,还可以旋转。如果同 时选中了多个图片,还可以一起预览,真是酷毙了。

9、Adobe Bridge添加了Acrobat Connect功能,用来开网络会议的,前身是Macromedia的降将Breeze。

10、Bridge可以直接看Flash FLV格式的视频了,另外Bridge启动感觉好快,比CS2和CS两个版本都要快,没有任 何拖累感和“死机感”。

11、在Bridge中,选中多个图片,按下Ctrl+G可以堆叠多张图片,当然随时可以单击展开,这个用来节省空间

12、新建对话框添加了直接建立网页、视频和手机内容的尺寸预设值。比如常用的网页Banner尺寸,再比如常见的手机屏幕尺寸等等

3、 Adobe Flash CS3

Adobe Flash(原称Macromedia Flash,简称Flash;前身FutureSplash),是 美国 Macromedia公司(现在已被Adobe公司收购)所设计的一种二维动画软件。通常包括Macromedia Flash,用于设计和编辑Flash文档,以及Adobe Flash Player,用于播放Flash文档。被大量应用于因特网网页的矢量动画文件格式。使用向量运算(Vector Graphics)的方式,产生出来的影片占用存储空间较小。使用Flash创作出的影片有自己的特殊档案格式(swf)。该公司声称全世界97%的网络浏览器都内建Flash播放器(Flash Player)是Macromedia提出的“富因特网应用”(RIA)概念的实现平台

Flash软件可以实现多种动画特效,动画都是由一帧帧的静态图片在短时间内连续播放而造成的视觉效果,是表现动态过程、阐明抽象原理的一种重要媒体.使用设计合理的动画,不仅有助于学科知识的表达和传播,使学习者加深对所学知识的理解,提高学习兴趣和教学效率,同时也能为课件增加生动的艺术效果,特别对于以抽象教学内容为主的课程更具有特殊的应用意义

Flash是一种平面动画制作软件,非常适合制作网页动画,是目前网络动画制作的主流工具。Flash在Web上大量应用的一个重要原因在于它采用矢量格式保存动画,动画体积小、适于在网络上传输。同时Flash具有跨平台特性,具有很强的交互性。本知识点要求掌握的知识包括:Flash的特点、主要组件及其功能、工具箱中工具的用法、Flash制作动

- 10 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

画的基本方法。Flash的重要组件包括:舞台、图层、时间轴、帧、播放头、调色板、属性面板、库等。工具箱中比较重要的工具包括:选择工具、矢量图绘制工具、调色工具、任意变形工具、填充变形工具、滴管工具等等。对于这些重要的工具,从功能到用法都需要掌握,并能灵活运用。

此外,读者还要了解Flash作品的发布方法,发布的文件格式,了解Flash的一些基本参数,比如Flash默认每秒钟播放12帧,这个帧频非常适合网络动画,而Flash的帧频设置范围为0.1~120。

五、典型网页的设计过程与详例

一、典型网页的设计过程

1、需求分析

需求分析是制作一个网站的第一步。在制作网站之前,首先要了解客户的需要和要求。这些必要的信息包括客户所要表达的理念、界面显示的内容和栏目的要求、网站功能方面的要求等。根据客户的具体情况,需求也会有所差别。

2、制作页面效果图

制作页面效果图的目的是向客户展示页面的显示效果,以便客户对页面设计提出具体的修改意见。使用效果图的好处在于便于修改,并且方便直观。常使用到的软件是Photoshop和Fireworks,本文以Photoshop为主。

3、制作Flash动画

在网页中使用的多媒体内容主要为Flash动画。因为Flash动画内容可以在页面中直接使用,而其他的多媒体内容都需要在客户端安装相应的播放器来支持。

4、 切图

在制作静态网页之前,要对效果图进行切片。目的主要是制作页面中使用的修饰图片。主要工具是Photoshop。

- 11 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

5、制作静态Web页面

静态网页是实际存在的,无需经过服务器的编译,直接加载到客户浏览器上显示出来。静态页面需要占一定的服务器空间,且不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改。制作静态页面通常使用的软件是Dreamweaver。一般是HTML页面,文件的后缀名为.html。

6、添加程序

添加程序的目的是使页面能够和服务器中的资源进行交互,一般要涉及对数据库的操作。根据使用的程序语言不同,网页中的使用程序可以分为ASP程序、ASP.NET程序、JSP程序、PHP程序等。

7、 Web站点的发布、推广和维护

客户对网页的所有功能和页面都确认后,就可以正式发布制作好的站点了。网站的推广和维护也是网站建设中相当重要的部分。针对站点的性质和不同的需求,推广和维护的方法也不尽相同。其中推广的方法包括百度等搜索引擎上的推广、相关论坛推广、邮件推广等。维护需指定专业人士来做定期的维护。

二、典型网页的设计详例

1、定义站点

1、 在任意一个根目录下创建好一个文件夹(我在制作过程中创建在g盘),如取名为ourhefei。备注:网站中所用的文件都要用英文名。

2、打开Dreamweaver,选择“站点—管理站点”,打开对话框,单击“管理站点”对话框中的“新建”按钮,弹出“站点”按钮,单击“站点”命令如图5-1。在站点名称中输入网站的名称(可用中文),在本地根文件夹中选择刚才创建的文件夹(g:\\ourhefei)。然后确定即可。

- 12 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

图5-1站点定义1

备注:再次打开Dreamweaver,会自动找到刚才设立的站点。如果有多个站点,可以在菜单“站点—打开站点”中去选择。

2、文件夹的设置

1. 在网站根目录中开设images 一个子目录,根据需要再开设images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志、banner 条、菜单、按钮等等。为节约时间并且文件数不是很多的话可以将其它的文件和images文件夹放在一个文件夹里。我就是用的这种方法;如果文件数多,为了以后更好的查找文件应该再建三个文件夹common、temp、media。common 子目录中放css、js,、php、include 等公共文件;temp 子目录放客户提供的各种文字图片等等原始资料;media 子目录中放flash, avi, quick time 等多媒体文件 。

2. 文件数量不多,可以将所有的文件都和images放在同一文件夹里;文件数量比较多了,原则上就应该在根目录中按照首页的栏目结构,给每一个栏目开设一个目录,根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件,如果这个栏目的内容特别多,又分出很多下级栏目,可以相应的再开设其他目录。

3、设置页面属性

1、设置页面属性

- 13 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

选择菜单栏中的“修改>页面属性”命令,如图5-2所示属性面板中的“页面属性”按钮。打开“页面属性”对话框。

5-2 属性面板

2、设置外观。“外观”是设置页面的一些基本属性。我们可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等。如图5-3。

图5-3 外观属性

四、页面的布局与色调 1、首页的布局与色调

首页分为上中下三个部分,最上部为网站的LOGO和网页导航条以及当前的详细时间。中部为彩色图片,图片的主旨在于表现合肥这座城市的特点,色彩上基本采用红黄蓝三原色的基调,表现出合肥的自然、清新和热情。下部为版权信息,为制作者的联系方式个人信息等等。

- 14 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

设置代码如下:

2、二级页面的布局与色调

二级页面分为上中下三个部分,最上部为网站的LOGO名称的FLASH动画和网页导航条。左中部为板块的名称以及分支板块的名称。右中部为各版块的详细内容,其中包括彩色图片,文字以及FLASH动画。主旨在于详细的介绍合肥各方面的风采。色彩上同样基本采用红黄蓝三原色的基调,但是与首页的色彩搭配有所不同,二级页面在色彩上主要以枚红色为主题,给人情切温暖的感觉。版面下部为版权信息,为制作者的联系方式个人信息等等。

- 15 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

设置代码如下:

走进合肥

- 18 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

WIDTH=950

BORDER=0

align=\

CELLPADDING=0

CELLSPACING=0

background=\

height=\

COLSPAN=2

align=\

classid=\

codebase=\=7,0,19,0\

pluginspage=\type=\

quality=\

- 19 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

align=\cellpadding=\cellspacing=\bordercolor=\bgcolor=\

height=\

background=\

class=\align=\href=\target=\class=\合肥美景

background=\

class=\

align=\href=\target=\class=\合肥百科

class=\

    

background=\

class=\走进合肥

肥首页 >>走进合肥

- 20 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

width=\




cellspacing=\

 


  合肥概况

合肥,安徽省省会,位于安徽中部,长江淮河之间、巢湖之滨,通过南淝河通江

达海,具有承东启西、接连中原、贯通南北的重要区位优势,是全省政治、经济、文化、信息、金融和商贸中心,全国重要的科研教育基地,国家级皖江城市带承接产业转移示范区的核心城市。

 

align=\

valign=\

cellSpacing=\

cellPadding=\

- 22 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

别名: height=\class=\庐州、庐阳、合淝height=\class=\行政区类别:省会 height=\class=\所属地区:安徽省 height=\class=\下辖地区:个市辖区,3个县- 23 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

height=\class=\平方公里人口:

- 24 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

align=\

valign=\

万(2008

cellSpacing=\

cellPadding=\

- 25 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

height=\class=\车牌代码:皖A 市树: 广玉兰 市花: height=\class=\桂花、石榴花市鸟: 喜鹊 高校: height=\class=\安徽大学,中科大,合- 26 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

width=\

height=\

width=\

align=\border=\

valign=\align=\

background=\cellpadding=\

width=\

height=\

align=\

valign=\

background=\class=\href=\

target=\地理位置

- 27 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

width=\

height=\

align=\

href=\

background=\class=\

target=\行政区划

width=\

height=\

align=\

href=\

background=\class=\

target=\民族人口

- 28 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

height=\

colspan=\

align=\

QQ:35919147

class=\class=\

EMAIL:MOKA9291@SINA.COM.CN  

    COPYRIGHT@2010 RENLEI ALL RIGHTS
 

 

POWERED

BY:

class=\

WWW.OURHEFEI.COM

 

六、网站的测试与发布

- 29 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

1、网站测试

网站测试:网站发布之前,通常都会检查网页在不同版本浏览器下的显示情况。尤其是制作大型的或访问量高的网站,这个步骤十分必要。由于各种版本的浏览器支持的HTML语言的版本不同,所以要让网页能够在大多数浏览器中顺利显示,就不得不做尽可能仔细的检查,必要时还得舍弃一些较新的效果。

(一).测试的内容:

(1)确保页面在目标浏览器中能够如预期的那样工作,并确保这些页面在其他浏览器中要么工作正常,要么“明确地拒绝工作”。

(2)应尽可能多地在不同的浏览器和平台上预览页面。

这使您有机会查看布局、颜色、字体大小和默认浏览器窗口大小等方面的区别,这些区别在目标浏览器检查中是无法预见的

(3)检查站点是否有断开的链接,并修复断开的链接。 (4)监测页面的文件大小以及下载这些页面所占用的时间 (5)运行一些站点报告来测试并解决整个站点的问题。 (6)检查您的代码中是否存在标签或语法错误

(二).运用Dreamweaver提供的站点报告测试功能

Dreamweaver提供的站点测试功能可以帮助我们检测网页在六种不同版本的常用浏览器中的支持情况,最后还会自动生成一份报告。

若要运行报告以测试站点,请执行以下操作: (1)选择“站点”—>“报告”,出现“报告”对话框。

提示:若要仅为站点运行辅助功能报告,可以选择“文件”—>“检查页”—>“检查辅助功能”,报告将出现在“结果”面板组的“站点报告”面板中。

(2)选择要报告的类别和要运行的报告类型。

(3)单击“运行”,创建报告。 结果列表出现在“站点报告”面板(在“结果”面板组中)中。 根据运行的报告的类型,可能会提示您保存文件、定义站点或选择文件夹(如果尚未执行这些操作)。

2、使用LeapFTP将静态网页设计课程网站发布到服务器上

网页检测完以后就可以发布到服务器上了。发布可以使用专门的FTP工具,也可以充

- 30 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

分利用Dreamweaver的网页发布功能。常用的FTP工具软件有LeapFTP、CuteFTP等,大家可以根据自己的爱好选择。如果你没有自己的服务器,就可以到互联网上申请免费空间或购买空间,这里我们可以使用操作简单的LeapFTP工具发布网页。

(一)、启动LeapFTP,如下图所示:

2)输入FTP服务器地址、用户名和密码,端口号默认为21,回车,账号和密码正确,系统会显示登录成功信息:

3)在LeapFTP左边找到我们做好的精品课程网页,将其拖放放到右侧的服务器文件中,网页就开始发布了。

4)等所有资料(网页、图片文件夹及相关文件)上传完毕,就完成了网页发布。 5)打开自已的浏览器,输入http://192.168.67.4/html,访问一下,如果能正确显示我们做的页面效果,网站就发布成功了。

3、网站维护

网页制作好了,也上传到服务器上了,是不是以后就没什么事了?并非如此,如果参观网站的访问者每次看到的网站都是一样的,那么它们日后就会渐渐失去兴趣。所以网站日后的更新维护才是最重要的!更新维护不仅仅只局限于简单的更换文字稿,有时会是网站框架的变更,板块的调整,色彩的更换等,甚至整站改版等,站在网络技术角度看,还会存在一些网页安全问题,这就是网站维护,修改好的内容再用步骤二的方法,将新的内容发布到服务器上。

结束语

经过老师耐心细致的指导,及同学之间的相互交流,同时翻阅了大量的资料(包括网上资料,书本及学校的一些相关资料)经过近一段时间的努力,个人网站的设计制作告一段落。总结这次“个人网站”开发制作过程,我们综合使用了目前因特网上比较流行的各种静态制作方法及交互式动态网站的制作设计手段,并对初步利用后台程序完成了网站的动态响应与生成网页的技术。同时也从中学习了对静态页面的处理风格,色彩搭配,页面导航方面有了一定经验。

目前网站的制作技术与要求,都已经告别了因特网初期网站制作的“幼稚”期,随着各类网站的迅速增加与浏览者需求的提高,无不要求网站从立意,策划,页面设计到后台程序的全面提高。无论是个人网站还是企业网站都必须被要求从浏览者角度出发,最大限度的满足用户的要求,这也是以后各类网站发展竞争的真正实质所在。

本次设计由于设计时间较紧,且相关模块比较多,加之设计经验的不足,在网站的整体设计及各模块功能可能设计的不完全,有待于进一步的完善和改进。

- 31 -

安徽广播电视大学开放教育专科计算机网络技术专业毕业论文

参考文献

[1]吴涛主编,网站全程设计技术(修订本),北京:清华大学出版社;北京交通大学出版社,2006.7

[2]龙马工作室编,ASP+SQL Server组建动态网站实例精讲,北京:人民邮电出版社,2004.8 [3] 赵增敏编,ASP动态网页设计,电子工业出版社,2003.8 [4] 任学文、范严编, 网页设计与制作,中国科学技术出版社,2006.8 [5] 武创、王惠,网页设计探索之旅 ,电子工业出版社,2006.9 [6] 杜巧玲等编, 网页设计超级梦幻组合,清华大学出版社, 2003.3 [7] 吴黎兵、罗云芳编,网页设计教程, 武汉大学出版社,2006.2 [8] 庄王健编,网页设计三剑客白金教程,电子工业出版社,2006.01

- 32 -

本文来源:https://www.bwwdw.com/article/8ab.html

Top