大学计算机基础 教学课件 ppt 作者 刘红梅 霍世平 第7章 网页制作Dreamweaver MX 2004

《大学计算机基础 教学课件 ppt 作者 刘红梅 霍世平 第7章 网页制作Dreamweaver MX 2004》由会员分享，可在线阅读，更多相关《大学计算机基础 教学课件 ppt 作者 刘红梅 霍世平 第7章 网页制作Dreamweaver MX 2004（69页珍藏版）》请在金锄头文库上搜索。

1、第7章 网页制作Dreamweaver MX,第八章,第六章,目录,7.1 Dreamweaver MX 2004简介,7.1.1 HTML简介 7.1.2 DreamWeaver MX 2004工作环境介绍,7.1.1 HTML简介,HTML是一种网页设计语言，是网页设计的基础，其英文全名为HyperText Markup Language，直译为超文本标记语言，它不是一种程序设计语言，而是一种用于描述网页文档的标记语言。通过浏览器可以运行HTML文档，显示网页内容。,1创建HTML文件,打开记事本，然后输入如下的HTML语言程序，并将其保存为myweb.html，在保存文件输入文件名时，一

2、定要输入HTML文件的扩展名.htm或.html）。 我的第一个HTML 文档 这是我制作的第一个网页! ,2HTML文档的基本结构和标记,标准的HTML文件都具有一个基本的整体结构，即HTML文件的开头与结尾、HTML的头部和实体3大部分。 （1） 和双标记符 （2和头部标记符 （3）和正文标记符,3常用标记,（1）标题：HTML支持6级标题。第一级的标题用和标记，其中的文字在显示时字号最大；其余的分别用和、和和来标记。 （2）段落：和用来标记段落，它将其内的的文字另起一段显示。段与段之间有一个空行。如果文字另起一行显示，可以用单标记，作用是指定其后的文本另起一行。,（3）链接：HTML文件

3、的链接是通过标记和实现的。在标记中除标记名“A”外还包括一些属性。HREF是链接标记中最常用的属性，该属性用来指出所要链接的文件的路径和名称或URL，其简单结构形式为： 需要链接的文字,（4）图像：利用标记可以在HTML文件中嵌入图像，其中属性SRC用来指定图像文件的名字。简单格式为： ,7.1.2 DreamWeaver MX 2004环境介绍,正确安装DreamWeaver MX 2004之后选择【开始】|【程序】|【Macromedia】|【Macromedia Dreamweaver MX 2004】命令或双击桌面上的快捷图标，即可启动Dreamweaver MX 2004应用程序。首

4、次启动 Dreamweaver 时，会调出【工作区设置】对话框。用户如果习惯编写代码，可以选择【代码编写者】单选框。这里选择【设计者】单选框，选择完后单击【确定】按钮。如果想以后选择进行修改，可选择 【编辑】|【首选参数】|【更改工作区】命令重新选择。,窗口界面介绍,工作窗口主要由标题栏，菜单栏，插入工具栏、文档工具栏、文档窗口、属性面板和面板组7部分组成。 （1）插入工具栏实质上是一个工具栏集，主要用于在文档中插入各种对象及进行一些简单的编辑。默认显示【常用】类别。用户可以单击工具栏中的名称按钮，从弹出的子菜单中选择其他类别。,（2）文档工具栏的主要作用是可以不使用菜单命令，仅通过它提供的快

5、捷按钮就可以方便的控制文档的视图显示。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 （3）文档窗口显示当前创建和编辑的文档。,（4）属性面板用于查看和更改所选对象或文本的各种属性。 （5）面板组是分组在某个标题下面的相关面板的集合，若要展开一个面板组，只要单击名称左侧的展开箭头；若要取消一个面板组，则拖曳该组标题条左边的手柄。,7.2 网页基本对象的创建,7.2.1 创建网页 7.2.2 文本操作 7.2.3 图片操作 7.2.4 超级链接的操作,7.2.5 网页属性的设置,7.2.1 创建网页,创建网页可以通过两种办法来进行。一种方法在开始页中单击【创建新项

6、目】中的【HTML】选项，即可创建一个空白网页。另一种方法选择【文件】|【新建】命令，弹出【新建文档】对话框，从各种预先设计的页面布局中选择一种，例如选择【基本页】中【HTML】，单击【创建】按钮，即可创建一个新网页。 创建文档后，就可以为其指定一个名称保存到相应的文件夹中。单击【文件】|【保存】命令，在弹出的对话框中打开要保存到的文件夹，在文件名文本框中输入网页名称，然后单击【保存】按钮。,7.2.2 文本操作,1插入文本 将光标放置到文档窗口中要插入文本的位置，然后直接输入文本，也可将在其他编辑器中生成的文本复制过来，如果需要分段换行则需按【Enter】键，即可完成文本的插入。 2文本的修

7、饰 插入的文本可以进行修饰来增加它的观赏性。选中需要修饰的文本，通过调整【属性】面板中各个参数，来改变文字的字体、颜色、大小和对齐方式等。,7.2.3 图片操作,1插入图像 将光标置于文档窗口中要插入图像的位置，选择【插入】|【图像】命令，或在【插入栏】中单击【图像】按钮，在弹出的【选择图像】对话框中，选择图像后单击【确定】按钮即可插入图像。 2图片的编辑 选中需要编辑图像，通过调整【属性】面板中各个参数，来对图像的大小、图像的名称、超级链接和对齐方式进行编辑。,属性面板中常用的设置如下。 【图像】：可在文本框中输入图像的名称，在脚本语言中引用时使用，可以不设置。 【高和宽】：用来设置图像的大

8、小。 【源文件】：此框用来设置插入图像的路径及名称，单击右端的文件夹按钮，可以重新选择图像。 【垂直边距】和【水平边距】：用来设置图像与其他对象的距离。 【边框】：用来输入图像边框的宽度。 【对齐】：用来设置图像和其他对象的对齐方式。,7.2.4 超级链接的操作,超级链接是指站点内不同网页之间，站点与Web页之间的链接关系，它可以使站内的网页成为有机的整体，还能使不同站点之间建立联系。Dreamweaver MX 2004提供了多种方法创建超级链接。,1站内网页之间的链接,在myweb1.html网页中选中要做超级链接的文字或者图片，在这里选择 “我的相册”文字，将它链接到“mypicture

9、.html”文件，在【属性】面板中的【链接】框中输入“mypicture.html”，并保存。 创建链接后，按【F12】键浏览网页时，将光标指向链接对象，光标变成小手形状，表示该对象已经创建超链接，单击后即可弹出目标文件。,2创建电子邮件链接,选择要创建邮件链接的文字，如“和我联系”，然后在【属性】面板中的【链接】框中输入“mailto:”。也可以选择【插入】|【电子邮件链接】命令，打开【电子邮件链接】对话框，在【文本】后的文本框中输入“和我联系”，在【E-mail】后的文本框中输入“”，完成后单击【确定】按钮。按【F12】键浏览网页时，单击“和我联系”会启动Outlook软件，便可书写电子邮

10、件。,3创建空链接,空链接是指一些文字或图片表面上设置超链接，但单击该链接时，并不会调出任何链接文件。创建空链接非常简单，选中要创建空链接的对象，在【属性】面板的【链接】文本框中输入“#”即可。,4创建下载链接,选中要创建下载链接的文字，如 “素材资料”文字，在【属性】面板中，单击【链接】文本框右侧的文件夹按钮，打开【选择文件】对话框，在对话框中选择要链接的文件，这里选择“网页素材.rar”，然后单击【确定】按钮。按键浏览网页时，单击“素材资料”文字，即可弹出【文件下载】对话框进行下载文件。,7.2.5 网页属性的设置,网页属性包括网页中文本的颜色、网页的背景颜色、背景图像、网页边距等。 选择

11、【修改】|【页面属性】命令或者在【属性】面板上单击【页面属性】按钮，打开【页面属性】对话框。 在【分类】列表中可以选择各个选项分别进行设置。 选择【外观】选项，可以设置页面字体，字体大小、文本颜色、网页背景颜色、背景图像以及网页边距。,选择【链接】选项，可以设置超链接文字的字体、大小、颜色、下划线样式，还可以设置链接颜色（设置存在链接而又未访问过的文字颜色）、已访问链接（设置访问过的文字颜色）、变换图像链接（设置鼠标移到文字上的颜色）和活动链接（设置单击时文字的颜色）。 选择【标题】选项，可以对6种标题样式的字体、颜色、加粗、倾斜等效果进行重新设置。,7.3 表格和页面布局,7.3.1 表格的

12、创建和编辑 7.3.2 页面布局,7.3.1 表格的创建和编辑,表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位,1表格基本概念,表格是由行和列组成的，而一行或一列又是由多个单元格组成的。单元格是构成表格的最基本单位，由一个方格所限定，用于存放数据；行由表格中横向连续的一排单元格构成，列则由表格中纵向连续的一排单元格组成。当选定了表格或表格中有插入点时，会显示表格宽度和每个表格列的列宽。,2创建表格,将光标移到要插入表格的位置，选择 【插入】|【表格】命令，或者选择【插入】栏中的【表格】按钮，弹出对话框，根据实际需要添入行数和列数即可插入一个表格 。

13、在表格的单元格中不仅可以输入文本，而且可以插入图像。,3表格操作,（1）选择表格元素。 选中一行，把光标移到该行的最左边单元格的左面，光标会变成箭头状，单击就可以选中一行。 选中一列，把光标移到该列的最上边单元格的上面，光标会变成箭头状，然后单击可以选中一列。 选中整张表格，把光标移到表格的左上角或右边框或下边框线上，单击即可选中整个表格。选中的表格周围会出现一个黑框。,选中单元格，单元格可以同时选中多个，选择连续的单元格时，光标先选中的一个单元格，按【shift】键不放，选取最后一个单元格；选不连续的单元格。按【Ctrl】键，点取所需要的单元格即可。 （2）表格的常用操作。 插入行：将光标放

14、置在单元格内，选择【修改】|【表格】|【插入行】命令。 插入列：将光标放置在单元格内，选择【修改】|【表格】|【插入列】命令。, 删除行和列：将光标放置在单元格内，选择【修改】|【表格】|【删除行（列）】命令。 单元格的合并：选定要合并的单元格，选择【修改】|【表格】|【合并单元格】命令，或者单击鼠标右键，在弹出的快捷菜单上选择【表格】|【合并单元格】命令。, 单元格的拆分：选定要拆分的单元格，选择【修改】|【表格】|【拆分单元格】命令，或者单击鼠标右键，在弹出的快捷菜单上选择【表格】|【拆分单元格】命令，弹出对话框，在对话框中选择拆分“行”或“列”，然后输入行数或列数。,（3）表格属性的设置

15、。 选定表格后，可以用【属性】面板来为表格设置属性。表格的【属性】面板 。 表格Id：用来设置表格的名称。 行和列：用于指定表格的行数和列数，更改此值可以在表格中添加或删除行或列。, 宽和高：用于指定表格的宽度和高度，通常不需要设置表格的高度。 填充：用于指定单元格内容和单元格边框之间的像素数。 间距：用于指定相邻单元格之间的像素数。 对齐：用于选择表格相对于同一段落中其他元素的显示位置。,7.3.2 页面布局,为了简化使用表格进行页面布局的过程，Dreamweaver提供了布局视图进行网页布局。设计一个网页时首先要规划好版式。,1绘制布局表格和单元格,在页面布局视图中可以绘制布局表格和布局单

16、元格。 首先单击【插入】工具栏中的【布局】项换成【布局】工具栏，单击布局工具栏中的【布局】按钮，切换到布局视图，单击【布局】工具栏上的【布局表格】按钮，鼠标变成十字形状，在文档窗口中按下鼠标左键并拖曳，松开鼠标即绘制出布局表格。,单击【布局】工具栏上的【布局单元格】按钮，鼠标变成十字形状，在文档窗口中按下鼠标左键并拖曳，松开鼠标即绘制出布局单元格，此时页面上布局表格外框为绿色，布局单元格外框为蓝色。,2绘制嵌套布局表格,页面布局表格不能相互重叠，却可以将一个布局表格绘制在另一个布局表格中生成嵌套表格，对外部表格所进行的更改不会影响嵌套表格中的单元格。 绘制的布局表格和布局单元格可以移动，首先选择需要移动的单元格和表格，使用键盘上的方向键来控制移动，每次移动一个像素，如果按【Shift】键同时使用方向键，每次移动10个像素。 绘制的布局表格和布局单元格都可以通过属性面板来进行调整。,7.4 表单应用,7.4.1 表单的创建 7.4.2 表单对象的创建,7.4.1 表