Web 个人网页设计实验报告（5篇）

第三篇：网页设计实验报告

网页设计实验报告

本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法；了解网页设计制作过程通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。

1.课程设计题目

跑车世界，为了拉近人们与高端汽车的距离，让人们更加的了解它们，我收集了一些关于汽车的知识，并通过网页的形式展现在人们面前.2.总结

在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。通过这次网页课程设计激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说，整个学期的学习过程，我学会了很多知识，在设计网页的这几天里，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！做好页面，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好，页面过于简单，创新意识反面薄弱，这是我需要提高的地方。需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。总体来说，通过这次的对网页课程设计，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。感谢老师、同学在这次课程设计中给我的帮助、指导

第四篇：2009-2010-1网页与Web程序设计实验报告

武汉大学计算中心2007年5月

《网页与Web程序设计》实验报告

年级：2008级（必修）

学号：20080307703117姓名：郝嫚专业：金融管理与实务3班

一、实验题目

分析或参考给定的“网站设计实例”，设计一个自选题材的网站。

说明：

1．自行设计的网站可以只包含静态网页（.htm），也可以包含动态网页(.asp)。

2．站点至少要有三层结构，页面数5页左右；网页要有落款、版权说明。网站大小不要超过10MB。

3．在网站制作过程中或完成后，填写下面“

五、实验步骤”里的省略号部分。

二、实验目的和要求

通过以前各章的学习和实验，同学们已经了解和初步掌握一系列的网页与Web程序设计技术。本实验能使大家对网站设计的全过程，有一个更加完整的概念，熟练掌握网站设计工具“网页设计三剑客”。具体要求如下：

1．自选题材，主题内容要合法、健康、实用。网站主题突出、内容丰富。

2．自己动手独立完成网站设计。可以借鉴和模仿某个网站进行设计与制作，但不可以从网上下载网页直接上交。

3．站点应当设计合理，结构分明，管理有序，无多余文件和文件夹，大小合适。文件和文件夹存放位置要正确，首页文件名应该使用index.htm、index.asp、default.htm或default.asp。其他文件或文件名命名也要规范，不宜使用汉字或带有空格的名称。

4．网站风格统一，设计适合于主题的LOGO（徽标），或者标题图片及动画。各页面设计合理、美观，有创意。不要太花哨或太孩子气，不要只是各种元素的随意拼凑。图片和动画选用要适合主题，不要在网页中插入不相干的图片，图片保存格式和图片大小要合适。要适用于各种显示器的分辨率，不要太宽，否则在显示器分辨率较小时会出现水平滚动条。

5．各个页面之间的链接要合理有效，路径要正确（使用相对路径）。要合理使用css样式，不要在各个页面中重复定义相同的css样式；应该将css样式存放到css文件中，然后附加即链接到各页中。代码结构清晰，无垃圾代码。

三、实验方法

网站设计的一般过程或方法如下：

1．确定主题和收集资料

自行选定所要设计的网站主题和栏目，收集有关图文、数据等资料，经过分析，初步确定网站的基本功能、结构或三级目录。

2．规划网站和新建站点

在需求分析的基础上，画出网站的树型目录结构图，从网站根文件夹，子文件夹到文件名。首页文件名如index.htm，应该放在网站根文件夹里。根据Windows的“管理工具”中是否已安装IIS，用Dreamweaver 8，在C:Inetpubwwroot或者D:里，新建站点，即根文件夹，子文件夹或文件名。随时在U盘上做好备份。

3．制作素材和单个网页

用“网页设计三剑客”自行制作或者收集网站要使用的小图片、动画、音频或视频，制作单个网页文件及其链接，以及按需要建立数据库。按照规划，一一放在网站的相应子文件夹里。

4．制作首页和建立链接

制作首页，并且建立与下一级网页的链接（若受网站大小限制且超过5页，则可建立必要的空连接）。

5．调试运行

可以边设计边调试，也可以边调试边修改前面的设计。然后，正式运行和提交网站。

四、实验环境

微机 + Windows操作系统(含IIS)+ Fireworks 8 + Flash 8 + Dreamweaver 8 + Access。

五、实验步骤

请填写网站分析与设计的实验步骤。

（一）分析给定的“网站设计实例”

1．该网站的树型目录或站点结构图（如图1）：

……

图1 实例网站的树型目录或站点结构

2．在该网站首页上“插入”大标题图片和动画文件的操作步骤：

……

3．在该网站设计中，运用了哪些样式设计技术如CSS等？举例说明：

……

4．在该网站设计中，下一级网页显示的目标（位置）一般设置为：……；数据库（.mdb）文件为：……。

5．在该网站设计中，较好地运用了如下网页与Web程序设计技术：

……

（二）设计自选题材网站的具体步骤

1．确定主题和收集资料

本网站的主题：我的美丽家乡——广水

 栏目或三级目录：首页，魅力广水，广水高中，广水风光，今日广水和广水人

家。

2．规划网站和新建站点

网站的树型目录或站点结构图如图2：

 首页







 魅力广水 广水风光 广水高中 今日广水和广水人家

创建本地站点：

·启动Dreamweaver 8，选择“站点”菜单中的“管理站点”命令，打开“管理站点”对话框。

选择“新建”按钮，然后选择“站点”命令，打开“站点定义”对话框，将站点名称设为“Mysite”，单击下一步。

·根据提示填完有关步骤，最后单击“完成”按钮。

·单击“管理站点”对话框中的“完成”按钮，在打开“文件”面板上显示本地站点的目录结构。

·在站点根文件夹上单击右键，从弹出的快捷菜单中选择“新建文件夹”命令，将新建文件夹名称设置为“image”。

·采用同样的方法再建一个“vidao”文件夹。

3．制作素材和单个网页（举例说明典型的操作步骤）

（1）素材制作

1.图片：在网上收集一些网页背景图片，与主题有关的一些图片；将一些不是很合心意的图片在“fireworks”中进行修改，制作。

2.flash动画：在有关网页制作的网站中下载了一些有关的flash动画。由于网页设计容量的限制此处没有插入动画，实际步骤已知。

3.下载歌曲轻音乐红河谷作为其中风景网页的背景音乐。

4.下载有关的资料，图片„„

…

（2）网页制作

以魅力广水为例

打开Fireworks 8，在Fireworks 8中制做好背景图片并保存为JPG格式，关闭Fireworks 8。

打开Dreamweaver 8，单击“插入”—“图片”命令，选择此图片插入

（3）建立数据库

4．制作首页和建立链接（举例说明典型的操作步骤）

制作首页：

……1）新建页面，选择菜单命令“修改”—“页面属性”，在弹出的对话框中将网页的标题设置为“魅力广水”……

2)如果没有显示标尺，则选择菜单命令“查看”/“标尺”/“显示”，显示标尺。

3）选择菜单命令“查看”/“网格”/“显示网格”来显示网格，以便于

定位。

4）在插入工具栏中选择“布局”子工具栏，单击布局按钮，此时会打开

一个“从布局模式开始”，单击“确定”按钮进入布局模式。

5）单击“布局”插入工具栏上的“布局表格”按钮，然后将光标放在要绘制表格的区域，按住鼠标左键绘制一个布局表格。

6）在“布局”插入工具栏上的“布局表格”按钮，然后移动光标到第一

行网格的位置，绘制一个顶部单元格并选中该单元格，在打开的“属性”面板中设置“背景颜色”为白色，并以此方法绘制剩余的单元格。

7）选择“插入”/“图像”命令，插入图片，调整图片大小使得图片大

小恰好充满单元格。

8）在左侧单元格内输入文字，然后加上项目符号，并插入图片，然后

在属性面板中设置字体为黑体，背景设为绿色。

9)选定整个布局表格，将布局表格背景设为黑色。完成首页制作。

建立连接:

 将所有的网页都做完了之后再建立链接。（下面以“魅力广水”为例）①选中“魅力广水”图片，打开“属性”面板，选择“链接”文本框右边的文件夹，选择文件夹中的“主页”网页，单击“确定”。

②在“目标”的下拉框中选择“鸣人的身世”

5．调试运行

调试和运行情况：

在运行的过程中，有某些图片，音乐无法正常显示和播放，有些是因为电脑的原因，而有些则是因为操作过程中出现的问题，经过不断修正，网页运行正常。

……

第五篇：国际网页Web设计流程

国际网页Web设计流程

1.初始会商,主要是收集该站点的关键信息,包括站点的目标读者.要发布的内容.开发Web服务器平台;

2.概念开发,设计师根据收集的信息,开始构思,通常,设计师要把这些构思用草图的形式呈现给顾客,这个草图要有整个网站的结构,不同的布局.设计及导航;

3.内容综合,当决定了设计师的设计,设计师开始制作一些初始图样,这些图样用PHOTOSHOP那样的程序来创建,然后,设计师将图样打印出来配合文字;

4.HTML布局和导航,一旦客户同意了这些内容综合,设计师开始编制Web页面,导航器也被编制到页面中,使客户第一次真正体验一下;

5.图形制作,如果客户同意了站点的外观和感受,设计师将大量制作所需的图形,并进行优化;

6.内容流程,客户的书面材料利用各种网页技术（CSS、JAVA、FLASH）,有机的和相关的图形整合在一起;

7.测试,在站点被提交给客户之前,设计师要彻底测试每个Web页面和联结,利用清单,进行修补;

8.交付,一旦签收,客户要经常进行他们的测试,找出排版和内容方面的错误,做完了这些次要的修正后,正式启用站点.这套完整的计划可以用1-12个月来完成,平均完成时间为4个月.当站点启用后,要进行跟踪调查,以确定人们如何使用站点。经过6-12个月的运行之后，重新收集数据,开始重新设计,然后这个Web设计过程再开始一遍。

附：WEB设计经验-来自microsoft.com设计主管

作为设计主管，Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具，这些工具被用于下载中心、产品目录、配置文件中心、搜索 和注册等联机功能。他为几个内部工具设计了用户界面，并且正致力于创建将于今年晚些时候发布的下一代主页。

从头衔上，您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计。的确，这些确实是我所关注的。视觉上的吸引力是重要的，但是这仅仅是工作的一小部分。而最终的目的是确保整个站点运转正常。

我的意思是，人们通常在访问 microsoft.com 时，并未将它当作艺术作品来赞赏。而是为了获得有关产品的信息，或者有一些技术问题需要咨询，或是阅读有关开发商的期刊。所以网站的设计应该尽量清楚和有条理，以便他们能够容易地找到所需信息。

设计站点

在进行 Web 设计时--在设计过程中--形式应该服从功能。这种方法应用于我们站点的整个设计过程中。当然，我们有最新的 Web 工具，并且能够将各种可视的小配件上载到网页上。

但是我们认为这样做将不利于为访问者提供有效的服务。

事实上，我经常发现一些站点未将重点放在功能上。常见的错误包括：

用户界面元素不一致。例如，同一个控件在不同的页面上功能不同，或者同一个功能对应几个用户界面控件。

导航栏位置不一致。决定站点的哪些页和功能需要在站点的任何页上都可被访问到。这就是应该保持一致性的“全局导航栏”。

不太注意或根本不注意基本的图形设计原则，例如排版式样、色彩和版面的设计。

相关元素和功能的随意分组。注意将元素放置在网页上的位置和目的。这可帮助访问者从其它相邻的选择和位置来推断某个链接的功能。

使网页过于庞大以至使访问者需要通过典型的调制解调器速度的 Internet 连接进行长时间的下载。这并不是说不应该使用图形，但是您需要对它们进行精挑细选，然后用适当的压缩和颜色索引优化它们。

现在的 Web 站点仍然存在很多问题，这并不奇怪。毕竟，Web 设计“艺术”相对来说还是个新生事物。在四、五年以前，Web 页甚至是普通的。那时，人们好像认为他们的 Web 站点将会吸引访问者只是因为它们存在--并且，可能在某些情况下这种方法确实有效。但是这些站点一般很难看，并且更重要的是，它们真的难以使用。接下来便进入“看看我们能做些什么”阶段，在网页中加入了大量的动画、声音文件以及其它附加件，导致访问者需要长时间地进行下载，但是并未获得多少实实在在的内容。

如今的 Web 设计师们已经吸取了前人的经验和教训。好的站点倾向于简化和快速，同时在功能上有所提高。这是 Microsoft 的目标，而且我们最先承认自己所犯的错误（参阅“Microsoft 的 Web 简史”看一看以前的主页设计）。

设计错误并不总是显而易见的。有时在设计上对一个小元素的移动或更改将有很少或根本没有影响。但是，在其它情况下，它可能确实会对页面功能有所影响。而且如果说我们从过去几年学到了一些东西，那就是小的改动会使 Web 页的运行方式有很大的不同。

明确的流程

若要避免类似问题，我们为新服务（例如“搜索”）的创建或关键的 Web 页（如主页）设计了一个明确的流程。每个项目都是在一定的基础上开始的，即我们有一个受益于我们站点上的页面、部分或用户界面元素的产品或服务。在早期的产品计划阶段（第 1 阶段），我被要求设计一些初级模型：大致描述页面、部分或功能的草图。然后产品项目组检查产品计划建议，看看此项服务是否可以为 microsoft.com 的访问者真正带来一些实惠。

如果答案是“可以”，那么此项目会获得批准，我们开始写项目说明书（第 2 阶段）。我们在第 1 阶段的草图和概念基础上创建并提出一个更为完整的计划。这时，我们一般还会开始

可用性测试（一般会有书面的模型）以了解潜在用户将对计划中的设计做出何种反应。在最后开发阶段（第 3 阶段），我们创建运行计划服务的 Web 原型，并且进行全面的可用性测试以及内部复查。然后完成站点的代码，修改程序错误，最后站点通过实际运转的 Web 站点向客户发布。

正如您所见到的，可用性在整个流程中扮演着重要的角色（参阅“创建有效的 Web 界面需要认真计划”）。我们可以为用户运行某项任务计时，这样我们就可以在产品以后的版本中对比相同的测试。我们可以使用这种方法进行度量，以确定一个功能的重新设计是否为客户带来任何真正的价值。

还有，我们将仔细地观察以了解可用性对象是否可以计算出如何正确使用新功能--我们称为“可发现性”的方法。有时这为我们提供了一些挑战。例如：在我们的站点上，在 搜索引擎 中键入一个词组或字会产生一列结果。然后我们请用户选择在这些结果中进行搜索，以便进行更细的搜索并且导向某一页或资源。但是即使“在结果范围内搜索”被明显地标记在深色标签上，很少有人熟悉它。一些用户认为他们正开始新的搜索，并且可能毫无结果。我们正在解决这个问题以确保客户可以利用 microsoft.com 上所有丰富的功能来提高他们对此站点的认识。

选项“在结果范围内搜索”看上去很直观，但不是非常易发现的。此问题一直是困扰我们的设计的问题之一。

最后阶段

大体来讲，站点设计是在发生冲突的需要之间求得平衡的艺术。一方面，我要将站点设计得尽量简单易用。另一方面，我要确保站点中所有强大的工具可为经验丰富的用户所用。与此同时，我还要为内部客户服务--Microsoft 产品项目组--他们对服务有特殊的需要。所以每天我都要解决一些非常困难的问题，经常处于很紧迫的情形中。我发现这种工作是鼓舞人心和有趣的。

这个职业非常需要更熟练的专业人员。我是经过一系列非常不一般的过程--在大学学习图形艺术，然后在多媒体公司设计 CD-ROM，最后加入 Microsoft 并开发应用程序--才获得这个职位的。非常奇怪的是，当我申请（并获得）这份工作时，我以前从来没有设计过 Web 页。但是我广泛的设计经历已经证明是非常有用的，并且我自认为已经验证了格言“成功的设计就是成功的设计”（不论是什么媒体）。许多设计问题对 Web 来说是独一无二的，解决这些问题的方法对于任何媒体都是一样的。

对于那些准 Web 设计师我的建议是，他们也应该尽可能地扩大设计背景。今天应该确保将一些 Web 工作作为互动设计培训的一部分--大多数好的设计学校已将其加入课程中。但是在排版、色彩理论、版面设计以及生产等方面的扎实的技术将仍然特别有价值。

在未来，Web 设计师们仍将会继续被要求给页面增加更丰富的多媒体内容，从而为 Web 站点的可视性和可操作性增加了新一级的复杂性和技术要求。作为 CD-ROM/多媒体设计师，要求我必须具有图形设计、视频、音频制作、动画等方面的知识和创作能力。我的预言是，Web 设计师也将向这些领域发展。

对于属于 microsoft.com 的我们--以及在 Internet 上的其它地方--那应该是一个非常有趣的未来。

了解您的观众。调查一下究竟哪些人在访问您的站点，以及他们为什么要访问。新手或不定期上网的 Web 用户与软件开发商相比有非常不同的兴趣和站点需要。

使您的站点对访问者来说有所帮助。

为您的观众提供所需的信息。使导航元素保持一致，并且确保对访问率最高的区域进行明显的标记，是它们易于被找到。

使用清楚的消息。

确保用户了解此页面的上下文，并且知道需要他们做些什么。如果在注册过程中您要用户输入姓名，那么就直截了当地说。不要让访问者自己计算什么，他们会感到沮丧，于是转到其它更简单的站点（例如您的竞争对手的站点！）。

保持一致性。

虽然更改不同 Web 页的外观并不难，但这并不意味着您应该这么做。将主要功能--例如返回“主页”的链接或者执行一个搜索--放在每页的相同位置。在 microsoft.com 上，黑色全局导航工具栏的位置在四十多万页上都是一样的。

使站点可用。

牢记设计和测试站点的可用性。确保用户可容易地执行任务以获得所需信息。估算任务时间和任务完成率，然后努力进行改善。如果新的设计没有在这些方面获得改善，那么就不要实施它。重新从草图（或最初的计划）开始并尝试其它方法。

保持简洁。

说起来容易做起来难。尝试征求反馈意见。有时新人可以很容易找到解决方案。

尝试新的东西。

不要害怕打破常规，尝试一些完全不同的东西。如果您不试试，永远不会找到真正的答案。