网页设计与制作报告材料书_第1页
网页设计与制作报告材料书_第2页
网页设计与制作报告材料书_第3页
网页设计与制作报告材料书_第4页
网页设计与制作报告材料书_第5页
免费预览已结束，剩余11页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、标准文档网页设计与制作报告书课程名称：网页设计与制作专业班级：电子商务2班学号:201341440213姓 名：孙岩指导教师：王康哲目录一概要 3二.网站开发 3三 应 用 工 具 方案 5四栏目划分 6五代码表 .7图 13七结论 14实用文案摘要：在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的 重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站 建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设 中的重要组成部分，从而倍受人们的重视。一、网页制作开发背景Dreamweaver以其功能强大、容易上手、界面亲切而著称。

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

3、 工具准备好了，可根据你的个人喜好来选择一些素材，如图片、喜欢的文章等。二、网页制作设计技巧首先，我们来看一下创建一个只包含一个网页的站点。选择“文件”菜单的“新建”选项，单击“站点”命令，这时新建站点对话框就弹出来了，在“指定 新站点位置”文本框中输入新站点的位置，单击“只有一个网页的站点”图标,单击“确定”按钮。这就建立好站点了，我们现在来看一下新的站点里有什么， 单击“视图”工具条的“文件夹”按钮。在文件夹列表里有一个网页文件，名字叫做“index.htm "。我们知道，每一个站点都要有一个主页，这个主页也是一个 网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在

4、一般情 况下就叫做“index.htm "。就是说我们新建只包含一个网页的站点时，DREAMWEAVER 就自动为我们创建了站点的主页了。这个新建的站点主页时空的，我们可以向里 面添加内容。在文件列表里除了主页之外，还有文件夹。新建站点时，DREAMWEAVER都会在站点所在位置下新建两个文件夹， 一个是“images”另一个是“_private ”。 我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。“private ”文件夹比较特殊，其中的文件对浏览者来说是隐含的，我们可以把一些不想让浏 览者看到的网页文件放在这个文件夹里，比如：我们可以在这个文件夹里存放注 册用户

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

6、是为了显示表格化的数据，但是设计师很快意识到可以利用表 格来构造他们设计的网页，这样就可以制作较以往作品更加复杂的，多栏目的网 页。表格布局就这样流行了起来，融合了背景图片切片技术，常给人以看起来较 实际布局简洁得多的结构。结构设计：这个时期的网页设计还不太关注语义化和可用性方面的问题，主 要还在追求良好的结构美学。同一时期也是大量应用GIF占位图片控制留白的时 期。一些主流的公司甚至训练设计师如何使用 GIF占位；如微软的“关于HTML表 格中的GIF占位”。第一批主要应用表格布局的“所见即所得"网页设计软件的发展助长了表格的应用。另外，某些软件自动生成的表格如此复杂以至于许多设

7、计师不可能从头手写代码（例如每行只有1px高却包含了几百列的表格）。即使是 稍微复杂一点儿的网页（比如多栏目页面），设计师们都要依赖于表格来创建。三、网站结构网站结构是指网站中页面间的层次关系；按性质可分为逻辑结构及物理结构。 网站结构对网站的搜索引擎友好性及用户体验有着非常重要的影响。（一）网站结构整体先用 DIV和CSS来进行构造，对整个网站进行布局，（二）网站结构是衡量网站用户体验好坏的重要指标之一。清晰的网站结 构可以帮助用户快速获取所需信息；相反，如果一个网站的结构极其糟糕的话，用 户在访问时就犹如走进了一座迷宫，最后只会选择放弃浏览。（三）网站结构还直接影响搜索引擎对页面的收录，一

8、个合理的网站结 构可以引导搜索引擎从中抓取更多有价值的页面。网站结构对网站及网站中页面的影响。搜索引擎对重要页面的抓取由于互联网中信息量极其庞大，为了向用户展示更多有价值的信息，搜 索引擎会优先抓取每个网站中相对重要的页面 （即权重较高的页面），然而，搜索引 擎是怎样发现这些重要页面的呢 ？根据重要页面的链接指向的页面可能是重要贡 面的思路；搜索引擎首先会从权重相对较高的页面 （即源页面）出发跟踪其中的链 接，从而抓取其他相对重要的页面（即目标页面）。网页设计的要素四、应用工具方案DreamWeave自制动态 HTM助画的网页。DreamWeave是一个很酷的网页设计软件，它包括可视化编辑、H

9、TML弋码编辑的软件包，并支持 ActiveX、JavaScript、Java、Flash、ShockWav好特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态 HTML（DynamicHTML）勺设计，使得页面没有plug-in也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。DreamWeaver还采用了 Roundtrip HTML技术。这项技术使得 网页在 DreamWeave和HTML弋码编辑器之间进行自由转换，HTM旬法及结构不变。这样, 专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益 处

10、。DreamWeaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人 都可以轻易扩展它的功能。版面布局：在你开始设计之前，你必须仔细地为站点挑选色彩组合。千万不 要出现紫色的背景加上黑蓝色的文字的组合。 要使整个站点保持同一种色彩组合， 因为不同颜色组合的背景或字体可能会是非常令人讨厌的。你也可以选用一个背 景图，而不是仅用一种颜色。背景图案可以自己绘制，也可以从因特网上下载。 通过模糊背景图案，就可以使文字更容易被阅读。要记住的是，图片不会被浏览 器重画的，而背景色彩则是要被重新画的，因此，在上传你的图片之前，必须检 查不同的浏览器是如何显示这些网页的。当增加文字时，尽量设置容易被

11、阅读的 字体和大小。如果你使用背景图片，那么，当网页被浏览时，背景色和字体将会 先于背景图片被下载，因此，如果背景色和文本的颜色没有鲜明的对照的话，那 么浏览者会有几秒钟的时间看到一个充满了不可阅读的文本的网页。解决这个问 题的简单的方法就是，使背景色与背景图的颜色相类似。浏览导航：站点的浏览导航必须被设计成非常容易。如果需要，把站点分割 为几个部分。最容易的方法，就是在整个网站的所有的网页的左边放置一个菜单 条。当然，除此以外，还有许多可选的方法。对于具有大量信息的站点，使用一 个可扩展的菜单条会是一个不错的选择。无论你使用何种导航模式，在每一页都 放置一个主页链接，那会是一种不错的设计思想

12、；浏览者必须知道，无论何时， 当他们迷失在你的站点浏览中时，都可以通过简单的一次点击就能准确地知道目 前所处的位置。Frame（帧，框架）的问题：Frame你也许会喜欢它，也许不喜欢。如果你在你的网站上使用帧，你很可能使一个帧用于导航目的，另一个帧用于放置内容。 你可以看见在同一页上有两个被分割的浏览窗口，你点击左边的帧，只会改变右 边的内容。用帧来组织网站的内容，显然是非常容易的。检验彳的HTML弋码：不要在你的网站上放置浏览计数器。计数器会让你的网站看起来不够专业化，如果浏览量不够的话，还会起到相反的宣传作用。最后, 内容是金，如果能给的浏览者一些有价值的东西，如，信息，建议，或软件，那

13、么就能吸引浏览者经常光顾你的网站。为你的站点增加消息板和聊天室，从而提 高网站的交互性，使你和你的访问者交流，让访问者彼此交流。五、频道栏目划分图1六、代码段<!DOCTYPEhtml PUBLIC "-/W3C/DTD XHTML 1.0 TransitionalEN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><metahtt

14、p-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(n

15、avigator)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

16、 Flash" ? plugins"Shockwave Flash".description :""desc = plugins"Shockwave Flash 2.0" ? plugins"ShockwaveFlash 2.0".description : desc;if (desc = "") flashVer = -1;elsevar descArr = desc.split("");var tempArrMajor = descArr2.split(&quo

17、t;.");var verMajor = tempArrMajor0;vartempArrMinor = (descArr3 !="")descArr3.split("r") : descArr4.split("r");var verMinor = (tempArrMinor1 > 0) ? tempArrMinor1:0；flashVer = parseFloat(verMajor + "." + verMinor);/ WebTV has Flash Player 4 or lower - to

18、o low for video-1)else if (userAgent.toLowerCase().indexOf("webtv") != flashVer = 4.0;var verArr = reqVerStr.split(",");var reqVer = parseFloat(verArr0 + "." + verArr2);if (flashVer < reqVer) if (confirm(msg)window.location" rsion=ShockwaveFlash"</script

19、></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="

20、0" cellpadding="0" cellspacing="0"><!-DWLayoutTable-><tr><tdwidth="1000"height="195"><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http: lash.cab#version=6,0,29,0" width="1000"

21、height="180"><param name="movie" value="flash/banner.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embedwmode="transparentsrc="flash/banner.swf" width="

22、;1000" height="180" quality="high"pluginspage="type="application/x-shockwave-flash" wmode="transparent"></embed></object></td></tr>border="0" align="center"</table><table width="1000"

23、height=""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 cl

24、ass="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>

25、</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"><ta

26、ble width="100%"border="0" cellspacing="0" cellpadding="0"><tr><td><iframe src="slide.html" width="580" height="300"frameborder="0" scrolling="no" ></iframe></td><td><h

27、3 style="color:#333333;">火影忍者主题曲 </h3><hr /><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http:lash.cab#version=7,0,0,0" width="380" height="260" id="FLVPlayer"><param name="movie" va

28、lue="FLVPlayer_Progressive.swf"/><param name="salign" value="lt" /><param name="quality" value="high" /><param name="scale" value="noscale" /><paramname="FlashVars”value="&MM_ComponentVersion=

29、1&skinName=Clear_Skin_1&streamName=flash/ hy&autoPlay=false&autoRewind=false" /><embedsrc="FLVPlayer_Progressive.swf"flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=fl ash/hy&autoPlay=false&autoRewind=false" qualit

30、y="high" scale="noscale" width="380"height="260"name="FLVPlayer" salign="LT"type="application/x-shockwave-flash” pluginspage=" /></object></td></tr><tr><td colspan="2"><table class=&qu

31、ot;show" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><tdcolspan="5" bgcolor="#F20000"><h3> 壁纸预览</h3></td></tr><tr><td><img src="images/bz1.jpg" width="

32、;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="im

33、ages/bz4.jpg" width="190" height="150/></td><td><img src="images/bz5.jpg" width="190" height="150"/></td></tr></table><p>&nbsp;</p></td></tr></table></td><td>&nbsp;</t

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论