1、第八章 Dreamweaver8.0简介,学 习 导 航,8.1 Dreamweaver8.0的工作界面 8.2 常用工具栏 8.3 创建和保存网页 8.4 文本的输入和编辑 8.5 网页课件实例,8.1 Dreamweaver8.0的工作界面,1、首次启动Dreamweaver8时系统会弹出如图所示的工作设置对话框,【设计者】为用户提供了一种“所见即所得”的可视化的创建环境。【代码编写者】主要为用手写代码的用户设计的。对于初级使用者一般选取选择。注:【设计者】工作设置,选择工作界面后,单击“确定”按钮。,返回,退出,8.2 常用工具栏1,1、菜单栏-菜单栏包含10类主菜单,它涵盖了软件的绝大
2、部分功能。,2、插入栏-插入栏采用下拉菜单形式显示,包含了各种类型的“对象”插入到文档中的按钮。,返回,退出,下一页,8.2 常用工具栏2,3、文档工具栏文档工具栏如图8.2-3所示,通过快捷按钮可以控制文档的视图显示。文档窗口中,单击文档面板上的【设计】按钮可以查看设计的网页画,单击【代码】按钮可以查看和编辑网页代码,单击【拆分】按钮还可以同时查看代码和设计画面。,4、文档窗口:文档窗口是网页设计区,在这个区域将显示设计的网页或代码。 5、面 板 组:面板组是将许多常用的功能进行了适当的分类,并以面板叠加的形式放置于窗口的右侧,点击可以展开相应的面板。 6、“文件”面板:“文件”面板是对组成
3、网站的网页、图像和程序等文件进行管理。,返回,退出,下一页,8.2 常用工具栏 3,7、属性面板:文档窗口中的设计页面上的某一页面元素时,属性面板就会显示相关信息和参数,并可对其进行修改和设定。属性面板是最常用的一个面板,无论编辑那个页面元素的属性,都要用到它。属性面板的内容也会随着不同元素而改变。,返回,退出,8.3 创建和保存网页-创建网页,1、创建网页 创建网页有3种方法: (1)启动Dreamweaver 8的时创建网页,选择“创建项目”中的HTML,就可以创建一个新的网页。 (2)在【文件】菜单中选择“新建”命令。在弹出的“新建文档”对话框中“常规”选项中,选择“基本页”,在“基本页
4、”区域下选择 “HTML选项”,然后单击“确定”,即可创建一个新的网页。 (3)在站点窗口直接创建网页。在“文件”面板中打开本地站点,然 后单击右键,在弹出的快捷菜单中,选择“新建文件”命令,即 可创建一个新的网页。,返回,退出,下一页,8.3 创建和保存网页-保存网页,如果网页编辑完成或已经告一段落,需要保存,根据不同的需要,保存的方法也不同。打开【文件】菜单,要保存当前文档选择“保存”命令;如果当前文档已经保存过,可选择“另存为”命令;如果在编辑时已经打开了多个文档,希望将所有的文档进行保存,则选择“全部保存”命令。,返回,退出,8.4 文本的输入和编辑,1、输入文本 2、插入图像 3、表
5、格的应用 4、插入多媒体动画 5、插入Shockwave 影片 6、超级链接 7、建立外部链接 8、建立内部链接 9、Email超链接 10、锚记链接 11、链接到图片或多媒体文件,返回,退出,1、输入文本,将鼠标的光标定位在要添加文本的地方,即可以直接输入或在其他应用程序中的文本进行复制,再粘贴到Dreamweaver 8的文档窗口中。 (1)、文本的编辑在文档窗口输入文本时,文字的字体、字号、颜色等属性都是系统默认的,根据实际需要,可以在文本属性面板对其进行相应的设置。 (2)、段落格式在属性面板中可以对文本进行相关的设置,也可以对段落进行设置。,返回,退出,2、插入图像,在Dreamwe
6、aver 8中可以直接插入图像。网页中常用的图像格式主要有三种GIF、JPEG、PNG格式 a)光标定位要插入图片的位置。 b)在插入工具栏上,点击插入图像按钮。打开选择图像源文件对话框,选择要插入的图片,点击确定按钮即可插入图像。 c)插入后的图片以图片的原始大小插入,选中图片调出图片属性面板,可以在图片属性面板中进行修改。,返回,退出,3、表格的应用1,在制作网页时经常会用到表格,在Dreamweaver 8可以迅速使用户建立起表格及对表格的编辑。 在网页中插入表格的方法有两种,具体方法如下: 1、利用插入工具栏上的快捷键插入表格。 (1)、单击插入工具栏表格按钮。 (2)、在弹出的表格属
7、性框中,设置好相应的参数,点击“确定”按钮,完成表格的输入。,返回,退出,下一页,3、表格的应用2,2、利用菜单输入表格 (1)在【插入】菜单中执行插入表格命令 。 (2)在弹出的表格属性框中,设置好相应的参数,点击“确定”按钮,完成表格的输入 。,返回,退出,下一页,3、表格的应用3,3、在表格中添加内容 A、添加文本 1)用鼠标选择要输入内容的单元格。 2)直接输入文本或将复制的文本粘贴在单元格中。 3 )按Tab键将光标移动到下一个单元格,继续添加文本。 B、添加图片 1)用鼠标选择要输入内容的单元格。 2)单击插入工具栏中按钮,或执行菜单的“插入图片”命令。 3)打开选择图像源文件对话
8、框,选择要插入的图片,点击确定按钮即可插入图像。 (4)、表格的编辑 表格创建完成以后可以利用属性面板进行编辑。 1)选择创建完成的表格,调出表格属性面板。 2)根据表格属性面板上提供的参数可以对表格的相关属性进行设置。,返回,退出,4、插入多媒体动画,在Dreamweaver 8中,用户可以方便的插入和编辑多媒体文件和对象。 1)在文档窗口用鼠标定位好要插入flash动画的位置。 2)单击插入工具栏中的右侧的三角按钮,选择flash,在弹出的“文件选择”对话框中。选择要插入的文件。 3)选择好文件,单击“确定”按钮,flash文件即可插入,插入的文件是以带字母F的灰色框显示,按F12预览时才
9、能正常显示相应的效果。 4)插入FLASH文件完成后,可以在属性面板中,对插入的 flash 文件进行相应的设置。,返回,退出,5、插入Shockwave 影片,Shockwave一个很普及的网页浏览器的插件,是网页上用于交互式多媒体一种标准格式,能使多数的多媒体文件快速下载,也可以在浏览器中进行播放。 1)在文档窗口用鼠标定位好要插入Shockwave 影片的位置。 2)单击插入工具栏中的右侧的三角按钮,选择Shockwave,在弹出的“文件选择”对话框中,选择要插入的文件。 3)选择好文件,单击“确定”按钮,Shockwave文件即可插入。插入的文件是以带字母F的灰色框显示,按F12预览时
10、才能正常显示相应的效果。 4)插入Shockwave文件完成后,可以在属性面板中,对插入的Shockwave文件进行相应的设置。,返回,退出,6、超级链接,超级链接是互联网的重要的特色之一,是网页制作的重要纽带。通过超链接可以把分散的网页联成一个整体。超链接的建立可以建立在不同的对象上,其主要类型有如下几种。 1)内部超链接: 同一网站内的链接; 2)外部超链接:不同网站之间的链接; 3)锚点超链接:同一网页或不同网页的指定位置的链接; 4)Email超链接:电子邮件的链接 5)映像图的链接 目标的选择项的说明: blank :在新文件的浏览窗口打开链接的网页。 parent :在父框架中或整
11、个浏览窗口打开链接的网页。 self :在当前默认的框架或窗口打开浏览的网页。 top :在完整的浏览窗口打开浏览的网页。,返回,退出,7、建立外部链接,1、直接在属性面板输入链接地址。 1)在打开的网页文档中选择图片或文字,如图8.4-22选中图片。 2)在“属性”面板链接栏输入搜狐网的地址。 3)在“属性”面板的“目标”选项中选择“blank”。 4)设置完成后,按F12预览,外部链接设置完成。 说明:如果选择文字建立链接方法和选择图片相同。 2、使用“超链接”对话框进行链接。 1)选择网页文档中的文字,点击插入工具栏中【常用】按钮,选择链接命令,调出超链接对话框。 2)在超级链接对话框中
12、,链接栏填入“”, 目标栏填入“blank”,点击确定即可。,返回,退出,8、建立内部链接,在网页文档中选择要链接的对象,在“属性”面板中单击“链接”按钮,在弹出的“选择文件”对话框中选择要链接的对象,单击“确定”即可完成链接。,返回,退出,9、Email超链接,1、利用“属性”面板直接填写 1)选中图片或文字,选择“联系我们”。 2)在“属性”面板“链接”直接输入Emai地址即可,例如:“ ”。 2、利用电子邮件对话框设置 1)选择要链接的图片或文字 2)单击插入工具栏中“常用”的电子邮件链接按钮,在弹出的电子邮件链接设置框中输入电子邮件地址,单击“确定”按钮即可。,返回,退出,10、锚记链
13、接,在同一网页的内容比较长,可以使用锚记直接跳转到指定的内容。使用锚记链接前,必须先定义一个锚记。 1、创建锚记 1)将光标定位在要插入锚记的位置,或选中要指定锚记的文本。 2)单击插入工具栏“常用”中的锚记按钮,在弹出的对话框中输入锚记名称,单击确定即可。 3)通过鼠标的拖拽可以改变锚记的位置。 2、在文档中实现与锚记链接 1)选中要链接的图片或文字。 2)单击插入栏“常用”中的链接按钮,在弹出的对话框中输入锚记的名称,单击“确定”即可。,返回,退出,11、链接到图片或多媒体文件,(1)、链接放大图片链接到图片的创建方法和链接网页方法完全一样,选中要链接的图片或文字,在“属性”面板中点击“链
14、接”指向按钮指向站点上的大图片即可。 (2)链接下载文件选中要链接的文字或图片,在“属性”面板中点击“链接”按钮,当链接的文件是.exe、zip格式的文件,网页不支持即可下载。,返回,退出,8.5网页课件实例,1、创建新站点 2、制作网页,返回,退出,1、创建新站点,1)在本地计算机硬盘创建一个文件夹,名为“唐诗教学”。 2)打开Dreamweaver 8,在菜单栏打开“站点”选项,执行“新建站 点”命令。 3)在弹出的对话框中选择“基本”选卡,输入站点的名称。 4)单击“下一步”按钮,在弹出的对话框中选择“否,我不想用服务器技术”。 5)单击“下一步”按钮,在弹出对话框中选择“编辑我的计算机
15、上的本地副本,完成后在上传服务器”选项,如图8.5-5所示。单击按钮,选择站点的位置为先前创建的文件夹。 6)单击“下一步”按钮,在弹出的对话框“您如何连接到远程服务器?”下拉菜单选择“无”选项。 7)单击“下一步”在弹出的对话框中会所示相关的信息,然后单击“确定”,完成站点的设置。 8)此时在Dreamweaver8的文件面板就会出现站点的文件夹及所有的文件。,返回,退出,2、制作网页 1,1)启动Dreamweaver8新建一个HTML页,命名为“index” 。 2)单击属性面板中的“页面属性”按钮,打开“页面属性”设置对话框,对页面进行相应的设置,设置完成后点击“确定” 即可。 3)根
16、据课件设计方案,在设置好的网页中添加表格,对表格进行编辑,添加好相应的文字,预览后保存。,返回,退出,下一页,2、制作网页 2,4)在重新创建一个新的网页,命名为“导航页”页面属性的设置同 (2),根据已经设计好的方案,编辑导航页。 5)然后分别制作“作者简介”、“课文内容”、“课文分析”、“生词生字”、“课堂练习”、“课后习题”网页。,返回,退出,下一页,2、制作网页 3,6)在Dreamweaver 8中,打开导航页,选中“返回主页”文字,在属性面板链接栏点击打开链接对话框选择主页,单击“确定”。链接即建立完成,按F12预览, 7)依次选择“作者简介”、“课文内容”、“课文分析”、“生词生字”、“课堂练习”、“课后习题”等文字,用同样的方法,分别建立链接。 8)分别用Dreamweaver 8软件依次打开“作者简介”、“课文内容”、“课文分析”、“生词生字”、“课堂练习”、“课后习题”网页用同样的方法将每一页的文字全部和相应的网页链接好,整个课件即完成。,返回,退出,