《网页设计与制作》课件.ppt

1、.1.2$知识目标知识目标 88 能力目标能力目标.3 1.1 网页和网站网页和网站 1.2 网页中的主要元素网页中的主要元素 1.3 网页制作工具网页制作工具 1.4 网页设计的基本流程网页设计的基本流程 本讲小结本讲小结.41.1.1 网页网页1.1.2 网站网站1.1.3 网页的基本功能网页的基本功能.51网页网页网页（网页（WEB）：是用）：是用html语言编写的，通语言编写的，通过过www网传输，并被网传输，并被web浏览器翻译成可以显浏览器翻译成可以显示出来的集合文本、图片、声音和动画等信息示出来的集合文本、图片、声音和动画等信息元素的页面文件（网页示例）。元素的页面文件（网页示例

2、）。2网页的类型网页的类型根据页面内容可以分首页、主页、专栏网根据页面内容可以分首页、主页、专栏网页、内容网页和功能网页等类型；按制作技术页、内容网页和功能网页等类型；按制作技术分为静态网页与动态网页。分为静态网页与动态网页。.6网站就是把一些网页等信息文件通过超链网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合。信接的形式关联起来形成的信息文件的集合。信息可以是网页形式也可以是其他的文档形式。息可以是网页形式也可以是其他的文档形式。网页与网站的区别与联系：网页与网站的区别与联系：网站是一个文件夹，其中的文件不仅是网网站是一个文件夹，其中的文件不仅是网页还有网站所需的其

3、他文件或文件夹。网页是页还有网站所需的其他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页是网一个页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的集合。主要形式；网站是网页通过超链接形成的集合。.71、媒介的作用。使用者与信息之间的媒介。、媒介的作用。使用者与信息之间的媒介。一方面是发布者，功能是发布信息；另一方面一方面是发布者，功能是发布信息；另一方面是浏览者，功能是提供浏览的信息，通过浏览是浏览者，功能是提供浏览的信息，通过浏览网页找寻需要的信息。网页找寻需要的信息。2、互动的作

4、用。浏览者与网页制作单位之、互动的作用。浏览者与网页制作单位之间互动的窗口，可以单向或双向传递信息。间互动的窗口，可以单向或双向传递信息。3、传输的作用。作为传输各种电子文件或、传输的作用。作为传输各种电子文件或信息之用，如下载说明书、更新文件、驱动程信息之用，如下载说明书、更新文件、驱动程序等。序等。.81.2.1 文本文本1.2.2 图像图像1.2.3 链接标志链接标志1.2.4 其他的基本要素其他的基本要素网页的基本要素一般包括：文字、图像、网页的基本要素一般包括：文字、图像、动画和链接标志等，除此之外，网页的元素还动画和链接标志等，除此之外，网页的元素还包声音、多媒体和视频等。包声音、

5、多媒体和视频等。.9是网页中最基本的元素。网页中文字的设是网页中最基本的元素。网页中文字的设计一般从以下几个方面来考虑：计一般从以下几个方面来考虑：1字体的选择。字体的选择。2字号、行距的选择。字号、行距的选择。3特殊字体的使用。特殊字体的使用。4字体的颜色。字体的颜色。.10现在网络上使用的绝大多数图片和图像是现在网络上使用的绝大多数图片和图像是gif、jpeg和和png文件格式。文件格式。网页上使用图像要注意的问题：网页上使用图像要注意的问题：JPEG格式适合于照片图像，格式适合于照片图像，GIF格式适合格式适合于包含纯色的图像，例如插图和线条图。于包含纯色的图像，例如插图和线条图。利用图

6、像编辑软件来放大或缩小图像利用图像编辑软件来放大或缩小图像屏幕显示图像的分辨率一般为屏幕显示图像的分辨率一般为72dpi。制。制作图像时，不必使用比此再高的分辨率。作图像时，不必使用比此再高的分辨率。.11如果建立的图像中只有黑色和白色，处理如果建立的图像中只有黑色和白色，处理时可将它保存为黑白图像格式，这样可以减少时可将它保存为黑白图像格式，这样可以减少图像文件的大小。图像文件的大小。如果设计的如果设计的GIF格式图像包含了渐变和直格式图像包含了渐变和直线，应尽量使得它们水平，因为线，应尽量使得它们水平，因为GIF格以每条水格以每条水平线为基础来压缩。平线为基础来压缩。尝试各种不同的尝试各种

7、不同的JPEG压缩率压缩率使用合适的色彩模式。使用合适的色彩模式。慎用动画。慎用动画。.12链接也叫超链接（链接也叫超链接（Hyperlink），是从一个），是从一个网页指向另一个目的端的链接，是页面间的链网页指向另一个目的端的链接，是页面间的链接关系。接关系。链接标志（载体）指的是网页中特殊的文链接标志（载体）指的是网页中特殊的文本或图像，它们常常用不同的颜色和下划线来本或图像，它们常常用不同的颜色和下划线来标识，在浏览器中，访问者可以用鼠标单击它标识，在浏览器中，访问者可以用鼠标单击它们，能够从当前的网页转到链接的目的端位置。们，能够从当前的网页转到链接的目的端位置。超链接的标志一般有：文

8、本、图像、热区超链接的标志一般有：文本、图像、热区三种。要注意的是，所有超链接标志均应清晰三种。要注意的是，所有超链接标志均应清晰无误地向浏览者标识出来，让人一看就知道。无误地向浏览者标识出来，让人一看就知道。.13除上述几种要素之外，在网页上经常使用除上述几种要素之外，在网页上经常使用的还有动画、视频、声音等各种信息的形式。的还有动画、视频、声音等各种信息的形式。1动画。目前网络上常用的动画类型有动画。目前网络上常用的动画类型有gif和和Flash动画两种。动画两种。2视频。是多媒体网页的一个重要组成部视频。是多媒体网页的一个重要组成部分，常用的视频格式有分，常用的视频格式有avi、mpeg

9、和和mov等，等，视频会大大增加网页的文件量，从而使用访问视频会大大增加网页的文件量，从而使用访问速度受到影响，因此要慎用。速度受到影响，因此要慎用。3音频。在网页中插入音频会增加网页的音频。在网页中插入音频会增加网页的生动性。常用的音频格式有生动性。常用的音频格式有rm(ram)、midi、wav和和mp3等格式。音频文件和视频文件一样等格式。音频文件和视频文件一样都会增加网页的文件量，因此要慎用。都会增加网页的文件量，因此要慎用。.141.3.1网页编辑工具网页编辑工具1超文本标识语言（超文本标识语言（HTML）2FrontPage简介简介3Dreamweaver 1.3.2网页图像编辑工

10、具网页图像编辑工具1.3.3动态网页技术动态网页技术.151Photoshop。是。是Adobe公司开发的，是公司开发的，是当今最流行的图形图象处理软件之一，它能够实当今最流行的图形图象处理软件之一，它能够实现各种专业化的图像制作、处理及合成。现各种专业化的图像制作、处理及合成。2Fireworks。是由。是由Macromedia公司开发公司开发的图形处理工具，它是第一个专门为制作网页图的图形处理工具，它是第一个专门为制作网页图形而设计的软件，同时也提供专业的网页图形设形而设计的软件，同时也提供专业的网页图形设计及制作的解决方案。计及制作的解决方案。3.Flash。Macromedia公司出品

11、的公司出品的Flash是是目前非常流行的一种交互式目前非常流行的一种交互式Web矢量动画软件。矢量动画软件。Dreamweaver和和Flash、Fireworks三个软三个软件被称为件被称为“网页三剑客网页三剑客”，是现在公认的比较标，是现在公认的比较标准的网页制作利器。准的网页制作利器。.16动态网页可以实现网页浏览者和网页设计动态网页可以实现网页浏览者和网页设计者的交互，实现交互技术有两种：一种是客户者的交互，实现交互技术有两种：一种是客户端技术如常用的端技术如常用的JavaScript和和VBScript；另一；另一种是服务器端技术如目前常用的种是服务器端技术如目前常用的ASP和和PH

12、P。1ASP(Active Server Pages)2PHP(Hypertext Preprocessor)3JSP(Java Server Pages).171.4.1 网站的设计流程网站的设计流程1.4.2 网页的设计与制作网页的设计与制作1.4.3 网页的测试网页的测试1.4.4 网页上传和发布网页上传和发布.181确定网站的主题确定网站的主题2规划网站的整体结构规划网站的整体结构3收集整合网页素材收集整合网页素材4确定网页版面布局。确定网页版面布局。5制作网页。制作网页。6添加网页特效。添加网页特效。7测试和发布网站。测试和发布网站。.191确定网页的版面布局确定网页的版面布局（1）

13、平衡性。（）平衡性。（2）对称性。（）对称性。（3）对比性。）对比性。（4）疏密度。（）疏密度。（5）比例。（）比例。（6）韵律感。）韵律感。网页的排版布局是决定网站美观与否的一网页的排版布局是决定网站美观与否的一个重要方面个重要方面,通过合理的、有创意布局通过合理的、有创意布局,才可以把才可以把文字、图像等内容完美地展现在浏览者前面。文字、图像等内容完美地展现在浏览者前面。2网页设计与制作网页设计与制作网页设计与制作一般分为静态网页制作和网页设计与制作一般分为静态网页制作和动态网页制作两类。动态网页制作两类。.201浏览器兼容性测试。目前浏览器有：浏览器兼容性测试。目前浏览器有：Intern

14、et Explorer与与Netscape两大主流浏览器，二两大主流浏览器，二者对者对HTML和和CSS等语法的支持度是不同的。在等语法的支持度是不同的。在Dreamweaver中提供了可以检查网页中是否含有某版本中提供了可以检查网页中是否含有某版本浏览器不能识别的语法功能，设计者可以借助其进行检查。浏览器不能识别的语法功能，设计者可以借助其进行检查。2平台的兼容性测试。设计要为用户着想，必须最平台的兼容性测试。设计要为用户着想，必须最少在一台少在一台PC和一台和一台Mac机上测试你的网站网页，看看兼机上测试你的网站网页，看看兼容性如何；容性如何；3超链接完好性测试。超链接是连接网页之间、网超

15、链接完好性测试。超链接是连接网页之间、网站之间的桥梁，浏览者是不愿意访问一个经常出现站之间的桥梁，浏览者是不愿意访问一个经常出现“找不找不到网页到网页”的问题的网站，作为设计者必须检测超链接的完的问题的网站，作为设计者必须检测超链接的完好性，保证链接的有效性，不要留下太多的坏链接。好性，保证链接的有效性，不要留下太多的坏链接。.21网页设计好，必须把它发布到互联网上，网页设计好，必须把它发布到互联网上，否则网站形象仍然不能展现出去。发布的服务否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地。如果是发布到器可以是远程，也可以是本地。如果是发布到互联网上，要先申请域名和主页空间，

16、然后再互联网上，要先申请域名和主页空间，然后再利用专用软件（如：利用专用软件（如：CuteFTP）上传，）上传，FTP有有很多种软件，最著名的是很多种软件，最著名的是 CuteFTP 和和 LeapFTP，也可以用，也可以用Dreamweaver内置的内置的FTP上传。上传。.22网页设计概述网页和网站网页中的主要元素网页设计的基本流程网页制作工具网页网站网页的基本功能文本图像链接标志其他的基本要素网页编辑工具网页图像编辑工具网站的设计流程网页的设计与制作网页的测试网页上传和发布常见的各种网页制作工具动态网页技术.23$知识目标知识目标 88 能力目标能力目标.24 2.1 HTML概述概述

17、2.2 文本的编辑文本的编辑 2.3 图像编辑图像编辑 2.4 建立超链接建立超链接 2.5 表格与框架表格与框架 本讲小结本讲小结.252.1.1 HTML简介简介2.1.2 HTML语法结构语法结构.26HTML（Hyper Text Markup Language）又称超文本标识语言，是一种标识性的语言，又称超文本标识语言，是一种标识性的语言，是网页设计的最初语言。文件的扩展名是网页设计的最初语言。文件的扩展名:“html”或或“htm”。例2.1 简单的HTML文档 .长春欢迎您！这里是长春悠游网，我们带您畅游长春！由由“”组成的就是标记。在组成的就是标记。在HTML语言中标记分语言中

18、标记分“单标记单标记”和和“围堵标记围堵标记”。.271围堵标记围堵标记格式：格式：2单标记单标记格式：格式：只有起始标记，没有结束标记。最常用的只有起始标记，没有结束标记。最常用的单标记是单标记是,它表示段内换行。它表示段内换行。3标记属性标记属性格式：格式：各属性间无前后顺序，属性也可省略，当各属性间无前后顺序，属性也可省略，当省略属性时取标记的默认值。省略属性时取标记的默认值。.28HTML文档的基本结构：文档的基本结构：文件开始标头区开始.标题区标头区结束文件主体内容开始文件主体内容文件主体内容结束文件结束其中其中之间表示这是个网页之间表示这是个网页文件，是必有的标记。文件，是必有的标

19、记。.292.2.1 段落标记段落标记2.2.2 文本标记文本标记2.2.3 标题显示等级标题显示等级2.2.4 列表列表.301段落（段落（）基本语法格式为：基本语法格式为：其中参数其中参数align用于设定段落的位置是靠左、用于设定段落的位置是靠左、靠右还是居中。默认值是靠左；除靠右还是居中。默认值是靠左；除align之外之外还有其他参数如还有其他参数如class。class参数是可选项，参数是可选项，如果没有将按照默认值显示。如果没有将按照默认值显示。2换行换行单标记，放在一行的末尾，可以在一个段单标记，放在一行的末尾，可以在一个段落内实现文本的强制换行，设置标记后面的文落内实现文本的强

20、制换行，设置标记后面的文本字、图像和表格等内容显示于下一行。本字、图像和表格等内容显示于下一行。.311字体标记字体标记其基本语法格式为：其基本语法格式为：Size：设置字体的显示字号，范围是从：设置字体的显示字号，范围是从“17”，其中，其中“3”是默认值。是默认值。Color：设置文本的颜色，值可以是颜色名：设置文本的颜色，值可以是颜色名（英文如（英文如red代表红色）或颜色的十六进制代码代表红色）或颜色的十六进制代码（#000000代表黑色，代表黑色，#FFFFFF代表白色）。代表白色）。Face：设置文本显示的字体，值为字体的名称。：设置文本显示的字体，值为字体的名称。在文本的标记中还

21、有很多常用的标记，比如表在文本的标记中还有很多常用的标记，比如表示字体效果的，示字体效果的，(黑体黑体)，（斜体），（斜体），（加下划线）。（加下划线）。.322特殊字符特殊字符HTML中除了我们上面学的的一些标记外，中除了我们上面学的的一些标记外，还有一些我们常用的特殊字符比如还有一些我们常用的特殊字符比如“”，这些，这些特殊字符在特殊字符在HTML语言中都有对的转义符，常用语言中都有对的转义符，常用的转义符与特殊字符参见下表：的转义符与特殊字符参见下表：HTML 代码显示结果说明<大于号或显示标记&&可用于显示其它特殊字符"引号®注册©版权&tra

22、de;商标 不断行的空格.333水平线标记水平线标记水平线是在网页上划出一条水平的分割线，用水平线是在网页上划出一条水平的分割线，用来标记水平线。语法格式为：来标记水平线。语法格式为：Size：设置水平线的高度，以像素为单位。：设置水平线的高度，以像素为单位。Color：设置水平线的颜色。：设置水平线的颜色。Width：设置水平线的宽度，单位是像素或百：设置水平线的宽度，单位是像素或百分比，像素是绝对大小，不会随着程序窗口的大小分比，像素是绝对大小，不会随着程序窗口的大小而改，百分比是相对于程序窗口水平线所占的比例，而改，百分比是相对于程序窗口水平线所占的比例，会随着程序窗口的大小而

23、改变。会随着程序窗口的大小而改变。Align：设置水平线的对齐方式。对齐方式有：设置水平线的对齐方式。对齐方式有左对齐，居中，右对齐三种。左对齐，居中，右对齐三种。.34语法格式为：语法格式为：n：表示不同级别的标题，：表示不同级别的标题，n值可以是值可以是1-6中中的任意数字，其中的任意数字，其中1表示的标题字体最大。另外，表示的标题字体最大。另外，可以用可以用align属性设置对齐方式，常用的有左对属性设置对齐方式，常用的有左对齐，居中，右对齐三种对齐方式。齐，居中，右对齐三种对齐方式。.35在在HTML中，列表常用的有中，列表常用的有“有序列表有序列表”和和“无序列表无序列表”。1有序列

24、表有序列表基本语法结构为：基本语法结构为：项目1项目2项目n.361有序列表有序列表Type：设置列表的序号类型，常用序号如下：设置列表的序号类型，常用序号如下：n=1：用数字作为序号。：用数字作为序号。n=A；用大写字母作为序号。；用大写字母作为序号。n=a：用小写字母作为序号。：用小写字母作为序号。n=I：用大写罗马数字作为序号。：用大写罗马数字作为序号。n=i：用小写罗马数字作为序号。：用小写罗马数字作为序号。Start：为可选参数，用于设置序号的起始数值。：为可选参数，用于设置序号的起始数值。如不添加如不添加“start”则从每类序号的第一个序号开始。则从每类序号的第一个序号开始。.3

25、72无序列表无序列表基本语法结构为：基本语法结构为：项目1项目2项目nType:设置符号形状，有实心圆、小正方形、设置符号形状，有实心圆、小正方形、空心圆三种，具体如下：空心圆三种，具体如下：n=disk：符号为实心圆。：符号为实心圆。n=square：符号为正方形。：符号为正方形。n=circle：符号为空心圆。：符号为空心圆。.382.3.1 插入图像插入图像2.3.2 使用背景图像使用背景图像我们在网页上经常会浏览图像，适当使我们在网页上经常会浏览图像，适当使用图像可以增加网页的美观。在网页最常用用图像可以增加网页的美观。在网页最常用到的是插入图像和设置背景图像。到的是插入图像和设置背景

26、图像。.391语法格式：语法格式：，单标记单标记Src：指明要添加的图像所在的具体路径和：指明要添加的图像所在的具体路径和文件名。路径可以是相对路径，也可以是绝对文件名。路径可以是相对路径，也可以是绝对路径。例：路径。例：。绝对路径：完整的描述文件位置的路径就绝对路径：完整的描述文件位置的路径就是绝对路径。对于绝对路径可以不需要知道其是绝对路径。对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置。他任何信息就可以判断出文件的位置。相对路径：所谓相对路径相对路径：所谓相对路径,顾名思义就是当顾名思义就是当前文档与目标的相对位置。例前文档与目标的相对位置。例.402图像的属性图像的属性除

27、了除了“src”以外，以外，还有其他属性，还有其他属性，可以定义图像的对齐方向，与周围元素的距离可以定义图像的对齐方向，与周围元素的距离等，各属性及作用见表等，各属性及作用见表2.2。表表2.2 图像属性列表图像属性列表名称作用border 设定图像的边框 vspace 设定图像、文字与图像上下之间的间隔 hspace 设定图像、文字与图像左右之间的间隔 width 调整图像的宽度 height 调整图像的高度 alt 当浏览器无法显示图像时，会显示出alt属性所设定的文字.41语法格式为：语法格式为：.422.4.1 建立超链接建立超链接2.4.2 使用书签使用书签2.4.3 标记新窗口和基

28、准链接标记新窗口和基准链接.43建立超链接的标记是建立超链接的标记是，语法格式为：，语法格式为：超链接标识超链接标识url：指明链接目标的具体路径和文件名。：指明链接目标的具体路径和文件名。超链接标识：是网页中链接的载体，可以超链接标识：是网页中链接的载体，可以是文字或图像等页面元素，用户点击它就会跳是文字或图像等页面元素，用户点击它就会跳到超链接的目标位置。到超链接的目标位置。.44定义书签定义书签在在HTML中，首先要定义书签，然后才在链中，首先要定义书签，然后才在链接使用。定义书签的语法格式为：接使用。定义书签的语法格式为：书签名不能用中文，只能用英文和数字。书签名不能用中文，只能用英文

29、和数字。使用书签链接使用书签链接其链接的格式为：其链接的格式为：超链接标识#与书签名之间不能有空格。与书签名之间不能有空格。.451标记新窗口（标记新窗口（target）“target=”_blank”，是链接标记的一个，是链接标记的一个参数。语法格式为：参数。语法格式为：超链接标识当点击链接载体的，就会在新窗口打开链当点击链接载体的，就会在新窗口打开链接目标。接目标。2基准链接基准链接标记是单标记，禁止使用结束标记，标记是单标记，禁止使用结束标记，可以改变文件中所有链接标记的参数默认值。可以改变文件中所有链接标记的参数默认值。它只能位于文件的开头部分，即标记它只能位于文件的开头部分，即标记

30、与与 之间。语法格式为：之间。语法格式为：.462.5.1 建立表格建立表格2.5.2 表格属性表格属性2.5.3 建立框架建立框架2.5.4 框架属性框架属性.47表格标记有表格标记有、和和四个，四个，他们的具体含义是：他们的具体含义是：:定义表格定义表格,是表格必须的元素是表格必须的元素：定义标题单元格，在这个单元格中：定义标题单元格，在这个单元格中的文字将用粗体表示。的文字将用粗体表示。：定义表格中的行。：定义表格中的行。：定义单元格，使用：定义单元格，使用标记一定要标记一定要放在放在标记内部。标记内部。上述标记中，上述标记中，可以省略，其他三个是可以省略，其他三个是必须的。具体应用见例

31、必须的。具体应用见例2.12。标记中可以添加属性和参数，其中标记中可以添加属性和参数，其中border，用于设置表格的边框宽度，值为大于等于，用于设置表格的边框宽度，值为大于等于“0”的整数，当值为的整数，当值为“0”，在浏览器中显示无边框，在浏览器中显示无边框表格，无边框表格是网页布局最主要的手段。表格，无边框表格是网页布局最主要的手段。.48除了除了border外，常用的表格属性参数有：外，常用的表格属性参数有：定义单元格之间的距离，：定义单元格之间的距离，值为大于等于值为大于等于“0”的整数，单位是像素，的整数，单位是像素，“0”表示没有表示没有间距。间距。：定义单元格内的文字或：定义单

32、元格内的文字或其他元素到边框的距离其他元素到边框的距离,值为大于等于值为大于等于“0”的整数，单位的整数，单位是像素，是像素，“0”表示没有距离。表示没有距离。：定义表格的高度，值有两种单：定义表格的高度，值有两种单位，一是像素，表示表格高度为固定大小，一是百分比位，一是像素，表示表格高度为固定大小，一是百分比表示表格占据整个网页的高度百分比。表示表格占据整个网页的高度百分比。：定义表格的宽度，与高度一样：定义表格的宽度，与高度一样有像素和百分比两种单位。有像素和百分比两种单位。：定义表格边框的颜色。：定义表格边框的颜色。：定义表格的背景色：定义表格的背景色.491框架页的基本结构框架页的基本

33、结构：标记一个普通的：标记一个普通的HTML文档，用文档，用于在不支持框架的浏览器中显示。于在不支持框架的浏览器中显示。：用于定义分割窗口，可以设置窗口的分割方式及：用于定义分割窗口，可以设置窗口的分割方式及是否显示框架边框等。是否显示框架边框等。用于设置每个区域显示的内容，每个用于设置每个区域显示的内容，每个URL值指定一个事值指定一个事先己制作好的文件。先己制作好的文件。.502建立框架建立框架（1）建立纵向框架）建立纵向框架建立纵向框架的基本语法为：建立纵向框架的基本语法为：Cols：设置垂直分割窗口，用：设置垂直分割窗口，用“，”分隔，分隔，它的值可以是像素值或者是百分比，代表对应它的

34、值可以是像素值或者是百分比，代表对应的子窗体占屏幕窗口的大小。如要将屏幕分割的子窗体占屏幕窗口的大小。如要将屏幕分割成三个子窗口，其中两个都占整个窗口的成三个子窗口，其中两个都占整个窗口的30%，那么只给开始的两个窗口赋值。语句为那么只给开始的两个窗口赋值。语句为，*代表框架代表框架剩余的部分分给最后一个子窗口，当然也可以剩余的部分分给最后一个子窗口，当然也可以写成写成。.51（2）建立横框架）建立横框架建立横向框架的基本语法为：建立横向框架的基本语法为：rows：这个参数用来水平分割窗口，它的：这个参数用来水平分割窗口，它的值可以是数字或者是百分比，代表对应的子窗值可以是数字或者是百分比，代

35、表对应的子窗口的大小，使用方法与口的大小，使用方法与cols相同。相同。（3）嵌套框架）嵌套框架嵌套框架是在己有的框架中嵌入框架的结嵌套框架是在己有的框架中嵌入框架的结构，利用嵌套框架可以实现窗口的横向与纵向构，利用嵌套框架可以实现窗口的横向与纵向的混合分割。嵌套框架的设置见例的混合分割。嵌套框架的设置见例2.16.52常用的框架属性有以下几种：常用的框架属性有以下几种：1：设置框架的边：设置框架的边框。值为框。值为yes（或（或1）有边框或）有边框或no（或（或0）无边框。）无边框。2：设置各窗口之：设置各窗口之间的空白区域大小。值是以像素为单位的数值。间的空白区域大小。值是以像素为单位的数

36、值。3：设置边框的颜色。：设置边框的颜色。值可以是的英文或颜色代码。值可以是的英文或颜色代码。4：设置框架是否显示：设置框架是否显示滚动条。有三个值：滚动条。有三个值：yes表示有滚动条，表示有滚动条，no表示没有，表示没有，auto表示根据内容的多少浏览器自动设置。表示根据内容的多少浏览器自动设置。5：设置框架在浏览器中不：设置框架在浏览器中不能被调整。能被调整。.53HTML语言基础HTML概述图像编辑表格与框架建立超链接HTML简介HTML语法结构段落标记文本标记标题显示等级列表插入图像使用背景图像建立超链接标记新窗口和基准链接建立表格表格属性建立框架框架属性使用书签文本的编辑.54$知

37、识目标知识目标 88 能力目标能力目标.55 3.1 Dream weaver 8工作界面工作界面 3.2 规划与创建站点规划与创建站点 3.3 网页文件的基本操作网页文件的基本操作 本章小结本章小结.563.1.1 启动启动Dreamweaver83.1.2 Dreamweaver8操作界面操作界面.57单击单击“开始开始”按钮，在开始菜单中依次选择按钮，在开始菜单中依次选择“程程序序”“Macromedia”“Macromedia Dreamweaver8”，启动，启动Dreamweaver8程序。启动程序。启动Dreamweaver8后出现开始界面。后出现开始界面。.58在在Dreamw

38、eaver8的起始页中，单击的起始页中，单击“创建新项创建新项目目”下的下的“HTML”，打开，打开Dreamweaver8的工作界面。的工作界面。.59文档工具栏 面板组和文件面板.603.2.1 规划网站的整体结构规划网站的整体结构3.2.2 建立本地站点建立本地站点3.2.3 管理本地站点管理本地站点.61规划网站的结构要注意以下几个方面：规划网站的结构要注意以下几个方面：1文件及文件夹的命名要规范文件及文件夹的命名要规范2不要将所有文件存放在站点根目录下不要将所有文件存放在站点根目录下3建立子文件夹对文件进行分类存放建立子文件夹对文件进行分类存放4每个主栏目下都建立独立的每个主栏目下都

39、建立独立的Image目录目录5模板（模板（Library）和库）和库(Templates)文件夹一定文件夹一定要位于站点根目录之下并不能被更名，否则在使用模板要位于站点根目录之下并不能被更名，否则在使用模板和库就会出错。和库就会出错。.621在本地电脑硬盘上建立一个空的文件夹在本地电脑硬盘上建立一个空的文件夹2在在Dreamweaver8中建立站点的操作：中建立站点的操作：（1）单击菜单栏中）单击菜单栏中“站点站点”|“新建站点新建站点”命令，打开命令，打开“未命未命名站点名站点1的站点定义为的站点定义为”对话框。对话框。（2）在）在“您打算为您您打算为您的站点起什么名字？的站点起什么名字？”

40、对话对话框中输入站点的名称，如我框中输入站点的名称，如我们在此输入们在此输入“长春悠游网长春悠游网”。然后单击下一步。然后单击下一步。.63（3）在对话框中选择）在对话框中选择“否，我不想使用服务器技术否，我不想使用服务器技术”，单击，单击“下一下一步步”，打开对话框。，打开对话框。.64（4）选择）选择“编辑我的计算机上的本地副本，完成后再上传到服务编辑我的计算机上的本地副本，完成后再上传到服务（推荐）（推荐）（E）”选项。选项。（5）单击）单击“浏览浏览”按钮按钮，打开对话框，选择，打开对话框，选择D盘上创建的盘上创建的“myweb1”文件夹为站点本地根文件夹。文件夹为站点本地根文件夹。（

41、6）单击）单击“下一步下一步”打开对话框如下右图。打开对话框如下右图。.65（7）在）在“如何连接到远程服务器？如何连接到远程服务器？”选项的下拉列表中选择选项的下拉列表中选择“无无”，单击下一步，打开站点定义的单击下一步，打开站点定义的“总结总结”对话框如左图。对话框如左图。（8）单击）单击“完成完成”后，可以在后，可以在“文件文件”面板中看到所设置的站点，面板中看到所设置的站点，如右图所示。如右图所示。.66单击菜单栏中单击菜单栏中“站点站点”|“站点管理站点管理”命令命令,打开打开“站点管理站点管理”对对话框。话框。（一）复制站点（一）复制站点1在在“管理站点管理站点”对话框中，选择要复

42、制的站点，如选择对话框中，选择要复制的站点，如选择“依林小镇依林小镇”。2单击对话框中的单击对话框中的“复制复制”按钮，即可复制出按钮，即可复制出“依林小镇复依林小镇复制制”的站点。的站点。.67（二）删除站点（二）删除站点1在在“管理站点管理站点”对话框中，选择要删除的站点，如选择对话框中，选择要删除的站点，如选择“依林小镇依林小镇”。2单击对话框中的单击对话框中的“删除删除”按钮，弹出提示对话框，询问是按钮，弹出提示对话框，询问是否删除本地站点（如图所示），单击否删除本地站点（如图所示），单击“是是”，即可删除本地站点，即可删除本地站点“依林小镇依林小镇”。.68（三）编辑站点：编辑（三）

43、编辑站点：编辑站点是对己创建的本地站点站点是对己创建的本地站点进行修改和编辑。将进行修改和编辑。将“依林依林小镇复制小镇复制”站点的名称改为站点的名称改为“依林小镇依林小镇”为例的操作为：为例的操作为：1在在“管理站点管理站点”对话对话框中选择要编辑的站点框中选择要编辑的站点“依林小镇复制依林小镇复制”。2单击对话框中的单击对话框中的“编编辑辑”按钮，打开按钮，打开“依林小镇依林小镇复制的站点定义为对话框复制的站点定义为对话框”，单击高级选项卡。单击高级选项卡。3.在站点名称对话框中，在站点名称对话框中，将将“依林小镇复制依林小镇复制”改为改为“依林小镇依林小镇”，单击，单击“确定确定”按钮即

44、可。按钮即可。.693.3.1 新建网页新建网页3.3.2 保存网页保存网页3.3.3 关闭网页关闭网页3.3.4 打开网页打开网页3.3.5 预览网页预览网页.701执行以下操作之一：执行以下操作之一：单击菜单栏中单击菜单栏中“文件文件”|“新建新建”命令。命令。单击标准工具栏上的单击标准工具栏上的 按钮。按钮。2打开打开“新建文档新建文档”对话框。对话框。3选择选择“基本页基本页”选项中的选项中的“HTML”，单击，单击“创创建建”按钮，即可新建一个空白的文档。按钮，即可新建一个空白的文档。.711执行以下操作之一：执行以下操作之一：单击菜单栏中单击菜单栏中“文件文件”|“保存保存”命令命

45、令单击标准工具栏上的单击标准工具栏上的 按钮。按钮。2打开打开“另存为另存为”对话框。对话框。3在在“保存在保存在”选项中选择网页的保存位置。在选项中选择网页的保存位置。在“文件名文件名”文本框中的输入文件名。文本框中的输入文件名。4单击单击“保存保存”按钮，文件就保存到指定位置。按钮，文件就保存到指定位置。单击菜单栏中单击菜单栏中“文件文件”|“关闭关闭”或单击文档的窗口或单击文档的窗口右上角的右上角的“关闭关闭”即可。即可。.72打开己保存的网页有以下三种方法打开己保存的网页有以下三种方法、通过文件菜单打开己有的网页：、通过文件菜单打开己有的网页：（1）执行以下操作之一：）执行以下操作之一

46、：单击菜单栏中的单击菜单栏中的“文件文件”|“打开打开”命令。命令。或单击标准工具栏上的或单击标准工具栏上的。（2）打开）打开“打开打开”对话框。对话框。（3）在查找范围下拉列表中选择网页所在的文件夹）在查找范围下拉列表中选择网页所在的文件夹,选选择要打开的文件择要打开的文件,单击单击“打开打开”按钮按钮,即可打开了文件即可打开了文件2、在、在“文件文件”面板中打开网页文件面板中打开网页文件在在“文件文件”面板中面板中,双击要打开的文件双击要打开的文件,即可打开网页即可打开网页3、在资源管理器中打开网页文件、在资源管理器中打开网页文件在资源管理器中，右击要打开的网页文件，在弹出的快在资源管理器

47、中，右击要打开的网页文件，在弹出的快捷菜单中选择捷菜单中选择“在在Dreamweaver8”中编辑即可将文件在中编辑即可将文件在Dreamweaver8中打开。中打开。.73以在以在Iexplore中预览为例，执行以下操作之一：中预览为例，执行以下操作之一：单击菜单栏中单击菜单栏中“文件文件”|“在浏览器中预在浏览器中预览览”|“Iexplore 6.0”命令。命令。使用快捷键为使用快捷键为F12。在文档工具栏中单击，选择在浏览器中预览，如图在文档工具栏中单击，选择在浏览器中预览，如图所示。所示。.74Dream weaver基础Dream weaver 8工作界面规划与创建站点网页文件的基本

48、操作启动和退出Dream weaverDreamweaver8操作界面规划网站的整体结构建立本地站点管理本地站点关闭网页打开网页新建网页保存网页预览网页.75$知识目标知识目标 88 能力目标能力目标.76 4.1 在网页中插入文本在网页中插入文本 4.2 在网页插入图像在网页插入图像 4.3 插入其他网页元素插入其他网页元素 4.4 设置网页的页面属性设置网页的页面属性 4.5 设置超级链接设置超级链接 本讲小结本讲小结.774.1.1 插入文本插入文本4.1.2 设置文本格式设置文本格式4.1.3 段落格式的编辑段落格式的编辑4.1.4 设置列表设置列表4.1.5 简单的简单的CSS样式应

49、用样式应用.78（一）插入普通文本（一）插入普通文本:添加文本有以下三种方法：添加文本有以下三种方法：1直接在文档窗口中输入文本。直接在文档窗口中输入文本。2拷贝文本。拷贝文本。3从其他文档导入文本。从其他文档导入文本。（二）插入特殊字符（二）插入特殊字符1将光标定位在要插入特殊字符的位置。将光标定位在要插入特殊字符的位置。2在在“插入插入”栏的栏的“文本文本”类别中，选择要插入类别中，选择要插入的符号，如图。的符号，如图。.791选择要设置的文本。选择要设置的文本。2在在“属性检查器属性检查器”，设置文本格式。，设置文本格式。.80（一）应用己有的标题格式（一）应用己有的标题格式（二）自定义

50、设置段落格式（二）自定义设置段落格式1设置对齐方式设置对齐方式2设置段落缩进设置段落缩进.81列表包括项目列表和编号列表两种。创建项目列表列表包括项目列表和编号列表两种。创建项目列表或编号列表的操作为：或编号列表的操作为：1.选择要创建列表的文本。选择要创建列表的文本。2.在在“属性检查器属性检查器”中单击中单击 按钮，可以创建项目按钮，可以创建项目列表；单击列表；单击 按钮，可以创建编号列表。按钮，可以创建编号列表。3.单击单击“属性检查器属性检查器”中的中的 按钮，以弹出按钮，以弹出的的“列表属性列表属性”对话框中可以重新设置列表的属性。对话框中可以重新设置列表的属性。.82 CSS是是C