3.4　實(shí)例精講——制作簡(jiǎn)單的文本頁(yè)面

在實(shí)際中，不少類型的欄目網(wǎng)頁(yè)都會(huì)擁有較多的文本，如新聞欄目、專題欄目、故事欄目等。下面通過一個(gè)讀書欄目實(shí)例講解文本頁(yè)面的制作方法。

設(shè)計(jì)思路

本實(shí)例是制作一個(gè)讀書欄目的頁(yè)面。先使用表格布局制作出頁(yè)面的整體框架，然后在相應(yīng)的單元格中輸入相應(yīng)的圖片和文字內(nèi)容。選中文字，在“屬性”面板上設(shè)置文字的相關(guān)屬性，并對(duì)文字進(jìn)行簡(jiǎn)單的排版，最終效果如圖3-36所示。

制作重點(diǎn)

（1）選中頁(yè)面上輸入的文字，在“屬性”面板上可設(shè)置相關(guān)的文字屬性，例如字體大小、顏色等。

（2）在Dreamweaver CC 2018中有兩種文字換行的方式：一種是通過按鍵盤上的Enter鍵，插入一個(gè)段落換行；另一種是通過按鍵盤上的Shift+Enter鍵，插入一個(gè)換行符，換到下一行繼續(xù)輸出。

操作步驟

1. 設(shè)置頁(yè)面屬性

啟動(dòng)Dreamweaver CC 2018，執(zhí)行“文件”|“新建”命令，新建一個(gè)空白的HTML頁(yè)面，然后執(zhí)行“文件”|“保存”命令，保存文件。執(zhí)行“文件”|“頁(yè)面屬性”命令，彈出“頁(yè)面屬性”對(duì)話框，設(shè)置頁(yè)面字體為“新宋體”，大小為14px；單擊“瀏覽”按鈕，選擇需要的背景圖像，如圖3-37所示。

在這里沒有設(shè)置背景圖像的重復(fù)方式，保留默認(rèn)設(shè)置，即自動(dòng)鋪滿整個(gè)頁(yè)面。

2. 插入表格

執(zhí)行“插入”|“表格”命令，在彈出的“表格”對(duì)話框中設(shè)置表格行數(shù)為3，列為2，表格寬度為800像素，邊框粗細(xì)、單元格邊距和單元格間距均為0，如圖3-38所示。選中剛剛插入的表格，在“屬性”面板上設(shè)置“對(duì)齊”屬性為“居中對(duì)齊”。

3. 設(shè)計(jì)表格布局

將鼠標(biāo)指針移至第1行單元格中，在“屬性”面板上設(shè)置“高”為60，然后選中第1行單元格，單擊“屬性”面板上的“合并單元格”按鈕，如圖3-39所示。

同樣的方法，合并第3行單元格。按住Ctrl鍵單擊第1行和第3行選中這兩行單元格，在“屬性”面板上設(shè)置水平“居中對(duì)齊”，垂直“居中”，如圖3-40所示。

4. 插入圖像

將鼠標(biāo)指針放在第2行第2列單元格中，在“屬性”面板上設(shè)置水平“右對(duì)齊”，垂直“底部”，如圖3-41所示。然后執(zhí)行“插入”|“圖像”命令，在彈出的“選擇圖像源文件”對(duì)話框中，選擇需要的圖像文件，如圖3-42所示。

5. 插入Div

將鼠標(biāo)指針放在第2行第1列單元格中，執(zhí)行“插入”|“Div”命令，彈出“插入Div”對(duì)話框，設(shè)置ID為text，如圖3-43所示。單擊“新建CSS規(guī)則”按鈕，在彈出的對(duì)話框中單擊“確定”按鈕，打開“#text的CSS規(guī)則定義”對(duì)話框。

（1）在“類型”分類中，設(shè)置行高（Line-height）為180%，如圖3-44所示。

（2）在“區(qū)塊”分類中，設(shè)置文本對(duì)齊方式（Text-align）為“左對(duì)齊”，如圖3-45所示。

（3）在“方框”分類中，設(shè)置高度（Height）為600px（與右側(cè)圖片高度相同），左（Left）、右（Right）填充為10px，左、右邊距為auto，如圖3-46所示。

設(shè)置完畢，單擊“確定”按鈕關(guān)閉對(duì)話框。此時(shí)在頁(yè)面中將顯示插入的Div布局塊，刪除布局塊中的占位文本，效果如圖3-47所示。

6. 輸入標(biāo)題文本

將鼠標(biāo)指針放在第一行單元格中，輸入文本，然后執(zhí)行“插入”|“HTML”|“水平線”命令，插入一條水平線，如圖3-48所示。

7. 設(shè)置文本屬性

選中輸入的文本，在“屬性”面板上的“格式”下拉列表中選擇“標(biāo)題1”，如圖3-49所示；切換到CSS屬性，設(shè)置字體為“華文行楷”，大小為30px，顏色為#FF6600，如圖3-50所示，此時(shí)的文本效果如圖3-51所示。

8. 輸入正文文本

將鼠標(biāo)指針放在第2行第1列的Div布局塊中，打開“HTML”插入面板，單擊“不換行空格”按鈕兩次，如圖3-52所示。插入兩個(gè)不換行空格，然后輸入其他文本。一段文本輸入完成后，按Enter鍵插入一個(gè)換行符，使用同樣的方法，插入其他文本，如圖3-53所示。

9. 制作頁(yè)腳

將鼠標(biāo)指針放在第3行單元格中，執(zhí)行“插入”|“HTML”|“水平線”命令，插入一條水平線；按Enter鍵換行，輸入第1行文本，然后按Shift+Enter組合鍵，插入一個(gè)軟回車，輸入第2行文本。將鼠標(biāo)指針放在要插入特殊符號(hào)的位置，在“HTML”插入面板上單擊字符按鈕，在彈出的下拉列表中選擇注冊(cè)商標(biāo)，如圖3-54所示；同樣的方法，插入版權(quán)符號(hào)，效果如圖3-55所示。

10. 保存文件并預(yù)覽

執(zhí)行“文件”|“保存”命令，保存頁(yè)面，然后在瀏覽器中預(yù)覽整個(gè)頁(yè)面，效果如圖3-37所示。