書名： Dreamweaver CS3網頁制作
作者名：楊杰段欣主編
本章字數： 829字
更新時間： 2019-01-01 06:23:32

第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”選項，在“布局”列表中選擇“無”，單擊“創(chuàng)建”按鈕，創(chuàng)建一個空白網頁。

圖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 >新浪網</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所示。

知識鏈接

官术网_书友最值得收藏!

Dreamweaver CS3網頁制作

第1章 網頁制作基礎知識

實訓1 我的第一個網頁——使用HTML代碼制作網頁

第1章網頁制作基礎知識