《企业网站开发》实验指导书计算机科学与技术学院2013-3目录实验一HTML语言标志 (1)【实验目的】 (1)【实验环境】 (1)【实验重点及难点】 (1)【实验内容】 (1)实验二使用Dreamweaver创建本地站点 (2)实验三网页编辑与超链接 (6)【实验目的】 (6)【实验环境】 (6)【实验重点及难点】 (6)【实验内容】 (6)实验四网页图像的应用 (7)实验五表格和布局表格 (10)【实验目的】 (10)【实验环境】 (10)【实验重点及难点】 (10)【实验内容】 (10)实验六CSS样式的应用 (11)【实验目的】 (11)【实验环境】 (11)【实验重点及难点】 (11)【实验内容】 (11)实验七层 (12)实验八Dreamweaver的框架和行为 (13)【实验目的】 (13)【实验环境】 (13)【实验重点及难点】 (13)【实验内容】 (13)实验九Dreamweaver的模版 (14)【实验目的】 (14)【实验环境】 (14)【实验重点及难点】 (14)【实验内容】 (14)实验十Dreamweaver表单 (15)【实验目的】 (15)【实验环境】 (15)【实验重点及难点】 (15)【实验内容】 (15)实验一HTML语言标志【实验目的】1．掌握<head></head>的<title>标记，和<meta>标记；2．掌握使用<body>标记设置网页背景颜色和文本颜色。
学习使用分段标记<p></p>；3．掌握使用<font>标记设置文字的属性；4．掌握在网页中插入背景图片；5．掌握在网页中插入水平线，并设置水平线的属性；6．掌握在网页中插入背景音乐。
【实验环境】Windows xp【实验重点及难点】掌握字体、水平线等常用标记。
【实验内容】1、制作一个简单的网页sy1-1.htm，用记事本编辑，内容为个人简介信息。
要求：●搜索关键字为“个人”“主页”“简介”，标题为我的个人简介。
●背景为#33ccff,文本颜色为黑色，文本需分段表示。
2、过记事本编辑网页sy1-2.htm，内容为李白的诗“静夜思”。
要求：每行诗为一个段落，四行文字颜色不同，字体不同。
3、通过记事本编辑网页sy1-3.htm，实现如下页面。
图片自选，插入背景音乐“故乡的云.mp3”。
实验二使用Dreamweaver创建本地站点一、实验目的1、掌握认识并熟悉Dreamweaver的工作界面。
2、能够自定义工作环境。
3、进行一个简单的网页设计。
二、实验内容建立一个以自己名字命名的站点，该站点包含三个文件夹，image，css，mdb，四个网页，分别为index.html，jianjie.html，zuopin.html，xuexi.html，设置主页index.html的标题为“本站主页”。
其中index.html页面效果图如2-1-1所示。
图2-1-1三、知识点分解本实验主要涉及到如下知识点：1、在Dreamweaver中建立站点。
2、在Dreamweaver站点文件列表下新建文件和文件夹。
3、在网页中插入背景图片。
四、实验步骤1、创建本地站点步骤：(1)打开DREAMWEA VER,选择菜单下[站点]/[管理站点]|/[新建]/|[站点]命令.弹出如图2-1-2所示对话框。
(2)在弹出“站点定义”对话框的“高级”标签中输入如下信息。
图2-1-2(3)“站点名称”——输入站点名称如“myweb”。
(4)“本地根文件夹”——选择本地文件夹如“D\myweb”(5)“自动刷新本地文件列表”——选中是否每次拷贝文件到本地站点时都自动更新本地文件夹列表，选中该选项。
(6)“默认图像文件夹”——选择图像所放置的文件夹如“‘D\myweb\ image”注意：图像文件夹一定要在站点文件夹下，且一般命名为image或images。
(7)“HTTP地址”——输入实用的完整网站的URL，以便Dreamweaver能检验使用绝对URL网站链接。
(8)“缓存”——选择是否创建一个缓存以提高链接和网站维护任务的速度。
选中该选项。
(9)设置完毕，点击“确认”按钮。
(10)在Dreamweaver的工作界面右侧“浮动面板组”中的“文件”面板中的“文件”标签下就能看到刚才新建的站点myweb，如图2-1-3所示。
图2-1-3如果要对所建立的站点进行修改的话，可以选择菜单下[站点]|[管理站点]| [编辑]命令。
2、在站点文件列表下新建文件和文件夹步骤：(1)在站点文件列表中右键单击“站点—myweb(D:\myweb)”，在弹出的菜单中选择“新建文件夹”，文件列表中就会出现名为“新建文件夹”的文件夹，将该文件夹命名为image，同样操作建立css文件夹和mdb文件夹。
(2) 在站点文件列表下新建文件有2种方法：a) 选择[文件]|[新建]，在弹出的“新建文档”对话框中，选择“HTML”，就新建了一个HTML网页，然后再选择[文件]|[保存]或者是按【Ctrl+S】键，将网页名称改为index.html，同样操作建立jianjie.html, zuopin.html，xuexi.html。
b)在站点文件列表中右键单击“站点—myweb(D:\myweb)”，在弹出的菜单中选择“新建文件”，文件列表中就会出现名为“新建文件”的网页文件，将该文件命名为index.html，同样操作建立jianjie.html, zuopin.html，xuexi.html。
3、在“文件列表”中选中index.html文件，单击右键，在弹出的菜单中选择“设为首页”，回到页面上，在“文档工具栏”中将“标题”更改为“本站主页”。
注意：要想在站点文件列表下自动出现新建的文件和文件夹，前提条件必需在建立站点时选中“自动刷新本地文件列表”，否则的话必需单击“刷新”按钮才能出现新建的文件和文件夹，效果图如图2-1-4所示。
图2-1-44、设计index.html网页步骤：(1)在站点文件列表中双击index.html，打开该网页。
(2)将光标定位到“文档工具栏”中的“标题”，将标题中的内容改为“本站主页”，如图2-1-5所示。
图2-1-5(3)单击“属性面板”中的“页面属性”按钮，弹出如图2-1-6所示的“页面属性”对话框，单击“背景图像”后面的“浏览”按钮，添加背景图像即可。
(4)在工作区的“编辑窗口”中输入“欢迎光临我的小站”图2-1-6(5)浏览测试。
浏览测试的方法有3种，第1种方法是直接按【F12】键，这是最快捷的方法，建议大家以后尽量采用这种方法。
第2种方法是单击如上图所示的“文档工具栏”中的按钮，在弹出的菜单中选择“预览在iexplore”命令后即可在IE浏览器中浏览当前网页。
第3种方法是选择[文件]/[在浏览器中预览]/[iexplore]菜单命令即可在IE浏览器中浏览测试当前网页。
思考题：在设置网页背景图像时，如果图像太小，铺不满整个网页，怎么办？实验三网页编辑与超链接【实验目的】1．掌握给文字添加绝对超级链接，例如：<a href=></a>和相对超级链接，例如：<a href=/images/1.jpg></a>；2．掌握使用<pre></pre>标记；3．掌握使用<marquee></marquee>标记设置滚动字幕；4．掌握使用列表标记。
【实验环境】Windows xp【实验重点及难点】掌握使用超级链接、列表、滚动字幕等HTML常用标记。
【实验内容】1、制作一个网页sy2-1.htm，用记事本编辑。
要求：●网页名称为：超级链接练习●以一张图片作为背景，并且设置图片固定。
合理设置文字的颜色，和超级链接的颜色。
●插入超链接至许昌学院主页。
2、新建网页sy2-2.htm，实现如下页面。
要求：●网页名称为“滚动字幕”。
●滚动字幕范围为高200像素，宽180像素，向上滚动，鼠标移动到文字上方，停止滚动，鼠标移开，文字继续滚动。
设置合适的滚动速度。
●文字居中对齐在滚动区域。
实验四网页图像的应用一、实验目的1、通过本例要求掌握常见的图像格式及图像的插入方法。
2、能够修改图像属性，利用外部图像处理软件编辑图像。
3、掌握图像导航条的制作。
4、掌握将Word中的文字复制到Dreamweaver中的方法。
5、掌握在页面中创建轮换图像。
二、实验内容1、meiwen.html效果图如图2-4-1所示，当鼠标移到每张图像上时会显示另外一张图像，单击“本站首页”图像时会打开index.html，文章内容在“执着.doc”中。
图2-4-1三、知识点分解1、由图2-4-1可以看出，该页面最上面导航条，导航条下面是水平线，正文的格式与“执着.doc”格式一致。
在做meiwen.html之前，要利用图像处理软件做出图所示的导航按钮，注意要做10个按钮图像，并且保存为网页中能使用的图像格式。
四、实验步骤导航条由图像或图像组组成，这些图像的显示内容随操作不同而不同。
导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。
导航条可以进行复制，可以对导航条附加行为以应用于不同的网页。
一个网页中只允许有一个导航条。
导航条项目有如下4种状态：一般、滑过、按下、按下时鼠标经过。
在创建导航条时，不必包含所有这4种状态的导航条图像，可以只选用“一般”和“按下”或“滑过”这两种状态。
1、打开meiwen.html，将光标定位到要插入导航条的位置。
2、执行下列操作之一打开“插入导航条”对话框：(1) 单击“插入栏”的“常用”选项卡，并单击“插入导航条”按钮，弹出如图2-4-3所示对话框；(2) 选择[插入]\[图像对象]\[导航条]菜单命令。
图2-4-33、在“插入导航条”对话框中进行具体的设置。
设置的具体方法如下。
a) 在“项目名称”文本框中，输入导航条项目的名称（如sy）。
该名称只能包含字母和数字且不能以数字开头。
b) 在“状态图像”（必需）文本框后，单击按钮选择最初将显示的图像。
c) 在“鼠标经过图像”文本框后，单击按钮选择当一般图像显示时如果鼠标指针滑过项目所显示的图像。
d) 在“替换文本”文本框中，输入项目的描述性名称。
e) 在“按下时，前往的URL”文本框中，单击按钮选择要打开的链接文件（如index.html）然后从右侧的下拉列表中选择打开文件的位置。
f) 选中复选框，可在载入页面时下载图像。
如果未选择此选项，在鼠标指针滑过鼠标经过图像时可能会出现延迟。
4、单击按钮可向导航条添加另一个项目，然后重复上述步骤定义该新项目。
若要减少导航元件，可先在导航元件列表中选择要删除的项，再单击按钮删除即可。