![网页设计与制作:HTML+CSS+JavaScript标准教程](https://wfqqreader-1252317822.image.myqcloud.com/cover/37/53181037/b_53181037.jpg)
1.4.3 创建第一个网页
创建第一个网页的步骤如下。
(1)双击打开Dreamweaver软件,进入新建项目界面,如图1.10所示。
![](https://epubservercos.yuewen.com/B16CC6/31664822703098206/epubprivate/OEBPS/Images/figure-0018-0031.jpg?sign=1739469429-Tg45gcYdrDOZwPFQ32uWm5pxgHcc9wbS-0-0acb390888f80af4b7e10a848760cc58)
图1.10 新建项目界面
(2)在新建项目界面中可以选择创建HTML、PHP、CSS、JavaScript等多种语言的项目。这里选择创建HTML项目,创建后如图1.11所示。
(3)该项目中的代码就是 HTML 代码。该项目的功能是在<body>标签和</body>标签之间添加字符串“HelloHTML!”。
(4)选择“文件”→“保存”选项,弹出保存 HTML 文档的“另存为”对话框,如图1.12所示。
![](https://epubservercos.yuewen.com/B16CC6/31664822703098206/epubprivate/OEBPS/Images/figure-0018-0032.jpg?sign=1739469429-V7spR78B6mFibfTyV9kXJpSKWlBpgPAj-0-7f2c26dbc7dfd77282819375cfe771e9)
图1.11 创建HTML项目
![](https://epubservercos.yuewen.com/B16CC6/31664822703098206/epubprivate/OEBPS/Images/figure-0018-0033.jpg?sign=1739469429-hovfHKseYOWWw7osPJSJaGJghEn8G4cG-0-bff43898057d0387f6d783503e2f8864)
图1.12 “另存为”对话框
(5)修改文件名为01.html,然后单击“保存”按钮。在对应的目录中即出现一个名为01.html的文件,如图1.13所示。
(6)双击01.html文件会打开IE浏览器,在IE浏览器中展示了一行文本内容“HelloHTML!”,效果如图1.14所示。
![](https://epubservercos.yuewen.com/B16CC6/31664822703098206/epubprivate/OEBPS/Images/figure-0018-0034.jpg?sign=1739469429-j36QdVw11Ymg4wP1oXOHEwBSvwSUbKqE-0-df7559ed33e458d2fd9cd4cc6cd66def)
图1.13 01.html
![](https://epubservercos.yuewen.com/B16CC6/31664822703098206/epubprivate/OEBPS/Images/figure-0018-0035.jpg?sign=1739469429-h7XKjKG4rsExqjyXM9dozo4oSilxKjs9-0-1215431b38021924b8750443e3fc25f8)
图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是网页设计初学者学习网页编程的首选工具。