网页设计实验指导.docx
- 文档编号:18210961
- 上传时间:2023-08-13
- 格式:DOCX
- 页数:25
- 大小:408.84KB
网页设计实验指导.docx
《网页设计实验指导.docx》由会员分享,可在线阅读,更多相关《网页设计实验指导.docx(25页珍藏版)》请在冰点文库上搜索。
网页设计实验指导
《网页设计与制作实验指导书》
河南科技大学管理学院
目录
实验规则3
实验报告要求4
基本实验方法4
实验环境4
实验一Dreamweaver8基本操作、站点管理5
实验二网页的定位技术以及制作层动画7
实验三网页编辑与超链接13
实验四层叠样式、模板和库17
实验五表单与表单域23
实验规则
为了顺利完成实验教学任务,确保人身设备安全,培养严谨、踏实、实事求是的科学作风和爱护国家财产的优良品质,特制定以下实验规则:
1、实验纪律
(1)在实验室不得做和实验无关的事情。
(2)遵守纪律,不迟到,不旷课。
(3)不能拆卸硬件,更不能拿走实验设备或仪器。
(4)保持实验室安静、整洁,爱护公物。
2、实验过程
(1)预习实验内容。
(2)上机操作。
记录实验中遇到的问题,主要是错误信息和错误原因。
(3)检查操作结果是否正确。
(4)根据实验过程的记录书写实验报告。
实验报告要求
1、报告用纸采用统一的河南科技大学实验报告用纸,或按照指导老师指定的统一格式打印。
2、实验报告封面内容
实验名称:
(如实验一网页的定位技术)
班级名称:
(如计031班)
学生学号:
学生姓名:
实验时间:
3、实验报告内容
见各具体实验项目的要求。
基本实验方法
本实验要求熟悉Dreamweaver8.0的工作环境和网页设计制作的相关知识。
实验环境
Dreamweaver8.0
实验一Dreamweaver8基本操作、站点管理
一、实验目的和要求:
1.掌握Dreamweaver8启动和退出的方法。
2.掌握本站点的设置方法。
3.掌握创建、打开和保存HTML文档的方法
二、实验内容:
1.网页编辑器的基本操作
(1)用不同的方法启动和退出Dreamweaver8。
(2)用快捷键打开和关闭【插入】面板和【属性】面板。
(3)将【代码】浮动面板组打开后,先移出,再移入浮动面板放置区,然后再将【设计】浮动面板组中的【CSS样式】组合到【代码】浮动面板组中。
察看浮动面板组操作后的效果。
(4)用快捷键关闭和打开浮动面板组,用鼠标折叠和展开各个浮动面板组,察看浮动面板组操作后的效果。
2.建立网站的基本操作
(1)打开站点管理器,在本地计算机的当前盘根文件夹中,建立名为myweb的文件夹。
(2)把文件夹myweb设置为本地站点的根文件夹。
然后建立名为image文件夹。
(3)在本地计算机的当前盘根文件夹中,建立名为oursite的子文件夹,并切换为本地站点的根文件夹。
3.文件管理基本操作
(1)将ch12\material文件夹中的两个文件bg0004.gif和bg0093.gif及myrose中的文件rose.htm,分别复制到本地站点“我们的站点”的oursite文件夹中。
(2)在文件夹中oursite中新建子文件夹image,并将oursite中的文件bg0004.gif和bg0093.gif转移到image文件夹中。
(3)请正确显示rose.htm网页。
4.制作简单网页
按下述要求制作网页exe12-1.htm,如图12-2所示。
(1)页面的背景图片为ch12\material文件夹中的图片bg0015.jpg。
(2)在合适的位置上插入ch12\material文件夹中的图片文件ex1.jpg。
(3)在网页中输入文字:
一件好的作品,如一阵清新的风,一曲温婉的歌,让人心旷神怡。
一件好的作品,如一杯香醇的茶,一瓶陈年的酒,让人回味无穷...
(4)将网页用exe12-1.htm为名保存在本地站点的文件夹oursite中。
图12-2简单网页exe12-1.htm
三、实验学时:
3学时
实验二网页的定位技术以及制作层动画
一、实验目的和要求:
1.掌握表格创建和编辑的方法
2.掌握布局表格和布局单元格的使用方法
3.掌握层的创建、编辑和应用的方法
4.掌握框架网页的创建、编辑和保存的方法
二、实验内容:
1.表格的创建、插入、删除、复制和移动等操作
(1)创建一个名为exe14-1.htm的网页文件,将其保存到Mysite文件中。
在页面上输入4行5列的表格,表格宽度为500像素,表格的边框为1像素,在表格中输入如表14-1所示的内容。
并在表格上方增加标题“信息学院各班平均成绩”,标题格式设置为方正舒体、5号、粗体、#003366。
表14-1各班平均成绩表
科目
数据原理
计算机组成实验
英语精读
电子商务
00级1班
73
85
77
79
01级1班
83
79
82
91
01级3班
90
80
85
92
(2)在表格“01级3班”前插入一行。
内容为“01级2班、85、82、88、82”。
在表格中“计算机组成实验”列插入一列。
内容为“计算机组成、69、73、75、80”。
(3)将00级1班这一行移到表格的最后一行,删除“英语精读”这一列。
2.单元格的拆分、合并和格式化操作
(1)是表格中的数据全部居中;是整个表格在页面上居中。
(2)按不同年级将表格拆分成两个表格,将01级表格的“科目”一行复制到00级表格上方,使之成为00级表格的第一行,在00级表格上面加上1行标题“信息学院00级平均成绩表”,并删除00级表格的“科目”这一列。
(3)将01级表格的“计算机组成”和“计算机组成实验”两个单元格合并成一个单元格,内容改为“计算机组成和实验”、居中、黑体、5号。
(4)01级和00级两个表格分别套用系统预设的格式Simple3、Simple1。
3.导入外部数据和表格排序
(1)将Excel文件value.xls打开,另存为Mysite\value.csv文件,数据的分隔符是逗号。
(2)新建名为exe14-2.htm的网页文件,将其保存到Mlysite文件中。
背景图片为Mysite\jpg\bg0015.jpg。
导入数据文件value.csv.
(3)按表格的“合计值”列降序排序,合并表格标题所在的单元格,并使标题居中。
(4)表格【边框】为3;【边框颜色】为#FF0000。
4.布局表格和布局单元格的应用
(1)创建一个名为exe14-3.htm的网页文件,将其保存到Mysite文件夹。
网页背景图片文件为Mysite\gif\bg0052.gif,用600*360像素的布局表格布局,布局表格中的3行5列布局单元格每个为120*120像素,如图14-5所示。
图14-5页面布局表格示意
(2)如图14-5所示,在布局单元个中分别设置布局单元个的颜色#CCCC99、#FF9900。
(3)如图·4-5所示,在布局单元格中分别插入Mysite\jpg文件夹中的名为tu1.jpg、……..tu7.jpg的图片。
(4)预览页面后,保存该文件。
5.层的基本操作
(1)创建议个名为exe14-4.htm的网页文件,将其保存到Mysite文件中。
设置背景图片Mysite\gif\bg0052.gif。
(2)在网页合适的位置上,分别创建两个名为source和shadow的层,层的尺寸为550*70像素,Z-index的值分别为2和1。
(3)在层中输入文字“书-人生的伴侣,知识的源泉”,两个层中的文字颜色分别为红色和黑色,字体及大小自行定义。
移动层,使两个层略微错开重叠,使文字带有阴影效果,如图14-6所示。
图14-6两个层错开重叠
(4)打开【层】浮动面板,选中【防止重叠】复选框,然后移动名为source的层,试比较改复选项与不选的区别。
(5)分别完成激活层、选中层、改变层的大小、改变层的可见性的操作。
(6)改变这两个层的叠放次序,使名为source的层成为shadow层的子层,观察改变后的结果,然后恢复原样。
6.层与表格的综合练习
(1)创建名为exe14-5.htm的网页文件,将其保存到Mysite文件夹中。
设置背景图片为Mysite\jpg\bg0006.gif。
在网页合适的位置上插入1行4列的表格。
表格的各项参数为【宽】为360像素、【高】为30像素、【背景颜色】为#FFFFEE、【边框颜色】为#99CCCC、【边框】为2像素、【填充】为0、【间距】为0。
(2)每个单元格中的内容分别为“现代生活”、“生活艺术”、“文化教育”、“科学技术”。
(3)在网页合适的位置上插上4个层,层的大小为90*90像素,在每个层中插入一个4行1列的表格,表格的每个单元格的大小分别为90*22像素,【边框】为1像素、【背景颜色】为#FFFFEE,如图14-7所示。
图14-7由层和表格组成的下拉菜单
(4)改变这4个层的叠放次序和改变层的可见性,观察结果后保存文件,(该文件在实验15中还会有用)。
7.框架和框架集的创建、选者和保存
(1)创建一个名为exe14-6.htm的网页文件,将其保存到Mysite文件中。
用鼠标、菜单两种不同的方法创建【左侧和嵌套的顶部框架】和【顶部和嵌套的左侧框架】,试比较两种框架的不同之处。
(2)删除上题中创建的框架,然后创建【顶部框架】,并把【顶部框架】改为【顶部和嵌套的左侧框架】,调整框架的大小。
(3)分别用鼠标在框架面板中选中主框架(bottomFrame),选中左框架(leftFrame)插入顶部框架,将左框架分割成上(topFrame)下(leftFrame)两部分。
(4)在主框架(mainFrame)中插入底部框架(bottomFrame),选中左框架(leftFrame)插入顶部框架,将左框架分割成上(topFrame)下(leftFrame)两部分。
(5)将左框架(leftFrame)调整为与底部框架(bottomFrame)高度相同。
(6)分别在框架面板中选中topFrame、topFrame1、mainFrame、leftFrame、bottomFrame5个框架,并给5个框架设置背景颜色#AAFFFF、#CCFFFF、#CCFFCC、#CCFFCC、#CCFFFF。
#AAFFFF
#CCFFFF
#CCFFCC
#CCFFFF
(7)用topFrame、topFrame1、mainFrame、bottomFrame、leftFrame为框架文件名和exe14-6.htm为框架集名保存框架文件到Mysite文件中。
8.设置框架和框架集的属性和超链接
(1)设置exe14-6.htm框架文件的框架集属性。
各项参数分别为:
【边框】为是、【边框颜色】为#00CCFF、【边框宽度】为2像素、左边【列】为200像素。
(2)分别设置【列】的单位,在【单位】下拉式菜单中分别选者【像素】、【百分比】、【相对】命令,观察不同的结果。
(3)设置exe14-6.htm框架文件的框架属性。
.在名为topFrame1的框架中,插入一个大小为120*160像素的层,层中插入4行1列的表格,表格为120*160像素,边框宽度为1像素。
.在表格的4个单元格里分别插入Mysite\jpg文件中4个按钮图片文件a1.jpg、a2.jpg、a3.jpg、a4.jpg。
.在主框架(mainFrame)中,设置框架链接的页面文件为Mysite\doc文件中的oa.htm,【滚动】的方式为自动,【边框宽度】为120像素,【边框高度】为30像素。
.在顶框架(topFrame)中,插入Mysite\swf文件中的Flash文件shu.swf.
.在左框架(leftFrame)和底部框架(bottomFrame)中输入如图14-13所示的文字。
(4)在【属性】面板中分别为4个单元格里的按钮图片建立链接,被链接的网页文件分别是Mysite\doc文件中的literature.htm、art.htm、edu.htm、sice.htm,被链接的网页在主框架中显示。
(5)预览网页后,保存网页文件。
9.时间轴动画的制作
(1)创建网页文件exe15-6.ht,在4个层中插入Mysite\img文件夹中的图像文件camp1.jpg、camp2.jpg、camp3.jpg、camp4.jpg,并将这4个层叠放在一起,用时间轴控制层的显示顺序,每过半秒钟显示一幅层中的图像。
一个循环依次显示这4幅图像,循环5次后停止,保存文件后,预览页面观察效果。
(2)创建网页文件exe15-7.ht,设置背景图像bg0052.gif。
在网页合适的位置上插入一个层,层中插入Mysite\img文件夹中的图像文件email.gif。
创建时间轴动画,动画运动轨迹为一条水平直线,并设置每秒播放20帧,自动循环播放,动画条长度为50帧,保存文件后,预览页面观察效果。
(3)在上述时间轴动画条的第10、20、30、40、50帧处插入关键帧,然后用鼠标拖拽该层,改变在关键帧处的动画轨迹,使动画轨迹由原来直线轨迹改为波浪线轨迹,预览页面效果后用exe15-8.htm为名保存文件。
(4)在上述时间轴动画条的第10到20帧和第30到40帧隐藏层。
在第5层帧处插入关键帧,并为该帧添加行为,在响应事件onFrame5(即动画运行到第5帧时)时触发播放声音动作,播放wav声音Appluase.wav,预览页面观察效果后用exe15-9.htm为名保存文件。
(5)打开网页文件exe15-8.htm,在网页的合适位置上插入一个层,层中插入鼠标经过图像,原始图像和翻转图像分别为Mysite\img文件夹中的Play.jpg和Stop.jpg。
网页具有下列功能:
当用鼠标双击Play按钮时,此按钮翻转成Stop按钮,此时时间轴动画开始沿轨迹运动。
当用鼠标双击Stop按钮时,Stop按钮翻转成Play按钮,时间轴动画停止运动。
预览后用exe15-10.htm为名保存文件
(6)打开网页文件exe15-10.htm,在网页的右边和合适位置上插入一个层,层中插入图像文件bird.gif。
在网页上再增加一条时间轴动画条,控制新插入图像的运动轨迹,如图15-12所示,预览后,用exe15-11.htm为名保存文件。
三、实验学时:
6学时
实验三网页编辑与超链接
一、实验目的和要求:
1.掌握网页文档常用的格式化方法
2.掌握在网页中插入各种对象的方法
3.掌握超链接的创建方法
二、实验内容:
1.网页文档的基本操作
(1)将Mysite\doc文件中的两个word文件(oa.doc和book.doc)转换成WordHtml文件,分别以文件名exe13-1.htm和exe13-2.htm为名,保存在Mysite中。
(2)在Dreamweaver中,导入Mysite\exel3-1.htm文件。
并将Mysite\doc中book.doc文件的第2、3段文字插入到当前文档的最后面,并使插入的文字与原文档之间有空行。
(3)给页面文档添加标题“办公自动化”,并将网页标题改为“办公自动化一说”。
将网页中第2段文字删除,然后恢复。
(4)在网页第2段文字前插入一段文字:
“办公自动化的目标是提高办公的效率和办公的质量,由于如今技术和经济的发展,办公自动化早已超越了狭窄的办公室,人们把包括了办公与管理范畴的工作统称为办公自动化。
”
(5)将第1自然段折成两段,使“目前,以计算机为主要办公工具,…………促进现代办公自动化(OfficeAutomation)活动的迅速发展。
”的文字成为第2自然段。
(6)给第2、3段加项目符号。
并将文档中的文字“办公自动化”替代为“OA”。
(7)按功能键F12预览网页后,将文档中的文字“OA”恢复成“办公自动化”。
(8)预览该网页,以exe13-3.htm为名将其保存到Mysite中。
2.网页文档的格式化操作
(1)将Mysite\exe13-3.htm文档中的标题文字“办公自动化”作格式化,设置字体为【华文行楷】、【文本格式】为【标题】、【文本颜色】为红色,【居中对齐】、【粗体】。
(2)创建名为“标题1”的HTML样式,设置【格式】为【标题1】、【应用到】的范围为【段落】样式、【字体】为【华文行楷】、【颜色】为#0000FF、【样式】为粗体【B】、【对齐方法】为【居中对齐】。
(3)将名为“标题1”的HTML样式复制为名为“标题2”的HTML样式,设置【字体】为【方正舒体】、【应用到】的范围为【选定范围】的字符样式、【颜色】为#FF0000、【样式】为粗体【B】、字体【大小】为+5。
(4)创建名为“正文字符1”的HTML样式,将其设置为字符样式、【字体】为【楷体】,【样式】为粗斜体【B】、【I】,【颜色】为#000099,字体【大小】为+2。
(5)用HTML样式“标题1”格式化当前文档的标题;用HTML样式“标题2”格式化当前文档的第4段文字;用HTML样式“正文字符1”格式化当前文档的第5段文字。
(6)设置页面背景图片为Mysite\gif文件夹中的bg0052.gif图片文件。
预览网页后,保存网页文件为Mysite\exe13-4.htm。
3.图片的编辑操作
(1)创建一个如图13-3所示的名为exe13-5.htm的网页,设置其页面背景为bg0027.gif,网页标题为“图形编辑试验”,将其保存到Mysite中。
图13-3exe13-5.htm网页
在页面合适的位置插入一个两行两列的表格,表格中每个单元格为150*150像素。
在四个单元格中分别插入Mysite\jpg文件夹中图片文件t1.jpg、t2.jpg、t3.jpg、t4.jpg。
给每张图片设置2个像素的边框,分别给其中2张图片设置地带文字“书——精神的粮食”、“书——力量的源泉”,设置的代替文字是指在浏览时,但鼠标指向图片时显示的文字。
插入页面文字“书——精神的粮食”。
启动外部图片编辑器Fireworks,给4张图片加上文字“书籍”、“知识”、“力量”、“智慧”。
(2)创建一个名为exe13-6.htm的网页,如图13-4所示。
设置页面背景图片尾bg0026.jpg,并添加页面文字“书——知识的源泉”。
图13-4exe13-6.htm网页
在页面合适的位置插入1行4列的表格,每个单元格为79*79像素。
在四个单元格中制作【鼠标经过图像】,初始图片为t11.jpg、t22.jpg、t33.jpg、t44.jpg,翻转图片分别为t5.jpg、t6.jpg、t7.jpg、t8.jpg。
单击翻转图片时链接的页面文件分别是Mysite\html\中的edu.htm、art.htm、literatuer.htm、scie.htm。
预览后,保存该文件为Mysite\exe13-6.htm.
(3)创建名为exe13-7.htm的网页文件,如图13-5所示。
用Mysite\photo文件夹中的t1.jpg~~t8.jpg图片创建网上图片相册。
网页和相册标题为“书——知识的源泉”,背景图片为bg0026.jpg。
初始图片文件夹为Mysite文件夹下photo子文件夹,目标图片文件夹为本地根文件夹Mysite。
页面图片的缩略图尺寸为100*100像素;每行列数为4列,缩略图片文件格式为.jpg。
4.创建超链接
(1)打开Mysite\exe13-1.htm网页,在该网页文档的底部创建E-mail链接,电子邮件的链接的文本为“请与我们联系”;E-mail地址为练习者正式注册的电子邮件地址。
预览后,保存文件为Mysite\exe13-8.htm。
(2)打开Mysite\html\literature.htm网页文件,在该网页文件的首尾两处“中国文学”之中,分别插入名为W1和W2的锚点。
用选中文档第1行中的文字“古老民族”,作锚点W2的源端点,建立内部锚点链接,保存该文件为Mysite\exe13-9.htm;打开Mysite\exe13-3.htm网页文档,用标题“办公自动化”作锚点W1的链接源端点,建立外部锚点链接。
预览后,保存该文件为Mysite\exe13-10.htm。
(3)打开Mysite\exe13-1.htm网页,在该网页文档合适的位置添加一个跳转菜单,跳转菜单的第1项标识文字为“友情链接”。
跳转菜单的选项和链接网页URL,分为:
上海热线:
搜狐
网易
中文雅虎
预览后,保存该文件为Mysite\exe13-11.htm。
(4)打开Mysite\exe13-1.htm网页,在该网页文档合适的位置添加一个导航条,导航条上四个按钮分别是“现代文学”、“生活艺术”、“文化教育”、“科学技术”,四个按钮对应的图片文件分别是Mysite\button中的文件a1.gif~~~a4.gif、b1.gif~~~b4.gif、c1.gif~~~c4.gif、d1.gif~~~d4.gif,四个按钮所链接的网页分别为Mysite\html\literature.htm、art.htm、edu.htm、scie.htm。
预览后,保存该文件为Mysite\exe13-12.htm.
(5)创建名为exe13-13.htm的网页文件,在网页中合适的位置上插入Mysite\jpg\net1.jpg图片文件。
用多边形、圆形和矩形创建影射图链接,其中多边形、圆形和矩形影射图链接分别自选Mysit\html中的网页文件,预览后保存该文件。
三、实验学时:
3学时
实验四层叠样式、模板和库
一、实验目的和要求:
1.掌握附加和编辑外部样式表的方法
2.掌握CSS样式的各种特殊效果的方法
3.掌握创建和应用CSS样式及CSS样式表的方法
4.掌握模板的创建、编辑和应用的方法
5.掌握对象的创建、编辑和应用的方法
二、实验内容:
1.CSS样式表的创建、编辑和应用
(1)在网页编辑窗口中,打开本地站点Mysite\html文件夹中的art.htm文件。
修改文档的标题为“生活和艺术”,文档每段文符改成首行缩进两个字样。
(2)在本地根文件夹Mysite中,成绩名为docformat.css的层叠样式表文件,以及背景色为#99FFCC的层叠样式docformat。
(3)创建名为.char1的层叠样式,并将这个样式定义在docformat.css的层叠样式表文件中。
将其【类型】的参数设置:
【字体】为方正舒体、【大小】为36像素、【样式】为谢体、【颜色】#方法FF0000。
样式作用于标题文字“生活和艺术”。
(4)将名为.char1的样式复制成名为.char2的层叠样式,并将其【类型】的参数设置:
【字体】为楷体、【大小】为18像素、【样式】为正常、【颜色】为#000000。
样式作用第1段文字。
(5)新建名为.char3的层叠样式,并将其【类型】的参数设置:
【字体】为仿宋体、【大小】为18像素、【样式】为正常、【颜色】为#333333。
样式作用于第2段文字,浏览网页观察效果。
(6)将名为 .char3的样式修改:
【字体】为方正舒体、【大小
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 实验 指导
![提示](https://static.bingdoc.com/images/bang_tan.gif)