天天看點

《網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.6 實戰演練——建立基本文本網頁

本節書摘來自異步社群《網站建設與網頁設計從入門到精通dreamweaver+flash+photoshop+html+css+javascript》一書中的第3章,第3.6節,作者:何新起 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

本章主要講述了dreamweaver cs6的操作界面、在網頁中插入文本和設定文本屬性等,下面通過以上所學的知識講述如何建立基本文本網頁,效果如圖3.47所示,具體操作步驟如下。

1 打開原始檔案ch03/3.6/index.htm,将光标置于要輸入文字的位置,如圖3.48所示。

2 在表格中輸入相應的文字内容,如圖3.49所示。

《網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.6 實戰演練——建立基本文本網頁
《網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.6 實戰演練——建立基本文本網頁
《網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.6 實戰演練——建立基本文本網頁

3 選擇文字,在【屬性】面闆中單擊【大小】右邊的文本框,彈出【建立css規則】對話框,在對話框中的【選擇器類型】中選擇“類(可應用于任何html元素)”,在【選擇器名稱】中輸入名稱“.daxiao”,在【規則定義】中選擇“僅限該文檔”,如圖3.50所示。

4 單擊【确定】按鈕,設定【大小】為“12px”,單擊【文本顔色】按鈕,在彈出的顔色框中設定字型顔色為“#663300,如圖3.52所示。

《網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.6 實戰演練——建立基本文本網頁
《網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.6 實戰演練——建立基本文本網頁

5 将光标置于要插入時間的位置,選擇菜單中的【插入】|【日期】指令,彈出【插入日期】對話框,在對話框中進行相應的設定,如圖3.52所示。

6 單擊【确定】按鈕,插入時間,如圖3.53所示。

《網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.6 實戰演練——建立基本文本網頁
《網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript》——3.6 實戰演練——建立基本文本網頁

7 儲存文檔,在浏覽器中的預覽效果如圖3.47所示。