网页设计与制作：HTML+CSS+JavaScript标准教程最新章节_倪震著

1.4 开发第一个网页

网页开发语言需要用到专用的网页展示工具和网页开发工具。本节将讲解网页展示工具、网页开发工具，并介绍如何创建第一个网页。

1.4.1 网页展示工具

扫码看微课

网页开发讲解

查看网页需要用到浏览器。浏览器即网页展示工具，也就是网页展示的窗口。用户在浏览器中输入域名，浏览器会访问该域名获取网页，并进行展示。这样，用户就能看到对应的网页内容。

目前比较流行的浏览器有火狐浏览器（Firefox）、欧朋浏览器（Opera）、谷歌浏览器（Chrome）、苹果官方浏览器（Safari），Windows 10自带的浏览器（Edge）以及IE浏览器，如图1.1所示。

图1.1 常用浏览器

在开发过程中要注意浏览器的兼容性问题，编写好的网页需要在多种浏览器中测试，从而保证网页的展示效果在多种浏览器中的一致性。

1.4.2 网页开发工具

网页开发工具有很多种，如记事本、Visual Studio Code和Dreamweaver等。其中，记事本是Windows 系统自带的文本编辑工具；Visual Studio Code 是微软公司开发的代码编辑工具；Dreamweaver是Adobe公司开发的集网页制作和网站管理于一身的网页开发工具。

Dreamweaver不仅支持静态网页的编写，还支持PHP、ASP、JSP等动态网页的编写与调试。对于网页设计初学者来说，Dreamweaver 是一款比较好的入门软件，可以帮助初学者快速构建和设计网页，还提供了网页开发语言的代码提示功能。

Dreamweaver工具的下载和安装步骤如下。

（1）打开Dreamweaver官方网站，在网页中可以获取Dreamweaver的最新版本。单击“免费试用”按钮可下载 Dreamweaver 免费试用版安装包；单击“立即购买”按钮可以购买收费版Dreamweaver，如图1.2所示。在这里选择“免费试用”即可。

图1.2 下载网站

（2）Dreamweaver下载完成后，双击软件安装包弹出安装向导，进入设置文件解压路径界面，如图1.3所示。这里的安装路径默认为C盘，开发者可以根据自身需求，将安装路径设置到其他磁盘中。

（3）单击“下一步”按钮，开始解压安装文件，如图1.4所示。

图1.3 设置文件解压路径界面

图1.4 解压安装文件界面

（4）安装文件解压完成后，进入安装界面，如图1.5所示。

（5）安装界面提供了两个选项。如果拥有序列号，就单击“安装”按钮；如果没有，就单击“试用”按钮。这里单击“试用”按钮进入“Adobe软件许可协议”界面，如图1.6所示。

图1.5 安装界面

图1.6 软件许可协议界面

（6）单击“接受”按钮，进入“选项”界面，如图1.7所示。

图1.7 “选项”界面

（7）设置安装路径后，单击“安装”按钮，开始安装Dreamweaver软件，如图1.8所示。

图1.8 开始安装

（8）Dreamweaver软件安装完成后，显示安装完成界面，如图1.9所示。单击“关闭”按钮结束安装过程，并关闭安装向导；单击“立即启动”按钮会关闭安装向导，并打开Dreamweaver编辑器。

图1.9 安装完成界面

1.4.3 创建第一个网页

创建第一个网页的步骤如下。

（1）双击打开Dreamweaver软件，进入新建项目界面，如图1.10所示。

图1.10 新建项目界面

（2）在新建项目界面中可以选择创建HTML、PHP、CSS、JavaScript等多种语言的项目。这里选择创建HTML项目，创建后如图1.11所示。

（3）该项目中的代码就是 HTML 代码。该项目的功能是在<body>标签和</body>标签之间添加字符串“HelloHTML!”。

（4）选择“文件”→“保存”选项，弹出保存 HTML 文档的“另存为”对话框，如图1.12所示。

图1.11 创建HTML项目

图1.12 “另存为”对话框

（5）修改文件名为01.html，然后单击“保存”按钮。在对应的目录中即出现一个名为01.html的文件，如图1.13所示。

（6）双击01.html文件会打开IE浏览器，在IE浏览器中展示了一行文本内容“HelloHTML!”，效果如图1.14所示。

图1.13 01.html

图1.14 HTML项目的效果

疑难解答

1.为什么HTML+CSS+JavaScript语言组合是网页前端设计的首选组合？

这3种语言的组合符合现在软件开发的MVC（Model View Controller）模式（MVC是模型、视图、控制器的缩写，M代表业务模型，V代表用户界面，C代表业务控制器，使用MVC模式的目的是实现代码分离）。HTML 可以用于网页元素的骨架搭建，CSS 可以对元素进行装饰，JavaScript可以实现网站的动态效果以及数据的动态交互。通过3种语言的配合，可以十分轻松地实现网页的各种展示和交互效果。

2.为什么选择Dreamweaver作为网页设计初学者学习网页编程的首选工具？

Dreamweaver 不但可以帮助开发者快速构建和设计网页，还提供了网页开发语言的代码提示功能，能最大限度地解决网页设计初学者对网页设计语言语法不熟悉的问题。另外，Dreamweaver是一款专门用于网页开发的工具，功能专一性更强，没有太多的干扰开发选项。所以，Dreamweaver是网页设计初学者学习网页编程的首选工具。