1.4 综合案例_网页设计与制作（第2版）-QQ阅读女频现言网

1.4 综合案例

用记事本编写一个网页文档

操作步骤：

① 打开记事本，执行“开始”→“程序”→“附件”→“记事本”命令。

② 输入下面的代码，如图1-28所示，显示效果如图1-29所示。

图1-28 用记事本编写网页文档

图1-29 在浏览器中显示的效果

<html>

<head>

<style>

h1{font-family:幼圆;font-size:x-large;color:red}

</style>

<body>

<h1>网页设计与制作是一门实践性和技能性要求很高的学科。</h1>

alert（〝Welcome！My friends.〞）;

</script>

</body>

</html>

操作步骤：

① 打开Dreamweaver CS6的页面，在“设计”视图中录入一首古诗，如图1-30所示。

② 将窗口切换到“代码”视图，如图1-31所示。保存网页文档。按F12键进行浏览，查看结果。

图1-30 用Dreamweaver CS6制作网页

图1-31 查看代码

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 在“代码”视图中查看代码

本周热推：