Dreamweaver网页设计实验.docx
- 文档编号:30154387
- 上传时间:2023-08-05
- 格式:DOCX
- 页数:47
- 大小:1.61MB
Dreamweaver网页设计实验.docx
《Dreamweaver网页设计实验.docx》由会员分享,可在线阅读,更多相关《Dreamweaver网页设计实验.docx(47页珍藏版)》请在冰豆网上搜索。
Dreamweaver网页设计实验
网页设计Dreamweaver实验
实验1网页元素的基本操作
一.实验目的和要求
1.掌握Dreamweaver中本地站点的创建
2.掌握网页的新建、保存与浏览
3.掌握文本的添加与格式化
4.掌握图像元素的设置
5.掌握表格的设置
6.掌握对象的超链接
二.实验内容和步骤
在设计网页之前,我们必须首先建立网站,此后Dreamweaver会自动将所有网站资源(如网页文档、图片、动画、音频文件、视频文件、程序等)都保存到该网站文件夹之中,从而保证网站发布后网页上的所有元素都可以正常浏览。
网站分为本地站点与远程站点。
本地站点存放在本地硬盘上,远程站点存放在发布网站的服务器端。
这里我们介绍本地站点的创建。
1.创建本地站点
①在E盘创建文件夹myweb,用来存放网站资源。
②启动Dreamweaver8,依次单击菜单栏“站点/新建站点”命令,打开站点定义对话框,如图5-1所示。
图5-站点定义对话框
③在“基本”选项卡中的第一个文本框中输入新建站点的站点名myweb,单击“下一步”按钮。
④在接下来的第二个对话框中,对于“是否打算使用服务器技术”选择“否,我不想使用服务器技术”,单击“下一步”按钮,如图5-2所示。
图5-是否使用服务器技术
⑤在第三个对话框中,选择单选框“编辑我的计算机上的本地副本,完成后再上传到服务器(推荐)”,在下侧的文本框中输入“E:
\myweb\”,如图5-3所示。
图5-如何使用编辑文件
⑥如果路径比较复杂,也可以单击文本框右侧的文件夹按钮
,在弹出的“选择站点myweb的本地根文件夹”窗口中确定文件夹的位置,如图5-4所示。
图5-选择本地根文件夹
⑦在第四个对话框中,对于“如何连接到远程服务器”,选择“无”。
单击“下一步”,如图5-5所示。
图5-连接远程服务器
⑧在最后一个对话框中显示了刚建立的本地站点的信息,如图5-6所示。
图5-本地站点信息
⑨单击“完成”按钮,结束站点定义。
此时可以在“文件”面板中看到我们定义的站点myweb,如图5-7所示。
图5-文件面板
⑩将建立站点后的本地站点信息窗口抓图复制、粘贴到电子实验报告四指定位置。
2.新建网页空白文档
①依次单击菜单栏“文件/新建”命令,出现“新建文档”对话框,如图5-8所示。
图5-新建文档对话框
②单击“常规”选项卡,选择“类别”列表中的“基本页”,再从右侧的“基本页”列表中选择将要创建的文档类型“HTML”,单击“创建”按钮,创建了一个空白的网页文档,如图5-9所示。
图5-新建空白网页文档
3.保存新文档
①依次单击菜单栏“文件/保存”命令,出现“另存为”对话框,在“文件名”后的列表框中输入新网页的文件名a1.html,“保存类型”默认为“所有文档”,再单击“保存在”后面的列表框,选择网页的保存位置为E盘的文件夹myweb中,如图5-10所示。
图5-另存为对话框
②单击“保存”按钮,保存新建网页。
4.文本的添加与格式化
(1)输入文本
打开网页文件a1.html,鼠标单击Dreamweaver的文档编辑窗口,输入以下文字:
天池行文/木末之风
白云在天,山川间之,将之无死,尚能复来。
……
最让人动心的,还是那泓碧水。
湖水呈深绿色,而绿中又沁含着淡淡的翠蓝。
让你觉得,那不是一潭水,而是一块温润的碧玉,真有点朱自清先生笔下的梅雨潭的气韵,只是这水,即使在盛夏,也凉意彻骨,提醒你这不是在“东南神秀”雁荡山,而是冰清玉洁的西天瑶池。
白云、蓝天连同周围的雪峰、云杉倒映其间,真是白云在天,蓝天在水,乘游艇徜徉其间,真不知自己是在天上,还是在人间。
(2)特殊文本的输入方法
在Dreamweaver中,普通文本可以直接输入,而对于特殊符号则需要通过“文本”工具栏来插入到网页中,如图5-11所示。
图5-文本工具栏
单击“文本”工具栏最右侧的“其他字符”按钮
,弹出“插入其他字符”对话框,如图5-12所示,选择待插入的特殊字符,如空格、省略号等。
图5-插入其他字符
(3)文本格式化
在Dreamweaver中,对于文本格式的设置可以通过属性面板来方便地实现。
①依次单击菜单栏“窗口/属性”命令,“属性”命令前出现黑色小钩
,调出属性浮动面板,如图5-13所示。
图5-属性面板
②选中标题文本“天池行文/木末之风”,做以下设置。
③设置文本大小:
在属性面板的“格式”列表框中选择“标题3”,“大小”列表框中选择“24像素”。
④设置文本字体:
单击属性面板“字体”列表框的下拉三角,弹出字体列表。
Dreamweaver提供6种英文字体,而不包含汉字字体,因此我们选择“编辑字体列表”命令,弹出“编辑字体列表”对话框,如图5-14所示。
图5-编辑字体列表对话框
⑤单击对话框左上角的“+”按钮,此时“字体列表”中允许添加一行新字体。
选择“可用字体”列表框中的“华文彩云”,单击“<<”按钮,将待添加的字体放入“选择的字体”列表框中,同时在“字体列表”框中可以看到已经添加了对应字体。
单击“确定”按钮关闭对话框。
⑥再次单击属性面板的“字体”列表框,为选中文本设置字体“华文彩云”。
⑦设置文本颜色:
单击属性面板上的文本颜色列表框
,弹出颜色选择器,如图5-15所示。
此时鼠标变成滴管形状,单击色块选择字体颜色“蓝色”,这时右侧文本框中会相应给出该颜色的十六进制数“#0000FF”。
图5-颜色选择器
⑧设置文本对齐方式:
单击属性面板上的居中对齐按钮
,设置文本居中对齐。
设置完成后,文本“天池行文/木末之风”的属性面板内容显示如图5-16所示。
图5-文本属性面板
⑨选中文档中的其余文本,同理修改文本属性,具体如下:
文字大小为14像素,字体为华文中宋,颜色为#9933FF。
⑩设置页面标题:
单击属性面板上的“页面属性”按钮,弹出页面属性对话框,选择“分类”列表框中的“标题/编码”,在右侧的“标题”文本框中输入“天池行”,如图5-17所示。
图5-页面属性对话框
⑪单击“确定”按钮。
5.浏览网页
一般情况下网页的编辑效果和在浏览器中显示的效果是不一样的。
Dreamweaver允许用户在网页编辑的过程中随时查看设计效果,以方便用户及时地进行修改。
查看网页在浏览器中的显示效果的方法有三种:
(1)依次单击菜单栏单击“文件/在浏览器中预览/IExplore”子命令
(2)直接按【F12】键
(3)单击“文档”工具栏中的“在浏览器中预览/调试”按钮
6.图像的设置
网页中可以通过添加图像来丰富页面效果。
网页中支持的图像格式主要有GIF、JPEG、PNG等,其中使用最为广泛的是GIF和JPEG图像。
(4)插入图像
①在文本“尚能复来。
.....最让人心动的,还是那泓湖水。
”之后单击鼠标,确定图像的插入点。
②单击“常用”工具栏中的图像按钮
,如图5-18所示。
图5-常用工具栏
③弹出“选择图像源文件”对话框,单击“查找范围”列表框,选择待添加图像的路径并选择图像文件。
这里依次选择“我的文档/图片收藏/示例图片”中的Bluehills.jpg文件,如图5-19所示。
图5-选择图像源文件
④单击“确定”按钮,此时会弹出对话框询问是否“愿意将选中文件复制到根文件夹之中”,单击“是”,如图5-20所示。
图5-询问
⑤在弹出的“复制文件为”对话框中输入复制图像的文件名,并确定保存路径。
Dreamweaver默认保存路径为网站的根文件夹myweb,如图5-21所示。
图5-保存复制图像文件
⑥单击“保存”按钮。
⑦在弹出的“图像标签辅助功能属性”对话框中,可以输入“替换文本”的内容以及对应的链接,也可以省略这些信息,留待以后再设置,如图5-22所示。
图5-设置图像标签
⑧单击“确定”按钮。
此时可以在网页中看到已经插入的图像,由于图像尺寸过大,显示效果不理想,因此需要对插入图像做属性设置。
(5)设置图像属性
①单击图像,属性面板中给出了图像的相关信息,如图5-23所示。
图5-图像属性面板
②修改图像的大小:
宽300,高150。
③设置水平边距和垂直边距都为0,保证图像和文字紧密环绕。
④设置图像边框宽度为0。
⑤设置图像对齐方式:
单击属性面板“对齐”列表框,选择“右对齐”。
⑥保存网页文档。
⑦依次单击“在浏览器中预览/调试”按钮
,查看浏览器中效果。
当鼠标指向图像时,出现替换文本内容。
(6)创建鼠标经过图像
①在文本末尾添加一新行,单击以确定图像的插入点。
②单击图像按钮
右侧的小三角,在弹出的下拉列表中选择“鼠标经过图像”命令,弹出“插入鼠标经过图像”对话框,如图5-24所示。
图5-插入鼠标经过图像对话框
③在“图像名称”文本框中为新图像命名为swap。
④单击“原始图像”文本框右侧的“浏览”按钮选择原始图像。
这里依次选择“我的文档/图片收藏/示例图片”中的Sunset.jpg文件,并将它复制到本地根文件夹myweb中。
⑤单击“鼠标经过图像”文本框右侧的“浏览”按钮选择切换图像。
这里依次选择“我的文档/图片收藏/示例图片”中的Winter.jpg文件,同样将它复制到本地根文件夹myweb中。
⑥单击“确定”按钮。
⑦单击swap图像,修改图像宽为200,高为100。
⑧保存网页后,单击按钮
,在浏览器中查看效果,当鼠标经过图像swap时,图像出现切换。
网页a1.html制作完成,在浏览器中的显示效果如图5-25所示。
图5-网页a1.html的浏览效果
7.表格的设置
表格是网页布局中最有效的工具。
通过它可以轻松地在页面中进行垂直和水平的布局,能将图片、文本、数据和表单等元素有序的显示在网页上,使网页在不同分辨率的显示器里都能保持其原有的布局,而且在不同的浏览器平台也有较好的兼容性。
下面来制作一个模拟淘宝网的首页。
(7)插入表格
①依次单击菜单栏单击“文件/新建”命令,出现“新建文档”对话框,创建一个新的html网页文档。
②保存该网页,网页命名为a2.html,保存路径为E盘的根文件夹myweb之中。
③单击“常用”工具栏中的表格按钮
,弹出“表格”对话框,设置行数为4,列数为5,表格宽度为800像素,其他值默认,如图5-26所示。
图5-表格对话框
④单击“确定”按钮后,在页面中添加一个4行5列的表格。
(8)设置表格属性
①单击插入的表格,查看表格属性面板,设置填充为0,间距为0,边框为0,对齐为“居中对齐”,如图5-27所示。
图5-表格属性面板
②单击表格中第一行第一列单元格,单击属性面板上的“拆分单元格”按钮
,弹出“拆分单元格”对话框,选择“行”单选框,行数为2,如图5-28所示。
图5-拆分单元格对话框
③单击表格中第一行第二列的单元格,按住左键向右拖动,选中后4列单元格,单击属性面板上的“合并单元格”按钮
,将第2至5列单元格合并为一个单元格。
④选中表格中第二行的5个单元格,合并为一个单元格。
⑤选中表格中第三行的5个单元格,合并为一个单元格。
(9)填充表格
①单击左上角第一个单元格,输入“淘宝网”。
②选中文本“淘宝网”,在属性面板上设置字体为“幼圆”,大小为48像素,颜色为#FF6600,加粗
,垂直对齐为“底部”,宽为150。
③在“淘宝网”下侧的单元格中输入“-2010消费者年-”。
设置字号大小为14像素,颜色为#FF6600,加粗,水平居中对齐
,垂直对齐为“顶端”,高40。
④单击第一行右侧的合并单元格,单击属性面板上的“背景”文本框右侧的“单元格背景”按钮
,选择背景图像bg.jpg,并将其保存到根文件夹myweb之中。
第一行单元格的设置效果如图5-29所示。
图5-填充表格
⑤将网页a2.html的编辑窗口抓图复制、粘贴到电子实验报告四指定位置。
(10)插入嵌套表格
①单击第二行合并单元格,单击“表格”按钮,插入一个1行5列、宽度为560像素的嵌套表格。
②单击嵌套表格,设置表格属性面板中填充为0,间距为0,边框为0。
③在嵌套表格中的第一个单元格中输入“首页”。
在属性面板上设置字体为“幼圆”,大小为16像素,颜色为#FFFFFF,加粗,水平对齐为“居中对齐”,垂直对齐为“居中”,高为35,背景颜色为#FF6600,文本属性面板如图5-30所示。
图5-文本属性面板
④在嵌套表格中剩下的4个单元格中分别输入“淘宝商城”、“电器城”、“导购资讯”、“吃喝玩乐”。
⑤选中上述4个单元格,设置字体大小为14像素,颜色为#FF3300,加粗,水平对齐“居中对齐”,垂直对齐为“底部”,宽为110,文本属性面板如图5-31所示。
图5-文本属性面板
(11)插入水平线
①单击外层表格的第三行合并单元格,依次选择菜单栏“插入/HTML/水平线”。
(12)插入图像
①单击表格第四行的第一个单元格,单击“常用”工具栏的图像按钮
,插入图像pic1.gif,并将其保存到根文件夹myweb之中。
②同理,在第四行剩下的表格中分别插入图像pic2.gif、pic3.gif、pic4.gif、pic5.gif,并将它们保存至根文件夹myweb之中。
③选中第四行的5个单元格,在属性面板中设置水平对齐为“居中对齐”,宽为160。
至此,网页a2.html制作完成,单击按钮
,浏览器中的显示效果如图5-32所示。
图5-网页a2.html的浏览效果
8.设置对象的超链接
一个网站由多个页面组成,这些页面彼此依据超链接来确定相互的导航关系。
超链接由链接载体和链接目标组成。
链接载体可以是文本、图像、图像热区、动画等,而链接目标可以是任意的网络资源,如:
页面文档、程序、Email等。
(13)文本链接
①依次单击菜单栏单击“文件/打开”命令,在弹出的“打开”对话框中选中网页文件a1.html,打开该文件。
②选中标题文本“天池行”,在属性面板的“链接”文本框右侧单击“浏览文件”按钮
。
在弹出的“选择文件”对话框中选中网页文件a2.html,如图5-33所示。
图5-选择文件对话框
③单击“确定”按钮。
④在浏览器中查看网页a1.html。
鼠标单击文本“天池行”,页面跳转到“淘宝网”页面,即a2.html,实现超链接。
(14)图像链接
①单击网页a1.html中的图像swap。
②在图像属性面板中的“链接”文本框中输入:
,在“目标”列表框中选择“_blank”,如图5-34所示。
图5-图像属性面板
③在浏览器中查看网页a1.html。
鼠标单击图像swap,在一个新页面中打开武汉工程大学的首页,实现超链接。
(15)图像热区链接
①依次单击菜单栏单击“文件/打开”命令,在弹出的“打开”对话框中选中网页文件a2.html,打开该文件。
②单击图像pic2.gif。
③在图像属性面板中单击椭圆形热点工具
,移动鼠标到图像上,鼠标变成十字形光标“十”,按下鼠标左键在图像中创建一个填充蓝色阴影的椭圆。
④单击该椭圆,在“热点”属性面板的“链接”文本框中输入a1.html,“目标”列表框中选择“_self”,如图5-35所示。
图5-建立热点链接
⑤单击按钮
,在浏览器中查看网页a2.html。
鼠标单击第二幅图像的热点区域,页面跳转到“天池行”,即a1.html,实现超链接。
(16)Email链接
①单击图像pic4.gif。
②在图像属性面板中的“链接”文本框中输入:
mailto:
xx@xx.xx,这里********必须是一个有效的Email地址,如图5-36所示。
图5-图像属性面板
③单击按钮
,在浏览器中查看网页a2.html。
鼠标单击第四幅图像,打开邮件收发软件,可以直接向********发送邮件。
9.完成电子实验报告
将以上所作操作的文件以学号和姓名为文件名(如:
201150001张三DW实验4原稿)存盘,并将操作的结果按要求复制并粘贴到电子实验报告四上并保存。
实验2多媒体元素的应用
一.实验目的和要求
1.熟悉Flash动画的设置
2.了解声音的设置
3.了解视频的设置
二.实验内容和步骤
在网页中除了文字、图像这些基本元素以外,还可以包括很多其它的媒体元素,如Flash动画、音频文件等。
10.插入Flash动画
(17)准备工作
①依次单击菜单栏“文件/新建”命令,出现“新建文档”对话框,创建一个新的html网页文档。
②保存该网页,网页命名为a3.html,保存路径为E盘的文件夹myweb之中。
③单击“常用”工具栏中的表格按钮
,弹出“表格”对话框,设置行数为5,列数为2,表格宽度为700像素,单元格边距为0,单元格间距为0,如图5-37所示。
图5-表格对话框
④单击“确定”按钮后,在页面中添加一个5行2列的表格。
(18)插入Flash文件
①在表格的第一行第一列的单元格中输入文字“Flash文件”,设置字体为“华文新魏”,字号大小为24像素,颜色为蓝色,水平为“居中对齐”,宽200,如图5-38所示。
图5-单元格属性面板
②在表格的第一行第二列的单元格中单击,确定插入点。
③依次单击菜单栏“插入/媒体/Flash”命令,出现“选择文件”对话框,在“查找范围”列表框中单击,选择Flash文件flashword.swf,并将其保存到根文件夹之中。
④单击“确定”按钮后,在单元格中出现灰色的F图标
。
⑤单击F图标,出现Flash属性面板,单击“播放”按钮,查看Flash内容。
⑥设置Flash的宽为500,高为300。
⑦选中Flash属性面板上的“循环”和“自动播放”复选框,保证网页中的Flash文件能够循环和自动播放,如图5-39所示。
图5-Flash属性面板
⑧单击按钮
,在浏览器中查看网页a3.html,插入的Flash在页面中正常显示。
(19)插入Flash按钮
①在表格的第二行第一列的单元格中输入文字“Flash按钮”,设置字体为“华文新魏”,字号大小为24像素,颜色为蓝色,水平为“居中对齐”。
②在表格的第二行第二列的单元格中单击,确定插入点。
③依次单击菜单栏“插入/媒体/Flash按钮”命令,出现“插入Flash按钮”对话框,选择样式为“BlueWarpar”,按钮文本内容为“图像素材”,字体为“黑体”,大小14,如图5-40所示。
图5-插入Flash按钮对话框
④单击“确定”后,在页面中插入蓝色的Flash水晶按钮。
⑤单击按钮
,在浏览器中查看网页a3.html,鼠标指向Flash按钮时,产生动画效果。
(20)插入Flash文本
①在表格的第三行第一列的单元格中输入文字“Flash文本”,设置字体为“华文新魏”,字号大小为24像素,颜色为蓝色,水平为“居中对齐”。
②在表格的第三行第二列的单元格中单击,确定插入点。
③依次单击菜单栏“插入/媒体/Flash文本”命令,出现“插入Flash文本”对话框,选择字体为“FrenchScriptMT”,大小为35,颜色为蓝色,转滚颜色为红色,文本内容为“Happynewyear!
”,背景色为黄色,如图5-41所示。
图5-插入Flash文本对话框
④单击“确定”后,在页面中插入黄底蓝字的Flash文字。
⑤单击按钮
,在浏览器中查看网页a3.html,鼠标指向Flash文字时,文字变成红色显示。
11.插入声音文件
①在表格的第四行第一列的单元格中输入文字“播放音乐”,设置字体为“华文新魏”,字号大小为24像素,颜色为蓝色,水平为“居中对齐”。
②在表格的第四行第二列的单元格中单击,确定插入点。
③依次单击菜单栏“插入/媒体/插件”命令,出现“选择文件”对话框,选择音频文件tian.mp3,并将其保存到根文件夹之中。
④单击“确定”按钮后,在单元格中出现灰色图标
。
⑤单击灰色图标,出现“插件”属性面板,设置宽为200,高为45,如图5-42所示。
图5-插件属性面板
⑥单击“参数”按钮,在弹出的“参数”对话框中单击“+”按钮,在“参数”列中输入“true”,如图5-43所示。
图5-参数设置
⑦单击按钮
,在浏览器中查看网页a3.html,出现多媒体播放器,自动播放音频文件。
12.插入视频文件
①在表格的第五行第一列的单元格中输入文字“播放视频”,设置字体为“幼圆”,字号大小为24像素,颜色为蓝色,水平为“居中对齐”。
②在表格的第五行第二列的单元格中单击,确定插入点。
③依次单击菜单栏“插入/媒体/插件”命令,出现“选择文件”对话框,选择视频文件ad.mpeg,并将其保存到根文件夹之中。
④单击“确定”按钮后,在单元格中出现灰色图标
。
⑤单击灰色图标,出现“插件”属性面板,设置宽为500,高为300,如图5-44所示。
图5-插件属性面板
⑥单击“参数”按钮,在弹出的“参数”对话框“参数”列中输入“true”。
⑦在浏览器中查看网页a3.html,出现多媒体播放器,自动播放视频文件。
⑧单击按钮
,将网页a3.html的浏览器窗口抓图复制、粘贴到电子实验报告四指定位置。
至此,网页a3.html制作完成,在浏览器中的显示效果如图5-45所示。
图5-网页a3.html的浏览效果
13.完成电子实验报告
将以上所作操作的文件以学号和姓名为文件名(如:
201150001张三DW实验4原稿)存盘,并将操作的结果按要求复制并粘贴到电子实验报告四上并保存。
实验3网页特效的制作
一.实验目的和要求
1.熟悉行为面板的使用
2.了解一些网页特效的制作方法
二.实验内容和步骤
通过Dreamweaver的行为面板,可以轻松地创建网页中许多常见的网页特效。
这里介绍了下拉菜单、弹出信息、打开浏览器窗口、播放音乐、控制Flash播放等特效的制作方法。
制作之前,先做一些准备工作。
14.准备工作
①依次单击菜单栏“文件/新建”命令,出现“新建文档”对话框,创建一个新的html网页文档。
②保存该网页,网页命名为a4.html,保存路径为E盘的文件夹myweb之中。
③单击“常用”工具栏中的表格按钮
,弹出表格对话框,设置表格:
行数为4,列数为1,表格宽度为700像素,边框粗细为0,单元格边距为0,单元格间距为0,如图5-46所示。
图5-表格对话框
④单击第一行单元格,输入文字“网页特效”,设置字体为“华文新魏”,字号大小为30像素,加粗,颜色为蓝色,水平对齐为“居中对齐”,属性面板如图5-47所示。
图5-文本属性面板
⑤单击第二行单元格,依次单击菜单栏“修改/表格/拆分单元格”命令,出现“拆分单元格”对话框,设置拆分“列”,列数为4,如图5-48所示。
图5-拆分单元格对话框
⑥单击“确定”按钮,第二行单元格被拆分为4个单元格。
15.创建下拉菜单
①单击第二行左侧单元格,设置宽为175。
②单击“插入”→“图像”命令,出现“选择图像源文件”对话框,选择图像文件button1.gif,并将其保存到根文件夹之中。
③单击“窗口”→“行为”命令,将行为面板显示出来,如图5-49所示。
图5-行为面板
④单击图像button1.gif,单击行为面板上的“添加行为”按钮
,在弹出的下拉菜单中选择“显示弹出式
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver 网页 设计 实验