网页报告书Word格式文档下载.docx
《网页报告书Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《网页报告书Word格式文档下载.docx（20页珍藏版）》请在冰豆网上搜索。
五、网页制作具体内容..........................................5
第1章网站开发工具的介绍....................................................................6
第2章需求分析………...……………….....................................………7
1）选题\风格………....................................................................………7
2）网站说明\网站主要栏目的介绍……...................................……....7
第3章网站设计功能模块图……...………….……...........…...............8
第4章网站的实施步骤……….....….…..…......................................…9
1）首页、图及代码….....….…..….....................................................…10
2）分页步骤….....….…..…..................................................................…17
第5章网站的测试与发布………...…...……………….........…………..19
六、课程设计小节...........................................................................................20
七、参考文献...................................................................................................21
前言
在21世界的今天，中国互联网技术已经进入了一个高速发展的阶段，直接通过网络浏览个人网站，已经成为越来越多网民的选择，根据调查，中国大陆目前有3亿多网民，其中50%的网民有过在网络上浏览个人网页对他人的了解或获得他人的帮助的经历，30%的网民有过多次在网上浏览个人网页的经历，而经常性的在网络上浏览个人网站的网民，已经达到了20%以上。
也就是说，在中国大陆，最少有1000万多网民，已经选择了在WEB网中建立个人网站作为主要的展示自己才能方式之一。
在这样的背景之下，成立一个以文字和图片为主的个人网站，为网民提供一个在线获得信息同时也是自我展示的平台，具有非常大的发展空间和市场潜力。
希望网民们喜欢。
1、网站制作具体内容如下：
第1章网站开发工具的介绍
主要的使用工具有：
DreanweaverCS5、fireworks、flash而在此次设计中主要用到Dreameaver设置首页，编辑功能，排版功能，设计模版功能，插入文本包括插入文本元素插入图像和图文混排和外部图像的编辑等功能。
关于Dreameaver的插入FLASH功能我用的比较少，在首页的前面里我插入了一副FLASH，当然还有主页的分页里也插入了FLASH。
其中Fireworks的功能我还不是很了解，我相信我以后会更好的使用它。
DreameaverCS5：
DreamweaverCS5是由Adobe公司在并购Macromedia之后推出的最新版本，它是一款专业的Web站点开发软件，可用于Web站点、Web页和Web应用程序的设计、编码和开发工作。
在业界通常将Dreamweaver、Flash、Fireworks称为网页三剑客。
将各种网页制作的相关工具紧密联系起来是Dreamweaver系列的一大亮点，同时良好的插件体系，使DreamweaverCS5可通过第三方插件进行补充。
另外，DreamweaverCS5还为开发人员提供了动态语言支持与丰富的模板。
DreamweaverCS5在功能强大与易用性之间具有很好的平衡，使用DreamweaverCS5可以有效地提高Web开发的工作效率。
所以在这次网站中主要设计工具就是DreamweaverCS5。
Flash:
Flash是FlashMacromedia公司开发的动画编辑工具。
1997年推出业内最先进的互动内容创作环境，用于交互网站、交互数字体验和高冲击力的移动内容的创作。
Flash由macromedia公司推出的交互式矢量图和Web动画的标准。
网页设计者使用Flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。
其中flash的档案格式是“swf”这是一个完整的影片档，无法被编辑。
有时会被念做“swiff”。
Swf在发布时可以选择保护功能，如果没有选择，很容易被别人输入到他的原始档中使用。
然而保护功能依然阻挡不了为数众多的破解软件，有不少闪客专门以此来学习别人的程序代码和设计方式。
“fla”是Flash的原始档，只能用MacromediaFlash打开编辑或AdobeFlashCS5及更高版本打开编辑。
Actionscript是一种程序语言的简单文本文件.FLASH档案能够直接包含Actionscript,但是也可以把它存成AS档做为外部连结档案（如定义ActionScript类则必须在写在as文件里,再通过import加入类），以方便共同工作和更进阶的程序修改。
Fireworks:
Fireworks是一个强大的网页图形设计工具，你可以使用它创建和编辑位图、矢量图形，还可以非常轻松的做出各种网页设计中常见的效果，比如翻转图象，下拉菜单等，设计完成以后，如果你要在网页设计中使用，你可以将它输出为html文件，还能输出为可以在photoshop,illustrator和flash等软件中编辑的格式。
这里主要是用它来制作网页图片。
第2章需求分析
1）选题\风格：
网站的选题：
网站的选题是一个网站的框架，一个网页的思路和一个网页的源泉。
所以，对于制作一个心仪的网页，首先得选好题目。
在考虑了一番之后，因为我从小喜欢linkinpark乐队，所以按照我的构想，通过表格的规划，实现了自己对音乐梦，摇滚梦的追逐。
网站的风格：
网站的风格是一个网站的门面，必须要做到色彩搭配均匀，给人一种想要继续去欣赏的冲动感，在我的网页里面，因为是以摇滚为主元素的，所以用到黑色为基底的色彩，以蓝色的图片做为标题图片，旁边搭配颜色靓丽的红色边框，给人一种既有黑色摇滚的气息和时尚的说唱文化。
2）网站说明\网站主要栏目的介绍
在我的网页中，添加了Spry菜单栏，里面包括：
首页，乐队介绍，视频主场，专辑领袖，歌曲论坛，新闻专题。
在主页部分，用Click事件完成了对图片的交换，使页面拥有了灵气，更有互动感。
接下来添加了两个标题，乐队简介和乐队任务介绍。
在乐队简介里，用红色图片做了底色，使页面的颜色更富有感召力，在CSS里，设置了标题的字体，是否加粗，颜色。
使得在后面的文字编辑上更加方便。
在标题一的右边添加了FLV格式的视频，并且设置了自动播放。
接下来，在标题二栏目里面，添加了一个2*9的表格，将乐队的简介的人物信息。
在上边的Spry菜单里，都设置了命名锚记，使得用户浏览的时候更加方便。
在歌曲论坛里边，添加了表单，用户可以注册自己的账户信息，并且通过链接可以发送到我的邮箱里。
专辑领袖里边添加了他们的专辑，并且添加了MP3文件，可以在观看的时候，同时听音乐。
第3章网站设计功能模块图
网站根目录
主页前视频文件Incirisdent.flv
主页网页文件linkinpark.html
所有图片
视频资料
栏目一：
首页
栏目二：
专辑领袖
栏目三:
歌曲论坛
栏目四：
乐队简介
图1网页设计功能模块图
第4章网站的实施步骤
首页说明：
1）首页设计的步骤、代码及截图
在构思好整个网站后，其中网站所需有关的大量资料及图片都是来自互联网，方便以备做网站时的需要。
例如：
首页。
1、先是插入一个1行2列的表格，其表格的宽为100%，并使表格居中。
2、在第一行单元格里，插入了乐队图片，在第二列中添加了Click事件，设置了图片交换。
3、在1*2的表格下方添加了Spry菜单栏。
4、接着添加了一个2*9的表格。
5、在表格的左边依次添加了乐队任务的图片，右边配有文字介绍。
6、其中具体设计这里就不多讲了。
我的首页界面如下所示：
图2首页界面
首页代码如下所示：
<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
title>
linkinpark<
/title>
scriptsrc="
SpryAssets/SpryMenuBar.js"
type="
text/javascript"
/script>
Scripts/swfobject_modified.js"
linkhref="
SpryAssets/SpryMenuBarHorizontal.css"
rel="
stylesheet"
text/css"
styletype="
body{
background-color:
#333;
color:
}
/style>
scripttype="
functionMM_preloadImages（）{//v3.0
vard=document;
if（d.images）{if（!
d.MM_p）d.MM_p=newArray（）;
vari,j=d.MM_p.length,a=MM_preloadImages.arguments;
for（i=0;
i<
a.length;
i++）
if（a[i].indexOf（"
#"
）!
=0）{d.MM_p[j]=newImage;
d.MM_p[j++].src=a[i];
}}
functionMM_swapImgRestore（）{//v3.0
vari,x,a=document.MM_sr;
a&
&
i<
a.length&
（x=a[i]）&
x.oSrc;
i++）x.src=x.oSrc;
functionMM_findObj（n,d）{//v4.01
varp,i,x;
if（!
d）d=document;
if（（p=n.indexOf（"
?
"
））>
0&
parent.frames.length）{
d=parent.frames[n.substring（p+1）].document;
n=n.substring（0,p）;
（x=d[n]）&
d.all）x=d.all[n];
for（i=0;
x&
d.forms.length;
i++）x=d.forms[i][n];
d.layers&
d.layers.length;
i++）x=MM_findObj（n,d.layers[i].document）;
x&
d.getElementById）x=d.getElementById（n）;
returnx;
functionMM_swapImage（）{//v3.0
vari,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=newArray;
（a.length-2）;
i+=3）
if（（x=MM_findObj（a[i]））!
=null）{document.MM_sr[j++]=x;
x.oSrc）x.oSrc=x.src;
x.src=a[i+2];
/head>
bodyonload="
MM_preloadImages（'
6.jpg'
）"
tablewidth="
100%"
cellspacing="
0"
<
tr>
td>
imgsrc="
54b8db3a5039bfb4f3e85b246fbdb60d.jpg"
width="
922"
height="
315"
m_1246121565585.jpg"
name="
addtofav"
389"
314"
id="
onmouseover="
MM_swapImage（'
addtofav'
'
'
1）"
onmouseout="
MM_swapImgRestore（）"
/td>
nbsp;
/tr>
/table>
ulid="
MenuBar1"
class="
MenuBarHorizontal"
li>
aname="
shouye"
/a>
ahref="
首页<
/li>
MenuBarItemSubmenu"
乐队简介<
ul>
#s1"
麦克&
middot;
信田<
#s2"
查斯特&
贝宁顿<
#s3"
罗伯&
巴登<
#s4"
布莱德&
德尔森<
#s5"
约瑟夫&
韩<
#s6"
菲尼克斯&
法雷尔<
/ul>
视频主场<
专辑.html"
专辑领袖<
注册.html"
歌曲论坛<
新闻专题<
p>
/p>
tdbgcolor="
#333333"
h1>
arrow-2.gif"
10"
/h1>
atarget="
_blank"
href="
Park<
——世界上最优秀的现场表演团体之一，你可以说以前从没有听说过，也可以用你对<
target="
Metal、等各种风格的诠释早已在全球大放异彩，尽情炫出E时代音乐风情。
他们博采众家之长，容各派之精华，不经意间，首张大碟《<
Theory<
》狂卖2，400万张，销量惊人。
终成大器的LinkinPark在世界范围内狂掀阵阵Linkin热浪，引发一场场&
ldquo;
时尚风暴&
rdquo;
。
也因为乐队成员的亚裔血统而使亚洲不甘人后的新一代青年发现自身力量LinkinPark带给我们的不仅仅是混合的音乐、前卫的时尚、触动心灵的呐喊，在它的身后更是新时代年轻人自由、博大、包容、无可限量的精神世界。
br/>
objectclassid="
clsid:
D27CDB6E-AE6D-11cf-96B8-444553540000"
445"
250"
FLVPlayer"
paramname="
movie"
value="
FLVPlayer_Progressive.swf"
quality"
high"
wmode"
opaque"
scale"
noscale"
salign"
lt"
FlashVars"
amp;
MM_ComponentVersion=1&
skinName=Clear_Skin_1&
streamName=Iridescent&
autoPlay=true&
autoRewind=false"
swfversion"
8,0,0,0"
--此param标签提示使用FlashPlayer6.0r65和更高版本的用户下载最新版本的FlashPlayer。
如果您不想让用户看到该提示，请将其删除。
-->
expressinstall"
Scripts/expressInstall.swf"
--下一个对象标签用于非IE浏览器。
所以使用IECC将其从IE隐藏。
--[if!
IE]>
-->
objecttype="
application/x-shockwave-flash"
data="
--<
[endif]-->
--浏览器将以下替代内容显示给使用FlashPlayer6.0和更低版本的用户。
div>
h4>
此页面上的内容需要较新版本的AdobeFlashPlayer。
/h4>
src="
alt="
获取AdobeFlashPlayer"
/div>
/object>
升级会员 