第4章 文本和樣式

1、lDreamweaver工作環(huán)境l站點創(chuàng)建與管理l制作一個簡單的網(wǎng)頁 制作網(wǎng)頁標題 設置導航欄 設置網(wǎng)頁內(nèi)容 圖像和文字的鏈接 設置頁面屬性 保存網(wǎng)頁 瀏覽網(wǎng)頁 設置首頁及應用站點地圖l建立 新網(wǎng)頁l文本的應用 文本的輸入 文本的格式化 段落格式化lCSS樣式的應用1. 建立新網(wǎng)頁的方法 在Dreamweaver的開始畫面 執(zhí)行“文件” “新建”菜單 命令2. 保存網(wǎng)頁 新網(wǎng)頁的在沒有保存前的默認名稱是：Untitled-n 執(zhí)行“文件”保存“菜單命令3. 設置網(wǎng)頁標題 網(wǎng)頁的工具欄上”標題”選項 輸入標題1. 文本的輸入 所見即所得 將光標定位到要輸入文字的空白區(qū)域 輸入文字 換行回車2.

2、編輯區(qū)域的設置 可編輯區(qū)域，即文字或圖片與網(wǎng)頁的邊距。 在網(wǎng)頁任意位置，單擊鼠標右鍵 打開“頁面屬性”對話框3. 字符格式化 字符格式化主要是設置字體，字體大小，文字的粗細、傾斜及文字的顏色等。 字符格式的設置主要是使用“文本”菜單中的各種命令或者使用“屬性面板”中的各種快捷方式(1) 編輯字體 “編輯字體列表”對話框中編輯網(wǎng)頁可用字體(2) 設置字符格式 字體 字體大小 顏色 粗體 斜體1.設置段落與標題選中文字，可以將此文字設置為段落或標題，將一段獨立的臺詞設置為段落或標題，可以讓整個網(wǎng)頁顯的有層次感，網(wǎng)頁標題分為6級。其操作步驟如下：(1) 在網(wǎng)頁中選中相應的文字。(2) 在“屬性面板”

3、中選擇“格式”下拉列表，如圖所示。(3) 選擇不同的標題進行設置，其效果如圖所示。l段落對齊有四種方式 左以齊 居中對齊 右對齊 兩端對齊lCSS是 Cascading Style Sheet 的縮寫，譯為“層疊樣式表單”l作用：設置網(wǎng)頁中文字的樣式l與字符格式化區(qū)別 相同格式的文字設置 大量相同格式的文字樣式的設置特別有效l樣式分為三種，即類樣式，標簽樣式，高級樣式l類樣式l標簽樣式l高級樣式l樣式的兩種保存方式: 在網(wǎng)頁內(nèi)部 在外部文件中(.css)lCSS樣式的基本操作 自動創(chuàng)建樣式 使用“CSS樣式面板”創(chuàng)建樣式lCSS樣式的應用 創(chuàng)建樣式 樣式的設置 應用到網(wǎng)頁中的文字l新建網(wǎng)頁的兩

4、種方式l文本格式化的內(nèi)容:字體，字體大小，顏色，粗體，傾斜l段落格式化的內(nèi)容:左對齊，居中對齊，右對齊,兩端對齊lCSS樣式的種類:類樣式，標簽樣式，高級樣式【實訓項目實訓項目1】某詩詞鑒賞網(wǎng)站要制作一些古詩欣賞頁面，供廣大讀者欣賞，要求如下：頁面內(nèi)容可以是五言絕句，七言絕句，宋詞，元曲等。頁面格式要求如下：(1) 每首詩、詞、曲用一張網(wǎng)頁顯示，內(nèi)容全部居中顯示。(2) 要有標題，標題使用宋體，36號字,粗體，黑色。(3) 內(nèi)容使用楷書，使用28號字,藍色。(4) 因為要內(nèi)容格式統(tǒng)一，要求使用CSS樣式進行上述格式的設置。操作步驟參考如下：Step1:建立站點SX9(1) 啟動Dreamwea

5、ver，執(zhí)行“站點”“新建站點”菜單命令。(2) 在打開的“未命名站點1的站點定義為“對話框中輸入站點名稱sx9。(3) 選擇合適的位置放置站點文件。Step2:建立網(wǎng)頁，設置其屬性(1) 在Dreamweaver中執(zhí)行“文件”“新建”，打開“新建文檔”對話框。(2) 選擇“基本頁”中的“HTML”部分，創(chuàng)建HTML網(wǎng)頁。(3) 設置網(wǎng)頁的標題。Step3:輸入文字。(1) 打開Dreamweaver,執(zhí)行”文件” ”新建“菜單命令，彈出“新建文檔”窗口。(2) 在“新建文檔”窗口中選擇“基本頁”中的“HTML”，再單擊【創(chuàng)建】按鈕,創(chuàng)建一個新網(wǎng)頁。(3) 在網(wǎng)頁中輸入“靜夜詩”的內(nèi)容，并執(zhí)行

6、“文件”“保存”菜單命令。Step4: 建立樣式，并應用到網(wǎng)頁中。(1) 執(zhí)行“窗口”“CSS樣式”，打開“CSS樣式面板”，設置標題的樣式，樣式名稱為JinTitle。(2) 在“CSS樣式面板”上單擊鼠標右鍵，在彈出的快捷菜單中選擇“新建”菜單命令，建立樣式,并命名為JinContent。(3) 在編輯區(qū)域選中“靜夜詩”，并在“屬性面板”中選擇樣式JinTitle。(4) 在編輯區(qū)域選中其它文字 ，并在“屬性面板”中選擇樣式JinContent。Step5:瀏覽網(wǎng)頁，查看效果。(1) 保存網(wǎng)頁，并按下快捷鍵F12，瀏覽網(wǎng)頁內(nèi)容，其效果如圖所示?！緦嵱栱椖繉嵱栱椖?】設計一張網(wǎng)頁，內(nèi)容為個人

7、簡介信息，要求對其中的文字進行格式化，使用宋體12號字,加粗，顏色為藍色,要寫三段文字，分別使用居中，左對齊，右對齊的方式顯示?！緦嵱栱椖繉嵱栱椖?】設計兩張網(wǎng)頁，內(nèi)容為個人簡介信息和班級簡介，要求對其中的文字進行格式化，使用楷體14號字,斜體，顏色為藍色,但要求使用CSS樣式。綜合練習綜合練習41. 選擇題選擇題(1) 在網(wǎng)頁的設計中，對其中的文字進行格式化設置時，下列哪些不是對文字格式化（ ）。A. 粗體B. 傾斜C. 大小D. 左對齊(2) 在網(wǎng)頁的設計中，設置段落格式時，可以將段落設置為（ ）。A. 左對齊B. 居中對齊C. 兩端對齊D. 傾斜(3) 新建網(wǎng)頁時，在“新建文檔”對話框中

8、選擇”基本頁”中的（ ）來創(chuàng)建一個HTML網(wǎng)頁。A. HTML模板B. HTMLC. CSSD. XSLT片段2. 填空題填空題(1) 為網(wǎng)頁設置可編輯區(qū)域時，在”頁面屬性“對話框中設置_、_、_、_。(2)對字符格式化時，可以設置字符的字體、顏色、字體大小、_、_。3. 簡答題簡答題(1) 簡述使用CSS樣式的過程？(2) 簡述CSS的種類？4. 操作題操作題(1) 為某一流行音樂網(wǎng)站設計歌詞顯示的頁面，要求所有歌詞采用同一種風格，并制作兩個網(wǎng)頁展示設計的效果。分析：此類網(wǎng)頁的設計，首先要考慮使用什么樣的風格，確定可編輯區(qū)域使用多少位置，頁邊距應設置為多少。其次是確定每一個網(wǎng)頁的內(nèi)容。最后確定所有網(wǎng)頁的風格，標題及相關(guān)內(nèi)容各使