2.5 案例实战：使用编码设计网页
Dreamweaver CC不仅提供了强大的可视化操作环境，也提供了功能全面的编码环境。这种代码编写环境能适应各种类型的Web应用开发，从编写简单的HTML代码到设计、编写、测试和部署复杂的动态网站以及Web应用程序。
在Dreamweaver CC主窗口中，包括4种视图：【代码】视图、【拆分】视图、【设计】视图和【实时视图】视图，如图2.47所示。
图2.47 Dreamweaver CC主窗口中3种视图
（1）【代码】视图：在该视图状态下，可以用HTML标记和属性控制网页效果，同时，可以查看和编辑网页源代码，在如图2.47所示的新建文档中，系统已经建立了网页基本结构，并设置了页面基本信息。对于熟练掌握HTML语言的用户，使用该视图设计网页会更轻松自由，更能发挥HTML语言的威力。
（2）【拆分】视图：在该视图状态下，编辑窗口被拆分为左右两个部分，左侧窗口显示源代码，右侧窗口显示可视化视图，这样可以方便在两种视图间进行比较操作。
（3）【设计】视图：该视图是比较常用的一种视图，它是在可见即可得状态下操作，即当前编辑的效果和发布网页中的效果相同。
（4）【实时视图】视图：当页面包含复杂的脚本、特效样式，或者页面是动态网页时，在【设计】视图下是看不到效果的，此时只有通过实时视图才能够看到最终效果。
使用【代码】视图制作网页与【设计】视图制作网页稍微不同。下面介绍制作一个简单的页面。
【操作步骤】
第1步，启动Dreamweaver CC，单击【代码】按钮，切换到【代码】视图，如图2.47所示。
第2步，先设置页面头部信息，由于系统已经设置了HTML文档基本结构和页面基础信息，因此，可以先保持默认值，当需要时，再不断充实。只需重定义<title>标记中网页标题，如图2.48所示。
图2.48 定义网页标题
第3步，在<body>和</body>标记之间输入网页源代码文本内容，例如“<h1>学好Dreamweaver，网页设计真不怕。</h1>”，如图2.49所示。其中，<h1>标记表示一级标题。
图2.49 输入页面内容
第4步，选择【文件】｜【在浏览器中预览】｜【IEXPLORE】命令，或者按F12键，即可在浏览器中观看到网页效果，如图2.50所示。
图2.50 网页预览效果
如果在运行时没有保存页面，系统会弹出一个提示对话框，提示用户先保存页面。