admin 管理员组文章数量: 1086019
2024年5月11日发(作者:oracle数据库管理员认证)
《企业网站开发》实验指导书
计算机科学与技术学院
2013-3
网页制作实验指导书
目录
实验一 HTML语言标志 ................................................................................................................ 1
【实验目的】 ........................................................................................................................... 1
【实验环境】 ........................................................................................................................... 1
【实验重点及难点】 ............................................................................................................... 1
【实验内容】 ........................................................................................................................... 1
实验二 使用Dreamweaver创建本地站点 .................................................................................... 2
实验三 网页编辑与超链接 ........................................................................................................... 6
【实验目的】 ........................................................................................................................... 6
【实验环境】 ........................................................................................................................... 6
【实验重点及难点】 ............................................................................................................... 6
【实验内容】 ........................................................................................................................... 6
实验四 网页图像的应用 ............................................................................................................... 7
实验五 表格和布局表格 ............................................................................................................... 10
【实验目的】 ......................................................................................................................... 10
【实验环境】 ......................................................................................................................... 10
【实验重点及难点】 ............................................................................................................. 10
【实验内容】 ......................................................................................................................... 10
实验六 CSS样式的应用 ............................................................................................................. 11
【实验目的】 ......................................................................................................................... 11
【实验环境】 ......................................................................................................................... 11
【实验重点及难点】 ............................................................................................................. 11
【实验内容】 ......................................................................................................................... 11
实验七 层....................................................................................................................................... 12
实验八 Dreamweaver的框架和行为 ........................................................................................... 13
【实验目的】 ......................................................................................................................... 13
【实验环境】 ......................................................................................................................... 13
【实验重点及难点】 ............................................................................................................. 13
【实验内容】 ......................................................................................................................... 13
实验九 Dreamweaver的模版 ....................................................................................................... 14
【实验目的】 ......................................................................................................................... 14
【实验环境】 ......................................................................................................................... 14
【实验重点及难点】 ............................................................................................................. 14
【实验内容】 ......................................................................................................................... 14
实验十 Dreamweaver表单 ........................................................................................................... 15
【实验目的】 ......................................................................................................................... 15
【实验环境】 ......................................................................................................................... 15
【实验重点及难点】 ............................................................................................................. 15
【实验内容】 ......................................................................................................................... 15
1
网页制作实验指导书
实验顺序
实验一
实验二
实验三
实验四
实验五
实验六
实验七
实验八
实验九
实验十
HTML语言标志
实验名称 课时
2
2
2
2
4
4
2
4
4
4
时间
2013-2-26
2013-3-5
2013-3-12
2013-3-19
2013-3-26
2013-4-9
2013-4-16
2013-4-30
2013-5-14
2013-5-28
使用Dreamweaver创建本地站点
网页编辑与超链接
网页图像的应用
表格和布局表格
CSS样式的应用
层
Dreamweaver的框架
Dreamweaver的模版
Dreamweaver表单
2
网页制作实验指导书
实验一 HTML语言标志
【实验目的】
1.掌握
的2.掌握使用
3.掌握使用标记设置文字的属性;
4.掌握在网页中插入背景图片;
5.掌握在网页中插入水平线,并设置水平线的属性;
6.掌握在网页中插入背景音乐。
【实验环境】
Windows xp
【实验重点及难点】
掌握字体、水平线等常用标记。
【实验内容】
1、制作一个简单的网页,用记事本编辑,内容为个人简介信息。
要求:
搜索关键字为“个人”“主页”“简介”,标题为我的个人简介。
背景为#33ccff,文本颜色为黑色,文本需分段表示。
2、过记事本编辑网页,内容为李白的诗“静夜思”。
要求:每行诗为一个段落,四行文字颜色不同,字体不同。
3、通过记事本编辑网页,实现如下页面。图片自选,插入背景音乐“故乡的云.mp3”。
1
网页制作实验指导书
实验二 使用Dreamweaver创建本地站点
一、实验目的
1、掌握认识并熟悉Dreamweaver的工作界面。
2、能够自定义工作环境。
3、进行一个简单的网页设计。
二、实验内容
建立一个以自己名字命名的站点,该站点包含三个文件夹,image,css,mdb,四个网
页,分别为,,,,设置主页的标题
为“本站主页”。其中页面效果图如2-1-1所示。
图2-1-1
三、知识点分解
本实验主要涉及到如下知识点:
1、 在Dreamweaver中建立站点。
2、 在Dreamweaver站点文件列表下新建文件和文件夹。
3、 在网页中插入背景图片。
四、实验步骤
1、创建本地站点步骤:
(1) 打开DREAMWEAVER,选择菜单下[站点]/[管理站点]|/[新建]/|[站点]命令.弹出如图
2-1-2所示对话框。
(2) 在弹出“站点定义”对话框的“高级”标签中输入如下信息。
2
网页制作实验指导书
图2-1-2
(3) “站点名称”——输入站点名称如“myweb”。
(4) “本地根文件夹”——选择本地文件夹如“Dmyweb”
(5) “自动刷新本地文件列表”——选中是否每次拷贝文件到本地站点时都自动更新本
地文件夹列表,选中该选项。
(6) “默认图像文件夹”——选择图像所放置的文件夹如“‘Dmyweb image”
注意:图像文件夹一定要在站点文件夹下,且一般命名为image或images。
(7) “HTTP地址”——输入实用的完整网站的URL,以便Dreamweaver能检验使用绝
对URL网站链接。
(8) “缓存”——选择是否创建一个缓存以提高链接和网站维护任务的速度。选中该选
项。
(9) 设置完毕,点击“确认”按钮。
(10) 在Dreamweaver的工作界面右侧“浮动面板组”中的“文件”面板中的“文件”
标签下就能看到刚才新建的站点myweb,如图2-1-3所示。
图2-1-3
如果要对所建立的站点进行修改的话,可以选择菜单下[站点]|[管理站点]| [编辑]命令。
3
网页制作实验指导书
2、在站点文件列表下新建文件和文件夹步骤:
(1)在站点文件列表中右键单击“站点—myweb(D:myweb)”,在弹出的菜单中选择“新
建文件夹”,文件列表中就会出现名为“新建文件夹”的文件夹,将该文件夹命名为image,
同样操作建立css文件夹和mdb文件夹。
(2) 在站点文件列表下新建文件有2种方法:
a) 选择[文件]|[新建],在弹出的“新建文档”对话框中,选择“HTML”,就新建了一
个HTML网页,然后再选择[文件]|[保存]或者是按【Ctrl+S】键,将网页名称改为,
同样操作建立, ,。
b)在站点文件列表中右键单击“站点—myweb(D:myweb)”,在弹出的菜单中选择“新
建文件”,文件列表中就会出现名为“新建文件”的网页文件,将该文件命名为,
同样操作建立, ,。
3、在“文件列表”中选中文件,单击右键,在弹出的菜单中选择“设为首
页”,回到页面上,在“文档工具栏”中将“标题”更改为“本站主页”。
注意:要想在站点文件列表下自动出现新建的文件和文件夹,前提条件必需在建立站点
时选中“自动刷新本地文件列表”,否则的话必需单击“刷新
件和文件夹,效果图如图2-1-4所示。
”按钮才能出现新建的文
图2-1-4
4、设计网页步骤:
(1)在站点文件列表中双击,打开该网页。
4
网页制作实验指导书
(2)将光标定位到“文档工具栏”中的“标题”,将标题中的内容改为“本站主页”,如
图2-1-5所示。
图2-1-5
(3)单击“属性面板”中的“页面属性”按钮,弹出如图2-1-6所示的“页面属性”对
话框,单击“背景图像”后面的“浏览”按钮,添加背景图像即可。
(4)在工作区的“编辑窗口”中输入“欢迎光临我的小站”
图2-1-6
(5)浏览测试。浏览测试的方法有3种,第1种方法是直接按【F12】键,这是最快捷
的方法,建议大家以后尽量采用这种方法。第2种方法是单击如上图所示的“文档工具栏”
中的 按钮,在弹出的菜单中选择“预览在iexplore”命令后即可在IE浏览器中浏览当
前网页。第3种方法是选择[文件]/[在浏览器中预览]/[iexplore]菜单命令即可在IE浏览器中
浏览测试当前网页。
思考题
:在设置网页背景图像时,如果图像太小,铺不满整个网页,怎么办?
5
网页制作实验指导书
实验三 网页编辑与超链接
【实验目的】
2.掌握使用
标记;3.掌握使用标记设置滚动字幕;
4.掌握使用列表标记。
【实验环境】
Windows xp
【实验重点及难点】
掌握使用超级链接、列表、滚动字幕等HTML常用标记。
【实验内容】
1、制作一个网页,用记事本编辑。
要求:
网页名称为:超级链接练习
以一张图片作为背景,并且设置图片固定。合理设置文字的颜色,和超级链接的颜色。
插入超链接至许昌学院主页。
2、新建网页,实现如下页面。
要求:
网页名称为“滚动字幕”。
滚动字幕范围为高200像素,宽180像素,向上滚动,鼠标移动到文字上方,停止滚动,
鼠标移开,文字继续滚动。设置合适的滚动速度。
文字居中对齐在滚动区域。
6
网页制作实验指导书
实验四 网页图像的应用
一、实验目的
1、通过本例要求掌握常见的图像格式及图像的插入方法。
2、能够修改图像属性,利用外部图像处理软件编辑图像。
3、掌握图像导航条的制作。
4、掌握将Word中的文字复制到Dreamweaver中的方法。
5、掌握在页面中创建轮换图像。
二、实验内容
1、效果图如图2-4-1所示,当鼠标移到每张图像上时会显示另外一张图像,
单击“本站首页”图像时会打开,文章内容在“执着.doc”中。
图2-4-1
三、知识点分解
1、由图2-4-1可以看出,该页面最上面导航条,导航条下面是水平线,正文的格式与
“执着.doc”格式一致。在做之前,要利用图像处理软件做出图所示的导航按
钮,注意要做10个按钮图像,并且保存为网页中能使用的图像格式。
四、实验步骤
导航条由图像或图像组组成,这些图像的显示内容随操作不同而不同。导航条通常为在
站点上的页面和文件之间移动提供一条简捷的途径。导航条可以进行复制,可以对导航条附
加行为以应用于不同的网页。一个网页中只允许有一个导航条。导航条项目有如下4种状态:
一般、滑过、按下、按下时鼠标经过。在创建导航条时,不必包含所有这4种状态的导航条
图像,可以只选用“一般”和“按下”或“滑过”这两种状态。
1、打开,将光标定位到要插入导航条的位置。
2、执行下列操作之一打开“插入导航条”对话框:
(1) 单击“插入栏”的“常用”选项卡,并单击“插入导航条”按钮 ,弹出如图2-4-3所示对
话框;
(2) 选择[插入][图像对象][导航条]菜单命令。
7
网页制作实验指导书
图2-4-3
3、在“插入导航条”对话框中进行具体的设置。设置的具体方法如下。
a) 在“项目名称”文本框中,输入导航条项目的名称(如sy)。该名称只能包含字母和数
字且不能以数字开头。
b) 在“状态图像”(必需)文本框后,单击
c) 在“鼠标经过图像”文本框后,单击
按钮选择最初将显示的图像。
按钮选择当一般图像显示时如果鼠标指
针滑过项目所显示的图像。
d) 在“替换文本”文本框中,输入项目的描述性名称。
e) 在“按下时,前往的 URL”文本框中,单击按钮选择要打开的链接文件(如
)然后从右侧的下拉列表中选择打开文件的位置。
f) 选中复选框,可在载入页面时下载图像。如果未选择此选项,在鼠
标指针滑过鼠标经过图像时可能会出现延迟。
4、单击按钮可向导航条添加另一个项目,然后重复上述步骤定义该新项目。若要
按钮删除即可。单击减少导航元件,可先在导航元件列表中选择要删除的项,再单击
按钮或按钮,可以改变导航条元件的出现顺序。本例中导航条项目顺序为“sy”、“jdwz”、
“grwz”,“rszl”。
5、完成导航条项目的添加及定义后,单击按钮,完成的导航条添加。
6、选中导航条,单击“属性面板”中的“居中”按钮。
7、将光标定位到导航条后面,敲回车,然后单击“插入”面板的“HTML”选项卡,再单
击“水平线”按钮 ,插入水平线。
8、打开“爱情人生.doc”文件,选择“Ctrl+A”,”Ctrl+C”。
8
网页制作实验指导书
9、将光标定位到水平线后面,敲回车,选择[编辑][带格式粘贴]菜单命令,即将word
文档内容带格式一起粘贴到网页中。
10、按【F12】键,预览。
思考题:在做网页时,经常需要用图像处理软件来制作图像,如本实验中的导航条图像,但
是在将该图像插入到Dreamweaver中会经常遇到图像不能紧密的结合在一起,如下图所示,
怎么才能将他改成图2-4-1所示的导航条的效果呢?
9
网页制作实验指导书
实验五 表格和布局表格
【实验目的】
1.学会在Dreamweaver插入表格,设置表格属性;
2.掌握分别使用表格和布局视图,进行页面布局;
3.掌握在网页中使用层,设置透明FLASH。
【实验环境】
Windows xp,Dreamweaver 8。
【实验重点及难点】
掌握在Dreamweaver中插入表格,进行页面布局,使用层和设置flash。
【实验内容】
1、使用Dreamweaver建立如下网页(歌曲自选,至少选择3首歌曲)。
2、练习在Dreamweaver中用表格布局建立此页面。用层插入一个透明flash动画。
10
网页制作实验指导书
实验六 CSS样式的应用
【实验目的】
1.了解css样式的分类
2.掌握使用CSS标记,设置文字样式。
【实验环境】
Windows 系统专业版
【实验重点及难点】
练习CSS的三种使用方式。
外部样式表的使用
内部样式表的使用
内嵌样式的使用
【实验内容】
1、在实验六文件夹中有一个简单的网页文件,要求给该网页添加自定义css样式,css
样式要求为:字体为“幼圆”,字号为36,字体颜色为红色,并且使得网页中正文的第二段
文字应用该样式。
2、在文件夹中有一个简单的网页文件,要求给该网页添加
标签css样式,css样
式要求为:字体为“幼圆”,字号为24,字体颜色为红色。修改后保存覆盖原有文件。
3、阐述改变网页中超链接文本样式的几种的方式。
11
网页制作实验指导书
实验七 层
实验目的:
为了让学生掌握如何利用层来布局网页,掌握层的插入,设置层的各项属性,
利用层与行为的应用来创建层动画以及“行为”的添加等操作。
素材准备:
准备制作网页所需的文字素材、图像素材、音乐素材。
实验内容:
1. 使用层排版
2. 设置层文本
3. 显示隐藏层
4. 拖动层
5. 调整层的大小
6. 层的对齐
7. “行为”调用
实验步骤:
1. 新建一个页面,用表格划分布局。
2. 在左侧第二个单元格中插入“保存图像”“原始状态”两个提交按钮。
3. 左侧小女孩分为三个层,并设置层名字分别为“tou”, “yi”、 “ku”
显示属性都为可见;
4. 右侧衣服分为四个层,并设置名字分别为“yi1”, “yi2”、 “ku1”, “ku2”
显示属性都为可见;
5. 利用层与行为来制作显示与隐藏层动画:选择“yi1”,添加一个“显示
-隐藏层”行为,设置”tou” 可见, ”ku”可见; ”yi1”可见,其它
全部隐藏事件改为onClick;再添加一个双击脱下衣服,还原行为,设置”
tou” 可见, ”ku”可见; ”yi”可见,其它全部隐藏事件改为onDblClick.
6. 利用同样的道理,设置分别单击,双击”yi2””ku1””ku2”的事件行
为。
7. 保存文件,预览文件效果。
12
网页制作实验指导书
实验八 Dreamweaver的框架和行为
【实验目的】
1.掌握建立框架;
2.掌握Dreamweaver中行为的使用。
【实验环境】
Windows xp,Dreamweaver 8。
【实验重点及难点】
掌握Dreamweaver中框架和行为的使用。
【实验内容】
1、熟悉框架页面的制作。
13
网页制作实验指导书
实验九 Dreamweaver的模版
【实验目的】
1.掌握创建一个简单的网站主页;
2.掌握模版的创建和使用;
3.掌握CSS样式。
【实验环境】
Windows xp,Dreamweaver 8。
【实验重点及难点】
掌握模版和CSS在网站中的应用。
【实验内容】
1、自己构建一个网站主页。要求应包括:网站的标志、导航条、主题栏目、友情链接等。
2、将第1题制作的网站另存为模版,使用此模版制作第二个页面,要求只修改文字内容不
修改布局和图片。
3、从网上下载一篇文章在此文章中实现三种CSS选择器类型:类、标签、超级链接CSS
样式。可选择导出样式表或者只针对该文档。
14
网页制作实验指导书
实验十 Dreamweaver表单
【实验目的】
1.掌握在Dreamweaver中建立站点。
2.掌握如何创建热区,设置热区链接。
3.掌握在Dreamweaver中建立表单。
4.掌握建立锚点,实现同一页面的跳转。
【实验环境】
Windows xp,Dreamweaver。
【实验重点及难点】
掌握在Dreamweaver中设置热区,建立表单、创建锚点和链接。
【实验内容】
1、从网上下载地图,练习热区,设置热区超级链接。
2、建立如下表单页面。
15
版权声明:本文标题:html实验报告 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://roclinux.cn/p/1715400471a687811.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论