实验报告四模板Word格式.docx
《实验报告四模板Word格式.docx》由会员分享，可在线阅读，更多相关《实验报告四模板Word格式.docx（10页珍藏版）》请在冰点文库上搜索。
在html文件中用链接指针指向一个目标。
其基本格式为：
<
ahref="
url"
>
字符串<
/a>
href属性中的统一资源定位器（url）是被指向的目标，随后的“字符串”在html文件中充当指针的角色，它一般显示为蓝色。
当读者用鼠标点这个字符串时，浏览器就会将url处的资源显示在屏幕上。
♦图像链接指针
图像也可以做为链接指针。
格式为：
Imgsrc="
可以看出，上例中用<
取代了链接指针中text的位置。
是图像元素，它表明显示url代表的图像文件，参见图像一章。
♦属性：
目标窗口
如果希望被指向的目标在一个新的窗口中显示，可以使用target属性来修饰链接指针元素。
target="
window-name"
text<
将url代表的资源显示在一个新的窗口中，该窗口的名字叫window-name。
2）转义字将与特殊字符
html中<
，>
，&
有特殊含义，（前两个字符用于链接签，&
用于转义），不能直接使用。
使用这三个字符时，应使用它们的转义序列。
&
的转义序列为&
amps或&
#38;
Lt;
&
#60;
gt;
#62;
前者为字符转义序列，后者为数字转义序列。
例如 &
font&
显示为<
font>
，若直接写为<
则被认为是一个链接签。
3、DHTML——掌握网页开发中样式表技术的使用
1）概念
CSS是CascadingStyleSheet的缩写，译作“层叠样式表单”。
是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
2）样式表加入网页的方法
①链入外部样式表文件（LinkingtoaStyleSheet）
先建立外部样式表文件（.css），然后使用HTML的link对象。
【例】：
Head>
Title>
titleofarticle<
/Title>
linkrel=stylesheethref="
type="
text/css"
/Head>
②定义内部样式块对象（EmbeddingaStyleBlock）
在HTML文档的<
Html>
和<
Body>
标记之间插入一个<
STYLE>
...<
/STYLE>
块对象。
请注意，这里将style对象的type属性设置为"
，是允许不支持这类型的浏览器忽略样式表单。
③内联定义（InlineStyles）
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。
3）样式表语法（CSSSyntax）
Selector{property:
value}
参数说明：
Selector
--
选择符
property
:
value
样式表定义。
属性和属性值之间用冒号（:
）隔开。
定义之间用分号（;
）隔开
4）样式表实例
通过实验掌握运用CSS样式表的方法，建议采用链入外部样式表文件的方式将样式表加入网页。
4、客户端应用体系结构
1）JavaApplet
是Java语言编写的包含在网页里的“小应用程序”，必须嵌入HTML文件中，由浏览器解释之后作为网页的一部分来执行。
2）ActiveX
是下载到IE，并在客户端执行的功能完全的程序，只能在Windows环境下工作，演示插入Office图表控件并要求能运用1-2个网页编辑工具提供的ActiveX控件。
5、客户端脚本体系结构（Javascript）——了解并部分掌握客户端体系结构Javascript脚本技术
1）基本概念
Javascript是一种可以嵌入HTML页面、基于对象的解释性语言。
借助Javascript语言，可以在不需要网络传输资料的情况下，响应使用者的需求事件，所以当一位使用者输入一项资料时，它不用经过传给服务端处理，再传回来的过程，而直接可以被客户端的应用程序所处理。
Javascript是一种脚本语言，它采用小程序段的方式实现编程。
像其它脚本语言一样，具有自身的数据类型、表达式和算术运算符及程序的基本框架结构。
2）掌握与理解简单实例
3）学习JavaScirpt的基本知识并学习简单的运用
能掌握Javascript语言的基本知识（数据类型、对象的概念、函数及事件驱动机制）等，并能运用浏览器对象以及窗口对象适当增加网站的互动性。
能借鉴成熟的Javascript实例并经过适当修改后运用到个人网站中，以增加网页整体效果。
6、申请免费网站空间，并通过Web或者FTP形式发布个人网站。
三、实验原理、方法和手段
1、实验原理
1）HTML标记——超级链接技术（见“实验内容1”）
2）客户端应用体系结构
①JavaApplet见“实验内容4-1”
②ActiveX见“实验内容4-2”
3）客户端脚本体系结构Javascript
见“实验内容5”。
①Javascript的基本数据结构
在Javascript中四种基本的数据类型：
数值（整数和实数）、字符串型（用“”号或‘’括起来的字符或数值）、布尔型（使True或False表示）和空值。
在Javascript的基本类型中的数据可以是常量，也可以变量。
由于Javascript采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。
当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。
②Javascript的程序构成
if条件语句、For循环语句、while循环
③Javascript中的函数
④Javascript的事件驱动和事件处理
Javascript是基于对象（object-based）的语言。
这与Java不同,Java是面向对象的语言。
而基于对象的基本特征，就是采用事件驱动（event-driven）。
它是在用形界面的环境下，使得一切输入变化简单化。
通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（EventDriver）。
而对事件进行处理程序或函数，我们称之为事件处理程序（EventHandler）。
♦事件处理程序
在Javascript中对象事件的处理通常由函数（Function）担任。
其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。
格式如下：
●事件驱动
Javascript事件驱动中的事件是通过鼠标或热键的动作引发的。
它主要有以下几个事件：
⑤浏览器对象层次及其主要作用
编程人员利用以下这些对象，可以对WWW浏览器环境中的事件进行控制并作出处理。
在Javascript中提供了非常丰富的内部方法和属性，从而减轻了编程人员的工作，提高编程效率，这正是基于对象与面向对象的根本区别所在。
♦浏览器对象（Navigator）：
提供有关浏览器的信息；
♦窗口对象（Windows）：
Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性；
♦位置对象（Location）：
Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象；
♦历史对象（History）：
History对象提供了与历史清单有关的信息；
♦文档对象（Document）：
document对象包含了与文档元素（elements）一起工作的对象，它将这些元素封装起来供编程人员使用。
⑥窗口对象以及输入/输出应用
Javascript是基于对象的脚本编程语言，那么它的输入输出就是通过对象来完成的。
其中有关输入可通过窗口（Window）对象来完成，而输出可通过文档（document）对象的方法来实现。
（1）窗口对象
该对象包括许多有用的属性、方法和事件驱动程序，编程人员可以利用这些对象控制浏览器窗口显示的各个方面，如对话框、框架等。
在使用应注意以下几点：
♦该对象对应于HTML文档中的<
FrameSet>
两种标识；
♦onload和onunload都是窗口对象属性；
♦在Javascript脚本中可直接引用窗口对象。
如：
window.alert（"
窗口对象输入方法"
）
可直接使用以下格式：
alert（"
）
（2）窗口对象的事件驱动
窗口对象主要有装入Web文档事件onload和卸载时onunload事件。
用于文档载入和停止载入时开始和停止更新文档。
（3）窗口对象的方法
窗口对象的方法主要用来提供信息或输入数据以及创建一个新的窗口。
♦创建一个新窗口open（）
♦具有OK按钮的对话框
♦具有OK和Cancel按钮的对话框
confirm（）方法为编程人员提供一个具有两个按钮的对话框。
♦具有输入信息的对话框
prompt（）方法允许用户在对话框中输入信息，并可使用默认值，其基本格式如下：
（4）窗口对象中的属性
窗口对象中的属性主要用来对浏览器中存在的各种窗口和框架的引用。
（5）输出流及文档对象
在Javascript文档对象中，提供了用于显示关闭、消除、打开HTML页面的输出流。
♦创建新文档open（）方法
使用document.open（）创建一个新的窗口或在指定的命令窗口内打开文档。
由于窗口对象是所加载的父对象,因而我们在调用它的属性或方法时,不需要加入Window对象。
例用Window.Open（）与Open（）是一样的。
打开一个窗口的基本格式：
Window.open（"
URL"
"
窗口名字"
窗口属性"
]
4）客户端脚本体系结构——DHTML/CSS
见“实验内容2”。
采用层叠式样式表的优点：
♦可以只通过修改一个文件就改变页数不定的网页的外观和格式；
♦可以保证在所有浏览器和平台之间的兼容性；
♦更少的编码、更少的页数和更快的下载速度。
5）网站发布
目前常用协议是HTTP和FTP。
其中HTTP主要用于下载数据，但是也可以使用HTTP来上载数据；
FTP是传统传输协议，主要用于上传和从Internet上下载文件，与HTTP相比，它的传输速度明显要快得多，同时它可以向未安装服务器扩展的服务器上发布站点。
使用FTP作为传输协议时，可以使用专门的FTP软件（例如Cuteftp）来传输，也可以采用网站提供的程序方式或者类似Frontpage中的站点发布功能来发布站点（实际也是使用FTP协议）。
2、方法和手段
根据个人网站的规划与设计，在网站首页开发的基础上建立栏目链接，并完成整个网站的开发，在此过程中完整掌握Dreamweaver或Frontpage网页开发工具；
并要求通过CSS样式表控制网站的整体风格；
要求适当采用客户端体系结构以及Javascript技术加强网站的动态效果，特别是后者需要重点加强运用。
具体要求：
1）网站开发过程中要求注意紧扣主题、界面美观、内容丰富；
2）页面中的图片要使用合理，尽量不要使用太大的图片，也不要使用过多图片，图片显示要正确有效（建议使用相对地址）；
3）文件夹的组织要求清晰有条理；
4）各个页面之间的链接要合理有效；
5）必要时用手工优化代码，不要产生过多的垃圾代码。
四、实验步骤
1）设置首页的栏目链接；
2）设计整个网站的目录结构，建议设置Images文件夹放置图片文件，设置CSS以及JS文件夹放置CSS样式表文件以及Javascript脚本文件，文件夹组织要求层次不超过三层，逻辑清晰；
3）收集、整理和编辑网站需要的图片素材以及内容资料，适当的时候对图片进行一定的处理；
4）网站中的整体风格（BODY、TABLE等HTML标记的风格要求使用CSS样式表进行设置），此外可以使用CSS样式表实现其他相关样式以及动态效果；
5）按照栏目顺序逐个进行网页编辑，要求风格统一、紧扣主题、特色鲜明，文件名尽量采用建议命名方式；
6）针对网站的特点采用Javascript技术设置人性化的互动环节；
例如显示问候、当前日期显示等等；
7）根据网站需要加入动态效果，建议采用客户端脚本——Javascript实现，也可以采用客户端应用（JavaApplet、ActiveX）以及Flash等其他技术实现。
2、申请网站空间并完成网站上传
1）申请免费网站空间；
2）将发布个人网站，通过FTP方式实现，可以采用空间提供的方式，也可以采用CuteFtp等工具实现上传，确保网站发布后图片以及链接访问正确。
五、实验报告
见学生具体案例。
六、实验思考题
1、CSS样式表与直接使用HTML标记设置属性区别在哪？
答：
CSS样式表可以只通过修改一个文件就改变页数不定的网页的外观和格式；
可以保证在所有浏览器和平台之间的兼容性；
而且使用样式表可以用更少的编码实现目标效果，而甚至于某些效果在HTML标记中是无法实现的。
2、请说明自己的网站文件夹组织方式以及这样设置的原因。
答：
主目录存放主要的网页文件，首页文件名为index.htm，目录分为:
[images]：
存放图象文件；
[css]：
存放CSS样式表文件；
[js]：
存放Js文件
[Flash]：
存放Flash文件。
3、请说明Javascript实现显示日期时间与服务端程序设置显示日期时间的异同？
这个实际也是客户端动态与服务端动态的区别，Javascript实现显示日期是从客户端获取时间，需要使用客户端资源，而后者使用的是服务端资源；
从服务端显示日期能保证所有客户端查看的日期是一致的（都是从服务端中获取当前日期），而客户端js不是；
并且客户端显示日期需要考虑客户端是否支持js，也就是说存在浏览器兼容问题，而服务端显示日期不存在浏览器兼容问题。
4、在网站开发过程中需要将超级链接的地址以及图片地址设置为相对地址，为什么？
绝对地址需要写明目标图象或者超级链接的完整位置，而相对地址只是写名其相对于本页面的相对位置。
我们需要写相对地址的原因在于不能保证网站拷贝或者上传后图象和超级链接还能够在原先的绝对位置，如果更换了位置，图象和超级链接就完全可能无法查看和链接，但是如果使用相对地址，只要文件相对于网页的位置不变更换地址或者位置都不会影响到图象浏览和超级链接。
七、实验结果分析与建议
实验报告格式说明
1．标题：
二号宋体；
2．表中内容：
1）标题：
五号黑体；
2）正文：
五号宋体，单倍行距；
3）图片：
无缩进，居中显示；
4）图片编号：
项目号＋序号，即如果在实验步骤栏目中的图片，采用类似“2-1”的形式，格式为小五黑体，无缩进居中显示；
3．纸张：
16开（18.4cm×
26cm）
4．版面格式：
上下边距：
2cm；
左右边距：
2.5/2cm
5．文档编号：
JS-班级学号－姓名－报告序号
升级会员 