第1章 网页制作基础知识

实训1 我的第一个网页——使用HTML代码制作网页

实训目的

1．了解HTML文档的基本结构。

2．学会使用HTML源代码制作简单网页的方法。

实训步骤

1．在桌面上双击Internet Explorer的快捷图标，启动IE浏览器，在IE浏览器的地址栏中输入网址“http://www.sina.com”并按【Enter】键，在IE浏览器中打开新浪网的主页，如图1-1所示，用户可以浏览新闻、下载资料、登录论坛等。

图1-1 “新浪网”主页

2．选择“查看→源文件”命令，在打开的记事本中显示了当前网页对应的HTML源代码，如图1-2所示。

图1-2 网页源代码

3．将素材中的chapter1文件夹复制到D盘根目录，选择“开始→程序→附件→记事本”命令，打开记事本，在记事本中输入以下HTML代码。

            <html>
              <head>
                  <title>欢迎大家光临</title>
              </head>
              <body>
                  这是我用记事本编写的第一个网页。
              </body>
            </html>

4．代码输入完毕，选择“文件→保存”命令，弹出“另存为”对话框，选择保存位置为D:\chapter1文件夹，文件名为“myweb.html”，保存类型为“所有文件”，如图1-3所示，单击“保存”按钮。

5．在“我的电脑”或“资源管理器”中打开D:\chapter1文件夹，双击myweb.html打开浏览器浏览该网页，如图1-4所示。

图1-4 浏览myweb.html

6．选择“开始→程序→Adobe Dreamweaver CS3”命令，启动Dreamweaver CS3，选择“文件→打开”命令，打开D:\chapter1\myweb.html，如图1-5所示。

图1-5 在Dreamweaver中打开myweb.html

7．单击“文档”工具栏上的“代码”按钮，切换到Dreamweaver CS3的“代码”视图，对代码进行如图1-6所示的修改。

图1-6 Dreamweaver CS3的“代码”视图

8．单击“设计”按钮，切换到“设计”视图，按【F12】键，保存并预览网页，如图1-7所示。

图1-7 修改后的myweb.html网页文件

9．在Dreamweaver CS3中，选择“文件→新建”命令，弹出“新建文档”对话框，如图1-8所示，选择“空白页→HTML”选项，在“布局”列表中选择“无”，单击“创建”按钮，创建一个空白网页。

图1-8 “新建文档”对话框

10．单击“文档”工具栏上的“代码”按钮，切换到“代码”视图，如图1-9所示，在<body>和</body>标记之间添加以下代码。

图1-9 “代码”视图

            <table width="383" height="217" border="1" align="center">
              <tr align="center">
                  <td ><a href="index.html">首页</a></td>
                  <td><a href="http://www.sina.com">新浪网</a></td>
              </tr>
              <tr>
                  <td colspan="2" >美丽的图片<br>
                  <img src="images/huaduo.jpg"width=227 height=134 alt=花朵 /></td>
              </tr>
            </table>

11．单击“设计”按钮，切换到设计视图，选择“文件→保存”命令，在弹出的“另存为”对话框中将文件保存到D:\chapter1文件夹中，文件名为lx.html，保存完毕后，按【F12】键预览网页，如图1-10所示。

知识链接

本周热推：
网页设计与制作Vue.js从入门到项目实践（超值版）HTML+CSS+JavaScript网页制作（第2版）动态网页设计与制作（HTML5+CSS3+JavaScript）（第3版）网页配色设计手册（写给设计师的书）
上一章目录下一章