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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16、adding）單元格內(nèi)容與邊線的距離單元格間距（Cell spacing）單元格之間的距離表格寬度（width) 可用像素?cái)?shù)和百分比兩種方法表示表格邊框（border）表格線的像素寬度，為三維顯示效果,表格屬性設(shè)定,Table ID：表格ID的命名 Align：表格與其他元素的對(duì)齊方式 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è)定,水平：?jiǎn)卧駜?nèi)元素水平對(duì)齊方式 垂直： 單元格內(nèi)元素垂直對(duì)齊方式 不換行：改變默認(rèn)的單元格內(nèi)字繞排 標(biāo)題：設(shè)為表頭，樣式：粗體，居中對(duì)齊 合并、拆分單元格 單元格的高度、寬度 單元格的背景圖片和顏色設(shè)定，邊框線設(shè)定,調(diào)整表格,調(diào)整大小 調(diào)整表格行寬、列高推薦使用屬性設(shè)定，精確設(shè)定 清除表格行列值修改不滿意的設(shè)定；創(chuàng)建大小自適應(yīng)表格 復(fù)制表格單元 選中表格或者行、列、單元格 表格復(fù)制需注意：不能對(duì)不成矩形的表格元素內(nèi)容進(jìn)行復(fù)制粘貼，必須保證目標(biāo)單元格和源單元格的格式完全一致,布局表格介紹,和普通表格

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

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

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

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

22、名稱,中級(jí)部分九 HTML語(yǔ)言簡(jiǎn)介,什么是HTML,標(biāo)準(zhǔn)通常標(biāo)注語(yǔ)言 (Standard Generalized Markup Language, SGML), 是一種用來(lái)定久標(biāo)注記號(hào)的語(yǔ)言. HTML就是SGML的 一種 “應(yīng) 用”. HTML全稱為Hyper-Text Markup Language, 本身是一種標(biāo)識(shí)語(yǔ)言。在HTTP協(xié)議支持下，用這種標(biāo)識(shí)語(yǔ)言編輯的超文本文件可以被各種瀏覽器識(shí)別并加以解讀執(zhí)行，從而實(shí)現(xiàn)網(wǎng)頁(yè)文件的瀏覽下載，亦即WWW網(wǎng)頁(yè)服務(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. 說(shuō)明： 元素開(kāi)始標(biāo)識(shí)符； 元素結(jié)尾標(biāo)識(shí)符；兩者之間的部分如第二行是該元素的元素體；一個(gè)元素的元素體中可以有另外的元素。個(gè)別元素標(biāo)識(shí)符可以沒(méi)有結(jié)尾標(biāo)示符。body 元素名稱；background 屬性名；屬性名,屬性值合起來(lái)構(gòu)成一個(gè)完整的屬性，一個(gè)元素可以有多個(gè)屬性，各個(gè)屬性用空格分開(kāi)；,HTML頁(yè)面完整結(jié)構(gòu),html文件僅由一個(gè)html元素組成， 即文件以開(kāi)始，以結(jié)尾，文件其部分都是 html的元素體。html元素的元素體由兩大部分，即頭元素.和體元素和一些注釋組成。頭元素和體

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

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

26、的失誤往往需要通過(guò)Html編碼直接查錯(cuò)修正才可能解決問(wèn)題。,十 CSS層疊樣式表,Cascading Style Sheet,CSS是控制網(wǎng)頁(yè)顯示效果的一個(gè)格式規(guī)則的集合，它允許設(shè)計(jì)者在HTML文檔中加入樣式（字體類(lèi)型、顏色、大小等） CSS應(yīng)用例子： 去掉鏈接文字的下劃線 改變?yōu)g覽器字體大小情況下文字的變化 需要掌握的CSS： 字體大小、顏色、外形、段落行距的設(shè)定 偽類(lèi)的設(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)先次序,編輯窗口里對(duì)具體對(duì)象的最后屬性設(shè)定； CSS類(lèi) 沒(méi)做任何設(shè)定時(shí)候下瀏覽器的默認(rèn)值,CSS定義結(jié)構(gòu)解析,定義樣式：H3 font-family:Arial選擇符，屬性，屬性值；多重屬性用分號(hào)分隔； 用Class和ID作為選擇符.pink color:#ff00cc#bright font-weight:bolder;color:#00ff00pink dream come truethis is the br

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

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

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

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

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

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

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

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

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

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

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

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

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

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