Web编程基础实训报告

Web编程基础

实训报告

系 (部):

专业班级: 计算机科学与技术14-1

学生姓名:张 * *

学号:完成日期: 20xx年12月25日

Web编程基础实训报告

《Web编程基础实训报告》 第 1 页

前言

随着网络技术的发展,Web应用越来越广泛,如果用户要开发具有实际应用价值的Web应用程序,必须熟练地掌握Web编程技术相关的基础知识。经过一学期课堂上对《Web编程基础》的学习和上机实验对部分知识点的实际应用,已经掌握的关于网站的相关基础知识。

通过本次实训把所学到的知识应用到实际的生活中,本次实训是要求做一个“个人网站”,并撰写实训报告。

一、课程实训的目的

通过课程实训,每个学生在指导教师的指导下,完成一定的任务,受到一次综合运用所学知识、独立完成某项技术工作的训练,从而培养和提高其独立工作能力,主要有以下四个方面的业务能力:

1.综合运用所学专业基本理论,提高查阅文献和资料的能力,其中包括提高阅读外文资料的能力。

2.培养学生进行方案设计,分析比较和设计、计算的能力。

3.培养学生网站开发,和调试计算机程序的能力。

4.提高学生进行技术总结和撰写说明书的能力。

二、实训要求:

本课程是为了配合《Web编程基础》课程开设,通过使用Dreamweaver完成设计。主要使学生在规定的时间内,完成课程内容涉及到的主要课题设计、实现和训练。使学生掌握Web编程的理论知识与实践结合,扩大加深对网络建设的理解,并提高学生的实践能力。

《Web编程基础实训报告》 第 2 页

三、实训内容:

建立一个完整的Web站点,要做到:网站的目标定位准确;版面的总体设计和栏目设置(布局合理,可使用表格、框架、DIV进行布局);提供的内容,信息准确、及时、信息量大小适度;网页的制作、页面的结构、色彩、导航合理;网站浏览的速度,交互设计是否合理、方便。在设计中利用CSS样式对字体整体样式进行修饰,要格调一致。

《Web编程基础实训报告》 第 3 页

目录

一、网站设计的必要性······················1

二、功能设计···························2

1、设计的功能与目标

2、主要设计思想

三、详细设计··························3

(一) 1、站点设计

2、工具使用

3、显示环境

4、页面设计

5、网页链接并调试

(二) 1、各个模块的设计思想的实现及功能

(1)index

(2)我的主页

(3)个人喜好

(4)自我介绍

(5)我的未来网页

(6)成长经历页面

(7)哲学天地

(8)我的相册网页

四、实训总结·························8 附录:(重要代码,以我的主页为例)··············9

《Web编程基础实训报告》 第 1 页

一、 网站设计的必要性

网站设计,意义重大,网站是我们面对互联网用户的“桥梁”,这个“桥梁”的完美程度将对访客对于我们的第一印象产生极大的影响!全球现在约有15亿的用户接入了因特网,今后会更为壮大。通过建设一个网站,可以更好的展示个人/企业或者机构。在当前,门户博客、网店、微博、轻博等平台虽然可以更好的对自己展示。但是,网站仍然是最重要的自我展示的方案。因此,建设一个与自身形象相称或者更新颖的网站,是当前时代必不可少的选择!

在互联网时代,信息是处于一种爆炸的状态。在信息横流、大众被真假难辨的信息流所迷惑的时候,您的网站是否可以因为建设的十分独特而脱颖而出,并因此为您带来收益呢?另外,通过互联网,我们可以更好的得到网站用户的反馈信息,这将对我们的成长进步起到很大的作用。

近几年随着网络的发展而逐渐受到人们的重视,它本身以网络为载体,把各种信息以最快捷、方便的方式传达给受众,在这种标准的要求下,逐步产生了审美的需求。人们对美的追求是不断深入的,网页设计同样如此。网页不光是把各种东西放上去,能看就行,这是远远不够的!要考虑如何使受众能更好地和更有效率地接收网页上的信息。这就需要从审美的方面入手,制作出清晰、整体性好的页面。使人浏览起来心情愉快,接收信息也会更加容易。网页设计的审美需求是对平面视觉传达设计美学的一种继承和延伸。两者的表现形式和目的都有一定的相似性,把传统平面设计中美的形式规律同现代的网页设计的具体问题相结合起来,运用一些平面设计中美的基本形式到网页中去,增加网页设计的美感和大众的视觉审美需求。

总之,你的网站的设计是否符合大众的口味,是否新颖决定了你的网站

第 2 页 的质量。

二、 功能设计:设计的功能与目标及主要设计思想

1、设计的功能与目标

根据实训要求设计一个个人网站,内容包括:个人情况简介网页:个人简介,成长经历网页、个人喜好网页、我的主页网页、我的相册网页以及其他相关网页。通常情况下,架设个人网站主要是为了通过互联网表达个人在商业、科技、交际、生活等方面的信息需求或者进行信息的交流,具有较强的目的性,我的个人网站一般体现在:为了展示自己的风采,让大家和我一起分享我的心得与经验,让和我有共同爱好的朋友有一个倾诉的地方。

因为是个人网站,所以只是选择了自己擅长和喜爱的内容,突出自己的风格和特点。我的个人网站大体上包括一下内容:index,个人简介,我的相册,我的未来,成长经历,哲学天地,个人喜好,7大模块,其中个人喜好网页包括:军情观察、诗词天地和动画乐园等内容,我的未来网页包括:我的梦想和梦想人生等内容,哲学天地网页包括:中国哲学和西方哲学等内容。

本次实训,我的目标就是将自己的个人资料全部展示在我的个人网站里面,以至于在别人浏览过我的网站可以更好地了解我。为了浏览者的视觉效果,我的网站还特别注意了颜色的变化,以及网页的和谐统一。

2、主要设计思想

首页和我的主页采用表格进行布局设计,军情观察采用浮动框架设计,中国哲学采用框架结构布局设计,其他页面采用DIV+CSS布局设计以及DIV+CSS+表格混合使用进行布局设计。网页还采用了:滚动字幕、个人相册、菜单、导航条、弹出信息对话框、脚本等技术。

第 3 页

Web编程基础实训报告

三、 详细设计

(一)

1.站点设计

独立设计实现一个站点。使用设计工具建立站点。站点中需要实现功能文件的制作。

我的网站站点结构图如下图所示:

Web编程基础实训报告

第 4 页

2、工具使用

在Dreamweaver 等工具中选择需要的工具。选择合适的软件环境制作。 3、显示环境

网页视觉效果应采用Internet Explorer6.0以上版本浏览器,显示分辨率以1024×768状态为准。 4、页面设计

使用绘图软件设计和切割效果图。通过对图的设计安排实现一张网页。使用表格进行网页布局设计。要求整体风格要一致,网页的制作、页面的结构、色彩、导航合理。提供的内容,信息是否准确、及时、信息量大小适度。 5、把文件复制到其他地方链接不会错。网站结构结构清晰,文件有清晰的分类。 (二)

1、各个模块的设计思想的实现及功能 (1)index:

我的index页面总体布局是用表格布局,背景图片是

经过PS处理过的,其中表格内有我的个人简介和个人信息。表头有一超链接直接进入我的个人主页。本页还有一脚本,当打开本页面时会弹出来一个对话框

“Welcome To Here!!”。页面结构如图所示:

Web编程基础实训报告

第 5 页

(2)我的主页

我的主页都是用表格制成,分成八部分:头部、底部、导航、正文、公告及人生哲学和道德经两部分,导航在左上部分实现对大部分网页的超链接,中间是正文部分,右上部分是公告栏,左、右下部分分别是人生哲学和道德经相关的

Web编程基础实训报告

文字以及对标题、正文字体的修饰。页面结构如图所示:

Web编程基础实训报告

(3)个人喜好

Web编程基础实训报告

个人喜好我分别用了三个网页:军情观察页面、诗词天地页面和动画天地页面。其中,军情观察页面采用DIV和浮动框架布局:标题栏、导航栏、浮动框架列表导航栏及浮动框架部分。列表导航栏有四个超链接都是让它们在浮动框架中显示其中都介绍了最近的军事事实,还有一些中国的战机、导弹、战舰等内容。而诗词天地用DIV+CSS布局,分成四部分,头部、导航、正文和底部,其中正文部分

又分为左中右三部分分别是相关的古诗词和一些图片,部分文字做了特效处理。动画乐园也是采用DIV+CSS布局,主题选择了《功夫熊猫》这部电影的

Web编程基础实训报告

第 6 页 内容,也是分成标题栏、导航栏、正文和底部说明及联系方式等内容。其中正文部分分成四部分图片、电影英文简介,以及两部分用英语和汉语经典台词部分。

(4)自我介绍页面

自我介绍部分采用表格来布局,方法很简单采用

两行两列表格划分,其中在对字体用CSS修饰,

显示不同的效果

Web编程基础实训报告

(5)我的未来网页

“我的未来”由两部分网页组成:我的梦想网页和人生梦想网页。其中我的梦想网页采用DIV+CSS布局,其中有六个盒子组成:标题栏盒子、导航盒子、底部盒子和中间盒子,其中中间盒子又嵌套两

个盒子分别向左、右浮动。以及图片的插入和固定。人生梦想网页用了九个盒子:最上边是导航盒子,标题栏盒子,正文盒子底部盒子依次向下,其中标题栏嵌套两个盒子,一个插入Logo,另一个设置滚动文字。正文盒子也嵌套两个盒子分别向左、右浮动。

Web编程基础实训报告

Web编程基础实训报告

第 7 页

(6)成长经历页面

成长经历页面采用DIV+CSS结构布局,分为三大部分:导航、正文和底部信息栏,其中正文又分为八小部分分别插入不同的图片作为背景鱼片,然后每个小盒子里输入相关的文字内容,在用CSS修饰让文字看起来更美观。

Web编程基础实训报告

(7)哲学天地

哲学天地由中国哲学网页和西方哲学网页两

部分组成。其中中国哲学采用框架布局页面,按20%、80%分成两行,然后再把80%按20%、80%分成两列。上部分是导航栏,下面两部分是关于《道德经》的古文,类似于电子书(有锚链接),左边是目录,点击目录文章在右边的框架里显示。而西方哲学页面是用DIV+CSS

Web编程基础实训报告

来布局的,是用灰色或和灰色相近的颜色来作为背景,总体布局和其他的DIV+CSS布局有相似之处。

Web编程基础实训报告

第 8 页

(8)我的相册网页

我相册网页总体采用DIV+CSS布局,但少部分采用表格布局(嵌套在DIV中),我的相册采用onMouseOver这一属性,让鼠标停留在小图片上,此图片就会被放大在新的DIV盒子里,其他布局部分和上面的类似,只是一小部分做了细节处理。

四、实训总结: 在进行个人网站课程设计的这几天里,我利用了学习之余的一切可利用的剩余时间,全心全意投入到网页世界,去不断的学习,去不断的探索;同时去不断的充实,去不断的完善自我,在网络的天空下逐渐的美化自己的人生!本次期的网业设计课程,开展了动态思维训练教学活动,对于我们学生来说,可以激发学习兴趣,调动学习的自觉性,自己动脑、动手,动口,运用网络资源,结合教材及老师的指导,通过自身的实践,创作出积聚个人风格、个性的个人网页。总体来说,这次的实验过程,我学会了很多知识,虽然过程比较艰辛,但在INTENET领域中,有了一个展示自我的空间,我觉得很开心、很有成就感。

这次实训使我接触到了新的知识,学会了网页设计的基本思想,加深了我对网页编程语言的了解,以及加强了我动手做网页的实际能力。对我以后的学习和工作打下了基础,使我受益匪浅。

Web编程基础实训报告

第 9 页 附录:(重要代码,以我的主页为例)

一、导航:

<div id="menu">

<ul> <li><a href="我的主页.html" target="_blank">我的主页</a></li> <li><a href="#">个人喜好</a> <ul> <li><a href="军情观察.html" target="_blank">军情观察</a></li> <li><a href="诗词天地.html" target="_blank">诗词天地</a></li> <li><a href="个人喜好.html" target="_blank">动画乐园</a></li> </ul> </li> <li><a href="../index.html" target="_blank">自我介绍</a></li> <li><a href="#">我的未来</a> <ul> <li><a href="我的梦想.html" target="_blank">我的梦想</a></li> <li><a onmousedown="show()">梦想人生</a></li> </ul></li> <ul> <li><a href="成长经历.html" target="_blank">成长经历</a></li> <li><a href="#">哲学天地</a> <ul> <li><a href="道德经页面/主页面.html" target="_blank">中国哲学</a></li> <li><a href="西方哲学.html" target="_blank">西方哲学</a></li> </ul></li> <li><a href="我的相册.html" target="_blank">我的相册</a></li> </ul>

第 10 页

</ul> </div>

外部CSS:

body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu {

width: 700px;

height: 38px;

background-color: #808080;

margin-top: 0;

margin-right: auto;

margin-bottom: 0;

margin-left: auto;

}

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { float:left; margin-left:2px;}

#menu ul li a { display:block; width:91px; height:38px;

line-height:38px; text-align:center; font-size:14px;

color:#FFFFFF; text-decoration:none; font-weight:bold;}

#menu ul li a:hover {

display: block;

width: 91px;

第 11 页

} height: 38px; line-height: 38px; text-align: center; font-size: 14px; color: #FF9966; text-decoration: none; font-weight: bold; background-color: #808080;

#menu ul li ul { border:1px solid #ccc; display:none;

position:absolute;}

#menu ul li ul li { float:none; width:88spx; background:#99CC99; margin:0;}

#menu ul li ul li a { background:none;}

#menu ul li ul li a:hover { background:#333; color:#fff;}

#menu ul li:hover ul { display:block;}

#menu ul li.sfhover ul { display:block;}

二、脚本

1、当在我的主页的时候点击“我的主页”会弹出对话框“这就是我的主页”的信息代码如下:

<a onmousedown="show()">我&nbsp;&nbsp;的&nbsp;&nbsp;主&nbsp;&nbsp;

Web编程基础实训报告

Web编程基础实训报告

第 12 页 页</a>

2、当打开我的主页页面时,加载完成后状态栏会显示“姓名:张** 学号:201443******”这样的信息,代码如下:

<body onload="MM_displayStatusMsg('姓名:张* * 学号:201443******');return document.MM_returnValue"></body>

3、当鼠标点击QQ图片时会弹出警告框显示“我的QQ:**********” <a onclick="show1()"><img src="../image/QQ.png" /></a>

第 13 页

三、DIV+CSS

加载css样式有以下四种:外部样式、内部样式、行内样式、导入样式 <link href="layout.css" rel="stylesheet" type="text/css" />

这种形式是把css单独写到一个css文件内,然后在源代码中以link方式链接。它的好处是不但本页可以调用,其它页面也可以调用,是最常用的一种形式。

<style>h2 { color:#f00;}</style>

这种形式是内部样式表,它是以<style>和</style>结尾,写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。 <p style="font-size:18px;">内部样式</p>

这种在标签内以style标记的为内部样式,内部样式只针对标签内的元素有效,因其没有和内容相分离,所以不建议使用。

@import url("/css/global.css");

链接样式是以@import url标记所链接的外部样式表,它一般常用在另一个样式表内部。如layout.css为主页所用样式,那么我们可以把全局都需要用的公共样式放到一个 global.css的文件中,然后在layout.css中以@import url("/css/global.css")的形式链接全局样式,这样就使代码达到很好的重用性。

css优先级:

?1、id优先级高于class

?2、后面的样式覆盖前面的

3、指定的高于继承

第 14 页

Web编程基础实训报告

?4、行内样式高于内部或外部样式

总结:单一的(id)高于共用的(class),有指定的用指定的,无指定则继承离它最近的

css盒模型组成:

<div>标签:可定义文档

中的分区或节

(division/section)。

<div> 标签可以把文档

分割为独立的、不同的

部分。<div>常用 id 或

class 来标记,这样可

以方便控制其样式。

4、标签:

(1)<marquee>...</marquee>普通滚动

属性:behavior=slide(滑动)scroll(预设卷动)alternate(来回卷动) direction=down(向下卷动)up(向上)right(向右)left(向左)

Loop(卷动次数)width(设定宽度)height(设定高度)bgcolor(设定背景颜色)scrollamount(设定卷动距离)scrolldelay(设定卷动时间)

(2)<iframe> 标签:iframe 元素会创建一个包含另外一个文档的内联框架。

(3)连结格式:<a href=地址></a>外部连结

第 15 页 <img src=图片地址>贴图

<bgsound src=MID音乐文件地址>背景音乐设定

部分核心代码:

1、<marquee behavior="scroll" direction="up" height="215px"

onmouseover=this.stop() onmouseout=this.start() scrollamount="4" loop="-1">

2、 <table width="200" height="350" border="0" cellpadding="0" cellspacing="0"

background="../image/d8c4cfd3572c11df604be3cf632762d0f603c266.jpg"> <tr>

<td width="400" height="77"><p class="lefttop">人&nbsp;&nbsp;生&nbsp;&nbsp;哲&nbsp;&nbsp;学</p></td>

</tr>

<tr>

<td height="170"><p class="left"><a>酒神精神:</a></p>

<p class="time"> “就算人生是幕悲剧,我们要有声有色地演这幕悲剧,不要失掉了悲剧的壮丽和快慰。”</p></td>

</tr>

<tr>

<td height="137"><p class="left"><a>日神精神:</a></p>

<p class="time">“就算人生是个梦,我们要有滋有味地做这个梦,不要失掉了梦的情致和乐趣。”</p></td>

</tr>

第 16 页 </table>

3、<table width="310" border="0" cellspacing="10">

<tr>

<td width="50" height="50"><a onclick="show1()"><img

src="../image/QQ.png" /></a></td>

<td width="50" height="50"><a onclick="show2()"><img src="../image/微信.png" /></a></td>

<td width="50" height="50"><a onclick="show3()"><img

src="../image/89c84a36d3cdbfef226b42b073d9f4b4_256_256.png"/></a></td>

<td width="50" height="50"><a onclick="show4()"><img

src="../image/4fd74f8fa0218590fba5978d724b1ab1_256_256.png"

/></a></td>

<td width="50" height="50">&nbsp;</td>

</tr>

</table>

4、<div id="leftbox2">

<img src="../image/熊猫1.png" /><br />

<p align="left">&nbsp;&nbsp;往往在逃避命运的路上,却与之不期而遇<br />

&nbsp;&nbsp;One meets its destiny on the road he takes to avoid it<br />

-------《功夫熊猫》</p>

第 17 页 </div>

<div align="left" id="leftbox3">

5、 <table width="289" border="0" cellpadding="10">

<tr>

<td align="left" width="279" height="391"><p

class="world1">&nbsp;&nbsp;Yesterday is history.Tomorrow is a

mystery.But today is a gift.That is why it&rsquo;s called the present (the gift).<br />

&nbsp;&nbsp;昨天是历史,明天是谜团,只有今天是天赐的礼物。</p>

<p class="world1">&nbsp;&nbsp;Your mind is like this water, my friend , when it is agitated ,it becomes difficult to see ,but if you allow it to settle , the answer becomes clear. <br />

&nbsp;&nbsp;你的思想就如同水,我的朋友,当水波摇曳时,很难看清,不过当它平静下来,答案就清澈见底了。</p>

</td>

</tr>

</table></div>

参考资料:《Web编程基础——HTML、CSS、JavaScript》 清华大学出版社 《Dreamweaver CS6 白金手册》 清华大学出版社 《Adobe Photoshop CS6 中文版经典教程》 人民邮电出版社 《JavaScript基础教程》(第9版) 人民邮电出版社