《網(wǎng)頁制作工具》PPT課件.ppt

第 2 章 網(wǎng)頁制作工具,聊城大學(xué)傳媒技術(shù)學(xué)院 王麗萍,本章內(nèi)容,本章內(nèi)容,Dreamweaver 是美國 MacroMedia 公司開發(fā)的一款“所見即所得”的網(wǎng)頁編輯器。 Adobe Dreamweaver CS3 是 MacroMedia 公司被 Adobe 公司收購后推出的第一個版本。,2.1 Dreamweaver 簡介,“站點”對應(yīng)一個文件夾，用來存放一個網(wǎng)站的所有網(wǎng)頁文件和其他資源文件。 Dreamweaver 可以對站點中的文件進行管理和維護。 創(chuàng)建站點的步驟： 在硬盤上新建一個文件夾，作為站點根目錄； 在 Dreamweaver 中管理站點。,2.2.1 站點的含義,站點結(jié)構(gòu)的設(shè)計原則 將文件分類保存在子文件夾中。 可以按文件的類型建立子文件夾。 也可以按網(wǎng)站欄目建立子文件夾。 文件夾的層次不要太深，不要超過 3 層。 文件夾、文件都不能使用中文命名。 盡量使用意義明確的名稱，以便于識記。 首頁命名為 index.html。,2.2.2 站點的結(jié)構(gòu),站點,2.2.2 站點的結(jié)構(gòu),在 Dreamweaver 中，使用“站點 | 新建站點”菜單命令新 建站點。 使用“站點 | 管理站點”菜單命令編輯或刪除站點。,2.2.3 在 Dreamweaver 中管理站點,分段：Enter 換行：Shift+Enter,2.3.1 分段與換行,“標(biāo)題 1 ”是最大的標(biāo)題，“標(biāo)題 6 ”是最小的標(biāo)題。,2.3.2 標(biāo)題文本,列表分為“項目列表”、“編號列表”和“定義列表”。,2.3.3 列表,重點、強調(diào),2.3.4 重點、強調(diào),重點 （粗體）,強調(diào) （斜體）,插入空格的方法： 按空格鍵可以在兩個字符間單擊一個半角空格。 按 Ctrl + Shift + Space 組合鍵，可以連續(xù)插入多個半角空格。 在 HTML 文檔中插入空格的代碼 。,2.3.5 空格,在“插入”面板的“文本”選項卡中，單擊“字符”左側(cè)的箭頭，在下拉菜單中選擇需要的特殊字符。,2.3.6 特殊字符,在網(wǎng)頁中，只允許使用以下格式的圖像文件： GIF 格式 無損壓縮； 8 位色深（256色）；支持透明；支持動畫。 JPG 格式 有損壓縮； 24 位色深。 PNG 格式 無損壓縮；具有 8 位、24 位和 32 位三種色深；支持透明和半透明。,2.4.1 網(wǎng)頁中的圖像格式,GIF 與 JPG 的比較,2.4.1 網(wǎng)頁中的圖像格式,GIF 與 PNG 的比較,2.4.1 網(wǎng)頁中的圖像格式,GIF 與 PNG 的比較,2.4.1 網(wǎng)頁中的圖像格式,在“插入”面板的“常用”選項卡中，單擊“圖像”按鈕。,插入圖像,2.4.2 插入圖像的方法,Div 是一個塊容器，一般用于劃分網(wǎng)頁的邏輯結(jié)構(gòu)。 在“插入”面板的“常用”選項卡中，單擊“Div 標(biāo)簽”按鈕。,2.5 插入 Div 標(biāo)簽,插入 Div 標(biāo)簽,2.6.1 表格的結(jié)構(gòu),表格由單元格、填充、間距、表格邊框組成。,在“插入”面板的“常用”選項卡中，單擊“表格”按鈕。,2.6.2 插入表格的方法,插入 表格,2.7.1 表單的作用,表單是收集用戶信息的重要工具。,表單由兩部分組成： 表單對象：用于收集信息，如文本框、單選按鈕、復(fù)選框。 應(yīng)用程序：用于處理信息 客戶端應(yīng)用程序 使用 JavaScript 編寫，在客戶端執(zhí)行，可以處理表單數(shù)據(jù)，但不能保存數(shù)據(jù)。 服務(wù)器端應(yīng)用程序 使用 ASP、JSP 或 PHP 等編寫，在服務(wù)器端執(zhí)行，可以處理表單數(shù)據(jù)，并在數(shù)據(jù)庫中保存數(shù)據(jù)。,2.7.2 表單的組成,在“插入”面板的“表單”選項卡中，單擊“表