1、 第第1 1章章 网页设计概述网页设计概述 第第2 2章章 HTMLHTML语言基础语言基础 第第3 3章章 Dream weaverDream weaver基础基础 第第4 4章章 网页中的基础元素网页中的基础元素 第第5 5章章 网页页面布局网页页面布局 第第6 6章章 网页中的层和时间轴网页中的层和时间轴 第第7 7章章 表单的应用表单的应用 第第8 8章章 在网页中使用行为在网页中使用行为 第第9 9章章 CSSCSS样式使用样式使用 第第1010章章 网页中的多媒体应用网页中的多媒体应用 第第1111章章 模板和库模板和库 第第1212章章 站点测试和发布站点测试和发布 第第1313
2、章章 Flash 8Flash 8简介简介 第第1414章章 Fireworks8Fireworks8简介简介 第第1章章 网页设计概述网页设计概述 $ 知识目标知识目标 掌握网页、网站及主页的概念 了解网页中的主要元素 了解各种网页制作工具 88 能力目标能力目标 各种网页制作工具的配合使用 网站的整体规划 网站的设计流程 1.1 网页和网站网页和网站 1.2 网页中的主要元素网页中的主要元素 1.3 网页制作工具网页制作工具 1.4 网页设计的基本流程网页设计的基本流程 本章小结本章小结 第第1章章 网页设计概述网页设计概述 1.1 网页和网站网页和网站 1.1.1 网页网页 1.1.2
3、网站网站 1.1.3 网页的基本功能网页的基本功能 1网页网页 网页（网页（WEB）：是用）：是用html语言编写的，通语言编写的，通 过过www网传输，并被网传输，并被web浏览器翻译成可以显浏览器翻译成可以显 示出来的集合文本、图片、声音和动画等信息示出来的集合文本、图片、声音和动画等信息 元素的页面文件（元素的页面文件（网页示例网页示例）。）。 2网页的类型网页的类型 根据页面内容可以分首页、主页、专栏网根据页面内容可以分首页、主页、专栏网 页、内容网页和功能网页等类型；按制作技术页、内容网页和功能网页等类型；按制作技术 分为静态网页与动态网页。分为静态网页与动态网页。 1.1.1 1.
4、1.1 网页网页 1.1 网页和网站网页和网站 网站就是把一些网页等信息文件通过超链网站就是把一些网页等信息文件通过超链 接的形式关联起来形成的信息文件的集合。信接的形式关联起来形成的信息文件的集合。信 息可以是网页形式也可以是其他的文档形式。息可以是网页形式也可以是其他的文档形式。 网页与网站的区别与联系：网页与网站的区别与联系： 网站是一个文件夹，其中的文件不仅是网网站是一个文件夹，其中的文件不仅是网 页还有网站所需的其他文件或文件夹。网页是页还有网站所需的其他文件或文件夹。网页是 一个页面文件，用来发布各种信息。网页是网一个页面文件，用来发布各种信息。网页是网 站的构成要素，是网站信息发
5、布与表现的一种站的构成要素，是网站信息发布与表现的一种 主要形式；网站是网页通过超链接形成的集合。主要形式；网站是网页通过超链接形成的集合。 1.1.2 1.1.2 网站网站 1.1 网页和网站网页和网站 1、媒介的作用。使用者与信息之间的媒介。、媒介的作用。使用者与信息之间的媒介。 一方面是发布者，功能是发布信息；另一方面一方面是发布者，功能是发布信息；另一方面 是浏览者，功能是提供浏览的信息，通过浏览是浏览者，功能是提供浏览的信息，通过浏览 网页找寻需要的信息。网页找寻需要的信息。 2、互动的作用。浏览者与网页制作单位之、互动的作用。浏览者与网页制作单位之 间互动的窗口，可以单向或双向传递
6、信息。间互动的窗口，可以单向或双向传递信息。 3、传输的作用。作为传输各种电子文件或、传输的作用。作为传输各种电子文件或 信息之用，如下载说明书、更新文件、驱动程信息之用，如下载说明书、更新文件、驱动程 序等。序等。 1.1.3 1.1.3 网页的基本功能网页的基本功能 1.1 网页和网站网页和网站 1.2 网页中的主要元素网页中的主要元素 1.2.1 文本文本 1.2.2 图像图像 1.2.3 链接标志链接标志 1.2.4 其他的基本要素其他的基本要素 网页的基本要素一般包括：文字、图像、网页的基本要素一般包括：文字、图像、 动画和链接标志等，除此之外，网页的元素还动画和链接标志等，除此之外
7、，网页的元素还 包声音、多媒体和视频等。包声音、多媒体和视频等。 是网页中最基本的元素。网页中文字的设是网页中最基本的元素。网页中文字的设 计一般从以下几个方面来考虑：计一般从以下几个方面来考虑： 1字体的选择。字体的选择。 2字号、行距的选择。字号、行距的选择。 3特殊字体的使用。特殊字体的使用。 4字体的颜色。字体的颜色。 1.2.11.2.1文本文本 1.2 网页中的主要元素网页中的主要元素 现在网络上使用的绝大多数图片和图像是现在网络上使用的绝大多数图片和图像是 gif、jpeg和和png文件格式。文件格式。 网页上使用图像要注意的问题：网页上使用图像要注意的问题： JPEG格式适合于
8、照片图像，格式适合于照片图像，GIF格式适合格式适合 于包含纯色的图像，例如插图和线条图。于包含纯色的图像，例如插图和线条图。 利用图像编辑软件来放大或缩小图像利用图像编辑软件来放大或缩小图像 屏幕显示图像的分辨率一般为屏幕显示图像的分辨率一般为72dpi。制。制 作图像时，不必使用比此再高的分辨率。作图像时，不必使用比此再高的分辨率。 1.2.21.2.2图像图像 1.2 网页中的主要元素网页中的主要元素 如果建立的图像中只有黑色和白色，处理如果建立的图像中只有黑色和白色，处理 时可将它保存为黑白图像格式，这样可以减少时可将它保存为黑白图像格式，这样可以减少 图像文件的大小。图像文件的大小。
9、 如果设计的如果设计的GIF格式图像包含了渐变和直格式图像包含了渐变和直 线，应尽量使得它们水平，因为线，应尽量使得它们水平，因为GIF格以每条水格以每条水 平线为基础来压缩。平线为基础来压缩。 尝试各种不同的尝试各种不同的JPEG压缩率压缩率 使用合适的色彩模式。使用合适的色彩模式。 慎用动画。慎用动画。 1.2.21.2.2图像图像 1.2 网页中的主要元素网页中的主要元素 链接也叫超链接（链接也叫超链接（Hyperlink），是从一个），是从一个 网页指向另一个目的端的链接，是页面间的链网页指向另一个目的端的链接，是页面间的链 接关系。接关系。 链接标志（载体）指的是网页中特殊的文链接标
10、志（载体）指的是网页中特殊的文 本或图像，它们常常用不同的颜色和下划线来本或图像，它们常常用不同的颜色和下划线来 标识，在浏览器中，访问者可以用鼠标单击它标识，在浏览器中，访问者可以用鼠标单击它 们，能够从当前的网页转到链接的目的端位置。们，能够从当前的网页转到链接的目的端位置。 超链接的标志一般有：文本、图像、热区超链接的标志一般有：文本、图像、热区 三种。要注意的是，所有超链接标志均应清晰三种。要注意的是，所有超链接标志均应清晰 无误地向浏览者标识出来，让人一看就知道。无误地向浏览者标识出来，让人一看就知道。 1.2.31.2.3链接标志链接标志 1.2 网页中的主要元素网页中的主要元素
11、除上述几种要素之外，在网页上经常使用除上述几种要素之外，在网页上经常使用 的还有动画、视频、声音等各种信息的形式。的还有动画、视频、声音等各种信息的形式。 1动画。目前网络上常用的动画类型有动画。目前网络上常用的动画类型有gif 和和Flash动画两种。动画两种。 2视频。是多媒体网页的一个重要组成部视频。是多媒体网页的一个重要组成部 分，常用的视频格式有分，常用的视频格式有avi、mpeg和和mov等，等， 视频会大大增加网页的文件量，从而使用访问视频会大大增加网页的文件量，从而使用访问 速度受到影响，因此要慎用。速度受到影响，因此要慎用。 3音频。在网页中插入音频会增加网页的音频。在网页中
12、插入音频会增加网页的 生动性。常用的音频格式有生动性。常用的音频格式有rm(ram)、midi、 wav和和mp3等格式。音频文件和视频文件一样等格式。音频文件和视频文件一样 都会增加网页的文件量，因此要慎用。都会增加网页的文件量，因此要慎用。 1.2.41.2.4其他的基本要素其他的基本要素 1.2 网页中的主要元素网页中的主要元素 1.3 网页制作工具网页制作工具 1.3.1 网页编辑工具网页编辑工具 1超文本标识语言（超文本标识语言（HTML） 2FrontPage简介简介 3Dreamweaver 1.3.2 网页图像编辑工具网页图像编辑工具 1.3.3 动态网页技术动态网页技术 1P
13、hotoshop。是。是Adobe公司开发的，是公司开发的，是 当今最流行的图形图象处理软件之一，它能够实当今最流行的图形图象处理软件之一，它能够实 现各种专业化的图像制作、处理及合成。现各种专业化的图像制作、处理及合成。 2Fireworks。是由。是由Macromedia公司开发公司开发 的图形处理工具，它是第一个专门为制作网页图的图形处理工具，它是第一个专门为制作网页图 形而设计的软件，同时也提供专业的网页图形设形而设计的软件，同时也提供专业的网页图形设 计及制作的解决方案。计及制作的解决方案。 3.Flash。Macromedia公司出品的公司出品的Flash是是 目前非常流行的一种交
14、互式目前非常流行的一种交互式Web矢量动画软件。矢量动画软件。 Dreamweaver和和Flash、Fireworks三个软三个软 件被称为“网页三剑客”，是现在公认的比较标件被称为“网页三剑客”，是现在公认的比较标 准的网页制作利器。准的网页制作利器。 1.3.2 1.3.2 网页图像编辑工具网页图像编辑工具 1.3 网页制作工具网页制作工具 动态网页可以实现网页浏览者和网页设计动态网页可以实现网页浏览者和网页设计 者的交互，实现交互技术有两种：一种是客户者的交互，实现交互技术有两种：一种是客户 端技术如常用的端技术如常用的JavaScript和和VBScript；另一；另一 种是服务器端
15、技术如目前常用的种是服务器端技术如目前常用的ASP和和PHP。 1ASP(Active Server Pages) 2PHP(Hypertext Preprocessor) 3JSP(Java Server Pages) 1.3.31.3.3动态网页技术动态网页技术 1.3 网页制作工具网页制作工具 1.4 网页设计的基本流程网页设计的基本流程 1.4.1 网站的设计流程网站的设计流程 1.4.2 网页的设计与制作网页的设计与制作 1.4.3 网页的测试网页的测试 1.4.4 网页上传和发布网页上传和发布 1确定网站的主题确定网站的主题 2规划网站的整体结构规划网站的整体结构 3收集整合网页素
16、材收集整合网页素材 4确定网页版面布局。确定网页版面布局。 5制作网页。制作网页。 6添加网页特效。添加网页特效。 7测试和发布网站。测试和发布网站。 1.4.1 1.4.1 网站的设计流程网站的设计流程 1.4 网页设计的基本流程网页设计的基本流程 1确定网页的版面布局确定网页的版面布局 （1）平衡性。（）平衡性。（2）对称性。（）对称性。（3）对比性。）对比性。 （4）疏密度。（）疏密度。（5）比例。（）比例。（6）韵律感。）韵律感。 网页的排版布局是决定网站美观与否的一网页的排版布局是决定网站美观与否的一 个重要方面个重要方面,通过合理的、有创意布局通过合理的、有创意布局,才可以把才可以
17、把 文字、图像等内容完美地展现在浏览者前面。文字、图像等内容完美地展现在浏览者前面。 2网页设计与制作网页设计与制作 网页设计与制作一般分为静态网页制作和网页设计与制作一般分为静态网页制作和 动态网页制作两类。动态网页制作两类。 1.4.2 1.4.2 网页的设计与制作网页的设计与制作 1.4 网页设计的基本流程网页设计的基本流程 1浏览器兼容性测试。目前浏览器有：浏览器兼容性测试。目前浏览器有： Internet Explorer与与Netscape两大主流浏览器，二两大主流浏览器，二 者对者对HTML和和CSS等语法的支持度是不同的。在等语法的支持度是不同的。在 Dreamweaver中提
18、供了可以检查网页中是否含有某版本中提供了可以检查网页中是否含有某版本 浏览器不能识别的语法功能，设计者可以借助其进行检浏览器不能识别的语法功能，设计者可以借助其进行检 查。查。 2平台的兼容性测试。设计要为用户着想，必须最平台的兼容性测试。设计要为用户着想，必须最 少在一台少在一台PC和一台和一台Mac机上测试你的网站网页，看看兼机上测试你的网站网页，看看兼 容性如何；容性如何； 3超链接完好性测试。超链接是连接网页之间、网超链接完好性测试。超链接是连接网页之间、网 站之间的桥梁，浏览者是不愿意访问一个经常出现“找站之间的桥梁，浏览者是不愿意访问一个经常出现“找 不到网页”的问题的网站，作为设
19、计者必须检测超链接不到网页”的问题的网站，作为设计者必须检测超链接 的完好性，保证链接的有效性，不要留下太多的坏链接。的完好性，保证链接的有效性，不要留下太多的坏链接。 1.4.31.4.3网页的测试网页的测试 1.4 网页设计的基本流程网页设计的基本流程 网页设计好，必须把它发布到互联网上，网页设计好，必须把它发布到互联网上， 否则网站形象仍然不能展现出去。发布的服务否则网站形象仍然不能展现出去。发布的服务 器可以是远程，也可以是本地。如果是发布到器可以是远程，也可以是本地。如果是发布到 互联网上，要先申请域名和主页空间，然后再互联网上，要先申请域名和主页空间，然后再 利用专用软件（如：利用
20、专用软件（如：CuteFTP）上传，）上传，FTP有有 很多种软件，最著名的是很多种软件，最著名的是 CuteFTP 和和 LeapFTP，也可以用，也可以用Dreamweaver内置的内置的FTP 上传。上传。 1.4.41.4.4网页上传和发布网页上传和发布 1.4 网页设计的基本流程网页设计的基本流程 本章小结 第第1章章 网页设计概述网页设计概述 网 页 设 计 概 述 网页和网站 网页中的主要元素 网页设计的基本流程 网页制作工具 网页 网站 网页的基本功能 文本 图像 链接标志 其他的基本要素 网页编辑工具 网页图像编辑工具 网站的设计流程 网页的设计与制作 网页的测试 网页上传和
21、发布 常见的各种网页制作工具 动态网页技术 $ 知识目标知识目标 了解HTML文件的基本结构 掌握HTML中文本的编辑及图像的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中表格和框架的基本语法 88 能力目标能力目标 掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 能够编写简单的HTML网页 掌握HTML文件中表格和框架的使用 第第2章章 HTML语言基础语言基础 2.1 HTML概述概述 2.2 文本的编辑文本的编辑 2.3 图像编辑图像编辑 2.4 建立超链接建立超链接 2.5 表格与框架表格与框架 本章小结本章小结 第第2章章 HTML语言基础语言基础 2.1 HT
22、ML概述概述 2.1.1 HTML简介简介 2.1.2 HTML语法结构语法结构 HTML（Hyper Text Markup Language） 又称超文本标识语言，是一种标识性的语言，又称超文本标识语言，是一种标识性的语言， 是网页设计的最初语言。文件的扩展名是网页设计的最初语言。文件的扩展名:“html” 或“或“htm”。 例2.1 简单的HTML文档 .长春欢迎您！ 这里是长春悠游网，我们带您畅游长春！ 由“由“”组成的就是标记。在组成的就是标记。在HTML 语言中标记分“单标记”和“围堵标记”。语言中标记分“单标记”和“围堵标记”。 2.1.1 HTML2.1.1 HTML简介简介
23、 2.1 HTML概述概述 1围堵标记围堵标记 格式：格式： 2单标记单标记 格式：格式： 只有起始标记，没有结束标记。最常用的只有起始标记，没有结束标记。最常用的 单标记是单标记是, 它表示段内换行。它表示段内换行。 3标记属性标记属性 格式：格式： 各属性间无前后顺序，属性也可省略，当各属性间无前后顺序，属性也可省略，当 省略属性时取标记的默认值。省略属性时取标记的默认值。 2.1.1 HTML2.1.1 HTML简介简介 2.1 HTML概述概述 HTML文档的基本结构：文档的基本结构： 文件开始 标头区开始 .标题区 标头区结束 文件主体内容开始 文件主体内容 文件主体内容结束 文件结
24、束 其中其中之间表示这是个网页之间表示这是个网页 文件，是必有的标记。文件，是必有的标记。 2.1.2 HTML2.1.2 HTML语法结构语法结构 2.1 HTML概述概述 2.2 文本的编辑文本的编辑 2.2.1 段落标记段落标记 2.2.2 文本标记文本标记 2.2.3 标题显示等级标题显示等级 2.2.4 列表列表 1段落（段落（） 基本语法格式为：基本语法格式为： 其中参数其中参数align用于设定段落的位置是靠左、用于设定段落的位置是靠左、 靠右还是居中。默认值是靠左；除靠右还是居中。默认值是靠左；除align之外之外 还有其他参数如还有其他参数如class。class参数是可选项
25、，参数是可选项， 如果没有将按照默认值显示。如果没有将按照默认值显示。 2换行换行 单标记，放在一行的末尾，可以在一个段单标记，放在一行的末尾，可以在一个段 落内实现文本的强制换行，设置标记后面的文落内实现文本的强制换行，设置标记后面的文 本字、图像和表格等内容显示于下一行。本字、图像和表格等内容显示于下一行。 2.2.1 2.2.1 段落标记段落标记 2.2 文本的编辑文本的编辑 1字体标记字体标记 其基本语法格式为：其基本语法格式为： Size：设置字体的显示字号，范围是从“：设置字体的显示字号，范围是从“1 7”，其中“，其中“3”是默认值。是默认值。 Color：设置文本的颜色，值可以
26、是颜色名：设置文本的颜色，值可以是颜色名 （英文如（英文如red代表红色）或颜色的十六进制代码代表红色）或颜色的十六进制代码 （#000000代表黑色，代表黑色，#FFFFFF代表白色）。代表白色）。 Face：设置文本显示的字体，值为字体的名称。：设置文本显示的字体，值为字体的名称。 在文本的标记中还有很多常用的标记，比如表在文本的标记中还有很多常用的标记，比如表 示字体效果的，示字体效果的，(黑体黑体)，（斜体），（斜体）， （加下划线）。（加下划线）。 2.2.2 2.2.2 文本标记文本标记 2.2 文本的编辑文本的编辑 2特殊字符特殊字符 HTML中除了我们上面学的的一些标记外，中除
27、了我们上面学的的一些标记外， 还有一些我们常用的特殊字符比如“还有一些我们常用的特殊字符比如“”，这些，这些 特殊字符在特殊字符在HTML语言中都有对的转义符，常用语言中都有对的转义符，常用 的转义符与特殊字符参见下表：的转义符与特殊字符参见下表： 2.2.2 2.2.2 文本标记文本标记 2.2 文本的编辑文本的编辑 HTML 代码 显示结果 说明 大于号或显示标记 “ 引号 注册 版权 商标 不断行的空格 3水平线标记水平线标记 水平线是在网页上划出一条水平的分割线，用水平线是在网页上划出一条水平的分割线，用 来标记水平线。语法格式为：来标记水平线。语法格式为： Size：设置水平线的高度
28、，以像素为单位。：设置水平线的高度，以像素为单位。 Color：设置水平线的颜色。：设置水平线的颜色。 Width：设置水平线的宽度，单位是像素或百：设置水平线的宽度，单位是像素或百 分比，像素是绝对大小，不会随着程序窗口的大小分比，像素是绝对大小，不会随着程序窗口的大小 而改，百分比是相对于程序窗口水平线所占的比例，而改，百分比是相对于程序窗口水平线所占的比例， 会随着程序窗口的大小而改变。会随着程序窗口的大小而改变。 Align：设置水平线的对齐方式。对齐方式有：设置水平线的对齐方式。对齐方式有 左对齐，居中，右对齐三种。左对齐，居中，右对齐三种。 2.2.2 2.2.2 文本标记文本标记
29、 2.2 文本的编辑文本的编辑 语法格式为：语法格式为： n：表示不同级别的标题，：表示不同级别的标题，n值可以是值可以是1-6中中 的任意数字，其中的任意数字，其中1表示的标题字体最大。另外，表示的标题字体最大。另外， 可以用可以用align属性设置对齐方式，常用的有左对属性设置对齐方式，常用的有左对 齐，居中，右对齐三种对齐方式。齐，居中，右对齐三种对齐方式。 2.2.3 2.2.3 标题显示等级标题显示等级 2.2 文本的编辑文本的编辑 在在HTML中，列表常用的有“有序列表”和中，列表常用的有“有序列表”和 “无序列表”。“无序列表”。 1有序列表有序列表 基本语法结构为：基本语法结构
30、为： 项目1 项目2 项目n 2.2.4 2.2.4 列表列表 2.2 文本的编辑文本的编辑 1有序列表有序列表 Type：设置列表的序号类型，常用序号如下：设置列表的序号类型，常用序号如下： n=1：用数字作为序号。：用数字作为序号。 n=A；用大写字母作为序号。；用大写字母作为序号。 n=a：用小写字母作为序号。：用小写字母作为序号。 n=I：用大写罗马数字作为序号。：用大写罗马数字作为序号。 n=i：用小写罗马数字作为序号。：用小写罗马数字作为序号。 Start：为可选参数，用于设置序号的起始数值。：为可选参数，用于设置序号的起始数值。 如不添加“如不添加“start”则从每类序号的第一
31、个序号开始。则从每类序号的第一个序号开始。 2.2.4 2.2.4 列表列表 2.2 文本的编辑文本的编辑 2无序列表无序列表 基本语法结构为：基本语法结构为： 项目1 项目2 项目n Type:设置符号形状，有实心圆、小正方形、设置符号形状，有实心圆、小正方形、 空心圆三种，具体如下：空心圆三种，具体如下： n=disk：符号为实心圆。：符号为实心圆。 n=square：符号为正方形。：符号为正方形。 n=circle：符号为空心圆。：符号为空心圆。 2.2.4 2.2.4 列表列表 2.2 文本的编辑文本的编辑 2.3 图像编辑图像编辑 2.3.1 插入图像插入图像 2.3.2 使用背景图
32、像使用背景图像 我们在网页上经常会浏览图像，适当使我们在网页上经常会浏览图像，适当使 用图像可以增加网页的美观。在网页最常用用图像可以增加网页的美观。在网页最常用 到的是插入图像和设置背景图像。到的是插入图像和设置背景图像。 1语法格式：语法格式： ，单标记单标记 Src：指明要添加的图像所在的具体路径和：指明要添加的图像所在的具体路径和 文件名。路径可以是相对路径，也可以是绝对文件名。路径可以是相对路径，也可以是绝对 路径。例：路径。例：。 绝对路径：完整的描述文件位置的路径就绝对路径：完整的描述文件位置的路径就 是绝对路径。对于绝对路径可以不需要知道其是绝对路径。对于绝对路径可以不需要知道
33、其 他任何信息就可以判断出文件的位置。他任何信息就可以判断出文件的位置。 相对路径：所谓相对路径相对路径：所谓相对路径,顾名思义就是当顾名思义就是当 前文档与目标的相对位置。例前文档与目标的相对位置。例. 2.3.12.3.1插入图像插入图像 2.3 图像编辑图像编辑 2图像的属性图像的属性 除了“除了“src”以外，以外，还有其他属性，还有其他属性， 可以定义图像的对齐方向，与周围元素的距离可以定义图像的对齐方向，与周围元素的距离 等，各属性及作用见表等，各属性及作用见表2.2。 表表2.2 图像属性列表图像属性列表 2.3.12.3.1插入图像插入图像 2.3 图像编辑图像编辑 名称 作用
34、 border 设定图像的边框 vspace 设定图像、文字与图像上下之间的间隔 hspace 设定图像、文字与图像左右之间的间隔 width 调整图像的宽度 height 调整图像的高度 alt 当浏览器无法显示图像时，会显示出alt属性所设定的文字 语法格式为：语法格式为： 2.3.2 2.3.2 使用背景图像使用背景图像 2.3 图像编辑图像编辑 2.4 建立超链接建立超链接 2.4.1 建立超链接建立超链接 2.4.2 使用书签使用书签 2.4.3 标记新窗口和基准链接标记新窗口和基准链接 建立超链接的标记是建立超链接的标记是，语法格式为：，语法格式为： 超链接标识超链接标识 url：
35、指明链接目标的具体路径和文件名。：指明链接目标的具体路径和文件名。 超链接标识：是网页中链接的载体，可以超链接标识：是网页中链接的载体，可以 是文字或图像等页面元素，用户点击它就会跳是文字或图像等页面元素，用户点击它就会跳 到超链接的目标位置。到超链接的目标位置。 2.4.1 2.4.1 建立超链接建立超链接 2.4 建立超链接建立超链接 定义书签定义书签 在在HTML中，首先要定义书签，然后才在链中，首先要定义书签，然后才在链 接使用。定义书签的语法格式为：接使用。定义书签的语法格式为： 书签名不能用中文，只能用英文和数字。书签名不能用中文，只能用英文和数字。 使用书签链接使用书签链接 其链
36、接的格式为：其链接的格式为： 超链接标识 #与书签名之间不能有空格。与书签名之间不能有空格。 2.4.22.4.2使用书签使用书签 2.4 建立超链接建立超链接 1标记新窗口（标记新窗口（target） “target=”_blank”，是链接标记的一个，是链接标记的一个 参数。语法格式为：参数。语法格式为： 超链接标识 当点击链接载体的，就会在新窗口打开链当点击链接载体的，就会在新窗口打开链 接目标。接目标。 2基准链接基准链接 标记是单标记，禁止使用结束标记，标记是单标记，禁止使用结束标记， 可以改变文件中所有链接标记的参数默认值。可以改变文件中所有链接标记的参数默认值。 它只能位于文件的
37、开头部分，即标记它只能位于文件的开头部分，即标记 与与 之间。语法格式为：之间。语法格式为： 2.4.3 2.4.3 标记新窗口和基准链接标记新窗口和基准链接 2.4 建立超链接建立超链接 2.5 表格与框架表格与框架 2.5.1 建立表格建立表格 2.5.2 表格属性表格属性 2.5.3 建立框架建立框架 2.5.4 框架属性框架属性 表格标记有表格标记有、和和四个，四个， 他们的具体含义是：他们的具体含义是： :定义表格定义表格,是表格必须的元素是表格必须的元素 ：定义标题单元格，在这个单元格中：定义标题单元格，在这个单元格中 的文字将用粗体表示。的文字将用粗体表示。 ：定义表格中的行。：
38、定义表格中的行。 ：定义单元格，使用：定义单元格，使用标记一定要标记一定要 放在放在标记内部。标记内部。 上述标记中，上述标记中，可以省略，其他三个是可以省略，其他三个是 必须的。具体应用见例必须的。具体应用见例2.12。 标记中可以添加属性和参数，其中标记中可以添加属性和参数，其中 border，用于设置表格的边框宽度，值为大于等于，用于设置表格的边框宽度，值为大于等于 “0”的整数，当值为“的整数，当值为“0”，在浏览器中显示无边框，在浏览器中显示无边框 表格，无边框表格是网页布局最主要的手段。表格，无边框表格是网页布局最主要的手段。 2.5.1 2.5.1 建立表格建立表格 2.5 表格
39、与框架表格与框架 除了除了border外，常用的表格属性参数有：外，常用的表格属性参数有： ：定义单元格之间的距离，：定义单元格之间的距离， 值为大于等于“值为大于等于“0”的整数，单位是像素，“的整数，单位是像素，“0”表示没有表示没有 间距。间距。 ：定义单元格内的文字或：定义单元格内的文字或 其他元素到边框的距离其他元素到边框的距离,值为大于等于“值为大于等于“0”的整数，单位的整数，单位 是像素，“是像素，“0”表示没有距离。表示没有距离。 ：定义表格的高度，值有两种单：定义表格的高度，值有两种单 位，一是像素，表示表格高度为固定大小，一是百分比位，一是像素，表示表格高度为固定大小，一
40、是百分比 表示表格占据整个网页的高度百分比。表示表格占据整个网页的高度百分比。 ：定义表格的宽度，与高度一样：定义表格的宽度，与高度一样 有像素和百分比两种单位。有像素和百分比两种单位。 ：定义表格边框的颜色。：定义表格边框的颜色。 ：定义表格的背景色：定义表格的背景色 2.5.2 2.5.2 表格属性表格属性 2.5 表格与框架表格与框架 1框架页的基本结构框架页的基本结构 ：标记一个普通的：标记一个普通的HTML文档，用文档，用 于在不支持框架的浏览器中显示。于在不支持框架的浏览器中显示。 ：用于定义分割窗口，可以设置窗口的分割方式及：用于定义分割窗口，可以设置窗口的分割方式及 是否显示框
41、架边框等。是否显示框架边框等。 用于设置每个区域显示的内容，每个用于设置每个区域显示的内容，每个URL值指定一个事值指定一个事 先己制作好的文件。先己制作好的文件。 2.5.3 2.5.3 建立框架建立框架 2.5 表格与框架表格与框架 2建立框架建立框架 （1）建立纵向框架）建立纵向框架 建立纵向框架的基本语法为：建立纵向框架的基本语法为： Cols：设置垂直分割窗口，用“，”分隔，：设置垂直分割窗口，用“，”分隔， 它的值可以是像素值或者是百分比，代表对应它的值可以是像素值或者是百分比，代表对应 的子窗体占屏幕窗口的大小。如要将屏幕分割的子窗体占屏幕窗口的大小。如要将屏幕分割 成三个子窗口
42、，其中两个都占整个窗口的成三个子窗口，其中两个都占整个窗口的30%， 那么只给开始的两个窗口赋值。语句为那么只给开始的两个窗口赋值。语句为 ，*代表框架代表框架 剩余的部分分给最后一个子窗口，当然也可以剩余的部分分给最后一个子窗口，当然也可以 写成写成。 2.5.3 2.5.3 建立框架建立框架 2.5 表格与框架表格与框架 （2）建立横框架）建立横框架 建立横向框架的基本语法为：建立横向框架的基本语法为： rows：这个参数用来水平分割窗口，它的：这个参数用来水平分割窗口，它的 值可以是数字或者是百分比，代表对应的子窗值可以是数字或者是百分比，代表对应的子窗 口的大小，使用方法与口的大小，使
43、用方法与cols相同。相同。 （3）嵌套框架）嵌套框架 嵌套框架是在己有的框架中嵌入框架的结嵌套框架是在己有的框架中嵌入框架的结 构，利用嵌套框架可以实现窗口的横向与纵向构，利用嵌套框架可以实现窗口的横向与纵向 的混合分割。嵌套框架的设置见例的混合分割。嵌套框架的设置见例2.16. 2.5.3 2.5.3 建立框架建立框架 2.5 表格与框架表格与框架 常用的框架属性有以下几种：常用的框架属性有以下几种： 1：设置框架的边：设置框架的边 框。值为框。值为yes（或（或1）有边框或）有边框或no（或（或0）无边框。）无边框。 2：设置各窗口之：设置各窗口之 间的空白区域大小。值是以像素为单位的数
44、值。间的空白区域大小。值是以像素为单位的数值。 3：设置边框的颜色。：设置边框的颜色。 值可以是的英文或颜色代码。值可以是的英文或颜色代码。 4：设置框架是否显示：设置框架是否显示 滚动条。有三个值：滚动条。有三个值：yes表示有滚动条，表示有滚动条，no表示没有，表示没有， auto表示根据内容的多少浏览器自动设置。表示根据内容的多少浏览器自动设置。 5：设置框架在浏览器中不：设置框架在浏览器中不 能被调整。能被调整。 2.5.4 2.5.4 框架属性框架属性 2.5 表格与框架表格与框架 本章小结 第第2章章 HTML语言基础语言基础 HTML 语 言 基 础 HTML概述 图像编辑 表格
45、与框架 建立超链接 HTML简介 HTML语法结构 段落标记 文本标记 标题显示等级 列表 插入图像 使用背景图像 建立超链接 标记新窗口和基准链接 建立表格 表格属性 建立框架 框架属性 使用书签 文本的编辑 $ 知识目标知识目标 认识Dreamweaver8操作界面 掌握如何规划站点的结构 掌握网页文件的基本操作 88 能力目标能力目标 熟悉工作界面和使用各种面板 能够建立和管理本地站点 熟练网页文件的基本操作 第第3章章 Dream weaver基础基础 3.1 Dream weaver 8工作界面工作界面 3.2 规划与创建站点规划与创建站点 3.3 网页文件的基本操作网页文件的基本操
46、作 本章小结本章小结 第第3章章 Dream weaver基础基础 3.1 Dream weaver 8工作界面工作界面 3.1.1 启动启动Dreamweaver8 3.1.2 Dreamweaver8操作界面操作界面 单击“开始”按钮，在开始菜单中依次选择“程单击“开始”按钮，在开始菜单中依次选择“程 序”序”“Macromedia”“Macromedia Dreamweaver8”，启动，启动Dreamweaver8程序。启动程序。启动 Dreamweaver8后出现开始界面。后出现开始界面。 3.1.1 3.1.1 启动和退出启动和退出Dreamweaver8Dreamweaver8
47、3.1 Dream weaver 8工作界面工作界面 在在Dreamweaver8的起始页中，单击“创建新项的起始页中，单击“创建新项 目”下的“目”下的“HTML”，打开”，打开Dreamweaver8的工作界面。的工作界面。 3.1.2 Dreamweaver83.1.2 Dreamweaver8操作界面操作界面 3.1 Dream weaver 8工作界面工作界面 3.1.2 Dreamweaver83.1.2 Dreamweaver8操作界面操作界面 3.1 Dream weaver 8工作界面工作界面 文档工具栏 面 板 组 和 文 件 面 板 3.2 规划与创建站点规划与创建站点
48、3.2.1 规划网站的整体结构规划网站的整体结构 3.2.2 建立本地站点建立本地站点 3.2.3 管理本地站点管理本地站点 规划网站的结构要注意以下几个方面：规划网站的结构要注意以下几个方面： 1文件及文件夹的命名要规范文件及文件夹的命名要规范 2不要将所有文件存放在站点根目录下不要将所有文件存放在站点根目录下 3建立子文件夹对文件进行分类存放建立子文件夹对文件进行分类存放 4每个主栏目下都建立独立的每个主栏目下都建立独立的Image目录目录 5模板（模板（Library）和库）和库(Templates)文件夹一定文件夹一定 要位于站点根目录之下并不能被更名，否则在使用模板要位于站点根目录之下并不能被更名，否则在使用模板 和库就会出错。和库就会出错。 3.2.1 3.2.1 规划网站的整体结构规划网站的整体结构 3.2 规划与创建站点规划与创建站点 1在本地电脑硬盘上建立一个空的文件夹在本地电脑硬盘上建立一个空的文件夹 2在在Dreamweaver8中建立站点的操作：中建立站点的操作： （1）单击菜单栏中“站点”）单击菜单栏中“站点
