實驗2 新建HTML網(wǎng)頁 實驗要求 通過實驗，掌握創(chuàng)建HTML網(wǎng)頁的方法，以及如何在網(wǎng)頁中輸入文本、插入日期和水平線等元素，并在屬性面板中進行相應得設置。 說明 在web世界中，內容和樣式起著設計網(wǎng)頁的重要作用。在網(wǎng)頁上輸入、編輯、格式化文本是網(wǎng)絡開發(fā)者的重要工作之一。Dreamweaver 提供了必要的工具使用戶能夠輕松地完成這些任務。對應知識點： 新建、打開和保存文件的方法 在Dreamweaver中創(chuàng)建標題 輸入文本和特殊字符 輸入日期和水平線 實驗素材 將在網(wǎng)頁中顯示的Word電子文檔一份 實驗步驟1啟動Dreamweaver MX 2004 程序，選擇菜單“文件” “新建”命令，打開“新建文檔” 對話框。在對話框“常規(guī)”標簽下選擇“類型”列表中的“基本頁”選項。2隨后在中間顯示的“基本頁”列表中單擊“HTML”選項。如圖2-1所示。3單擊“創(chuàng)建”按鈕，完成HTML網(wǎng)頁的創(chuàng)建，打開HTML網(wǎng)頁進行編輯。 說明 在新啟動的Dreamweaver MX 2004 程序中間位置，會顯示一個快捷菜單“開始頁”面板。選擇中間“創(chuàng)建新項目”列表內的“HTML”選項，可以直接創(chuàng)建HTML網(wǎng)頁。如圖2-2所示。單擊后，打開新建網(wǎng)頁的編輯窗口，進行編輯。 圖2-1 “新建文檔”對話框 圖2-2 選擇HTML 選項如果要在已經(jīng)打開的網(wǎng)頁編輯窗口中創(chuàng)建網(wǎng)頁，也可以有右擊網(wǎng)頁標題欄任意位置，在彈出的快捷菜單中選擇“新建”命令。如圖2-3所示。說明 在Dreamweaver MX 2004 中利用圖2-1所示的對話框創(chuàng)建一個新的頁面時，不僅可以創(chuàng)建普通的HTML頁面，還可以新建包括網(wǎng)頁應用程序在內的其他內容。例如在“類別” 列表 框的“基本頁”選項中，用戶可以在中間的列表框中選擇如“HTML模板”頁面、“庫項目”、“CSS（層疊樣式）”等類型的文檔。在其他的類別中也同樣有許多相關項提供。4在新建網(wǎng)頁編輯窗口，選擇菜單“文件” “保存”命令，或按Ctrl+S鍵打開“另存為”對話框。在對話框“保存在”下拉列表中選擇保存網(wǎng)頁的磁盤位置，在文本示列中選擇的是盤下的“03”文件夾；在“文件名”編輯框內輸入文件名稱“page”；“保存類型”為默認設置即可。如圖所示。 圖2-3 選擇“新建”命令 圖2-4 “另存為”對話框12 Macromedia Dreamweaver MX 2004 試驗手冊5.單擊“保存”按鈕，返回網(wǎng)頁編輯窗口，此時可以看到網(wǎng)頁名稱為變?yōu)椤皃age.htm”。如圖所示。 圖2-4 保存后網(wǎng)頁名稱改變 切換到中文輸入模式，在網(wǎng)頁編輯窗口空白處單擊，在光標處開始輸入文本。首先，輸入網(wǎng)頁標題“系統(tǒng)集成城建信息港網(wǎng)絡工程”。拖動鼠標選項中標題文字。選擇菜單“窗口”“屬性”命令，打開屬性面板。在屬性面板“格式”下拉列表中選擇“標題1”；單擊“粗體”按鈕和“斜體”按鈕；單擊“文本顏色”按鈕，打開調色板，使用吸管選取藍色（色標值為:#0033CC）。如圖2-6所示。此時標題效果和屬性面板如圖2-7所示。 圖2-6 吸取文本顏色 圖2-7 在屬性面板中設置標題效果 說明 標題是用來分隔和介紹文檔的重要部分。 HTML包含6級標題，標題標簽的語法為， 其中n代表從1-6的數(shù)字。 最大的標題為, 最小的是。在Dreamweaver中將文本設置為特定的標題大小有兩種方法。無論哪一中方法，用戶要首先選定要更改的文本。如果用戶將一個單獨的行或段落設計為標題，只需將光標停放在段落中的任意地方就可以了。 8將光標定位在標題右側，按Enter鍵換行。選擇菜單“窗口” “插入”命令，打開插入面板。9單擊左側的向下箭頭，選擇“HTML”選擇，切換到HTML面板。在面板中單擊“水平線”按鈕按鈕，在網(wǎng)頁中插入水平線。如圖所示。圖2-8 插入水平線 選中水平線，在屬性面板中可以設置水平線的寬、高、對齊方式等。10下面需要輸入網(wǎng)頁的詳細內容。通常我們可以將以編輯好的Word文檔直接導入到網(wǎng)頁中。選擇菜單“文件” “導入”“Word文檔”命令，彈出“打開”對話框。11在“打開”按鈕，Word文檔中的內容將立即出現(xiàn)在網(wǎng)頁中。Dreamweaver對于文本編輯所起的作用，就像一個字處理程序。在段落前面設置中文輸出方式為全角，按兩次空格鍵，使段落前空兩格。當文本超出右頁邊界的時候，文字會自動地換到下一行中。按Enter鍵可以結束當前的段落，并開始下一個段落。13選中“用戶需求分析”小標題，在屬性面板“格式”下拉列表中選擇“標題”。單擊屬性面板中“編號列表”按鈕按鈕，文字縮進并顯示標題號“”。單擊屬性面板的“列表項目”按鈕按鈕，打開“列表屬性”對話框。14 Macromedia Dreamweaver MX 2004 實驗手冊14在對話框“樣式”下拉列表中選擇“大寫羅馬字母”選項。如圖2-10所示。單擊“確定”按鈕，標題號1將變成大寫羅馬字母I。 圖2-9 復制文字內容 圖2-10 “列表屬性”對話框15同樣對“方案設計、實施”小標題做如上設置，但需要在“列表屬性”對話框“開始計數(shù)”編輯框內輸入“”，這樣就會按序排列，效果如圖2-11所示。 圖2-11 編號列表效果 說明 編號列表的主要有點是：在連續(xù)的段落中，它能自動地產(chǎn)生列表項目的編號，并且當用戶進行編輯時，會自動地重新進行編號。在編號樣式中有許多可選項，如小寫羅馬字母、小寫字母、大寫字母等。16選中“分為下面幾個系統(tǒng)”文字后面的若干段落，單擊屬性面板中“項目列表”按鈕按鈕。如圖所示。此時文字顯示效果如圖。 說明在字處理和排版軟件中所提到的項目編號列表，在Dreamweaver中稱為無序列表。當被排列項目的順序不重要時，就可以采用無序列表。每一個無序列表項目都以一個領頭的字符作為開始，行的其它部分被縮進。默認時，領頭的字符是符號；在HTML中，通過CSS樣式還可以使用轉義字符和自定義項目符號來指定另外兩種標志符號，甚至可以使用乳片作為項目符號。17選中其它文字內容，在屬性面板中選擇“大小”下拉列表中的“14”選項，單位為“像素（px）”。 圖2-12 選中段落單擊“項目列表”按鈕 圖2-13 項目列表效果 說明 字體大小列表中能夠不僅有7種不同的大小供選擇（絕對大小），還可以選擇與頁面的基本字體相關的大小（相對大小）。18在段落最后，按Enter鍵換行。輸入文字“最后更新時間：”，單擊“插入”面板菜單項，選擇“常用”選項，在“常用”面板中單擊“日期”按鈕按鈕，打開“插入日期”對話框。19在對話框“星期格式”、“日期格式”、“時間格式”下拉列表中分別選擇相應的格式。如圖 2-14所示。 圖2-14 “插入日期”對話框 說明 在“插入日期”對話框中選擇“儲存時自動更新”多選框，這樣每次保存網(wǎng)頁后日期會自動顯示為最后更新日期。這對于新聞網(wǎng)頁很有必要。 20單擊“確定”按鈕，在網(wǎng)頁中顯示當前日期和時間。如圖2-15所示。 圖2-15 網(wǎng)頁中插入日期和時間21在日期后單擊，按Enter鍵換行。選擇“插入”面板的“HTML”選項，單擊“水平線”按鈕，插入水平線。16 Macromedia Dreamweaver MX 2004 實驗手冊 22按Enter鍵換行，輸入文字“北京企業(yè)自動網(wǎng)版權所有”。選中文字，在屬性面板中單擊“居中對齊”按鈕按鈕，使文字顯示在網(wǎng)頁中間。23把光標定位在“版權所有”前，選擇菜單“插入” “HTML” “特殊字符” “版權”命令，在文字內插入版權標記。如圖2-16所示。 說明 在特殊字符菜單中還有一些經(jīng)常會用到的字符項，如注冊商標、英鎊標記、日元標記、歐元標記等。選擇“其他字符”選項，彈出“插入其他字符”對話框，可以插入更多的字符。如圖2-17所示。在“插入”面板的“文本”選項中同樣可以找到這些特殊字符。 圖2-16 插入版權標記 圖2-17 “插入其他字符”對話框24選擇菜單“文件” “保存”命令，或按Ctrl+S鍵即可保存網(wǎng)頁。25選擇菜單“文件” “在瀏覽器中預覽”“iexplore”命令，或按F12鍵，彈出IE瀏覽器察看完成之后的網(wǎng)頁效果。如圖2-18所示圖2-18 瀏覽網(wǎng)頁效果 實驗作業(yè) 模仿1 在Dreamweaver MX 2004 編輯窗口下，創(chuàng)建HTML網(wǎng)頁。2 保存新建網(wǎng)頁，在“另存為”對話框中設置網(wǎng)頁名為“page”。3 在網(wǎng)頁內導入Word文檔，并在屬性面板中進行文字標題、大小、顏色、對其方式等文