《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è)計的錯誤認識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ù)，熟練運用一種以上的圖象處理軟件； 具有相當?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、安裝了默認的主頁發(fā)布程序，網(wǎng)站用戶事先將制作完成的網(wǎng)站上傳到服務(wù)器指定目錄下。服務(wù)器正常工作時，當接收到某客戶端主頁瀏覽請求時，按目錄關(guān)系和相關(guān)設(shè)定，將某目錄下的相關(guān)文件數(shù)據(jù)返回給客戶端瀏覽器，被瀏覽器解讀后加以顯示，即完成了主頁瀏覽。,普通靜態(tài)網(wǎng)頁的特點和工作原理,主機IP地址： IP地址是Internet上主機的數(shù)字式標識符。給某個用戶分配一個固定的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è)定站點名稱、本地根文件夾。其他項可暫時采用默認設(shè)定。 Ftp設(shè)定（也可以使用專門的ftp工具進行將來的ftp文件上傳管理，推薦軟件如cuteftp等） 編輯站點 刪除編輯站點列表,簡單設(shè)定,“編輯”菜單的“首選參數(shù)”選項的設(shè)定： “常規(guī)” 編輯選項：使用CSS而不是Html代碼不選中（因為會整體運用CSS

7、設(shè)定） 其他會偶爾改動默認設(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等默認首頁文件名 文件層次管理 文件命名經(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)頁標題除了frame頁面，不要使任何一個頁面標題為: untitled documents 背景圖片（介紹圖片的平鋪方式） 鏈接顏色 網(wǎng)頁文字顏色設(shè)定 頁邊空白距離設(shè)定 其他 e.g. 編碼方式等,四 操作與應(yīng)用文字處理,文檔編輯,基本字塊操作：文字的復(fù)制、粘貼、剪切，查找、替換、刪除； 字的屬性設(shè)定： 字號 顏色 字形 對齊方式 字體 高級問題：能否隨意設(shè)定主頁文字的字體，象在word里那樣？能否隨意設(shè)定文字的顏色？,Attention!,字體設(shè)定重要原則：再次體現(xiàn)兼顧受眾的原則。安全中文字體：宋體、仿宋體、黑

10、體、楷體特殊字體的處理方法：圖片一些特殊符號輸入的處理方法：小圖片繁體字、生僻字應(yīng)用全拼等輸入法，采用GBK字庫，如喆(！上標下標有專門的html標記: sub, sup) 顏色知識：介紹網(wǎng)頁安全色216色（兼顧pc和Macintosh）特殊顏色需要承擔風(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)用問題,插入圖像占位符為將來插入圖像做準備 影像地圖鏈接詳見鏈接章節(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頁；盡量避免水平向滾動翻屏當網(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è)定打開目標頁Target_blank, _top, _parent, _self(默認） 錨點鏈接方法一：鼠標操作， shift+錨點；方法二：#+鏈接錨點名稱 影像地圖鼠標拖動創(chuàng)建熱區(qū)，可建立多個熱區(qū)選擇熱區(qū)創(chuàng)建鏈接注意熱區(qū)的替代文字設(shè)定alt注意每個地圖起唯一一個名稱,鏈接原則,重要原則 好的網(wǎng)站要有完善、發(fā)達的導(dǎo)航系統(tǒng)，且要明確； 所有鏈接必須測試可用，準確； “能進能出，能上能下” 管理超級鏈接：更新主要工作之一檢查可能出錯的地方如：不存在的文件，特別是外部站點不存在的文件鏈接,導(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)計計算功能；支持嵌套；插入元素更多樣,認識表格,行，列，單元格HTML標識符 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)楫斍皩挾?高度 Convert table widths/heights to percent將表格由像素變?yōu)榘俜直硎?Bg color：表

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

18、視圖模式比較：表格標簽提示更方便明顯；可對布局表格和單元格實現(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)航條的寬度，窗口默認原始的非最大化的尺寸，最終設(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)建框架方式: 修改菜單-框架頁: 可拆分框架 鼠標操作: 垂直或者水平分割文檔/框架 插入預(yù)定義框架集 使用插入欄中的預(yù)定義框架集結(jié)構(gòu) 新建文件,選擇框架頁 創(chuàng)建嵌套框架集操作同上,選定框架,在框架面板中選定 打開框架面板Shift+F2；在面板中選定框架（集） 在操作窗口

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

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

23、。絕大多數(shù)元素是“容器”，即它有起始標記和結(jié)尾標記。 例子: This is my first html file. 說明： 元素開始標識符； 元素結(jié)尾標識符；兩者之間的部分如第二行是該元素的元素體；一個元素的元素體中可以有另外的元素。個別元素標識符可以沒有結(jié)尾標示符。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文件的標識文本進行輸出 html的元素有下列三種表示方法：1) 文本或超文本2) 文本或超文本3) ,應(yīng)該了解的Html元素,文件頭部分標題 /網(wǎng)頁標題 /環(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標簽可以方便而準確的對一些主頁元素進行選擇。 適合中高級主頁編輯者對主頁源代碼進行最經(jīng)濟和最準確的精簡，最大程度避免代碼冗余。 中高級網(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è)定時候下瀏覽器的默認值,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標識符進行設(shè)定 New style Sheet File的建立和CSS樣式表的導(dǎo)出 自定義CSS的應(yīng)用 外部CSS樣式表的應(yīng)用,運用CSS時機,普通的頁面編輯無法實現(xià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è)定插入的默認層的情況； 設(shè)定層的屬性：LayerID：層名稱；左、頂邊距；層寬、層高；Z-index：層的堆疊順序號；顯示初始值：默認（可見）、inherit繼承、可見、隱藏層的背景顏色、背景圖片；層邊距,創(chuàng)建層,菜單操作插入默認層 用插入欄里層工具在編輯區(qū)拖曳畫出 創(chuàng)建嵌套層方法： 用插入欄里層工具拖曳到編輯區(qū)已有的層中創(chuàng)建

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

32、環(huán) 自動播放,構(gòu)建簡單時間軸動畫,動畫對象必須是層 步驟： 創(chuàng)建層，確定起始位置 將層放到動畫欄的第一個頻道內(nèi) 單擊動畫欄最后關(guān)鍵幀標記，注意播放頭也移動到該處 頁面上將該層移動到動畫結(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)交互功能；完成大量主頁特效如：鼠標敲擊移動事件等等,JavaScript行為,行為是被用來動態(tài)響應(yīng)用戶操作、改變當前頁面效果或者是執(zhí)行特定任務(wù)的一種方法 行為=事件+動作事件為大多數(shù)瀏覽器理解的通用代碼，可以由用戶激發(fā)如：onMouseOver等；一個事件可以觸發(fā)多個動作 舉例：輪轉(zhuǎn)圖片（鼠標移動到圖片上方，圖片發(fā)生變化的主頁特效） DW MX里提供的“行為”功能，是一套封裝好的JavaScript函數(shù)庫；包含2

34、0多種行為動作,使用DW行為功能,例子：單擊圖片，關(guān)閉當前窗口 步驟： 調(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ū)?，填入必需的設(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,認識界面：本地窗口,站點窗口,服務(wù)器窗口,工具欄,信息窗口 新建站點（設(shè)定內(nèi)容）：站點標簽，服務(wù)器名稱，用戶名，密碼，端口設(shè)定 連接過程：打開建立好的標簽，填寫密碼，連接本地和服務(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ù)碼相機默認設(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è)定一個默認的統(tǒng)一規(guī)格的縮略圖大小筆者一般以125*94作為統(tǒng)一規(guī)格，這是800*600等標準分辨率的等比大小 以125*94為一個基本比例，在圖形中通過新建，等比擴大，載入選區(qū)，確定一個合適的縮略圖范

40、圍然后進行圖形裁剪； 將圖形大小設(shè)定為一個640*480標準圖形比例，調(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)頁標題，關(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)簡單的主頁特效。如：彈出信息窗口等等,特殊情況處理,