Web前端設(shè)計與開發(fā)技術(shù)教學(xué)課件匯總完整版電子教案全書整套課件幻燈片(最新)

1、Web前端設(shè)計與開發(fā)技術(shù)（HTML+CSS+JavaScript）主講人： 學(xué)生作品展示西安正安環(huán)境技術(shù)有限公司 域祺實業(yè)中國有限公司 www.xledlight.tw西安意隆財務(wù)咨詢有限公司 西安他米零食網(wǎng) 西京學(xué)院經(jīng)濟管理一系貴州美菱冠萱凈化設(shè)備有限公司 最便捷的售后最優(yōu)質(zhì)的服務(wù)聯(lián)系我們西安信而富 西安迪沃特西安紫鳳園青年旅舍西安必爾補習(xí)學(xué)校西安我愛我妻家政網(wǎng)/ 站酷/ 藍(lán)色理想/ 天極網(wǎng)設(shè)計在線/ 網(wǎng)頁設(shè)計手冊/ 三聯(lián)教程推薦參考書朱印宏. 全球最值得模仿的500個網(wǎng)站. 2011.北京：北京希望電子出版社胡崧，于慧. 2007. 新銳網(wǎng)頁配色設(shè)計案例分析. 北京：中國青年出版社旭日東升

2、. 2011. 網(wǎng)頁設(shè)計與配色經(jīng)典案例解析（第2版）. 北京：電子工業(yè)出版社潘基凱，江泓. 2008. 大視覺創(chuàng)意寶典網(wǎng)頁設(shè)計. 南京：江蘇美術(shù)出版社第1章 網(wǎng)站規(guī)劃 1.11.2網(wǎng)站和網(wǎng)頁的基礎(chǔ)知識網(wǎng)頁設(shè)計的思考認(rèn)識Dreamweaver CC 2018其他網(wǎng)頁制作工具上機練習(xí)要制作精美的網(wǎng)頁，除了要熟練使用Dreamweaver CC 2018外，在動手設(shè)計網(wǎng)頁之前，還要了解一些有關(guān)的概念和知識。本章主要介紹動手設(shè)計網(wǎng)頁之前要做的一些準(zhǔn)備、網(wǎng)頁設(shè)計流程和認(rèn)識Dreamweaver CC 2018。學(xué)習(xí)目標(biāo)網(wǎng)站和網(wǎng)頁的基礎(chǔ)知識選定網(wǎng)站主題和名稱設(shè)計網(wǎng)站CI形象認(rèn)識 Drea

3、mweaver CC 20181.1網(wǎng)站和網(wǎng)頁的基礎(chǔ)知識一個好的網(wǎng)站其實是由多個精美的網(wǎng)頁組成的一個整體，網(wǎng)頁上又展現(xiàn)了各種圖文并茂的信息。在進入學(xué)習(xí)制作網(wǎng)頁之前，我們有必要先了解網(wǎng)站和網(wǎng)頁的基礎(chǔ)知識。認(rèn)識互聯(lián)網(wǎng)域名與空間網(wǎng)頁與網(wǎng)站靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁1.靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是基于HTML和HTTP技術(shù)的，在沒有網(wǎng)頁制作軟件之前，制作網(wǎng)頁時需要專門的程序員來逐行編寫代碼，編寫的文檔稱為HTML文檔?，F(xiàn)在我們可以利用諸如圖形化網(wǎng)頁制作軟件，方便快捷的“畫”出想要的網(wǎng)頁文件。靜態(tài)網(wǎng)頁擴展名為.html。靜態(tài)網(wǎng)頁完全由HTML標(biāo)簽構(gòu)成，可以直接響應(yīng)瀏覽器的請求，它的特點包括：制作速度快、成本低。模板一旦確

4、定，不易修改，更新開銷大，常用于固定版式的網(wǎng)頁。除非網(wǎng)頁設(shè)計者修改了網(wǎng)頁的內(nèi)容，否則網(wǎng)頁的內(nèi)容不會發(fā)生變化。不能實現(xiàn)與瀏覽網(wǎng)頁的用戶之間的交互。通常由文本、圖像、動畫、音頻和視頻等元素組成。網(wǎng)頁的URL是固定的。本書的主要內(nèi)容為靜態(tài)網(wǎng)頁的設(shè)計。2.動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁是區(qū)別于靜態(tài)網(wǎng)頁而言的。相比與傳統(tǒng)的靜態(tài)網(wǎng)頁，動態(tài)網(wǎng)頁有了明顯的交互性、自動更新性，以及因時因人而變的靈活性。動態(tài)網(wǎng)頁里包含了程序代碼，通過后臺數(shù)據(jù)庫與Web服務(wù)器的信息交互，由后臺數(shù)據(jù)庫提供實時數(shù)據(jù)更新和數(shù)據(jù)查詢服務(wù)，動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，網(wǎng)站維護的工作量較小。動態(tài)網(wǎng)頁的特點：交互性，即網(wǎng)頁會根據(jù)用戶的要求和選擇而動態(tài)改變和響

5、應(yīng)，將瀏覽器作為客戶端界面,這將是今后WEB發(fā)展的大勢所趨。自動更新，即無須手動地更新HTML文檔,便會自動生成新的頁面，可以大大節(jié)省工作量。因時因人而變，即當(dāng)不同的時間，不同的人訪問同一網(wǎng)址時會產(chǎn)生不同的頁面。除了早期的CGI外，目前主流的動態(tài)網(wǎng)頁技術(shù)有JSP、ASP、PHP、.NET等網(wǎng)站的類型1.門戶網(wǎng)站門戶網(wǎng)站是指通向某類綜合性互聯(lián)網(wǎng)信息資源并提供有關(guān)信息服務(wù)的應(yīng)用系統(tǒng)。在全球范圍中，最為著名的門戶網(wǎng)站是雅虎等；在我國，著名的門戶網(wǎng)站有新浪、網(wǎng)易、搜狐、騰訊、百度、新華網(wǎng)、人民網(wǎng)等。門戶網(wǎng)站又可以分為綜合性門戶網(wǎng)站和地方性門戶網(wǎng)站。2.電子商務(wù)網(wǎng)站電子商務(wù)網(wǎng)站就是企業(yè)、機構(gòu)或者個人在互

6、聯(lián)網(wǎng)上建立的一個站點，是企業(yè)、機構(gòu)或者個人開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，是實施電子商務(wù)的交互窗口，是從事電子商務(wù)的一種手段。我國著名的電子商務(wù)網(wǎng)站有淘寶網(wǎng)、京東商城、蘇寧易購等3.娛樂網(wǎng)站娛樂網(wǎng)站和眾多內(nèi)容型網(wǎng)站一樣，以內(nèi)容為重點，用內(nèi)容吸引用戶。娛樂網(wǎng)站的內(nèi)容主要為休閑娛樂的內(nèi)容，我國比較有名的娛樂網(wǎng)站有愛奇藝、搜狐視頻、騰訊視頻、起點中文網(wǎng)等4.教育文化網(wǎng)站教育文化網(wǎng)站主要是教育和文化從業(yè)機構(gòu)或者個人在互聯(lián)網(wǎng)上建立的一個站點，是交流學(xué)習(xí)方法、提供教育信息、進行知識管理、傳播文化的一些信息平臺。我國著名的教育文化網(wǎng)站有各大高等院校網(wǎng)站、各大MOOC網(wǎng)站等5.個人網(wǎng)站個人網(wǎng)站是指個人或團體

7、因某種興趣、擁有某種專業(yè)技術(shù)、提供某種服務(wù)或把自己的作品、商品展示銷售而制作的具有獨立空間域名的網(wǎng)站。 個人網(wǎng)站是萬維網(wǎng)由個人創(chuàng)建的網(wǎng)頁包含的內(nèi)容，而不是個人性質(zhì)的公司，組織或機構(gòu)的代表。網(wǎng)頁元素網(wǎng)頁是一個由多種元素組成的頁面，主要包括：文本、圖像、超鏈接、聲音、動畫、視頻、表格、表單等。1.2 網(wǎng)頁設(shè)計的思考網(wǎng)站設(shè)計，包含的內(nèi)容非常多。大體分兩個方面：一方面是純網(wǎng)站本身的設(shè)計比如文字排版，圖片制作，平面設(shè)計，三維立體設(shè)計，靜態(tài)無聲圖文，動態(tài)有聲影像等；另一方面是網(wǎng)站的延伸設(shè)計，包括網(wǎng)站的主題定位和瀏覽群的定位，智能交互，制作策劃，形象包裝，宣傳營銷等等。這兩方面相輔相成，加之網(wǎng)絡(luò)技術(shù)的飛速發(fā)

8、展，要提出一個絕對正確和權(quán)威的設(shè)計思路是不可能的，所以筆者根據(jù)建設(shè)一個網(wǎng)站的思路，將幾年以來的心得整理如下，希望大家在真正動手之前理清思路，為后續(xù)的學(xué)習(xí)帶來幫助。 選定網(wǎng)站主題和名稱如何選定主題，也就是如何明確打算設(shè)計的網(wǎng)站的題材。對于主題的選擇，給讀者的一點建議是：主題要小而精。定位要小，內(nèi)容要精。最新的調(diào)查結(jié)果也顯示，“主題站”比“綜合站”更受人們喜愛。主題最好是喜愛或者拿手的內(nèi)容。所謂“知之者不如好之者,好之者不如樂之者?！迸d趣愛好是收集網(wǎng)站素材的動力，只有有興趣才能制作出較好的網(wǎng)站作品。主題不要太濫。讀者要避免選擇到處可見，人人都有的主題；也要避免已經(jīng)有非常優(yōu)秀、很知名站點的主題。網(wǎng)站

9、命名與現(xiàn)實生活中一樣，網(wǎng)站名稱是否正氣、易記、響亮，對網(wǎng)站的形象和宣傳推廣影響很大。給讀者的建議是：名正。名正則言順，網(wǎng)站的命名要弘揚時代主旋律、要合法、和理、和情。不能用反動、低俗、迷信、危害社會安全的名詞命名。簡短易記。根據(jù)中文網(wǎng)站瀏覽者的特點，網(wǎng)站名稱最好使用中文名稱，不建議用英文。網(wǎng)站名稱字?jǐn)?shù)建議6個漢字以內(nèi)，同樣為了好記；同時，站點logo也方便排版。出色。如果能體現(xiàn)一定的內(nèi)涵，給瀏覽者更多的視覺沖擊和空間想象力，那就很出色了。當(dāng)然實在做不到出色，名稱平實也可以接受。設(shè)計網(wǎng)站CI形象CI(corporate identity)指通過視覺來統(tǒng)一企業(yè)的形象。一個網(wǎng)站，和實體公司一樣，也需

10、要整體的形象包裝和設(shè)計。CI設(shè)計，對網(wǎng)站的宣傳推廣有事半功倍的效果。在網(wǎng)站主題和名稱定下來之后，需要思考的就是網(wǎng)站的CI形象。標(biāo)志、色彩、字體，是一個網(wǎng)站樹立CI形象的關(guān)鍵1.設(shè)計網(wǎng)站的標(biāo)志(logo)首先需要設(shè)計制作一個網(wǎng)站的標(biāo)志(logo)。標(biāo)志可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等等。網(wǎng)站有代表性的人物，動物，花草，可以用它們作為設(shè)計的藍(lán)本，加以卡通化和藝術(shù)化。網(wǎng)站有專業(yè)性的，可以以本專業(yè)有代表的物品作為標(biāo)志。最常用和最簡單的方式是用自己網(wǎng)站的英文名稱作標(biāo)志。2.網(wǎng)站色彩的搭配網(wǎng)站給人的第一印象來自視覺沖擊，網(wǎng)站的色彩搭配是網(wǎng)站是否成功的重要因素。不同的色彩搭配產(chǎn)生

11、不同的效果，并可能影響到訪問者的情緒。一個網(wǎng)站的標(biāo)準(zhǔn)顏色最好不要超過3種，太多則讓人眼花繚亂。標(biāo)準(zhǔn)顏色要用于網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊。給人以整體統(tǒng)一的感覺。至于其他色彩也可以使用，只是作為點綴和襯托，絕不能喧賓奪主。一般來說，適合于網(wǎng)頁標(biāo)準(zhǔn)色的顏色有：藍(lán)色、黃/橙色、黑/灰/白色三大系列色。3.設(shè)計網(wǎng)站的標(biāo)準(zhǔn)字體和標(biāo)準(zhǔn)顏色一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)志、標(biāo)題，主菜單的特有字體。一般我們網(wǎng)頁默認(rèn)的字體是宋體。為了體現(xiàn)站點的“與眾不同”和特有風(fēng)格，我們可以根據(jù)需要選擇一些特別字體。例如，為了體現(xiàn)專業(yè)可以使用粗仿宋體，體現(xiàn)設(shè)計精美可以用廣告體，體現(xiàn)親切隨意可以用手寫體等等。應(yīng)該根據(jù)自己網(wǎng)站所表達

12、的內(nèi)涵，選擇更貼切的字體。目前常見的中文字體有二三十種，常見的英文字體有近百種，網(wǎng)絡(luò)上還有許多專用藝術(shù)字體下載。需要說明的是：使用非默認(rèn)字體最好采用圖片的形式。倘若瀏覽者的計算機里沒有所用的特別字體，那么辛苦設(shè)計制作便無效。網(wǎng)頁設(shè)計的一般流程規(guī)劃網(wǎng)站結(jié)構(gòu)。規(guī)劃網(wǎng)頁布局。收集網(wǎng)站素材。編輯網(wǎng)頁內(nèi)容。測試發(fā)布網(wǎng)頁。認(rèn)識Dreamweaver CC 2018Dreamweaver CC 2018新功能1HiDPI 分辨率支持 2多顯示器支持3Git 支持的增強功能4全新歡迎界面Dreamweaver CC 2018工作界面其他網(wǎng)頁制作工具FrontpageFlashFireworksPhotosho

13、pHTML的概念HTML 指的是超文本標(biāo)記語言（HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML 不是一種編程語言，而是一種標(biāo)記語言，是一套標(biāo)記標(biāo)簽 (markup tag)。HTML標(biāo)記是有括住的指令，主要分為單標(biāo)記指令和雙標(biāo)記指令。HTML文件的基本結(jié)構(gòu)如下所示：放置文章標(biāo)題 /這里是網(wǎng)頁編碼現(xiàn)在是gb2312 這里就是正文內(nèi)容1.5 上機練習(xí)本章上機練習(xí)介紹了在Dreamweaver CC 2018 中定義工作環(huán)境并保存定義的工作環(huán)境。對于本章中的其他內(nèi)容，請讀者根據(jù)相應(yīng)內(nèi)容進行練習(xí)?！纠?.1】啟動Dreamweaver CC 2018，在

14、“標(biāo)準(zhǔn)”工作區(qū)布局的基礎(chǔ)上，在文檔窗口下方嵌入“屬性”面板，并保存自定義的工作區(qū)布局為“我的工作區(qū)”。Web前端設(shè)計與開發(fā)技術(shù)（HTML+CSS+JavaScript）江西農(nóng)業(yè)大學(xué)計算機與信息工程學(xué)院主講人： 第2章規(guī)劃網(wǎng)站結(jié)構(gòu)創(chuàng)建站點2.2規(guī)劃網(wǎng)站結(jié)構(gòu)創(chuàng)建本地站點創(chuàng)建站點文件上機練習(xí)建立一個網(wǎng)站好比寫一篇文章，首先要擬好提綱，文章才能主題明確、層次清晰；網(wǎng)站要做到結(jié)構(gòu)清晰、目錄簡明、內(nèi)容貼切。在創(chuàng)建網(wǎng)站之前，首先要設(shè)計并規(guī)劃好整個站點需要有哪些欄目，有哪些頁面，然后才能進行具體的網(wǎng)頁制作的過程。本章主要介紹如何規(guī)劃網(wǎng)站結(jié)構(gòu)，如何創(chuàng)建和管理站點，如何創(chuàng)建不同類型的網(wǎng)頁文檔。學(xué)

15、習(xí)目標(biāo)規(guī)劃網(wǎng)站結(jié)構(gòu)創(chuàng)建本地站點創(chuàng)建站點文件夾網(wǎng)頁文檔的基本操作顯示和編輯頁面頭部信息2.1 規(guī)劃網(wǎng)站結(jié)構(gòu)在確定了網(wǎng)站的主題和整體風(fēng)格之后，結(jié)合網(wǎng)站主題確定網(wǎng)站的目錄結(jié)構(gòu)、鏈接結(jié)構(gòu)和整體風(fēng)格創(chuàng)意設(shè)計。設(shè)計目錄結(jié)構(gòu)規(guī)劃鏈接結(jié)構(gòu)設(shè)計目錄結(jié)構(gòu)1.目錄應(yīng)切合主題（1）主要目錄一定要緊扣主題。（2）次要目錄適當(dāng)設(shè)置。（3）所有程序一般都存放在特定目錄，便于維護管理。（4）注意與瀏覽者的交互。2根目錄下盡量少存放文件3在每個主要目錄下都要有獨立的images目錄4目錄命名要科學(xué)。5目錄層次要簡明。規(guī)劃鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。規(guī)劃鏈接結(jié)構(gòu)的目的在于：用最少的鏈接，使得網(wǎng)頁的瀏覽最

16、有效率。樹狀結(jié)構(gòu)全網(wǎng)結(jié)構(gòu)混合策略首頁1級頁面11級頁面21級頁面31級頁面442級頁面12級頁面22級頁面32級頁面42級頁面52級頁面6首頁1級頁面11級頁面21級頁面31級頁面442級頁面12級頁面22級頁面32級頁面42級頁面52級頁面6混合策略首頁1級頁面11級頁面21級頁面31級頁面442級頁面12級頁面22級頁面32級頁面42級頁面52級頁面62.2 創(chuàng)建本地站點對同一網(wǎng)站中的文件是以“站點”為單位來進行組織和管理的，創(chuàng)建站點后用戶可以對網(wǎng)站的結(jié)構(gòu)有一個整體的把握，而創(chuàng)建站點并以站點為基礎(chǔ)創(chuàng)建網(wǎng)頁也是比較科學(xué)、規(guī)范的設(shè)計方法。在創(chuàng)建站點之前，一般在本地將整個網(wǎng)站完成，然后再將站點上

17、傳到網(wǎng)絡(luò)中的WEB服務(wù)器上給定的空間。2.3 創(chuàng)建站點文件創(chuàng)建好本地站點后，可以根據(jù)需要創(chuàng)建各欄目文件夾和文件，對于創(chuàng)建好的站點，也可以進行再次編輯、刪除或復(fù)制這些站點。2.3.1 創(chuàng)建文件夾和文件2.3.2 管理文件夾和文件2.3.3 創(chuàng)建空白網(wǎng)頁文檔2.3.4 保存和打開網(wǎng)頁文檔2.3.5查看和編輯文件頭內(nèi)容2.3.6 HTML 元素2.4上機練習(xí)Web前端設(shè)計與開發(fā)技術(shù)（HTML+CSS+JavaScript）江西農(nóng)業(yè)大學(xué)計算機與信息工程學(xué)院主講人： 第3章首頁設(shè)計與網(wǎng)頁布局3.2首頁布局設(shè)計視圖選項 使用表格上機練習(xí)首頁是網(wǎng)站中非常重要的一頁，網(wǎng)頁內(nèi)容的布局方式取決于

18、網(wǎng)站的主題定位。在Dreamweaver中，表格是最常用的網(wǎng)頁布局工具，表格在網(wǎng)頁中不僅可以排列數(shù)據(jù)，還可以對頁面中的圖像、文本、動畫等元素進行準(zhǔn)確定位，使網(wǎng)頁頁面效果顯得整齊而有序。本章主要介紹如何使用表格規(guī)劃首頁布局。學(xué)習(xí)目標(biāo)網(wǎng)頁布局設(shè)計視圖選項網(wǎng)頁中表格的作用在網(wǎng)頁中插入表格編輯表格導(dǎo)入和導(dǎo)出表格3.1首頁布局網(wǎng)站首頁的設(shè)計是非常重要的，關(guān)系著網(wǎng)站成功與否。瀏覽者往往看到第一頁就已經(jīng)對站點有一個整體的感覺。是否能夠吸引瀏覽者繼續(xù)單擊進入，是否能夠留住瀏覽者，就看首頁。版面布局規(guī)劃鏈接結(jié)構(gòu)“國”字型（同字型）、T型、標(biāo)題正文型、框架型、封面型、Flash型、變化型首頁布局簡要步驟版面布局對

19、于版面布局的技巧，提供四個建議，請讀者自己推敲：加強視覺效果加強文案的可視度和可讀性統(tǒng)一感的視覺新鮮和個性是布局的最高境界首頁布局簡要步驟畫草圖新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，讀者可以盡可能的發(fā)揮你的想象力，將想象畫上去。這仍然屬于創(chuàng)意階段，只需要粗陋的線條勾畫出創(chuàng)意的輪廓?？梢远喈嫀讖埐輬D，最后選定一個滿意的作為繼續(xù)創(chuàng)作的腳本。粗略布局在草案的基礎(chǔ)上，將你確定需要放置的功能模塊安排到頁面上。例如：網(wǎng)站標(biāo)志、主菜單、新聞、搜索、友情鏈接、廣告條、郵件列表、計數(shù)器、版權(quán)信息等。注意，必須遵循突出重點、平衡諧調(diào)的原則，將網(wǎng)站標(biāo)志、主菜單等最重要的模塊放在最顯眼，最突出的位

20、置，然后再考慮次要模塊。定稿最后將粗略布局具體化、精細(xì)化，覺得滿意就可以定稿。設(shè)計視圖選項“設(shè)計視圖選項”功能，用于輔助設(shè)計網(wǎng)頁文檔。該功能包括“可視化助理”“樣式呈現(xiàn)”“輔助線”“跟蹤圖像”“網(wǎng)格設(shè)置”“窗口大小”“縮放比率”和“標(biāo)尺”等子菜單。其中，“標(biāo)尺”功能可以輔助測量、組織和規(guī)劃布局?！熬W(wǎng)格設(shè)置”功能可以使絕對定位的網(wǎng)頁元素在移動時自動靠齊網(wǎng)格，還可以通過指定網(wǎng)格設(shè)置更改網(wǎng)格或控制靠齊行為。使用“標(biāo)尺”功能在設(shè)計頁面時需要設(shè)置各種頁面元素的位置，此時，可以使用“標(biāo)尺”功能。選擇“查看”“設(shè)計視圖選項”“標(biāo)尺”“顯示”命令，可以在文檔中顯示標(biāo)尺，如圖3.9所示。重復(fù)操作，可以隱藏或顯示

21、標(biāo)尺。1.設(shè)置標(biāo)尺的原點在標(biāo)尺的左上角區(qū)域單擊，然后拖拽，會出現(xiàn)十字準(zhǔn)星，將其拖拽到文檔窗口中的適當(dāng)位置。2.恢復(fù)標(biāo)尺初始位置要恢復(fù)標(biāo)尺初始位置，可以選擇“查看”“設(shè)計視圖選項”“標(biāo)尺”“重設(shè)原點”命令，或者在標(biāo)尺左上角交點處雙擊鼠標(biāo)。使用“網(wǎng)格設(shè)置”功能“網(wǎng)格設(shè)置”功能的作用是在“設(shè)計”視圖中對Div進行那個繪制、定位或大小調(diào)整時做可視化向?qū)В梢詫R頁面中的元素。選擇“查看”“設(shè)計視圖選項”“網(wǎng)格設(shè)置”“顯示網(wǎng)格”命令，可以在網(wǎng)頁文檔中顯示網(wǎng)格。如果要設(shè)置網(wǎng)格的相關(guān)屬性，可以選擇“查看”“設(shè)計視圖選項”“網(wǎng)格設(shè)置”“網(wǎng)格設(shè)置”命令。使用“跟蹤圖像”功能可以采取臨摹字帖的方法進行布局?？梢詫?/p>

22、喜歡的某個網(wǎng)站進行截屏，并存為圖片形式，然后利用“跟蹤圖像”功能，將其載入，進行臨摹，照著布局?！纠?.1】新建頁面，臨摹給定圖片的布局，并將其載入為跟蹤圖像。3.3使用表格網(wǎng)頁能夠向訪問者提供的信息是多樣化的，包括文字、圖像、動畫和視頻等。如何使這些網(wǎng)頁元素在網(wǎng)頁中的合理位置上顯示出來，使網(wǎng)頁變得不僅美觀而且有條理，是網(wǎng)頁設(shè)計者在著手設(shè)計網(wǎng)頁之前必須要考慮的問題。表格的作用就是幫助用戶高效、準(zhǔn)確地定位各種網(wǎng)頁數(shù)據(jù)，并直觀、鮮明地表達設(shè)計者的思想。網(wǎng)頁中表格的用途表格是網(wǎng)頁中最常用的排版方式之一插入表格選擇“插入”Table命令(或按下【Ctrl+Alt+T】組合鍵)，可以打開Table對話框

23、，通過在該對話框中設(shè)置表格參數(shù)，可以在網(wǎng)頁中插入表格。【例3.2】在例3.1的基礎(chǔ)上插入用于布局的表格，并設(shè)置相關(guān)屬性。接例3.1得到的效果，觀察“跟蹤圖像”，進行分析，最上一行為網(wǎng)站標(biāo)志，下面可能有若干行展示不同目錄。設(shè)置標(biāo)尺原點為“跟蹤圖像”有內(nèi)容展示的最左端，觀察最右端的標(biāo)尺讀數(shù)為“1000”，表示實際展示內(nèi)容的尺寸為1000像素，左右兩邊有相同的留白。通過上述兩步驟，明確了插入表格的相關(guān)參數(shù)，選擇“插入”Table命令，設(shè)置相應(yīng)參數(shù)如下：“行數(shù)”為“5”、“列”為“1”、“表格寬度”為“1000”像素、“邊框粗細(xì)”為“0”。選中該表格，或者在標(biāo)簽選擇器中選擇table標(biāo)簽，在下方“屬性

24、”面板可以看到剛插入表格的屬性。設(shè)置Align（對齊）屬性為“居中對齊”。可以發(fā)現(xiàn)，表格寬度正好匹配“跟蹤圖像”。編輯表格表格的編輯功能包括選擇表格、調(diào)整大小、更改列寬和行高、添加和刪除行列、拆分與合并單元格、設(shè)置表格屬性、設(shè)置單元格屬性、設(shè)置行列屬性等。選擇表格是對表格進行編輯操作的前提?？梢砸淮涡赃x擇整個表、行或列，也可以選擇連續(xù)的單元格。HTML 元素設(shè)置表格屬性選中一個表格后，可以在屬性面板中編輯表格的屬性。1）表格名稱。2）行、列和寬?！靶小薄傲小蔽谋究蝻@示所選表格中行和列的數(shù)量?！皩挕蔽谋究蝻@示所選表格的寬度，以像素為單位或表示為占瀏覽器窗口寬度的百分比?？梢酝ㄟ^修改這些文本框中的

25、數(shù)值，從而改變對應(yīng)的屬性。3 ） CellPad(單元格邊距)、CellSpace(單元格間距)Align（對齊）、Border（邊框）4）Class。Class（類）用于對該表格設(shè)置一個 CSS 類。5）“清除列寬”“清除行高”“將表格寬度轉(zhuǎn)換成像素”“將表格寬度轉(zhuǎn)換成百分比”按鈕。設(shè)置單元格、行或列屬性選中一個表格元素后，可以使用“屬性”面板編輯該元素的相關(guān)屬性。1）水平，用于指定單元格、行或列內(nèi)容的水平對齊方式。2）垂直，用于指定單元格、行或列內(nèi)容的垂直對齊方式。 3）寬和高 ，所選單元格的寬度和高度，以像素為單位或按整個表格寬度或高度的百分比指定。若要指定百分比，請在值后面使用百分比符

26、號 (%)。4）背景，用于指定單元格、列或行的背景顏色。 5）合并單元格，將所選的單元格、行或列合并為一個單元格。6）拆分單元格，將一個單元格分成兩個或更多個單元格。7）不換行，勾選此項屬性可以防止換行，從而使給定單元格中的所有文本都在一行上。8）標(biāo)題，勾選此項屬性可以將所選的單元格格式設(shè)置為表格標(biāo)題單元格。默認(rèn)情況下，表格標(biāo)題單元格的內(nèi)容為粗體并且居中。調(diào)整表格、列和行的大小1）調(diào)整表格大小。2）調(diào)整列和行的大小。3）更改列寬度并保持整個表的寬度不變。4）更改某個列的寬度并保持其他列的大小不變。5）清除表格中所有設(shè)置的寬度和高度。【例3.3】在例3.2的基礎(chǔ)上，對用于布局的表格進行編輯，達到

27、大約1個滿屏大小的大塊布局的效果。觀察例3.2所插入的表格，發(fā)現(xiàn)寬度基本與跟蹤圖像吻合，但是行的高度上需要進行進一步編輯。鼠標(biāo)指向第1行的下邊沿，進行拖拽，到合適的位置釋放鼠標(biāo)。依次修改第2、3行的行高，因為跟蹤圖像可能只截了一個屏幕的高度，因此，下方的圖不能完全展示，可以參照第2行的行高，設(shè)置下方各行的高度，如圖3.29所示，插入點設(shè)置在第2行是，“屬性”面板中“高”的值可以做為后續(xù)各行行高的參考。網(wǎng)頁的高度，會隨著布局表格各行的高度的擴展自動更新插入及刪除行或列要添加和刪除行和列，請使用“編輯”“表格”下的各個菜單命令。 1）插入行或列。2）刪除行或列。拆分或合并單元格 使用屬性面板或選擇

28、“編輯”“表格”“拆分單元格”或“合并單元格”命令可以拆分或合并單元格。 選擇連續(xù)行中形狀為矩形的單元格。可以在一個矩形的單元格中合并單元格，如果所選部分不是矩形，不能合并單元格。復(fù)制、粘貼和刪除單元格選定某表格元素后，執(zhí)行“編輯”“剪切”、“拷貝”或“粘貼”可以剪切、復(fù)制或粘貼該表格元素，并保留單元格的格式設(shè)置。嵌套表格嵌套表格是在另一個表格的單元格中的表格?？梢韵駥θ魏纹渌砀褚粯訉η短妆砀襁M行格式設(shè)置；但是，其寬度受它所在單元格的寬度的限制。表格的其他操作對表格進行排序可以選擇“編輯”“表格”“排序表格”命令對表格進行排序。可以根據(jù)單個列的內(nèi)容對表格中的行進行排序，還可以根據(jù)兩個列的內(nèi)容

29、執(zhí)行更加復(fù)雜的表格排序，但是不能對包含合并單元格的表格進行排序。導(dǎo)入表格式數(shù)據(jù)可以將在另一個應(yīng)用程序（例如 Microsoft Excel）中創(chuàng)建并以分隔文本的格式（其中各項以制表符、逗號、冒號或分號隔開）保存的表格式數(shù)據(jù)導(dǎo)入到網(wǎng)頁文檔中并設(shè)置為表格格式。導(dǎo)出表格選擇表格后，可以選擇“文件”“導(dǎo)出”“表格”命令，用于導(dǎo)出表格HTML 表格表格由 標(biāo)簽來定義。每個表格均有若干行（由 標(biāo)簽定義），每行被分割為若干單元格（由 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格標(biāo)簽描述定義表格定義表格的表頭定義表

30、格的行定義表格單元定義表格標(biāo)題定義表格列的組定義用于表格列的屬性定義表格的頁眉定義表格的主體定義表格的頁腳3.4 上機練習(xí)請讀者參照例3.1-例3.4，選取江西農(nóng)業(yè)大學(xué)官方網(wǎng)站為臨摹對象，將該網(wǎng)站截圖設(shè)置為跟蹤圖像，并進行網(wǎng)頁的布局。Web前端設(shè)計與開發(fā)技術(shù)（HTML+CSS+JavaScript）江西農(nóng)業(yè)大學(xué)計算機與信息工程學(xué)院主講人： 第4章 4.2 文本的使用編輯文本圖像的使用編輯圖像4.54.6HTML中的文本與圖像上機練習(xí)文本和圖像時網(wǎng)頁最基本的元素，文本是傳遞和展示信息的主要手段，圖像不僅可以美化網(wǎng)頁，還可以展現(xiàn)生動的視覺效果。本章主要介紹Dreamweaver

31、CC 2018如何在網(wǎng)頁中插入文本和圖像，并對文本和圖像進行編輯操作，制作基本網(wǎng)頁，實現(xiàn)圖文并茂。學(xué)習(xí)目標(biāo)在網(wǎng)頁中插入文本編輯文本在網(wǎng)頁中插入圖像編輯圖像4.1 文本的使用文本既是網(wǎng)頁中不可缺少的內(nèi)容，也是網(wǎng)頁中最基本的對象。由于文本的存儲空間非常小，所以在一些大型網(wǎng)站中，其占有不可代替的主導(dǎo)地位。在一般網(wǎng)頁中，文本一般以普通文字、段落或各種項目符號等形式顯示。向文檔添加文本直接輸入文本：默認(rèn)輸入文本的排列方式是由左到右。復(fù)制文本：可以將其他文檔中的文本內(nèi)容復(fù)制粘貼到網(wǎng)頁文檔中。插入特殊字符單擊“插入”面板，選擇“HTML”，往下拖動右側(cè)滾動條，在“字符”菜單中選擇字符名稱還有很多其他特殊字符

32、可供使用；可以選擇“插入”“HTML”“字符”“其他字符”命令。版面布局不換行空格HTML 只允許字符之間有一個空格；若要在文檔中添加其他空格，必須插入不換行空格。設(shè)置允許添加多個連續(xù)的空格首選項為了能方便的輸入多個連續(xù)的空格，還可以設(shè)置允許添加多個連續(xù)空格選擇“編輯”“首選項”命令，在“常規(guī)”類別中勾選“允許多個連續(xù)的空格”插入日期直接插入日期如果要在網(wǎng)頁文檔中插入日期，可以選擇“插入”面板中的“HTML”“日期”命令插入動態(tài)變化的日期是通過插入代碼來實現(xiàn)的?！纠?.1】新建一個網(wǎng)頁文檔，輸入代碼插入即時日期和時間。新建網(wǎng)頁文檔，插入一個2行1列的表格。在第一行輸入相應(yīng)文字。選擇“查看”“代

33、碼”命令切換到“代碼”視圖，將光標(biāo)移至標(biāo)簽之間，輸入如下代碼。document.write()/輸出顯示時間日期的容器setInterval(function() with(new Date)time.innerText =(getFullYear()+年+(getMonth()+1)+月+getDate()+日星期+日一二三四五六.charAt(getDay()+ +getHours()+:+getMinutes()+:+getSeconds() ,1000) /設(shè)置 id 為 time 的對象內(nèi)的文本為當(dāng)前日期時間/每1000毫秒(即1秒) 執(zhí)行一次本段代碼單擊“狀態(tài)欄”右側(cè)“實時預(yù)覽”按

34、鈕，在快捷菜單中選擇任意瀏覽器，按彈出的“Dreamweaver”對話框提示保存網(wǎng)頁文檔后，在瀏覽器顯示動態(tài)時間插入水平線水平線對于組織信息很有用。在頁面上，可以使用一條或多條水平線以可視方式分隔文本和對象。選擇“插入”“HTML”“水平線”命令，可以插入水平線。“名稱”文本框：可用于為水平線指定 ID。“寬”、“高”文本框：以像素為單位或以頁面大小百分比的形式指定水平線的寬度和高度?！皩R”下拉列表框：指定水平線的對齊方式，包括默認(rèn)、左對齊、居中對齊或右對齊。僅當(dāng)水平線的寬度小于瀏覽器窗口的寬度時，該設(shè)置才適用?！瓣幱啊?指定繪制水平線時是否帶陰影。取消選擇此選項將使用純色繪制水平線。Cla

35、ss（類）:可用于附加樣式表，或者應(yīng)用已附加的樣式表中的類。水平線對應(yīng)的HTML代碼是，在括號中設(shè)置“color”屬性4.2 編輯文本編輯文本操作，可以將網(wǎng)頁中的文本進行各種設(shè)置，使得枯燥的文本更生動。文本格式設(shè)置與使用標(biāo)準(zhǔn)的字處理程序類似。可以為文本塊設(shè)置默認(rèn)格式設(shè)置樣式（段落、標(biāo)題 1、標(biāo)題 2 等）、更改所選文本的字體、大小、顏色和對齊方式，或者應(yīng)用文本樣式（如粗體、斜體、代碼（等寬字體）和下劃線）。設(shè)置文本格式文本的格式主要包括縮進方式、粗/斜體和縮進方式等。應(yīng)用標(biāo)準(zhǔn)格式可以將光標(biāo)定義在段落中，使用“屬性”面板的“格式”下拉列表框，可以應(yīng)用標(biāo)準(zhǔn)文本格式。應(yīng)用標(biāo)準(zhǔn)格式的最小單位是段落，所

36、以無法再同一段落中應(yīng)用不同的標(biāo)準(zhǔn)格式。設(shè)置粗或斜體文本的加粗或傾斜也在“屬性”面板中設(shè)置，單擊“粗體” 或“斜體” 按鈕，可以將所選文字進行加粗或者傾斜，此項設(shè)置最小單位是單個文本，所以在同一段落可以設(shè)置不同的加粗或者傾斜效果。讀者切換到“代碼”視圖可以發(fā)現(xiàn)，此項設(shè)置是將或應(yīng)用于所選文本。3設(shè)置文本縮進設(shè)置文本縮進包括增加縮進和減少縮進。將光標(biāo)移至文檔中需要設(shè)置格式的段落，在“屬性”面板中設(shè)置單擊“文本縮進”按鈕 ，增加該段落的縮進；單擊“文本凸出”按鈕 ，減少段落的縮進。讀者切換到“代碼”視圖可以發(fā)現(xiàn)，此項設(shè)置是將或應(yīng)用于所選文本。設(shè)置列表在網(wǎng)頁中，用戶可以使用很多種方法來排列項目，可以將多

37、種項目沒有順序地排列，也可以為每個項目賦予編號后再進行排列。一般情況下，沒有順序的排列方式稱為無序列表，也叫項目列表；而賦予編號排列的方式被稱為有序列表，也叫編號列表;還可以由用戶自定義列表，不使用項目符號點或數(shù)字這樣的前導(dǎo)字符，并且通常用于詞匯表或說明。列表可以嵌套。嵌套列表是包含其他列表的列表。創(chuàng)建新列表將插入點放置在要添加列表之處，然后執(zhí)行以下某項操作可以實現(xiàn)：在 HTML 屬性檢查器中，單擊“編號列表”或“列表項目”。選擇“插入”面板“HTML”，然后選擇所需的列表類型：“項目列表”、“編號列表”或“列表項”命令。輸入完某一列表項目文本后，回車換行后，在下一行創(chuàng)建該列表下一項文本，可以

38、繼續(xù)輸入，若要結(jié)束該列表，按兩次回車即可。使用現(xiàn)有文本創(chuàng)建列表可以將一系列段落創(chuàng)建為列表。選中若干段落之后，再選擇“插入”面板“HTML”“項目列表”、“編號列表”或“列表項目”即可。創(chuàng)建嵌套列表選擇要嵌套的列表項目，再選擇“編輯”“文本”“縮進”命令或“屬性”面板上的“縮進”按鈕。將縮進文本并創(chuàng)建一個單獨的列表，該列表具有原始列表的 HTML 屬性。設(shè)置整個列表的列表屬性對列表進行屬性設(shè)置，需要該列表至少有一個項目的文字。將插入點放到列表項目的文本中，然后單擊“屬性”面板右下方的“列表項目”按鈕；或右鍵單擊后，在彈出的快捷菜單中選擇“列表”“屬性”；或者在菜單欄選擇“編輯”“列表”“屬性”命

39、令。4.3 圖像的使用圖像是多媒體元素的代表之一，正因為網(wǎng)頁中有了圖像，才使得整個互聯(lián)網(wǎng)豐富多彩。制作精美的圖像可以大大增強網(wǎng)頁的視覺效果。在網(wǎng)頁中插入圖像通常是用于展示具有視覺沖擊力的內(nèi)容、添加交互式設(shè)計元素或者做為圖形界面元素網(wǎng)頁中的圖像格式JPEG（JPG） 大約1670萬種顏色GIF 最多顯示256種顏色 PNG 支持透明背景插入圖像直接插入圖像直接插入圖像時最常用的插入圖像方法。將光標(biāo)移至所需插入圖像的位置。選擇“插入”面板“HTML”“image”命令，打開“選擇圖像源文件”對話框，選中圖像文件后，單擊“確定”按鈕即可。設(shè)置網(wǎng)頁背景圖像通過設(shè)置頁面屬性，可以將某個圖像文件設(shè)置為網(wǎng)頁

40、的背景圖像?！纠?.2】新建一個網(wǎng)頁文檔，設(shè)置頁面背景圖片，并在網(wǎng)頁中插入一個透明的PNG圖像文件。新建網(wǎng)頁文檔，在“屬性”面板單擊“頁面屬性”按鈕。默認(rèn)打開的是“外觀”分類選項，單擊右側(cè)“背景圖像”文本框右側(cè)的“瀏覽”按鈕，彈出“選擇圖像源文件”對話框。選擇要設(shè)置為網(wǎng)頁背景圖像的文件，單擊“確定”按鈕，返回“頁面屬性”對話框。如果要設(shè)置背景圖片重復(fù)的效果，在“頁面屬性”對話框的“重復(fù)”下拉列表框選擇不同的選項。默認(rèn)“重復(fù)”選項是“repeat”選擇“插入”“image”命令，在網(wǎng)頁中插入一個PNG應(yīng)用鼠標(biāo)經(jīng)過圖像鼠標(biāo)經(jīng)過圖像時由原始圖像和鼠標(biāo)經(jīng)過圖像兩個圖像文件組成，功能是當(dāng)鼠標(biāo)經(jīng)過原始圖像

41、上方時，原始圖像變成另一張圖像，因此組成鼠標(biāo)經(jīng)過圖像的兩張圖像一般應(yīng)該是相同大小。如果兩張圖像大小不同，系統(tǒng)會自動按照原始圖像的大小來調(diào)整鼠標(biāo)經(jīng)過圖像。鼠標(biāo)經(jīng)過圖像多用于達到進入某欄目的按鈕。選擇“插入”“HTML”“鼠標(biāo)經(jīng)過圖像”命令，打開“插入鼠標(biāo)經(jīng)過圖像”對話框。4.4 編輯圖像Dreamweaver CC 2018 提供了基本的圖像編輯功能，無需使用外部圖像編輯應(yīng)用程序即可修改圖像。在 Dreamweaver 中對圖像進行重新取樣并裁切、優(yōu)化和銳化圖像，還可以調(diào)整圖像的亮度和對比度。設(shè)置圖像屬性選中圖像后，在“屬性”面板允許設(shè)置圖像的屬性內(nèi)部編輯器Dreamweaver CC 2018

42、集成了Fireworks的基本圖像編輯技術(shù)，可以不用借助外部圖形圖像編輯軟件如 Photoshop等，直接對圖形進行基礎(chǔ)的圖像編輯。選中網(wǎng)頁文檔中的圖像，在“屬性”面板中部，可以看到“編輯”系列按鈕【例4.3】對網(wǎng)頁文件中的圖像執(zhí)行裁切操作。打開包含要裁切的圖像的頁面，選擇圖像，單擊“屬性”面板中的“裁剪”按鈕 ，或者選擇“編輯”“圖像”“裁剪”命令。彈出永久性改變警告，單擊“確定”按鈕。所選圖像周圍會出現(xiàn)裁剪控制柄。調(diào)整裁切控制柄直到邊界框包含的圖像區(qū)域符合所需大小。在邊界框內(nèi)部雙擊或按 Enter 裁切選定內(nèi)容。所選位圖的定界框外的所有像素都將被刪除，但圖像中的其他對象會被保留?！爸匦氯?/p>

43、”按鈕 ：添加或減少已調(diào)整大小的 JPEG 和 GIF 圖像文件的像素，以與原始圖像的外觀盡可能地匹配。對圖像進行重新取樣會減小該圖像的文件大小并提高下載性能。調(diào)整圖像大小時，可以對圖像進行重新取樣，以適應(yīng)其新尺寸。對位圖對象進行重新取樣時，會在圖像中添加或刪除像素，以使其變大或變小。對圖像進行重新取樣以取得更高的分辨率一般不會導(dǎo)致品質(zhì)下降。但重新取樣以取得較低的分辨率總會導(dǎo)致數(shù)據(jù)丟失，并且通常會使品質(zhì)下降。“亮度和對比度”按鈕 ：可以修改圖像中像素的對比度或亮度。亮度和對比度會影響圖像的高亮、陰影和中間色調(diào)。修正過暗或過亮的圖像時通常使用“亮度/對比度”?！颁J化”按鈕 ：可以通過增加圖像中邊

44、緣的對比度調(diào)整圖像的焦點。掃描圖像或拍攝數(shù)碼照片時，大多數(shù)圖像捕獲軟件的默認(rèn)操作是柔化圖像中各對象的邊緣。這樣掃描可以防止特別精細(xì)的細(xì)節(jié)從組成數(shù)碼圖像的像素中丟失。不過，要顯示數(shù)字圖像文件中的細(xì)節(jié)，往往需要銳化圖像。使用“銳化”選項會增加邊緣對比度，使圖像更加清晰。HTML 中的文本與圖像 HTML中的標(biāo)題HTML中的標(biāo)題（Heading）是通過 - 標(biāo)簽進行定義的。定義最大的標(biāo)題。定義最小的標(biāo)題。在進行網(wǎng)頁設(shè)計時，不要僅僅是為了生成粗體或大號的文本而使用標(biāo)題，請注意將 HTML 標(biāo)題標(biāo)簽只用于標(biāo)題。因為搜索引擎使用標(biāo)題為網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引，而且用戶可以通過標(biāo)題來快速瀏覽網(wǎng)頁，所以用標(biāo)題

45、來呈現(xiàn)文檔結(jié)構(gòu)很重要。注意應(yīng)該將 h1 用作主標(biāo)題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。HTML中的注釋可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。注釋寫法如下: 合理地使用注釋可以對未來的代碼編輯工作產(chǎn)生幫助。HTML中的段落HTML 可以將文檔分割為若干段落。段落是通過標(biāo)簽定義的。瀏覽器會自動地在段落的前后添加空行。但不要依賴這種做法。忘記使用結(jié)束標(biāo)簽會產(chǎn)生意想不到的結(jié)果和錯誤。如果您希望在不產(chǎn)生一個新段落的情況下進行換行（新行），請使用標(biāo)簽。HTML 格式化標(biāo)簽HTML 使用標(biāo)簽(bold) 與

46、(italic) 對輸出的文本進行格式, 如：粗體或斜體。這些HTML標(biāo)簽被稱為格式化標(biāo)簽HTML中的圖像在 HTML 中，圖像由標(biāo)簽定義。是空標(biāo)簽，它只包含屬性，并且沒有閉合標(biāo)簽。要在頁面上顯示圖像，需要使用源屬性（src）。src 指 source。源屬性的值是圖像的 URL 地址。4.6 上機練習(xí)本章的上機練習(xí)主要是在上一章節(jié)完成網(wǎng)頁布局的基礎(chǔ)上，插入文本和圖像，制作一個基本網(wǎng)頁，并應(yīng)用鼠標(biāo)經(jīng)過圖像制作相關(guān)目錄的進入按鈕。對于其他內(nèi)容，讀者可以根據(jù)相應(yīng)內(nèi)容和例題進行練習(xí)?！纠?.4】在上一章節(jié)例3.4所完成布局的網(wǎng)頁文件index的基礎(chǔ)上，制作網(wǎng)站主頁。Web前端設(shè)計與開發(fā)技術(shù)（HTML

47、+CSS+JavaScript）江西農(nóng)業(yè)大學(xué)計算機與信息工程學(xué)院主講人： 第5章 精美內(nèi)容網(wǎng)頁的制作5.15.2網(wǎng)頁復(fù)用自制導(dǎo)航條插入FLASH動畫插入HTML5 Video和HTML5 Audio插入插件背景音樂滾動條上機練習(xí)主頁制作完之后，快速的制作內(nèi)容網(wǎng)頁，學(xué)會網(wǎng)頁復(fù)用，提高制作內(nèi)容網(wǎng)頁的效率。除此之外，網(wǎng)頁內(nèi)容還可以加入Flash動畫、音樂、Java Applet等動態(tài)元素和網(wǎng)頁特效，可以使網(wǎng)頁更具動感效果、讓網(wǎng)頁更加精美。本章主要介紹Dreamweaver CC 2018如何插入多媒體元素來設(shè)計精美內(nèi)容網(wǎng)頁；另外還要求讀者掌握重復(fù)使用網(wǎng)頁部分內(nèi)容，

48、從而提高內(nèi)容網(wǎng)頁的制作效率。學(xué)習(xí)目標(biāo)網(wǎng)頁復(fù)用 自制導(dǎo)航條在網(wǎng)頁插入Flash動畫 插入其他媒體文件插入聲音文件 應(yīng)用網(wǎng)頁特效5.1網(wǎng)頁復(fù)用一般來說網(wǎng)站的主頁和內(nèi)容網(wǎng)頁，或者內(nèi)容網(wǎng)頁和目錄的主網(wǎng)頁之間總有一些地方是幾乎不會變化的。那么那些幾乎不會變化的部分就可以重復(fù)使用，提高制作內(nèi)容網(wǎng)頁的效率。【例5.1】在已有主頁的基礎(chǔ)上，利用復(fù)用思維，創(chuàng)建內(nèi)容網(wǎng)頁。進入站點，打開已有主頁index.html文件。通過觀察發(fā)現(xiàn)，網(wǎng)頁最上方和最下方的內(nèi)容在其他內(nèi)容網(wǎng)頁需要保留。將不需要的內(nèi)容刪除，選擇“文件”“另存為”命令。為其取名“RGB01”，然后單擊“保存”按鈕。此時，布局表格的最外層還在。適當(dāng)調(diào)整表格各

49、行的高度，進行內(nèi)容網(wǎng)頁布局。第二行用于放置整個網(wǎng)站的目錄結(jié)構(gòu)，也就是后續(xù)小節(jié)的自制導(dǎo)航條；第三行用于放置明確本頁面所在網(wǎng)站的位置；第四行為頁面的主體內(nèi)容區(qū)域。分別在網(wǎng)頁位置和主體內(nèi)容區(qū)域插入相應(yīng)表格、文本、圖像后，就可以快速得到一個內(nèi)容網(wǎng)頁的初稿。5.2自制導(dǎo)航條Dreamweaver CC 2018取消了導(dǎo)航條功能，但是在網(wǎng)站設(shè)計的工作中，發(fā)現(xiàn)網(wǎng)站中的所有網(wǎng)頁中都應(yīng)該有一個像圖書目錄一樣部分，用于全面了解網(wǎng)站目錄結(jié)構(gòu)，也方便快速跳轉(zhuǎn)到所需的頁面。因此，本書單列此小節(jié)，以保證網(wǎng)站使用的方便快捷。文本導(dǎo)航條導(dǎo)航條可以使用文本制作的一個目錄，再加上后續(xù)超鏈接章節(jié)的內(nèi)容就可以方便的實現(xiàn)跳轉(zhuǎn)功能?！纠?/p>

50、5.2】為例5.1制作的RGB01.html文件制作文本導(dǎo)航條。打開RGB01.html網(wǎng)頁文件，在預(yù)留做導(dǎo)航條的空白單元格插入表格。表格的行列根據(jù)網(wǎng)站目錄結(jié)構(gòu)設(shè)置，此處插入2行6列的表格。選擇“插入”“Table”命令，彈出“Talbe”對話框，設(shè)置設(shè)置“行數(shù)”為“2”，“列”為“6”，“表格寬度”為“100%”，“邊框粗細(xì)”為“0”，“單元格邊距”為“0”，“單元格間距”為“0” 。調(diào)整外層單元格的高度，與所插入表格匹配。分別在各個單元格輸入網(wǎng)站規(guī)劃時設(shè)定的目錄名稱，并設(shè)置為“粗體” 。在學(xué)習(xí)后續(xù)章節(jié)超鏈接知識之后，就可以真正實現(xiàn)導(dǎo)航功能。圖像導(dǎo)航條可以利用文本創(chuàng)建導(dǎo)航條，在事先準(zhǔn)備好圖像

51、文件的前提下也可以用圖像文件或鼠標(biāo)經(jīng)過圖像創(chuàng)建導(dǎo)航條?！纠?.3】為某欄目創(chuàng)建該欄目的圖像導(dǎo)航條。參照上一小節(jié)的方法，刪除主體內(nèi)容，將網(wǎng)頁位置修改為“第七章紅色系”，上方表格中的文本導(dǎo)航暫時不變。將空白區(qū)域的一個大單元格拆分成兩列，左側(cè)1列用于豎排若干導(dǎo)航圖像，右側(cè)1列則為主體內(nèi)容區(qū)域。此目錄下，預(yù)計有8個頁面，因此，左側(cè)單元格內(nèi)，嵌套一個9行1列的表格，第1行用于留白，其他8行用于安排豎向?qū)Ш綏l。展開右側(cè)的“文件”面板，在“本地文件”欄目下找到“red”文件夾，雙擊展開，再進入“images”文件夾，可以看到事先準(zhǔn)備好的導(dǎo)航圖像正在其中?？梢詫ⅰ氨镜匚募敝械膱D像文件圖標(biāo)直接拖放到對應(yīng)的單元

52、格中，完成插入圖像文件的操作。選中圖像文件所在的整列表格，修改“水平”屬性為“居中對齊”。到此為止，本欄目的圖像導(dǎo)航條的制作完畢5.2 插入Flash動畫Flash 動畫是網(wǎng)頁上最流行的動畫格式。Flash動畫也是最常用的多媒體插件之一，它將聲音、圖像和動畫等內(nèi)容加入到一個文件中，并能制作較好的動畫效果，同時使用了優(yōu)化的算法將多媒體數(shù)據(jù)進行壓縮，是文件變得很小，因此非常適合在網(wǎng)上傳播。認(rèn)識Flash文件FLA 文件 (.fla) 是Flash的源文件，使用 Flash 創(chuàng)作工具創(chuàng)建。只能在 Flash 中打開。需要時，可以在 Flash 中打開 FLA 文件，然后將它發(fā)布為 SWF 或 SWT

53、 文件以在瀏覽器中使用。SWF 文件 (.swf) SWF 文件是FLA (.fla) 文件的編譯版本，已進行優(yōu)化，可以在 Web 上查看。SWF文件可以在瀏覽器中播放并且可以在 Dreamweaver 中進行預(yù)覽，但不能在 Flash 中編輯此文件。FLV 文件 (.flv) FLV 文件是一種視頻文件，它包含經(jīng)過編碼的音頻和視頻數(shù)據(jù)，用于通過 Flash Player 進行傳送。例如，如果具有 QuickTime 或 Windows Media 視頻文件，可以使用編碼器將該視頻文件轉(zhuǎn)換為 FLV 文件。插入SWF 文件在“文檔”窗口的“設(shè)計”視圖中，將插入點放置在要插入內(nèi)容的位置，選擇“插

54、入”“HTML”“Flash SWF”命令。在彈出的“選擇SWF”對話框中，選擇一個 SWF 文件 (.swf)，并單擊“確定”按鈕。將在“文檔”窗口中顯示一個 SWF 文件占位符。按F12預(yù)覽該網(wǎng)頁，在彈出確認(rèn)保存網(wǎng)頁文件的警告框之后，還會彈出“復(fù)制相關(guān)文件”對話框，Dreamweaver CC 2018提示正在將兩個相關(guān)文件（expressInstall.swf 和 swfobject_modified.js）保存到站點中的 Scripts 文件夾。在將 SWF 文件上傳到 Web 服務(wù)器時，不要忘記上傳這些文件，否則瀏覽器無法正確顯示 SWF 文件。設(shè)置 SWF 文件屬性在Dreamwe

55、aver CC 2018中可以使用“屬性”面板設(shè)置 SWF 文件的屬性。這些屬性也適用于 Shockwave 影片。選擇一個 SWF 文件或 Shockwave 影片，然后在“屬性”面板中設(shè)置選項。Flash Video視頻Flash VIdeo視頻并不是Flash動畫，它的出現(xiàn)是為了解決Flash以前對連續(xù)視頻只能使用JPEG圖像進行幀內(nèi)壓縮，并且壓縮效率低，文件很大，不適合視頻存儲的弊端。Flash VIdeo視頻采用幀間壓縮的方法，可以有效地縮小文件大小，并保證視頻的質(zhì)量。在Dreamweaver中選擇“插入”“HTML”“Flash Video”命令，彈出“插入FLV”對話框?！纠?.

56、4】新建一個網(wǎng)頁文件，在合適的位置插入FLV視頻文件。新建一個空白網(wǎng)頁文件。選擇“插入”“HTML”“Flash Video”命令，在彈出的“插入FLV”對話框中選擇文件。在“文檔”窗口可以看到FLV文件標(biāo)記。5.3插入 HTML5 Video和HTML5 Audio允許在網(wǎng)頁中插入 HTML5 視頻Video和HTML5 Audio，以使用戶能夠在瀏覽器中播放視頻和音頻文件，而無需使用外部增效工具或播放器。插入 HTML5 VideoHTML5 視頻元素提供一種將電影或視頻嵌入網(wǎng)頁中的標(biāo)準(zhǔn)方式。選擇“插入”“HTML”“HTML5 Video”。HTML5 視頻元素將會插入指定位置。雖然可以

57、在網(wǎng)頁中嵌入任何視頻，但“實時”視圖并非始終呈現(xiàn)所有視頻，往往只顯示一個HTML5 Video圖標(biāo)。Dreamweaver CC 2018使用 Apple QuickTime 增效工具來支持音頻和視頻標(biāo)簽。在 Windows 中，如果已安裝 Apple QuickTime 插件，網(wǎng)頁會呈現(xiàn)媒體播放器和媒體內(nèi)容；否則不會呈現(xiàn)媒體內(nèi)容。插入 HTML5 AudioHTML5 音頻元素提供一種將音頻內(nèi)容嵌入網(wǎng)頁中的標(biāo)準(zhǔn)方式。選擇“插入”“HTML”“HTML5 Audio”。音頻文件將會插入到指定位置，此時，“文檔”窗口出現(xiàn)音頻文件圖標(biāo)。5.4 插入插件現(xiàn)在瀏覽器支持的多媒體文件越來越多，文件也越來

58、越小，但是表現(xiàn)的效果卻一點也不遜色以前。允許在網(wǎng)頁中通過插入插件的方式嵌入音頻和視頻。網(wǎng)頁中的音頻格式MP3格式 最大的特點就是能以較小的比特率，較大的壓縮比達到近科完美的CD音質(zhì)。WAV格式 具有較好的聲音品質(zhì)，許多瀏覽器都支持此格式，并且不要求安裝插件。AIF格式 AIF格式的音頻文件也具有較好的聲音品質(zhì)，容量通常較大。MIDI格式 這種格式一般用于器樂類的音頻文件。.ra、.ram、.rpm或Real Audio具有非常高的壓縮比，文件大小比MP3小。歌曲文件可以在合理的時間范圍內(nèi)下載。必須下載并安裝RealPlayer軟件才能播放。插入音頻要在網(wǎng)頁中加入聲音，選擇“插入”“HTML”“

59、插件”命令，彈出“選擇文件”對話框，選中要插入的音頻文件，單擊“確定”按鈕即可。在“文檔”窗口的“設(shè)計”視圖，只能看到插件圖標(biāo)，并不會顯示播放聲音的狀態(tài)。只有在實時預(yù)覽時才能看到播放器。插件的默認(rèn)“寬”和“高”的值均為“32”。因此，在實時預(yù)覽只能看到播放器的部分，那么需要對插件修改大小，以便網(wǎng)頁中能完整顯示播放器。修改插件大小可以直接用鼠標(biāo)拖放插件的定位標(biāo)尺，也可以在“屬性”面板設(shè)置“寬”和“高”屬性的值為合適大小。1AVI格式2MOV格式（QuickTime）3MPEG/MPG/DAT格式4RM(Real Media)格式5ASF(Advanced Streaming Format)格式網(wǎng)

60、頁中的視頻格式插入視頻選擇“插入”“HTML”“插件”命令，彈出“選擇文件”對話框，選中要插入的視頻文件，單擊“確定”按鈕即可。在“文檔”窗口的“設(shè)計”視圖，只能看到默認(rèn)32*32像素大小的插件圖標(biāo)，因此必須拖放插件大小，以便完整播放視頻的需要。5.5 背景音樂插件隱身設(shè)置背景音樂在標(biāo)簽后輸入“”, 在下拉列表中選擇“bgsound”標(biāo)簽5.6滾動條插入滾動條這里是滾動條【例5.5】新建一個網(wǎng)頁文件，在文檔中插入一張圖片，并使圖片滾動起來。新建一個網(wǎng)頁文件，在文檔中插入一張圖片。選擇“查看”“代碼”命令，切換到“代碼”視圖。找到其中的標(biāo)簽，在標(biāo)簽前面和后面分別加入和，如圖5.35所示。5.7上