2024年Html设计实验报告

山東信息职业技术學院《网页设计》试验汇报（—第二學期）班级：姓名：學号：指导老師：试验一认识DreamweaverCS3一、试验目的1、熟悉DreamweaverCS3环境。2、理解HTML文献构造。二、试验环境计算机三、试验内容创立站點有两种方式：使用向导有序地進行设置，或者通過在“管理站點”對话框中设置“高级”选项卡信息来创立。無论哪种方式，都要事先在當地磁盘上建立一种用来寄存站點的文献夹，這個文献夹就是當地站點的根目录。下面简介一下這两种方式的详细操作环节。1．使用向导建立站點使用向导建立站點的环节如下：（1）打開建立站點向导的措施有3种。①在進入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站點”命令，如图所示。②选择“站點”菜單中的“新建站點”命令。③选择“站點”菜單中的“管理站點”命令，打開如图所示的“管理站點”對话框，执行“新建”→“站點”命令。起始页中新建站點“管理站點”對话框（2）打開“站點定义為”對话框，在“您打算為您的站點起什么名字？”文本框中输入站點名字，如travel。若已申請域名则可以在“您的站點的HTTP地址（URL）是什么？”文本框中填入申請的域名地址。如图所示。设置站點名和URL地址（3）單击“下一步”按钮，問询与否使用服务器技术，如图所示。若是静态站點则选中“否，我不想使用服务器技术”單项选择按钮，若是動态站點可以深入设置使用哪一种服务器技术。选择与否使用服务器技术（4）單击“下一步”按钮，在“您将把文献存储在计算机上的什么位置？”文本框中直接输入站點根目录的途径，或者單击“浏览”按钮，选择文献夹目录。（5）單击“下一步”按钮，在“您怎样连接到遠程服务器？”下拉列表框中选择一种连接到遠程服务器的方式，這裏选择“無”选项。（6）單击“下一步”按钮，将显示前几步设置的總結信息，若需修改可單击“上一步”按钮返回重新设置，若确定设置则單击“完毕”按钮。站點创立完毕後将在“文献”面板中显示出站點的构造和文献。2．使用高级设置建立站點使用高级设置建立站點的第一步同前，在如图所示的“站點定义為”對话框中切换到“高级”选项卡，如图所示。在左边的分类中选择“當地信息”选项，然後分别设置“站點名称”、“當地根文献夹”、“默认图像文献夹”、“HTTP地址”等信息。若有需要還可以在左边的分类中选择其他项目進行设置，完毕後来單击“确定”按钮，即可创立站點。對于已經创立好的站點，可以执行编辑、复制、删除、导出和导入等操作。1．编辑站點假如要重新设置站點的属性，可以执行如下环节：（1）單击“站點”→“管理站點”选项。（2）從站點列表中选择要编辑的站點名称，單击“编辑”按钮。可以参照前面创立站點的措施重新设置站點属性。（3）编辑完毕後，單击“确定”按钮，返回到“管理站點”對话框，單击“完毕”按钮。2．复制站點假如要创立多种构造相似或相似的站點，可以运用站點的复制功能，详细环节如下：單击“站點”→“管理站點”选项。（2）從列表中选择要复制的站點名称，單击“复制”按钮。（3）若要對复制的站點進行编辑，可以從站點列表中选中新复制的站點，單击“编辑”按钮，编辑完毕返回到“管理站點”對话框，單击“完毕”按钮。3．删除站點假如某個站點在Dreamweaver中不再需要编辑了可以删除该站點，详细环节如下：單击“站點”→“管理站點”选项。從列表中选择要删除的站點名称，單击“删除”按钮。在弹出的提醒對话框中，單击“是”按钮，即可删除选定的站點。四、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。3、认真写试验總結，试验环节。五、试验總結DreamweaverCS3创立网站的环节？试验二网页基础练习一、试验目的1、掌握html文献的基本构造2、纯熟使用head元素、body元素的各個属性二、试验环境计算机三、试验内容1、打開“记事本”，输入書本P5图1.3所示代码，保留為以.htm或.html為扩展名的web文献，双击该文献，观测显示效果。（注意標題栏的显示内容和正文部分的對齐方式）2、启動DreamweaverCS3,切换到HTML视图下,完毕書本第一章中出現的所有HTML源文献,然後切换到预览视图下观测效果。3、练习使用向导建立當地站點；练习在“文献”面板中新建目录及文献的操作。完毕第一章中的练习2和练习34、登录网站,單击申請空间链接，按其规定认真填写有关注册信息，完毕個人免费空间的申請。（记住自已申請成功的顾客名和密码）并运用ftp工具上传所做网页，然後進行测试。四、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。3、认真写试验總結，试验环节。五、试验總結1、HTML文献的基本构造是？怎样通過HTML代码实現设置网页的背景颜色？试验三文本格式练习一、试验目的1、掌握html文献的基本构造2、纯熟使用P、BR、HR、Hn等標识符的基本使用方法3、掌握align属性的使用方法4、掌握font標识符的使用方法二、试验环境计算机三、试验内容1、练习在DreamweaverCS3中新建网页、打開网页、预览网页以及保留网页的措施2、练习文字的输入，一般文字的输入，特殊文字的输入并写出其過程。3、练习標題的设置，文字字体、颜色、样式、對齐的设置。将网页中文本的標題、作者、正文设置為不一样的字体、大小，使其看起来具有层次感；设置所有文本居中對齐，使其看起来愈加美观。效果如图四、试验环节3、重要操作环节如下：（1）启動Dreamweaver，單击“原则”工具栏的“新建”按钮，在弹出的“新建文档”對话框中新建一种基本页HTML文档。（2）單击“修改”→“页面属性”命令，弹出“页面属性”對话框，在“分类”下拉列表中选择“外观”选项，在“外观”选项区中的“背景图像”文本框中设置背景图片，單击“确定”按钮。（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）保留文献，选择“文献”→“在浏览器中预览”→IExplore命令對网页進行预览，最终的效果如图所示。五、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。3、认真写试验總結，试验环节。六、试验總結1、在网页中怎样输入多种空格？<P>標识与<br>標识的区别是什么？3、align属性的属性值有哪几种？這個属性可用于哪几种標识？试验四列表制作一、试验目的：掌握列表创立的基本操作。掌握列表標识的应用。熟悉嵌套列表的代码实現。二、试验环境计算机三、试验内容1、在“记事本”中用HTML語言编写符合如下规定的webpage1.htm標題為“网页制作练习”；浏览器窗口顾客区内有两行内容：第一行：“欢迎来到web世界!”第二行：“网上生活從此開始！”（换行使用<br>標识）2、将webpage1.html复制一份取名為webpage2.html,并為webpage2.html這個网页设置背景色或是背景图片（使背景有水印效果），设置页面文字的颜色為紫色，在浏览器中浏览這两個文档。3、對webpage2.htm添加標題，存為webpage3.htm第一行以四级標題（<h4>）显示：“欢迎来到web世界！”第二行以一级標題(<h1>)显示：“网上生活從這裏開始！”最终插入一条水平线。(<hr>)4、對webpage3.htm進行如下修改，存為webpage4.htm.在文档最终加入一行：“欢迎访問我做的第一种网页”，當浏览者單击“第一种网页”時，可打開网页webpage1.htm5、對webpage1.htm進行如下修改：在文档最终加入一行：“返回”二字當浏览者單击“返回”時，可返回网页webpage4.htm6、在网站文献夹下，建立一种子页，標題為“列表练习”，在网页中使用列表進行嵌套列表的制作。效果所下图示：Ⅰ引言Ⅱ第一部分A.阐明B.例子案例1案例2Ⅲ第二部分Ⅳ總結四、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。3、认真写试验總結，试验环节。五、试验總結1、第四題创立嵌套列表的html代码？2、写出下面多种水平线效果的html代码1)默认水平线2)粗為5像素的水平线3)長度為100像素的水平线4)長度為屏幕宽度50%的水平线5)粗為5像素的实心水平线6)紅色的水平线试验五图像和超链接的应用一、试验目的1、熟悉DreamweaverCS3的编辑环境。2、掌握怎样向文档中添加图像和多媒体元素。3、熟悉图像有关属性的设置。二、试验环境计算机三、试验内容1、练习在网页中插入图像，并且设置图像与文本的围绕，创立网页保留為1.htm2、制作周庄网页：内容规定（1）练习在“周庄”网页中添加图像；（2）练习原始图像和鼠標通過图像的添加；（3）使用表格對页面進行布局。图1“周庄”页面3、書本P34页图3.24、書本P36页图3.45、创立热区超链接，效果图如下：四、试验环节2、重要操作环节如下：（1）启動Dreamweaver，單击“原则”工具栏的“新建”按钮，在弹出的“新建文档”對话框中新建一种基本页HTML文档。（2）單击“修改”→“页面属性”命令，弹出“页面属性”對话框，在“分类”下拉列表中选择“外观”选项，在“外观”选项区中的“背景图像”文本框中设置為beijing.jpg，單击“确定”按钮。（3）單击“插入”→“表格”命令，弹出“表格”對话框，在“表格大小”选项组设置“行数”為2和“列数”為3，创立一种2行3列的表格，在“表格属性”面板中设置表格為“居中對齐”方式。（4）选中表格第一行的所有單元格，在“表格属性”面板中單击“合并所选單元格，使用跨度”按钮。效果如图2所示。（5）在窗口中编辑页面，插入文本并设置文本格式，如图3所示。（6）将光標插入點定位到文本下方，选择“插入”→“图像對象”→“鼠標通過图像”命令，打開“插入鼠標通過图像”對话框。（7）文献作為原始图像，用同样的措施选择2.jpg图像文献作為鼠標通過图像。图2建立页面布局图3编辑页面文本（8）设置後的“插入鼠標通過图像”對话框如图4所示，單击“确定”按钮关闭對话框。图4“插入鼠標通過图像”對话框（9）将光標插入點定位到左侧表格中，选择“插入”→“图像”命令，打開“选择图像源文献”對话框，在其中选择3.jpg图像文献，單击“确定”按钮完毕图像的添加。（10）用同样的措施在對应的的位置插入图像。（11）單击“原则”工具栏的“保留”按钮保留网页，對网页進行预览，其效果如图5所示，将光標移至中央较大的图像上，该图像发生变化，如图1图5图像变化效果五、试验规定认真预习，写出操作环节。六、试验總結1、在网页中插入图像的HTML代码是？2、超链接標识<a>中的属性有哪几种？分别代表什么含义？3、页内链接创立的环节。4、電子邮件链接的格式是什么？试验六表格基本练习一、试验目的1、掌握HTML代码创立表格的基本环节；2、纯熟表格属性的设置3、掌握Dreamweaver创立表格的措施二、试验内容1、新建一种文档，然後在文档中创立一种4×6列的表格。其中具有標題行和数据行。如下图：學生状况表學号個人信息入學信息姓名性别年龄班级入年月007東方不败不详19039月008任我行男20039月2、根据下图做出對应得表格。1）表格的边框為3像素，边框颜色為#ffaa00。ABECD2）3）嵌套表格書本P65图4.9Flash3、运用表格，完毕如下的页面制作：Flash背景颜色背景颜色#99ccff三、试验规定1、做好预习，要有预习汇报；2、记录试验试验环节，回答提出的問題；3、试验汇报要包括试验环节，碰到的問題，试验總結。四、试验總結1、表格创立的HTML標识有哪几种？2、试验過程中問題记录。试验七运用表格布局网页一、试验目的1、掌握表格设置措施。2、掌握表格布局措施。二、试验环境计算机三、试验内容1、“天籁音乐网”案例分析：①在网页中插入表格，不显示边框只用来布局；②在單元格内插入文字、图片，设置丰富的效果；③通過拆分單元格或者插入嵌套表格来细化某些單元格内部的布局。效果图：四、试验环节1、重要操作环节：（1）启動Dreamweaver，选择“文献”→“新建”命令，选择“空白页”类别中的HTML选项，單击“创立”按钮，新建了一种空白文档。（2）选择“修改”→“页面属性”命令，在“分类”中选择“外观”选项，设置一种背景颜色，然後选择“標題/编码”类别，在“標題”文本框中输入“天籁音乐网”，完毕後單击“确定”按钮。（3）在文档的第一行输入“天籁音乐网”，选中文字在“属性”面板中设置格式為“標題1”，字体為“宋体”，颜色為FFFF00（黄色），“居中對齐”方式。（4）按Enter键换行，在第二行中插入一条分隔线，可以选择“插入记录”→HTML→“水平线”选项，完毕後如图1所示。图1插入標題与分割线（5）在第三行插入一种4行1列的表格，單击“插入”面板“常用”类别下的“表格”按钮，在弹出的“表格”對话框中设置行数為4，列数為1，表格宽度為778像素，其他都為默认值，單击“确定”按钮。选中插入的表格，在表格的“属性”面板上设置“對齐”方式為“居中對齐”，完毕後如图2所示。图2插入表格（6）光標定位在第一行單元格内，选择“插入记录”→“图像對象”→“鼠標通過图像”命令，在弹出的“插入鼠標通過對象”對话框中，單击“原始图像”文本框右边的“浏览”按钮，选择images文献夹中的banner2s.jpg图片。同样的措施设置“鼠標通過图像”為banner5s.jpg图片，在“替代文本”文本框中输入“欢迎来到天籁音乐网！”，如图3所示，完毕後單击“确定”按钮。将图片设置為“居中對齐”方式，效果如图4所示。图3“插入鼠標通過图像”對话框图4“插入鼠標通過图像”後的效果图5拆分第二行單元格（7）光標定位在第二行單元格内，在單元格“属性图5拆分第二行單元格上單击“拆分單元格為行或列”按钮，在弹出的“拆分單元格”對话框设置将單元格拆提成3列，如图5所示。（8）在拆分的3個單元格内输入文字，效果如图6所示，拖動單元格的边框线调整每個單元格的宽度使它能容纳输入的内容。图6编辑第二行文本内容（9）光標定位在第三行單元格内，單击“插入”面板“常用”类别下的“表格”按钮，在弹出的“表格”對话框中设置行数為2，列数為6，表格宽度為778像素，其他為默认值。插入的表格效果如图7所示。图7第三行中插入嵌套表格（10）在嵌套表格中，选中第一行前5個單元格，單击單元格“属性”面板上“合并所选單元格，使用跨度”按钮，在合并後的單元格内输入文本“热门专辑”并设置格式。在第一行第6個單元格内输入“更多”，选中文字在“属性”面板的“链接”文本框中输入“#”（空链接），“右對齐”方式。單击“插入”面板“常用”类别下的“图像”按钮，分别在第二行的6個單元格内插入图片，图片是images文献夹中的zj1、zj2、zj3、zj4、zj5和zj6，效果如图8所示。图8编辑嵌套表格中的内容（11）光標定位到第四行單元格，与第三行同样插入一种2行6列的表格，将第一行的6個單元格合并為1個單元格并输入文字“分类搜索”；第二行1～6單元格内分别输入“歌手”、“歌曲”、“专辑”、“歌詞”、MV和“排行榜”，在文字“属性”面板上设置链接為“#”，“居中對齐”方式，效果如图9所示。图9第四行嵌套表格并输入内容五、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。3、认真写试验總結，试验环节。试验八创立框架网页一、试验目的：1.掌握运用框架進行页面布局。2.掌握在框架中打開网页二、试验环境计算机三、试验内容1.制作精美散文框架页面思绪规定：先制作主体框架页面，再制作框架各区域页面，最终设置链接和背景图片。效果图：四、试验环节1、重要操作环节：（1）启動AdobeDreamweaver，在E盘创立一种名称為myweb的站點，站點文献夹的名称為myweb，單击“文献”菜單栏的“新建”按钮，在弹出的“新建文档”對话框中新建一种基本页HTML文档。（2）單击“插入记录”→HTML→“框架”→“上方及左侧嵌套”命令，如图1所示，建立框架页面。图1选择框架类型（3）向框架各区域输入文字，上方框架内输入“精美散文”，左方框架内输入散文名，如图2所示。图2給框架添加内容（4）單击“修改”→“页面属性”选项，在弹出的“页面属性”對话框内选择“背景图像”文本框，給框架各区域添加背景图像，如图3所示。图3給框架各区域添加背景图像（5）單击水平框架分隔线，在“属性”面板中设置分隔线属性，如图4所示。图4设置水平分隔线属性（6）單击垂直分隔线，在“属性”面板内设置分隔线属性，如图5所示。图5设置“垂直分隔线”属性（7）将4篇散文复制粘贴到站點文献夹（素材库裏有素材），給各散文名添加链接，链接页面打開的目的页面為mainFrame，如图6所示。（8）單击“保留所有”命令，在弹出的“另存為”對话框中，給框架命名為index.html，页面分别命名為kuangjia1.html、kuangjia2.html，kuangjia3.html。此時站點内文献如图7所示。图6給散文名添加链接图7站點文献（9）预览index.html页面。五、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。3、认真写试验總結，试验环节。六、试验總結试验過程問題记录试验九表單的创立一、试验目的1、熟悉表單的类型2、掌握插入表單的措施3、掌握插入表單對象的措施二、试验环境计算机三、试验内容：1.制作個人资料填写表單制作思绪：制作標題表格，插入表單，向表單中添加内容表格。左边输入规定顾客填写的项目；中间是文本域、复选框、列表/菜單等表單元素；右边是填写過程中应當注意的事项；最下面是文本区域和提交重置按钮。设置表格的版式使其看起来愈加美观。效果图如下：四、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。3、认真写试验總結，试验环节。五、试验總結试验過程問題记录试验拾多媒体元素的应用一、试验目的1、纯熟掌握插入flash動画、按钮、文本的使用方法。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動画资料另附。环节如下：1）使用1.jpg图像作為單元格的背景2）在该單元格中插入“xue.swf”Flash動画3）在“属性”面板中设置Flash動画的大小4）代码视图输入“<paramname=”wmode”value=”tranparent”>”，使Flash動画透明。效果如下图3、“视听在线”网页案例四、试验环节：3、重要操作环节：（1）启動Dreamweaver，选择“文献”→“新建”，选择“空白页”类别中的HTML选项，單击“创立”按钮，新建了一种空白文档。（2）选择“修改”→“页面属性”命令，选择背景图像為images/bg.jpg，输入標題為“视听在线”，完毕後單击“确定”按钮。（3）在文档的第一行输入“视听在线”，选中文字在“属性”面板中设置格式為“標題1”，字体為“楷体_GB2312”，“居中對齐”方式，效果如图1所示。图1插入標題文字（4）在文档第二行插入一种11行5列的表格，單击“插入”面板的“常用”类别下的“表格”按钮，在弹出的“表格”對话框中设置行数為11，列数為5，表格宽度為778像素，边框粗细為2，單击“确定”按钮。然後选中表格，在表格的“属性”面板上设置“對齐”方式為“居中對齐”，完毕後如图2所示。图2插入表格（5）调整表格各列的宽度，然後将第一行1、2單元格及4、5單元格分别合并。在各單元格内输入文字并设置對应的格式，完毕效果如图3所示。图3在表格中编辑文本（6）图4在表格中插入图片（7）创立“歌曲欣赏”子页面。选择“文献”→“新建”命令，选择“空白页”类别中的HTML选定，單击“创立”按钮，新建了一种空白文档。然後在“页面属性”中选择“背景图像”為images/bg2.jpg，“標題”文本框中输入歌曲名称。（8）在“歌曲欣赏”子页面第一行输入歌曲名称作為標題；第二行选择“插入记录”→“媒体”→“插件”命令，在弹出的“选择文献”對话框中选择要插入的声音文献，單击“确定”按钮，在插件“属性”面板中设置宽為300像素，高為50像素；第三行输入歌詞内容。完毕效果如图5所示。（9）创立“MV欣赏”子页面。选择“文献”→“新建”命令，选择“空白页”类别中的HTML选项，單击“创立”按钮，新建了一种空白文档。然後在“页面属性”中设置背景图像為images/bg3.jpg，“標題”為MV名称。（10）→“媒体”→Flash命令，在弹出的“选择文献”對话框中选择要插入的Flash文献，單击“确定”按钮，在Flash“属性”面板中设置宽為400像素，高為300像素。完毕效果如图6所示。图5“歌曲欣赏”子页面图6“MV欣赏”子页面（11）将“歌曲欣赏”子页面和“MV欣赏”子页面分别保留為gq1.html和mv1.html，打開主页，选中第一首歌曲，在“属性”面板中设置“链接”為gq1.html，目的為_blank。同样的措施设置第一首MV的超链接属性，其他歌曲和MV子页面也是相似的制作措施。（12）按Ctrl＋S快捷键保留主页，命名為index.html，按F12键在浏览器中预览最终效果。五、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。3、认真写试验總結，试验环节六、试验總結1、在网页中怎样设置背景音乐？2、试验過程問題记录。试验拾一css定义样式一、试验目的1.掌握层的网页布局方式。2.掌握CSS的应用。二、试验环境计算机三、试验内容1、結合运行效果阅讀下面例程，然後修改CSS样式。***********************************************************************<html><head><title>样式表举例</title><styletype="text/css"><!--h1{ font-size:36px; font-family:"隶書"; font-weight:bold; color:#993366;}--></style></head><body><pstyle="color:#ff0000">這段文字将显示為紅色</p><pstyle="color:#000000;background-color:yellow;">這段文字的背景色為<I>黄色</I></p><pstyle="font-family:'华文彩雲';font-size:24px">這段文字将以黑体显示</p><p><h1align="center">今天學习样式表的有关知识。</h1></p></body></html>************************************************************************2、為上面例程增長样式规则，定义类选择符合ID选择符，使得<p>的文字均為楷体、紅色。最终一段文字為隶書，藍色。3、运用插入CSS样式的三种措施实現如下效果图。阐明：网页背景颜色值#CC99FF，一级標題的背景颜色值黄色，段落的背景颜色值#FF99FF，字体為italic,字体颜色為藍色。五、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。3、认真写试验總結，试验环节。六、试验總結1、插入CSS样式的第1种方式实現第3題链入外部样式表2、插入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号；样式设置為加粗；颜色设置為紫紅色；边框设置為实线，颜色设為紫紅色；。.bb类样式将字体设置為宋体，大小设置為14号，颜色设置為藍色；边框设置為虚线，颜色為紅色；方框设置填充所有100px，边界上，右，下，左分别為100px,200px,200px,100px。在“CSS样式定义”對话框中建立標签选择器，设置body標签样式，边框為实线，颜色為紅色。2）将网页中正文文本应用创立的CSS样式。3、使用CSS滤镜设置文字阴影材料另附四、试验规定1、认真预习，写出操作环节。2、认真写试验總結，写出制作過程中的問題。五、试验總結试验過程問題记录试验拾三css技术应用(二)一、试验目的1.掌握层的网页布局方式。2.掌握CSS的应用。二、试验环境计算机三、试验内容1、创立站點主页index.html，代码如下。运行观测显示效果2、创立样式表文献css.css。代码見下一页。运行主页观测显示效果3、比较两次主页的显示，進行合适修改使页面愈加美观。****************************index.html********************************<html><head><linkhref="css.css"rel="stylesheet"type="text/css"media="all"/></head><body><divid="container"> <divid="header"> <divid="menu"> <ul> <li><ahref="#">首页</a></li> <liclass="menuDiv"></li> <li><ahref="#">博客</a></li> <liclass="menuDiv"></li> <li><ahref="#">设计</a></li> <liclass="menuDiv"></li> <li><ahref="#">相册</a></li> <liclass="menuDiv"></li> <li><ahref="#">论坛</a></li> <liclass="menuDiv"></li> <li><ahref="#">有关</a></li> </ul> </div> <divid="banner"> </div> </div><divid=“pagebody”><divid=“sidebar”></div><divid=“mainbody”></div><div><divid=“footer”></div></div></body></html>/*基本信息*/*****************************css.css************************************body{font:12pxTahoma;margin:0px;text-align:center;background:#FFF;}a:link,a:visited{font-size:12px;text-decoration:none;}a:hover{}/*页面层容器*/#container{width:800px;height:600px;margin:10pxauto}/*页面頭部*/#header{background:url(logo.gif)no-repeat}#menu{padding:20px20px00}#menuul{float:right;list-style:none;margin:0px;}#menuulli{float:left;display:block;line-height:30px;margin:010px}#menuullia:link,#menuullia:visited{font-weight:bold;color:#666}#menuullia:hover{}.menuDiv{width:1px;height:28px;background:#999}#banner{background:url(banner.jpg)030pxno-repeat;width:730px;margin:auto;height:240px;border-bottom:5pxsolid#EFEFEF;clear:both}/*页面主体*/#pagebody{width:800px;margin:0auto;height:400px;background:#CCFF00}/*页面底部*/#footer{width:800px;margin:0auto;height:50px;background:#00FFFF}***********************************************************************四、试验规定1、认真预习，写出操作环节。2、认真写试验總結，写出制作過程中的問題。五、试验總結试验過程問題记录试验拾四在网页中添加JavaScript脚本一、试验目的掌握添加JavaScript脚本的措施掌握常用的Dreamweaver内置行為的使用二、试验环境计算机三、试验内容1、使用<Script>標识插入脚本<HTML><HEAD><TITLE>JavaScript示例</TITLE><SCRIPTlanguage="JavaScript"type="text/javascript"><!--functionshowmsg(){alert("欢迎来到JavaScript世界")}//--></SCRIPT></HEAD><BODY><FORM><INPUTtype="Button"onClick="showmsg();"value="點點我试试"></FORM></BODY></HTML>直接添加脚本<HTML><HEAD><TITLE>JavaScript示例</TITLE></HEAD><BODY><FORM><INPUTtype="Button"onClick="Javascript:alert('欢迎来到JavaScript世界');"value="點點我试试"></FORM></BODY></HTML>链接外部脚本文献网页源文献<HTML><HEAD><TITLE>JavaScript示例</TITLE><SCRIPTtype="text/javascript"src="test.js"></SCRIPT></HEAD><BODY><FORM><INPUTtype="Button"onClick="showmsg();"value="點點我试试"></FORM></BODY></HTML>与网页源文献同目录下的test.js文献functionshowmsg(){alert("欢迎来到JavaScript世界")}四、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。五、试验總結1、JavaScrp脚本語言中注释符号的写法是？2、JavaScript的基本特點是什么？试验拾五JavaScript基础练习（一）一、试验目的1、掌握JavaScript脚本語言的基本語法2、掌握JavaScript脚本語言的变量、运算符二、试验环境计算机三、试验内容1、设计一种计算两数之和的程序。<html><head><scriptlanguage="javascript">n=prompt("输入第一种数：",0);x=parseFloat(n);//将输入的内容转换為数值n=prompt("输入第二個数：",0);y=parseFloat(n);//JavaScript是大小写敏感的，注意区别字母的大小写z=x+y;alert("两数之和："+z);</script></head><body></body></html>2、设计一种求平方根的程序。<html><head><scriptlanguage="javascript">n=prompt("請输入一种正数:",1);y=Math.sqrt(n);if(y>0)alert(n+"的平方根是："+y);elsealert("输入無效！");</script></head><body></body></html>3、書本P154-160图7.3—7.6四、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。五、试验總結1、Javacript脚本語言中运算符的优先级次序是什么？2、试验過程問題记录。试验拾六JavaScript基础练习（二）一、试验目的1、掌握JavaScript脚本語言的基本語法2、掌握JavaScript脚本語言的語句、函数二、试验环境计算机三、试验内容1、生成10個随机数实例<html><head><scriptlanguage="JavaScript">vars="10個随机数:";for(i=1;i<=10;i++){varn=Math.round(Math.random()*100)/100;s=s+n+",";}alert(s);</script></head><body></body></html>2、猜数字游戏<html><head><scriptlanguage="javascript">game();functiongame(){varx=Math.floor(Math.random()*100+1);vary=1;for(i=1;i<=5;i++){y=prompt("猜一种1-100间的整数。第"+i+"次:",y);if(y==x)break;elsealert("猜"+((y>x)?"大":"小")+"了");}alert("你"+((y==x)?"赢":"输")+"了，這個数是："+x);}</script></head><body></body></html>3、构造一种二维数组并将其元素在表格中显示。<HTML><HEAD><TITLE>创立数组</TITLE><HEAD><BODY><SCRIPTlanguage="JavaScript"type="text/javascript"><!--varorder=newArray();order[0]=newArray("背心","30","￥80");order[1]=newArray("鞋","50","￥200");order[2]=newArray("袜子","100","￥10");document.write("<tableborderalign=center>")document.write("<th>产品</th><th>数目</th><th>單价</th>")for(i=0;i<order.length;i++)//length属性表达数组的長度，也就是数组元素的個数{document.write("<tr>")for(j=0;j<order[0].length;j++){document.write("<td>"+order[i][j]+"</td>")}document.write("</tr>")}document.write("</table>")//--></SCRIPT></BODY></HTML>四、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。五、试验總結试验過程問題记录试验拾七JavaScript内置對象应用实例一、试验目的1、掌握對象的属性和措施2、掌握對象运算符与語句3、掌握JavaScript内置對象的应用二、试验环境计算机三、试验内容1、阅讀下面的程序，写出输出成果。<html><head><scriptlanguage="javascript">document.writeln(Math.sin((Math.PI)/7));document.write(Math.max(Math.pow(1.2,6),Math.sqrt(8.9)));</script></head><body></body></HTML>2、编写JavaScript脚本，在网页中显示年、月、曰、星期。<html><head><title>wodewangye</title></head><body><SCRIPTlanguage=JavaScript>vartoday=newDate();varday;vardate;if(today.getDay()==0)day="星期曰"if(today.getDay()==1)day="星期一"if(today.getDay()==2)day="星期二"if(today.getDay()==3)day="星期三"if(today.getDay()==4)day="星期四"if(today.getDay()==5)day="星期五"if(today.getDay()==6)day="星期六"date=today.getYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"曰";document.write(date);document.write(day);</SCRIPT></body></html>3、图片互换<html><head><scriptlanguage="javascript">functionreplace(){document.images[0].src="2.jpg";}functionrestor(){document.images[0].src="1.jpg";}</script></head><body><imgsrc="1.jpg"onMouseOver="replace();"onMouseOut="restor();">//或是onMouseDownonMouseUp</body></html>四、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。五、试验總結1、内置對象的分类以及使用措施？2、怎样获取目前系统時间？3、试验過程問題记录试验拾八JavaScript浏览器對象应用（一）一、试验目的1、掌握JavaScript事件处理2、掌握常用的JavaScript浏览器對象二、试验环境计算机三、试验内容1、制作一种自動弹出公告窗口的网页，這個公告窗口裏有一种关闭按钮，當單击這個按钮時窗口被关闭。2、编写一种動态显示動态显示時、分、秒的例子。<html><head><scriptlanguage="javascript">tt();functiontt(){d=newDate();h=d.getHours();m=d.getMinutes();s=d.getSeconds();t=h+":"+m+":"+s;document.form1.time.value=t;setTimeout("tt()",1000);document.form1.time.write(t);}</script></head><body><formname="form1"><inputtype="text"name="time"size="8"style="font-size:30px"></form></body></html>3、参照上題，用JavaScript实現不一样的時间显示不一样的問候語，這些問候語包括“早上好！”、“中午了，還在忙吗？”、“下午好”、“這样晚了，還在加班，真是太辛劳了！”等。4、编写一种导航跳转菜單实現<html><head><title>导航列表达例</title><scriptlanguage="Javascript">functionjump(){location=document.form1.navbar.options[document.form1.navbar.selectedIndex].value;}</script></head><bodybgcolor=ivory><divalign=center><h3>請选择要跳转的网站</h3><formname="form1"><selectname="navbar"onchange="jump();"><optionvalue="#"selected><center>导航栏</center></option><optionvalue=""><center>搜狐</center></option><optionvalue=""><center>网易</center></option><optionvalue=""><center>新浪</center></option><optionvalue=""><center>微软<center></option></select></form></div></body></html>四、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。五、试验總結1、什么是JavaScript浏览器對象？JavaScript浏览器對象有哪些？2、對象引用措施是？3、试验過程問題记录试验拾九JavaScript浏览器對象应用（二）一、试验目的1、掌握JavaScript事件处理2、掌握常用的JavaScript浏览器對象二、试验环境计算机三、试验内容1、状态栏文字特效<html><head><SCRIPTLanguage="JavaScript">varmsg="您好，謝謝你来到本网页!";varseq=0;functionScroll(){window.status=msg.substring(msg.length,seq);seq++;if(seq>=msg.length){seq=0};window.setTimeout("Scroll();",300);}</SCRIPT></head><bodyonLoad="Scroll()"></body></html>2、信息滚動实例<html><head></head><body><tableborder="1"bordercolor="red"bgcolor="#6699ff"cellpadding="5"cellspacing="0"><tr><td><fontface="隶書"color="#FF00FF"><scriptlanguage=javascript>document.write("<marqueescrollamount='1'scrolldelay='30'direction='UP'width='200'id='helpor_net'height='150'onmouseover='helpor_net.stop()'onmouseout='helpor_net.start()'Author:redriver;Formore,visit:.net>")document.write("<h2><palign='center'><fontcolor='#ffff00'face='隶書'>偶然</font></h2>")document.write("<palign='right'><ahref='#'target='_blank'><fontcolor='red'>徐志摩</font></a>")document.write("<p><fontcolor='#ffff00'>")document.write("<br>我是天空裏的一片雲，")document.write("<br>偶尔投影在你的波心——")document.write("<br>你不必讶异,")document.write("<br>更不必欢喜——")document.write("<br>在转瞬间消灭了踪影。")document.write("<br>")document.write("<br>你我相逢在黑暗的海上，")document.write("<br>你有你的，我有我的，方向；")document.write("<br>你记得也好，")document.write("<br>最佳你忘掉，")document.write("<br>在這交會時互放的光亮！")document.write("</font>")document.write("</marquee>")</script></font></td></tr></table></body></html>3、上网浏览网页，察看源代码，分析网页中的JavaScript源代码。4、上网查找提供JavaScript特效下载的站點，下载某些JavaScript特效，并将他們插入到网页中。四、试验规定1、认真预习，写出操作环节。2、遵守机房纪录，填好设备档案。五、试验總結1、Window對象常用的属性和措施是？2、特效网址推荐以及试验過程問題记录试验二拾、二拾一DHTML应用一、试验目的掌握DHTML的含义掌握動态定位的措施3、掌握動态显示的措施二、试验环境计算机三、试验内容1、编写验证表單的脚本1）顾客名必须输入2）密码至少2個字符，两次输入的密码一致3）電子邮件地址输入對的<html><head><title>UntitledDocument</title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"></head><bodybgcolor="#FFFFFF"text="#000000"onLoad="init(document.Verify_form.UserName)"><scriptlanguage="Javascript">//提交表單的函数functionreg() { window.open("http://localhost/test/register.htm","new","toolbar=yes,menubar=yes"); }functioninit(element)//初始化，将光標定位到指定的表單；{ element.focus(); }//提交前對所提交的数据進行检查，只有所有检查都通過，才将数据進行提交；functionCheck(){ flag=false; if(CheckUserName()==false) {return!flag;} if(CheckPassword()==false) {return!flag;} if(CheckEmail()==false) {return!flag;} //reg(); return!flag; } //检查顾客名与否為空； functionCheckUserName() { if(document.Verify_form.UserName.value.length==0) { error(document.Verify_for