網(wǎng)頁(yè)制作技術(shù)教材課件匯總完整版ppt全套課件最全教學(xué)教程整本書電子教案全書教案合集最新課件匯編

1、網(wǎng)頁(yè)制作技術(shù)（第二版） 網(wǎng)頁(yè)制作技術(shù)任務(wù)一 設(shè)計(jì)網(wǎng)頁(yè) 學(xué)習(xí)目標(biāo)了解網(wǎng)頁(yè)設(shè)計(jì)的有關(guān)知識(shí)和術(shù)語(yǔ)，理解相關(guān)概念熟悉網(wǎng)頁(yè)構(gòu)成的基本元素掌握網(wǎng)頁(yè)制作的基本原則和布局思想了解網(wǎng)站開發(fā)的基本流程和制作步驟上網(wǎng)瀏覽總結(jié)各種不同類型網(wǎng)頁(yè)布局的特點(diǎn)任務(wù)一 設(shè)計(jì)網(wǎng)頁(yè) 目錄：知識(shí)1網(wǎng)頁(yè)的有關(guān)術(shù)語(yǔ)知識(shí)2網(wǎng)頁(yè)的基本構(gòu)成元素知識(shí)3網(wǎng)頁(yè)設(shè)計(jì)的基本原則知識(shí)4網(wǎng)頁(yè)設(shè)計(jì)的美學(xué)法則知識(shí)5網(wǎng)頁(yè)的布局原則知識(shí)6網(wǎng)頁(yè)的布局結(jié)構(gòu)任務(wù)1設(shè)計(jì)網(wǎng)站的標(biāo)志（ Logo ）任務(wù)2設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語(yǔ)任務(wù)3設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩任務(wù)4設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體任務(wù)5設(shè)計(jì)網(wǎng)頁(yè)任務(wù)一 設(shè)計(jì)網(wǎng)頁(yè)知識(shí)1 網(wǎng)頁(yè)的有關(guān)術(shù)語(yǔ)1.網(wǎng)頁(yè)（Web） 網(wǎng)頁(yè)，也稱為Web頁(yè)，是萬(wàn)維網(wǎng)中的基

2、本文檔，它是用HTML（超文本標(biāo)識(shí)語(yǔ)言）或者其他語(yǔ)言（如javaScript、VBScript、ASP、PHP、XML等）編寫而成的。知識(shí)2 網(wǎng)頁(yè)的有關(guān)術(shù)語(yǔ)2.網(wǎng)站（Site） 網(wǎng)站是指存放在網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體，它包含一個(gè)或多個(gè)網(wǎng)頁(yè)，這些網(wǎng)頁(yè)以超鏈接方式連接在一起，形成一個(gè)整體，描述一組完整的信息。知識(shí)1 網(wǎng)頁(yè)的有關(guān)術(shù)語(yǔ)3.超文本（Hypertext） 超文本是一種使用用戶 計(jì)算機(jī)之間進(jìn)行交流的文本顯示技術(shù)，通過(guò)對(duì)關(guān)鍵詞或圖片的索引鏈接，可以使這些帶有鏈接的詞語(yǔ)或圖片指向相關(guān)的文件或者文本中的相關(guān)段落。知識(shí)1 網(wǎng)頁(yè)的有關(guān)術(shù)語(yǔ)4.瀏覽器 瀏覽器是安裝在電腦中（客戶端）用來(lái)查看萬(wàn)維網(wǎng)中

3、超級(jí)文本的一種工具軟件。5. FTP（文件傳輸協(xié)議） FTP是文件傳輸協(xié)議的英文縮寫，是快速、高效、可靠的信息傳輸方式。知識(shí)1 網(wǎng)頁(yè)的有關(guān)術(shù)語(yǔ)6.靜態(tài)網(wǎng)頁(yè) 靜態(tài)網(wǎng)頁(yè)是指瀏覽器與服務(wù)器端不發(fā)生交互的網(wǎng)頁(yè)7.動(dòng)態(tài)網(wǎng)頁(yè) 動(dòng)態(tài)網(wǎng)頁(yè)除了靜態(tài)網(wǎng)頁(yè)中的元素外，還包括一些應(yīng)用程序，這些程序需要瀏覽器與服務(wù)器之間發(fā)生交互行為，而且應(yīng)用程序的執(zhí)行需要服務(wù)器中的應(yīng)用程序服務(wù)器才能完成。 。知識(shí)2 網(wǎng)頁(yè)的基本構(gòu)成元素1.文字2.圖像3.超鏈接4.表格5.表單6.事件與行為7.動(dòng)畫8.框架9.音頻10.視頻11.交互知識(shí)3 網(wǎng)頁(yè)設(shè)計(jì)的基本原則1.主題鮮明2.結(jié)構(gòu)合理3.形式與內(nèi)容統(tǒng)一4.技術(shù)與藝術(shù)統(tǒng)一5.整體與局部統(tǒng)一

4、 知識(shí)4 網(wǎng)頁(yè)設(shè)計(jì)的美學(xué)法則1.統(tǒng)一與變化2.對(duì)比與調(diào)和3.對(duì)稱與均衡4.節(jié)奏與旋律5.單純與秩序 知識(shí)4 網(wǎng)頁(yè)設(shè)計(jì)的美學(xué)法則1.統(tǒng)一與變化2.對(duì)比與調(diào)和3.對(duì)稱與均衡4.節(jié)奏與旋律5.單純與秩序 知識(shí)5 網(wǎng)頁(yè)的布局原則1.平衡2.對(duì)比3.疏密度4.比例5.凝視6.空白7.圖片說(shuō)明 知識(shí)6 網(wǎng)頁(yè)的布局結(jié)構(gòu)1. “同”字型結(jié)構(gòu)布局(型結(jié)構(gòu)布局) 所謂同字型結(jié)構(gòu)就是指頁(yè)面頂部為“網(wǎng)站標(biāo)志廣告條主菜單”或主菜單，下方左側(cè)為二級(jí)欄目條，右側(cè)為鏈接欄目條，屏幕中間顯示具體內(nèi)容的布局。知識(shí)6 網(wǎng)頁(yè)的布局結(jié)構(gòu)2. “國(guó)”字型布局 國(guó)字型布局是在同字型布局基礎(chǔ)上演化而來(lái)的，在保留同字型的同時(shí)，在頁(yè)面的下方增加

5、一橫條狀的菜單或廣告，是一些大型網(wǎng)站所喜歡的類型。3. T型布局 頁(yè)面的頂部是“網(wǎng)站標(biāo)志廣告條”，左面是主菜單，右面是主要內(nèi)容。知識(shí)6 網(wǎng)頁(yè)的布局結(jié)構(gòu)4. “三”型布局 這種布局多用于國(guó)外站點(diǎn)，國(guó)內(nèi)用得不多。特點(diǎn)是在頁(yè)面上由橫向兩條色塊，將頁(yè)面整體分割為 3 部分，色塊中大多放廣告條、更新和版權(quán)提示知識(shí)6 網(wǎng)頁(yè)的布局結(jié)構(gòu)5.對(duì)比布局 采取左右或者上下對(duì)比的布局.6. POP布局 頁(yè)面布局像一張宣傳海報(bào)，以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心。知識(shí)6 網(wǎng)頁(yè)的布局結(jié)構(gòu)7. Flash 布局 整個(gè)或大部分幅面的網(wǎng)頁(yè)本身就是一個(gè) Flash 動(dòng)畫，它本身就是動(dòng)態(tài)的，畫面一般比較絢麗、有趣，是一種比較新潮的布

6、局方式。任務(wù)1 設(shè)計(jì)網(wǎng)站的標(biāo)志（ Logo ）任務(wù)2 設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語(yǔ)任務(wù)3 設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩 網(wǎng)站給人的第一印象來(lái)自視覺(jué)沖擊，確定網(wǎng)站的色彩是相當(dāng)重要的一步。不同的色彩搭配會(huì)產(chǎn)生不同的效果，并可能影響到訪問(wèn)者的情緒。一般來(lái)說(shuō)，適合于網(wǎng)頁(yè)標(biāo)準(zhǔn)色的顏色有藍(lán)色、黃橙色、黑灰白色 3 大系。任務(wù)4 設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體 文字是網(wǎng)頁(yè)的主要組成部分，是信息的重要載體，正確選擇字體不僅關(guān)系到網(wǎng)頁(yè)的美觀，還對(duì)瀏覽者的閱讀及信息的傳達(dá)有直接的影響，字體同標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體一般指用于標(biāo)志、標(biāo)題和主菜單的特有字體。默認(rèn)的網(wǎng)頁(yè)字體一般是宋體。為了體現(xiàn)網(wǎng)頁(yè)的特有風(fēng)格，也可以根據(jù)需要選擇一些特別字體，如飄逸的華文

7、行楷、返樸歸真的隸書和親切隨意的手寫體等?？傊?，要根據(jù)自己網(wǎng)頁(yè)所要表達(dá)的內(nèi)涵，選擇與主題相符合的字體。目前，常見的中文字體有近 30 種，常見的英文字體有近百種，網(wǎng)絡(luò)上還有許多專用英文藝術(shù)字體供下載，所以要尋找一款滿意的字體并不是很困難。網(wǎng)頁(yè)中通常使用的字體為宋體，黑體，楷體，仿宋體，常用的字號(hào)有9pt，11pt。任務(wù)5 設(shè)計(jì)網(wǎng)頁(yè)1.草案2.粗略布局3.定案本章結(jié)束網(wǎng)頁(yè)制作技術(shù)（第二版） 網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)二 創(chuàng)建和編輯站點(diǎn)學(xué)習(xí)目標(biāo)了解Dreamweaver CS4的功能和特點(diǎn)掌握Dreamweaver CS4的工具面板及屬性面板的使用了解網(wǎng)站目錄管理規(guī)范掌握創(chuàng)建和編輯站點(diǎn)的方法任務(wù)二 創(chuàng)建和

8、編輯站點(diǎn)目錄：知識(shí)1 Dreamweaver CS4的功能和特點(diǎn)知識(shí)2 Dreamweaver CS4的工作界面知識(shí)3 站點(diǎn)任務(wù)1 創(chuàng)建本地站點(diǎn)任務(wù)2 管理站點(diǎn) 任務(wù)3 創(chuàng)建站點(diǎn)內(nèi)容 任務(wù)二 創(chuàng)建和編輯站點(diǎn)知識(shí)1 Dreamweaver CS4的功能和特點(diǎn)1.插入表格實(shí)時(shí)視圖新增功能2.針對(duì) Ajax 和 JavaScript 框架的代碼提示3.全新用戶界面4.相關(guān)文件和代碼導(dǎo)航器5.HTML 數(shù)據(jù)集6.Adobe InContext Editing (預(yù)發(fā)布版)7.Adobe Photoshop 智能對(duì)象8.更全面的 CSS 支持9.Subversion 集成10.Adobe AIR 創(chuàng)作支

9、持新增功能11.跨產(chǎn)品集成12.跨平臺(tái)支持知識(shí)2 Dreamweaver CS4的工作界面首次開啟Dreamweaver CS4時(shí)，會(huì)出現(xiàn)一個(gè)歡迎界面，知識(shí)2 Dreamweaver CS4的工作界面在Dreamweaver CS4菜單右上部分有一個(gè)工作區(qū)選項(xiàng)菜單，可根據(jù)格局需要選擇不同樣式的工作界面。知識(shí)2 Dreamweaver CS4的工作界面應(yīng)用程序開發(fā)人員布局：知識(shí)2 Dreamweaver CS4的工作界面設(shè)計(jì)人員緊湊布局：知識(shí)2 Dreamweaver CS4的工作界面Dreamweaver CS4工作界面：知識(shí)2 Dreamweaver CS4的工作界面1.菜單欄2.插入欄3.

10、文檔工具欄4.編輯窗口5.狀態(tài)欄6.網(wǎng)頁(yè)標(biāo)簽7.面板組知識(shí)3 站點(diǎn)1.本地站點(diǎn)本地站點(diǎn)實(shí)際上存放網(wǎng)頁(yè)的本地文件夾，即本地工作目錄。它可以放在本地計(jì)算機(jī)上，也可以放在網(wǎng)絡(luò)服務(wù)器上。2.遠(yuǎn)程站點(diǎn)遠(yuǎn)程站點(diǎn)是存儲(chǔ)用于測(cè)試、生產(chǎn)、協(xié)調(diào)文件的地方，具體是哪些文件取決于開發(fā)環(huán)境。一般遠(yuǎn)程文件夾位于運(yùn)行Web服務(wù)器的計(jì)算機(jī)上。3.測(cè)試服務(wù)器文件夾測(cè)試服務(wù)器文件夾是Dreamweaver處理動(dòng)態(tài)頁(yè)面的文件夾。Dreamweaver使用此文件夾生成動(dòng)態(tài)內(nèi)容并在工作時(shí)連接到數(shù)據(jù)庫(kù)。主要在對(duì)動(dòng)態(tài)頁(yè)面進(jìn)行測(cè)試時(shí)使用。任務(wù)1 創(chuàng)建本地站點(diǎn)創(chuàng)建站點(diǎn)名為“網(wǎng)頁(yè)制作學(xué)習(xí)站點(diǎn)”的本地站點(diǎn)，本地文件夾為“C:mysite”（本地文

11、件夾可事先在Windows 系統(tǒng)中創(chuàng)建，它將作為本站點(diǎn)的根目錄。）任務(wù)2 管理站點(diǎn)1.編輯站點(diǎn)任務(wù)2 管理站點(diǎn)2.刪除站點(diǎn)任務(wù)3 創(chuàng)建站點(diǎn)內(nèi)容1.新建頁(yè)面任務(wù)3 創(chuàng)建站點(diǎn)內(nèi)容2.新建素材文件夾本章結(jié)束網(wǎng)頁(yè)制作技術(shù)（第二版） 網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)四 制作網(wǎng)站鏈接學(xué)習(xí)目標(biāo)理解相對(duì)路徑和絕對(duì)路徑的概念掌握內(nèi)部鏈接和外部鏈接的創(chuàng)建方法掌握各種特殊鏈接的創(chuàng)建方法掌握?qǐng)D像鏈接的制作方法任務(wù)四 制作網(wǎng)站鏈接目錄：知識(shí)1 絕對(duì)路經(jīng)與相對(duì)路徑知識(shí)2 內(nèi)部鏈接與外部鏈接知識(shí)3 其它特殊鏈接任務(wù)1 制作網(wǎng)站鏈接任務(wù)2 制作錨點(diǎn)鏈接 任務(wù)3 制作圖像鏈接任務(wù)三 制作多媒體頁(yè)面知識(shí)1 絕對(duì)路經(jīng)與相對(duì)路徑3.站點(diǎn)根目錄相對(duì)

12、路徑 基于站點(diǎn)根目錄的相對(duì)路徑從站點(diǎn)的根目錄開始，同源端點(diǎn)的位置無(wú)關(guān)。通常使用“/”表示根目錄，所有基于站點(diǎn)根目錄相對(duì)路徑都以“/”開始， 。 站點(diǎn)根目錄相對(duì)路徑與絕對(duì)路徑的源端點(diǎn)位置無(wú)關(guān)，解決了絕對(duì)路徑在測(cè)試上的麻煩，在測(cè)試基于根目錄的鏈接時(shí)，可以在本地站點(diǎn)中進(jìn)行測(cè)試，而無(wú)須連接到 Internet 上。知識(shí)2 內(nèi)部鏈接與外部鏈接1.內(nèi)部鏈接 內(nèi)部鏈接指網(wǎng)站內(nèi)部頁(yè)面之間的相互鏈接關(guān)系，創(chuàng)建內(nèi)部鏈接一般采用“屬性”面板設(shè)置和拖動(dòng)指向鏈接頁(yè)面的方法。2.外部鏈接 創(chuàng)建外部鏈接的方法比較簡(jiǎn)單，不論是圖像還是文本，都可以創(chuàng)建鏈接到絕對(duì)地址的外部鏈接。知識(shí)3 其它特殊鏈接1.腳本鏈接 腳本鏈接是指執(zhí)行

13、JavaScript代碼或調(diào)用JavaScript函數(shù)。2.下載鏈接 鏈接到下載文件的方法，和鏈接到網(wǎng)頁(yè)的方法完全一樣。當(dāng)被鏈接的文件是 exe 文件或 zip文件等瀏覽器不支持的類型時(shí)，這些文件會(huì)被下載，3.郵件鏈接 Email鏈接是一種特殊的鏈接，單擊這種鏈接，將打開一個(gè)空白通信窗口。在Email通信窗口中，允許用戶創(chuàng)建電子郵件，并發(fā)送到指定的地址。4.空鏈接 選中要制作空鏈接的對(duì)象（文本或圖像），在屬性面板的“鏈接”文本框中直接輸入，就制作了一個(gè)空鏈接。任務(wù)1 制作網(wǎng)站鏈接任務(wù)2 制作錨點(diǎn)鏈接任務(wù)3 制作圖像鏈接任務(wù)4 制作熱點(diǎn)鏈接本章結(jié)束網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)十三 框架結(jié)構(gòu)布局網(wǎng)頁(yè)學(xué)習(xí)目標(biāo)

14、理解框架及框架集的概念。掌握框架的創(chuàng)建方法掌握框架面板的使用方法掌握框架及框架集的屬性設(shè)置掌握框架及框架集的各種操作利用框架制作網(wǎng)頁(yè)任務(wù)十三 框架結(jié)構(gòu)布局網(wǎng)頁(yè)目錄：知識(shí)1 框架和框架集知識(shí)2 預(yù)定義的框架集知識(shí)3 自定義框架集知識(shí)4 嵌套框架集知識(shí)5 保存框架任務(wù)1 利用框架制作網(wǎng)頁(yè)任務(wù)2 制作內(nèi)聯(lián)式框架網(wǎng)頁(yè)任務(wù)十三 框架結(jié)構(gòu)布局網(wǎng)頁(yè)知識(shí)1 框架和框架集框架可以將瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域分別顯示不同的網(wǎng)頁(yè)（HTML文檔）?？蚣芗荋TML文件，它向?yàn)g覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息?？蚣芗墓δ苁嵌x一組框架的布局和屬性。注意：框架并不是文件。而是

15、存放文檔的容器，任何一個(gè)框架都可以顯示任意一個(gè)文檔。知識(shí)2 預(yù)定義的框架集單擊【文件】|【新建】命令，在彈出“新建文檔”對(duì)話框中選擇所需的框架集。 知識(shí)3 自定義框架集新建一個(gè)空白的HTML文檔后，選擇【查看】|【可視化助理】|【框架邊框】菜單命令，即可在當(dāng)前文檔中顯示出框架的邊框。拖動(dòng)文檔窗口四周的邊框即可創(chuàng)建新框架。知識(shí)4 嵌套框架集選擇【窗口】|【框架】菜單命令或按【Shift+F2】鍵，打開“框架”面板。在下框架中單擊鼠標(biāo)，選擇下部框架，拖動(dòng)文檔編輯窗口左邊的邊框，則可創(chuàng)建出上部固定左側(cè)嵌套的框架。知識(shí)5 保存框架1.保存框架文檔將光標(biāo)定位到要保存的框架中，選擇【文件】|【保存框架】命令。如將框架另存為新