计算机基础第7章PPT

第7章网页制作DreamweaverCS5概述7.1DreamweaverCS5界面7.2创建站点7.3制作网页

7.4表单应用

7.5第八章第六章目录概述7.1DreamweaverCS5界面7.2创建站点7.3DreamweaverCS5界面7.2制作网页

7.4创建站点7.3DreamweaverCS5界面7.2表单应用

7.5制作网页

7.4创建站点7.3DreamweaverCS5界面7.2创建站点7.3DreamweaverCS5界面7.2制作网页

7.4创建站点7.3DreamweaverCS5界面7.2DreamweaverCS5界面7.2创建站点7.3DreamweaverCS5界面7.2制作网页

7.4创建站点7.3DreamweaverCS5界面7.2创建站点7.3DreamweaverCS5界面7.2制作网页

7.4创建站点7.3介绍DreamweaverCS5是Adobe公司推出的最新版本，通过该工具能够高效地设计、开发和维护基于标准的网站和应用程序。它是一款专业化的网页制作工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、Homesite/BBedit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等多媒体格式，和动态HTML、基于团队的Web创作。7.1概述7.1.1DreamweaverCS5的特点7.1.2基本概念

7.1.3网页制作工具

7.1.4网站规划7.1.1DreamweaverCS5的特点

1．业界领先的Web开发环境使用业界领先的Web创作工具构建基于标准的网站，以可视方式或直接在代码中工作，借助CSS检查工具实现高效设计，借助内容管理系统进行开发。

2．集成CMS支持尽享对WordPress、Joomla!和Drupal等内容管理系统框架的创作和测试支持。“动态相关文件”允许用户直接访问某个页面的相关文件，甚至可用于动态页面；“实时视图导航”则提供动态应用程序的精确预览。

3．全面的CSS支持借助功能强大的CSS工具设计和开发网站。无需另外提供实用程序就能以可视方式显示CSS框模型，即使在外部样式表中，也可以减少手动编辑CSS代码的需求。

4．集成FLV内容通过轻松点击和符合标准的编码将FLV文件添加到任何网页中。借助“实时视图”中的FLV回放功能预览影片。

5．站点特定的代码提示从AdobeDreamweaverCS5中的非标准文件和目录代码提示中受益，它可以实现对WordPress、Drupal和Joomla!等第三方PHP库和CMS框架的增强提示支持。7.1.2

基本概念

1．Web页WWW（WorldWideWeb）是Internet上应用最广泛的一种服务。为了与传统的网络相区别，人们将WWW简称为Web。Web站点是指具有共同主题、性质相关的一组资源。Web页包括的主要元素有：文本、图像、超链接、导航栏、表格、表单、多媒体及特效等。（1）文本。文本是网页的主体，在制作网页时，可以设置文本的字体、字号、颜色以及其他格式。（2）图像。图像在网页中可以起到美化网页、展示作品、生动形象等作用，可以用来作网站标志（Logo）、网页背景、链接按钮、导航栏、网页主图等。（3）导航栏。导航栏能使浏览者方便地继续下一页或者返回主页（4）超链接。超级链接是指站点内不同网页之间、站点与Web页之间的链接关系，它可以使站内的网页成为有机的整体，还能使不同站点之间建立联系。（5）表格。表格是用于控制网页页面布局的有效方法。使用表格布局网页，可以实现横竖分明的风格。网页中的表格除了具备传统的表格存放和规划数据的功能外，还可以用来定位网页元素，即可用于网页元素的排版。（6）表单。表单用于收集信息或者实现交互式的效果，主要功能是接收浏览者在浏览器端的输入信息，然后将这些信息发送到服务器端。（7）多媒体。网页中可以插入的多媒体文件包括声音、影片、音频文件、视频文件、Flash对象、JavaApplet对象和ActiveX控件等。2．框架布局（1）框架。框架将浏览器的窗口分成多个区域，每个区域可以单独显示一个HTML文件，各个区域也可以相关联地显示某一个内容。一般可以将索引放在一个区域，文件内容显示在另一个区域。单击其中的某个链接时，链接的网页将出现在其他框架中，而索引页面本身不发生变化。在分配时，可以将窗口横向或纵向分成多个部分，还可以混合框架。框架网页的创建步骤和普通网页不同，具体创建步骤如下。①创建框架结构。首先需要创建一个新网页，并将此网页分割，从而获得需要的框架结构，并称其为框架的主页面。②设置框架。为分割后的框架制定或新建一个显示具体内容的页面。③创建链接。为每个框架命名，并通过“属性”面板为文本或图像指定链接。④保存框架网页。将所有的网页全部保存。（2）框架集与框架的区别。框架是浏览器窗口中的一个区域，可以显示与浏览器窗口其余部分中所显示内容无关的HTML文档。框架集是HTML文件，定义了一组框架的布局和属性。3．层布局

层（Layer）是一种HTML页面元素，可以将它定位在页面上的任意位置。层可以包含文本、图像或其他任何可在HTML文档中放入的文件。层的出现使网页从二维平面拓展到三维，可以对页面上的元素进行重叠和复杂的布局。可以使用层来设计页面的布局，将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层，也可以在一个层中放置背景图像，然后在该层的前面放置第二个层，它包含带有透明背景的文本。4．CSS样式

CSS（CascadingStyleSheets）是“层叠样式表”的简称，是一系列格式规则，是一种格式化网页的标准方式。CSS对颜色、字体、间隔、定位以及边距等格式方面提供了多种属性设置，这些属性均可用于HTML标记符。CSS最主要的目的是使页面格式设置与页面内容分开，可以单独设置样式，然后应用到页面中，提高网页设计和管理维护的效率。5．网页、网站、主页

①网页是用HTML所编写的具有丰富内容的页面。每一个网页都是磁盘上的一个文件，可以单独浏览。②网站是由大量内容相关的网页通过超链接的形式组织成一个逻辑上的整体。网站主要包括计算机服务器、在服务器上运行的网络操作系统、Web服务器、应用程序服务器软件、各种信息服务的软件资源、网站管理人员和开发人员等。③主页是网站中的第一页，是网站的出发点。6．网页的类型（1）静态网页。静态网页是指没有后台数据库、不含程序和不可交互的网页。编的是什么它显示的就是什么，不会有任何改变。它使用HTML描述。（2）动态网页。动态网页一般以数据库技术为基础，它实际上并不是独立存在于服务器上的网页文件。只有当用户请求时，服务器才返回一个完整的网页。7.1.3网页制作工具

以前的网页一般是由专业人员利用HTML（HyperTextMarkupLanguage）语言编写的。现在有很多可视化程度很高的网页制作工具，即便用户没有掌握专业的网页制作技术，利用这些网页制作工具，也能创作出风格独特、富有动感的网页。1．网页编辑工具（1）Dreamweaver。Dreamweaver是网页制作工具。它具有所见即所得的界面，也具有HTML编辑的功能。Dreamweaver支持ActiveX、JavaScript、Java、Flash、ShockWave等，还支持动态HTML的设计，使得在没有安装插件的情况下，也可以在Netscape和IE浏览器中正确地显示页面的动画，同时Dreamweaver还提供了自动更新页面信息的功能。Dreamweaver集成了程序开发语言，对ASP、NET、PHP、JS的基本语言和连接操作数据库都是完全支持的。（2）FrontPage。FrontPage是微软Office系列软件之一，继承了Office界面通用、操作简单等特点。用户可以像在Word中一样直接进行编辑，编辑的内容也将由FrontPage自动生成HTML网页代码。FrontPage特别适合初学者。2．网页动画与图像制作工具要想使网页具有丰富多彩的图像和动画，需要采用专门的图像和动画处理制作软件。（1）Photoshop。Photoshop是由Adobe公司开发的著名的图形图像处理软件。它是专业图像创作的首选软件，能够实现各种专业化的图像处理。（2）Flash。Flash是Macromedia公司专门为制作网页而设计的交互性矢量动画设计软件。使用它可以设计各种动态Logo（商标、图案）、动画、导航条、动感音乐，以及其他多媒体的各项功能。

（3）Fireworks。Fireworks是Macromedia公司专门设计的Web图形工具软件，它可以用较少的步骤生成较小但质量很高的JPEG和GIF图像，这些图像可以直接用于网页上。它是Web图形工具的首选软件。三种软件能够无缝合作。通常网页制作的顺序是，先在Fireworks中绘制主页图片，然后进行切片，再将切片导出到Dreamweaver中，在Dreamweaver中编辑修改，添加链接，最后再导入用Flash制作的动画。7.1.4网站规划1．网站定位网站定位要审时度势，根据自身的条件、地域的条件等来决定网站的方向，即从地域上、人群上、方向上、内容上去定位网站。2．收集资料网站定位好后，就要搜集相关的信息，作为制作网站的素材。信息要多多益善，更要精益求精。3．网站策划策划网站的整体风格、网站的前台内容、前台流程图、后台内容、后台流程图、网站开发工具、网站功能等。可以参照相关的网站来整体策划。整体风格会给用户带来第一印象，前台内容能吸引用户浏览网站，流程图可以理顺首页和内页的连接，提供更加好的用户体验。网站的整体策划能更好地为网站建设服务。4．网站设计网站的内容排版包括首页的排版、频道页的排版和内页的排版，按照网站内容的主次、特色来排版设计网站。5．主题栏的设置设计网站的主题栏与板块时应考虑以下几个问题。（1）突出主题。把主题栏放在最明显的地方，让浏览者快速、明确地知道网站所表现的内容。（2）设计一个“最近更新”栏目，让浏览者能够一目了然地知道更新内容。（3）栏目不要设置太多，一般不要超过10个。6．目录结构设计①按栏目内容建立子目录。②每个目录下分别为图像文件创建一个子目录image。③目录的层次不要太深，主要栏目最好能直接从首页到达。④尽量使用意义明确的非中文目录名称。7．颜色搭配合理利用色彩对于一个网站来说非常关键。网页选用的背景应和页面的色调相协调，色彩搭配要遵循和谐、均衡、重点突出的原则。8．网站LogoLogo如同商标一样，是站点特色和内涵的集中体现。Logo最重要的作用就是表达网站的理念，便于人们识别。设计Logo的原则是：以简洁的、符号化的视觉艺术把网站的形象和理念展示出来。9．版面布局网页页面的整体布局是不可忽视的。要合理地运用空间，使网页疏密有致，井井有条。版面布局一般应遵循的原则是：突出重点、平衡和谐，将网站Logo、主菜单等较为重要的模块放在突出的位置，然后再排放次要模块（例如：搜索、友情链接、计数器、版权信息、E-mail地址等）。此外，其他页面的设计应和首页保持相同的风格，并有返回首页的链接。10．图像的运用网页上应添加一些图像，为网页内容服务，不能喧宾夺主。图像要兼顾大小和美观。图像不仅要美观，其大小（所占字节数）应尽量小，以免影响网页的传输速率。最好将图像处理为GIF（颜色较少的）和JPEG（色彩较丰富的）格式。11．网站的推广（网站优化）网站的推广包括关键词的优化，在其他已具有相当知名度的网站上的推广和交换连接，和其他站长的经验交流等。7.2DreamweaverCS5界面7.2.1DreamweaverCS5界面7.2.2HTML文件1．启动DreamweaverCS5正确安装DreamweaverCS5之后，选择【开始】|【所有程序】|【Adobe】|【AdobeDreamweaverCS5】命令，或双击桌面上的快捷图标，启动DreamweaverCS5应用程序。2．DreamweaverCS5窗口界面启动DreamweaverCS5之后，出现如图7.1所示的窗口，单击【新建】组中的【HTML】选项，打开DreamweaverCS5的工作界面，如图7.2所示。工作窗口主要由标题栏、菜单栏、插入面板、文档工具栏、文档窗口、属性面板和面板组7部分组成。7.2.1DreamweaverCS5界面图7.1【DW】窗口2．DreamweaverCS5窗口界面启动DreamweaverCS5之后，出现如图7.1所示的窗口，单击【新建】组中的【HTML】选项，打开DreamweaverCS5的工作界面，如图7.2所示。工作窗口主要由标题栏、菜单栏、插入面板、文档工具栏、文档窗口、属性面板和面板组7部分组成。图7.2DreamweaverCS5工作界面DreamweaverCS5的工作窗口可以改变。单击标题栏右边的【设计器】按钮，弹出【设计器】下拉菜单，如图7.3所示。选择【经典】菜单命令，工作窗口变成【经典】窗口，如图7.4所示。图7.3【设计器】下拉菜单图7.4【经典】窗口1）【插入】面板：用于在文档中插入各种对象及进行一些简单的编辑。默认显示【常用】面板。可以单击面板中的名称按钮，从弹出的子菜单中选择其他类别，如图7.5所示。图7.5【插入】面板（2）文档工具栏的主要作用是可以不使用菜单命令，仅通过它提供的快捷按钮就可以方便地控制文档的视图显示。文档工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。如图7.6所示。（3）文档窗口显示当前创建和编辑的文档。图7.6文档工具栏（4）【属性】面板用于查看和更改所选对象或文本的各种属性。如图7.7所示。（5）面板组是分组在某个标题下面的相关面板的集合，如图7.8所示。若要展开一个面板组，只要单击名称左侧的展开箭头，例如，单击【文件】按钮，展开【文件】面板，如图7.9所示；再单击【文件】按钮，取消【文件】面板。图7.7【属性】面板图7.8面板组图7.9【文件】面板HTML可以通过专用的网页设计工具编写，如FrontPage、Dreamweaver，也可以用记事本、Word文档编辑器等进行HTML设计。创建HTML文件的步骤如下。（1）单击【开始】|【AdobeDreamweaverCS5】命令，启动DreamweaverCS5，打开【DW】窗口。在【新建】组中选择【HTML】链接，打开【DW】的网页设计窗口。单击【拆分】按钮，窗口分为上下两部分。上面为【代码】窗口，下面为【设计】窗口。7.2.2HTML文件1．创建HTML文件（2）在上窗口输入如下的HTML代码，输入代码的窗口如图7.10所示。<html>

<head>

<title>郁金香</title></head><bodybgcolor=#66FFFF><p><fontcolor="blue">郁金香</font></p><p><imgsrc="Tulips.jpg"width="152"height="127"alt="郁金香"></p></body></html>图7.10输入HTML代码的窗口（3）选择菜单【文件】|【保存】命令，打开【另存为】对话框，选择保存位置，输入文件名，如图7.11所示。（4）单击【在浏览器中预览/调试】按钮，弹出下拉菜单，如图7.12所示，选择【预览在IExplore】命令，浏览该网页。图7.11【另存为】对话框图7.12预览菜单

标准的HTML文件都具有一个基本的整体结构，即HTML文件的开头与结尾、HTML的头部和实体3大部分。HTML用于描述功能的符号称为“标记”，如上例中的HTML、BODY、IMG等。标记在使用时必须用尖括号“<>”括起来，而且是成对出现，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。HTML文件的基本结构可以用3个双标记符表示。（1）<HTML>和</HTML>双标记符：<HTML>标记符说明该文件是用HTML来描述的。它是文件的开头，而</HTML>则表示该文件的结尾，它们是HTML文件的始标记和尾标记。2．HTML文档的基本结构和标记（2）<HEAD>和</HEAD>头部标记符：这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符<TITLE>和</TITLE>，它用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用作书签和收藏清单。（3）<BODY>和</BODY>正文标记符：网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

（1）标题：HTML支持6级标题。第一级的标题用<H1>和</H1>标记，其中的文字在显示时字号最大；其余的分别用<H2>和</H2>、<H3>和</H3>、……、<H6>和</H6>来标记。（2）段落：<P>和</P>用来标记段落，它将其内的文字另起一段显示。段与段之间有一个空行。如果文字另起一行显示，可以用<BR>单标记，作用是指定其后的文本另起一行。3．常用标记（3）链接：HTML文件的链接是通过标记<A>和</A>实现的。在<A>标记中除标记名“A”外还包括一些属性。HREF是链接标记中最常用的属性，该属性用来指出所要链接的文件的路径和名称或URL，其简单结构形式为：<AHREF="被链接的文件名或URL">需要链接的文字</A>（4）图像：利用<IMG>标记可以在HTML文件中嵌入图像，其中，属性SRC用来指定图像文件的名字。简单格式为：<Imgsrc="图像文件名">网页的核心是HTML，掌握HTML的语法规则是编辑网页的基础。另外，掌握HTML语言的语法规则后，使得学习Dreamweaver变得容易理解，而且可以脱离Dreamweaver等网页编辑工具编辑网页源代码。7.2.4超级链接的操作

超级链接是指站点内不同网页之间，站点与Web页之间的链接关系，它可以使站内的网页成为有机的整体，还能使不同站点之间建立联系。DreamweaverMX2004提供了多种方法创建超级链接。属性面板中常用的设置如下。【图像】：可在文本框中输入图像的名称，在脚本语言中引用时使用，可以不设置。【高和宽】：用来设置图像的大小。【源文件】：此框用来设置插入图像的路径及名称，单击右端的文件夹按钮，可以重新选择图像。【垂直边距】和【水平边距】：用来设置图像与其他对象的距离。【边框】：用来输入图像边框的宽度。【对齐】：用来设置图像和其他对象的对齐方式。（1）网站为《计算机应用基础》精品课程网站，引导页整体结构如图7.13所示。1、规划网站图7.13引导页结构7.3创建站点1、规划网站2、建立本地站点3、定义远程服务器

4、设置默认图像文件夹（2）精品课程首页的整体结构如图7.14所示。（3）确定颜色主色调为白底蓝色前景。具体颜色在设计过程中设置。图7.14精品课程首页整体结构（1）启动DreamweaverCS5，进入项目界面。在【新建】组中单击【HTML】链接，打开【拆分】窗口。（2）选择菜单【站点】|【管理站点】命令，打开【管理站点】对话框，如图7.15所示。2、建立本地站点图7.15【管理站点】对话框（3）单击【新建】按钮，打开【站点设置对象】对话框，如图7.16所示。（4）在【站点名称】文本框中输入站点名称“jsjjpkc”，单击【本地站点文件夹】文本框右边的选择按钮，打开【选择根文件夹】对话框。在【选择】下拉列表框中选择“D:\jpkc”，如图7.17所示。图7.16【站点设置对象】对话框图7.17“站点定义”对话框（5）单击【选择】按钮，可以看到【本地站点文件夹】文本框中设置为“D:\jpkc\”，如图7.18所示。（6）单击【保存】按钮，返回【管理站点】对话框。可以看到所有命令按钮都呈黑色可编辑，同时新建的站点名称“jsjjpkc”出现在窗口中，如图7.19所示。图7.18【站点设置对象jsjjpkc】对话框图7.19设置后的【管理站点】对话框（7）单击【完成】按钮，返回到DW窗口，同时，【文件】面板自动展开，如图7.20所示。图7.20【文件】面板自动展开（1）在【文件】面板中单击【本地视图】下拉列表框右边的下拉按钮，弹出下拉列表，如图7.21所示。3、定义远程服务器图7.21【本地视图】下拉列表框（2）选择【远程视图】选项，单击“定义远程视图”链接，打开【站点设置对象jsjjpkc】的【服务器】对话框，如图7.22所示。（3）在右窗口单击【添加新服务器】按钮，打开服务器设置对话框，如图7.23所示。图7.22【服务器】对话框（4）在【服务器名称】文本框中输入“lhm-Tlink”，在【连接方法】下拉列表框中选择“本地/网络”选项，单击【服务器文件夹】右边的文件夹按钮，选择服务器文件夹“D:\jpkc”，在【WebURL】文本框中输入“http://localhost/”.（5）单击【保存】按钮，再单击【保存】按钮，返回到【管理站点】对话框，单击【完成】按钮，返回到DW窗口。展开【文件】面板，可以看到远程服务器的添加情况（1）在本地的“D:\jpkc”文件夹下创建文件夹“image”。（2）打开【管理站点】对话框，单击【编辑】按钮，重新打开【站点设置对象jsjjpkc】对话框，选择【高级设置】选项，打开默认图像文件夹设置对话框，如图7.26所示。4、设置默认图像文件夹图7.25远程服务器的添加情况图7.26默认图像文件夹设置对话框（3）单击【默认图像文件夹】右边的文件夹图标，打开【选择图像文件夹】对话框，选择存放图像的默认路径“G:\jpkc\image”，如图7.27所示。单击【打开】命令按钮，然后单击【选择】按钮。（4）返回到设置后的【站点设置对象jsjjpkc】对话框，选择【站点根目录】单选项，如图7.28所示。图7.27【选择图像文件夹】对话框图7.28选择【站点根目录】（5）单击【保存】按钮。（6）以后所制作的网页相关资源的全部内容就可以直接复制到站点根文件夹“D:\jpkc”下，在本地计算机上就可以通过IE浏览器测试所制作的网页。7.4表单应用7.4.1表单的创建7.4.2表单对象的创建

1．向站点添加所需要的空网页（1）新建一HTML文件，选择菜单【文件】|【保存】命令，打开【另存为】对话框。将文档保存在文件夹“D:\jpkc\”中，名称为“index.html”，如图7.30所示。7.4.1添加空网页图7.30【另存为】对话框（2）单击【保存】按钮，将文档保存为“index”文档。2．设置网页页面属性（1）在“index.html”网页中，选择菜单【窗口】|【属性】命令，【属性】面板出现在网页下方，如图7.31所示。图7.31【属性】面板（2）单击【页面属性】按钮，打开【页面属性】对话框，如图7.32所示。图7.32【页面属性】对话框（3）单击【页面字体】右边的下拉箭头，在下拉列表中选择【编辑字体列表】选项，如图7.33所示。图7.33字体下拉列表（4）打开【编辑字体列表】对话框。在【可用字体】列表框中选择【宋体】，单击添加按钮，将“宋体”添加到【选择的字体】列表框中，同时“宋体”出现在上面的【字体列表】中，如图7.34所示。图7.34【编辑字体列表】对话框（5）单击【确定】按钮，返回【页面属性】对话框。在【页面字体】下拉列表中选择“宋体”；在“大小”下拉列表中选择“12”，单位选择“像素”等，如图7.35所示。（6）在“分类”列表框中选择【标题】选项，属性设置如图7.36所示。图7.35“外观”设置图7.36【标题】属性设置1．插入表格（1）在“index.html”网页中，单击网页空白处，选择菜单【插入】|【表格】命令，或者单击【常用】工具栏中的【表格】工具按钮，打开【表格】对话框，如图7.37所示。（2）根据需要设置各参数，单击【确定】按钮，插入的表格如图7.38所示。7.4.2创建表格图7.37【表格】对话框图7.38插入的表格2．选定表格元素（1）选定一行：把鼠标移到要选定行的最左边单元格的左边框上，鼠标变成向右的小黑箭头状，单击鼠标。（2）选定一列：把鼠标移到要选定列的上边框上，鼠标变成向下的小黑箭头状，单击鼠标。（3）选定连续单元格区域：单击选定第一个单元格，按下【Shift】键不放，单击选定最后一个单元格。（4）选定不连续单元格区域：按下【Ctrl】键不放，单击选定所需要的单元格。（5）选定整张表格：把鼠标移到表格的左上角（右边框或下边框线）上，单击，即可选定整张表格。3．插入表格元素（1）插入行：将光标定位在单元格内，选择菜单【修改】|【表格】|【插入行】命令。（2）插入列：将光标定位在单元格内，选择菜单【修改】|【表格】|【插入列】命令。4．删除表格元素（1）删除行：将光标定位在单元格内，选择菜单【修改】|【表格】|【删除行】命令。（2）删除列：将光标定位在单元格内，选择菜单【修改】|【表格】|【删除列】命令。5．合并单元格（1）选定要合并的单元格，选择菜单【修改】|【表格】|【合并单元格】命令；（2）或者右击鼠标，在弹出的快捷菜单上选择【表格】|【合并单元格】命令。6．拆分单元格图7.39【拆分单元格】对话框（1）选定要拆分的单元格，选择菜单【修改】|【表格】|【拆分单元格】命令；（2）或者右击鼠标，在弹出的快捷菜单上选择【表格】|【拆分单元格】命令，打开【拆分单元格】对话框，如图7.39所示。（3）设置需要拆分的【行数】，单击【确定】按钮。图7.39【拆分单元格】对话框7．调整表格的大小（1）选定整个表格。（2）调整整个表格的大小：用鼠标拖动右下角的尺寸柄，斜向拉出如图7.40所示的虚线框，大小合适时松开鼠标。（3）调整水平方向表格的大小：用鼠标拖动右边的尺寸柄，向右拉出如图7.41所示的虚线框，大小合适时松开鼠标。（4）调整垂直方向表格的大小：用鼠标拖动底边的尺寸柄，向下拉出虚线框，大小合适时松开鼠标。（5）调整表格的行高：将鼠标移到表格的行线上，当鼠标变成上下箭头时，上下拖动鼠标。（6）调整表格的列宽：将鼠标移到表格的列线上，当鼠标变成左右箭头时，左右拖动鼠标。图7.40调整整个表格的大小图7.41调整水平方向表格的大小8．设置表格属性选定表格后，可以用【属性】面板来为表格设置属性。如图7.42所示。图7.42表格【属性】面板①行和列：输入表格的行数和列数。②宽：用于指定表格的宽度，单位一般是像素或百分比。③填充：用于指定单元格内容和单元格边框之间的像素数。④间距：用于指定相邻单元格之间的像素数。⑤对齐：用于选择表格相对于同一段落中其他元素的显示位置。⑥边框：用于设置表格的边框线宽。如果在网页中不想看到边框线，可以将其设置为0。9．向表格内部添加表格图7.43向表格内部添加表格（1）新建一个表格。（2）单击需要插入表格的单元格，再次执行插入表格操作，如图7.43所示。图7.43向表格内部添加表格7.4.3插入文本1．插入文本（1）将光标定位在文档窗口中要插入文本的位置，直接输入文本。（2）或者在其他编辑器中生成的文本上单击右键，在快捷菜单选择【复制】命令，在文档窗口中要插入文本的位置右击，在快捷菜单中选择【粘贴】命令。如果要输入多个连续的空格，则选择菜单【编辑】|【首选参数】命令，打开【首选参数】对话框。选择【分类】列表框中的【常规】选项，在【编辑选项】下选择【允许多个连续的空格】复选项，2．插入特殊字符（1）将光标定位在文档窗口中要插入特殊字符的位置。（2）选择菜单【插入】|【HTML】|【特殊字符】命令，在级联菜单中单击需要的特殊字符命令。（3）或者选择菜单【窗口】|【插入】命令，在窗口上方出现【插入】面板，如图7.45所示。图7.45【插入】面板（4）单击【文本】选项卡，切换为如图7.46所示的【文本】工具栏。图7.46【文本】工具栏（5）单击最右边的【字符】工具按钮旁边的下拉箭头，在拉出的列表中选择【其他字符】选项，打开【插入其他字符】对话框，如图7.47所示。（6）选择需要的字符，单击【确定】按钮。图7.47【插入其他字符】对话框3．插入水平线（1）将光标定位于要插入水平线的位置。（2）选择菜单【插入】|【HTML】|【水平线】命令，就可以插入水平线。（3）单击选定“水平线”，打开【属性】面板，如图7.48所示。对水平线进行属性设置。图7.48水平线【属性】面板4．设置文本属性选定文本，通过设置【属性】面板中各个参数（见如图7.49），改变文本的字体、颜色、大小和对齐方式等。图7.49文本【属性】面板7.4.4插入图像1．插入图像（1）将光标定位于文档窗口中要插入图像的位置，选择菜单【插入】|【图像】命令。（2）或者在【插入】面板中单击【常用】选项卡，切换为【常用】工具栏。（3）单击【图像】工具按钮旁边的下拉箭头，在拉出的列表中选择【图像】选项，打开【选择图像源文件】对话框，如图7.50所示。选择图像后单击【确定】按钮，即可插入图像。图7.50【选择图像源文件】对话框2．设置图像属性选定需要编辑的图像，调整【属性】面板中各个参数，如图7.51所示，对图像的大小、图像的名称、超级链接和对齐方式进行编辑。图7.51图像【属性】面板属性面板中常用的设置如下。①高和宽：用来设置图像的大小。②源文件：此框用来设置插入图像的路径及名称，单击右端的文件夹按钮，可以重新选择图像。③垂直边距和水平边距：用来设置图像与其他对象的距离。④边框：用来输入图像边框的宽度。⑤对齐：用来设置图像和其他对象的对齐方式。⑥替换：输入图像的说明文字。当鼠标停留于图片上或者图像不能正常显示时，在其相应区域将显示说明文字。⑦类：选择应用已经定义好的CSS样式。⑧地图：创建图像热点地图，包括矩形热点工具、椭圆形热点工具、多边形热点工具。⑨目标：设置链接文件显示的目标位置。3．编辑图像图7.52图像“编辑”工具（1）选定图像。（2）利用图像【属性】面板中的图像“编辑”工具，如图7.52所示，对图形进行编辑。图7.52图像“编辑”工具7.4.5插入多媒体1．插入音频（1）将光标定位于插入音乐文件的位置。（2）在【常用】工具栏中单击【媒体】按钮右边的下拉箭头，弹出下拉列表，如图7.53所示。（3）单击【插件】选项，打开【选择文件】对话框，选择音频文件，单击【确定】按钮，如图7.54所示。图7.53【媒体】按钮下拉列表图7.54【选择文件】对话框（4）返回到窗口中，光标所在位置出现图标。如果要将插入的音频文件作为背景音乐，单击选定图标，出现音频文件【属性】面板，如图7.55所示。图7.55音频文件【属性】面板（5）单击【参数】按钮，打开【参数】对话框，如图7.56所示。（6）在【参数】下方单击，出现文本框，输入“hidden”，在“值”文本框中输入“true”；单击上面的【+】按钮，在【参数】文本框中输入“autostart”，在【值】文本框中输入“true”；在【参数】文本框中输入“loop”，在【值】文本框中输入“infinite”，单击【确定】按钮，如图7.57所示。图7.56【参数】对话框图7.57设置后的【参数】对话框2．插入Flash动画（1）将光标定位于插入Flash文件的位置，在【常用】工具栏中单击【媒体】按钮右边的下拉箭头，在拉出的下拉列表中单击【Flash】选项。（2）打开【选择文件】对话框，选择Flash文件，单击【确定】按钮。（3）如果要将动画背景透明化，选定Flash文件，出现动画【属性】面板，如图7.58所示。图7.58动画【属性】面板（4）单击【参数】按钮，打开【参数】对话框。在【参数】文本框中输入“wmode”，在【值】文本框中输入“transparent”。单击【确定】按钮，动画背景就会变得透明。7.4.6设置超链接1．站内网页之间的链接（1）在网页中选定要作为超链接的文本或者图片，在【属性】面板中的【链接】文本框中输入链接文件，并保存。（2）创建链接后，按【F12】键浏览网页时，将光标指向链接对象，光标变成小手形状，表示该对象已经创建超链接，单击后打开目标文件窗口。2．创建电子邮件链接（1）选定要创建邮件链接的文本，在【属性】面板中的【链接】文本框中输入“mailto:hong

meil66@”。（2）或者选择菜单【插入】|【电子邮件链接】命令，打开【电子邮件链接】对话框。（3）在【文本】文本框中输入“联系我们”，在【E-mail】文本框中输入“hongmeil66@”，如图7.60所示。图7.60【电子邮件链接】对话框（4）单击【确定】按钮。浏览网页时，单击“联系我们”，就会启动Outlook软件，即可书写电子邮件。3．创建空链接选定要创建空链接的对象，在【属性】面板的【链接】文本框中输入“#”即可。4．创建下载链接（1）选定要创建下载链接的文本，在【属性】面板中，单击【链接】文本框右侧的文件夹按钮，打开【选择文件】对话框，如图7.61所示。图7.61【选择文件】对话框（2）在对话框中选择要链接的文件，单击【确定】按钮。（3）浏览网页时，单击链接文本，弹出【文件下载】对话框，进行下载文件。5．创建锚记链接（1）定位光标于创建命名锚记的位置，选择菜单【插入】|【命名锚记】命令，打开【命名锚记】对话框。（2）在【锚记名称】文本框中输入锚的名称，如图7.62所示。单击【确定】按钮。（3）可以看到在文档窗口中出现锚标记。（4）选定要建立锚记链接的文本或图像。（5）在【属性】面板中的【链接】文本框中输入锚记名称及其相应前缀。图7.62【命名锚记】对话框7.4.7创建框架1．创建框架（1）新建一个HTML文件，在【插入】面板中单击【布局】选项卡，工具栏切换为【布局】工具栏，如图7.63所示。（2）单击【框架】工具按钮右边的下拉箭头，拉出框架列表，如图7.64所示。图7.63【布局】工具栏（3）单击【左侧框架】选项，打开【框架标签辅助功能属性】对话框，为每一个框架制定一个标题，如图7.65所示。图7.64框架列表图7.65【框架标签辅助功能属性】对话框（4）选定框架，出现框架【属性】面板，如图7.66所示。（5）如果要调整框架的宽度，可以直接拖动框架的边框。（6）选择菜单【文件】|【保存全部】命令，将会两次弹出【另存为】对话框。图7.66框架【属性】面板2．创建框架内的链接制作在左框架单击某项后，在右框架显示内容。（1）在左框架中选定要链接的文本，单击【属性】面板中【链接】文本框右边的文件夹图标，选择要链接的网页。（2）在【目标】下拉列表中选择“mainframe”，即在“mainframe”框架中打开链接的网页。7.4.9CSS样式1．创建CSS样式（1）选择菜单【窗口】|【CSS样式】命令，在窗口右边出现【CSS样式】面板，如图7.68所示。（2）单击【规则】下的“#apDiv1”，在弹出的快捷菜单中选择【新建】命令，打开【新建CSS规则】对话框，在【选择器名称】框中输入“apdiv1”，在【定义在】选项组中选择“新建样式表文件”，单击【确定】按钮，如图7.69所示。图7.68【CSS样式】面板1．创建层（1）在【布局】工具栏中单击【绘制APDiv】工具按钮，鼠标变成十字形，拖动鼠标，即可绘制出一个层。（2）或者选择菜单【插入】|【布局对象】|【APDiv】命令，也可以创建层。（3）将一个层拖入另一个层可以实现层的嵌套。（4）选择一个层，出现层【属性】面板，如图7.67所示。调整各参数可以对层进行设置。7.4.8创建层图7.67层【属性】面板（3）单击【确定】按钮，打开【保存样式表文件为】对话框，选择路径保存样式表，输入样式表文件名“kj”，如图7.70所示。图7.70【保存样式表文件为】对话框图7.69【新建CSS规则】对话框（4）单击【保存】按钮，打开“apdiv1的CSS规则定义”对话框，如图7.71所示。（5）在对话框中设置各种对象的属性，单击【确定】按钮。即可在CSS样式面板中看到新建的CSS样式，如图7.72所示。图7.71【apdiv1的CSS规则定义】对话框图7.72新建的样式2．应用CSS样式选定要应用样式的文本，右击【CSS样式】面板中要应用的样式，从弹出的快捷菜单中选择【套用】命令，即可应用CSS样式。3．管理CSS样式（1）在【CSS样式】面板中，右击样式“apDiv1”，在弹出的快捷菜单中选择【编辑】命令，打开【.apdiv1的CSS规则定义】对话框，如图