《网页编辑工具ppt培训课件》由会员分享，可在线阅读，更多相关《网页编辑工具ppt培训课件（23页珍藏版）》请在金锄头文库上搜索。
1、网站规划与网页设计,理工部 杨彩霖,7.1 Dreamweaver简介 7.2 站点管理 7.3 制作第一个网页 7.4 超链接 7.5 使用图像 7.6 使用多媒体对象 7.7 使用表格 7.8 表单,第7章 网页编辑工具Dreamweaver CS3,7.1.1 Dreamweaver CS3的启动和主工作区 1启动Dreamweaver CS3安装好Dreamweaver CS3后，单击“开始”“程序”“Macromedia”“Macromedia Dreamweaver 8”命令。Dreamweaver 进行一系列初始化过程后，首先显示“工作区设置”对话框，如图7-1所示。由于要采用可
2、视化方式设计网页，选中“设计者”单选钮，单击“确定”按钮。接下来显示起始页对话框，如图7-2所示。在起始页对话框中可以选择“打开最近项目”、“创建新项目”或“从范例创建”。,7.1 Dreamweaver简介,图7-1 “工作区设置”对话框,图7-2 起始页,2Dreamweaver cs3的主工作区Dreamweaver 的主工作区由插入工具栏、文档工具栏、文档窗口、属性面板等部分组成，如图7-3所示。,7.1 Dreamweaver简介,图7-3 Dreamweaver的主工作区,（1）插入工具栏Dreamweaver 8的插入工具栏如图7-4（a）所示，插入工具栏中默认显示的是“常用”类
3、的主要功能按钮。单击“常用”按钮会弹出一个下拉菜单，其中包含了插入工具栏中的其他功能菜单，如图7-4（b）所示。用户选择不同的分类，插入工具栏中包含的功能按钮也随之改变。,7.1 Dreamweaver简介,图7-4 插入工具栏及其功能分类菜单,（2）文档工具栏文档工具栏中的按钮使用户可以在文档的不同视图间快速切换：代码视图、设计视图、和拆分视图。文档工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图7-5所示。,7.1 Dreamweaver简介,图7-5 文档工具栏的常用命令和选项,7.1.2 Dreamweaver 的参数设置1常规参数设置选择“编辑”“首
4、选参数”命令，或按Ctrl+U组合键，打开“首选参数”对话框。选择“分类”列表中的“常规”选项，对话框右侧显示出相关的属性。通常设置的属性有文档选项和一些编辑选项。,7.1 Dreamweaver简介,图7-12 常规参数设置中更改工作区,7.1.2 Dreamweaver 的参数设置2新建文档参数设置新建文档参数设置用于建立默认的新文档类型和首选参数。选择“分类”列表中的“新建文档”选项，对话框右侧显示出相关的属性，如图7-13所示。,7.1 Dreamweaver简介,图7-13 新建文档参数设置,7.1.2 Dreamweaver 的参数设置3站点参数设置选择“分类”列表中的“站点”选项
5、，对话框右侧显示出相关的属性，用于为“文件”面板设置站点首选参数，如图7-14所示。,7.1 Dreamweaver简介,图7-14 站点参数设置,所谓站点，可以看做是一系列文档的组合，这些文档之间通过各种链接关联起来，可能拥有相似的属性，例如，描述相关的主体，采用相似的设计，或者实现相同的目的等，也可能只是毫无意义的链接。利用浏览器，就可以从一个文档跳转到另一个文档，实现对整个网站的浏览。7.2.1 本地站点和远端站点严格地说，站点也是一种文档的磁盘组织形式，它同样是由文档和文档所在的文件夹组成的。设计良好的网站通常具有科学的结构，利用不同的文件夹，将不同的网页内容分门别类地保存，这是设计网
6、站的必要前提。结构良好的网站，不仅便于管理，也便于更新。,7.2 站点管理,7.2.2 建立本地站点 规划好站点结构后，应该先在Dreamweaver中定义站点，然后才能进行开发。 【例7-1】建立一个本地站点，定义站点名称和站点使用的本地根文件夹及默认的图像文件夹。本实例定义站点的名称为Sample，使用的本地文件夹为D:myweb，默认的图像文件夹为D:mywebimage，站点的设置如图7-15所示。站点结构如图7-16所示。,7.2 站点管理,图7-15 站点设置,图7-16 站点结构,7.2.3 管理本地站点 1编辑站点 在Dreamweaver中创建好本地站点后，如果需要，还可以对
7、整个站点进行编辑操作。 在“文件”面板中的“站点名称”下拉列表中选择“管理站点”项，打开“管理站点”对话框。 在“管理站点”的对话框左侧列表中选择需要编辑的站点，然后单击右侧按钮，则可以进行相应的操作，如图7-20所示。,7.2 站点管理,图7-20 选择要编辑的站点,7.2.3 管理本地站点 2文件的基本操作在Dreamweaver中，可以使用“文件”菜单对单独的文件进行管理，例如，执行“新建”、“打开”、“保存”、“另存为”等命令。另外，也可以在“文件”面板中，在文件或文件夹上单击鼠标右键，在弹出快捷菜单的“编辑”命令子菜单中，执行“新建”、“打开”、“删除”、“移动”、“复制”、“重命名
8、”等命令对网站中的文件进行管理。 3指定站点首页首页就是网站的门面，通常首页文件中总包含有若干指向其他主要网页的超链接，用户可以先为网站创建一个空白首页，然后进行编辑，并可以利用站点地图查看网站中超链接的情况。,7.2 站点管理,7.3.1 制作网页一般过程下面通过制作一个简单的网页，介绍创建网页的一般过程。,7.3 制作第一个网页,【例8-2】,7.3.2 设置页面属性页面属性是指网页的一般属性信息，例如，网页标题、网页的背景颜色、背景图像、超链接颜色、跟踪图像等。 1设置网页标题网页标题是用来说明网页内容的文字，显示在浏览器窗口的标题栏中。通常，每个网页都应该有一个标题，而网页标题文字最好
9、能够恰如其分地描述网页的内容。 2设置网页其他属性如果需要设置网页的其他属性，可以打开“页面属性”对话框进行设置。,7.3 制作第一个网页,7.3.3 网页基本元素在通常情况下，网页上一般都包含文本、日期、特殊符号及水平线等基本元素。 1文本和特殊符号文本的操作主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。 2日期Dreamweaver提供了一个方便的日期对象，该对象使用户可以用任何喜欢的格式插入当前日期，还可以选择在每次保存文件时自动更新该日期。 3水平线水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。,7.3 制作第一个
10、网页,7.4.1 超链接的基本概念网页中的超链接就是以文字或图像等作为链接对象，然后指定一个要跳转的网页地址。当浏览者单击文字或其他对象时，浏览器将跳转到指定的目标网页。 1超链接的分类根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。 2路径创建超级链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示方式：绝对路径、根目录相对路径和文档目录相对路径。,7.4 超链接,7.5.1 插入图像7.5.2 图像映射7.5.3 鼠标经过图像,7.5 使用图像,【例8-4】,7.6.
11、1 添加背景音乐背景音乐是体现网页个性和风格的一种常用手段，但由于背景音乐并不是一种标准的网页属性，所以需要通过修改源代码的方式为网页添加背景音乐。7.6.2 声音与视频,7.6 使用多媒体对象,【例8-7】,7.7.1 插入表格表格是页面布局极为有用的设计工具。在设计页面时，往往要利用表格来定位页面元素。使用表格可以导入表格化数据，设计页面分栏，定位页面上的文本和图像等。 在Dreamweaver中插入表格的方法如下。 将光标放到要插入表格的位置。 执行下列操作之一： 执行“插入”“表格”命令； 单击插入工具栏“常用”分类中的“表格”按钮； 按Ctrl+Alt+T组合键。,7.7 使用表格,
12、7.7.2 添加内容建立表格以后，可以在表格单元格中添加文本、图像及任意可以内嵌在网页中的元素。,7.7 使用表格,【例8-9】,表单是用于实现浏览者与网页制作者之间信息交互的一种网页对象。例如，图7-86所示为网页中嵌入的一个用于搜索信息的表单，其中包括1个用于输入查找关键字的文本框、1个用于提交搜索的按钮和4个用于选择搜索类型的单选按钮。,7.8 表单,1简答Dreamweaver文档编辑所包括的3种视图及特点。 2本地站点和远端站点的区别是什么？举例建立一个本地站点。 3在本地站点中创建一个首页文件index.html和一个存放图像的文件夹images。自己定义首页文件的标题、背景色和页面字体。 4使用网页的基本元素设计一个简单的以美食为主题的网页。 5简答超链接3种路径的区别和适用场合。 6打开注册搜狐通行证的页面（http:/ 7使用表格制作一个学生课程表的页面。 8使用图像和超链接制作一个手机展示的页面，主页面显示手机的缩略图，单击缩略图后打开一个新页面，使用表格和放大的图片介绍选择手机的性能指标.,习题7,
