《网页设计与制作PPT(第二版)第3章 Dreamweaver基本操作.ppt》由会员分享,可在线阅读,更多相关《网页设计与制作PPT(第二版)第3章 Dreamweaver基本操作.ppt(72页珍藏版)》请在三一办公上搜索。
1、第3章 Dreamweaver基本操作,本章内容提要:中文Dreamweaver是比较流行的网页制作工具,本章主要介绍中文Dreamweaver8工作环境、站点的创建与管理、并制作一个简单的网页。本章主要内容如下:中文Dreamweaver8工作环境站点创建与管理制作一个简单的网页本章目标任务:在掌握站点创建与管理基础上完成最简单的网页制作。,3.1 中文Dreamweaver8工作环境,中文Dreamweaver8提供可视化的网页开发环境,具有所见即所得的功能。它的工作窗口简洁明了,功能面板及工具栏中几乎集中了所有的重要功能,属性面板放在窗口底部外,其他面板多放在窗口的右边,可随时打开与关闭
2、,并能折叠和展开,这样就克服了以往版本浮动面板位置较乱,有时会影响网页编辑的不足。中文Dreamweaver8工作环境即中文Dreamweaver8应用程序窗口,该应用程序窗口由标题栏、菜单栏、文档工具栏、文档编辑窗口、浮动面板等组成,文档编辑窗口由文档标题栏、页面编辑区、状态栏等组成,浮动面板包括插入面板、属性面板、面板组等。中文Dreamweaver8工作环境图3-1所示:,3.1 中文Dreamweaver8工作环境,图3-1 中文Dreamweaver8工作环境,3.1 中文Dreamweaver8工作环境,1.标题栏标题栏上显示当前网页的页面标题及打开的文件名。若是对一个新网页进行编
3、辑,则在对此网页命名之前自动将此文件命名为“Untitled-x”(x是按顺序产生的数字)。2.菜单栏和其他应用软件基本相同,菜单栏中的每一项都有一个下拉式菜单,Dreamweaver中大部分操作都可以通过菜单项的下拉菜单来实现。,3.1 中文Dreamweaver8工作环境,3.文档工具栏文档工具栏包含可在代码视图、设计视图之间快速切换的按钮,并包含一些与选定视图有关的常用命令。选择【查看】【工具栏】菜单命令,可以在窗口中显示或隐藏文档工具栏。“代码”按钮:在文档中显示代码视图。在代码视图中,可以直接查看和编辑HTML源代码。拆分”按钮:同时显示代码视图与设计视图。在代码视图显示在上方,设计
4、视图显示在下方。要改变视图的上下顺序,可单击“视图选项”按钮,选择“在顶部查看设计视图”选项。“设计”按钮:在文档中显示设计视图。设计视图是中文Dreamweaver8编辑过程中的默认方式,可以达到所见即所得的效果。“标题”文本框:显示或编辑当前网页的标题。“在浏览器中预览/调试”按钮:在浏览器中预览网页效果或检查错误。“文件管理”按钮:查看文件的上传、下载的状态。“刷新设计视图”按钮:刷新设计视图。“视图选项”按钮:为不同的视图设置选项。,3.1 中文Dreamweaver8工作环境,4.文档窗口文档窗口包括文档标题栏、页面编辑区、状态栏文档标题栏可显示建立或打开的多个网页文档标题,单击标题
5、标签可切换到相应网页的编辑状态。页面编辑区用于设置和编辑页面内的文本、图形和表格等。状态栏用于选择标记、设置窗口大小及调整文件的下载速度。,3.1 中文Dreamweaver8工作环境,5.面板中文Dreamweaver8提供了多种多样的、具备不同功能的面板,大量操作可通过面板方便地完成。面板包括:属性面板、插入面板、站点文件管理器、资源面板、行为面板、CSS样式面板、代码检查器、框架面板、历史记录面板、层面板、库面板、参考面板、模板面板、时间轴面板等。所有面板都可以由“窗口”菜单控制显示或隐藏。下面介绍一些常用面板。面板的具体操作方法,将在后面使用相应面板的实例中再进行介绍。,3.1 中文D
6、reamweaver8工作环境,插入面板插入面板,也可称作插入工具栏。选择【窗口】【插入】菜单命令或按快捷键【Ctrl】+【F2】可显示或隐藏插入面板。选择【查看】【工具栏】菜单命令,可以在窗口中显示或隐藏插入工具栏。插入面板是中文Dreamweaver8中最重要的面板之一,所包含的内容均为网页设计最常用的工具按钮。将鼠标放在某个工具按钮上,可显示该工具按钮的名称。插入面板集成了“插入”菜单中的选项,主要包括常用、布局、表单、文本、HTML、应用程序、FLASH元素等。有菜单和制表符两种显示方式。在菜单显示方式中(如图3-1中的插入面板),可以通过下拉按钮选择不同工具类型,如常用、布局、表单、
7、文本等,默认是常用工具类型,单击“常用”右边的下拉按钮,选择“显示为制表符”即可切换到制表符显示方式(如图3-2所示)。在制表符显示方式中直接按相应的类型标签,即可显示相应工具类型。单击制表符显示方式的插入面板右边的下拉按钮,在弹出的菜单中选择“显示为菜单”即可切换到菜单显示方式。,图3-2 插入面板的制表符显示方式,3.1 中文Dreamweaver8工作环境,属性面板属性面板是使用频率最高的一个浮动面板,被放置在窗口的下边。属性面板中的项目会随着网页中选定对象的不同而改变的。在属性面板中,详细地列出了所选对象的属性参数,用户可以通过属性面板查看或修改这些参数。选择【窗口】【属性】菜单命令或
8、按快捷键【Ctrl】+【F3】,可显示或隐藏属性面板。面板组常用面板组显示在窗口的右侧,如文件面板、资源面板、CSS样式面板、框架面板层面板、行为面板等。非常用面板组显示在窗口的下面,如结果面板、时间轴面板等。使用“窗口”菜单中的相应面板选项,可以显示或隐藏相应面板。在面板标题上单击右键,在快捷菜单中选择“关闭面板组”,也可关闭相应面板。各种面板的具体应用性操作在后面课程中再具体介绍。,3.2 站点创建与管理,在开始制作网页之前,一般需要先定义一个本地站点,然后再进行后续操作。作为一个网站,里面一定有很多图片、网页文件、音乐文件、Flash动画等,如果不进行管理分类,分散在硬盘的各个地方就无法
9、进行网页发布了。因此,站点的实质就是硬盘上的一个目录,网页的所有文件都放在该目录之中,创建站点就是在硬盘上建立一个目录,把所有的网页及相关文件都放在里面,以便进行网页的制作与管理。,3.2.1 设置站点存储位置,本地站点需要一个本地的根目录,以确定存放所有站点文件的存储位置。在硬盘上设置本地站点目录的步骤如下:(1)在桌面双击“我的电脑”图标;(2)在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器(例如为E盘);(3)使用【文件】新建文件夹命令,在硬盘中建立一个新文件夹。建立并命名站点文件夹(4)在新文件夹上单击右键,选择“重命名”选项,在英文输入法状态下输入站点名称。如图3-3所示。,3
10、.2.1 设置站点存储位置,图3-3 建立并重命名站点文件夹,建立并命名站点文件夹,3.2.2 建立Dreamweaver站点,启动Dreamweaver,执行“站点”“管理站点”菜单命令,弹出管理站点对话框,单击【新建】按钮开始创建站点,其中一些选项说明如下:站点名称:输入站点名称,该名称可以使用户直接进入定义为本地站点的文件夹中,建立好的站点会出现在“文件”面板中。本地根文件夹:指定本地站点所使用的文件夹。自动刷新本地文件夹列表:选中此项,则将新的复制到此网站的本地文件夹中,Dreamweaver将对这个本地站点自动更新。HTTP地址:输入本网站所使用的网址,网页上传后,用户可使用此网址登
11、录到本网站。缓存:选中“启动缓存”,则当用户移动、重命名或删除站点内文件时,可以提高链接更新速度。设置完毕,单击【确定】按钮,新的站点就建立好了。,3.2.2 建立Dreamweaver站点,【实例3.1】建立一个名称为“班级”的站点。操作步骤:(1)启动“管理站点”对话框。(2)单击【新建】按钮,在下拉菜单中选择“站点”选项,弹出“站点定义为”对话框,如图3-4所示。(3)选择“高级”标签,在“分类”中选择“本地信息”。(4)在“站点名称”文本框中输入“班级”;在“本地根文本夹”文本框中输入 E:CLASS(或单击黄色浏览器按钮,选择“E:CLASS”)作为本地根文件夹。(5)单击【确定】按
12、钮,返回管理站点对话框。(6)单击【完成】按钮,完成创建。,3.2.2 建立Dreamweaver站点,图3-4 创建“班级”站点,3.2.3 建立站点子文件夹,在已建好的网站中,一般还需要建立一些子文件夹,用于归类存入网站中的图像、网页、动画、模板等文件。【实例3.2】在“班级”站点中建立站点文件夹。操作步骤:(1)在文件面板中选择“站点-班级(E:class)”文件夹,单击鼠标右键,在快捷菜单中选择“新建文件夹”选项。(2)单击untitled文件夹的名称部分,输入image,将文件夹改名为image,此文件夹用于存放图像文件;(3)参照步骤(1)和(2),依次建立文件夹“swf”(用于存
13、放Flash动画)、“html”(用于存放非首页的其他网页)、“music”(用于存放音乐文件),如图3-5所示。,3.2.3 建立站点子文件夹,图3-5 建立站点子文件夹结果,3.2.4 建立网页新文件,主页是浏览者登录网站后显示的第一个页面,因此,主页文件是必不可少的。通常,主页文件命名为index.htm或者default.htm。其他网页文件应放在指定的子文件夹下,这样便于管理。建立网页文件的方法为:先选中要放置网页文件的文件夹,单击鼠标右键,在弹出的快捷菜单中选择“新建文件”命令。或执行“文件”“新建文件”菜单命令,在弹出的“新建文档”对话框中选择“基本页”或“HTML”,单击【创建
14、】按钮。编辑完成网页内容后,以适当的文件名称保存到相应站点文件夹下(如保存到E:classhtml下面)。在操作时要注意以下问题:(1)主页文件必须放在本地站点根目录下,例如,本例应将首页文件放在“E:class”文件夹下。(2)网页文件名、文件夹名和网站内的其他文件名最好全部使用英文小写形式,因为Dreameaver不识别中文文件名,而且有些网站服务器要区分字母大小写。,3.2.4 建立网页新文件,【实例3.3】在“班级”站点中建立网页文件操作步骤:打开站点窗口,在文件面板上单击“展开”按钮即可打开“站点”窗口。选中“站点-班级(E:class)”文件夹,单击鼠标右键,在弹出的快捷菜单中选择
15、“新建文件”命令。单击新文件名的名称部分,将untitled.htm改名为index.htm(作为网站的首页文件);选中“html”文件夹,单击鼠标右键,在弹出的快捷菜单中选择“新建文件”命令,建立网页dangan.htm(班级档案);参照步骤,分别建立网页xuexi.htm(学习园地)、wenti.htm(文体天地)、jigou.htm(组织机构)、zhibu.htm(支部生活)、tupian.htm(风彩图片)、rongyu.htm(荣誉殿堂)。最后结果如图3-6所示。说明:文件及文件夹的移动、复制、删除等操作,与windows的资源管理器操作类似。例如,选中文件或文件夹后,单击右键,在快
16、捷菜单中选择“编辑”选项,可以完成删除、复制、剪切、粘贴、重命名等操作。,3.2.4 建立网页新文件,图3-6 建立网站新文件结果,3.2.5 管理已有站点,对于已经建立过的站点,可通过站点管理对话框进行管理。包括编辑站点,复制站点,删除站点、打开站点等。【实例3.4】打开所建立过的“班级”站点。操作方法一:启动Dreamweaver,在文档窗口中执行“站点”“管理站点”菜单命令,选中需要打开的“班级”站点名称,单击【完成】按钮,即可打开相应站点。如图3-7所示。操作方法二:在文件面板中,打开下拉列表,单击所需要的站点名称“班级”,即可打开相应站点。除了通过文件面板对站点管理外,也可通过站点窗
17、口对站点进行管理。,3.2.5 管理已有站点,图3-7 打开“班级”站点,3.3 制作一个简单的网页,图3-8 班级风采主页前面我们讨论了怎样用Dreamweaver创建一个站点,下面就来实际制作一个简单的网页。制作一个“班级风采”网页,效果如图3-8所示。下面介绍这样一个简单网页的制作过程。,3.3.1 制作网页标题,一个网页通常有标题部分,来访者可以通过标题了解网站的名称及网站类型。标题部分可以是文本,也可以是图像。1.打开网页在制作网页之前,首先应打开需要的站点及网页。(1)启动Dreamweaver,在Dreamweaver应用程序窗口中执行“站点”“管理站点”菜单命令,在弹出的对话框
18、中选中需要打开的站点名称。例如:班级。单击【完成】按钮,“班级”站点显示在文件面板中。(2)双击打开需要制作的网页文件。例如,双击打开主页文件index.htm。首页文件打开,此时是空白页。2.添加标题图像3.添加水平分割线为了将标题区与正文内容分隔开,通常在标题下面插入一条水平分隔线。,3.3.1 制作网页标题,【实例3.5】插入主页标题“班级风采”操作步骤:(1)在插入面板上单击“常用”工具栏中的【图像】按钮,弹出“选择图像源文件”对话框,如图3-9所示。如果“常用”工具栏未打开,可按快捷键【Ctrl】+【F2】打开。图3-9 选择图像源文件对话框,3.3.1 制作网页标题,(2)在指定文
19、件夹中找到标题图像文件,选择标题图像文件后,对话框右侧将显示该图像的预览图,单击【确定】按钮,插入结束,如图3-10所示。图3-10 插入标题图像的网页,3.3.1 制作网页标题,【实例3.6】插入水平分割线操作步骤:(1)将光标移到需要插入分隔线的地方(如标题下方)。(2)在“插入”面板上单击“HTML”工具栏中的“水平线”图标。(3)标题图像的下面出现一条水平分隔线,并处于选中状态,如图3-11所示。在属性面板中可以设置其属性。图3-11 插入水平线,3.3.1 制作网页标题,改变分隔线的宽度与高度分隔线的宽度和高度的设置分为两种方式,一种是选择单位为“像素”(px),可直接输入实际数值;
20、另一种是选择单位为“%”,即设置分隔线占浏览器打开窗口的百分比。插入垂直分隔线通常插入的分隔线都是水平的,当需要插入垂直分隔线时,可利用改变分隔线的高度和宽度的方法达到目的。例如,将分隔线的高度设为120px,宽度设为2px,则分隔线即可变为垂直分隔线。改变分隔线的对齐方式对齐方式包括“默认”、“左对齐”、“居中对齐”、“右对齐”。对齐功能只有在分隔线的宽度小于浏览器窗口的宽度时才有效。为分隔线添加阴影效果选中“阴影”复选框,可将原本实心的分隔线设为立体效果,即阴影效果。,3.3.2 设置导航栏,导航栏的作用是与其他网页链接,从而轻松地进入下一个页面,导航既可以使用文字,也可以使用图像。这里我
21、们使用文字制作导航,并且使用表格布局导航栏。【实例3.7】插入表格并添加文字操作步骤:(1)在水平分隔线下单击鼠标,出现光标插入点。(2)在插入面板上单击“常用”工具栏中的【表格】按钮,弹出表格对话框,设置“行数”为7,“列数”为1,“宽度”为25,单位为“百分比”,如图3-12所示。,3.3.2 设置导航栏,图3-12表格对话框,3.3.2 设置导航栏,(3)单击【确定】按钮,表格插入。此时表格处于选中状态,拖动控制点(黑点)可以调整表格的大小,如图3-13所示。(4)在属性面板中设置表格的背景颜色。(5)在表格的第一个单元格里单击鼠标,出现光标插入点,通过键盘输入文字“班级档案”。(6)选
22、中文字“班级档案”,可以在属性面板中设置其字体、大小、对齐方式,如图3-14所示。(7)参照步骤(5)(6),输入并设置其他导航栏:“组织机构”、“荣誉殿堂”、“风彩图片”、“文体天地”、“学习园地”、“支部生活”。,3.3.2 设置导航栏,图3-13 插入表格后结果,3.3.2 设置导航栏,图3-14 单元格属性面板,3.3.3 设置网页内容,在本例中网页内容由文字与图像两部分组成,可以借助“层”来定位文字区域与图像区域。1.设置文字区域【实例3.8】设置文字区域并添加文字操作步骤:(1)在“插入”面板的“布局”工具栏上,单击【描绘层】按钮。(2)在页面需要放文字的地方,按住鼠标左键拖动出一
23、个矩形区域,如绘制层的结果如图3-15所示。(3)此时层处于选中状态,通过拖动控制点可以调整层的大小。将鼠标放在层的边缘线上,鼠标呈“十字”箭头时,拖动鼠标可以移动层的位置。(4)在层内单击鼠标,出现插入点后,即可输入文字。2.设置图像区域【实例3.9】设置图像区域操作步骤:(1)在“插入”面板中的“布局”工具栏上,单击【描绘层】按钮,在文字区域的下方拖出一个矩形区域。(2)适当调整层区域的大小和位置。(3)在层内单击鼠标,出现插入点。(4)在“插入”面板中的“常用”工具栏上,单击【图像】按钮,插入所需要的图像。至此,页面的基本结构制作完成。,3.3.3 设置网页内容,图3-15 绘制层的结果
24、,3.3.4 图像和文字的链接,超级链接是网页的灵魂,它的作用是建立网页之间的联系。通过超级链接,浏览者能够方便自由地在网页、网站乃至整个因特网上遨游。通过超级链接技术,整个因特网成为一个四通八达的整体。超级链接可以是一段文本、一幅图像或者其他的网页元素。在网页浏览器中用鼠标单击这些对象时,将会载入一个新的页面或者跳到页面的其他位置。,3.3.4 图像和文字的链接,1.文字的超级链接在本例中,导航栏中的文字需要与后面相应的二级页面进行链接。【实例3.10】文字的超级链接操作步骤:(1)首先选中设置超级链的文字,如“班级档案”。(2)单击属性面板中的“浏览文件”图标,弹出“选择文件”对话框,如图
25、3-16所示。双击打开“html”文件夹,单击选中与“班级档案”相链接的网页文件dangan.htm,单击【确定】按钮后,在属性面板的链接框内显示出链接的网页文件及路径。也可以在“链接”框中直接输入需要链接的网址或文件路径。(3)建立超级链接的文字颜色呈蓝色,并且出现一条下划线。(4)参照步骤(1)(3),设置其他导航栏的文字链接。,3.3.4 图像和文字的链接,图3-16“选择文件”对话框,3.3.4 图像和文字的链接,2.图像的超级链接【实例3.11】图像的超级链接操作步骤:(1)首先选中设置超级链接的图像,本例中为文字区域下的图像。(2)单击属性面板中的“浏览文件”图标,弹出“选择文件”
26、对话框。(3)选择与此图像相链接的网页文件,单击【确定】按钮后,在属性面板的链接框内显示出链接的网页文件及路径。,3.3.5 设置页面属性,网页页面属性主要包括页面标题、网页背景图像与颜色、文本与超级链接颜色、页边距等。网页标题可以标识和命名文档;网页背景图像与颜色可以设置文档的外观;文本颜色可以帮助浏览者区分普通文本和具有超级链接的文本,并且可以识别已经访问过和尚未访问过的超级链接。1.设置网页标题网页标题非常重要,它可以帮助浏览者在浏览网页时了解正在访问的内容,以及在历史记录和书签列表中标识页面。如果页面没有标题,则网页将作为“无标题文档”在文档窗口、浏览器窗口、历史记录和书签列表中出现,
27、如图3-17所示。,3.3.5 设置页面属性,图3-17“无标题文档”在浏览器窗口的显示,3.3.5 设置页面属性,在Dreamweaver8中有多种方法为网页添加标题。【实例3.12】为网页添加标题“计算机多媒体”操作步骤:方法一:直接在Dreamweaver8文档工具的“标题”框中输入新标题。例如,输入“计算机多媒体”。然后按【Enter】键确定。如果工具栏没有显示,可通过“查看”菜单打开工具栏。方法二:执行“查看”“文件头内容”菜单命令,显示出文件头部分的内容,如图3-18所示。单击【标题】按钮,在属性面板的标题框中输入新标题,然后按【Enter】键确定。方法三:单击文档工具栏上的【代码
28、】按钮,然后在和标签之间输入新标题,如图3-19所示。方法四:执行“修改”“页面属性”菜单命令,或在网页空白处单击鼠标右键,选择“页面属性”选项,然后在“页面属性”对话框的“分类”中选中“标题/编码”,在“标题”框中输入新标题,如图3-20所示。单击【确定】按钮完成。,3.3.5 设置页面属性,图3-18 文件头与标题按钮,3.3.5 设置页面属性,图3-19 在HTML源代码窗口中设置标题,3.3.5 设置页面属性,图3-20 在“页面属性”对话框中设置标题,3.3.5 设置页面属性,2.设置网页的背景图像或颜色使用“页面属性”对话框可以设置网页的背景图或颜色。如果同时设置了背景图像和背景颜
29、色,则颜色将在图像下载过程中出现。如果背景图像有透明像素,则背景颜色将一直显示。此外,当浏览者关闭了浏览器的图片显示功能时,仍然可以看到背景颜色。注意:同时设置背景图像和背景颜色的原因是当网络速度较慢时,背景图像可能显示迟缓,背景颜色将首先出现,让浏览者明白这是有图片的页面,需要稍加等候。,3.3.5 设置页面属性,【实例3.13】为网页设置背景图像和颜色操作步骤:(1)打开“页面属性”对话框,在“分类”中选中“外观”选项,单击“背景图像”文本框右侧的【浏览】按钮,弹出“选择图像源文件”对话框,在“选择图像源文件”对话框中选择一个图像文件,单击【确定】按钮;或者在“背景图像”文本框中直接输入图
30、像文件名与路径,如图3-21所示。(2)单击“页面属性”对话框中的【应用】按钮,背景图像将应用到网页中。(3)在“页面属性”对话框中单击“背景颜色”右侧的按钮,鼠标变为滴管形状,并弹出一个颜色面板,可以使用取色滴管在颜色面板中选取一种颜色。也可以直接输入颜色值,如#CCFFFF。此外,还可以单击颜色面板右上角的系统颜色拾取器,打开Windows“颜色”对话框,在其中选择颜色,如图3-22所示。注意:背景图像的文件名不能使用中文名称。如果背景图像的尺寸小于文档窗口的大小,则Dreamweaver将重复排列背景图像直至填满文档窗口。系统默认的网页背景颜色是白色,3.3.5 设置页面属性,图3-21
31、 为网页设置背景图像,3.3.5 设置页面属性,图3-22 Windows“颜色”对话框,3.3.5 设置页面属性,3.设置网页文本的属性设置了背景图像和颜色之后,还需要设置网页中文本的字体、大小与颜色。在“页面属性”对话框中既可以设置普通文本的默认颜色与字体,也可以设置超级链接、已访问链接和活动链接的默认颜色与字体。网页文本的属性如图3-21所示。网页链接文本的属性如图3-23所示。其中:页面字体:当前网页中普通文本的字体。页面字体大小:当前网页中普通文本的字号大小。文本颜色:当前网页中普通文本的颜色,系统默认为黑色。链接字体:当前网页中超级链接文本的字体。系统默认与普通字体相同。链接字体大
32、小:当前网页中超级链接文本的字体大小。系统默认与普通字体大小相同。链接颜色:当前网页中没有访问过的超级链接文本的颜色,系统默认为蓝色。活动链接:当超级链接文本被鼠标单击时的颜色,系统默认为蓝色。已访问链接:当前网页中被访问过的超级链接文本的颜色,系统默认为紫色。,3.3.5 设置页面属性,图3-23 设置链接文本的颜色,3.3.5 设置页面属性,【实例3.14】为网页设置文本颜色操作步骤:(1)在如图3-21所示的“页面属性”对话框中,单击“文本颜色”右侧的按钮,弹出颜色面板。使用取色滴管选取文本颜色。(2)在“页面属性”对话框的“分类”中,选中“链接”选项,设置链接颜色、已访问链接与活动链接
33、的默认颜色,如图3-23所示。,3.3.5 设置页面属性,4.设置页面边距通过设置页面边距,可以使网页周围留出一些距离。设置页面边距的操作是在“页面属性”对话框中实现的,方法是直接在边界框中输入边距数值,如图3-21所示。左边距:文档中左侧边缘的空白数值。右边距:文档中右侧边缘的空白数值。上边距:文档中上侧边缘的空白数值。下边距:文档中下侧边缘的空白数值。5.设置文档编码在图3-20所示的“页面属性”对话框的“标题/编码”对话框中,可以选择使用的汉字编码类型。对于中文网页,一般选用“简体中文(GB2312)”。,3.3.6 保存网页,随时保存文件是编辑任何文档时应该有的良好习惯。在制作网页的过
34、程中,随时有可能发生断电或机器故障,而Dreamweaver编辑器没有自动保存的功能。因此,要经常地保存正在编辑的网页,以避免由于意外而导致辛勤劳动付之东流。【实例3.15】保存网页操作步骤:(1)执行“文件”“保存”菜单命令,或单击标准工具栏上的【保存】按钮,或按快捷键【Ctrl】+【S】(2)如果网页文件已经建好或以前保存过,则文件继续保存;如果文件从未保存过,则弹出“另存为”对话框,如图3-24所示。(3)在“保存在”列表中选择一个文件路径(注意:网页文件应保存在站点文件夹内),在“文件名”文本框中输入文件名,“保存类型”选择html文件,最后单击【保存】按钮。,3.3.6 保存网页,图
35、3-24“另存为”对话框,3.3.7 浏览网页,一个网页制作完成后,可以在浏览器中预览,并根据预览效果再对网页进行调整。【实例3.16】在浏览器中预览“班级风采”主页操作步骤:(1)执行“文件”“在浏览器中预览”“IExplore”菜单命令,或按快捷键【F12】启动IE浏览器,并将当前编辑的网页显示在窗口中。也可单击文档工具栏上的【在浏览器中预览】按钮。(2)将鼠标指向链接的文字或图像时,鼠标形状变为手形,状态栏将显示被链接文件的名称,单击即可切换到链接的页面。,3.3.8 设置首页及应用站点地图,1.设置首页【实例3.17】设置首页操作步骤:(1)执行“站点”“管理站点”菜单命令,弹出如图3
36、-7所示的“管理站点”对话框。(2)选中站点名称“班级”,然后单击“编辑”按钮。(3)在“班级站点定义为”对话框的“分类”列表中选中“站点地图布局”,如图3-25所示。(4)在“主页”文本框中输入主页的文件名与路径,或按【浏览】按钮查找主页文件。(5)单击【确定】按钮返回“管理站点”对话框,单击【完成】按钮,首页设置完成。,3.3.8 设置首页及应用站点地图,图3-25“班级站点定义为”对话框,3.3.8 设置首页及应用站点地图,2.应用站点地图可以通过站点地图规划及设置整个网站。双击站点地图中的某个文件,可立即进入该文件的编辑页面。【实例3.18】应用站点地图操作步骤:(1)打开站点窗口,默
37、认的状态是“站点文件”状态。如图3-6所示。(2)单击“站点地图”按钮,窗口显示站点地图,最上面的index.htm为首页,下面是链接的所有页面。如图3-26所示。(3)在“站点地图”按钮的下拉列表中可以设置站点地图的显示方式。仅地图:窗口内只显示站点地图。地图和文件:窗口内只显示站点地图,右侧显示站点文件。(4)在窗口左下角的弹出式列表中,可以设置站点地图的显示大小。这里以75%窗口显示。,3.3.8 设置首页及应用站点地图,图3-26 站点地图,实训指导3,【实训项目1】创建一个站点,并且制作首页。要求首页有标题区、分隔线、导航区、文本区和图片区,并且导航区与其他网页链接(例如:制作我的心
38、灵家园网页,网页类似图SX3-1所示)。,实训指导3,图SX3-1 网页显示效果,实训指导3,操作步骤参考:Step1:在硬盘上设立本地站点目录(1)在桌面上双击打开“我的电脑”。(2)在“我的电脑”窗口中双击打开用于存储站点目录的硬盘驱动器,例如E盘。(3)执行“文件”“新建”“文件夹”菜单命令(或在空白区域单击右键,执行“新建”“文件夹”命令),在E盘中建立一个新文件夹“xljy”。(4)关闭“我的电脑”窗口。Step2:建立Dreamweaver站点(1)启动Dreamweave(2)执行“站点”“新建站点”命令,弹出“站点定义”对话框。(3)选择“高级”标签,在“分类”中选择“本地信息
39、”。(4)在“站点名称”文本框中输入“心灵家园”,单击“本地根文件夹”黄色文件夹按钮,选择“E:xljy”作为本地根文件夹,其他可采用默认设置。(5)单击【确定】按钮,完成站点创建。,实训指导3,Step3:建立站点文件夹和网页文件。(1)在“文件”面板中选择“心灵家园”站点,在“E:xljy”文件夹上单击鼠标右键,在弹出的快捷菜单中选择“新建文件夹”选项,建立文件夹“picture”,此文件夹用于存放图像文件。(2)参照Step(1),依次建立文件夹“web”(用于存放非首页的其他网页)、“music”(用于存放音乐文件)、“flash”(用于存放Flash动画)。(3)选中“E:xljy”
40、文件夹,单击鼠标右键,在弹出的快捷菜单中选择“新建文件”选项,建立首页index.htm。(4)选中“web”文件夹,单击鼠标右键,在弹出的快捷菜单中选择“新建文件”选项,建立网页wdjl.htm(我的简历)。(5)参照Step(4),分别建立网页yyxs.htm(音乐欣赏)、dstd.htm(读书天地)、fctp.htm(风采图片)、shjs.htm(书画鉴赏)、rsgw.htm(人生感悟)。Step4:打开首页文件在“心灵家园”站点中,双击首页文件index.htm,此时首页是空白页面,进入首页编辑状态。,实训指导3,Step5:制作首页标题部分(1)执行“插入”“图像”菜单命令,屏幕出现
41、“选择图像源文件”对话框。(2)在驱动器中搜寻到标题图像文件(xljy.gif),选择【确定】按钮,系统弹出提示信息框,提示大家这个图像不在站点根文件夹内,询问是否将该文件复制到根文件夹中。(3)单击“是”按钮,出现“复制文件为”对话框,“保存在”会自动切换到打开的站点文件夹“xljy”。(4)把这个图像文件放在“picture”下。双击“picture”文件夹,单击“保存”确认。此时出现“图像标签辅助功能属性”对话框,可在“替换文本”中输入替换文本,也可不输入任何信息,单击【确定】按钮,此时一个标题图像就插入完毕了。(5)执行“文件”“保存”菜单命令,或按快捷键Ctrl+S保存网页。,实训指
42、导3,Step6:设置导航栏(1)在标题图像下单击鼠标,出现光标标插入点。(2)在常用面板中单击“表格”按钮,出现“表格”对话框,设置行数为6,“列数”为1,“宽度”为25,单位为“百分比”,边框为1。(3)单击“确定”按钮,表格插入到网页中。(4)此时表格处于选中状态,拖动控制点(黑点)适当调整表格的大小。(5)在属性面板中设置表格的背景颜色,如#99CCFF。(若属性面板看不见,按快捷键Ctrl+F3或选择“窗口”“属性”,打开属性面板。)(6)在表格的第一个单元格里单击鼠标,出现光标插入点,通过键盘输入文字“我的简历”。(7)选中文字“我的简历”,然后在属性面板中设置其字体为“隶书”、大
43、小为24,对齐方式为“居中对齐”。(8)参照(6)和(7),输入和设置其他导航栏:“音乐欣赏”、“读书天地”、“风采图片”、“书画鉴赏”、“人生感悟”。(9)执行“文件”“保存”菜单命令,或按快捷键Ctrl+S保存网页。,实训指导3,Step7:设置网页文字区域的内容(1)在布局面板上单击“描绘层”按钮。(2)在表格右侧的文字区域按住鼠标左键拖动出一个矩形层区域。(3)此时层处于选中状态,通过控制点适当调整层的大小,并且调整层的位置,层的高度与表格高度一致,宽度约占网页总宽度的50%。(4)在层内单击鼠标,出现插入点。在层内输入文字标题内容“我的档案”,并在属性面板中设置文字的字体为“隶书”、
44、大小为“30”(字号大小列表没有的字号可自行输入)、对齐方式为“居中”。(5)为了把标题和正文内容分隔开,我们插入水平分隔线。光标放在标题文字后,执行“插入”“HTML”“水平线”菜单命令,则在标题文字下插入了一条水平分隔线。(6)在水平分隔线下单击鼠标,再在层内绘制两个大小相同的子层,子层的底部接近表格底部。(7)单击层标记选择不同的子层,在两个子层内分别输入正文内容(如图SX3-1所示)。(8)执行“文件”“保存”菜单命令,或按快捷键Ctrl+S保存网页。,实训指导3,Step8:设置网页图像区域的内容(1)在布局面板上单击“描绘层”按钮,在文字区域的右方拖出一个矩形层区域。(2)适当调整
45、层区域的大小和位置。(3)在层内单击鼠标,出现现插入点。(4)执行“插入”“图像”菜单命令,插入所需图像。(5)执行“文件”“保存”菜单命令,或按快捷键Ctrl+S保存网页。Step9:设置导航栏文字的超级链接和图像的超级链接(1)先选中用来作链接的文字“我的简历”。(2)单击属性面板中“链接”右边的“浏览文件”图标,在出现的“选择文件”对话框中双击打开“web”文件夹,选择与“我的简历”相关的网页文件“wdjl.htm”。(3)参照(1)、(2),设置其他导航栏的文字链接:“音乐欣赏”链接“web/yyxs.htm”、“读书天地”链接“web/dstd.htm”、“风采图片”链接“web/f
46、ctp.htm”、“书画鉴赏”链接“web/shjs.htm”、“人生感悟”链接“web/rsgw.htm”。(4)执行“文件”“保存”菜单命令,或按快捷键Ctrl+S保存网页。,实训指导3,Step10:设置页面属性(1)执行“修改”“页面属性”菜单命令。(2)在弹出的“页面属性”对话框中设置网页标题为“心灵家园”、网页的背景图像为“picture/1.gif”或颜色为“#CCFFFF”、文本颜色为“#000000”、页面边距为“0”、文档编码为“简体中文(GB2312-80)”等。(3)单击“确定”按钮。(4)执行“文件”“保存”菜单命令,或按快捷键Ctrl+S保存网页。Step11:浏览
47、网页(1)执行“文件”“在浏览器中预览”“IExplore”菜单命令,或按快捷键F12出现IE浏览器窗口。(2)将鼠标放到设置链接的文字或图像上时,鼠标形状变成手形。单击就可以切换到链接的页面。(3)根据预览效果再回到文档窗口对页面进行调整。,实训指导3,【实训项目2】自已设计一个自已的个人主页,创建站点,并且制作首页。要求首页有标题区、分隔线、导航区、文本区和图片区,导航区与其他网页链接,设置网页标题等页面属性。【实训项目3】按照本章讲授的“班级风采”网页实例制作班级网页。,综合练习3,1.填空题(1)中文Dreamweaver8提供可视化的网页开发环境,具有 的功能。(2)面板是使用频率最高的一个浮动面板,被放置在窗口的下边。(3)网页页面属性主要包括、文本与超级链接颜色、页边距等。可以标识和命名文档;可以设置文档的外观;(4)导航栏的作用是,从而轻松地进入下一个页面,导航既可以使用文字,也可以使用图像。(5)在开始制作网页之前,一般需要先定义一个,然后再进行后续操作。,综合练习3,2.简答题(1)创建本地站点的作用是什么?(2)为站点中文件夹或文件命名时需要注意什么?(3)网站的主页文件名一般是什么?3.操作题根据自己的兴趣选择某一主题,进行简单首页制作。要求首先要创建一个站点,并且制作首页,首页内有标题区、分隔线、导航区、文本区和图片区。,