實驗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)頁標(biāo)題、網(wǎng)頁文檔中的標(biāo)題、無序列表、有序列表、超鏈接等設(shè)置。三、實驗內(nèi)容和步驟（1）【任務(wù)】熟悉Dreamweaver CS6的工作環(huán)境啟動Dreamweaver CS6，可以看到如圖1所示的Dreamweaver CS6的操作界面，它包括如下幾個部分：標(biāo)題欄、菜單欄、對象面板、標(biāo)簽選擇欄

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

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

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

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

6、p3. 在對話框中，通過“站點”標(biāo)簽設(shè)置站點名稱和站點文件夾。站點名稱設(shè)置為“我的網(wǎng)站”，“本地站點文件夾”通過點擊 設(shè)置為C盤自己的學(xué)號對應(yīng)文件夾?；蛘咭部梢灾苯虞斎搿｜c擊“保存”。 Step4. 在Dreamweaver的“文件”面板中，可以看到一個空白的站點。圖 4 “文件”面板中的空白站點Step5. 在站點上單擊鼠標(biāo)右鍵，會出現(xiàn)右鍵菜單，從中進(jìn)行新建文件、新建文件夾、復(fù)制、粘貼等操作。通過“新建文件”，創(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)建一個默認(rèn)名為“Untitled-1.html”的空白網(wǎng)頁文檔，如圖 9所示。圖 9 空白的網(wǎng)頁文檔Step3單擊“更多”項，將打開如圖 10所示的“新建文檔”對話框。在“新建文檔”對話框中，分為4欄，在左側(cè)第1欄中可以選擇創(chuàng)建的文檔類別。如果選擇“空白頁”，則可以選擇“頁面類型”欄中的“HTML”或其他頁面類型。在“布局”欄中，可以選擇“無”或者Dreamweaver內(nèi)置的一些布局類型。圖 10 “新建文檔”對話框在對話框右側(cè)的第4欄中，可以預(yù)覽頁面；可以選擇文檔的“文檔類型”，如“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)頁下面以“實驗素材/練習(xí)1中國傳媒大學(xué)_原文.docx”為素材，來編輯對應(yīng)的網(wǎng)頁。完后的網(wǎng)頁在“實驗結(jié)果/練習(xí)1”文件夾下。Step1. 在Dreamweaver 中創(chuàng)建布局類型為“無”的網(wǎng)頁文件，通過“文件”|“保存”或“Ctrl+

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

11、置網(wǎng)頁標(biāo)題Step4. 設(shè)置網(wǎng)頁文檔中的標(biāo)題通過標(biāo)題元素，可以為網(wǎng)頁文檔定義良好的文檔結(jié)構(gòu)。標(biāo)題元素是通過等標(biāo)簽進(jìn)行定義的。瀏覽器會自動地在標(biāo)題的前、后添加空行，并且標(biāo)題的文字顯示為加粗的效果。在Dreamweaver中，要把普通段落文字設(shè)置為標(biāo)題，可以通過 “屬性”面板來完成。把光標(biāo)定位在欲設(shè)置為標(biāo)題1的段落文字中，如圖 13所示。圖 13 定位光標(biāo)然后通過“屬性”面板的“格式”下拉列表中的“標(biāo)題1”可以把光標(biāo)所在的段落設(shè)置為標(biāo)題1元素。圖 14 通過“屬性”面板設(shè)置文章中的標(biāo)題圖 15 設(shè)置標(biāo)題1的段落按照同樣的方式，把文章中的“簡介”、“教學(xué)單位”、“導(dǎo)航鏈接”所在的段落設(shè)置為標(biāo)題2元素

12、。圖 16設(shè)置標(biāo)題2的段落Step5. 設(shè)置文章中的無序列表當(dāng)網(wǎng)頁中需要對多個并列的內(nèi)容進(jìn)行展示時，可以通過無序列表（Unordered List）來完成。無序列表的每個列表項的前面是項目符號。選擇網(wǎng)頁中“教學(xué)單位”下面的6個段落，如圖 17所示。圖 17選擇段落文字在“屬性”面板中單擊“項目列表”按鈕，將段落文字設(shè)置為無序列表，效果如圖 18所示。圖 18 無序列表Step6. 設(shè)置文章中的有序列表當(dāng)網(wǎng)頁中的某些內(nèi)容存在排序關(guān)系時，可以通過有序列表（Ordered List）來完成。有序列表的每個列表項的前面是編號。選擇網(wǎng)頁中“導(dǎo)航鏈接”下面的3個段落，如圖 19所示。圖 19選擇段落文字在

13、“屬性”面板中單擊“項目列表”按鈕，將段落文字設(shè)置為有序列表，效果如圖 20所示。圖 20 有序列表Step7. 設(shè)置超鏈接下面把導(dǎo)航鏈接中的文件設(shè)置為指向目標(biāo)網(wǎng)頁的超鏈接，其中的三個超鏈接分別是：超鏈接文字超鏈接地址校內(nèi)郵箱 網(wǎng)絡(luò)服務(wù) 圖書館 設(shè)置超鏈接可以有多種方式，例如選擇超鏈接文字后，在“屬性”面板的“鏈接”欄中輸入相應(yīng)的網(wǎng)址，如圖 21所示。圖 21 通過“屬性”面板設(shè)置超鏈接也可以在選擇超鏈接文字后，通過點擊“插入”面板中的“超級鏈接”打開“超級鏈接”對話框，在其中設(shè)置鏈接目標(biāo)，如圖 22所示。圖 22 “超級鏈接”對話框用戶點擊超鏈接后，在默認(rèn)情況下瀏覽器會使用當(dāng)前窗口打開目標(biāo)網(wǎng)

14、頁。如果希望在新的瀏覽器窗口中打開目標(biāo)網(wǎng)頁，可以通過設(shè)置超鏈接元素的“目標(biāo)”屬性為“_blank”來完成。在“屬性”面板和“超級鏈接”對話框都可以進(jìn)行這一屬性的設(shè)置。Step8. 預(yù)覽網(wǎng)頁在Dreamweaver 中的設(shè)計視圖中顯示的網(wǎng)頁有時和網(wǎng)頁真正顯示在瀏覽器中的效果是有差異的，因此在Dreamweaver 中編輯完網(wǎng)頁后，需要通過“預(yù)覽”功能在瀏覽器中進(jìn)行查看。Dreamweaver 中提供了快捷鍵“F12”來打開瀏覽器來打開計算機默認(rèn)的瀏覽器進(jìn)行預(yù)覽?？梢酝ㄟ^“編輯”|“首選參數(shù)”對話框中的“在瀏覽器中預(yù)覽”來設(shè)置計算機中安裝的其它瀏覽器來進(jìn)行預(yù)覽。圖 23 首選參數(shù)對話框（5）【任務(wù)

15、】CSS的基本練習(xí)以任務(wù)4完成的網(wǎng)頁為基礎(chǔ)，通過CSS樣式來設(shè)置網(wǎng)頁中不同元素的樣式。Step 1 設(shè)置標(biāo)題1的樣式在“CSS樣式”面板中點擊“新建CSS規(guī)則”按鈕。圖 24 CSS樣式面板在“新建CSS規(guī)則”對話框中設(shè)置選擇器類型為“標(biāo)簽”，選擇器名稱為“h1”,點擊“確定”。在打開的“h1的CSS規(guī)則定義”對話框中可以設(shè)置如字體、字號、斜體等樣式。在font-family的下拉列表中列出了一些默認(rèn)的英文字體的組合。如果需要設(shè)置中文字體，需要選擇下拉列表中的最后一項“管理字體”，如圖 25所示。圖 25 管理字體在“管理字體”對話框的“自定義字體堆?！睒?biāo)簽中，選擇“微軟雅黑”、“黑體”、“宋

16、體”的字體加入到左側(cè)。如果瀏覽器所在的計算機中安裝了微軟雅黑，那么段落文字的字體將是微軟雅黑，而把“黑體”、“宋體”作為候選字體。設(shè)置完成后，回到“h1的CSS規(guī)則定義”對話框，即可以從font-family的下拉列表中找到剛才所定義的字體系列并選擇，如圖 26所示。圖 26 自定義的字體系列網(wǎng)頁中的元素默認(rèn)情況下是左對齊的，通過“區(qū)塊”類別中的“Text-align”為“center”可以設(shè)置標(biāo)題1元素水平居中。圖 27 文字的水平居中接著設(shè)置h1的Font-size為28px。其它的字體設(shè)置，如加粗Font-weight、斜體Font-style請自行練習(xí)。Step 2 設(shè)置標(biāo)題2的樣式使用與編輯標(biāo)題1同樣的方式，通過標(biāo)簽選擇器為標(biāo)題2設(shè)置樣式，設(shè)置標(biāo)題2的字體系列也為“微軟雅黑”、“黑體”、“宋體”，字體大小為24px。圖 28標(biāo)題2的樣式設(shè)置Step 3 設(shè)置普通段落的樣式在“CSS樣式”面板中點擊“新建CSS規(guī)則”按鈕，創(chuàng)建選擇器類型為“標(biāo)簽”，選擇器名稱為“p”的樣式。圖 29 創(chuàng)建段落樣式在“p的CSS規(guī)則定義”對話框中，設(shè)置“text