HTML+CSS+JavaScript前端开发（慕课版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.1.3 使用Dreamweaver创建一个HTML5页面

使用Dreamweaver创建一个HTML5页面

下面将通过一个实例介绍使用Dreamweaver创建一个HTML5页面的具体步骤。

【例2-1】在HTML5页面中显示网页导航，效果如图2-1所示。

图2-1 在HTML5页面中显示网页头部

（1）打开Dreamweaver CC 2017，进入主窗口，如图2-2所示。在主菜单中选择“文件”/“新建”菜单项，进入Dreamweaver CC 2017的新建文档页面。

图2-2 Dreamweaver 主窗口

（2）进入新建文档选择页面后，单击文档类型的“HTML”，然后选择“HTML5”，最后单击“创建”按钮，进入Dreamweaver CC 2017的操作页面，如图2-3所示。

图2-3 Dreamweaver 新建文档选择页面

（3）进入Dreamweaver CC 2017操作页面后，在<body>和</body>标签之间添加代码，这样就完成了使用Dreamweaver CC 2017创建的第一个网页。实例代码如下。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<title>51购商城主页</title>

</head>

<body>

<p>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#F00" size="-1">亲，请登录免费注册

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机端&nbsp;&nbsp;商城首页</font>&nbsp;&nbsp;

<font color="#000"size="-1">个人中心</font>&nbsp;&nbsp;

<font color="#F00"size="-1">购物车</font>&nbsp;&nbsp;

<font color="#000"size="-1">收藏夹</font></p>

<hr width="1200" align="left">

<img src="images/logo3.png" alt="" hspace='100' width="1000px">

<h3> 全部分类 &nbsp;&nbsp;&nbsp; 首页 &nbsp;&nbsp;&nbsp; 闪购 &nbsp;&nbsp;&nbsp; 生鲜&nbsp;&nbsp;&nbsp;团购&nbsp;&nbsp;&nbsp;全球购</h3>

<img src="images/bnr3.jpg" alt="" width="1200" height="380">

</body>

</html>

上一章目录下一章