网页设计与制作报告书

 课程名称:网页设计与制作

报告题目：个人主页

专业班级：软件工程（服务外包）114-4

学    号：

姓    名：

指导教师：

  

摘要：

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

关键字：网页制作；制作方法；设计要素；网页测试

一、网页制作开发背景

Dreamweaver以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。现在流行的网页制作软件有很多，如Macromedia公司的Dreamweaver、微软公司的Dreamweaver、还有Adobe Pagemill 3.0--制作多框架，表单和Image map 图像的网页工具、Netscape等等。其中Dreamweaver更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。工具准备好了，可根据你的个人喜好来选择一些素材，如图片、喜欢的文章等。

二、网页制作设计技巧

首先，我们来看一下创建一个只包含一个网页的站点。 选择“文件”菜单的“新建”选项，单击“站点”命令，这时新建站点对话框就弹出来了，在“指定新站点位置”文本框中输入新站点的位置，单击“只有一个网页的站点” 图标，单击“确定”按钮。这就建立好站点了，我们现在来看一下新的站点里有什么，单击“视图”工具条的“文件夹”按钮。 在文件夹列表里有一个网页文件，名字叫做“index.htm”。我们知道，每一个站点都要有一个主页，这个主页也是一个网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在一般情况下就叫做“index.htm”。就是说我们新建只包含一个网页的站点时，DREAMWEAVER就自动为我们创建了站点的主页了。这个新建的站点主页时空的，我们可以向里面添加内容。

　　在文件列表里除了主页之外，还有文件夹。新建站点时，DREAMWEAVER都会在站点所在位置下新建两个文件夹，一个是“images”另一个是“_private”。我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。 “private”文件夹比较特殊，其中的文件对浏览者来说是隐含的，我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里，比如：我们可以在这个文件夹里存放注册用户的个人信息。

　　尽管每一个站点都要有一个主页，不过创建站点时我们仍然可以从一个空站点开始：选择“文件”菜单的“新建”命令，单击“站点”选项，在“新建站点”对话框里，我们可以选择“空站点”图标来创建一个空站点。“新建站点”对话框中还有许多其他图标，这是DREAMWEAVER提供的用来创建站点模板或向导。我们创建只有一个网页的站点或者创建空站点，都是从头开始来创建一个站点，这就好像盖房子一样，首先画图纸。然而，有许多的房子都具有相似的结构和用途，所以我们可以用一张图纸盖很多相似的房子，这样就节省了许多工作。

基于表格的设计：表格布局使网页设计师制作网站时有了更多选择。在 HTML 中表格标签的本意是为了显示表格化的数据，但是设计师很快意识到可以利用表格来构造他们设计的网页，这样就可以制作较以往作品更加复杂的，多栏目的网页。表格布局就这样流行了起来，融合了背景图片切片技术，常给人以看起来较实际布局简洁得多的结构。

结构设计：这个时期的网页设计还不太关注语义化和可用性方面的问题，主要还在追求良好的结构美学。同一时期也是大量应用 GIF 占位图片控制留白的时期。一些主流的公司甚至训练设计师如何使用 GIF 占位;如微软的“关于 HTML 表格中的 GIF 占位”。第一批主要应用表格布局的“所见即所得”网页设计软件的发展助长了表格的应用。另外，某些软件自动生成的表格如此复杂以至于许多设计师不可能从头手写代码(例如每行只有 1px 高却包含了几百列的表格)。即使是稍微复杂一点儿的网页(比如多栏目页面)，设计师们都要依赖于表格来创建。

三、网站结构

网站结构是指网站中页面间的层次关系;按性质可分为逻辑结构及物理结构。网站结构对网站的搜索引擎友好性及用户体验有着非常重要的影响。

   （一）网站结构整体先用DIV和CSS来进行构造，对整个网站进行布局，

    (二)网站结构是衡量网站用户体验好坏的重要指标之一。清晰的网站结构可以帮助用户快速获取所需信息;相反，如果一个网站的结构极其糟糕的话，用户在访问时就犹如走进了一座迷宫，最后只会选择放弃浏览。

    （三）网站结构还直接影响搜索引擎对页面的收录，一个合理的网站结构可以引导搜索引擎从中抓取更多有价值的页面。

    网站结构对网站及网站中页面的影响。搜索引擎对重要页面的抓取

    由于互联网中信息量极其庞大，为了向用户展示更多有价值的信息，搜索引擎会优先抓取每个网站中相对重要的页面(即权重较高的页面),然而，搜索引擎是怎样发现这些重要页面的呢?根据重要页面的链接指向的页面可能是重要页面的思路;搜索引擎首先会从权重相对较高的页面(即源页面)出发跟踪其中的链接，从而抓取其他相对重要的页面(即目标页面)。

网页设计的要素

四、应用工具方案

DreamWeaver自制动态HTML动画的网页。

DreamWeaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML(Dynamic HTML)的设计，使得页面没有plug-in也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。

DreamWeaver还采用了Roundtrip HTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。

版面布局：在你开始设计之前，你必须仔细地为站点挑选色彩组合。千万不要出现紫色的背景加上黑蓝色的文字的组合。要使整个站点保持同一种色彩组合，因为不同颜色组合的背景或字体可能会是非常令人讨厌的。你也可以选用一个背景图，而不是仅用一种颜色。背景图案可以自己绘制，也可以从因特网上下载。通过模糊背景图案，就可以使文字更容易被阅读。要记住的是，图片不会被浏览器重画的，而背景色彩则是要被重新画的，因此，在上传你的图片之前，必须检查不同的浏览器是如何显示这些网页的。当增加文字时，尽量设置容易被阅读的字体和大小。如果你使用背景图片，那么，当网页被浏览时，背景色和字体将会先于背景图片被下载，因此，如果背景色和文本的颜色没有鲜明的对照的话，那么浏览者会有几秒钟的时间看到一个充满了不可阅读的文本的网页。解决这个问题的简单的方法就是，使背景色与背景图的颜色相类似。

浏览导航：站点的浏览导航必须被设计成非常容易。如果需要，把站点分割为几个部分。最容易的方法，就是在整个网站的所有的网页的左边放置一个菜单条。当然，除此以外，还有许多可选的方法。对于具有大量信息的站点，使用一个可扩展的菜单条会是一个不错的选择。无论你使用何种导航模式，在每一页都放置一个主页链接，那会是一种不错的设计思想；浏览者必须知道，无论何时，当他们迷失在你的站点浏览中时，都可以通过简单的一次点击就能准确地知道目前所处的位置。

Frame(帧,框架)的问题：Frame—— 你也许会喜欢它，也许不喜欢。如果你在你的网站上使用帧，你很可能使一个帧用于导航目的，另一个帧用于放置内容。你可以看见在同一页上有两个被分割的浏览窗口，你点击左边的帧，只会改变右边的内容。用帧来组织网站的内容，显然是非常容易的。

检验你的HTML代码 ：不要在你的网站上放置浏览计数器。计数器会让你的网站看起来不够专业化，如果浏览量不够的话，还会起到相反的宣传作用。最后，内容是金，如果能给的浏览者一些有价值的东西，如，信息，建议，或软件，那么就能吸引浏览者经常光顾你的网站。为你的站点增加消息板和聊天室，从而提高网站的交互性，使你和你的访问者交流，让访问者彼此交流。

五、频道栏目划分

                

六、代码段

Css样式表

@charset "utf-8";

/*

Design by http://www.templateaccess.com

Released for free under a Creative Commons Attribution 3.0 License

*/

BODY部分的修饰

body { margin:0; padding:0; width:100%; color:#9a9a9a; font:normal 12px/1.8em Arial, Helvetica, sans-serif;}

html, .main { padding:0; margin:0; background:#e7e9eb url(images/main_bg.gif) top repeat-x;}

.clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}

.logo { padding:30px 0 20px 0; margin:0 auto; width:450px; float:left; color:#FFF;}

.logo img { float:left; margin:0 10px 0 0; }

h1 { margin:0; padding:5px 0; width:300px; color:#fff; font:normal 36px/1.2em Arial, Helvetica, sans-serif; letter-spacing:-2px;}

h1 a { color:#fff; text-decoration:none;}

h1 a:hover { color:#93ba09; text-decoration:none;}

h1 a:hover span { color:#fff;}

h1 span { color:#93ba09;}

h1 small {  color:#fff; display:inline; padding:0 0 0 10px; font:normal 12px/1.2em Arial, Helvetica, sans-serif; letter-spacing:normal;}

h2 { font:normal 24px Arial, Helvetica, sans-serif; padding:0; margin:5px 0; color:#595959;}

p { margin:8px 0; padding:0 0 8px 0; font:normal 12px/1.8em Arial, Helvetica, sans-serif;}

p.spec { text-align:right;}

a { color:#93ba09; text-decoration:none;}

a:hover { text-decoration:underline;}

a.rm, a.com { margin-left:8px; padding:9px 12px; background:url(images/a_bg.gif) repeat-x top; text-decoration:none; color:#fff;}

.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar { margin:0; padding:0;}

/* header 部分的修饰

.header { }

.header_resize { margin:0 auto; padding:3px 0 0 0; width:970px;}

.header_img { width:970px;  padding:50px 0 0 0;}

.header_img img  { float:right;}

.header_img h2 { width:500px; float:left; text-align:left; font: normal 24px Arial, Helvetica, sans-serif; color:#fff; padding:50px 0 0 0; margin:0;}

.header_img h2  span { font: normal 46px Arial, Helvetica, sans-serif; color:#fff;}

.header_img p {width:500px; float:left; text-align:left; font: normal 12px Arial, Helvetica, sans-serif; color:#fff; line-height:1.8em; padding:10px 0 0 0;}

/* menu 的部分修饰

.menu_nav { margin:40px 0 0 0; padding:3px 0 0 10px; float:right; width:400px;}

.menu_nav ul { list-style:none; padding:0; margin:0; }

.menu_nav li { float:left; padding:0 5px; }

.menu_nav li a { font:normal 13px Arial, Helvetica, sans-serif; color:#959595; display:block; float:left; padding:10px 10px; }

.menu_nav li a:hover { text-decoration:none; color:#93ba09; }

.menu_nav li.active a { text-decoration:none; color:#93ba09; }

Content部分的修饰

.content { padding:10px 0 0 0;}

.content_resize { margin:0 auto; padding:20px 0 0 0; width:970px;}

.content .mainbar { margin:0; float:right;}

.content .mainbar img { float:left; padding:4px; margin:0 10px 0 0; border:1px solid #eaecec; background-color:#fff;}

.content .mainbar .article { margin:0 0 20px 0;  padding:30px 20px;  width:610px;}

.content .mainbar .article span.butons a { margin:0 5px 0 0; float:right; color:#9a9a9a; padding:1px 10px; text-decoration:none;  border:1px solid #ebe8e8; background:#fbfbfc;}

.content .mainbar .article span.butons a:hover { border:1px solid #d9f0ff; background:#93ba09; color:#fff; text-decoration:none;}

.content .mainbar .article span.butons a.active {  border:1px solid #ebe8e8;  background:#93ba09; color:#fff; text-decoration:none;}

.content .sidebar { margin:0; padding:0; float:left; }

.content .sidebar .gadget { margin:0 0 20px 0; padding:30px 20px; width:230px;}

ul.sb_menu, ul.ex_menu { margin:0; padding:0; list-style:none; color:#959595;}

ul.sb_menu li, ul.ex_menu li { margin:0;}

ul.sb_menu li { padding:4px 0 4px 12px; width:220px;}

ul.ex_menu li { padding:4px 0 8px 12px;}

ul.sb_menu li a, ul.ex_menu li a { color:#959595; text-decoration:none; margin-left:-12px; padding-left:22px;  background:url(images/li_a_hover.gif) left no-repeat;}

ul.sb_menu li a:hover, ul.ex_menu li a:hover { color:#93ba09; text-decoration:underline; background:url(images/li_a.gif) left no-repeat;}

ul.sb_menu li a:hover { text-decoration:underline;}

ul.ex_menu li a:hover { text-decoration:none;}

/* subpages 部分的修饰/

.content .mainbar .comment { margin:0; padding:16px 0 0 0;}

.content .mainbar .comment img.userpic { border:1px solid #dedede; margin:10px 16px 0 0; padding:0; float:left;}

/* fbg */

.fbg { padding:10px 0 0 0;background:url(images/fbg_bg.gif); margin:10px 0 0 0;}

.fbg_resize { margin:0 auto; padding:20px 20px; width:930px;}

.fbg  h2 { color:#dedddd;}

.fbg  p { color:#959595;}

.fbg  a { color:#93ba09; text-decoration:none;}

.fbg  img { padding:4px; border:1px solid #cfd2d4; background-color:#fff;}

.fbg .col { margin:0; float:left;}

.fbg .c1 { padding:0 16px 0 0; width:266px;}

.fbg .c2 { padding:0 16px; width:300px;}

.fbg .c3 { padding:0 0 0 16px; width:260px;}

.fbg .c1 img { margin:8px;}

.fbg .c3 img { margin:8px 16px 4px 0; float:left;}

/* footer */

.footer { width:970px; margin:0 auto; padding:40px 0 20px 0;}

.footer p.lf { margin:0; padding:4px 0; float:right; width:auto; text-align:right; line-height:1.5em; color:#474746;}

.footer p.lf a { color:#93ba09;}

.footer p.lr { margin:0; padding:4px 0; float:left; width:auto; line-height:1.5em; color:#474746;}

.footer p.lr a { color:#93ba09;}

/* form */

ol { list-style:none;}

ol li { display:block; clear:both;}

ol li label { display:block; margin:0; padding:16px 0 0 0;}

ol li input.text { width:480px; border:1p【8x solid #c0c0c0; margin:2px 0; padding:5px 2px; height:16px; background:#fff;}

ol li textarea { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:2px; background:#fff;}

ol li .send { margin:16px 0 0 0;}

#mar{

  width:700px;

  height:300px;

  float:right;}

八、截图

首页

照片

美文

留言板

联系我

九、测试

（一）功能测试

1、链接测试

　　链接是Web应用系统的一个主要特征，它是在页面之间切换和指导用户去一些不知道地址的页面的主要手段。链接测试可分为三个方面。首先，测试所有链接是否按指示的那样确实链接到了该链接的页面；其次，测试所链接的页面是否存在；最后，保证Web应用系统上没有孤立的页面，所谓孤立页面是指没有链接指向该页面，只有知道正确的URL地址才能访问。

　　链接测试可以自动进行，现在已经有许多工具可以采用。链接测试必须在集成测试阶段完成，也就是说，在整个Web应用系统的所有页面开发完成之后进行链接测试。

2、表单测试

　　当用户给Web应用系统管理员提交信息时，就需要使用表单操作，例如用户注册、登陆、信息提交等。在这种情况下，我们必须测试提交操作的完整性，以校验提交给服务器的信息的正确性。例如：用户填写的出生日期与职业是否恰当，填写的所属省份与所在城市是否匹配等。如果使用了默认值，还要检验默认值的正确性。如果表单只能接受指定的某些值，则也要进行测试。例如：只能接受某些字符，测试时可以跳过这些字符，看系统是否会报错。

3、设计语言测试

　　Web设计语言版本的差异可以引起客户端或服务器端严重的问题，例如使用哪种版本的HTML等。当在分布式环境中开发时，开发人员都不在一起，这个问题就显得尤为重要。除了HTML的版本问题外，不同的脚本语言，例如Java、JavaScript、ActiveX、VBScript或Perl等也要进行验证。

（二）可用性测试 ：

1、导航测试

　　导航描述了用户在一个页面内操作的方式，在不同的用户接口控制之间，例如按钮、对话框、列表和窗口等；或在不同的连接页面之间。通过考虑下列问题，可以决定一个Web应用系统是否易于导航：导航是否直观？Web系统的主要部分是否可通过主页存取？Web系统是否需要站点地图、搜索引擎或其他的导航帮助？

　　在一个页面上放太多的信息往往起到与预期相反的效果。Web应用系统的用户趋向于目的驱动，很快地扫描一个Web应用系统，看是否有满足自己需要的信息，如果没有，就会很快地离开。很少有用户愿意花时间去熟悉Web应用系统的结构，因此，Web应用系统导航帮助要尽可能地准确。

　　导航的另一个重要方面是Web应用系统的页面结构、导航、菜单、连接的风格是否一致。确保用户凭直觉就知道Web应用系统里面是否还有内容，内容在什么地方。Web应用系统的层次一旦决定，就要着手测试用户导航功能，让最终用户参与这种测试，效果将更加明显。

2、图形测试

　　在Web应用系统中，适当的图片和动画既能起到广告宣传的作用，又能起到美化页面的功能。一个Web应用系统的图形可以包括图片、动画、边框、颜色、字体、背景、按钮等。图形测试的内容有：

　　 (1)要确保图形有明确的用途，图片或动画不要胡乱地堆在一起，以免浪费传输时间。Web应用系统的图片尺寸要尽量地小，并且要能清楚地说明某件事情，一般都链接到某个具体的页面。

　　 (2)验证所有页面字体的风格是否一致。

　　 (3)背景颜色应该与字体颜色和前景颜色相搭配。

　　 (4)图片的大小和质量也是一个很重要的因素，一般采用JPG或GIF压缩。

3、内容测试

　　内容测试用来检验Web应用系统提供信息的正确性、准确性和相关性。

　　信息的正确性是指信息是可靠的还是误传的。例如，在商品价格列表中，错误的价格可能引起财政问题甚至导致法律纠纷；信息的准确性是指是否有语法或拼写错误。这种测试通常使用一些文字处理软件来进行，例如使用Microsoft Word的“拼音与语法检查”功能；信息的相关性是指是否在当前页面可以找到与当前浏览信息相关的信息列表或入口，也就是一般Web站点中的所谓“相关文章列表”。

4、整体界面测试

　　整体界面是指整个Web应用系统的页面结构设计，是给用户的一个整体感。例如：当用户浏览Web应用系统时是否感到舒适，是否凭直觉就知道要找的信息在什么地方？整个Web应用系统的设计风格是否一致？

对整体界面的测试过程，其实是一个对最终用户进行调查的过程。一般Web应用系统采取在主页上做一个调查问卷的形式，来得到最终用户的反馈信息。 对所有的可用性测试来说，都需要有外部人员(与Web应用系统开发没有联系或联系很少的人员)的参与，最好是最终用户的参与。

十、周期

（一）一般来说，周期要经历如下各个阶段：

1.页请求：页请求发生在页面生命周期开始之前，用户请求页时，ASP.NET将确定是否需要分析和编译页

2.开始：在开始阶段，将设置页属性，如Request和Response。在此阶段，页还将确定请求是回发请求还是新请求，并设置IsPostBack属性

3.页初始化：在页初始化期间，可以使用页中的控件，并设置每个控件的UniqueID属性。

4.加载：在加载期间，如果当前请求是回发请求，则将使用从视图状态和控件状态恢复的信息加载控件属性。

5.验证：在验证期间，将调用所有验证程序控件的Validate方法，此方法将设置各个验证程序控件和页的IsValidate属性。

6.回发事件处理：如果请求是回发请求，则将调用所有事件处理程序

7.呈现：在呈现之前，会针对该页和所有控件保存视图状态。在呈现阶段中，页会针对每个控件调用Render方法，它会提供一个文本编写器，用于将控件的输出写入页的Response属性和OutputStream中

8.卸载：完全呈现页并将页发送至客户端、准备丢弃该页后，将调用卸载。此时，将卸载页属性并执行清理。

十一、结论

(一)网页设计制作需要我们明白:

1.简洁实用: 这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。

2.使用方便: 同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美。

3.整体性好: 一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的。

4.网站形象突出: 一个符合美的标准的网页是能够使网站的形象得到最大限度的提升的。

5.页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次，当然雅俗共赏是人人都追求的。

6.交互式强: 发挥网络的优势，是每个使用者都参与到其中来，这样的设计才能算成功的设计。这样的网页才算真正的美的设计。不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。

你也许会认为所有的这些都会是一种限制；不错，如果运用不当，它们确实是会成为一种约束。不管怎样，当你开始设计你的网站时，要努力去这样做。不要跟随上述所有的规则，充分发挥你的创造力 ，你可以去创建一个大大的Flash电影，再加上一点点的文字内容，使你的网站在众多的网站中脱颖而出，哪怕浏览者只是为了再看一下你的设计。灵活地使用本文中所述的一些规则方法，将会使你的网站更完美，更容易获得成功。

在学习网页制作的时间里，我学会了怎么去制作一个网页，当然在制作的过程中不可避免的遇到了各种各样的问题，但还是在老师和同学的帮助下一一解决。虽然最终成果还是有一些问题，但是这次动手实践的意义是显而易见的。这是我学习后的体会，在这个过程中还存在有瑕疵，希望以后可以和大家多点时间一起交流，提高我们这方面知识的欠缺，共同进步。