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

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

《网站开发技术实验指导书.docx》由会员分享，可在线阅读，更多相关《网站开发技术实验指导书.docx（73页珍藏版）》请在冰点文库上搜索。

网站开发技术实验指导书

网站开发技术实验指导书

敖磊编

计算机工程学院网络工程教研室

2010年3月

目录

实验1使用向导搭建站点2

实验2设置页面整体效果

（一）3

实验3设置页面整体效果

（二）3

实验4制作文本页面3

实验5插入图象操作4

实验6插入FireworksHTML文档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添加声音到任何页面对象上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使用模板和库的实例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

实验62打开浏览器46

实验63改变属性47

实验实例：

个人网站主页设计47

实验1使用向导搭建站点

１、选择“窗口”中的“文件”，打开文件面板；

２、选择文件面板中的下拉菜单，选择“管理站点命令；

３、弹出“管理站点”对话框，选择“新建”按钮，在弹出的菜单中选择“站点”项；

４、在打开的窗口上方有“基本”和“高级”两个标签，可以在站点向导和高级设置面板之间切换，下面选择“基本标签”；

５、在弹出的“站点定义”对话框的文本框中输入网站的名称；

６、单击“下一步”按钮，进入“定义”站点对话框的设置，这里可以设置服务器的技术。

我们新建静态的站点，因此选择“否”；

７、单击“下一步”按钮，进入“站点定义”对话框的下一步设置，可以设置站点的编辑方式，有两种情况，我们选择第一步；

８、下方的“您将把文件存储在计算机上的什么位置”文本框用来设置本地站点文件夹的地址。

可以在文本框中输入路径，也可以选择“打开文件”按钮，在打开的“选择站点”对话框中选择路径；

９、单击“下一步”，进入“站点定义”对话框设置，配置远程站点，这里选择“无”；

10、单击“下一步”，将看到刚才设置的所有内容；

11、单击“下一步”，结束站点定义“对话框的设置；

12、单击“完成”，文件面板显示出刚才建立的站点。

实验2设置页面整体效果

（一）

将为index_ori.html所示页面设置整体属性，处理后页面如图index.html。

1、选择设置网页标题，选择“修改/页面属性”命令，打开“页面属性”对话框。

选择“标题／编码”，输入网页的标题为“领导新韩流”。

2、设定页面的背景图象，在“外观”的“背景图象”文本框中输入背景图象的路径，背景图象是范例站点images文件夹中的bg.jpg。

3、设定页边距，在“外观”中将“左边距”、“右边距”、“上边距”、“下边距”都设置成０。

实验3设置页面整体效果

（二）

1、打开页面，在编辑窗口下选择“修改/页面属性”命令，打开“页面属性”对话框；

2、选择“外观”选项，将页面字体设置为Tahoma，字体大小设置为9点数，文本颜色选用#000000，背景颜色选择#003366，边距都选择0像素；

3、选择“链接”选项，将链接字体选择为“同页面字体”，链接颜色选择#333333，变化图象链接的颜色选择#640000，已访问链接的颜色选择#990000，活动链接的颜色选择#333333，下划线样式选择“始终有下划线”；

4、选择“标题”选项，标题字体设置为“同页面字体”；

5、选择“标题编码”选项，标题填入“▒NETTOWNWEBSITEDESIGN▒宇村网络科技－引领网页设计"新"韩流!

!

”，编码选择“简体中文”。

实验4制作文本页面

1、首先设置网页标题，选择“修改/页面属性”命令，打开“页面属性”对话框，在“标题”项中输入网页的标题“{.那些花儿…..}_________thoseFlowers…..\\\”；

2、下面设定页面的背景图象，在“外观”的“背景图象”文本框中输入背景图象的路径，背景图象是范例站点中imges文件夹中的bg.jpg；

3、然后设置页边距，在“外观”中将“左边距”、“右边距”、“上边距”、“下边距”都设置为0；

4、设置页面的链接文字效果，在“链接字体”下拉列表总选择“同页面字体”，在“链接颜色”中设置颜色为#666666，作为默认状态下文本的颜色，在“转换图象链接”中设置颜色为#cc0000，作为鼠标放在链接上文本的颜色，在“已访问链接”中设置访问过的链接颜色为#666666，在“活动链接”中定义活动链接的颜色为#cc0000,在“下划线样式”下拉列表中选择“始终无下划线”；

（这些项目设置完成后，页面的边距被去掉，并且默认的链接颜色也变成了灰色）

5、选中页面右上角的“log-in/register/members”字样，在属性面板中将字体设置为verdana,字号为7点数，颜色设置为#685931；

6、选中“log-in/register/members”文字下面的About字样，在属性面板中将字体设置为tahoma,字号设置为10点数，颜色设置为#000000，并单击加粗按钮，同样，对下方的LayoutSong字样进行同样的设定；

7、选中About下方的大段文本，在属性面板中将字体设置为verdana,字号为7点数，颜色设置为#685931，同样对LayoutSong下方的段落文字进行同样的设定；

8、选中“2005.jan.29”字样，在属性面板将字体设置为tahoma，字号设置为10点数，颜色设置为#a81cic,并单击加粗按钮；

9、选中Creep字样，在属性面板中将字体设置为tahoma,字号设置为8点数，颜色设置为#a81c1c，并点击加粗按钮；

10、选中页面中大多数的正文文字，在属性面板中将字体设置为tahoma,字号为9点数，颜色设置为#392a0f；

11、按照同样的方法，设置页面的其他文字，可参考index.htm页面的效果自行完成。

实验5插入图象操作

1、将光标放置到文档中需要插入图象的位置，然后执行“插入/图象”命令，或者通过单击对象面板上“常用”对象组上的图象按钮；

2、弹出“选择图象源文件”对话框，选择合适的图象文件，单击确认按钮就可以向网页插入图象；

3、分别将index_01.jpg到index_08.jpg插入到指定的位置上；

4、操作完毕，保存网页。

实验6插入FireworksHTML文档

1、选择Fireworks工具箱中的切片工具，准备进行图象的切割；

2、使用它在图象上拖动就能将图片分割为几个部分，我们可以看到，分割后的每一个部分都被透明色所覆盖；表明该片图象为切片；

3、选择“文件/导出”，打开一个对话框，分割后的图片应用于网页时要求每一个部分都按照原来的位置相互衔接上，所以，保存类型为“HTML和图象”，将其保存为网页；

4、将文件名命名为index.htm,单击保存；

5、回到Dreamweaver中，建立一个空白的页面；

6、选择“常用”快捷拦中“图像按钮下拉列表中的“插入FireworksHTML”；

7、在弹出的对话框中输入Fireworks导出的HTML文件路径，单击确定。

8、使用Dreamweaver完成页面的调整，选中页面中空白的图片文件，按Delete键，空白的图象区域变成了空白单元格；

9、选中整个表格，在属性面板中将对齐属性设置为“居中对齐”；

10、完成页面制作，按F12浏览效果。

实验7插入鼠标经过图象

1、使用Dreamweaver处理index_ori.html文件。

在中间空白的位置单击鼠标，然后选择“常用”快捷栏中“图象”按钮下拉列表的“鼠标经过图象”，打开“插入鼠标经过图象”对话框；

2、在“图象名称”文本框中为翻转图象起一个便于记忆的名称，本例中命名为Image14；

3、在“原始图象”文本框中填入页面被打开时候显示的图片，或单击后面的“浏览”按钮，选择一个图象文件作为原始的主图象。

这里我们直接选择images文件夹中名为“f22.gif”的图象，文本框中填入图象图片路径“images/f22.gif”，

4、在“鼠标经过图象”文本框中填入鼠标经过时显示图象的URL地址，这里我们直接选择images文件夹中名为“f22_2.gif”的图象，文本框中填入图象图片路径“images/f22_2.gif”，实际图片中显示出反色的效果；

5、如果选择“预载鼠标经过图象”复选框，则无论是否通过用鼠标指向原始图片来显示轮替图，浏览器会将轮替图下载到本地的缓存中，以加强浏览速度，这里建议选择踏；

6、在“替换文本”文本框中填写“>>>Enter”文字，这样当鼠标经过图象时，在鼠标位置的旁边会弹出一个文本显示区域，其中显示的文字就是填入的说明文字；

7、在“按下时，前往的URL”文本框中可以输入单击图象时跳转到的链接地址，这里可以填写“”；

8、单击“确定”按钮后，完成插入鼠标经过图象的操作；

9、在文档窗口中是无法测试图象的鼠标经过效果的，直接按F12键，启动浏览器，预览当前文档的效果。

实验8插入导航条

1、打开index_ori.html页面，将光标放在左侧空白的位置，准备开始制作特效。

选择“常用”快捷栏中的“图象”按钮下拉列表中的“导航条”，这时弹出“插入导航条“对话框；；

2、每一个图象链接被称为一个项目，所有的项目都显示在“导航条元件“选框中，由于刚开始建立，所以只存在一个默认的导航条按钮，接着我们就去修改它；

3、给新建的导航条元件起一个容易理解的名称，以便在脚本程序中引用，实例中第一个元件的名称为menu1；

4、在“状态图象”中输入默认的图象文件的路径，也可以通过单击“浏览”按钮，从磁盘中选择图象文件，这里选择的路径是“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、“插入”下拉列表框用来设置导航条的排列方式，有两个选项——“水平”和“垂直”，这里选择“垂直”；

10、选择使用表格，可以用表格排列导航条中的元件；

11、按F12键，预览效果。

实验9制作图象页面

1、观察index.htm页面的上方，有logo图象和一个形象图片构成，打开index_ori.htm，将光标定位到上方空白的位置；

2、点击对象面板“常用”中的“”图象按钮，弹出“选择图象源”文件对话框，在“选择图象源”对话框中选中logo.gif文件，单击“确认”按钮即向网页插入图象；

3、将光标定位在刚才插入的图象右侧，再次点击对象面板“常用”中的“图象”按钮，在“选择图象源”对话框中选择top_dw.jpg文件，单击“确认”按钮；

4、将光标定位到“demo..已经是第三稿了，晕..这年头什么客户都能遇到，看原图请点击这里”字样的下方，单击对象面板“常用”的“图象”按钮，在“选择图象源文件”对话框中选中200523115759499.jpg文件，单击“确认”；

5、将光标定位到“访问地址：

”字样的下方，单击对象面板“常用”的“图象”按钮，在“选择图象源文件”对话框中选中200511715643358.jpg文件，单击“确认”；

6、按照同样的办法，在这幅图象的左侧插入rss100.png,rss200.png,somerights.gif图片；

在页面的下方插入其他客户的设计稿图片。

实验10插入多媒体文件

1、打开index_ori.htm页面，将光标定位在中间的单元格中；

2、单击对象“常用”快捷栏中的“媒体”按钮，然后从弹出的列表中选择Flash；

3、弹出“选择文件”对话框，可以选择要打开的Flash动画SWF文件，这里选择fla文件夹的mail.swf文件；

4、单击“确定”按钮，插入的Flash动画并不会在文档窗口中显示内容，而是以一个带有字母F的灰色框来表示；

5、在网页编辑窗口中单击这个Flash文件，可以在属性面板中设置它的属性；

6、选择“循环”复选框时影片将连续播放，如果没有选择该项，则影片在播放一次后就停止播放，建议勾选此复选框；

7、通过“自动播放”复选框设置Flash文件是否在页面加载时就播放，建议勾选此复选框；

8、在“品质”下拉列表框中可以选择Flash影片的品质，我们以最优状态显示，这里选择“高品质”；

9、在“比例”下拉列表框中可以选择“默认”、“无边框”、“严格匹配”3种，这里使用第一种，在网页编辑窗口中，如果改变过Flash文件的宽或者高，而又想恢复以前的尺寸，单击“重设大小”按钮；

10、为了测试动画在网页编辑穿口中的预览效果，可以选中Flash文件，单击属性面板中的“播放”按钮；

11、此时按下F12键，在浏览器中预览，这是可以看到，该Flash具有浅绿色的背景颜色；

12、为了使页面的背景在Flash下能够衬托出效果，我们可以使Flash的背景变为透明，单击属性面板中的“参数”按钮，打开“参数”对话框；

13、在参数对话框中，设定参数为wmode，参数值为transparent。

这样在任何背景下，Flash动画都能实现透明背景的显示。

实验11插入Flash按钮

1、打开index_ori.htm页面，我们要在页面的内部添加Flash按钮效果；

2、将光标定位到页面中间的层中；

3、单击“常用”快捷栏的“媒体”按钮，从下拉列表中选择第二项“Flash按钮”，随后弹出“插入Flash按钮”对话框；

4、从“样式”列表中选择所需的按钮样式，在“按钮文本”框中输入要显示的文本，这里输入“Email”；

5、在“字体”下拉列表中选择要使用的字体，在“大小”文本框中输入字体大小的数值；

6、在“背景色”文本框中设Flash影片的背景颜色为黑色；

7、在“另存为”文本框中，输入用来保存此新SWF文件的文件名，这里输入button1.swf；

8、在“链接”文本框中输入mailto:

song@；

9、单击“应用”按钮可以不关闭对话框直接查看按钮的设置效果，满意后单击“确定”，按下F12键；

10、如果希望修改输入Flash按钮对象，可以先选中它，然后在“属性”面板中单击“编辑”按钮，这是将自动弹出“插入输入Flash按钮”对话框，在这里更改它的设置就可以了。

实验12插入Flash文字

1、将光标定位到页面右下方的层中；

2、单击对象常用快捷栏中的“媒体”按钮，然后从下拉列表中选择“Flash文本”，弹出“插入Flash文本”对话框；

3、在“文本”域中输入所需的文本为“DJ-MICHAEL”；

4、从“字体”下拉列表中选择一种字体，在“大小”文本框中输入字体大小；

5、在“颜色”文本框中设置文本的颜色为白色，在“转滚颜色”文本框中，设置当鼠标指针经过Flash文本对象时显示的颜色为橙黄色，在“背景色”文本框中，选择文本的背景颜色为黑色；

6、在“另存为”文本框中，输入文件的名称为“text1.swf”；

7、单击“确定”按钮，按下F12键，在浏览器中预览的时候可以看到动态变换的效果；

8、如果希望修改Flash文本对象，可以先选中它，之后在属性面板中单击“编辑”按钮，这是将自动弹出“插入Flash文本”对话框，，在这里更改它的设置就可以了。

实验13插入Flash元素

1、在文本面板打开GALLERY_ori.html文件，将光标放置于输入文本的表格右侧单元格内，在“Flash元素插入”快捷栏中单击“图象查看器”按钮；

2、在“保存Flash元素”对话框中，将保存位置指定为MEDIA目录下，单击“保存”按钮，将图象浏览器Flash影片以指定的名称保存在指定的位置；

3、在属性面板中，将宽和高分别指定为400和325，改变图象浏览器Flash影片的大小；

4、按下F9键打开标签面板，在Flash元素面板中将frameShow属性有“否”设置为“是”，这样可以在图象浏览器Flash影片外围显示边框；

5、将光标放置于imageURLs属性文本框中，按下Delete键删除；

6、单击imageURLs属性文本框右侧的按钮，打开“编辑imageURLs数组“对话框；

7、选择GALLERY文件夹中的auntie.lpg图象文件；

8、单击确定按钮，这时在“编辑imageURLs数组”对话框中会出现添加图象，然后单击“编辑imageURLs数组”对话框中的“+”按钮继续添加bed.jpg图象文件；

9、按照同样的方法依次将GALLERY文件夹中的9张图象添加到“编辑imageURLs数组”对话框中，然后单击确定；

10、在Flash元素，面板的title属性文本框中输入“作品”，将titlecolor设置为#99E0FE，将titlefont设置为“新宋体”，将titlesize设置为14，指定的属性是浏览器Flash影片中的标题相关的文本属性；

11、将光标放置于imagelinks属性文本框中，按Delete键删除，表明不对图象添加链接关系；

12、将transitionType设置为Random，指定转换图象时的动画效果为随机；

13、将slideAutoPlay设置为“是”，表明允许自动播放图象效果；

14、将slideLoop设置为“是”，表明图象效果循环播放；

15、保存网页后，按下F12键确认最终效果，试着单击按钮看看效果。

实验14控制页面中的Flash动画

1、打开文件index_ori.html，范例文件中插入了Flash影片，我们来完成控制动画的效果，除了要添加“播放”和“停止”的控制外，还希望添加“重放”控制；

2、在Flash影片被选定的状态下，在属性面板的名称文本框中将其名称输入f；

3、选中“停止”字样，在属性面板的链接文本框中输入#，建立空链接；

4、选择“窗口/行为”命令，打开行为面板；

5、选中“停止”字样，在行为面板中单击“+”按钮，选择“控制Shockwave或Flash”行为；

6、在“控制Shockwave或Flash”对话框的“操作”选项组中选中“停止”单选按钮，单击“确定”按钮；

7、在行为面板中，将事件指定为onClick,这表明单击“停止”字样时，将执行刚才设定的操作；

8、按下F12键，在浏览器中查看制作效果，单击停止字样时，主动画停止；

9、选中“播放”字样，在属性面板的连接文本框中输入#，建立空链接；

10、在行为面板中单击“+”，选择“控制Shockwave或Flash”行为，在“控制Shockwave或Flash”对话框的“操作”选项组中选中“停止”单选按钮，单击“确定”按钮；

11、在“停止”字样后添加“重放”字样，并选中“重放”字样，在属性面板的连接文本框中输入“#”，建立空链接；

12、在行为面板中单击“+”按钮，选择“控制Shockwave或Flash”行为，在“控制Shockwave或Flash”对话框中的“操作”选项组中选中“后退”单选按钮，单击“确定”按钮。

实验15插入Shockwave动画

1、将光标放置在“小猪射箭”和“点我刷新”按钮之间插入Shockwave的位置；

2、单击对象“常用”快捷栏上的“媒体”按钮，然后从下拉列表中选择Shockwave；

3、打开“选择文件”对话框，可以选择要打开的Shockwave文件，这里选择同级目录中的21cn0203barunson_speed_24.dcr文件；

4、插入后的Shockwave并不会在文档窗口中显示内容；

5、在属性面板中设定Shockwave的属性，这里改变其宽度高度为300*400；

6、按下F12键，在浏览器中查看制作效果。

实验16添加背景音乐

1、打开文件index_ori.html，我们希望为这个页面添加背景音乐；

2、切换到Dreamweaver的拆分视图，将光标定位到《/body>之前的位置；

3、我们在media目录下提供了zheng_buger.mp3文件，在光标的位置写下下面的代码：

4、按下F12键盘，在浏览器中查看制作效果。

5、如果希望循环播放，可以将刚才的代码改成：

实验17嵌入音乐

1、打开文件index_ori.html，我们希望在页面光标所在的位置嵌入音乐；

2、单击对象常用快捷栏上的“媒体”按钮，然后从下拉菜单中选择“插件”；

3、接下来打开“选择文件”对话框，可以选择要打开的插件文件，这里选择目录下的summer.mp3声音文件；

4、单击“确定”按钮，插入后的插件并不会在文档窗口中显示内容；

5、在属性面板上将这个插件图标的大小改为107*113；

6、我们希望能够循环播放音乐，为了实现这种效果，单击属性面板的“参数”按钮，然后单击“+”按钮，在参数列中输入loop，并在“值”列中输入true后，单击“确定”按钮；

7、现在音乐不能自动播放，如果希望打开页面的时候，声音自动响起，可以继续编辑参数，在参数对话框的“参数”列中输入“autostart”，并在“值”列中输入true后，单击“确定”按钮；

8、按下F12键预览。

实验18添加声音到任何页面对象上

1、打开文件index_ori.html，我们希望单击“播放”按钮后播放音乐文件；

2、选中“播放”按钮，选择“窗口/行