Dreamweaver
This presentation is the property of its rightful owner.
Sponsored Links
1 / 100

网页制作工具 Dreamweaver PowerPoint PPT Presentation


  • 68 Views
  • Uploaded on
  • Presentation posted in: General

网页制作工具 Dreamweaver. 网页制作工具. “ 所见即所得 ” 网页编辑器: 优点就是直观、使用方便、容易上手,但也存在难以精确达到与浏览器完全一致的显示效果的缺点 “ 非所见即所得 ” 网页编辑器(即源代码编辑器):所有的HTML代码都是在用户的监控下产生的,但是,工作效率太低。. 网页制作工具 FrontPage. Microsoft 公司专门开发的网页制作专业工具。目前最高版本是 FrontPage 2003 。 网页编辑功能非常强大。 强大的网页管理功能. 网页制作工具. Dreamweaver

Download Presentation

网页制作工具 Dreamweaver

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Dreamweaver

网页制作工具Dreamweaver


Dreamweaver

网页制作工具

  • “所见即所得”网页编辑器: 优点就是直观、使用方便、容易上手,但也存在难以精确达到与浏览器完全一致的显示效果的缺点

  • “非所见即所得”网页编辑器(即源代码编辑器):所有的HTML代码都是在用户的监控下产生的,但是,工作效率太低。


Dreamweaver

网页制作工具FrontPage

  • Microsoft公司专门开发的网页制作专业工具。目前最高版本是FrontPage 2003。

  • 网页编辑功能非常强大。

  • 强大的网页管理功能


Dreamweaver

网页制作工具

  • Dreamweaver

  • Macromedia公司推出的主页编辑工具。

  • 所见即所得网页编辑器,支持最新的XHTML和CSS标准。

  • 最新版本是Dreamweaver 8,用于对Web站点、Web页和Web应用程序进行设计、编码和开发。

  • 借助Dreamweaver还可以使用服务器语言(例如ASP、ASP.NET、ColdFusion标记语言、JSP和PHP)生成支持动态数据库的Web应用程序。


Dreamweaver

网页制作工具

Adobe Pagemill

适合初学者制作较为美观,但不是非常复杂的主页。

HomeSite

更适合进行比较复杂和精美页面的设计。如果用户希望能完全控制页面制作的进程,那么HomeSite是最佳选择。

Visual Studio.Net

支持相应程序的自动语法检查,还支持程序的调试与编译。内置有VB.Net、VC++.Net、C#等程序开发工具,集程序的调试、编译等功能于一身

EditPlus

目前非常流行的一款功能强大的文本编辑器,该软件功能强大、易于使用、兼容性强,支持几乎所有程序语言的代码色彩显示。它的缺点就是不支持程序的调试。


Dreamweaver

第8章 网页制作工具Dreamweaver 8

8.1 Dreamweaver简介

8.2 站点管理

8.3 制作第一个网页

8.4 超链接

8.5 使用图像

8.6 使用多媒体对象

8.7 使用表格


Dreamweaver

8.1 Dreamweaver简介

8.1.1 Dreamweaver 8的启动和主工作区

一系列初始化过程后,首先显示“工作区设置”对话框。接下来显示起始页对话框,可以选择“打开最近项目”、“创建新项目”或“从范例创建”。

图8-1 “工作区设置”对话框

图8-2 起始页


Dreamweaver

8.1 Dreamweaver简介

2.Dreamweaver 8的主工作区

主工作区由插入工具栏、文档工具栏、文档窗口、属性面板等部分组成

图8-3 Dreamweaver 8的主工作区


Dreamweaver

8.1 Dreamweaver简介

  • (1)插入工具栏

  • 默认显示的是“常用”类的主要功能按钮。

  • 单击“常用”按钮会弹出一个下拉菜单,其中包含了插入工具栏中的其他功能菜单。

  • 选择不同的分类,插入工具栏中包含的功能按钮也随之改变。

图8-4 插入工具栏及其功能分类菜单


Dreamweaver

插入面板

  • 包含用于将各种类型的“对象”(如图像、表格和层)插入到文档中的按钮。

  • 每个对象都是一段 HTML 代码,允许插入时设置不同的属性。

  • “常用“项面板、布局(标准视图、布局项视图)、“文本“、“表单“、“模板“、“字符“、“媒体“、“文件头“、“脚本“、“应用程序“项面板


Dreamweaver

插入面板

  • 常用 :创建和插入最常用的对象,如图像和表格;

  • 布局 :插入表格、div标签、层和框架。可从表格视图(标准、扩展表格、布局)中选择。选择“布局”模式后,可使用 布局工具:“绘制布局单元格”和“绘制布局表格”。

  • 表单 :用于创建表单和插入表单元素

  • 文本 :插入文本格式设置标签和列表格式设置标签

  • HTML :插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。

  • 服务器代码:适用于使用特定服务器语言( ASP、ASP.NET、JSP 和 PHP)等的页面。

  • 应用程序:插入动态元素,例如记录集、重复区域以及记录插入和更新表单。

  • Flash 元素:插入 Flash 元素。

  • 收藏:将“插入”栏中常用按钮分组和组织到常用位置。


Dreamweaver

8.1 Dreamweaver简介

  • (2)文档工具栏

  • 使用户可以在文档的不同视图间快速切换:代码视图、设计视图、和拆分视图。

  • 还包含与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。

图8-5 文档工具栏的常用命令和选项


Dreamweaver

8.1.2 Dreamweaver 8的参数设置

  • 选择“编辑”→“首选参数”命令,打开“首选参数”对话框。选择“分类”列表中的“常规”选项。

  • 通常设置的属性有文档选项和一些编辑选项。

图8-12 常规参数设置中更改工作区


Dreamweaver

8.1 Dreamweaver简介

  • 2.新建文档参数设置

  • 建立默认的新文档类型和首选参数。

  • 选择“分类”列表中的“新建文档”选项,对话框右侧显示出相关的属性。

图8-13 新建文档参数设置


Dreamweaver

8.1 Dreamweaver简介

3.站点参数设置

选择“分类”列表中的“站点”选项,用于为“文件”面板设置站点首选参数。

图8-14 站点参数设置


Dreamweaver

8.2 站点管理

  • 站点:一系列文档的组合,这些文档之间通过各种链接关联起来,可能拥有相似的属性,也可能只是毫无意义的链接。

  • 8.2.1 本地站点和远端站点

  • 站点也是一种文档的磁盘组织形式,它同样是由文档和文档所在的文件夹组成的。

  • 利用不同的文件夹,将不同的网页内容分门别类地保存,这是设计网站的必要前提。

  • 结构良好的网站,不仅便于管理,也便于更新。


Dreamweaver

8.2 站点管理

8.2.2 建立本地站点

规划好站点结构后,先在Dreamweaver中定义站点,然后才能进行开发。

图8-15 站点设置

图8-16 站点结构


Dreamweaver

8.2 站点管理

8.2.3 管理本地站点

1.编辑站点

① 在“文件”面板中的“站点名称”下拉列表中选择“管理站点”项,打开“管理站点”对话框。

② 在“管理站点”的对话框左侧列表中选择需要编辑的站点,然后单击右侧按钮,则可以进行相应的操作。

图8-20 选择要编辑的站点


Dreamweaver

8.2 站点管理

8.2.3 管理本地站点

2.文件的基本操作

使用“文件”菜单对单独的文件进行管理,例如,执行“新建”、“打开”、“保存”、“另存为”等命令。

也可以在“文件”面板中,在文件或文件夹上单击鼠标右键,在弹出快捷菜单的“编辑”命令子菜单中,执行“新建”、“打开”、“删除”、“移动”、“复制”、“重命名”等命令。

3.指定站点首页

首页就是网站的门面,通常首页文件中总包含有若干指向其他主要网页的超链接,用户可以先为网站创建一个空白首页,然后进行编辑,并可以利用站点地图查看网站中超链接的情况。


Dreamweaver

8.3 制作第一个网页

8.3.1 制作网页一般过程

【例8-2】制作一个浅黄色背景的网页,在页面上添加文字和水平线,展示一个娱乐网页的宣传内容,并且在页面的右下方显示感谢信息和当前日期,效果如图8-22所示。

图8-22 实例效果

【例8-2】


Dreamweaver

8.3 制作第一个网页

8.3.2 设置页面属性

页面属性是指网页的一般属性信息,例如,网页标题、网页的背景颜色、背景图像、超链接颜色、跟踪图像等。

1.设置网页标题

网页标题是用来说明网页内容的文字,显示在浏览器窗口的标题栏中。通常,每个网页都应该有一个标题,而网页标题文字最好能够恰如其分地描述网页的内容。

2.设置网页其他属性

如果需要设置网页的其他属性,可以打开“页面属性”对话框进行设置。


Dreamweaver

页面属性


Dreamweaver

8.3 制作第一个网页

8.3.3 网页基本元素

在通常情况下,网页上一般都包含文本、日期、特殊符号及水平线等基本元素。

1.文本和特殊符号

文本的操作主要包括:输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。

2.日期

Dreamweaver提供了一个方便的日期对象,该对象使用户可以用任何喜欢的格式插入当前日期,还可以选择在每次保存文件时自动更新该日期。

3.水平线

水平线对于组织信息很有用。在页面上,可以使用一条或多条水平线以可视方式分隔文本和对象。


Dreamweaver

设置文本格式

段落的格式、字体、字号、字的颜色、字体加粗/倾斜、对齐方式(左对齐/居中/右对齐)、文字所链接的路径或URL等。


Dreamweaver

文本属性面板

  • 格式设置所选文本的段落样式。

  • 样式显示当前应用于所选文本的类样式。如果没有对选定内容应用过任何样式,则弹出式菜单显示“无 CSS 样式”。如果已对选定内容应用了多个样式,则弹出式菜单是空的。

  • 粗体根据在“首选参数”对话框的“常规”类别中设置的样式参数选择,将 <b>或 <strong>应用于选定的文本。

  • 斜体根据在“首选参数”对话框的“常规”类别中设置的样式参数选择,将 <i>或 <em>应用于选定的文本。


Dreamweaver

编辑段落

  • 段落:格式上统一的一段文本

  • 输入一段文本,按<enter>键就自动构成了段落。<p> </p>

  • 对齐段落有三种方式:左对齐、居中和右对齐

  • 选定要设置对齐方式的段落,使用Text菜单中Align菜单项的Left、Center或Right选项,或者在属性面板中,用鼠标单击右上角的对齐按钮

  • 格式中的标题

  • 格式中的预格式化:处理空格


Dreamweaver

文本属性面板

  • 改变字体:

    1.选定要改变字体的文本,选择“文本”菜单中“字体”菜单项中的相应选项;

    2.从属性面板上字体列表中选择相应的选项

  • 如果没有选定任何文本,则改变的字体将应用于以后输入的文字;

  • 如果字体列表中没有需要的字体,可以单击”编辑字体列表“选项,在随后出现的对话框中可以添加需要的字体到字体列表中。


Dreamweaver

文本的字体属性

  • 改变字号:选定要改变字号的文本,从属性面板上”大小“的下拉列表中选择相应的选项。

  • 如果没有选定任何文本,将会改变以后输入文字的字号;

  • 尽量不要使用自己安装的字体,用户机器上可能没有安装。

  • 改变颜色


Dreamweaver

文本属性面板

此处为粗体显示文本

此处为大字体显示文本

此处为小字体显示文本

此处为斜体文本

此处为等宽字体文本

此处为下划线文本

此处为带删除线的文本


Dreamweaver

缩进

  • 缩进段落是针对网页边距而言的,有增加缩进和减小缩进两种。

  • 增加缩进是将当前的段落向文档窗口的右侧移动;减小缩进则是将当前的段落向文档窗口的左侧移动,

  • 选定要缩进的一个或多个段落,在“文本”菜单中选择增加缩进或减小缩进;或者使用属性面板中的增加缩进按钮 或减小缩进按钮进行段落缩进 。


Dreamweaver

文本属性编辑-项目列表

  • 无序列表 <ul> </ul>

  • 有序列表 <ol> </ol>

  • 目录列表 <dl></dl>

  • 列表属性


Dreamweaver

8.4 超链接

8.4.1 超链接的基本概念

网页中的超链接就是以文字或图像等作为链接对象,然后指定一个要跳转的网页地址。当浏览者单击文字或其他对象时,浏览器将跳转到指定的目标网页。

1.超链接的分类

根据超链接目标文件的不同,超链接可分为页面超链接、锚点超链接、电子邮件超接链等;根据超链接单击对象的不同,超链接可分为文字超链接、图像超链接、图像映射等。

2.路径

创建超级链接时必须了解链接与被链接文本的路径。在一个网站中,路径通常有3种表示方式:绝对路径、根目录相对路径和文档目录相对路径。


Dreamweaver

8.4 超链接

8.4.2 设置超链接

【例8-3】制作一个“金庸名著赏析”网页,使用锚记链接、页面间链接和电子邮件链接等技术。当用户单击主页面栏目中某个名著的链接时,首先链接到本页面内该作品的简介位置,如果用户需要查看详细内容,单击“详细内容”链接,进入相应的页面显示详细的作品内容。使用锚点链接实现页内链接,页面之间可以通过“返回”链接返回到主页面,实例效果如图8-38所示。

【例8-3】


Dreamweaver

超链接分类

  • 内部链接:在同一个站点内的不同页面之间相互联系的超链接。

  • 锚点链接:可以链接到网页中某个特定位置的链接。

  • 外部链接:把网页与Internet中的目标相联系的链接。


Dreamweaver

普通文本超级链接

  • 文本的Properties面板上有Link和Target两项,这就与超级链接有关。

  • 选中所需的文本,有四种方法可使它链接到其它页面。

  • 直接在Link后填入要链接到的页面的地址。最好用相对地址,而不用绝对地址。

  • 点击后面的 图标,然后选取要链接到的页面。

  • 使用 图标。用快捷键F5可打开你定义的本地站点的文件列表,用鼠标点击 ,不要松开,拖动至你要链接到的页面即可。

  • 用鼠标把本地站点文件列表中的文件直接拖到Properties面板上Link后即可


Dreamweaver

文本属性面板-链接

  • 在链接栏输入链接网页的地址,单击链接文字可以直接跳到被链接的页面。

  • _blank:空白视窗,保留原来的窗口,新开启一个窗口浏览所链接的文件内容;

  • _parent:上一层页框视窗,若网页使用框架,则所链接的网页回到上一层的框架所在窗口;

  • _self:本身视窗,默认链接显示方式,所链接的内容取代原来窗口的内容;

  • _top:全视窗,以全窗口的方式出现所链接的网页,取代所有窗口内容。


Dreamweaver

设置文本链接的状态

  • 一个未被访问过的链接与一个被激活的链接在形式上肯定会有所区别,链接被访问过了也会发生变化,提示用户这是一个已经点击过的链接,所有这些都是链接的状态。通过设置不同的文本颜色可以使各个状态区别开来。

  • 设置不同的文本颜色的具体步骤如下:

  • 打开包含文本链接的文档“园丁乐园”,选择主菜单中的“Modify修改)”|“Page Properties(页面属性)”命令,打开“Page Properties(页面属性)”对话框;

  • 单击“Links(链接)”项右边的图标,打开调色板,选取一种颜色;

  • 同样为“Visited Links(访问过的链接)”、“Active(活动链接)”项设置不同的颜色;

  • 单击“Ok”按钮,完成设置。


Dreamweaver

删除文本超链接

先用鼠标选定文本对象,将光标定位于属性面板的“Link”文本框中,用“BackSpace”键或“Delete”键,将其显示的超链接对象文件名删除,再回车,或选择“Modify”|“Remove Link”命令,都可以删除超链接而保留原文本对象。


E mail

插入E-mail及其链接

  • 单击“常用”对象面板上的“电子邮件”按钮;

  • 设置邮件地址,单击确定按钮。


Dreamweaver

内部超链接

1.为文字添加超链接

2.为图片添加超链接


Dreamweaver

创建锚点

(1)将光标移到需要加入锚点的地方,一般是将光标放置在一行或是一段文字的开头部分;

(2)单击对象面板“Invisibles”类上的“插入锚点” 按钮,将弹出“Insert Named Anchor(插入命名锚点)”对话框;

(3)在对话框的“Anchor Name”文本框输入锚点的名称;

(4)单击“OK”按钮。


Dreamweaver

命名锚点

① 只能使用字母和数字,锚点命名不支持中文。虽然在插入锚点对话框中能输入中文,但在属性面板上显示的则是一堆乱码,且在为锚点添加链接的时候,也无法工作。

② 锚点名称的第1个字符最好是英文字母,一般不要以数字做为锚点名称的开头。

③ 锚点名称区别英文字母的大小写。

④ 锚点名称间不能含有空格,也不能含有特殊字符。


Dreamweaver

链接锚点

  • 创建锚点后,还必须链接锚点。选择想要链接到锚点的文字或图片,然后按如下方法中的任意一种进行操作。

  • 在属性面板上的“Link”文本框中输入符号 # 和锚点名称。

  • 选择文字或图片后,按住Shift键,然后拖动鼠标指向锚点。在属性面板上的“Link”文本框中将自动出现符号#和该锚点的名称。

  • 按住属性面板上的“Point to File(指向文件)”按钮,并拖动鼠标指向锚点,属性面板上的“Link”文本框中自动出现符号 # 和该锚点的名称。


Dreamweaver

链接锚点时,应注意以下事项:

① 在#和锚点名之间不要留有空格,否则链接会失败。

② 在不同文件夹中为锚点创建链按时,其文件名后缀必定是“.htm”,而不能写成“.html”,否则链接也会失败。

③ 符号#必须是半角符号,而不能为全角符号。


Dreamweaver

外部超链接

  • 将本站点的某个对象与Internet上的目标建立一种相互的关系。

    例如选中某个对象,在属性面板的Link文本框中填上http://www.swjtu.edu.cn再回车,就可以了。


Dreamweaver

添加下载文件超链接

  • 网站提供文件下载功能的方法

  • 首先选择主窗口的菜单站点→站点文件命令

  • 打开站点窗口,找到需要链接的目标文件;

  • 选择网页中需建立超链接的文字,按下Shift键拖动鼠标到站点窗口中的目标文件。


Dreamweaver

创建空链接

  • 空链接是一个未指定目标的链接,Dreamweaver 的行为面板中列出了许多行为,这些行为相当于使用JavaScript编写的程序或函数,要想对文本设置行为,首先为文本建立空链接,这样行为才有效。

  • 为文本建立超链接时,只要先在文档窗口选定文本,然后在属性面板中的“链接”栏中输入一个数值符“#”即可。建立空链接的目的就是为了应用行为,其他情况下不必建立空链接。


Dreamweaver

8.5 使用图像

8.5.1 插入图像

【例8-4】制作一个学校建筑的展示网页,通过学校校风图像和循环滚动图像的展示,突出学校的建筑风格和特色。循环的图像支持超链接,并且鼠标移动到图像上时,画面静止;鼠标移出图像后,图像继续滚动,效果如图8-50所示。

图8-50 实例效果

【例8-4】


Dreamweaver

制作特色的滚动效果

将光标定位到第一副画面之前,添加如下代码

<marquee behavior="scroll" scrolldelay="200" width="500" height="85" onmouseover='this.stop()' onmouseout='this.start()'> <a href="&#65283;"><img src="image/001.gif" width="144" height="85" border="0"/></a><a href="&#65283;"><img src="image/002.gif" width="149" height="85" border="0"/></a><a href="&#65283;"><img src="image/003.gif" width="153" height="85" border="0"/></a><a href="#"><img src="image/004.gif" width="132" height="85" border="0"/></a>

</marquee>


Dreamweaver

8.5 使用图像

8.5.2 图像映射

【例8-5】制作一个认识世界地图的网页,当用户将鼠标移至地图的不同位置时,显示出相应的说明文字,例如,鼠标移到南美洲区域上时,便会显示“南美洲”的字样。单击地图的不同位置,打开相应的链接页面显示相应的简介,效果如图8-57所示。

图8-57 实例效果

【例8-5】


Dreamweaver

8.5 使用图像

8.5.3 鼠标经过图像

【例8-6】制作一个翻转图像的效果,原始图像是一幅Windows XP操作系统的缩略图像。当鼠标经过图像时,图像变为Windows XP操作系统的放大画面;而鼠标离开时,图像又恢复为原始图像;当单击图像时,链接到另外一个介绍Windows XP操作系统的页面,效果如图8-62所示。

图8-62 实例效果

【例8-6】


Dreamweaver

简单首页设计例子-插入图片

  • 将光标移到要插入图片文件的位置,单击“对象面板”上的“图像”按钮;

  • 在弹出的“选择图像源”窗口里选择需要插入的图像文件。


Dreamweaver

添加图像

插入静态图片

使用Insert菜单、Object面板或者直接从资源管理器中将图象文件拖动到文档窗口中的合适位置。

1)Insert菜单:选定Insert菜单中的Image选项,将会出现Select Image Source对话框,在该对话框中选定要插入的图片文件名及其所在的文件夹、文件类型,然后单击Select按钮,该图片就会被插入到插入点光标所在的位置。

2)Objects面板:单击Object面板中的Insert Image按钮,也会出现Select Image Source对话框。


Dreamweaver

在网页中插入图像

1。插入图像

在Dreamweaver中插入图像非常简单,具体操作步骤见课本。

2.图像属性参数

在文档中插入图像后,用鼠标单击图像,图像四周出现可编辑的缩放手柄,说明该图像被选定。这时属性面板中显示出关于图像的属性信息。

3.改变图像的尺寸

改变图像的尺寸大小可以通过在属性面板中的“W”和“H”直接输入数值来改变图像的尺寸大小 。此外,还可以通过拖放图像边框来改变图像的尺寸。

4.调整图像在网页中的相对位置


Dreamweaver

添加图像占位符

  • 创建占位符来代替稍后添加的图像;

  • 在要添加图像的位置创建一个空行。单击这个空行。

  • 选择“插入”>“图像对象”>“图像占位符”。

  • 在“图像占位符”对话框中,输入该占位符的名称、输入宽度和高度。

  • 单击“确定”。


Dreamweaver

图像属性

  • 图像名称

  • 宽和高:所选定图片的宽度和高度,单位为像素。源文件:图片的路径及文件名

  • 链接

  • 对齐:图片的对齐方式,进行图文混排时可以使用此项

  • 替代:可以在后面的文本框中输入文字,当图片在浏览器中不能显示时,将显示文本框中的文字


Dreamweaver

图像属性

  • 地图

  • 垂直边距和水平边距:图片在垂直和水平方向的位置。

  • 目标

  • 低品质源

  • 边框:为图片指定边框的宽度

  • 编辑

  • 重设大小


Dreamweaver

8.6 使用多媒体对象

8.6.1 添加背景音乐

背景音乐是体现网页个性和风格的一种常用手段,但由于背景音乐并不是一种标准的网页属性,所以需要通过修改源代码的方式为网页添加背景音乐。

【例8-7】为前面章节中制作的学校建筑展示网页制作背景音乐。打开页面时,自动播放一首温馨的MIDI背景音乐。

【例8-7】


Dreamweaver

添加背景音乐

  • 在<head>….</head>添加如下代码

  • <bgsound src="../music/axs.MID" loop="1" />


Dreamweaver

8.6 使用多媒体对象

8.6.2 声音与视频

【例8-8】制作一个影音播放的娱乐页面。当页面打开时,页面内左上角嵌入浏览器自动播放一段标志视频;当用户单击“音乐欣赏”中的歌曲链接时,在新的窗口打开Windows Media Player播放器播放该歌曲;当用户单击“MV电影欣赏”中的视频链接时,在新的窗口打开Windows Media Player播放器播放视频动画。实例效果如图8-64所示。

图8-64 实例效果

【例8-8】


Dreamweaver

声音与视频

  • 制作嵌入型标志视频:插入-媒体-插件,选择要播放的文件

  • 设置标志大小

  • 设置音频视频链接,目标为_blank


Dreamweaver

8.7 使用表格

8.7.1 插入表格

表格是页面布局极为有用的设计工具。在设计页面时,往往要利用表格来定位页面元素。使用表格可以导入表格化数据,设计页面分栏,定位页面上的文本和图像等。

在Dreamweaver中插入表格的方法如下。

① 将光标放到要插入表格的位置。

② 执行下列操作之一:

 执行“插入”→“表格”命令;

 单击插入工具栏“常用”分类中的“表格”按钮;

 按〈Ctrl〉+〈Alt〉+〈T〉组合键。


Dreamweaver

8.7 使用表格

8.7.2 添加内容

建立表格以后,可以在表格单元格中添加文本、图像及任意可以内嵌在网页中的元素。

【例8-9】制作一个QQ商城电器产品销售统计表格,统计电脑、电视机和电冰箱4个季度的销售情况,如图8-70所示。

图8-70 实例效果

【例8-9】


Dreamweaver

表格 分类

  • 边框值是否为0分为:

  • 有形表格:预览时能看见、可以填写数据、按升序或降序排列

  • 和无形表格:预览时不可见、主要用于排版


Dreamweaver

网页结构分析

装饰栏

导航栏

标题栏

信息区


Dreamweaver

创建新表格

利用Dreamweaver 创建新表格时,首先选中对象面板上“View”栏目下“Standard View”(标准视图)按钮,然后可以通过下列四种方式中的任意一种:

① 将对象面板调整到“Common”类上,单击“Insert Table”(插入表格)按钮。

② 通过主窗口的菜单“Insert”|“Table”命令。

③ 使用快捷组合键“Ctrl+Alt+T”。

④ 将对象面板调整到“Common”类上,拖动“Insert Table”按钮到主窗口的工作区中。

插入表格:Insert菜单-Table选项

嵌套表格:在表格的单元格中再插入表格。操作:选定单元格、Insert菜单、Table选项


Dreamweaver

插入表格进行编排

  • 在“对象”面板中单击“常用”选项卡上的“表格”按钮,出现一个插入表格对话框,在对话框内填入相应数据。单击“确定”,一个表格就插入到编辑窗口中。


Dreamweaver

表格属性和单元格属性


Dreamweaver

表格属性

  • 表格的行数。

  • 表格的列数。

  • 表格的宽度

  • 表格边框的宽度。

  • 表单元格间隙设置。

  • 表单元格内部空白。


Dreamweaver

选择表格

选择表格可分为选择整个表格和选择表格中的单元格。

① 如果要选择整个表格,则可进行如下的操作之一:

  • 将光标置于表格中的某个单元格中,选择“Modify”|“Table”|“Select Table”命令。

  • 将光标置于表格中的某个单元格中,再按两次组合键“Ctrl+A”。

  • 将光标置于表格中的某个单元格中,单击鼠标右键,在弹出的快捷菜单中选择“Select Table”命令。

  • 将光标置于表格的尾部(在表格的同一行,但不在表格之内),向左拖动鼠标。

  • 单击表格的边线。

    ② 的方法有以下几种:


Dreamweaver

选择表格行或列

  • 1)选择某一表格行:在选定行的左侧单击鼠标或者使用状态栏中的tr按钮2)选择连续的多个表格行:在要选定的第一行的左侧按住鼠标左键向下拖动3)选择不连续的多个表格行:Ctrl键+在选定行的左侧单击鼠标左键4)选择某一表格列:在选定行的上面单击鼠标5)选择连续的多个表格列:在要选定的第一列的上面按住鼠标左键向右拖动6)选择不连续的多个表格列:Ctrl键+在选定列的上面单击鼠标左键


Dreamweaver

选择单个单元格

  • 将光标置于所要选择的单元格中,按一次组合键“Ctrl+A”。

  • 将光标置于所要选择的单元格中,向右拖动鼠标。

  • 将光标置于所要选择的单元格中,选择“Edit”|“Select All”命令。

  • 按住Ctrl键,单击所要选择的单元格,再单击一次则取消对单元格的选择。


Dreamweaver

选择多个单元格

  • 按住Ctrl键,单击所要选择的所有单元格。

  • 将光标置于单元格中,拖动鼠标,选择多个单元格。

  • 如果要选择整行,将光标置于该行的左边缘,当光标变成图标时单击鼠标左键。

  • 如果要选择整列,


Dreamweaver

选择的全部单元格

  • 将光标置于第1个单元格中,并拖动鼠标至最后一个单元格。

  • 将光标置于第1个单元格中,按住Shift键,再单击最后一个单元格。

  • 将光标置于第1行的左边缘,当光标变成图标时,向下拖动鼠标至最后一行。

  • 将光标置于第1列的上边缘,当光标变成图标时,向右拖动鼠标至最后一列。


Dreamweaver

取消选择

  • 取消所有选定单元格的选择状态:单击鼠标左键

  • 取消某几个单元格的选择状态:Ctrl键+鼠标单击需要取消选择的单元格


Dreamweaver

单元格的复制

  • 选定单元格、Edit菜单、Copy选项

  • 说明:要复制的单元格必须构成矩形区域;

  • 复制整行的单元格,将被添加到目标单元格的上方;

  • 复制整列的单元格,将被添加到目标单元格的左侧;

  • 将目标定位在文档窗口的空白处,将会创建一个独立的表格。


Dreamweaver

单元格的删除

  • 在单元格内设置插入点、快捷菜单、Table-Delete Column或Delete Row或者选定要删除的表格行或列、Edit菜单-Cut或Clear选项

  • 注意:在Dreamweaver中,不能删除某一个或某几个单元格,只能删除表格的某行或某列。

  • 删除单元格内的文本:选定单元格、Edit菜单-Cut或Clear选项或者选定单元格、按Delete键


Dreamweaver

插入表格行或列

  • 插入某一行或某一列:确定表格内插入点的位置、Modify菜单、Table选项、Insert Row或Insert Column

  • 插入某几个表格行或列:在表格内确定插入点的位置、Modify菜单、Table选项、Insert Rows or Columns

  • 删除表格行或列:选定要删除的行或列、Modify菜单、Table选项、Delete Row或Delete Column


Dreamweaver

在现有的表格中插入单元行

  • 将光标移到要插入单元行的下一行,选择“Modify”|“Table”|“Insert Row”命令。

  • 将光标移到要插入单元行的下一行,按组合键“Ctrl+M”。

  • 将光标移到要插入单元行的下一行,单击鼠标右键,在弹出的快捷菜单中选择“Table”|“Insert Row”命令。


Dreamweaver

在现有的表格中插入单元列

  • 将光标移到在插入单元列的右边一列,选择“Modify”|“Table”|“Insert Column”命令。

  • 将光标移到要插入单元列的右边一列,按组合键“Ctrl+Shift+A”。

  • 将光标移到要插入单元列的右边一列,单击鼠标右键,在弹出的快捷菜单中选择“Table”|“Insert Column”命令。


Dreamweaver

在现有的表格中添加多行或多列

首先将光标移到要插入行或列附近的单元格中,单击鼠标右键,在弹出的下拉菜单中选择“Table”|“Insert Rows or Columns”命令,弹出 “Insert Rows or Columns”对话框。在此对话框中进行相关的设置,然后单击“OK”按钮,设置的多列或多行将插入到页面中。


Dreamweaver

删除整行/整列

  • 先选择欲删除的整行或整列,直接按Del键,即可删除。

  • 先将光标移到要删除的行或列中,选择“Modify”|“Table”|“Delete Row”或“Delete Column”命令。

  • 将光标移到要删除的行或列中,单击鼠标右键,在弹出的快捷菜单中选择“Table”|“Delete Row”或“Delete Column”命令。


Dreamweaver

编辑表格

(1)设置表格高度

在创建表格时,可以通过表格对话框来设置表格的宽度,但无法设置表格的高度,如果要设置表格的高度,则必须通过表格属性面板来确定。

(2)合并/拆分单元格

对表格中的单元格进行合并/拆分,既可以通过菜单命令来实现,也可以通过单元格属性面板(单击任意单元格,属性面板将会自动切换)上的快捷按钮来完成。

(3)设置单元格的宽度及高度

在单元格属性面板上可以改变单元格默认的宽度和高度。


Dreamweaver

分割与合并

  • 分割单元格:选定单元格--Modify菜单--Table选项--Split Cell

  • 或者在要分割的单元格内单击鼠标右键打开快捷菜单,使用Table下的Split Cell选项

  • 合并单元格:选定需要合并的单元格--Modify菜单--Table选项--Merge Cells或者单击鼠标右键打开快捷菜单,选择Table下的Merge Cells选项


Dreamweaver

表格属性的设置

设置表格的边框颜色

设置表格的边框颜色时,必须指定表格的边框线的宽度不为0。要为表格的边框指定颜色,首先选择表格,单击属性面板上“Brdr Color”的颜色框,在弹出的调色板中选择颜色,或者是在后面的文本框中直接输入颜色的色码,即可为表格的边框添加颜色。

(2)设置表格的背景

表格的背景与网页背景一样,即可以设定为单一的颜色,也可以用图片作为表格的背景。要将表格背景设为单一的颜色,首先选择整个表格,再单击属性面板上“Bg Color”后面的颜色框,在弹出的调色板中选择颜色,或者是在后面的文本框中直接输入颜色的色码;要将图像设为表格的背景,首先选择整个表格,再在属性面板上的“Bg Image”文本框中输入图像所在的路径,或是单击其后的文件夹图标,在弹出的对话框中选择图像文件。


Dreamweaver

表格的嵌套

在表格中嵌套表格

将光标置于要嵌套表格的单元格中,选择Insert→Table。

•将光标置于要嵌套表格的单元格中,将Objects面板切换到Common类下Insert Table按钮。

•将Insert Table按钮从Objects面板的Common类上拖动到要嵌入表格的单元格中。


Dreamweaver

套用表格样式


Dreamweaver

导入表格数据文件

加入外部数据


Dreamweaver

应用表格

  • 使用预置表格:选定表格-Command菜单--Format Table选项

  • 排序表格内容:选定表格或在表格的任一单元格内容设置插入点、Command菜单的Sort Table选项


Dreamweaver

修正表格:选定表格、属性调板

  • 1)将鼠标移至表格的左上角,当光标变成十字形的箭头时单击鼠标左键。2)将鼠标移至表格的右边框,当光标变成水平方向的双向箭头时单击鼠标左键。3)将鼠标移至表格的下边框,当光标变成垂直方向的双向箭头时单击鼠标左键。4)使用Modify菜单下Table的Select Table选项。5)使用文档窗口中状态栏里的Table标签。


Dreamweaver

用表格进行页面布局

  • 网页排版功能,


Dreamweaver

导入表格数据

  • 把用Excel等软件处理的数据放到网上,Dreamweaver专门提供了一个转换的功能。

  • 先把Excel等软件中将文件另存为文本格式的文件,或在Excel中保存为.csv,

  • 然后选择File下的Import中的Import Table Data…,或者选择Insert下Tabular Data,这时都弹出对话框(只是标题不同,前者是Import Table Data,后者是Inset Tabular Data)。


Dreamweaver

  • 填写需导入的数据文件的地址,或者可点击下面的Browse…按钮选择这个文件。

  • 用来向Dreamweaver说明,这个数据文件的各数据间是怎么分隔开的,以供Dreamweaver正确的区分各数据。

    Tab表示是用空格分隔的;

    Comma表示是用逗号分隔的;

    Colon表示是用冒号分隔的;

    Semicolon表示是用分号分隔的;

    Other,则下拉选框后多出一个文本框, 可填入用来分隔数据的符号。


Dreamweaver

  • 导入数据后,生成的表格的宽。

    Fit to Data:则表格宽度尽量适应原数据文件数据的排列方式。

    Set:则是自行设置表格的宽度,在后面填入数值,紧跟其后的下拉选框是数值的单位。

  • 可填单元格内空白的大小,单位将是像素单位。

  • 可填单元格间的间隙大小,单位将是像素单位。

  • 设置生成的表格顶行内容的文本格式,其后的下拉选框有四个选项——No Formatting, Bold, Italic, 和Bold Italic。No Formatting是不设特殊格式,Bold是粗体, Italic是斜体,Bold Italic是粗斜体。

  • 可填生成表格的边框宽度。


Dreamweaver

标准视图中的表格与布局视图中的表格

  • 常用选项卡

  • 表格选项卡

  • 布局选项卡


Dreamweaver

标准视图模式下表格的应用技巧

  • 选定表格的操作

  • 表格的缩放操作

  • 编辑表格

  • 格式化表格


Dreamweaver

布局视图模式下表格的应用技巧

  • 绘制布局单元格

  • 绘制布局表格

  • 移动布局单元格和布局表格

  • 调整布局单元格和布局表格大小

  • 布局单元格属性面板

  • 布局表格属性面板


Dreamweaver

习题8

1.简答Dreamweaver文档编辑所包括的3种视图及特点。

2.本地站点和远端站点的区别是什么?举例建立一个本地站点。

3.在本地站点中创建一个首页文件index.htm和一个存放图像的文件夹image。自己定义首页文件的标题、背景色和页面字体。

4.使用网页的基本元素设计一个简单的以美食为主题的网页。

5.简答超链接3种路径的区别和适用场合。

6.使用图像和超链接制作一个手机展示的页面,主页面显示手机的缩略图,单击缩略图后打开一个新页面,使用表格和放大的图片介绍选择手机的性能指标,如图8-76所示。

7.设计一个包含内嵌视频、使用超链接的声音和视频的页面。

8.使用表格制作一个学生课程表的页面。


  • Login