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

模块1网页制作入门;

1.1HTML简介;

;

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

;

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.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创建站点

;

【案例步骤】

1.准备上机环境

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

;

;

;

;

2.创建站点

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

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

;

创建站点的步骤如下：

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

;

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

;