Dreamweaver实例Word格式文档下载.docx
- 文档编号:21469375
- 上传时间:2023-01-30
- 格式:DOCX
- 页数:13
- 大小:1.62MB
Dreamweaver实例Word格式文档下载.docx
《Dreamweaver实例Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《Dreamweaver实例Word格式文档下载.docx(13页珍藏版)》请在冰豆网上搜索。
(7)标签选择器:
显示环绕当前选定内容的标签的层次结构。
单击该层次结构中的任何标签可以选择该标签及其全部内容。
(8)文件面板:
可以管理文件和文件夹,能访问本地磁盘的全部文件,类似于Windows资源管理器。
(9)面板组:
是组合在一个标题下面的相关面板的集合,包括设计、代码、应用程序、历史记录、框架等面板。
单击组名称左侧的展开箭头可以展开相应面板。
2.课程网站主页的创建
下面以制作《现代教育技术》课程网站为例,介绍Dreamweaver的基本操作。
(1)定义本地站点
开始用Dreamweaver制作网页时,首先要定义一个本地站点。
作为一个网站,里面有很多网页文件、图片,甚至Flash动画等,如果不进行管理归档就无法方便地进行网页发布。
定义本地站点,就是在硬盘上建立一个目录,将所有的网页和相关的文件都放在里面,以便进行网页的制作和管理。
①在D盘根目录下新建一个文件夹,命名为“myweb”,这个文件夹将作为网站的站点文件夹,以后所有的网页文件、素材都放在这个文件夹下。
②选择“站点/新建站点”命令(或“站点/站点管理”命令,单击“新建”按钮),弹出“定义站点”向导(图4-1-3所示),输入站点的名字“现代教育技术”,单击“下一步”;
图4-1-3 定义本地站点
③选择“否,不想使用服务器技术”;
④在文件存储位置文本框中,设置文件存放路径:
单击输入框右侧的文件夹图标,找到刚才在D盘新建的myweb文件夹,单击“选择”按钮。
⑤“如何连接到远程服务器”选择“无”;
⑥单击“完成”按钮,站点的名字就出现在站点管理器中,如图4-1-4所示。
图4-1-4站点文件管理窗口
(2)创建新文档
选择“文件>
新建”命令,出现“新建文档”对话框,如图4-1-5所示。
图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键即可在浏览器中看到页面效果。
3.框架网页的制作
在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保存框架集
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver 实例