網(wǎng)頁設(shè)計第3章網(wǎng)頁的基本操作

網(wǎng)頁設(shè)計與制作案例教程

電子教案

華南理工大學出版社本章學習目標掌握網(wǎng)頁文本、段落格式化操作掌握圖片的插入及屬性設(shè)置了解網(wǎng)頁頁面屬性設(shè)置了解如何在網(wǎng)頁中插入日期、水平線等特殊字符第3章網(wǎng)頁的基本操作教學案例：“班級故事”網(wǎng)頁插入文字網(wǎng)頁中大部分的信息都是從文字中體現(xiàn)出來的。文字在信息傳達方面起到了核心作用。在DreamweaverCS6中，網(wǎng)頁文本設(shè)計是網(wǎng)頁制作的基本組成部分，我們可以通過對網(wǎng)頁文本的設(shè)計與編輯，使網(wǎng)頁效果更加豐富。案例制作步驟1：打開“banjigushi”網(wǎng)頁。案例制作步驟2：設(shè)置頁面背景。在屬性面板中打開頁面屬性，在頁面屬性面板中選中“外觀（CSS）”，設(shè)置背景圖像案例制作步驟3：設(shè)置標題。點擊“插入”→“布局對象”命令，在子菜單下選擇“APDiv（A）”選項案例制作步驟3：設(shè)置標題。在網(wǎng)頁中添加一個層，方便文字定位。將層1移至背景中空白的地方，設(shè)置層大小為560px、120px。輸入文章標題“班級故事”，在屬性面板的“格式”下拉列表中選擇“標題1”。案例制作步驟3：設(shè)置標題。選擇“CSS”，點擊“編輯規(guī)則”，在彈出的對話框中，“選擇器類型”設(shè)置為“標簽”，“選擇器名稱”設(shè)置為“h1”。案例制作步驟3：設(shè)置標題。進入“h1的CSS規(guī)則定義”，在“類型”對話框中將“Font-size（大?。痹O(shè)置為“36px”，“Color（顏色）”設(shè)置為“#5E2048”。案例制作步驟3：設(shè)置標題。在“區(qū)塊”對話框中將“Text-align（文本對齊）”設(shè)置為“center（居中）”。案例制作步驟3：設(shè)置標題。完成后效果案例制作步驟4：設(shè)置水平線。在層1中將光標移在標題后面，單擊菜單欄“插入”菜單下的“HTML”中的“水平線”命令，為標題添加一條水平線。步驟4：設(shè)置水平線。選中“水平線”，在“屬性”面板的水平線屬性里，將高設(shè)置為“10”，對齊方式設(shè)置為“居中對齊”，取消“陰影”。步驟5：設(shè)置日期。將光標移至水平線右邊，按【Enter】鍵，使光標空出一行。單擊菜單欄“插入”菜單下的“日期”命令步驟5：設(shè)置日期。在彈出的“插入日期”對話框中，日期格式選擇為第二個。將光標移動在插入的日期前，同時按住鍵盤上【Shift+Ctrl+Space】組合鍵，可將日期移動到合適的位置。步驟6：設(shè)置正文。點擊“插入”→“布局對象”→“APDiv（A）”選項。在網(wǎng)頁中添加第二層，設(shè)置層大小為920px、330px。將光標移至層2內(nèi)，使用“復(fù)制”“粘貼”命令，將素材文字粘貼在網(wǎng)頁內(nèi)。選中段落文字，在“新建CSS規(guī)則”對話框內(nèi)，“選擇器類型”設(shè)置為“類”，“選擇器名稱”設(shè)置為“.p1”。步驟6：設(shè)置正文。進入“.p1的CSS規(guī)則定義”，將“Font-size”設(shè)置為“16px”，“Color”設(shè)置為“#6A5040”。步驟7：在瀏覽器中預(yù)覽。單擊工具欄中的“在瀏覽器中預(yù)覽/調(diào)試”按鈕，即可在網(wǎng)頁中瀏覽剛才所制作的網(wǎng)頁內(nèi)容，也可使用快捷鍵【

F12】步驟8：保存文檔。知識準備一、網(wǎng)頁文本格式化操作

文本格式化就是將網(wǎng)頁中的文字以及特殊字符的格式進行設(shè)置，比如顏色、大小等。1.?文本的輸入在DreamweaverCS6中，單擊菜單欄“文件”→“導(dǎo)入”命令，選擇要導(dǎo)入的文本文件，在彈出的對話框中，找到文字文檔所保存的位置；也可以使用“復(fù)制”“粘貼”命令，將文字粘貼在網(wǎng)頁內(nèi)。要為文字增加空格時，要按住【Shift+Ctrl】組合鍵后，再繼續(xù)按【Space】（空格）鍵。2.?文本的撤銷與重做文本的撤銷是指撤銷上一次的操作，快捷鍵為【Ctrl+Z】；文本的重做則是撤銷的反操作，快捷鍵為【Ctrl+Y】。3.?查找與替換在DreamweaverCS6中不僅可以查找、替換當前編輯網(wǎng)頁的內(nèi)容，還可以查找、替換整個網(wǎng)站的文本內(nèi)容。單擊菜單欄“編輯”→“查找和替換”，或者快捷鍵【Ctrl+P】，彈出“查找和替換”對話框。在“查找”文本框中輸入要查找的內(nèi)容，在“替換”文本框中輸入要替換的文本4.?編輯字體在編輯區(qū)域輸入文本之后，在文本“屬性”面板中單擊“CSS”，選擇“字體”的下拉菜單，可以選擇所要設(shè)置的字體若在列表中沒有想要的字體，可以點擊“編輯字體列表”，在彈出的對話框“可用字體”中選擇想要的字體后，單擊按鈕，便可添加到“選擇字體”列表中。如果還想要添加其他字體，單擊左上角“+”按鈕后繼續(xù)選擇字體5.?編輯字體大小在文本“屬性”面板中單擊“大小”后面的第一個下拉菜單若選擇“無”，便會使用軟件默認的字體大小。單擊下拉列表，選項為相應(yīng)的字體大小，英文所示的依次為極小、較小、小、中、大、特大、極大、較小、較大字體大小單位下拉列表依次為像素（px）、點數(shù)（pt）、英寸（in）、厘米（cm）、毫米（mm）、12pt字（pc）、字體高（em）、字母x的高（ex）、百分比（%），一般我們使用的為系統(tǒng)默認的像素（px）6.?編輯字體顏色在文本“屬性”面板中單擊“CSS”，單擊文本顏色按鈕，彈出顏色選擇器。除了“立方色”調(diào)色板，DreamweaverCS6還為我們提供了另外四種調(diào)色板。單擊“立方色”調(diào)色板右上角的按鈕，彈出其他調(diào)色板的選擇器。7.?設(shè)置其他屬性文本屬性，除了可以設(shè)置文本的字體、大小和顏色外，還可以設(shè)置文本的其他屬性。單擊菜單欄“格式”→“樣式”選項，彈出子菜單二、網(wǎng)頁段落格式化操作1.?設(shè)置段落DreamweaverCS6中的文本段落是自動換行的，就是如果輸入的字體超過本行，將會自動進入下一行。若想直接換行，應(yīng)按住【Shift+Enter】鍵。若想要直接換一個段落，應(yīng)直接按【Enter】鍵。2.?設(shè)置文本標題在制作網(wǎng)頁文本時，合理地設(shè)置文本的標題，可以使文本內(nèi)容更有條理性。單擊文本“屬性”中“格式”的下拉菜單3.?設(shè)置文本對齊在制作網(wǎng)頁文本的過程中，設(shè)置文本對齊也是一種常用的操作。單擊菜單欄中“格式”→“對齊”命令。DreamweaverCS6提供了四種對齊方式：“左對齊”“居中對齊”“右對齊”和“兩端對齊”?？梢灾苯釉凇皩傩浴泵姘鍍?nèi)進行按鈕操作，從左到右依次是“左對齊”“居中對齊”“右對齊”和“兩端對齊”4.?設(shè)置文本凸出和文本縮進在制作網(wǎng)頁文本時，有時需要用文本凸出或者文本縮進來調(diào)整文本的寬度。單擊菜單欄中“格式”菜單項5.?設(shè)置項目列表和編號列表為文本增加列表，使網(wǎng)頁看起來條理清晰。單擊菜單欄中“格式”→“列表”的子菜單下，DreamweaverCS6提供了兩種常用列表方式：“項目列表”“編號列表”知識準備三、網(wǎng)頁圖片的插入及其屬性設(shè)置

1.?網(wǎng)頁圖像格式 （1）gif格式（圖形交換格式） （2）jpeg格式（聯(lián)合圖像專家組） （3）png格式（可移植網(wǎng)絡(luò)圖形）

2.?插入圖像步驟1：在DreamweaverCS6文檔窗口中，將插入點放置在要插入顯示圖像的位置。步驟2：單擊菜單欄“插入”→“圖像”菜單項，或者單擊工具欄“插入”面板上“常用”項，選擇“圖像”按鈕，則彈出“選擇圖像源文件”對話框。步驟3：在“選擇圖像源文件”對話框中選擇要插入的圖像文件，單擊“確定”按鈕，則彈出“圖像標簽輔助功能屬性”對話框。步驟4：單擊“確定”，圖像即被插入文檔中3.?設(shè)置圖像屬性DreamweaverCS6中對圖像屬性的設(shè)置就是對圖像進行編輯。圖像的編輯功能主要是調(diào)整圖像大小、圖像重新取樣、裁剪、亮度/對比度、銳化等。（1）調(diào)整圖像大小選擇要調(diào)整的圖像，圖像底部、右側(cè)及右下角會出現(xiàn)3個調(diào)整大小的控制點可以調(diào)整圖像的高度和寬度。如未出現(xiàn)調(diào)整大小控制點，則單擊要調(diào)整大小的圖像以外的部分重新選擇，或在標簽選擇器中單擊相應(yīng)的標簽以選擇該圖像。調(diào)整圖像的大小操作：若要調(diào)整圖像的寬度，則拖動右側(cè)選擇控制點。若要調(diào)整圖像的高度，則拖動底部選擇控制點。若要同時調(diào)整圖像的寬度和高度，則拖動底角選擇控制點。若要在調(diào)整圖像尺寸時保持圖像的寬高比，則按住【Shift】鍵的同時拖動頂角的選擇控制點。如果對圖片大小有精準的尺寸要求，也可以在屬性面板中直接輸入圖片尺寸（2）圖像裁剪

步驟1：選擇要裁剪的圖像，單擊菜單欄中“修改”→“圖像”→“裁剪”，或者單擊圖像屬性面板中的“裁剪”工具按鈕步驟2：調(diào)整裁剪控制點，直到邊界框包含的圖像區(qū)域符合所需大小。步驟3：在邊框內(nèi)部雙擊或按【Enter】鍵裁剪所選區(qū)域。步驟4：所選圖像的邊界框外的像素都將被裁剪，只保留邊界框內(nèi)的圖像。步驟5：預(yù)覽圖像。修改圖像中像素的亮度或?qū)Ρ榷?，將影響圖像的高亮顯示、陰影和中間色調(diào)。修正過暗或過亮的圖像時通常使用“亮度/對比度”。步驟1：選擇所要調(diào)整亮度或?qū)Ρ榷鹊膱D像，單擊菜單欄“修改”→“圖像”→“亮度/對比度”，或者單擊圖像屬性面板中的“亮度和對比度”按鈕。

（3）調(diào)整圖像的亮度和對比度

步驟2：彈出“亮度和對比度”對話框，拖動亮度和對比度滑動塊調(diào)整設(shè)置亮度和對比度滑動塊調(diào)整值的范圍從-100到100，最終的調(diào)整效果。

（4）銳化圖像

銳化將增加對象邊緣像素的對比度，從而增加圖像的清晰度或銳度。步驟1：選擇所要銳化的圖像，單擊“修改”→“圖像”→“銳化”，或者單擊圖像屬性面板中的“銳化”按鈕。步驟2：彈出“銳化”對話框，拖動滑塊控件調(diào)整設(shè)置。銳化滑動塊調(diào)整值的范圍從-100到100，最終的調(diào)整效果。四、設(shè)置頁面屬性

1.?“外觀”頁面屬性及“鏈接”頁面屬性2.?“標題”頁面屬性及“標題/編碼”頁面屬性5.?“跟蹤圖像”頁面屬性

五、插入日期、水平線以及特殊字符

1.?插入日期將光標移在需要插入日期的位置，單擊菜單欄中“插入”→“日期”，彈出“插入日期”對話框。如果要網(wǎng)頁文本自動更新日期，可勾選“儲存時自動更新”復(fù)選框。2.?插入水平線單擊菜單欄“插入”→“HTML”→“水平線”，即可在編輯區(qū)插入一條水平線。單擊插入的水平線，對水平線進行“寬度”“高度”“對齊方式”等屬性的設(shè)置3.?插入特殊字符在制作網(wǎng)頁時，有時需要插入一些特殊字符，如版權(quán)、注冊商標等。單擊菜單欄中“插入”→“HTML”→“特殊字符”，在彈出的下一級子菜單中就會顯示一些常用的特殊字符。也可以單擊“其他字符”，在彈出的對話框選擇其他字符。六、瀏覽網(wǎng)頁

單擊工具欄上“在瀏覽器中預(yù)覽/調(diào)試”按鈕或按【F12】快捷鍵，使用默認瀏覽器直接進行瀏覽，也可以選擇在“編輯瀏覽器列表（E）”中進行編輯，選擇自己喜好的瀏覽器。在下拉列表中可以選擇瀏覽網(wǎng)頁的瀏覽器拓展知識?圖像與文本的對齊