当前位置:首页 >> 城乡/园林规划 >>

网页设计与制作报告书_图文

电子商务 2 班 201341440213 孙岩

网页设计与制作报告书

课程名称:网页设计与制作 专业班级:电子商务 2 班 学 姓 号:201341440213 名:孙岩

指导教师:王康哲

1

电子商务 2 班 201341440213 孙岩

目录
一.概要…………………………………………………………… 3

二.网站开发……………………………………………………

3

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

5

四.栏目划分……………………………………………………

6

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

7

六.截图……………………………………………………………

13

七.结论……………………………………………………………

14

2

电子商务 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”
3

电子商务 2 班 201341440213 孙岩

文件夹比较特殊,其中的文件对浏览者来说是隐含的,我们可以把一些不想让浏 览者看到的网页文件放在这个文件夹里,比如:我们可以在这个文件夹里存放注 册用户的个人信息。 尽管每一个站点都要有一个主页,不过创建站点时我们仍然可以从一个空站 点开始:选择“文件”菜单的“新建”命令,单击“站点”选项,在“新建站点” 对话框里,我们可以选择“空站点”图标来创建一个空站点。 “新建站点”对话框 中还有许多其他图标,这是 DREAMWEAVER 提供的用来创建站点模板或向导。我们 创建只有一个网页的站点或者创建空站点,都是从头开始来创建一个站点,这就 好像盖房子一样,首先画图纸。然而,有许多的房子都具有相似的结构和用途, 所以我们可以用一张图纸盖很多相似的房子,这样就节省了许多工作。 基于表格的设计: 表格布局使网页设计师制作网站时有了更多选择。 在 HTML 中表格标签的本意是为了显示表格化的数据,但是设计师很快意识到可以利用表 格来构造他们设计的网页,这样就可以制作较以往作品更加复杂的,多栏目的网 页。表格布局就这样流行了起来,融合了背景图片切片技术,常给人以看起来较 实际布局简洁得多的结构。 结构设计:这个时期的网页设计还不太关注语义化和可用性方面的问题,主 要还在追求良好的结构美学。 同一时期也是大量应用 GIF 占位图片控制留白的时 期。 一些主流的公司甚至训练设计师如何使用 GIF 占位;如微软的 “关于 HTML 表 格中的 GIF 占位” 。第一批主要应用表格布局的“所见即所得”网页设计软件的 发展助长了表格的应用。另外,某些软件自动生成的表格如此复杂以至于许多设 计师不可能从头手写代码(例如每行只有 1px 高却包含了几百列的表格)。 即使是 稍微复杂一点儿的网页(比如多栏目页面),设计师们都要依赖于表格来创建。 三、网站结构 网站结构是指网站中页面间的层次关系;按性质可分为逻辑结构及物理结构。 网站结构对网站的搜索引擎友好性及用户体验有着非常重要的影响。 (一)网站结构整体先用 DIV 和 CSS 来进行构造,对整个网站进行布局, (二)网站结构是衡量网站用户体验好坏的重要指标之一。清晰的网站结
4

电子商务 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 最具挑战性和生命力的是它的开放式设计,这项设计使任何人 都可以轻易扩展它的功能。 版面布局:在你开始设计之前,你必须仔细地为站点挑选色彩组合。千万不 要出现紫色的背景加上黑蓝色的文字的组合。 要使整个站点保持同一种色彩组合, 因为不同颜色组合的背景或字体可能会是非常令人讨厌的。你也可以选用一个背
5

电子商务 2 班 201341440213 孙岩

景图,而不是仅用一种颜色。背景图案可以自己绘制,也可以从因特网上下载。 通过模糊背景图案,就可以使文字更容易被阅读。要记住的是,图片不会被浏览 器重画的,而背景色彩则是要被重新画的,因此,在上传你的图片之前,必须检 查不同的浏览器是如何显示这些网页的。当增加文字时,尽量设置容易被阅读的 字体和大小。如果你使用背景图片,那么,当网页被浏览时,背景色和字体将会 先于背景图片被下载,因此,如果背景色和文本的颜色没有鲜明的对照的话,那 么浏览者会有几秒钟的时间看到一个充满了不可阅读的文本的网页。解决这个问 题的简单的方法就是,使背景色与背景图的颜色相类似。 浏览导航:站点的浏览导航必须被设计成非常容易。如果需要,把站点分割 为几个部分。最容易的方法,就是在整个网站的所有的网页的左边放置一个菜单 条。当然,除此以外,还有许多可选的方法。对于具有大量信息的站点,使用一 个可扩展的菜单条会是一个不错的选择。无论你使用何种导航模式,在每一页都 放置一个主页链接,那会是一种不错的设计思想;浏览者必须知道,无论何时, 当他们迷失在你的站点浏览中时,都可以通过简单的一次点击就能准确地知道目 前所处的位置。 Frame(帧,框架)的问题:Frame—— 你也许会喜欢它,也许不喜欢。如果你 在你的网站上使用帧, 你很可能使一个帧用于导航目的, 另一个帧用于放置内容。 你可以看见在同一页上有两个被分割的浏览窗口,你点击左边的帧,只会改变右 边的内容。用帧来组织网站的内容,显然是非常容易的。 检验你的 HTML 代码 :不要在你的网站上放置浏览计数器。计数器会让你的 网站看起来不够专业化,如果浏览量不够的话,还会起到相反的宣传作用。最后, 内容是金,如果能给的浏览者一些有价值的东西,如,信息,建议,或软件,那 么就能吸引浏览者经常光顾你的网站。为你的站点增加消息板和聊天室,从而提 高网站的交互性,使你和你的访问者交流,让访问者彼此交流。 五、频道栏目划分

图1
6

电子商务 2 班 201341440213 孙岩

六、代码段 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;

charset=gb2312" /> <title>火影忍者</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function MM_CheckFlashVersion(reqVerStr,msg){ with(navigator){ var isIE = (appVersion.indexOf("MSIE") != -1 &&

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;

7

电子商务 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 = } } // WebTV has Flash Player 4 or lower -- too low for video else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0; parseFloat(verMajor + "." + verMinor);

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

if (flashVer < reqVer){ if (confirm(msg)) window.location =

"http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Ve rsion=ShockwaveFlash";

8

电子商务 2 班 201341440213 孙岩

} } } } </script> </head> <body onload="MM_CheckFlashVersion('7,0,0,0',' 本页内容需要使用较新 的 Macromedia Flash Player 版本。是否现在下载它?');"> <div style="margin: 0 auto; width:1000px;"> <table id="header" align="center" width="1000" border="0"

cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="1000" height="195"><object

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swf lash.cab#version=6,0,29,0" width="1000" height="180"> <param name="movie" value="flash/banner.swf">

<param name="quality" value="high"> <param name="wmode" value="transparent"> <embed src="flash/banner.swf" width="1000" wmode="transparent" height="180" quality="high"

pluginspage="http://www.macromedia.com/go/getflashplayer"
9

电子商务 2 班 201341440213 孙岩

type="application/x-shockwave-flash" wmode="transparent"></embed> </object></td> </tr> </table> <table width="1000" height="" border="0" align="center"

cellpadding="0" cellspacing="0" id="main"> <!--DWLayoutTable--> <tr> <td width="10" height="36">&nbsp;</td> <td width="980" valign="top" background="images/menu.jpg"> <ul class="nav"> <li><a href="index.html">首页</a></li> <li><a href="about.html">火影介绍</a></li> <li><a href="role.html">角色资料</a></li> <li><a href="pic.html">精选壁纸</a></li> <li><a href="video.html">动画选播</a></li> </ul> </td> <td width="10">&nbsp;</td> </tr> <tr> <td height="464">&nbsp;</td> <td valign="top" bgcolor="#FFFFFF"><table width="100%"

border="0" cellspacing="0" cellpadding="0">
10

电子商务 2 班 201341440213 孙岩

<tr> <td><iframe src="slide.html" width="580" height="300"

frameborder="0" scrolling="no" ></iframe> </td> <td><h3 style="color:#333333;">火影忍者主题曲</h3> <hr /> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swf lash.cab#version=7,0,0,0" width="380" height="260" id="FLVPlayer"> <param name="movie" value="FLVPlayer_Progressive.swf" /> <param name="salign" value="lt" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="FlashVars"

value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flash/ hy&autoPlay=false&autoRewind=false" /> <embed src="FLVPlayer_Progressive.swf"

flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=fl ash/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.macromedia.com/go/getflashplayer" /> </object>
11

电子商务 2 班 201341440213 孙岩

</td> </tr> <tr> <td colspan="2"><table class="show" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td </h3></td> </tr> <tr> <td><img src="images/bz1.jpg" width="190" height="150" /></td> <td><img src="images/bz2.jpg" width="190" height="150" /></td> <td><img src="images/bz3.jpg" width="190" height="150" /></td> <td><img src="images/bz4.jpg" width="190" height="150" /></td> <td><img src="images/bz5.jpg" width="190" height="150" /></td> </tr> </table> <p>&nbsp;</p> </td>
12

colspan="5"

bgcolor="#F20000"><h3> 壁 纸 预 览

电子商务 2 班 201341440213 孙岩

</tr> </table></td> <td>&nbsp;</td> </tr> </table> <table width="1000" height="40" border="0" align="center"

cellpadding="0" cellspacing="0" id="footer"> <!--DWLayoutTable--> <tr> <td width="1000" height="60" valign="top"><p>

八、截图
首页

图2 照片

13

电子商务 2 班 201341440213 孙岩

图3 美文

图4

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

电子商务 2 班 201341440213 孙岩

所有的冗余的东西。 2.使用方便: 同第一个是相一致的,满足使用者的要求,网页做 得越适合使用,就越显示出其功能美。 3.整体性好: 一个网站强调的就是一个整体,只有围绕一个统一 的目标所做的设计才是成功的。 4.网站形象突出: 一个符合美的标准的网页是能够使网站的形象 得到最大限度的提升的。 5.页面用色协调,布局符合形式美的要求: 布局有条理,充分利 用美的形式,是网页富有可欣赏性,提高档次,当然雅俗共赏是人人 都追求的。 6.交互式强: 发挥网络的优势,是每个使用者都参与到其中来, 这样的设计才能算成功的设计。这样的网页才算真正的美的设计。不 知不觉网页设计的课程将要结束了,这门课程所包含内容的丰富是让 我从没有想到的。 你也许会认为所有的这些都会是一种限制; 不错, 如果运用不当, 它们确实是会成为一种约束。不管怎样,当你开始设计你的网站时, 要努力去这样做。不要跟随上述所有的规则,充分发挥你的创造力 , 你可以去创建一个大大的 Flash 电影,再加上一点点的文字内容,使 你的网站在众多的网站中脱颖而出,哪怕浏览者只是为了再看一下你 的设计。灵活地使用本文中所述的一些规则方法,将会使你的网站更 完美,更容易获得成功。
15

电子商务 2 班 201341440213 孙岩

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

16


相关文章:
网页设计与制作报告书_图文.doc
网页设计与制作报告书 - 电子商务 2 班 201341440213 孙岩 网页设计与制作报告书 课程名称:网页设计与制作 专业班级:电子商务 2 班学姓号:201341440213 ...
网页设计与制作报告书分析_图文.doc
网页设计与制作报告书分析 - 电子商务 2 班 201341440213 孙岩 网页设计与制作报告书 课程名称:网页设计与制作 专业班级:电子商务 2 班学姓号:20134144021...
网页设计与制作报告_图文.doc
网页设计与制作报告_学习总结_总结/汇报_实用文档。课题名称:网页设计与制作 姓
网页设计与制作_图文.doc
网页设计与制作 - 班级:电子商务 2 班 姓名:台俊宝 学号:201341440206 网页设计报告书 课程名称 题目 网页设计与制作 设计个人网站主页 电子商务 2013414402...
网页设计与制作实验报告_图文.doc
网页设计与制作实验报告 - 军自考信息通信管理(专科)计算机网络与应用实验报告... 网页设计与制作实验报告_互联网_IT/计算机_专业资料。军自考信息通信管理(专科)计算...
网页设计与制作总结_图文.doc
网页设计与制作 实训报告班级:多媒体 152 姓名:张莉钧 学号:201501032118 指导...设计一个内容完整、图文并茂、技术运用得当的网站; 5、具备独立撰写实训报告基本...
网页设计与制作报告书.doc
网页设计与制作报告书 - 网页设计与制作报告书 课程名称:网页设计与制作 报告题
网页设计与制作教程报告_图文.doc
网页设计与制作教程 设计报告 商务 1302 班 李前芬 20130904021
网页设计与制作个人实训报告_图文.doc
网页设计与制作个人实训报告_实习总结_总结/汇报_实用文档。网页设计与制作个人实训报告,大学课程 一、实训目的:通过实训,掌握网页制作系列软件 Dreamweaver、Fireworks...
《网页设计与制作》实验报告_图文.doc
网页设计与制作》实验报告 - 《网页设计与制作》 实验报告 院系名称: 学生姓
网站规划与设计报告_图文.doc
网站规划与设计报告 - 湖南交通职业技术学院 《网页设计与制作》课程 项目报告书 题目: 班级网站 学院:交通信息学院 班级:智软 1201 成员:炜哥、黄**、伍** ...
《网页设计与制作》标准实验报告_图文.doc
网页设计与制作》标准实验报告 - 网页设计与制作 实 验 姓名:弋文君 报 告 专业:市场营销 班级:2010 级 2 班 学号:20100744041 2012-2013 学年 ...
网页设计与制作期末设计报告_图文.doc
网页设计与制作期末设计报告 - 网页设计与制作 ---个人网站设计报告 指导老师
网页设计与制作报告_图文.doc
网页设计与制作报告_互联网_IT/计算机_专业资料。网页设计与制作报告 ...比
网页设计与制作模板_图文.doc
网页设计与制作模板 - 存档资料 成绩: 课程设计报告书 课程名称 题分目院 网页设计与制作 设计个人网站主页 电信分院 电子商务 专业班级 学号 学生姓名 指导教师 ...
《网页设计与制作基础》实验报告_图文.doc
网页设计与制作基础》实验报告_管理学_高等教育_教育专区。广东商学院答题纸(.
网页设计与制作报告_图文.doc
网页设计与制作报告_IT/计算机_专业资料。《网页设计...设计顶部部分,其中包括了 LOGO、标语和一幅图片 。...比 如翻阅资料书,百度,也可以请教同学,一起讨论,相互...
网页设计与制作课程设计报告_图文.doc
网页设计与制作课程设计报告_工学_高等教育_教育专区。学号 *** 2014-2015 学年 第一学期 《网页设计与制作》 课程设计报告 题目: 维影影视公司...
《网页设计与制作》试验报告_图文.doc
经济与管理学院 福建农林大学旅 游学院 实验报告 课程名称: 《网页设计与制作》 专业班级: 学号: 2008 级工商管理 081434051 张永在 魏勇生 讲师 学生姓名: ...
网页设计与制作综合实训_图文.ppt
7.制作内容页。 8.创建超级链接。 9.测试与浏览网页。 10.书写实训报告书。 (四)实训意义网页设计与制作综合实训是教学过程中重要的实践性教学 环节。它是根据...
更多相关文章: