网页制作实验指导书.docx

1、网页制作实验指导书江苏财院实验指导书之计算机系列网页设计实验指导书李建 修订2011年9月6日目 录实验一 创建本地站点 1实验二 制作简单网页 4实验三 超级链接的制作 8实验四 使用表格 10实验五 javascript特效和行为 13实验六 CSS样式表的使用 16实验七 框架的使用 20实验八 表单 23实验九 网页模板的创建与使用 27实验十 多媒体对象的使用 30实验十一 使用层 31实验十二 网站与网页的发布 36实验一 创建本地站点一、实验目的1. 掌握利用Dreamweaver工具创建一个本地站点2. 掌握站点的管理3. 掌握各级目录及文件的创建二、实验内容1、创建本地站点（

2、1）在本地磁盘D盘中建立一个名为“mysite”的文件夹。（2）启动Dreamweaver MX 2004，打开文件面板，单击文件面板中的“管理站点”命令或选择“站点”菜单中的“管理站点”命令，打开“管理站点”对话框。（3）在“管理站点”对话框中单击“新建”按钮，选择“站点”命令，此时会打开“编辑站点”对话框。（4）在“编辑站点”对话框中有“基本”和“高级”两个选项卡，初学者选择“基本”选项卡。在“基本”选项卡第一个界面的文本框中输入新建站点的名称“mysite”。（5）单击“下一步”按钮，在打开的对话框中选择将要采用的服务器技术，这里我们选择“否，我不想使用服务器技术”。（6）继续单击“下一

3、步”按钮，在打开的对话框的顶部包括两个选项，分别为：编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）。使用本地网络直接在服务器上进行编辑。由于我们将在本地硬盘上进行站点的制作和测试，因此这里我们选择第2项。在该对话框中最重要的是选择存放站点文件的位置。可以在文本框中直接输入站点文件的路径“D:mysite”，或者利用文本框后的浏览按钮，在打开的“选择站点mysite的本地根文件夹”对话框中，找到将要存放站点文件的文件夹。单击“打开”“选择”按钮后，就会将选中文件夹的路径加入到文本框中。（7）单击对话框中的“下一步”按钮进入结束对话框，其中列出了设置中的关键信息。如果需要修改设置，就单击

4、“上一步”按钮，重新进行设置，如果没有问题，就单击“完成”按钮，关闭“编辑站点”对话框。此时返回“管理站点”对话框，其中列出了刚刚创建好的站点名称mysite。单击“管理站点”对话框中的“完成”按钮，结束站点定义。此时“文件”面板将会显示出本地站点的名称和存储路径。2、管理站点选择菜单命令“站点”|“管理站点”，在打开的“管理站点”对话框中，包含“新建”、“编辑”、“复制”、“删除”、“导出”、“导入”等按钮，这些按钮是进行站点管理的相关工具。（1）新建站点 其过程同实验项目1。（2）编辑站点 在“管理站点”对话框中，选中要编辑的站点，然后单击“编辑”按钮，就可以打开“编辑站点”对话框，在其中

5、修改站点的属性。（3）复制站点如果要建立与已有站点结构相同或相似的站点，就可以利用复制站点命令快捷的实现。在“管理站点”对话框中，选中“mysite”站点，然后单击“复制”按钮，在“管理站点”对话框中就会出现名为“mysite（复制）”的站点。（4）删除站点如果不需要某个站点，可以在“管理站点”对话框中选中此站点，然后单击“删除”按钮。注意：删除站点时只是删除Dreamweaver中的站点定义信息，并不会删除硬盘中的站点文件。（5）导出与导入站点可以把选中的站点的设置导出为一个XML文件。可以把导出的包含站点设置信息的XML文件再次导入。3、创建目录（1）创建一级目录在“文件”面板中选中站点根

6、目录“mysite”，然后单击鼠标右键，打开弹出式菜单，选择“新建文件夹”命令，在站点根目录下就会出现一个文件夹，此时可以修改文件夹的名称为images，或者在文件夹上单击鼠标右键，在弹出的菜单中选择“编辑”|“重命名”命令，然后修改文件夹的名称为images。利用同样的方法，可以建立多个其他的一级目录。例如：news、script、swf等。（2）创建二级目录 在要创建二级目录的一级目录上单击鼠标右键。如在images文件夹上单击鼠标右键，在弹出的菜单中选择“新建文件夹”命令，在一级目录的下方就会出现一个文件夹，此时可以修改文件夹的名称为banner，或者在文件夹上单击鼠标右键，在弹出的菜单

7、中选择“编辑”|“重命名”命令，然后修改文件夹的名称为banner。 利用同样的方法，可以在images目录下建立多个其他的二级目录，如：logos、arrows等。也可以在其他的一级目录下建立多个二级目录。（3）创建文件在要创建文件的各级目录上单击鼠标右键。如：在站点根目录“mysite”上单击鼠标右键，在弹出的菜单中选择“新建文件”命令，在站点根目录下就会出现一个文件，此时可以修改文件的名称为index.htm，或者在文件上单击鼠标右键，在弹出的菜单中选择“编辑”|“重命名”命令，然后修改文件夹的名称为index.htm。注：在站点根目录下最好只存放名为“index.htm”的首页文件，以

8、及一些必要的文件，其他栏目的页面应存放在相应的栏目文件夹中。实验二 制作简单网页一、实验内容1. 掌握网页的创建、打开、保存和预览2. 掌握文本、图片、Flash等网页元素的添加及其属性的设置3. 掌握网页中各种元素的混合排版4. 掌握背景音乐的添加及其属性的设置5. 掌握网页页面的属性设置二、实验步骤1、网页的创建、打开、保存和预览（1）创建网页创建网页有三种方法，如下：a.启动Dreamweaver后，在开始页中单击“创建新项目”栏中的“HTML”命令，即可创建一个静态网页。b.选择菜单“文件”|“新建”命令，系统会弹出一个“新建文档”对话框。在对话框中选择“常规”选项卡，在“类型”栏中选

9、择“基本页”，在“基本页”栏中选择“HTML”，即可以创建一个静态网页。c.利用快捷键Ctrl+N，此时会打开“新建文档”对话框。之后的操作同b方法。（2）打开网页 选择菜单“文件”|“打开”，可以打开“打开”对话框，在其中选择要打开的网页，然后单击“确定”按钮，即可以打开要打开的网页。（3）保存网页保存网页有两种方法，如下：a.选择菜单“文件”|“保存”命令，在打开的另存为对话框中，选择保存网页的路径即可。b.利用快捷键Ctrl+S，此时也会打开另存为对话框，之后的操作同a方法。（4）预览网页 按F12功能键即可在浏览器中预览网页。2、使用文本在网页中使用文本，就像在Word中一样，可以直接

10、输入文字。（1）文本换行三种方法：1) 自动换行：当文本输入的长度超过设计窗口时，文本就会自动换行。2) 段落换行：按回车键就可以实现段落换行，在代码视图中会产生一个标记，此种换行形式，文本行与行之间有一定的间距。3) 换行符换行：按Shift+Enter组合键，可以实现换行符换行，此种换行形式，文本行与行之间没有间距。（2）插入空格的三种方法：1) 将中文输入法中的半角改为全角状态即可。2) 将插入栏切换到“文本”插入栏，在“字符”按钮的下拉菜单中选择“不换行空格”即可。3) 按Ctrl+Shift+Space组合键即可插入空格。（3）文字属性的设置1) 设置文字标题在设计视图中，输入“网页

11、制作课程”文本，然后选中该文本，单击属性面板中的格式选择框，在弹出的下拉菜单中选择标题2。2) 设置文字字体选中要设置的文字，单击属性面板中的字体选择框，在弹出的下拉菜单中选择要设置的字体，如果没有要设置的字体，则选择“编辑字体列表”命令。打开“编辑字体列表”对话框，在“可用字体”栏中选择要设置的字体，然后单击右侧的按钮，将选中的字体放入“选择的字体”栏中，一次可以选择多个字体，因为每台机器的字体库不同，为了避免设置的字体在其他机器上不存在，所以一次选择多个不同字体，机器会按照选择的顺序识别文字的字体。选择好后，单击“确定”按钮。回到设计视图中，再次打开字体选择框，选择刚刚添加的字体。这里设置

12、“网页制作课程”文本为黑体。3) 设置文字字号选中要设置的文字，单击属性面板中大小下拉按钮，弹出字号选择框，选取所要的字号即可，或者选择菜单“文本”/“大小”命令，也可选择字号。字号的大小分为数字和文字两种，如果选择数字的大小，需在其后选择字号大小的单位。此处正文文字大小选择9，单位选择“点数（pt）”。这里设置2级标题为16点数（pt）。4) 设置文字颜色选中要设置的文字，单击属性面板上的颜色选择框，在弹出的颜色选择框中选取所要的颜色即可。在拾色器中选择颜色后，在颜色的选择框后的文本框中会出现以#开头的6个十六进制数。其中“#”是颜色的标志，后面的6个十六进制数分别代表红、绿、蓝三种颜色。这

13、里选中“网页制作课程”文本后，在拾色器后的文本框中输入#ffcc00。5、文字排列方法（1）选中“网页制作课程”文本；（2）设置居中对齐。选中文字，单击属性面板的居中按钮或菜单文本/对齐方式/居中，使之居中。除居中对齐方式外还有左对齐和右对齐两种，方法同居中对齐。（3）设置列表。列表是一种简单而实用的段落排列方式。分为：无序列表和有序项列表。a.无序列表的设置：在“网页制作课程”文本下方输入“Internet简介”文本，然后选中该文本，在属性面板中单击“无序列表”按钮，此时“Internet简介”文本变为无序列表的项目，在文本后按回车键，即可输入列表的下一项“网站设计和Dreamweaver

14、MX 2004简介”，按此操作，即可作出无序列表。b.有序列表的设置：有序列表的设置与无序列表的设置类似。选中第一项文本后，在属性面板中单击“有序列表”按钮，其他操作同无序列表的设置。c.列表间转换：将无序列表转换为有序列表只要选中无序列表，然后在属性面板上单击“有序列表”按钮即可。 将有序列表转换为无序列表只要选中有序列表，然后在属性面板上单击“无序列表”按钮即可。d.列表符号修改：要修改无序列表和有序列表的项目符号，只要选中列表，然后单击鼠标右键，在弹出的菜单中选择“编辑标签”命令，打开“编辑标签”对话框，在其中可以选择不同的列表项目符号的类型。e.有序列表的开始项：设置有序列表项目符号类

15、型时，可以同时设置开始项，即如果不想有序列表从1开始，可以在“开始”文本框中输入想要开始的数字，例如：5。（4）设置段落缩进。先选择要缩进的段落，然后单击属性面板中的缩进按钮或菜单文本/缩进。3、使用图片A、插入图片将光标放在要插入图片的位置，然后选择插入/图像，或单击插入面板中常用选项卡的图像按钮，在出现的对话框中，选择要插入的图片，然后单击确定按钮，如果图片不属于本地站点，则会弹出一个提示对话框，询问是否将图片复制到本地站点中，此时选择“是”。如果图片存放在本地站点中，可以直接拖放到设计视图中。B、设置图片属性（1）在设计视图中插入一张图为“电脑”的图片。选中图片，此时的属性面板即为该图片

16、的属性面板。（2）图象文字下的文本编辑框用于为图片命名，我们给插入的图片命名为“computer”，此处命名是为了编程的时候使用。(3)宽度、高度：重新设置图片的宽度和高度。这里设置宽度为100像素，高度为100像素。（4）源文件：指定图片的来源，可以直接输入图片的文件地址或是单击浏览按钮，选择图片文件。此处显示已添加的图片的路径。（5）替代：设置图片文字说明，在浏览时，当把鼠标放在图片上时，会显示该文字。此处设置替代文本为“电脑”。（6）垂直间距、水平间距：设置文字与图片的间距。这里我们设置水平间距和垂直间距各为20像素。（7）低解析度源：如果图片很大，那么下载时间很长，这时可制作一幅低分辨

17、率的小图片指定在此处，让浏览者预先浏览。（8）边框：在文本框中输入数值，设置图片边框粗细。这里我们输入数值2。（9）对齐方式：包含左对齐、居中对齐和右对齐三种方式。单击其中的按钮就可以设置相应的对齐方式，此处的对齐是指图片在整个设计视图中的对齐方式。（10）对齐：在下拉菜单中包含九种对齐方式，这里的对齐方式是指图片与文本的对齐方式。在这里我们选择“左对齐”。4、插入Flash动画（1）插入Flash动画的步骤在文档窗口中，将光标放在要插入动画的位置上，然后单击“常用”插入栏中的“媒体”按钮，在打开的下拉菜单中选择Flash按钮，此时将打开“选择文件”对话框。在其中找到要添加的Flash，单击“

18、确定”按钮。（2）插入Flash文本（3）插入Flash按钮5、插入背景音乐将视图切换到代码视图，在标记之后的任意位置添加如下标记：其中表示嵌入，其后的为其属性：src为添加音频文件的路径；hidden为隐藏属性，它包括两个值false和true，若希望音乐为隐藏形式的则选择true；autostart为自动播放属性，它包括两个值false和true，若希望音乐为自动播放形式的则选择true；loop为循环属性，它包括两个值false和true，若希望音乐为循环形式的则选择true。6、页面属性设置实验三 超级链接的制作一、实验目的1. 掌握各种超级链接的制作2. 能够灵活应用热区链接二、实验

19、内容1、 添加外部链接（1）选中用于链接的文字（2）在属性面板中的链接框中输入一个要链接到外部网址。此处应用绝对路径，即不能省略“http：/”。2、 添加内部链接（1）选中用于链接的文字。（2）在属性面板中单击链接旁边的浏览按钮，出现选择文件对话框，选择超级链接要指向的文件名。3、 添加E-mail链接（1）将光标定位到要插入电子邮件链接的位置。（2）选择主菜单插入/电子邮件链接，弹出对话框，在文本框中输入要添加链接的文字。单击确定按钮即可。4、 锚记链接（1） 网页内部锚记链接.创建锚点1）在文档窗口的设计视图中，置插入点到需要命名锚点的地方。 2）执行以下任一操作： 选择插入命名锚点。

20、按下 Ctrl+Alt+A键。 3）在插入命名的锚点对话框的锚点名域中，输入锚点名。 如果锚点标记没有出现在插入点位置，选择查看 可视化助理 不可见元素。 注意: 锚点名不能包含空白字符且锚点不应放在层中。2.链接到命名的锚点方法一：用输入锚点名方法链接1）在文档窗口的设计视图中，选中要从中创建链接的文本或图像。 2）在属性检查器的链接域中，输入数值符(#)和锚点名。例如： 要链接到当前文档中一名为top的锚点，输入#top。 要链接到处于同一文件夹的另一文档中一名为top的锚点，输入filename.html#top。 注意: 锚点名区分大小写 。方法二：用指向文件方法链接到命名的锚点：1）

21、打开包含需要的命名锚点的文档。 2）选择查看 可视化助理 不可见元素以使锚点可见。 3）在文档窗口的设计视图中，选中要从中链接的文本或图像（如果这是另一个打开的文档，必须切换回它。） （2） 页面之间的锚记链接利用上述方法，将锚记设置在外部文件上，然后链接到外部文件即可。5、 热区链接图像映射就是将一个图片使用“热区”分隔成块，当点击热区时，将引发一个动作，比如打开一个新文件。创建图像映射： 1)选中图片。 2)点击属性监测器右下角的展开箭头显示出全部属性。 3)在地图名称栏中，输入地图的名字，这个名字必须是唯一的。 注：如果你在同一个文件中使用多个图象地图，请确定每个图象地图的名字都是唯一的

22、。 4)用以下方法之一定义图象地图区域：选中圆形工具，在图片上拖动，创建一个圆形热区。 选中矩形工具，在图片上拖动，创建一个矩形热区。 选中多边形工具，设定不规则形状的热区。单击要设定的形状的每个角，然后点击箭头工具闭合图形 5) 在热区属性监测器的链接栏，点击文件夹图标浏览选择当点击热区后要打开的文件，或者直接输入要打开的文件名。6) 要设置链接文件打开的窗口，在目标栏中输入目标窗口的名字，或者直接在目标弹出窗中选择框架名。 7) 在Alt栏，输入在纯文本浏览器中替代图片显示的文字。有些浏览器会在访问者将鼠标指向热区时显示这些文字。实验四 使用表格一、实验目的1. 掌握表格插入和属性的设置2

23、. 掌握使用表格模板来美化表格3. 掌握利用表格进行网页布局二、实验步骤 1、表格的插入表格插入可以使用菜单或面板，具体操作如下：（1）将鼠标放到网页中要插入表格的位置，在插入面板的常用选项卡中单击 按钮，或者选择插入/表格命令。（2）在弹出的对话框中输入相应的设置值，例如：3行4列等。（3）单击确定按钮，完成表格的创建。2、选定表格（1）选定整个表格选定整个表格有几种方法： 单击表格左上角或右边或底边框。 单击表格并选择修改/表格/选择表格。 将插入点放到表格内任意位置，选取文档窗左下角标签选择器中的 标签。 选取之后选项控柄就会出现在表格四周。（2）选定一行或一列选定一行或一列的方法有以下

24、几种： 将鼠标置于一行的左边框上，或置于一列的上边框上，当出现黑色箭头时单击即可。 点击一个单元格，横向或纵向拖拽可以选取多个行或列。一行或一列单元格的四周有黑线则表明已被选中。（3）选定不连续的几个单元格按住 Ctrl键点击表格内部来增加单元格、行或列到选集中。选取表格内多个单元格，然后按住 Ctrl键并点击单元格，行或列取消对某些单元格的选取。3、在表格中添加内容在表格的单元格中可以插入文本、图片等页面元素。插入方式同实验四。首先将光标定位在单元格内，然后输入内容。4、设置表格及单元格属性（1）设置表格属性选中表格，在属性面板中输入相应的属性值。可设置：表格名字、表格行数、表格列数、表格宽

25、度、表格高度（一般不指定）、表格对齐方式、表格边距、表格间距、表格边框的宽度、表格边框的颜色、表格背景颜色和背景图片。（2）设置单元格属性设置单元格属性的操作如下：选定要设置的单元格，在属性面板中输入相应属性的值。可设置：水平对齐方式、垂直对齐方式、单元格宽度和高度、背景颜色、边框颜色、禁止文字换行、单元格标题等。5、增加或删除表格的行、列增加行、列的具体操作如下：在需要插入新行（列）的单元格中单击。任选以下操作之一：如要插入一行，则选择修改/表格/插入行命令如要插入一列，则选择修改表格插入列命令如要插入多行（列），则选择修改/表格/插入行或列命令，输入要插入的行（列）数。删除行、列的具体操作

26、如下：选中要删除的行（列）单元格。任选以下操作之一：如要删除一行，则选择修改/表格/删除行命令如要删除一列，则选择修改/表格/删除列命令6、拆分、合并单元格合并两个或多个单元格的操作如下：选中想要合并的单元格，选中饿单元格必须是相邻的并且是矩形。选择修改/表格/合并单元格命令拆分单元格的操作如下：选中一个单元格。选择修改/表格/拆分单元格命令。在弹出的对话框中选择是拆分行还是列，并输入拆分的行（列）数。7格式化表格（1）在网页中插入一个表格，然后输入一些内容（2）选中表格，单击菜单命令/格式化表格（3）在弹出的对话框左边的表格样式列表框中选择样式（4）其他选项均设置为默认值（5）单击确定按钮（

27、6）保存并浏览网页8、利用表格制作导航条（1）在网页中插入表格（2）在表格单元格内插入内容，可以是文本、图片等，这里我们插入一些图片。（3）在属性面板上设置表格对齐方式为居中对齐（4）利用实验五的知识，对每个图片设置内部超级链接（5）按F12键即可看到导航条的效果。说明：以上制作无边框的导航条，如要制作有边框的导航条，则可设置表格边框的宽度为非0值。实验五 javascript特效和行为一、实验目的1. 掌握常用不同行为的添加方法2. 掌握层与行为的结合运用二、实验步骤1、行为面板使用行为面板为页面元素（即标签）附加行为并可以修改以前所附加行为的参数。行为面板具有下列选项： （+）：动作的弹出

28、式菜单，它可以被附加到当前选取的元素中。当从该列表中选择一个动作时，将出现一个对话框，在该对话框中可以指定动作的参数。 (-)： 从行为列表中移除选取的事件和动作。 上和下：箭头按钮在行为列表中向上或向下移动选取的动作。 事件：包含所有能触发动作的事件的弹出式菜单。该菜单仅在行为列表中某个事件被选取时才可见。根据所选取的对象不同，将显示不同的事件。如果所需的事件未显示，确保选取了正确的页面元素或标签。还确保已在显示事件子菜单中选取了合适的浏览器。 显示事件：指定当前行为在哪些浏览器中起作用。在该菜单中所做的选择决定了事件弹出式菜单中显示的事件。较旧的浏览器通常所支持的事件少于较新的浏览器，并且

29、大多数情况下，所选择的目标浏览器的范围越大，所显示的事件越少。 2、播放声音使用播放声音动作可以播放声音。例如，可以在鼠标经过某链接时播放音效，或者在加载页面时播放音乐剪辑等。 1）选择对象并打开行为面板。 2）点击（+）按钮并从动作弹出式菜单中选择播放声音。 3）点击浏览选取声音文件，或者在播放声音域中输入路径和文件名称。 4）点击确定。 5 检查默认事件是否是需要的事件。如果该事件不是所需的，从弹出式菜单中选择另一个事件。3、弹出消息窗口弹出消息动作将使用指定的消息显示一条JavaScript警告。1）选择对象并打开行为面板。 2）点击（+）按钮并从动作弹出式菜单中选择弹出信息。 3）在信

30、息域中输入的消息。 4）点击确定。 5）检查默认事件是否是需要的事件。如果该事件不是所需的，从弹出式菜单中选择另一个事件。 4、弹出新的窗口使用打开浏览器窗口动作在一个新窗口中打开URL。可以指定新窗口的属性，包括其大小，属性、无菜单条、名称。如果不为窗口设置属性，那么它将使用启动它的窗口的大小和属性打开。1）选择对象并打开行为面板。 2）点击（+）按钮并从动作弹出式菜单中选择打开浏览器窗口。 3）点击浏览选取文件，或者输入需要显示的URL。 4）设置下列选项： 窗口宽度： 指定以象素为单位的窗口宽度。 窗口高度： 指定以象素为单位的窗口高度。 导航工具栏： 浏览器按钮包括前进，后退，主页和刷新。 地址工具栏： 浏览器地址域。 状态栏： 浏览器窗口底部的区域，用于显示信息（如剩余加载时间，和URL关联的链接）。 菜单条： 浏览器窗口菜单。需要时使用滚动条：指定如果内容超过可见区域时滚动条自动出现。调整大小手柄： 指定用户是否可以调整窗口大小，窗口名称：新窗口的名称。如果想使用其作为链接目标或者用JavaScript控制它，那么应该给新窗口命名。5）点击确定。 6）检查默