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