《HTML语言与网页设计1(精品).ppt》由会员分享,可在线阅读,更多相关《HTML语言与网页设计1(精品).ppt(40页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、HTML语言与网页设计语言与网页设计HTML基础基础学习目标学习目标l理解网页的基本原理。理解网页的基本原理。l掌掌握握HTMLHTML语语言言的的语语法法规规则则,掌掌握握基基本本的网页标记符和属性。的网页标记符和属性。l了解网页制作的常用工具。了解网页制作的常用工具。Part 1网页的基本概念网页的基本概念Internet 与与 WWWl通俗地讲,通俗地讲,Internet 就是许多功能不就是许多功能不同的计算机通过线路连接起来组成的同的计算机通过线路连接起来组成的一个世界范围的网络。一个世界范围的网络。Internet 与与 WWWlInternet 提供的服务:提供的服务:WWW服务(
2、网上冲浪)服务(网上冲浪)电子邮件服务(电子邮件服务(Email)网上传呼(网上传呼(OICQ)文件传输(文件传输(FTP)网络游戏(如网络游戏(如 MUD、联网对战)联网对战)WWW 与浏览器与浏览器lWWW是由遍布在是由遍布在 Internet 上的称为上的称为 Web 服务器的计算机组成,它将不服务器的计算机组成,它将不同的信息资源有机地组织到一起,通同的信息资源有机地组织到一起,通过浏览器进行浏览。过浏览器进行浏览。WWW 与浏览器与浏览器网站与主页网站与主页 l在逻辑上可视为一个整体的一系列页在逻辑上可视为一个整体的一系列页面的有机集合称为网站面的有机集合称为网站(Web Site或
3、或Site)。)。l作为一个组织或个人作为一个组织或个人在在 WWW(或其或其他他Web)上开始点的页面称为主页上开始点的页面称为主页(Homepage)。)。HTML 的基本工作原理的基本工作原理lHTML(Hypertext Markup Language)是一种规范,一种标准,是一种规范,一种标准,它通过标记符它通过标记符(tag)来标记要显示来标记要显示的网页的各个部分。的网页的各个部分。HTML的基本工作原理的基本工作原理l通过在网页中添加标记符,可以告诉通过在网页中添加标记符,可以告诉浏览器如何显示网页,即确定内容的浏览器如何显示网页,即确定内容的格式。浏览器按顺序阅读网页文件格式
4、。浏览器按顺序阅读网页文件(HTML文件),然后根据内容周围文件),然后根据内容周围的的HTML标记符解释和显示各种内容。标记符解释和显示各种内容。HTML的基本工作原理的基本工作原理演示演示HTML的基本原理的基本原理Part 2HTML基础基础 标记符概述标记符概述 l在在 HTML 中,所有的标记符都用尖括中,所有的标记符都用尖括号括起来。例如,号括起来。例如,、。lHTML 标记符是不区分大小写的。标记符是不区分大小写的。、和和没有区没有区别别。标记符概述标记符概述 l绝大多数标记符都是成对出现的,包绝大多数标记符都是成对出现的,包括开始标记符和结束标记符。某些标括开始标记符和结束标记
5、符。某些标记符,例如记符,例如,只要求单一标记只要求单一标记符号。符号。l开始标记符与结束标记符的区别在于:开始标记符与结束标记符的区别在于:结束标记符多一个斜杠结束标记符多一个斜杠“/”(不是(不是反斜杠反斜杠“”!)!)标记符属性标记符属性 l属性是用来描述对象特征的特性。属性是用来描述对象特征的特性。例如,一个人的身高、体重就是人例如,一个人的身高、体重就是人这个对象的属性这个对象的属性。l在在HTML中,所有的属性都放置在开中,所有的属性都放置在开始标记符的尖括号里,多个属性之始标记符的尖括号里,多个属性之间用空格分开,通常也不区分大小间用空格分开,通常也不区分大小写。写。标记符属性标
6、记符属性 l例如,可以用字体标记符和字号属例如,可以用字体标记符和字号属性指定文字的大小。性指定文字的大小。本行字将以较小字体显示。本行字将以较小字体显示。演示演示属性的作用属性的作用Web页的基本结构页的基本结构l一个一个 Web 页实际上对应于一个页实际上对应于一个 HTML 文件文件,HTML 文件以文件以.htm 或或.html 为扩展名。为扩展名。l最基本最基本的的HTML文档包括文档包括:HTML标标记记、首部标记首部标记和和、以及正文以及正文。HTML标记符标记符 l HTML和和/HTML 是是WebWeb页的第一个页的第一个和最后一个标记符,和最后一个标记符,Web Web
7、页的其他所页的其他所有内容都位于这两个标记符之间。这有内容都位于这两个标记符之间。这两个标记告诉浏览器或其他阅读该页两个标记告诉浏览器或其他阅读该页的程序,此文件为一个的程序,此文件为一个WebWeb页。页。HEAD标记标记符符 l首部标记首部标记和和位于位于 Web 页的开头,其中不包括页的开头,其中不包括 Web 页页的任何实际内容,而是提供一些与的任何实际内容,而是提供一些与 Web 页有关的特定信息。页有关的特定信息。HEAD标记标记符符 l首部标记中的内容也用相应的标记符首部标记中的内容也用相应的标记符括起来。例如,样式表括起来。例如,样式表(CSS)定义定义位于位于和和之间;脚之间
8、;脚本定义位于本定义位于之之间。间。TITLE 标记符标记符l在首部标记符中,最基本、最常用的在首部标记符中,最基本、最常用的标记符是标题标记标记符是标题标记和和,用于定义网页的标题。用于定义网页的标题。l当网页在浏览器中显示时,网页标题当网页在浏览器中显示时,网页标题将在浏览器窗口的标题栏中显示。将在浏览器窗口的标题栏中显示。演示演示TITLE的作用的作用BODY标记符标记符 l正文标记符正文标记符和和包包含含Web 页的内容。文字、图形、链页的内容。文字、图形、链接以及其他接以及其他HTML元素都位于该标记元素都位于该标记符内。符内。l正文标记符中的文字,如果没有其他正文标记符中的文字,如
9、果没有其他标记符修饰,则将以无格式的形式显标记符修饰,则将以无格式的形式显示。示。小节小节 l综上所述,一个不包含任何内容的基综上所述,一个不包含任何内容的基本本 Web 页文件如下所示:页文件如下所示:背景颜色背景颜色 l在在标记符中使用标记符中使用BGCOLOR属性可以为网页设置背景颜色。属性可以为网页设置背景颜色。l在在 HTML 中,除了使用颜色名称以外,中,除了使用颜色名称以外,还可以用格式还可以用格式#RRGGBB 来表示颜色。来表示颜色。演示演示设置网页背景颜色设置网页背景颜色背景图案背景图案l使用使用 BODY 标记符的标记符的 BACKGROUND 属性可以设置背景属性可以设
10、置背景图案图案。HTML语句为:语句为:演示演示设置网页背景图案设置网页背景图案字符和链接的颜色字符和链接的颜色l设置正文和链接颜色时,可以使用设置正文和链接颜色时,可以使用 BODY 标记符的标记符的 TEXT、LINK、VLINK 和和 ALINK 属性。属性。l其中其中,TEXT 属性用于设置正文的颜色属性用于设置正文的颜色;LINK 属性用于设置未被访问的链接的颜属性用于设置未被访问的链接的颜色;色;VLINK 用于设置已被访问过的链接的用于设置已被访问过的链接的颜色;颜色;ALINK 用于设置活动链接(即当前用于设置活动链接(即当前选定的链接)的颜色。选定的链接)的颜色。演示演示设置
11、字符和超链接的颜色设置字符和超链接的颜色演示演示设置网页背景声音设置网页背景声音l在在HEAD中添加:中添加:演示演示创建与测试网页创建与测试网页Page5Part 3网页制作工具网页制作工具 网页编辑工具网页编辑工具lHTML 编辑器编辑器 HotDogBBEdit(Mac)CuteHTML网页编辑工具网页编辑工具lWYSWYG 编辑器编辑器Macromedia DreamweaverMicrosoft FrontPageAdobe GoLiveSoftQuad HotMetal素材处理与创作工具素材处理与创作工具l图像浏览与处理图像浏览与处理ACDSeePhotoshopFireworksPhotoImpactl矢量图创作工具矢量图创作工具FreeHandCorelDrawIllustrator 素材处理与创作工具素材处理与创作工具l特效制作工具特效制作工具AnfyCool 3DGIF Animatorl多媒体制作工具多媒体制作工具FlashDirectorAuthorwareLiveMotionThats all for this chapter!
限制150内