《网站与网页设计》实验大纲.docx
- 文档编号:30170417
- 上传时间:2023-08-05
- 格式:DOCX
- 页数:48
- 大小:1.54MB
《网站与网页设计》实验大纲.docx
《《网站与网页设计》实验大纲.docx》由会员分享,可在线阅读,更多相关《《网站与网页设计》实验大纲.docx(48页珍藏版)》请在冰豆网上搜索。
《网站与网页设计》实验大纲
《网站与网页设计》实验大纲
试验一、站点的建立,添加网页基本元素
一、实验目的:
通过本实例使学生掌握如何使用Dreamweaver8来建立站点和添加网页的基本元素。
实验环境:
1.windows9x/me/2000或windowsXP;
2.CPU:
Pentium
或更高级别的处理器;
3.硬盘:
1G以上可用空间;
4.显示器:
256色以上,800*600或1024*768分辨率;
实验软件:
Dreamweaver8
二、实验内容:
使用Dreamweaver8建立一个站点“小慧的家”,并添加一个表格,添加文本,插入日期和水平线,插入一个背景。
三、实验步骤:
1。
如图执行[站点][站点管理]在弹出的[站点管理]中单击[新建]按钮,选择[站点]命令,设置站点的名字为“小慧的家”。
2.插入一个表格对其参数进行设置如下:
将行数和列数都设为2,表格宽度设为600,单元格边距和单元格间距都设为30,其他不变,设置完后单击【确定】按钮。
在第一个单元格内输入“文字”二字,就可以看到表格的效果。
3.插入一些文字进行设置:
v正文的文字可以通过【页面属性】来完成设置。
执行主菜单下【修改】|【页面属性】命令,打开【页面属性】对话框进行设置。
或者单击【属性】面板上的【页面属性】按钮,打开【页面属性】对话框进行设置。
4.插入日期和水平线:
v插入水平线
执行【插入】|【HTML】|【水平线】命令,可以在编辑页面中插入一个水平线。
v插入日期
执行【插入】|【日期】命令;
或者单击【常用】工具栏上的日期按钮,在弹出的【插入日期】对话框中进行设置。
5.插入一个背景:
v插入背景图片
在【页面属性】对话框的【外观】分类中,单击【背景图像】后面的【浏览】按钮,选择“images”目录下的“back.gif”文件,单击【确定】按钮即可插入插入背景图片。
实验二、表格的插入和应用
一、实验目的:
通过本实例使学生掌握如何使用Dreamweaver8来插入表格,并对表格进行相关操作。
实验环境:
1.windows9x/me/2000或windowsXP;
2.CPU:
Pentium
或更高级别的处理器;
3.硬盘:
1G以上可用空间;
4.显示器:
256色以上,800*600或1024*768分辨率;
实验软件:
Dreamweaver8
二、实验内容:
使用Dreamweaver8插入一个表格,对表格进行操作。
三、实验步骤:
1。
表格的创建:
v表格的三个基本组成部分
行,表格中的水平间隔。
列,表格中的垂直间隔。
单元格,表格中一行与一列相交所产生的区域,用来存放图片或文字
v表格的创建
执行【插入】|【表格】命令,在弹出的【表格】对话框中进行相应的设置即可完成表格的创建。
执行【插入】|【表格】命令,弹出【表格】对话框,设置【行数】为4行,【列数】为3列,【表格宽度】为750像素,【边框粗细】为0像素,【单元格边距】为0像素,【单元格间距】为0像素,设置完后单击【确定】按钮。
在【属性】面板中将表格的【高】设置为200像素。
2.编辑表格与排版:
(1)选择单元格方法
在需要选择的单元格中单击鼠标,然后按住鼠标左键不放,同时向相邻的单元格方向拖动,这时候单元格就出现黑色边框,表示被选中。
按下键盘上的Ctrl键,在单元格上单击鼠标可以选中单元格。
或者在单元格上单击鼠标后,按快捷键Ctrl+A,也可以选中单元格
横向选择连续的单元格
v比如,从第一行第一列开始,在第一个单元格中单击鼠标,然后按住鼠标左键不放并向相邻的单元格拖动,直到需要选中的单元格出现黑色的边框时释放鼠标,可以看到,需要选择的单元格已经全部被选中了。
纵向选择连续的单元格
v选择整行单元格
可以将鼠标移动到行的最左边,当光标变成一个向右箭头的时候,单击就可以选中整行单元格。
v选择整列单元格
将鼠标移动到列的最上面,当光标变成一个向下箭头的时候,单击就可以选中整列单元格。
还可以通过单击相应列下面的绿色下三角按钮,在弹出的下拉菜单中单击【选择列】命令。
v如果要选择多个非连续的单元格,只要按下Ctrl键,依次单击要选择的单元格,直到所需要的单元格全部被选中为止。
v选择整个表格的方法
在第一个单元格中单击鼠标,然后按住鼠标左键不放,向右下角最后一个单元格拖动,直到所有单元格已经全部被选中。
可以将鼠标移动到单元格的边框上,当鼠标变成形状时单击,也可以选中整个表格。
或者把光标定位到其中一个单元格中,按两次快捷键Ctrl+A,也可以选中整个表格。
还可以单击“750”旁边的绿色下拉按钮。
在下拉菜单中单击【选择表格】命令。
(2)编辑单元格的宽高
v改变列宽度的方法
将鼠标移动到表格的列边框上,当出现形状的时候,左右拖动改变列的宽度;
按照提示“按键盘上的Shift键并拖动可以保留其他列的宽度”进行调整。
这种调整会使整个表格的宽度发生变化。
v改变行高度的方法
与改变列宽度的方法相同。
(3)插入和删除行和列
v插入行或列的方法
执行【修改】|【表格】|【插入行或列】命令,弹出【插入行或列】对话框,在【插入】中选择【行】或者【列】,并确定要插入的行数或列数以及插入的位置,设置完后单击【确定】按钮。
也可以直接在单元格中右击鼠标,在弹出的快捷菜单中,选择【表格】菜单中的相应命令来插入行或列。
还可以单击列对应的绿色下拉按钮,在弹出的下拉菜单中选择【插入列】命令。
v删除行或列的方法
选中行或列后执行【修改】|【表格】|【删除行】或者【删除列】来实现;
也可以用鼠标右键单击需要删除的行或列,在弹出的快捷菜单中选择相应命令,进行行与列的操作。
(4)拆分合并单元格
v拆分单元格
用鼠标右键单击要拆分的单元格,选择【表格】子菜单中的【拆分单元格】命令;
或者执行【修改】|【表格】|【拆分单元格】命令即可。
v合并单元格
鼠标右键单击要合并的单元格,在弹出的菜单中选择【表格】子菜单中的【合并单元格】命令;
或者执行【修改】|【表格】|【合并单元格】命令即可。
(5)表格的嵌套
v概念
所谓表格的嵌套,其实就是在一个单元格中插入一个表格。
v举例
例如在第三行第二列的单元格中插入一个表格,只要将光标放置到该单元格中,执行【插入】|【表格】命令,设置完表格的参数后,单击【确定】按钮即可。
实验三、图像的设置
一、实验目的:
通过本实例使学生掌握如何使用Dreamweaver8对插入的图像进行设置。
实验环境:
1.windows9x/me/2000或windowsXP;
2.CPU:
Pentium
或更高级别的处理器;
3.硬盘:
1G以上可用空间;
4.显示器:
256色以上,800*600或1024*768分辨率;
实验软件:
Dreamweaver8
二、实验内容:
使用Dreamweaver8对插入的图像进行设置。
三、实验步骤:
1。
图像描边的设置
v设置图像边框
选中图像,在【属性】面板的【边框】文本框中输入相应的数字编辑文档中的图像就有了边框。
v设置描边的粗细
可以通过改变【边框】文本框中的数值大小来改变图像描边的粗细。
2.图文混排的设置
v方法一
选中图像,设置【属性】面板上【对齐】下拉菜单中的相应命令进行设置。
v方法二
用鼠标右键单击图像,在弹出的快捷菜单中执行【对齐】|【左对齐】命令。
v说明:
设置完毕后,可以拖曳图片到合适的位置,实现图文混排的效果。
3.图片提示
v方法
选中要增加提示的图像,在【属性】面板的【替换】文本框中输入提示的内容即可。
v效果
按F12键预览一下效果,当鼠标的光标停留在图像上时就会显示出提示的文字。
4.图像热区的创建
v方法
在【属性】面板中分别单击方框、圆形、多边形3个按钮,可以在图像上建立3种不同形状的热区。
v效果
鼠标指针经过图像热区时会发生相应的变化,提示这是一个超级链接。
5.图像边距的设置
v方法
在【属性】面板分别设置【垂直边距】和【水平边距】的值即可。
v效果
可以使图像和表格边框产生一个边距,也会与相邻的文字或者其他图片产生一个边距。
6.图像占位符
v什么是图像占位符
图像占位符就是在需要使用图形的地方先插入一个占位图形。
v方法
执行【插入】|【图像对象】|【图像占位符】命令,弹出【图像占位符】对话框,在该对话框中进行相应的设置即可。
7.对图像进行编辑
7.1 修改图片的大小
v方法一
通过拖曳图像右侧、底边和右下角的控制手柄可以调整图像的大小。
v方法二
在【属性】面板中直接修改图像的【宽】和【高】的数值也可改变图像的大小。
v说明
单击【属性】面板上的恢复按钮可恢复图像原来的大小。
7.2 编辑图片
v方法
通过【编辑方式】命令对图像进行修改和处理,默认的是Fireworks软件,可以单击上方的加号增加编辑器。
v说明
在【首选参数】对话框选择图片编辑器。
7.3 裁剪图像
v方法
使用【属性】面板中【裁剪】按钮裁剪对图像进行裁剪。
v撤销修改
执行【编辑】|【撤销】命令可以撤销所做的任何更改。
v说明
裁剪过程本身就是对该图像文件的操作。
7.4修改图像的亮度和对比度
单击【属性】面板上【亮度和对比度】按钮,在弹出的【亮度/对比度】对话框中进行亮度和对比度的设置。
单击【属性】面板中的【锐化】按钮,在弹出的【锐化】对话框中可以进行锐化的设置。
实验四、模板应用
一、实验目的:
通过本实例使学生掌握如何使用Dreamweaver8对模板进行设置。
实验环境:
1.windows9x/me/2000或windowsXP;
2.CPU:
Pentium
或更高级别的处理器;
3.硬盘:
1G以上可用空间;
4.显示器:
256色以上,800*600或1024*768分辨率;
实验软件:
Dreamweaver8
二、实验内容:
使用Dreamweaver8创建模板,编辑模板,应用模板。
三、实验步骤:
1。
创建模板
打开一个已经存在的网页另存为模板
vTemplates文件夹
Dreamweaver会将模板文件自动保存在站点根目录中的Templates文件夹中,文件的扩展名是.dwt。
如果Templates文件夹在站点中还不存在,Dreamweaver会在保存新建模板时自动创建该文件夹。
v将已经存在的网页另存为模板举例:
例如:
将“小慧的家”的主页面另存为模板。
2.编辑模板
(1).删除可编辑区域
v方法一
选中可编辑区域后执行【修改】|【模板】|【删除模板标记】命令。
v方法二
选中可编辑区域后按Delete键。
(2).更改可编辑区域的名称
v方法
选中可编辑区域,在【属性】面板的【名称】文本框中输入一个新名称,按Enter键使所做的修改生效。
v举例(效果如下图所示)
(3).保存更改后的模板
v模板修改后执行【文件】|【保存】命令即可保存修改后的模板。
(4).设置模板区域的高亮显示首选参数
v在【首选参数】对话框中进行设置
例如:
执行【编辑】|【首选参数】命令,弹出【首选参数】对话框。
在左侧的【分类】列表框中选择【代码颜色】,在右侧【文档类型】列表中选择【HTML】,然后单击【编辑颜色方案】按钮,会弹出【编辑HTML的颜色方案】对话框,如下图所示。
实验五、创建用户留言页面
一、实验目的:
通过本实例使学生掌握如何使用Dreamweaver8创建用户留言页面。
实验环境:
1.windows9x/me/2000或windowsXP;
2.CPU:
Pentium
或更高级别的处理器;
3.硬盘:
1G以上可用空间;
4.显示器:
256色以上,800*600或1024*768分辨率;
实验软件:
Dreamweaver8
二、实验内容:
使用Dreamweaver8创建用户留言页面。
三、实验步骤:
1.添加表单并布局表格
v新建一个动态页面,并将其保存为“write.asp”,它就是用户留言页面。
在【表单】工具栏中单击【表单】按钮,插入一个表单。
然后在表单中插入一个表格,表格布局如图所示。
2.添加表单域
(1)添加“姓名”文本字段。
通过【表单】工具栏中的【文本字段】按钮,完成在单元格中添加一个“文本字段”表单域。
在【属性】面板中【文本域】下面的文本框中定义这个文本字段的名字为name,如图所示。
(2)添加OICQ、E-mail、个人主页文本字段。
OICQ、E-mail、个人主页表单域的添加方法同上,均为文本字段,在【属性】面板中各个文本字段的命名情况是:
OICQ文本字段:
oicq;
E-mail文本字段:
mail;
个人主页文本字段:
homepage。
(3)添加“性别”单选按钮表单域,性别“男”的单选按钮属性设置如图所示。
v同样的方法再设置一个性别“女”的单选按钮。
完成后的页面效果如下图所示。
(4)添加“选择头像”表单域。
v因为“选择头像”右边的单元格中要有若干备选的头像图片,所以我们应该事先制作或者搜集一些卡通头像图片。
复制以后的【文件】面板情况如图所示。
v将光标定位在“选择头像”右边的单元格中,分两行插入8个头像图片。
在每幅图片的右边添加一个单选按钮。
v名字统一定义为tx,第一个单选按钮的【初始状态】选择为【已勾选】,其他的单选按钮为【未选中】,每个单选按钮【选定值】属性的设置稍微麻烦一些。
v以第1个单选按钮为例,先选中这个单选按钮前面对应的头像图片,在【属性】面板中复制这个图片【源文件】地址。
再选中与头像对应的单选按钮,在【属性】面板的【选定值】处粘贴刚才复制的头像图片源文件地址。
其他7个单选按钮的【选定值】属性都按照同样的方法进行设置。
3.定义提交按钮的服务器行为
v打开【绑定】面板,单击加号按钮,执行【记录集(查询)】命令,并按照8.5.3介绍的方法绑定【记录集】。
v选中整个表格,打开【服务器行为】面板,单击加号按钮,选择【插入记录】命令。
在【插入记录】对话框中设置表单域与数据库字段名一一对应,在【表单元素】中依次选中元素,在下面的【列】中选择与数据库相对应的域。
4.在【行为】面板定义表单提交的错误检查
v选中【提交】按钮,打开【行为】面板,单击加号按钮,在弹出的菜单中选择【检查表单】命令。
v设置表单域和检查事件:
name选择【必需的】;ociq选择【数字】;mail选择选择【必需的】;【电子邮件地址】,homepage不选;liuyan选择【必需的】,如图所示。
最后单击【确定】按钮,事件为onClick。
实验六、HTML的简单应用
一、实验目的:
通过本实例使学生掌握如何使用Dreamweaver8创建html页面。
实验环境:
1.windows9x/me/2000或windowsXP;
2.CPU:
Pentium
或更高级别的处理器;
3.硬盘:
1G以上可用空间;
4.显示器:
256色以上,800*600或1024*768分辨率;
实验软件:
Dreamweaver8
二、实验内容:
使用Dreamweaver8创建html页面,并且插入一些元素。
三、实验步骤:
1.编写第一个网页
使用记事本编写第一个网页,步骤如下:
v选择【开始】/【所有程序】/【附件】/【记事本】”命令,打开记事本程序。
v在记事本中输入HTML代码。
v保存文件,在保存类型中选择【所有文件】,在编码中选择ANSI,文件名设为“myfirst.htm”。
v关闭记事本,回到存盘的文件夹,双击myfirst.htm文件,在InternertExplore浏览器中浏览页面。
第一个网页的代码及页面效果
我的第一个HTML文件
2向页面中添加文字
(1)将需要添加的文字输入到
与标识之间。(2)
是“原样显示文本”的标识。(3)
称为行中断标识。
标识后面的内容另起一行显示。
(4)段落标识分别放在段首和段尾。
比
多一行空行,也就是空一行,再另起一行显示文本内容。
(5)是字体标识,对标识中的文本字体起控制作用,有“size”和“color两个属性:
“size”表示字体的大小。
“color表示字体的颜色。
(6)在文字前后加上标识,可以使文字加粗显示。
为粗体显示标识;
为斜体显示标识;
为带下划线显示标识。
(7)
应用上述标识后的完整程序:
[名称]西红柿
[性味]味酸甘、性微寒。
[归经]入心、肺、胃经。
[作用]润肺生津、和胃止渴。
用于暑热烦渴、咽干、恶心欲吐、厌食、大便秘结、小便黄赤等。
[成分]含大量维生素C、A、B1、B2、及磷、铁、钙等,还含有较多的苹果酸、柠檬酸等有机酸。
现代医学研究证实,它有抗衰老、降压、褪色素的作用。
3 设置页面中的标题
v在
v说明
在Dreamweaver中输入的标题文字实际就是被解析到了
4设置页面的背景颜色和背景图片
v通过bgcolor属性可设置页面的背景颜色。
例如:
输入“bgcolor=red”或者“bgcolor=blue”,页面的背景就能按照输入显示成红色或者蓝色。
v通过background属性可设置页面的背景图片。
例如:
将光盘的“tomato.gif”图片文件复制到用户站点文件夹下的“\img\1”目录中,进行如下设置:
background=img/1/tomato.gif
5 在页面中插入图片
v在
标识之后,文字之前的位置输入代码v说明
v“img”表示插入一张图片;
v“src”属性的值是图片文件的路径;
v“src=img/1/tomato1.jpg”表示插入的是与本文件在同目录下的“img\1\tomato1.jpg”文件;
v“alt”后面是图片的说明文字,在浏览器中当鼠标移到图片上时会显示出图片的说明文字;
v“width”和“height”是图片的宽度和高度信息,单位是像素。
“align”是图片的位置属性,在标识中加入“align=left”代码可使图片移到行的最左面,文字移到与图片同一行。
将“align”的值设为“right”可使图片出现在行的最右侧。
6设置文字和图片链接
设置文字链接
v在HTML语言中,超级链接的标识是
v设置一个“Target=_blank”属性,可使链接文件在一个新弹出的窗口中打开。
设置图片链接
在HTML语言中,超级链接的标识是
v通过“border”属性可以设置超级链接图片周围的边框。
例如:
设置“border=0”可以去掉图片链接的边框。
v添加“Target=_blank”可使链接的图片在新窗口中打开。
7 给网页加上声音
v将音乐文件“music.mid”复制站点文件夹的相应目录下。
v在
与之间任何位置加入代码“实验七、元件的创建
一、实验目的:
通过本实例使学生掌握如何使用Flash创建元件。
实验环境:
1.windows9x/me/2000或windowsXP;
2.CPU:
Pentium
或更高级别的处理器;
3.硬盘:
1G以上可用空间;
4.显示器:
256色以上,800*600或1024*768分辨率;
实验软件:
FlashDreamweaver8
二、实验内容:
使用Flash创建元件,并且对其进行管理。
三、实验步骤:
1.创建图形元件
v能创建“图形元件”的元素可以是导入的位图图像、矢量图形、文本对象,以及用Flash工具创建的线条、色块等。
v选择相关元素,按键盘上的F8键,在【转换为元件】对话框的【名称】文本框中输入元件的名称,在【类型】中选择【图形】。
v单击【确定】按钮后,在【库】中生成相应的“元件”,在舞台中,元素变成了“元件的一个实例”。
2.创建按钮元件
v能创建“按钮元件”的元素可以是:
导入的位图图像、矢量图形、文本对象以及用Flash工具创建的任何图形。
v按钮元件的【转换为元件】对话框如图所示。
v说明:
除了拥有“图形元件”的全部变形功能外,还拥有3个“状态帧”和1个“有效区帧”。
3个“状态帧”分别是“一般”、“鼠标经过”、“按下”;
有效区帧”决定了按钮响应的区域范围。
3.创建影片剪辑元件
v可以把“舞台”上任何看得到的对象,甚至整个“时间轴”内容创建为一个MC;
v还可把一个MC放置到另一个MC中;
v还可以把一段动画(如逐帧动画)转换成“影片剪辑”元件。
v影片剪辑元件的【转换为元件】对话框如图所示。
4.创建空白元件
v在确定舞台上没有任何对象被选取的情况下执行:
【插入】|【新建元件】命令或者按快捷键Ctrl+F8,
打开【创建新元件】对话框,输入元件名称,选择元件的类型,单击【确定】按钮即可进入新元件编辑模式。
v说明
在新元件编辑模式中,元件名会在舞台的左上角显示,窗口中包含一个“十”字,它代表了元件的“定位点”,这时用户可以利用时间轴、绘图工具或导入其他素材来创建、编辑元件的具体内容。
5.使用“元件项目列表”
v“元件项目列表”采用“可折叠文件夹”树状结构,
v利用【库】中“项目列表”这一特性可为动
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站与网页设计 网站 网页 设计 实验 大纲