《网站与网页设计》实验大纲.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语言
我的第一个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利用【库】中“项目列表”这一特性可为动
升级会员 