网页制作案例教程教学整套教程电子讲义.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第一章 网页那点事,熟系Dreamweaver工具的基本操作,了解Web标准,HTML,学习目标,1,熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。,了解,熟悉,2,了解Web标准，明确HTML、CSS及JavaScript在其中的作用。,目录,1.1,网页概述,1.2,网页制作技术入门,1.3,Dreamweaver工具的使用,1.4,创建第一个网页,点击查看本小节知识架构,点击查看本小节知识架构,点击查看本小节知识架构,知识架构,1.1,网页概述,1.1.1,认识网页,1.1.2,网页名词解释,1.1.3,Web标准,1.2,网页制作技术入门,1.2.1,HTML,1.2.2,CSS,1.2.3,JavaScript,知识架构,1.2.4,网页的展示平台,浏览器,1.3,Dreamweaver工具的使用,知识架构,1.3.1,认识Dreamweaver界面,1.3.2,Dreamweaver初始化设置,1.3.3,Dreamweaver基本操作,本章将从网页概述、网页制作入门以及常用的制作软件等几个方面详细讲解网页的基础知识。,近几年HTML5、CSS3一直是互联网技术中最受关注的两个话题，然而HTML5、CSS3究竟是什么？许多刚刚接触网页制作的初学者也没有一个基本的概念。因此在学习HTML5和CSS3之前，首先需要了解一些与互联网相关的知识，这样有助于初学者理清思路，快速进入到后面章节的学习中。,章节概要,1.1 网页概述,什么是网页？,1.1 网页概述,网页究竟是什么？,说到,网页,，其实大家并不陌生,浏览新闻,查询信息,网上购物,1.1 网页概述,网页,可以看做承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。,本节将详细介绍和网页相关的概念。,1.1.1 认识网页,1.1 网页概述,网页主要由文字、图像和超链接（超链接为单击可以跳转的网页元素）等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画等。,1.1.1 认识网页,1.1 网页概述,淘宝网首页的源代码，这是一个纯文本文件，仅包含一些特殊的符号和文本。而我们浏览网页时看到的图片、视频等，正是这些特殊的符号和文本组成的代码被浏览器渲染之后的结果。,1.1.1 认识网页,1.1 网页概述,用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。,静态网页更新不方便，但是访问速度快。,静态网页,动态网页,显示的内容则会随着用户操作和时间的不同而变化。,动态网页可以和服务器数据库进行实时的数据交换。,静动,混合,1.1.2 网页名词解释,1.1 网页概述,名词,名词释义,Internet网络,就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。,WWW,WWW（英文World Wide Web的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务。,URL,URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”URL其实就是Web地址，俗称“网址”。,DNS,DNS（英文Domain Name System的缩写）是域名解析系统。,HTTP和HTTPS,HTTP(英文Hypertext transfer protocol的缩写)中文译为超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全。,通信的规则。,Web,Web通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。,W3C组织,W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。,1.1.3 Web标准,1.1 网页概述,什么是Web标准？,1.1.3 Web标准,1.1 网页概述,Web,标准,不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。包含我们所熟悉的HTML、XHTML、CSS、Javascript等等。,1.1.3 Web标准,1.1 网页概述,由于不同的,浏览器解析,出来的,效果可能不一致,，开发者常常需要为,多版本的开发,而艰苦工作。,通过Web标准,展示统一内容,1.1.3 Web标准,1.1 网页概述,结构标准,表现标准,行为标准,结构标准,用于对网页元素进行整理和分类，主要包括：,HTML、,XML和XHTML。,表现标准,用于设置网页元素的,版式、颜色、大小,等外观样式，主要指的是,CSS。,行为标准,是指网页模型的定义及交互的编写，主要包括两个部分：,DOM,和,ECMAScript。,1.1.3 Web标准,1.1 网页概述,结构标准,表现标准,行为标准,如果把Web标准看做一栋房子，,结构标准,就相当于,房子的框架。,HTML/XML/XHTML,1.1.3 Web标准,1.1 网页概述,结构标准,表现标准,行为标准,表现标准,就相当于,房子的装修,，让房子看起来更美观,。,CSS,1.1.3 Web标准,1.1 网页概述,结构标准,表现标准,行为标准,行为标准,相当于,房间内部的设备,，让房子具有功能性。,KTV有唱,歌功能,厨房有做,饭功能,DOM/ECMAScript,1.2 网页制作技术入门,HTML,、CSS和JavaScript是网页制作的标准语言，要想学好、学会网页制作技术，首先需要对它们有一个整体的认识。,本节将针对HTML、CSS和JavaScript语言的发展历史、流行版本、开发工具、运行平台等内容进行详细的讲解。,1.2 网页制作技术入门,1.2.1 HTML,HTML(英文Hyper Text Markup Language的缩写)中文译为,“,超文本标签语言,”,，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。,概 述,1.2 网页制作技术入门,1.2.1 HTML,HTML(英文Hyper Text Markup Language的缩写)中文译为,“,超文本标签语言,”,，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。,概 述,HTML2.0,1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布过时。,超文本标签语,言（第一版）,在1993年6月作为互联网工程工作小组（IETF）工作草案发布。,HTML3.2,1997年1月14日，W3C推荐标准。,HTML4.0,1997年12月18日，W3C推荐标准。,HTML4.01,1999年12月24日，W3C推荐标准。,1.2 网页制作技术入门,1.2.1 HTML,HTML(英文Hyper Text Markup Language的缩写)中文译为,“,超文本标签语言,”,，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。,概 述,HTML 5,2014年10月底，W3C宣布HTML5正式定稿，网页进入了HTML5开发的新时代。,【总结】,HTML,语言发展至今，经历了,六个版本,，这个过程中新增了许多,HTML标签,，同时也淘汰了一些标签。,1.2 网页制作技术入门,1.2.2 CSS,CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。,概 述,p,font-size:36px;,color:red;,text-align:center;,字号,颜色,对齐方式,1.2 网页制作技术入门,1.2.3 JavaScript,JavaScript是网页中的一种脚本语言，其前身叫做LiveScript，由Netscape(网景)公司开发。后来在Sun公司推出著名的Java语言之后，Netscape公司和Sun公司于1995年一起重新设计了LiveScript，并把它改名为JavaScript。,概 述,1.2 网页制作技术入门,1.2.4 网页的展示平台,浏览器,IE、火狐和谷歌,是目前,互联网,上的三大,浏览器,，其他常用的,浏览器,还有苹果的,Safari浏览器,和,欧朋浏览器,等。对于一般的网站，只要兼容,IE浏览器,、,火狐浏览器,和,谷歌浏览器,，就能满足绝大多数,用户的需求,。,1.2 网页制作技术入门,1.2.4 网页的展示平台,浏览器,IE浏览器,的全称是,Internet Explorer,，由微软公司推出，直接绑定在,windows操作系统,中，无需下载安装。IE有,6.0、7.0、8.0、9.0、10.0、11.0,等版本。,浏览器内核,浏览器最重要或者说核心的部分是,“,Rendering Engine,”,，翻译为中文是,“,渲染引擎,”,，不过我们一般习惯将之称为,“,浏览器内核,”,。IE浏览器使用Trident作为内核，俗称为,“,IE内核,”,，国内的大多数浏览器都有使用IE内核，例如百度浏览器、世界之窗浏览器等。,1.2 网页制作技术入门,1.2.4 网页的展示平台,浏览器,Mozilla Firefox,中文通常称为,“,火狐,”,，是一个,开源,网页浏览器，使用,Gecko引擎,（非ie内核）。,Firebug,是,火狐浏览器,下的一款开发插件，它集,HTML查看,和,编辑、Javascript控制台、网络状况监视器,于一体，是开发,HTML、CSS、JavaScript,等的得力助手。,Firebug插件内置,在新版本的火狐浏览器中（例如57.0.2.6549版本），Firebug已经结束了其作为火狐浏览器插件的身份，被整合到火狐浏览器内置的,“,Web开发者,”,工具中。使用者可以在火狐浏览器界面菜单栏中选择,“,打开菜单Web开发者,”,选项，查看网页的模块。,1.2 网页制作技术入门,1.2.4 网页的展示平台,浏览器,Google Chrome,又称,谷歌浏览器,，是由Google（谷歌）公司开发的开放,原始码网页浏览器,。该浏览器基于其它开放,原始码,软件所撰写，包括,WebKit,和,Mozilla,，目标是提升,稳定性、速度和安全性,，并创造出简单有效的使用界面。,2013年4月之后，新版本的谷歌浏览器开始使用Blink内核。在目前的浏览器市场，谷歌浏览器依靠其卓越的性能占据着浏览器市场的半壁江山,1.3 Dreamweaver工具的使用,1.2.4 网页的展示平台,浏览器,多学一招：,什么是浏览器内核,浏览器内核是浏览器最核心的部分，负责对网页语法的解释并渲染网页（也就是显示网页效果），是渲染引擎（标准叫法）的通俗叫法。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。,【总结】,1.2 网页制作技术入门,1.2.4 网页的展示平台,浏览器,常见,浏览器,内核,1.3 Dreamweaver工具的使用,为了,方便网页制作，我们通常会选择一些较便捷的辅助工具，如Editplus、notepad+、sublime、Dreamweaver等。其中Dreamweaver工具依靠其可视化的网页制作模式，极大地降低了网站建设的难度，使得不同技术水平的设计师，都能搭建出美观的页面。,本节将详细介绍Dreamweaver工具的使用。,1.3 Dreamweaver工具的使用,1.3.1 认识Dreamweaver界面,双击运行桌面上的软件图标，进入软件界面。在界面布局时，建议大家选择菜单栏中的,“,窗口工作区布局经典,”,选项。,1.3 Dreamweaver工具的使用,1.3.1 认识Dreamweaver界面,选择菜单栏中的,“,文件新建,”,选项，会出现,“,新建文档,”,窗口。这时，在,“,文档类型,”,下拉选项中选择,“,HTML5,”,，即可创建一个空白的HTML5文档。,1.3 Dreamweaver工具的使用,1.3.1 认识Dreamweaver界面,软件的操作界面，主要由六部分组成，包括,菜单栏,、,插入栏,、,文档工具栏,、,文档窗口,、,属性面板,及,其它常用面板,。,1.3 Dreamweaver工具的使用,1.3.1 认识Dreamweaver界面,Dreamweaver菜单栏由各种菜单命令构成，包括,文件,、,编辑,、,查看,、,插入,、,修改,、,格式,、,命令,、,站点,、,窗口,、,帮助,10个菜单项,1、菜单栏,1.3 Dreamweaver工具的使用,1.3.1 认识Dreamweaver界面,在使用Dreamweaver建设网站时，对于一些经常使用的标记，可以直接选择插入栏里的相关按钮，这些按钮一般都和菜单中的命令相对应。,2、插入栏,1.3 Dreamweaver工具的使用,1.3.1 认识Dreamweaver界面,文档工具栏提供了各种,“,文档,”,视图窗口，如,代码,、,拆分,、,设计视图,，还提供了各种查看选项和一些常用操作。,3、文档工具栏,1.3 Dreamweaver工具的使用,1.3.1 认识Dreamweaver界面,文档窗口是Dreamweaver最常用到的区域之一，此处会显示所有打开的文档。单击文档工具栏里的,“,代码,”“,拆分,”“,设计,”,三个选择按钮可变换区域的显示状。,4、文档窗口,1.3 Dreamweaver工具的使用,1.3.1 认识Dreamweaver界面,属性面板主要用于设置文档窗口中所选中元素的属性。在Dreamweaver中允许用户在属性面板中直接对元素的属性进行修改。选中的元素不同，属性面板中内容也不一样。,5、属性面板,表格属性面板,图像属性面板,1.3 Dreamweaver工具的使用,1.3.1 认识Dreamweaver界面,常用面板中集合了网站编辑与建设过程中一些常用的工具。用户可以根据需要自定义该区域的功能面板，通过这样的方式既能够很容易的使用所需面板，也不会使工作区域变得混乱。,6、常用面板,1.3 Dreamweaver工具的使用,1.3.2 Dreamweaver初始化设置,1、设置工作区布局,打开Dreamweaver工具界面，选择菜单栏里的,“,窗口工作区布局经典,”,选项。,1.3 Dreamweaver工具的使用,1.3.2 Dreamweaver初始化设置,2、添加必备面板,设置为,“,经典,”,模式后，需要调出常用的三部分面板，分别为,“,插入菜单,”“,文件面板,“,属性面板,”,。这些面板均可以通过,“,窗口,”,菜单打开,1.3 Dreamweaver工具的使用,1.3.2 Dreamweaver初始化设置,3、设置新建文档,选择,“,编辑首选参数,”,选项（或按【Ctrl+U】组合键），即可打开,“,首选参数,”,面板。选中左侧分类中的,“,新建文档,”,选项，右侧就会出现对应的设置。选取目前最常用的HTML文档类型和编码类型（只需设置红框标识选项即可）。,1.3 Dreamweaver工具的使用,1.3.2 Dreamweaver初始化设置,4、设置代码提示,Dreamweaver拥有强大的代码提示功能，可以提高书写代码的速度。在,“,首选参数,”,面板中可设置代码提示，选择,“,代码提示,”,菜单，然后选中,“,结束标签,”,选项中的第二项，单击,“,确定,”,按钮,1.3 Dreamweaver工具的使用,1.3.2 Dreamweaver初始化设置,5、浏览器设置,Dreamweaver可以关联浏览器，对编辑的网站页面进行预览。在,“,首选参数,”,面板左侧区域选择,“,在浏览器中预览,”,选项，在右侧区域单击按钮，即可打开,“,添加浏览器,”,菜单，按照教材提示操作即可。,1.3 Dreamweaver工具的使用,1.3.3 Dreamweaver基本操作,在启动Dreamweaver工具时，软件界面会弹出一个欢迎页面。,1、新建文档,选择菜单栏中的,“,文件新建,”,选项，会出现,“,新建文档,”,窗口。这时，在,“,文档类型,”,下拉选项中选择,“,HTML5,”,，即可创建一个空白的HTML5文档。,1.3 Dreamweaver工具的使用,1.3.3 Dreamweaver基本操作,选择,“,文件保存,”,选项（或按【Ctrl+S】组合键），如果是第一次保存，会打开,“,另存为,”,对话框。,2、保存文档,执行,“,文件存储为,”,命令（或按,【Ctrl+Shift+S】,组合键），会再次弹出,“,另存为,”,对话框，在该对话框中设置保存,路径、文件名和保存类型,，单击,“,确定,”,按钮，即可将该文件另存为一个新的文件。,1.3 Dreamweaver工具的使用,1.3.3 Dreamweaver基本操作,如果想要打开电脑中已经存在的文件，可以选择,“,文件打开,”,选项（或按【Ctrl+O】组合键），即可弹出,“,打开,”,面板。选中需要打开的,“,文档,”,，单击,“,打开,”,按钮，即可打开被选中的文件。,3、打开文档,1.3 Dreamweaver工具的使用,1.3.3 Dreamweaver基本操作,1）选择,“,文件关闭,”,选项（或按【Ctrl+W】组合键）可关闭选中的文档。,2）单击需要关闭的,“,”,文档窗口标签栏按钮（如图4-24红框标识位置），可关闭该文档。,4、关闭文档,1.4 创建第一个网页,前面我们已经对网页、HTML、CSS以及常用的网页制作工具Dreamweaver有了一定的了解，接下来将通过案例学习如何使用Dreamweaver创建一个包含HTML结构和CSS样式的简单网页。,1.4 创建第一个网页,1、编写HTML代码,1.4 创建第一个网页,2、编写CSS代码,第二章 从零开始构建HTML页面,HTML,文本样式标签,文本格式化标签,文档基本格式,HTML图像标签,学习目标,掌握HTML文档基本格式，能够书写规范的HTML网页。,1,2,掌握标题、段落及文字标签，可以合理地使用它们定义网页元素。,掌握,掌握,掌握,3,掌握图像标签，学会制作图文混排页面。,知识架构,2.1【案例1】简单的网页,1,HTML文档基本格式,2,标签的分类,3,标签的关系,4,页面格式化标签,目录,2.1,【案例1】简单的网页,2.2,【案例2】新闻页面,2.3,【案例3】图文混排,点击查看本小节知识架构,点击查看本小节知识架构,点击查看本小节知识架构,2.2【案例2】新闻页面,知识架构,1,2,3,标签的属性,HTML文档头部相关标签,文本样式标签,4,文本格式化标签,2.3【案例3】图文混排,知识架构,1,常见图像格式,2,图像标签,3,相对路径和绝对路径,4,特殊字符标签,本章将对HTML的基本结构和语法、HTML文本控制标签以及HTML图像标签进行详细讲解。,HTML作为一门标签语言，主要用来描述网页中的文字和图像等信息，其最新版本HTML5更是近年来互联网行业的热门话题。但是具体什么是HTML，又该如何使用HTML标签控制网页中的文字和图像呢？,章节概要,2.1【案例1】简单的网页,在这个信息爆炸的时代，我们经常需要,浏览网页,来获取信息。本节将通过,“,HTML文档基本格式,”,以及,“,标题和段落标签,”,来制作一个简单的网页。,2.1【案例1】简单的网页,简单的网页,效果图,案例效果图,2.1【案例1】简单的网页,知识引入,简单的网页案例知识点,2.1【案例1】简单的网页,1、HTML文档基本格式,传智播客：,传智播客教育科技有限,公司是一家专门致力于高素,质软件开发人才培养的高科,技公司。,此致,敬礼,传智播客学员,写信,需要符合,书信,的,格式要求,【结论】,学习,HTML标签语言,亦不例外，同样需要先掌握它的,基本格式,，遵从相应的,格式规范,。,2.1【案例1】简单的网页,1、HTML文档基本格式,例如：,使用Dreamweaver生成的HTML文档,无标题文档,1、文档类型声明,2、根标签,3、头部标签,4、主体标签,2.1【案例1】简单的网页,1、HTML文档基本格式,在HTML5版本中，文档格式有了一些的变化。,HTML5还简化了标签，让定义字符编码的格式变得更加简单。,注意：,在HTML文档格式中，既可以大写，也可以小写，对整个文档格式并没有什么影响。,2.1【案例1】简单的网页,2、标签的分类,什么是HTML标签？,2.1【案例1】简单的网页,带有“”符号的元素被称为,HTML标签,例如：、,都是,HTML标签,也称为,HTML标记,或,HTML元素,2、标签的分类,2.1【案例1】简单的网页,双标签,也称,体标签,，是指由开始和结束两个标签符组成的标签。,单标签,也称,空标签,，是指用一个标签符号即可完整地描述某个功能的标签。,内容,表示该标签的作用开始，一般称为,“开始标签,表示该标签的作用结束，一般称为,“结束标签”,2、标签的分类,2.1【案例1】简单的网页,2、标签的分类,例如，在HTML中还有一种特殊的标签,注释标签，该标签就是一种特殊功能的单标签。,2.1【案例1】简单的网页,2、标签的分类,多学一招：,为什么要有单标签？,HTML标签的作用原理就是选择网页内容，从而进行描述，也就是说需要描述哪个元素，就选择哪个元素，所以才会有双标签的出现，用于定义标签作用的开始与结束。而单标签本身就可以描述一个功能，不需要选择。例如，水平线标签,按照双标签的语法，它应该写成,“,”,，但是水平线标签不需要选择，本身就代表一条水平线，此时写成双标签就显得有点多余，但是又不能没有结束符号，所以在标签名称后面加一个关闭符，即。,【总结】,2.1【案例1】简单的网页,3、标签的关系,Dreamweaver菜单栏由各种菜单命令构成，包括,文件,、,编辑,、,查看,、,插入,、,修改,、,格式,、,命令,、,站点,、,窗口,、,帮助,10个菜单项,1、嵌套关系,更行时间：2013年09月28日14时08分 来源：,传智播客,标记中包含标记,标记,中又包含了一个内层的,标记,2.1【案例1】简单的网页,3、标签的关系,并列关系也称为兄弟关系，就是两个标签处于同一级别，并且没有包含关系。例如在HTML5的结构代码中，标签和标签就是并列关系。在HTML标签中，无论是单标签还是双标签，都可以拥有并列关系。,2、并列关系,更行时间：2013年09月28日14时08分 来源：,更行时间：2013年09月28日14时08分 来源：,2.1【案例1】简单的网页,4、页面格式化标签,什么是页面格式化标签？,2.1【案例1】简单的网页,4、页面格式化标签,一篇结构清晰的文章通常都会通过标题、段落、分割线等对文章进行结构排列，HTML网页也不例外，为了使网页中的文字有条理地显示出来，HTML提供了相应的页面格式化标签，如标题标签、段落标签、水平线标签和换行标签,2.1【案例1】简单的网页,4、页面格式化标签,HTML提供了6个等级的标题，即、和，从到标题的重要性依次递减。,1、标题标签,h1,h2,h3,h4,h5,h6,标题标签,2.1【案例1】简单的网页,4、页面格式化标签,在网页中使用标签来定义段落。标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。,2、段落标签,段落文本,2.1【案例1】简单的网页,4、页面格式化标签,在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。水平线可以通过标签来定义。,3、水平线标签,2.1【案例1】简单的网页,4、页面格式化标签,在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。水平线可以通过标签来定义。,3、水平线标签,属性名,含义,属性值,align,设置水平线的对齐方式,可选择left、right、center三种值，默认为center，居中对齐显示。,size,设置水平线的粗细,以像素为单位，默认为2像素。,color,设置水平线的颜色,可用颜色名称、十六进制#RGB、rgb(r,g,b)。,width,设置水平线的宽度,可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%。,2.1【案例1】简单的网页,4、页面格式化标签,在word中，按【Enter】键可以将一段文字换行显示，但在网页中，如果想要将某段文本强制换行显示，就需要使用换行标签。,4、换行标签,2.1【案例1】简单的网页,案例实现,效果图,2.2【案例2】新闻页面,互联网,的发展使信息的传递变得,方便、快捷，浏览新闻,成为用户获取信息的重要渠道。其实，新闻页面的制作并不复杂，本案例将运用,标签,及其相关属性制作一个,“,新闻页面,”,。,2.2【案例2】新闻页面,新闻页面,效果图,案例效果图,2.2【案例2】新闻页面,知识引入,新闻页面案例知识点,2.2【案例2】新闻页面,1、标签的属性,标签的属性,字体,位置,字号,颜色,语法格式,内容,2.2【案例2】新闻页面,1、标签的属性,以,一段代码,为例，分析,标签的属性,我是居中显示的文本,align,为属,性名,center,为属性值，表示标题文本居中对齐,2.2【案例2】新闻页面,1、标签的属性,多学一招：,认识键值对,“,键值对,”,可以理解为对,“,属性,”,设置,“,属性值,”,。键值对有多种表现形式，例如color=red、width:200px;等，其中color和width即为,“,键值对,”,中的,“,键,”,（英文key），red和200px为,“,键值对,”,中的,“,值,”,（英文value）。,“,键值对,”,广泛地应用于编程中，HTML属性的定义形式,“,属性=属性值,”,只是,“,键值对,”,中的一种。,【总结】,2.2【案例2】新闻页面,2、HTML文档头部相关标签,标签,用于定义HTML页面的标题，即给网页取一个名字，必须位于,标签,之内。,标签,用于定义页面的,元信息,，可重复出现在,头部标签,中。,2.2【案例2】新闻页面,一个HTML文档,只能含有一对,标签,，,之间的内容将显示在浏览器窗口的,标题栏,中。,网页标题名称,基本语法格式：,2、HTML文档头部相关标签,2.2【案例2】新闻页面,2、HTML文档头部相关标签,设置网页关键字,设置网页描述,设置网页作者,设置字符集,设置页面自动刷新与跳转,2.2【案例2】新闻页面,3、文本样式标签,文本样式标签,用来控制网页中文本的字体、字号和颜色。,基本语法格式,文本内容,2.2【案例2】新闻页面,3、文本样式标签,属性名,含义,face,设置文字的字体，例如微软雅黑、黑体、宋体等,size,设置文字的大小，可以取1到7之间的整数值,color,设置文字的颜色,文本样式标签,常用属性,2.2【案例2】新闻页面,4、文本格式化标签,在网页中，有时需要为文字设置粗体、斜体或下划线等一些特殊显示的文本效果，为此HTML提供了专门的,文本格式化标签,标签,显示效果,和,文字以粗体方式显示（XHTML推荐使用strong）,和,文字以斜体方式显示（XHTML推荐使用em）,和,文字以加删除线方式显示（XHTML推荐使用del）,和,文字以加下划线方式显示（XHTML不赞成使用u）,2.2【案例2】新闻页面,案例实现,效果图,2.3【案例3】图文混排,合理地使用,图文混排,，能使枯燥的网页变得,丰富多彩,。本节将使用,“,图像标签,”,，并通过设置其,“,相对路径,”,来制作一个,图文混排页面,。,2.3【案例3】图文混排,图文混排,效果图,案例效果图,2.3【案例3】图文混排,图文混排,效果图,知识引入,图文混排案例知识点,2.3【案例3】图文混排,GIF,PNG,JPG,PNG,JPG,GIF,最突出的地方就是它,支持动画,，同时GIF也是一种,无损的图像格式,，也就是说修改图片之后，图片质量几乎没有损失。再加上,GIF支持透明,（全透明或全不透明），因此很适合在互联网上使用。,GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。,1、常见图像格式,2.3【案例3】图文混排,GIF,PNG,JPG,JPG,GIF,PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，,PNG最大的优势是体积更小，支持alpha透明,（全透明，半透明，全不透明），并且颜色过渡更平滑，但,PNG不支持动画,。其中PNG-8和GIF类似，只能支持256中颜色，如果做静态图可以取代GIF，而真色彩PNG可以支持更多的颜色，同时,真色彩PNG（PNG-32）支持半透明效果的处理。,1、常见图像格式,2.3【案例3】图文混排,GIF,PNG,JPG,GIF,PNG,JPG,所能显示的颜色比,GIF和PNG,要多的多，可以用来保存超过,256种颜色,的图像，但是,JPG,是一种,有损压缩,的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。,在网页中小图片或网页基本元素如图标、按钮等考虑使用GIF或PNG-8格式图像，半透明图像考虑使用真色彩PNG格式（一般指PNG32），色彩丰富的图片则考虑使用JPG格式，动态图片可以考虑使用GIF格式。,1、常见图像格式,2.3【案例3】图文混排,2、图像标签,浏览网页,时经常会看到,精美的图片,在网页中如何才能显示图像呢？,2.3【案例3】图文混排,2、图像标签,基本语法格式,src属性,用于指定图像文件的,路径和文件名,2.3【案例3】图文混排,2、图像标签,属性,属性值,描述,src,URL,图像的路径,alt,文本,图像不能显示时的替换文本,title,文本,鼠标悬停时显示的内容,width,像素值,设置图像的宽度,height,像素值,设置图像的高度,border,数字,设置图像边框的宽度,vspace,像素值,设置图像顶部和底部的空白（垂直边距）,hspace,像素值,设置图像左侧和右侧的空白（水平边距）,align,left,将图像对齐到左边,right,将图像对齐到右边,top,将图像的顶端和文本的第一行文字对齐，其他文字居图像下方,middle,将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方,bottom,将图像的底部和文本的第一行文字对齐，其他文字居图像下方,2.3【案例3】图文混排,2、图像标签,width,height,用来定义图片的宽度和高度，,通常我们只设置其中的一个，,另一个会按原图等比例显示。,border,为图像添加,边框,、设置,边框的宽度。但,边框颜色,的调整仅仅通过HTML属性是不能够实现的。,alt,图像的替换文本属性,，在图,像无法显示时告诉用户该图,片的内容。,2.3【案例3】图文混排,2、图像标签,vspace,hspace,HTML中通过,vspace和hspace属性,可以分别调整图像的,垂直边距,和,水平边距,。,align,图像的,对齐属性align,。用于,调整图像的位置,2.3【案例3】图文混排,2、图像标签,多学一招：,使用title属性设置提示文字,图像标签,中的属性,title,可以用于设置鼠标悬停时图像的,提示文字,。,例如：,2.3【案例3】图文混排,3、相对路径和绝对路径,什么是路径？,2.3【案例3】图文混排,3、相对路径和绝对路径,实际工作中，通常,新建一个文件夹,专门用于存放,图像文件。,路径,这时再插入图像，就需要采用,“路径”,的方式来指定,图像文件,的位置。通过,设置“路径”,来帮助浏览器找到,图像文件,。,图像文件,文,件,夹,2.3【案例3】图文混排,3、相对路径和绝对路径,绝对,路径,绝对路径,一般是指带有,盘符,的路径，例如“D:HTML+CSS网页制作chapter02imglogo.gif”，或完整的网络地址，例如“,【案例3】图文混排,3、相对路径和绝对路径,1,图像文件和html文件位于同一文件夹：,只需输入图像文件的名称即可，,如,。,2,图像文件位于html文件的下一级文件夹：,输入文件夹名和文件名，之间用“/”隔开，,如,。,3,图像文件位于html文件的上一级文件夹：,在文件名之前加入“./”，如果是上两级，则需要使用“././”，以此类推，,如,。,2.3【案例3】图文混排,4、特殊字符标签,浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。那么如何在网页上显示这些包含特殊字符的文本呢？在HTML中为这些特殊字符准备了专门的替代代码。,特殊字符,描述,字符的代码,空格符,大于号,&,和号,￥,人民币,版权,注册商标,摄氏度,正负号,乘号,除号,平方2（上标2）,立方3（上标3）,2.3【案例3】图文混排,案例实现,效果图,