HTML+CSS+JavaScript网页制作案例教程（第2版）最新章节_黑马程序员著

1.4 创建网页

前面已经简单介绍了网页、HTML、CSS和网页制作工具Dreamweaver的使用，下面将通过案例学习如何使用Dreamweaver创建一个包含HTML结构和CSS样式的简单网页，具体步骤如下。

1.编写HTML代码

Step01. 打开Dreamweaver，新建一个HTML5文档（或按“Ctrl+Shift+N”组合键）。切换到代码视图，这时在文档窗口中会出现Dreamweaver自带的代码，如图1-42所示。

Step02. 在代码的第5行，<title>与</title>标签之间，输入HTML文档的标题，这里将其设置为“我的第一个网页”。

Step03. 在<body>与</body>标签之间添加网页的主体内容，将下面的HTML代码复制到<body>与</body>标签之间：

<p>这是我的第一个网页哦。</p>

至此，就完成了网页的结构部分，即HTML代码的编写。

Step04. 在菜单栏中选择“文件→保存”选项（或按“Ctrl+S”组合键）。然后，在弹出的“另存为”对话框中选择文件的保存地址并输入文件名，单击“保存”按钮，即可保存文件。例如，本书将文件命名为example01.html，保存在“chapter01”文件夹中，如图1-43所示。

图1-42 Dreamweaver自带的代码

图1-43 “另存为”对话框

Step05. 在浏览器中运行example01.html（即双击example01.html文件），效果如图1-44所示。

图1-44 网页运行效果

由于仅仅使用了段落标签<p>，所以浏览器窗口中只显示一个段落文本。

2.编写CSS代码

<style type="text/css"> 
 p{ 
  font-size:36px;       /*设置字号为36像素*/ 
  color:red;             /*设置字体颜色为红色*/ 
  text-align:center;   /*设置文本居中显示*/ 
 } 
</style>

其中“/**/”是CSS注释符，浏览器不会解析“/**/”中的内容，主要用于告知初学者代码的含义。此时网页的代码结构如图1-45所示。

Step02. 在菜单栏中选择“文件→保存”选项（或按“Ctrl+S”组合键），即可完成文件的保存。运行代码文件，网页效果如图1-46所示。

图1-45 网页的代码结构

图1-46 CSS修饰后的网页效果

在图1-46中，通过CSS设置了段落文本的字号、颜色和对齐属性，所以段落文本相应地显示为36像素、红色、居中的样式。