1、一、網頁布局-表格二、超鏈接三、添加文本四、插入圖像五、用框架布局頁面靜態頁面設計一、網頁布局1、布局的實質n布局布局: 就是在頁面上劃分出不同的區域，按照設計的原則和方法，把不同的內容放置到不同的位置上，并通過色彩調和出不同的網站基調，使網頁內容形成一個有機的整體，充分表達網站主題的過程。n布局的方法布局的方法 :表格、層、框架 n利用表格布局：利用表格布局： 在插入面板中選擇“常用”標簽，點擊按鈕，彈出 “插入表格”對話框，設置相應的參數來插入表格。也可以通過選擇“【插入】【表格】”菜單命令打開“插入表格”對話框。“插入表格”對話框 l行數行數：新插入的表格的行數，可以更改數值來確定行數。

2、 l列數列數：新插入的表格的列數，可以更改數值來確定列數，行、列數控制表格劃分的區域個數（行列）。l表格寬度表格寬度：表格的寬度可以選擇是占頁面寬度的百分比（單位為百分比）或者固定尺寸（單位為像素）。l 邊框粗細邊框粗細：表格的邊界寬度，單位為像素，表格的屬性設置中將詳細講解邊框、填充值和間距值的區別。l 單元格邊距：單元格邊距：單元格邊框和單元格內容的間隔距離。l 單元格間距：單元格間距：單元格和單元格之間的間隔距離。l 頁眉：頁眉：把表格的第一行或第一列作為標題行或標題列。 作為標題行或標題列的行或列的內容將以粗體的形式顯示。l 標題：標題：提供一個顯示在表格外的表格標題。l 對齊標題：對

3、齊標題：指定表格標題相對于表格的顯示位置。l 摘要：摘要：給出表格的說明。該文本不會顯示在用戶的瀏覽器中。1.表格的屬性設置（1）“表格Id”是表格的ID，有時動態更改表格屬性時要用到它。（2）“行”和“列”是表格中行和列的數目。（3）“寬”和“高”是表格的寬度和高度，以像素為單位或者是按占瀏覽器窗口寬度的百分比計算的。（4）“填充”是單元格內容和單元格邊界之間的像素數。（5）“間距”是相鄰的單元格之間的像素數。（6）“對齊”指表格相對于同一段落中其他元素（如文本或圖像）的顯示位置。居左、居中還是居右。（7）“邊框”指表格邊框的寬度（以像素為單位）（8）“清除列寬”按鈕 和“清除行高”按鈕 是

4、清除表格中所有顯示指定的行高和列寬值。（9）“將表格寬度轉換成像素”和“將表格高度轉換成像素”按鈕是將表格中列的寬度或高度設置為以像素為單位的當前數值。（10）“將表格寬度轉換成百分比”和“將表格高度轉換成百分比”按鈕是將表格中列的寬度或高度設置為按占文檔窗口寬度百分比表示的當前寬度。（ 11）“背景顏色”指定表格的背景顏色。（12）“邊框顏色”指定表格的邊框顏色。（13）“背景圖像”指定表格的背景圖像。n選中一個單元格n選中一行n選中一列n選中不相鄰的單元格(Ctrl)n插入刪除行和列（鼠標右鍵“表格”選項）2單元格的操作3.單元格屬性（1）“合并單元格”按鈕 可將所選的多個連續單元格、行或

5、列合并為一個單元格。（2）“拆分單元格”按鈕 可將一個單元格分成兩個或是更多的單元格。單擊該按鈕，會打開“拆分單元格”對話框，如圖 所示。在該對話框中可以選擇將選中的單元格拆分成“行”或“列” （3）“水平”文本框：設置單元格內對象的水平對齊方式。（4）“垂直”文本框：設置單元格內對象的垂直對齊方式。（5）“寬”和“高”文本框：設置單元格的寬度和高度，可以用像素或百分比來表示。（6）“不換行”復選框：設置單元格文本是否換行。如果選擇該復選框，則當輸入的數據超出單元格寬度時，單元格會自動調整寬度來容納數據。（7）“標題”復選框：如果選擇該復選框，可以將所選單元格的格式設置為表格標題單元格。默認情

6、況下，表格標題單元格的內容為粗體并且居中對齊。（8）“背景”文本框：設置單元格的背景圖像。（9）“背景顏色”文本框：設置單元格的背景顏色。（10）“邊框”文本框：設置單元格邊框的顏色。例：網頁模板的設計使用模板提高網頁制作效率 n模板是網頁編輯軟件生成具有相似結構和外觀的一種網頁制作功能。如果希望站點中的網頁享有某種特性，例如，相同的布局結構，相似的導航欄等內容，模板是是非常有用的。n模板是由兩類區域組成的：鎖定區域和可編輯區域。當某個文檔從某些模板中創建時，可編輯區域則成為唯一可以被改變的地方。1直接新建模板n在Dreamweaver中可以直接創建模板文件，具體步驟如下： （1）選擇“文件”

7、“新建”命令，打開“新建文檔”的對話框，在對話框的“常規”選項卡中選擇“類別”中的“模板頁”中的“HTML模板”選項 2從現有頁面生成模板對于已經設計好的網頁文檔，如果覺得有必要作為模板文檔，則將其另存為模板即可，具體操作如下：n（1）打開要另存為模板的文檔網頁，選擇“文件”“另存為模板”命令，n（2）打開“另存為模板”對話框，在對話框中，在“站點”下列列表中選擇相應的站點，在“另存為”文本框中輸入模板的名稱，單擊“保存”按鈕，即可將文件保存為模板。n1.執行“插入表格”命令，彈出“表格”對話框，設置行數為“7”，列數為“7”，表格寬度設置為“930”像素，高設置為“130”像素。單擊“確定”

8、按鈕，插入一個7行7列的表格。n2.設置表格前3行（單擊標簽）高度為43，后5列寬度為54，即頁面頭部右上角3.模板制作過程：n3.將第1列前3行單元格合并，設置寬度為215，將第2列前3行單元格合并，設置寬度為481n 4.將第4行單元格合并，并插入寬度為100%的表格，1行6列5.第6行后6列合并，第1列中插入6行1列表格，并設置相應高度6.設置背景圖片和背景顏色7.插入背景圖片8.將光標至于要創建可編輯區域的位置，選擇“插入”“模板對象”“可編輯區域”命令，打開“新建可編輯區域”對話框 。9.利用模板創建頁面n選擇“文件”“新建”命令，打開“從模板新建”對話框，在“模板”選項卡中選擇站點

9、中的模板，點擊創建按鈕，就可以創建一個模板頁面。二、超鏈接 n在一個文檔中可以創建幾種類型的鏈接：n 鏈接到其它文檔或文件（如圖形、影片、PDF 或聲音文件）的鏈接。n 命名錨記鏈接，此類鏈接跳轉至文檔內的特定位置。n 電子郵件鏈接，此類鏈接新建一個收件人地址已經填好的空白電子郵件。n 空鏈接和腳本鏈接，此類鏈接使您能夠在對象上附加行為，或者創建執行 JavaScript 代碼的鏈接。1.普通超級鏈接或者可以點擊“瀏覽”按鈕為圖片添加鏈接n在默認情況下，被鏈接的文件在當前窗口或框架內打開。要使被鏈接的文檔顯示在其他窗口或新的窗口或框架內，則需設置屬性面板中的“目標(R)”選項“目標(R)”的各

10、選項設置如下：n _blank。 將鏈接的文檔在一個新的、未命名的瀏覽器窗口中打開。n _parent。 將鏈接的文檔在該鏈接所在框架的父框架或父窗口中打開。如果包含鏈接的框架不是嵌套框架，則所鏈接的文檔在整個瀏覽器窗口中打開。 n _self。 將鏈接的文檔在鏈接所在的同一框架或窗口中打開，此目標為默認值，即不指定目標，則在同一框架或窗口打開文檔。 n _top。 將鏈接的文檔在整個瀏覽器窗口中打開，從而取代當前窗口的所有框架。 2.錨點鏈接n 錨點鏈接指向的是本網頁中或其他網頁中的指定位置。從而使瀏覽者可以快速到達指定的位置，所以錨點鏈接特別適合各個章節之間的跳轉，以及長篇文字的閱讀等。錨

11、點鏈接和其他鏈接制作不太相同，在使用前必須先定義一個錨點，然后在其他的地方指向這個錨點。（1）設置錨點n在設計視圖中，將光標移動到需要設置錨點的地方，或選擇需要作為錨點的文本。n選擇“插入”“命名錨記”命令，或按下快捷鍵Ctrl+Alt+A，或單擊“常用”插入欄中的“命名錨記”按鈕，將打開“命名錨記”對話框 注：如果在設計視圖中沒有看到錨記，則可以選擇在菜單“查看”“可視化助理”“不可見元素”命令來進行查看。（2）創建錨點鏈接n選擇要建立鏈接的文本或圖像。n在“屬性面板”的“鏈接”文本框中輸入#號和錨記名稱。例如：輸入“#1”。 3E-mail鏈接n E-mail鏈接也是眾多網站上網頁的重要內

12、容之一，瀏覽者只需要在其上單擊鼠標，就可以打開郵件發送程序，與企業或個人進行交流。電子郵件鏈接與其他超級鏈接稍微有不同，鏈接地址不再以http開頭，而是mailto，設置鏈接的方式與其他鏈接一樣。n在設計視圖中，選擇要作為電子郵件鏈接的文字或將光標置于需要設置電子郵件鏈接的地方。n選擇菜單“插入”“電子郵件鏈接”命令，或單擊“常用”插入欄中的“電子郵件鏈接”按鈕，將打開“電子郵件鏈接”對話框 n“屬性”面板窗口如圖所示，也可以在文檔窗口輸入文字，在屬性窗口中修改鏈接的E-mail地址。 4.空鏈接n相比上面介紹的其他所有超鏈接種類，空鏈接最為獨特，它是一種沒有鏈接對象的鏈接。空鏈接中的目標UR

13、L是用“#”來表示的，在制作鏈接時，只要在“屬性”面板的“鏈接”文本框中錄入“#”標記即可 5腳本鏈接n腳本鏈接是一種特殊類型的鏈接，通過單擊帶有腳本鏈接的文本或對象，可以運行相應的腳本及函數（如JavaScript、VBScript等），從而為瀏覽者提供許多附加信息。 n在文檔窗口，選擇要創建鏈接的文本或其他對象。n在“屬性”面板中的“鏈接”文本框中輸入“JavaScript：”，接著輸入相應的JavaScript代碼或函數，如JavaScript:alert(您好,謝謝光臨！)三、添加文本n1 輸入普通文本： 在Dreamweaver8中輸入文本的方法有很多。可以直接在文檔窗口中輸入文本，

14、也可以從其他文檔中剪切并粘貼或導入文本。n2輸入特殊字符 單擊“插入欄”左側的下拉按鈕，在打開的下拉列表中選擇“文本”選項，然后單擊最右邊的“字符”下拉按鈕。 在彈出的下拉菜單中選擇合適的特殊字符，如、等。如果沒有合適的字符，可以選擇“其他字符”選項 3輸入空格n因為HTML有規定，連續多個空格將被忽視，只顯示一個空格，所以Dreamweaver中不能直接輸入多個空格，要想輸入多個空格 ： （1）切換中文輸入法為全角模式，輸入全角的空格。 （2）單擊“文本”插入欄中的“字符”下拉菜單按鈕，在下拉列表中選擇“不換行空格”命令。 （3）在HTML代碼中要插入空格的位置輸入多個“ 

15、”，在設計視圖顯示的就是輸入了多個空格。4輸入日期（1）在設計視圖中直接輸入日期的文本。（2）單擊“常用”插入欄中的“日期”按鈕，在彈出的“插入日期”對話框中選擇需要的日期格式并單擊確定。 n選擇“存儲時自動更新”復選框，則在日期格式插入到文檔中后可以對其進行編輯，如果沒有選這項，插入后變成純文本，不好修改。如果希望在每次保存文檔時都更新插入的日期，則選擇“儲存時自動更新”。 n如果要更改日期，可以先用鼠標選中該對象，然后單擊“屬性”面板中的“編輯日期格式”按鈕， 5.設置文本格式1標題 在HTML中，一共定義了6級標題，從1級到6級，字體大小依次遞減。 （1）選擇相應的文本，選擇“文本”“段

16、落格式”命令，然后在子菜單中選擇相應的標題。 （2）選擇相應的文字，在“屬性”面板上的“格式”下拉列表中選擇相應的標題。 2字體對文本進行字體設置的方法有以下兩種： （1）選擇要設置字體的文本，然后選擇 “文本”“字體”命令，在彈出的子菜單中選擇合適的字體類型。 （2）選擇要設置字體的文本，單擊“屬性”面板上的“字體”下拉按鈕，在下拉列表中選擇合適的字體類型。如果沒有找到合適的字體，單擊“編輯字體列表”命令，將彈出“編輯字體列表”對話框 3顏色（1）選擇要設置顏色的文本，然后選擇“文本”“顏色”命令，將彈出“顏色”對話框（windows標準顏色對話框）。（2）選擇要設置顏色的文本，單擊“屬性”

17、面板上的“文本顏色”按鈕，打開顏色選擇器。 （3）在“屬性”面板上點擊“頁面屬性”，或者選擇菜單“修改”“頁面屬性”命令，打開“頁面屬性”對話框，可以設置文本的字體顏色 4文本大小n選擇要設置的文本，在“屬性”面板上的“大小”下拉列表中選擇合適的文本大小，也可以在文本框中直接輸入數值來改變文本大小，如果不想設置，則選擇“無”選項，此時，文本就恢復為默認的文本大小。 5文本的樣式： 文本的樣式，即文本的顯示方式，如加粗、傾斜、下劃線和刪除線等。 設置文本樣式的方法是選擇要設置的文本，然后選擇菜單“文本”“樣式”命令 6對齊n對齊可以將幾個段落相對于文檔窗口進行對齊，有4種對齊方式：左對齊、居中對

18、齊、右對齊、兩端對齊。 設置方法同上所述，可以選擇菜單“文本”“對齊”命令來實現，也可以在“屬性”面板上單擊對齊方式的按鈕來實現 。7縮進和凸出縮進和凸出有兩種設置方法：（1）將光標至于要設置縮進的文本中，選擇菜單“文本”“縮進”命令，就可以將文本向右移兩個字符的位置。選擇“文本”“凸出”命令，則可以將文本向左移兩個字符的位置。（2）在“屬性”面板中點擊縮進和凸出的圖標 ，也可以進行設置。8文本列表（1）項目列表的類型 項目列表根據各個項目之間是否有先后次序，可以分為有序列表和無序列表。 無序列表表示各個項目之間沒有先后次序，通常用正方形、菱形等符號作為列表項的前綴。而有序列表正好相反，各項目

19、之間具有明確的先后關系，前綴符號常常是阿拉伯數字、羅馬數字和英文字母等。 （2）對現有文檔進行項目列表 n創建無序列表 選擇所輸入的文本，然后選擇菜單“文本”“列表”“項目列表”命令，或者單擊“屬性”面板下方的“項目列表”按鈕。n創建有序列表 選擇所輸入的文本，然后選擇“文本”“列表”“編號列表”命令，或者單擊“屬性”面板下方的“編號列表”按鈕。n（3）設置列表屬性 在介紹建立有序列表和無序列表時，默認只有一種前綴，其實還可以通過修改列表屬性來改變前綴。 選擇“文本”“列表”“屬性”命令，打開“列表屬性”對話框 n列表類型列表類型指定列表屬性，而列表項目列表項目指定列表中的個別項目。使用彈出式

20、菜單選擇項目、編號、目錄或菜單列表。根據所選的“列表類型”，對話框中將出現不同的選項。n樣式樣式確定用于編號列表或項目列表的編號或項目符號的樣式。所有列表項目都將具有該樣式，除非為列表項目指定新樣式。n開始計數開始計數設置第一個編號列表項的值。文字變化典型實例n在網頁中插入文字并對文字進行修飾的方法，包括色彩變化、大小變化、特殊字符、斜體粗體、段落縮進、對齊效果等。靈活掌握這些方法，對網頁制作能起到很大的幫助。四、插入圖像n1 插入圖像對象 在Dreamweaver中向網頁文件插入圖像，Dreamweaver會自動生成該圖像的路徑引用，如果要是圖像能夠正確地在網頁中顯示，必須保證此圖像文件在當

21、前的站點內。如果不在站點內，Dreamweaver會提示是否將此圖像復制到當前站點的文件夾中。(1)插入單個圖像n選擇要插入圖像的位置，然后選擇“插入”“圖像”命令，或者單擊“常用”插入欄中的“圖像”“圖像”按鈕 n在彈出的“選擇圖像源文件”對話框中，選擇本地的圖像文件 (2)插入圖像占位符 圖像占位符，是最終圖像的一個暫時替代品。雖然沒有最終的圖像，但是可以讓設計者很直觀的看到設計的整體效果。n插入圖像占位符的步驟如下： 選擇要插入圖像占位符的位置，然后選擇“插入”“圖像對象”“圖像占位符”命令，或者單擊“常用”插入欄中的“圖像”“圖像占位符”按鈕，將彈出“圖像占位符”對話框. 在“替換文本

22、”文本框中，輸入描述此圖像占位符的文字，當瀏覽器不能顯示該圖像占位符時，就會顯示該替換文本。選中該圖像占位符，也可以通過屬性面板來修改圖像占位符的屬性，如大小，顏色，替換文本等。(3)插入鼠標經過的圖像 鼠標經過的圖像實際上是由兩幅圖像組成的，即原始圖像和鼠標經過的圖像。原始圖像，是首次網頁裝載是顯示的圖像；鼠標經過的圖像是鼠標移動到原始圖像上時，用來替換原始圖像的圖像。n選擇要插入鼠標經過的圖像的位置，選擇“插入”“圖像對象”“鼠標經過圖像”命令，或者單擊“常用”插入欄中的“圖像”“鼠標經過圖像”按鈕，將彈出“插入鼠標經過圖像”對話框。(4)插入導航條 導航條由圖像和圖像組組成，這些圖像顯示

23、的內容隨用戶操作的變化而變化。導航條通常為站點上的頁面和文件之間的移動提供一條簡潔的途徑。導航條項目有4種狀態：一般狀態、鼠標經過狀態、按下狀態、按下時鼠標經過狀態。n選擇要插入導航欄的位置，選擇“插入”“圖像對象”“導航條”命令，或者單擊“常用”插入欄中的“圖像”“導航條”按鈕，將彈出“插入導航條”對話框 l在導航條里，每個鏈接圖像即為一個項目，全部導航條項目都顯示在“導航條元件”列表框中。單擊 “+” 按鈕，將增加一個項目，在列表框中選擇一個項目，單擊“-” 按鈕，可以刪除選擇項目。選中一個項目，單擊“向上向下”按鈕，可以調整選擇的項目在導航條里的排列位置l“項目名稱”文本框：為項目起一個

24、名稱，英文或數字。l“狀態圖像”文本框：設置這個項目原始圖像，可單擊“瀏覽”按鈕，選擇源圖像文件。l“鼠標經過圖像”文本框：設置當鼠標經過這個項目的原始圖像時變成的圖像，可單擊“瀏覽”按鈕，選擇圖像文件。l“按下圖像”文本框：設置當鼠標左鍵按下后，這個項目所顯示的圖像，可單擊“瀏覽”按鈕，選擇圖像文件。l“按下時鼠標經過圖像”文本框：設置當鼠標左鍵按下后，鼠標經過這個項目所變成的圖像，可單擊“瀏覽”按鈕，選擇圖像文件。l“替換文本”文本框：設置當圖像無法顯示時，所顯示的文字說明。l“按下時，前往的URL”文本框：設置當單擊這個項目時所鏈接的網址。l“插入”下拉列表：設置導航條的排列方式，選擇“

25、水平”，則導航條將水平排列，如果選擇“垂直”，則導航條將垂直顯示。l“使用表格”復選框：選擇該復選框，導航條將用表格排版，每個鏈接圖像位于一個單元格內。l單擊“確定”按鈕，即可在網頁中插入一個導航條。2.設置圖像屬性n在網頁中插入原始圖像后，往往達不到想要的效果，這是就需要對圖像進行相關的設置。打開文檔，選中要修改的圖像，然后在屬性面板中改變圖像屬性n邊距:是圖像和周圍元素間的距離，在垂直邊距和水平邊距文本框中可為圖像的邊緣添加邊距，單位也是像素。n低解析度源:這里指定在載入主圖像之前所載入的圖像。許多設計人員使用二位（黑白）圖像版本，由于他們的數據量比較小，在主圖像載入之前能很快顯示，使訪問

26、者能對他們等待的圖像內容有所了解。當然，在這里也可以指定任何與主圖像大小相同的圖像，不一定是主圖像的縮略圖。3.創建熱區鏈接 一張圖片內可以創建包含多個鏈接，圖像內不同的區域或文字都可以指向具體鏈接目標。圖像圖內創建鏈接的區域稱為“熱區”，熱區與鏈接目標逐一對應，單擊熱區后，即可對鏈接目標進行跟蹤、訪問。n（1）選中要創建熱點區域的圖像，打開“屬性”面板。n（2）在“屬性”面板中的“地圖”文本框中輸入該熱點區域的名稱。n（3）創建圓形的熱點區域，則點擊橢圓形的熱點工具，然后在圖像上的某個區域拖拽鼠標指針，從而創建一個圓形的熱點區域，也可以選擇矩形和多邊形熱點工具來創建熱點區域。 l 在“鏈接”

27、文本框設定鏈接的URL地址。l 在“目標”下拉列表中，設置鏈接目標文件的打開窗口類型。l 在“替換”文本框中輸入給圖像熱點區域的替換文字。例2：導航欄五、用框架布局頁面 n框架的作用就是把瀏覽器窗口劃分為幾個不同的區域，每個區域顯示不同的網頁。n常見的框架方式是將左方區域或上方區域設置為目錄區域，其中包含顯示文件各個頁面的目錄索引或導航條。右方區域或下方區域為主體區域，顯示網頁變化的主體內容。n用戶單擊目錄索引項或導航條時，主體區域就顯示相應的內容。而目錄區域的導航內容始終顯示在頁面上，這樣將重復區域固定下來，當向瀏覽器發出請求時，只下載變化的網頁內容。n框架集就是框架的集合，實際上是一個頁面

28、，用于在一個文檔窗口中顯示多個文檔的框架結構。在框架集中顯示的每個框架，就是一個獨立存在的HTML文件 。1創建框架集（1）創建預定義框架集：在Dreamweaver中，可以用兩種方式：通過“布局”插入欄創建框架集，步驟如下：l選擇“布局”插入欄，在“布局”插入欄中選擇“框架”選項 。l打開框架選擇面板，選擇一種框架結構，可以是左側框架、右側框架、上下框架等。 l單擊某個框架類型，系統會自動彈出“框架標簽輔助功能屬性”對話框。 l單擊“框架”下列列表，選擇要更改標題的框架，然后在“標題”文本框中輸入框架標題。通過菜單命令創建新的空框架集l打開Dreamweaver，選擇“文件”“新建”菜單命令

29、，打開“新建文檔”對話框，在該對話框中“常規”選項卡的“類別”列表框中選擇“框架集”選項（2）編輯框架集）編輯框架集將鼠標放在要插入新框架的框架頁中，選擇“插入”|“HTML”|“框架”命令，在后面的列表中選擇需要的樣式；或者選擇“修改”|“框架頁”命令，可以進行框架的拆分。（3）調整框架大小l如圖，單擊“可視化助理”按鈕，在彈出的菜單中選擇“框架邊框”并打開l將鼠標移至“文檔窗口”邊框，當鼠標指針變為雙向箭頭時，拖動鼠標即可粗略調整框架的大小。2存儲框架和框架集（1）保存框架集的所有文件 保存框架集的所有文件的方法為：選擇“文件”“保存全部”命令，將彈出“另存為”對話框，提示保存框架文件；或者也可以依次一個一個保存框架集和框架。在保