《WEB網(wǎng)頁制作教程》PPT課件.ppt

《《WEB網(wǎng)頁制作教程》PPT課件.ppt》由會員分享，可在線閱讀，更多相關(guān)《《WEB網(wǎng)頁制作教程》PPT課件.ppt（102頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、前 言,課程說明,課程目的： 使參加學(xué)習(xí)的人員掌握基本的網(wǎng)頁制作維護技能，自主運用相關(guān)軟件進行網(wǎng)頁維護。 學(xué)習(xí)建議： 學(xué)習(xí)前提：熟練進行基本的文件操作，熟練使用Office和簡單常用的工具軟件 參閱：網(wǎng)上有相關(guān)教程、任何一本Dreamweaver學(xué)習(xí)書籍,學(xué)習(xí)內(nèi)容,網(wǎng)頁制作初步：運用DreamweaverMX，學(xué)習(xí)文字錄入編輯，段落編排，表格運用，圖片插入編輯，超級鏈接，多媒體素材插入編輯，框架構(gòu)成；簡單了解Html 圖形處理初步：學(xué)會運用Photoshop對圖片做簡單的處理 學(xué)習(xí)使用相關(guān)工具軟件：CuteFtp, Acdsee, et al 了解動態(tài)網(wǎng)頁維護的基本知識 了解中、高級網(wǎng)頁技術(shù)：

2、Flash, Css, JavaScript 特效等,網(wǎng)頁設(shè)計技術(shù)的意義,網(wǎng)絡(luò)時代的技術(shù)需要網(wǎng)站是廣告的拓展領(lǐng)域，是知識信息的儲蓄平臺，任何單位都將網(wǎng)絡(luò)平臺做為業(yè)務(wù)信息的重要窗口加以利用 與他人交流的窗口個人主頁對比公網(wǎng)上的個人blog: 能進行更充分的個人定制，個性化 實用的網(wǎng)絡(luò)技術(shù)和個人技能 為將來可能的另條個人出路進行技術(shù)積累。 一些人對網(wǎng)頁設(shè)計的錯誤認(rèn)識MS office master VS. homepage master Homepage worker VS. web designer,對Web Designer的簡單要求,熟練運用相關(guān)軟件，掌握編寫主頁的主流軟件用法。 了解HTM

3、L語言，學(xué)習(xí)使用CSS，JavaScript乃至XML動態(tài)主頁語言; 了解CGI技術(shù)和網(wǎng)絡(luò)數(shù)據(jù)庫技術(shù)，學(xué)習(xí)使用PHP，ASP等主流動態(tài)網(wǎng)頁制作工具和語言; 掌握圖文編排技術(shù)，熟練運用一種以上的圖象處理軟件； 具有相當(dāng)?shù)奈淖止Φ缀臀母寰庉嬆芰Γ?具有超凡的想象力和創(chuàng)造力； 最后要付出大量的努力。 涉及軟件：DreamWeaver MX, Photoshop, Macromedia Flash MX, CuteFtp,相關(guān)網(wǎng)絡(luò)知識,域名大醫(yī)域名：學(xué)校內(nèi)主頁服務(wù)器有:www,home,inner 主頁瀏覽與主頁服務(wù)器之間的關(guān)系經(jīng)過服務(wù)器發(fā)布的網(wǎng)站才能是真正意義上的供人瀏覽的網(wǎng)站。 主頁發(fā)布原理服務(wù)器

4、安裝了默認(rèn)的主頁發(fā)布程序，網(wǎng)站用戶事先將制作完成的網(wǎng)站上傳到服務(wù)器指定目錄下。服務(wù)器正常工作時，當(dāng)接收到某客戶端主頁瀏覽請求時，按目錄關(guān)系和相關(guān)設(shè)定，將某目錄下的相關(guān)文件數(shù)據(jù)返回給客戶端瀏覽器，被瀏覽器解讀后加以顯示，即完成了主頁瀏覽。,普通靜態(tài)網(wǎng)頁的特點和工作原理,主機IP地址： IP地址是Internet上主機的數(shù)字式標(biāo)識符。給某個用戶分配一個固定的IP地址,他每次連入Internet都從這個地址進入，這種靜態(tài)IP地址的優(yōu)點是能使別的用戶訪問他,所以可以在自己的計算機上建立服務(wù)器。 VS 210.47.244.10 協(xié)議：通信的雙方在通信時所使用的約定叫做通信協(xié)議。Internet中最重要

5、的兩個通信協(xié)議是網(wǎng)際協(xié)議IP和傳輸控制協(xié)議TCP。,相關(guān)網(wǎng)絡(luò)術(shù)語,初級部分 一網(wǎng)站建設(shè),網(wǎng)站編輯的大概步驟,網(wǎng)站構(gòu)劃 收集素材 勾畫草案 網(wǎng)頁制作 調(diào)試修改 發(fā)布 維護更新,問題：您將如何安排時間和計劃？,重要原則：盡量體現(xiàn)內(nèi)容形式的完美整合,明確建站目的，確定原則，確定規(guī)模，確定形式和風(fēng)格。原則：內(nèi)容和形式統(tǒng)一。高校主頁提倡風(fēng)格：宜靜雅，忌花哨。內(nèi)容第一，功能第二，形式第三。 分析網(wǎng)站的瀏覽者群體重要原則：從技術(shù)上兼顧最多可能的受眾。 確定站點結(jié)構(gòu) 建立目錄 確定文件 安排素材 風(fēng)格一致性,網(wǎng)站構(gòu)劃步驟,二 Dreamweaver初探,DW MX安裝和界面介紹,軟件校內(nèi)下載現(xiàn)代教育技術(shù)部主頁

6、網(wǎng)絡(luò)資源軟件下載網(wǎng)絡(luò)工具網(wǎng)頁編輯 軟件安裝 操作界面窗口組成： Welcome窗口（首次彈出） 插入欄 文件窗口 屬性檢查器 面板組,站點建立,新建站點 通過資源管理器先在硬盤建立站點根目錄 利用文件面板的管理站點窗口建立一個站點可采用基本模式，利用向?qū)瓿稍O(shè)定；也可以用高級模式。具體：需要設(shè)定站點名稱、本地根文件夾。其他項可暫時采用默認(rèn)設(shè)定。 Ftp設(shè)定（也可以使用專門的ftp工具進行將來的ftp文件上傳管理，推薦軟件如cuteftp等） 編輯站點 刪除編輯站點列表,簡單設(shè)定,“編輯”菜單的“首選參數(shù)”選項的設(shè)定： “常規(guī)” 編輯選項：使用CSS而不是Html代碼不選中（因為會整體運用CSS

7、設(shè)定） 其他會偶爾改動默認(rèn)設(shè)定的選項：“字體” 編輯選項、在瀏覽器中預(yù)覽、不可見元素、驗證程序等 隱藏表格寬度顯示方便操作,三 操作與應(yīng)用基礎(chǔ)操作篇,新建文件,新建文件 第一種方法：通過 文件 新建命令，然后再保存，這種方法可新建出各種類型文件常用：基本頁(html),框架,模版,CSS文件,動態(tài)頁(ASP,PHP,JSP) 第二種方法：通過文件面板新建.htm文件 更常用的靜態(tài)網(wǎng)頁的編輯方式，即靜態(tài)主頁更新維護增加新頁面的方式：對已有文件進行復(fù)制、粘貼，然后對新文件更名，再修改其內(nèi)容。特點：保留原有文件的圖片，整體框架格局等，只改變文字和鏈接,文件的命名原則和層次管理,主頁文件（夾）名稱約定

8、 不能用中文和不合文件名規(guī)范的名稱； 首頁必須為index.htm或者default.htm等默認(rèn)首頁文件名 文件層次管理 文件命名經(jīng)驗：對不同內(nèi)容的文件名稱的起名方法: 多利用下劃線，原則是便于記憶維護。 book_admin.htm, update_030612.htm 文件層次管理：不同欄目設(shè)立不同文件夾；利用文件名區(qū)分；圖片和文件一般要分開，單獨設(shè)立圖片目錄images,打開文件及特殊文本處理,通過文件 打開命令在文件面板站點文件夾中里找到相應(yīng)文件，雙擊打開 復(fù)制word文件的內(nèi)容到網(wǎng)頁：要注意祛除word本身所帶的各種控制符項，一般情況下，可直接復(fù)制、粘帖。特殊情況下，可通過二次粘貼

9、先經(jīng)過記事本，再粘貼至網(wǎng)頁文件或者通過DW的選擇性粘帖功能進行,頁面屬性的設(shè)定,網(wǎng)頁標(biāo)題除了frame頁面，不要使任何一個頁面標(biāo)題為: untitled documents 背景圖片（介紹圖片的平鋪方式） 鏈接顏色 網(wǎng)頁文字顏色設(shè)定 頁邊空白距離設(shè)定 其他 e.g. 編碼方式等,四 操作與應(yīng)用文字處理,文檔編輯,基本字塊操作：文字的復(fù)制、粘貼、剪切，查找、替換、刪除； 字的屬性設(shè)定： 字號 顏色 字形 對齊方式 字體 高級問題：能否隨意設(shè)定主頁文字的字體，象在word里那樣？能否隨意設(shè)定文字的顏色？,Attention!,字體設(shè)定重要原則：再次體現(xiàn)兼顧受眾的原則。安全中文字體：宋體、仿宋體、黑

10、體、楷體特殊字體的處理方法：圖片一些特殊符號輸入的處理方法：小圖片繁體字、生僻字應(yīng)用全拼等輸入法，采用GBK字庫，如喆(！上標(biāo)下標(biāo)有專門的html標(biāo)記: sub, sup) 顏色知識：介紹網(wǎng)頁安全色216色（兼顧pc和Macintosh）特殊顏色需要承擔(dān)風(fēng)險！,其他,特殊字符插入 特殊格式：項目編號 水平線 文字對齊方式及段落格式的設(shè)定 回車和空格問題 段內(nèi)換行，段落換行 全角空格,五 操作與應(yīng)用插入圖片和Flash,預(yù)備知識：圖片種類和特點,圖像分類 像素點陣類圖像，如BMP，TIFF等特點：圖像包含色彩越多，尺寸越大，則文件大小也越大；圖像增大，則圖像精度降低 矢量圖像，如WMF等特點：文

11、件大小與圖形復(fù)雜程度有關(guān)，與具體圖形大小無關(guān)，圖像外觀增大也不影響精度； 壓縮格式: JPEG, GIF, PNG jpeg保留圖像色彩，損失圖像精度；gif保留圖像精度，損失顏色 人物、風(fēng)景等高色彩圖片宜保存為jpeg，卡通等圖片宜保存為gif 特殊介紹：gif 87a, 89a- 透明圖、交錯圖、動畫 PNG功能全面，但尺寸很大 Swf文件特點：動畫更靈活，有交互功能，支持網(wǎng)絡(luò)流式傳輸，優(yōu)勢明顯,預(yù)備知識：圖片種類和特點,介紹色彩學(xué)簡單知識 顏色深度：位；加強色16位； 網(wǎng)絡(luò)安全色：216色（兼顧PC和Mac機，體現(xiàn)兼顧受眾的原則） 使用圖象重要原則：減少尺寸，限制顏色，保持低分辨率，使用

12、重復(fù)圖象在保持圖像滿意精度內(nèi)，盡可能保持圖象小,插入圖片實際應(yīng)用問題,屬性設(shè)定問題 單純改變圖片外觀大小，不影響圖片文件實際大小尺寸 設(shè)定外框?qū)挾?對齊方式 替代圖替代文字（考慮受眾的人性化屬性） 縮略圖（可用相關(guān)工具軟件自己制作，如PS, ACDsee; 縮略圖大小可以自定一個統(tǒng)一的規(guī)格，如125*94） 圖文間距； 圖片注意保存到網(wǎng)頁目錄下,插入圖片實際應(yīng)用問題,插入圖像占位符為將來插入圖像做準(zhǔn)備 影像地圖鏈接詳見鏈接章節(jié),六 操作與應(yīng)用超鏈接的運用,鏈接類型,普通鏈接 外部鏈接：不同網(wǎng)站內(nèi)指向鏈接 內(nèi)部鏈接：同一網(wǎng)站內(nèi)不同網(wǎng)頁間鏈接 錨點鏈接：鏈接到同一網(wǎng)頁內(nèi)某位置 電子郵件超鏈接 創(chuàng)建

13、影像地圖 翻屏原則縱向翻屏不應(yīng)該超過3-5頁；盡量避免水平向滾動翻屏當(dāng)網(wǎng)頁文本容量超過2個滾屏?xí)r，應(yīng)該考慮運用超鏈接或者進行重新的網(wǎng)頁拆分和規(guī)劃,鏈接路徑,URL（Uniform Ralative Location)統(tǒng)一資源定位符每個網(wǎng)頁都有的唯一的地址 絕對路徑：完整的URLe.g. 相對路徑：省略兩個文檔相同的URL部分注意同文件夾、子（父）文件夾文件鏈接時的寫法e.g. ./index.htm; image/logo.jpg根相對路徑：e.g. /image/newpic.htm 同一網(wǎng)站內(nèi)部鏈接注意使用相對路徑和根相對路徑，不要使用絕對路徑,鏈接操作,進行鏈接的對象文字，圖像 普通鏈接

14、，注意設(shè)定打開目標(biāo)頁Target_blank, _top, _parent, _self(默認(rèn)） 錨點鏈接方法一：鼠標(biāo)操作， shift+錨點；方法二：#+鏈接錨點名稱 影像地圖鼠標(biāo)拖動創(chuàng)建熱區(qū)，可建立多個熱區(qū)選擇熱區(qū)創(chuàng)建鏈接注意熱區(qū)的替代文字設(shè)定alt注意每個地圖起唯一一個名稱,鏈接原則,重要原則 好的網(wǎng)站要有完善、發(fā)達的導(dǎo)航系統(tǒng)，且要明確； 所有鏈接必須測試可用，準(zhǔn)確； “能進能出，能上能下” 管理超級鏈接：更新主要工作之一檢查可能出錯的地方如：不存在的文件，特別是外部站點不存在的文件鏈接,導(dǎo)航欄：特殊的鏈接體,導(dǎo)航對網(wǎng)站意義：明示網(wǎng)站結(jié)構(gòu)、方便訪客瀏覽 導(dǎo)航欄相對于普通鏈接的特別之處：同

15、一位置，外觀效果一致 導(dǎo)航欄的制作：表格+文字+圖形,七 頁面布局表格的運用,表格作用,最強大的主頁布局工具，既完美解決所有靜態(tài)主頁圖文布局，同時也符合低端設(shè)計的原則（對比layer） 表格中可導(dǎo)入的元素多種多樣：任何一種主頁元素，也包含表格本身，即可以實現(xiàn)表格的嵌套 表格的主要功能：表格化數(shù)據(jù)、設(shè)計頁面分欄、定位文本和圖像等 重新理解表格：不僅僅是表格化數(shù)據(jù)的載體，表現(xiàn)方式多樣化 對比word里面的表格不具有統(tǒng)計計算功能；支持嵌套；插入元素更多樣,認(rèn)識表格,行，列，單元格HTML標(biāo)識符 table, tr, td （沒有列的概念） 行（ Row ）列（Columns）單元格填充（Cell p

16、adding）單元格內(nèi)容與邊線的距離單元格間距（Cell spacing）單元格之間的距離表格寬度（width) 可用像素數(shù)和百分比兩種方法表示表格邊框（border）表格線的像素寬度，為三維顯示效果,表格屬性設(shè)定,Table ID：表格ID的命名 Align：表格與其他元素的對齊方式 Clear column width/row heights刪除表格的行高列寬值 Convert talbe width/heights to pixels將表格由百分變?yōu)楫?dāng)前寬度/高度 Convert table widths/heights to percent將表格由像素變?yōu)榘俜直硎?Bg color：表

17、格背景色 Brdr color：表格邊框顏色 Bg Image：設(shè)置表格背景圖案,單元格屬性設(shè)定,水平：單元格內(nèi)元素水平對齊方式 垂直： 單元格內(nèi)元素垂直對齊方式 不換行：改變默認(rèn)的單元格內(nèi)字繞排 標(biāo)題：設(shè)為表頭，樣式：粗體，居中對齊 合并、拆分單元格 單元格的高度、寬度 單元格的背景圖片和顏色設(shè)定，邊框線設(shè)定,調(diào)整表格,調(diào)整大小 調(diào)整表格行寬、列高推薦使用屬性設(shè)定，精確設(shè)定 清除表格行列值修改不滿意的設(shè)定；創(chuàng)建大小自適應(yīng)表格 復(fù)制表格單元 選中表格或者行、列、單元格 表格復(fù)制需注意：不能對不成矩形的表格元素內(nèi)容進行復(fù)制粘貼，必須保證目標(biāo)單元格和源單元格的格式完全一致,布局表格介紹,和普通表格

18、視圖模式比較：表格標(biāo)簽提示更方便明顯；可對布局表格和單元格實現(xiàn)方便移動，并且自動生成輔助表格以完成布局，方便了表格布局操作 是MX方便表格排版所設(shè)定的新的主頁編輯功能 應(yīng)用時機：最初表格布局設(shè)定時選用 中高級編輯者：可以不用因為仍然有少量多余代碼；或者可以在應(yīng)用后，簡單調(diào)整為精簡,表格設(shè)定難點分析,表格寬度巧設(shè)定兩種模式：固定像素值；百分比寬度。在具體操作時，往往是兩種設(shè)定混用。如：布局用的最外端的多列表格往往需要總寬度、n-1列寬度設(shè)定為具體像素值。而其內(nèi)部嵌套用布局表格則往往運用百分比寬度，方便進行自適應(yīng)。 表格嵌套是進行復(fù)雜排版所必須的 表格布局至關(guān)重要，需要經(jīng)過精心設(shè)計甚至周密計算。,

19、表格排版實例分析,普通800*600模式下的頁面寬度的設(shè)定：考慮到導(dǎo)航條的寬度，窗口默認(rèn)原始的非最大化的尺寸，最終設(shè)定為777。 一個理想的主頁應(yīng)該是兼容640*480以上所有顯示模式 理想的排版應(yīng)該是通過表格圖片實現(xiàn)舉例：第2版大醫(yī)主頁首頁 Space圖片實際上是通過高度為1，寬度為適應(yīng)單元格寬度的一個透明gif，來實現(xiàn)了主頁排版功能，同時保證了最小的額外圖片大小,八 了解：頁面布局框架,框架簡介,特點：把瀏覽器窗口分成若干部分，每部分都是真正獨立的頁面 構(gòu)成：由框架集和單個框架頁組成；框架集定義了一頁網(wǎng)頁顯示的框架數(shù)、大小、載入框架的網(wǎng)頁源文件等,框架優(yōu)缺點,優(yōu)點： 導(dǎo)航頁面不需要重新刷新

20、，加快瀏覽速度； 框架下拉條方便了瀏覽者的操作 實現(xiàn)最少的代碼重建，實現(xiàn)整個網(wǎng)站減肥 不足： 設(shè)計麻煩、網(wǎng)站結(jié)構(gòu)變動時無法重新調(diào)整頁面布局，不夠靈活； 破壞網(wǎng)頁整體性和結(jié)構(gòu)性，不方便內(nèi)容的整體保存 使用時機：適合網(wǎng)站結(jié)構(gòu)變化不大，內(nèi)容繁多且結(jié)構(gòu)一致的網(wǎng)站,建立框架,首先設(shè)定框架邊框可見:選中”查看-可視化助理-框架邊框” 創(chuàng)建框架方式: 修改菜單-框架頁: 可拆分框架 鼠標(biāo)操作: 垂直或者水平分割文檔/框架 插入預(yù)定義框架集 使用插入欄中的預(yù)定義框架集結(jié)構(gòu) 新建文件,選擇框架頁 創(chuàng)建嵌套框架集操作同上,選定框架,在框架面板中選定 打開框架面板Shift+F2；在面板中選定框架（集） 在操作窗口

21、中選定 在文檔操作窗口選擇一個框架，Alt+單擊 在文檔操作窗口選擇一個框架集，單擊邊框,設(shè)定框架屬性,框架名：超鏈接和腳本引用框架生成時有自動默認(rèn)的名稱框架頁的超鏈接一定要有打開框架的設(shè)定 源文件：指定當(dāng)前框架中打開的文件 滾動設(shè)定：yes|no|auto 自定義改變框架大小 邊框顯示設(shè)定 邊框顏色 邊界高度/寬度,設(shè)定框架集屬性,框架邊框顯示設(shè)定：yes|no|auto 框架邊框?qū)挾?邊框顏色 框架大小設(shè)定：數(shù)值（像素單位）；百分比；相對注意運用時機：數(shù)值+相對；百分比+百分比考慮受眾屏幕分辨率的問題,保存框架,逐個保存單獨框架頁面 保存框架集 注意編輯無框架頁面內(nèi)容 注意框架集要設(shè)定網(wǎng)頁

22、名稱,中級部分九 HTML語言簡介,什么是HTML,標(biāo)準(zhǔn)通常標(biāo)注語言 (Standard Generalized Markup Language, SGML), 是一種用來定久標(biāo)注記號的語言. HTML就是SGML的 一種 “應(yīng) 用”. HTML全稱為Hyper-Text Markup Language, 本身是一種標(biāo)識語言。在HTTP協(xié)議支持下，用這種標(biāo)識語言編輯的超文本文件可以被各種瀏覽器識別并加以解讀執(zhí)行，從而實現(xiàn)網(wǎng)頁文件的瀏覽下載，亦即WWW網(wǎng)頁服務(wù)。,HTML文件基本結(jié)構(gòu),html文件由元素(element)組成，組成html文件的元素有許多種，用于組織文件的內(nèi)容和指導(dǎo)文件的輸出格式

23、。絕大多數(shù)元素是“容器”，即它有起始標(biāo)記和結(jié)尾標(biāo)記。 例子: This is my first html file. 說明： 元素開始標(biāo)識符； 元素結(jié)尾標(biāo)識符；兩者之間的部分如第二行是該元素的元素體；一個元素的元素體中可以有另外的元素。個別元素標(biāo)識符可以沒有結(jié)尾標(biāo)示符。body 元素名稱；background 屬性名；屬性名,屬性值合起來構(gòu)成一個完整的屬性，一個元素可以有多個屬性，各個屬性用空格分開；,HTML頁面完整結(jié)構(gòu),html文件僅由一個html元素組成， 即文件以開始，以結(jié)尾，文件其部分都是 html的元素體。html元素的元素體由兩大部分，即頭元素.和體元素和一些注釋組成。頭元素和體

24、元素的元素體又由其它的元素和文本及注釋組成。 html文件開始 文件頭開始文件頭 文件頭結(jié)束 文件體開始文件體 文件體結(jié)束 html文件結(jié)束,元素出現(xiàn)的位置：部分只能出現(xiàn)在頭元素中，絕大多數(shù)元素只能出現(xiàn)在體元素中。 在頭元素中的元素表示的是該html文件的一般信息 出現(xiàn)在體元素中的元素按次序?qū)tml文件的標(biāo)識文本進行輸出 html的元素有下列三種表示方法：1) 文本或超文本2) 文本或超文本3) ,應(yīng)該了解的Html元素,文件頭部分標(biāo)題 /網(wǎng)頁標(biāo)題 /環(huán)境設(shè)定 /關(guān)鍵字 文件體部分 段落； 段內(nèi)回車 項目編號 超級鏈接 表格 具體實例, first second a sample for t

25、able the end ,了解Html對主頁制作的意義,Dreamweaver相對于FrontPae 本身就是更貼近Html編輯的一個主頁制作工具。每一個對象的屬性設(shè)定實際上都是工具化了的Html代碼編輯。了解了具體的Html代碼中元素的各種屬性和功能，就能更好的對主頁對象進行合理合適的編輯。 應(yīng)用更方便，比如利用Html標(biāo)簽可以方便而準(zhǔn)確的對一些主頁元素進行選擇。 適合中高級主頁編輯者對主頁源代碼進行最經(jīng)濟和最準(zhǔn)確的精簡，最大程度避免代碼冗余。 中高級網(wǎng)頁設(shè)計所必須。如CSS, JavaScript等的插入編輯，ASP, PHP等動態(tài)網(wǎng)頁的編輯。 主頁維護必須。一些未知因素導(dǎo)致的頁面設(shè)計上

26、的失誤往往需要通過Html編碼直接查錯修正才可能解決問題。,十 CSS層疊樣式表,Cascading Style Sheet,CSS是控制網(wǎng)頁顯示效果的一個格式規(guī)則的集合，它允許設(shè)計者在HTML文檔中加入樣式（字體類型、顏色、大小等） CSS應(yīng)用例子： 去掉鏈接文字的下劃線 改變?yōu)g覽器字體大小情況下文字的變化 需要掌握的CSS： 字體大小、顏色、外形、段落行距的設(shè)定 偽類的設(shè)定 表格邊框的設(shè)定 圖片等元素的定位設(shè)定,將樣式與HTML結(jié)合,在文檔中定義,例子:This is a green, italic, Arial H3 header. 在行內(nèi)定義CSSThis is a green, it

27、alic, Arial H3 header. 外掛CSS定義,Font-family:Arial 等效font-style:italic 等效color:green 等效,樣式控制優(yōu)先次序,編輯窗口里對具體對象的最后屬性設(shè)定； CSS類 沒做任何設(shè)定時候下瀏覽器的默認(rèn)值,CSS定義結(jié)構(gòu)解析,定義樣式：H3 font-family:Arial選擇符，屬性，屬性值；多重屬性用分號分隔； 用Class和ID作為選擇符.pink color:#ff00cc#bright font-weight:bolder;color:#00ff00pink dream come truethis is the br

28、ight word 簡化編碼辦法 選擇符編組table,tr,td,p font-size:9pt 簡化編碼em font:9pt/12pt bolder等價于font-size:9pt;line-height:14pt;font-weight:bolder,在DW MX下如何運用CSS,在DW MX下 CSS使用三種方式：鏈接、導(dǎo)入、嵌入；前兩者可用于多個頁面共用一個.css樣式表文件 嵌入式CSS在DW MX下編輯包括： Custom CSS，類（class）類的應(yīng)用代碼是 class=“ class name “ CSS selector，定義偽類，主要是對鏈接的設(shè)定a:link; a:

29、visited; a:hover; a:active Redefine HTML Tag對HTMl標(biāo)識符進行設(shè)定 New style Sheet File的建立和CSS樣式表的導(dǎo)出 自定義CSS的應(yīng)用 外部CSS樣式表的應(yīng)用,運用CSS時機,普通的頁面編輯無法實現(xiàn)的主頁特效和顯示效果如：改變鏈接的默認(rèn)顯示樣式等； 同一頁面共同需要的格式，使用CSS可以最大程度減少代碼冗余； 同一網(wǎng)站不同頁面共同需要的格式，使用CSS可以保證文件尺寸最大的精簡，同時.css文件共享還實現(xiàn)了主頁格式的方便移植。,十一 頁面布局層,層的特點,以像素為單位精確定位頁面元素；移動方便、放置隨意；層有前后顯示順序； 內(nèi)置

30、元素包括所有網(wǎng)頁元素（文本、圖像、表格、層嵌套）容器 層屬性多樣：隱藏、背景 配合JavaScript可以實現(xiàn)多種特效，如菜單 不足：不能相對定位；不能被嵌入其他容器，如表格；瀏覽器要求IE4.0以上,DW MX設(shè)定層,F2 高級布局欄里可設(shè)定層；編輯-參數(shù)一項里，可以設(shè)定插入的默認(rèn)層的情況； 設(shè)定層的屬性：LayerID：層名稱；左、頂邊距；層寬、層高；Z-index：層的堆疊順序號；顯示初始值：默認(rèn)（可見）、inherit繼承、可見、隱藏層的背景顏色、背景圖片；層邊距,創(chuàng)建層,菜單操作插入默認(rèn)層 用插入欄里層工具在編輯區(qū)拖曳畫出 創(chuàng)建嵌套層方法： 用插入欄里層工具拖曳到編輯區(qū)已有的層中創(chuàng)建

31、 對兩個并列的層，在層面板里通過ctrl+鼠標(biāo)操作實現(xiàn),層的操作,層中加入對象 選擇層（方法繁多，如shirt+層內(nèi)單擊）多層同時選中，用shift 移動層 多個層的操作：“修改-對齊” 可設(shè)定對齊方式改變： 左右上下對齊；可設(shè)定大小為高度相同或者寬度相同 圖層吸附到網(wǎng)格 改變層的疊放次序：改變z-index值 改變層的可見性 層和表格的相互轉(zhuǎn)化（又一傻瓜型排版工具）,十二 動起來的主頁DM Timeline,認(rèn)識Timeline,播放頭 時間軸彈出菜單 動畫欄：顯示動畫的持續(xù)時間 動畫頻道：顯示層和動畫的動畫欄 關(guān)鍵幀：給動畫指定了屬性的幀 行為頻道：特定幀執(zhí)行某些行為的頻道 幀數(shù) 播放 循

32、環(huán) 自動播放,構(gòu)建簡單時間軸動畫,動畫對象必須是層 步驟： 創(chuàng)建層，確定起始位置 將層放到動畫欄的第一個頻道內(nèi) 單擊動畫欄最后關(guān)鍵幀標(biāo)記，注意播放頭也移動到該處 頁面上將該層移動到動畫結(jié)束處，可見起始位置和結(jié)束位置之間有線（運動軌跡） 選中autoplay,保存預(yù)覽。,動畫調(diào)整及其他,可在中間加入關(guān)鍵幀，在頁面上改動運動軌跡 可通過拖動路徑創(chuàng)建動畫 可改變各種動畫元素達到調(diào)整效果：動畫欄長度、關(guān)鍵幀位置、動畫起始時間、動畫路徑位置、添加刪除幀 動畫加入的實際是插入了一段相對復(fù)雜的代碼,十三 主頁特效初步,應(yīng)用DM MX的JavaScript行為,JavaScript簡介,JavaScript是

33、Netscape公司產(chǎn)品;（Java語言是SUN Microsystems產(chǎn)品） 程序語言本身類似Java，C； 嵌入代碼，通過瀏覽器識別執(zhí)行后，達到改變頁面屬性，控制瀏覽進程 能實現(xiàn)交互功能；完成大量主頁特效如：鼠標(biāo)敲擊移動事件等等,JavaScript行為,行為是被用來動態(tài)響應(yīng)用戶操作、改變當(dāng)前頁面效果或者是執(zhí)行特定任務(wù)的一種方法 行為=事件+動作事件為大多數(shù)瀏覽器理解的通用代碼，可以由用戶激發(fā)如：onMouseOver等；一個事件可以觸發(fā)多個動作 舉例：輪轉(zhuǎn)圖片（鼠標(biāo)移動到圖片上方，圖片發(fā)生變化的主頁特效） DW MX里提供的“行為”功能，是一套封裝好的JavaScript函數(shù)庫；包含2

34、0多種行為動作,使用DW行為功能,例子：單擊圖片，關(guān)閉當(dāng)前窗口 步驟： 調(diào)出“行為”面板（shift+F3） 選中插入圖片，添加行為call JavaScript 對話框中編寫代碼為“window.close()” 選擇觸發(fā)事件為onclick,動作使用方法例解（1）,Call JavaScript 調(diào)用JavaScript Change Properties 改變屬性例子：層改變背景顏色 Check Browser 檢查瀏覽器可根據(jù)客戶端瀏覽器的不同選擇不同頁面；注意這個行為的工作流程 Check plugin 檢查插件可設(shè)定flash網(wǎng)頁和非flash網(wǎng)頁,動作使用方法例解（2）,Cont

35、rol Shockware / flash 控制flash Drag layer 層移動設(shè)定分基礎(chǔ)、高級 Go to URL 跳轉(zhuǎn)鏈接在框架頁中打開注意先設(shè)定好框架名稱 Open browse window 定制打開窗口 Play sound支持音樂文件類型：midi, mp3, wav,動作使用方法例解（3）,Popup message 提示信息框 Preload image 預(yù)下載圖象對不會立即出現(xiàn)的圖象載入到瀏覽器緩存，如使用時間軸、timeline、交互圖象 Set text動態(tài)改變層、框架、狀態(tài)欄等的文字 Show-hide layers改變層的顯示狀態(tài)：顯示|隱藏 Swap ima

36、ge 跳轉(zhuǎn)圖象注意兩張圖片大小要一致擴展使用：set nav bar image Timeline Validate form自動檢測表單內(nèi)容合法性,應(yīng)用主頁特效軟件,推薦軟件,任何一款網(wǎng)上常用的特效軟件如：主頁特效王，greentea等 按特效軟件提示向?qū)В钊氡匦璧脑O(shè)定項目，將自動生成的JavaScript代碼copy到網(wǎng)頁文件代碼中 JavaScript的兩種調(diào)用方式 .js文件可以被網(wǎng)頁進行外部調(diào)用 以Script腳本語句直接嵌入到頁面任何位置,圖片特效軟件推薦,Anfy 2.0 特點：以applet（外掛）生成的眩目的主頁特效，效果豐富出眾 應(yīng)用時按向?qū)瓿稍O(shè)定，注意將支持特效的.j

37、s文件一起copy到網(wǎng)頁目錄下,參考書目,賈春紅.網(wǎng)迷新寶典-DreamweaverMX網(wǎng)頁制作M.人民郵電出版社,2002 黃斯偉.網(wǎng)頁樣式設(shè)計-CSS.人民郵電出版社.2000 Steven Holzner.JavaScript使用詳解.機械工業(yè)出版社.1999 Lee Anne Phillips.巧學(xué)活用HTML4.機械工業(yè)出版社.1998,常用軟件用法,CuteFtp,認(rèn)識界面：本地窗口,站點窗口,服務(wù)器窗口,工具欄,信息窗口 新建站點（設(shè)定內(nèi)容）：站點標(biāo)簽，服務(wù)器名稱，用戶名，密碼，端口設(shè)定 連接過程：打開建立好的標(biāo)簽，填寫密碼，連接本地和服務(wù)器；選中本地窗口的文件，用文件上傳按鈕傳

38、送至服務(wù)器；選中服務(wù)器上的文件，用文件下載按鈕傳送至本地。 在服務(wù)器端可做的操作和設(shè)定：新建文件夾，文件（文件夾）權(quán)限的設(shè)定等,ACDsee,兩種界面：瀏覽界面，文件夾界面（可以進行圖片文件的管理） 除了圖片瀏覽，還可以利用的附加功能：圖片的簡單處理大小變化，旋轉(zhuǎn)，格式轉(zhuǎn)換縮略圖及網(wǎng)頁的建立,PhotoShop,新建圖像設(shè)定圖像寬度，高度（單位：像素）設(shè)定分辨率，網(wǎng)絡(luò)圖像分辨率可設(shè)定為72或100 圖層概念及操作文本和中間所有圖形層次都是有前后次序的層 保存文件保留所有操作層次的原始文件為.psd格式；網(wǎng)絡(luò)圖像可用壓縮格式j(luò)peg和gif設(shè)定輸出 常用工具選擇工具，裁切工具等 常用操作對比度亮

39、度設(shè)定，層的復(fù)制刪除操作，文本操作等,基本概念和基本操作,圖像大小和分辨率的調(diào)節(jié)一般數(shù)碼相機默認(rèn)設(shè)定下所拍攝的照片，分辨率都在1024*768以上，不適合直接插入網(wǎng)絡(luò)，需要經(jīng)過大小和分辨率的調(diào)節(jié)，進行插入。 理想圖像大小單個網(wǎng)絡(luò)圖像大小原則上不超過100K；過大的圖形可以分割為多個小的圖像，加快圖像的網(wǎng)絡(luò)傳輸速度 具體操作改變圖像大小和分辨率，調(diào)節(jié)亮度對比度，壓縮保存,應(yīng)用（1）數(shù)碼照片的處理,設(shè)定一個默認(rèn)的統(tǒng)一規(guī)格的縮略圖大小筆者一般以125*94作為統(tǒng)一規(guī)格，這是800*600等標(biāo)準(zhǔn)分辨率的等比大小 以125*94為一個基本比例，在圖形中通過新建，等比擴大，載入選區(qū)，確定一個合適的縮略圖范

40、圍然后進行圖形裁剪； 將圖形大小設(shè)定為一個640*480標(biāo)準(zhǔn)圖形比例，調(diào)節(jié)亮度對比度，輸出成壓縮格式的原始圖形 將圖形大小設(shè)定為125*94，描邊后，輸出成壓縮格式的縮略圖,應(yīng)用（2）縮略圖的制作,實戰(zhàn)網(wǎng)頁維護,素材分類對已有素材按照欄目進行分類 素材整理對已有的word文件等文本素材進行規(guī)整，最終整理成文本文件；對數(shù)碼圖片，掃描圖片，抓屏圖片，excel內(nèi)嵌表格圖片等進行分類和處理，盡量保證每張圖片大小100k；按需要對圖片做縮略圖處理。 新文件建立對以前文件做簡單的復(fù)制粘貼后改名，最大程度保留所有以往網(wǎng)頁文件的格局。,靜態(tài)網(wǎng)頁維護步驟-1,新文件基本信息處理對網(wǎng)頁標(biāo)題，關(guān)鍵詞，更新日期，期

41、刊號等信息做更改和更新 新文本建立在主要文本位置刪除舊文本信息，粘貼新的文本并簡單排版 圖片和表格的插入按需要插入圖片，設(shè)定圖文排版方式；直接從word中插入數(shù)據(jù)表格，并對插入的表格做簡單格式化處理,靜態(tài)網(wǎng)頁維護步驟-2,上傳服務(wù)器利用FTP軟件，將更新內(nèi)容上傳到主頁服務(wù)器上 調(diào)試上傳前要做本地的預(yù)覽；上傳后要到實際的地址做測試，確保更新無誤 做更新日記良好的工作習(xí)慣，便于日后查詢和多人合作更新主頁,靜態(tài)網(wǎng)頁維護步驟-3,欄目增減考慮到導(dǎo)航條的問題，需要對所有已存在的網(wǎng)頁文件做更新處理，比較麻煩。所以原則上，在網(wǎng)站建立最開始就要確定欄目，一般不要做調(diào)整。特殊欄目可以只在首頁加鏈接即可。 主頁特效利用相應(yīng)的主頁特效軟件可實現(xiàn)簡單的主頁特效。如：彈出信息窗口等等,特殊情況處理,