項目一

電子商務網站的規(guī)劃與設計1學習任務1?電子商務網站結構設計學習任務2?電子商務網站版面設計ONTENTSC目錄2

電子商務網站結構設計013知識目標1.?熟悉電子商務網站建設流程。2.?了解電子商務網站類型。3.?掌握網站物理結構、目錄結構和邏輯鏈接結構。技能目標1.?能夠全面收集客戶信息，精準分析客戶需求。2.?能夠根據客戶需求，設計出既實用又符合用戶期望的網站結構。

4

某鮮花店為拓展業(yè)務，決定創(chuàng)建“網上花店”網站，借助電子商務模式，提供網上鮮花銷售、快遞配送及訂單管理等一站式服務，以期促進鮮花市場的進一步發(fā)展。本任務，我們將圍繞行業(yè)特性、企業(yè)狀況、市場態(tài)勢及客戶需求進行深入分析，充分挖掘“網上花店”網站所需功能，并對其進行合理規(guī)劃與科學設計。5一、電子商務網站建設流程構建一個成功的電子商務網站并非易事，需要深思熟慮的規(guī)劃和細致入微的建設過程。從深入的需求分析、精心的規(guī)劃設計，到嚴謹?shù)拈_發(fā)建設，再到最終的測試上線以及后續(xù)的運營維護，每一個環(huán)節(jié)都至關重要。電子商務網站建設流程如下圖所示。6電子商務網站建設流程1.?需求分析首先要明確電子商務網站的具體需求，包括網站應具備的功能、頁面設計風格、整體架構以及系統(tǒng)性能要求等。同時，進行深入的市場調研和競爭對手分析也是不可或缺的環(huán)節(jié)，這可以確保網站不僅滿足用戶需求，還能在激烈的市場競爭中脫穎而出。2.?規(guī)劃設計在深入分析需求后，應根據所得結論來制定網站的整體規(guī)劃和詳細設計方案。這一過程涉及創(chuàng)建原型圖、草圖等多種設計初稿，為網站的具體構建提供明確指導。73.?開發(fā)建設進入開發(fā)階段，就要進行細致的編碼工作。在此過程中，要選擇最適合項目需求的技術工具，精心編寫程序代碼，從而確保電子商務網站的每一個功能和模塊都能按照設計要求完美實現(xiàn)。4.測試上線在網站開發(fā)完成后，需要進行一系列嚴格的測試，包括功能測試、兼容性測試以及性能測試等，旨在確保網站的穩(wěn)定性和可靠性，以期在上線后能夠無故障運行。895.運營維護網站正式上線后，需要進行日常的運營管理和維護工作，包括發(fā)布新聞、定期更新產品、及時處理用戶訂單等任務。同時，也要重視網站的安全問題，采取有效措施來防范黑客攻擊，確保網站數(shù)據的安全。二、電子商務網站類型根據電子商務平臺的不同經營性質，可以將其劃分為多種類型。具體來說，按照交易主體的不同，可以將電子商務平臺劃分為六種類型，分別是B2B（企業(yè)對企業(yè)）、B2C（企業(yè)對消費者）、C2C（消費者對消費者）、O2O（線上到線下）、B2G（企業(yè)對政府）以及C2G（消費者對政府）。目前B2B、B2C和C2C是市場上主流的電子商務網站類型。10111.?B2B（Business-to-Business）類型B2B即企業(yè)對企業(yè)的電子商務模式，專為企業(yè)間網上交易設計。它不僅提供供求信息服務和附加信息服務，還包括與交易相關的配套服務，并具備客戶管理功能。這一模式主要依托互聯(lián)網進行產品、信息和服務的交流與交易。通過這類網站，企業(yè)可以發(fā)布信息、查詢所需內容、展示產品以及進行廣告宣傳。它為企業(yè)提供了一個平臺，使他們能夠直接促成大規(guī)模交易。此外，企業(yè)間還能通過網絡進行協(xié)商，簽署電子合同，并完成在線交易。阿里巴巴網是B2B模式的代表，其首頁如下圖所示。12阿里巴巴網2.?B2C（Business-to-Customer）類型B2C即企業(yè)對消費者的電子商務模式，是企業(yè)直接向消費者銷售產品和提供服務的商業(yè)零售方式。在此模式下，企業(yè)為普通消費者提供一系列在線功能，包括商品查詢、商品展示、商品瀏覽、信息發(fā)布、用戶登錄以及前臺購物等。通過這些功能，商家和消費者能夠順利完成各類商品交易。當當網是B2C模式的代表，其首頁如下圖所示。1314

當當網153.?C2C（Customer-to-Customer）C2C即個人對個人的電子商務模式。在這種模式下，電子商務平臺提供在線交易的市場，賣方可以在平臺上發(fā)布商品信息并由平臺展示，買方則可以瀏覽并選擇自己所需的商品進行競價或直接購買。簡而言之，這是一個允許個人之間進行商品交易的平臺。拍拍網是C2C模式的代表，其首頁如下圖所示。16拍拍網三、客戶信息收集1.?企業(yè)自身信息需要了解企業(yè)建立網站的動因，比如是為了塑造企業(yè)形象、推廣產品、開展電子商務交易，還是旨在打造行業(yè)性質的交流平臺；同時，還需了解這是否是企業(yè)發(fā)展的基本需求，抑或是為了市場進一步開拓的策略延伸；此外，還需要了解企業(yè)概況，如企業(yè)的組織結構、銷售模式、當前的信息化程度、對設計的特定要求，以及產品的獨特性等。172.?市場信息需要掌握當前行業(yè)的整體狀況，深入了解競爭對手的網站設計及其策劃理念，具備哪些功能以及這些功能在實際運營中的作用。3.?目標客戶信息充分了解目標客戶信息，包括他們的年齡層、性別比例、學歷分布、職業(yè)特點、個性特征、行為習慣、興趣偏好、收入水平，以及他們所處的地理位置等詳細信息。這些數(shù)據將為網站的精準定位和個性化服務提供有力支持。18四、客戶需求分析通過深入分析前期收集的客戶信息，我們可以明確客戶建立網站的具體目的，即其業(yè)務需求，以及客戶期望網站能夠實現(xiàn)的功能和包含的模塊。除此之外，我們還會進一步了解客戶的其他特殊要求。需求分析的主要內容如圖所示。19需求分析的主要內容1.?業(yè)務需求業(yè)務需求是指在開展項目或解決問題之前，對業(yè)務方面提出的需求進行深入研究和細致分析的過程。其分析結果對于指導網站的設計、開發(fā)以及其他后續(xù)活動具有重要的指導意義。2.?功能需求功能需求分析則是對用戶的需求進行深入挖掘和理解，從而明確在網站開發(fā)過程中前臺和后臺應具備的功能。203.?非功能需求非功能需求是指那些不直接關聯(lián)網站具體功能的需求，但它們對網站的總體特性有著重要影響，如網站的安全性、響應時間等。4.?接口需求接口需求則主要關注數(shù)據傳輸?shù)念愋?、格式、傳輸協(xié)議以及交互方式等，以確保各個模塊之間能夠實現(xiàn)準確高效的數(shù)據交換。21五、網站物理結構1.?網站物理結構的概念網站物理結構，即網站的實際存儲結構，它反映了網站目錄及所包含文件的真實存放位置。簡而言之，物理結構就是網站的實際目錄結構，它揭示了文件在服務器上的物理地址。一般來說，只有靜態(tài)網站才具有明確的物理結構，而動態(tài)網站或偽靜態(tài)網站則不具有物理結構。22232.?網站物理結構的類型網站物理結構主要分為扁平式物理結構和樹形物理結構兩種。（1）扁平式物理結構扁平式物理結構見下圖主要適用于小型網站。若大型網站采用此結構，并將大量網頁文件直接置于根目錄下，將會導致文件查找和維護變得異常煩瑣。這種結構的優(yōu)勢在于其清晰性和簡潔性，對于搜索引擎優(yōu)化極為有利。

扁平式物理結構24（2）樹形物理結構對于規(guī)模較大的網站，通常需要采用兩至三層甚至更多層級的子目錄來確保網頁能夠正常存儲。這種多層級的目錄結構被稱為樹形物理結構，其特點是在根目錄下進一步細分為多個頻道或子目錄。在每個子目錄下，再存儲與該目錄相關的內容或商品網頁如下圖所示，這種結構有助于更好地組織和管理大量的網頁內容。

樹形物理結構25六、網站目錄結構1.?

網站目錄結構的概念網站目錄結構指的是在建立網站時所設置的文件目錄。盡管目錄的質量對瀏覽者沒有直接影響，但對于網站管理者而言卻至關重要。它直接關系到站點的維護管理、后期的修改以及遷移等工作的便利性和效率。下表展示了網上商城的典型目錄結構。26網上商城的典型目錄結構272.?網站目錄的建立原則（1）避免將所有文件都存放在根目錄下將所有文件都存放在根目錄下會導致文件管理混亂，降低工作效率，同時上傳速度也會受影響。（2）根據主菜單欄目建立子目錄根據主菜單欄目建立子目錄，不僅方便文件查找，還有利于網站的高效運行。（3）根據更新頻率管理次要欄目對于不需要頻繁更新的欄目，應獨立設置子目錄，以便于管理和維護。28（4）各目錄下設立獨立的圖片文件夾在網站維護過程中，圖片管理往往較為復雜。建議在每個物理或邏輯目錄下都創(chuàng)建一個獨立的圖片（image）文件夾。（5）控制目錄的層級深度為了簡化管理和維護工作，同時確保搜索引擎能夠輕松檢索網站內容，從而有利于網站的推廣和優(yōu)化，應避免創(chuàng)建過深的目錄結構。（6）避免使用中文命名目錄使用中文命名目錄容易導致各種問題。建議使用英文命名目錄。29七、網站邏輯鏈接結構1.?網站邏輯鏈接結構的概念網站邏輯鏈接結構，也稱鏈接結構，主要指的是網站頁面之間相互鏈接的關系。與物理結構不同，邏輯鏈接結構是由網站頁面之間的相互鏈接關系所決定的，而物理結構則取決于網站頁面的實際存儲位置。302.?網站邏輯鏈接結構的基本形式（1）樹狀鏈接結構（一對一）在樹狀鏈接結構中，用戶瀏覽頁面時需逐級深入，同樣也需要逐級返回，其結構如圖所示。這種結構的優(yōu)點在于其條理性強，訪問者能夠清晰地知道自己的當前位置，從而避免“迷路”的情況；其缺點在于瀏覽效率相對較低。

樹狀鏈接結構31（2）星狀鏈接結構（一對多）在每個網頁中設置一個共享的鏈接中樞，確保所有網頁都能通過這個中樞相互鏈接。在這樣的設計中，各個網頁之間沒有明顯的層級劃分，如下圖所示。這種布局提供了靈活的導航方式，使得用戶可以輕松地在不同頁面之間跳轉。

星狀鏈接結構電子商務網站版面設計0232知識目標1.?了解網頁構成、網站風格、網頁結構的類型。2.?掌握電子商務網站頁面構成。3.?熟悉網站頁面色彩搭配。技能目標能夠根據需要合理地設計網站風格、頁面布局和色彩搭配。3334

網頁的版面設計和色彩運用對于網站的功能性和視覺吸引力具有直接的影響。在此任務中，我們要根據“網上花店”的具體功能來明確網站的整體風格，并據此確定首頁、商品列表頁以及商品詳情頁的布局結構和色彩配置。這些設計既要滿足電子商務網站標準，又要兼具美觀與實用性。參考效果如下圖所示。35商品列表頁效果

首頁效果

36商品詳情頁效果一、網頁構成網頁融合了多樣元素，包括文本、圖像、音頻和視頻等。文本，作為網頁信息的核心傳遞者，其設計必須清晰易讀，同時與網頁的整體風格和布局和諧相融。圖像，包括照片、圖標以及圖表，是網頁中不可或缺的視覺元素。它們不僅需要與網頁的主題和內容緊密相連，還需要兼顧加載速度，以確保網頁性能的優(yōu)化。隨著多媒體技術的進步，視頻和音頻元素在網頁中的應用愈發(fā)普及，它們以更直觀、生動的方式呈現(xiàn)內容，有效吸引并維持用戶的注意力。37二、網站風格網站的外觀、內容和文字等方面共同塑造了其獨特風格。這種風格可能體現(xiàn)在色彩運用、技術應用或交互方式上，使得瀏覽者能夠清晰地識別出這是該網站的獨特標志。根據風格與功能的不同，網站可以大致分為功能型網站和展示型網站兩大類。功能型網站是指那些為實現(xiàn)特定功能或提供專門服務而設計的網站。展示型網站主要是指以展示企業(yè)產品與服務為主要功能的網站。它們通常包含企業(yè)產品與服務介紹、企業(yè)概況、企業(yè)文化闡釋、企業(yè)榮譽與資質展示等內容。38三、網頁結構的類型1.?“國”字型布局“國”字型布局的典型特征為在頁面頂端設置logo（標志）、導航欄以及橫幅廣告。緊接著的下方區(qū)域是網站的主體內容，該部分常被分為左側、中間和右側三個主要區(qū)塊見下圖。頁面底部則用來展示網站的基本信息、聯(lián)系方式、版權聲明等內容。這種布局結構常見于大型網站，便于系統(tǒng)地羅列和展示大量的信息與產品。3940“國”字型布局2.?拐角型布局拐角型布局與“國”字型布局在整體構思上較為相似，僅在細節(jié)表現(xiàn)上略有差異在頁面上方，同樣醒目地展示logo、導航欄和橫幅廣告。頁面中間部分采用左右分欄設計，其中左側設置一列相對較窄的菜單或快捷鏈接，右側則是較為寬敞的內容展示區(qū)域見下圖所示。頁面底部依舊展示網站的輔助性信息和版權聲明等內容。這種布局方式因其靈活性和實用性，也被廣泛采用。4142拐角型布局3.?左右框架型布局左右框架型布局的頁面設計，其典型特征是在頁面左側設置一列清晰的文字鏈接，便于用戶快速導航。在這一列的頂部，通常會放置主導航欄，以便用戶輕松跳轉到網站的不同部分。有時，還會在導航欄上方添加醒目的標題或logo，以增強品牌識別度。頁面右側則主要用于展示正文內容或網站的主體信息見下圖所示。這種布局方式因其能夠提供良好的用戶體驗和便捷的導航功能，在論壇設計中尤為常見。4344

左右框架型布局4.?上下框架型布局上下框架型布局與左右框架型布局在結構上相似，主要區(qū)別在于元素排列的方向。在上下框架型布局中，文字鏈接被置于頁面上方，這樣的設計便于用戶一眼就能找到所需導航。頁面下方則主要用于展示正文內容和網站主體信息見下圖所示。這種布局為用戶提供了直觀且高效的瀏覽體驗。4546上下框架型布局5.

標題文本型布局標題文本型布局方式，其設計理念與雜志排版風格頗為相似。在這種布局中，頁面最上方醒目地展示標題或類似的引導性元素，緊接著的中間部分則是翔實的正文內容見下圖所示。頁面最下方通常會設置一些版底信息，如聯(lián)系方式、版權聲明等。這種布局方式由于能夠清晰地引導用戶關注核心內容，并提供必要的輔助信息，常見于搜索引擎類網站和注冊頁面。4748

標題文本型布局6.?封面型布局封面型布局的頁面，其特色在于直接采用富有設計感的圖像或動畫作為醒目的網頁背景。頁面上通常僅配置一個簡潔的“進入”按鈕，該按鈕即為頁面的全部內容。這種布局風格極具開放性和自由度，若能巧妙運用，將為用戶帶來極致的視覺享受，如下圖所示。4950封面型布局四、電子商務網站頁面分類1.?首頁首頁是展示最新、最熱門信息的窗口，它集中了網站的所有核心賣點。同時，首頁還承擔著引導用戶通過導航菜單訪問網站其他欄目的重要任務。在首頁的頂部中央位置，通常會設置主導航菜單，這樣的設計便于用戶快速、便捷地進入他們感興趣的列表頁面，見下圖所示5152華為商城首頁2.?商品列表頁商品列表頁是一個集中展示多款產品的聚合頁面。用戶可以通過在首頁主導航中點擊相應的導航菜單項，輕松進入商品列表頁。該頁面根據網站的整體定位，對提供給用戶的內容進行了細致的分類和整合。每一個列表頁都有其獨特的定位，同時，它們都服務于網站的核心定位。在這樣的頁面上，商品按照不同的系列進行展示，內容通常按時間順序排列，方便用戶便捷地查找更多同類信息，具體頁面見下圖所示。5354

華為商城商品列表頁3.?商品詳情頁商品詳情頁，又稱商品展示頁，是用戶獲取特定商品詳細信息并作出購買決策的關鍵頁面。它必須提供詳盡、清晰的商品信息，包括購買選項和用戶交互功能。當用戶從商品列表頁點擊某個具體商品時，就會進入該商品詳情頁。一個完善的商品詳情頁應包含以下元素：商品名稱、高質量的商品圖片、詳細的商品介紹、具體的規(guī)格參數(shù)、明確的價格標注、售賣店鋪的信息、用戶評價以及精選的視頻和圖片資料等，具體頁面可參考下圖。5556華為商城商品詳情頁五、頁面色彩搭配在設計網頁時，色彩搭配至關重要。恰當?shù)纳式M合能夠迅速且有效地向訪問者傳達網站的核心理念，而不恰當?shù)拇钆鋭t可能對網站的瀏覽量造成負面影響。571.?顏色傳達的信息顏色傳達的信息見下表。58

顏色傳達的信息2.?網頁色彩搭配的關鍵點（1）巧妙運用單色雖然網站設計時應避免單調，但單色可通過調整其飽和度和透明度來創(chuàng)造豐富的層次，使網站既簡潔又不失變化。（2）利用鄰近色鄰近色指的是色輪上相鄰的色彩，如綠色與藍色、紅色與橙色。采用鄰近色進行設計，不僅可避免網頁色彩過于雜亂，還能實現(xiàn)頁面的和諧與統(tǒng)一。59（3）合理運用對比色對比色能顯著突出重點，產生強烈的視覺沖擊。在設計時，通常以一種顏色為主色調，對比色則作為點綴，這樣既能凸顯網站特色，又能起到畫龍點睛的效果。（4）黑色的巧妙運用黑色是一種獨特且強大的色彩，當它被恰當?shù)剡\用并融入合理的設計中時，能夠營造出令人震撼的藝術效果。特別是當黑色作為背景色，與其他鮮艷的色彩搭配時，會給用戶帶來深刻的視覺沖擊。6061（5）網頁配色時的關鍵提醒1）為了避免給用戶帶來視覺混亂，在同一頁面中應限制色彩的使用數(shù)量。盡量將使用的顏色控制在三種以內，以保持頁面的整潔與清晰。2）背景和前景內容的對比度應足夠大，以突出頁面的核心內容。避免使用過于復雜的圖案或純度極高的色彩作為背景，以確保內容的可讀性。項目二網頁開發(fā)工具的使用學習任務1Dreamweaver?CC的啟動與退出學習任務2Dreamweaver?CC的工作界面ONTENTSC目錄63Dreamweaver?CC的啟動與退出0164知識目標1.?了解網頁開發(fā)工具。2.?熟悉Dreamweaver?CC的功能。技能目標1.?能夠正確啟動Dreamweaver?CC軟件。2.?能夠正確退出Dreamweaver?CC軟件。

65為機房內的計算機安裝授課必備的軟件——Dreamweaver?CC。安裝后需要打開軟件進行檢查，確保軟件能夠正常使用后退出。66一、網頁開發(fā)工具目前市場上有多款流行的網頁開發(fā)工具，

其中的代碼編輯器包括VSCode、Sublime?Text、WebStorm、HBuilder、Notepad++以及Dreamweaver等。VSCode是一款專為現(xiàn)代Web和云應用開發(fā)設計的跨平臺源代碼編輯器，可在Mac?OS?X、Windows和Linux上流暢運行。Sublime?Text是一款功能強大的文本編輯器。其最初的設計理念是打造一個擴展性強的類似Vim的編輯器。67WebStorm是一款JavaScript開發(fā)工具，它與IntelliJ?IDEA共享同源技術，并繼承了IntelliJ?IDEA在JavaScript開發(fā)方面的強大功能。HBuilder是一款專為HTML5設計的Web開發(fā)集成開發(fā)環(huán)境（IDE）。Notepad++是一款特色鮮明的自由軟件純文本編輯器，提供了完整的中文化界面和多國語言支持。它不僅適合用于編寫簡單的文本文件，也非常適合作為編程編輯器使用。Dreamweaver是Adobe公司推出的一款兼具網頁制作和網站管理功能的網頁編輯軟件。這款軟件是專為專業(yè)網頁設計人員打造的視覺化開發(fā)工具，能讓用戶輕松制作出跨平臺、跨瀏覽器且動態(tài)十足的網頁。68二、DreamweaverCC簡介Dreamweaver?CC引入了眾多新功能和增強功能，包括網頁元素快速檢查、實時檢查中的全新編輯功能、CSS設計工具的顯著增強、實時插入功能、支持SFTP連線時使用身份文件、還原/重做功能的優(yōu)化，以及Business?Catalyst和PhoneGap?Build工作流程的改進等。此外，用戶還能體驗到訪問Dreamweaver擴展功能的新方式、同步設置功能，以及直接發(fā)送錯誤報告或功能要求等便捷操作。同時，幫助中心和幫助菜單也有所改進，能為用戶提供更為貼心的支持。69三、安裝的系統(tǒng)要求如果想運行和使用Dreamweaver?CC軟件，計算機必須滿足Adobe官方規(guī)定的最低系統(tǒng)配置。實際使用中，為了提高軟件的運行效率和穩(wěn)定性，建議使用配置更高的計算機。70Dreamweaver?CC的工作界面0271知識目標1.?了解Dreamweaver?CC界面的布局。2.?熟悉Dreamweaver?CC界面菜單命令的含義。技能目標1.?能夠正確使用菜單欄及其子菜單命令。2.?能夠靈活切換應用代碼視圖和設計視圖。3.?能夠獨立打開或關閉各個面板。72某公司為樹立全新的企業(yè)形象，拓寬銷售渠道，決定升級公司網站，升級期間用戶將不能訪問公司網站，網站需要向訪問者展示暫停服務頁面如圖所示，依據該效果圖，利用Dreamweaver?CC軟件，在文檔窗口制作一個純文本的提示頁面，并進行預覽，文檔命名為error.html。7374任務效果圖軟件初次啟動后，屏幕上會顯示菜單欄、歡迎界面和屬性面板，具體布局如下圖所示。最上方的是菜單欄，這里匯集了軟件的大多數(shù)功能，用戶可以根據實際需求，點擊菜單欄中的相應項目，以使用所需的功能。7576軟件啟動界面中間部分展示的是歡迎界面，它旨在為用戶提供便捷操作，其中包含“打開最近的項目”“新建”“主要功能”以及“快速入門”等快捷菜單。若用戶不希望顯示歡迎界面，可以通過“編輯—首選項”菜單命令來取消其顯示。底部是屬性面板，該面板主要用于設置文檔窗口中選中元素的屬性，從而實現(xiàn)各種樣式效果。在Dreamweaver?CC中，用戶可以直接在屬性面板中修改元素的屬性。根據所選元素的不同，屬性面板中的內容也會相應變化。如果不慎關閉了屬性面板，用戶可以通過“窗口—屬性”菜單命令重新打開，或者直接使用組合鍵“Ctrl+F3”快速調出。77在新建一個網頁后，Dreamweaver?CC會從啟動界面轉入工作界面。這個工作界面延續(xù)了Dreamweaver系列軟件一貫的簡潔、高效和易用的特點。用戶可以在工作界面中輕松找到軟件的大部分功能，具體界面如下圖所示。78工作界面二、菜單欄Dreamweaver?CC的菜單欄包含10個菜單項，分別是文件、編輯、查看、插入、修改、格式、命令、站點、窗口和幫助。這些菜單項為用戶提供了豐富的功能和操作選項，如下圖所示。79菜單欄文件菜單用于管理當前文檔，包括新建、打開、保存、預覽等操作，如下圖所示。80文件菜單編輯菜單用于對文檔內容進行常規(guī)編輯操作，如查找和替換等。需特別注意的是，首選參數(shù)設置也位于編輯菜單中，方便用戶進行個性化配置，如下圖所示。81編輯菜單查看菜單提供了多種文檔視圖選項，用戶可以根據需要顯示或隱藏不同類型的頁面元素、工具欄等，從而更靈活地編輯和預覽網頁，如下圖所示。82

查看菜單插入菜單用于用戶向網頁中添加各種對象，如圖像、鏈接、表格等，極大地豐富了網頁的內容和功能，如下圖所示。83插入菜單修改菜單用于更改選定頁面屬性，幫助用戶精細調整網頁元素的表現(xiàn)和行為，如下圖所示。84修改菜單格式菜單用于設置文本的格式樣式，包括字體、大小、顏色等，使網頁文本更加美觀且易于閱讀，如下圖所示。85

格式菜單命令菜單為用戶提供了對各種命令的快速訪問途徑，提高了工作效率，如下圖所示。86

命令菜單站點菜單提供了用于管理站點以及上傳、下載文件的便捷選項，方便用戶進行網站的維護和更新，如下圖所示。87

站點菜單窗口菜單整合了軟件中的所有面板、檢查器和窗口，用戶可以通過該菜單快速訪問和管理這些工具，提升工作效率，如下圖所示。88窗口菜單二、工具欄使用工具欄中的視圖工具，可以輕松地在代碼視圖、設計視圖和拆分視圖之間進行切換，具體如下圖所示。其中，代碼視圖主要用于在文檔窗口中展示HTML源代碼；設計視圖用于顯示網頁的最終設計效果；而拆分視圖巧妙地將代碼視圖和設計視圖結合在一起，便于用戶同時查看和編輯源代碼和設計效果。此外，工具欄還提供了實時視圖功能，能夠模擬網頁在瀏覽器中的顯示效果，使用戶在設計過程中就能預覽到實際的網頁呈現(xiàn)效果。最后，通過點擊“預覽／調試”按鈕，用戶可以直接通過瀏覽器查看網頁文檔的實際瀏覽效果。89工具欄界面三、文檔窗口文檔窗口，

又稱文檔編輯區(qū)，

其主要功能是用于展示和編輯文檔內容，

如下圖所示。90文檔窗口四、屬性面板屬性面板的主要作用是設置當前頁面上正在編輯內容的各項屬性如下圖所示。用戶可以通過依次點擊“窗口”和“屬性”來打開或關閉該面板。根據所選的頁面元素不同，屬性面板中顯示的屬性值也會相應變化。91屬性面板五、面板組面板組位于工作界面的右側，旨在幫助用戶更好地監(jiān)控和修改工作內容見下圖。當用戶在面板中對文檔進行編輯操作時，相應的修改效果會實時顯示在窗口中，這為用戶編輯頁面提供了極大的便利。通常，用戶可以通過依次點擊“窗口”和“屬性”來打開或關閉面板組。9293面板組項目三網頁的基本操作94學習任務1?站點的創(chuàng)建與管理學習任務2?網頁的創(chuàng)建學習任務3?網頁文本的編輯與設置ONTENTSC目錄95學習任務4?HTML框架和標簽的使用站點的創(chuàng)建與管理0196知識目標1.?了解站點在網頁設計與制作中的作用。2.?掌握創(chuàng)建和管理站點的方法。技能目標1.?能夠合理地進行站點規(guī)劃。2.?能夠正確創(chuàng)建和管理站點。

97一、網絡營銷市場調研的內容某服飾品牌廠商為了重塑企業(yè)形象并擴展銷售網絡，已根據品牌特色和地方文化完成了線上銷售網站的設計?，F(xiàn)在，廠商需要在本地計算機D盤根目錄下創(chuàng)建一個名為Myweb的本地站點，以便開展后續(xù)的開發(fā)和維護工作。同時，為了確保網站內容能夠實時更新和發(fā)布，廠商還需通過FTP方式（FTP服務器地址：41，用戶名：bjyy，密碼：bjyy）將站點內容上傳到遠程Web服務器上。在此過程中，將采用FTP默認端口進行數(shù)據傳輸，并確保網站的網址為http：//，以便用戶能夠準確訪問該服飾品牌的官方網站。98一、認識站點站點指的是在本地磁盤上創(chuàng)建的一個根文件夾，用于存放網站上的所有文件。Dreamweaver?CC提供了一種組織所有與Web站點相關聯(lián)的文檔的方法。通過在站點中組織文件，可以利用Dreamweaver?CC實現(xiàn)站點上傳至服務器、自動跟蹤與維護鏈接、管理文件以及共享文件等功能。99在開發(fā)一個網站時，首要步驟是創(chuàng)建對應的站點。這可以通過菜單欄中的“站點—新建站點”選項，或者通過文件窗口的下拉列表選擇“管理站點—新建站點”來完成，以定義本地站點或遠程站點。執(zhí)行這些操作后，將會打開“站點設置對象”對話框，在此可以查看站點設置的三個基本任務，如下圖所示。100“站點設置對象”對話框（1）站點：允許用戶為站點指定一個本地文件夾，并為其命名。（2）服務器：用于設置遠程Web服務器的相關信息。（3）版本控制：提供設置訪問權限、協(xié)議類型、服務器地址、存儲庫路徑、服務器端口號、用戶名及密碼等詳細配置選項。101若對站點配置不滿意或需進行調整，用戶可隨時對其進行管理。通過選擇“站點—管理站點”選項，可打開“管理站點”對話框。在“您的站點”列表中，用戶可以選擇需要管理的站點。利用對話框左下角的四個小圖標，用戶可以執(zhí)行站點的刪除、編輯、復制和導出操作，具體界面如下圖所示。使用Dreamweaver?CC，用戶可以將站點導出為.ste文件以進行備份或遷移。同樣地，利用下圖中的“導入站點”命令，用戶可以方便地導入擴展名為.ste的文件，以恢復或設置站點。102103“管理站點”對話框二、規(guī)劃站點在規(guī)劃站點時，通常需要注意以下幾點。1.?站點文件應按類別進行保存，以便于管理和查找。2.?文件夾和文件的命名應遵循合理且易于理解的原則。3.?保持本地站點與遠程站點的結構一致，以確保同步。104105站點面板站點面板，也稱文件面板，可以通過依次點擊“窗口”和“文件”打開如下圖所示。網頁的創(chuàng)建02106知識目標1.?理解網站的一般工作原理。2.?掌握網頁和網站的關系。技能目標1.?能夠新建網頁。2.?能夠預覽網頁。3.?能夠將網頁保存至指定位置。107為樹立全新企業(yè)形象，擴大企業(yè)宣傳，讓客戶更加充分了解企業(yè)背后的故事，為企業(yè)吸納更多的人才，需要新增一個“關于我們”的網頁，名稱為About.html，保存至站點Myweb中，網頁的設計定版如下圖所示。108109任務效果圖一、Web概述1.?工作原理網站的工作原理，本質上是Web服務器與客戶端瀏覽器之間的交互過程。這一過程描述了服務器上的文件和數(shù)據庫如何轉化為用戶眼前所見的網頁。以下是詳細步驟。（1）用戶在瀏覽器中輸入網址，例如

。（2）瀏覽器會解析這個網址，識別出其中包含的HTTP和域名。110（3）接著，瀏覽器會與互聯(lián)網服務提供商進行通信，通過域名系統(tǒng)查詢

對應的IP地址。一旦獲取IP地址，瀏覽器會向這個地址發(fā)送訪問請求。（4）在獲取網站的IP地址和端口號（HTTP通常使用80端口，HTTPS則使用443端口）后，瀏覽器會建立TCP套接字連接，從而與Web服務器建立通信。（5）根據用戶的操作，瀏覽器會向服務器發(fā)送相應的HTTP請求，比如請

的主頁。（6）Web服務器在接收到請求后，會根據請求信息查找對應的HTML頁面。如果頁面存在，服務器會將處理結果和頁面內容返回給瀏覽器；如果找不到頁面，則會發(fā)送一個404錯誤消息，表示無法找到相關頁面。1112.

網頁與網站的關系網頁，作為包含HTML標簽的純文本文件，構成了網站的基礎單元。它存儲在全球互聯(lián)網連接的某一臺計算機中，并通過網址進行唯一標識和訪問。當在瀏覽器中輸入特定網址后，經過一系列復雜而迅速的處理流程，網頁文件會被傳輸?shù)奖镜赜嬎銠C。隨后，瀏覽器會解析這些文件，最終將網頁內容呈現(xiàn)在用戶眼前。網站則是由眾多內容各異的網頁以及網頁中嵌入的圖像、音樂、視頻、數(shù)據庫等文件所組成。所有這些元素都通過鏈接相互關聯(lián)。因此，要在互聯(lián)網上建立一個網站，必須擁有獨立的域名和網絡存儲空間。1123.?網頁類型網頁主要可以分為靜態(tài)網頁和動態(tài)網頁兩種類型。靜態(tài)網頁包含的內容，如文本、圖像、Flash動畫、超鏈接等，在編寫網頁源代碼時就已經確定，并且除非網頁源代碼被重新修改，否則這些內容將保持不變。靜態(tài)網頁的文件名通常以.htm、.html、xml等為后綴。113與靜態(tài)網頁相比，動態(tài)網頁則具有數(shù)據庫支持，包含程序代碼，并能提供與用戶交互的功能，例如用戶登錄、用戶注冊和信息查詢等。動態(tài)網頁能夠根據用戶傳入的不同參數(shù)顯示不同的數(shù)據內容。靜態(tài)網頁和動態(tài)網頁的主要區(qū)別在于制作時使用的語言和程序的運行環(huán)境。靜態(tài)網頁主要使用HTML語言編寫，而動態(tài)網頁則使用HTML結合諸如ASP、PHP、JSP等服務器端腳本語言。此外，程序是否在服務器端運行也是它們之間的一個重要區(qū)別。在服務器端運行的是動態(tài)網頁，而在客戶端運行的是靜態(tài)網頁。靜態(tài)網頁和動態(tài)網頁各有其特點，網站采用哪種類型的網頁主要取決于網站的功能需求。114二、Web標準Web標準并非單一的具體標準，而是一系列相關標準和技術的綜合體。這些標準和技術共同構成了一個多層次的體系，貫穿于網頁的設計、開發(fā)和顯示各個環(huán)節(jié)。Web標準的核心構成可劃分為三大主要部分：結構、表現(xiàn)和行為。結構標準在網頁元素的組織和分類中起著關鍵作用。其中，最常用的包括超文本標記語言HTML和可擴展超文本標記語言XHTML。通過采用這些結構標準，能夠有效地構建和組織網頁內容。115表現(xiàn)標準主要負責決定網頁的外觀和布局，具體涵蓋字體、顏色、大小等視覺屬性的設置。其中，級聯(lián)樣式表（CSS）發(fā)揮著核心作用，它通過樣式規(guī)則來精確定義網頁元素在屏幕上的展示方式。行為標準則關乎網頁的操作性和交互性，它規(guī)定了如何響應用戶的各種動作，比如點擊按鈕或滑動滾動條等。常見的行為標準包括文檔對象模型（DOM）和ECMAScript，后者也被稱為JavaScript，是一種在客戶端運行的腳本語言，能夠賦予網頁動態(tài)效果和豐富的交互功能。116Web標準的實施對于確保在不同設備和瀏覽器上創(chuàng)建的網頁能夠正確顯示與順暢操作至關重要。它們不僅提升了網頁的可訪問性、可理解性和可維護性，還加強了對無障礙性問題的重視，以便支持各種能力的用戶群體。遵循這些標準，開發(fā)者能夠設計出規(guī)范、易于移植、清晰易讀且便于維護的網頁，進而為用戶提供更優(yōu)質的訪問體驗。117三、WEB開發(fā)視圖Dreamweaver?CC是一款功能強大的網頁開發(fā)工具，在網頁設計和編程領域有著廣泛的應用。它提供了四種視圖模式供用戶選擇，包括設計視圖、代碼視圖、拆分視圖以及實時視圖，如圖所示。這些多樣化的視圖模式為開發(fā)人員和設計人員創(chuàng)造了不同的工作環(huán)境和視角，從而極大地提高了他們進行網頁開發(fā)和設計的效率。118119設計視圖120代碼視圖121

拆分視圖122實時視圖1.?設計視圖設計視圖是Dreamweaver?CC中最常使用的視圖之一。它為用戶提供了一個“所見即所得”的工作環(huán)境，意味著用戶在設計視圖中所做的任何更改，都會直接呈現(xiàn)在頁面上。這一特點使得設計人員能夠直觀地進行頁面布局、調整圖像和文字的位置、設置顏色及樣式等，而無須深入具體的代碼細節(jié)。對于那些不擅長編程的設計人員而言，設計視圖極為友好且易于操作，有助于他們迅速創(chuàng)建并修改網頁的外觀。1232.?代碼視圖代碼視圖是專為喜歡直接編輯HTML或其他網頁代碼的開發(fā)人員設計的。在這個視圖中，可以直觀地編輯和查看網頁的源代碼，從而能夠更精確地掌控網頁的結構和功能，并運用各種網頁編碼技術。與設計視圖相比，代碼視圖提供了更高的靈活性，更適合處理復雜的編碼任務。然而，使用代碼視圖需要開發(fā)者對HTML、CSS、JavaScript等網頁編程語言有一定的了解和熟練度。1243.?拆分視圖拆分視圖融合了設計視圖和代碼視圖的特點。在這個視圖中，用戶能夠同時看到設計視圖和代碼視圖的內容，并且可以根據需要輕松切換。這種設置使得開發(fā)人員在進行具體修改和調整時，能夠迅速切換到代碼視圖，以便查看和編輯網頁的源代碼。拆分視圖的最大優(yōu)勢在于，它將“所見即所得”的設計環(huán)境與精確控制網頁結構的代碼編輯環(huán)境完美融合，從而極大地提高了開發(fā)人員的工作效率。1254.

實時視圖實時視圖是Dreamweaver?CC中與實際瀏覽器顯示效果最為接近的視圖模式。在這個視圖中，用戶可以即時預覽網頁的最終呈現(xiàn)效果。這一功能對于設計人員和開發(fā)人員而言至關重要，因為它能確保他們的設計或開發(fā)工作在各種瀏覽器和設備上都能得到正確的展示。實時視圖提供了逼真的預覽效果，幫助用戶更精準地調整和優(yōu)化網頁的布局與樣式。126Dreamweaver?CC的四種視圖為用戶提供了多元化的角度和工作環(huán)境，使得設計人員和開發(fā)人員能夠從不同視角進行網頁的開發(fā)與設計工作。其中，設計視圖為用戶提供了一個直觀的設計環(huán)境，實現(xiàn)了所見即所得的設計體驗；代碼視圖則讓用戶能夠直接編輯并查看網頁的源代碼；拆分視圖巧妙地融合了設計視圖與代碼視圖的優(yōu)勢；而實時視圖則為用戶提供了逼真的預覽效果。這四種視圖共同構成了一個功能全面且靈活的開發(fā)平臺，極大地提升了用戶進行網頁開發(fā)和設計的工作效率。127網頁文本的編輯與設置03128知識目標1.?掌握輸入網頁內容的不同方法。2.?理解頁面屬性的功能含義。3.?掌握設置文本屬性的方法。技能目標1.?能夠依據網頁內容正確應用插入菜單欄。2.?能夠靈活應用屬性面板。3.?能夠依據網頁格式正確應用格式菜單欄。129某公司為開拓市場，使客戶能夠更全面、直觀地了解公司，決定在公司網站上新增一個網頁。該網頁的主要內容將是深入解讀企業(yè)文化、展現(xiàn)企業(yè)歷史、介紹企業(yè)規(guī)模以及詳細闡釋品牌故事。網頁的設計定版如下圖所示。130任務效果圖一、編輯網頁內容1.

輸入文本文本的輸入主要有三種方法：直接輸入法、復制/粘貼法和文件導入法。直接輸入法：在設計視圖中，只需將光標定位至想要插入文本的位置，然后直接輸入文本內容即可。若是在代碼視圖中操作，則需將光標定位在<body>和</body>兩個HTML標簽之間，然后輸入所需的文本。131復制/粘貼法：首先，打開包含所需文本的源文件，通過菜單命令選擇復制（或使用組合鍵“Ctrl+C”）。接著，在Dreamweaver?CC的設計視圖或代碼視圖中，將鼠標定位到要插入文本的位置，然后使用菜單命令選擇粘貼（或使用組合鍵“Ctrl+V”），即可完成文本的復制操作。文件導入法：在Dreamweaver?CC的菜單欄中，依次選擇“文件”“導入”，可以看到Dreamweaver?CC支持從Word和Excel文檔、表格式數(shù)據以及XML文件中導入內容。選擇想要導入的Word文檔，按照提示操作即可完成導入過程。1322.?插入特殊字符網頁設計中經常需要使用一些特殊符號，例如注冊符號

?、版權符號

?和商標符號?等。由于這些符號無法直接通過鍵盤輸入Dreamweaver?CC中，因此我們可以采用以下方法來實現(xiàn)。方法一：通過菜單欄選擇“插入—字符”選項，并在其中選擇所需的字符進行插入。方法二：點擊菜單欄中的“窗口—插入”命令，調出插入面板。在“常用”選項卡下，選擇相應的字符命令進行插入。133134“插入其他字符”對話框如果在上述菜單中未能找到所需的特殊字符，可以選擇“其他字符”命令。這將打開“插入其他字符”對話框如圖所示，在該對話框中選擇并插入所需的字符，然后點擊“確定”按鈕即可完成操作。3.?輸入空格若想在特定位置輸入空格，只需在該處單擊鼠標，并將輸入法切換至半角狀態(tài)，之后單擊空格鍵即可輸入一個空格。若需要連續(xù)輸入多個空格，可以嘗試以下幾種方法。方法一：點擊菜單欄中的“插入—字符—不換行空格”命令。方法二：直接使用組合鍵“Ctrl+Shift+Space”來輸入多個空格。方法三：先設置菜單命令“編輯—首選項”，在其中勾選“允許連續(xù)空格”，設置完成后，連續(xù)敲擊空格鍵即可輸入多個空格。1354.?插入當前日期在Dreamweaver?CC中插入日期非常簡單，而且插入的日期可以保存并設置為自動更新。以下是具體的操作步驟。步驟一：將光標移動到想要插入日期的準確位置。步驟二：點擊菜單欄中的“插入—日期”命令，這將打開“插入日期”對話框，如圖所示。在這個對話框中，可以選擇偏好的日期格式。步驟三：選擇好日期格式后，點擊“確定”按鈕，選定的日期就會立刻顯示在網頁上。136“插入日期”對話框5.?插入水平線水平線在網頁設計中起著重要的視覺分隔作用，它能夠以可視化的方式將文本和對象進行分隔，進而提升網頁信息的清晰度。插入水平線主要有以下兩種方法。方法一：將光標定位到希望插入水平線的具體位置，然后執(zhí)行菜單中的“插入—水平線”命令，即可快速插入一條水平線。方法二：通過“窗口”菜單打開插入面板，選擇其中的“常用”選項卡，并點擊“水平線”按鈕，同樣可以在文檔窗口中插入一條水平線。插入后，可以通過水平線的屬性面板設置其高度、寬度以及對齊方式，如下圖所示。137138水平線屬性面板參數(shù)介紹：★水平線：在文本框中輸入水平線的名稱?！飳挕⒏撸阂韵袼貫閱挝换蛞皂撁娉叽绨俜直鹊男问街付ㄋ骄€的寬度和高度。★對齊：指定水平線的對齊方式，其下拉列表框中提供了“默認”“左對齊”“居中對齊”和“右對齊”4個選項。只有當水平線的實際寬度小于瀏覽器窗口的寬度時，對齊方式的設置才會顯現(xiàn)其效果?！镪幱埃褐付ɡL制水平線時是否帶陰影。取消選擇后，將使用純色繪制水平線。139二、設置頁面屬性“頁面屬性”對話框功能強大，它允許我們指定頁面的默認字體系列、字體大小、背景顏色、邊距、鏈接樣式等諸多設計元素如下圖所示。在“頁面屬性”對話框中所做的任何更改都將全局性地應用于整個網頁。要打開這個對話框，既可以通過點擊菜單欄中的“修改—頁面屬性”，也可以在屬性面板中點擊“頁面屬性”按鈕，兩種方式均可。140141“頁面屬性”對話框1.?外觀（CSS）當選擇“頁面屬性”對話框左側的“外觀（CSS）”標簽時，具體界面如上圖所示。下面是關于該界面中一些主要參數(shù)的詳細介紹。★頁面字體：此選項用于選擇該網頁中文本的默認字體，例如宋體、楷體等。選擇合適的字體能夠增強網頁的可讀性和整體美感。142★大?。捍诉x項用于選擇該網頁中文本的默認字號。字號大小通常以像素（px）為單位進行設定。合理的字號設置能夠確保用戶輕松閱讀網頁內容?！镂谋绢伾哼@個選項允許選擇該網頁中文本的默認顏色。如果在設計中沒有明確指定文本顏色，那么文本將默認為黑色。選擇合適的文本顏色對于提升用戶體驗和頁面美觀度至關重要。143★背景顏色：此選項用于設定網頁的默認背景顏色。若未進行特別設置，背景顏色將默認為白色。★背景圖像：此選項可為網頁選定默認的背景圖像?？梢酝ㄟ^點擊右側的“瀏覽”按鈕來挑選合適的圖像文件。★重復：這一設置需與背景圖像結合使用。在“重復”下拉列表框中，若選擇“no-repeat”，背景圖像將不會重復，僅會在頁面上顯示一次；若選擇“repeat”（默認值），背景圖像會在頁面的橫向和縱向上都重復顯示；若選擇“repeat-x”，背景圖像將僅在橫向上重復顯示；而選擇“repeat-y”時，背景圖像則只會在縱向上重復顯示。1442.?外觀（HTML）當選擇“頁面屬性”對話框中的“外觀（HTML）”選項時，具體界面如下圖所示?？梢园l(fā)現(xiàn)其中的背景圖像、背景顏色以及文本顏色的設置與“外觀（CSS）”選項中的設置功能是相似的。而“已訪問鏈接”“鏈接”“活動鏈接”這三個選項，則分別用于設置超鏈接文本在被訪問前、被點擊時以及被訪問后的顏色變化。145外觀（HTML）3.?鏈接（CSS）當選擇“頁面屬性”對話框中的“鏈接（CSS）”選項時，具體界面如下圖所示。在這個選項中，可以對網頁中的鏈接樣式進行詳細的CSS設置。146

鏈接（CSS）參數(shù)介紹：★鏈接字體：此選項允許選擇有超鏈接文字的字體樣式，例如宋體、楷體等，以確保鏈接文字與頁面設計的整體風格相協(xié)調?！锎笮。捍诉x項可以調整有超鏈接文字的字號大小，從而使其在頁面上更加醒目

或符合特定的設計要求?！镦溄宇伾捍诉x項設置的是那些具有超鏈接但尚未被訪問過的文字的顏色。選擇合適的顏色可以突出鏈接，并引導用戶進行點擊?！镒儞Q圖像鏈接：此設置用于定義當鼠標懸停在鏈接文字上時文字的顏色變化，從而提供用戶交互的直觀反饋。147★已訪問鏈接：此選項可以為那些已經被用戶訪問過的鏈接設置不同的顏色，幫助用戶區(qū)分哪些鏈接他們已經查看過。★活動鏈接：當用戶單擊鏈接時，此設置將決定鏈接文字的顏色，以提供即時的視覺反饋?！锵聞澗€樣式：這個選項允許自定義鏈接文字的下劃線樣式，可以選擇不同的線條風格來增強鏈接的可識別性和頁面的整體美觀度。1484.?標題（CSS）當選擇“頁面屬性”對話框中的“鏈接（CSS）”選項時，具體界面如下圖所示。在這個界面中，可以對網頁中的鏈接樣式進行詳細的CSS設置。149

標題（CSS）參數(shù)介紹：★標題字體：此選項用于設定頁面上標題文字的字體樣式，如選擇宋體、楷體等不同的字體來呈現(xiàn)標題文字。★標題1至標題6：這些選項用于對6種不同級別的標題樣式進行個性化設置，包括字體、顏色等屬性的調整，以滿足設計需求。1505.?標題/編碼當選擇“頁面屬性”對話框中的“標題/編碼”選項時，具體界面如圖下所示。在這個界面中，可以對網頁的標題進行設置，并選擇適當?shù)淖址幋a方式，以確保頁面內容的正確顯示和傳輸。151

標題/編碼參數(shù)介紹：★標題：此選項用于指定頁面標題，該標題將顯示在“文檔”窗口的標題欄以及大多數(shù)瀏覽器的標題欄中。設置一個清晰、有意義的標題，有助于提升網頁的可讀性，并有利于搜索引擎優(yōu)化。★文檔類型：可以選擇所需的文檔類型。在Dreamweaver?CC中，默認新建的文檔類型為XHTML?1.0?Transitional。選擇合適的文檔類型對于確保網頁在不同瀏覽器中的兼容性至關重要?！锞幋a：此選項用于選擇網頁的文字編碼方式。152★重新載入：如果在修改文檔編碼后需要更新顯示或檢查更改效果，請點擊“重新載入”按鈕。這將重新加載文檔，以便查看和應用新的編碼設置?！颱nicode標準化表單：當選擇UTF-8作為文檔編碼時，此選項將提供4種Unicode標準化表單供選擇。這些表單有助于確保文本在不同平臺和應用程序之間的一致性和兼容性?！锇║nicode簽名（BOM）：如果選中此選項，將在文檔中包含一個字節(jié)順序標記（BOM）。BOM是UTF編碼方案中用于標識編碼的標準標記，有助于確保文本在不同環(huán)境中的正確解析和顯示。1536.?跟蹤圖像當選擇“頁面屬性”對話框中的“跟蹤圖像”選項時，具體界面如下所示。在這個選項中，可以方便地管理和調整跟蹤圖像的設置。154

跟蹤圖像參數(shù)介紹：★跟蹤圖像：此功能允許用戶將原始的平面設計稿作為輔助背景放置在網頁中，從而方便地定位文字、圖像、表格等元素。用戶只需單擊右側的“瀏覽”按鈕，即可輕松加載設計稿?！锿该鞫龋涸撛O置用于調整跟蹤圖像的透明度，使用戶能夠在設計過程中清晰地看到背景圖像的同時，不妨礙其他頁面元素的展示。通過調整透明度，可以更好地融合設計稿與實際的網頁內容。155三、設置文本屬性1.?文本的大小若需調整文本的大小，應先選定頁面中的文本，接著在屬性面板的“CSS”選項卡上，從“大小”下拉列表框中選擇合適的字體大小，如下圖所示。156

屬性面板2.?文本的顏色若要為文本設置顏色，應先選定頁面中的文本，然后在屬性面板的“CSS”選項卡上點擊“顏色”選擇器來指定所需顏色，如上圖所示。3.?文本的字體當需要為文本指定特定字體時，應先選定頁面中的文本，并在屬性面板的“CSS”選項卡上，從“字體”下拉列表中選擇所需的字體樣式。若“字體”下拉列表中未列出所需字體，可以選擇“管理字體”選項，這將打開“管理字體”對話框。在“自定義字體堆?！捎米煮w”選項卡中，挑選所需字體，然后點擊“添加”按鈕，將其導入左側字體框。完成后，點擊“完成”按鈕，新添加的字體便會出現(xiàn)在字體列表中，如下圖所示。157158

“管理字體”對話框4.?文本的縮進/凸出文本的縮進是指調整文本與頁面邊界之間的空白間距，即在文本的最左側插入一定量的空格。而凸出則是創(chuàng)建反向的縮進效果，使得文本段落超出左邊的頁邊距。若需調整文本的縮進或凸出，可通過菜單欄選擇“格式—縮進”或“格式—凸出”選項來實現(xiàn)，同時，也可以使用組合“CTRL+ALT+］”來進行縮進操作，以及組合鍵“CTRL+ALT+［”來進行凸出調整。1595.?文本的段落格式在Dreamweaver?CC軟件中，用戶可以將所選文本設置為段落或不同級別的標題。為確保文檔在瀏覽器中的顯示效果整齊且清晰，通常會在文字段落之間使用段落標記。選中文本后，通過菜單欄選擇“格式—段落格式—段落”選項，或者直接使用組合鍵“CTRL+SHIFT+P”，即可將所選文本快速設置為段落格式。160一般文章常包含標題、副標題、章和節(jié)等結構。標題會以特定的字號顯示文本，并自動換行，始終從新的一行開始。Dreamweaver?CC提供了從標題1到標題6的6種標題格式，字體大小逐級遞減，如下圖所示。選中文本后，通過菜單欄選擇“格式—段落格式—標題X”（X為1到6的數(shù)字）即可設置，或者使用以下組合鍵：CTRL+1、CTRL+2、CTRL+3、CTRL+4、CTRL+5、CTRL+6，

更高效地進行格式調整。161162標題樣例6.?文本的對齊方式如果需要調整文本的對齊方式，可以在菜單欄中選擇“格式”選項，接著選擇“對齊”。該選項提供了四種對齊方式，包括左對齊、居中對齊、右對齊和兩端對齊，具體如下圖所示。163

文本對齊方式參數(shù)介紹：★左對齊（Ctrl+Shift+Alt+L）：文本將沿著頁面左側對齊，右側若遇到較長單詞無法完整顯示時，會直接換行，這可能導致右側頁面出現(xiàn)不對齊的現(xiàn)象。★居中對齊（Ctrl+Shift+Alt+C）：內容會依據一條中線進行對齊，且單詞與單詞之間的空格間隔保持一致?！镉覍R（Ctrl+Shift+Alt+R）：右對齊與左對齊相對應，即內容會沿著頁面的右側對齊，這樣左側自然就會顯得不整齊?！飪啥藢R（Ctrl+Shift+Alt+J）：通過調整文字的水平間距，使文本內容在左右頁邊距之間均勻分布，從而實現(xiàn)兩端對齊的效果。1647.?文本的列表類型在網頁設計中，插入文本列表能夠讓文本內容的展示更加整齊、直觀。文本列表主要有三種形式：項目列表、編號列表以及自定義列表。（1）項目列表項目列表，也稱無序列表，它由一系列不存在順序級別關系的項目文本構成。（2）編號列表編號列表，也稱有序列表，是一種具有明確排列順序的列表。其特點是在每個列表項前都帶有數(shù)字前導字符，這些前導字符可以是阿拉伯數(shù)字、英文字母，或是羅馬數(shù)字。165（3）自定義列表各項簡單并列且不使用任何特定記號的列表被稱為自定義列表。這種列表不使用項目符號或數(shù)字作為前導字符，在詞匯表或說明書中常被應用。舉例來說，我們可以利用自定義列表來創(chuàng)建某個網頁的友情鏈接區(qū)域。通過靈活組合上述三種列表形式，可以實現(xiàn)豐富多樣的頁面視覺效果。1668.?文本的加粗/傾斜若需為文本設置加粗（組合鍵：CTRL+B）、傾斜（組合鍵：CTRL+I）、下劃線或刪除線等樣式，可點擊菜單欄中的“格式—HTML樣式”來進行相應設置。另外，文本的加粗和傾斜樣式也可以通過屬性面板中的HTML選項卡進行設置。167HTML框架和標簽的使用04168知識目標1.?理解HTML的概念及作用。2.?理解HTML標簽的概念及作用。3.?掌握常見的HTML標簽。技能目標1.?能夠搭建HTML基本結構。2.?能夠利用HTML標簽搭建圖文混合的網頁。169某公司為了開拓市場并吸引加盟商，決定在公司網站上增設一個加盟說明網頁。這個網頁將全面、直觀地展示公司的市場定位和未來發(fā)展藍圖，以便加盟商更好地了解公司。網頁的設計定版如下圖所示。170171

任務效果圖一、HTML的概念及作用1.?HTML概念HTML是構建萬維網信息展示的標準語言。通過HTML編寫的文件需要借助Web瀏覽器來呈現(xiàn)其內容。HTML不僅用于創(chuàng)建網頁文件，還通過各類標記指令，將文本、圖像、動畫、音頻、表格、鏈接、視頻等多媒體元素集成并展示出來。此外，HTML支持從一個頁面跳轉到另一個頁面，實現(xiàn)了頁面間的流暢導航。網頁的核心和基礎正是HTML語言。當用戶在瀏覽器窗口菜單欄中選擇“查看”并點擊“源文件”時，所看到的即網頁的源代碼，這些代碼完全由HTML語言編寫。1722.?HTML的作用HTML包括以下主要功能。（1）構建網頁框架：HTML負責描繪出整個網頁的基本架構。（2）呈現(xiàn)頁面內容：利用HTML，我們可以在網頁中嵌入文本、圖像、音頻、動畫、視頻等多媒體元素，并能通過超鏈接實現(xiàn)頁面之間的快速跳轉。（3）規(guī)范內容格式：HTML還能對文本進行格式化處理，如設置標題、字體、字號、顏色等屬性，同時控制文本的段落設置、對齊方式等。此外，HTML還支持使用列表、表格、表單和層等多種元素來規(guī)范網頁內容的顯示方式。1733.?HTML基本結構標簽HTML，全稱超文本標記語言，由眾多HTML標簽組成。這些標簽使得網絡上的文檔得以統(tǒng)一格式，并將分散的Internet資源連接成一個有機的整體。每個網頁都有一個基本的結構標簽，也稱為骨架標簽，網頁內容也是在這些基本標簽上書寫的。一個典型的HTML文檔主要由四個部分組成：html標簽、head標簽、title標簽以及body標簽。關于這些標簽的詳細說明，可參考下表。174175

結構標簽說明二、HTML標簽的概念及作用1.?HTML標簽的概念HTML是一種用于描述網頁文檔的標記語言。HTML標簽用于定義網頁的結構和樣式，它們通過標識內容和屬性來構成網頁的基本元素。在網頁中，被“<>”符號包圍的元素被稱為HTML標簽。1762.?HTML標簽的關系標簽關系可以分為兩類：包含關系和并列關系見下表。177HTML標簽的關系3.?HTML標簽的屬性HTML標簽屬性是對HTML標簽的一種描述方式，通常由屬性名和屬性值兩部分組成，用于為標簽提供附加信息。這些屬性可以添加到單標簽和雙標簽的開始標記內，且屬性之間的順序并不重要。此外，某些屬性也可以省略，此時它們將采用默認值。例如，我們可以設置文本的字體大小（font-size）、顏色（color），或者定義一個盒子的寬度（width）和高度（height）等，這些都是通過標簽屬性來實現(xiàn)的。1784.?HTML標簽的作用HTML標簽是網頁文檔中具有特定含義的符號，它們被放置在尖括號內，作為關鍵詞來指導瀏覽器如何顯示文檔中的內容，從而為網頁帶來豐富多彩的設計效果。標簽主要有以下作用。（1）指定網頁上的元素及其格式（2）鏈接到其他資源（3）引用圖片文件1795.?常見的HTML標簽常見的HTML的標簽見下表。180

常見的HTML標簽項目四圖像和多媒體的應用181學習任務1?圖像在網頁中的應用學習任務2?多媒體在網頁中的應用ONTENTSC目錄182圖像在網頁中的應用01183知識目標1.?了解網頁中常見的圖像文件格式。2.?掌握圖像標簽的用法。技能目標1.?能夠編輯圖像和設置圖像屬性。2.?能夠制作交互式圖像。3.?能夠正確創(chuàng)建圖像映射。184圖像在吸引網頁瀏覽者方面遠比文本有效，精心選擇的圖像能夠緊緊抓住瀏覽者的注意力。為提供更優(yōu)質的產品信息和展示效果，某公司決定對其網站的產品展示頁進行全面升級。通過融入豐富多彩的圖文內容，公司期望能夠吸引更多潛在客戶，從而提升市場競爭力。網頁的設計定版如圖所示。185186

任務效果圖一、網頁中常見的圖像文件格式圖像不僅要美觀，還需要在保持高質量畫面的基礎上，盡可能地壓縮其體積。目前，網頁設計中廣泛采用的圖像文件格式主要有三種：JPEG、GIF和PNG。它們的具體特點如下。1871.?JPEG格式JPEG是一種采用有損壓縮算法的圖像文件格式，非常適合展現(xiàn)色彩層次豐富、具有漸變效果的圖像，例如各類照片。其顯著優(yōu)點是圖像質量較高。然而，它的文件相對較大（與其他格式相比），并且不支持透明區(qū)域。在網頁設計過程中，像橫幅廣告、商品展示圖以及大尺寸插圖等，通常都會選擇保存為JPEG格式。1882.?GIF格式GIF格式的文件通常較小，可以包含透明區(qū)域，還能制作包含多個畫面的簡單動畫。不過，其顏色表現(xiàn)能力有限，圖像質量可能略遜一籌。因此，它非常適合用于表現(xiàn)色彩簡潔或有大面積單色的圖像，例如卡通畫、按鈕、圖標和徽標等。1893.?PNG格式PNG格式支持無損壓縮，可以包含透明區(qū)域，包括PNG-8以及真色彩PNG（PNG-24和PNG-32）。與GIF格式相比，PNG格式的主要優(yōu)勢在于文件更小，支持alpha透明度調節(jié)（包括全透明、半透明、全不透明），并且色彩過渡更為自然流暢。但PNG格式不支持動畫效果。它