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

1、网页设计实验指导书（一）dreamweave静态网页制作第一章网站规划 - 2 -第二章dreamweaver静态网页设计实验 -5 -实验一在dreamweaver中建立一个站点 -5 -实验二 在网页中使用文本 - 9 -实验三超级链接的建立 -14-实验四网页图像的应用 -20-实验五网页表格操作 -25-实验六利用表格进行网页布局 -27-实验七利用层进行网页布局 -32-实验八行为和图层的应用 -35-实验九框架型网页的制作 -44-实验十一交互式表单的应用 - 55 -实验十二html语言基万应用 -59 -实验十三 网页动态效果辑 - 63 -实验十四css样式表的创建及运用 -

2、68 - 4 -第一章网站规划一、网站建设的基本流程网站建设的基本流程是：网站规划，网页设计，网上安家以及网站维护与管理，如图1-1所示。规范的网站建设大致需要做如下工作：1、网站规划收集网站前期资料以及所需文档在确定了制作哪方面的网站后， 需收集和整理与网站内容相关的文字资料、 图像、动画 素材等。如想要制作影视网站就需收集大量中外电影的信息以及演员资料；要制作公司网站就需收集公司的介绍、产品信息和企业文化等。收集好资料后还需对资料进行有效地管理，站点就是管理资料、素材的场所。在创建站点之前需对站点进行规划，站点的形式有并列、层次和网状等，用户需根据实际情况选择。规划站点时应按素材的不同种类

3、分为几个站点，再将收集好的素材分类放置在相应站点中，然后在不同站点中将不同的素材进行细分。站点规划好后即可对其进行创建了。注意：站点的主题与名称应易于记忆，要上传到网上的站点名称必须是英文。2、网页设计(1)将策划方案打印给小组成员人手一份，开始设计人员进行设计工作。根据策划文 档及网站设计规范，主要设计人员进行前期的首页设计。网站是由多个页面链接而成的。在制作网页时需注意以下几面的问题，以便浏览者轻松浏览网站。a) 页面框架的构建页面框架的构建是指对网页的整体布局，针对网页中的内容应将网页有条理地划分为几部分。b)导航条导航条应出现在网站的各个页面中， 提供各个站点的相关主题， 引领浏览者有

4、条理地浏览网站。导航条通常放置在页面的上部或左侧。c) 返回首页链接在分页面中放置返回首页链接， 以便浏览者在访问分页面后快速回到首页， 以重新选择 其他页面进行浏览。d) 添加网页元素, 网页添加相应的内容，以传递网页信息给浏览者。(2) 根据网站的模式和特点以及网站制作规范定制出最适当的标准样式。(3) 设计人员进行二级页面设计工作。(4) 制作人员开始制作工作。(5) 程序开发阶段。(6) 完成。(7) 网站测试和改进站点测试可根据浏览器种类、 客户端要求以及网站大小等要求进行测试， 通常是将站点 移到一个模拟调试服务器上对其进行测试或编辑。测试站点的过程中应注意以下几方面：a) 监测页

5、面的文件大小以及下载速度。b) 运行链接检查报告对链接进行测试。 由于在网页制作中， 各站点的重新设计、 重新调 整会使某些链接所指向的页面可能已被移动或删除， 所以应检查站点是否有断开的链接， 若 有则自动重新修复断开的链接。c) 为了使页面不支持的样式、 层、 插件等在浏览器中能兼容且功能正常， 可进行浏览器兼容性的检查。 使用“检查浏览器”行为， 可自动将访问者定向到另外的页面， 这样就可解 决在较早版本的浏览器中无法运行页面的问题。d) 网页布局、 字体大小、 颜色和默认浏览器窗口大小等区别是在目标浏览器检查中无法预见的，需在不同的浏览器和平台上预览页面进行查看。3、网上安家网上安家即

6、将站点发布到互联网上。发布站点之前需在 internet 上申请一个主页空间， 以指定网站或主页在 internet 上的 位置。网页发布通常使用ftp(远程文件传输)软件上传网页到服务器中申请的网址目录下，这样速度较快，也可使用 dreamweaver 或 frontpage 中的发布站点命令进行上传。4、网站维护与管理(1) 网站内容更新与沟通站点上传到服务器后， 还需对站点进行更新和维护， 以保持站点内容的最新和页面元素 的正常。(2) 合理运用新技术。(3)推广你的 webte址。二、 网站设计技巧1、网页风格要统一。2、网站导航要清晰。3、网页内容便于浏览。4、网站logo 要有代表

7、性。5、设计网站的标准色彩。6、页面容量越小越好，别超过75kb。7、能适应不同浏览器及分辨率。8、网页内容要精彩。三、 网页的基本组成网页由网页标题、页眉、站标、导航栏、内容版块的页脚组成。标题（说明网站的形式和类型）站标即网站标识（ logo ） （代表了网站的形象）页眉（放置网站最希望浏览者看的信息）导航栏（网站的索引）内容（是网站的精神所在）页脚（网站设计者的基本信息）四、网页元素网页中包含的元素很多，主要包括文字、图像、表格、表单、动画和视频等。五、网页的分类1、按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类。 打开一个网站时看到的第一 个页面就是主页，也称为首页；

8、与主页相链接的其他各个页面就称之为子页。2、按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页。静态网页：指用 html语言编写的网页，其制作方法简单易学，但缺乏灵活性。静态 web 站点由一组相关的 html 页和文件组成， 这些页和文件驻留在运行web 服务器的计算机上。web 服务器是响应来自 web 浏览器的请求以提供 web 页的软件。当访问者单击web页上的某个链接、 在浏览器中选择一个书签、 或在浏览器的地址文本框中输入一个url 时，便生成一个页请求。静态 web 页的最终内容由网页设计人员确定，当接到请求时，内容不发生更改。动态网页：这类网页使用asp ph可口 c

9、gi等程序生成，具有动态效果，且大多数以数据库为基础，使用语言为html asp 或 html php 或 html jsp 等。当 web 服务器接收到对静态web 页的请求时， 服务器将该页直接发送到请求浏览器。但是，当 web 服务器接收到对动态页的请求时，它将作出不同的反应：它会将该页传递给一个负责完成页面的特殊软件。这个特殊软件叫做应用程序服务器，如 asp 页面就要安装 iis 服务器。应用程序服务器读取页上的代码， 根据代码中的指令完成页， 然后将代码从页上删除。所得的结果将是一个静态页， 应用程序服务器将该页传递回 web 服务器， 然后 web 服务器 将该页发送到请求浏览器

10、。当该页到达时，浏览器得到的全部内容都是纯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

11、、知识点分解本实验主要涉及到如下知识点:1、 在 dreamweaver中建立站点。2、 在dreamweaver站点文件列表下新建文件和文件夹。3、 在网页中插入背景图片。四、实验步骤1、创建本地站点步骤:(1) 打开dreamweavers菜单下站点/管理站点|/新建川 站点命令.弹出如 图2-1-2所示对话框。(2)在弹出“站点定义”对话框的“高级”标签中输入如下信息。图 2-1-2(3)“站点名称”一一输入站点名称如“myweb。(4)“本地根文件夹”选择本地文件夹如“dmyweb(5)”自动刷新本地文件列表”一一选中是否每次拷贝文件到本地站点时都自动更新 本地文件夹列表，选中该选项。

12、(6)”默认图像文件夹”选择图像所放置的文件夹如“dmyweb image”注意：图像文件夹一定要在站点文件夹下，且一般命名为 image或images。(7) “http地址”输入实用的完整网站的url以便dreamweaver能检验使用绝对url网站链接。(8)“缓存”一一选择是否创建一个缓存以提高链接和网站维护任务的速度。选中该 选项。(9)设置完毕，点击“确认”按钮。(10)在dreamweaver的工作界面右侧“浮动面板组中的“文件面板中的文件”标签下就能看到刚才新建的站点myweb如图2-1-3所示。- 6 -图 2-1-3如果要对所建立的站点进行修改的话，可以选择菜单下站点” 管

13、理站点| 编辑命2、在站点文件列表下新建文件和文件夹步骤：(1)在站点文件列表中右键单击“站点一myweb(d:myweb)”,在弹出的菜单中选择“新建文件夹”，文件列表中就会出现名为“新建文件夹”的文件夹，将该文件夹命名为image,同样操作建立css文件夹和mdb文件夹。(2)在站点文件列表下新建文件有2种方法：a)选择文件” 新建,在弹出的“新建文档”对话框中，选择“ html,就新建了一 个htmm页，然后再选择文件” 保存或者是按【ctrl+s】键，将网页名称改为index.html , 同样操作建立 jianjie.html, zuopin.html , xuexi.html 。b

14、)在站点文件列表中右键单击“站点一myweb(d:myweb)”,在弹出的菜单中选择“新建文件”，文件列表中就会出现名为“新建文件”的网页文件，将该文件命名为index.html , 同样操作建立 jianjie.html, zuopin.html , xuexi.html 。3、在“文件列表”中选中 index.html文件，单击右键，在弹出的菜单中选择“设为 首页”，回到页面上，在“文档工具栏”中将“标题”更改为“本站主页” 。注意：要想在站点文件列表下自动出现新建的文件和文件夹，前提条件必需在建立站点时选中“自动刷新本地文件列表”，否则的话必需单击“刷新 c ”按钮才能出现新建的文 件和

15、文件夹，效果图如图2-1-4所示。醺 css t底用程序 i 标塞检查器 万,文件!=资源代码片断匕)myvebv 地视图7ac 分歹禽 s-myw eb ji站点-myweb： imaigecss rmdbindtk. html j i tnj i q.h-tml mop in. html苴uesl. htnnl4、设计index.html网页步骤：(1)在站点文件列表中双击index.html ，打开该网页。(2)将光标定位到“文档工具栏”中的“标题”，将标题中的内容改为“本站主页”，如图2-1-5所示。胴网图励同该十嘏:就颗 例火塘a | c目，&图 2-1-5(3)单击“属性面板”中的

16、“页面属性”按钮，弹出如图2-1-6所示的“页面属性”对话框，单击“背景图像”后面的“浏览”按钮，添加背景图像即可。(4)在工作区的“编辑窗口”中输入“欢迎光临我的小站”图 2-1-6(5)浏览测试。浏览测试的方法有3种，第1种方法是直接按f12键，这是最快捷的方法，建议大家以后尽量采用这种方法。第2种方法是单击如上图所示的“文档工具栏”中的“ 按钮，在弹出的菜单中选择“预览在iexplore ”命令后即可在ie浏览器中浏览当前网页。第3种方法是选择文件/在浏览器中预览/iexplore 菜单命令即可在ie浏 览器中浏览测试当前网页。思考题：在设置网页背景图像时，如果图像太小，铺不满整个网页，

17、怎么办?实验二在网页中使用文本一、实验目的、“常用面板”，“文本菜单”和“文本属性面板”的掌握“插入面板”中的“文本面板” 使用及设置文本格式的方法。二、实验内容1、在页面中插入特殊符号，如：“和空格符”。2、在页面中插入日期，要求日期格式为“xx xx年x月x日 星期x xx：（时） xx （分）3、在页面中插入水平线。4、在新的页面中编辑一个项目列表，如图 2-2-1所示，要求：字体为“楷体”、大小为 “16pt”、颜色为“黄色”，网页背景颜色为绿色。在页面中插入特殊捋号如：“和空格符飞l将光标定位到插入特秣字符的隹置。2.或击盗人”桎中的“文本”选项卡如由所示1 在宽面中插入日期，设置日

18、期的星期、日期、时间格式和保存时目都更新。a.选择插入臼期菜单命令，或者选择“插入k拦的“常用选项中. 熬后单击皿插入日期”按钮.则打开如图所示的插入日期”时h框。b.在弹出的插入日期”时h框中选择星期格式，日期格式和时间格式。2 衣页面申插入水平鼠七3 编辑一小项闿列表图 2-2-1三、实验步骤内容1的实验步骤如下：1、将光标定位到插入特殊字符的位置。2、单击“插入”面板中的“文本”选项卡，如图2-2-2 所示。献窜用捐糖1$ ol bla藏收融埼 b / s 前* v 画 hl hl h3 ul ol li dl dt dd 此舶c 科，图 2-2-23、单击吧-按钮，展开如图2-2-3所

19、示的“字符”下拉列表。图 2-2-3- 9 -4、单击相应的选项即可在web页面中添加相应的特殊字符，如图 2-2-3所示。图 2-2-3- 21 -5、插入不换行空格，可执行如下操作之一。(1)在“插入”面板的“文本”选项卡中，单击“字符”型按钮，在下拉列表中选择“插入不换行空格”选项。(2)选才i 插入/html/特殊字符/不换行空格菜单命令。(3)按【ctrl+shift+ 空格键】键输入。(4)将输入法切换到全角状态再按空格键。内容2的实验步骤如下：1. 选才！插入/日期菜单命令，或者选择“插入”面板的“常用”选项中，然后单 击“插入日期”按钮，则打开如图 2-2-4所示的“插入日期”

20、对话框。图 2-2-42.在弹出的“插入日期”对话框中选择星期格式为“星期四”、日期格式为“ 1974年3月7日”、时间格式为“ 22: 18”。注意：如果希望网页在保存时系统都会自动更新日期信息，则选中选中回三谣每过自建更新.复选框。4、单击“确定”按钮即可插入日期。内容3的实验步骤：1、在“文档”窗口中，将插入点放在要插入水平线的位置。2、执行以下操作之一。 选择插入/html/水平线菜单命令；，如图2-2-5所示(2)单击“插入”面板的“ html选项卡，再单击“水平线”按钮html 筝 也 tawe frame 令1、在页面中输入如下文字：在页面中插入特殊符号如：“和空格符”。将光标定

21、位到插入特殊字符的位置。单击“插入”栏中的“文本”选项卡，如图所示。在页面中插入日期，设置日期的星期、日期、时间格式和保存时自动更新。选择插入/日期菜单命令，或者选择“插入”面板中的“常用”选项卡，然后单击“插入日期”按钮，则打开 “插入日期”对话框。在弹出的“插入日期”对话框中选择星期格式、日期格式和时间格式。在页面中插入水平线。编辑一个项目列表。2、选择上面输入的所有内容，进行如下的操作：(1)选中文字：在页面中插入特殊符号如：“和空格符”，单击“文本”属性面板中的“项目列表” w三按钮，则会出现图2-2-1中所示的圆形符号，重复该操作进行下面的项目列 表符号的添加。注意：默认情况下项目列

22、表符号为圆形，如果想要出现的项目列表符号为方形，可以进行如下操作：a)选才i 文本/列表/列表属性菜单命令，弹出如图 2-2-6所示的“列表属性”对 话框。图 2-2-6b)在“列表类型”下拉框中选择“项目列表” ，在“样式”下拉框中选择“正方形”c)单击“确定”按钮。(2)选中文字：将光标定位到插入特殊字符的位置。单击“插入”栏中的“文本”选项卡，如图所示。单击“文本”属性面板中的“编号列表”“二按钮，则会出现图2-2-7中所示的编号, 重复该操作进行下面的编号的添加。(3)上述操作进行完毕后，效果图如图2-2-7所示，把该图与图2-2-1进行比较可以发现编号所在的位置不一样，此时我们只需要

23、把图2-2-7中带编号的文字给缩进一下就可以了，选中带编号的文字，单击“文本缩进”=按钮即可。，在反面申猷特殊符号如：和窗格符*,在反面中插入日帆设f日期的星期.日期、时间格魏保存时自重更斯。4 .磔搐入/产期琮单命明或者选择“插入”面板中的啼用项卡，爵后单击“摘入日期嗜钿 .通t升:秋日期嘶臃*5 .在里出的嘴人e期”帮舌柢中选择星期格大日期咯式和时间格加舞得1图 2-2-7(4)在进行完上面操作后我们发现，第 2块列表区域的列表符号还是 1, 2,此时，先将 光标移到“选择”前，单击“属性面板”中的“列表项目”，弹出如图2-2-6所示的对话框，此时将“列表类型”改为“编号列表” ，样式改为

24、“小写字母(a,b,c):单击“确定”按钮 即可。(5)在“属性”面板中“字体”下拉列表中选择“楷体”，如果该下拉列表中没有“楷体”，则需要添加“楷体”，单击该下拉列表中的“编辑字体列表”，弹出如图2-2-8的所示的“编辑字体列表”对话框。图 2-2-8(6)在“可用字体”列表框中找到“楷体”，单击回按钮，则“楷体”同时出现在“字体列表框”和“选择的字体”列表框中，再单击“确定”按钮，则在“字体”下拉列表中就 可以选择“楷体”。注意：如果添加了错误的字体，则可以单击日 按钮删除该字体。(7)同理在“属性”面板中“大小”下拉列表中选择“ 16pt”。(8)单击“文本颜色” 匚按钮，在弹出的拾色器

25、中选择“ #ffff00或者直接在按钮后面的文本框中输入yellow ”。注意：颜色可以用 2种方式表示，一种是用英文，一种是用十六进制代码。(9)单击“属性”面板中的“页面属性” 1页面屈性一一按钮,在弹出的“页面属性”对话框，单击“背景颜色”后面的按钮，在拾色器中选择“#006600”。3、按【f12】键，预览。思考题：在编辑字体列表时如果同时选择了隶书、楷体、华文彩云，也就是在字体列 表中出现“隶书，楷体，华文彩云”，则文本最终会以哪种字体出现？实验三超级链接的建立、实验目的1、掌握超链接的基本概念和种类2、能熟练设置文本和图片超链接。3、能熟练设置锚点超级链接和电子邮件链接。4、掌握将

26、外部文件导入 dreamweaver中的方法。二、实验内容某站点下有如下 4 个网页，index.html , meiwen.html , aiqing.html , hunyin.html , 1、首页效果图如图2-3-1所示，图像显示在网页的中间，单击“情感美文”会在新的ie窗口才t开meiwen.html ,单击“爱情故事”会打开 aiqing.html ,单击婚姻情感会打 开hunyin.html ,单击“与我联系”会发送电子邮件。图 2-3-12、hunyin.html 效果图如图 2-3-2所示，图2-3-2(a)是网页上半部分的效果图，图2-3-2(b)是网页下半部分的效果图，单

27、击“再看一遍”能返回到“中华人民共和国婚姻法” 该法规内容在fa.txt中，单击右下角的“返回首页”能够返回首页。中华人民共前国的婚礼s-i ” 年一条西坦醺察13关基本陋也第二冬新期s自由，一夫t.男女甲等由园圜m度.偿蹲女、j重到卫阳含ijn益，头行削也航 一年三米工刍也工专埼用切r也毛存的妊口回内行力，里止节审至则依，止宣97止用品隼看1wl同居.策士班阜力.普工黑三定员司希虐寻和青耳星四系梭叵当且触耳亘用蕤 霹星旗阿鹤就勃，afflfw.缗坪格更隹妞湖 嫡第4w系.szi拮我隼五条si触频文双方亢生自工石杵任何一万时ft1万加且用汨或任勺京三书亚&干法3部睥病.总干小手于二+二附蜕女k

28、霄早于二十周其独触立应憎见1*有了用用之一町5：止结培.一通力亲前三代h内佐吉挈由科口眄野上稗因埔醐腿， 1第八条妥他园的列女劝必煤生自身冕感叠记限进行撤国.科甘楣乳足科予以*记，黄岩 箍怔.甲帝擒证，ji用文知弟薪木界理曲的，宜州曲题.勒电和?邹才鹏格美制徜彳士才可眦朗传础地，刖可出研硝碱 孰用+毒有下可fl用之一町州毗坡e瑜二由铠止希解1晚国关系m工)蒯身甫匡手上小胪f足单地而族丸整局蝌旦到 . _ _ . 一用-冬羽追花培也微计追的一万可以窗峭慝登记机关与4 士等下街b侯拗工部胆而一万 除附！3fi豺，迎骷器的齿叫t随出.u非那隗时由为驯人群曜渊酗.阮当白 慎m身自由之he ,物也也_t

29、:：?士-x早日三jktrkhk： ut, hh .*“川*1甘硝 h，相期琲削干嫡到钻斗巴理工就蛙航随工耘孑端虹第一上勇二十书盛乂喻1蜻金，君娃和行文鸣群闻涛,甑啪噢奸蛀不 因歌跳，靠二热i主义ei解轨正林齐e蚌关于五地匕引讫r-h*奉义号与忖克昂碉星耳星蚓，蛋:随印骸反怖班物疆隘越冬伸特时她和怎唱钟总iz+ai郡的卿母、w*,锵卷遭旧戈骸to 捌鞠那t特殖，(脚暇枭isitjw*.外籽比 肝残己酝或无渤出卿 娅,涧如辅耐;熠，仁士薛西联需樵兄,s.曲般强肥数聒土硼资网鼎东解湖 煜+由片雕能描领壁耀君寿籽t断新初脸翎解区也就前 浮，髭性敌她耳敢甘醐胤和柳隔砌9孜敕郭酬工 象和烟蒯雌不姗硝出哪

30、百件容+t歌露自嬲酶舒施财会谯据我瓶神足、雌耐鞋 飘时屣g鼠苛身种刘财产斗至己葡疆乳联撷，k+u他-方屈雌方蛹羯储丽醋陶搂修科aswassift.电裳稀的 填附白凰 常磁,叵叙跳.解押，囹良于做再看一遍题首页图 2-3-2(a)图 2-3-2 (b)三、知识点分解1、由图2-3-1可以看出，在该页面正中间有一张图像，图像显示了边框，当鼠标移到 文字“情感美文”时会显示提示文字“情感美文”。2、由图2-3-2可以看出，文字以表格的形式显示在网页上的，此时注意不是在网页中 绘制表格，把文字录入进去，而是采用导入fa.txt 文件，使他以“表格式数据”显示出来,“再看一遍”采用了锚链接，“返回首页”

31、采用文字链接，两个链接都无下划线。四、实验步骤内容1的实验步骤：aiqing.html ,2-3-3所示的1、新建4个html文档，将其分别保存为index.html , meiwen.html ,hunyin.html 。2、 将光标定位到要插入图像的位置。3、 执行如下方法之一：(1)选才！插入/图像菜单命令，打开“选择图像源”文件对话框；(2)单击“插入”面板的“常用”选项卡中的 按钮，打开如图“选择图像源文件”对话框；(3)按【ctrl+alt+i】键打开“选择图像源文件”对话框。图 2-3-34、 在“选择文件名自”栏中选中a直件案装单选项，在“查找范围”下拉列表框中指定要插入图像的

32、路径并在文件列表中选择需要的文件名称(*.gif、*.jpeg和*.png )5、 在“相对于”下拉列表框中选择“站点根目录”选项。6、 单击“确定”按钮，弹出如图 2-3-4所示的“图像标签辅助功能属性”对话框。图像标签辅助功能属性替检文本：|lmix详细说明：ktu：/o如果在插入圉像时不想输入此信息，谙更放“辅助功 能“首选参数.图 2-3-47、 在“替换文本”下拉框中输入想要说明的文字，这样的话当鼠标移动到图像上就 会出现“替换文本”下拉框中输入的文字。8、 单击“确定”按钮。9、 如果所选择的图像文件不在定义的本地站点中，系统会打开如图2-3-5所示的询问对话框，询问是否保存到本地

33、站点目录下。文件位于站点校园青春的根文件夹以外当您发布站点时可能不能访问口lacroaedia dreamweaver mx 2004您的根文件夹是:e： xyqc您愿意将该文件复制到根文件夹中吗?是豆ji 否图 2-3-510、在提示对话框中单击打开“复制文件为”对话框，在该对话框中选择保存路径，并在“文件名”文本框中更改图像的名称。11、单击“确定”按钮即可将所选的图像插入到网页中指定的位置。12、选中该图像，打开“属性面板”，将图像的高度改为“ 700”，边框改为“1”，选择 “居中对齐”凰按钮。13、 选取要添加热区的图片，此时属性面板中出现4个热点工具，单击“矩形热点工具” !,在图

34、像上“情感美文”绘制热区后，自动打开“热区”属性面板，如图2-3-6所示。情，美情爱情故举母蛔情感与我联宪图 2-3-614、在“属性面板”中将“链接”改为 meiwen.html ,在“替换”中输入“情感美文” 在“目标”下拉列表框中选择“ _blank ” .15、用同样的方法绘制其他热点，并设置相应的链接。16、热点链接完成后按【f12键预览页面，当鼠标移至热区上时即可看到手形图标下 面有一个提示文本。17、在建立“与我联系”链接时，则要创建电子邮件链接。创建电子邮件链接有两种方法。方法一：(1)在“文档”窗口的“设计”视图中，选择“与我联系”热区。(2)执行下列操作之一插入该链接：a)

35、选择插入电子邮件链接菜单命令；b)在“插入”栏的“常用”选项中，单击“插入电子邮件链接”按钮。(3)打开“电子邮件链接”对话框，如图 2-3-7所示。图 2-3-7(4)在“文本”文本框中输入显示在web页面中的链接文本，如“与我联系”。(5) 在“ e-mail”文本框中输入要链接到的电子邮箱地址，如“ csygold 163.corfi 。(6)单击“确定”按钮。方法使用“属性面板创建电子邮件链接，具体操作如下。(1)在“文档”窗口的“设计”视图中选择要建立电子邮件链接的文本或图像，如“与我联系”。(2)在属性面板的“链接”文本框中，输入“ mailto: 然后在它后面输入电子邮件地址，如

36、 ”，在ie浏览器中单击该链接的显示效果。18、按【f12】键，预览。注意：此时电子邮件的发送是采用outexpress或者是outlook发送的。所以单击“与我联系”时，会自动创建outexpress连接向导。内容2的实验步骤：1、 打开“hunyin.html ”页面，选择文件导入表格式数据,弹出如图2-3-8 所示的“导入表格式数据”对话框。图 2-3-82、 单击“数据文件”后面的圆空二按钮，选择“fa.txt ”文件，定界符选择“tab”, 单击“确定”按钮。在dreamweaver 8中还可以建立命名锚记的链接，也就是锚链接。使用命名锚记的链接 可以跳转

37、至文档内的特定位置。建立锚链接分为创建命名锚记和创建到该命名锚记的链接两 部分。3、 创建命名锚记：将插入点放在需要命名锚记的地方，如本例中“中华人民共和国 婚姻法”。4、 执行下列操作之一。a)选择插入命名锚记菜单命令；b)在“插入”栏的“常用”选项中，单击“命名锚记”按钮 。5、 在打开的“命名锚记”对话框的“锚记名称”文本框中，输入锚记名称，如top ,并单击“确定”按钮，锚记标记出现在插入点处。6、 创建到该命名锚记的链接：选择要创建命名锚记的文本或图像，如本例中的“再看 城i o7、 在属性面板的“链接”文本框中，输入一个数字符号“#和锚记名称，如“#top ” 。注意：若要链接到当

38、前文档中名为“ top”的锚记，则输入“ #top”。若要链接到同一 文件夹内其他文档中的名为“ top”的锚记，则输入“ index.html#top ”形式的锚记引用。8、选中“返回首页”，打开“属性面板”，将“大小”改为“ 16px”，对齐方式改为“右 对齐”。9、单击“链接”文本框后的1按钮，在打开的“选择新文件”对话框中选择要链（即首页），同时在“相对于”下拉列表框中选择相应接的文件，这里选择index.html 的“站点根目录”选项。10、单击i页面属性_按钮，在弹出的“页面属性对话框”中，“分类”选择“链接”， 将“下划线样式”改为“始终无下划线”，单击“确定”按钮。11、按【f

39、12】键，在ie浏览器中单击“再看一遍”链接，则返回到“中华人民共和国 婚姻法”（命名锚记处），单击“返回首页”链接，则打开 index.html 。,国考题：大家经常在网页上会看到文字“加入收藏”，请问如何实现单击“加入收藏”可以将该网页加入到浏览器的收藏夹中？实验四网页图像的应用、实验目的1、通过本例要求掌握常见的图像格式及图像的插入方法。2、能够修改图像属性，利用外部图像处理软件编辑图像。3、掌握图像导航条的制作。4、掌握将 word中的文字复制到 dreamweaver中的方法。5、掌握在页面中创建轮换图像。二、实验内容某站点下有如下 4 个网页，index.html , meiwen

40、.html , aiqing.html , hunyin.html ,1、meiwen.html效果图如图2-4-1所示，当鼠标移到每张图像上时会显示另外一张图像，单击“本站首页”图像时会打开index.html ,文章内容在“执着.doc”中。他阳山111汨1m中川卜的, 也防星4型 h此*； s.-. 吧“周 日 加寸出.mr不反乂”1般rsegulkw.sffr.iht k,法 ch iehae 卬.在皿对.与浜包， 怙m因时r理门不mthwh*rrihi 4=木 府信人 el运土山u=用宜.i旧45切ju =就算立 电话不卡。*4i*f-fa# fl-fin* - 不”下可 匕并于。印

41、州豁兀罂髀“*牖弱二”掾献科雷:拒者油斗i j独处造品明乖师，多范由露用 /才金强行佛林-曲过了-才会冷将融肉水护白匕：度过t 才会佳临建时附坚持闫祖弄.在将利以先餐中也仃工慢慢也认加自己.师奥.生活异本k关逵生 些比镌的2比后，没有什幺死弃的不嗨刘舒l匕优生活优像也一打清去卜 米当了他全拜恭女泗 王因再如叱-才不大茶在.在大手的执念. 机晟到头上只分汨f -fit创为转，=地侪潼何田昭r 太过抗折凡会病机x坑 心计也因抄太过中儿吃、悲也在布曳土不为白白做.热什x - 我也评优.星人的氏必,潺司坦才算是向也,此法fll itgh是枪上里也心成的破堇二就舟江沏虫f 刀哇冷，人断的二 死许酒副l

42、fl件铲东，住般以后隙谴遛，风沙历件籽姓用日i吗？ 琼,曾隼时也献过女府对4_ 比去过优 w吗？ 也许律姓疝过. 俚师愁却已fceit 上下,上令格武号的是口昆的现范箍柏一乖靳.略，筌黛如噌提，花卦拄莉芝下去不筌康子音上有各少也就-也英姿吞干包酒布,空.k* 妆我了.一切都、再弄将 妆介， 讹会占也假好现: 成舟t * .人6 悟遗人刊 芳一个他界若奇更4ju#击 加力举,金，龙碑此针的 马交至偌后 轨下吧史斯黏在眸密. 他面帕珞遥握住, 当很热小跑下去，电灯炽漏漏图 2-4-12 aiqing.html效果图如图2-4-2所示，当鼠标移到图像上时会显示tiane1.jpg 图像,同时显示文字

43、“在你身边，我享受被保护的感觉”，单击该图像返回首页，文章内容在“爱情人生.doc”中。麦忖i人生士会也刊fti四十人苗学i尸性tt* 刑过*k * 班-%/.即.kie 1t 则祝举j国十人-的e+距4皿一十的人+可亢音丽喇际:笑的人-都总佳行则货的唾林，阳加 了解地赞巾酒优用 w 才ifc过收:爱你的人- *依螃而七寸 夏a与域赛, 半立丁才立*海什汽鼻件都关的- hj 1x11上刑餐次占it. n：:r：ill ：1 半 尸的人.但值曲就 的. 速现曲生海中越三小人烟1#布晟同一小a. ttf 的川 蚀傀盹心将你r * ite l住不小 际*建的. 而 ik b 风时. mmi 知辩 e

44、 f *你m 月用住门口序由i里的即d *.5 .hl -t- -he7-*h.分阳白”ht 鹏丹*白,1 * 143 dt先fib. f 空阳eki ht m e恬班c曰1毛” 怦 t * 书包审 m wl hf 3用i旭白0日十flu 也；身 中森/c w mi如 冲;u. 2 一-f a, :f：*（棺 * * 开你， 府：un i,jl白 口 干r 期i冠te怡如imlfer i1-西崎于j *3鼻 诉应0 他. 卡匹一餐命 他挂的m. 她不立 19止,t- .a. hl dt 124于 r * 籽.ih w 总帆的机， 力 *b.a-j *.点 a ih sf a.ti亚点,后包子:

45、感团为容曲上.机前2e 他=tt.叫 n elffi描妲时才干. 正求一-t-a.距赤油41thi repqmr- 你r也1道正地河htt阿 他 心iw好聊1 曲郁佛1达千人附立你，育地西图 2-4-2三、知识点分解1、由图2-4-1可以看出，该页面最上面导航条，导航条下面是水平线，正文的格式与 “执着.doc ”格式一致。在彳m meiwen.html之前，要利用图像处理软件做出图所示的导航按 钮，注意要做10个按钮图像，并且保存为网页中能使用的图像格式。2、由图2-4-2可以看出，该页面首先导入了word文档的内容，然后插入了轮换图像,设置图像与文字的环绕方式。四、实验步骤内容1的实验步骤

46、：导航条由图像或图像组组成， 这些图像的显示内容随操作不同而不同。 导航条通常为在 站点上的页面和文件之间移动提供一条简捷的途径。导航条可以进行复制，可以对导航条附加行为以应用于不同的网页。 一个网页中只允许有一个导航条。 导航条项目有如下 4种状态: 一般、滑过、按下、按下时鼠标经过。在创建导航条时，不必包含所有这4种状态的导航条图像，可以只选用“一般”和“按下”或“滑过”这两种状态。1、打开meiwen.html ,将光标定位到要插入导航条的位置。2、执行下列操作之一打开“插入导航条”对话框：（1）单击“插入栏”的“常用”选项卡，并单击“插入导航条”按钮，弹出如图2-4-3所示对话框；（2

47、）选择插入图像对象导航条菜单命令。图 2-4-33、在“插入导航条”对话框中进行具体的设置。设置的具体方法如下。a）在“项目名称”文本框中，输入导航条项目的名称（如sy）。该名称只能包含字母和数字且不能以数字开头。b）在“状态图像”（必需）文本框后，单击按钮选择最初将显示的图像。c）在“鼠标经过图像”文本框后，单击出哒l_j按钮选择当一般图像显示时如果鼠标指针滑过项目所显示的图像。d）在“替换文本”文本框中，输入项目的描述性名称。e）在“按下时，前往的url”文本框中，单击网或按钮选择要打开的链接文件 （如 index.html ）然后从右侧的下拉列表中选择打开文件的位置。f）选中回 预先羲入

48、图像复选框，可在载入页面时下载图像。如果未选择此选项，在鼠 标指针滑过鼠标经过图像时可能会出现延迟。4、单击土i按钮可向导航条添加另一个项目，然后重复上述步骤定义该新项目。若要减少导航元件，可先在导航元件列表中选择要删除的项，再单击二1按钮删除即可。单击h按钮或 二_1按钮，可以改变导航条元件的出现顺序。本例中导航条项目顺序为 “sy”、“jdwz ”、grwz , rszl 。5、完成导航条项目的添加及定义后，单击 i 确定j按钮,完成的导航条添加。6、选中导航条，单击“属性面板”中的“居中”按钮。7、将光标定位到导航条后面，敲回车，然后单击“插入”面板的“html选项卡，再单击“水平线”按

49、钮 ，插入水平线。8、打开“爱情人生.doc”文件，选择“ ctrl+a : ctrl+c ”。9、将光标定位到水平线后面，敲回车，选择编辑带格式粘贴菜单命令，即将word文档内容带格式一起粘贴到网页中。10、按【f12】键，预览。内容2的实验步骤：轮换图像即鼠标经过图像，是一种在浏览器中查看并使用鼠标指针移过它时发生变化的 图像。鼠标经过图像由两个图像组成，主图像（首次载入页时显示的图像）和次图像（当鼠 标指针移过主图像时显示的图像）。鼠标经过图像中的两个图像其大小应相等，如果两个图像大小不同，dreamweaver将自动调整第二个图像的大小以匹配第一个图像的大小。1、 打开aiqing.h

50、tml ,选择文件导入word 文档,在打开的“打开”对话框中，选择要添加的文件，如本例中的“爱情人生.doc ”，然后单击匚亘至二i按钮，word文 档的内容将出现在页面中，如图 2-4-4所示。3 fm 二甲j su n 召*一 乏 an u.厂 n 通kill杯口皿壬ulnb器11髀炉髀依器融部隈避阻西林富鼾limfie.蔑用阿安篁工行蛆涡青置hk2、 选中“爱情人生”，打开“属性面板”，将“字号”改为“ 36px”，“颜色”为“红 色”。3、 将光标定位到“爱情人生”后面，敲回车，选中后面的文字，单击“属性面板” 中的“左对齐” |富按钮。4、 将插入点放置在要显示鼠标经过图像的位置5

51、、 使用以下方法之一插入鼠标经过图像：a）在“插入栏”中单击“常用”选项卡，然后单击“图像 鼠标经过图像”按钮 匚回， 如图2-4-5所示;b）在“插入栏”中单击“常用”选项卡，然后将 口 按钮拖到“文档”窗口中的所需位置；c）选择插入图像对象鼠标经过图像菜单命令。6、 执行以上操作后都将打开“插入鼠标经过图像”对话框，在该对话框中完成各项参数的设置操作，如图 2-4-6所示si图像-图像占位符醐镉：ir解m龌原始邮iriiwe/tiane.彳醉处希即% fireworks html3导航条tj绘制矩嵬热点 b筵制桶触点 v绘制名边形热点睨融嬲蒯墀.报7批的的血回预费施附豳制福&我学等,好的感

52、觉1帆/国矽同船g拓人昌檀弦触图 2-4-5图 2-4-6a）在“图像名称”文本框中输入图像的名称。b）在“原始图像”文本框后单击浏览一 j按钮并选择载入页面时显示的图像,如本例 中tiane.jpg ,或直接在文本框中输入图像文件的路径。c）在“鼠标经过图像”文本框后单击浏览按钮并选择鼠标指针滑过原始图像时显示的图像，如本例中tiane1.jpg,或在文本框中输入图像文件的路径。d）如果希望图像预先载入浏览器的缓存中，以便将鼠标指针滑过图像时不发生延迟，可以选中回预就鼠标经过图像复选框。e）在“替换文本”（可选）文本框中输入描述该图像的文本，如本例中“在你身边,我享受被保护的感觉”。例中选择

53、index.htmlf）在“按下时，前往的 url文本框中单击i浏览- i按钮并选择要链接的文件,如本 ,或者直接输入文件的路径。7、设置完成后，单击1确定按钮关闭“插入鼠标经过图像”对话框。8、选中该图像，打开“属性面板”，将“对齐”下拉列表框中的值改为“右对齐” 注意：“图像”属性面板的“对齐”下拉列表中设置图像与周围文字的对齐方式，而叁萋叁 是设置图像在网页中的位置，左边，中间还是右边。9、按【f12】键，预览。思考题：在做网页时，经常需要用图像处理软件来制作图像，如本实验中的导航条图像，但 是在将该图像插入到 dreamweaver中会经常遇到图像不能紧密的结合在一起，如下图所示, 怎么才能将他改成图 2-4-1所示的导航条的效果呢？经典史心情文章人生忖理- 68 -实验五网页表格操作、实验目的1、掌握表格的创建、结构调整与美化。2、熟悉表格与单元格的主要属性及其设置。3、掌握在表格和单元格中插入文字或图片。4、掌握格式化表格和排序表格。、实验内容：1、制作出如图2.5.1所示的表格。学生成绩表图 2-5-1三、知识点分解本次实验主要涉及到表格的基本操作，注意表格最终的效果需要按总分项进行降序排 序。四、实验步骤1、在dreamweaver中新建一个文档。2、