實驗61 創(chuàng)建站點并掌握編輯網(wǎng)頁的基本操作

1、實驗6.1 創(chuàng)建站點并掌握編輯網(wǎng)頁的基本操作一、實驗?zāi)康?.熟悉Dreamweaver 的工作環(huán)境2.掌握使用Dreamweaver創(chuàng)建站點的基本步驟3.掌握網(wǎng)頁編輯的基本方法二、實驗要求1.掌握使用Dreamweaver創(chuàng)建本地站點的基本步驟。2.掌握使用Dreamweaver 編輯網(wǎng)頁的基本方法，包括對網(wǎng)頁標題、網(wǎng)頁文檔中的標題、無序列表、有序列表、超鏈接等設(shè)置。三、實驗內(nèi)容和步驟（1）【任務(wù)】熟悉Dreamweaver CS6的工作環(huán)境啟動Dreamweaver CS6，可以看到如圖1所示的Dreamweaver CS6的操作界面，它包括如下幾個部分：標題欄、菜單欄、對象面板、標簽選擇欄

2、、頁面區(qū)域、屬性面板、面板組等。圖 1 Dreamweaver CS6軟件的界面1. “文檔”工具欄包含按鈕和彈出式菜單，它們提供各種“文檔”窗口視圖（如“設(shè)計”視圖和“代碼”視圖）、各種查看選項和一些常用操作（如在瀏覽器中預覽）。2. “屬性”面板用于查看和更改所選對象或文本的各種屬性。每種對象都具有不同的屬性。3. “插入”面板包含用于將各種類型的“對象”（如圖像、表格和水平線）插入到文檔中的按鈕。每個對象都是一段 HTML 代碼，允許在插入它時設(shè)置不同的屬性。例如，可以通過單擊“插入”欄中的“表格”按鈕插入一個表格。還可以不使用“插入”欄，而使用“插入”菜單插入對象。通過拖動“插入”欄到

3、Dreamweaver菜單的下部，并在出現(xiàn)一條藍色的提示線時松手，可以把“插入”欄的形式變換為“插入”選項卡。4. “文檔”窗口顯示當前創(chuàng)建和編輯的文檔。在Dreamweaver CS6中可以通過多種視圖方式查看網(wǎng)頁文件，這個特點和Word的多視圖查看類似。Dreamweaver CS6有4種視圖：代碼、設(shè)計、拆分、實時視圖。當關(guān)注文檔的源代碼或者需要編輯源代碼時，可以使用代碼視圖。要實現(xiàn)類似Word的所見即所得功能，通過可視化的方式編輯網(wǎng)頁，可以使用設(shè)計視圖。如果要兼顧以上兩點，可以選擇拆分視圖。在實時視圖下，看到的頁面與用瀏覽器查看的效果一樣，這種視圖是不能編輯文檔的。5. 標簽選擇器用于

4、選擇準確地選擇網(wǎng)頁上的元素。6. CSS樣式面板CSS樣式面板可以用來進行新建CSS規(guī)則、編輯CSS規(guī)則、刪除CSS規(guī)則以及為網(wǎng)頁附加外部樣式表等操作。7. “文件”面板可以管理文件和文件夾，無論它們是 Dreamweaver 站點的一部分還是在遠程服務(wù)器上?！拔募泵姘蹇梢栽L問本地磁盤上的全部文件，非常類似于 Windows 資源管理器。 Dreamweaver還提供了其他面板窗口，例如“多屏預覽”面板、“標簽檢查器”面板、“歷史記錄”面板等。若要打開 Dreamweaver 各面板，請使用“窗口”菜單。（2）【任務(wù)】使用Dreamweaver建立站點站點可以被看作一系列文檔的組合，這些文檔

5、通過各種鏈接建立邏輯關(guān)聯(lián)。為了方便管理網(wǎng)站文件，在使用Dreamweaver CS6設(shè)計網(wǎng)站文件之前，必須先要建立站點，以充分利用Dreamweaver CS6的功能。一旦建立了站點，網(wǎng)站的后期維護也會相對容易。當管理員修改某些站點文件時，Dreamweaver CS6會自動檢索與被修改文件相關(guān)的文件，并提示管理員更新這些文件。Step1. 在C盤創(chuàng)建一個以自己的學號命名的文件夾。Step2. 選擇“站點新建站點”命令，打開“站點設(shè)置對象未命名站點”對話框。圖 2 站點設(shè)置對話框或者選擇“站點管理站點”命令，打開“管理站點”對話框，在對話框中單擊“新建站點”按鈕。圖 3 管理站點對話框Step

6、3. 在對話框中，通過左側(cè)“站點”類別設(shè)置站點名稱和站點文件夾。站點名稱設(shè)置為“我的網(wǎng)站”，“本地站點文件夾”通過點擊 設(shè)置為C盤自己的學號對應(yīng)文件夾?；蛘咭部梢灾苯虞斎?。點擊“保存”。 Step4. 在Dreamweaver的“文件”面板中，可以看到一個空白的站點。圖 4 “文件”面板中的空白站點Step5. 在站點上單擊鼠標右鍵，會出現(xiàn)快捷菜單，從中進行新建文件、新建文件夾、復制、粘貼等操作。通過“新建文件”，創(chuàng)建一個空白的站點主頁文件“index.html”圖 5 創(chuàng)建index.htmlStep6. 從站點的快捷菜單選擇“新建文件夾”，建立images、css、js文件夾，分別用來存放

7、整個站點的圖像文件、CSS樣式表文件、JavaScript文件。圖 6 創(chuàng)建站點通用文件夾Step7. 如果這時通過“資源管理器”觀察C盤的站點文件夾，可以看到一致的文件和文件夾。Step8. 如果通過“資源管理器”在站點文件夾下創(chuàng)建文件，那么在Dreamweaver中需要等待幾秒鐘，或者點擊“文件”面板的刷新按鈕 來同步顯示。圖 7 “文件”面板中的刷新按鈕（3）【任務(wù)】使用Dreamweaver創(chuàng)建和保存網(wǎng)頁除了可以在文件面板創(chuàng)建網(wǎng)頁，在Dreamweaver中可以通過多種方式新建網(wǎng)頁。1通過歡迎頁Step1打開Dreamweaver后，彈出如圖 8所示的歡迎頁，可以單擊中間“新建”欄中的

8、選項，分別創(chuàng)建不同類型的文件。圖 8 歡迎頁Step2單擊“HTML”項，將會創(chuàng)建一個默認名為“Untitled-1.html”的空白網(wǎng)頁文檔，如圖 9所示。圖 9 空白的網(wǎng)頁文檔Step3單擊“更多”項，將打開如圖 10所示的“新建文檔”對話框。在“新建文檔”對話框中，分為4欄，在左側(cè)第1欄中可以選擇創(chuàng)建的文檔類別。如果選擇“空白頁”，則可以選擇“頁面類型”欄中的“HTML”或其他頁面類型。在“布局”欄中，可以選擇“無”或者Dreamweaver內(nèi)置的一些布局類型。圖 10 “新建文檔”對話框在對話框右側(cè)的第4欄中，可以預覽頁面；可以選擇文檔的“文檔類型”，如“XHTML 1.0 Trans

9、itional”；在“附加CSS文件”列表框中，可以把外部的CSS文件附加到新建的網(wǎng)頁中。2通過“文件”菜單通過選擇“文件”菜單中的“新建”命令，可以打開“新建文檔”對話框，新建各種類型的文檔。同時，通過快捷鍵“Ctrl+N”也可以完成新建文件的操作。通過這些方式創(chuàng)建網(wǎng)頁后，需要通過“文件”|“保存”或通過快捷鍵“Ctrl+S”來保存網(wǎng)頁。（4）【任務(wù)】編輯網(wǎng)頁并預覽下面以“中國傳媒大學_原文.docx”為素材，來編輯對應(yīng)的網(wǎng)頁。Step1. 在Dreamweaver 中創(chuàng)建布局類型為“無”的網(wǎng)頁文件，通過“文件”|“保存”或“Ctrl+S”保存網(wǎng)頁為“cuc.html”。Step2. 把素材

10、中的文字復制到網(wǎng)頁中。在Word中選擇所有的文字并復制后，粘貼到Dreamweaver 的設(shè)計視圖。Step3. 設(shè)置網(wǎng)頁標題網(wǎng)頁文件的標題是顯示在瀏覽器標題欄或選項卡中的內(nèi)容，通過Dreamweaver可以用多種方式對網(wǎng)頁標題進行設(shè)置。在文檔工具欄中，在“標題”文本框中直接輸入網(wǎng)頁標題，如圖 11所示。圖 11 通過文檔工具欄設(shè)置網(wǎng)頁標題另外一種方式是單擊“屬性”面板中的“頁面屬性”按鈕，或者選擇菜單命令“修改|頁面屬性”，打開“頁面屬性”對話框。在“標題/編碼”欄的“標題”框中，設(shè)置網(wǎng)頁標題，如圖2.12所示。圖 12通過“頁面屬性”對話框設(shè)置網(wǎng)頁標題Step4. 設(shè)置網(wǎng)頁文檔中的標題通過

11、標題元素，可以為網(wǎng)頁文檔定義良好的文檔結(jié)構(gòu)。標題元素是通過<h1><h6>等標簽進行定義的。瀏覽器會自動地在標題的前、后添加空行，并且標題的文字顯示為加粗的效果。在Dreamweaver中，要把普通段落文字設(shè)置為標題，可以通過 “屬性”面板來完成。把光標定位在欲設(shè)置為標題1的段落文字中，如圖 13所示。圖 13 定位光標然后選擇“屬性”面板的“格式”下拉列表中的“標題1”可以把光標所在的段落設(shè)置為標題1元素。圖 14 通過“屬性”面板設(shè)置文章中的標題圖 15 設(shè)置為標題1的段落Step5. 設(shè)置文章中的無序列表當網(wǎng)頁中需要對多個并列的內(nèi)容進行展示時，可以通過無序列表（U

12、nordered List）來完成。無序列表的每個列表項的前面是項目符號。選擇網(wǎng)頁中“學校的教學單位包括”下面的6個段落，如圖 16所示。圖 16選擇段落文字在“屬性”面板中單擊“項目列表”按鈕，將段落文字設(shè)置為無序列表，效果如圖 17所示。圖 17 無序列表Step6. 設(shè)置文章中的有序列表當網(wǎng)頁中的某些內(nèi)容存在排序關(guān)系時，可以通過有序列表（Ordered List）來完成。有序列表的每個列表項的前面是編號。選擇網(wǎng)頁中“導航鏈接”下面的3個段落，如圖 18所示。圖 18選擇段落文字在“屬性”面板中單擊“項目列表”按鈕，將段落文字設(shè)置為有序列表，效果如圖 19所示。圖 19 有序列表Step7

13、. 設(shè)置超鏈接下面把導航鏈接中的文件設(shè)置為指向目標網(wǎng)頁的超鏈接，其中的三個超鏈接分別是：超鏈接文字超鏈接地址圖書館校內(nèi)郵箱 網(wǎng)絡(luò)服務(wù) 設(shè)置超鏈接可以有多種方式，例如選擇超鏈接文字后，在“屬性”面板的“鏈接”欄中輸入相應(yīng)的網(wǎng)址，如圖 20所示。圖 20 通過“屬性”面板設(shè)置超鏈接也可以在選擇超鏈接文字后，通過點擊“插入”面板中的“超級鏈接”打開“超級鏈接”對話框，在其中設(shè)置鏈接目標，如圖 21所示。圖 21 “超級鏈接”對話框用戶點擊超鏈接后，在默認情況下瀏覽器會使用當前窗口打開目標網(wǎng)頁。如果希望在新的瀏覽器窗口中打開目標網(wǎng)頁，可以通過設(shè)置超鏈接元素的“目標”屬性為“_blank”來完成。在“屬性”面板和“超級鏈接”對話框都可以進行這一屬性的設(shè)置。Step8. 預覽網(wǎng)頁在Dreamweaver 中的設(shè)計視圖中顯示的網(wǎng)頁有時和網(wǎng)頁真正顯示在瀏覽器中的效果是有差異的，因此在Dreamweaver 中編輯完網(wǎng)頁后，需要通過“預覽”功能在瀏覽器中進行查看。Dreamweaver 中提供了快捷鍵“F12”來打開瀏覽器來打開計算機默認的瀏覽器進行預覽?？梢酝ㄟ^“編輯”|“首選參數(shù)”對話框中的“在瀏覽器中預覽”來設(shè)置計算機中安