Html设计实验报告

1、山东信息职业技术学院网页设计实验报告 （20102011学年第二学期）班 级： 姓 名： 学 号： 指导老师： 实验一 认识Dreamweaver CS3一、实验目的1、熟悉Dreamweaver CS3环境。2、了解HTML文件结构。二、实验环境计算机三、实验内容创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创建。无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。下面介绍一下这两种方式的具体操作步骤。1使用向导建立站点使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。在进入Drea

2、mweaver的起始页界面中选择“新建”“Dreamweaver站点”命令，如图所示。选择“站点”菜单中的“新建站点”命令。选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”“站点”命令。 起始页中新建站点“管理站点”对话框（2）打开“站点定义为”对话框，在“您打算为您的站点起什么名字？”文本框中输入站点名字，如travel。若已申请域名则可以在“您的站点的HTTP地址（URL）是什么？”文本框中填入申请的域名地址。如图所示。设置站点名和URL地址（3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。若是静态站点则选中“否，我不想使用服务器技术”单选按钮

3、，若是动态站点可以进一步设置使用哪一种服务器技术。选择是否使用服务器技术（4）单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置？”文本框中直接输入站点根目录的路径，或者单击“浏览”按钮，选择文件夹目录。（5）单击“下一步”按钮，在“您如何连接到远程服务器？”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。（6）单击“下一步”按钮，将显示前几步设置的总结信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮。站点创建完成后将在“文件”面板中显示出站点的结构和文件。2使用高级设置建立站点使用高级设置建立站点的第一步同前，在如图所示的“站点定义为”对话

4、框中切换到“高级”选项卡，如图所示。在左边的分类中选择“本地信息”选项，然后分别设置“站点名称”、“本地根文件夹”、“默认图像文件夹”、“HTTP地址”等信息。若有需要还可以在左边的分类中选择其他项目进行设置，完成以后单击“确定”按钮，即可创建站点。对于已经创建好的站点，可以执行编辑、复制、删除、导出和导入等操作。1编辑站点如果要重新设置站点的属性，可以执行以下步骤：（1）单击“站点”“管理站点”选项。（2）从站点列表中选择要编辑的站点名称，单击“编辑”按钮。可以参考前面创建站点的方法重新设置站点属性。（3）编辑完毕后，单击“确定”按钮，返回到“管理站点”对话框，单击“完成”按钮。2复制站点如

5、果要创建多个结构相同或相似的站点，可以利用站点的复制功能，具体步骤如下：（1） 单击“站点”“管理站点”选项。 （2）从列表中选择要复制的站点名称，单击“复制”按钮。（3）若要对复制的站点进行编辑，可以从站点列表中选中新复制的站点，单击“编辑”按钮，编辑完成返回到“管理站点”对话框，单击“完成”按钮。3删除站点如果某个站点在Dreamweaver中不再需要编辑了可以删除该站点，具体步骤如下：（1） 单击“站点”“管理站点”选项。（2） 从列表中选择要删除的站点名称，单击“删除”按钮。（3） 在弹出的提示对话框中，单击“是”按钮，即可删除选定的站点。四、实验要求1、认真预习，写出操作步骤。2、遵

6、守机房纪录，填好设备档案。 3、认真写实验总结，实验步骤。五、实验总结Dreamweaver CS3创建网站的步骤？实验二 网页基础练习一、实验目的1、掌握html文件的基本结构2、熟练使用head元素、body元素的各个属性二、实验环境计算机三、实验内容1、打开“记事本”，输入课本P5图1.3所示代码，保存为以.htm或.html为扩展名的web文件，双击该文件，观察显示效果。（注意标题栏的显示内容和正文部分的对齐方式）2、启动Dreamweaver CS3,切换到HTML视图下,完成课本第一章中出现的所有HTML源文件,然后切换到预览视图下观察效果。3、练习使用向导建立本地站点；练习在“文

7、件”面板中新建目录及文件的操作。完成第一章中的练习2和练习34、登录网站,单击申请空间链接，按其要求认真填写相关注册信息，完成个人免费空间的申请。（记住自己申请成功的用户名和密码）并利用ftp工具上传所做网页，然后进行测试。 四、实验要求1、认真预习，写出操作步骤。2、遵守机房纪录，填好设备档案。 3、认真写实验总结，实验步骤。五、实验总结1、HTML文件的基本结构是？2、 如何通过HTML代码实现设置网页的背景颜色？实验三 文本格式练习一、实验目的1、掌握html文件的基本结构2、熟练使用P、BR、HR、Hn等标记符的基本用法3、掌握align属性的用法4、掌握font标记符的用法二、实验环

8、境计算机三、实验内容1、练习在Dreamweaver CS3中新建网页、打开网页、预览网页以及保存网页的方法2、练习文字的输入，普通文字的输入，特殊文字的输入并写出其过程。3、练习标题的设置，文字字体、颜色、样式、对齐的设置。将网页中文本的标题、作者、正文设置为不同的字体、大小，使其看起来具有层次感；设置所有文本居中对齐，使其看起来更加美观。效果如图 四、实验步骤3、主要操作步骤如下：（1）启动Dreamweaver，单击“标准”工具栏的“新建”按钮，在弹出的“新建文档”对话框中新建一个基本页HTML文档。（2）单击“修改”“页面属性”命令，弹出“页面属性”对话框，在“分类”下拉列表中选择“外

9、观”选项，在“外观”选项区中的“背景图像”文本框中设置背景图片，单击“确定”按钮。（3）在文档中输入如图1-1所示的文本。（4）选中标题“偶遇”，在“属性”面板的“字体”下拉列表框中选择“黑体”选项，在“大小”下拉列表框中选择36，效果如图1-2所示。图1-1 输入文本图1-2设置标题格式（5）将标题下“徐志摩”文本的字体设置为隶书，大小为18磅，如图1-3所示。（6）选中正文文本，将其字体设置为幼圆，大小为16磅，如图1-4所示。图1-3设置文本图1-4 设置正文文本（7）选中所有文本后在属性面板中单击“居中对齐”按钮使其居中，然后单击“颜色”按钮，在打开的“颜色”面板中选择深蓝色。（8）保

10、存文件，选择“文件”“在浏览器中预览”IExplore命令对网页进行预览，最终的效果如图所示。五、实验要求1、认真预习，写出操作步骤。2、遵守机房纪录，填好设备档案。 3、认真写实验总结，实验步骤。六、实验总结1、在网页中如何输入多个空格？2、 标记与标记的区别是什么？3、align属性的属性值有哪几个？这个属性可用于哪几个标记？实验四 列表制作一、实验目的：1 掌握列表创建的基本操作。2 掌握列表标记的应用。3 熟悉嵌套列表的代码实现。二、实验环境计算机三、 实验内容1、在“记事本”中用HTML语言编写符合以下要求的webpage1.htm标题为“网页制作练习”；浏览器窗口用户区内有两行内容

11、： 第一行：“欢迎来到web世界!” 第二行：“网上生活从此开始！” （换行使用标记）2、将webpage1.html复制一份取名为webpage2.html,并为webpage2.html这个网页设置背景色或是背景图片（使背景有水印效果），设置页面文字的颜色为紫色，在浏览器中浏览这两个文档。3、对webpage2.htm添加标题，存为webpage3.htm第一行以四级标题（）显示：“欢迎来到web世界！”第二行以一级标题()显示：“网上生活从这里开始！”最后插入一条水平线。()4、对webpage3.htm进行如下修改，存为webpage4.htm.在文档最后加入一行：“欢迎访问我做的第一

12、个网页”，当浏览者单击“第一个网页”时，可打开网页webpage1.htm5、对webpage1.htm进行如下修改：在文档最后加入一行：“返回”二字当浏览者单击“返回”时，可返回网页webpage4.htm6、在网站文件夹下，建立一个子页，标题为“列表练习”，在网页中使用列表进行嵌套列表的制作。效果所下图示：引言第一部分A.说明B.例子l 案例1l 案例2第二部分总结四、实验要求1、认真预习，写出操作步骤。2、遵守机房纪录，填好设备档案。 3、认真写实验总结，实验步骤。五、实验总结1、第四题创建嵌套列表的html代码？2、写出下面各种水平线效果的html代码1)默认水平线2)粗为 5 像素的

13、水平线3)长度为100像素的水平线4)长度为屏幕宽度 50% 的水平线5)粗为 5 像素的实心水平线6)红色的水平线实验五 图像和超链接的应用一、实验目的1、熟悉Dreamweaver CS3的编辑环境。2、掌握如何向文档中添加图像和多媒体元素。3、熟悉图像相关属性的设置。二、实验环境计算机三、实验内容1、练习在网页中插入图像，并且设置图像与文本的环绕，创建网页保存为1.htm2、制作周庄网页：内容要求（1）练习在“周庄”网页中添加图像；（2）练习原始图像和鼠标经过图像的添加；（3）使用表格对页面进行布局。 图1 “周庄”页面3、课本P34页 图3.24、课本P36页 图3.45、 创建热区超

14、链接，效果图如下：四、实验步骤2、主要操作步骤如下：（1）启动Dreamweaver，单击“标准”工具栏的“新建”按钮，在弹出的“新建文档”对话框中新建一个基本页HTML文档。（2）单击“修改”“页面属性”命令，弹出“页面属性”对话框，在“分类”下拉列表中选择“外观”选项，在“外观”选项区中的“背景图像”文本框中设置为beijing.jpg，单击“确定”按钮。（3）单击“插入”“表格”命令，弹出“表格”对话框，在“表格大小”选项组设置“行数”为2和“列数”为3，创建一个2行3列的表格，在“表格属性”面板中设置表格为“居中对齐”方式。（4）选中表格第一行的所有单元格，在“表格属性”面板中单击“合

15、并所选单元格，使用跨度”按钮。效果如图2所示。（5）在窗口中编辑页面，插入文本并设置文本格式，如图3所示。（6）将光标插入点定位到文本下方，选择“插入”“图像对象”“鼠标经过图像”命令，打开“插入鼠标经过图像”对话框。（7）单击“原始图像”文本框后的“浏览”按钮，在打开的对话框中选择1.jpg图像文件作为原始图像，用同样的方法选择2.jpg图像文件作为鼠标经过图像。图2 建立页面布局图3 编辑页面文本（8）设置后的“插入鼠标经过图像”对话框如图4所示，单击“确定”按钮关闭对话框。图4 “插入鼠标经过图像”对话框（9）将光标插入点定位到左侧表格中，选择“插入”“图像”命令，打开“选择图像源文件”

16、对话框，在其中选择3.jpg图像文件，单击“确定”按钮完成图像的添加。（10）用同样的方法在相应的的位置插入图像。（11）单击“标准”工具栏的“保存”按钮保存网页，对网页进行预览，其效果如图5所示，将光标移至中央较大的图像上，该图像发生变化，如图1图5图像变化效果五、实验要求认真预习，写出操作步骤。 六、实验总结1、在网页中插入图像的HTML代码是？2、超链接标记中的属性有哪几个？分别代表什么含义？3、页内链接创建的步骤。4、电子邮件链接的格式是什么？实验六 表格基本练习一、实验目的1、掌握HTML代码创建表格的基本步骤；2、熟练表格属性的设置3、掌握Dreamweaver创建表格的方法二、实

17、验内容1、新建一个文档，然后在文档中创建一个46列的表格。其中含有标题行和数据行。如下图： 学生情况表学号 个人信息 入学信息 姓名 性别 年龄 班级 入学年月 007 东方不败 不详 19 2003年9月 008 任我行 男 20 2003年9月 2、 依照下图做出相应得表格。1）表格的边框为3像素，边框颜色为#ffaa00。 A B E C D 2）3）嵌套表格 课本P65 图4.9Flash3、利用表格，完成如下的页面制作：背景颜色#99ccff三、实验要求1、做好预习，要有预习报告；2、记录实验实验步骤，回答提出的问题；3、实验报告要包括实验步骤，遇到的问题，实验总结。四、实验总结1、

18、表格创建的HTML标记有哪几个？2、实验过程中问题记录。实验七 利用表格布局网页一、实验目的1、掌握表格设置方法。2、掌握表格布局方法。二、实验环境计算机三、实验内容1、“天籁音乐网”案例分析：在网页中插入表格，不显示边框只用来布局；在单元格内插入文字、图片，设置丰富的效果；通过拆分单元格或者插入嵌套表格来细化某些单元格内部的布局。效果图：四、实验步骤1、主要操作步骤：（1）启动Dreamweaver，选择“文件”“新建”命令，选择“空白页”类别中的HTML选项，单击“创建”按钮，新建了一个空白文档。（2）选择“修改”“页面属性”命令，在“分类”中选择“外观”选项，设置一种背景颜色，然后选择“

19、标题/编码”类别，在“标题”文本框中输入“天籁音乐网”，完成后单击“确定”按钮。（3）在文档的第一行输入“天籁音乐网”，选中文字在“属性”面板中设置格式为“标题1”，字体为“宋体”，颜色为FFFF00（黄色），“居中对齐”方式。（4）按Enter键换行，在第二行中插入一条分隔线，可以选择“插入记录”HTML“水平线”选项，完成后如图1所示。图1 插入标题与分割线（5）在第三行插入一个4行1列的表格，单击“插入”面板“常用”类别下的“表格”按钮，在弹出的“表格”对话框中设置行数为4，列数为1，表格宽度为778像素，其余都为默认值，单击“确定”按钮。选中插入的表格，在表格的“属性”面板上设置“对齐

20、”方式为“居中对齐”，完成后如图2所示。图2 插入表格（6）光标定位在第一行单元格内，选择“插入记录”“图像对象”“鼠标经过图像”命令，在弹出的“插入鼠标经过对象”对话框中，单击“原始图像”文本框右边的“浏览”按钮，选择images文件夹中的banner2s.jpg图片。同样的方法设置“鼠标经过图像”为banner5s.jpg图片，在“替换文本”文本框中输入“欢迎来到天籁音乐网！”，如图3所示，完成后单击“确定”按钮。将图片设置为“居中对齐”方式，效果如图4所示。图3 “插入鼠标经过图像”对话框图4 “插入鼠标经过图像”后的效果图5 拆分第二行单元格（7）光标定位在第二行单元格内，在单元格“属

21、性”面板上单击“拆分单元格为行或列”按钮，在弹出的“拆分单元格”对话框设置将单元格拆分成3列，如图5所示。（8）在拆分的3个单元格内输入文字，效果如图6所示，拖动单元格的边框线调节每个单元格的宽度使它能容纳输入的内容。图6 编辑第二行文本内容（9）光标定位在第三行单元格内，单击“插入”面板“常用”类别下的“表格”按钮，在弹出的“表格”对话框中设置行数为2，列数为6，表格宽度为778像素，其他为默认值。插入的表格效果如图7所示。图7 第三行中插入嵌套表格（10）在嵌套表格中，选中第一行前5个单元格，单击单元格“属性”面板上“合并所选单元格，使用跨度”按钮，在合并后的单元格内输入文本“热门专辑”并

22、设置格式。在第一行第6个单元格内输入“更多”，选中文字在“属性”面板的“链接”文本框中输入“#”（空链接），“右对齐”方式。单击“插入”面板“常用”类别下的“图像”按钮，分别在第二行的6个单元格内插入图片，图片是images文件夹中的zj1、zj2、zj3、zj4、zj5和zj6，效果如图8所示。图8 编辑嵌套表格中的内容（11）光标定位到第四行单元格，与第三行一样插入一个2行6列的表格，将第一行的6个单元格合并为1个单元格并输入文字“分类搜索”；第二行16单元格内分别输入“歌手”、“歌曲”、“专辑”、“歌词”、MV和“排行榜”，在文字“属性”面板上设置链接为“#”，“居中对齐”方式，效果如图

23、9所示。 图9 第四行嵌套表格并输入内容（12）按CtrlS快捷键保存文件，命名为index.html，按F12键在浏览器中预览最终效果。五、实验要求1、认真预习，写出操作步骤。2、遵守机房纪录，填好设备档案。 3、认真写实验总结，实验步骤。实验八 创建框架网页一、实验目的：1.掌握利用框架进行页面布局。2.掌握在框架中打开网页二、实验环境计算机三、实验内容1.制作精美散文框架页面思路要求：先制作主体框架页面，再制作框架各区域页面，最后设置链接和背景图片。效果图：四、实验步骤1、主要操作步骤：（1）启动Adobe Dreamweaver ，在E盘创建一个名称为myweb的站点，站点文件夹的名称

24、为myweb，单击“文件”菜单栏的“新建”按钮，在弹出的“新建文档”对话框中新建一个基本页HTML文档。（2）单击“插入记录”HTML“框架”“上方及左侧嵌套”命令，如图1所示，建立框架页面。图1 选择框架类型（3）向框架各区域输入文字，上方框架内输入“精美散文”，左方框架内输入散文名，如图2所示。图2 给框架添加内容（4）单击“修改”“页面属性”选项，在弹出的“页面属性”对话框内选择“背景图像”文本框，给框架各区域添加背景图像，如图3所示。图3 给框架各区域添加背景图像（5）单击水平框架分隔线，在“属性”面板中设置分隔线属性，如图4所示。图4 设置水平分隔线属性（6）单击垂直分隔线，在“属性

25、”面板内设置分隔线属性，如图5所示。图5 设置“垂直分隔线”属性（7）将4篇散文复制粘贴到站点文件夹（素材库里有素材），给各散文名添加链接，链接页面打开的目标页面为mainFrame，如图6所示。（8）单击“保存全部”命令，在弹出的“另存为”对话框中，给框架命名为index.html，页面分别命名为kuangjia1.html、kuangjia2.html，kuangjia3.html。此时站点内文件如图7所示。图6 给散文名添加链接图7 站点文件（9）预览index.html页面。五、实验要求1、认真预习，写出操作步骤。2、遵守机房纪录，填好设备档案。 3、认真写实验总结，实验步骤。六、实验

26、总结实验过程问题记录实验九 表单的创建一、实验目的1、熟悉表单的类型2、掌握插入表单的方法3、掌握插入表单对象的方法二、实验环境计算机三、实验内容：1.制作个人资料填写表单制作思路：制作标题表格，插入表单，向表单中添加内容表格。左边输入要求用户填写的项目；中间是文本域、复选框、列表/菜单等表单元素；右边是填写过程中应该注意的事项；最下面是文本区域和提交重置按钮。设置表格的版式使其看起来更加美观。效果图如下：四、实验要求1、认真预习，写出操作步骤。2、遵守机房纪录，填好设备档案。 3、认真写实验总结，实验步骤。五、实验总结 实验过程问题记录实验十 多媒体元素的应用一、实验目的1、熟练掌握插入fl

27、ash动画、按钮、文本的用法。2、掌握插入shockwave影片的方法。3、掌握插入音频、视频文件的方法二、实验环境计算机三、实验内容1、练习制作一个动物世界的网页，主要练习插入Flash动画、Flash按钮、插入shockwave影片。制作思路如下：1）在网页的顶部插入banner.swf。2）在banner.swf的下面插入6个Flash按钮。3）在网页下部表格中间的单元格中插入dongwu.dcr。4）在“属性”面板中设置其宽度为“400”像素，高度为“300”像素。2、制作一个飘落雪花页面，要求插入飘落雪花的FLASH动画，并将FLASH动画背景设置为透明色，FLASH动画资料另附。步

28、骤如下：1）使用1.jpg图像作为单元格的背景2）在该单元格中插入“xue.swf”Flash动画3）在“属性”面板中设置Flash动画的大小4）代码视图输入“”，使Flash动画透明。效果如下图3、“视听在线”网页案例四、实验步骤：3、主要操作步骤：（1）启动Dreamweaver，选择“文件”“新建”，选择“空白页”类别中的HTML选项，单击“创建”按钮，新建了一个空白文档。（2）选择“修改”“页面属性”命令，选择背景图像为images/bg.jpg，输入标题为“视听在线”，完成后单击“确定”按钮。（3）在文档的第一行输入“视听在线”，选中文字在“属性”面板中设置格式为“标题1”，字体为“

29、楷体_GB2312”，“居中对齐”方式，效果如图1所示。图1 插入标题文字（4）在文档第二行插入一个11行5列的表格，单击“插入”面板的“常用”类别下的“表格”按钮，在弹出的“表格”对话框中设置行数为11，列数为5，表格宽度为778像素，边框粗细为2，单击“确定”按钮。然后选中表格，在表格的“属性”面板上设置“对齐”方式为“居中对齐”，完成后如图2所示。图2 插入表格（5）调整表格各列的宽度，然后将第一行1、2单元格及4、5单元格分别合并。在各单元格内输入文字并设置相应的格式，完成效果如图3所示。图3在表格中编辑文本（6）在表格第一列的211行中分别插入images文件夹中的1.gif至0.g

30、if共10幅数字图片，第四列同第一列，图片大小为4040像素，“居中对齐”，完成后效果如图4所示。图4 在表格中插入图片（7）创建“歌曲欣赏”子页面。选择“文件”“新建”命令，选择“空白页”类别中的HTML选定，单击“创建”按钮，新建了一个空白文档。然后在“页面属性”中选择“背景图像”为images/bg2.jpg，“标题”文本框中输入歌曲名称。（8）在“歌曲欣赏”子页面第一行输入歌曲名称作为标题；第二行选择“插入记录”“媒体”“插件”命令，在弹出的“选择文件”对话框中选择要插入的声音文件，单击“确定”按钮，在插件“属性”面板中设置宽为300像素，高为50像素；第三行输入歌词内容。完成效果如图

31、5所示。（9）创建“MV欣赏”子页面。选择“文件”“新建”命令，选择“空白页”类别中的HTML选项，单击“创建”按钮，新建了一个空白文档。然后在“页面属性”中设置背景图像为images/bg3.jpg，“标题”为MV名称。（10）在“MV欣赏”子页面第一行输入MV名称作为标题；第二行选择“插入记录”“媒体”Flash命令，在弹出的“选择文件”对话框中选择要插入的Flash文件，单击“确定”按钮，在Flash“属性”面板中设置宽为400像素，高为300像素。完成效果如图6所示。图5 “歌曲欣赏”子页面图6 “MV欣赏”子页面（11）将“歌曲欣赏”子页面和“MV欣赏”子页面分别保存为gq1.htm

32、l和mv1.html，打开主页，选中第一首歌曲，在“属性”面板中设置“链接”为gq1.html，目标为_blank。同样的方法设置第一首MV的超链接属性，其他歌曲和MV子页面也是相同的制作方法。（12）按CtrlS快捷键保存主页，命名为index.html，按F12键在浏览器中预览最终效果。五、实验要求1、认真预习，写出操作步骤。2、遵守机房纪录，填好设备档案。 3、认真写实验总结，实验步骤六、实验总结1、在网页中如何设置背景音乐？2、实验过程问题记录。实验十一 css定义样式一、实验目的1.掌握层的网页布局方式。2.掌握CSS的应用。二、实验环境计算机三、实验内容1、结合运行效果阅读下面例程

33、，然后修改CSS样式。 * 样式表举例 这段文字将显示为红色 这段文字的背景色为黄色 这段文字将以黑体显示 今天学习样式表的相关知识。*2、为上面例程增加样式规则，定义类选择符合ID选择符，使得的文字均为楷体、红色。最后一段文字为隶书，蓝色。3、利用插入CSS样式的三种方法实现以下效果图。说明：网页背景颜色值#CC99FF，一级标题的背景颜色值黄色，段落的背景颜色值#FF99FF，字体为italic,字体颜色为蓝色。五、实验要求1、认真预习，写出操作步骤。2、遵守机房纪录，填好设备档案。 3、认真写实验总结，实验步骤。六、实验总结 1、插入CSS样式的第1种方式实现第3题-链入外部样式表 -2

34、、插入CSS样式的第2种方式实现第3题-嵌入式-3、插入CSS样式的第3种方式实现第3题-内联式- 实验十二 css技术应用(一)一、实验目的1.掌握层的网页布局方式。2.掌握CSS的应用。二、实验环境计算机三、实验内容1、练习用CSS样式为“银杏树”网页进行文本格式设置。制作思路：1）在“CSS样式定义”对话框中将字体设置为黑体，大小设置为14号，样式设置为偏斜体，颜色设置为深绿色。2）将网页中正文文本应用创建的CSS样式。2、CSS样式练习，用定义样式的方法制作出下图的效果。制作思路：1）在“CSS样式定义”对话框中建立两个类：.aa和.bb。.aa类样式将字体设置为宋体；大小设置为24号

35、；样式设置为加粗；颜色设置为紫红色；边框设置为实线，颜色设为紫红色；。.bb类样式将字体设置为宋体，大小设置为14号，颜色设置为蓝色；边框设置为虚线，颜色为红色；方框设置填充全部100px，边界上，右，下，左分别为100px,200px,200px,100px。在“CSS样式定义”对话框中建立标签选择器，设置body标签样式，边框为实线，颜色为红色。2）将网页中正文文本应用创建的CSS样式。3、使用CSS滤镜设置文字阴影 材料另附四、实验要求 1、认真预习，写出操作步骤。 2、认真写实验总结，写出制作过程中的问题。五、实验总结实验过程问题记录实验十三 css技术应用(二)一、实验目的1.掌握层

36、的网页布局方式。2.掌握CSS的应用。二、实验环境计算机三、实验内容1、创建站点主页index.html，代码如下。运行观察显示效果2、创建样式表文件css.css。代码见下一页。运行主页观察显示效果3、比较两次主页的显示，进行适当修改使页面更加美观。*index.html * 首页博客设计相册论坛关于 /*基本信息*/*css.css*body font:12px Tahoma;margin:0px;text-align:center;background:#FFF;a:link,a:visited font-size:12px;text-decoration: none;a:hover/*

37、页面层容器*/#container width:800px;height:600px;margin:10px auto/*页面头部*/#header background:url(logo.gif) no-repeat#menu padding:20px 20px 0 0#menu ul float:right;list-style:none;margin:0px;#menu ul li float:left;display:block;line-height:30px;margin:0 10px#menu ul li a:link,#menu ul li a:visited font-wei

38、ght:bold;color:#666#menu ul li a:hover.menuDiv width:1px;height:28px;background:#999#banner background:url(banner.jpg) 0 30px no-repeat;width:730px;margin:auto;height:240px;border-bottom:5px solid #EFEFEF;clear:both/*页面主体*/#pagebody width:800px;margin:0 auto;height:400px;background:#CCFF00/*页面底部*/#f

39、ooter width:800px;margin:0 auto;height:50px;background:#00FFFF *四、实验要求 1、认真预习，写出操作步骤。 2、认真写实验总结，写出制作过程中的问题。五、实验总结实验过程问题记录实验十四 在网页中添加JavaScript脚本一、实验目的1、 掌握添加JavaScript脚本的方法2、 掌握常用的Dreamweaver内置行为的使用二、实验环境计算机三、实验内容1、使用标记插入脚本JavaScript 示例 2、 直接添加脚本JavaScript 示例 3、 链接外部脚本文件-网页源文件-JavaScript 示例 -与网页源文件同

40、目录下的 test.js 文件- function showmsg() alert(欢迎来到JavaScript世界) 四、实验要求 1、认真预习，写出操作步骤。 2、遵守机房纪录，填好设备档案。五、实验总结1、JavaScrp脚本语言中注释符号的写法是？2、JavaScript的基本特点是什么？实验十五 JavaScript基础练习（一）一、实验目的1、掌握JavaScript脚本语言的基本语法2、掌握JavaScript脚本语言的变量、运算符二、实验环境计算机三、实验内容1、设计一个计算两数之和的程序。 n=prompt(输入第一个数：,0);x=parseFloat(n);/将输入的内容

41、转换为数值n =prompt(输入第二个数：,0);y=parseFloat(n);/JavaScript是大小写敏感的，注意区别字母的大小写z=x+y;alert(两数之和：+z);2、设计一个求平方根的程序。 n=prompt(请输入一个正数:,1);y=Math.sqrt(n);if(y0)alert(n+的平方根是：+y);elsealert(输入无效！); 3、课本P154-160 图7.37.6四、实验要求 1、认真预习，写出操作步骤。 2、遵守机房纪录，填好设备档案。五、实验总结1、Javacript脚本语言中运算符的优先级顺序是什么？2、实验过程问题记录。实验十六 JavaSc

42、ript基础练习（二）一、实验目的1、掌握JavaScript脚本语言的基本语法2、掌握JavaScript脚本语言的语句、函数二、实验环境计算机三、实验内容1、生成10个随机数实例 var s=10个随机数:;for(i=1;i=10;i+) var n=Math.round(Math.random()*100)/100; s=s+n+,;alert(s);2、猜数字游戏 game();function game()var x=Math.floor(Math.random()*100+1);var y=1;for(i=1;ix)?大:小)+了); alert(你+(y=x)?赢:输)+了，这个数是：+x);3、构造一个二维数组并将其元素在表格中显示。创建数组!-var order=new Array();order0=new Array(背心,30,￥80);order1=new Array(鞋,50,￥200);order2=new