网页设计与网站建设作业

网页设计与网站建设

—前言

随着计算机网络的迅速发展，Internet已经成为我们生活中不可或缺的重

要组成部分。政府机关通过网站实现电子政务；企业利用网站展示企业形象、推

广产品并进行电子商务活动；个人通过具有独特风格的网站来展示自我。因此，

搭建网站、设计精美的网页来吸引浏览者成为大家共同关注的目标，学校里和社

会上涌现了大量的网页设计爱好者，他们迫切希望尽快学习网页设计与制作的知

识，并将其应用于实践中。

学校网站是学校对外宣传的窗口，也是展示全校师生才能、加强对校外联系、

互相学习、共同发展的阵地。学校网站的建设对促进师生与学校共同发展，建立

内容丰富的网络信息资源，形成开放的资源共享条件，实现教学、科研、管理、培

训的信息化,使校园网站成为信息资源的宝库、学校形象的窗口、网络教育的基

地和师生交流的乐园等有着重要的意义。

二网站制作具体内容

网站开发工具的介绍

主要的使用工具有：Dreanweavercs3、fireworksflash而在此次设计中

主要用到Dreameaver设置首页，编辑功能，排版功能，设计模版功能，插入文

本包括插入文本元素插入图像和图文混排和外部图像的编辑等功能。关于

Dreameaver的插入FLASH功能我用的比较少，在首页的前面里我插入了一副

FLASH,当然还有主页的分页里也插入了FLASHo其中Fireworks的功能我还不

是很了解，我相信我以后会更好的使用它。

Dreameavercs3：

DreamweaverCS3是由Adobe公司在并购Macromedia之后推出的最新版本，它

是一款专业的Web站点开发软件，可用于Web站点、Web页和Web应用程序的设

计、编码和开发工作。在业界通常将Dreamweaver、Flash>Fireworks称为网页

三剑客。

将各种网页制作的相关工具紧密联系起来是Dreamweaver系列的一大亮点，同时

良好的插件体系，使DreamweaverCS3可通过第三方插件进行补充。另外，

DreamweaverCS3还为开发人员提供了动态语言支持与丰富的模板。

DreamweaverCS3在功能强大与易用性之间具有很好的平衡，使用Dreamweaver

CS3可以有效地提高Web开发的工作效率。所以在这次网站中主要设计工具就是

DreamweaverCS3。

Flash:

Flash是FlashMacromedia公司开发的动画编辑工具。1997年推出业内最先

进的互动内容创作环境，用于交互网站、交互数字体验和高冲击力的移动内容的

创作。Flash由macromedia公司推出的交互式矢量图和Web动画的标准。网页

设计者使用Flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。

其中flash的档案格式是“swf”这是一个完整的影片档，无法被编辑。有时会

被念做“swiff"。Swf在发布时可以选择保护功能，如果没有选择，很容易被

别人输入到他的原始档中使用。然而保护功能依然阻挡不了为数众多的破解软

件，有不少囚客专门以此来学习别人的程序代码和设计方式。

"fla”是Flash的原始档，只能用MacromediaFlash打开编辑或Adobe

FlashCS3及更高版本打开编辑。

Actionscript是一种程序语言的简单文本文件.FLASH档案能够直接包含

Actionscript,但是也可以把它存成AS档做为外部连结档案（如定义

ActionScript类则必须在写在as文件里,再通过import加入类），以方便共同

工作和更进阶的程序修改。

Fireworks:

Fireworks是一个强大的网页图形设计工具，你可以使用它创建和编辑位

图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图

象，下拉菜单等，设计完成以后，如果你要在网页设计中使用，你可以将它输出

为html文件,还能输出为可以在photoshop,illustrator和flash等软件中编

辑的格式。这里主要是用［它来制作网页图片。

需求分析

1）选题'风格：

网站的选题：

网站的主题也就是网站的题材，也就是网站的眼睛。网站选题千奇百怪,琳琅满

目，只要想的到，就可以把它制作出来。在这里，我先把我的个人网站归类为“参

考/资讯”这类。因为先归类有利于更好更准确的选出自己想要的主题。

我设计学习网站的主题就是“小学各年级课件汇总”，也就是把我所想的记

录下来并去实现它，当然还有更深层的含意。

网站的风格：

网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一

步。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。在本网站里

主要用到的颜色有：粉红色、蓝色和绿色，网站看上去给人的第一印象就是简洁、

有条理、寓教于乐的这么一个网站。

2）网站说明'网站主要栏目的介绍

在我的网页中，主要是通过首页来实现其他的网页界面。在首页中的主要栏

目有：首页，科目，年级。而各部分是相互链接在一起的。也就是说明了我充分

的运用了DREAMWEAVERCS3的超链接功能。在我的“首页”栏目中主要用到是嵌

入和连接功能，嵌如了一张图片和被连接了一副FLASH,增加了网页的精美效果;

在我的“科目”栏目中主要用到是表格的运用而已；在我的“年级”栏目里，

也简单，没有创意。里面也就小学一到六年级。

小学各年级课件教案习题，课

一年级■二年级I三年缎四年级

语文数学英语一年级下二年级上

科学二年级下三年线上三年级下

科目第及

四年级上四年级下五年级上

五年级下六年级上六年级下

语年级上人教版

O的蝌

I

O汉语拼音

1.aoe

2.iuu

3.bPmf

4.dtnI

5jqx

6.zcs

7.zhchshr

8.aieiui

9.aoouiu

10.ieueer

11.aneninunvn

12angengingong

单元测试

三网站的测试与发布

站点测试：

(1)启动DearmweaverCS3,打开本站点"yang”并对该站点进行测试。

（2）打开文档窗口右侧的“文件”面板，在“视图”下拉列表框中选择“地图

视图”选项，以地图方式显示站点结构。如下图：

C3）单击“展开显示本在和远端站点”按钮同打开站点视图。如下图:

画

index.html

liuybo.html

.故事

f金f-+p

ifii

®►*_index,html:故事.html…-index,html

…

…

.金-+

…

：-

xiezuo.htmlindex,html：xiezuo.html

…

：

惬

田-+

:看s重庆火锅―ffi:--

：index,htmljianli.html:index,htmldream.html

：

㈤唯-

£(±:)-+

『喳,美食介绍...:-

：xiezuo.htmlxiezuo.htmljianli.htmljianli.html

囹

：

唯-

金+

：-

田jianli.html:dream.htmlliuybo.html：dream,html故事.html

唯-

ffi-

由dream.htmlliuybo.html-liuybo.html口©http...le.cn

巴渝人家-.口©http...q.com

®liuybo.html'□©http...g.com

;：留言板.html，口©http..m/pub

力::write.txt

kD0JavascriP--•

javascrip...

（4）返回本地视图，打开站点中任意一个网页文件，选择“文件/检查页面/

检查浏览器兼容性”命令，如下图：

▼结里搜索参考验证浏览器兼容性检查链接和站点托FTP®服务詈历史记巳

行问题浏览器支持i可题

60不支持的值：“1。”不支持的值：“io”二

影响:Firefox1.5;Internet

Explorer6.0,7.0;Internet

ExplorerforMacintosh5.2;

Netscape8.0;Opera8.0,9.0;

Safari2.0▼

在Adobe,com上工与浏览器中的

CSS支持有关阂信算:

(5)“浏览器兼容性检查”提供了3个级别的潜在问题：错误提示、警告提示、

和告知性信息。具体错误需要具体处理。

(6)选择“文件/检查页/链接”命令，检查页面的链接是否正确。

(7)选择“站点/报告