1.4 综合案例
1.4.1 用记事本编写一个网页文档
用记事本编写一个网页文档
操作步骤：
① 打开记事本，执行“开始”→“程序”→“附件”→“记事本”命令。
② 输入下面的代码，如图1-28所示，显示效果如图1-29所示。
图1-28 用记事本编写网页文档
图1-29 在浏览器中显示的效果
<html>
<head>
<title>欢迎你！我的朋友。</title>
<style>
h1{font-family:幼圆;font-size:x-large;color:red}
</style>
<body>
<h1>网页设计与制作是一门实践性和技能性要求很高的学科。</h1>
<script language=〞Javascript〞>
alert（〝Welcome！My friends.〞）;
</script>
</body>
</html>
1.4.2 用Dreamweaver CS6制作网页文档
操作步骤：
① 打开Dreamweaver CS6的页面，在“设计”视图中录入一首古诗，如图1-30所示。
② 将窗口切换到“代码”视图，如图1-31所示。保存网页文档。按F12键进行浏览，查看结果。
图1-30 用Dreamweaver CS6制作网页
图1-31 查看代码
1.4.3 编写代码实现简单网页
1.上网浏览一个网页，并查看其源代码
① 打开新浪网首页。
② 在浏览网页的窗口菜单栏选择“查看”→“源文件”命令，可查看当前网页的源代码。
③ 将此代码“复制”并“粘贴”到打开的记事本程序的文档中。
④ 在代码中仔细找一找本章讲过的有关标签，看这些标签在网页中的作用。
2.在记事本中编写代码，实现一个简单网页
① 打开记事本应用软件，在其中编写图1-32所示的代码。
② 保存为shici.txt文件后，将其.txt扩展名改为.html文件，即shici.html。
③ 双击即可浏览到如图1-33所示的结果。注意观察代码中的“古诗一首”的位置。
图1-32 记事本中编写的代码
图1-33 浏览器运行结果
3.在网页编辑窗口“设计”视图中实现图像的插入
① 打开Dreamweaver CS6的页面，在“设计”视图中插入事先准备好的图像fengjing1.jpg。
② 将窗口切换到“代码”视图，如图1-34所示。保存网页文档。按F12键进行浏览，查看结果。
图1-34 在“代码”视图中查看代码