网页制作报告

时间：2024.4.30

网页制作报告

姓名：

学号：

班级：

一．主题描述................................................................................................................... 2

二．设计思路及过程........................................................................................................ 3

1.首先对网站的主题进行了设定................................................................................. 3

2.网站材料................................................................................................................ 3

3.网站规划................................................................................................................ 3

4.制作网站的网页...................................................................................................... 3

三．网站结构图（个页面之间的关系）............................................................................ 4

四．使用的各种工具........................................................................................................ 4

1.Dreamweaver........................................................................................................... 4

（1）制作效果................................................................................................... 4

（2）网站管理................................................................................................... 5

（3）控制能力................................................................................................... 5

2.Photoshop............................................................................................................... 5

六．源代码加注释............................................................................................................ 5

1.主要运用到的效果的源代码：................................................................................. 6

(1)设置背景图片................................................................................................. 6

(2)设置边框颜色................................................................................................. 6

(3)制作跳转菜单................................................................................................. 6

(4)版权............................................................................................................... 6

(5)插入音频........................................................................................................ 7

(6)设置连接........................................................................................................ 7

(7)鼠标经过时更换图像...................................................................................... 7

(8)图片晃动........................................................................................................ 7

2.欢迎页源代码......................................................................................................... 7

3.首页源代码............................................................................................................. 9

七．设计小结................................................................................................................. 14

一．主题描述

这个网站以“旅游吧”为主题，介绍了上海的旅游的概况、景点等，共有8个页面，其中包括欢迎页，首页，上海美景，旅游景点、购物去处、小贴士等。

版面设计图文并茂，风格以清新淡雅、简洁直观为主。

二．设计思路及过程

1.首先对网站的主题进行了设定

即“旅游吧”为主题。网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是清新的浅色，浏览网页的时候可以给人一种轻松、小清新的感觉。

2.网站材料

在网站上搜集所需要的网页信息，包括图片、文字、音频、相关的新闻以及查找一些网页特效的制作方法。

3.网站规划

这个网站共有共有8个页面，分为欢迎页，首页，图片页，景点页、外滩页、购物页、购物去处页、小贴士页。

网站整体色调是浅色。版面设计灵活，根据各部分内容的不同适当的自由设计。网页布局主要用表格。

4.制作网站的网页

素材、风格、模块都设计好以后，就开始逐张制作网页。首先建立了站点。然后建立网页，添加内容。这个网站的制作主要运用了以下的效果：鼠标经过更换图像特效、设置图像热区链接、制作跳转菜单、插入音频、晃动的图片的特效、鼠标滑过后交换图像的特效等。

三．网站结构图（个页面之间的关系）

首页、图片页、景点页、购物页、小贴士页这几个页面之间可以相互任意跳转；

在首页可以跳转到去哪网和携程网；

在经典也可以跳转到外滩页，可以从外滩页跳回到景点页；

在购物页可以跳转到徐家汇页，从徐家汇页可以跳转到购物页；

在小贴士页可以跳转到中国天气网。

四．使用的各种工具

1.Dreamweaver

Dreamweaver是个原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。Dreamweaver自MX版本开始，使用了Opera的排版引擎"Presto" 作为网页预览。

（1）制作效果

Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。

（2）网站管理

使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案称，Dreamweaver 会自动更新所有链接。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。

（3）控制能力

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft

浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。

2.Photoshop

Photoshop是平面图像处理业界霸主Adobe公司推出的跨越PC和MAC两界首屈一指的大型图像处理软件.它功能强大,操作界面友好,得到了广大第三方开发厂家的支持,从而也赢得了众多的用户的青睐.

六．源代码加注释

由于所有的代码过长，所以着重写了主要运用到的代码以及欢迎页和首页的代码

1.主要运用到的效果的源代码：

(1)设置背景图片

(2)设置边框颜色

(3)制作跳转菜单

</tr>

<tr>

</select>

</form></td>

</tr>

</table>

(4)版权

(5)插入音频

(6)设置连接

(7)鼠标经过时更换图像

(8)图片晃动

2.欢迎页源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>上海之旅欢迎页陈方方</title>

body {

background-image: url(images/375zjy52b.jpg);

background-repeat: no-repeat;

}

.g {

font-size: 36px;

font-weight: bold;

color: #63C;

text-align: center;

}

.c {

}

.c {

}

</style>

function MM_popupMsg(msg) { //v1.0

alert(msg);

}

</script>

</head>

<tr>

<p class="g"> <span class="c">欢迎来到旅游吧</span></p>

<p class="c">世界那么大 </p>

<p class="c">你需要去看看</p>

<p class="c">想一览摩都上海的魅力吗</p>

<p class="c"><strong>点击地图中的</strong></p>

<p class="c">你就可以走进上海的世界</p>

</map>

</p>

</p>

<p>

</p></td>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

</table>

<p>

</map>

</p>

</body>

</html>

3.首页源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>上海之旅首页陈方方</title>

.ys01 {

font-family: fantasy;

}

.i {

font-size: 24px;

}

.i {

font-size: 16px;

}

.q {

text-align: center;

}

.Z {

font-size: 24px;

font-weight: bold;

}

.a {

font-size: 18px;

}

.a {

font-size: 18px;

}

.a {

font-size: 18px;

color: #60C;

}

#apDiv1 {

position: absolute;

width: 189px;

height: 46px;

z-index: 1;

left: 399px;

top: 29px;

font-size: 36px;

color: #90C;

}

</style>

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,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]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_findObj(n, d) { //v4.01

var p,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);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

function MM_jumpMenu(targ,selObj,restore){ //v3.0

eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

if (restore) selObj.selectedIndex=0;

}

</script>

</head>

<tr>

</tr>

</table>

</tr>

</tr>

</table>

<tr>

<tr>

</tr>

<tr>

<p>•东方明珠成人票</p>

<p>•上海杜莎蜡像馆成人票</p></td>

</tr>

</table>

<tr>

</tr>

<tr>

</select>

</form></td>

</tr>

</table>

<tr>

</tr>

<tr>

<p>     现代化的大都市，外滩的夜景值得一看。商业发达，交通便利。美   食方面推荐浓油赤酱的本帮菜，也可以去城隍庙品尝地道的上海小吃。上海这座城市的节奏很快，东西也比较贵。</p>

</div>

<p>    上海，又称“上海滩”，是一座极具现代化而又不失中国传统特色的国际大都市。由于其地处中国漫长海岸线的最正中，是中国四个中央直辖市之一，是中国的历史文化名城。百余年来，上海一直是中国商业的中心、财富的汇聚地，是中国仅次于香港的著名“购物乐园”，更是和世界联系最紧密的那根纽带。上海也是一个新兴的旅游目的地，由于它深厚的文化底蕴和众多的历史古迹，如上海的地标——浦西的外滩和新天地。位于浦东的东方明珠广播电视塔与金茂大厦却呈现出另一番繁华景象，它们与上海环球金融中心等建筑共同组成了全球最壮丽的天际线之一，而20##年将建成的上海中心，更会为“东方巴黎”添上灿烂的一笔。此外，上海迪斯尼乐园也将于20##年开张。昔日的上海烙印着 “十里洋场”的繁华，讲述着旧上海滩的浮华旧梦。今日的上海，则以浦东开发开放为代表，日新月异的都市面貌使上海成为展示中国经济发展和改革开放新成就的窗口，并于20##年成功举办了第41届世界博览会。 </p>

</div></td>

</tr>

</table></td>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

</table>

<p></p>

</body>

</html>

七．设计小结

通过在网上找教学视频以及查阅有关书籍、寻问同学，最终完成了该网页的设计与制作之前的网页设计。通过前期的确定网页的主题，寻找素材、网页规划到实现自己的想法这让我对制作网页产生了不小的兴趣。虽然很多效果、一些操作不会用，但通过查找资料也一一的解决了。而通过这次的网页课程设计使我对Photoshop、Dreamweaver 这两款软件有了一比较深入的了解，至少用这些软件的方法我学到了，以后遇到类似的软件也应该都能够操作。

在这次的网站设计中，我主要运用的方法是表格嵌套，因为其能够很好的去统一我的网页的风格，同时也是比较严谨的一个方法。在做了这次的网站设计以后，我觉得我在解决问题的方面有了一个提高，以前遇到的问题想不明白的，现在几乎都已经了解了。在制作网页过程中，运用了更多以前未运用的技巧。这使我学到了更多的知识，不仅可以巩固了以前所学过的知识，而且学到了很多在书本上所没有学到过的知识，也为我在这方面积累了一些经验。通过这次网页课程设计使我懂得了理论与实际相结合的重要性，我觉得动手操作才是硬道理，有同学说网页设计是个“体力活”，但是我觉得网页设计更重要的是思考，不然像个无头苍蝇，永远不会做出好的网站出来，还需要总结经验，这样才会有提高。

更多相关推荐：

网页制作报告: 网页制作报告一摘要本网页以旅游文化为主题介绍了自己家乡的旅游景点金丝展现了金丝峡独特的景观和深厚的文化共有六个页面其中包括首页金丝峡的文化金丝峡的动态精品推荐旅游路线旅游论坛等等还收集了一些相关的优美的图片版面...
网页设计报告: 河南城建学院网页设计课程设计报告学号专业信息管理与信息系统姓名田伟涛题目军事网站指导老师张妍琰田慧吴孝利设计时间计算机科学与工程系20xx年6月目录一设计目的3二需求分析51基本工具需求52基本要素需求53网页...
网页制作设计报告: 成绩：《网页制作》课程期末考查设计报告题目：个人主页网站的设计与实现系部：数学与应用数学系专业：信息与计算科学姓名：学号：班级：信计一班学期：20xx年下学期目录一、绪论....................…
网页制作个人报告: 广西科技大学鹿山学院课程设计报告课程名称网页设计课程设计课题名称网页设计个人报告指导教师孔祥翰专业班级营销111姓名黄磊成绩评定指导教师签字20xx年11月5日动态留言网页制作班级营销111姓名黄磊学号20xx...
网页制作报告: 课程名称：集中上机(网络、语言)课程编号：041221姓名：代悦超学院：通信与信息工程学院班级：0101020学号：20xx210663网页制作报告网页制作报告一．实习目的：为了验证和巩固理论知识，提高同学们的…
网页设计与制作报告: 网页设计与制作课程设计设计题目个人网站姓名班级学号指导老师设计时间20xx年6月27日目录一网站设计211意义212目的213任务214要求3二网站主题5三网站页面链接总图5四综合知识的运用情况641表格与层的...
网页设计心得体会报告: 网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常重要。生活中我每天上网都要接触到网页，原来没有留意过网页的设计，但是经过这段时间的学习了解，现在我打开一个网页都会习惯…

网页制作报告: 中南大学本科生课程设计实践设计报告大学计算机基础题目江南名楼岳阳楼学生姓名王亚军指导教师朱从旭学院资源与安全工程学院专业班级采矿工程1001学生学号020xx00124计算机基础教学实验中心20xx年12月16...
静态网页制作报告: 目录一制作题目1二制作过程1一建立布局1二网页中相关插入1三设置导航条2四设置交换图像3五文字背景图像设置3六制作弹出信息效果3七设置滚动图片和文字4八表单的制作4九链接5十制作flash图像查看器5三制作代码...

Dreamweaver之网页制作报告: 多媒体技术及应用报告学生姓名嘎嘎学号6100310211专业班级自动化103班网页制作报告目录111阐述该主题网站的设计意图和创意312简单介绍自己的个人网站3221在设计中主要用的技术322网页基本的框架33...
网页和网站设计报告: 网页和网站设计课程设计大作业诗韵网站设计报告前言2一作业背景2二选题说明3三小组任务分工4第一章前期准备4第一节素材搜集4一网上搜集4二制作4第二节其他准备5一免费空间申请5二8uftp使用5第二章网页制作5第...
网页设计与制作课程设计报告: 20xx20xx学年第一学期网页设计与制作课程设计报告题目维影影视公司网页设计专业数字媒体技术班级121班姓名指导教师成绩计算机与信息工程系二0一四年六月二十日计算机与信息工程系网页设计与制作课程设计报告目录1...

热门关注