网站开发技术实验指导书.docx

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 添加背景音乐 1

2、1实验17 嵌入音乐 12实验18 添加声音到任何页面对象上 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 创建模板 2

3、2实验36 创建基于模板的页面 23实验37 使用库文件编辑页面 23实验38 使用模板和库的实例 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 插入

4、跳转菜单 35实验58 通过行为检查表单 36实验59 内部CSS的建立流程 36实验60 外部CSS的建立流程 41实验61 弹出信息 46实验62 打开浏览器 46实验63 改变属性 47实验实例：个人网站主页设计 47实验1 使用向导搭建站点、选择“窗口”中的“文件”，打开文件面板；、选择文件面板中的下拉菜单，选择“管理站点命令；、弹出“管理站点”对话框，选择“新建”按钮，在弹出的菜单中选择“站点”项；、在打开的窗口上方有“基本”和“高级”两个标签，可以在站点向导和高级设置面板之间切换，下面选择“基本标签”；、在弹出的“站点定义”对话框的文本框中输入网站的名称；、单击“下一步”按钮，进入

5、“定义”站点对话框的设置，这里可以设置服务器的技术。我们新建静态的站点，因此选择“否”；、单击“下一步”按钮，进入“站点定义”对话框的下一步设置，可以设置站点的编辑方式，有两种情况，我们选择第一步；、下方的“您将把文件存储在计算机上的什么位置”文本框用来设置本地站点文件夹的地址。可以在文本框中输入路径，也可以选择“打开文件”按钮，在打开的“选择站点”对话框中选择路径；、单击“下一步”，进入“站点定义”对话框设置，配置远程站点，这里选择“无”；10、单击“下一步”，将看到刚才设置的所有内容；11、单击“下一步”，结束站点定义“对话框的设置；12、单击“完成”，文件面板显示出刚才建立的站点。实验2

6、 设置页面整体效果（一）将为index_ori.html所示页面设置整体属性，处理后页面如图index.html。1、选择设置网页标题，选择“修改/页面属性”命令，打开“页面属性”对话框。选择“标题编码”，输入网页的标题为“领导新韩流”。2、设定页面的背景图象，在“外观”的“背景图象”文本框中输入背景图象的路径，背景图象是范例站点images文件夹中的bg.jpg。3、设定页边距，在“外观”中将“左边距”、“右边距”、“上边距”、“下边距”都设置成。实验3 设置页面整体效果（二）1、打开页面，在编辑窗口下选择“修改/页面属性”命令，打开“页面属性”对话框；2、选择“外观”选项，将页面字体设置为

7、Tahoma，字体大小设置为9点数，文本颜色选用#000000，背景颜色选择#003366，边距都选择0像素；3、选择“链接”选项，将链接字体选择为“同页面字体”，链接颜色选择#333333，变化图象链接的颜色选择#640000，已访问链接的颜色选择#990000，活动链接的颜色选择#333333，下划线样式选择“始终有下划线”；4、选择“标题”选项，标题字体设置为“同页面字体”；5、选择“标题编码”选项，标题填入“ NETTOWN WEBSITE DESIGN 宇村网络科技引领网页设计新韩流!”，编码选择“简体中文”。实验4 制作文本页面1、首先设置网页标题，选择“修改/页面属性”命令，打开

8、“页面属性”对话框，在“标题”项中输入网页的标题“.那些花儿._those Flowers.”；2、下面设定页面的背景图象，在“外观”的“背景图象”文本框中输入背景图象的路径，背景图象是范例站点中imges文件夹中的 bg.jpg；3、然后设置页边距，在“外观”中将“左边距”、“右边距”、“上边距”、“下边距”都设置为0；4、设置页面的链接文字效果，在“链接字体”下拉列表总选择“同页面字体”，在“链接颜色”中设置颜色为#666666，作为默认状态下文本的颜色，在“转换图象链接”中设置颜色为#cc0000，作为鼠标放在链接上文本的颜色，在“已访问链接”中设置访问过的链接颜色为#666666，在“

9、活动链接”中定义活动链接的颜色为#cc0000,在“下划线样式”下拉列表中选择“始终无下划线”；（这些项目设置完成后，页面的边距被去掉，并且默认的链接颜色也变成了灰色）5、选中页面右上角的“log-in/register/members”字样，在属性面板中将字体设置为verdana,字号为7点数，颜色设置为#685931；6、选中“log-in/register/members”文字下面的About字样，在属性面板中将字体设置为tahoma,字号设置为10点数，颜色设置为#000000，并单击加粗按钮，同样，对下方的Layout Song字样进行同样的设定；7、选中About下方的大段文本，在

10、属性面板中将字体设置为verdana,字号为7点数，颜色设置为#685931，同样对Layout Song下方的段落文字进行同样的设定；8、选中“2005.jan.29”字样，在属性面板将字体设置为tahoma，字号设置为10点数，颜色设置为#a81cic,并单击加粗按钮；9、选中Creep字样，在属性面板中将字体设置为tahoma,字号设置为8点数，颜色设置为#a81c1c，并点击加粗按钮；10、选中页面中大多数的正文文字，在属性面板中将字体设置为tahoma,字号为9点数，颜色设置为#392a0f；11、按照同样的方法，设置页面的其他文字，可参考index.htm页面的效果自行完成。实验5

11、 插入图象操作1、将光标放置到文档中需要插入图象的位置，然后执行“插入/图象”命令，或者通过单击对象面板上“常用”对象组上的图象按钮；2、弹出“选择图象源文件”对话框，选择合适的图象文件，单击确认按钮就可以向网页插入图象；3、分别将index_01.jpg到index_08.jpg插入到指定的位置上；4、操作完毕，保存网页。实验6 插入Fireworks HTML文档1、选择Fireworks工具箱中的切片工具，准备进行图象的切割；2、使用它在图象上拖动就能将图片分割为几个部分，我们可以看到，分割后的每一个部分都被透明色所覆盖；表明该片图象为切片；3、选择“文件/导出”，打开一个对话框，分割后

12、的图片应用于网页时要求每一个部分都按照原来的位置相互衔接上，所以，保存类型为“HTML和图象”，将其保存为网页；4、将文件名命名为index.htm,单击保存；5、回到Dreamweaver中，建立一个空白的页面；6、选择“常用”快捷拦中“图像按钮下拉列表中的“插入Fireworks HTML ”；7、在弹出的对话框中输入Fireworks导出的HTML文件路径，单击确定。8、使用Dreamweaver完成页面的调整，选中页面中空白的图片文件，按Delete键，空白的图象区域变成了空白单元格；9、选中整个表格，在属性面板中将对齐属性设置为“居中对齐”；10、完成页面制作，按F12浏览效果。实验

13、7 插入鼠标经过图象1、使用Dreamweaver处理index_ori.html文件。在中间空白的位置单击鼠标，然后选择“常用”快捷栏中“图象”按钮下拉列表的“鼠标经过图象”，打开“插入鼠标经过图象”对话框；2、在“图象名称”文本框中为翻转图象起一个便于记忆的名称，本例中命名为Image14；3、在“原始图象”文本框中填入页面被打开时候显示的图片，或单击后面的“浏览”按钮，选择一个图象文件作为原始的主图象。这里我们直接选择images文件夹中名为“f22.gif”的图象，文本框中填入图象图片路径“images/f22.gif”，4、在“鼠标经过图象”文本框中填入鼠标经过时显示图象的URL地址

14、，这里我们直接选择images文件夹中名为“f22_2.gif”的图象，文本框中填入图象图片路径“images/f22_2.gif”，实际图片中显示出反色的效果；5、如果选择“预载鼠标经过图象”复选框，则无论是否通过用鼠标指向原始图片来显示轮替图，浏览器会将轮替图下载到本地的缓存中，以加强浏览速度，这里建议选择踏；6、在“替换文本”文本框中填写“Enter”文字，这样当鼠标经过图象时，在鼠标位置的旁边会弹出一个文本显示区域，其中显示的文字就是填入的说明文字；7、在“按下时，前往的URL”文本框中可以输入单击图象时跳转到的链接地址，这里可以填写“”；8、单击“确定”按钮后，完成插入鼠标经过图象的

15、操作；9、在文档窗口中是无法测试图象的鼠标经过效果的，直接按F12键，启动浏览器，预览当前文档的效果。实验8 插入导航条1、打开index_ori.html页面，将光标放在左侧空白的位置，准备开始制作特效。选择“常用”快捷栏中的“图象”按钮下拉列表中的“导航条”，这时弹出“插入导航条“对话框；2、每一个图象链接被称为一个项目，所有的项目都显示在“导航条元件“选框中，由于刚开始建立，所以只存在一个默认的导航条按钮，接着我们就去修改它；3、给新建的导航条元件起一个容易理解的名称，以便在脚本程序中引用，实例中第一个元件的名称为menu1；4、在“状态图象”中输入默认的图象文件的路径，也可以通过单击“

16、浏览”按钮，从磁盘中选择图象文件，这里选择的路径是“images/index_08.jpg”；5、用同样的方法为“鼠标经过图象”，“按下图象”和“按下时鼠标经过图象”三种状态选择不同的图象，这里的图片分别是“images/index_08_2.jpg”，“images/index_08_3.jpg” “images/index_08_4.jpg”;6、在“替换文本”中设置当图象无法在浏览器中显示的时候将显示文本说明，这里设置为HUAHUO；7、在“按下时，前往的URL”中设置当单击该图象时，打开的网页路径，这里设置为“”；8、选择“预先载入图象”复选框；9、“插入”下拉列表框用来设置导航条的排

17、列方式，有两个选项“水平”和“垂直”，这里选择“垂直”；10、选择使用表格，可以用表格排列导航条中的元件；11、按F12键，预览效果。实验9 制作图象页面1、观察index.htm页面的上方，有logo图象和一个形象图片构成，打开index_ori.htm，将光标定位到上方空白的位置；2、点击对象面板“常用”中的“”图象按钮，弹出“选择图象源”文件对话框，在“选择图象源”对话框中选中logo.gif文件，单击“确认”按钮即向网页插入图象；3、将光标定位在刚才插入的图象右侧，再次点击对象面板“常用”中的“图象”按钮，在“选择图象源”对话框中选择 top_dw.jpg文件，单击“确认”按钮；4、将

18、光标定位到“demo.已经是第三稿了，晕.这年头什么客户都能遇到，看原图请点击这里”字样的下方，单击对象面板“常用”的“图象”按钮，在“选择图象源文件”对话框中选中200523115759499.jpg文件，单击“确认”；5、将光标定位到“访问地址：”字样的下方，单击对象面板“常用”的“图象”按钮，在“选择图象源文件”对话框中选中200511715643358.jpg文件，单击“确认”；6、按照同样的办法，在这幅图象的左侧插入rss100.png,rss200.png,somerights.gif图片；在页面的下方插入其他客户的设计稿图片。实验10 插入多媒体文件1、打开index_ori.h

19、tm页面，将光标定位在中间的单元格中；2、单击对象“常用”快捷栏中的“媒体”按钮，然后从弹出的列表中选择Flash；3、弹出“选择文件”对话框，可以选择要打开的Flash动画SWF文件，这里选择fla文件夹的 mail.swf文件；4、单击“确定”按钮，插入的Flash动画并不会在文档窗口中显示内容，而是以一个带有字母F的灰色框来表示；5、在网页编辑窗口中单击这个Flash文件，可以在属性面板中设置它的属性；6、选择“循环”复选框时影片将连续播放，如果没有选择该项，则影片在播放一次后就停止播放，建议勾选此复选框；7、通过“自动播放”复选框设置Flash文件是否在页面加载时就播放，建议勾选此复选

20、框；8、在“品质”下拉列表框中可以选择Flash影片的品质，我们以最优状态显示，这里选择“高品质”；9、在“比例”下拉列表框中可以选择“默认”、“无边框”、“严格匹配”3种，这里使用第一种，在网页编辑窗口中，如果改变过Flash文件的宽或者高，而又想恢复以前的尺寸，单击“重设大小”按钮；10、为了测试动画在网页编辑穿口中的预览效果，可以选中Flash文件，单击属性面板中的“播放”按钮；11、此时按下F12键，在浏览器中预览，这是可以看到，该Flash具有浅绿色的背景颜色；12、为了使页面的背景在Flash下能够衬托出效果，我们可以使Flash的背景变为透明，单击属性面板中的“参数”按钮，打开“

21、参数”对话框；13、在参数对话框中，设定参数为wmode，参数值为transparent。这样在任何背景下，Flash动画都能实现透明背景的显示。实验11 插入Flash按钮1、打开index_ori.htm页面，我们要在页面的内部添加Flash按钮效果；2、将光标定位到页面中间的层中；3、单击“常用”快捷栏的“媒体”按钮，从下拉列表中选择第二项“Flash按钮”，随后弹出“插入Flash按钮”对话框；4、从“样式”列表中选择所需的按钮样式，在“按钮文本” 框中输入要显示的文本，这里输入“Email”；5、在“字体”下拉列表中选择要使用的字体，在“大小”文本框中输入字体大小的数值；6、在“背景

22、色”文本框中设Flash影片的背景颜色为黑色；7、在“另存为”文本框中，输入用来保存此新SWF文件的文件名，这里输入button1.swf；8、在“链接”文本框中输入mailto:song；9、单击“应用”按钮可以不关闭对话框直接查看按钮的设置效果，满意后单击“确定”，按下F12键；10、如果希望修改输入Flash按钮对象，可以先选中它，然后在“属性”面板中单击“编辑”按钮，这是将自动弹出“插入输入Flash按钮”对话框，在这里更改它的设置就可以了。实验12 插入Flash文字1、将光标定位到页面右下方的层中；2、单击对象常用快捷栏中的“媒体”按钮，然后从下拉列表中选择“Flash文本”，弹出

23、“插入Flash文本”对话框；3、在“文本”域中输入所需的文本为“DJ-MICHAEL”；4、从“字体”下拉列表中选择一种字体，在“大小”文本框中输入字体大小；5、在“颜色”文本框中设置文本的颜色为白色，在“转滚颜色”文本框中，设置当鼠标指针经过Flash文本对象时显示的颜色为橙黄色，在“背景色”文本框中，选择文本的背景颜色为黑色；6、在“另存为”文本框中，输入文件的名称为“text1.swf”；7、单击“确定”按钮，按下F12键，在浏览器中预览的时候可以看到动态变换的效果；8、如果希望修改Flash文本对象，可以先选中它，之后在属性面板中单击“编辑”按钮，这是将自动弹出“插入Flash文本”

24、对话框，在这里更改它的设置就可以了。实验13 插入Flash元素 1、在文本面板打开GALLERY_ori.html文件，将光标放置于输入文本的表格右侧单元格内，在“Flash元素插入”快捷栏中单击“图象查看器”按钮；2、在“保存Flash元素”对话框中，将保存位置指定为MEDIA目录下，单击“保存”按钮，将图象浏览器Flash影片以指定的名称保存在指定的位置；3、在属性面板中，将宽和高分别指定为400和325，改变图象浏览器Flash影片的大小；4、按下F9键打开标签面板，在Flash元素面板中将frameShow属性有“否”设置为“是”，这样可以在图象浏览器Flash影片外围显示边框；5、

25、将光标放置于imageURLs属性文本框中，按下Delete键删除；6、单击imageURLs属性文本框右侧的按钮，打开“编辑imageURLs数组“对话框；7、选择GALLERY文件夹中的auntie.lpg图象文件；8、单击确定按钮，这时在“编辑imageURLs数组”对话框中会出现添加图象，然后单击“编辑imageURLs数组”对话框中的“+”按钮继续添加bed.jpg图象文件；9、按照同样的方法依次将GALLERY文件夹中的9张图象添加到“编辑imageURLs数组”对话框中，然后单击确定；10、在Flash元素，面板的title属性文本框中输入“作品”，将titlecolor设置为#

26、99E0FE，将titlefont设置为“新宋体”，将 titlesize设置为14，指定的属性是浏览器Flash影片中的标题相关的文本属性；11、将光标放置于imagelinks属性文本框中，按Delete键删除，表明不对图象添加链接关系；12、将transitionType设置为Random，指定转换图象时的动画效果为随机；13、将slideAutoPlay设置为“是”，表明允许自动播放图象效果；14、将slideLoop设置为“是”，表明图象效果循环播放；15、保存网页后，按下F12键确认最终效果，试着单击按钮看看效果。实验14 控制页面中的Flash动画 1、打开文件index_ori

27、.html，范例文件中插入了Flash影片，我们来完成控制动画的效果，除了要添加“播放”和“停止”的控制外，还希望添加“重放”控制；2、在Flash影片被选定的状态下，在属性面板的名称文本框中将其名称输入f；3、选中“停止”字样，在属性面板的链接文本框中输入#，建立空链接；4、选择“窗口/行为”命令，打开行为面板；5、选中“停止”字样，在行为面板中单击“+”按钮，选择“控制Shockwave或Flash”行为；6、在“控制Shockwave或Flash”对话框的“操作”选项组中选中“停止”单选按钮，单击“确定”按钮；7、在行为面板中，将事件指定为onClick,这表明单击“停止”字样时，将执行

28、刚才设定的操作；8、按下F12键，在浏览器中查看制作效果，单击停止字样时，主动画停止；9、选中“播放”字样，在属性面板的连接文本框中输入#，建立空链接；10、在行为面板中单击“+”，选择“控制Shockwave或Flash”行为，在“控制Shockwave或Flash”对话框的“操作”选项组中选中“停止”单选按钮，单击“确定”按钮；11、在“停止”字样后添加“重放”字样，并选中“重放”字样，在属性面板的连接文本框中输入“#”，建立空链接；12、在行为面板中单击“+”按钮，选择“控制Shockwave或Flash”行为，在“控制Shockwave或Flash”对话框中的“操作”选项组中选中“后退

29、”单选按钮，单击“确定”按钮。实验15 插入Shockwave动画 1、将光标放置在“小猪射箭”和“点我刷新”按钮之间插入Shockwave的位置；2、单击对象“常用”快捷栏上的“媒体”按钮，然后从下拉列表中选择Shockwave；3、打开“选择文件”对话框，可以选择要打开的Shockwave文件，这里选择同级目录中的21cn0203barunson_speed_24.dcr文件；4、插入后的Shockwave并不会在文档窗口中显示内容；5、在属性面板中设定Shockwave的属性，这里改变其宽度高度为300*400；6、按下F12键，在浏览器中查看制作效果。实验16 添加背景音乐1、打开文件

30、index_ori.html，我们希望为这个页面添加背景音乐；2、切换到Dreamweaver的拆分视图，将光标定位到/body之前的位置；3、我们在media目录下提供了zheng_buger.mp3文件，在光标的位置写下下面的代码：4、按下F12键盘，在浏览器中查看制作效果。5、如果希望循环播放，可以将刚才的代码改成：实验17 嵌入音乐1、打开文件index_ori.html，我们希望在页面光标所在的位置嵌入音乐；2、单击对象常用快捷栏上的“媒体”按钮，然后从下拉菜单中选择“插件”；3、接下来打开“选择文件”对话框，可以选择要打开的插件文件，这里选择目录下的summer.mp3声音文件；4

31、、单击“确定”按钮，插入后的插件并不会在文档窗口中显示内容；5、在属性面板上将这个插件图标的大小改为107*113；6、我们希望能够循环播放音乐，为了实现这种效果，单击属性面板的“参数”按钮，然后单击“+”按钮，在参数列中输入loop，并在“值”列中输入true后，单击“确定”按钮；7、现在音乐不能自动播放，如果希望打开页面的时候，声音自动响起，可以继续编辑参数，在参数对话框的“参数”列中输入“autostart”，并在“值”列中输入true后，单击“确定”按钮；8、按下F12键预览。实验18 添加声音到任何页面对象上1、打开文件index_ori.html，我们希望单击“播放”按钮后播放音乐文件；2、选中“播放”按钮，选择“窗口/行