网站建设与网页制作课程PPT.ppt

《网站建设与网页制作课程PPT.ppt》由会员分享，可在线阅读，更多相关《网站建设与网页制作课程PPT.ppt（467页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作吕戈静2016.10 教学目标教学目标教学目标教学目标通过本章的学习，能够让学生了解网站的设计与工通过本章的学习，能够让学生了解网站的设计与工作流程，掌握作流程，掌握HTML的基本概念和结构，能利用的基本概念和结构，能利用HTML制制作网页作网页,了解和了解和DHTML/XML的区别，能熟练掌握利用的区别，能熟练掌握利用Dreamweaver制作网页，利用制作网页，利用Fireworks制作图片、利制作图片、利用用Flash制作动画；并能有机地结合，制作出精美的网页。制作动画；并能有机地结合，制作出精美的网页。第第第第1 1 1 1章章章章 网页设计概述网页设计概述网页设计概述网

2、页设计概述 第第第第2 2 2 2章章章章 HTMLHTMLHTMLHTML语言基础语言基础语言基础语言基础 第第第第3 3 3 3章章章章 Dream weaverDream weaverDream weaverDream weaver基础基础基础基础 第第第第4 4 4 4章章章章 网页中的基础元素网页中的基础元素网页中的基础元素网页中的基础元素 第第第第5 5 5 5章章章章 网页页面布局网页页面布局网页页面布局网页页面布局 第第第第6 6 6 6章章章章 网页中的层和时间轴网页中的层和时间轴网页中的层和时间轴网页中的层和时间轴 第第第第7 7 7 7章章章章 表单的应用表单的应用表单的

3、应用表单的应用 第第第第8 8 8 8章章章章 在网页中使用行为在网页中使用行为在网页中使用行为在网页中使用行为 第第第第9 9 9 9章章章章 CSSCSSCSSCSS样式使用样式使用样式使用样式使用 第第第第10101010章章章章 网页中的多媒体应用网页中的多媒体应用网页中的多媒体应用网页中的多媒体应用 第第第第11111111章章章章 模板和库模板和库模板和库模板和库 第第第第12121212章章章章 站点测试和发布站点测试和发布站点测试和发布站点测试和发布 第第第第13131313章章章章 Flash 8Flash 8Flash 8Flash 8简介简介简介简介 第第第第141414

4、14章章章章 Fireworks8Fireworks8Fireworks8Fireworks8简介简介简介简介目录目录 第第第第1 1章章章章 网页设计概述网页设计概述网页设计概述网页设计概述$知识目标知识目标 掌握网页、网站及主页的概念掌握网页、网站及主页的概念了解网页中的主要元素了解网页中的主要元素了解各种网页制作工具了解各种网页制作工具88 能力目标能力目标各种网页制作工具的配合使用各种网页制作工具的配合使用网站的整体规划网站的整体规划网站的设计流程网站的设计流程1.1 网页和网站网页和网站1.2 网页中的主要元素网页中的主要元素1.3 网页制作工具网页制作工具1.4 网页设计的基本流程

5、网页设计的基本流程本章小结本章小结第第1章章 网页设计概述网页设计概述1.1 网页和网站网页和网站1.1.1 网页网页1.1.2 网站网站1.1.3 网页的基本功能网页的基本功能1网页网页网页（网页（WEB）：是用）：是用html语言编写的，通语言编写的，通过过www网传输，并被网传输，并被web浏览器翻译成可以显浏览器翻译成可以显示出来的集合文本、图片、声音和动画等信息示出来的集合文本、图片、声音和动画等信息元素的页面文件（元素的页面文件（网页示例网页示例）。）。2网页的类型网页的类型根据页面内容可以分首页、主页、专栏网根据页面内容可以分首页、主页、专栏网页、内容网页和功能网页等类型；按制作

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

7、件夹。网页是一个页面文件，用来发布各种信息。网页是网一个页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的集合。主要形式；网站是网页通过超链接形成的集合。1.1.21.1.21.1.21.1.2 网站网站网站网站 1.1 网页和网站网页和网站1、媒介的作用。使用者与信息之间的媒介。、媒介的作用。使用者与信息之间的媒介。一方面是发布者，功能是发布信息；另一方面一方面是发布者，功能是发布信息；另一方面是浏览者，功能是提供浏览的信息，通过浏览是浏览者，功能是提供浏览的信息，通过浏览网页找寻需要的信息

8、。网页找寻需要的信息。2、互动的作用。浏览者与网页制作单位之、互动的作用。浏览者与网页制作单位之间互动的窗口，可以单向或双向传递信息。间互动的窗口，可以单向或双向传递信息。3、传输的作用。作为传输各种电子文件或、传输的作用。作为传输各种电子文件或信息之用，如下载说明书、更新文件、驱动程信息之用，如下载说明书、更新文件、驱动程序等。序等。1.1.3 1.1.3 1.1.3 1.1.3 网页的基本功能网页的基本功能网页的基本功能网页的基本功能 1.1 网页和网站网页和网站1.2 网页中的主要元素网页中的主要元素1.2.1 文本文本1.2.2 图像图像1.2.3 链接标志链接标志1.2.4 其他的基

9、本要素其他的基本要素网页的基本要素一般包括：文字、图像、网页的基本要素一般包括：文字、图像、动画和链接标志等，除此之外，网页的元素还动画和链接标志等，除此之外，网页的元素还包声音、多媒体和视频等。包声音、多媒体和视频等。是网页中最基本的元素。网页中文字的设是网页中最基本的元素。网页中文字的设计一般从以下几个方面来考虑：计一般从以下几个方面来考虑：1字体的选择。字体的选择。2字号、行距的选择。字号、行距的选择。3特殊字体的使用。特殊字体的使用。4字体的颜色。字体的颜色。1.2.11.2.11.2.11.2.1文本文本文本文本 1.2 网页中的主要元素网页中的主要元素现在网络上使用的绝大多数图片和

10、图像是现在网络上使用的绝大多数图片和图像是gif、jpeg和和png文件格式。文件格式。网页上使用图像要注意的问题：网页上使用图像要注意的问题：JPEG格式适合于照片图像，格式适合于照片图像，GIF格式适合格式适合于包含纯色的图像，例如插图和线条图。于包含纯色的图像，例如插图和线条图。利用图像编辑软件来放大或缩小图像利用图像编辑软件来放大或缩小图像屏幕显示图像的分辨率一般为屏幕显示图像的分辨率一般为72dpi。制。制作图像时，不必使用比此再高的分辨率。作图像时，不必使用比此再高的分辨率。1.2.21.2.21.2.21.2.2图像图像图像图像 1.2 网页中的主要元素网页中的主要元素如果建立的

11、图像中只有黑色和白色，处理如果建立的图像中只有黑色和白色，处理时可将它保存为黑白图像格式，这样可以减少时可将它保存为黑白图像格式，这样可以减少图像文件的大小。图像文件的大小。如果设计的如果设计的GIF格式图像包含了渐变和直格式图像包含了渐变和直线，应尽量使得它们水平，因为线，应尽量使得它们水平，因为GIF格以每条水格以每条水平线为基础来压缩。平线为基础来压缩。尝试各种不同的尝试各种不同的JPEG压缩率压缩率使用合适的色彩模式。使用合适的色彩模式。慎用动画。慎用动画。1.2.21.2.21.2.21.2.2图像图像图像图像 1.2 网页中的主要元素网页中的主要元素链接也叫超链接（链接也叫超链接（

12、Hyperlink），是从一个），是从一个网页指向另一个目的端的链接，是页面间的链网页指向另一个目的端的链接，是页面间的链接关系。接关系。链接标志（载体）指的是网页中特殊的文链接标志（载体）指的是网页中特殊的文本或图像，它们常常用不同的颜色和下划线来本或图像，它们常常用不同的颜色和下划线来标识，在浏览器中，访问者可以用鼠标单击它标识，在浏览器中，访问者可以用鼠标单击它们，能够从当前的网页转到链接的目的端位置。们，能够从当前的网页转到链接的目的端位置。超链接的标志一般有：文本、图像、热区超链接的标志一般有：文本、图像、热区三种。要注意的是，所有超链接标志均应清晰三种。要注意的是，所有超链接标志均

13、应清晰无误地向浏览者标识出来，让人一看就知道。无误地向浏览者标识出来，让人一看就知道。1.2.31.2.31.2.31.2.3链接标志链接标志链接标志链接标志 1.2 网页中的主要元素网页中的主要元素除上述几种要素之外，在网页上经常使用除上述几种要素之外，在网页上经常使用的还有动画、视频、声音等各种信息的形式。的还有动画、视频、声音等各种信息的形式。1动画。目前网络上常用的动画类型有动画。目前网络上常用的动画类型有gif和和Flash动画两种。动画两种。2视频。是多媒体网页的一个重要组成部视频。是多媒体网页的一个重要组成部分，常用的视频格式有分，常用的视频格式有avi、mpeg和和mov等，等

14、，视频会大大增加网页的文件量，从而使用访问视频会大大增加网页的文件量，从而使用访问速度受到影响，因此要慎用。速度受到影响，因此要慎用。3音频。在网页中插入音频会增加网页的音频。在网页中插入音频会增加网页的生动性。常用的音频格式有生动性。常用的音频格式有rm(ram)、midi、wav和和mp3等格式。音频文件和视频文件一样都等格式。音频文件和视频文件一样都会增加网页的文件量，因此要慎用。会增加网页的文件量，因此要慎用。1.2.41.2.41.2.41.2.4其他的基本要素其他的基本要素其他的基本要素其他的基本要素 1.2 网页中的主要元素网页中的主要元素1.3 网页制作工具网页制作工具1.3.

15、1网页编辑工具网页编辑工具1超文本标识语言（超文本标识语言（HTML）2FrontPage简介简介3Dreamweaver 1.3.2网页图像编辑工具网页图像编辑工具1.3.3动态网页技术动态网页技术1Photoshop。是。是Adobe公司开发的，是公司开发的，是当今最流行的图形图象处理软件之一，它能够实当今最流行的图形图象处理软件之一，它能够实现各种专业化的图像制作、处理及合成。现各种专业化的图像制作、处理及合成。2Fireworks。是由。是由Macromedia公司开发公司开发的图形处理工具，它是第一个专门为制作网页图的图形处理工具，它是第一个专门为制作网页图形而设计的软件，同时也提供

16、专业的网页图形设形而设计的软件，同时也提供专业的网页图形设计及制作的解决方案。计及制作的解决方案。3.Flash。Macromedia公司出品的公司出品的Flash是是目前非常流行的一种交互式目前非常流行的一种交互式Web矢量动画软件。矢量动画软件。Dreamweaver和和Flash、Fireworks三个软三个软件被称为件被称为“网页三剑客网页三剑客”，是现在公认的比较标，是现在公认的比较标准的网页制作利器。准的网页制作利器。1.3.21.3.21.3.21.3.2 网页图像编辑工具网页图像编辑工具网页图像编辑工具网页图像编辑工具 1.3 网页制作工具网页制作工具动态网页可以实现网页浏览者

17、和网页设计动态网页可以实现网页浏览者和网页设计者的交互，实现交互技术有两种：一种是客户者的交互，实现交互技术有两种：一种是客户端技术如常用的端技术如常用的JavaScript和和VBScript；另一；另一种是服务器端技术如目前常用的种是服务器端技术如目前常用的ASP和和PHP。1ASP(Active Server Pages)2PHP(Hypertext Preprocessor)3JSP(Java Server Pages)1.3.31.3.31.3.31.3.3动态网页技术动态网页技术动态网页技术动态网页技术 1.3 网页制作工具网页制作工具1.4 网页设计的基本流程网页设计的基本流程1

18、.4.1 网站的设计流程网站的设计流程1.4.2 网页的设计与制作网页的设计与制作1.4.3 网页的测试网页的测试1.4.4 网页上传和发布网页上传和发布1确定网站的主题确定网站的主题2规划网站的整体结构规划网站的整体结构3收集整合网页素材收集整合网页素材4确定网页版面布局。确定网页版面布局。5制作网页。制作网页。6添加网页特效。添加网页特效。7测试和发布网站。测试和发布网站。1.4.11.4.11.4.11.4.1 网站的设计流程网站的设计流程网站的设计流程网站的设计流程 1.4 网页设计的基本流程网页设计的基本流程1确定网页的版面布局确定网页的版面布局（1）平衡性。（）平衡性。（2）对称性

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

20、.4 网页设计的基本流程网页设计的基本流程1浏览器兼容性测试。目前浏览器有：浏览器兼容性测试。目前浏览器有：Internet Explorer与与Netscape两大主流浏览器，二两大主流浏览器，二者对者对HTML和和CSS等语法的支持度是不同的。在等语法的支持度是不同的。在Dreamweaver中提供了可以检查网页中是否含有某版本中提供了可以检查网页中是否含有某版本浏览器不能识别的语法功能，设计者可以借助其进行检查。浏览器不能识别的语法功能，设计者可以借助其进行检查。2平台的兼容性测试。设计要为用户着想，必须最平台的兼容性测试。设计要为用户着想，必须最少在一台少在一台PC和一台和一台Mac机

21、上测试你的网站网页，看看兼机上测试你的网站网页，看看兼容性如何；容性如何；3超链接完好性测试。超链接是连接网页之间、网超链接完好性测试。超链接是连接网页之间、网站之间的桥梁，浏览者是不愿意访问一个经常出现站之间的桥梁，浏览者是不愿意访问一个经常出现“找不找不到网页到网页”的问题的网站，作为设计者必须检测超链接的完的问题的网站，作为设计者必须检测超链接的完好性，保证链接的有效性，不要留下太多的坏链接。好性，保证链接的有效性，不要留下太多的坏链接。1.4.31.4.31.4.31.4.3网页的测试网页的测试网页的测试网页的测试 1.4 网页设计的基本流程网页设计的基本流程网页设计好，必须把它发布到

22、互联网上，网页设计好，必须把它发布到互联网上，否则网站形象仍然不能展现出去。发布的服务否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地。如果是发布到器可以是远程，也可以是本地。如果是发布到互联网上，要先申请域名和主页空间，然后再互联网上，要先申请域名和主页空间，然后再利用专用软件（如：利用专用软件（如：CuteFTP）上传，）上传，FTP有有很多种软件，最著名的是很多种软件，最著名的是 CuteFTP 和和 LeapFTP，也可以用，也可以用Dreamweaver内置的内置的FTP上传。上传。1.4.41.4.41.4.41.4.4网页上传和发布网页上传和发布网页上传和发布网

23、页上传和发布 1.4 网页设计的基本流程网页设计的基本流程本章小结本章小结第第1章章 网页设计概述网页设计概述网页设计概述网页和网站网页中的主要元素网页设计的基本流程网页制作工具网页网站网页的基本功能文本图像链接标志其他的基本要素网页编辑工具网页图像编辑工具网站的设计流程网页的设计与制作网页的测试网页上传和发布常见的各种网页制作工具动态网页技术$知识目标知识目标 了解了解HTMLHTML文件的基本结构文件的基本结构掌握掌握HTMLHTML中文本的编辑及图像的语法中文本的编辑及图像的语法掌握掌握HTMLHTML中各种设置超级链接的语法中各种设置超级链接的语法掌握掌握HTMLHTML中表格和框架的

24、基本语法中表格和框架的基本语法88 能力目标能力目标掌握进行文本及图像的编辑操作掌握进行文本及图像的编辑操作掌握创建各种超级链接的操作掌握创建各种超级链接的操作能够编写简单的能够编写简单的HTMLHTML网页网页掌握掌握HTMLHTML文件中表格和框架的使用文件中表格和框架的使用第第第第2 2章章章章 HTMLHTML语言基础语言基础语言基础语言基础2.1 HTML概述概述2.2 文本的编辑文本的编辑2.3 图像编辑图像编辑2.4 建立超链接建立超链接2.5 表格与框架表格与框架本章小结本章小结第第第第2 2章章章章 HTMLHTML语言基础语言基础语言基础语言基础2.1 HTML概述概述2.

25、1.1 HTML简介简介2.1.2 HTML语法结构语法结构HTML（Hyper Text Markup Language）又称超文本标识语言，是一种标识性的语言，又称超文本标识语言，是一种标识性的语言，是网页设计的最初语言。文件的扩展名是网页设计的最初语言。文件的扩展名:“html”或或“htm”。例2.1 简单的HTML文档 .长春欢迎您！这里是长春悠游网，我们带您畅游长春！由由“”组成的就是标记。在组成的就是标记。在HTML语言中标记分语言中标记分“单标记单标记”和和“围堵标记围堵标记”。2.1.1 HTML2.1.1 HTML2.1.1 HTML2.1.1 HTML简介简介简介简介 2

26、.1 HTML概述概述1围堵标记围堵标记格式：格式：2单标记单标记格式：格式：只有起始标记，没有结束标记。最常用的只有起始标记，没有结束标记。最常用的单标记是单标记是,它表示段内换行。它表示段内换行。3标记属性标记属性格式：格式：各属性间无前后顺序，属性也可省略，当各属性间无前后顺序，属性也可省略，当省略属性时取标记的默认值。省略属性时取标记的默认值。2.1.1 HTML2.1.1 HTML2.1.1 HTML2.1.1 HTML简介简介简介简介 2.1 HTML概述概述HTML文档的基本结构：文档的基本结构：文件开始标头区开始.标题区标头区结束文件主体内容开始文件主体内容文件主体内容结束文件

27、结束其中其中之间表示这是个网页之间表示这是个网页文件，是必有的标记。文件，是必有的标记。2.1.2 HTML2.1.2 HTML2.1.2 HTML2.1.2 HTML语法结构语法结构语法结构语法结构 2.1 HTML概述概述2.2 2.2 文本的编辑文本的编辑文本的编辑文本的编辑2.2.1 段落标记段落标记2.2.2 文本标记文本标记2.2.3 标题显示等级标题显示等级2.2.4 列表列表1段落（段落（）基本语法格式为：基本语法格式为：其中参数其中参数align用于设定段落的位置是靠左、用于设定段落的位置是靠左、靠右还是居中。默认值是靠左；除靠右还是居中。默认值是靠左；除align之外之外还

28、有其他参数如还有其他参数如class。class参数是可选项，参数是可选项，如果没有将按照默认值显示。如果没有将按照默认值显示。2换行换行单标记，放在一行的末尾，可以在一个段单标记，放在一行的末尾，可以在一个段落内实现文本的强制换行，设置标记后面的文落内实现文本的强制换行，设置标记后面的文本字、图像和表格等内容显示于下一行。本字、图像和表格等内容显示于下一行。2.2.12.2.12.2.12.2.1 段落标记段落标记段落标记段落标记 2.2 文本的编辑文本的编辑1字体标记字体标记其基本语法格式为：其基本语法格式为：Size：设置字体的显示字号，范围是从：设置字体的显示字号，范围是从“17”，其

29、中，其中“3”是默认值。是默认值。Color：设置文本的颜色，值可以是颜色名：设置文本的颜色，值可以是颜色名（英文如（英文如red代表红色）或颜色的十六进制代码代表红色）或颜色的十六进制代码（#000000代表黑色，代表黑色，#FFFFFF代表白色）。代表白色）。Face：设置文本显示的字体，值为字体的名称。：设置文本显示的字体，值为字体的名称。在文本的标记中还有很多常用的标记，比如表在文本的标记中还有很多常用的标记，比如表示字体效果的，示字体效果的，(黑体黑体)，（斜体），（斜体），（加下划线）。（加下划线）。2.2.22.2.22.2.22.2.2 文本标记文本标记文本标记文本标记 2.2

30、 文本的编辑文本的编辑2特殊字符特殊字符HTML中除了我们上面学的的一些标记外，中除了我们上面学的的一些标记外，还有一些我们常用的特殊字符比如还有一些我们常用的特殊字符比如“”，这些，这些特殊字符在特殊字符在HTML语言中都有对的转义符，常用语言中都有对的转义符，常用的转义符与特殊字符参见下表：的转义符与特殊字符参见下表：2.2.22.2.22.2.22.2.2 文本标记文本标记文本标记文本标记 2.2 文本的编辑文本的编辑HTML 代码显示结果说明<大于号或显示标记&&可用于显示其它特殊字符"引号®注册©版权™商标 不断行的空格

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

32、gn：设置水平线的对齐方式。对齐方式有左：设置水平线的对齐方式。对齐方式有左对齐，居中，右对齐三种。对齐，居中，右对齐三种。2.2.22.2.22.2.22.2.2 文本标记文本标记文本标记文本标记 2.2 文本的编辑文本的编辑语法格式为：语法格式为：n：表示不同级别的标题，：表示不同级别的标题，n值可以是值可以是1-6中中的任意数字，其中的任意数字，其中1表示的标题字体最大。另外，表示的标题字体最大。另外，可以用可以用align属性设置对齐方式，常用的有左对属性设置对齐方式，常用的有左对齐，居中，右对齐三种对齐方式。齐，居中，右对齐三种对齐方式。2.2.32.2.32.2.32.2.3 标题

33、显示等级标题显示等级标题显示等级标题显示等级 2.2 文本的编辑文本的编辑在在HTML中，列表常用的有中，列表常用的有“有序列表有序列表”和和“无序列表无序列表”。1有序列表有序列表基本语法结构为：基本语法结构为：项目1项目2项目n2.2.42.2.42.2.42.2.4 列表列表列表列表 2.2 文本的编辑文本的编辑1有序列表有序列表Type：设置列表的序号类型，常用序号如下：设置列表的序号类型，常用序号如下：n=1：用数字作为序号。：用数字作为序号。n=A；用大写字母作为序号。；用大写字母作为序号。n=a：用小写字母作为序号。：用小写字母作为序号。n=I：用大写罗马数字作为序号。：用大写罗

34、马数字作为序号。n=i：用小写罗马数字作为序号。：用小写罗马数字作为序号。Start：为可选参数，用于设置序号的起始数值。：为可选参数，用于设置序号的起始数值。如不添加如不添加“start”则从每类序号的第一个序号开始。则从每类序号的第一个序号开始。2.2.42.2.42.2.42.2.4 列表列表列表列表 2.2 文本的编辑文本的编辑2无序列表无序列表基本语法结构为：基本语法结构为：项目1项目2项目nType:设置符号形状，有实心圆、小正方形、设置符号形状，有实心圆、小正方形、空心圆三种，具体如下：空心圆三种，具体如下：n=disk：符号为实心圆。：符号为实心圆。n=square：符号为正方

35、形。：符号为正方形。n=circle：符号为空心圆。：符号为空心圆。2.2.42.2.42.2.42.2.4 列表列表列表列表 2.2 文本的编辑文本的编辑2 2.3 3 图像编辑图像编辑图像编辑图像编辑2.3.1 插入图像插入图像2.3.2 使用背景图像使用背景图像我们在网页上经常会浏览图像，适当使我们在网页上经常会浏览图像，适当使用图像可以增加网页的美观。在网页最常用用图像可以增加网页的美观。在网页最常用到的是插入图像和设置背景图像。到的是插入图像和设置背景图像。1语法格式：语法格式：，单标记单标记Src：指明要添加的图像所在的具体路径和：指明要添加的图像所在的具体路径和文件名。路径可以是

36、相对路径，也可以是绝对文件名。路径可以是相对路径，也可以是绝对路径。例：路径。例：。绝对路径：完整的描述文件位置的路径就绝对路径：完整的描述文件位置的路径就是绝对路径。对于绝对路径可以不需要知道其是绝对路径。对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置。他任何信息就可以判断出文件的位置。相对路径：所谓相对路径相对路径：所谓相对路径,顾名思义就是当顾名思义就是当前文档与目标的相对位置。例前文档与目标的相对位置。例.2.3.12.3.12.3.12.3.1插入图像插入图像插入图像插入图像 2.3 图像编辑图像编辑2图像的属性图像的属性除了除了“src”以外，以外，还有其他属性，还有

37、其他属性，可以定义图像的对齐方向，与周围元素的距离可以定义图像的对齐方向，与周围元素的距离等，各属性及作用见表等，各属性及作用见表2.2。表表2.2 图像属性列表图像属性列表2.3.12.3.12.3.12.3.1插入图像插入图像插入图像插入图像 2.3 图像编辑图像编辑名称作用border 设定图像的边框 vspace 设定图像、文字与图像上下之间的间隔 hspace 设定图像、文字与图像左右之间的间隔 width 调整图像的宽度 height 调整图像的高度 alt 当浏览器无法显示图像时，会显示出alt属性所设定的文字 语法格式为：语法格式为：2.3.2 2.3.2 2.3.2 2.3.

38、2 使用背景图像使用背景图像使用背景图像使用背景图像 2.3 图像编辑图像编辑2 2.4 4 建立超链接建立超链接建立超链接建立超链接2.4.1 建立超链接建立超链接2.4.2 使用书签使用书签2.4.3 标记新窗口和基准链接标记新窗口和基准链接建立超链接的标记是建立超链接的标记是，语法格式为：，语法格式为：超链接标识超链接标识url：指明链接目标的具体路径和文件名。：指明链接目标的具体路径和文件名。超链接标识：是网页中链接的载体，可以超链接标识：是网页中链接的载体，可以是文字或图像等页面元素，用户点击它就会跳是文字或图像等页面元素，用户点击它就会跳到超链接的目标位置。到超链接的目标位置。2.

39、4.12.4.12.4.12.4.1 建立超链接建立超链接建立超链接建立超链接 2.4 建立超链接建立超链接定义书签定义书签在在HTML中，首先要定义书签，然后才在链中，首先要定义书签，然后才在链接使用。定义书签的语法格式为：接使用。定义书签的语法格式为：书签名不能用中文，只能用英文和数字。书签名不能用中文，只能用英文和数字。使用书签链接使用书签链接其链接的格式为：其链接的格式为：超链接标识#与书签名之间不能有空格。与书签名之间不能有空格。2.4.22.4.22.4.22.4.2使用书签使用书签使用书签使用书签 2.4 建立超链接建立超链接1标记新窗口（标记新窗口（target）“target

40、=”_blank”，是链接标记的一，是链接标记的一个参数。语法格式为：个参数。语法格式为：超链接标识当点击链接载体的，就会在新窗口打开链当点击链接载体的，就会在新窗口打开链接目标。接目标。2基准链接基准链接标记是单标记，禁止使用结束标记，标记是单标记，禁止使用结束标记，可以改变文件中所有链接标记的参数默认值。可以改变文件中所有链接标记的参数默认值。它只能位于文件的开头部分，即标记它只能位于文件的开头部分，即标记 与与 之间。语法格式为：之间。语法格式为：2.4.32.4.32.4.32.4.3 标记新窗口和基准链接标记新窗口和基准链接标记新窗口和基准链接标记新窗口和基准链接 2.4 建立超链接

41、建立超链接2 2.5 5 表格与框架表格与框架表格与框架表格与框架2.5.1 建立表格建立表格2.5.2 表格属性表格属性2.5.3 建立框架建立框架2.5.4 框架属性框架属性表格标记有表格标记有、和和四个，四个，他们的具体含义是：他们的具体含义是：:定义表格定义表格,是表格必须的元素是表格必须的元素：定义标题单元格，在这个单元格中：定义标题单元格，在这个单元格中的文字将用粗体表示。的文字将用粗体表示。：定义表格中的行。：定义表格中的行。：定义单元格，使用：定义单元格，使用标记一定要标记一定要放在放在标记内部。标记内部。上述标记中，上述标记中，可以省略，其他三个是可以省略，其他三个是必须的。

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

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

44、表格边框的颜色。：定义表格边框的颜色。：定义表格的背景色：定义表格的背景色2.5.22.5.22.5.22.5.2 表格属性表格属性表格属性表格属性 2.5 表格与框架表格与框架1框架页的基本结构框架页的基本结构：标记一个普通的：标记一个普通的HTML文档，用文档，用于在不支持框架的浏览器中显示。于在不支持框架的浏览器中显示。：用于定义分割窗口，可以设置窗口的分割方式及：用于定义分割窗口，可以设置窗口的分割方式及是否显示框架边框等。是否显示框架边框等。用于设置每个区域显示的内容，每个用于设置每个区域显示的内容，每个URL值指定一个事值指定一个事先己制作好的文件。先己制作好的文件。2.5.32.

45、5.32.5.32.5.3 建立框架建立框架建立框架建立框架 2.5 表格与框架表格与框架2建立框架建立框架（1）建立纵向框架）建立纵向框架建立纵向框架的基本语法为：建立纵向框架的基本语法为：Cols：设置垂直分割窗口，用：设置垂直分割窗口，用“，”分隔，分隔，它的值可以是像素值或者是百分比，代表对应它的值可以是像素值或者是百分比，代表对应的子窗体占屏幕窗口的大小。如要将屏幕分割的子窗体占屏幕窗口的大小。如要将屏幕分割成三个子窗口，其中两个都占整个窗口的成三个子窗口，其中两个都占整个窗口的30%，那么只给开始的两个窗口赋值。语句为，那么只给开始的两个窗口赋值。语句为，*代表框架代表框架剩余的部

46、分分给最后一个子窗口，当然也可以剩余的部分分给最后一个子窗口，当然也可以写成写成。2.5.32.5.32.5.32.5.3 建立框架建立框架建立框架建立框架 2.5 表格与框架表格与框架（2）建立横框架）建立横框架建立横向框架的基本语法为：建立横向框架的基本语法为：rows：这个参数用来水平分割窗口，它的：这个参数用来水平分割窗口，它的值可以是数字或者是百分比，代表对应的子窗值可以是数字或者是百分比，代表对应的子窗口的大小，使用方法与口的大小，使用方法与cols相同。相同。（3）嵌套框架）嵌套框架嵌套框架是在己有的框架中嵌入框架的结嵌套框架是在己有的框架中嵌入框架的结构，利用嵌套框架可以实现窗

47、口的横向与纵向构，利用嵌套框架可以实现窗口的横向与纵向的混合分割。嵌套框架的设置见例的混合分割。嵌套框架的设置见例2.16.2.5.32.5.32.5.32.5.3 建立框架建立框架建立框架建立框架 2.5 表格与框架表格与框架常用的框架属性有以下几种：常用的框架属性有以下几种：1：设置框架的边：设置框架的边框。值为框。值为yes（或（或1）有边框或）有边框或no（或（或0）无边框。）无边框。2：设置各窗口之：设置各窗口之间的空白区域大小。值是以像素为单位的数值。间的空白区域大小。值是以像素为单位的数值。3：设置边框的颜色。：设置边框的颜色。值可以是的英文或颜色代码。值可以是的英文或颜色代码。

48、4：设置框架是否显示：设置框架是否显示滚动条。有三个值：滚动条。有三个值：yes表示有滚动条，表示有滚动条，no表示没有，表示没有，auto表示根据内容的多少浏览器自动设置。表示根据内容的多少浏览器自动设置。5：设置框架在浏览器中不：设置框架在浏览器中不能被调整。能被调整。2.5.4 2.5.4 2.5.4 2.5.4 框架属性框架属性框架属性框架属性 2.5 表格与框架表格与框架本章小结本章小结第第2章章 HTML语言基础语言基础HTML语言基础HTML概述图像编辑表格与框架建立超链接HTML简介HTML语法结构段落标记文本标记标题显示等级列表插入图像使用背景图像建立超链接标记新窗口和基准链

49、接建立表格表格属性建立框架框架属性使用书签文本的编辑$知识目标知识目标 认识认识Dreamweaver8Dreamweaver8操作界面操作界面掌握如何规划站点的结构掌握如何规划站点的结构掌握网页文件的基本操作掌握网页文件的基本操作88 能力目标能力目标熟悉工作界面和使用各种面板熟悉工作界面和使用各种面板能够建立和管理本地站点能够建立和管理本地站点熟练网页文件的基本操作熟练网页文件的基本操作第第第第3 3章章章章 Dream weaverDream weaver基础基础基础基础3.1 Dream weaver 8工作界面工作界面3.2 规划与创建站点规划与创建站点3.3 网页文件的基本操作网页

50、文件的基本操作本章小结本章小结第第第第3 3章章章章 Dream weaverDream weaver基础基础基础基础3.1 Dream weaver 8工作界面工作界面3.1.1 启动启动Dreamweaver83.1.2 Dreamweaver8操作界面操作界面单击单击“开始开始”按钮，在开始菜单中依次选择按钮，在开始菜单中依次选择“程序程序”“Macromedia”“Macromedia Dreamweaver8”，启动，启动Dreamweaver8程序。启动程序。启动Dreamweaver8后出后出现开始界面。现开始界面。3.1.1 3.1.1 3.1.1 3.1.1 启动和退出启动和