dreamweaver网页设计实验指导书要点.doc

网页设计实验指导书（一）DreamWeaver静态网页制作第一章网站规划- 3 -第二章Dreamweaver静态网页设计实验- 6 -实验一 在Dreamweaver中建立一个站点- 6 -实验二在网页中使用文本- 10 -实验三超级链接的建立- 15 -实验四网页图像的应用- 21 -实验五 网页表格操作- 26 -实验六 利用表格进行网页布局- 28 -实验七 利用层进行网页布局- 33 -实验八 行为和图层的应用- 36 -实验九框架型网页的制作- 45 -实验十一 交互式表单的应用- 56 -实验十二 HTML语言基础应用- 60 -实验十三 网页动态效果辑- 64 -实验十四 CSS样式表的创建及运用- 69 -第一章 网站规划一、网站建设的基本流程网站建设的基本流程是：网站规划，网页设计，网上安家以及网站维护与管理，如图1-1所示。网站维护与管理网上安家网页设计网站规划图1-1规范的网站建设大致需要做如下工作：1、网站规划收集网站前期资料以及所需文档在确定了制作哪方面的网站后，需收集和整理与网站内容相关的文字资料、图像、动画素材等。如想要制作影视网站就需收集大量中外电影的信息以及演员资料；要制作公司网站就需收集公司的介绍、产品信息和企业文化等。收集好资料后还需对资料进行有效地管理，站点就是管理资料、素材的场所。在创建站点之前需对站点进行规划，站点的形式有并列、层次和网状等，用户需根据实际情况选择。 规划站点时应按素材的不同种类分为几个站点，再将收集好的素材分类放置在相应站点中，然后在不同站点中将不同的素材进行细分。站点规划好后即可对其进行创建了。注意：站点的主题与名称应易于记忆，要上传到网上的站点名称必须是英文。2、网页设计(1) 将策划方案打印给小组成员人手一份，开始设计人员进行设计工作。根据策划文档及网站设计规范，主要设计人员进行前期的首页设计。网站是由多个页面链接而成的。在制作网页时需注意以下几面的问题，以便浏览者轻松浏览网站。 a)页面框架的构建 页面框架的构建是指对网页的整体布局，针对网页中的内容应将网页有条理地划分为几部分。b)导航条 导航条应出现在网站的各个页面中，提供各个站点的相关主题，引领浏览者有条理地浏览网站。导航条通常放置在页面的上部或左侧。c)返回首页链接 在分页面中放置返回首页链接，以便浏览者在访问分页面后快速回到首页，以重新选择其他页面进行浏览。d)添加网页元素,网页添加相应的内容，以传递网页信息给浏览者。(2) 根据网站的模式和特点以及网站制作规范定制出最适当的标准样式。(3) 设计人员进行二级页面设计工作。(4) 制作人员开始制作工作。(5) 程序开发阶段。(6) 完成。(7) 网站测试和改进站点测试可根据浏览器种类、客户端要求以及网站大小等要求进行测试，通常是将站点移到一个模拟调试服务器上对其进行测试或编辑。测试站点的过程中应注意以下几方面：a)监测页面的文件大小以及下载速度。b)运行链接检查报告对链接进行测试。由于在网页制作中，各站点的重新设计、重新调整会使某些链接所指向的页面可能已被移动或删除，所以应检查站点是否有断开的链接，若有则自动重新修复断开的链接。c)为了使页面不支持的样式、层、插件等在浏览器中能兼容且功能正常，可进行浏览器兼容性的检查。使用“检查浏览器”行为，可自动将访问者定向到另外的页面，这样就可解决在较早版本的浏览器中无法运行页面的问题。d)网页布局、字体大小、颜色和默认浏览器窗口大小等区别是在目标浏览器检查中无法预见的，需在不同的浏览器和平台上预览页面进行查看。 3、网上安家网上安家即将站点发布到互联网上。发布站点之前需在Internet上申请一个主页空间，以指定网站或主页在Internet上的位置。网页发布通常使用FTP（远程文件传输）软件上传网页到服务器中申请的网址目录下，这样速度较快，也可使用Dreamweaver或FrontPage中的发布站点命令进行上传。4、网站维护与管理(1)网站内容更新与沟通站点上传到服务器后，还需对站点进行更新和维护，以保持站点内容的最新和页面元素的正常。(2)合理运用新技术。(3)推广你的Web地址。二、网站设计技巧 1、网页风格要统一。2、网站导航要清晰。3、网页内容便于浏览。 4、网站Logo要有代表性。5、设计网站的标准色彩。6、页面容量越小越好，别超过75KB。7、能适应不同浏览器及分辨率。8、网页内容要精彩。三、网页的基本组成网页由网页标题、页眉、站标、导航栏、内容版块的页脚组成。 标题（说明网站的形式和类型） 站标即网站标识（logo）（代表了网站的形象） 页眉（放置网站最希望浏览者看的信息） 导航栏（网站的索引） 内容（是网站的精神所在） 页脚（网站设计者的基本信息）四、网页元素网页中包含的元素很多，主要包括文字、图像、表格、表单、动画和视频等。五、网页的分类1、按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类。打开一个网站时看到的第一个页面就是主页，也称为首页；与主页相链接的其他各个页面就称之为子页。2、按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页。静态网页：指用HTML语言编写的网页，其制作方法简单易学，但缺乏灵活性。静态 Web 站点由一组相关的 HTML 页和文件组成，这些页和文件驻留在运行 Web 服务器的计算机上。Web 服务器是响应来自 Web 浏览器的请求以提供 Web 页的软件。当访问者单击 Web 页上的某个链接、在浏览器中选择一个书签、或在浏览器的地址文本框中输入一个 URL 时，便生成一个页请求。 静态 Web 页的最终内容由网页设计人员确定，当接到请求时，内容不发生更改。动态网页：这类网页使用ASP、PHP和CGI等程序生成，具有动态效果，且大多数以数据库为基础，使用语言为HTMLASP 或 HTMLPHP 或 HTMLJSP 等。 当 Web 服务器接收到对静态 Web 页的请求时，服务器将该页直接发送到请求浏览器。但是，当 Web 服务器接收到对动态页的请求时，它将作出不同的反应：它会将该页传递给一个负责完成页面的特殊软件。这个特殊软件叫做应用程序服务器，如ASP 页面就要安装IIS服务器。 应用程序服务器读取页上的代码，根据代码中的指令完成页，然后将代码从页上删除。所得的结果将是一个静态页，应用程序服务器将该页传递回 Web 服务器，然后 Web 服务器将该页发送到请求浏览器。当该页到达时，浏览器得到的全部内容都是纯 HTML。第二章 Dreamweaver静态网页设计实验实验一 在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) 打开DREAMWEAVER,选择菜单下站点/管理站点|/新建/|站点命令.弹出如图2-1-2所示对话框。(2) 在弹出“站点定义”对话框的“高级”标签中输入如下信息。图2-1-2(3) “站点名称”输入站点名称如“myweb”。(4) “本地根文件夹”选择本地文件夹如“Dmyweb”(5) “自动刷新本地文件列表”选中是否每次拷贝文件到本地站点时都自动更新本地文件夹列表，选中该选项。(6) “默认图像文件夹”选择图像所放置的文件夹如“Dmyweb 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、在页面中插入特殊符号，如：“￥和空格符”。2、在页面中插入日期，要求日期格式为“年月日 星期 : （时）（分）”。3、在页面中插入水平线。4、在新的页面中编辑一个项目列表，如图2-2-1所示，要求：字体为“楷体”、大小为“16pt”、颜色为“黄色”，网页背景颜色为绿色。图2-2-1三、实验步骤内容1的实验步骤如下：1、将光标定位到插入特殊字符的位置。2、单击“插入”面板中的“文本”选项卡，如图2-2-2所示。图2-2-23、单击 按钮，展开如图2-2-3所示的“字符”下拉列表。 图2-2-34、单击相应的选项即可在Web页面中添加相应的特殊字符，如图2-2-3所示。 图2-2-35、插入不换行空格，可执行如下操作之一。(1) 在“插入”面板的“文本”选项卡中，单击“字符”按钮，在下拉列表中选择“插入不换行空格”选项。(2) 选择插入/HTML/特殊字符/不换行空格菜单命令。 (3) 按【Ctrl+Shift+空格键】键输入。 (4) 将输入法切换到全角状态再按空格键。内容2的实验步骤如下：1. 选择插入/日期菜单命令，或者选择“插入”面板的“常用”选项中，然后单击“插入日期”按钮，则打开如图2-2-4所示的“插入日期”对话框。图2-2-42. 在弹出的“插入日期”对话框中选择星期格式为“星期四”、日期格式为“1974年3月7日”、时间格式为“22：18”。注意：如果希望网页在保存时系统都会自动更新日期信息，则选中选中复选框。4、 单击“确定”按钮即可插入日期。内容3的实验步骤：1、在“文档”窗口中，将插入点放在要插入水平线的位置。2、执行以下操作之一。(1) 选择插入/HTML/水平线菜单命令； (2) 单击“插入”面板的“HTML”选项卡，再单击“水平线”按钮 ，如图2-2-5所示 。图2-2-5内容4的实验步骤:1、在页面中输入如下文字：在页面中插入特殊符号如：“￥和空格符”。将光标定位到插入特殊字符的位置。单击“插入”栏中的“文本”选项卡，如图所示。在页面中插入日期，设置日期的星期、日期、时间格式和保存时自动更新。选择插入/日期菜单命令，或者选择“插入”面板中的“常用”选项卡，然后单击“插入日期”按钮，则打开 “插入日期”对话框。在弹出的“插入日期”对话框中选择星期格式、日期格式和时间格式。在页面中插入水平线。编辑一个项目列表。2、 选择上面输入的所有内容，进行如下的操作：(1) 选中文字：在页面中插入特殊符号如：“￥和空格符”,单击“文本”属性面板中的“项目列表”按钮,则会出现图2-2-1中所示的圆形符号，重复该操作进行下面的项目列表符号的添加。注意：默认情况下项目列表符号为圆形，如果想要出现的项目列表符号为方形，可以进行如下操作：a) 选择文本/列表/列表属性菜单命令，弹出如图2-2-6所示的“列表属性”对话框。图2-2-6b) 在“列表类型”下拉框中选择“项目列表”，在“样式”下拉框中选择“正方形”。c) 单击“确定”按钮。(2) 选中文字：将光标定位到插入特殊字符的位置。单击“插入”栏中的“文本”选项卡，如图所示。单击“文本”属性面板中的“编号列表”按钮,则会出现图2-2-7中所示的编号，重复该操作进行下面的编号的添加。(3) 上述操作进行完毕后，效果图如图2-2-7所示，把该图与图2-2-1进行比较可以发现编号所在的位置不一样，此时我们只需要把图2-2-7中带编号的文字给缩进一下就可以了，选中带编号的文字，单击“文本缩进”按钮即可。图2-2-7(4)在进行完上面操作后我们发现，第2块列表区域的列表符号还是1，2，此时，先将光标移到“选择”前，单击“属性面板”中的“列表项目”，弹出如图2-2-6所示的对话框，此时将“列表类型”改为“编号列表”，样式改为“小写字母(a,b,c)”,单击“确定”按钮即可。(5) 在“属性”面板中“字体”下拉列表中选择“楷体”，如果该下拉列表中没有“楷体”，则需要添加“楷体”，单击该下拉列表中的“编辑字体列表”，弹出如图2-2-8的所示的“编辑字体列表”对话框。图2-2-8(6) 在“可用字体”列表框中找到“楷体”，单击按钮，则“楷体”同时出现在“字体列表框”和“选择的字体”列表框中，再单击“确定”按钮，则在”字体”下拉列表中就可以选择“楷体”。注意：如果添加了错误的字体，则可以单击按钮删除该字体。(7) 同理在“属性”面板中“大小”下拉列表中选择“16pt”。(8) 单击“文本颜色”按钮，在弹出的拾色器中选择“#FFFF00”或者直接在按钮后面的文本框中输入“yellow”。注意：颜色可以用2种方式表示，一种是用英文，一种是用十六进制代码。(9) 单击“属性”面板中的“页面属性”按钮，在弹出的“页面属性”对话框，单击“背景颜色”后面的按钮，在拾色器中选择“#006600”。3、按【F12】键，预览。思考题：在编辑字体列表时如果同时选择了隶书、楷体、华文彩云，也就是在字体列表中出现“隶书，楷体，华文彩云”，则文本最终会以哪种字体出现？实验三超级链接的建立一、实验目的1、掌握超链接的基本概念和种类2、能熟练设置文本和图片超链接。3、能熟练设置锚点超级链接和电子邮件链接。4、掌握将外部文件导入Dreamweaver中的方法。二、实验内容某站点下有如下4个网页，index.html，meiwen.html，aiqing.html，hunyin.html，1、首页效果图如图2-3-1所示，图像显示在网页的中间，单击“情感美文”会在新的IE窗口打开meiwen.html，单击“爱情故事”会打开aiqing.html，单击“婚姻情感”会打开hunyin.html，单击“与我联系”会发送电子邮件。图2-3-12、hunyin.html效果图如图2-3-2所示，图2-3-2(a)是网页上半部分的效果图，图2-3-2(b)是网页下半部分的效果图，单击“再看一遍”能返回到“中华人民共和国婚姻法”，该法规内容在fa.txt中，单击右下角的“返回首页”能够返回首页。图2-3-2(a) 图2-3-2 (b)三、知识点分解1、由图2-3-1可以看出，在该页面正中间有一张图像，图像显示了边框，当鼠标移到文字“情感美文”时会显示提示文字“情感美文”。2、由图2-3-2可以看出，文字以表格的形式显示在网页上的，此时注意不是在网页中绘制表格，把文字录入进去，而是采用导入fa.txt文件，使他以“表格式数据”显示出来，“再看一遍”采用了锚链接，“返回首页”采用文字链接，两个链接都无下划线。四、实验步骤内容1的实验步骤：1、新建4个HTML文档，将其分别保存为index.html，meiwen.html，aiqing.html，hunyin.html。2、 将光标定位到要插入图像的位置。3、 执行如下方法之一： (1) 选择插入/图像菜单命令，打开“选择图像源”文件对话框； (2) 单击“插入”面板的“常用”选项卡中的 按钮，打开如图2-3-3所示的“选择图像源文件”对话框； (3) 按【Ctrl+Alt+I】键打开“选择图像源文件”对话框。 图2-3-34、 在“选择文件名自”栏中选中单选项，在“查找范围”下拉列表框中指定要插入图像的路径并在文件列表中选择需要的文件名称（*.gif、*.jpeg和*.png）5、 在“相对于”下拉列表框中选择“站点根目录”选项。6、 单击“确定”按钮，弹出如图2-3-4所示的“图像标签辅助功能属性”对话框。图2-3-47、 在“替换文本”下拉框中输入想要说明的文字，这样的话当鼠标移动到图像上就会出现“替换文本”下拉框中输入的文字。8、 单击“确定”按钮。9、 如果所选择的图像文件不在定义的本地站点中，系统会打开如图2-3-5所示的询问对话框，询问是否保存到本地站点目录下。图2-3-510、 在提示对话框中单击按钮，打开“复制文件为”对话框，在该对话框中选择保存路径，并在“文件名”文本框中更改图像的名称。11、 单击“确定”按钮即可将所选的图像插入到网页中指定的位置。12、 选中该图像，打开“属性面板”，将图像的高度改为“700”，边框改为“1”，选择“居中对齐”按钮。13、 选取要添加热区的图片，此时属性面板中出现4个热点工具，单击“矩形热点工具”，在图像上“情感美文”绘制热区后，自动打开“热区”属性面板，如图2-3-6所示。图2-3-614、 在“属性面板”中将“链接”改为meiwen.html，在“替换”中输入“情感美文”，在“目标”下拉列表框中选择“_blank”.15、 用同样的方法绘制其他热点，并设置相应的链接。16、 热点链接完成后按【F12】键预览页面，当鼠标移至热区上时即可看到手形图标下面有一个提示文本。17、 在建立“与我联系”链接时，则要创建电子邮件链接。创建电子邮件链接有两种方法。方法一： (1) 在“文档”窗口的“设计”视图中，选择“与我联系”热区。(2) 执行下列操作之一插入该链接： a) 选择插入电子邮件链接菜单命令； b) 在“插入”栏的“常用”选项中，单击“插入电子邮件链接”按钮 。 (3) 打开“电子邮件链接”对话框，如图2-3-7所示。 图2-3-7(4) 在“文本”文本框中输入显示在Web页面中的链接文本，如“与我联系”。 (5) 在“E-Mail”文本框中输入要链接到的电子邮箱地址，如“”。 (6) 单击“确定”按钮。 方法二：使用“属性面板创建电子邮件链接，具体操作如下。 (1) 在“文档”窗口的“设计”视图中选择要建立电子邮件链接的文本或图像，如“与我联系”。 (2) 在属性面板的“链接”文本框中，输入“mailto:”，然后在它后面输入电子邮件地址，如“”，在IE浏览器中单击该链接的显示效果。 18、按【F12】键，预览。注意：此时电子邮件的发送是采用OutExpress或者是OutLook发送的。所以单击“与我联系”时，会自动创建OutExpress连接向导。内容2的实验步骤:1、 打开“hunyin.html”页面，选择文件导入表格式数据，弹出如图2-3-8所示的“导入表格式数据”对话框。图2-3-82、 单击“数据文件”后面的按钮，选择“fa.txt”文件，定界符选择“Tab”，单击“确定”按钮。在Dreamweaver 8中还可以建立命名锚记的链接，也就是锚链接。使用命名锚记的链接可以跳转至文档内的特定位置。建立锚链接分为创建命名锚记和创建到该命名锚记的链接两部分。3、 创建命名锚记：将插入点放在需要命名锚记的地方，如本例中“中华人民共和国婚姻法”。4、 执行下列操作之一。 a) 选择插入命名锚记菜单命令；b) 在“插入”栏的“常用”选项中，单击“命名锚记”按钮 。5、 在打开的“命名锚记”对话框的“锚记名称”文本框中，输入锚记名称，如top，并单击“确定”按钮，锚记标记出现在插入点处。 6、 创建到该命名锚记的链接：选择要创建命名锚记的文本或图像，如本例中的“再看一遍”。7、 在属性面板的“链接”文本框中，输入一个数字符号“#”和锚记名称，如“#top” 。注意：若要链接到当前文档中名为“top”的锚记，则输入“#top”。 若要链接到同一文件夹内其他文档中的名为“top”的锚记，则输入“index.html#top”形式的锚记引用。 8、选中“返回首页”，打开“属性面板”，将“大小”改为“16px”，对齐方式改为“右对齐”。 9、单击“链接”文本框后的 按钮，在打开的“选择新文件”对话框中选择要链接的文件，这里选择“index.html”（即首页），同时在“相对于”下拉列表框中选择相应的“站点根目录”选项。10、单击按钮，在弹出的“页面属性对话框”中，“分类”选择“链接”，将“下划线样式”改为“始终无下划线”，单击“确定”按钮。11、按【F12】键，在IE浏览器中单击“再看一遍”链接，则返回到“中华人民共和国婚姻法”（命名锚记处），单击“返回首页”链接，则打开index.html。思考题：大家经常在网页上会看到文字“加入收藏”，请问如何实现单击“加入收藏”可以将该网页加入到浏览器的收藏夹中？实验四网页图像的应用一、实验目的1、通过本例要求掌握常见的图像格式及图像的插入方法。2、能够修改图像属性，利用外部图像处理软件编辑图像。3、掌握图像导航条的制作。4、掌握将Word中的文字复制到Dreamweaver中的方法。5、掌握在页面中创建轮换图像。二、实验内容某站点下有如下4个网页，index.html，meiwen.html，aiqing.html，hunyin.html，1、meiwen.html效果图如图2-4-1所示，当鼠标移到每张图像上时会显示另外一张图像，单击“本站首页”图像时会打开index.html，文章内容在“执着.doc”中。图2-4-12、aiqing.html效果图如图2-4-2所示，当鼠标移到图像上时会显示tiane1.jpg图像，同时显示文字“在你身边，我享受被保护的感觉”，单击该图像返回首页，文章内容在“爱情人生.doc”中。图2-4-2三、知识点分解1、由图2-4-1可以看出，该页面最上面导航条，导航条下面是水平线，正文的格式与“执着.doc”格式一致。在做meiwen.html之前，要利用图像处理软件做出图所示的导航按钮，注意要做10个按钮图像，并且保存为网页中能使用的图像格式。2、由图2-4-2可以看出，该页面首先导入了word文档的内容，然后插入了轮换图像，设置图像与文字的环绕方式。四、实验步骤内容1的实验步骤：导航条由图像或图像组组成，这些图像的显示内容随操作不同而不同。导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。导航条可以进行复制，可以对导航条附加行为以应用于不同的网页。一个网页中只允许有一个导航条。导航条项目有如下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、单击按钮可向导航条添加另一个项目，然后重复上述步骤定义该新项目。若要减少导航元件，可先在导航元件列表中选择要删除的项，再单击按钮删除即可。单击按钮或按钮，可以改变导航条元件的出现顺序。本例中导航条项目顺序为“sy”、“jdwz”、“grwz”，“rszl”。5、完成导航条项目的添加及定义后，单击按钮，完成的导航条添加。6、选中导航条，单击“属性面板”中的“居中”按钮。7、将光标定位到导航条后面，敲回车，然后单击“插入”面板的“HTML”选项卡，再单击“水平线”按钮 ，插入水平线。8、打开“爱情人生.doc”文件，选择“Ctrl+A”,”Ctrl+C”。9、将光标定位到水平线后面，敲回车，选择编辑带格式粘贴菜单命令，即将word文档内容带格式一起粘贴到网页中。10、按【F12】键，预览。内容2的实验步骤：轮换图像即鼠标经过图像，是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。鼠标经过图像由两个图像组成，主图像（首次载入页时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。鼠标经过图像中的两个图像其大小应相等，如果两个图像大小不同，Dreamweaver将自动调整第二个图像的大小以匹配第一个图像的大小。1、 打开aiqing.html，选择文件导入Word文档, 在打开的“打开”对话框中，选择要添加的文件,如本例中的“爱情人生.doc”，然后单击按钮，Word文档的内容将出现在页面中，如图2-4-4所示。图2-4-42、 选中“爱情人生”，打开“属性面板”，将“字号”改为“36px”，“颜色”为“红色”。3、 将光标定位到“爱情人生”后面，敲回车，选中后面的文字，单击“属性面板”中的“左对齐”按钮。4、 将插入点放置在要显示鼠标经过图像的位置5、 使用以下方法之一插入鼠标经过图像：a) 在“插入栏”中单击“常用”选项卡，然后单击“图像鼠标经过图像”按钮，如图2-4-5所示；b) 在“插入栏”中单击“常用”选项卡，然后将 按钮拖到“文档”窗口中的所需位置；c) 选择插入图像对象鼠标经过图像菜单命令。6、 执行以上操作后都将打开“插入鼠标经过图像”对话框，在该对话框中完成各项参数的设置操作，如图2-4-6所示图2-4-5 图2-4-6a) 在“图像名称”文本框中输入图像的名称。 b) 在“原始图像”文本框后单击按钮并选择载入页面时显示的图像，如本例中tiane.jpg，或直接在文本框中输入图像文件的路径。c) 在“鼠标经过图像”文本框后单击按钮并选择鼠标指针滑过原始图像时显示的图像，如本例中tiane1.jpg,或在文本框中输入图像文件的路径。 d) 如果希望图像预先载入浏览器的缓存中，以便将鼠标指针滑过图像时不发生延迟，可以选中复选框。 e) 在“替换文本”（可选）文本框中输入描述该图像的文本, 如本例中“在你身边，我享受被保护的感觉”。 f) 在“按下时，前往的URL”文本框中单击按钮并选择要链接的文件，如本例中选择“index.html”，或者直接输入文件的路径。7、设置完成后，单击按钮关闭“插入鼠标经过图像”对话框。8、选中该图像，打开“属性面板”，将“对齐”下拉列表框中的值改为“右对齐”。注意：“图像”属性面板的“对齐”下拉列表中设置图像与周围文字的对齐方式，而是设置图像在网页中的位置，左边，中间还是右边。9、按【F12】键，预览。思考题：在做网页时，经常需要用图像处理软件来制作图像，如本实验中的导航条图像，但是在将该图像插入到Dreamweaver中会经常遇到图像不能紧密的结合在一起，如下图所示，怎么才能将他改成图2-4-1所示的导航条的效果呢？实验五 网页表格操作一、实验目的1、掌握表格的创建、结构调整与美化。2、熟悉表格与单元格的主要属性及其设置。3、掌握在表格和单元格中插入文字或图片。4、掌握格式化表格和排序表格。二、实验内容：1、制作出如图2.5.1所示的表格。图2-5-1三、知识点分解本次实验主要涉及到表格的基本操作，注意表格最终的效果需要按总分项进行降序排序。四、实验步骤1、在Dreamweaver中新建一个文档。2、将插入点置于需要插入表格的位置。如果文档是空白的，则只能将插入点放置在文档的开头。执行下列操作之一打开“表格”对话框，如图2-5-2所示。(1) 选择插入表格菜单命令。(2) 在“插入栏”的“常用”选项卡中单击“表格”按钮。 (3) 按【Ctrl+Alt+T】键。 图2-5-2 “表格”对话框3、在表格大小中输入如下数据行：4列：5，表格宽度：500像素，边框粗细：1像素，单元格边距: 1像素,单元格间距：1像素。4、页面选择第三个顶部。5、辅助功能中输入如下数据标题：学生成绩表，对齐标题：居中。6、在表格的第一行输入如下数据：学号、语文、数学、英语、总分。7、在表格的第二行输入如下数据：1001、87、85、65、237。8、在表格的第三行输入如下数据：1002、81、67、57、205。9、在表格的第四行输入如下数据：1003、82、65、78、225。10、选择命令格式化表格菜单命令，在弹出的”格式化表格”对话框中选择“AltRows：Green&Yellow”，然后将行颜色改为第一种：#FFCC00，第二种：#CC0033，其余的内容不变，单击“确定”按钮。11、选中表格的每一列，将其宽度设为100像素，高100像素，水平：居中，垂直：居中。12、将光标定位到第一行的第5个单元格，打开“属性面板”，将背景设为“b1.jpg”13、选择整个表格，打开“属性面板”，将边框颜色改为“红色”14、选择整个表格，然后选择命令排序表格菜单命令，弹出“排序表格”对话框，进行如下设置：排序按“列5”，顺序：按“数字排序”，“降序”，单击“确定”按钮。15、按【Ctrl+S】保存该网页。16、按【F12】键预览。思考题：怎样使得表格在不同尺寸浏览器、不同分辨率下都能达到铺满整个浏览器窗口的效果呢？实验六 利用表格进行网页布局一、实验目的1、了解网页设计常用的几种版式；2、掌握绘制及编辑布局表格和布局单元格；3、掌握利用布局表格的嵌套来设计较复杂的版面；4、掌握在布局表格中添加具体内容 ；5、掌握设置布局表格和单元格属性 。二、实验内容利用布局表格制作如图2-6-1所示的网页。图2-6-1三、知识点分解由上图可知，该网页的结构属于拐角型，先画出该网页的版式结构，如图2-6-2所示。LOGOBANNER导航菜单导航网页内容网页内容版权信息图2-6-2由图2-6-2我们可以知道在进行该网页布局时，先要布最外面的表格，然后布最上端的表格，用来放置LOGO和BANNER，然后再布一个单元格放置导航菜单，接着下面布三个并排的表格，分别放置左边的导航，中间的网页内容，右边的网页内容，最下面再布一个单元格，放置版权信息。四、实验步骤1、 新建一个文档，打开“属性面板”，单击按钮，在弹出的页面属性对话框中将“背景图像”设为“bg-greenline.jpg”。2、 将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，如图2-6-3所示。图2-6-33、单击布局工具栏中的按钮，进入布局模式。4、首次执行以上操作之一后，会打开“从布局模式开始”对话框，在该对话框中给出在“布局模式”下创建表格的方法的提示。单击 按钮即可切换到布局模式。切换到“布局”模式后，在“文档”窗口的顶部会出现标有“布局模式”的蓝色长条。5、在“插入”栏的“布局”选项卡中单击“绘制布局表格”按钮 。 6、将鼠标光标放置在页面上，此时鼠标光标变为加号（+）。7、将鼠标移到要创建表格的左上角位置并按住鼠标不放拖动到要创建表格的右下角后释放鼠标。8、选中该表格，打开属性面板，将表格的宽度设为“783px”，高度设为“845px”。9、在“插入”栏的“布局”选项卡中单击“绘制布局表格”按钮 。将鼠标光标放置在刚才绘制的表格的左上角，拖动鼠标，绘制一个嵌套表格，规格为：宽度“783px”，高度“101px”。10、选中该表格，切换到“标准”模式，将背景图像改为“log1-text.jpg”。11、再切换到“布局”模式，在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮。选中该单元格，打开属性面板，将单元格的宽度设为“111px”，高度设为“101px”，水平对齐方式设为“左对齐”，垂直对齐方式设为“顶端”。12、将图像“niux-home.gif”插入到该单元格，打开属性面板将其宽设为“35”，高设为“30”，对齐设为“绝对居中”，在紧接着该图像的旁边写上文字“加入收藏”，同时将该文字设为：字体“宋体”，大小“12px”。13、将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“换行符”按钮，光标自动定位到下一行。14、将“插入”栏中的“文本”选项卡改为“布局”选项卡，进入“布局”模式，重复步骤11、12两次。15、在“插入”栏的“布局”选项卡中单击“绘制布局单元格”按钮。选中该单元格，打开属性面板，将单元格的宽设为“783px”，高设为“29px”，水平对齐设为“居中对齐”，垂直设为“居中”，背景颜色设为“#FF9900”。16、将光标定位到该单元格，输入文字“首页”，然后将“插入”栏中的“布局”选项卡改为“文本”选项卡，单击“不换行空格”按钮两次，出现了两个空格，紧接着输入“|”（该符号用键盘上的“shift+”输入），再单击“不换行空格”按钮两次，紧接着输入“国内旅游”，后面文字按相同方法输入，选中导航栏的所有文字，将其设为：字体“宋体”，大小“14px”，颜色“#000099”。17、紧接导航栏的布局单元格，在它下方绘制一个宽为“181px”，高为“665px”，颜色为“#dde56c”的布局表格，用来放左边导航内容。18、在该布局表格内绘制一个宽“181px”，高“73px”的布局单元格，然后将“ygdd.jpg”图像插入到该单元格，同时设该图像的宽为“181px”，高为“73px”。19、紧接上面的布局单元格，在它下方绘制一个宽“181px”，高“60px”，水平对齐为“居中对齐”，垂直为“居中”的布局单元格，输入文字“人文地理”，同时将该文字设为：字体“楷体”，大小“18px”，颜色“#CC0033”。20、紧接上面的布局单元格，在它下方绘制一个宽“181px”，高“98px”，的布局表格。21、在上面的布局表格内绘制一个宽“26px”，高“96px”，的布局单元格。22、在上面的布局单元格右边绘制一个宽“153px”，高“24px”，垂直“居中”的布局单元格，输入文字“自然环境”(“”的输入：在“智能abc”输入法下按键盘符号v+数字1)，将其设为：字体“宋体”，大小“14px”。23、在上面的布局单元格下面绘制一个宽“153px”，高“24px”，垂直“居中”的布局单元格，输入文字“气候变化”，将其设为：字体“宋体”，大小“14px”。24、重复步骤22两次，同时将输入的文字分别改为“人口、语言”，“宗教、信仰”。25、紧接上面的布局表格，在它下方绘制一个宽“181px”，高“60px”，水平对齐为“居中对齐”，垂直为“居中”的布局单元格，输入文字“民族风情”，同时将该文字设为：字体“楷体”，大小“18px”，颜色“#CC0033”。26、重复步骤20、21、22、23，将输入的文字分别改为“民间风俗”，“服饰与音乐”，“民族节日”，“生活习惯”。27、重复步骤25，将输入的文字改为“旅游指南”。28、重复步骤19、20、21、22、23，将输入的文字分别改为“自驾车旅游须知”，“潜水的医学知识”，“散客旅游指南”，“自助游常识”。29、左边的导航做好了，将光标定位到中间的网页内容区，绘制一个宽“418px”，高“665px”，颜色为“#FFFFFF”的布局表格。30、在该布局表格内绘制一个宽“418px”，高“239px” 的布局表格。31、在该布局表格内绘制一个宽“126px”，高“239px”，垂直为“居中”的布局单元格，然后将“love.jpg”图像插入到该单元格，同时设该图像的宽为“126px”。32、在上面的布局单元格右边绘制一个宽“278px”，高“239px”的布局表格。33、在上面的布局表格内绘制一个宽“278px”，高“42px”，水平对齐“居中对齐”，垂直“居中”的布局单元格，将“plane.jpg” 图像插入到该单元格。34、返回到 “标准”模式，选择插入/表格菜单命令，插入一个5行4列，宽“278px”，高“194px”，边框“1”的表格，将第1列宽设为“54px”，第2列宽设为“110px”，第3列宽设为“52px”，第4列宽设为“50px”，每行高都设为“30px”，单击第一单元格，设置：水平“居中对齐”，垂直“居中”，输入文字“出发地”，将文字设为：字体“宋体”，大小“12px”，颜色“#990066”。35、按照同样的方法，完成该表格的制作，且将其余各行文字设为：字体“宋体”，大小“12px”，颜色“#0000CC”。36、紧接着第29步的布局表格的下方绘制一个宽“418px”，高“52px”，背景图像为“fj01.jpg”的布局表格，然后再在该布局表格内偏左的位置绘制宽“156px”，高“52px”，水平对齐“居中对齐”，垂直“居中”的布局单元格，输入文字“