2011最新Dreamweaver_8課件.ppt

課堂講解 什么是網(wǎng)頁和網(wǎng)站網(wǎng)頁的分類網(wǎng)頁中的常用術(shù)語網(wǎng)頁設(shè)計(jì)的相關(guān)知識認(rèn)識Dreamweaver8Dreamweaver8的基本操作Dreamweaver8工作界面介紹 什么是網(wǎng)頁和網(wǎng)站 什么是網(wǎng)頁什么是網(wǎng)站 什么是網(wǎng)頁 網(wǎng)頁是由HTML 超級文本標(biāo)識語言 或者其他語言編寫的 通過IE瀏覽器編譯后供用戶獲取信息的頁面 它又稱為Web頁 其中可包含文字 圖像 表格 動(dòng)畫和超級鏈接等各種網(wǎng)頁元素 什么是網(wǎng)站 網(wǎng)站就是一個(gè)或多個(gè)網(wǎng)頁的集合 從廣義上講 網(wǎng)站就是當(dāng)網(wǎng)頁發(fā)布到Internet上以后 能通過瀏覽器在Internet上訪問的頁面 門戶網(wǎng)站職能網(wǎng)站專業(yè)網(wǎng)站個(gè)人網(wǎng)站 網(wǎng)頁的分類 按所處位置分類按表現(xiàn)形式分類 按所處位置分類 按網(wǎng)頁在網(wǎng)站中所處的位置可將網(wǎng)頁分為主頁和子頁兩類 按表現(xiàn)形式分類 按網(wǎng)頁的表現(xiàn)形式可將網(wǎng)頁分為靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁 網(wǎng)頁中的常用術(shù)語 萬維網(wǎng) www 瀏覽器統(tǒng)一資源定位符 URL 文件傳輸協(xié)議 FTP IP地址域名超級鏈接超級文本標(biāo)記語言 HTML 萬維網(wǎng) www 萬維網(wǎng) www 是WorldWideWeb的中文簡稱 也稱為3W網(wǎng) 它的本質(zhì)是一種基于超級文本技術(shù)的交互式信息瀏覽檢索工具 是Internet提供的應(yīng)用最普及 功能最豐富 使用方法最簡便的信息服務(wù) 用戶可通過它在Internet上瀏覽 編輯 傳遞超文本格式的文件 即 html格式文件 瀏覽器 瀏覽器是用于閱讀網(wǎng)頁中信息的一種軟件工具 就像使用電腦必須有操作系統(tǒng)一樣 InternetExplorer IE NetscapeNavigator NE 騰訊TT瀏覽器 統(tǒng)一資源定位符 URL URL UniformResourceLocator 主要是用來指定協(xié)議 如HTTP或FTP 以及對象 文檔 萬維網(wǎng)網(wǎng)頁或其他目標(biāo)在Internet的位置和存取方式 通信協(xié)議主機(jī)名所要訪問的網(wǎng)頁路徑及名稱 文件傳輸協(xié)議 FTP FTP FileTransferProtocol 是一種廣泛使用的文件傳輸協(xié)議 是快速 高效和可靠的信息傳輸方法 FTP是基于客戶 服務(wù)器模型的TCP IP的應(yīng)用 所以只要在客戶端和服務(wù)器之間建立了TCP IP連接 無論兩臺電腦的位置遠(yuǎn)近 連接方式的異同以及使用的操作系統(tǒng)的異同 都能通過FTP協(xié)議進(jìn)行文件的傳輸 IP地址 IP地址用來標(biāo)識連接到Internet上電腦的指定編號 每一個(gè)IP地址對應(yīng)一臺電腦 這與用電話號碼標(biāo)識電話網(wǎng)絡(luò)中的電話相同 電腦識別的IP地址由32位二進(jìn)制數(shù)值組成 電腦上以十進(jìn)制數(shù)值來顯示 一組數(shù)值分為4部分 每一部分均不能大于255 中間用 分隔 如61 139 2 69 域名 域名就是常說的網(wǎng)址 它也具有惟一性 如百度的網(wǎng)址 網(wǎng)易的網(wǎng)址等就是一個(gè)域名 域名由漢語拼音或英文字符加上數(shù)字表示 在訪問網(wǎng)絡(luò)時(shí) 域名將通過域名服務(wù)器轉(zhuǎn)換成IP地址 這種轉(zhuǎn)換是在后臺完成的 超級鏈接 超級鏈接是網(wǎng)頁中最常用的元素之一 網(wǎng)頁就是通過無數(shù)的超級鏈接才能組成一個(gè)網(wǎng)站 超級鏈接可以鏈接到網(wǎng)站內(nèi)部頁面 對象 也可以鏈接到其他網(wǎng)站 大大方便了用戶在各個(gè)頁面對象之間實(shí)現(xiàn)跳轉(zhuǎn) 超級文本標(biāo)記語言 HTML HTML HyperTextMarkupLanguage 是一種用戶與電腦之間進(jìn)行交流的文本技術(shù) 各種網(wǎng)頁均是用HTML語言來描述的 用HTML語言編寫的網(wǎng)頁文件的擴(kuò)展名一般為 htm 或 html 網(wǎng)頁設(shè)計(jì)的相關(guān)知識 設(shè)計(jì)網(wǎng)頁的原則網(wǎng)頁設(shè)計(jì)的一般步驟網(wǎng)頁制作的常用工具 設(shè)計(jì)網(wǎng)頁的原則 整體規(guī)劃鮮明的主題善用圖像醒目的導(dǎo)航及時(shí)更新易記的網(wǎng)站名稱通用網(wǎng)頁動(dòng)畫適量 網(wǎng)頁設(shè)計(jì)的一般步驟 規(guī)劃網(wǎng)站收集整理資源配置站點(diǎn)創(chuàng)建頁面測試站點(diǎn)發(fā)布站點(diǎn)維護(hù) 更新站點(diǎn) 網(wǎng)頁制作的常用工具 網(wǎng)頁設(shè)計(jì)軟件Dreamweaver是目前使用最多的網(wǎng)頁設(shè)計(jì)軟件 圖像處理軟件制作網(wǎng)頁圖像的軟件種類繁多 大多數(shù)網(wǎng)頁設(shè)計(jì)人員選擇的是Fireworks或Photoshop 動(dòng)畫制作軟件網(wǎng)頁動(dòng)畫制作中最常用的軟件非Flash莫屬 認(rèn)識Dreamweaver8 使用Dreamweaver8制作網(wǎng)頁之前 需先將該軟件安裝到電腦中 其方法與安裝其他軟件相似 用戶可根據(jù)提示操作 Dreamweaver8的基本操作 啟動(dòng)Dreamweaver8新建空白HTML網(wǎng)頁保存網(wǎng)頁文檔預(yù)覽網(wǎng)頁效果退出Dreamweaver8 啟動(dòng)Dreamweaver8 選擇 開始 所有程序 Macromedia MacromediaDreamweaver8菜單命令 新建空白HTML網(wǎng)頁 選擇 文件 新建 菜單命令 打開 新建文檔 對話框 在 分類 欄中選擇 基本頁 選項(xiàng) 在 基本頁 欄中選擇 HTML 選項(xiàng) 單擊 創(chuàng)建 按鈕 保存網(wǎng)頁文檔 選擇 文件 保存 菜單命令 打開的 另存為 對話框 在 保存在 下拉列表框中選擇文件的保存路徑 在 文件名 文本框中輸入保存的文件名 單擊 保存 按鈕 預(yù)覽網(wǎng)頁效果 選擇 文件 在瀏覽器中預(yù)覽 IExplore6 0 菜單命令在IE瀏覽器中預(yù)覽網(wǎng)頁文檔的效果 退出Dreamweaver8 單擊Dreamweaver8窗口右上角的 關(guān)閉 按鈕 單擊Dreamweaver8窗口左上角的圖標(biāo) 在彈出的下拉菜單中選擇 關(guān)閉 命令 在Dreamweaver8窗口中選擇 文件 退出 菜單命令 在當(dāng)前窗口為Dreamweaver8工作界面時(shí) 按 Alt F4 鍵退出Dreamweaver8 Dreamweaver8工作界面介紹 插入欄文檔工具欄文檔編輯區(qū)網(wǎng)頁標(biāo)簽擴(kuò)展按鈕浮動(dòng)面板組屬性面板標(biāo)簽選擇器水平標(biāo)尺和垂直標(biāo)尺 上機(jī)實(shí)戰(zhàn) 本課上機(jī)實(shí)戰(zhàn)將練習(xí)在Dreamweaver8中新建一個(gè)只包含文本的簡單網(wǎng)頁 并使用IE瀏覽器預(yù)覽其效果 其中主要練習(xí)Dreamweaver8的啟動(dòng) 新建文檔 保存網(wǎng)頁 預(yù)覽網(wǎng)頁和退出Dreamweaver8的操作 課堂講解上機(jī)實(shí)戰(zhàn) 第2課站點(diǎn)的基本操作 課堂講解 站點(diǎn)的規(guī)劃創(chuàng)建本地站點(diǎn)創(chuàng)建遠(yuǎn)程站點(diǎn)管理本地站點(diǎn)管理站點(diǎn)地圖頁面設(shè)置 站點(diǎn)的規(guī)劃 Dreamweaver8的站點(diǎn)類型規(guī)劃站點(diǎn)結(jié)構(gòu)繪制網(wǎng)站結(jié)構(gòu)草圖 Dreamweaver8的站點(diǎn)類型 本地站點(diǎn)遠(yuǎn)程站點(diǎn)測試站點(diǎn) 規(guī)劃站點(diǎn)結(jié)構(gòu) 規(guī)劃站點(diǎn)結(jié)構(gòu)是設(shè)計(jì)站點(diǎn)的必要前提 其操作是將不同的文件分類存放在文件夾中以便于設(shè)計(jì)者管理 合理地組織站點(diǎn)結(jié)構(gòu) 可提高工作效率 加快對站點(diǎn)的設(shè)計(jì) 繪制網(wǎng)站結(jié)構(gòu)草圖 站點(diǎn)規(guī)劃好之后 就可以根據(jù)規(guī)劃繪制出一個(gè)網(wǎng)站結(jié)構(gòu)草圖 以便于有一個(gè)清晰的思路 創(chuàng)建本地站點(diǎn) 新建站點(diǎn)新建文件夾新建網(wǎng)頁文件 新建站點(diǎn) 通過 站點(diǎn) 新建站點(diǎn) 菜單命令或 文件 面板新建站點(diǎn) 新建站點(diǎn) 新建文件夾 建立好站點(diǎn)后就可以在站點(diǎn)中新建文件夾 該文件夾主要用來存儲這個(gè)網(wǎng)站中用到的網(wǎng)頁元素 如圖片 音樂等 新建網(wǎng)頁文件 新建網(wǎng)頁文件的方法與新建文件夾的方法相同 創(chuàng)建遠(yuǎn)程站點(diǎn) 創(chuàng)建遠(yuǎn)程站點(diǎn)的方法與創(chuàng)建本地站點(diǎn)的方法類似 只是無需在站點(diǎn)文件夾下再新建文件夾或網(wǎng)頁文件 管理本地站點(diǎn) 編輯本地站點(diǎn)刪除本地站點(diǎn) 編輯本地站點(diǎn) 選擇本地站點(diǎn)刪除站點(diǎn)中的文件和文件夾更改站點(diǎn)信息 刪除本地站點(diǎn) 如果不需要某個(gè)站點(diǎn)時(shí) 可以將其從站點(diǎn)列表中刪除 管理站點(diǎn)地圖 定義主頁查看站點(diǎn)地圖在站點(diǎn)地圖中管理頁面文件 定義主頁 在使用站點(diǎn)地圖查看站點(diǎn)時(shí)必須保證這個(gè)站點(diǎn)已定義了一個(gè)主頁 因?yàn)橹黜撌且粋€(gè)站點(diǎn)的根節(jié)點(diǎn) 必須有根節(jié)點(diǎn)才有各個(gè)支節(jié)點(diǎn) 也就是各個(gè)子頁 查看站點(diǎn)地圖 查看站點(diǎn)地圖是在Dreamweaver8的 文件 面板的 視圖 下拉列表框中選擇 地圖視圖 選項(xiàng) 在站點(diǎn)地圖中管理頁面文件 選擇頁面文件打開頁面文件新建頁面文件更改頁面標(biāo)題 選擇頁面文件 在站點(diǎn)地圖中的某個(gè)頁面文件上單擊鼠標(biāo)即可選擇該文件 按住 Shift 鍵的同時(shí)單擊需要選取的文件 可選擇多個(gè)連續(xù)的頁面文件 按住 Ctrl 鍵的同時(shí)單擊需要選取的文件 可選擇多個(gè)不連續(xù)的頁面文件 打開頁面文件 在頁面文件上雙擊鼠標(biāo)即可打開該文件 在選擇頁面之后 選擇 文件 打開 菜單命令打開頁面 選擇頁面后單擊鼠標(biāo)右鍵 在彈出的快捷菜單中選擇 打開 命令可打開頁面 新建頁面文件 在建立好站點(diǎn)地圖之后 如果還需要在其中添加新的網(wǎng)頁文件 可以在站點(diǎn)地圖中新建一個(gè)頁面文件 更改頁面標(biāo)題 在站點(diǎn)地圖中可對頁面標(biāo)題進(jìn)行更改 以方便絕對站點(diǎn)的管理 頁面設(shè)置 當(dāng)站點(diǎn)建立好之后 就可以進(jìn)行具體的網(wǎng)頁編輯操作了 但在編輯網(wǎng)頁之前 還需要對頁面進(jìn)行一些簡單的屬性設(shè)置以方便以后的工作 上機(jī)實(shí)戰(zhàn) 本課上機(jī)實(shí)戰(zhàn)將練習(xí)創(chuàng)建一個(gè)名為 國畫欣賞 的站點(diǎn) 將其中的本地站點(diǎn)保存在 D guohua 文件夾下 遠(yuǎn)程站點(diǎn)保存在 E guohua 文件夾下 然后為 國畫欣賞 網(wǎng)站建立一個(gè)存放圖片的文件夾 pic 并新建名為 index html ghzs html jrmh html ghds html flxs html ghlt html 和 lxwm html 的網(wǎng)頁文件 最后設(shè)置 index html 的頁面屬性 課堂講解上機(jī)實(shí)戰(zhàn) 第1課為網(wǎng)頁添加文本 課堂講解 插入文本格式化文本項(xiàng)目列表的應(yīng)用標(biāo)尺和網(wǎng)格 插入文本 插入普通文本插入特殊字符在字符之間添加空格插入其他文本 插入普通文本 將插入點(diǎn)定位在文檔編輯區(qū)中 直接輸入文本即可 在Word等文本編輯軟件中編輯好文本之后 將其復(fù)制到剪貼板上 然后在Dreamweaver8中將插入點(diǎn)定位到文檔編輯區(qū)中 粘貼剪貼板中的文本即可 插入特殊字符 在Dreamweaver8中編輯文本時(shí) 往往會遇到一些無法通過鍵盤直接輸入的特殊字符 如版權(quán)符號 注冊商標(biāo)符號 等 這時(shí)可通過Dreamweaver8插入特殊字符的功能進(jìn)行插入 在字符之間添加空格 Dreamweaver8中的文檔格式都是以HTML編碼形式存在的 而HTML編碼中只允許字符之間包含一個(gè)空格 所以在Dreamweaver8中無論按多少次空格鍵都只會輸入一個(gè)空格 插入其他文本 插入水平線添加水平線修改水平線插入日期 添加水平線 在文檔編輯區(qū)將插入點(diǎn)定位到所需位置 選擇 插入 HTML 水平線 菜單命令或單擊 插入 欄中的 HTML 選項(xiàng)卡在其中單擊按鈕即可添加水平線 修改水平線 初始繪制的水平線的格式往往不能滿足實(shí)際需要 此時(shí)可通過屬性面板對其進(jìn)行修改 插入日期 在制作網(wǎng)頁時(shí) 有時(shí)需要插入當(dāng)前的日期 Dreamweaver8提供了快速插入日期和時(shí)間的功能 格式化文本 設(shè)置字體外觀設(shè)置字體大小設(shè)置顏色設(shè)置字體樣式設(shè)置對齊方式設(shè)置標(biāo)題格式設(shè)置樣式 設(shè)置字體外觀 用戶也可對屬性面板的 字體 下拉列表框中的字體列表重新編輯 設(shè)置字體大小 在屬性面板的 大小 下拉列表框中選擇相應(yīng)的選項(xiàng) 并選擇其后的 單位 下拉列表框中相應(yīng)的單位選項(xiàng) 即可設(shè)置所選文本的字體大小 其中字體的度量單位有像素 px 厘米 cm 等 可根據(jù)具體情況進(jìn)行選擇 但一般都以像素為單位 設(shè)置顏色 單擊屬性面板中的按鈕 在彈出的顏色列表框中選擇相應(yīng)的選項(xiàng)可設(shè)置所選文本的字體顏色 在其后的文本框中直接輸入顏色的英文名 如Red Green等 或以 開頭的十六進(jìn)制顏色代碼 如 ff0000 00ff00 設(shè)置所選文本的顏色 設(shè)置字體樣式 粗體根據(jù)在 首選參數(shù) 對話框的 常規(guī) 選項(xiàng)中設(shè)置的樣式參數(shù)選擇 將或標(biāo)簽應(yīng)用于選定的文本 即對所選文本加粗 單擊按鈕即可設(shè)置 加粗 設(shè)置 再次單擊按鈕可取消 加粗 設(shè)置 斜體根據(jù)在 首選參數(shù) 對話框的 常規(guī) 選項(xiàng)中設(shè)置的樣式參數(shù)選擇 將或標(biāo)簽應(yīng)用于選定的文本 即對所選文本進(jìn)行傾斜設(shè)置 選中按鈕即可將所選的文本應(yīng)用 傾斜 再次單擊按鈕可取消 傾斜 設(shè)置 設(shè)置對齊方式 通過屬性面板中的 左對齊 按鈕 居中對齊 按鈕 右對齊 按鈕和 兩端對齊 按鈕可設(shè)置文本的對齊方式 設(shè)置標(biāo)題格式 在屬性欄的 格式 下拉列表框中可設(shè)置標(biāo)題格式 其中 段落 是應(yīng)用標(biāo)簽的默認(rèn)格式 標(biāo)題1 選項(xiàng)應(yīng)用標(biāo)簽 設(shè)置該選項(xiàng)可以將所選的文本設(shè)置成各種標(biāo)題 標(biāo)題號越小 字體越大 設(shè)置樣式 屬性面板中的 樣式 下拉列表框可用于顯示當(dāng)前應(yīng)用于所選文本的樣式 項(xiàng)目列表的應(yīng)用 有序列表無序列表定義列表為現(xiàn)有文本創(chuàng)建列表創(chuàng)建嵌套列表設(shè)置項(xiàng)目列表屬性 有序列表 有序列表又稱為編號列表 是有一定排列順序的列表 一般前面有數(shù)字前導(dǎo)字符 其中前導(dǎo)字符可以是阿拉伯?dāng)?shù)字 英文字母或羅馬數(shù)字等 無序列表 無序列表又稱為項(xiàng)目列表 是一系列無順序級別關(guān)系的項(xiàng)目文本組成的列表 一般前面是用項(xiàng)目符號作為前導(dǎo)字符 定義列表 定義列表不使用項(xiàng)目符號或數(shù)字這樣的前導(dǎo)字符 通常用在詞匯表或說明書中 為現(xiàn)有文本創(chuàng)建列表 除了先創(chuàng)建列表項(xiàng)再輸入文本外 還可以先輸入文本 然后再設(shè)置列表項(xiàng) 創(chuàng)建嵌套列表 嵌套列表是包含在其他列表中的列表 設(shè)置項(xiàng)目列表屬性 使用 列表屬性 對話框可以設(shè)置列表項(xiàng)的外觀 包括編號樣式 項(xiàng)目符號樣式等 標(biāo)尺和網(wǎng)格 標(biāo)尺網(wǎng)格 標(biāo)尺 標(biāo)尺分為水平標(biāo)尺和垂直標(biāo)尺 分別顯示在Dreamweaver8文檔編輯區(qū)的上方和左側(cè) 標(biāo)尺的單位包括像素 厘米和英寸 在默認(rèn)狀態(tài)下使用像素為單位 網(wǎng)格 網(wǎng)格與標(biāo)尺都是定位工具 但在網(wǎng)頁布局中使用網(wǎng)格更方便 文檔編輯區(qū)中顯示了網(wǎng)格后 就可以對網(wǎng)頁元素進(jìn)行準(zhǔn)確的定位了 上機(jī)實(shí)戰(zhàn) 在本課的上機(jī)實(shí)戰(zhàn)中 將在已有基本框架 相關(guān)知識將在后面幾課詳細(xì)講解 的 風(fēng)行天科技 網(wǎng)站的首頁頁面中添加文本 項(xiàng)目列表 并對它們進(jìn)行設(shè)置 如縮進(jìn) 加粗 傾斜 大小 顏色等 課堂講解上機(jī)實(shí)戰(zhàn) 第4課為網(wǎng)頁添加圖像 課堂講解 網(wǎng)頁圖像的格式及來源插入圖像設(shè)置圖像屬性圖像高級設(shè)置 網(wǎng)頁圖像的格式及來源 GIF格式JPEG格式PNG格式網(wǎng)頁圖像來源 GIF格式 GIF全稱為 GraphicsInterchangeFormat 意為可交換圖像格式 它是第一個(gè)支持網(wǎng)頁的圖像格式 在PC機(jī)和蘋果機(jī)上都能被正確識別 它最多支持256種顏色 可以使圖像變得容量相當(dāng)小 GIF圖像可以在網(wǎng)頁中以透明方式顯示 還可以包含動(dòng)態(tài)信息 即GIF動(dòng)畫 JPEG格式 JPEG全稱為 JointPhotographicExpertsGroup 意為聯(lián)合圖像專家組 它可以高效地壓縮圖片 丟失人眼不易察覺的部分圖像 使文件容量在變小的同時(shí)基本不失真 通常用來顯示顏色豐富的精美圖像 PNG格式 PNG全稱為 PortableNetworkGraphics 意為便攜網(wǎng)絡(luò)圖像 它是逐漸流行的網(wǎng)絡(luò)圖像格式 PNG格式既融合了GIF能透明顯示的特點(diǎn) 又具有JPEG處理精美圖像的優(yōu)勢 且可以包含圖層等信息 常常用于制作網(wǎng)頁效果圖 網(wǎng)頁圖像來源 網(wǎng)頁圖像的素材有很多來源 如可以使用圖形處理軟件 如Photoshop Fireworks和FreeHand等軟件 制作 可以購買網(wǎng)頁素材光盤 可以從網(wǎng)絡(luò)上下載等 插入圖像 直接插入占位符插入圖像的放大顯示 直接插入 選擇 插入 圖像 菜單命令 單擊插入欄的 常用 選項(xiàng)卡中的按鈕 按 Ctrl Alt I 鍵 占位符插入 制作網(wǎng)頁時(shí)還未選定需插入的圖像 但確定了圖像大小的時(shí)候 可以使用占位符來代替圖像的方式插入到文檔中 將圖像確定后雙擊占位符 在打開的對話框中設(shè)置后插入即可 圖像的放大顯示 Dreamweaver8新增的放大鏡功能可以讓用戶更方便地進(jìn)行對齊圖像 選擇較小的對象以及查看較小的文本 動(dòng)畫或網(wǎng)頁元素等操作 設(shè)置圖像屬性 在網(wǎng)頁中插入圖像后可通過屬性面板對其屬性進(jìn)行修改等設(shè)置 圖像命名圖像大小編輯圖片源文件設(shè)置 文本說明圖像與文本的對齊圖像邊距圖像邊框 圖像命名 為了在使用Dreamweaver行為 如交換圖像 或腳本撰寫語言 如JavaScript或VBScript 時(shí)可以引用該圖像 可在屬性面板的 圖像 文本框中為圖像命名 圖像大小 在Dreamweaver8中插入圖像后系統(tǒng)會自動(dòng)將圖像的原始大小顯示在 寬 和 高 文本框 以像素為單位 中 編輯圖片 在網(wǎng)頁中選擇圖像之后 單擊屬性面板中的按鈕 打開圖像處理軟件 對圖像進(jìn)行處理 如果安裝了Fireworks 那么Fireworks將被默認(rèn)為圖像處理軟件 如果沒有安裝 用戶也可自己設(shè)置使用其他軟件中處理圖像 源文件設(shè)置 在屬性面板的 源文件 文本框中顯示了圖像的保存路徑 如果要重新插入一幅新圖像 可以在選取圖像后的屬性面板中的 源文件 文本框中重新輸入要插入圖像的地址 或單擊右側(cè)后的按鈕 在打開的 選擇圖像源文件 對話框中重新選擇需要的圖像 文本說明 在選取圖像后的屬性面板的 替換 下拉列表框中可以輸入圖像的文本說明 圖像與文本的對齊 選取圖像后 在屬性面板的 對齊 下拉列表框中可設(shè)置處于同一行上的圖像與文本的對齊方式 圖像邊距 選取圖像在屬性面板的 垂直邊距 和 水平邊距 文本框中可以設(shè)置圖像與頁面上方和左側(cè)之間的距離 也可以設(shè)置圖像與其他網(wǎng)頁元素之間的距離 圖像邊框 選取圖像后 在屬性面板的 邊框 文本框中可以設(shè)置圖像邊框的寬度 單位為像素 0 表示無邊框 圖像高級設(shè)置 鼠標(biāo)經(jīng)過圖像設(shè)置插入FireworksHTML對象 鼠標(biāo)經(jīng)過圖像設(shè)置 鼠標(biāo)經(jīng)過圖像是一種在瀏覽器中查看網(wǎng)頁時(shí) 鼠標(biāo)光標(biāo)經(jīng)過該圖像時(shí) 圖像發(fā)生變化的動(dòng)態(tài)圖像 插入FireworksHTML對象 Macromedia公司的圖形處理軟件Fireworks優(yōu)化后的圖像和HTML文件 使用Dreamweaver可直接插入保存到所需的Dreamweaver站點(diǎn)文件夾中 上機(jī)實(shí)戰(zhàn) 本課上機(jī)實(shí)戰(zhàn)主要練習(xí)在網(wǎng)頁中插入圖像并對其進(jìn)行屬性設(shè)置 在練習(xí)過程中 將用到課堂講解中所學(xué)的插入圖像的方法 圖像屬性設(shè)置的方法 熱點(diǎn)鏈接的設(shè)置及鼠標(biāo)經(jīng)過圖像的創(chuàng)建方法等知識 課堂講解上機(jī)實(shí)戰(zhàn) 第5課創(chuàng)建超級鏈接 課堂講解 超級鏈接概念超級鏈接分類創(chuàng)建文本超級鏈接創(chuàng)建錨鏈接創(chuàng)建空鏈接創(chuàng)建電子郵件超級鏈接創(chuàng)建圖像超級鏈接創(chuàng)建導(dǎo)航條 超級鏈接概念 超級鏈接是指頁面對象之間的鏈接關(guān)系 它網(wǎng)頁的靈魂 能合理 協(xié)調(diào)地把網(wǎng)站中的各個(gè)元素 頁面通過超級鏈接構(gòu)成了一個(gè)有機(jī)整體 使瀏覽者能快速地訪問到想要訪問的頁面 超級鏈接分類 絕對超級鏈接文檔相對路徑站點(diǎn)根目錄相對路徑 絕對超級鏈接 絕對超級鏈接就是形如 http www china zh cn 的超級鏈接地址 它給出了超級鏈接目標(biāo)端點(diǎn)完整的URL地址 包括使用的協(xié)議 http 一般用于創(chuàng)建站外具有固定地址的超級鏈接 文檔相對路徑 使用文檔相對路徑不需要給出完整的URL地址 可省去URL地址的協(xié)議 只需保留不同的部分 如pic logo gif 這是本地站點(diǎn)超級鏈接中最常用的鏈接形式 由于相對超級鏈接的文件之間相互關(guān)系并沒有發(fā)生變化 因此使用文檔相對路徑創(chuàng)建的超級鏈接在上傳時(shí)可以不用更新各個(gè)超級鏈接 站點(diǎn)根目錄相對路徑 站點(diǎn)根目錄相對路徑是形如 help help html 的超級鏈接地址 它基于站點(diǎn)根目錄 在同一個(gè)站點(diǎn)中網(wǎng)頁的超級鏈接也可采用這種方法 創(chuàng)建文本超級鏈接 文本超級鏈接是最常見的超級鏈接 通過使用鼠標(biāo)點(diǎn)擊文本即可從一個(gè)網(wǎng)頁跳轉(zhuǎn)到另一個(gè)網(wǎng)頁 創(chuàng)建錨鏈接 創(chuàng)建命名錨記鏈接命名錨記 創(chuàng)建命名錨記 在制作網(wǎng)頁時(shí) 為了達(dá)到跳轉(zhuǎn)到網(wǎng)頁固定位置的目的 可以使用錨鏈接 通過對網(wǎng)頁中指定位置的命名 利用超級鏈接打開目標(biāo)網(wǎng)頁時(shí)可直接跳轉(zhuǎn)到相應(yīng)的命名位置上 鏈接命名錨記 創(chuàng)建好錨記之后 必須創(chuàng)建對應(yīng)的超級鏈接源端點(diǎn) 創(chuàng)建空鏈接 要想對文本設(shè)置行為 首先必須為文本建立空超級鏈接 空超級鏈接是一個(gè)未指派目標(biāo)的超級鏈接 這樣行為才會有效 為文本建立空超級鏈接時(shí) 只要先在文檔窗口中選中需要建立空超級鏈接的文本 然后在屬性面板的 鏈接 文本框中輸入一個(gè) 符號即可 建立空超級鏈接的目的只是為了應(yīng)用行為 其他情況下不必建立 創(chuàng)建電子郵件超級鏈接 電子郵件在網(wǎng)絡(luò)應(yīng)用中十分廣泛 在網(wǎng)頁中建立電子郵件超級鏈接可方便網(wǎng)頁瀏覽者與設(shè)計(jì)者之間的聯(lián)系 創(chuàng)建圖像超級鏈接 為一般圖像創(chuàng)建超級鏈接創(chuàng)建圖像熱點(diǎn)超級鏈接 為一般圖像創(chuàng)建超級鏈接 創(chuàng)建圖像熱點(diǎn)超級鏈接 要在一幅比較大的圖片中添加許多超級鏈接時(shí) 應(yīng)該將圖片化整為零 分割成較小的圖片 然后分別為這些小圖像上建立超級鏈接來達(dá)到目的 但這時(shí)整幅圖片就不能對齊 利用Dreamweaver8的圖像熱點(diǎn)超級鏈接功能就能避免這個(gè)問題 創(chuàng)建導(dǎo)航條 插入導(dǎo)航條編輯導(dǎo)航條 插入導(dǎo)航條 導(dǎo)航條一般由圖像或圖像組組成 這些圖像的顯示內(nèi)容隨用戶的操作不同而進(jìn)行相應(yīng)的變化 導(dǎo)航條為訪問者瀏覽不同網(wǎng)頁提供了一條捷徑 編輯導(dǎo)航條 上機(jī)實(shí)戰(zhàn) 本課上機(jī)實(shí)戰(zhàn)制作過程可分為左側(cè)導(dǎo)航圖像超級鏈接的創(chuàng)建 主要內(nèi)容區(qū)文本和圖像超級鏈接的創(chuàng)建 公司Logo下方的圖像熱點(diǎn)超級鏈接的創(chuàng)建及底部版權(quán)信息區(qū)電子郵件超級鏈接的創(chuàng)建4部分進(jìn)行 課堂講解上機(jī)實(shí)戰(zhàn) 第7課在網(wǎng)頁中應(yīng)用框架 課堂講解 認(rèn)識框架和框架集框架和框架集的創(chuàng)建框架和框架集的選擇和刪除框架和框架集的保存框架和框架集的屬性設(shè)置處理不能顯示框架的瀏覽器框架的鏈接 認(rèn)識框架和框架集 框架是將一個(gè)頁面劃分成不同的文檔區(qū) 每個(gè)文檔區(qū)顯示獨(dú)立的內(nèi)容 其效果是在瀏覽網(wǎng)頁時(shí) 網(wǎng)頁中一部分區(qū)域 如公司Logo 導(dǎo)航條 內(nèi)容不改變 而其他區(qū)域內(nèi)容在不斷發(fā)生改變 框架集是HTML文件 它定義一組框架的布局和屬性 包括框架的數(shù)目 大小 位置以及在框架中初始顯示頁面的地址 框架集文件本身不包含要在瀏覽器中顯示的網(wǎng)頁內(nèi)容 對不能顯示框架的瀏覽器進(jìn)行的處理除外 即部分 框架集文件只是向?yàn)g覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些網(wǎng)頁的有關(guān)信息 框架和框架集的創(chuàng)建 在 插入 欄插入預(yù)定義的框架集創(chuàng)建預(yù)定義框架集手動(dòng)設(shè)計(jì)框架 在 插入 欄插入預(yù)定義的框架集 在Dreamweaver8中預(yù)定義了一些框架集樣式 需要使用時(shí)直接插入即可 創(chuàng)建預(yù)定義框架集 手動(dòng)設(shè)計(jì)框架 框架和框架集的選擇和刪除 認(rèn)識 框架 面板選擇框架與框架集刪除框架 認(rèn)識 框架 面板 框架 面板中顯示所創(chuàng)建的框架結(jié)構(gòu) 并在不同的框架區(qū)域中顯示框架的名稱 當(dāng)在框架網(wǎng)頁中新建 刪除框架 或修改框架的尺寸 名稱等時(shí) 框架 面板中的示意圖會跟隨變化 選擇框架與框架集 在編輯窗口中選擇在 框架 面板中選擇 在編輯窗口中選擇 在編輯窗口中選擇框架的方法很簡單 按住 Alt 鍵 在要選擇的框架內(nèi)單擊鼠標(biāo)左鍵即可 被選取的框架邊框呈虛線顯示 選擇框架集時(shí) 單擊框架邊框即可 選取的所有框架邊框呈虛線 在 框架 面板中選擇 在 框架 面板中單擊框架區(qū)域中的任意位置即可選擇框架 選中的框架以粗黑框顯示 在 框架 面板中單擊框架邊框即可選擇框架集 如果要選擇整個(gè)框架集 只需單擊框架最外面的邊框即可 刪除框架 如果窗口中有不需要的框架 可將其刪除 用鼠標(biāo)將要?jiǎng)h除框架的邊框拖到父框架邊框上或拖離頁面即可 框架和框架集的保存 保存框架與框架集之后才能在瀏覽器中瀏覽用框架布局的網(wǎng)頁 每個(gè)框架包含一個(gè)網(wǎng)頁 一個(gè)框架集則包含多個(gè)網(wǎng)頁 在保存時(shí)應(yīng)保存所有的框架與框架集 保存框架保存框架集保存框架集中的所有網(wǎng)頁 保存框架 將插入點(diǎn)定位到要保存的框架中 選擇 文件 保存框架 菜單命令 在打開的 另存為 對話框中像保存其他網(wǎng)頁一樣指定保存路徑和文件名 然后單擊 保存 按鈕即可 保存框架集 選中要保存的框架集 選擇 文件 保存框架頁 菜單命令 打開 另存為 對話框 在 保存在 下拉列表框中選擇框架集的保存路徑 在 文件名 文本框中為框架集命名 單擊 保存 按鈕即可保存框架集 保存框架集中的所有網(wǎng)頁 框架和框架集的屬性設(shè)置 框架集的屬性設(shè)置框架集文檔標(biāo)題的設(shè)置框架的屬性設(shè)置 框架集的屬性設(shè)置 使用框架集屬性面板可以查看和設(shè)置大多數(shù)框架集屬性 框架集文檔標(biāo)題的設(shè)置 當(dāng)訪問者在瀏覽器中查看該框架集時(shí) 標(biāo)題將顯示在瀏覽器的標(biāo)題欄中 框架的屬性設(shè)置 處理不能顯示框架的瀏覽器 由于在低版本的瀏覽器中不能正確顯示使用了框架的網(wǎng)頁和框架中的內(nèi)容 因此在Dreamweaver8中允許指定在不支持框架的基于文本的瀏覽器和較舊的圖形瀏覽器中顯示內(nèi)容 此類內(nèi)容存儲在框架集文件中 用標(biāo)簽括起來 當(dāng)不支持框架的瀏覽器加載該框架集文件時(shí) 瀏覽器只顯示用標(biāo)簽括起來的內(nèi)容 框架的鏈接 在使用了框架技術(shù)文檔中的鏈接與一般文檔中的鏈接不同 增加了與框架有關(guān)的鏈接目標(biāo) 可以在一個(gè)框架內(nèi)使用鏈接改變另一個(gè)框架的內(nèi)容 上機(jī)實(shí)戰(zhàn) 本課上機(jī)實(shí)戰(zhàn)主要練習(xí)個(gè)人網(wǎng)頁的頁面制作 在練習(xí)過程中 主要用到框架的創(chuàng)建 框架和框架集的屬性設(shè)置 框架和框架集的保存 不能顯示框架的處理等知識 本頁面分為上中下3個(gè)框架來制作 在制作之前應(yīng)先制作好各框架中要顯示的網(wǎng)頁 課堂講解上機(jī)實(shí)戰(zhàn) 第8課在網(wǎng)頁中應(yīng)用層 課堂講解 創(chuàng)建層認(rèn)識 層 面板選擇 移動(dòng)和對齊層層大小和屬性設(shè)置層的顯示和隱藏層名的變更層的堆疊和刪除層與表格的相互轉(zhuǎn)換 創(chuàng)建層 層的首選參數(shù)設(shè)置層的建立層的嵌套 層的首選參數(shù)設(shè)置 在新建層之前 通過 首選參數(shù) 對話框中的 層 選項(xiàng)來設(shè)置層的默認(rèn)屬性 層的建立 將插入點(diǎn)放置在 文檔 編輯窗口中 然后選擇 插入 布局對象 層 菜單命令將自動(dòng)在插入點(diǎn)插入一個(gè)層 在 插入欄 的 布局 插入欄中單擊 繪制層 按鈕 拖動(dòng)鼠標(biāo)繪制一個(gè)層 在 插入欄 的 布局 插入欄中單擊 繪制層 按鈕 在文檔編輯窗口中單擊鼠標(biāo)可繪制一個(gè)層 在 插入欄 的 布局 插入欄中單擊 繪制層 按鈕 按住 Ctrl 鍵并拖動(dòng)即可連續(xù)繪制多個(gè)層 層的嵌套 層與表格相似 可進(jìn)行嵌套 在某層內(nèi)新創(chuàng)建的層稱為嵌套層或子層 嵌套層外部的層稱為父層 子層可浮動(dòng)于文本編輯窗口的任何位置 子層的大小也可以大于父層 可根據(jù)實(shí)際需要嵌套多個(gè)層 認(rèn)識 層 面板 層 面板是對層進(jìn)行管理的場所 可以方便地查看層的結(jié)構(gòu) 要顯示或隱藏 層 面板 可選擇 窗口 層 菜單命令或按 F2 鍵 選擇 移動(dòng)和對齊層 選擇層選擇單個(gè)層選擇多個(gè)層移動(dòng)層對齊層 選擇單個(gè)層 在文檔編輯區(qū)中單擊層邊框 在層中單擊鼠標(biāo)左鍵 再單擊該層的選擇柄 在 層 面板中單擊要選擇的層的名稱 按住 Ctrl Shift 鍵并在層中單擊即可選擇層 選擇多個(gè)層 按住 Shift 鍵 在需要選擇的多個(gè)層中單擊 同時(shí) 層 面板中選擇的層以反白顯示 按住 Shift 鍵 在 層 面板中單擊要選擇的多個(gè)層的名稱 移動(dòng)層 在網(wǎng)頁制作中往往需要精確定位層的位置 這就需要對創(chuàng)建的層進(jìn)行移動(dòng) 對齊層 在網(wǎng)頁制作中常常需要將某些層按照一定的規(guī)定對齊 在進(jìn)行層的對齊操作時(shí) 嵌套層中所有子層并不參與層的對齊操作 它們只隨父層的移動(dòng)而移動(dòng) 并始終與父層保持相對的固定位置 層大小和屬性設(shè)置 層大小的設(shè)置設(shè)置單個(gè)層的大小設(shè)置多個(gè)層的大小層屬性的設(shè)置設(shè)置單個(gè)層的屬性設(shè)置多個(gè)層的屬性 設(shè)置單個(gè)層的大小 在文檔編輯區(qū)選擇一個(gè)層 在出現(xiàn)的調(diào)整柄上按住鼠標(biāo)左鍵不放并拖動(dòng) 當(dāng)調(diào)整到適當(dāng)?shù)拇笮r(shí)釋放鼠標(biāo)即可 在文檔編輯區(qū)選擇一個(gè)層 按住 Ctrl 鍵的同時(shí)再按鍵盤上的方向鍵即可按一次1個(gè)像素的步幅來調(diào)整層大小 在文檔編輯區(qū)選擇一個(gè)層 按住 Shift Ctrl 鍵的同時(shí)再按鍵盤上的方向鍵即可按一次10個(gè)像素的步幅來調(diào)整層大小 在文檔編輯區(qū)選擇一個(gè)層 以像素為單位在屬性面板中輸入寬度和高度的值 設(shè)置多個(gè)層的大小 在文檔編輯區(qū)選擇兩個(gè)或多個(gè)層 選擇 修改