《视频网站制作》实验教案

第一篇：《视频网站制作》实验教案

网 页 制 作

授课教师：熊伶俐

授课班级：广播电视编导

授课时间：

教 案

2008级B方向 2011——2012学年度第一学期

目 录

实验一：基本网页元素的使用 ··························································· 1 实验二：插入多媒体对象··································································· 2 实验三：超级链接的使用实验四：页面布局实验五：实验六：模板的使用实验七：制作表单网页实验八：设计并制作一个视频网站··································································· 4 ·············································································· 5 CSS样式的使用··································································· 7 ·········································································· 9 ···································································· 10 ···················································11 实验一：基本网页元素的使用

实验内容：

1、插入文字；

2、插入图像。实验目的：熟练掌握基本网页元素的使用 实验器材：装有Dreamweaver的PC机一台 实验步骤：

1、插入文字 1.1输入文字

鼠标在文档工作区单击，当出现闪烁的光标后，选择合适的输入法即可输入文字。1.2改变文本属性

选中文字后，可以在属性面板上改变文字的大小、粗细、样式、对齐方式等，还可以为文字建立超级链接。1.3增加字体

打开字体选项列表，单击最后一行的“编辑字体列表”，弹出“编辑字体列表”对话框。单击“＋”按钮，在“可用字体”列表中选择字体，单击向左的箭头，即可将所选择的字体添加到字体列表中。1.4添加项目编号

在属性面板上单击“项目列表”按钮，输入几行文字，每行文字均带有强调性的圆形小黑点

单击“编号列表”按钮，输入几行文字，每行文字均带有数字编号。

单击“列表项目”按钮，在打开的“列表属性”对话框中可以对项目符号进行详细设计。2插入图像

2.1常用图像格式：GIF、JPEG 和 PNG。2.2插入图像

（1）将光标置于要插入图像的位置，在“插入”栏的“常用”选项卡中单击“图像”按钮或选择“插入”菜单中的“图像”命令。

（2）此时将打开“选择图像源”对话框，选取存放在站点中的图像文件，最后单击“确认”按钮即可将图片插入到指定区域。

（3）如果所选择的图像文件不是站点中的文件，则将打开“Macromedia Dreamweaver MX”对话框。提示是否将图像文件保存到根目录下，单击“是”按钮，然后打开“拷贝文件为”对话框，定位到站点中用于存放图像文件的文件夹，最后单击“保存”按钮即可。

2.3修改图像尺寸

1、自由缩放

单击图片，在图片的下方和右侧出现3个黑色的控制柄。分别拖动这3个控制柄可以改变图片的尺寸。若要等比例缩放图片，可以按住shift键，用鼠标左键拖动右下角的控制柄。

2、精确缩放

如果已经确定了图片的具体缩放尺寸，单击图片，在其属性面板中输入宽和高的具体数值，可以精确地改变图片的尺寸。2.4为图片增加说明文字

单击图片，在属性面板的替代框输入图片的说明文字，按下F12键，打开浏览器窗口，将光标移动到图片上就可以看到为其添加的说明文字。2.5鼠标经过图像

（1）将插入点定位到要插入鼠标经过图像的区域，然后在“插入”栏的“常用”选项卡中单击“鼠标经过图像”按钮。

（2）打开“插入鼠标经过图像”对话框。

在“图像名称”文字框内输入翻转图像的名称；单击“原始图像”文本框后的“浏览”按钮，然后在“原始图像”对话框中，选取作为初始图像的图片文件后按“确认”按钮；单击“鼠标经过图像”文本框后的“浏览”按钮，然后在“鼠标经过图像”对话框中，选取作为鼠标经过图像的图片文件后按“确认”按钮；确保选中“预载鼠标经过图像”复选框；在“替换文本”文本框内输入替换文字；在“按下时，前往的 URL”文本框中指定目标文件的地址，最后单击“确定”按钮。

（3）按【F12】键在浏览器窗口中查看鼠标经过图像效果。2.6插入图像映射（热区）

1、先选中图像，此时可以在图像属性面板上看见一个“地图”区域，在其下方有三个淡蓝色的工具图标，即矩形、圆形和多边形。

2、根据需要用鼠标选中其中的一个，再把鼠标移到图像上拖拽出一块淡蓝色的区域。实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验二：插入多媒体对象

实验内容：

1、插入声音；

2、插入视频；

3、插入Flash。实验目的：熟练使用各种多媒体素材丰富网页 实验器材：装有Dreamweaver的PC机一台，耳麦一副 实验步骤：

1、在页面中插入背景音乐。方法一：通过手工编写代码

（1）打开要添加背景音乐的网页，切换到代码视图或拆分视图。

（2）在 和 之间添加以下代码：。

bgsound 标记符的基本属性是 src，用于指定背景音乐的源文件。

loop，用于指定背景音乐重复的次数；如果不指定该属性，或者loop值为-1或者true时，背景音乐无限循环。方法二：通过行为来实现

（1）打开一个网页文档，在文档左下角的“标签选择器”中选择“ body ”标签。（2）打开行为面板，点击“＋”按钮添加行为“播放声音”。（3）选择声音文件。一个网页的背景音乐就添加好了。（4）在文档中选择背景音乐的图标。（5）在属性面板中，点击“参数”按钮。（6）修改参数Autostart为true。2、链接声音与视频

（1）选择要用作超链接的文本或图像。

（2）在属性面板中，单击链接文本框后的“浏览文件”按钮，选择站点中的音频文件或视频文件。

注：如果原来的文件名为中文，应事先将其改为英文。

3、嵌入声音与视频

（1）在文档窗口中，将插入点定位到要嵌入文件的地方，然后在“插入”栏的“媒体”选项卡中单击“插件”图标。

（2）在“选择文件”对话框中选择嵌入的音频文件或视频文件（文件名称必须是英文，不能插入汉字名称的文件）。

（3）通过在“高”和“宽”文本框中输入数值或者通过在“文档”窗口中拖动调整插件占位符的大小，可以确定播放器控件在浏览器中的显示大小。

4、插入Flash动画

将光标置于要插入Flash动画的位置，执行“插入/媒体/Flash”命令，从弹出的“选择文件”对话框中选择Flash文件，单击“确定”按钮即可。注：插入的Flash文档只能是.swf格式文件。

5、插入Flash文本

（1）执行“插入/媒体/Flash文本”命令，弹出“插入Flash文本”对话框，设置文本字体、大小、对齐方式、粗体、斜体、颜色、背景色、链接URL等参数。（2）在“另存为”对话框中指定Flash文本的存盘文件名。

注：若Flash文本设置了链接，则必须将该文件与HTML文档保存在相同的文件夹下。*文件的路径和文件名都不能含有中文。

6、插入Flash按钮

（1）执行“插入/媒体/Flash按钮”命令，弹出“插入Flash按钮”对话框。

（2）选择按钮样式（有多达40余种样式可供选择），然后输入按钮文本，选择文本字体、大小、背景色、链接URL等参数。

（3）在“另存为”对话框中指定Flash按钮的存盘文件名。（注意事项同Flash文本）

7、制作图象查看器

（1）执行“插入/媒体/图象查看器”命令（或者单击插入工具栏的Flash元素选项卡中的图象查看器命令），弹出“保存Flash元素”对话框，设置将图象浏览器Flash影片保存在 站点下面，单击“保存”按钮在页面中插入一个Flash对象。

（2）在面板组合区中找到标签面板，单击将其展开（或者用F9键直接打开标签面板），可以看到Flash元素具有很多属性值。

（3）在属性列表框中打开frameShow，单击右方的下拉箭头，选择是。

（4）打开属性imageURLs，单击右侧的按钮，打开“编辑‘imageURLs’数组”对话框。（5）系统默认加了3各图象在列表中，单击上方的减号按钮将其全部删除。

（6）单击加号按钮，但后单击列表框右侧的打开文件按钮，在弹出的“选择文件”对话框中选择需要显示的图片。

（7）重复上一步操作，直到将所有需要显示的图片全部加入列表框中。

（8）如果需要对图片设置链接，在属性列表中选中imageLinks属性，单击右侧的按钮，弹出“编辑‘imageLinks’数组”对话框，按顺序设计各图片的链接URL即可。（9）在属性列表框中找到title，在后面输入图片的标题。

（10）在属性列表框中找到transitionsType，设置其值为Random，让图片之间的切换效果为随机效果。

（11）按F12键预览最后的效果。

实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验三：超级链接的使用

实验内容：插入超级链接 实验目的：熟练使用超级链接

实验器材：装有Dreamweaver的PC机一台 实验步骤：

1、创建锚记

锚记是在文档中设置位置标记，并给该位置一个名称以便引用。通过创建锚记，可以使链接指向当前文档或不同文档中的指定位置。锚记常常被用来跳转到特定的主题或文档的顶部，使访问者能够快速浏览到选定的位置，从而加快信息的检索速度。

（1）在需要设置锚记的位置单击，在插入工具栏的常用选项卡中选择命名锚记按钮，打开“命名锚记”对话框。

（2）在对话框的“锚记”名称框中输入锚记名（区分大小写），单击确定按钮，锚记标记出现在光标插入点。如果锚记标记没有出现，执行“查看/可视化助理/不可见元素”命令即可。

2、文字或图片的链接

（1）单击需要创建超级链接的文字或者图片，然后在属性面板的“链接”文本框旁单击“浏览文件”按钮。

（2）打开“选择文件”对话框，定位到要跳转的文件后单击“确认”按钮即可。

3、电子邮件链接

方法一：在链接文本框中输入“mailto：电子邮件地址”。

方法二：单击插入工具栏的常用选项卡中的“电子邮件链接”按钮，弹出“电子邮件链接”对话框，在文本输入框中输入作为电子邮件链接显示在文档中的文本，在E－Mail栏中输入电子邮件地址。如果不输入文本，则在文档中直接显示电子邮件地址。

4、锚链接

直接在链接文本框中输入“＃锚记名”即可。

5、快速检查网页链接

（1）在Dreamweaver 8中运行“站点→检查站点范围的链接”命令，此时将会激活链接检查面板。

（2）从面板左上部的“显示”下拉菜单中可以选择“断掉的链接”、“外部的链接”、“孤立文件”三种，比如我们选取“孤立文件”之后，Dreamweaver 8将对当前链接情况进行检查，并且将孤立的文件列表显示出来。

（3）对于有问题的文件，直接双击鼠标左键即可打开进行修改。

提示：外部链接是链接到外部网站的链接地址，Dreamweaver无法对其正确性进行检查。在为网页建立链接的时候需要提醒大家一定要格外小心，因为网站通常都有数百个页面，稍不留神就会导致空链接或者是链接错误的情况，这对你的网站形象可是有很不好的影响哟！

6、删除超级链接

在属性面板的链接对话框中删除链接路径，该链接便消失了。

实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验四：页面布局

实验内容：

1、利用框架进行布局；

2、使用表格进行页面布局；

3、使用图层进行页面布局。

实验目的：熟练掌握和使用各种方法进行页面布局 实验器材：装有Dreamweaver的PC机一台 实验步骤：

1、利用框架进行布局

（1）选择“文件”菜单中的“新建”命令，打开“新建文档”对话框，在“常规”选项中的类别框内选择“框架集”，在“框架集”框内选择“左侧固定，上方嵌套”结构，单击“创建”按钮。

（2）选择“文件”菜单中的“保存全部”命令，之后将出现 4 个“保存为”对话框，分别将框架集和各框架网页保存在站点中的同一文件夹中。

（3）按【Shift + F2】键打开“框架”面板，单击该面板中的最外层边框，选择整个框架 集，在其“属性检查器”中的“列值”文本框内输入“170”，在“单位”框内选择“像素”，其他属性保持不变。再选择包含上下结构的框架集，在其“属性检查器”中设置“行值”为 80 像素，其他属性保持不变。

（4）将插入点定位在左侧框架内，按【Ctrl + J】键打开“页面属性”对话框，分别设置网页的背景色为“黑色”、文本颜色为“#d1c598”、链接颜色为“#d1c598”、活动链接颜色为“#993300”、访问过链接颜色为“#006600”，单击“确定”按钮。

（5）继续将插入点定位在左侧框架内，单击“插入表格”按钮，插入一个 3 行 2 列，宽度为“140”像素，适当高度，单元格填充、单元格间距、边框都为“0”的表格。对单元格进行适当合并，然后在各单元格内添加内容，并使用“属性检查器”进行修饰，制作出左侧框架中的网页。

（6）分别制作出另外两个框架中的网页，使用“全部保存”命令保存对文档的修改。（7）制作要作为超链接目标、在右下框架内显示的各网页，注意其风格与尺寸应与原来右下框架中的网页相似。

（8）在左侧框架内，为导航栏中的文字设置超链接，并将其链接“目标”指定为右下框架（即 mainFrame），保存对文档的修改，在浏览器窗口中预览网页。

2、使用表格进行页面布局

（1）在空白文档窗口中，按【Ctrl + J】键打开“页面属性”对话框，在“标题”文本框内输入网页的标题，在“背景”文本框内选择黑色作为网页的背景，在“文本”文本框内选择白色作文本颜色，设置完成后单击“确定”按钮。

（2）将“插入栏”切换到“布局”选项卡，单击“布局视图”按钮切换到布局视图模式下，按【Ctrl + S】键将网页保存到站点中。

（3）在“插入栏”中单击“绘制布局单元格”按钮，绘制一个宽为 600 像素，高为 24 像素的布局单元格，然后添加若干文字。

（4）按住【Alt】键不放，多次单击“绘制布局单元格”按钮，连续绘制4个宽度相等的单元格，分别在第二与第三个布局单元格内插入若干文本，在第四个布局单元格内插入一条宽度为 600 像素，高度为 1 像素的水平线，并使用属性检查器对添加的文本与水平线进行修饰。

（5）将绘制的第二个布局单元格的高度调整为 120 像素，适当调整其他三个单元格的高度与宽度，在适当调整布局表格的宽度。

（6）单击“标准视图”按钮，将文档窗口切换到标准视图模式，将插入点定位在绘制的第四个单元格内，单击“插入表格”按钮，在打开的“插入表格”对话框中，设置表格“行”为

8、“列”为

5、“单元格填充”为0、“单元格边距”为0、“宽度”为100%（即所在单元格的宽度600像素）、“边框”为0，完成后单击“确定”按钮。

（7）在插入表格中的第一、三、五、七行与一、三、五列交界处的单元格内，分别插入尺寸相等的图像，在图像下方的单元格内输入一些文字并进行修饰。

（8）使用单元格的“属性检查器”，将插入图像单元格的宽度设置为 150 像素，高度为 100 像素，文字所在单元格高度为 80 像素，没有内容的单元格宽度为 75 像素。

（9）另外将插入图像单元格的对齐方式设置为水平“居中对齐”、垂直“中间”对齐，此 时的文档窗口。

（10）选取包含图像的单元格，然后使用 CSS 样式为该单元格设置一种边框效果。（11）在第一个单元格与第二个单元格内设置一个背景图像，按【Ctrl + S】键保存对文档的修改，按【F12】键在浏览器窗口中预览网页效果。

3、使用图层进行页面布局

（1）在空白文档窗口中，确保文档窗口处于“标准视图”模式下，按【Ctrl + J】键打开“页面属性”对话框，在“标题”文本框内输入网页的标题，在“背景”文本框内选择黑色作为网页的背景颜色，单击“确定”按钮，再按【Ctrl + S】键将网页保存到站点中。（2）单击“绘制层”按钮，在文档窗口中顶部绘制一个层，设置以下层属性：左 20、上 20、宽度 600、高度 20、指定一个背景图像作为第一层的背景。

（3）在该层中添加若干文本，然后使用“属性检查器”对文本进行修饰。使用相同方法在下面继续绘制一个层，添加若干文本并进行修饰，之后适当调整该层的位置与大小。（4）按住【Alt】键不放，单击“绘制层”按钮，在文档窗口中连续绘制三个层，将其中的一个层的宽度设置为 150、高度为 115，然后同时选取它们（注意最后选择有精确尺寸的层），选择“修改”菜单“对齐”选项中的“设成宽度相等”与“设成高度相等”命令，将这三个层设置为大小相等的层。此时这三个层仍然处于选中状态。

（5）按【Shift】键选取绘制的第一个层，选择“修改”菜单“对齐”选择中的“左对齐”命令，使这三个层与第一层对齐，最后适当调整它们所在的上下位置，使用“插入栏”中的“图像”按钮分别插入尺寸相同的三个图像。

（6）使用相同方法分别在文档中绘制其他层，并插入若干图像与文字。

（7）按【Ctrl + S】键，保存对文档的修改，按【F12】键在浏览器窗口中预览网页。实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验五：CSS样式的使用

实验内容：使用CSS样式创建风格统一的网页 实验目的：熟练使用内部样式表和外部样式表 实验器材：装有Dreamweaver的PC机一台 实验步骤：

1、使用“CSS 样式”面板

在网站或网页中创建和应用 CSS 样式时，需要使用“CSS 样式”面板。选择“窗口”菜单中的“CSS 样式”命令或按【Shift + F11】键，可以打开“CSS 样式”面板。

在文档窗口中，class 类样式将出现在 “CSS 样式面板”中。而对于创建的其他两种样式，将直接包含在网页代码或 CSS 外部样式表中，而不会显示在“CSS 样式”面板。

2、创建 CSS 样式

在文档中要创建 CSS 样式，首先将“CSS 样式”面板打开，然后执行以下步骤。

（1）在 CSS 样式面板中，单击“新建 CSS 样式”按钮，打开“新建 CSS 样式”对话框。（2）在“新建 CSS 样式”对话框中进行如下设置：如果选择“创建自定义样式（class）”样式类型，则在“名称”文本框中输入样式名称；如果选择“重定义HTML 标签”或“使用 CSS 选择器”样式类型，则在“名称”文本框中选择相应的样式名称。

（3）在“定义在”框中选择，如果选择“新建样式表文件”选项，如果曾经定义过样式表文件，则可以从列表中选择一个文件；如果选择“仅对该文档”单选按钮，表示样式将直接定义在当前文档中。

（4）单击“确定”按钮，如果选择“新建样式表文件”选项，则打开“保存样式表文件”对话框，进行保存设置即可后弹出“样式名称的CSS 样式定义”对话框；则直接弹出“样式名称的 CSS 样式定义”对话框。

（5）用户可以在“分类”列表框中选择 8 种 CSS 样式属性，Dreamweaver 选择相应属性分类后则在对话框右部会显示相应的选项，可以根据需要设置。（6）最后单击“确定”按钮，则样式定义完毕。

3、应用CSS样式

在文档窗口，不论是内部样式还是外部样式表文件，对于出现在“CSS 样式”面板中的自定义 class 类样式，应首先选取要应用样式的文本、段落或其他对象，然后单击面板中的样式图标或样式名称。如果要取消样式，选取对象后，单击面板中的“无 CSS 样式”选项即可。

对于“重新定义 HTML 标签”样式与“使用 CSS 选择器”样式，网页自动应用该样式而无须用户指定。

4、自定义CSS样式实例

本实例定义一种网页中常用的正文样式，效果为“文字大小16 px，行高120%，首行缩进两个字符”。

（1）打开一个包含段落文本的文档，确保打开“CSS 样式”面板，单击“新建 CSS 样式”按钮，打开“新建CSS样式”对话框，在“名称”文本框中输入样式名称“test”，在“类型”选项中选择“创建自定义样式（class）（M）”单选按钮，选择“仅对该文档”单选按钮，设置完成后单击“确定”按钮。

（2）在打开的“.test 的CSS 样式定义”对话框中，设置字体为“宋体”、大小为 16 像素（px）、行高为 120%。

（3）然后在“分类”列表框中选择“区块”选项，设置文字缩进为 32 像素（相当于两个字符），单击“确定”按钮，则新建的“test”样式出现在“CSS 样式”面板中。

（4）在文档窗口中选择取要应用样式的文本，然后在单击“test”样式，即可应用该样式。

5、重新定义 HTML 标签样式实例

本实例定义一种常见的效果，即网页中的所有超链接都没有下划线。

（1）打开一个包含有超链接的文档，确保打开“CSS 样式”面板，单击“新建 CSS 样式”按钮，打开“新建 CSS 样式”对话框，在“类型”框内选择“重新定义 HTML 标签（R）”选项，然后在“名称”框内选择 a 标签（即超链接标签），选择“仅对该文档”选 项，单击“确定”按钮。

（2）在打开“a 的 CSS 定义”对话框中的“修饰”选项中选择“无”，单击“确定”按钮。

（3）此时样式被自动应用，网页中的所有超链接都没有下划线。

实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验六：模板的使用

实验内容：利用模板创建风格统一的网页

实验目的：掌握模板的创建和编辑方法；熟练利用模板创建网页 实验器材：装有Dreamweaver的PC机一台 实验步骤：

1、新建一个文档，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，切换到“布局”模式，单击“布局表格” 按钮，绘制一个宽：780px，高：636px的表格。

2、单击“布局表格” 按钮，从该表格的左上角起，绘制一个宽：780，高：120的表格。

3、单击“布局单元格” 按钮，从表格的左上角开始绘制一个宽：140，高：120的单元格.4、将光标定位在单元格内，选择[插入]/[图像]菜单命令，打开“选择图像源”文件对话框，选择图像logo.gif。

5、单击“布局单元格” 按钮，接着上面的单元格的右边绘制一个宽：640，高：120的单元格.6、将光标定位在单元格内，选择[插入]/[媒体]/[Flash]菜单命令，打开“选择文件”对话框，选择文件banner.swf。

7、接着往下绘制一个宽：780，高：21，水平：居中对齐，垂直;居中，背景颜色：#CC3333的单元格，输入文字：首页 个人简介 文学作品 绘画作品 动画作品 视频作品 学习心得 给我留言 写信给我，设置文字格式：字体“宋体”，大小“14px”。

8、接着再往下绘制一个宽：140，高：470，水平：居中对齐，垂直;居中，背景颜色：#0066FF的单元格。

9、接着上面表格的右边绘制一个宽：640，高：470，水平：居中对齐，垂直;居中，背景图像：back.gif的单元格。

10、接着上面的两个表格的下面绘制一个高：18，水平：居中对齐，垂直;居中，背景颜色：#000000的单元格，输入文字：2006年12月20日最后更新 © Copyright 2006 小慧版权所有，设置文字格式：字体：宋体，大小：12px，颜色：白色。

11、回到“标准”模式，将光标定位到第8步创建的单元格内，选择[插入]/[模板对象]/[可编辑区域]菜单命令，弹出如图2-10-11所示的对话框，单击“确定”按钮，则在该单元格内就出现了一个名为“EditRegion1”的可编辑区域。

实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验七：制作表单网页

实验内容：使用表单制作一个注册页面

实验目的：掌握表单的建立和使用；熟练使用表单提交相关数据 实验器材：装有Dreamweaver的PC机一台 实验步骤：

1、新建一个文档，将“插入”栏中的“常用”选项卡改为“表单”选项卡。

2、将光标定位在文档页面中需要插入表单的位置，单击 “表单” 按钮，此时光标定位处出现一个红色的虚线框，它表示表单的范围，所有表单对象都在该区域内插入。

3、在表单中插入一个9行2列的表格的表格，设置表格的背景图像为”bg1.gif”，表格“居中”。

4、合并第1行的单元格，输入文字”用户注册表”，文字之间空一格，格式：字体“宋体”，大小“16pt”，颜色：“红色”。

5、在第2行第1个单元格内输入“你的用户名：” 将光标定位到第2个单元格，单击 “文本字段” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮。

6、在第3行第1个单元格内输入“你的密码：” 将光标定位到第2个单元格，单击 “文本字段” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，打开“属性”面板，在“最多字数符”中输入“6”，将“类型”改为“密码域”。

7、在第4行第1个单元格内输入“你的性别：” 将光标定位到第2个单元格，单击 “单选按钮” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“男”，“位置”改为“在表单项前”，单击“确定”按钮，敲一个空格，再单击 “单选按钮” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“女”，位置”改为“在表单项前”，单击“确定”按钮，选择“男”前面的单选钮，打开“属性”面板，将“初始状态”改为“已勾选”。

8、在第5行第1个单元格内输入“你的生日：” 将光标定位到第2个单元格，单击 “列表/菜单” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“年”，“位置”为“在表单项后”，单击“确定”按钮，再单击 “列表/菜单” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“月”，“位置”为“在表单项后”，单击“确定”按钮，再单击 “列表/菜单” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“日”，“位置”为“在表单项后”，单击“确定”按钮；选择“年”前的列表，打开“属性”面板，将“类型”设为“菜单”，单击 按钮，在弹出的“列表值”对话框中的“项目标签”中输入“1990”，单击 按钮，添加第二个项目标签，输入“1991”，重复上面的操作，输入后面的数字，单击“确定”按钮，回到“属性”面板，将“初始化选定”设为“1990”，同理对后面的列表进行相同的操作。

9、在第6行第1个单元格内输入“你的生日：” 将光标定位到第2个单元格，单击 “复选框” 按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“唱歌”，同理插入后面的复选框。

10、在第7行第1个单元格内输入“个人近照：” 将光标定位到第2个单元格，单击 “文件域” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮。

11、在第8行第1个单元格内输入“个人简介：” 将光标定位到第2个单元格单击 “文本字段” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，打开“属性”面板，将“类型”改为“多行”。

12、将光标定位到第9行第2个单元格，单击 “按钮” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，连续插入几个“不换行空格”，再单击 “按钮” 按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，打开“属性”面板，将“动作”改为“重设表单”。

13、选择“提交”按钮，打开行为“面板”，添加行为“检查表单”，打开“检查表单”对话框，将文本“text1在表单中，text2在表单中”都设为“必需的”，单击“确定”按钮。

14、选择整个表单，打开“属性”面板，在“动作”中输入“mailto：你的邮箱地址”。

15、按【Ctrl+S】保存该网页为form.htm，按【F12】键预览。

实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

实验八：设计并制作一个视频网站

实验内容：制作一个视频网站

实验目的：掌握和了解网站制作的流程，熟练使用网页制作的各种技巧 实验器材：装有Dreamweaver的PC机一台，耳麦一副 实验步骤：

（一）制作首页

1、定义网页基本属性

（1）在空白文档窗口中，按【Ctrl + J】键打开“页面属性”对话框，在“标题”文本框内输入网页标题“游戏王国”，设置网页的背景色为“黑色”，文本色为“白色”，在“跟踪图像”框内选取绘制好的草图作为网页的“跟踪图像”，单击“确定”按钮。（2）按【Ctrl + S】键将文档保存到站点中。

2、页面布局

（1）在文档窗口中，将“插入栏”切换到“布局”选项卡，再单击“布局视图”按钮，将文档窗口切换到布局视图模式。

（2）单击“插入栏”中的“绘制布局单元格”按钮，在文档窗口顶部沿着跟踪图像绘制一个适当尺寸的布局单元格（用于放置标志图案），按住【Ctrl】键不放，继续使用“绘制布局单元格”按钮，在文档窗口中的两侧分别绘制两个布局单元格（用于放置页面两侧的边 框图案），在左侧沿着跟踪图像继续绘制三个布局单元格（左右两个单元格用于放置竖线效果，中间单元格用于放置“友情链接”等内容），适当调整各单元格的尺寸与位置。（3）将插入点分别定位到刚绘制的 6 个单元格内，然后按【Ctrl + Alt + I】组合键分别插入图像，适当调整布局单元格尺寸与图像匹配，并调整它们的位置。

（4）单击“插入栏”中的“绘制布局表格”按钮，在文档窗口右侧绘制第二个布局表格（嵌套在第一个布局表格中）。

（5）在该布局表格顶部沿着跟踪图像绘制一个用于插入金黄色细线的布局单元格，然后在其中插入这个图像，并适当调整它的尺寸与位置。

（6）按住【Ctrl】键不放，单击“插入栏”中“绘制布局单元格”按钮，在刚插入金黄色细线图像布局单元格下方的一行中绘制两个高度为 24 像素的布局单元格（左边单元格用于放小标题），然后使用“绘制布局表格”按钮，绘制一个包含这两个布局单元格的第三个布局表格。

（7）单击“绘制布局单元格”按钮，沿着跟踪图像继续绘制三个布局单元格（分别用于包含文字、图片和子栏目超链接）。

（8）分别在右侧布局单元格内添加图像与文字，并适当调整布局单元格与布局表格的尺寸与位置。为了看清楚在单元格中添加的文字，可按下【Ctrl + J】键打开“页面属性”对话框，将跟踪图像的透明度调整为“30%”。

（9）按照步骤（5）~（8）的方法添加另外两部分的内容（“Diablo”和“石器时代”）。（10）在最大的布局表格底部绘制一个布局单元格，并在其中插入图像（即最底端的图案，此处用作占位符），调整该布局单元格的尺寸与位置，使其与上面的内容相匹配。（11）在文档窗口中的左侧位于两个“细线”图像之间的区域按住【Ctrl】键不放，连续绘制 7 个大小相等的布局单元格。

（12）在其中插入图像、文字、日期、电子邮件链接和表单对象中的“列表/菜单”等网页内容，调整各单元格的尺寸与位置。

（13）单击“绘制布局表格”按钮，绘制一个布局表格，使其包含页面左侧除最左边的布局单元格之外的 10 个单元格。

（14）分别将左右两侧的4个布局单元格，即用来放置左右边框和左边两条竖线的单元格，适当调整高度与内容相匹配，并将其他布局表格与布局单元格的尺寸与位置适当调整。

（15）按【Ctrl + S】键保存对文档的修改。

3、进一步排版

接下来使用表格对页面进一步排版，具体步骤如下。（1）将文档窗口切换到“标准视图”模式下。

（2）将最后一个布局表格中的列表/菜单、日期与电子邮件链接所在单元格的对齐方式设置为水平“居中对齐”、垂直“中间”对齐，将包含文字与图像的单元格设置为水平“左对齐”、垂直“中间”对齐。

（3）在靠近边缘的两个单元格中设置背景图像，作为整个网页界面中的边框，在包含有细线的单元格内设置背景图像，最后选中左边用于放置“友情链接”的表格，为其设置背景 图像。

（4）将包含文字“Counter-Strike”、“Diable II”和“石器时代”所在单元格的对齐方式设置为水平“居中对齐”、垂直“中间”对齐，分别选择这三个单元格，然后设置一个背景图像，适当调整单元格的尺寸与位置。然后选取包含该单元格的表格，设置其背景图像。（5）将包含有文本“Counter-Strike”、“Diable II”和“石器时代”单元格下方的三个单元格的对齐方式设置为垂直“中间”对齐。

（6）将底部单元格的图像设置成为该单元格的背景图像，并适当调整单元格的尺寸。（7）设置完成后，在浏览器窗口中预览网页，然后适当调整各个表格与单元格的尺寸，按【Ctrl + S】键保存对文档的修改。

4、完善页面

最后设置页面中的超链接，并使用 CSS 技术对网页中的内容进行格式修饰，具体步骤如下。

（1）分别为文档窗口中的文本添加超链接（暂时没有制作目标文件的可以用“#”指定空链接），然后按【Shift + F11】键打开“CSS 样式”面板。

（2）在“CSS 样式”面板中，单击“新建 CSS 样式”按钮，在打开的“新建 CSS 样式”对话框中的“名称”文本框中输入“test”，在“类型”框中选择“创建自定义样式（class）”单选按钮，在“定义在”框内选择“新建样式表文件”，单击“确定”按钮。（3）在打开的“保存样式表文件为”对话框中选择站点根目录，在名称框中输入“mystyle”，单击“保存”按钮。

（4）在打开的“.test 的 CSS 样式定义（在 mystyle.css 中）”对话框，设置字体为“宋体”、大小为“16”像素（px）、颜色为“#CCCCCC”、行高为“150%”，单击“确定”按钮。在文档窗口中分别选择描述游戏栏目的正文文字，在“CSS 样式”面板中单击“test”将段落文本应用该样式。

（5）单击“新建 CSS 样式”按钮，在“新建 CSS 样式”对话框中的“名称”文本框内输入“gold”，在“定义在”框内选择“mystyle.css”样式表文件，单击“确定”按钮，打开“.gold 的CSS样式定义（在 mystyle.css 中）”对话框，设置字体为“宋体”、大小为“16”像素（px）、颜色为“#d1c598”、行高为“120%”，单击“确定”按钮，在文档窗口将左侧插入了小图标的文本应用该样式。

（6）单击“新建CSS样式”按钮，在“mystyle.css”中定义一个名为“title”的样式，定义该样式时，设置字体族列表“宋体、Arial”，大小为“16”像素，行高为“150%”，颜色为“#d1c598”。然后为标题文本“Counter-Strike”、“Diable II”和“石器时代”应用该样式。

（7）单击“新建 CSS 样式”按钮，在“mystyle.css”中定义一个名为“border”的样式，定义该样式时，设置边框样式为“凸出”、宽度为“细”、颜色为“#990033”，选中“全部相同”复选框，单击“确定”按钮。在文档窗口中，将包含超链接的单元格选中，然后应用该样式。

（8）在该样式表文件中，新建4个“使用CSS 选择器”样式。在 a:link 样式中，设置字体为“宋体”、大小为“16 像素”、行高为“120%”、颜色为“#D1C598”、修饰为“无”；在

a:visited 样式中，设置与 a:link 相同；在 a:hover 样式中，设置颜色为“#FFF9CC”，修饰为“下划线”，其他相同；在 a:active 样式中设置颜色为“#990033”，修饰为“无”，此时网页的中的超链接自动应用了 CSS 选择器样式。

（9）在该样式表文件中，新建一个名称为“button”的“创建自定义样式”，在“类型”选项中设置字体为“宋体”、大小为“16”像素、颜色为“#FFEFC6”；在“背景”选项中设置背景颜色为“#333333”；在“边框”选项中设置边框样式为“实线”、宽度为“细”、颜色分别为“#d1c598”、“#333333”、“#333333”、“#d1c598”（需先将“全部相同”选项清除），最后将文档窗口中插入的“列表/菜单”应用该样式。

（10）适当调整各个表格与单元格的尺寸与位置，按【Ctrl + S】键保存对文档的修改。

（二）制作其它页面

插入文字、图片、声音、动画、视频

（三）测试发布

1、Dreamweaver 中打开站点首页，然后按【F12】键预览页面，在浏览器中测试每一个页面，看内容是否能正确显示，尤其要测试超链接是否能正确工作。

2、将整个站点目录复制到另外一个位置，然后在浏览器中打开站点首页，测试是否所有的超链接都能正确工作。使用这种方法能够检测出使用绝对路径创建出的不正确的超链接。如果碰上无法正确跳转的超链接，应回到原来的站点中，打开相应页面重新设置超链接。

3、为了确保不同的浏览者能够看到一致的页面效果，制作好的网站还应在不同的显示分辨率下进行测试，至少要在 800×600像素和1024×768像素两种分辨率下进行测试。另外，还需要在不同字体显示大小情况下进行测试（即在“大字体”和“小字体”两种方式下测试），以确保不同字体设置的浏览者能够看到一致的字体效果。

4、测试完成之后，就可以将网站发布到远程站点上。

实验小结：略（学生写实验过程中的感受、体会，遇到什么问题，如何解决问题等）

第二篇：制作个人网站教案

学科：《信息技术》 课题：《制作个人网站》 课时：1 [教学目标]（1）熟悉Dreamweaver的软件环境，掌握该环境下的文字处理方法；

（2）掌握插入剪贴画的方法，掌握使用表格，网站内部的超链接，应用掌握的知识制作表达一定主题、包含文字、图片的个人网站。[教学重点与难点] 使用表格定位文字、图片，网站内部的超链接。[课时安排] 1.心课导入与布置任务（用时6～7分钟）2.学生自主学习（用时27分钟）3.教学评价（用时10分钟）4.教学总结（用时1～2分钟）教学过程：

1、导入

首先以学校要建校园网站为引言，校园网站下挂有教师个人网站、班级网站、学生个人网站等，激发学生要自己制作个人主页的兴趣，然后给学生布置任务，要求网站必须有同学们亲手制作的网页，才能真正成为的校园网站，提供大量的制作网页的素材（如图片、声音、动画、视频等），同学们可以自由地发表自己的想法和观点，开阔学生的思路，同时激发学生的创造欲望。

2、教学内容

教师利用多媒体教学网（或大屏幕投影仪）简单分析教学课件的要素，将Office中的Word 2000知识迁移到此，将任务进行分解成为若干个小任务，如制作一个网站，必须制作若干个网页，而一个网页可能由文字、图片、超链接等构成，因而就有要完成插入文字、插入图片、插入超级链接等小任务。具体的任务要求是：文字要有不同的字体、颜色、字号、对齐方式；图片要求大小调节合适、位置摆放合适；表格要有合并与拆分，表格内要有文字、图片；主页与子网页之间要有超级链接并为双向的。然后简单演示一个网站内部的超级链接。引导学生轻松愉快、主动去解决问题，完成任务，进而达到自身对知识的意义建构。

接下来就是学生开始自主学习的过程。学生带着制作网页这个任务，并由此而产生对网页中的文字处理与图片等知识的需求，由内在的需要促使学生去主动探索、学习相应的知识，并通过自己主动探索来解决问题。在此过程中，教师巡视查看学生的学习过程，了解学生的学习情况、进度，以指导者的身份对个别学生的问题进行单独交流、指导；如：有的学生问网页之间的超级链接如何去做，有的学生问如何利用表格对文字、图片的定位等。学生之间可以互相交流、互相学习、互帮互助、团结协作；对大多数学生的共性问题，教师给予广播式指导解决。对于理解能力、动手能力以及综合应用能力强的同学指导他们进一步学习扩展内容，发展他们的个性，培养他们的积极创新精神。如对某些学的快的学生给予引导如何用表格套表格的再定位方法准确地定位文字、图片。

3、教学评估

在规定的时间内学生基本完成了学习任务，下面是给学生一个展示自我的机会，从学生制作的网页中挑选出有代表性的作品，由学生自己介绍、演示，这样可以锻炼学生的表达能力，然后让学生互相讨论，发表意见、看法，实现相互交流、学习的目的。教师在此过程中以实现预定的教学目标为目的，适当地引导讨论方向。这一个过程是非常重要的过程，是一个再学习再提高的过程。对于知识掌握较好的学生正是表现自我的时候，是最有成就感的时候，对于少数知识掌握不太好的学生，真是一个再学习的过程，完成对知识的意义建构。

4、课堂总结

教师总结本节课的教学内容：掌握文字处理方法、插入剪贴画、使用表格，网站内部的超链接，应用掌握的知识制作表达一定主题、包含文字、图片的个人网站。对学生的制作成果表扬鼓励，并提出新的问题，留下悬念，激发学生继续学习的兴趣。如要使自己的网页更美观、内容更充实，具有“商业网站”的味道，我们就必须要对网页进行美化进行装饰，如何去才能实现呢？这是我们下一节要完成的任务。

第三篇：中学网站制作教案[模版]

中学网站制作教案 ——超链接的应用 学习需求分析

你们是设计者，应该根据学习学要分析的过程展开分析。因此，作业要根据你们的调查目标、过程等展开分析，从而描述该内容学习的必要性。

以学习超链接为例（这不是为例，这就是你要认真展开做的。）

1>.发现问题：即了解学生学习中的困难，比如每个学生的动手能力不同。

2>.分析问题原因:可能是知识点不熟悉而导致操作中犯错，也可能是平时训练的不多等等其他原因。

3>.分析可行性（人、财、物的支持、重要性）教学目标

教学目标就是按照行为目标要求的四个要素来描写。

学习者特征分析

初中生的学习状态和小学生以及高中生都有很大的区别。与小学阶段的学习相比，表现出以下明显的差异：

1.学习内容逐步深化、学科知识逐步系统化，学习的课程门类逐渐增加，内容也逐步加深。小学期间，学生的学习内容是比较简单的，学科也相对简化，主要学习语文、数学等最基础的课程。老师的教学也更重趣味性和直观性，而不是强调知识的完整体系。而对于初中生来说，学习的网页制作教程frontpage，就除要求学生识记大量的定义、原理等知识点外，更重要的是培养学生掌握运用知识的能力。在掌握知识理论的同时必须熟悉上机操作。2.学习的自觉性和依赖性、主动性和被动性并存；

网也制作教程frontpage得教学应该切合初中生的这种特征，注意兴趣的引导，激发他们对课程学习的自觉性和主动性。

3.学生在学习中的自主能力日显重要。

网页制作教程frontpage的学习就不能局限于课堂的45分钟，老师需要引起学生的兴趣并强调课外的学习巩固。

初中生一般刚开始接触计算机，对已计算机类教程的学习多少都存在好奇心。相 对其他课程的学习，网页制作课程frontpage就具有较大的吸引力，所以要把握这种机会更好的引导学生学习和操作。

仔细查阅资料，这些分析与自己的设计有多少联系性。教学内容分析

内容分析法技术采用我们在课堂中讲授的一种方法去分析。其框架中的内容还是用简单的目标描述法。

第四篇：如何制作视频

怎么制作视频？平时在网上看到了很多网友使用图片制作的精彩视频，想到平时自己也拍摄了不少照片和视频，我们也会不禁跃跃欲试，想要将它们制作成一个精彩的视频，和亲朋好友们共享。那么，这些视频是怎么制作的呢？是否像看起来那样复杂。今天，本文就为大家解惑，使初涉视频制作的网友们了解，制作一个精美的视频并非是专业人士的特权，通过一些民用软件，我们普通家庭用户同样可以打造个性化的唯美视频。而能够最好的为网友们实现这一需求的，正是国内目前最老牌的，多年来致力于打造最人性化视频制作软件的《数码大师》，下面，就让我们来体验它的快速制作精美视频功能。

一、导入要制作成视频的照片和视频短片

数码大师支持导入的制作视频的素材包括照片、视频、音乐等等，非常丰富，更多的素材意味着制作出的视频的丰富性。如下图，在图中1、2、3、4处分别导入照片和视频短片素材。

专业承接各类视频制作，婚庆视频，游戏视频，生日视频，宣传视频，以及其它视频制作剪辑，特效，修改等，qq 568826266

点击“插入视频片头”按钮，可在制作的视频设置一个精彩炫丽的视频片头，更加引人入胜。

点击“相片间插入视频短片”按钮，可在相片间插入和照片主题一致，平时拍摄的精彩视频短片，将相片与视频完美融合，宜动宜静。

二、添加动听的背景音乐和配上MTV同步字幕 有图片，还要有音乐。点击“背景音乐”选项卡，在这里导入背景音乐和同步歌词。数码大师制作MTV歌词很简单，只需导入背景音乐对应的LRC歌词文件，很多播放器在播放背景音乐时都会自动下载匹配的LRC歌词文件，这样制作出来的视频就会具有明星的MTV的效果，还可以方便我们在观看MTV视频时跟唱。当然，我们还可以为MTV歌词设置字幕样式和展示特效，来丰富视频的展示效果，这也是数码大师在制作精美度方面的细节体

三、为视频制作动感的文字特效

点击“修改名字及注释”按钮，可以为我们的照片配上一段文字，点击左下角的“注释”按钮，就可以为相片文字选择展示形式了，动态、静态、不显示或名字注释任选其一显示，都能灵活设置。

四、使制作的视频以动感炫丽的特效展示

相片特效使得制作的视频更为动感，这里不进行设置也会默认随机特效。当然，我们也可以点击“应用特效到指定相片，为每张相片指定更符合相片内容的炫丽特效。数码大师的相片特效多达数百种，是同类软件中效果最多最精美的，火焰、液态、卷轴、3D旋转、翻页、百叶窗、碎片飞出等等，丰富而动感，足够我们打造一个唯美动感的电子相册。

最后，直接点击“视频相册”右下角的“开始生成”按钮，一个极富个性的绚丽视频具极速生成了。是不是充满期待呢，马上就发挥你的无限灵感，自己动手制作一个唯美视频吧，体验制作的乐趣。

图表 1

第五篇：视频制作

1月30日：婚礼流程表 第一场：婚礼仪式篇

11点10分开始清场《清场音乐响起》

11点15分所有工作人员开始做好仪式前所有准备。《音乐响起，灯光秀》 11点18分正式开始，主持人上台。11点21分新郎首先上台，走秀形式。11点22分三个化身开场白，伴娘上台。11点24分三个化身开场白，妈妈上台。11点26分三个化身开场白，奶奶上台。11点27分新娘上台《爸爸陪伴》 11点28分求婚仪式。

11点29分新郎新娘踏上红地毯《婚礼进行曲》 11点30分介绍新郎新娘。11点32分证婚人上台。《准备手稿》 11点35分交换戒指仪式。11点37分香槟酒仪式。11点39分切蛋糕仪式。11点41分交杯酒仪式。11点43分全场干杯。11点45分新郎新娘退场。第二场：烛光仪式篇

12点00新郎新娘再次登场。12点03分烛光仪式。

12点05分爸妈至新婚贺词。

12点10分拥抱父母之爸爸妈妈退场。12点11分新郎新娘至答谢词。

12点15分新郎新娘退场，全场结束。。备注：

婚礼仪式开始前，请新人就位，新娘的父亲就位，新郎的妈妈和奶奶就位，伴娘和伴郎就位，礼花，花瓣雨的工作人员就位，司仪，追光灯，灯光控制，DJ，督导就位。

伴郎：作为新郎事务的第一联络人，需要反应迅速，管理新郎新娘和父母的胸花，始终在新郎身边，保管好新郎的手机，收到红包后交给新郎妈妈。

伴娘：作为新娘事务的第一联络人，需要反应迅速，始终在新娘身边，保管好新娘的手机，到新娘家，负责新娘的鞋子和替换衣服，卸妆物品等，到酒店后可以提醒摄影师拍照细节照片。

司仪：张扬