網頁設計與制作教程電子教案完整

第1章

網頁設計與制作基礎

第1頁本章概述本章的學習目標主要內容本章概述隨著互聯(lián)網的發(fā)展和普及，電子商務和電子政務發(fā)展迅速，人們將互聯(lián)網技術應用到生產、經營、娛樂等活動中，利用互聯(lián)網開展各種信息服務，如個人網上購物、企業(yè)形象展示、政府服務大眾等。網頁設計和制作技術成為計算機專業(yè)一個相當重要的分支。本章介紹網頁設計與制作的基礎知識，包括網頁基礎概念、網頁制作工具和技術介紹和網頁設計基礎等。第2頁本章的學習目標

了解網頁與網站的概念

了解靜態(tài)網頁和動態(tài)網頁概念

了解HTML與XHTML概念

了解網頁制作語言

了解網頁設計工具

掌握網頁構成第3頁主要內容1.1網頁基礎概念1.2網頁設計制作技術1.3網頁設計制作工具1.4網頁設計基礎1.5

本章小結

第4頁1.1網頁基礎概念Internet即通常所說的互聯(lián)網，是相互連接的網絡集合。Internet是一個巨大的、覆蓋全球的信息資源庫，是由成千上萬個網絡、上億臺計算機通過特定的網絡協(xié)議相互連接而成的全球計算機網絡，其提供資源共享和網絡通信。WWW是一個基于超文本(Hypertext)方式的信息檢索服務工具，是Internet上近幾年才發(fā)展起來的服務，也是發(fā)展最快和目前用得最廣泛的服務。第5頁網頁和網站網頁與網站的關系構建WWW的基本單位是網頁。網頁中包含所謂的“超鏈接”，通過已經定義好的關鍵字和圖形，只要用鼠標輕輕一點，就可以自動跳轉到相應的其他文件，獲得相應的信息，從而實現(xiàn)網頁之間的鏈接。通過超鏈接連接起來的一系列邏輯上可以視為一個整體的頁面，則叫做“網站”。網站由域名（DomainName）、網站空間、網頁三部分組成。網頁的基本元素文本：文本是網頁中最主要的信息載體，瀏覽者主要通過文字了解各種信息。圖片：圖片可以使網頁看上去更加美觀，可以讓瀏覽者更加快速地了解網頁所要表達的內容。水平線、表格、表單、超鏈接、動態(tài)元素等第6頁第7頁靜態(tài)網頁和動態(tài)網頁靜態(tài)網頁第8頁靜態(tài)網頁和動態(tài)網頁動態(tài)網頁數(shù)據(jù)庫數(shù)據(jù)庫（Database，DB）是存儲在一起的相關數(shù)據(jù)的集合，是按照數(shù)據(jù)結構來組織、存儲和管理數(shù)據(jù)的倉庫。數(shù)據(jù)庫管理系統(tǒng)數(shù)據(jù)定義功能數(shù)據(jù)操縱功能數(shù)據(jù)庫的運行管理數(shù)據(jù)庫的建立和維護功能數(shù)據(jù)庫的作用在動態(tài)網站建設中，數(shù)據(jù)庫發(fā)揮著不可替代的作用。它用于存儲網站中的信息，可以包括靜止的和經常需要更換的內容。第9頁第10頁主要內容1.1網頁基礎概念1.2網頁設計制作技術

1.3網頁設計制作工具1.4網頁設計基礎1.5

本章小結1.2網頁設計制作技術在Internet上瀏覽的一個個精美網頁都是用超文本標記語言HTML制作而成。網頁制作工具較多，大多數(shù)網頁制作工作都是通過“所見即所得”的編輯工具完成的。在網頁制作過程中，除了頁面的編輯外，還需要進行素材的創(chuàng)作和加工，即圖形和動畫制作工具。第11頁HTML與XHTMLWWW所使用的出版語言就是HTML(HypertextMarkedLanguage，即：超文本標記語言)語言。傳統(tǒng)HTML語言HTML是一種用來制作超文本文檔的簡單標記語言，其是構成Web頁面(Page)的主要工具，是用來表示網上信息的符號標志語言。HTML語言使用“標記”(也叫“標簽”)來指示Web瀏覽器應該如何顯示網頁元素，HTML標記是HTML中用來鑒別網頁元素的類型、格式和外觀的文本字符串。功能的逐漸增多，使得HTML成為了一種混合結構性語句與描述性語句的復雜語言。XHTML結構語言XHTML結構語言是一種基于HTML4.01與XML的新結構化語言。XHTML的標簽、屬性、屬性值等內容的書寫格式都有嚴格的規(guī)范，從而提高代碼在各種平臺下的解析效率。第12頁網頁腳本語言腳本語言服務器端腳本語言主要應用于各種動態(tài)網頁技術，用于編寫實現(xiàn)動態(tài)網頁的網絡應用程序。服務器端腳本語言必須依賴服務器端的軟件執(zhí)行。常見的服務器端腳本語言包括應用于ASP技術的VBScript、Jscript、PHP、JSP、Perl、CFML等。瀏覽器腳本語言區(qū)別于服務器端腳本語言，是直接插入到網頁中執(zhí)行的腳本語言。目前應用最廣泛的瀏覽器腳本語言包括JavaScript、JScript以及VBScript等。標準化的ECMAScript包括應用于微軟InternetExplorer瀏覽器的Jscript和用Flash腳本編寫的ActionScript等。標準化的文檔對象模型文檔對象模型（DocumentObjectModel，DOM）是根據(jù)W3CDOM規(guī)范而定義的一系列文檔對象接口。第13頁動態(tài)網頁編程語言ASP技術第14頁動態(tài)網頁編程語言ASP.NET技術第15頁動態(tài)網頁編程語言JSP技術第16頁動態(tài)網頁編程語言PHP技術PHP（PersonalHomePage，個人主頁）也是一種跨平臺的網頁后臺技術，最早由丹麥人RasmusLerdorf開發(fā)，并由PHPGroup和開放源代碼社群維護，是一種免費的網頁腳本語言。PHP是一種應用廣泛的語言，其多在服務器端執(zhí)行，通過PHP代碼產生網頁并提供對數(shù)據(jù)庫的讀取。第17頁第18頁主要內容1.1網頁基礎概念1.2網頁設計制作技術1.3網頁設計制作工具

1.4網頁設計基礎1.5

本章小結1.3網頁設計制作工具網頁編輯工具圖形和圖像處理工具動畫設計工具第19頁網頁編輯工具網頁編輯工具主要分為標記型和所見即所得型。標記型工具常用的是Notepad(記事本)、Ultraedit等。Ultraedit是一套很好用的文本編輯器，附有HTML標簽顏色顯示、搜尋替換以及無限制的還原功能。所見即所得的編輯主流軟件主要是Adobe公司的Dreamweaver。第20頁DreamweaverCCDreamweaverCC是Adobe公司推出的一套擁有可視化編輯界面，用于制作并編輯網站和移動應用程序的網頁設計軟件。其支持代碼、拆分、設計、實時視圖等多種方式來創(chuàng)作、編寫和修改網頁，具有強大的功能和簡便的操作平臺，是一款所見即所得的網頁制作軟件。該軟件集網頁制作、網站管理、程序開發(fā)于一身，可以幫助用戶在同一個軟件中完成所有網站建設的相關工作。第21頁DreamweaverCC第22頁第23頁DreamweaverCC圖形和圖像處理工具目前常用的圖形和圖像處理工具主要是Adobe公司Photoshop。Photoshop的功能十分強大，是目前使用最為廣泛的專業(yè)圖形圖像處理軟件之一。它捆綁了ImageReady，能夠實現(xiàn)各種專業(yè)化的圖像處理及動畫的制作等。第24頁PhotoshopCC第25頁PhotoshopCC第26頁動畫設計工具第27頁Flash是目前網頁制作中最為出色的動畫設計軟件，它是美國的Macromedia公司于1999年6月推出的交互式動畫設計工具，用它可以將音樂、聲效、動畫以及富有新意的界面融合在一起，以制作出高品質的、富有創(chuàng)意的網頁動態(tài)效果。FlashCC第28頁FlashCC第29頁第30頁主要內容1.1網頁基礎概念1.2網頁設計制作技術1.3網頁設計制作工具1.4網頁設計基礎1.5

本章小結1.4網頁設計基礎網頁構成分析網頁設計原則網頁版面設計網頁色彩設計

第31頁網頁構成分析Logo圖標導航條Banner內容版塊版尾和版權

第32頁網頁設計原則一個好的網站應該是內容豐富、頁面干凈、主題突出、欄目導航清晰明了，因此網頁設計應注意以下幾個原則：用戶優(yōu)先符合“8秒鐘原則”考慮用戶的軟/硬件配置內容豐富著手規(guī)劃、確定特色、鎖定目標首頁的重要性欄目的歸類互動性圖像應用技巧、背景底色HTML格式的注意事項、避免濫用技術。第33頁網頁版面設計T結構布局“口”形布局“三”形布局“框架”型布局POP布局

第34頁網頁色彩設計色彩的設計原則網站色彩總的設計原則應該是“總體協(xié)調，局部對比”。主頁的整體色彩效果應該的和諧的，只有局部的、小范圍的地方可以有一些強烈色彩的對比。在色彩的運用上可以根據(jù)主頁內容的需要，分別采用不同的主色調。色彩的概念色彩的冷暖色彩的輕重色彩的前進與后退色彩的艷麗與素雅色彩選配方案紅色色系、藍色色系、其他色系第35頁第36頁主要內容1.1網頁基礎概念1.2網頁設計制作技術1.3網頁設計制作工具1.4網頁設計基礎1.5

本章小結1.5本章小結本章講述了網頁設計與制作的基礎知識。首先，介紹了網頁基礎概念，包括Internet基礎，網頁和網站的概念，靜態(tài)網頁與動態(tài)網頁的區(qū)別，數(shù)據(jù)庫的概念及其在網站建設中的作用。接下來，講述了HTML與XHTML、網頁腳本語言、動態(tài)網頁編程語言等網頁制作技術。之后，講述了DreamweaverCC、PhotoshopCC、FlashCC等網頁制作的常用工具。最后，對網頁設計基礎進行了詳細講述。第37頁第2章

創(chuàng)建web網站第38頁本章概述本章的學習目標主要內容本章概述隨著網絡技術的發(fā)展，越來越多的企業(yè)組建了自己的網站，并通過網站對外發(fā)布產品信息、提供網絡服務、收集用戶反饋、樹立企業(yè)形象。除企業(yè)外，很多個人也建立了個人的站點，對外展示自我，與天南海北的朋友交流等。本章介紹網站開發(fā)流程、IIS服務器的安裝與配置和Web網站的創(chuàng)建及管理等內容。第39頁本章的學習目標了解網站主題與結構了解網站開發(fā)流程掌握IIS的安裝配置過程掌握建立Web網站第40頁主要內容2.1網站設計基礎

2.2網站策劃2.3網站設計2.4網站制作2.5網站維護2.6本章小結第41頁2.1網站設計基礎網站主題與結構網站開發(fā)流程第42頁網站主題與結構網站主題創(chuàng)建網站，首先必須要解決的就是網站內容問題，即確定網站的主題。對于內容主題的選擇，要做到小而精，主題定位要小，內容要精。不要去試圖制作一個包羅萬象的站點，這往往會失去網站的特色，也會帶來高強度的勞動，給網站的及時更新帶來困難。網站結構網站的目錄是指建立網站時創(chuàng)建的目錄。不要將所有文件都存放在根目錄下。按欄目內容建立子目錄。在每個主目錄下都建立獨立的Images目錄。其它需要注意的事項。鏈接結構：網站的鏈接結構是指頁面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上，但可以跨越目錄。樹狀鏈接結構（一對一）星狀鏈接結構（一對多）第43頁第44頁網站開發(fā)流程主要內容2.1網站設計基礎2.2網站策劃2.3網站設計2.4網站制作2.5網站維護2.6本章小結第45頁2.2網站策劃網站策劃是指在網站建設前對市場進行分析、確定網站的目的和功能，并根據(jù)需要對網站建設中的技術、內容、費用、測試、維護等作出規(guī)劃。網站策劃對網站建設起到計劃和指導的作用，對網站的內容和維護起到定位作用。網站策劃是網站建設的基礎，決定了一個網站的發(fā)展方向，同時對網站的推廣也具有指導意義。第46頁前期調研用戶需求調查用戶需求是企業(yè)發(fā)布網站服務的核心。企業(yè)的一切經營行為都應該圍繞用戶切實的需求來進行。因此，在網站建設之前，了解用戶的需求，根據(jù)用戶需求確定網站服務內容是必須的。競爭對手情況調查競爭對手是指與企業(yè)所服務的用戶群體、服務的項目有交集的其他企業(yè)。在企業(yè)進行網站服務時，了解競爭對手的狀態(tài)甚至未來的營銷策略，將對企業(yè)規(guī)劃網站服務有很大的幫助。企業(yè)自身情況調查企業(yè)除了需要了解對手的情況外，還應了解企業(yè)自身的情況，包括企業(yè)的實際技術水平、資金狀況等信息，根據(jù)企業(yè)自身情況來確定網站服務的規(guī)模和項目。第47頁建站需求分析建設網站前應先做市場分析相關行業(yè)的市場是怎樣的，市場有什么樣的特點，是否能夠在互聯(lián)網上開展公司業(yè)務。市場主要競爭者分析，競爭對手上網情況及其網站策劃、功能作用。公司自身條件分析、公司概況、市場優(yōu)勢，可以利用網站提升哪些競爭力，建設網站的能力（費用、技術、人力等）。客戶對站點的需求分析在這一階段，需要掌握一些典型客戶的基本信息。例如，他們共同的興趣，他們希望從站點中獲得什么？要得到這些信息，既可以做一些問卷調查，也可以從專業(yè)人員那里獲得一些建議，還可以在博客、BBS設立反饋信息頁，從瀏覽者那里得到實際的信息，然后對網站進行規(guī)劃。第48頁確定網站主題網站的類型及定位綜合門戶網站電子商務網站視頻分享網站企業(yè)宣傳網站下載網站搜索引擎網站網站主題的確定網站結構規(guī)劃網站的欄目結構劃分標準，應盡量符合大多數(shù)人理解的習慣。例如，一個典型的企業(yè)網站欄目，通常包括企業(yè)的簡介、新聞、產品。用戶的反饋以及聯(lián)系方式等。第49頁建站環(huán)境分析Web服務器的選擇Web服務器是企業(yè)信息的資料的存放處，通過HTTP（超文本傳輸協(xié)議）協(xié)議來訪問企業(yè)網站?？紤]網絡的技術問題在設計網站前，要充分考慮影響用戶訪問網絡的技術問題，如網絡速度因素、瀏覽器、分辨率，以及即時交互性與插件等問題。第50頁主要內容2.1網站設計基礎2.2網站策劃2.3網站設計2.4網站制作2.5網站維護2.6本章小結第51頁2.3網站設計網站風格設計版面布局設計網站制作技術的選擇網站素材搜集第52頁網站風格設計確定網站的整體風格，就是確定網站內容的表現(xiàn)形式，包括網頁所采用的布局結構，顏色，字體以及標識圖形、圖像、動畫等。采用任何風格，都要以能夠找到文字與圖像和其他網絡媒體的平衡點，提供訪問者想得到的信息或感受，最終提高訪問量為目的。Internet上的網站風格類型主要有以下兩種。信息式畫廊式第53頁版面布局設計第54頁網站制作技術的選擇第55頁前臺界面設計前臺界面是直接面向用戶的接口，其設計直接決定了網站頁面的界面友好程度，決定用戶是否能夠獲得較好的體驗。頁面代碼編寫頁面代碼編寫可使用Dreamweaver，結合Photoshop的切片功能，將設計的界面圖像展示到網頁。后臺程序開發(fā)常用的后臺程序開發(fā)語言主要包括ASP、C#、Java、Perl、PHP等5種。網站素材搜集第56頁搜集和制作網頁中所需要的素材，包括網站Logo、Banner的制作，網頁內容的相關資料，還有頁面中所需的特效代碼的準備等?？梢园阉夭男D在相應的文件夾，以方便制作和日后的管理。跟主題相關的文字圖片資料；一些優(yōu)秀的頁面風格；開放的源代碼。主要內容2.1網站設計基礎2.2網站策劃2.3網站設計2.4網站制作2.5網站維護2.6本章小結第57頁2.4網站制作安裝與配置IIS服務器建立站點制作網頁第58頁安裝與配置IIS服務器第59頁安裝Internet信息服務IIS（InternetInformationServer，互聯(lián)網信息服務）是微軟公司開發(fā)的一款用于服務器對外發(fā)布網站的軟件。該軟件可以實現(xiàn)創(chuàng)建網站、配制和管理對外發(fā)布的網站以及實現(xiàn)站點的ASP網頁程序的支持功能。建立虛擬目錄顧名思義，虛擬目錄并非實際存在的目錄結構。每個Internet服務都可以從多個目錄中發(fā)布。虛擬目錄也是管理網站中文件的目錄。安裝與配置IIS服務器第60頁配置IIS服務安裝好IIS服務后，Windows操作系統(tǒng)即可支持ASP動態(tài)網頁交互程序。但如果想讓IIS服務以及ASP程序安全、穩(wěn)定地運行，還需要進行一系列配置。例如，修改IIS的Web發(fā)布目錄，以及開啟Windows防火墻對外發(fā)布權限等。建立站點第61頁認識Web站點Web站點是網站服務器中一組具有共享屬性（如相關主題、類似的設計或服務于共同目的）的鏈接文檔和資源。本地根目錄：存儲正在編輯修改中的文件。遠程目錄：存儲于測試、制作和協(xié)作等用途的文件。測試服務器目錄是Dreamweaver用來處理動態(tài)頁的目錄。建立站點第62頁創(chuàng)建Web站點利用DreamweaverCC創(chuàng)建Web站點。在站點中添加內容創(chuàng)建好站點后，該站點還只是一個空架子，沒有任何內容。如果想在站點下存放網頁中所用到的圖片、聲音、動畫及視頻等素材，需要在該站點下創(chuàng)建一個專門存放各種素材的文件夾，可以更方便地管理網站。制作網頁第63頁創(chuàng)建CSS樣式制作網站首頁制作網站的其他頁面制作超鏈接網頁制作規(guī)則主要內容2.1網站設計基礎2.2網站策劃2.3網站設計2.4網站制作2.5網站維護2.6本章小結第64頁2.5網站維護在完成網站的前臺界面設計和后臺程序開發(fā)后，還應對網站進行測試、發(fā)布和維護等工作，進一步地完善網站的內容。網站的測試和發(fā)布網站的維護與管理第65頁網站的測試和發(fā)布第66頁網站測試確保頁面可正常顯示支持不同的瀏覽器和平臺檢查失效鏈接控制頁面文件大小控制網頁各版塊圖像失效的補救方法檢查標題和標簽網站的測試和發(fā)布第67頁Dreamweaver測試網站驗證網頁語法錯誤：Dreamweaver能自行驗證整個網頁中的標簽與語法錯誤，并在彈出的“驗證”面板中顯示錯誤信息。檢查站點鏈接：對于大型網站而言，通常擁有幾十個甚至上百個頁面，在設計網頁時很容易導致鏈接錯誤或遺漏。因此在設計好網頁后，可使用Dreamweaver中的“鏈接檢查器”檢查網站內各網頁的內鏈及外鏈是否有效。網站的測試和發(fā)布第68頁網站發(fā)布在網站發(fā)布之前，首先要申請域名和Web服務器，之后才能將網站上傳到服務器，實現(xiàn)全球范圍內的瀏覽?？赏ㄟ^FTP、SFTP或SSH等文件傳輸方式，將制作完成的網站上傳到Web服務器中，并開通服務器的網絡，使其能夠進行各種對外服務。通常網站的上傳和發(fā)布是通過FTP（FileTransferProtocol，文件傳輸協(xié)議）進行的。支持FTP上傳的軟件有很多，Dreamweaver即內置有FTP上傳功能。網站的維護與管理第69頁網站發(fā)布之后，應根據(jù)訪問者的建議，不斷修改和更新網站中的信息，進一步完善網站。另外，當網站經過一段時間的運轉，還需要不斷地更新變化，豐富網站的實用性和美觀性。網站的維護是一項長期而艱巨的工作，包括對服務器的軟件、硬件維護，系統(tǒng)升級，數(shù)據(jù)庫優(yōu)化和更新網站內容等。主要內容2.1網站設計基礎2.2網站策劃2.3網站設計2.4網站制作2.5網站維護2.6本章小結第70頁2.6本章小結本章全面講述了創(chuàng)建web網站的基本過程。首先，介紹了網站主題與結構的概念和內容。接下來，對網站的開發(fā)流程進行了分析。之后，按照網站的開發(fā)流程，分別逐次地講述了網站策劃、網站設計、網站制作、網站維護的詳細內容。其中，對前期調研、網站主題、建站環(huán)境、網站結構等進行詳細分析，對IIS服務器的安裝與配置、Web網站的創(chuàng)建及管理等內容進行了詳細講述。第71頁第3章

制作頁面第72頁本章概述本章的學習目標主要內容本章概述文本是網頁中最基本的元素，圖像和多媒體使得網頁豐富多彩，水平線讓網頁的結構更清晰。超鏈接是網頁中非常重要的元素，如果沒有超鏈接，萬維網便如同一盤散沙。它們構成了網頁的基本內容。本章主要介紹利用功能強大的可視化設計工具DreamweaverCC制作和編輯網頁，在網頁中插入各種常見的對象，如文本、超鏈接、圖像對象、多媒體對象等以及相關的設置方式。第73頁本章的學習目標掌握創(chuàng)建和編輯網頁文檔掌握文本、圖像在網頁中的應用掌握創(chuàng)建超鏈接方法了解多媒體對象和其他對象的應用第74頁主要內容3.1

Dreamweaver制作頁面3.2設置網頁文本3.3為網頁添加圖像3.4插入超鏈接3.5添加多媒體對象3.6本章小結第75頁3.1Dreamweaver制作頁面Dreamweaver是一款專業(yè)的HTML編輯器，提供了強大的網頁制作功能。Dreamweaver的可視化編輯功能和功能強大的編碼環(huán)境，利用它制作網頁十分簡便。創(chuàng)建網頁文檔編輯和保存網頁預覽網頁繼續(xù)編輯網頁第76頁創(chuàng)建網頁文檔例3-1在Dreamweaver中創(chuàng)建網頁。第77頁第78頁編輯和保存網頁例3-2在Dreamweaver中通過?“頁面屬性”工具設置網頁的標題、背景色、背景圖片等屬性。第79頁預覽網頁可以按F12鍵來預覽剛才制作的網頁。主要內容3.1

Dreamweaver制作頁面3.2設置網頁文本3.3為網頁添加圖像3.4插入超鏈接3.5添加多媒體對象3.6本章小結第80頁3.2設置網頁文本文本是網頁制作中非常重要的元素之一，是向網頁訪問者提供信息的最為常用的方式。其組成了大部分網頁的結構，清晰合理的文字可以使網頁訪問者快速獲取所需信息。第81頁輸入文本添加文本在網頁中添加文本與在Word等文字處理軟件中添加文本一樣方便，可以直接輸入文本；也可以從其他文檔中復制文本；還可以插入水平線和特殊字符等。編輯文本文本的編輯操作可以使用DreamweaverCC主界面的?“編輯”菜單中對應的命令來完成，部分操作也可以先選中文本，然后右擊打開快捷菜單，利用快捷菜單中的命令來完成。設置文本格式使用文本?“屬性”面板，可以對頁面中插入的文本進行相應的編輯，從而使枯燥的文本更顯生動。編輯文本的操作主要指設置文本的基本格式，如文本字體、字體顏色、對齊方式等。第82頁段落格式化在網頁文檔的設計視圖中，每輸入一段文本，按Enter鍵后，Dreamweaver會自動為文本插入段落。使用“屬性”面板的“格式”選項可設置段落的格式。Dreamweaver提供了三種基本段落樣式：段落、標題和預先格式化的。使用列表格式化文本使用列表可有效地將主題或數(shù)據(jù)與文檔的其他部分分開。第83頁插入文本相關元素例3-3創(chuàng)建水平線。插入日期DreamweaverCC提供了一個方便的日期對象，該對象可以以任何喜歡的格式插入當前日期(包含或不包含時間都可以)，并在每次保存文件時都自動更新該日期。插入字符Dreamweaver允許在網頁中插入特殊字符。網頁中常用的特殊字符有?、?、?、€、￡、￥等。第84頁主要內容3.1

Dreamweaver制作頁面3.2設置網頁文本3.3為網頁添加圖像3.4插入超鏈接3.5添加多媒體對象3.6本章小結第85頁3.3為網頁添加圖像圖像是網頁制作中又一個重要的元素。要制作一個美觀而生動的頁面，光有文本還不夠，還要配合美麗的圖片。圖像通常用來添加圖形界面(如跳轉按鈕)、具有視覺感染力的內容(如照片)等。圖像在頁面中的恰當運用，不僅使得網頁更加美觀，而且令網頁表達信息更加直觀，吸引瀏覽者。第86頁插入圖像插入圖像最直接的方法是將站點中需要的圖像拖入到要放置圖像的位置。用戶也可以單擊?“常用”工具欄中的?“圖像”按鈕

旁的下拉按鈕，在彈出的?“圖像”下拉菜單中選擇相應的命令，插入相應的圖片對象。第87頁設置圖像屬性將圖像添加到頁面中后，如果圖像的大小和效果與頁面不協(xié)調，可通過圖像?“屬性”面板對圖像進行一些必要的編輯。第88頁設置鼠標經過圖像用戶可以在頁面中插入鼠標經過圖像，鼠標經過圖像是一種在瀏覽器中查看并使用鼠標指針移動它時發(fā)生變化的圖像。第89頁3.3為網頁添加圖像例3-5制作圖文混排網頁，練習文檔屬性設置、文本格式的設置及圖像的插入與編輯等。第90頁主要內容3.1

Dreamweaver制作頁面3.2設置網頁文本3.3為網頁添加圖像3.4插入超鏈接3.5添加多媒體對象3.6本章小結第91頁3.4插入超鏈接超鏈接的概念超鏈接是包含在網頁中，用于鏈接到其他網頁的元素。通過超鏈接可以把兩個或兩個以上的網頁關聯(lián)起來。絕對超鏈接和相對超鏈接超鏈接根據(jù)鏈接的對象路徑是否必須輸入完整，可分為絕對超鏈接和相對超鏈接兩種。絕對超鏈接必須從計算機的盤符開始或從服務器的根目錄開始往下一直到指定的文件，如file:///G:/mywebsite/image/3.jpg或網址/web/green.html。相對超鏈接用于站點內的文件鏈接。只需要寫出鏈接文件與當前文件路徑中不同的部分即可。第92頁創(chuàng)建超鏈接創(chuàng)建文本超鏈接文本鏈接的對象是文本，當鼠標指針經過這些文本時，形狀發(fā)生改變，單擊可以打開另一個網頁。創(chuàng)建圖像超鏈接也可以為圖像設置鏈接，其操作流程和文本設置超鏈接類似，只是圖像鏈接的對象是圖像而已。第93頁創(chuàng)建超鏈接例3-6為頁面添加錨記鏈接。第94頁主要內容3.1

Dreamweaver制作頁面3.2設置網頁文本3.3為網頁添加圖像3.4插入超鏈接3.5添加多媒體對象3.6本章小結第95頁3.5添加多媒體對象網頁中常用的多媒體對象主要分為Flash類(包括Flash動畫、Flash按鈕、Flash文本、Flash視頻等)、Javaapplets、ActiveX控件類，以及各種音頻、視頻文件(如HTML5Video、RM、WMV、Mp3、Mp4等)。在網頁中應用多媒體對象可以增強網頁的娛樂性和感染力，多媒體成為最有魅力的方式，也是潮流的方向。第96頁背景音樂在網頁中加入聲音，令網頁更具特色。網頁中的聲音可以是背景音樂，也可以是歌曲，由用戶選擇進行播放。為頁面添加音樂有如下幾種方法。用?“插件”添加音樂也可通過<embed>標簽為網頁添加背景音樂。通過普通的<bgsound>標簽來添加音樂用HTML5Audio添加音樂第97頁背景音樂用HTML5Audio添加音樂HTML5提供了音頻視頻的標準接口，實現(xiàn)了無需任何插件支持，只需瀏覽器支持相應的HTML5標簽。第98頁Applet程序Applet是用Java編程語言開發(fā)的、可嵌入Web頁中的小型應用程序。在DreamweaverCC中要將JavaApplet插入HTML文檔中，需要在文檔代碼中插入<applet></applet>標簽。第99頁ActiveX控件ActiveX控件也稱OLE控件，是可以充當瀏覽器插件的可重復使用的組件，像微型的應用程序。ActiveX控件只在Windows系統(tǒng)上的IE瀏覽器中運行。第100頁視頻對象例3-8在頁面中插入HTML5Video視頻。第101頁Flash例3-9插入Flash動畫。第102頁主要內容3.1

Dreamweaver制作頁面3.2設置網頁文本3.3為網頁添加圖像3.4插入超鏈接3.5添加多媒體對象3.6本章小結第103頁3.6本章小結本章講述了利用DreamweaverCC制作和編輯網頁頁面的知識。首先，介紹了在Dreamweaver中創(chuàng)建和操作網頁文檔的方法。接下來，對網頁文本的設置進行了介紹。之后，分別講述了為網頁添加圖像及網頁超鏈接的設置方式。最后，對多媒體對象在網頁中的添加進行了詳細講述。第104頁第4章設計網頁圖像第105頁本章概述本章的學習目標主要內容本章概述在繪制和處理網頁圖像前，應該首先了解網頁圖像的類型、網頁色彩模式和文件基本操作方法等。本章主要介紹利用Photoshop軟件創(chuàng)建圖像文件、繪制編輯網頁圖像的方法，以及選區(qū)、圖層、蒙版、路徑的概念和使用方法等。第106頁本章的學習目標了解圖像的文件格式和色彩模式掌握Photoshop工具繪制圖像掌握選區(qū)的操作了解圖層的概念及蒙版的使用方法掌握文字工具了解路徑編輯功能第107頁主要內容4.1

網頁圖像設計基礎4.2

網頁圖像的基本設計4.3

網頁圖像的高級設計4.4本章小結第108頁4.1網頁圖像設計基礎網頁圖像類型網頁色彩模式Photoshop圖像文件操作第109頁網頁圖像類型圖像類型矢量圖是一種基于圖形的幾何特性來描述的圖像。矢量圖中的每個圖形都是獨立的個體，都具有自己的大小、顏色和形狀等屬性。位圖圖像是用像素點描述圖像的。位圖圖像的品質與圖像生成時與采用的分辨率有關，即在一定面積的圖像上包含有固定數(shù)量的像素。圖像分辨率分辨率確定了一幅圖像的品質和能夠打印或顯示的細節(jié)含量。分辨率的單位為像素/英寸（dpi），表示圖像上每一線性英寸的像素數(shù)。圖像文件格式在計算機繪圖中，有較多的圖形和圖像處理軟件，不同的軟件所保存的圖像格式是不盡相同的。Photoshop軟件所支持的位圖文件格式有PSD、PSB、TIF、BMP、JPG、GIF和PNG等20余種格式的文件。不同的文件存儲格式其應用范圍和呈現(xiàn)出來的視覺效果也不同。圖像設計的分類標志設計、文字設計、網頁設計、卡片設計、平面廣告設計、產品包裝設計等。第110頁網頁色彩模式HSB色彩模式在HSB色彩模式中，任何一種色彩均具備三個要素：色相（H）、純度（S）和明度（B）。非彩色只有明度屬性。RGB模式RGB顏色模式是屏幕顯示的最佳顏色模式，其將紅(Red、綠(Green)、藍(Blue)三原色光通過它們相互之間的疊加來得到各種顏色。CMYK色彩模式CMYK色彩模式是指青(Cyan)、洋紅(Megenta)、黃(Yellow)、黑(Black)，CMYK色彩模式針對印刷媒介，即基于油墨的光吸收/反射特性，眼睛看到的顏色實際上是物體吸收白光中特定頻率的光而反射其余光的顏色。該模式只能用于印刷。第111頁Photoshop圖像文件操作圖像文件基本操作打開文件新建文件保存文件存儲為Web所用格式第112頁Photoshop圖像文件操作轉換圖像色彩模式第113頁Photoshop圖像文件操作Photoshop輔助工具標尺用于度量對象的大小比例，這樣可以更精確地繪制對象。網格可以精確地對齊與放置對象，網格在默認情況下顯示為水平和垂直交叉排列的線條，也可以顯示為點，網格起到輔助參考的作用，不會影響到圖像最終的輸出和打印。參考線在對齊和放置對象時比網格更加靈活，通過在水平標尺上向下或者垂直標尺上向右拖拉，即可創(chuàng)建水平或者垂直參考線。也可以通過?“視圖”|?“新建參考線”命令精確創(chuàng)建確定位置處的參考線。第114頁主要內容4.1

網頁圖像設計基礎4.2

網頁圖像的基本設計4.3

網頁圖像的高級設計4.5本章小結第115頁4.2網頁圖像的基本設計Photoshop具有強大的圖像編輯和修飾功能，用戶可以簡單地通過鼠標的單擊，來對圖像進行描繪和著色，也可以輕松地通過豐富的修飾工具對瑕疵圖像進行修飾。下面主要介紹如何用Photoshop中的繪圖工具進行圖形圖像的繪制，利用圖像修飾工具進行圖像的編輯操作。第116頁選區(qū)的概念選區(qū)是Photoshop的核心技術，實際上是用選取工具繪制的一個封閉區(qū)域，可以是任意形狀，建立選區(qū)后大部操作就只針對選區(qū)范圍有效，因此它對于網頁元素的編輯、修改至關重要。選區(qū)的創(chuàng)建Photoshop用于創(chuàng)建選區(qū)的工具主要分為三類工具組：選框工具組、套索工具組和魔棒工具與快速選擇工具組。另外，還可以使用色彩范圍命令創(chuàng)建選區(qū)。選區(qū)的移動選區(qū)的修改選區(qū)的全選與取消第117頁網頁圖像的繪制Photoshop軟件為用戶提供了豐富的繪圖工具，用戶可以輕松地通過畫筆、鉛筆和橡皮擦繪制任意形狀，通過拾色器和顏色面板、油漆桶和漸變工具為圖像上色。對于有瑕疵的圖像，Photoshop提供了一組專門用于修飾圖像的工具。主要包括修復工具組、圖章工具組、模糊/銳化工具組、加深/減淡工具組。使用時，根據(jù)要修飾的內容、修飾的最終效果、圖像自身狀況，有針對性地選擇合適的工具進行修飾。下面分別介紹這些常用工具的特點及使用方法。第118頁網頁圖像的繪制繪制圖像Photshop繪畫的步驟很簡單，只需要選擇繪畫工具、顏色、適當?shù)墓P觸樣式，然后拖動鼠標，在圖像上繪制即可。使用畫筆擦除圖像設置顏色拾色器和顏色面板油漆桶工具漸變工具第119頁網頁圖像的繪制例4-1繪制國旗。例4-2繪制透明按鈕。第120頁調整網頁圖像圖像和視圖基本屬性調整調整畫布和圖像的大小裁剪圖像視圖調整修飾網頁圖像修復圖像仿制圖像修飾圖像第121頁調整網頁圖像例4-3用修補工具消除圖像文字。第122頁調整網頁圖像調整網頁圖像色彩Photoshop具有強大的色彩調整功能，對于一些偏色、曝光不足或曝光過度的彩色圖片，利用色階、曲線、色彩平衡和色相/飽和度等功能對這些圖片進行校正，使其色彩盡量恢復正常。色階命令曲線命令亮度/對比度色彩平衡色相/飽和度第123頁主要內容4.1

網頁圖像設計基礎4.2

網頁圖像的基本設計4.3

網頁圖像的高級設計4.4本章小結第124頁4.3網頁圖像的高級設計圖層與蒙板設計網頁文字形狀和路徑濾鏡與通道第125頁圖層與蒙板圖層基本操作圖層在Photoshop中有著非常強大的功能，其能為圖像的編輯提供極大便利。圖層可以形象地看成是一張張透明的紙，如果上面的圖層沒有圖像，可以看到下層中的內容。最底層的圖層為背景層。不同的圖像在各自的圖層中獨立操作而互不影響。圖層通常分為背景層、普通層、文字層、蒙版層、形狀層、填充/調整層等。圖層的基本操作主要在圖層面板中進行。圖層面板圖層樣式圖層混合模式第126頁圖層與蒙板例4-4利用圖層的混合模式為人物替換服裝顏色第127頁

圖層與蒙板圖層蒙版蒙版就像噴繪時用的擋板，用來限制顏料的作用范圍。為圖層添加蒙版，能夠在不改變原有圖像的基礎上實現(xiàn)圖像的特殊顯示效果。例4-5利用圖層蒙版為手機換墻紙。第128頁

設計網頁文字例4-6制作圖案文字。第129頁

形狀和路徑網頁設計中經常要繪制各種幾何形狀，它們是網頁構圖的基礎。在Photoshop中，如果需要繪制線段、曲線、特殊形狀，就需要使用功能強大的鋼筆工具組、路徑工具組和形狀工具組。鋼筆工具組路徑工具組形狀工具組第130頁

濾鏡與通道運用濾鏡增強網頁圖像的效果濾鏡是Photoshop中效果獨特的工具之一，經過濾鏡處理過的圖像會出現(xiàn)奇幻的藝術效果。Photoshop提供的濾鏡包括像素化、扭曲、雜色、模糊、渲染、畫筆描邊、素描、紋理、藝術效果、銳化、風格化等，也可以使用第三方提供的濾鏡。濾鏡的使用是通過濾鏡菜單實現(xiàn)的。通道及其應用通道是用于存儲圖像顏色信息和選區(qū)信息等不同內容信息的灰度圖像。在Photoshop中可以利用通道創(chuàng)建選區(qū)或制作特殊圖像效果。通道是存儲不同類型信息的灰度圖像，在Photoshop中包括3種類型的通道：顏色信息通道、專色通道和Alpha通道。第131頁

主要內容4.1

網頁圖像設計基礎4.3

網頁圖像的高級設計4.2

網頁圖像的基本設計4.4本章小結第132頁4.4本章小結本章全面講述了利用Photoshop軟件創(chuàng)建圖像文件、繪制編輯網頁圖像的方法。首先，介紹了網頁圖像類型，網頁色彩模式和圖像文件操作等網頁圖像設計基礎知識。接下來，對網頁圖像的基本設計進行了介紹。分別講述了選區(qū)的概念、使用Photoshop的繪圖和修飾工具，繪制和調整網頁圖像及色彩。最后，對網頁圖像的高級設計進行了詳細講述，包括圖層與蒙板的使用方法、網頁文字設計的方法、形狀和路徑、濾鏡與通道的概念等內容。第133頁第5章

設計網頁動畫第134頁本章概述本章的學習目標主要內容本章概述在網站開發(fā)過程中，經常利用Flash設計制作網頁動畫。Flash是專業(yè)的矢量網頁動畫制作軟件，利用Flash制作的動畫文件體積小，能邊下載邊播放，且具有較強的交互性，用戶可以自由控制動畫的播放。因此將Flash動畫運用到網頁中將會使網頁有極豐富的表現(xiàn)力。本章主要介紹FlashCC中繪圖工具的使用方法，繪制圖形和編輯圖形的技巧，制作基礎動畫的方法，動畫腳本的基礎知識，及交互動畫的制作方法等。第135頁本章的學習目標掌握繪制和編輯圖形了解時間軸的概念掌握元件和實例的應用掌握庫的使用方法掌握編輯幀和圖層掌握基礎動畫的制作方法掌握交互動畫的制作方法第136頁主要內容5.1

Flash繪圖5.2

Flash網頁動畫5.3

Flash交互動畫5.4本章小結第137頁5.1Flash繪圖Flash文檔的操作新建文檔保存文檔打開文檔設置文檔的屬性繪制矢量圖形文本和位圖的應用第138頁Flash文檔的操作新建文檔保存文檔打開文檔設置文檔的屬性設置文本格式第139頁繪制矢量圖形Flash提供了多種繪圖和填充工具，可以用來繪制直線、形狀和路徑及編輯操作。繪圖模式繪圖工具箱與屬性面板繪制基本幾何形狀繪制復雜圖形設計圖形色彩編輯圖形第140頁文本和位圖的應用文本是動畫重要的組成部分，在Flash中可以利用文本工具創(chuàng)建各種藝術字的效果。Flash中的文本分為靜態(tài)文本、動態(tài)文本和輸入文本3種類型。創(chuàng)建文本編輯文本文本效果的制作文本濾鏡應用位圖第141頁文本和位圖的應用例5-1漸變填充效果。例5-2空心字效果。例5-3位圖填充效果。第142頁文本和位圖的應用例5-4扭曲文字效果。例5-5文本濾鏡效果實例——投影字。例5-6文本濾鏡效果實例——立體字。第143頁主要內容5.1

Flash繪圖5.2

Flash網頁動畫5.3

Flash交互動畫5.4本章小結第144頁5.2Flash網頁動畫時間軸與幀元件、實例和庫基礎動畫設計Flash中的聲音第145頁時間軸與幀認識時間軸時間軸是動畫制作的核心，用于組織和控制一定時間內的圖層和幀中的文檔內容。時間軸的主要組件是圖層、幀和播放頭。與膠片一樣，F(xiàn)lash文檔也將時長分為幀。圖層就像堆疊在一起的多張幻燈膠片一樣，每個圖層都包含一個顯示在舞臺中的不同圖像。幀類型關鍵幀：在動畫的制作過程中，角色或者物體運動或變化中的關鍵動作所處的幀稱為關鍵幀。實心黑色圓圈表示的是關鍵幀。普通幀：也稱為靜態(tài)幀，就是不起關鍵作用的幀。關鍵幀后面的灰色方塊就是普通幀，用于實現(xiàn)關鍵幀的延續(xù)或兩個關鍵幀之間的緩慢過渡。有內容的普通幀是灰色方塊；無內容的普通幀是空白方塊。第146頁時間軸與幀編輯幀選擇幀插入幀刪除幀清除幀移動幀復制幀關鍵幀和普通幀的轉換翻轉幀第147頁時間軸與幀編輯圖層圖層就像一張張透明的紙，每張紙中放置不同的內容，把這些內容組合在一起即形成完整的畫面?？梢栽趫D層上繪制和編輯對象，而不會影響其他圖層上的對象。上方圖層的對象位于下方圖層對象之上，在圖層上沒有內容的舞臺區(qū)域中，可以透過該圖層看到下面的圖層。圖層包括普通圖層、引導層和遮罩層3種類型。普通圖層具備圖層的基本功能和作用；引導層用來幫助其他圖層中的對象進行運動定位；遮罩層用來制作一些復雜的動畫效果。第148頁元件、實例和庫元件是Flash中可重復使用的對象。通常將需要重復出現(xiàn)的圖形、動畫片段、按鈕制作成元件，存放在?“庫”面板中。每個元件都有自己的時間軸，可以將幀、關鍵幀和層添加到元件的時間軸中。實例是元件在舞臺上或者嵌套在另一個元件中的元件副本。將一個元件從?“庫”面板中拖動到舞臺上就創(chuàng)建了該元件的一個實例。一個元件可以創(chuàng)建多個實例，但一個實例只對應一個元件。編輯元件會更新所有的實例，但對一個實例應用效果不會影響元件。?“庫”面板用于存儲和組織在Flash中創(chuàng)建的各種元件，其還用于存儲和組織導入的文件，包括位圖圖形、聲音文件和視頻剪輯。

第149頁元件、實例和庫創(chuàng)建和使用元件將圖形轉換為元件創(chuàng)建圖形元件使用影片剪輯元件新建按鈕元件創(chuàng)建和編輯實例成功創(chuàng)建元件后，元件被保存在?“庫”面板中，將元件從?“庫”面板拖放到舞臺上就為該元件創(chuàng)建了一個實例。編輯實例的屬性更改實例的行為元件的交換分離實例第150頁元件、實例和庫庫每個Flash文件都有用來存放元件、位圖、聲音和視頻文件等內容的庫，利用庫可以很方便地查看和組織這些內容。庫面板共享庫元件第151頁基礎動畫設計逐幀動畫逐幀動畫是最傳統(tǒng)的動畫形式，逐幀動畫在每一幀中都會更改舞臺內容，其最適合于圖像在每一幀中都在變化的復雜動畫。逐幀動畫中每一幀都是關鍵幀，都是一個單獨的畫面，整個動畫過程都是通過這些關鍵幀連續(xù)變換而形成的。逐幀動畫的創(chuàng)建方法有兩種：一種是將每個幀都定義為關鍵幀，然后為每個幀創(chuàng)建不同的內容；另一種是通過導入圖像序列來創(chuàng)建動畫。第152頁基礎動畫設計例5-7制作逐幀動畫“倒計時”。第153頁基礎動畫設計補間動畫補間動畫是通過為不同幀的對象屬性指定不同的值而創(chuàng)建的動畫。該類型的動畫制作中有如下3個需要解釋的概念。補間范圍：是時間軸中的一組幀，其中的某個對象具有一個或多個隨時間變化的屬性。補間范圍在時間軸中顯示為具有藍色背景的單個圖層中的一組幀。目標對象：在每個補間范圍中，只能對舞臺上的一個對象進行動畫處理。此對象稱為補間范圍的目標對象。屬性關鍵幀：是在補間范圍中為補間目標對象顯式定義一個或多個屬性值的幀。這些屬性可能包括位置、Alpha(透明度)、色調等。第154頁基礎動畫設計創(chuàng)建補間動畫例5-8制作補間動畫“彈跳的小球”。創(chuàng)建補間形狀動畫例5-9創(chuàng)建補間形狀動畫。第155頁基礎動畫設計例5-10數(shù)字變形實例。創(chuàng)建傳統(tǒng)補間動畫例5-11創(chuàng)建傳統(tǒng)補間動畫。第156頁基礎動畫設計圖層動畫引導層動畫引導層是一種特殊的圖層，在此圖層中繪制的內容具有輔助設計的功能，且不會在發(fā)布的動畫中顯示。引導層包括普通引導層和運動引導層。普通引導層起輔助靜態(tài)對象定位的作用，運動引導層用來繪制對象的運動軌跡。遮罩層動畫遮罩層是一種特殊的圖層，當某一圖層創(chuàng)建為遮罩層后，其相鄰下面的圖層自動轉換為被遮罩層。遮罩層內一般繪制一些簡單的圖形、文字或漸變圖形等，這些對象將變?yōu)橥该鲄^(qū)域，被遮罩層中的元素遮住的部分顯示出來，沒有被遮住的部分無法顯示。第157頁基礎動畫設計例5-12普通引導層應用實例。例5-14制作運動引導層動畫“飛機”。第158頁基礎動畫設計例5-15制作簡單遮罩效果。例5-16遮罩層動畫實例1。例5-17遮罩層動畫實例2。第159頁Flash中的聲音AdobeFlashProfessionalCC提供多種使用聲音的方式?？梢允孤曇舄毩⒂跁r間軸連續(xù)播放，或使用時間軸將動畫與音軌保持同步。向按鈕添加聲音可以使按鈕具有更強的互動性，通過聲音淡入淡出還可以使動畫更加優(yōu)美。導入聲音編輯聲音在?“屬性”面板中編輯利用聲音編輯控件同步選項壓縮聲音第160頁Flash中的聲音例5-18音樂按鈕的制作。第161頁主要內容5.1

Flash繪圖5.2

Flash網頁動畫5.3

Flash交互動畫5.4本章小結第162頁5.3Flash交互動畫動畫腳本基礎播放和停止動畫按鈕事件第163頁動畫腳本基礎ActionScript與動作面板ActionScript：是針對AdobeFlashPlayer運行時環(huán)境的編程語言，其在Flash內容和應用程序中實現(xiàn)了交互性、數(shù)據(jù)處理以及其他許多功能。Flash包含多個ActionScript版本，以滿足各類開發(fā)人員和回放硬件的需要。動作面板：Flash提供了一個專門處理腳本的編輯環(huán)境就是動作面板，執(zhí)行?“窗口”|?“動作”命令或者按F9鍵即可打開動作面板。處理對象ActionScript是一種面向對象的編程語言，每個對象都是由類定義的。事實上，在Flash中對元件的處理就是處理對象。假設已定義一個影片剪輯元件(假設它是一幅矩形的圖畫)，并且已將它的一個副本放在舞臺上。從嚴格意義上來說，該影片剪輯元件也是ActionScript中的一個對象，即MovieClip類的一個實例。第164頁動畫腳本基礎例5-19制作鼠標經過時物體變大的效果。第165頁播放和停止動畫常用的時間軸控制命令第166頁播放和停止動畫例5-20制作播放和停止動畫。第167頁按鈕事件在ActionScript3.0中，任何對象都可以通過監(jiān)聽器的設置來監(jiān)控對于對象的鼠標操作，與鼠標相關的操作事件都屬于MouseEvent類。CLICK：當對象發(fā)生單擊鼠標的動作時。DOUBLE_CLICK：當對象發(fā)生雙擊鼠標的動作時。MOUSE_DOWN：當對象發(fā)生按鼠標的動作時。MOUSE_MOVE：當鼠標指針在對象范圍內移動時。MOUSE_OUT：當鼠標指針移開對象的范圍時。MOUSE_OVER：當鼠標指針移入對象的范圍時。MOUSE_UP：當對象發(fā)生放開鼠標的動作時。MOUSE_WHEEL：當對象發(fā)生鼠標滾輪滾動的動作時。第168頁按鈕事件例5-21制作按鈕事件實例。第169頁主要內容5.1

Flash繪圖5.2

Flash網頁動畫5.3

Flash交互動畫5.4本章小結第170頁5.4本章小結本章全面講述了利用FlashCC繪圖網頁動畫的方法。首先，介紹了Flash文檔的基本操作，F(xiàn)lash繪圖工具的使用和特點及繪制矢量圖形的技巧，文本和位圖的編輯和應用。接下來，介紹了時間軸、幀和圖層的基本操作，元件、實例和庫的基本概念。之后，分別講述了基礎動畫設計的方法。最后，介紹了制作Flash交互動畫的知識。第171頁第6章HTML語言第172頁本章概述本章的學習目標主要內容本章概述目前大部分的網頁都是用HTML語言配合其它語言設計的。很多網頁制作工具軟件，比如FrontPage、Dreamweaver、ASP.NET等，可以自動生成一些固定格式的網頁元素，因此學習HTML語言的主要目的不是要完全使用HTML語言來制作一個完整的網頁，而是掌握其基本語法格式后應用到動態(tài)程序中去。在學習本章的過程中，不要一味去死記一些標識內容，要結合動態(tài)程序的方法來應用這些標識。本章介紹HTML基本語法、標簽和屬性以及常用標簽的應用如文本標簽、圖像標簽、超鏈接標簽等。第173頁本章的學習目標掌握HTML網頁的標準結構掌握HTML標簽的基本格式掌握HTML屬性的基本語法格式了解HTML常用標簽的用法第174頁主要內容6.1

HTML基礎

6.2

文本標簽6.3

圖像標簽6.4

超鏈接標簽6.5

表格標簽6.6

表單標簽6.7

列表標簽6.8其它標簽6.9本章小結第175頁

6.1HTML基礎HTML（HyperTextMarkupLanguage的縮寫），即超文本鏈接標記語言。它是在互聯(lián)網發(fā)布超文本文件（通常所說的網頁）的通用語言。所謂超文本，就是它可以加入圖片、聲音、動畫、影視等內容，每一個HTML文檔都是一種靜態(tài)的網頁文件，這個文件里面包含了HTML標記，這些標記并不是一種程序語言，它只是一種排版網頁中資料顯示位置的標記語言。第176頁HTML基本元素HTML元素是構建網頁的一種基本單位，是由HTML標簽和HTML屬性組成的。第177頁HTML文檔HTML文檔就是HTML頁面，也就是網頁，是由HTML元素組成的，互聯(lián)網的所有內容都是由一個個HTML文檔體現(xiàn)的。網頁其實就是HTML文件。一個HTML文件不僅包含文本、圖片這些內容，還包含一些Tag，中文稱為“標簽”，也有的稱為“標記”。第178頁HTML基本語法結構HTML文檔分“文件頭”和“文件體”兩部分，在文件頭中，對HTML文檔作出了一些必要的定義，在文件體中才是要顯示的各種文檔信息，HTML文檔的結構如下所示。第179頁HTML標簽HTML文件的所有控制語句稱為標簽，標簽在一對尖括號之間，格式如下所示：標簽分為成對標簽和非成對標簽，如：<title>、<table>、<font>等屬于成對標簽，<br>、<hr>等屬于非成對標簽。標簽忽略大小寫，書寫格式非常靈活?？墒褂脴撕灥膶傩詠磉M一步限定標簽，一個標簽可以有多個屬性項，各屬性項的次序不限定，各屬性項間用空格來進行分隔。如下所示：第180頁HTML的屬性HTML標簽可以有很多屬性，屬性可以擴展HTML標簽的功能，就像描述一個人，可以用性別、身高和體重等屬性來細化。屬性通常由屬性名和屬性值組成，語法格式如下屬性通常寫在開始標簽里面，屬性值一般用雙引號標簽起來（注意：是英文半角狀態(tài)下的雙引號），多個屬性并列的時候，用空格間隔。第181頁主要內容6.1

HTML基礎 6.2

文本標簽6.3

圖像標簽6.4

超鏈接標簽6.5

表格標簽6.6

表單標簽6.7

列表標簽6.8其它標簽6.9本章小結第182頁

6.2文本標簽文字屬性標記標題、段落標記第183頁文字屬性標記標題文字標記<hn><hn>標記用于設置網頁中的標題文字，被設置的文字將以黑體或粗體的方式顯示在網頁中。標題標記的格式：<hnalign=參數(shù)〉標題內容</hn>例6-5

各級標題的設定第184頁文字屬性標記文字格式控制標記<FONT><FONT>標記用于控制文字的字體，大小和顏色?？刂品绞绞抢脤傩栽O置得以實現(xiàn)的。<FONT>標記的格式：<fontface=值1size=值2color=值3〉文字</font>第185頁文字屬性標記例6-6】設置文字的字體、大小和顏色。第186頁文字屬性標記特定文字樣式標記例6-7

設置文字的字形或字體第187頁標題、段落標記換行標記<br>換行標記是個單標記，也叫空標記，不包含任和內容，在html文件中的任何位置只要使用了<br>標記，該標記之后的內容將顯示在下一行。換段落標記<p>由<p>標記所標識的文字，表明是同一個段落的文字。兩個段落間的間距等于連續(xù)加了兩個換行符，也就是要隔一行空白行。原樣顯示文字標記<pre>要保留原始文字排版的格式，就可以通過<pre>標記來實現(xiàn)，方法是把制作好的文字排版內容前后分別加上始標記<pre>和尾標記</pre>。第188頁標題、段落標記居中對齊標記<center>在頁面中使用<center>標記進行居中顯示，<center>是成對標記，在需要居中的內容部分開頭處加<center>，結尾處加</center>。水平分隔線標記<hr><hr>標記是單獨使用的標記，是水平線標記。特殊字符在HTML文檔中，有些字符沒辦法直接顯示出來，例如“?”。使用特殊字符可以將鍵盤上沒有的字符表達出來，而有些HTML文檔的特殊字符在鍵盤上雖然可以得到，但瀏覽器在解析HTML文當時會報錯，例如“<”等，為防止代碼混淆，必須用一些代碼來表示它們。第189頁標題、段落標記注釋標記在HTML文檔中可以加入相關的注釋標記，便于查找和記憶有關的文件內容和標識，這些注釋內容并不會在瀏覽器中顯示出來。注釋標記的格式如下：<!--注釋的內容-->第190頁主要內容6.1

HTML基礎 6.2

文本標簽6.3

圖像標簽6.4

超鏈接標簽6.5

表格標簽6.6

表單標簽6.7

列表標簽6.8其它標簽6.9本章小結第191頁

6.3圖像標簽圖像會使網頁更加生動，可以描述更復雜的問題。img標簽：代表HTML圖像。設定網頁圖片的方法有以下幾種：設定html文件背景圖片、背景顏色：使用<body>...</body>標記。設定圖片：使用<img>標記。設定地圖：使用<map>...</map>標記。第192頁圖像標記基本知識圖像標簽語法img是image（圖像）的縮寫，定義圖像的語法如下：<imgsrc="URI"alt="alttext"title="titletext"/>img標簽說明：圖像標簽<img>和源屬性Src替換文本屬性Alt提示文字屬性TitleWidth、Height屬性第193頁圖像標記基本知識HTMLimg標簽示例例6-15

在網頁中顯示圖像和動畫圖像。第194頁圖像標記基本知識例6-16

將其他文件夾或服務器的圖片顯示到網頁中。第195頁圖像標記基本知識例6-17

向HTML頁面添加背景圖片。例6-18

將圖片調整到不同的尺寸。例6-19

將圖像作為一個鏈接使用。第196頁圖像標記基本知識網頁設計中常見的圖像格式簡介GIF（GraphicsInterchangeFormat）：最多支持256色，支持透明，支持多幀動畫顯示效果，可以使用在品質較差或者需要透明或動畫顯示的情況。JPEG（JointPhotographicExpertsGroup）：支持多種顏色，可以有很高的壓縮比，使用了有損壓縮，不支持透明，不支持動畫效果，可以使用在品質要求較高的場合：風景、寫真等。PNG(PortableNetworkGraphics)：是一種新的圖片技術，可以表現(xiàn)品質比較高的圖片，使用了無損壓縮，支持透明，不支持動畫。第197頁圖像標記應用技巧網頁設計給圖片加邊框例6-20

給圖片加邊框后效果如圖所示。給圖片加動態(tài)說明和替代文字例6-21

給圖片加動態(tài)說明和替代文字。第198頁圖像標記應用技巧圖像與文字混排圖文混排主要是設置align參數(shù)。動態(tài)替換圖像例6-22

當鼠標放在圖片上時，圖片會自動更換，鼠標離開之后，圖片又會恢復原來的樣了。。第199頁圖像標記應用技巧在網頁加入影像片斷例6-23在video目錄下有一影像片斷文件“video.mp4”，現(xiàn)要在網頁中播放。那么源代碼是這樣的：第200頁圖像標記應用技巧創(chuàng)建圖像地圖例6-24創(chuàng)建帶有可供點擊區(qū)域的圖像地圖。其中的每個區(qū)域都是一個超級鏈接。第201頁主要內容6.1

HTML基礎 6.2

文本標簽6.3

圖像標簽6.4

超鏈接標簽6.5

表格標簽6.6

表單標簽6.7

列表標簽6.8其它標簽6.9本章小結第202頁

6.4超鏈接標簽超鏈接概念鏈接是超級鏈接的縮寫,英文是hyperlink。HTML中的H就是hypertext的縮寫，超文本的意思。超文本鏈接語言（網頁）的精髓就是鏈接，通過鏈接才可以把世界各地的網頁鏈到一起，成為互聯(lián)網。鏈接語法超級鏈接<a>標記代表一個鏈接點，是英文anchor（錨點）的簡寫。它的作用是把當前位置的文本或圖片連接到其他的頁面、文本或圖像，語法結構如下：<ahref="url">顯示的文字</a>HTML超鏈接類型HTML超鏈接包括絕對鏈接與相對鏈接兩類第203頁應用技巧提供下載文件在新窗口中打開鏈接的網頁鼠標移到鏈接，顯示一行說明文字鼠標移到一個鏈接上彈出一個窗口鏈接到本頁的指定內容鏈接到其它頁面的指定內容位置鏈接到E_mail鏈接到圖像第204頁應用技巧例6-25鏈接到圖像。第205頁主要內容6.1

HTML基礎 6.2

文本標簽6.3

圖像標簽6.4

超鏈接標簽6.5

表格標簽6.6

表單標簽6.7

列表標簽6.8其它標簽6.9本章小結第206頁

6.5表格標簽表格是html的一項非常重要功能，利用其多種屬性能夠設計出多樣化的表格。使用表格可以使頁面有很多意想不到的效果，使頁面更加整齊美觀。表格的基本結構第207頁表格標簽及屬性<Table>標簽<Table>標簽表示一個表格的開始。<tr>標簽與<td>標簽<tr>標簽表示表格的一行，<td>標簽表示表格的一個單元格。表格標簽的實例第208頁主要內容6.1

HTML基礎 6.2

文本標簽6.3

圖像標簽6.4

超鏈接標簽6.5

表格標簽6.6

表單標簽6.7

列表標簽6.8其它標簽6.9本章小結第209頁

6.6表單標簽表單在HTML頁面中起著重要作用，它是與用戶交互信息的主要手段。一個表單至少應該包括說明性文字、用戶填寫的表格、提交和重填按鈕等內容。用戶填寫了所需的資料之后，按下“提交資料”按鈕，這樣所填資料傳到Web服務器上。網頁的設計者隨后就能在Web服務器上看到用戶填寫的資料，從而完成了從用戶到作者之間的反饋和交流。第210頁表單中的元素Button：普通按鈕radio：單選按鈕checkbox：復選框select：下拉式菜單text：單行文本框textarea：多行文本框submit：提交按鈕reset：重填按鈕第211頁設計表單標記<form>表單標記<input>表單輸入標記<select>下拉菜單標記<option>選項標記<textarea>多行文本輸入標記第212頁主要內容6.1

HTML基礎 6.2

文本標簽6.3

圖像標簽6.4

超鏈接標簽6.5

表格標簽6.6

表單標簽6.7

列表標簽6.8其它標簽6.9本章小結第213頁

6.7列表標簽在html頁面中，合理的使用列表標記可以起到提綱和格式排序文件的作用。列表分為兩類，一是無序列表，一是有序列表，無序列表就是項目各條列間并無順序關系，純粹只是利用條列來呈現(xiàn)資料而已，此種無序標記，在各條列前面均有一符號以示區(qū)隔。而有序條列就是指各條列之間是有順序的，比如從1、2、3，一直延伸下去。第214頁無序列表<UL>無序列表不用數(shù)字標簽每個列表項，而采用一個符號標志每個列表項，比如黑圓點、小方塊等。無序列表使用的一對標記是<ul></ul>，每一個列表項前使用<li>。例6-27無序列表的顯示方式第215頁有序列表<OL>有序列表和無序列表的使用格式基本相同，它使用標記<ol></ol>，每一個列表項前使用<li>。例6-28有序列表的顯示方式第216頁定義列表定義列表通常用于術語的定義和解釋。定義列表由<dl>標簽開始，<dt>標簽的含義是定義題目，即定義了列表中的項目。術語的解釋用<dd>定義，即<dd>標簽的含義是定義描述。例6-29定義列表的顯示方式第217頁主要內容6.1

HTML基礎 6.2

文本標簽6.3

圖像標簽6.4

超鏈接標簽6.5

表格標簽6.6

表單標簽6.7

列表標簽6.8其它標簽6.9本章小結第218頁

6.8其它標簽div和span多視窗口框架第219頁div和spandiv和span標簽的作用都是用于定義樣式的容器，本身沒有具體的顯示效果，由其style屬性或CSS樣式來定義，不過兩者在使用方法上存在著很大的差別。例6-30

div和span標簽的區(qū)別。第220頁多視窗口框架框架就是把一個瀏覽器窗口劃分為若干個小窗口，每個窗口可以顯示不同的URL網頁。使用框架可以非常方便的在瀏覽器中同時瀏覽不同的頁面效果，也可以非常方便的完成導航工作。而所有的框架標記要放在一個html文檔中。html頁面的文檔體標記<body>被框架集標記<frameset>所取代，然后通過<frameset>的子窗口標記<frame>定義每一個子窗口和子窗口的頁面屬性。第221頁多視窗口框架框架集<frameset>框架集<frameset>標記的屬性左右分割窗口屬性：cols上下分割窗口屬性：rows第222頁主要內容6.1

HTML基礎 6.2

文本標簽6.3

圖像標簽6.4

超鏈接標簽6.5

表格標簽6.6

表單標簽6.7

列表標簽6.8其它標簽6.9本章小結第223頁

6.9本章小結本章講述了HTML語言的基本功能。首先，介紹了HTML的基礎知識，包括HTML基本元素、HTML文檔、HTML基本語法結構、標簽與屬性等。接下來，講述了HTML常用標簽的應用，如文本標簽、圖像標簽、超鏈接標簽的基本知識和應用技巧。之后，分別講述了表格標簽及屬性、表單標簽及元素、列表標簽的顯示方式等。最后，對HTML的其他標簽進行了詳細講述。第224頁第7章CSS