1、第一章 网页制作基础网页基本概念Dreamweaver工具Web 标准HTML与CSS语言简介1.Web基本概念网页究竟是什么？网页究竟是什么？说到说到网页网页，其其实大家并不陌生实大家并不陌生浏览新闻浏览新闻查询信息查询信息网上购物网上购物 1.1.1 认识网页认识网页1.1 Web基本概念 1.1.1 认识网页认识网页以传智播客官网首页为例认识网页：1.1 Web基本概念 1.1.1 认识网页认识网页网页网页主要由文字、图像和超链文字、图像和超链接等接等元素构成。当然，除了这些元素，网页中还可以包含音频、音频、视频视频以及Flash等。1.1 Web基本概念 1.1.1 认识网页认识网页网
2、页是如何形成形成的呢？1.1 Web基本概念 1.1.1 认识网页认识网页 除了首页之外，一个网站通常还包含多个子页面。网页与网页之间通过超链接互相访问。网站由网页构成，网页有静态和动态之分。静态网页是指用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。动态网页显示的内容则会随着用户操作和时间的不同而变化。大部分网站都由静态网页和动态网页混合组成，两者各有千秋，用户在开发网站时可根据需求酌情采用。1.1 Web基本概念 1.1.2 名词解释名词解释与互联网互联网相关的一些专业术语专业术语名词名词名词释义名词释义Internet网络就是通常所说的互联网，是由一些使用公用
3、语言互相通信的计算机连接而成的网络。WWWWWW（英文World Wide Web的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务。URLURL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”URL其实就是Web地址，俗称“网址”。DNSDNS（英文Domain Name System的缩写）是域名解析系统。HTTPHTTP(英文Hypertext transfer protocol的缩写)中文译为超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。WebWeb通常指互联网的使用环境。但对于网站制作者来说，它是一系
4、列技术的复合总称，通常称之为网页。W3C组织W3C（英文World Wide Web Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。1.1 Web基本概念 1.1.3 了解了解Web标准标准为什么为什么需要Web标准？1.1 Web基本概念 1.1.3 了解了解Web标准标准采用web标准的好处好处？1、让Web的发展前景更广阔2、内容能被更广泛的设备访问3、更容易被搜寻引擎搜索4、降低网站流量费用5、使网站更易于维护6、提高页面浏览速度1.1 Web基本概念 1.1.3 了解了解Web标准标准Web标准标准不是某一个标准，而是由W3C和其他标准化组织
5、制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。1.1 Web基本概念 1.1.3 了解了解Web标准标准 结构标准结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。表现标准表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。行为标准行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。1.1 Web基本概念 1.1.3 了解了解Web标准标准XHTML语言描述的网页结构效果三个图片和对应的三段描述文本从上到下依次罗列，不
6、带任何修饰样式。1.1 Web基本概念 1.1.3 了解了解Web标准标准加入CSS后的网页效果使用CSS对文字和图片以及模块的背景和布局都做了相应的设置。1.1 Web基本概念 1.1.3 了解了解Web标准标准加入Javascript后的网页效果左边的三张焦点图会自动切换，当鼠标移上右边的文本时，左边会出现相应的图片，鼠标移开后又会按照默认的设置自动轮播。1.1 Web基本概念 1.1.3 了解了解Web标准标准结构、表现、行为之间的关系关系1.2 网页制作入门 1.2.1 HTML简介简介 HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言
7、”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。HTML之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面。1.2 网页制作入门 1.2.1 HTML简介简介通过传智播客网站的一段源代码和相应的网页结构来认识HTML段落和超链接标记段落和超链接标记图片标记图片标记超链接标记超链接标记1.2 网页制作入门 1.2.1 HTML
8、简介简介HTML语言发展至今，经历了6个版本个版本：超文本标记语言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布。HTML 2.01995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时。HTML 3.21997年1月14日，W3C推荐标准。HTML 4.01997年12月18日，W3C推荐标准。HTML 4.01（微小改进）1999年12月24日，W3C推荐标准。HTML 5的第一份正式草案已于2008年1月22日公布，仍继续完善。1.2 网页制作入门 1.2.1 HTML简介简介 目前最新的HTML版本是HTML5，但是各
9、个浏览器对其支持不统一，所以如今大多数的网站采用的还是HTML4.01版本。XML虽然数据转换能力强大，完全可以替代HTML，但是面对互联网上成千上万基于HTML编写的网站，直接采用XML还为时过早。因此，在HTML4.0的基础上，用XML的语法规则对其进行扩展，得到了XHTML。目前国际上，网站设计推崇的Web标准就是基于XHTML的（即通常所说的DIV+CSS）。1.2 网页制作入门 1.2.2 CSS简介简介 CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML
10、为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。1.2 网页制作入门 1.2.2 CSS简介简介使用CSS设置的网页效果：1.2 网页制作入门 1.2.2 CSS简介简介CSS语言的发展历程发展历程：1996年12月W3C发布了第一个有关样式的标准CSS1。1998年5月发布了CSS2。目前最新的版本是CSS3，但是各个浏览器对它的支持不统一，所以流行的版本仍然是CSS2，即本书所讲解的版本。安装JDK7.0 1.2.2 CSS简介简介CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以.c
11、ss为后缀名。CSS采用的是内嵌方式，虽然与HTML在同一个文件中，但CSS集中写在HTML文档的头部，也是符合结构与表现相分离的。如今大多数网页都是遵循Web标准开发的，即用HTML编写网页结构和内容，而相关版面布局、文本或图片的显示样式都使用CSS控制。1.2 网页制作入门 1.2.3 常见浏览器介绍常见浏览器介绍浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。1.2 网页制作入门 1.2.3 常见浏览器介绍常见浏览器介绍不同的浏览器对同一个CSS样式有不同的解析，这样，同样的页面在不同浏览器下的显示效果可能不同。1.2
12、 网页制作入门 1.2.3 常见浏览器介绍常见浏览器介绍 IE浏览器由微软公司推出，有6.0、7.0、8.0、9.0、10.0等版本，最新的是IE10.0。在制作网页时，低版本一般也是需要兼容的。Mozilla Firefox，中文通常称为“火狐”，Firebug是火狐浏览器下的一款开发插件，是开发HTML、CSS、JavaScript等的得力助手。在实际网页制作过程中火狐浏览器是最常用的浏览器。Google Chrome，又称谷歌浏览器，是由Google（谷歌）公司开发的开放原始码网页浏览器。1.3 Dreamweaver工具的使用工作区布局：1.3.1 Dreamweaver界面介绍界面介
13、绍1.3 Dreamweaver工具的使用新建HTML文档：选择菜单栏中的【文件】【新建】选项，会出现“新建文档”窗口。这时，在文档类型下拉选项中选择XHTML 1.0 Transitional，点击【创建】按钮，即可创建一个空白的HTML文档。1.3.1 Dreamweaver界面介绍界面介绍1.3 Dreamweaver工具的使用操作界面：1.3.1 Dreamweaver界面介绍界面介绍1.3 Dreamweaver工具的使用 1.3.2 Dreamweaver初始化设置初始化设置 工作区布局 必备面板 新建默认文档设置 代码提示 浏览器设置1.3 Dreamweaver工具的使用1.3.3 创建第一个网页创建第一个网页 本章小结 本章主要介绍了网页制作的基础知识网页制作的基础知识，包括网页的形成，与互联网相关的一些名词，Web标准，HTML与CSS语言的特征及发展历程，常用浏览器，Dreamweaver工具的使用等。通过本章的学习，读者应该能够简单地认识网页，了解HTML与CSS语言，熟练熟练地使用网页制作工具地使用网页制作工具Dreamweaver创建简单的网页。创建简单的网页。希望读者以此为开端，完成对本书的学习。
