《[互联网]网站开发技术实验指导书.doc》由会员分享，可在线阅读，更多相关《[互联网]网站开发技术实验指导书.doc（63页珍藏版）》请在三一文库上搜索。
1、网站开发技术实验指导书敖磊 编计算机工程学院网络工程教研室2010年3月目 录实验1 使用向导搭建站点2实验2 设置页面整体效果（一）3实验3 设置页面整体效果（二）3实验4 制作文本页面3实验5 插入图象操作4实验6 插入Fireworks HTML文档5实验7 插入鼠标经过图象5实验8 插入导航条6实验9 制作图象页面7实验10 插入多媒体文件7实验11 插入Flash按钮8实验12 插入Flash文字9实验13 插入Flash元素9实验14 控制页面中的Flash动画10实验15 插入Shockwave动画11实验16 添加背景音乐11实验17 嵌入音乐12实验18 添加声音到任何页面对
2、象上12实验19 插入MPG及AVI等视频13实验20 插入JAVA小程序13实验21 插入ActiveX控件13实验22 插入滚动字幕或图象14实验23 插入多媒体页面实例15实验24 插入并编辑表格15实验25 表格的格式化16实验26 表格的排序16实验27 制作网站首页17实验28 制作网站内页18实验29 制作内部链接20实验30 制作图象映射20实验31 制作E-mail链接21实验32 制作锚点链接21实验33 通过转到URL行为添加链接21实验34 链接网页的实例22实验35 创建模板22实验36 创建基于模板的页面23实验37 使用库文件编辑页面23实验38 使用模板和库的实
3、例24实验39 创建框架网站25实验40 插入层26实验41 设置层26实验42 显示隐藏层26实验43 拖动层27实验44 设置层文本28实验45 制作时间轴动画28实验46 插入表单29实验47 插入文本字段29实验48 插入文本区域30实验49 插入隐藏域31实验50 插入复选框31实验51 插入单选按钮（一）32实验52 插入单选按钮（二）32实验53 插入列表/菜单33实验54 插入文件域33实验55 插入按钮34实验56 插入图像域34实验57 插入跳转菜单35实验58 通过行为检查表单36实验59 内部CSS的建立流程36实验60 外部CSS的建立流程41实验61 弹出信息46实
4、验62 打开浏览器46实验63 改变属性47实验实例：个人网站主页设计47实验1 使用向导搭建站点、选择“窗口”中的“文件”，打开文件面板；、选择文件面板中的下拉菜单，选择“管理站点命令；、弹出“管理站点”对话框，选择“新建”按钮，在弹出的菜单中选择“站点”项；、在打开的窗口上方有“基本”和“高级”两个标签，可以在站点向导和高级设置面板之间切换，下面选择“基本标签”；、在弹出的“站点定义”对话框的文本框中输入网站的名称；、单击“下一步”按钮，进入“定义”站点对话框的设置，这里可以设置服务器的技术。我们新建静态的站点，因此选择“否”；、单击“下一步”按钮，进入“站点定义”对话框的下一步设置，可以
5、设置站点的编辑方式，有两种情况，我们选择第一步；、下方的“您将把文件存储在计算机上的什么位置”文本框用来设置本地站点文件夹的地址。可以在文本框中输入路径，也可以选择“打开文件”按钮，在打开的“选择站点”对话框中选择路径；、单击“下一步”，进入“站点定义”对话框设置，配置远程站点，这里选择“无”；10、单击“下一步”，将看到刚才设置的所有内容；11、单击“下一步”，结束站点定义“对话框的设置；12、单击“完成”，文件面板显示出刚才建立的站点。实验2 设置页面整体效果（一）将为index_ori.html所示页面设置整体属性，处理后页面如图index.html。1、选择设置网页标题，选择“修改/页
6、面属性”命令，打开“页面属性”对话框。选择“标题编码”，输入网页的标题为“领导新韩流”。2、设定页面的背景图象，在“外观”的“背景图象”文本框中输入背景图象的路径，背景图象是范例站点images文件夹中的bg.jpg。3、设定页边距，在“外观”中将“左边距”、“右边距”、“上边距”、“下边距”都设置成。实验3 设置页面整体效果（二）1、打开页面，在编辑窗口下选择“修改/页面属性”命令，打开“页面属性”对话框；2、选择“外观”选项，将页面字体设置为Tahoma，字体大小设置为9点数，文本颜色选用#000000，背景颜色选择#003366，边距都选择0像素；3、选择“链接”选项，将链接字体选择为“
7、同页面字体”，链接颜色选择#333333，变化图象链接的颜色选择#640000，已访问链接的颜色选择#990000，活动链接的颜色选择#333333，下划线样式选择“始终有下划线”；4、选择“标题”选项，标题字体设置为“同页面字体”；5、选择“标题编码”选项，标题填入“ NETTOWN WEBSITE DESIGN 宇村网络科技引领网页设计新韩流!”，编码选择“简体中文”。实验4 制作文本页面1、首先设置网页标题，选择“修改/页面属性”命令，打开“页面属性”对话框，在“标题”项中输入网页的标题“.那些花儿._those Flowers.”；2、下面设定页面的背景图象，在“外观”的“背景图象”文
8、本框中输入背景图象的路径，背景图象是范例站点中imges文件夹中的 bg.jpg；3、然后设置页边距，在“外观”中将“左边距”、“右边距”、“上边距”、“下边距”都设置为0；4、设置页面的链接文字效果，在“链接字体”下拉列表总选择“同页面字体”，在“链接颜色”中设置颜色为#666666，作为默认状态下文本的颜色，在“转换图象链接”中设置颜色为#cc0000，作为鼠标放在链接上文本的颜色，在“已访问链接”中设置访问过的链接颜色为#666666，在“活动链接”中定义活动链接的颜色为#cc0000,在“下划线样式”下拉列表中选择“始终无下划线”；（这些项目设置完成后，页面的边距被去掉，并且默认的链接
9、颜色也变成了灰色）5、选中页面右上角的“log-in/register/members”字样，在属性面板中将字体设置为verdana,字号为7点数，颜色设置为#685931；6、选中“log-in/register/members”文字下面的About字样，在属性面板中将字体设置为tahoma,字号设置为10点数，颜色设置为#000000，并单击加粗按钮，同样，对下方的Layout Song字样进行同样的设定；7、选中About下方的大段文本，在属性面板中将字体设置为verdana,字号为7点数，颜色设置为#685931，同样对Layout Song下方的段落文字进行同样的设定；8、选中“20
10、05.jan.29”字样，在属性面板将字体设置为tahoma，字号设置为10点数，颜色设置为#a81cic,并单击加粗按钮；9、选中Creep字样，在属性面板中将字体设置为tahoma,字号设置为8点数，颜色设置为#a81c1c，并点击加粗按钮；10、选中页面中大多数的正文文字，在属性面板中将字体设置为tahoma,字号为9点数，颜色设置为#392a0f；11、按照同样的方法，设置页面的其他文字，可参考index.htm页面的效果自行完成。实验5 插入图象操作1、将光标放置到文档中需要插入图象的位置，然后执行“插入/图象”命令，或者通过单击对象面板上“常用”对象组上的图象按钮；2、弹出“选择图
11、象源文件”对话框，选择合适的图象文件，单击确认按钮就可以向网页插入图象；3、分别将index_01.jpg到index_08.jpg插入到指定的位置上；4、操作完毕，保存网页。实验6 插入Fireworks HTML文档1、选择Fireworks工具箱中的切片工具，准备进行图象的切割；2、使用它在图象上拖动就能将图片分割为几个部分，我们可以看到，分割后的每一个部分都被透明色所覆盖；表明该片图象为切片；3、选择“文件/导出”，打开一个对话框，分割后的图片应用于网页时要求每一个部分都按照原来的位置相互衔接上，所以，保存类型为“HTML和图象”，将其保存为网页；4、将文件名命名为index.htm,
12、单击保存；5、回到Dreamweaver中，建立一个空白的页面；6、选择“常用”快捷拦中“图像按钮下拉列表中的“插入Fireworks HTML ”；7、在弹出的对话框中输入Fireworks导出的HTML文件路径，单击确定。8、使用Dreamweaver完成页面的调整，选中页面中空白的图片文件，按Delete键，空白的图象区域变成了空白单元格；9、选中整个表格，在属性面板中将对齐属性设置为“居中对齐”；10、完成页面制作，按F12浏览效果。实验7 插入鼠标经过图象1、使用Dreamweaver处理index_ori.html文件。在中间空白的位置单击鼠标，然后选择“常用”快捷栏中“图象”按钮
13、下拉列表的“鼠标经过图象”，打开“插入鼠标经过图象”对话框；2、在“图象名称”文本框中为翻转图象起一个便于记忆的名称，本例中命名为Image14；3、在“原始图象”文本框中填入页面被打开时候显示的图片，或单击后面的“浏览”按钮，选择一个图象文件作为原始的主图象。这里我们直接选择images文件夹中名为“f22.gif”的图象，文本框中填入图象图片路径“images/f22.gif”，4、在“鼠标经过图象”文本框中填入鼠标经过时显示图象的URL地址，这里我们直接选择images文件夹中名为“f22_2.gif”的图象，文本框中填入图象图片路径“images/f22_2.gif”，实际图片中显示出
14、反色的效果；5、如果选择“预载鼠标经过图象”复选框，则无论是否通过用鼠标指向原始图片来显示轮替图，浏览器会将轮替图下载到本地的缓存中，以加强浏览速度，这里建议选择踏；6、在“替换文本”文本框中填写“Enter”文字，这样当鼠标经过图象时，在鼠标位置的旁边会弹出一个文本显示区域，其中显示的文字就是填入的说明文字；7、在“按下时，前往的URL”文本框中可以输入单击图象时跳转到的链接地址，这里可以填写“http:/”；8、单击“确定”按钮后，完成插入鼠标经过图象的操作；9、在文档窗口中是无法测试图象的鼠标经过效果的，直接按F12键，启动浏览器，预览当前文档的效果。实验8 插入导航条1、打开index
15、_ori.html页面，将光标放在左侧空白的位置，准备开始制作特效。选择“常用”快捷栏中的“图象”按钮下拉列表中的“导航条”，这时弹出“插入导航条“对话框；2、每一个图象链接被称为一个项目，所有的项目都显示在“导航条元件“选框中，由于刚开始建立，所以只存在一个默认的导航条按钮，接着我们就去修改它；3、给新建的导航条元件起一个容易理解的名称，以便在脚本程序中引用，实例中第一个元件的名称为menu1；4、在“状态图象”中输入默认的图象文件的路径，也可以通过单击“浏览”按钮，从磁盘中选择图象文件，这里选择的路径是“images/index_08.jpg”；5、用同样的方法为“鼠标经过图象”，“按下图
16、象”和“按下时鼠标经过图象”三种状态选择不同的图象，这里的图片分别是“images/index_08_2.jpg”，“images/index_08_3.jpg” “images/index_08_4.jpg”;6、在“替换文本”中设置当图象无法在浏览器中显示的时候将显示文本说明，这里设置为HUAHUO；7、在“按下时，前往的URL”中设置当单击该图象时，打开的网页路径，这里设置为“http:/”；8、选择“预先载入图象”复选框；9、“插入”下拉列表框用来设置导航条的排列方式，有两个选项“水平”和“垂直”，这里选择“垂直”；10、选择使用表格，可以用表格排列导航条中的元件；11、按F12键，预
17、览效果。实验9 制作图象页面1、观察index.htm页面的上方，有logo图象和一个形象图片构成，打开index_ori.htm，将光标定位到上方空白的位置；2、点击对象面板“常用”中的“”图象按钮，弹出“选择图象源”文件对话框，在“选择图象源”对话框中选中logo.gif文件，单击“确认”按钮即向网页插入图象；3、将光标定位在刚才插入的图象右侧，再次点击对象面板“常用”中的“图象”按钮，在“选择图象源”对话框中选择 top_dw.jpg文件，单击“确认”按钮；4、将光标定位到“demo.已经是第三稿了，晕.这年头什么客户都能遇到，看原图请点击这里”字样的下方，单击对象面板“常用”的“图象”
18、按钮，在“选择图象源文件”对话框中选中200523115759499.jpg文件，单击“确认”；5、将光标定位到“访问地址：http:/”字样的下方，单击对象面板“常用”的“图象”按钮，在“选择图象源文件”对话框中选中200511715643358.jpg文件，单击“确认”；6、按照同样的办法，在这幅图象的左侧插入rss100.png,rss200.png,somerights.gif图片；在页面的下方插入其他客户的设计稿图片。实验10 插入多媒体文件1、打开index_ori.htm页面，将光标定位在中间的单元格中；2、单击对象“常用”快捷栏中的“媒体”按钮，然后从弹出的列表中选择Flash
19、；3、弹出“选择文件”对话框，可以选择要打开的Flash动画SWF文件，这里选择fla文件夹的 mail.swf文件；4、单击“确定”按钮，插入的Flash动画并不会在文档窗口中显示内容，而是以一个带有字母F的灰色框来表示；5、在网页编辑窗口中单击这个Flash文件，可以在属性面板中设置它的属性；6、选择“循环”复选框时影片将连续播放，如果没有选择该项，则影片在播放一次后就停止播放，建议勾选此复选框；7、通过“自动播放”复选框设置Flash文件是否在页面加载时就播放，建议勾选此复选框；8、在“品质”下拉列表框中可以选择Flash影片的品质，我们以最优状态显示，这里选择“高品质”；9、在“比例”
20、下拉列表框中可以选择“默认”、“无边框”、“严格匹配”3种，这里使用第一种，在网页编辑窗口中，如果改变过Flash文件的宽或者高，而又想恢复以前的尺寸，单击“重设大小”按钮；10、为了测试动画在网页编辑穿口中的预览效果，可以选中Flash文件，单击属性面板中的“播放”按钮；11、此时按下F12键，在浏览器中预览，这是可以看到，该Flash具有浅绿色的背景颜色；12、为了使页面的背景在Flash下能够衬托出效果，我们可以使Flash的背景变为透明，单击属性面板中的“参数”按钮，打开“参数”对话框；13、在参数对话框中，设定参数为wmode，参数值为transparent。这样在任何背景下，Fla
21、sh动画都能实现透明背景的显示。实验11 插入Flash按钮1、打开index_ori.htm页面，我们要在页面的内部添加Flash按钮效果；2、将光标定位到页面中间的层中；3、单击“常用”快捷栏的“媒体”按钮，从下拉列表中选择第二项“Flash按钮”，随后弹出“插入Flash按钮”对话框；4、从“样式”列表中选择所需的按钮样式，在“按钮文本” 框中输入要显示的文本，这里输入“Email”；5、在“字体”下拉列表中选择要使用的字体，在“大小”文本框中输入字体大小的数值；6、在“背景色”文本框中设Flash影片的背景颜色为黑色；7、在“另存为”文本框中，输入用来保存此新SWF文件的文件名，这里输
22、入button1.swf；8、在“链接”文本框中输入mailto:；9、单击“应用”按钮可以不关闭对话框直接查看按钮的设置效果，满意后单击“确定”，按下F12键；10、如果希望修改输入Flash按钮对象，可以先选中它，然后在“属性”面板中单击“编辑”按钮，这是将自动弹出“插入输入Flash按钮”对话框，在这里更改它的设置就可以了。实验12 插入Flash文字1、将光标定位到页面右下方的层中；2、单击对象常用快捷栏中的“媒体”按钮，然后从下拉列表中选择“Flash文本”，弹出“插入Flash文本”对话框；3、在“文本”域中输入所需的文本为“DJ-MICHAEL”；4、从“字体”下拉列表中选择一种
23、字体，在“大小”文本框中输入字体大小；5、在“颜色”文本框中设置文本的颜色为白色，在“转滚颜色”文本框中，设置当鼠标指针经过Flash文本对象时显示的颜色为橙黄色，在“背景色”文本框中，选择文本的背景颜色为黑色；6、在“另存为”文本框中，输入文件的名称为“text1.swf”；7、单击“确定”按钮，按下F12键，在浏览器中预览的时候可以看到动态变换的效果；8、如果希望修改Flash文本对象，可以先选中它，之后在属性面板中单击“编辑”按钮，这是将自动弹出“插入Flash文本”对话框，在这里更改它的设置就可以了。实验13 插入Flash元素 1、在文本面板打开GALLERY_ori.html文件，
24、将光标放置于输入文本的表格右侧单元格内，在“Flash元素插入”快捷栏中单击“图象查看器”按钮；2、在“保存Flash元素”对话框中，将保存位置指定为MEDIA目录下，单击“保存”按钮，将图象浏览器Flash影片以指定的名称保存在指定的位置；3、在属性面板中，将宽和高分别指定为400和325，改变图象浏览器Flash影片的大小；4、按下F9键打开标签面板，在Flash元素面板中将frameShow属性有“否”设置为“是”，这样可以在图象浏览器Flash影片外围显示边框；5、将光标放置于imageURLs属性文本框中，按下Delete键删除；6、单击imageURLs属性文本框右侧的按钮，打开“
25、编辑imageURLs数组“对话框；7、选择GALLERY文件夹中的auntie.lpg图象文件；8、单击确定按钮，这时在“编辑imageURLs数组”对话框中会出现添加图象，然后单击“编辑imageURLs数组”对话框中的“+”按钮继续添加bed.jpg图象文件；9、按照同样的方法依次将GALLERY文件夹中的9张图象添加到“编辑imageURLs数组”对话框中，然后单击确定；10、在Flash元素，面板的title属性文本框中输入“作品”，将titlecolor设置为#99E0FE，将titlefont设置为“新宋体”，将 titlesize设置为14，指定的属性是浏览器Flash影片中的
26、标题相关的文本属性；11、将光标放置于imagelinks属性文本框中，按Delete键删除，表明不对图象添加链接关系；12、将transitionType设置为Random，指定转换图象时的动画效果为随机；13、将slideAutoPlay设置为“是”，表明允许自动播放图象效果；14、将slideLoop设置为“是”，表明图象效果循环播放；15、保存网页后，按下F12键确认最终效果，试着单击按钮看看效果。实验14 控制页面中的Flash动画 1、打开文件index_ori.html，范例文件中插入了Flash影片，我们来完成控制动画的效果，除了要添加“播放”和“停止”的控制外，还希望添加“重
27、放”控制；2、在Flash影片被选定的状态下，在属性面板的名称文本框中将其名称输入f；3、选中“停止”字样，在属性面板的链接文本框中输入#，建立空链接；4、选择“窗口/行为”命令，打开行为面板；5、选中“停止”字样，在行为面板中单击“+”按钮，选择“控制Shockwave或Flash”行为；6、在“控制Shockwave或Flash”对话框的“操作”选项组中选中“停止”单选按钮，单击“确定”按钮；7、在行为面板中，将事件指定为onClick,这表明单击“停止”字样时，将执行刚才设定的操作；8、按下F12键，在浏览器中查看制作效果，单击停止字样时，主动画停止；9、选中“播放”字样，在属性面板的连
28、接文本框中输入#，建立空链接；10、在行为面板中单击“+”，选择“控制Shockwave或Flash”行为，在“控制Shockwave或Flash”对话框的“操作”选项组中选中“停止”单选按钮，单击“确定”按钮；11、在“停止”字样后添加“重放”字样，并选中“重放”字样，在属性面板的连接文本框中输入“#”，建立空链接；12、在行为面板中单击“+”按钮，选择“控制Shockwave或Flash”行为，在“控制Shockwave或Flash”对话框中的“操作”选项组中选中“后退”单选按钮，单击“确定”按钮。实验15 插入Shockwave动画 1、将光标放置在“小猪射箭”和“点我刷新”按钮之间插入
29、Shockwave的位置；2、单击对象“常用”快捷栏上的“媒体”按钮，然后从下拉列表中选择Shockwave；3、打开“选择文件”对话框，可以选择要打开的Shockwave文件，这里选择同级目录中的21cn0203barunson_speed_24.dcr文件；4、插入后的Shockwave并不会在文档窗口中显示内容；5、在属性面板中设定Shockwave的属性，这里改变其宽度高度为300*400；6、按下F12键，在浏览器中查看制作效果。实验16 添加背景音乐1、打开文件index_ori.html，我们希望为这个页面添加背景音乐；2、切换到Dreamweaver的拆分视图，将光标定位到/b
30、ody之前的位置；3、我们在media目录下提供了zheng_buger.mp3文件，在光标的位置写下下面的代码：4、按下F12键盘，在浏览器中查看制作效果。5、如果希望循环播放，可以将刚才的代码改成：实验17 嵌入音乐1、打开文件index_ori.html，我们希望在页面光标所在的位置嵌入音乐；2、单击对象常用快捷栏上的“媒体”按钮，然后从下拉菜单中选择“插件”；3、接下来打开“选择文件”对话框，可以选择要打开的插件文件，这里选择目录下的summer.mp3声音文件；4、单击“确定”按钮，插入后的插件并不会在文档窗口中显示内容；5、在属性面板上将这个插件图标的大小改为107*113；6、我
31、们希望能够循环播放音乐，为了实现这种效果，单击属性面板的“参数”按钮，然后单击“+”按钮，在参数列中输入loop，并在“值”列中输入true后，单击“确定”按钮；7、现在音乐不能自动播放，如果希望打开页面的时候，声音自动响起，可以继续编辑参数，在参数对话框的“参数”列中输入“autostart”，并在“值”列中输入true后，单击“确定”按钮；8、按下F12键预览。实验18 添加声音到任何页面对象上1、打开文件index_ori.html，我们希望单击“播放”按钮后播放音乐文件；2、选中“播放”按钮，选择“窗口/行为”命令，打开行为面板；3、单击行为面板中的“+”按钮，在弹出的菜单中选择“播放
32、音乐”动作；4、此时打开“播放声音”对话框，为了选择链接到按钮上的音乐文件，单击“浏览”按钮，在“选择文件”对话框中，选择media目录下的wjin.mid声音文件后，单击“确定”按钮；5、回到行为面板，为了实现单击播放按钮后发出音效，把事件设置为onClick；6、这样，按下F12键，打开浏览器预览，单击“播放”按钮后就可以播放相关的音乐文件了。实验19 插入MPG及AVI等视频1、打开jingdian_ori.htm页面，我们希望在光标所在的位置插入视频文件；2、单击对象常用快捷栏上的“媒体”按钮，然后从下拉列表中选择“插件”；3、打开“选择文件“对话框，可以选择要打开的插件文件。这里选择
33、media目录下的peugeor.mpg视频文件；4、单击“确定“按钮后，插入后的插件并不会在文档窗口中显示内容；5、在属性面板中将这个插件图标的大小改为297*297；6、按下F12键，现在的视频文件不能自动播放，如果希望打开页面的时候电影自动播放，可以单击属性面板的“参数“按钮”编辑参数，在参数对话框的“参数”列中输入autostart，并在“值”列中输入true后，单击确定按钮；7、我们希望能够循环播放视频，为了实现这种效果，继续编辑参数，单击“+”按钮，在“参数”列中输入loop，并在“值”列中输入true后，单击“确定”按钮。实验20 插入JAVA小程序1、打开文件index_ori
34、.html，我们希望在光标所在的位置插入视频文件；2、单击对象常用快捷栏中的“媒体”按钮，然后从下拉菜单中选择Applet；3、打开“选择文件”对话框，可以选择1个JAVA Applet小程序，这里选择的是Lake.class文件；4、单击“选择文件”对话框上的“确定”按钮，可以向网页插入这个JAVA Applet小程序；5、通过看软件查看我们要实现的图像为1.jpg，其宽度为668，高度为120；6、单击面板上的“参数”按钮，打开“参数”对话框，设定参数名为image，参数值为图象文件的实际路径1.jpg，然后单击“确定“按钮；7、选中插入到网页中的JAVA Applet图标，在属性面板中将
35、图标的宽度和高度分别设置为668和220，宽度设定成图象的宽度，高度设定为图象高度的两倍小一点；8、按下F12键，打开浏览器预览页面，发现原有图象下方出现了水纹效果。实验21 插入ActiveX控件1、在“媒体”按钮的下拉列表中选择第7项ActiveX；2、在“网页编辑窗口”将出现插入的ActiveX占位符，她它将标记出ActiveX控件将在IE浏览器中出现的位置；3、进行设置ActiveX的操作，观察ActiveX的属性面板，在属性中主要设置ClassID项目，它代表类ID，浏览器标识ActiveX控件，输入一个值或从菜单中选择一个值，在加载页面时，浏览器使用该“类ID”来确定与该页面关联的
36、ActiveX控件所需要的ActiveX控件的位置，如果浏览器未找到指定的ActiveX控件，则它尝试从“基址”指定的位置中下载它；4、如果选择“嵌入”可以为该ActiveX控件在obiect标签内添加embed标签。实验22 插入滚动字幕或图象 1、打开v2_ori.html页面，将光标定位到“2/5本站更新2/6本站添加新栏目”字样的位置；2、切换到Dreamweaver的代码视图，将光标定位需要插入的位置上；3、将文字代码修改为：2/5 本站更新2/6本站添加新栏目按下F12键盘后,打开浏览器页面,可以看到了文字实现了滚动效果；4、继续编辑代码，将代码修改为：2/5 本站更新2/6本站添
37、加新栏目 按下F12键后，打开浏览器预览页面，可以看到文字实现了滚动的效果；5、现在滚动文字的速度有些快，我们可以继续修改源代码来调整滚动文字的速度：2/5 本站更新2/6本站添加新栏目；6、我们还希望当鼠标指向滚动字幕的时候，字幕运动停止，当鼠标离开后，滚动继续的效果，这是可以将代码修改为：2/5 本站更新2/6本站添加新栏目按下F12键预览。实验23 插入多媒体页面实例下面我们制作页面效果，在页面中，有一个Flash动画效果和视频效果：1、打开index_ori.htm页面，将光标定位到单元格中的位置；2、单击对象常用快捷栏上的“媒体”按钮，然后从下拉列表中选择“Flash”；3、打开“选
38、择文件“对话框，可以选择要打开的Flash动画SWF文件，这里选择media文件夹下的index.swf文件；4、将光标定位到层中；5、单击对象常用快捷栏上的“媒体”，然后从下拉列表中选择“插件”；6、打开“选择文件”对话框，可以选择要打开的插件文件，这里选择media目录下的kd20040117cuijian.wmv视频文件；7、单击“确定”按钮后，插入后的插件并不会在文档窗口显示内容，而是用图标显示。在属性面板中将这个插件图标的大小改为297*297；8、如果希望打开页面的时候，电影自动播放，可以单击属性面板的“参数”按钮，编辑参数，在参数对话框的“参数”列中输入“autostart,并在
39、“值”中输入true后，单击“确定”按钮。实验24 插入并编辑表格1、打开index_ori.htm页面，将光标定位到插入单元格的位置；2、单击“常用”快捷栏中的“表格”按钮；3、打开“表格”对话框；4、在行数中设置表格的“行数”为5，在“列数”中设置表格的列数为2，相对宽度为100%；5、在“边框粗细”文本框中指定表格边框的宽度，默认值为1，单位为像素。若要不显示边框，可以设置为0，若要不显示边框却希望编辑网页时能看到表格边框，选择“查看/可视化助理/表格边框”命令，这里设置为0；6、在“单元格边距”文本框中设置单元格边框和单元格内容之间的像素数，默认为1，若不想在浏览器中显示表格的边距，将
40、“单元格边距”设置为0，这里设置为0；7、在“单元格间距”文本框中设置相邻单元格之间的像素数，默认为2，若不想在浏览器中显示表格的间距，将“单元格边距”设置为0，这里设置为0；8、在“页眉”选项组定义页眉的样式，可以在4种样式中选一个，这里选择“无”；9、在“辅助功能”选项组中定义与表格存储相关的参数，包括在标题中定义表格标题，在“对齐标题”下拉列表中定义表格标题的对齐方式，在摘要中对表格进行注释，这里使用默认的设置；10、单击“确定”按钮，一个5行2列饿表格就插入到页面中了。实验25 表格的格式化1、打开index_ori.htm页面，我们要对页面中的表格进行格式化；2、将鼠标移动到表格的左
41、上角或是表格上边框或下边框外附近的任意位置，当鼠标下呈现表格图样时，选中整个表格；3、在页面编辑窗口下选择“命令/格式化表格”命令，弹出“格式化表格”对话框；4、在左上角的窗口中选择表格样式，下面可以设置两种“行颜色”，并选择交错方式，包括“不交错”、“每一行”、“每两行”“每三行”、“每四行”，设定第一行的外观，包括行内容的对齐方式、文字样式、背景色、文本颜色，设定“最左列”的外观，包括对齐方式和文字样式，在“边框”中设定表格边框的宽度；5、设定完毕后首先单击“应用”按钮预览效果，确定设定后单击“确定”按钮，表格的格式就设定好了。实验26 表格的排序 1、打开index_ori.htm页面；
42、2、将鼠标移动到表格的左上角或是表格上边框或下边框外附近的任意位置，当鼠标下呈现表格样式时单击鼠标，选中整个表格；3、选择“命令/排序表格”命令，弹出“排序表格”对话框；4、在“排序按”下拉列表框中选择排序需要依据的列，实例中选择了“列15”表示按照第15列中“得分”的数据进行排序；5、在“顺序”右侧的下拉列表中。可以选择排序的顺序选项，“按字母排序”表示以字母的方式进行排序，“按数字排序”表示以数字本身的大小作为排序依据的方式，本例中选择“按数字排序”；6、在“顺序”右侧第2个下拉列表中，可以选择排序的方向，可以从字母AZ，从数字09，以升序排列，也可以反过来以降序排序，本例中选择“降序”；
43、7、在“再按”下拉列表框中，可以选择作为第2排列依据的列，这里不再设置；8、“排序包括第一行”可以选择是否从表格的第一行开始进行排序，“排序标题行”可以对标题行进行排序，“排序脚注行”可以对脚注行进行排序，以上三种均不选择，这里选择“完成排序后所有行颜色保持不变”，选择后排序的时候不仅移动行中的数据，行的属性也随之移动；9、设置完毕后单击“确定”按钮。实验27 制作网站首页1、使用 fireworks打开我们提供的 index.png图象，选择 fireworks工具箱中的切片工具，准备进行图象的切割；2、使用它在图象上拖动就能将图片分割为数个部分，我们可以看到，分割后每一个部分都被透明色所覆
44、盖，表明该图形为切片，注意图片下方的切片方式；3、按下ctrl+A,然后在优化面板中选择JPEG的品质为75；4、选择“文件/导出”，打开一个对话框，分割后的图片应用与网页时要求每一个部分都能按照原来的位置相互衔接起来，所以我们在输出的时候，保存类型要选择“HTML和图象”，将其保存为网页，以便Dreamweaver的处理。另外，在“导出”对话框内的“切片”下拉列表中，选择“导出切片”；5、选择“将图象放入子文件夹”中；6、保存；7、回到Dreamweaver,建立一个新的页面，然后从“常用”工具拦中，单击“图象”按钮旁边的小三角，在弹出的列表中选择Fireworks HTML；8、在弹出的对
45、话框中输入Fireworks导出的HTML文件的路径，或者单击浏览选择该文件；9、这里选择导出的index.htm文件，然后确定，使用Dreamweaver对表格和单元格进行调整；10、选择表格中最下方单元格内的长幅图象，按下键盘Delete；11、打开表格对话框，在“行数“中设1，在列数设5，在表格宽度文本框中设置为100%，在边框粗细中设为0，在单元格边距设0，在单元格间距设置为0；12、点击“确定”，插入表格；13、在属性对话框中将表格的背景颜色设置为#7E7E7C；14、在每一个单元格中输入栏目相关的文字，并通过属性面板将其设置为水平居中对齐；15、选中整个表格，在属性面板中将“对齐”属性设置为“居中”；16、选择“修改/页面属性”命令，打开网页属性面板，在“标题”文本框中输入网页的标题，如“赛亚设计”；17、在“外观”的“背景颜色”项设定背景颜色为#E2E2E2，然后设定页边距，在“外观”中将“左边距”、“上边距”、“右边距”和“下边距”都设置为0；按F12键预览。实验28 制作网站内页1、新建页面，选择“修改/页面属性”命令，打开网页属性面板。在“标题”文本框输入网页的标题“安凡设计企业介绍”。2、在“外观”的“背景颜色”项设定背景色为#ff9900