《HTML5+CSS3网页制作教程》课件-第1章

模块1网页制作入门1.1HTML简介1.2前端开发工具1.3案例：使用Dreamweaver创建站点思考与练习题

1.1HTML简介

1.1.1初识HTML

HTML的全称是“HyperTextMarkupLanguage”，即超文本标记语言，网页就是用HTML语言编写的。HTML是一种描述性的语言，比较容易入门。

为了更直观地给大家呈现网页制作语言HTML，可以打开W3school的网站首页，如图1-1所示。

图1-1W3school网站首页

右击鼠标，选择“查看页面源代码”(如图1-2所示)，可查看编写该网页的HTML编码(如图1-3所示)。图1-2查看页面源代码

图1-3W3school网站首页的HTML编码

1.1.2 HTML的发展历程

HTML是由Web的发明者TimBerners-Lee和同事DanielW.Connolly于1990年创立的一种标记语言。用HTML将所需要表达的信息(如网页上面的影像、声音、图片、文字、动画、影视等内容)按照某种规则编写成超文本文档或HTML文档，这些HTML文档独立于各个操作系统平台(如Windows、Mac等)。浏览器可以识别这些HTML文件，并将其“翻译”成可以识别的信息，最终形成了我们所见到的网页。

HTML从被发明使用开始，历史版本如下：

(1)HTML1.0，1993年6月作为互联网工作小组(IETF)工作草案发布。

(2)HTML2.0，1995年11月作为RFC1866发布，于2000年6月被宣布已经过时。

(3)HTML3.2，1997年1月14日发布，W3C推荐标准。

(4)HTML4.0，1997年12月18日发布，W3C推荐标准。

(5)HTML4.01(微小改进)，1999年12月24日发布，W3C推荐标准。

(6)HTML5，是公认的下一代Web语言，它极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。InternetExplorer8及以前的版本不支持HTML5。

1.2前端开发工具

1.2.1 DreamweaverDreamweaver，简称DW，是Adobe公司研发的一款网页开发工具，深受广大用户(特别是初学者)的喜爱。现在的最新版本是DreamweaverCC。对于初学者来说，Dreamweaver是首选。

1.2.2 HBuilder

HBuilder是数字天堂推出的一款支持HTML5的Web开发集成工具，目前官方主推的是升级版HBuilderX。H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本，简称HX。HBuilder主体本身是由Java编写的，它的特点是快，这是HBuilder的最大优势。通过完整的语法提示和代码输入法、代码块等，可以大幅提升HTML、JS、CSS的开发效率。HBuilderX为C++架构，启动速度、大文档打开速度、编码提示速度都更快，可达到极速响应。

1.2.3 SublimeText

SublimeText是一款流行的代码编辑器软件，也是HTML文本编辑器，拥有漂亮的用户界面和极其强大的功能，是深受许多程序员喜欢的一款文本编辑器软件。

SublimeText支持多种编程语言的语法高亮，拥有优秀的代码自动完成功能，还拥有代码片段(Snippet)的功能，即可以将常用的代码片段保存起来，在需要时随时调用。它

还支持VIM(文本编辑器)模式，可以使用VIM模式下的多数命令。

SublimeText具有良好的扩展能力、完全开放的用户自定义配置，以及神奇实用的编辑状态恢复功能，支持强大的多行选择和多行编辑。该编辑器在界面上比较有特色的是支持多种布局和代码缩略图。利用右侧的文件缩略图滑动条，可以方便地观察当前窗口在文件中的位置。

SublimeText具有编辑状态恢复的能力，即当你修改了一个文件，没有保存就退出时，软件不会询问用户是否保存，但在下次启动软件后，之前的编辑状态都会被完整恢复。

1.3案例：使用Dreamweaver创建站点

【案例描述】使用Dreamweaver创建一个站点，学习如何在计算机中搭建上机环境。【考核知识点】使用Dreamweaver创建站点。【练习目标】(1)熟悉Dreamweaver软件环境。(2)掌握站点的创建方法。

【案例步骤】

1.准备上机环境

首先在计算机上安装Dreamweaver，下载并双击文件夹中的安装程序(Setup.exe)进行安装，安装过程中需要登录(没有Adobe账户的用户需要先行注册)，登录后安装程序会自动运行。接受软件的安装许可协议后，会进入软件的第一次使用界面，设置软件的工作区和主题后，即可进入软件主界面，如图1-4～图1-6所示。

图1-4安装界面

图1-5安装进程

图1-6软件主界面

2.创建站点

一个站点是一个存储区，它存储了一个网站包含的所有文件。通俗一些说，一个站点就是一个网站所有内容存放的文件夹。Dreamweaver的使用是以站点为基础的，所以在使

用Dreamweaver之前，必须要创建一个本地站点。

创建站点的步骤如下：

(1)在计算机中选择合适的目录，新建一个文件夹。如在D盘建立一个名为“站点测试”的文件夹，如图1-7所示，将所有相关的网页文件和文件夹都存储在该文件夹中。

图1-7新建的“站点测试”文件夹

(2)启动Dreamweaver，选择“站点”→“新建站点”菜单命令，如图1-8所示。

图1-8新建站点

(3)在弹出的对话框中的“站点名称”文本框中输入“站点测试”，设置“本地站点文件夹”为D盘中新建的“站点测试”文件夹，如图1-9所示。

(4)点击“保存”按钮，站点就创建完了，如图1-10所示，之后在这个目录下新建的文件或文件夹都会显示在右边的目录里面。

图1-9选择本地站点文件夹和名称

图1-10创建好的站点

思考与练习题

一、选择题1.网页的基本语言是()。A.JavaScriptB.VBScriptC.HTML

D.XML

2.HTML是指()。

A.超文本标记语言(hypertextmarkuplanguage)

B.家庭工具标记语言(hometoolmarkuplanguage)

C.超链接和文本标记语言(hyperlinksandtextmarkuplanguage)

D.以上都不正确

3.网页的扩展名是()。

A..html