下载掌阅APP，畅读海量书库
立即打开
素材文件：无 案例文件：最终文件\第2章\2-2-9.html
案例要点：掌握在Dreamweaver中编写网页HTML代码的方法
Step01 执行“文件>新建”命令，弹出“新建文档”对话框，选择HTML选项，如图2-8所示。单击“创建”按钮，新建HTML5文档，在代码视图中可以看到文档的HTML代码，如图2-9所示。
提示
在Dreamweaver CC中新建的HTML页面，默认为遵循HTML5规范，如果需要新建其他规范的HTML页面，可以在“新建文档”对话框的“文档类型”下拉列表中进行选择。
Step02 执行“文件>保存”命令，弹出“另存为”对话框，将该网页保存为“源文件\第2章\2-2-9.html”，如图2-10所示。在页面的<title>与</title>标签之间输入网页的标题，如图2-11所示。
图2-8 “新建文档”对话框
图2-9 HTML页面代码
图2-10 “另存为”对话框
图2-11 输入网页标题
Step03 在<body>标签中添加style属性设置代码，如图2-12所示。在<body>与</body>标签之间编写相应的网页正文内容代码，如图2-13所示。
图2-12 输入样式设置代码
图2-13 编写页面内容代码
提示
在<body>标签中添加style属性设置，实际上是CSS样式的一种使用方式，称为内联CSS样式。此处通过内联CSS样式设置页面整体的背景颜色、水平对齐方式和文字颜色。
Step04 完成该网页HTML代码的编写，在“视图模式”中选择“设计”选项，切换到设计视图，可以看到页面的效果，如图2-14所示。保存网页，在浏览器中预览该网页，可以看到网页的效果，如图2-15所示。
图2-14 设计视图效果
图2-15 预览页面效果
提示
在Dreamweaver中通过不同的视图都可以制作网页，使用Dreamweaver的设计视图制作网页更加直观，但页面的本质还是一个由HTML代码组成的文本。