Dreamweaver实例操作步骤Word文件下载.docx
《Dreamweaver实例操作步骤Word文件下载.docx》由会员分享，可在线阅读，更多相关《Dreamweaver实例操作步骤Word文件下载.docx（13页珍藏版）》请在冰点文库上搜索。
图4-1-5创建新文档
文档的创建有两种方式，一是通过“常规”选项卡直接创建，二是通过现有模板创建新文档。
在“类别”列表中选择文档的类别，有“基本页”、“动态页”、“模板页”、“其他”、“CSS样式表”或“框架集”等；
然后从右侧的列表中选择要创建的文档的类型。
选择“基本页/HTML”，单击“创建”按钮创建一个HTML页面。
新文档在“文档”窗口中打开，选择“文件/保存”命令，将该文档保存为index.html。
（3）页面属性的设置
①设置标题。
在“文档”工具栏的“标题”文本框中输入标题，当用户浏览页面时，页面标题会在浏览器标题栏显示，可以帮助了解页面中的内容（图4-1-6）。
图4-1-6设置页面标题
②设置背景图片或颜色。
选择菜单“修改>
页面属性”命令或单击属性面板上的“页面属性”按钮，弹出“页面属性”对话框（图4-1-7）。
选择“外观”分类，单击“背景图像”按钮
给页面设置背景图像，从弹出的对话框中选择事先做好的背景图；
“重复”用来设置背景图像在页面上的显示方式，包括：
不重复、重复、横向重复、纵向重复，默认为图像在页面内重复显示，确定后可以看到页面背景。
图4-1-7设置页面背景颜色
也可以单击“背景颜色”按钮
，在调色板中选择一种颜色作为页面背景颜色。
③设置页面边距。
页面中的内容和浏览器边框之间存在一定的默认距离，打开图4-1-7所示的页面属性对话框，分别将页面左边距、上边距设为0像素，使页面内容靠浏览器的顶边和左边对齐。
④设置背景音乐。
首先找一个mid格式的背景音乐文件，拷贝到站点文件夹myweb下的sound子文件夹。
在标签下面的“文档”工具栏中点一下“拆分”标签，窗口分成两部分，上边是代码，下边是文档；
在代码窗口中，找到<
body>
标签，在它后面点一下鼠标，然后按一下回车键插入一个空行，切换到英文输入法状态，输入代码：
<
bgsoundsrc="
sound/ailisi.mid"
loop="
-1"
>
src表示背景音乐路径及文件名，loop值设为-1表示无限次循环播放。
保存文件，按下F12快捷键或在文档工具栏右侧点击预览按钮
，选择“预览在IExplore6.0”命令就可以看到页面效果，单击浏览器工具栏上的停止按钮可以使音乐停止播放，点刷新重新播放。
（4）文本的输入与编辑
要向Dreamweaver文档添加文本，可以直接在Dreamweaver文档窗口中键入文本，也可以从word文件或其他文本文件中复制，还可以直接从其他文档导入文本。
对文本的编辑，可以选中要编辑的文字后在“属性面板”中对文字进行相应设置，包括格式、字体、大小、颜色、对齐方式等。
操作步骤如下：
在页面中输入文字“现代教育技术”，用鼠标选中后，属性面板中显示的是文字的属性。
在“字体大小”中选择字号或者直接输入一个数值，在此输入45，单位为“像素”，如图4-1-8：
图4-1-8文字属性面板
在属性面板中，单击
在调色板中选择蓝颜色，改变字体颜色。
单击
按钮，将文字加粗显示。
按钮，使文字倾斜。
按钮，使文字居中显示。
字体类型采用的是默认字体，一般为宋体。
单击右侧下拉按钮，在下拉列表中显示的都是英文字体，要设置其他字体需要编辑字体列表。
单击列表中最后一项“编辑字体列表”，弹出“字体列表”对话框，如图4-1-9所示：
图4-1-9编辑字体列表对话框
在“可用字体”中选择“隶书”，单击
按钮，将选中的字体添加到“选择的字体”框中。
如果要再添加第二种字体，先单击
再选择字体。
添加完后，单击“确定”按钮，此时所添加的字体出现在属性面板的选择字体下拉列表中。
（5）插入水平线
在文字“现代教育技术”后，按下回车键换行，下方插入一条水平线，使标题文字和内容分开。
在“插入”工具栏中，单击“常用”右侧按钮，选择“HTML”选项，选择“水平线”按钮
，就可以在光标位置插入一条水平线（或者选择菜单命令“插入>
HTML>
水平线”亦可）。
选中水平线，在属性面板中可以修改水平线的宽度、高度、对齐方式及阴影设置。
阴影表示水平线是空心的，去掉后则为实心。
要改变水平线颜色，则需要单击代码视图按钮
，在代码中找到水平线标记<
hr>
，在其后添加color属性，如：
hrcolor=”green”>
，Dreamweaver中不能马上看到设置的颜色效果，需要按下F12键在浏览器中观看。
按照同样的方法，在页面中再插入一条水平线，宽度、高度、颜色和上面水平线设置为相同，并去掉阴影。
在第二条水平线下方，输入版权信息“版权所有曲阜师范大学信息技术与传播学院”。
在属性面板中，设置文字居中对齐。
（6）设置滚动字幕
在Dreamweaver中设置滚动字幕，需要在代码视图中手动书写代码。
将光标放在第一条水平下方，然后单击代码视图按钮进入代码视图，输入代码<
marquee>
/marquee>
，在二者之间输入滚动的文字，如：
欢迎您光临《现代教育技术》课程网站<
按下F12键预览页面，即可看到文字在页面中自右向左滚动。
（7）使用表格进行内容排版
表格在网页设计中有两种作用：
数据存放和页面内容排版。
在使用表格排版时，首先确定页面内各个区域插入的内容及所占的区域大小，再用表格进行区域划分，然后在相应单元格中插入内容，如图4-1-10中所示课程首页效果。
图4-1-10课程首页预览效果
为了实现页面中的效果，下面在滚动字幕下方插入一个表格用来存放图片和文字，步骤如下：
选择“插入/表格”命令或选择“常用”插入栏中的插入表格按钮
，弹出表格对话框，如图4-1-11所示。
输入行数2，列数2，宽度600像素，边框粗细、单元格边距、间距都设为0像素。
图4-1-11表格对话框
选中表格，可以在属性面板中对表格属性进行设置，包括行数、列数、间距、边框颜色、背景等，如图4-1-12。
图4-1-12表格属性
将鼠标放在表格的第一行左侧，出现
时单击鼠标，此时第一行单元格被选中，在表格内单击鼠标右键，弹出菜单，选择“表格/合并单元格”命令，将第一行两个单元格合并为一个，如图4-1-13所示。
图4-1-13右键菜单“表格”
在合并后的单元格中输入“课程简介”、“课程大纲”、“教师队伍”、“电子讲义”、“教学录像”等栏目，使文字居中显示，并加粗，效果如图4-1-10所示。
（8）图像的插入与编辑
一个页面光有文本是无法吸引人的，插入一幅图片可以使页面更加生动，图文并茂。
Dreamweaver中常用的的图片格式有.gif、.jpg、.png。
为了保持良好的制作习惯，一般在站点文件夹D:
\myweb下建立一个名为“images”的文件夹，将网页中需要的图片都放在这个文件夹下（图4-1-14）。
图4-1-14文件面板
将光标置于表格第二行的左侧单元格，选择菜单“插入/图像”命令或单击“常用”插入栏中的图像按钮
，在弹出的对话框中选定图片，“确定”后图片被插入到单元格中。
选中图片，在属性面板中可以对图片的宽度、高度、对齐方式等进行设置（图4-1-15）。
图4-1-15图像属性设置
选中图像后，四周出现黑色小方框表示的控制点，鼠标放在控制点上变成双向箭头，将图像调整到合适大小。
（9）换行和空格
图像设置好后，在表格第二行的右侧单元格中输入一段文字，如果是中文，到行末会自动换行；
如果是英文，则不会自动换行，可以按下Enter键或Shift+Enter键换行。
Dreamweaver中只能插入全角空格，文字中加空格，则需要先输入法切换到全角状态然后再输入。
（10）超链接的创建
网页的内容是非线性的，通过超链接可以实现各个页面之间的自由跳转。
超链接的对象可以是文字，也可以是图片，链接的地址有三种：
本地文件、网站URL、E-Mail地址。
下面给五个栏目分别设置超链接，首先选择“文件/新建”命令，分别创建五个HTML页面，保存为“jianjie.html”、“dagang.html”、“jiaoshi.html”、“jiangyi.html”、“luxiang.html”。
①文字超链接。
选中需要设置超链接的文字“课程简介”，单击“属性面板”中“链接”列表框右侧的按钮
，出现如图4-1-16所示对话框，选择要链接的文件“jianjie.html”，单击“确定”，文字的超链接就加完了。
图4-1-16 选择链接文件
在页面上点一下，取消文字选中状态，这时看到加链接文字变为蓝色，并且带下划线。
将光标定位在链接文字中，在属性面板上可以看到其链接文件，单击“目标”列表框，可以看到有四个选项，如图4-1-17：
_blank：
表示新开一个窗口打开链接文件。
_parent：
表示在当前窗口的父窗口打开链接文件。
_self：
默认值，表示在当前窗口打开链接文件。
_top：
表示在整页窗口打开链接文件，在框架网页中使用。
在此，设置目标属性值为_blank，在新窗口打开页面。
图4-1-17属性面板上设置文字超链接
按照上述方法，分别给“课程大纲”、“教师队伍”、“电子讲义”、“教学录像”文字设置超链接。
②图像超链接。
选中网页中的图片，在属性面板中设置目标文件，或直接在“链接”文本框中输入目标地址，如输入“”，用图形做链接时，其边框值一般都设为0（图4-1-18）。
图4-1-18用图片作超链接
③设置超链接的样式
默认状态下，浏览器将未访问过的超链接设置为蓝色，访问过的超链接设置为紫红色，而且带有下划线，要改变设置操作步骤如下：
●选择菜单命令“修改/页面属性”或在属性面板单击“页面属性”按钮
，打开页面属性对话框，选择“链接”分类选项，如图4-1-19所示：
图4-1-19页面属性对话框
●链接颜色：
表示未访问过的超链接颜色，单击右侧按钮，在调色板中选择黑色。
●已访问链接：
表示访问过后的超链接颜色，设置为蓝色。
●变换图像链接：
表示鼠标移动超链接上方时的颜色，设置为红色。
●活动链接：
表示超链接被激活，即在超链接上按下鼠标时的颜色，在此采用默认设置。
●下划线样式：
选择“仅在图像变换时显示下划线”，只有当鼠标移动超链接文字上方时才显示下划线，其他状态均不显示。
设置完成后，单击“确定”，保存网页，按下F12键即可在浏览器中看到页面效果。
2．框架网页的制作
在Dreamweaver中，除了可以设计一般的网页外，还可以设计一种称为“框架网页”的特殊网页。
简单的说，就是把一个浏览器窗口分成几个栏，每个栏中可以显示一个页面。
网络课程中导航非常重要，导航的方式有很多，如导航按钮、导航条、网站地图等。
所谓“导航按钮”就是作者定义的、设置了超链接的对象，如：
文字、图片等。
这些按钮可以引导浏览者进入相关链接。
导航按钮通常显示在框架页的某一个分栏中，且在载入该框架页后始终可见。
点击导航按钮，它链接的页面可以在框架页的其它位置显示，如图4-1-27所显示的框架网页效果。
图4-1-27框架网页效果
创建图4-1-27所示框架网页的步骤如下：
（1）创建框架集
选择菜单命令“文件/新建”命令，打开“新建文档”对话框，在“类别”中选择“框架集”，然后从右侧选择框架集结构，如图4-1-28设置：
图4-1-28新建文档对话框
单击“创建”按钮，弹出“框架标签辅助功能属性”对话框，单击“确定”按钮，Dreamweaver中出现含有框架的网页。
（2）保存框架集
框架集是由多个页面构成的，保存时每个页面都要保存。
使用“文件/保存全部”命令，弹出“另存为”对话框，此时文档窗口中显示的虚线边框表示当前保存文档的范围。
选择保存位置，输入文件名：
main.html，如图4-1-29。
图4-1-29保存框架集
单击“保存”按钮后，再次弹出“另存为”对话框，虚线框移至右侧，输入文件名right.html。
单击“保存”后，再次弹出“另存为”对话框，虚线框移至左侧，输入文件名left.html。
单击“保存”后，再次弹出“另存为”对话框，虚线框移至上方，输入文件名top.html。
连续保存四次，完成框架集的保存。
（3）编辑框架网页
将鼠标放在上方框架页面top.html中，插入logo图片，并设置该页面的背景颜色，将左边距和上边距设为0像素。
拖动框架边线，可以改变框架范围，使图片处于恰当的位置。
按照上述操作方法，参照图4-1-27分别在left.html、right.html页面中插入相应文字和图片。
（4）设置导航链接
左侧页面left.html为导航页面，显示一栏导航链接。
当单击某个链接时，目标文件应该在right.html位置区域显示，要实现此操作，必须将超链接的目标属性设置为目标框架的名称。
选择“窗口/框架”，在面板组右下角打开“框架面板”，可以在此选择每个框架查看框架的名称，可以看到right.html所在的框架名为mainFrame，如图4-1-30。
图4-1-30框架面板
在left.html中，选中“课程简介”文字，在属性面板中设置超链接文件，并在“目标”右侧下拉列表中选择目标框架“mainFrame”，即链接文件显示的位置，如图4-1-31。
图4-1-31选择目标框架
按照同样操作方法，设置其他导航链接的目标属性。
设置完成后，预览网页，运行效果如图4-1-27所示。
升级会员 