版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
网页设计与制作电子教案第1讲网页设计概述
第2讲HTML语言基础
第3讲Dreamweaver基础
第4讲网页中的基础元素
第5讲网页页面布局
第6讲网页中的层和时间轴
第7讲表单的应用第8讲在网页中使用行为
第9讲CSS样式使用
第10讲网页中的多媒体应用
第11讲模板和库
第12讲站点测试和发布
1编辑ppt
第1讲网页设计概述$
[知识目标]
掌握网页、网站及主页的概念了解网页中的主要元素了解各种网页制作工具8
[能力目标]
各种网页制作工具的配合使用网站的整体规划网站的设计流程2编辑ppt1.1网页和网站1.2网页中的主要元素1.3网页制作工具1.4网页设计的基本流程本讲小结
第1讲网页设计概述3编辑ppt1.1网页和网站1.1.1网页
1.1.2网站1.1.3网页的基本功能4编辑ppt
1．网页
网页（WEB）：是用html语言编写的，通过www网传输，并被web浏览器翻译成可以显示出来的集合文本、图片、声音和动画等信息元素的页面文件（网页示例）。
2．网页的类型根据页面内容可以分首页、主页、专栏网页、内容网页和功能网页等类型；按制作技术分为静态网页与动态网页。1.1.1
网页
1.1网页和网站5编辑ppt网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合。信息可以是网页形式也可以是其他的文档形式。网页与网站的区别与联系：网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的集合。1.1.2
网站
1.1网页和网站6编辑ppt
1、媒介的作用。使用者与信息之间的媒介。一方面是发布者，功能是发布信息；另一方面是浏览者，功能是提供浏览的信息，通过浏览网页找寻需要的信息。
2、互动的作用。浏览者与网页制作单位之间互动的窗口，可以单向或双向传递信息。
3、传输的作用。作为传输各种电子文件或信息之用，如下载说明书、更新文件、驱动程序等。1.1.3网页的基本功能
1.1网页和网站7编辑ppt1.2网页中的主要元素1.2.1文本1.2.2图像1.2.3链接标志1.2.4其他的基本要素网页的基本要素一般包括：文字、图像、动画和链接标志等，除此之外，网页的元素还包声音、多媒体和视频等。8编辑ppt是网页中最基本的元素。网页中文字的设计一般从以下几个方面来考虑：
1．字体的选择。
2．字号、行距的选择。
3．特殊字体的使用。
4．字体的颜色。
1.2.1文本
1.2网页中的主要元素9编辑ppt现在网络上使用的绝大多数图片和图像是gif、jpeg和png文件格式。网页上使用图像要注意的问题：
•JPEG格式适合于照片图像，GIF格式适合于包含纯色的图像，例如插图和线条图。
•利用图像编辑软件来放大或缩小图像
•屏幕显示图像的分辨率一般为72dpi。制作图像时，不必使用比此再高的分辨率。1.2.2图像
1.2网页中的主要元素10编辑ppt
•如果建立的图像中只有黑色和白色，处理时可将它保存为黑白图像格式，这样可以减少图像文件的大小。
•如果设计的GIF格式图像包含了渐变和直线，应尽量使得它们水平，因为GIF格以每条水平线为基础来压缩。
•尝试各种不同的JPEG压缩率
•使用合适的色彩模式。
•慎用动画。1.2.2图像
1.2网页中的主要元素11编辑ppt链接也叫超链接（Hyperlink），是从一个网页指向另一个目的端的链接，是页面间的链接关系。链接标志（载体）指的是网页中特殊的文本或图像，它们常常用不同的颜色和下划线来标识，在浏览器中，访问者可以用鼠标单击它们，能够从当前的网页转到链接的目的端位置。超链接的标志一般有：文本、图像、热区三种。要注意的是，所有超链接标志均应清晰无误地向浏览者标识出来，让人一看就知道。1.2.3链接标志
1.2网页中的主要元素12编辑ppt除上述几种要素之外，在网页上经常使用的还有动画、视频、声音等各种信息的形式。
1．动画。目前网络上常用的动画类型有gif和Flash动画两种。
2．视频。是多媒体网页的一个重要组成部分，常用的视频格式有avi、mpeg和mov等，视频会大大增加网页的文件量，从而使用访问速度受到影响，因此要慎用。
3．音频。在网页中插入音频会增加网页的生动性。常用的音频格式有rm(ram)、midi、wav和mp3等格式。音频文件和视频文件一样都会增加网页的文件量，因此要慎用。1.2.4其他的基本要素
1.2网页中的主要元素13编辑ppt1.3网页制作工具1.3.1网页编辑工具
1．超文本标识语言（HTML）
2．FrontPage简介
3．Dreamweaver1.3.2网页图像编辑工具1.3.3动态网页技术14编辑ppt
1．Photoshop。是Adobe公司开发的，是当今最流行的图形图象处理软件之一，它能够实现各种专业化的图像制作、处理及合成。
2．Fireworks。是由Macromedia公司开发的图形处理工具，它是第一个专门为制作网页图形而设计的软件，同时也提供专业的网页图形设计及制作的解决方案。
3.Flash。Macromedia公司出品的Flash是目前非常流行的一种交互式Web矢量动画软件。
Dreamweaver和Flash、Fireworks三个软件被称为“网页三剑客”，是现在公认的比较标准的网页制作利器。1.3.2
网页图像编辑工具
1.3网页制作工具15编辑ppt动态网页可以实现网页浏览者和网页设计者的交互，实现交互技术有两种：一种是客户端技术如常用的JavaScript和VBScript；另一种是服务器端技术如目前常用的ASP和PHP。
1．ASP(ActiveServerPages)
2．PHP(HypertextPreprocessor)
3．JSP(JavaServerPages)1.3.3动态网页技术
1.3网页制作工具16编辑ppt1.4网页设计的基本流程1.4.1网站的设计流程1.4.2网页的设计与制作1.4.3网页的测试1.4.4网页上传和发布17编辑ppt
1．确定网站的主题
2．规划网站的整体结构
3．收集整合网页素材
4．确定网页版面布局。
5．制作网页。
6．添加网页特效。
7．测试和发布网站。1.4.1
网站的设计流程
1.4网页设计的基本流程18编辑ppt
1．确定网页的版面布局（1）平衡性。（2）对称性。（3）对比性。（4）疏密度。（5）比例。（6）韵律感。网页的排版布局是决定网站美观与否的一个重要方面,通过合理的、有创意布局,才可以把文字、图像等内容完美地展现在浏览者前面。
2．网页设计与制作网页设计与制作一般分为静态网页制作和动态网页制作两类。1.4.2网页的设计与制作
1.4网页设计的基本流程19编辑ppt
1．浏览器兼容性测试。目前浏览器有：
InternetExplorer与Netscape两大主流浏览器，二者对HTML和CSS等语法的支持度是不同的。在Dreamweaver中提供了可以检查网页中是否含有某版本浏览器不能识别的语法功能，设计者可以借助其进行检查。
2．平台的兼容性测试。设计要为用户着想，必须最少在一台PC和一台Mac机上测试你的网站网页，看看兼容性如何；
3．超链接完好性测试。超链接是连接网页之间、网站之间的桥梁，浏览者是不愿意访问一个经常出现“找不到网页”的问题的网站，作为设计者必须检测超链接的完好性，保证链接的有效性，不要留下太多的坏链接。1.4.3网页的测试
1.4网页设计的基本流程20编辑ppt网页设计好，必须把它发布到互联网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地。如果是发布到互联网上，要先申请域名和主页空间，然后再利用专用软件（如：CuteFTP）上传，FTP有很多种软件，最著名的是CuteFTP和LeapFTP，也可以用Dreamweaver内置的FTP上传。1.4.4网页上传和发布
1.4网页设计的基本流程21编辑ppt本讲小结第1讲网页设计概述网页设计概述网页和网站网页中的主要元素网页设计的基本流程网页制作工具网页网站网页的基本功能文本图像链接标志其他的基本要素网页编辑工具网页图像编辑工具网站的设计流程网页的设计与制作网页的测试网页上传和发布常见的各种网页制作工具动态网页技术22编辑ppt$
[知识目标]
了解HTML文件的基本结构掌握HTML中文本的编辑及图像的语法掌握HTML中各种设置超级链接的语法掌握HTML中表格和框架的基本语法8
[能力目标]
掌握进行文本及图像的编辑操作掌握创建各种超级链接的操作能够编写简单的HTML网页掌握HTML文件中表格和框架的使用第2讲HTML语言基础23编辑ppt2.1HTML概述2.2文本的编辑2.3图像编辑2.4建立超链接2.5表格与框架本讲小结第2讲HTML语言基础24编辑ppt2.1HTML概述2.1.1HTML简介2.1.2HTML语法结构25编辑ppt
HTML（HyperTextMarkupLanguage）又称超文本标识语言，是一种标识性的语言，是网页设计的最初语言。文件的扩展名:“html”或“htm”。例2.1简单的HTML文档
<html>
<head>
<title>.长春欢迎您！</title>
</head>
<body>这里是长春悠游网，我们带您畅游长春！
</body>
</html>由“<”和“>”组成的就是标记。在HTML语言中标记分“单标记”和“围堵标记”。2.1.1HTML简介
2.1HTML概述26编辑ppt
1．围堵标记格式：
<标记>……</标记>
2．单标记格式：<标记>只有起始标记，没有结束标记。最常用的单标记是<br>,它表示段内换行。
3．标记属性格式：<标记属性1属性2属性3……>各属性间无前后顺序，属性也可省略，当省略属性时取标记的默认值。2.1.1HTML简介
2.1HTML概述27编辑ppt
HTML文档的基本结构：
<HTML>文件开始
<HEAD>标头区开始
<TITLE>...</TITLE>标题区
</HEAD>标头区结束
<BODY>文件主体内容开始文件主体内容……
</BODY>文件主体内容结束
</HTML>文件结束
其中<HTML></HTML>之间表示这是个网页文件，是必有的标记。2.1.2HTML语法结构
2.1HTML概述28编辑ppt2.2文本的编辑2.2.1段落标记
2.2.2文本标记
2.2.3标题显示等级2.2.4列表
29编辑ppt
1．段落（<P>）基本语法格式为：
<palign=left/center/right>其中参数align用于设定段落的位置是靠左、靠右还是居中。默认值是靠左；除align之外<p>还有其他参数如class。class参数是可选项，如果没有将按照默认值显示。
2．换行<br>单标记，放在一行的末尾，可以在一个段落内实现文本的强制换行，设置标记后面的文本字、图像和表格等内容显示于下一行。2.2.1
段落标记
2.2文本的编辑30编辑ppt
1．字体标记<font>其基本语法格式为：
<fontface=？size=？color=？>…</font>
Size：设置字体的显示字号，范围是从“1～7”，其中“3”是默认值。
Color：设置文本的颜色，值可以是颜色名（英文如red代表红色）或颜色的十六进制代码（#000000代表黑色，#FFFFFF代表白色）。
Face：设置文本显示的字体，值为字体的名称。在文本的标记中还有很多常用的标记，比如表示字体效果的，<b>(黑体)，<i>（斜体），<u>（加下划线）。2.2.2
文本标记
2.2文本的编辑31编辑ppt
2．特殊字符
HTML中除了我们上面学的的一些标记外，还有一些我们常用的特殊字符比如“<”，这些特殊字符在HTML语言中都有对的转义符，常用的转义符与特殊字符参见下表：2.2.2
文本标记
2.2文本的编辑HTML代码显示结果说明<<小于号或显示标记>>大于号或显示标记&&可用于显示其它特殊字符""引号®®注册©©版权™™商标
不断行的空格32编辑ppt
3．水平线标记<hr>水平线是在网页上划出一条水平的分割线，用<hr>来标记水平线。语法格式为：
<hralign=left/center/rightnoshadesize=？width=？color=？>
Size：设置水平线的高度，以像素为单位。
Color：设置水平线的颜色。
Width：设置水平线的宽度，单位是像素或百分比，像素是绝对大小，不会随着程序窗口的大小而改，百分比是相对于程序窗口水平线所占的比例，会随着程序窗口的大小而改变。
Align：设置水平线的对齐方式。对齐方式有左对齐，居中，右对齐三种。2.2.2
文本标记
2.2文本的编辑33编辑ppt
语法格式为：
<Hn>…</Hn>
n：表示不同级别的标题，n值可以是1-6中的任意数字，其中1表示的标题字体最大。另外，可以用align属性设置对齐方式，常用的有左对齐，居中，右对齐三种对齐方式。2.2.3
标题显示等级
2.2文本的编辑34编辑ppt在HTML中，列表常用的有“有序列表”和“无序列表”。
1．有序列表<OL>基本语法结构为：
<oltype=nstart=？>
<li>项目1
<li>项目2
……
<li>项目n
</ol>2.2.4
列表
2.2文本的编辑35编辑ppt
1．有序列表<OL>
Type：设置列表的序号类型，常用序号如下：
n=1：用数字作为序号。
n=A；用大写字母作为序号。
n=a：用小写字母作为序号。
n=I：用大写罗马数字作为序号。
n=i：用小写罗马数字作为序号。
Start：为可选参数，用于设置序号的起始数值。如不添加“start”则从每类序号的第一个序号开始。2.2.4
列表
2.2文本的编辑36编辑ppt
2．无序列表基本语法结构为：
<ultype=n>
<li>项目1
<li>项目2
……
<li>项目n
</ul>
Type:设置符号形状，有实心圆、小正方形、空心圆三种，具体如下：
n=disk：符号为实心圆。
n=square：符号为正方形。
n=circle：符号为空心圆。2.2.4
列表
2.2文本的编辑37编辑ppt2.3图像编辑 2.3.1插入图像2.3.2使用背景图像我们在网页上经常会浏览图像，适当使用图像可以增加网页的美观。在网页最常用到的是插入图像和设置背景图像。38编辑ppt
1．语法格式：
<imgsrc=“url”>，单标记
Src：指明要添加的图像所在的具体路径和文件名。路径可以是相对路径，也可以是绝对路径。例：<imgsrc="images/ball.gif">。绝对路径：完整的描述文件位置的路径就是绝对路径。对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置。相对路径：所谓相对路径,顾名思义就是当前文档与目标的相对位置。例<src=1.bmp>.2.3.1插入图像
2.3图像编辑 39编辑ppt
2．图像的属性除了“src”以外，<img>还有其他属性，可以定义图像的对齐方向，与周围元素的距离等，各属性及作用见表2.2。表2.2图像属性列表2.3.1插入图像
2.3图像编辑 名称作用border设定图像的边框vspace设定图像、文字与图像上下之间的间隔hspace设定图像、文字与图像左右之间的间隔width调整图像的宽度height调整图像的高度alt当浏览器无法显示图像时，会显示出alt属性所设定的文字40编辑ppt语法格式为：
<bodybackground=“url”>2.3.2使用背景图像
2.3图像编辑 41编辑ppt2.4
建立超链接2.4.1建立超链接2.4.2使用书签2.4.3标记新窗口和基准链接42编辑ppt建立超链接的标记是<a>，语法格式为：
<ahref=“url”>超链接标识</a>
url：指明链接目标的具体路径和文件名。超链接标识：是网页中链接的载体，可以是文字或图像等页面元素，用户点击它就会跳到超链接的目标位置。2.4.1
建立超链接
2.4建立超链接43编辑ppt１．定义书签在HTML中，首先要定义书签，然后才在链接使用。定义书签的语法格式为：
<aname=”书签名”>书签名不能用中文，只能用英文和数字。２．使用书签链接其链接的格式为：
<ahref=”#书签名”>超链接标识</a>
#与书签名之间不能有空格。2.4.2使用书签
2.4建立超链接44编辑ppt
1．标记新窗口（target）“target=”_blank””，是链接标记的一个参数。语法格式为：
<ahref=“url”target=_blank>超链接标识</a>当点击链接载体的，就会在新窗口打开链接目标。
2．基准链接<base>
<base>标记是单标记，禁止使用结束标记，可以改变文件中所有链接标记的参数默认值。它只能位于文件的开头部分，即标记<head>与</head>之间。语法格式为：
<basehref=“url”>2.4.3
标记新窗口和基准链接
2.4建立超链接45编辑ppt2.5表格与框架2.5.1建立表格2.5.2表格属性2.5.3建立框架2.5.4框架属性46编辑ppt表格标记有<table>、<th>、<tr>和<td>四个，他们的具体含义是：
<table></table>:定义表格,是表格必须的元素
<th></th>：定义标题单元格，在这个单元格中的文字将用粗体表示。
<tr></tr>：定义表格中的行。
<td></td>：定义单元格，使用<td>标记一定要放在<tr>标记内部。上述标记中，<th></th>可以省略，其他三个是必须的。具体应用见例2.12。
<Table>标记中可以添加属性和参数，其中border，用于设置表格的边框宽度，值为大于等于“0”的整数，当值为“0”，在浏览器中显示无边框表格，无边框表格是网页布局最主要的手段。2.5.1
建立表格
2.5表格与框架47编辑ppt除了border外，常用的表格属性参数有：
<tablecellspacing=？>：定义单元格之间的距离，值为大于等于“0”的整数，单位是像素，“0”表示没有间距。
<tableCellpadding=？>：定义单元格内的文字或其他元素到边框的距离,值为大于等于“0”的整数，单位是像素，“0”表示没有距离。
<tableheight=？>：定义表格的高度，值有两种单位，一是像素，表示表格高度为固定大小，一是百分比表示表格占据整个网页的高度百分比。
<tablewidth=？>：定义表格的宽度，与高度一样有像素和百分比两种单位。
<tablebordercolor=？>：定义表格边框的颜色。
<tablebgcolor=？>：定义表格的背景色2.5.2
表格属性
2.5表格与框架48编辑ppt
1．框架页的基本结构
<html>
<head>
<title>…</title>
</head>
<noframes>…</noframes>
<frameset>
<framesrc="url">
<framesrc="url">
……
</frameset>
</html>
<noframes>…</noframes>：标记一个普通的HTML文档，用于在不支持框架的浏览器中显示。
<frameset>：用于定义分割窗口，可以设置窗口的分割方式及是否显示框架边框等。
<frame>用于设置每个区域显示的内容，每个URL值指定一个事先己制作好的文件。2.5.3
建立框架
2.5表格与框架49编辑ppt
2．建立框架（1）建立纵向框架建立纵向框架的基本语法为：
<framesetcols=？>
Cols：设置垂直分割窗口，用“，”分隔，它的值可以是像素值或者是百分比，代表对应的子窗体占屏幕窗口的大小。如要将屏幕分割成三个子窗口，其中两个都占整个窗口的30%，那么只给开始的两个窗口赋值。语句为<framesetcols="30%,30%,*">，*代表框架剩余的部分分给最后一个子窗口，当然也可以写成<framesetcols="30%,30%,30%">。2.5.3
建立框架
2.5表格与框架50编辑ppt（2）建立横框架建立横向框架的基本语法为：
<framesetrows=？>
rows：这个参数用来水平分割窗口，它的值可以是数字或者是百分比，代表对应的子窗口的大小，使用方法与cols相同。（3）嵌套框架嵌套框架是在己有的框架中嵌入框架的结构，利用嵌套框架可以实现窗口的横向与纵向的混合分割。嵌套框架的设置见例2.16.2.5.3
建立框架
2.5表格与框架51编辑ppt常用的框架属性有以下几种：
1．<framesetframeborder=？>：设置框架的边框。值为yes（或1）有边框或no（或0）无边框。
2．<framesetframespacing=？>：设置各窗口之间的空白区域大小。值是以像素为单位的数值。
3．<framesetbordercolor=？>：设置边框的颜色。值可以是的英文或颜色代码。
4．<framesetscrolling=？>：设置框架是否显示滚动条。有三个值：yes表示有滚动条，no表示没有，auto表示根据内容的多少浏览器自动设置。
5．<framesetnoresize>：设置框架在浏览器中不能被调整。2.5.4框架属性
2.5表格与框架52编辑ppt本讲小结第2讲HTML语言基础HTML语言基础HTML概述图像编辑表格与框架建立超链接HTML简介HTML语法结构段落标记文本标记标题显示等级列表插入图像使用背景图像建立超链接标记新窗口和基准链接建立表格表格属性建立框架框架属性使用书签文本的编辑53编辑ppt$
[知识目标]
认识Dreamweaver8操作界面掌握如何规划站点的结构掌握网页文件的基本操作8
[能力目标]
熟悉工作界面和使用各种面板能够建立和管理本地站点熟练网页文件的基本操作第3讲Dreamweaver基础54编辑ppt3.1Dreamweaver8工作界面3.2规划与创建站点3.3网页文件的基本操作本章小结第3讲Dreamweaver基础55编辑ppt3.1Dreamweaver8工作界面3.1.1
启动Dreamweaver83.1.2Dreamweaver8操作界面56编辑ppt单击“开始”按钮，在开始菜单中依次选择“程序”—“Macromedia”—“MacromediaDreamweaver8”，启动Dreamweaver8程序。启动Dreamweaver8后出现开始界面。3.1.1启动和退出Dreamweaver83.1Dreamweaver8工作界面57编辑ppt
在Dreamweaver8的起始页中，单击“创建新项目”下的“HTML”，打开Dreamweaver8的工作界面。3.1.2Dreamweaver8操作界面3.1Dreamweaver8工作界面58编辑ppt3.1.2Dreamweaver8操作界面3.1Dreamweaver8工作界面文档工具栏面板组和文件面板59编辑ppt3.2规划与创建站点3.2.1规划网站的整体结构3.2.2建立本地站点3.2.3管理本地站点60编辑ppt
规划网站的结构要注意以下几个方面：
1．文件及文件夹的命名要规范
2．不要将所有文件存放在站点根目录下
3．建立子文件夹对文件进行分类存放
4．每个主栏目下都建立独立的Image目录
5．模板（Library）和库(Templates)文件夹一定要位于站点根目录之下并不能被更名，否则在使用模板和库就会出错。3.2.1
规划网站的整体结构3.2规划与创建站点61编辑ppt
1．在本地电脑硬盘上建立一个空的文件夹
2．在Dreamweaver8中建立站点的操作：
（1）单击菜单栏中“站点”|“新建站点”命令，打开“未命名站点1的站点定义为”对话框。3.2.2
建立本地站点3.2规划与创建站点（2）在“您打算为您的站点起什么名字？”对话框中输入站点的名称，如我们在此输入“长春悠游网”。然后单击下一步。62编辑ppt3.2.2
建立本地站点3.2规划与创建站点
（3）在对话框中选择“否，我不想使用服务器技术”，单击“下一步”，打开对话框。63编辑ppt3.2.2
建立本地站点3.2规划与创建站点（4）选择“编辑我的计算机上的本地副本，完成后再上传到服务（推荐）（E）”选项。（5）单击“浏览”按钮，打开对话框，选择D盘上创建的“myweb1”文件夹为站点本地根文件夹。（6）单击“下一步”打开对话框如下右图。64编辑ppt3.2.2
建立本地站点3.2规划与创建站点（7）在“如何连接到远程服务器？”选项的下拉列表中选择“无”，单击下一步，打开站点定义的“总结”对话框如左图。（8）单击“完成”后，可以在“文件”面板中看到所设置的站点，如右图所示。
65编辑ppt
单击菜单栏中“站点”|“站点管理”命令,打开“站点管理”对话框。
（一）复制站点
1．在“管理站点”对话框中，选择要复制的站点，如选择“依林小镇”。
2．单击对话框中的“复制”按钮，即可复制出“依林小镇复制”的站点。3.2.3
管理本地站点3.2规划与创建站点66编辑ppt
（二）删除站点
1．在“管理站点”对话框中，选择要删除的站点，如选择“依林小镇”。
2．单击对话框中的“删除”按钮，弹出提示对话框，询问是否删除本地站点（如图所示），单击“是”，即可删除本地站点“依林小镇”。3.2.3
管理本地站点3.2规划与创建站点67编辑ppt
（三）编辑站点：编辑站点是对己创建的本地站点进行修改和编辑。将“依林小镇复制”站点的名称改为“依林小镇”为例的操作为：
1．在“管理站点”对话框中选择要编辑的站点——“依林小镇复制”。
2．单击对话框中的“编辑”按钮，打开“依林小镇复制的站点定义为对话框”，单击高级选项卡。
3.在站点名称对话框中，将“依林小镇复制”改为“依林小镇”，单击“确定”按钮即可。3.2.3
管理本地站点3.2规划与创建站点68编辑ppt3.3网页文件的基本操作3.3.1新建网页3.3.2保存网页3.3.3关闭网页3.3.4打开网页3.3.5预览网页69编辑ppt
1．执行以下操作之一：
•单击菜单栏中“文件”|“新建”命令。
•单击标准工具栏上的
按钮。
2．打开“新建文档”对话框。
3．选择“基本页”选项中的“HTML”，单击“创建”按钮，即可新建一个空白的文档。3.3.1
新建网页3.3网页文件的基本操作70编辑ppt
1．执行以下操作之一：
•单击菜单栏中“文件”|“保存”命令
•单击标准工具栏上的
按钮。
2．打开“另存为”对话框。
3．在“保存在”选项中选择网页的保存位置。在“文件名”文本框中的输入文件名。
4．单击“保存”按钮，文件就保存到指定位置。3.3.2
保存网页3.3网页文件的基本操作
单击菜单栏中“文件”|“关闭”或单击文档的窗口右上角的“关闭”即可。3.3.3
关闭网页71编辑ppt
打开己保存的网页有以下三种方法
１、通过文件菜单打开己有的网页：
（1）执行以下操作之一：
•单击菜单栏中的“文件”|“打开”命令。
•或单击标准工具栏上的。
（2）打开“打开”对话框。
（3）在查找范围下拉列表中选择网页所在的文件夹,选择要打开的文件,单击“打开”按钮,即可打开了文件
2、在“文件”面板中打开网页文件
在“文件”面板中,双击要打开的文件,即可打开网页
3、在资源管理器中打开网页文件
在资源管理器中，右击要打开的网页文件，在弹出的快捷菜单中选择“在Dreamweaver8”中编辑即可将文件在Dreamweaver8中打开。3.3.4
打开网页3.3网页文件的基本操作72编辑ppt
以在Iexplore中预览为例，执行以下操作之一：
•单击菜单栏中“文件”|“在浏览器中预览”|“Iexplore6.0”命令。
•使用快捷键为F12。
•在文档工具栏中单击，选择在浏览器中预览，如图所示。3.3.5
预览网页3.3网页文件的基本操作73编辑ppt本讲小结第3讲Dreamweaver基础Dreamweaver基础Dreamweaver8工作界面规划与创建站点网页文件的基本操作启动和退出DreamweaverDreamweaver8操作界面规划网站的整体结构建立本地站点管理本地站点关闭网页打开网页新建网页保存网页预览网页74编辑ppt$
[知识目标]
掌握在网页中的文本和段落的设置方法掌握图像的插入及其属性的设置的方法熟悉页面属性的设置熟悉各种超级链接及设置8
[能力目标]
掌握文本和段落属性设置的操作掌握图像的插入及图像属性设置的操作掌握页面属性的设置操作掌握各种超级链接的设置及编辑操作第4讲网页中的基础元素75编辑ppt4.1在网页中插入文本4.2在网页插入图像4.3插入其他网页元素4.4设置网页的页面属性4.5设置超级链接本讲小结第4讲网页中的基础元素76编辑ppt4.1在网页中插入文本4.1.1插入文本4.1.2设置文本格式4.1.3段落格式的编辑4.1.4设置列表4.1.5简单的CSS样式应用77编辑ppt
（一）插入普通文本:添加文本有以下三种方法：
1．直接在文档窗口中输入文本。
2．拷贝文本。
3．从其他文档导入文本。
（二）插入特殊字符
1．将光标定位在要插入特殊字符的位置。
2．在“插入”栏的“文本”类别中，选择要插入的符号，如图。4.1.1插入文本
4.1在网页中插入文本78编辑ppt
1．选择要设置的文本。
2．在“属性检查器”，设置文本格式。4.1.2设置文本格式4.1在网页中插入文本79编辑ppt
（一）应用己有的标题格式
（二）自定义设置段落格式
1．设置对齐方式
2．设置段落缩进4.1.3
段落格式的编辑4.1在网页中插入文本80编辑ppt列表包括项目列表和编号列表两种。创建项目列表或编号列表的操作为：
1.选择要创建列表的文本。
2.在“属性检查器”中单击按钮，可以创建项目列表；单击按钮，可以创建编号列表。
3.单击“属性检查器”中的按钮，以弹出的“列表属性”对话框中可以重新设置列表的属性。4.1.4设置列表4.1在网页中插入文本81编辑ppt
CSS是CascadingStyleSheets（层叠样式表单）的简称。使用CSS样式改变行距的操作为：
1．按组合键Shift+F11，打开CSS面板如所示。
2．点击CSS面板上的按钮，打开“新建CSS规则”对话框并设置如图右，单击确定。4.1.5
简单的CSS样式应用4.1在网页中插入文本82编辑ppt３．单击“确定”按钮，打开“.hangju的CSS规则定义”对话框。设置如图，单击“确定”退出。4.1.5
简单的CSS样式应用4.1在网页中插入文本83编辑ppt４．选择要应用样式的两段文本或光标定位在段落中，在“属性检查器”中“样式”下拉列表中，选择“hangju”，则文本的行距发生了改变，如图所示。4.1.5
简单的CSS样式应用4.1在网页中插入文本84编辑ppt4.2在网页插入图像4.2.1插入图像4.2.2设置图像属性4.2.3编辑图像4.2.4图像外部编辑4.2.5鼠标经过图像4.2.6创建导航条85编辑ppt
在网页中插入图像的操作为：
1.将光标定位在要插入图像的位置。
2.执行以下操作之一：
•单击菜单栏中的“插入”|“图像”命令。
•在“插入”栏的“常用”类别中，单击“图像”按钮
3．打开“选择图像源文件”对话框，选择需要的文件名称。
6．在“相对于”下拉列表中选择“站点”。
7．单击“确定”按钮，图像则插入到网页中。4.2.1
插入图像4.2在网页插入图像86编辑ppt
在文档窗口选中图像时，在“属性检查器中就可以显示该图像的属性，并可对其进行修改。
1．设置图像大小：可以直接在“宽”和“高”两个文本框内输入新的数值即可。还可以直接用鼠标拖动来改变图像的大小。具体操作为：
（1）选中要改变的图像，图像四周出现控制点。
（2）拖动任一个控制点则可改变图像大小
4.2.2
设置图像属性4.2在网页插入图像87编辑ppt
3．设置图像对齐方式
4．其他图像属性
•“源文件”：指定图像的源文件。单击“浏览”
按钮或者直接键入文件的路径，可以重新定义源文件。
•“替代”：用于指定在图像不能正常显示时，显示的关于图像的文本提示信息。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。
•“垂直边距和水平边距”：以像素为单位设定图像与周围的网页元素间的距离。
•“边框”：是以像素为单位的图像边框的宽度。默认为无边框。4.2.2
设置图像属性4.2在网页插入图像88编辑ppt在Dreamweaver8中提供了基本图像编辑功能，各编辑按钮如下：
——优化。单击此按钮可以打开“Fireworks”程序对图像进行优化。
——裁剪。可让修剪图像的大小，从所选图像中删除不需要的区域。
——重新取样。可对已调整大小的图像进行重新取样，提高图片在新尺寸和形状下的品质。
——亮度和对比度。可让调整图像的亮度和对比度设置。
——锐化可调整图像的清晰度。4.2.3
编辑图像
4.2在网页插入图像89编辑ppt启动外部图像编辑器执行以下操作之一：
•双击要编辑的图像。
•选择要编辑的图像，然后在属性检查器中单击“编辑”。
•在“站点”面板中双击图像文件，启动主图像编辑器。如果尚未指定图像编辑器，Dreamweaver8将启动该文件类型的默认编辑器。4.2.4图像外部编辑4.2在网页插入图像90编辑ppt设置鼠标经过图像的操作为：
1．在“文档”窗口中,将光标定位在要显示鼠标经过图像的位置。
2．执行以下操作之一，打开插入鼠标经过图像对话框：
•单击菜单栏中“插入|图像对象|鼠标经过图像”命令。
•在“插入”栏的“常用”类别中，单击“图像”按钮右侧的箭头，在弹出的菜
单中，选择“鼠标
经过图像”，如图
所示。4.2.5
鼠标经过图像4.2在网页插入图像91编辑ppt
3．打开“鼠标经过图像”对话框。
4．单击“确定”，在网页中插入了鼠标经过图像。
5．保存并在浏览器中预览网页。4.2.5
鼠标经过图像4.2在网页插入图像92编辑ppt
1．准备好用于制作导航条的图像,这些图像最好大小尺寸一样。
2．在文档窗口中，将光标定位在要显示导航条的位置。一般导航条位网页的顶部或两侧。
3．单击菜单栏中“插入”|“图像对象”|“导航条”。
4．打开对话框，在对话框中设置。在导航条中，每一个项目都对应一个按钮，该按钮具有一组状态图像，最多可达四个。项目名称在“导航条项目”列表中显示。用箭头按钮排列项目在导航条中的位置。单击“+”按钮，添加另一个项目，单击“-”可以删除选中的项目。向上和向下的箭头按钮，用于调整项目在导航条中排序。4.2.6
创建导航条4.2在网页插入图像93编辑ppt
5．设置完成一个项目后，单击加号“+”按钮向导航条添加另一个项目，然后重复上述步骤定义该项目。
6．完成设置后，单击“确定”按钮，在网页中插入了导航条。4.2.6创建导航条4.2在网页插入图像94编辑ppt4.3插入其他网页元素4.3.1水平线4.3.2日期和时间95编辑ppt（一）插入水平线:在网页中插入水平线的操作为：
1．在“文档”窗口中，将光标定位在要插入水平线的位置。
2．执行下列操作之一：
•单击菜单栏中“插入”|“HTML”|“水平线”命令。
•在“插入”栏的“HTML”类别中，单击“水平线”按钮，如图。
3．水平线插入在网页中如图4.3.1
水平线4.3插入其他网页元素96编辑ppt（二）设置水平线属性：
1．选择水平线
2．打开“水平线属性”，如图所示。
•“宽”：用于设置水平线的宽度。
•“高”：以像素为单位，设置水平线的高度。
•“对齐”：设置水平线的对齐方式（“默认”、“左对齐”、“居中对齐”或“右对齐”）。
•“阴影”：指定绘制水平线时是否带阴影。取消选择此选项将使用纯色绘制水平线。4.3.1
水平线4.3插入其他网页元素97编辑ppt（三）.增添颜色
1．选择水平线
2．在“属性检查器”上，单击打开快速标签编辑器如图。
3．插入color="？"，颜色取值可以是英语（如yellow）也可用十六进制代码（如#FFFF00）.4.3.1
水平线4.3插入其他网页元素98编辑ppt（一）将当前日期插入到文档中
1在“文档”窗口中，定位光标在要插入日期的位置。在图4.34的网页中的图像下面输入文本“本网页制作于：”。
2执行下列操作之一：
•单击菜单栏中“插入”|“日期”命令。
•在“插入”栏的“常用”类别中，单击“日期”按钮
3．打开“插入日期”对话框如图。4.3.2
日期和时间4.3插入其他网页元素99编辑ppt
4．在对话框中，选择星期格式、日期格式和时间格式。
5．如选择“储存时自动更新”，在每次保存文档时都会更新插入的日期。取消选择，日期在插入后变成纯文本并永远不自动更新。
6．单击“确定”插入日期，效果如图所示。4.3.2
日期和时间4.3插入其他网页元素100编辑ppt4.4设置网页的页面属性4.4.1打开页面属性对话框4.4.2设置网页的标题4.4.3设置网页的背景4.4.4设置网页的文本4.4.5设置网页的边界101编辑ppt
1．要打开页面属性对话框可以执行以下操作之一：
•单击菜单栏中“修改”|“页面属性”命令。
•单击文本“属性检查器”中的“页面属性”按钮。
2．打开页面属性对话框，如图所示。4.4.1打开页面属性对话框4.4设置网页的页面属性102编辑ppt
1．在页面属性对话框中，选择“标题/编码”分类，如图所示。
2．在“标题”文本框内输入网页的标题内容，如“长春游游网”。
3．点击“确定”退出页面属性对话框。
4．保存并在浏览器中预览网页,则标题出现在浏览器的左上角4.4.2设置网页的标题4.4设置网页的页面属性103编辑ppt（一）设置网页的背景颜色
1．在页面属性对话框中，选择“外观”分类。
2．执行以下操作之一：
•在“背景颜色”对话框中输入颜色的十六进制代码如“#66CCFF”
•点背景颜色后的按钮，打开调色板选择颜色。
3．点击“确定”退出页面属性对话框。
4．保存并在浏览器中预览网页。4.4.3设置网页的背景4.4设置网页的页面属性104编辑ppt（二）设置网页的背景图像
1．在页面属性对话中，选择“外观”分类。
2．点击“背景图像”后的“浏览”按钮，打开选择图像源对话框。
3．查找并选择作为网页背景的图像，单击“确定”退出页面属性对话框。
4．保存并在浏览器中预览网页。
5.重复选项：确定是否以及如何重复背景图像。有四个选项：“不重复”只在开始处显示一次图像。“重复”在水平和垂直方向平铺图像。“横向重复”和“纵向重复”，分别在水平和垂直方向重复排列背景图像。4.4.3设置网页的背景4.4设置网页的页面属性105编辑ppt在页面属性对话框架可以对网页的文本进行统一的字体、字号及文本颜色的设置
1．在页面属性对话框中，选择“外观”分类。
2．在“页面字体”的下拉菜单中，选择字体。
3．在“大小”下拉菜单中，选择字号。
4．单击“文本颜色”右侧的调色板，可以设置文本的颜色。4.4.4
设置网页的文本4.4设置网页的页面属性页面属性中“左边距”、“右边距”、“上边距”和“下边距”四个选项，用于设置网页页面元素与页面边界的宽度或高度。其右侧下拉列表为宽度或高度的单位，默认为“像素”。4.4.5
设置网页的边界106编辑ppt4.5设置超级链接4.5.1超链接的路径4.5.2创建基本超链接4.5.3锚点链接4.5.4热区链接4.5.5电子邮件链接107编辑ppt①绝对路径。是提供所链接文档的完整路径，且包含其应用协议（如http://）。主要用于创建站外具有固定地址的链接，如要建立到中央电视台的链接就可以使用。②文档相对路径。是以当前文档所在位置为起点到被链接文档经由的路径，省略对于当前文档和所链接的文档都相同的绝对路径部分，而只提供不同的路径部分，如：gerenwenjian/jiangli.html。具有可移植性，是网页制作的首选。③根目录相对路径（又称服务器路径）：使用多个服务器的大型站点会要用到这种文档路径。如："/image/button.gif”即是连接网络服务器根目录下的image文件夹中的button.gif文件，必须在网络环境之下才能使用这种路径。4.5.1
超链接的路径4.5设置超级链接108编辑ppt
1、在网页中，选择要超链接的载体（文字或者图）像，选择“净月潭国家森林公园”。
2．在属性检查器中，单击“链接”后的“浏览”按钮，打开“选择文件”对话框。
3．选择链接的目标文件，单击“确认”按钮。
4．在“属性检查器”中的“目标”下拉菜单中,选择目标文件打开的位置,如图。
5．保存并在浏览器中预览网页，建立了超链接的文字变为蓝色并带有下划线。
6．单击创建超链接的文字，测试链接的完好性。4.5.2
创建基本超链接4.5设置超级链接109编辑ppt
1．创建命名锚记（1）光标定位在要创建命名锚记的位置，如在图4.49网页中的标题“长春介绍”前定位光标。（2）执行以下操作之一：
•单击菜单栏中的“插入”|“命名锚记”命令
•在“插入”栏中的“常用”类别中，单击“命名锚记”。（3）打开“命名锚记”对话框，如图。
4.5.3
锚点链接4.5设置超级链接110编辑ppt（4）在“锚记名称”文本框中输入锚记名称，如“top”。（5）单击“确定”按钮退出，则在文档的相应位置出现一个图标这就是命名锚记的符号。4.5.3
锚点链接4.5设置超级链接111编辑ppt
1、在网页中插入图片。
2．单击选中图片，“属性检查器”出现热区工具按钮。
3．单击“矩形”热区按钮，将光标移到图像上按下并拖动鼠标，绘制出一个浅蓝色带有黑色的边框的矩形区域。4.5.4
热区链接4.5设置超级链接112编辑ppt
4．松开鼠标，“属性检查器”变为“热点属性”，如图所示。
５．设置链接。与文本或图像的超链接设置相同。
６．保存并在浏览器中预览网页，将光标指向热区位置时，出现手形图标，如图所示。4.5.4
热区链接4.5设置超级链接113编辑ppt
1．在文档窗口中，选择链接载体，如选择“站长信箱”文本。
2．执行以下操作之一：
•单击菜单栏“插入”|“电子邮件链接”命令。
•在“插入”栏的“常用”类别中，单击“电子邮件链接”按钮。
3．打开“电子邮件链接”对话框.
4．“文本”：显示己选中的文本，如没有选择文本，可在此直接输入作为链接的文本载体。
5．“E—Mail”：输入电子邮件地址。
6．保存并在浏览器中预览网页测试电子邮件链接。4.5.5
电子邮件链接4.5设置超级链接114编辑ppt本讲小结第４讲网页中的基础要素网页中的基础要素在网页中插入文本在网页中插入图像设置网页的页面属性其他网页元素插入文本设置文本格式段落格式的编辑设置列表简单的CSS样式应用插入图像设置图像属性编辑图像图像外部编辑图像外部编辑鼠标经过图像水平线日期和时间打开页面属性对话框设置网页的标题设置网页的背景设置网页的文本设置网页的边界创建导航条设置超级链接超链的路径创建基本超链接锚点链接热区链接邮件链接115编辑ppt$
[知识目标]
掌握表格及单元格的创建和编辑掌握通过表格来进行网页页面的布局方法掌握建立框架网页及框架属性设置的方法8
[能力目标]
熟练掌握表格的基本操作熟练运用表格进行网页布局熟练运用框架进行网页的布局第5讲网页页面布局116编辑ppt5.1表格5.2表格布局5.3框架布局本讲小结第5讲网页页面布局117编辑ppt5.1表格5.1.1插入表格5.1.2添加内容5.1.3选择表格5.1.4设置表格属性5.1.5编辑表格的基本操作
在表格中横向为行，纵向为列。行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。表格的边线叫做边框。118编辑ppt
（一）插入表格
1．定位光标在要插入表格的位置，然后执行以下操作之一：
•单击菜单栏中的“插入”|“表格”命令。
•在“插入”栏的“常用”类别中，单击“表格”按钮。
2．打开表格对话框。5.1.1
插入表格5.1表格119编辑ppt5.1.1
插入表格5.1表格
3．单击“确定”创建表格插入“4行5列”的表格。120编辑ppt
（二）插入嵌套表格
1．将光标定位在表格的一个单元格内。
2．执行插入表格的操作，即可在表格内嵌套表格如图。5.1.1
插入表格5.1表格121编辑ppt
将插入点定位在表格内，即可输入文本、图像、动画等网页元素。5.1.2
添加内容5.1表格122编辑ppt
(一)选择整个表格
选择整个表格执行以下操作之一：
•单击表格的左上角、右边或底部边缘的任意位置。
•单击表格单元格，在菜单栏单击“修改”|“表格”|“选择表格”命令。(二)选择行或列1．鼠标指向行的左边缘或列的上边缘，光标变为或。2．单击鼠标则选择鼠标指向的行或列。3．拖动鼠标，则选择连续的多行或多列。4．按Ctrl同时单击鼠标，则可选择不连续的多行或多列。5.1.3选择表格5.1表格123编辑ppt
(三)选择单元格
1.选择单个单元格，请执行以下操作之一：
•单击单元格，然后在文档窗口左下角的标签选择器中选择<td>标签.
•在单元格内双击鼠标则可选择该单元格。
•在单元格内单击，然后按组合键Ctrl+A。
2．选择连续的多个单元格可以执行以下操作之一：
•单击第一个单元格，按住Shift键的同时单击另一个单元格，两个单元格之间的矩形区域内所有的单元格均被选中。
•在一个单元格中单击并拖动鼠标横向或纵向移动到其他一个单元格，然后松开鼠标则鼠标经过区域的单元格被选中。
3．按Ctrl同时单击单元格则可选择不相邻的多个单元格。5.1.3选择表格5.1表格124编辑ppt
（一）表格属性
表格被选中之后，可以利用表格属性来设置或修改表格的属性。
（二）单元格属性
单元格被选中或光标定位在单元格中时，可以利用单元格属性，来设置或修改单元格的属性。5.1.4设置表格属性5.1表格125编辑ppt
(一)调整表格的大小：
1．选择整个表格，在表格的边缘出现3个黑色控制点。
2．执行以下操作：
•用鼠标拖动这些控制点则可改变表格的大小。
•在表格“属性检查器”中重新设置“高度”与“宽度”值，改变表格的大小。
（二）调整行高和列宽
1．将鼠标移到要调整的行高或列宽的边框上，光标变为或。
2．拖动鼠标即调整行高或列宽。5.1.5编辑表格的基本操作5.1表格126编辑ppt
（三）合并或折分单元格
1．拆分单元格
（1）选择（或将光标定位在）要拆分的单元格。
（2）执行以下操作之一：
•单击菜单栏中的“修改”|“表格”|“拆分单元格”命令。
•在“属性检查器”中，单击“拆分单元格”的按钮。
(3)打开拆分单元格对话框如图。
（4）在这可以选择拆分行还是拆分列，以及设置拆分的行数或列数。如设置拆分为“行”，行数为“2”。
（5）单击确定，单元格被拆分。5.1.5编辑表格的基本操作5.1表格127编辑ppt
2．合并单元格
（1）选择需要进行合并的两个以上单元格。
（2）执行以下操作之一：
•单击菜单栏“修改”|“表格”|“合并单元格”命令
•在“属性检查器”中，单击“合并单元格”按钮。
（3）选的单元格被合并。5.1.5编辑表格的基本操作5.1表格128编辑ppt
（四）插入和删除行或列
1．插入单行或单列
在所选择的行、列或单元格的上面及左侧插入单行或单列，操作如下：
（1）选择行、列或单元格。
（2）单击菜单栏中的“修改”|“表格”|“插入行”或“插入列”命令。
•选择“插入列”命令：可以在所选列的左侧添加一列。
•选择“插入行”命令：可以在所选行的上面添加一行。5.1.5编辑表格的基本操作5.1表格129编辑ppt
2．插入多行或多列
（1）选择行、列或单元格。
（2）单击菜单栏中的“修改”|“表格”|“插入行或列…”的命令，打开“插入行或列”对话框。
（3）选择插入“列”或“行”，并设置数目，单击确定。
5.1.5编辑表格的基本操作5.1表格130编辑ppt
3．删除行或列
在表格中删除行或列的操作为：
（1）选择要删除的行或列。
（2）执行以下操作之一：
•单击菜单栏中的“修改”|“表格”|“删除行”或“删除列”命令。
•单击菜单栏中的“编辑”|“清除”命令。
•使用键盘上的“Delete”键。5.1.5编辑表格的基本操作5.1表格131编辑ppt5.2表格布局5.2.1布局视图5.2.2绘制布局表格和布局单元格5.2.3编辑布局表格和布局单元格132编辑ppt5.2表格布局133编辑ppt
（一）切换布局视图
1．执行以下操作之一：
•单击菜单栏中“视图”|“表格视图”|“布局视图”命令。
•在“插入”栏的“布局”类别中，单击“布局模式”按钮。
2．打开“从布局模式开始”对话框5.2.1
布局视图5.2表格布局134编辑ppt
3．单击“确定”按钮，进入布局视图模式。
4．单击“退出”按钮，或单击相应的其他视图按钮，退出布局视图。5.2.1
布局视图5.2表格布局135编辑ppt
（二）布局工具按钮
在“插入栏”的“布局”类别中，有布局用的各种工具按钮。
从左到右依次为：
•“标准”：单击进入标准视图模式。
•“扩展”：单击进入扩展表格模式。
•“布局”：单击进入布局视图模式。
•“
”：用于绘制布局表格。
•“
”：用于绘制布局单元格。
•“
”：用于添加布局框架。
•“
”：用于导入表格数据。5.2.1
布局视图5.2表格布局136编辑ppt
（一）绘制布局表格
1．切换到布局视图模式
2．单击“绘制布局表格”按钮
，鼠标指针变为“+”。
3．在文档窗口中，按住鼠标左键并拖动，可以绘制出布局表格，表格的框线显示为绿色。
5．要绘制多个布局表格，
按住Ctrl键同时单击“绘制
布局表格”按钮。6．每个布局表格都在顶端
有标签，并在布局表格的底
端或顶端显示表格的大小。
5.2.2
绘制布局表格和布局单元格5.2表格布局137编辑ppt
7．单击“绘制布局表格”按钮，可以在布局表格内绘制嵌套的布局表格如图所示，嵌套的表格大小不能超过包含它的布局表格。5.2.2
绘制布局表格和布局单元格5.2表格布局138编辑ppt
（二）绘制布局单元格
1．切换到布局视图模式
2．单击“绘制布局单元格”按钮
，鼠标指针变为“+”
3．在布局表格中合适位置，
按住鼠标左键并拖动，可以绘
制出布局单元格，单元格的框
线显示为蓝色，如图所示。
4．要绘制多个单元格，
可以在按住Ctrl键的同时单击
“绘制布局单元格”按钮并绘制。5.2.2
绘制布局表格和布局单元格5.2表格布局139编辑ppt
（一）移动布局表格和布局单元格
1．单击布局表格标签，可以选中布局表格；单击单元格边框，可以选择布局单元格；
2．用鼠标拖动布局表格或布局单元格到合适位置。
（二）调整布局表格和布局单元格大小
1．选择要调整的布局表格和布局单元格。
2．选择的表格或单元格四周会出现控制点，拖动控制点可以调整其大小。
（三）向单元格中添加内容
1．将光标定位在要添加内容的单元格。
2．插入文字和图像等各种网页元素。5.2.3
编辑布局表格和布局单元格5.2表格布局140编辑ppt
（四）删除布局表格或布局单元格
删除布局表格或布局单元格的操作为：
1．选择要删除的布局表格和布局单元格。
2．执行以下操作之一：
•单击菜单栏中“编辑”|“清除”命令。
•使用键盘上的“Delete”键。5.2.3
编辑布局表格和布局单元格5.2表格布局141编辑ppt
（五）设置布局表格属性
1．布局表格属性
2．布局单元格属性
5.2.3
编辑布局表格和布局单元格5.2表格布局142编辑ppt
（四）利用表格制作垂直线和水平线
（1）在网页中插入一个无边框、无边距的表格
（2）定位光标在制作水平线的单元格内
（3）在“属性检查器”中，设置高度（或宽度）为“1”，为单元格添加背景颜色。
（4）单击“文档”工具栏中的“拆分”按钮，切换到“代码和设计视图”，删除单元格内的“ ”代码，如图。5.2.3
编辑布局表格和布局单元格5.2表格布局143编辑ppt
（4）保存网页，在浏览器中预览网页，如图所示。5.2.3
编辑布局表格和布局单元格5.2表格布局144编辑ppt5.3框架布局5.3.1建立框架5.3.2框架面板5.3.3设置框架的属性5.3.4保存框架5.3.5框架中的超链接145编辑ppt
1．定位光标在要插入框架集的窗口中。
2．执行以下操作之一：
•单击菜单栏中“插入”|“HTML”|“框架”命令，在子菜单中单击相应的框样式。
•在“插入”栏的“布局”类别中，单击框架按钮右侧的下拉按钮，弹出下拉菜单，单击相应的框架集图标。建立框架网页。5.3.1建立框架5.3框架布局146编辑ppt
（—）打开框架面板
单击菜单栏中“窗口”|“框架”命令，打开框架面板。在面板中标识了每个框的名称。
（二）框架面板的基本操作：
1．选择框架集：在“框架”面板中单击最外层的边框，使其出现粗黑边显示，则选中了框架集。
2．选择框架：在“框架”面板中单击要选择的框架，使其出现细黑边显示，则选中了框架。5.3.2框架面板5.3框架布局147编辑ppt
（一）设置框架集属性：选中框架集，打开框集属性
1．边框选项设置
2．框架集中框架大小设置
（二）设置框架属性
选择框架后（如选择左侧框架），打开框架属性5.3.3
设置框架的属性5.3框架布局148编辑ppt
（一）保存框架集的操作：
1．在框架面板中，选择中要保存的框架集。
2．单击菜单栏中“文件”|“保存框架页”命令。
3．打开“另存为
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 工业园区的资源分配与管理
- 工业废水处理技术与环境治理研究
- 工业安全生产管理与预防策略
- 工业废水处理技术的研究与应用
- 工业自动化中新材料技术的趋势分析
- 工业污染防治与环保设备应用
- 工业物联网的远程监控与维护系统设计
- 工业机械自动化系统的可靠性保障
- 工业设计中的智能产品解决方案
- 工作与休息的平衡对残疾人群的特别意义
- 2025山东“才聚齐鲁成就未来”水发集团高校毕业招聘241人笔试参考题库附带答案详解
- 2025中考数学押题预测 （广西卷）（试卷+答案详解）
- GB/T 45355-2025无压埋地排污、排水用聚乙烯（PE）管道系统
- 马工程版《中国经济史》各章思考题答题要点及详解
- .全年累计供暖空调能耗模拟报告
- 自身免疫性脑炎
- 热工基础思考题答案(第1章)
- 大学生选课申请表
- 生产安全事故风险评估报告（参考模板）
- 消防安全工作台账表格汇总
- 广州旧城改造三元里文本
评论
0/150
提交评论