网页设计与制作报告书

发布时间：2020-03-02 22:48:13 来源：范文大全收藏本文下载本文手机版

电子商务2班201341440213孙岩

网页设计与制作报告书

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

专业班级：电子商务2班

学号:201341440213 姓名：孙岩

指导教师：王康哲

电子商务2班201341440213孙岩

一．概要……………………………………………………………

二．网站开发……………………………………………………

三．应用工具方案……………………………………………

四．栏目划分……………………………………………………

五．代码表……………………………………………………….

六．截图……………………………………………………………

七．结论…………………………………………………………… 2

5 6 7 13 14

电子商务2班201341440213孙岩

摘要：

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

一、网页制作开发背景

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

二、网页制作设计技巧

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

在文件列表里除了主页之外，还有文件夹。新建站点时，DREAMWEAVER都会在站点所在位置下新建两个文件夹，一个是“images”另一个是“_private”。我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。 “private”

电子商务2班201341440213孙岩

文件夹比较特殊，其中的文件对浏览者来说是隐含的，我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里，比如：我们可以在这个文件夹里存放注册用户的个人信息。

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

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

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

三、网站结构

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

（一）网站结构整体先用DIV和CSS来进行构造，对整个网站进行布局， (二)网站结构是衡量网站用户体验好坏的重要指标之一。清晰的网站结

电子商务2班201341440213孙岩

构可以帮助用户快速获取所需信息;相反，如果一个网站的结构极其糟糕的话，用户在访问时就犹如走进了一座迷宫，最后只会选择放弃浏览。

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

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

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

网页设计的要素

四、应用工具方案

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最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。

版面布局：在你开始设计之前，你必须仔细地为站点挑选色彩组合。千万不要出现紫色的背景加上黑蓝色的文字的组合。要使整个站点保持同一种色彩组合，因为不同颜色组合的背景或字体可能会是非常令人讨厌的。你也可以选用一个背

电子商务2班201341440213孙岩

景图，而不是仅用一种颜色。背景图案可以自己绘制，也可以从因特网上下载。通过模糊背景图案，就可以使文字更容易被阅读。要记住的是，图片不会被浏览器重画的，而背景色彩则是要被重新画的，因此，在上传你的图片之前，必须检查不同的浏览器是如何显示这些网页的。当增加文字时，尽量设置容易被阅读的字体和大小。如果你使用背景图片，那么，当网页被浏览时，背景色和字体将会先于背景图片被下载，因此，如果背景色和文本的颜色没有鲜明的对照的话，那么浏览者会有几秒钟的时间看到一个充满了不可阅读的文本的网页。解决这个问题的简单的方法就是，使背景色与背景图的颜色相类似。

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

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

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

五、频道栏目划分

图1

电子商务2班201341440213孙岩

六、代码段

content=\"text/html; charset=gb2312\" /> 火影忍者 function MM_CheckFlashVersion(reqVerStr,msg){ with(navigator){ var isIE = (appVersion.indexOf(\"MSIE\") != userAgent.indexOf(\"Opera\") == -1); var isWin = (appVersion.toLowerCase().indexOf(\"win\") != -1); if (!isIE || !isWin){ var flashVer = -1; if (plugins && plugins.length > 0){ var desc = plugins[\"Shockwave Flash\"] ? plugins[\"Shockwave Flash\"].description : \"\"; desc = plugins[\"Shockwave Flash 2.0\"] ? plugins[\"Shockwave Flash 2.0\"].description : desc; if (desc == \"\") flashVer = -1;

-1 &&

电子商务2班201341440213孙岩

else{ var descArr = desc.split(\" \"); var tempArrMajor = descArr[2].split(\".\"); var verMajor = tempArrMajor[0]; var

tempArrMinor

(descArr[3]

\"\")

? descArr[3].split(\"r\") : descArr[4].split(\"r\"); var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0; flashVer = parseFloat(verMajor + \".\" + verMinor); } } // WebTV has Flash Player 4 or lower -- too low for video else if (userAgent.toLowerCase().indexOf(\"webtv\") != -1) flashVer = 4.0;

var verArr = reqVerStr.split(\",\"); var reqVer = parseFloat(verArr[0] + \".\" + verArr[2]);

if (flashVer

= \"http://www.daodoc.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash\";

电子商务2班201341440213孙岩

} } } }

align=\"center\"

width=\"1000\"

border=\"0\" cellpadding=\"0\" cellspacing=\"0\">

width=\"1000\"

height=\"195\">

width=\"1000\"

wmode=\"transparent\"

height=\"180\"

quality=\"high\" pluginspage=\"http://www.daodoc.com/go/getflashplayer\"

电子商务2班201341440213孙岩

type=\"application/x-shockwave-flash\" wmode=\"transparent\">

height=\"\"

border=\"0\"

align=\"center\" cellpadding=\"0\" cellspacing=\"0\" id=\"main\">

首页火影介绍角色资料精选壁纸动画选播

bgcolor=\"#FFFFFF\">

width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">

电子商务2班201341440213孙岩

火影忍者主题曲

name=\"FlashVars\" value=\"&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flash/hy&autoPlay=false&autoRewind=false\" />

src=\"FLVPlayer_Progreive.swf\" flashvars=\"&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flash/hy&autoPlay=false&autoRewind=false\" quality=\"high\" scale=\"noscale\" width=\"380\" height=\"260\"

name=\"FLVPlayer\"

salign=\"LT\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.daodoc.com/go/getflashplayer\" />

电子商务2班201341440213孙岩

壁纸预览

电子商务2班201341440213孙岩

height=\"40\"

border=\"0\" cellpadding=\"0\" cellspacing=\"0\" id=\"footer\">

八、截图

首页

图2 照片

align=\"center\"

电子商务2班201341440213孙岩

图3 美文

图4

九、结论

(一)网页设计制作需要我们明白: 1.简洁实用: 这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉

电子商务2班201341440213孙岩

所有的冗余的东西。

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

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

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

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

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

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

电子商务2班201341440213孙岩

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