网站建设与网制作课程省公共课一等奖全国赛课获奖课件.pptx

网页设计与制作吕戈静.10 第1页 教学目标教学目标教学目标教学目标经过本章学习，能够让学生了解网站设计与工作流经过本章学习，能够让学生了解网站设计与工作流程，掌握程，掌握HTML基本概念和结构，能利用基本概念和结构，能利用HTML制作网页制作网页,了解和了解和DHTML/XML区分，能熟练掌握利用区分，能熟练掌握利用Dreamweaver制作网页，利用制作网页，利用Fireworks制作图片、利制作图片、利用用Flash制作动画；并能有机地结合，制作出精美网页。制作动画；并能有机地结合，制作出精美网页。第2页 第第第第1 1 1 1章章章章 网页设计概述网页设计概述网页设计概述网页设计概述 第第第第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章章章章 表单应用表单应用表单应用表单应用 第第第第8 8 8 8章章章章 在网页中使用行为在网页中使用行为在网页中使用行为在网页中使用行为 第第第第9 9 9 9章章章章 CSSCSSCSSCSS样式使用样式使用样式使用样式使用 第第第第10101010章章章章 网页中多媒体应用网页中多媒体应用网页中多媒体应用网页中多媒体应用 第第第第11111111章章章章 模板和库模板和库模板和库模板和库 第第第第12121212章章章章 站点测试和公布站点测试和公布站点测试和公布站点测试和公布 第第第第13131313章章章章 Flash 8Flash 8Flash 8Flash 8介绍介绍介绍介绍 第第第第14141414章章章章 Fireworks8Fireworks8Fireworks8Fireworks8介绍介绍介绍介绍目录目录第3页 第第第第1 1章章章章 网页设计概述网页设计概述网页设计概述网页设计概述$知识目标知识目标 掌握网页、网站及主页概念掌握网页、网站及主页概念了解网页中主要元素了解网页中主要元素了解各种网页制作工具了解各种网页制作工具88 能力目标能力目标各种网页制作工具配合使用各种网页制作工具配合使用网站整体规划网站整体规划网站设计流程网站设计流程第4页1.1 网页和网站网页和网站1.2 网页中主要元素网页中主要元素1.3 网页制作工具网页制作工具1.4 网页设计基本流程网页设计基本流程本章小结本章小结第第1章章 网页设计概述网页设计概述第5页1.1 网页和网站网页和网站1.1.1 网页网页1.1.2 网站网站1.1.3 网页基本功效网页基本功效第6页1网页网页网页（网页（WEB）：是用）：是用html语言编写，经过语言编写，经过www网传输，并被网传输，并被web浏览器翻译成能够显示浏览器翻译成能够显示出来集合文本、图片、声音和动画等信息元素出来集合文本、图片、声音和动画等信息元素页面文件（页面文件（网页示例网页示例）。）。2网页类型网页类型依据页面内容能够分首页、主页、专栏网依据页面内容能够分首页、主页、专栏网页、内容网页和功效网页等类型；按制作技术页、内容网页和功效网页等类型；按制作技术分为静态网页与动态网页。分为静态网页与动态网页。1.1.11.1.11.1.11.1.1 网页网页网页网页 1.1 网页和网站网页和网站第7页网站就是把一些网页等信息文件经过超链网站就是把一些网页等信息文件经过超链接形式关联起来形成信息文件集合。信息能够接形式关联起来形成信息文件集合。信息能够是网页形式也能够是其它文档形式。是网页形式也能够是其它文档形式。网页与网站区分与联络：网页与网站区分与联络：网站是一个文件夹，其中文件不但是网页网站是一个文件夹，其中文件不但是网页还有网站所需其它文件或文件夹。网页是一个还有网站所需其它文件或文件夹。网页是一个页面文件，用来公布各种信息。网页是网站组页面文件，用来公布各种信息。网页是网站组成要素，是网站信息公布与表现一个主要形式；成要素，是网站信息公布与表现一个主要形式；网站是网页经过超链接形成集合。网站是网页经过超链接形成集合。1.1.21.1.21.1.21.1.2 网站网站网站网站 1.1 网页和网站网页和网站第8页1、媒介作用。使用者与信息之间媒介。一方面是发布者，功能是发布信息；其次是浏览者，功能是提供浏览信息，经过浏览网页找寻需要信息。2、互动作用。浏览者与网页制作单位之间互动窗口，可以单向或双向传递信息。3、传输作用。作为传输各种电子文件或信息之用，如下载说明书、更新文件、驱动程序等。1.1.3 1.1.3 1.1.3 1.1.3 网页基本功效网页基本功效网页基本功效网页基本功效 1.1 网页和网站网页和网站第9页1.2 网页中主要元素网页中主要元素1.2.1 文本文本1.2.2 图像图像1.2.3 链接标志链接标志1.2.4 其它基本要素其它基本要素网页基本要素普通包含：文字、图像、动网页基本要素普通包含：文字、图像、动画和链接标志等，除此之外，网页元素还包声画和链接标志等，除此之外，网页元素还包声音、多媒体和视频等。音、多媒体和视频等。第10页是网页中最基本元素。网页汉字字设计普是网页中最基本元素。网页汉字字设计普通从以下几个方面来考虑：通从以下几个方面来考虑：1字体选择。字体选择。2字号、行距选择。字号、行距选择。3特殊字体使用。特殊字体使用。4字体颜色。字体颜色。1.2.11.2.11.2.11.2.1文本文本文本文本 1.2 网页中主要元素网页中主要元素第11页现在网络上使用绝大多数图片和图像是现在网络上使用绝大多数图片和图像是gif、jpeg和和png文件格式。文件格式。网页上使用图像要注意问题：网页上使用图像要注意问题：JPEG格式适合于照片图像，格式适合于照片图像，GIF格式适合格式适合于包含纯色图像，比如插图和线条图。于包含纯色图像，比如插图和线条图。利用图像编辑软件来放大或缩小图像利用图像编辑软件来放大或缩小图像屏幕显示图像分辨率普通为屏幕显示图像分辨率普通为72dpi。制作。制作图像时，无须使用比此再高分辨率。图像时，无须使用比此再高分辨率。1.2.21.2.21.2.21.2.2图像图像图像图像 1.2 网页中主要元素网页中主要元素第12页假如建立图像中只有黑色和白色，处理时假如建立图像中只有黑色和白色，处理时可将它保留为黑白图像格式，这么能够降低图可将它保留为黑白图像格式，这么能够降低图像文件大小。像文件大小。假如设计假如设计GIF格式图像包含了渐变和直线，格式图像包含了渐变和直线，应尽可能使得它们水平，因为应尽可能使得它们水平，因为GIF格以每条水平格以每条水平线为基础来压缩。线为基础来压缩。尝试各种不一样尝试各种不一样JPEG压缩率压缩率使用适当色彩模式。使用适当色彩模式。慎用动画。慎用动画。1.2.21.2.21.2.21.2.2图像图像图像图像 1.2 网页中主要元素网页中主要元素第13页链接也叫超链接（Hyperlink），是从一个网页指向另一个目标端链接，是页面间链接关系。链接标志（载体）指是网页中特殊文本或图像，它们经常用不一样颜色和下划线来标识，在浏览器中，访问者可以用鼠标单击它们，能够从当前网页转到链接目标端位置。超链接标志一般有：文本、图像、热区三种。要注意是，全部超链接标志均应清楚无误地向浏览者标识出来，让人一看就知道。1.2.31.2.31.2.31.2.3链接标志链接标志链接标志链接标志 1.2 网页中主要元素网页中主要元素第14页除上述几个要素之外，在网页上经常使用除上述几个要素之外，在网页上经常使用还有动画、视频、声音等各种信息形式。还有动画、视频、声音等各种信息形式。1动画。当前网络上惯用动画类型有动画。当前网络上惯用动画类型有gif和和Flash动画两种。动画两种。2视频。是多媒体网页一个主要组成部分，视频。是多媒体网页一个主要组成部分，惯用视频格式有惯用视频格式有avi、mpeg和和mov等，视频会等，视频会大大增加网页文件量，从而使用访问速度受到大大增加网页文件量，从而使用访问速度受到影响，所以要慎用。影响，所以要慎用。3音频。在网页中插入音频会增加网页生音频。在网页中插入音频会增加网页生动性。惯用音频格式有动性。惯用音频格式有rm(ram)、midi、wav和和mp3等格式。音频文件和视频文件一样都会增等格式。音频文件和视频文件一样都会增加网页文件量，所以要慎用。加网页文件量，所以要慎用。1.2.41.2.41.2.41.2.4其它基本要素其它基本要素其它基本要素其它基本要素 1.2 网页中主要元素网页中主要元素第15页1.3 网页制作工具网页制作工具1.3.1网页编辑工具网页编辑工具1超文本标识语言（超文本标识语言（HTML）2FrontPage介绍介绍3Dreamweaver 1.3.2网页图像编辑工具网页图像编辑工具1.3.3动态网页技术动态网页技术第16页1Photoshop。是。是Adobe企业开发，是当企业开发，是当今最流行图形图象处理软件之一，它能够实现各今最流行图形图象处理软件之一，它能够实现各种专业化图像制作、处理及合成。种专业化图像制作、处理及合成。2Fireworks。是由。是由Macromedia企业开发企业开发图形处理工具，它是第一个专门为制作网页图形图形处理工具，它是第一个专门为制作网页图形而设计软件，同时也提供专业网页图形设计及制而设计软件，同时也提供专业网页图形设计及制作处理方案。作处理方案。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 网页制作工具网页制作工具第18页1.4 网页设计基本流程网页设计基本流程1.4.1 网站设计流程网站设计流程1.4.2 网页设计与制作网页设计与制作1.4.3 网页测试网页测试1.4.4 网页上传和公布网页上传和公布第19页1确定网站主题确定网站主题2规划网站整体结构规划网站整体结构3搜集整合网页素材搜集整合网页素材4确定网页版面布局。确定网页版面布局。5制作网页。制作网页。6添加网页特效。添加网页特效。7测试和公布网站。测试和公布网站。1.4.11.4.11.4.11.4.1 网站设计流程网站设计流程网站设计流程网站设计流程 1.4 网页设计基本流程网页设计基本流程第20页1确定网页版面布局确定网页版面布局（1）平衡性。（）平衡性。（2）对称性。（）对称性。（3）对比性。）对比性。（4）疏密度。（）疏密度。（5）百分比。（）百分比。（6）韵律感。）韵律感。网页排版布局是决定网站美观是否一个主网页排版布局是决定网站美观是否一个主要方面要方面,经过合理、有创意布局经过合理、有创意布局,才能够把文字、才能够把文字、图像等内容完美地展现在浏览者前面。图像等内容完美地展现在浏览者前面。2网页设计与制作网页设计与制作网页设计与制作普通分为静态网页制作和网页设计与制作普通分为静态网页制作和动态网页制作两类。动态网页制作两类。1.4.2 1.4.2 1.4.2 1.4.2 网页设计与制作网页设计与制作网页设计与制作网页设计与制作 1.4 网页设计基本流程网页设计基本流程第21页1浏览器兼容性测试。当前浏览器有：浏览器兼容性测试。当前浏览器有：Internet Explorer与与Netscape两大主流浏览器，二两大主流浏览器，二者对者对HTML和和CSS等语法支持度是不一样。在等语法支持度是不一样。在Dreamweaver中提供了能够检验网页中是否含有某版本中提供了能够检验网页中是否含有某版本浏览器不能识别语法功效，设计者能够借助其进行检验。浏览器不能识别语法功效，设计者能够借助其进行检验。2平台兼容性测试。设计要为用户着想，必须最少平台兼容性测试。设计要为用户着想，必须最少在一台在一台PC和一台和一台Mac机上测试你网站网页，看看兼容性机上测试你网站网页，看看兼容性怎样；怎样；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网页上传和公布网页上传和公布网页上传和公布网页上传和公布 1.4 网页设计基本流程网页设计基本流程第23页本章小结本章小结第第1章章 网页设计概述网页设计概述网页设计概述网页和网站网页中主要元素网页设计基本流程网页制作工具网页网站网页基本功效文本图像链接标志其它基本要素网页编辑工具网页图像编辑工具网站设计流程网页设计与制作网页测试网页上传和公布常见各种网页制作工具动态网页技术第24页$知识目标知识目标 了解了解HTMLHTML文件基本结构文件基本结构掌握掌握HTMLHTML汉字本编辑及图像语法汉字本编辑及图像语法掌握掌握HTMLHTML中各种设置超级链接语法中各种设置超级链接语法掌握掌握HTMLHTML中表格和框架基本语法中表格和框架基本语法88 能力目标能力目标掌握进行文本及图像编辑操作掌握进行文本及图像编辑操作掌握创建各种超级链接操作掌握创建各种超级链接操作能够编写简单能够编写简单HTMLHTML网页网页掌握掌握HTMLHTML文件中表格和框架使用文件中表格和框架使用第第第第2 2章章章章 HTMLHTML语言基础语言基础语言基础语言基础第25页2.1 HTML概述概述2.2 文本编辑文本编辑2.3 图像编辑图像编辑2.4 建立超链接建立超链接2.5 表格与框架表格与框架本章小结本章小结第第第第2 2章章章章 HTMLHTML语言基础语言基础语言基础语言基础第26页2.1 HTML概述概述2.1.1 HTML介绍介绍2.1.2 HTML语法结构语法结构第27页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.1 HTML概述概述第28页1围堵标识围堵标识格式：格式：2单标识单标识格式：格式：只有起始标识，没有结束标识。最惯用单只有起始标识，没有结束标识。最惯用单标识是标识是,它表示段内换行。它表示段内换行。3标识属性标识属性格式：格式：各属性间无前后次序，属性也可省略，当各属性间无前后次序，属性也可省略，当省略属性时取标识默认值。省略属性时取标识默认值。2.1.1 HTML2.1.1 HTML2.1.1 HTML2.1.1 HTML介绍介绍介绍介绍 2.1 HTML概述概述第29页HTML文档基本结构：文档基本结构：文件开始标头区开始.标题区标头区结束文件主体内容开始文件主体内容文件主体内容结束文件结束其中其中之间表示这是个网页之间表示这是个网页文件，是必有标识。文件，是必有标识。2.1.2 HTML2.1.2 HTML2.1.2 HTML2.1.2 HTML语法结构语法结构语法结构语法结构 2.1 HTML概述概述第30页2.2 2.2 文本编辑文本编辑文本编辑文本编辑2.2.1 段落标识段落标识2.2.2 文本标识文本标识2.2.3 标题显示等级标题显示等级2.2.4 列表列表第31页1段落（段落（）基本语法格式为：基本语法格式为：其中参数其中参数align用于设定段落位置是靠左、用于设定段落位置是靠左、靠右还是居中。默认值是靠左；除靠右还是居中。默认值是靠左；除align之外之外还有其它参数如还有其它参数如class。class参数是可选项，参数是可选项，假如没有将按照默认值显示。假如没有将按照默认值显示。2换行换行单标识，放在一行末尾，能够在一个段落单标识，放在一行末尾，能够在一个段落内实现文本强制换行，设置标识后面文本字、内实现文本强制换行，设置标识后面文本字、图像和表格等内容显示于下一行。图像和表格等内容显示于下一行。2.2.12.2.12.2.12.2.1 段落标识段落标识段落标识段落标识 2.2 文本编辑文本编辑第32页1字体标识字体标识其基本语法格式为：其基本语法格式为：Size：设置字体显示字号，范围是从：设置字体显示字号，范围是从“17”，其中，其中“3”是默认值。是默认值。Color：设置文本颜色，值能够是颜色名（英：设置文本颜色，值能够是颜色名（英文如文如red代表红色）或颜色十六进制代码（代表红色）或颜色十六进制代码（#000000代表黑色，代表黑色，#FFFFFF代表明色）。代表明色）。Face：设置文本显示字体，值为字体名称。：设置文本显示字体，值为字体名称。在文本标识中还有很多惯用标识，比如表示字在文本标识中还有很多惯用标识，比如表示字体效果，体效果，(黑体黑体)，（斜体），（斜体），（加下划（加下划线）。线）。2.2.22.2.22.2.22.2.2 文本标识文本标识文本标识文本标识 2.2 文本编辑文本编辑第33页2特殊字符特殊字符HTML中除了我们上面学一些标识外，还有中除了我们上面学一些标识外，还有一些我们惯用特殊字符比如一些我们惯用特殊字符比如“”，这些特殊字，这些特殊字符在符在HTML语言中都有正确转义符，惯用转义符语言中都有正确转义符，惯用转义符与特殊字符参见下表：与特殊字符参见下表：2.2.22.2.22.2.22.2.2 文本标识文本标识文本标识文本标识 2.2 文本编辑文本编辑HTML 代码显示结果说明<大于号或显示标识&&可用于显示其它特殊字符"引号®注册©版权™商标 不停行空格第34页3水平线标识水平线标识水平线是在网页上划出一条水平分割线，用水平线是在网页上划出一条水平分割线，用来标识水平线。语法格式为：来标识水平线。语法格式为：Size：设置水平线高度，以像素为单位。：设置水平线高度，以像素为单位。Color：设置水平线颜色。：设置水平线颜色。Width：设置水平线宽度，单位是像素或百分：设置水平线宽度，单位是像素或百分比，像素是绝对大小，不会伴随程序窗口大小而改，比，像素是绝对大小，不会伴随程序窗口大小而改，百分比是相对于程序窗口水平线所占百分比，会伴百分比是相对于程序窗口水平线所占百分比，会伴随程序窗口大小而改变。随程序窗口大小而改变。Align：设置水平线对齐方式。对齐方式有左对：设置水平线对齐方式。对齐方式有左对齐，居中，右对齐三种。齐，居中，右对齐三种。2.2.22.2.22.2.22.2.2 文本标识文本标识文本标识文本标识 2.2 文本编辑文本编辑第35页语法格式为：语法格式为：n：表示不一样级别标题，：表示不一样级别标题，n值能够是值能够是1-6中中任意数字，其中任意数字，其中1表示标题字体最大。另外，能表示标题字体最大。另外，能够用够用align属性设置对齐方式，惯用有左对齐，属性设置对齐方式，惯用有左对齐，居中，右对齐三种对齐方式。居中，右对齐三种对齐方式。2.2.32.2.32.2.32.2.3 标题显示等级标题显示等级标题显示等级标题显示等级 2.2 文本编辑文本编辑第36页在在HTML中，列表惯用有中，列表惯用有“有序列表有序列表”和和“无无序列表序列表”。1有序列表有序列表基本语法结构为：基本语法结构为：项目1项目2项目n2.2.42.2.42.2.42.2.4 列表列表列表列表 2.2 文本编辑文本编辑第37页1有序列表有序列表Type：设置列表序号类型，惯用序号以下：设置列表序号类型，惯用序号以下：n=1：用数字作为序号。：用数字作为序号。n=A；用大写字母作为序号。；用大写字母作为序号。n=a：用小写字母作为序号。：用小写字母作为序号。n=I：用大写罗马数字作为序号。：用大写罗马数字作为序号。n=i：用小写罗马数字作为序号。：用小写罗马数字作为序号。Start：为可选参数，用于设置序号起始数值。：为可选参数，用于设置序号起始数值。如不添加如不添加“start”则从每类序号第一个序号开始。则从每类序号第一个序号开始。2.2.42.2.42.2.42.2.4 列表列表列表列表 2.2 文本编辑文本编辑第38页2无序列表无序列表基本语法结构为：基本语法结构为：项目1项目2项目nType:设置符号形状，有实心圆、小正方形、设置符号形状，有实心圆、小正方形、空心圆三种，详细以下：空心圆三种，详细以下：n=disk：符号为实心圆。：符号为实心圆。n=square：符号为正方形。：符号为正方形。n=circle：符号为空心圆。：符号为空心圆。2.2.42.2.42.2.42.2.4 列表列表列表列表 2.2 文本编辑文本编辑第39页2 2.3 3 图像编辑图像编辑图像编辑图像编辑2.3.1 插入图像插入图像2.3.2 使用背景图像使用背景图像我们在网页上经常会浏览图像，适当使我们在网页上经常会浏览图像，适当使用图像能够增加网页美观。在网页最惯用到用图像能够增加网页美观。在网页最惯用到是插入图像和设置背景图像。是插入图像和设置背景图像。第40页1语法格式：语法格式：，单标识单标识Src：指明要添加图像所在详细路径和文件：指明要添加图像所在详细路径和文件名。路径能够是相对路径，也能够是绝对路径。名。路径能够是相对路径，也能够是绝对路径。例：例：。绝对路径：完整描述文件位置路径就是绝绝对路径：完整描述文件位置路径就是绝对路径。对于绝对路径能够不需要知道其它任对路径。对于绝对路径能够不需要知道其它任何信息就能够判断出文件位置。何信息就能够判断出文件位置。相对路径：所谓相对路径相对路径：所谓相对路径,顾名思义就是当顾名思义就是当前文档与目标相对位置。例前文档与目标相对位置。例.2.3.12.3.12.3.12.3.1插入图像插入图像插入图像插入图像 2.3 图像编辑图像编辑第41页2图像属性图像属性除了除了“src”以外，以外，还有其它属性，还有其它属性，能够定义图像对齐方向，与周围元素距离等，能够定义图像对齐方向，与周围元素距离等，各属性及作用见表各属性及作用见表2.2。表表2.2 图像属性列表图像属性列表2.3.12.3.12.3.12.3.1插入图像插入图像插入图像插入图像 2.3 图像编辑图像编辑名称作用border 设定图像边框 vspace 设定图像、文字与图像上下之间间隔 hspace 设定图像、文字与图像左右之间间隔 width 调整图像宽度 height 调整图像高度 alt 当浏览器无法显示图像时，会显示出alt属性所设定文字 第42页语法格式为：语法格式为：2.3.2 2.3.2 2.3.2 2.3.2 使用背景图像使用背景图像使用背景图像使用背景图像 2.3 图像编辑图像编辑第43页2 2.4 4 建立超链接建立超链接建立超链接建立超链接2.4.1 建立超链接建立超链接2.4.2 使用书签使用书签2.4.3 标识新窗口和基准链接标识新窗口和基准链接第44页建立超链接标识是建立超链接标识是，语法格式为：，语法格式为：超链接标识超链接标识url：指明链接目标详细路径和文件名。：指明链接目标详细路径和文件名。超链接标识：是网页中链接载体，能够是超链接标识：是网页中链接载体，能够是文字或图像等页面元素，用户点击它就会跳到文字或图像等页面元素，用户点击它就会跳到超链接目标位置。超链接目标位置。2.4.12.4.12.4.12.4.1 建立超链接建立超链接建立超链接建立超链接 2.4 建立超链接建立超链接第45页定义书签定义书签在在HTML中，首先要定义书签，然后才在链中，首先要定义书签，然后才在链接使用。定义书签语法格式为：接使用。定义书签语法格式为：书署名不能用汉字，只能用英文和数字。书署名不能用汉字，只能用英文和数字。使用书签链接使用书签链接其链接格式为：其链接格式为：超链接标识#与书署名之间不能有空格。与书署名之间不能有空格。2.4.22.4.22.4.22.4.2使用书签使用书签使用书签使用书签 2.4 建立超链接建立超链接第46页1标识新窗口（标识新窗口（target）“target=”_blank”，是链接标识一个，是链接标识一个参数。语法格式为：参数。语法格式为：超链接标识当点击链接载体，就会在新窗口打开链接当点击链接载体，就会在新窗口打开链接目标。目标。2基准链接基准链接标识是单标识，禁止使用结束标识，标识是单标识，禁止使用结束标识，能够改变文件中全部链接标识参数默认值。它能够改变文件中全部链接标识参数默认值。它只能位于文件开头部分，即标识只能位于文件开头部分，即标识 与与 之间。语法格式为：之间。语法格式为：2.4.32.4.32.4.32.4.3 标识新窗口和基准链接标识新窗口和基准链接标识新窗口和基准链接标识新窗口和基准链接 2.4 建立超链接建立超链接第47页2 2.5 5 表格与框架表格与框架表格与框架表格与框架2.5.1 建立表格建立表格2.5.2 表格属性表格属性2.5.3 建立框架建立框架2.5.4 框架属性框架属性第48页表格标识有表格标识有、和和四个，四个，他们详细含义是：他们详细含义是：:定义表格定义表格,是表格必须元素是表格必须元素：定义标题单元格，在这个单元格中：定义标题单元格，在这个单元格中文字将用粗体表示。文字将用粗体表示。：定义表格中行。：定义表格中行。：定义单元格，使用：定义单元格，使用标识一定要标识一定要放在放在标识内部。标识内部。上述标识中，上述标识中，能够省略，其它三个是能够省略，其它三个是必须。详细应用见例必须。详细应用见例2.12。标识中能够添加属性和参数，其中标识中能够添加属性和参数，其中border，用于设置表格边框宽度，值为大于等于，用于设置表格边框宽度，值为大于等于“0”整数，当值为整数，当值为“0”，在浏览器中显示无边框表，在浏览器中显示无边框表格，无边框表格是网页布局最主要伎俩。格，无边框表格是网页布局最主要伎俩。2.5.12.5.12.5.12.5.1 建立表格建立表格建立表格建立表格 2.5 表格与框架表格与框架第49页除了除了border外，惯用表格属性参数有：外，惯用表格属性参数有：定义单元格之间距离，：定义单元格之间距离，值为大于等于值为大于等于“0”整数，单位是像素，整数，单位是像素，“0”表示没有表示没有间距。间距。：定义单元格内文字或其：定义单元格内文字或其它元素到边框距离它元素到边框距离,值为大于等于值为大于等于“0”整数，单位是像素，整数，单位是像素，“0”表示没有距离。表示没有距离。：定义表格高度，值有两种单位，：定义表格高度，值有两种单位，一是像素，表示表格高度为固定大小，一是百分比表示一是像素，表示表格高度为固定大小，一是百分比表示表格占据整个网页高度百分比。表格占据整个网页高度百分比。：定义表格宽度，与高度一样有：定义表格宽度，与高度一样有像素和百分比两种单位。像素和百分比两种单位。：定义表格边框颜色。：定义表格边框颜色。：定义表格背景色：定义表格背景色2.5.22.5.22.5.22.5.2 表格属性表格属性表格属性表格属性 2.5 表格与框架表格与框架第50页1框架页基本结构框架页基本结构：标识一个普通：标识一个普通HTML文档，用于文档，用于在不支持框架浏览器中显示。在不支持框架浏览器中显示。：用于定义分割窗口，能够设置窗口分割方式及是：用于定义分割窗口，能够设置窗口分割方式及是否显示框架边框等。否显示框架边框等。用于设置每个区域显示内容，每个用于设置每个区域显示内容，每个URL值指定一个事先值指定一个事先己制作好文件。己制作好文件。2.5.32.5.32.5.32.5.3 建立框架建立框架建立框架建立框架 2.5 表格与框架表格与框架第51页2建立框架建立框架（1）建立纵向框架）建立纵向框架建立纵向框架基本语法为：建立纵向框架基本语法为：Cols：设置垂直分割窗口，用：设置垂直分割窗口，用“，”分隔，分隔，它值能够是像素值或者是百分比，代表对应子它值能够是像素值或者是百分比，代表对应子窗体占屏幕窗口大小。如要将屏幕分割成三个窗体占屏幕窗口大小。如要将屏幕分割成三个子窗口，其中两个都占整个窗口子窗口，其中两个都占整个窗口30%，那么只，那么只给开始两个窗口赋值。语句为给开始两个窗口赋值。语句为，*代表框架剩下部分分给最终代表框架剩下部分分给最终一个子窗口，当然也能够写成一个子窗口，当然也能够写成。2.5.32.5.32.5.32.5.3 建立框架建立框架建立框架建立框架 2.5 表格与框架表格与框架第52页（2）建立横框架）建立横框架建立横向框架基本语法为：建立横向框架基本语法为：rows：这个参数用来水平分割窗口，它值：这个参数用来水平分割窗口，它值能够是数字或者是百分比，代表对应子窗口大能够是数字或者是百分比，代表对应子窗口大小，使用方法与小，使用方法与cols相同。相同。（3）嵌套框架）嵌套框架嵌套框架是在己有框架中嵌入框架结构，嵌套框架是在己有框架中嵌入框架结构，利用嵌套框架能够实现窗口横向与纵向混合分利用嵌套框架能够实现窗口横向与纵向混合分割。嵌套框架设置见例割。嵌套框架设置见例2.16.2.5.32.5.32.5.32.5.3 建立框架建立框架建立框架建立框架 2.5 表格与框架表格与框架第53页惯用框架属性有以下几个：惯用框架属性有以下几个：1：设置框架边框。：设置框架边框。值为值为yes（或（或1）有边框或）有边框或no（或（或0）无边框。）无边框。2：设置各窗口之：设置各窗口之间空白区域大小。值是以像素为单位数值。间空白区域大小。值是以像素为单位数值。3：设置边框颜色。：设置边框颜色。值能够是英文或颜色代码。值能够是英文或颜色代码。4：设置框架是否显示：设置框架是否显示滚动条。有三个值：滚动条。有三个值：yes表示有滚动条，表示有滚动条，no表示没有，表示没有，auto表示依据内容多少浏览器自动设置。表示依据内容多少浏览器自动设置。5：设置框架在浏览器中不：设置框架在浏览器中不能被调整。能被调整。2.5.4 2.5.4 2.5.4 2.5.4 框架属性框架属性框架属性框架属性 2.5 表格与框架表格与框架第54页本章小结本章小结第第2章章 HTML语言基础语言基础HTML语言基础HTML概述图像编辑表格与框架建立超链接HTML介绍HTML语法结构段落标识文本标识标题显示等级列表插入图像使用背景图像建立超链接标识新窗口和基准链接建立表格表格属性建立框架框架属性使用书签文本编辑第55页$知识目标知识目标 认识认识Dreamweaver8Dreamweaver8操作界面操作界面掌握怎样规划站点结构掌握怎样规划站点结构掌握网页文件基本操作掌握网页文件基本操作88 能力目标能力目标熟悉工作界面和使用各种面板熟悉工作界面和使用各种面板能够建立和管理当地站点能够建立和管理当地站点熟练网页文件基本操作熟练网页文件基本操作第第第第3 3章章章章 Dream weaverDream weaver基础基础基础基础第56页3.1 Dream weaver 8工作界面工作界面3.2 规划与创建站点规划与创建站点3.3 网页文件基本操作网页文件基本操作本章小结本章小结第第第第3 3章章章章 Dream weaverDream weaver基础基础基础基础第57页3.1 Dream weaver 8工作界面工作界面3.1.1 开启开启Dreamweaver83.1.2 Dreamweaver8操作界面操作界面第58页单击单击“开始开始”按钮，在开始菜单中依次选择按钮，在开始菜单中依次选择“程序程序”“Macromedia”“Macromedia Dreamweaver8”，开启，开启Dreamweaver8程序。开启程序。开启Dreamweaver8后出后出现开始界面。现开始界面。3.1.1 3.1.1 3.1.1 3.1.1 开启和退出开启和退出开启和退出开启和退出Dreamweaver8Dreamweaver8Dreamweaver8Dreamweaver83.1 Dream weaver 8工作界面工作界面第59页在在Dreamweaver8起始页中，单击起始页中，单击“创建新项目创建新项目”下下“HTML”，打开，打开Dreamweaver8工作界面工作界面。3.1.2 Dreamweaver83.1.2 Dreamweaver83.1.2 Dreamweaver83.1.2 Dreamweaver8操作界面操作界面操作界面操作界面3.1 Dream weaver 8工作界面工作界面第60页3.1.2 Dreamweaver83.1.2 Dreamweaver83.1.2 Dreamweaver83.1.2 Dreamweaver8操作界面操作界面操作界面操作界面3.1 Dream weaver 8工作界面工作界面文档工具栏 面板组和文件面板 第61页3.2 规划与创建站点规划与创建站点3.2.1 规划网站整体结构规划网站整体结构3.2.2 建立当地站点建立当地站点3.2.3 管理当地站点管理当地站点第62页规划网站结构要注意以下几个方面：规划网站结构要注意以下几个方面：1文件及文件夹命名要规范文件及文件夹命名要规范2不要将全部文件存放在站点根目录下不要将全部文件存放在站点根目录下3建立子文件夹对文件进行分类存放建立子文件夹对文件进行分类存放4每个主栏目下都建立独立每个主栏