1.6 案例实战：使用编码设计网页
视频讲解
Dreamweaver CC不仅提供了强大的可视化操作环境，也提供了功能全面的编码环境。这种代码编写环境能适应各种类型的Web应用开发，从编写简单的HTML代码到设计、编写、测试和部署复杂的动态网站和Web应用程序。
在Dreamweaver CC主窗口中，包括4种视图：【代码】视图、【拆分】视图、【设计】视图和【实时视图】，如图1.42所示。
图1.42 Dreamweaver CC主窗口中的4种视图
☑ 【代码】视图：在该视图状态下，可以用HTML标记和属性控制网页效果，同时，可以查看和编辑网页源代码。
☑ 【拆分】视图：在该视图状态下，编辑窗口被拆分为左右两个部分，左侧窗口显示源代码，右侧窗口显示可视化视图，这样可以方便在两种视图间进行比较操作。
☑ 【设计】视图：该视图是比较常用的一种视图，它是在可见即可得状态下操作，即当前编辑的效果和发布网页中的效果相同。
☑ 【实时视图】：当页面包含复杂的脚本、特效样式，或者页面是动态网页时，在【设计】视图下是看不到效果的，此时只有通过实时视图才能够看到最终效果。
下面使用【代码】视图制作一个简单的页面。
提示，对于零基础的读者来说，初次接触HTML代码，建议先扫码了解什么是HTML结构、标签和属性，这样在Dreamweaver的帮助下，写代码的速度会更快。
线上阅读
【操作步骤】
第1步，启动Dreamweaver，单击【代码】按钮，切换到【代码】视图。
第2步，先设置页面头部信息，由于系统已经设置了HTML文档基本结构和页面基础信息，因此，可以先保持默认值，当需要时，再不断充实。只需重定义<title>标记中的网页标题，如图1.43所示。
图1.43 定义网页标题
第3步，在<body>和</body>标记之间输入网页源代码文本内容，如“<h1>学好Dreamweaver，网页设计真不怕。</h1>”，如图1.44所示。其中<h1>标记表示一级标题的意思。
图1.44 输入页面内容
第4步，选择【文件】|【在浏览器中预览】|【IEXPLORE】命令，或者按F12键，即可在浏览器中观看到网页效果，如图1.45所示。
图1.45 网页预览效果
如果在运行时没有保存页面，系统会弹出一个提示对话框，提示用户先保存页面。