網(wǎng)頁設(shè)計(CS5)-第3講-向網(wǎng)頁中添加元素

1、Dreamweaver CS5第第3 3講講向網(wǎng)頁中添加元素（向網(wǎng)頁中添加元素（1 1）1 在網(wǎng)頁中添加文本編輯文本在網(wǎng)頁中添加圖片4 編輯圖像圖文混排鼠標經(jīng)過更換圖片特效第第3講講向網(wǎng)頁中添加元素向網(wǎng)頁中添加元素Dreamweaver CS5在網(wǎng)頁中添加文本在網(wǎng)頁中添加文本1網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講文本概述在絕大多數(shù)網(wǎng)頁中，文本內(nèi)容占據(jù)著核心的地位，它負責(zé)主要信息的傳播，是信息的主要載體。同時為了使頁面美觀整齊，還需要對輸入的文本進行修飾和排版。如果在頁面中要輸入的文本較少，可直接通過鍵盤輸入文本，若是在其他位置存在的大段文本內(nèi)容則可以通過復(fù)制、粘貼或?qū)氲姆绞絹硗瓿?。無論是直接輸入

2、文本還是從外部導(dǎo)入，都需要先在網(wǎng)頁中單擊一次鼠標來定位，即指定文本開始的地方，對于表格性的文字內(nèi)容，可以直接按Tab鍵跳到下一個單元格添加普通文本方法：A、直接輸入 （1）用鼠標單擊網(wǎng)頁編輯窗口中的空白區(qū)域，窗口中隨即出現(xiàn)閃動的光標，標識輸入文字的起始位置。 （2）選擇適當(dāng)?shù)妮斎敕ㄝ斎胛淖諦、復(fù)制和粘貼C、從其他文件導(dǎo)入網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加文本在網(wǎng)頁中添加文本1添加空格輸入法切換到半角狀態(tài)，按空格鍵只能輸入一個空格；如果需要輸入多個連續(xù)的空格可以通過以下幾種方法來實現(xiàn)： （1）菜單“插入”HTML特殊字符不換行空格（2）直接按“Ctrl+Shift+Space”組合鍵（3

3、）菜單“編輯”設(shè)置軟件首選參數(shù)允許連續(xù)空格網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加文本在網(wǎng)頁中添加文本1（1）菜單“插入”HTML特殊字符不換行空格網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講1（2）直接按“Ctrl+Shift+Space”組合鍵（3）菜單“編輯”設(shè)置軟件首選參數(shù)允許連續(xù)空格網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講1添加日期時間在文檔的最后一行插入形式如“Thursday, 1974-03-07 10:18 PM”所示的日期，且要求每次保存網(wǎng)頁時自動更新日期。具體操作過程如下： （1）切換到【常用】插入工具欄，按Enter鍵，添加一空行，將光標放置在空行與正文對齊的最左端（2）單擊菜單【插入】【日

4、期】，或者單擊“常用”插入欄的【日期】按鈕，將彈出 “插入日期”對話框（3）在【插入日期】對話框中，【星期格式】下拉表框中選取“Thursday,”，【日期格式】選取“1974-03-07”，在【時間格式】下拉列表框選取“10:18PM”，選中“儲存時自動更新”復(fù)選框，然后單擊【確定】按鈕，最后生成的日期效果為當(dāng)時的日期與時間（4）保存插入的日期，且瀏覽網(wǎng)頁網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加文本在網(wǎng)頁中添加文本1網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加文本在網(wǎng)頁中添加文本1插入水平線（1）將光標放置到標題最后一個字符的右邊（2）單擊HTML插入工具欄的“水平線”按鈕（3）在“插入”工

5、具欄中，選擇“HTML”，選擇“水平線”網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加文本在網(wǎng)頁中添加文本1（2）單擊插入工具欄的“水平線”按鈕網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加文本在網(wǎng)頁中添加文本1方法一：網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講方法二：添加特殊字符（方式1）通過菜單【插入】【HTML】【特殊字符】插入 先將光標放置到需要插入特殊字符的位置，然后展開菜單【插入】【HTML】【特殊字符】，在【特殊字符】的級聯(lián)菜單中選擇需要插入的特殊字符。（方式2）通過【文本】插入工具欄插入 先在Dreamweaver cs5的【插入】工具欄中選擇【文本】，顯示【文本】插入工具欄。將光標放置到需要插入

6、特殊字符的位置，然后單擊工具欄中的【文本】，單擊所需插入的特殊字符即可插入到網(wǎng)頁中。網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加文本在網(wǎng)頁中添加文本1網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講（方式1）通過菜單【插入】【HTML】【特殊字符】插入網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講（方式2）通過【文本】插入工具欄插入編輯文本編輯文本2文本可以像Word一樣進行編輯（1）拖動鼠標選中一個或多個文字、一行或多行文本，也可以選中網(wǎng)頁中的全部文本。（2）按BackSpace鍵或Delete鍵實現(xiàn)刪除文本操作。（3）實現(xiàn)復(fù)制、剪切、粘貼等操作。（4）實現(xiàn)查找與替換操作。（5）實現(xiàn)撤消或重做操作。網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講

7、講設(shè)置文本格式字體(通用性問題)、大小、顏色、風(fēng)格注：CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀。網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講編輯文本編輯文本2分段與換行分段按Enter回車鍵（隔一行）換行按Shift+Enter（不分段）網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講編輯文本編輯文本2EnterShift + Enter設(shè)置段落格式a.對齊方式b.列表編號：列表可以將文本段落用符號或序號標注起來，有兩種類型：項目列表和編號列表。 設(shè)置項目(或編號)列表的操作過程如下: （1）選擇要添加列表的若干文本段落 （2）單擊

8、屬性檢查器中的“項目列表”按鈕或“編號列表”按鈕c.縮進網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講編輯文本編輯文本2a.對齊方式網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講編輯文本編輯文本2左對齊左對齊居中居中右對齊右對齊兩端對齊兩端對齊b.列表編號： 設(shè)置項目(或編號)列表的操作過程如下: （1）選擇要添加列表的若干文本段落 （2）單擊屬性檢查器中的“項目列表”按鈕或“編號列表”按鈕網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講編輯文本編輯文本2b.列表編號： 設(shè)置項目(或編號)列表的操作過程如下: （1）選擇要添加列表的若干文本段落 （2）單擊屬性檢查器中的“項目列表”按鈕或“編號列表”按鈕網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講編輯文本編

9、輯文本2使用Html段落樣式網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講編輯文本編輯文本2網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講編輯文本編輯文本2網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講使用Html段落樣式后的效果網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講注意：HTML段落樣式是針對段落而言的！如果沒有分段，格式就是同一個！標題1標題2標題3網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講注意：HTML段落樣式是針對段落而言的！如果沒有分段，格式就是同一個！在網(wǎng)頁中添加圖片在網(wǎng)頁中添加圖片3網(wǎng)頁中常用的圖片格式使用圖片的原則：在保證畫質(zhì)的前提下盡可能使圖片的數(shù)據(jù)量小

10、一些，這樣有利用戶快速的瀏覽我們的網(wǎng)頁。.GIF格式特點：它的圖片數(shù)據(jù)量小，可以帶有動畫信息，且可以透明背景顯示，但最高只支持256種顏色。用途：大量用于網(wǎng)站的圖標Logo、廣告條Banner及網(wǎng)頁背景圖像。但由于受到顏色的顯示，不適合用于照片級的網(wǎng)頁圖像。網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講網(wǎng)頁中常用的圖片格式.JPEG格式特點：可以高效地壓縮圖片的數(shù)據(jù)量。使圖片文件變小的同時基本不丟失顏色畫質(zhì)。用途：通常用于顯示照片等顏色豐富的精美圖像。.PNG格式特點：是一種逐步流行的網(wǎng)絡(luò)圖像格式。既融合了GIF能做成透明背景的特點，又具有JPEG處理精美圖像的優(yōu)點。用途：常用于制作網(wǎng)頁效果圖。網(wǎng)頁設(shè)計網(wǎng)頁設(shè)

11、計第第2 2講講在網(wǎng)頁中添加圖片在網(wǎng)頁中添加圖片3想一想：相同的圖片，不同的圖片格式，大小會不會相同？網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加圖片在網(wǎng)頁中添加圖片3想一想：相同的圖片，不同的圖片格式，大小會不會相同？網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加圖片在網(wǎng)頁中添加圖片3想一想：相同的圖片，不同的圖片格式，大小會不會相同？網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加圖片在網(wǎng)頁中添加圖片3想一想：相同的圖片，不同的圖片格式，大小會不會相同？網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加圖片在網(wǎng)頁中添加圖片3想一想：相同的圖片，不同的圖片格式，大小會不會相同？網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)

12、頁中添加圖片在網(wǎng)頁中添加圖片3如何獲取網(wǎng)頁圖像網(wǎng)上下載、購買素材光盤、使用圖像制作軟件創(chuàng)作站酷：http:/ 2講講在網(wǎng)頁中添加圖片在網(wǎng)頁中添加圖片3插入圖像插入圖像插入面板常用圖像直接將圖像文件拖入編輯區(qū)注意：在插入圖像前應(yīng)先將網(wǎng)頁文件已保存，從而使所插圖像引用正確。圖像插入網(wǎng)頁后，應(yīng)確定圖像文件已存入站點，否則在下次打開網(wǎng)頁時，會出現(xiàn)看不到圖像的情況。技巧：圖像的位置、替換文字網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加圖片在網(wǎng)頁中添加圖片3插入圖像方式一網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講插入圖像方式二網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講選擇圖片網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講設(shè)置圖像的基本屬性圖像設(shè)置

13、的名稱寬、高可縮小和放大圖片的顯示尺寸源文件圖片的路徑和名稱替代圖像的說明文字邊框圖片是否要加邊框網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加圖片在網(wǎng)頁中添加圖片3編輯圖像編輯圖像4設(shè)置圖像的基本屬性裁切銳化對比度/亮度重新采樣：當(dāng)圖片的寬高縮小后，重新生成更小的圖片優(yōu)化（為圖片瘦身）網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講圖文混排圖文混排5設(shè)置圖像的基本屬性垂直邊距和水平邊距圖片四周突出的尺寸對齊在一行中圖形和文本的對齊方式網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講鼠標經(jīng)過更換圖片特效鼠標經(jīng)過更換圖片特效6設(shè)置圖像的基本屬性1）概念：是指在頁面中先顯示一張圖像，當(dāng)鼠標移動到該圖像上時，圖像切換成另一張圖像。2）步驟

14、： a 將光標放到要插入圖像的地方。 b單擊菜單“插入記錄”“圖像對象”“鼠標經(jīng)過圖像”，打開“插入鼠標經(jīng)過圖像對話框”網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講鼠標經(jīng)過更換圖片特效鼠標經(jīng)過更換圖片特效6網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講鼠標經(jīng)過更換圖片特效鼠標經(jīng)過更換圖片特效6網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講歸納與小結(jié)歸納與小結(jié) 掌握添加文本與圖片的方法熟練圖文編輯與排版學(xué)會設(shè)置鼠標經(jīng)過更換圖片特效第第3講講向網(wǎng)頁中添加元素向網(wǎng)頁中添加元素Dreamweaver CS5第第2講講作業(yè)作業(yè) THANKS !Dreamwea

15、ver CS5第第3 3講講向網(wǎng)頁中添加元素（向網(wǎng)頁中添加元素（2 2）1 在網(wǎng)頁中添加文本編輯文本在網(wǎng)頁中添加圖片4 編輯圖像圖文混排鼠標經(jīng)過更換圖片特效第第3講講向網(wǎng)頁中添加元素向網(wǎng)頁中添加元素Dreamweaver CS5Dreamweaver CS5第第3 3講講向網(wǎng)頁中添加元素（向網(wǎng)頁中添加元素（2 2）1 多媒體的應(yīng)用編輯文本在網(wǎng)頁中添加圖片4 插入表格圖文混排鼠標經(jīng)過更換圖片特效第第3講講向網(wǎng)頁中添加元素向網(wǎng)頁中添加元素Dreamweaver CS5第四講第四講 用表格設(shè)計頁面用表格設(shè)計頁面 1、表格插入 2、表格的設(shè)置 3、用表格設(shè)計頁面 1、表格的插入 1表格概述 2表格結(jié)構(gòu)

16、 3插入表格1.1. 表格概述 表格是網(wǎng)頁設(shè)計制作中不可缺少的元素，它不僅用于頁面上的數(shù)據(jù)顯示，還可以用來設(shè)計頁面框架。 使用表格可以將圖片、文本、數(shù)據(jù)和表單等元素有序地顯示在頁面上，使得頁面看起來簡潔明了、編排整齊。用表格設(shè)計的頁面，框架布局清晰，在不同平臺、不同分辨率的瀏覽器里都能保持其原有的布局，并且在不同的瀏覽器平臺都具有較好的兼容性，所以表格是網(wǎng)頁中最常用的排版方式之一。1.2. 表格結(jié)構(gòu)表格是由一個或多個單元格組成的集合。表格中橫向的一排稱之為行，縱向的一排稱之為列，中間的單個小方塊稱之為單元格。單元格與單元格之間的距離叫做單元格間距，單元格內(nèi)容到單元格邊框之間的距離叫邊距。每個單

17、元格的四周稱之為單元格邊框，整個表格的四周稱之為表格邊框，下圖展示了表格各部分的對應(yīng)關(guān)系。1.3. 插入表格 在【常用】插入欄中單擊表格按鈕 ，打開【表格】對話框 ，設(shè)置【行數(shù)】、【列數(shù)】、【表格寬度】等參數(shù)后單擊“確定”按鈕即可 。2、表格的設(shè)置 1表格選取 2設(shè)置表格屬性 3拆分表格 4. 合并表格2.1. 表格的選取 表格的選取包括整表的選取、單元格的選取、表格行與列的選取。整表的選取整表的選?。褐恍枰獙⑹髽酥羔樢频奖砀竦倪吙颍?dāng)鼠標指針右下角出現(xiàn)圖標時單擊鼠標左鍵即可選中整個表格；或者先在表格內(nèi)任意處單擊一次鼠標左鍵，然后在標簽選擇器上單擊“”標簽，也可選中這個表格。單元格的選取單元格

18、的選取：按住Ctrl鍵，然后單擊某一單元格，即可選中該單元格；或者先在單元格內(nèi)單擊一次鼠標左鍵，然后單擊狀態(tài)欄上的“”標簽，也可選中該單元格。表格行與列的選取表格行與列的選?。簩⑹髽酥羔樢频侥骋恍械淖髠?cè)，當(dāng)鼠標指針變成形狀時，單擊鼠標左鍵，即可選中該行；將鼠標指針移到某一列的頂部，當(dāng)鼠標指針變成形狀時，單擊鼠標左鍵，即可選中該列。 2.2. 設(shè)置表格的屬性2.3. 拆分表格 拆分拆分：單擊要拆分的單元格，在【屬性】面板中單擊拆分單元格按鈕 ，在彈出的【拆分單元格】對話框中設(shè)置拆分行或列，并設(shè)置要拆分成的行數(shù)或列數(shù)，然后單擊按鈕即可將單元格拆分成多行或多列 ，如下圖所示。2.3. 合并表格 選中

19、需要合并的多個連續(xù)的單元格后，在【屬性】面板中單擊合并單元格按鈕 ，將多個單元格合并，如下圖所示。3、用表格設(shè)計頁面 1嵌套表格 2. 表格化的頁面結(jié)構(gòu) 3用表格規(guī)劃頁面結(jié)構(gòu) 4. 用表格設(shè)計頁面3.1. 嵌套表格 簡單地說，嵌套表格就是一個表格中含有另一個表格。引入嵌套表格有3個方面的原因。網(wǎng)頁的排版有時會很復(fù)雜，在外部需要一個表格來控制總體布局，如果內(nèi)部排版的細節(jié)也通過總表格來實現(xiàn)，容易引起行高列寬等的沖突，給排版工作帶來困難。其次，瀏覽器在解析網(wǎng)頁的時候，是將整個網(wǎng)頁下載完畢之后才顯示表格，如果不使用嵌套，表格非常復(fù)雜，瀏覽者需要等待很長時間才能看到網(wǎng)頁內(nèi)容。在嵌套表格中，可以利用表格的

20、背景圖像、邊框、間距和邊距等屬性得到漂亮的邊框效果，制作出精美的網(wǎng)頁。 創(chuàng)建嵌套表格的操作方法很簡單，先插入總表格，然后將鼠標光標置于要插入嵌套表格的單元格中，繼續(xù)插入表格即可。網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加文本在網(wǎng)頁中添加文本13.2. 表格化的頁面結(jié)構(gòu) 一個頁面的主要骨架結(jié)構(gòu)，大體可分為如下幾部分：Container（所有內(nèi)容）、Logo（標志）、Header（頭部）、Navigation（導(dǎo)航欄）、Main Content（主要內(nèi)容）、Sidebar（側(cè)欄）、Footer（頁腳），如右圖所示。這些部分都可以看成由一個個表格組成的。網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講在網(wǎng)頁中添加文本

21、在網(wǎng)頁中添加文本1Container：指頁面包含的所有內(nèi)容，所有的Web頁面都用一個Container，主要為了包含一些頁面元素。Header：網(wǎng)頁的頭部，嚴格意義上來說，Header并不是一個特定的元素，它更多用于放置Logo、導(dǎo)航欄等常見元素。Logo：Logo是一個專用標志，用于表明網(wǎng)站的身份和品牌。一般將Logo放在Header的左上角，使訪問者第一眼就能看到。 Navigation：導(dǎo)航欄部分。頁面導(dǎo)航是最重要的元素之一，訪問者一般都使用它來訪問網(wǎng)站中的其他內(nèi)容，為了便于用戶使用，容易找到，就放在頂端附近。Main Content：主要內(nèi)容部分。這是網(wǎng)站的核心，它是Web頁面的焦點。

22、Sidebar：側(cè)欄部分。主要放置一些次要內(nèi)容，如廣告、站點搜索、訂閱鏈接、聯(lián)系方法等，這個內(nèi)容不是必需的。一般將Sidebar放在頁面右側(cè)，也可以將其放在左側(cè)或兩邊，只要不干擾主要內(nèi)容的瀏覽就行，Sidebar往往是用縱向?qū)Ш?。Footer：頁腳部分。Web頁面的尾部總會有一個頁腳，這是Web頁面的結(jié)束部分。和Header一樣，F(xiàn)ooter也不是一個特定的元素。在頁腳里一般包含版權(quán)、法律聲明以及主要的聯(lián)系方式，也可以包含一些重要的鏈接。在網(wǎng)頁中添加圖片在網(wǎng)頁中添加圖片3網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計第第2 2講講3.3. 用表格規(guī)劃頁面結(jié)構(gòu) 在設(shè)計頁面時，為了整體把握頁面結(jié)構(gòu)，可以先用表格將頁面的主體框架勾勒出來，然后再針對每個部分進行內(nèi)容的填充，如下圖所示。具體操作參考范例解析4.3.