网页制作实验指导书.docx
《网页制作实验指导书.docx》由会员分享，可在线阅读，更多相关《网页制作实验指导书.docx（44页珍藏版）》请在冰豆网上搜索。
网页制作实验指导书
江苏财院实验指导书之计算机系列
网页设计
实验指导书
李建修订
2011年9月6日
目录
实验一创建本地站点1
实验二制作简单网页4
实验三超级链接的制作8
实验四使用表格10
实验五javascript特效和行为13
实验六CSS样式表的使用16
实验七框架的使用20
实验八表单23
实验九网页模板的创建与使用27
实验十多媒体对象的使用30
实验十一使用层31
实验十二网站与网页的发布36
实验一创建本地站点
一、实验目的
1.掌握利用Dreamweaver工具创建一个本地站点
2.掌握站点的管理
3.掌握各级目录及文件的创建
二、实验内容
1、创建本地站点
（1）在本地磁盘D盘中建立一个名为“mysite”的文件夹。
（2）启动DreamweaverMX2004，打开文件面板，单击文件面板中的“管理站点”命令或选择“站点”菜单中的“管理站点”命令，打开“管理站点”对话框。
（3）在“管理站点”对话框中单击“新建”按钮，选择“站点”命令，此时会打开“编辑站点”对话框。
（4）在“编辑站点”对话框中有“基本”和“高级”两个选项卡，初学者选择“基本”选项卡。
在“基本”选项卡第一个界面的文本框中输入新建站点的名称“mysite”。
（5）单击“下一步”按钮，在打开的对话框中选择将要采用的服务器技术，这里我们选择“否，我不想使用服务器技术”。
（6）继续单击“下一步”按钮，在打开的对话框的顶部包括两个选项，分别为：
编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）。
使用本地网络直接在服务器上进行编辑。
由于我们将在本地硬盘上进行站点的制作和测试，因此这里我们选择第2项。
在该对话框中最重要的是选择存放站点文件的位置。
可以在文本框中直接输入站点文件的路径“D:
\mysite”，或者利用文本框后的浏览按钮，在打开的“选择站点mysite的本地根文件夹”对话框中，找到将要存放站点文件的文件夹。
单击“打开”——>“选择”按钮后，就会将选中文件夹的路径加入到文本框中。
（7）单击对话框中的“下一步”按钮进入结束对话框，其中列出了设置中的关键信息。
如果需要修改设置，就单击“上一步”按钮，重新进行设置，如果没有问题，就单击“完成”按钮，关闭“编辑站点”对话框。
此时返回“管理站点”对话框，其中列出了刚刚创建好的站点名称mysite。
单击“管理站点”对话框中的“完成”按钮，结束站点定义。
此时“文件”面板将会显示出本地站点的名称和存储路径。
2、管理站点
选择菜单命令“站点”|“管理站点”，在打开的“管理站点”对话框中，包含“新建”、“编辑”、“复制”、“删除”、“导出”、“导入”等按钮，这些按钮是进行站点管理的相关工具。
（1）新建站点
其过程同实验项目1。
（2）编辑站点
在“管理站点”对话框中，选中要编辑的站点，然后单击“编辑”按钮，就可以打开“编辑站点”对话框，在其中修改站点的属性。
（3）复制站点
如果要建立与已有站点结构相同或相似的站点，就可以利用复制站点命令快捷的实现。
在“管理站点”对话框中，选中“mysite”站点，然后单击“复制”按钮，在“管理站点”对话框中就会出现名为“mysite（复制）”的站点。
（4）删除站点
如果不需要某个站点，可以在“管理站点”对话框中选中此站点，然后单击“删除”按钮。
注意：
删除站点时只是删除Dreamweaver中的站点定义信息，并不会删除硬盘中的站点文件。
（5）导出与导入站点
可以把选中的站点的设置导出为一个XML文件。
可以把导出的包含站点设置信息的XML文件再次导入。
3、创建目录
（1）创建一级目录
在“文件”面板中选中站点根目录“mysite”，然后单击鼠标右键，打开弹出式菜单，选择“新建文件夹”命令，在站点根目录下就会出现一个文件夹，此时可以修改文件夹的名称为images，或者在文件夹上单击鼠标右键，在弹出的菜单中选择“编辑”|“重命名”命令，然后修改文件夹的名称为images。
利用同样的方法，可以建立多个其他的一级目录。
例如：
news、script、swf等。
（2）创建二级目录
在要创建二级目录的一级目录上单击鼠标右键。
如在images文件夹上单击鼠标右键，在弹出的菜单中选择“新建文件夹”命令，在一级目录的下方就会出现一个文件夹，此时可以修改文件夹的名称为banner，或者在文件夹上单击鼠标右键，在弹出的菜单中选择“编辑”|“重命名”命令，然后修改文件夹的名称为banner。
利用同样的方法，可以在images目录下建立多个其他的二级目录，如：
logos、arrows等。
也可以在其他的一级目录下建立多个二级目录。
（3）创建文件
在要创建文件的各级目录上单击鼠标右键。
如：
在站点根目录“mysite”上单击鼠标右键，在弹出的菜单中选择“新建文件”命令，在站点根目录下就会出现一个文件，此时可以修改文件的名称为index.htm，或者在文件上单击鼠标右键，在弹出的菜单中选择“编辑”|“重命名”命令，然后修改文件夹的名称为index.htm。
注：
在站点根目录下最好只存放名为“index.htm”的首页文件，以及一些必要的文件，其他栏目的页面应存放在相应的栏目文件夹中。
实验二制作简单网页
一、实验内容
1.掌握网页的创建、打开、保存和预览
2.掌握文本、图片、Flash等网页元素的添加及其属性的设置
3.掌握网页中各种元素的混合排版
4.掌握背景音乐的添加及其属性的设置
5.掌握网页页面的属性设置
二、实验步骤
1、网页的创建、打开、保存和预览
（1）创建网页
创建网页有三种方法，如下：
a.启动Dreamweaver后，在开始页中单击“创建新项目”栏中的“HTML”命令，即可创建一个静态网页。
b.选择菜单“文件”|“新建”命令，系统会弹出一个“新建文档”对话框。
在对话框中选择“常规”选项卡，在“类型”栏中选择“基本页”，在“基本页”栏中选择“HTML”，即可以创建一个静态网页。
c.利用快捷键Ctrl+N，此时会打开“新建文档”对话框。
之后的操作同b方法。
（2）打开网页
选择菜单“文件”|“打开”，可以打开“打开”对话框，在其中选择要打开的网页，然后单击“确定”按钮，即可以打开要打开的网页。
（3）保存网页
保存网页有两种方法，如下：
a.选择菜单“文件”|“保存”命令，在打开的另存为对话框中，选择保存网页的路径即可。
b.利用快捷键Ctrl+S，此时也会打开另存为对话框，之后的操作同a方法。
（4）预览网页
按F12功能键即可在浏览器中预览网页。
2、使用文本
在网页中使用文本，就像在Word中一样，可以直接输入文字。
（1）文本换行三种方法：
1）自动换行：
当文本输入的长度超过设计窗口时，文本就会自动换行。
2）段落换行：
按回车键就可以实现段落换行，在代码视图中会产生一个
标记，此种换行形式，文本行与行之间有一定的间距。
3）换行符换行：
按Shift+Enter组合键，可以实现换行符换行，此种换行形式，文本行与行之间没有间距。
（2）插入空格的三种方法：
1）将中文输入法中的半角改为全角状态即可。
2）将插入栏切换到“文本”插入栏，在“字符”按钮的下拉菜单中选择“不换行空格”即可。
3）按Ctrl+Shift+Space组合键即可插入空格。
（3）文字属性的设置
1）设置文字标题
在设计视图中，输入“网页制作课程”文本，然后选中该文本，单击属性面板中的格式选择框，在弹出的下拉菜单中选择标题2。
2）设置文字字体
选中要设置的文字，单击属性面板中的字体选择框，在弹出的下拉菜单中选择要设置的字体，如果没有要设置的字体，则选择“编辑字体列表”命令。
打开“编辑字体列表”对话框，在“可用字体”栏中选择要设置的字体，然后单击右侧的按钮，将选中的字体放入“选择的字体”栏中，一次可以选择多个字体，因为每台机器的字体库不同，为了避免设置的字体在其他机器上不存在，所以一次选择多个不同字体，机器会按照选择的顺序识别文字的字体。
选择好后，单击“确定”按钮。
回到设计视图中，再次打开字体选择框，选择刚刚添加的字体。
这里设置“网页制作课程”文本为黑体。
3）设置文字字号
选中要设置的文字，单击属性面板中大小下拉按钮，弹出字号选择框，选取所要的字号即可，或者选择菜单“文本”/“大小”命令，也可选择字号。
字号的大小分为数字和文字两种，如果选择数字的大小，需在其后选择字号大小的单位。
此处正文文字大小选择9，单位选择“点数（pt）”。
这里设置2级标题为16点数（pt）。
4）设置文字颜色
选中要设置的文字，单击属性面板上的颜色选择框，在弹出的颜色选择框中选取所要的颜色即可。
在拾色器中选择颜色后，在颜色的选择框后的文本框中会出现以#开头的6个十六进制数。
其中“#”是颜色的标志，后面的6个十六进制数分别代表红、绿、蓝三种颜色。
这里选中“网页制作课程”文本后，在拾色器后的文本框中输入#ffcc00。
5、文字排列方法
（1）选中“网页制作课程”文本；
（2）设置居中对齐。
选中文字，单击属性面板的居中按钮或菜单文本/对齐方式/居中，使之居中。
除居中对齐方式外还有左对齐和右对齐两种，方法同居中对齐。
（3）设置列表。
列表是一种简单而实用的段落排列方式。
分为：
无序列表和有序项列表。
a.无序列表的设置：
在“网页制作课程”文本下方输入“Internet简介”文本，然后选中该文本，在属性面板中单击“无序列表”按钮，此时“Internet简介”文本变为无序列表的项目，在文本后按回车键，即可输入列表的下一项“网站设计和DreamweaverMX2004简介”，按此操作，即可作出无序列表。
b.有序列表的设置：
有序列表的设置与无序列表的设置类似。
选中第一项文本后，在属性面板中单击“有序列表”按钮，其他操作同无序列表的设置。
c.列表间转换：
将无序列表转换为有序列表只要选中无序列表，然后在属性面板上单击“有序列表”按钮即可。
将有序列表转换为无序列表只要选中有序列表，然后在属性面板上单击“无序列表”按钮即可。
d.列表符号修改：
要修改无序列表和有序列表的项目符号，只要选中列表，然后单击鼠标右键，在弹出的菜单中选择“编辑标签”命令，打开“编辑标签”对话框，在其中可以选择不同的列表项目符号的类型。
e.有序列表的开始项：
设置有序列表项目符号类型时，可以同时设置开始项，即如果不想有序列表从1开始，可以在“开始”文本框中输入想要开始的数字，例如：
5。
（4）设置段落缩进。
先选择要缩进的段落，然后单击属性面板中的缩进按钮或菜单文本/缩进。
3、使用图片
A、插入图片
将光标放在要插入图片的位置，然后选择插入/图像，或单击插入面板中常用选项卡的图像按钮，在出现的对话框中，选择要插入的图片，然后单击确定按钮，如果图片不属于本地站点，则会弹出一个提示对话框，询问是否将图片复制到本地站点中，此时选择“是”。
如果图片存放在本地站点中，可以直接拖放到设计视图中。
B、设置图片属性
（1）在设计视图中插入一张图为“电脑”的图片。
选中图片，此时的属性面板即为该图片的属性面板。
（2）图象文字下的文本编辑框用于为图片命名，我们给插入的图片命名为“computer”，此处命名是为了编程的时候使用。
（3）宽度、高度：
重新设置图片的宽度和高度。
这里设置宽度为100像素，高度为100像素。
（4）源文件：
指定图片的来源，可以直接输入图片的文件地址或是单击浏览按钮，选择图片文件。
此处显示已添加的图片的路径。
（5）替代：
设置图片文字说明，在浏览时，当把鼠标放在图片上时，会显示该文字。
此处设置替代文本为“电脑”。
（6）垂直间距、水平间距：
设置文字与图片的间距。
这里我们设置水平间距和垂直间距各为20像素。
（7）低解析度源：
如果图片很大，那么下载时间很长，这时可制作一幅低分辨率的小图片指定在此处，让浏览者预先浏览。
（8）边框：
在文本框中输入数值，设置图片边框粗细。
这里我们输入数值2。
（9）对齐方式：
包含左对齐、居中对齐和右对齐三种方式。
单击其中的按钮就可以设置相应的对齐方式，此处的对齐是指图片在整个设计视图中的对齐方式。
（10）对齐：
在下拉菜单中包含九种对齐方式，这里的对齐方式是指图片与文本的对齐方式。
在这里我们选择“左对齐”。
4、插入Flash动画
（1）插入Flash动画的步骤
在文档窗口中，将光标放在要插入动画的位置上，然后单击“常用”插入栏中的“媒体”按钮，在打开的下拉菜单中选择Flash按钮，此时将打开“选择文件”对话框。
在其中找到要添加的Flash，单击“确定”按钮。
（2）插入Flash文本
（3）插入Flash按钮
5、插入背景音乐
将视图切换到代码视图，在
标记之后的任意位置添加如下标记：
其中
src为添加音频文件的路径；hidden为隐藏属性，它包括两个值false和true，若希望音乐为隐藏形式的则选择true；autostart为自动播放属性，它包括两个值false和true，若希望音乐为自动播放形式的则选择true；loop为循环属性，它包括两个值false和true，若希望音乐为循环形式的则选择true。
6、页面属性设置
实验三超级链接的制作
一、实验目的
1.掌握各种超级链接的制作
2.能够灵活应用热区链接
二、实验内容
1、添加外部链接
（1）选中用于链接的文字
（2）在属性面板中的链接框中输入一个要链接到外部网址。
此处应用绝对路径，即不能省略“http：
//”。
2、添加内部链接
（1）选中用于链接的文字。
（2）在属性面板中单击链接旁边的浏览按钮，出现选择文件对话框，选择超级链接要指向的文件名。
3、添加E-mail链接
（1）将光标定位到要插入电子邮件链接的位置。
（2）选择主菜单插入/电子邮件链接，弹出对话框，在文本框中输入要添加链接的文字。
单击确定按钮即可。
4、锚记链接
（1）网页内部锚记链接
１.创建锚点
1）在文档窗口的设计视图中，置插入点到需要命名锚点的地方。
2）执行以下任一操作：
•选择插入>命名锚点。
•按下Ctrl+Alt+A键。
3）在插入命名的锚点对话框的锚点名域中，输入锚点名。
如果锚点标记没有出现在插入点位置，选择查看>可视化助理>不可见元素。
注意:
锚点名不能包含空白字符且锚点不应放在层中。
2.链接到命名的锚点
方法一：
用输入锚点名方法链接
1）在文档窗口的设计视图中，选中要从中创建链接的文本或图像。
2）在属性检查器的链接域中，输入数值符（#）和锚点名。
例如：
要链接到当前文档中一名为"top"的锚点，输入#top。
要链接到处于同一文件夹的另一文档中一名为"top"的锚点，输入filename.html#top。
注意:
锚点名区分大小写。
方法二：
用指向文件方法链接到命名的锚点：
1）打开包含需要的命名锚点的文档。
2）选择查看>可视化助理>不可见元素以使锚点可见。
3）在文档窗口的设计视图中，选中要从中链接的文本或图像（如果这是另一个打开的文档，必须切换回它。
）
（2）页面之间的锚记链接
利用上述方法，将锚记设置在外部文件上，然后链接到外部文件即可。
5、热区链接
•图像映射就是将一个图片使用“热区”分隔成块，当点击热区时，将引发一个动作，比如打开一个新文件。
•创建图像映射：
•1）选中图片。
2）点击属性监测器右下角的展开箭头显示出全部属性。
3）在地图名称栏中，输入地图的名字，这个名字必须是唯一的。
注：
如果你在同一个文件中使用多个图象地图，请确定每个图象地图的名字都是唯一的。
4）用以下方法之一定义图象地图区域：
•选中圆形工具，在图片上拖动，创建一个圆形热区。
•选中矩形工具，在图片上拖动，创建一个矩形热区。
•选中多边形工具，设定不规则形状的热区。
单击要设定的形状的每个角，然后点击箭头工具闭合图形
•5）在热区属性监测器的链接栏，点击文件夹图标浏览选择当点击热区后要打开的文件，或者直接输入要打开的文件名。
6）要设置链接文件打开的窗口，在目标栏中输入目标窗口的名字，或者直接在目标弹出窗中选择框架名。
7）在Alt栏，输入在纯文本浏览器中替代图片显示的文字。
有些浏览器会在访问者将鼠标指向热区时显示这些文字。
实验四使用表格
一、实验目的
1.掌握表格插入和属性的设置
2.掌握使用表格模板来美化表格
3.掌握利用表格进行网页布局
二、实验步骤
1、表格的插入
表格插入可以使用菜单或面板，具体操作如下：
（1）将鼠标放到网页中要插入表格的位置，在插入面板的常用选项卡中单击按钮，或者选择插入/表格命令。
（2）在弹出的对话框中输入相应的设置值，例如：
3行4列等。
（3）单击确定按钮，完成表格的创建。
2、选定表格
（1）选定整个表格
选定整个表格有几种方法：
●单击表格左上角或右边或底边框。
●单击表格并选择修改/表格/选择表格。
●将插入点放到表格内任意位置，选取文档窗左下角标签选择器中的
标签。选取之后选项控柄就会出现在表格四周。
（2）选定一行或一列
选定一行或一列的方法有以下几种：
●将鼠标置于一行的左边框上，或置于一列的上边框上，当出现黑色箭头时单击即可。
●点击一个单元格，横向或纵向拖拽可以选取多个行或列。
一行或一列单元格的四周有黑线则表明已被选中。
（3）选定不连续的几个单元格
按住Ctrl键点击表格内部来增加单元格、行或列到选集中。
选取表格内多个单元格，然后按住Ctrl键并点击单元格，行或列取消对某些单元格的选取。
3、在表格中添加内容
在表格的单元格中可以插入文本、图片等页面元素。
插入方式同实验四。
首先将光标定位在单元格内，然后输入内容。
4、设置表格及单元格属性
（1）设置表格属性
选中表格，在属性面板中输入相应的属性值。
可设置：
表格名字、表格行数、表格列数、表格宽度、表格高度（一般不指定）、表格对齐方式、表格边距、表格间距、表格边框的宽度、表格边框的颜色、表格背景颜色和背景图片。
（2）设置单元格属性
设置单元格属性的操作如下：
选定要设置的单元格，在属性面板中输入相应属性的值。
可设置：
水平对齐方式、垂直对齐方式、单元格宽度和高度、背景颜色、边框颜色、禁止文字换行、单元格标题等。
5、增加或删除表格的行、列
增加行、列的具体操作如下：
在需要插入新行（列）的单元格中单击。
任选以下操作之一：
如要插入一行，则选择修改/表格/插入行命令
如要插入一列，则选择修改表格插入列命令
如要插入多行（列），则选择修改/表格/插入行或列命令，输入要插入的行（列）数。
删除行、列的具体操作如下：
选中要删除的行（列）单元格。
任选以下操作之一：
如要删除一行，则选择修改/表格/删除行命令
如要删除一列，则选择修改/表格/删除列命令
6、拆分、合并单元格
合并两个或多个单元格的操作如下：
选中想要合并的单元格，选中饿单元格必须是相邻的并且是矩形。
选择修改/表格/合并单元格命令
拆分单元格的操作如下：
选中一个单元格。
选择修改/表格/拆分单元格命令。
在弹出的对话框中选择是拆分行还是列，并输入拆分的行（列）数。
7格式化表格
（1）在网页中插入一个表格，然后输入一些内容
（2）选中表格，单击菜单命令/格式化表格
（3）在弹出的对话框左边的表格样式列表框中选择样式
（4）其他选项均设置为默认值
（5）单击确定按钮
（6）保存并浏览网页
8、利用表格制作导航条
（1）在网页中插入表格
（2）在表格单元格内插入内容，可以是文本、图片等，这里我们插入一些图片。
（3）在属性面板上设置表格对齐方式为居中对齐
（4）利用实验五的知识，对每个图片设置内部超级链接
（5）按F12键即可看到导航条的效果。
说明：
以上制作无边框的导航条，如要制作有边框的导航条，则可设置表格边框的宽度为非0值。
实验五javascript特效和行为
一、实验目的
1.掌握常用不同行为的添加方法
2.掌握层与行为的结合运用
二、实验步骤
1、行为面板
使用[行为]面板为页面元素（即标签）附加行为并可以修改以前所附加行为的参数。
[行为]面板具有下列选项：
（+）：
动作的弹出式菜单，它可以被附加到当前选取的元素中。
当从该列表中选择一个动作时，将出现一个对话框，在该对话框中可以指定动作的参数。
（-）：
从行为列表中移除选取的事件和动作。
[上]和[下]：
箭头按钮在行为列表中向上或向下移动选取的动作。
[事件]：
包含所有能触发动作的事件的弹出式菜单。
该菜单仅在行为列表中某个事件被选取时才可见。
根据所选取的对象不同，将显示不同的事件。
如果所需的事件未显示，确保选取了正确的页面元素或标签。
还确保已在[显示事件]子菜单中选取了合适的浏览器。
[显示事件]：
指定当前行为在哪些浏览器中起作用。
在该菜单中所做的选择决定了[事件]弹出式菜单中显示的事件。
较旧的浏览器通常所支持的事件少于较新的浏览器，并且大多数情况下，所选择的目标浏览器的范围越大，所显示的事件越少。
2、播放声音
使用[播放声音]动作可以播放声音。
例如，可以在鼠标经过某链接时播放音效，或者在加载页面时播放音乐剪辑等。
1）选择对象并打开[行为]面板。
2）点击（+）按钮并从[动作]弹出式菜单中选择[播放声音]。
3）点击[浏览]选取声音文件，或者在[播放声音]域中输入路径和文件名称。
4）点击[确定]。
5检查默认事件是否是需要的事件。
如果该事件不是所需的，从弹出式菜单中选择另一个事件。
3、弹出消息窗口
弹出消息动作将使用指定的消息显示一条JavaScript警告。
1）选择对象并打开[行为]面板。
2）点击（+）按钮并从[动作]弹出式菜单中选择[弹出信息]。
3）在[信息]域中输入的消息。
4）点击[确定]。
5）检查默认事件是否是需要的事件。
如果该事件不是所需的，从弹出式菜单中选择另一个事件。
4、弹出新的窗口
使用打开浏览器窗口动作在一个新窗口中打开URL。
可以指定新窗口的属性，包括其大小，属性、无菜单条、名称。
如果不为窗口设置属性，那么它将使用启动它的窗口的大小和属性打开。
1）选择对象并打开行为面板。
2）点击（+）按钮并从动作弹出式菜单中选择打开浏览器窗口。
3）点击浏览选取文件，或者输入需要显示的URL。
4）设置下列选项：
窗口宽度：
指定以象素为单位的窗口宽度。
窗口高度：
指定以象素为单位的窗口高度。
导航工具栏：
浏览器按钮包括前进，后退，主页和刷新。
地址工具栏：
浏览器地址域。
状态栏：
浏览器窗口底部的区域，用于显示信息（如剩余加载时间，和URL关联的链接）。
菜单条：
浏览器窗口菜单。
需要时使用滚动条：
指定如果内容超过可见区域时滚动条自动出现。
调整大小手柄：
指定用户是否可以调整窗口大小，
窗口名称：
新窗口的名称。
如果想使用其作为链接目标或者用JavaScript控制它，那么应该给新窗口命名。
5）点击确定。
6）检查默
展开阅读全文
相关搜索