第2章動態(tài)網頁

第2章DreamweaverCS3基礎內容導讀本章主要講述Dreamweaver在開發(fā)網頁過程中的使用方法，在本章的結尾將以一個完整的例子來闡述Dreamweaver的綜合使用。重點提示文本和版面的控制圖像和多媒體的使用表格的應用超級鏈接頁面布局使用表單使用框架使用CSS樣式綜合實例——夢回紅樓之紅樓人物網頁制作22.1DreamweaverCS3DreamweaverCS3是為設計人員和開發(fā)人員而構建的，它提供一個選擇：是在直觀的可視布局界面中工作，還是在簡化的編碼環(huán)境中工作。AdobeDreamweaverCS3作為擁有的新功能拓展，包含了CSS工具、用于構建動態(tài)用戶界面的Ajax組件，并可以與其他Adobe軟件智能集成。具體包括：適合于Ajax的Spry框架、Spry數(shù)據(jù)、Spry構件、Spry效果、AdobePhotoshop和Fireworks集成、瀏覽器兼容性檢查、CSSAdvisor網站、CSS布局、CSS管理、AdobeDeviceCentralCS3。32.1.1DreamweaverCS3的工作環(huán)境啟動DreamweaverCS3后，新建網頁文件，其界面如圖2.1所示。42.1.1DreamweaverCS3的工作環(huán)境1．插入工具欄2．文檔窗口3．屬性面板52.1.1DreamweaverCS3的工作環(huán)境4．面板組(1) 默認面板組① 【CSS】面板組② 【應用程序】面板組③ 【標簽】面板組④ 【文件】面板組(2) 面板組的常用操作方法① 展開或折疊一個面板組② 關閉面板組使之在屏幕上不可見③ 打開屏幕上不可見的面板組或面板④ 移動浮動面板組⑤ 更改面板組的大小62.1.2創(chuàng)建站點1．站點規(guī)劃(1) 確定站點目標(2) 規(guī)劃站點結構(3) 規(guī)劃站點內容(4) 規(guī)劃站點的導航機制(5) 明確站點風格2．定義本地站點(1) “管理站點”對話框簡介① 創(chuàng)建新站點② 編輯站點③ 復制站點④ 刪除站點⑤ 導入和導出站點(2) 創(chuàng)建本地站點① 通過“站點定義向導”創(chuàng)建② 通過“高級”設置來創(chuàng)建72.1.2創(chuàng)建站點3．管理站點(1) 在站點中選擇多個文件(2) 在本地站點中剪切、粘貼、復制、刪除、重命名文件或文件夾(3) 創(chuàng)建文件或文件夾4．網頁文件的基本操作(1) 創(chuàng)建網頁(2) 打開網頁(3) 保存網頁82.2文本和版面的控制作為DreamweaverCS3的第一個練習，我們先來學習一下文本和版面的控制。本節(jié)將要制作一個“八榮八恥準則”網頁。可打開光盤中的2-1.html網頁，其效果如圖2.17所示。92.2.1版面控制1．頁面設置選擇“修改”→“頁面屬性”菜單命令，打開【頁面屬性】對話框，如圖2.18所示。2．設置頁面的頭部信息HTML文件由兩個主要部分組成：head部分和body部分。(1) 設置頁面標題(2) 設置頭部信息① 插入作者② 插入關鍵字③ 插入說明④ 插入刷新102.2.2網頁的文本的輸入和屬性設置1．插入文本(1) 直接輸入(2) 復制粘貼2．文本的格式化手工格式化方式是在文本的【屬性】面板中完成文字的格式化操作。用HTML標記格式化方式是以系統(tǒng)提供的HTML標記來格式化文本。CSS樣式是一種對網頁文檔內容進行精確格式化的方法，它可以使用許多HTML樣式不能使用的屬性。112.2.2網頁的文本的輸入和屬性設置在文本的【屬性】面板中各項的意義如下。(1) 格式(2) 樣式(3) 字體(4) 大小(5) 鏈接(6) 目標(7) 其他按鈕等122.2.3網頁其他元素的設置1．插入水平線2．插入日期 3．插入特殊字符132.2.4創(chuàng)建“八榮八恥準則”網頁創(chuàng)建網頁的步驟如下。(1)利用DreamweaverCS3創(chuàng)建一個新的網頁。(2)在文檔編輯區(qū)輸入或者拷貝內容，如圖2.39所示。(3)設置頁面的背景。選擇“修改”→“頁面屬性”命令。系統(tǒng)彈出【頁面屬性】對話框，如圖2.40所示。142.2.4創(chuàng)建“八榮八恥準則”網頁(4) 設置標題的字體、顏色以及對齊方式。通過上面的制作，頁面的效果如圖2.42所示。(5) 設置除標題之外的所有文字，格式為“段落”，字體大小為“14”。(6) 設置項目列表。選中從“首先是法律層面”到“第三是信念層面”的段落，從屬性面板中選擇一種項目列表，即可完成如圖2.45所示的效果。(7) 保存文件。選擇“文件”→“另存為”命令，在彈出的“另存為”對話框中，瀏覽到站點本地根文件夾下。填入文件名，單擊保存按鈕并退出。152.3圖像和多媒體的使用打開光盤中的2-2.html，“紅樓夢人物介紹”，效果如圖2.46所示。通過該網頁可以看出，在網頁中同時插入圖像和文字時，可以設置不同的對齊方式，以達到不同的顯示效果。 162.3.1網頁圖片的插入和屬性設置1．網頁圖像格式(1)GIF是圖像交換格式的簡稱。(2)JPEG是聯(lián)合圖像專家組的簡稱。(3)PNG是便攜網絡圖像的簡稱。2．插入圖像(1)將光標放到要插入圖像的位置。(2)選擇“插入記錄”→“圖像”菜單命令，或是單擊“插入”面板上“常用”選項卡的“圖像”按鈕，如圖2.47所示，從下拉列表中選擇【圖像】，彈出【選擇圖像源文件】對話框，如圖2.48所示。172.3.1網頁圖片的插入和屬性設置(3) 在磁盤上選擇需要的文件，在該對話框的URL文本框中，會顯示當前選中文件的URL地址。(4) 在【相對于】下拉列表框中，可以選擇文件URL地址的類型，選擇“文檔”則使用相對地址；選擇“站點根目錄”則使用基于根目錄的地址。(5) 選中【預覽圖像】復選框，則可以在對話框上預覽圖像。(6) 選中圖像文件后，單擊【確定】按鈕，即可將圖像插入到文檔中。182.3.1網頁圖片的插入和屬性設置3．設置圖像的屬性選定圖像，窗口正下方會出現(xiàn)圖像【屬性】面板，如圖2.49所示。4．插入鼠標經過圖像所謂“鼠標經過圖像”，是一種在瀏覽器中查看并使用鼠標指針經過它時發(fā)生變化的圖像。將光標放到要插入“鼠標經過圖像”的位置。選擇“插入記錄”→“圖像對象”→“鼠標經過圖像”菜單命令，或單擊“插入”面板“常用”選項卡的“圖像”按鈕，從下拉列表中選擇【鼠標經過圖像】，如圖2.51所示。192.3.2創(chuàng)建“紅樓夢人物介紹”網頁1．新建網頁輸入標題和內容，設置頁面的背景顏色，將該網頁設置為如圖2.53所示的樣式。2．插入圖像將光標移至“傳說女媧煉石補天之時”的前面，選擇“插入”→“圖像”菜單命令，出現(xiàn)如圖2.54所示的【選擇圖像源文件】對話框。選擇插入“renwu1.jpg”的圖片，單擊【確定】按鈕即可。重復上面的操作將3張圖片分別加入到網頁中，效果如圖2.55所示。202.3.2創(chuàng)建“紅樓夢人物介紹”網頁3．調整圖像的大小為了精確調整圖像的大小，可以選中圖像，在屬性面板中，設置圖片的【寬】和【高】，如圖2.56所示。4．設置圖片的對齊方式單擊選定renwu1.jpg圖片，選擇屬性面板中的對齊方式，選擇“左對齊”；選定renwu2.jpg圖片，選擇“右對齊”；選定renwu3.jpg，選擇“左對齊”，如圖2.57所示。212.3.2創(chuàng)建“紅樓夢人物介紹”網頁5．圖像和文字的相對位置默認值：使用瀏覽器默認的對齊方式，不同的瀏覽器會稍有不同。基線：圖像的下沿與文字的基線水平對齊。頂端：圖像的頂端與當前行中最高對象(圖像或文本)的頂端對齊。居中：圖像的中線與文字的基線水平對齊。底部：圖像的下沿與文字的基線水平對齊。文本上方：圖像的頂端與文本行中最高字符的頂端對齊。絕對居中：圖像的中線與文字的中線水平對齊。絕對底部：圖像的下沿與文字的下沿水平對齊。文字的下沿是指文字的最下邊，而【基線】不到文字的最下邊。左對齊：圖像在文字的左邊緣，文字從右側環(huán)繞圖像。右對齊：圖像在文字的右邊緣，文字從左側環(huán)繞圖像。222.4表格的應用打開光盤中2-3.html，利用表格制作的“金陵十二釵判詞”網頁效果如圖2.58所示。通過2-3.html網頁可以看出，表格可以規(guī)范化網頁的內容，本節(jié)主要介紹表格的基本操作，包括調整表格的大小、設置表格的屬性、設置表格單元格的屬性，最后介紹如何利用細線表格方法制作2-3.html網頁。232.4.1網頁的頁面布局1．網頁布局類型網頁布局大致可分為“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型2．第一屏所謂第一屏，是指我們到達一個網站在不拖動滾動條時能夠看到的部分。3．導航欄的位置4．什么樣的布局最好常見的分欄結構還有三分欄、四分欄，如圖2.60所示就是一個三分欄的結構。242.4.2表格的基本操作1．插入表格在網頁制作時要新建一個表格，可以選擇“插入記錄”→“表格”命令，或單擊“插入”欄的“常用”類型中的“插入表格”按鈕，也可用Ctrl+Alt+T快捷鍵，此時網頁編輯窗口中會彈出【表格】對話框，如圖2.61所示。252.4.2表格的基本操作2．選定表格和單元格(1) 選定整個表格(2) 選定行或列(3) 選定單元格3．設置表格和單元格的屬性(1) 設置表格屬性(2) 設置單元格屬性262.4.2表格的基本操作4．添加/刪除行和列(1)通過表格“屬性”面板增加與刪除表格的行和列(2)通過“修改”菜單增加與刪除表格的行和列5．單元格的合并與拆分(1)單元格合并操作(2)單元格拆分操作6．單元格的復制、粘貼、移動和清除7．表格的嵌套272.4.3表格的其他視圖1．擴展視圖在【插入】欄的【布局】選項卡中可看到【標準】和【擴展】兩種視圖按鈕(見圖2.67)。如圖2.68所示為網頁切換到“擴展視圖”后看到的效果，在這種視圖下，表格所有的邊框線都以較粗的線條顯示，表格中的元素都適當居中，這非常有利于文本光標的定位操作。282.4.3表格的其他視圖2．布局視圖如圖2.69所示為將網頁切換到“布局視圖”下的效果。292.4.3表格的其他視圖3．創(chuàng)建布局表格和布局單元格(1) 繪制布局表格(2) 繪制布局單元格(3) 移動布局表格和布局單元格4．設置布局表格和單元格屬性(1) 設置布局表格的屬性(2) 設置布局單元格屬性302.4.4創(chuàng)建“金陵十二釵判詞”網頁1．新建網頁2．插入第一個表格插入表格后選中整個表格，在屬性面板中設置對齊方式為“居中對齊”，填充、間距和邊框均為0，具體設置如圖2.73所示。3．插入第一個表格4．合并單元格5．輸入文字6．設置單元格7．保存網頁312.5超級鏈接Dreamweaver提供多種創(chuàng)建超鏈接的方法，可創(chuàng)建到文檔、圖像、多媒體文件或可下載軟件的鏈接，可以創(chuàng)建到文檔內任意位置的任何文本或圖像的鏈接，包括標題、列表、表、絕對定位的元素和框架中的文本或圖像。打開光盤中的2-4.html，帶有超級鏈接的“金陵十二釵圖譜”網頁效果如圖2.76所示。322.5.1超鏈接概述1．超級鏈接的類型內部鏈接外部鏈接Email鏈接錨點鏈接2．鏈接路徑(1) 絕對路徑(2) 相對路徑(3) 基于目錄的路徑3．創(chuàng)建超級鏈接首先在文檔窗口中選中想作為鏈接的文本或圖片，然后在屬性面板鏈接組合框的空白處填入鏈接的路徑，或者在“屬性”面板中單擊“鏈接”文本框左側的文件夾圖標，在彈出的“選擇文件”對話框中，選定要鏈接的文檔及采用哪種方式表達路徑。332.5.2創(chuàng)建“金陵十二釵圖譜”網頁1．新建網頁2．插入標題表格3．插入主體表格4．圖片超級鏈接5．文字超級鏈接6．創(chuàng)建錨點鏈接(1) 創(chuàng)建命名錨記(2) 創(chuàng)建到命名錨記的鏈接342.6頁面布局打開光盤中的2-5.html，利用AP元素制作的“史湘云”網頁效果如圖2.82所示。35