網(wǎng)頁設(shè)計與制作（微課版第3版）PPT完整全套教學(xué)課件

第1章網(wǎng)頁制作與HTML5基礎(chǔ)知識.pptx第2章網(wǎng)頁整體規(guī)劃與設(shè)計.pptx 第3章建立本地站點.pptx 第4章制作文本.pptx 第5章網(wǎng)頁中的多媒體.pptx 第6章網(wǎng)頁中的超鏈接.pptx 第7章表格使用與簡單頁面布局.pptx 第8章設(shè)計框架網(wǎng)頁.pptx 第9章CSS與Div布局.pptx 第10章行為.pptx 第11章網(wǎng)頁交互與特效.pptx 第12章網(wǎng)頁表單的應(yīng)用.pptx 第13章網(wǎng)站綜合設(shè)計與制作實例.pptx 網(wǎng)頁設(shè)計與制作（微課版第3版）網(wǎng)頁制作與HTML1基礎(chǔ)知識第1章本書編寫組網(wǎng)頁設(shè)計與制作（微課版第3版）1.1網(wǎng)頁制作的基礎(chǔ)知識1.2DreamweaverCS6概述1.3網(wǎng)頁標(biāo)準(zhǔn)技術(shù)與HTML51.4綜合實訓(xùn)案例學(xué)習(xí)目標(biāo)?了解網(wǎng)頁制作基礎(chǔ)知識；?了解網(wǎng)頁標(biāo)準(zhǔn)技術(shù)及HTML5常用標(biāo)簽，學(xué)會使用DreamweaverCS6制作網(wǎng)頁。1.1網(wǎng)頁制作的基礎(chǔ)知識1.1.1網(wǎng)頁的定義和分類1．按位置分類按在網(wǎng)站中的位置的不同，網(wǎng)頁可分為主頁和內(nèi)頁。2．按表現(xiàn)形式分類按表現(xiàn)形式的不同，網(wǎng)頁可分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁1.1.2網(wǎng)頁設(shè)計的相關(guān)概念在網(wǎng)頁制作過程中常常會遇到一些專業(yè)名詞，如站點、發(fā)布、瀏覽器、導(dǎo)航條、超鏈接、表單、URL、IP地址及域名，掌握這些專業(yè)名詞的具體含義才能輕松地制作網(wǎng)頁。1.1網(wǎng)頁制作的基礎(chǔ)知識1.1.3網(wǎng)頁的基本組成元素1．LogoLogo，中文意思為標(biāo)識、標(biāo)志等，是整個網(wǎng)站對外的標(biāo)識。2．BannerBanner，中文意思為旗幟或網(wǎng)幅，是一種由文本、圖像和動畫結(jié)合而成的網(wǎng)頁欄目。Banner的主要作用是顯示網(wǎng)站的各種廣告，包括網(wǎng)站自身產(chǎn)品的廣告和與其他企業(yè)合作放置的廣告。3．導(dǎo)航欄導(dǎo)航欄是網(wǎng)頁設(shè)計的重要內(nèi)容，網(wǎng)頁中的導(dǎo)航欄用于幫助用戶快速訪問所需內(nèi)容。根據(jù)網(wǎng)頁的大小及內(nèi)容多少，一個網(wǎng)頁可以設(shè)置多個導(dǎo)航欄，還可以設(shè)置多級的導(dǎo)航欄以顯示更多的導(dǎo)航內(nèi)容。1.1網(wǎng)頁制作的基礎(chǔ)知識1.1.3網(wǎng)頁的基本組成元素4．內(nèi)容欄內(nèi)容欄是網(wǎng)頁的主體，通常由一個或多個子欄組成，包含網(wǎng)頁提供的絕大部分信息和服務(wù)項目。5．文本文本容量小，傳輸速度快，用戶可以快速地瀏覽和下載，是網(wǎng)頁主要的信息載體。網(wǎng)頁中文本的樣式多變，風(fēng)格不一，能吸引用戶的網(wǎng)頁通常都具有美觀的文本樣式。6．圖像圖像比文本更具生動性和直觀性，它可以傳遞一些文本不能傳遞的信息，Logo、背景等一般都是圖像。1.1網(wǎng)頁制作的基礎(chǔ)知識1.1.3網(wǎng)頁的基本組成元素7．按鈕按鈕的大小沒有具體的規(guī)定，需注意的是，按鈕要和網(wǎng)頁的整體效果保持協(xié)調(diào)。按鈕一般采用背景較淡、文字顏色較深的形式，也可采用對比度較強的顏色。8．Flash動畫Flash動畫越來越多地在網(wǎng)頁設(shè)計中應(yīng)用，適合自身風(fēng)格的動畫元素可以展現(xiàn)網(wǎng)站形象或者展示信息。9．版尾版尾是整個網(wǎng)頁的收尾部分。在這部分內(nèi)容中，可以聲明網(wǎng)頁的版權(quán)、法律依據(jù)，以及為用戶提供各種提示信息等。1.1網(wǎng)頁制作的基礎(chǔ)知識1.1.4網(wǎng)頁制作工具1．“記事本”程序HTML代碼可以使用Windows操作系統(tǒng)自帶的“記事本”（Notepad）進行編寫。使用時只需選擇“開始”→“程序”→“附件”命令即可找到“記事本”程序“開始”菜單中的“記事本”程序1.1網(wǎng)頁制作的基礎(chǔ)知識1.1.4網(wǎng)頁制作工具2．EditPlus編輯器EditPlus是一款非常好用的HTML編輯器，除了支持顏色標(biāo)記、HTML標(biāo)記，同時還支持C語言、C++、Java等編程語言。另外，它還有完整的CSS指令功能，編寫網(wǎng)頁代碼可達到事半功倍的效果1.1網(wǎng)頁制作的基礎(chǔ)知識1.1.4網(wǎng)頁制作工具2．EditPlus編輯器EditPlus是一款非常好用的HTML編輯器，除了支持顏色標(biāo)記、HTML標(biāo)記，同時還支持C語言、C++、Java等編程語言。另外，它還有完整的CSS指令功能，編寫網(wǎng)頁代碼可達到事半功倍的效果1.1網(wǎng)頁制作的基礎(chǔ)知識1.1.4網(wǎng)頁制作工具2．EditPlus編輯器EditPlus是一款非常好用的HTML編輯器，除了支持顏色標(biāo)記、HTML標(biāo)記，同時還支持C語言、C++、Java等編程語言。另外，它還有完整的CSS指令功能，編寫網(wǎng)頁代碼可達到事半功倍的效果1.1網(wǎng)頁制作的基礎(chǔ)知識1.1.4網(wǎng)頁制作工具3．網(wǎng)頁開發(fā)工具是可視化的網(wǎng)頁開發(fā)工具，強調(diào)“所見即所得（WhatYouSeeisWhatYouGet）”，如DreamweaverCS6。4．圖像處理軟件在制作網(wǎng)頁時常用的圖像處理軟件是Photoshop和Fireworks。5．動畫制作軟件Flash動畫是網(wǎng)頁中普遍使用的一種動畫，它需要使用Flash軟件進行制作。GIF動畫可以使用Fireworks或AdobeImageReady進行制作。6．網(wǎng)頁配色軟件使用一些專門的網(wǎng)頁配色軟件可以方便地創(chuàng)建網(wǎng)頁色彩方案，如玩轉(zhuǎn)顏色和網(wǎng)頁本色等。某些網(wǎng)站也提供網(wǎng)頁配色的設(shè)計，如藍色理想等。1.1網(wǎng)頁制作的基礎(chǔ)知識1.1.5如何學(xué)好網(wǎng)頁制作網(wǎng)頁制作分為前臺制作和后臺制作，前臺制作主要是生成靜態(tài)網(wǎng)頁，而后臺制作則需要編寫程序以實現(xiàn)網(wǎng)頁與數(shù)據(jù)庫的交互。學(xué)習(xí)網(wǎng)頁制作是一個循序漸進的過程，除了需要勤學(xué)多練，還需要在美學(xué)方面有一定的積累。●在學(xué)習(xí)網(wǎng)頁制作時，應(yīng)先從最簡單的網(wǎng)頁入手，由易到難。學(xué)習(xí)過程中應(yīng)注重理論聯(lián)系實際，這樣可增強學(xué)習(xí)興趣。●網(wǎng)頁制作不能閉門造車，需對優(yōu)秀的網(wǎng)頁進行分析和借鑒，同時也要不斷創(chuàng)新，大膽嘗試各種制作方法?！裨趯W(xué)習(xí)網(wǎng)頁制作的初期階段不必太關(guān)注網(wǎng)頁設(shè)計語言，在有一定網(wǎng)頁設(shè)計基礎(chǔ)后，再學(xué)習(xí)一些語言（如HTML、JavaScript和CSS等）。1.2DreamweaverCS6概述1.2.1啟動與退出DreamweaverCS6●啟動Dreamweaver的方法有兩種：（1）在桌面上找到Dreamweaver程序的快捷方式圖標(biāo)，用鼠標(biāo)左鍵雙擊圖標(biāo)。（2）打開“開始”菜單—“程序”—“DreamweaverCS6”，用鼠標(biāo)左鍵單擊啟動DreamweaverCS6，打開的界面如圖所示。1.2DreamweaverCS6概述1.2.2DreamweaverCS6的工作界面●用新建或打開一個網(wǎng)頁的方式進入DreamweaverCS6的工作界面，下面將重點介紹工作界面中的文檔工具欄、“屬性”面板和浮動面板組。1.2DreamweaverCS6概述1.2.2DreamweaverCS6的工作界面1．文檔工具欄此工具欄包含一些按鈕，提供各種“文檔”窗口視圖（用戶可以通過文檔工具欄在“代碼”視圖、“拆分”視圖和“設(shè)計”視圖3種視圖中切換。1.2DreamweaverCS6概述1.2.2DreamweaverCS6的工作界面2．“屬性”面板“屬性”面板主要用來檢查和編輯當(dāng)前選定的頁面元素（如文本和插入的對象）的常用屬性。“屬性”面板中的內(nèi)容根據(jù)選定的元素會有所不同。1.2DreamweaverCS6概述1.2.2DreamweaverCS6的工作界面3．浮動面板組DreamweaverCS6中的其他面板統(tǒng)稱為浮動面板組1.3網(wǎng)頁標(biāo)準(zhǔn)技術(shù)與HTML51.3.1網(wǎng)頁結(jié)構(gòu)語言1．XHTML1.0結(jié)構(gòu)語言XHTML是由HTML發(fā)展而來的一種網(wǎng)頁編寫語言，也是目前最常見的網(wǎng)頁編寫語言之一。2000年1月26日，XHTML正式被W3C批準(zhǔn)為網(wǎng)頁設(shè)計的國際標(biāo)準(zhǔn)語言，替代了早期的HTML3.2和HTML4.01。2．HTML5結(jié)構(gòu)語言隨著智能手機、平板電腦等便攜式數(shù)碼設(shè)備的普及，傳統(tǒng)的XHTML逐漸不能滿足人們對網(wǎng)頁的圖像顯示與媒體播放的需求?；诖?，W3C和蘋果等公司協(xié)作制定了網(wǎng)頁結(jié)構(gòu)語言標(biāo)準(zhǔn)，即HTML5標(biāo)準(zhǔn)。2013年5月6日，HTML5.1草案正式公布。：<!DOCTYPEHTML><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>網(wǎng)頁標(biāo)題</title></head><body><header></header><--!版頭--><nav></nav><--!導(dǎo)航條--><article><section><figure></figure><--!小節(jié)--></section><--!區(qū)域模塊--></article><--!主體文章內(nèi)容--><aside></aside><--!側(cè)欄內(nèi)容--><footer></footer><--!版尾--></body></html>一個典型的HTML5文檔結(jié)構(gòu)如下所示1.3網(wǎng)頁標(biāo)準(zhǔn)技術(shù)與HTML51.3.2網(wǎng)頁表現(xiàn)語言CSS是一種由W3C定義的數(shù)據(jù)表格式，其作用是為XML、HTML及XHTML等結(jié)構(gòu)化的文檔添加樣式描述，從而實現(xiàn)對文檔中內(nèi)容的排版和美化。CSS為標(biāo)記語言提供了一種樣式描述，定義了其中的元素顯示方式。CSS在設(shè)計領(lǐng)域是一個突破，僅通過CSS就能夠使網(wǎng)頁開發(fā)者控制所有出現(xiàn)在網(wǎng)頁中的外觀及布局，并且可以為每種標(biāo)記語言的元素和應(yīng)用該元素的每個頁面定義所需要的樣式。從而實現(xiàn)，簡單地改變樣式，所有與之相關(guān)的元素都會自動更新。CSS的出現(xiàn)還使網(wǎng)頁文檔中結(jié)構(gòu)與表現(xiàn)的分離成為可能。1.3網(wǎng)頁標(biāo)準(zhǔn)技術(shù)與HTML51.3.3網(wǎng)頁行為語言網(wǎng)頁行為語言包括多種類型，如JavaScript、JScript和VBScript等。這些語言的語法各有特點，且支持的Web瀏覽器各不相同，使網(wǎng)頁開發(fā)者往往需要花費大量的精力進行調(diào)試，因此，ECMA（europeancomputermanufacturersassociation，歐洲計算機制造商協(xié)會），一個國際性信息和電信標(biāo)準(zhǔn)化組織，以NetScape（網(wǎng)景）公司開發(fā)的JavaScript腳本語言為基礎(chǔ)，制定了ECMAScript腳本語言標(biāo)準(zhǔn)。ECMAScript通過一種被稱為DOM（documentobjectmodel，文檔對象模型）的技術(shù)實現(xiàn)對各種結(jié)構(gòu)化文檔的控制，可以根據(jù)程序的指令，動態(tài)地改變文檔中的內(nèi)容及描述文檔的CSS代碼。1.3網(wǎng)頁標(biāo)準(zhǔn)技術(shù)與HTML51.3.4在DreamweaverCS6中創(chuàng)建HTML5文檔1．在DreamweaverCS6中創(chuàng)建HTML5文檔的操作步驟在DreamweaverCS6的“新建文檔”對話框中選擇文檔類型，默認為“XHTML1.0Transitional”，若在“文檔類型”下拉列表中選擇“HTML5”，則可創(chuàng)建HTML5文檔，如圖1-16所示。2．HTML5空白文檔對應(yīng)的代碼單擊“文檔”工具欄中的“代碼”按鈕，可切換到“代碼”視圖，如圖所示。1.3網(wǎng)頁標(biāo)準(zhǔn)技術(shù)與HTML51.3.4在DreamweaverCS6中創(chuàng)建HTML5文檔1．在DreamweaverCS6中創(chuàng)建HTML5文檔的操作步驟在DreamweaverCS6的“新建文檔”對話框中選擇文檔類型，默認為“XHTML1.0Transitional”，若在“文檔類型”下拉列表中選擇“HTML5”，則可創(chuàng)建HTML5文檔。2．HTML5空白文檔對應(yīng)的代碼單擊“文檔”工具欄中的“代碼”按鈕，可切換到“代碼”視圖。1.3網(wǎng)頁標(biāo)準(zhǔn)技術(shù)與HTML51.3.4在DreamweaverCS6中創(chuàng)建HTML5文檔3．HTML5語法特色（1）HTML5所有標(biāo)簽必須閉合（2）HTML5所有標(biāo)簽和屬性必須小寫（3）屬性值必須加引號在HTML5中，必須為屬性值加引號，如：<tablewidth="130"></table>。（4）所有屬性都要被賦值與HTML不同，在HTML5中，屬性必須要被賦值。如果屬性沒有值，則把屬性名作為屬性值賦給屬性，如<tdnowrap="nowrap">。（5）不要在注釋內(nèi)容中使用“--”“--”只能出現(xiàn)在注釋的開頭和結(jié)尾。1.3網(wǎng)頁標(biāo)準(zhǔn)技術(shù)與HTML51.3.5HTML5常用標(biāo)簽1．布局標(biāo)簽（1）div標(biāo)簽div是division（劃分）的縮寫，其含意是區(qū)劃、分割區(qū)域。在網(wǎng)頁文檔中，<div>標(biāo)簽的作用是將HTML5文檔劃分成若干個區(qū)域，其格式如下：<div>此處是div管理的區(qū)域</div>div標(biāo)簽本身沒有默認顯示的邊框、背景色等修飾，它的高度與網(wǎng)頁文字高度相等，寬度與父標(biāo)簽的寬度相等。（2）ul、ol、li標(biāo)簽<ul>、<ol>和<li>標(biāo)簽用來實現(xiàn)普通的項目列表，其分別表示無序列表、有序列表和列表的項目。<ul><li>咖啡</li><li>茶<ul><li>紅茶</li><li>綠茶<ol><li>中國茶</li><li>非洲茶</li></ol></li></ul></li><li>牛奶</li></ul>例如，分別定義一個無序列表和一個有序列表的代碼如下：1.3網(wǎng)頁標(biāo)準(zhǔn)技術(shù)與HTML51.3.5HTML5常用標(biāo)簽1．布局標(biāo)簽（3）dl、dt、dd標(biāo)簽<dl>、<dt>、<dd>標(biāo)簽用來實現(xiàn)定義型列表，可對列表條目進行簡短的說明，具有定義術(shù)語和定義解釋兩個功能。（4）p標(biāo)簽HTML5中的段落標(biāo)簽<p>，用于將一個網(wǎng)頁中包含的文本與上下文分開。在默認狀態(tài)下，段落文本的上方和下方出現(xiàn)段落時，段落之間的間距默認為字體高度的50%，以把各段落明顯隔開。1.3網(wǎng)頁標(biāo)準(zhǔn)技術(shù)與HTML51.3.5HTML5常用標(biāo)簽1．布局標(biāo)簽（5）h1～h6標(biāo)簽HTML5提供了6對標(biāo)簽對：<h1>…</h1>，<h2>…</h2>，…，<h6>…</h6>，用于對文本中的標(biāo)題進行操作。使用<h1>…</h1>標(biāo)簽對的標(biāo)題是最大的標(biāo)題，而使用<h6>…</h6>標(biāo)簽對的標(biāo)題則是最小的標(biāo)題。（6）table、tr、th、td、thead、tbody、tfoot標(biāo)簽表格元素通常由表格的容器標(biāo)簽對<table>…</table>、表格標(biāo)題標(biāo)簽對<caption>…</caption>、表格行標(biāo)簽對<tr>…</tr>、表頭單元格標(biāo)簽對<th>…</th>、單元格標(biāo)簽對<td>…</td>組成。例如，插入一個2行3列的表格，設(shè)計結(jié)果如圖1-23所示?？赏ㄟ^對比“設(shè)計”視圖中“屬性”面板的屬性值與這些值在代碼中的應(yīng)用，1.3網(wǎng)頁標(biāo)準(zhǔn)技術(shù)與HTML51.3.5HTML5常用標(biāo)簽2．內(nèi)容標(biāo)簽內(nèi)容標(biāo)簽是用來顯示網(wǎng)頁中各種內(nèi)容的標(biāo)簽。其特點是基于行內(nèi)布局，相鄰的內(nèi)容標(biāo)簽不會換行，在一行中可以顯示多個內(nèi)容標(biāo)簽。常見的內(nèi)容標(biāo)簽主要有以下幾種。（1）a標(biāo)簽a是anchor（錨）的第一個字母，<a>標(biāo)簽是成對出現(xiàn)的，即<a>…</a>。該標(biāo)簽用于給網(wǎng)頁添加超鏈接，它包含的內(nèi)容可以是文本或圖像，是一種典型的沒有固定形狀、大小的標(biāo)簽。例如，鏈接到一個主頁面的超鏈接代碼如下：<a

href="古城西安風(fēng)光/index.html"

title="西安風(fēng)光">

返回網(wǎng)站首頁</a>例如，鏈接到一個主頁面的超鏈接代碼如下：<ahref="古城西安風(fēng)光/index.html"title="西安風(fēng)光">返回網(wǎng)站首頁</a>以上代碼實現(xiàn)的設(shè)計效果如圖1-24所示，在瀏覽器中的運行效果如圖所示。若單擊“返回網(wǎng)站首頁”，則可打開“西安風(fēng)光”主頁面。1.3網(wǎng)頁標(biāo)準(zhǔn)技術(shù)與HTML51.3.5HTML5常用標(biāo)簽2．內(nèi)容標(biāo)簽（2）br標(biāo)簽<br>標(biāo)簽是一個簡單的換行符，因為<br>標(biāo)簽是一個單獨的標(biāo)簽，所以在使用時必須使用“/”對其進行閉合處理，代碼如下：<br

/>（3）img標(biāo)簽img是image（圖像）的縮寫，<img>標(biāo)簽的作用是在網(wǎng)頁中顯示各種圖像內(nèi)容。<img>標(biāo)簽是一個單獨的標(biāo)簽，也要用“/”對其進行閉合處理。（4）span標(biāo)簽<span>標(biāo)簽用于表示范圍，通常用于為文本或者內(nèi)聯(lián)標(biāo)簽定義特殊的樣式，修飾特定內(nèi)容和局部區(qū)域等。例如，在下面一段文字中為某些關(guān)鍵詞語或語句應(yīng)用不同的文字樣式，代碼如下：<p>設(shè)計網(wǎng)頁是一項從藝術(shù)設(shè)計到頁面制作再到后臺開發(fā)的<spanstyle="color:red">系統(tǒng)工程</span>，需要應(yīng)用多種技術(shù)，使用各種相關(guān)的軟件才能完成。在學(xué)習(xí)設(shè)計網(wǎng)頁時，需要首先<spanstyle="text-decoration:underline">了解網(wǎng)頁的各種技術(shù)</span>，網(wǎng)頁布局、網(wǎng)頁配色，以及涉及的軟件。除此之外，<spanstyle="font-size:24px">使用最新版本的網(wǎng)頁制作軟件也可以最大限度地提高網(wǎng)頁制作的效率</span>。</p>1.4綜合實訓(xùn)案例1.4.1用文本文檔編寫一個網(wǎng)頁文檔任務(wù)１：用文本文檔編寫網(wǎng)頁文檔操作步驟：選擇“開始”→“程序”→“附件”→“記事本”命令，打開記事本。在記事本文檔中輸入下面的代碼，瀏覽器中顯示的效果如圖所示。1.4綜合實訓(xùn)案例1.4.2用DreamweaverCS6編寫網(wǎng)頁文檔任務(wù)２：用DreamweaverCS6制作簡單網(wǎng)頁操作步驟如下。打開DreamweaverCS6，在“設(shè)計”視圖中輸入一首古詩，切換到“代碼”視圖查看代碼。保存網(wǎng)頁文檔?？砂碏12鍵進行瀏覽，查看結(jié)果。1.4綜合實訓(xùn)案例1.4.3編寫代碼實現(xiàn)簡單網(wǎng)頁任務(wù)３：上網(wǎng)瀏覽一個網(wǎng)頁，并查看其源代碼操作步驟如下。打開新浪網(wǎng)首頁。在菜單欄中選擇“查看”→“源文件”命令，查看當(dāng)前網(wǎng)頁的源代碼。將此段代碼復(fù)制并粘貼到打開的記事本文檔中。在代碼中仔細找一找本章講過的有關(guān)標(biāo)簽，看看這些標(biāo)簽在網(wǎng)頁中的作用。1.4綜合實訓(xùn)案例1.4.3編寫代碼實現(xiàn)簡單網(wǎng)頁任務(wù)４：在記事本中編寫代碼，實現(xiàn)一個網(wǎng)頁操作步驟如下。打開記事本，在其中編寫代碼。保存為shici.txt文件后，將其擴展名.txt改為.html，即此時文件名為shici.html。雙擊該文件，在瀏覽器中的運行效果如圖1-33所示。注意在瀏覽器中觀察代碼中的文字“古詩一首”的位置。1.4綜合實訓(xùn)案例1.4.3編寫代碼實現(xiàn)簡單網(wǎng)頁任務(wù)５：在“設(shè)計”視圖中插入圖像操作步驟如下。打開DreamweaverCS6，在“設(shè)計”視圖中插入事先準(zhǔn)備好的圖像fengjing1.jpg。切換到“代碼”視圖查看代碼，如圖1-34所示。保存網(wǎng)頁文檔。按F12鍵進行瀏覽，查看結(jié)果。本章小結(jié)本章介紹了網(wǎng)頁制作基礎(chǔ)知識、網(wǎng)頁標(biāo)準(zhǔn)技術(shù)及HTML5常用標(biāo)簽，并用DreamweaverCS6制作了一些簡單網(wǎng)頁。網(wǎng)頁整體規(guī)劃與設(shè)計第2章本書編寫組網(wǎng)頁設(shè)計與制作（微課版第3版）2.1網(wǎng)頁設(shè)計基礎(chǔ)2.2網(wǎng)站與網(wǎng)頁的設(shè)計流程及主題的確定2.3需求分析與內(nèi)容組織2.4色彩基礎(chǔ)知識2.5網(wǎng)站中的色彩應(yīng)用2.6綜合實訓(xùn)案例5.75.85.9學(xué)習(xí)目標(biāo)?了解網(wǎng)頁設(shè)計的基礎(chǔ)知識；?了解網(wǎng)站需求分析和內(nèi)容組織；?了解色彩基礎(chǔ)知識。隨著國內(nèi)互聯(lián)網(wǎng)開發(fā)理論的發(fā)展，越來越多的網(wǎng)站開始更加注重網(wǎng)頁的頁面設(shè)計，優(yōu)秀的頁面設(shè)計可以為用戶提供視覺享受。本章主要介紹在網(wǎng)頁設(shè)計初期一些必備的基礎(chǔ)知識及準(zhǔn)備工作，包括網(wǎng)頁的布局、網(wǎng)站的前期規(guī)劃和內(nèi)容組織、色彩基礎(chǔ)知識等。2.1網(wǎng)頁設(shè)計基礎(chǔ)2.1.1網(wǎng)頁布局類型網(wǎng)頁布局類型有很多，大致可分為一字型結(jié)構(gòu)、左右型結(jié)構(gòu)、川字型結(jié)構(gòu)、二字型結(jié)構(gòu)、三字型結(jié)構(gòu)、廠字型結(jié)構(gòu)、匡字型結(jié)構(gòu)、同字型結(jié)構(gòu)及回字型結(jié)構(gòu)等，下面介紹幾種常見的類型。1．一字型結(jié)構(gòu)一字型結(jié)構(gòu)是最簡單的網(wǎng)頁布局類型，無論是從縱向上看還是從橫向上看都只有一欄，常常居中顯示，它是其他布局類型的基礎(chǔ)。2.1網(wǎng)頁設(shè)計基礎(chǔ)2.1.1網(wǎng)頁布局類型2．左右型結(jié)構(gòu)左右型結(jié)構(gòu)是將網(wǎng)頁在垂直方向上分割為左、右兩欄，兩欄的寬度不同，由左右兩欄構(gòu)成，一邊是導(dǎo)航鏈接，一邊是正文。這種結(jié)構(gòu)的網(wǎng)頁內(nèi)容非常清晰，一目了然。2.1網(wǎng)頁設(shè)計基礎(chǔ)2.1.1網(wǎng)頁布局類型3．川字型結(jié)構(gòu)川字型結(jié)構(gòu)是將網(wǎng)頁在垂直方向上分割為左、中、右3欄，左右兩欄的寬度較小，中欄的寬度較大。網(wǎng)頁的內(nèi)容按欄目分布在這3列中，能最大限度地突出主頁的導(dǎo)航功能。2.1網(wǎng)頁設(shè)計基礎(chǔ)2.1.1網(wǎng)頁布局類型4．二字型結(jié)構(gòu)二字型結(jié)構(gòu)將網(wǎng)頁在水平方向上分割為上、下兩欄，兩欄的高度不同。這種結(jié)構(gòu)的網(wǎng)頁上面往往是標(biāo)題，下面是正文，一些展示文章的網(wǎng)頁或注冊頁面等就是這種類型。2.1網(wǎng)頁設(shè)計基礎(chǔ)2.1.1網(wǎng)頁布局類型5．三字型結(jié)構(gòu)三字型結(jié)構(gòu)是將網(wǎng)頁在水平方向上分割為上、中、下3欄，上下兩欄的高度較小，中欄的高度較大。這種布局的特點是簡潔明了，在網(wǎng)頁中用橫向兩條色塊將網(wǎng)頁整體分割為3部分，兩條色塊中主要放置廣告條、更新和版權(quán)提示。2.1網(wǎng)頁設(shè)計基礎(chǔ)2.1.1網(wǎng)頁布局類型6．廠字型結(jié)構(gòu)廠字型結(jié)構(gòu)是將網(wǎng)頁在水平方向上分割為上、下兩欄，下欄又分為左右兩欄。廠字型結(jié)構(gòu)的網(wǎng)頁頂部即上欄常常為“標(biāo)志+廣告條”，下欄的左側(cè)為主菜單，下欄的右側(cè)顯示正文內(nèi)容。這是網(wǎng)頁設(shè)計中使用非常廣泛的一種布局類型，一般用于企事業(yè)網(wǎng)站中的二級頁面。這種布局的優(yōu)點是頁面結(jié)構(gòu)清晰、主次分明，使初學(xué)者容易上手。2.1網(wǎng)頁設(shè)計基礎(chǔ)2.1.1網(wǎng)頁布局類型7．匡字型結(jié)構(gòu)匡字型結(jié)構(gòu)是將網(wǎng)頁分割為上、中、下3欄，中欄又分為左右兩欄。這種布局的頂部即上欄常常是標(biāo)題及廣告；中欄的左側(cè)是鏈接，中欄的右側(cè)是正文；下欄是網(wǎng)站的輔助信息。2.1網(wǎng)頁設(shè)計基礎(chǔ)2.1.1網(wǎng)頁布局類型8．同字型結(jié)構(gòu)同字型結(jié)構(gòu)是將網(wǎng)頁分割為上、下兩欄，下欄又分為左、中、右3欄。2.1網(wǎng)頁設(shè)計基礎(chǔ)2.1.1網(wǎng)頁布局類型9．回字型結(jié)構(gòu)回字型結(jié)構(gòu)是將網(wǎng)頁分割為上、中、下3欄，中欄又分為左、中、右3欄?；刈中途W(wǎng)頁頂部即上欄常常是網(wǎng)站的標(biāo)志、廣告及導(dǎo)航欄；中欄是網(wǎng)站的主要內(nèi)容，左右分別列出一些欄目，中間是主要部分；下欄是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是一些大中型網(wǎng)站常見的布局類型。其優(yōu)點是充分利用版面，信息量大；缺點是頁面顯得擁擠，不夠靈活。2.1網(wǎng)頁設(shè)計基礎(chǔ)2.1.2網(wǎng)頁整體造型網(wǎng)頁整體造型是指頁面的整體形象設(shè)計，這種形象是圖形與文本的組合。頁面元素的基本形狀有矩形、圓形、三角形、菱形等，利用這些形狀可以塑造出豐富的頁面形象。使用形狀時，往往要考慮形狀的基本特性，從而根據(jù)頁面的作用或主題來選擇不同的形狀。如矩形代表著正式、規(guī)則，很多政府網(wǎng)頁都是以矩形為頁面整體造型；圓形代表著柔和、團結(jié)、溫暖、安全等，因此許多時尚站點喜歡以圓形為頁面整體造型；三角形代表著力量、權(quán)威、牢固、侵略等，許多大型的商業(yè)站點為顯示它的權(quán)威性，常以三角形為頁面整體造型；菱形代表著平衡、協(xié)調(diào)、公平，一些交友網(wǎng)站常以菱形為頁面整體造型。實際多數(shù)網(wǎng)頁是利用多個形狀并結(jié)合動態(tài)網(wǎng)站設(shè)計技巧加以設(shè)計的。2.1網(wǎng)頁設(shè)計基礎(chǔ)2.1.3網(wǎng)頁設(shè)計要素1．內(nèi)容網(wǎng)頁必須有實質(zhì)性的信息，并且能恰當(dāng)、完全地將這些信息展示出來。2．美觀網(wǎng)頁的外觀是用戶的第一印象，一個設(shè)計美觀的網(wǎng)頁能給用戶帶來愉悅的體驗。但美觀不等于花哨，有時簡樸的設(shè)計也能給人享受。3．簡單復(fù)雜的設(shè)計會給用戶帶來糟糕的體驗，使用戶迷失方向，不知道如何操作，從而產(chǎn)生挫敗感，造成用戶的反感。4．高效好的網(wǎng)頁要求能高效地被瀏覽器解釋執(zhí)行，網(wǎng)頁不能以犧牲用戶瀏覽、操作的時間來換取界面的美觀效果。2.2網(wǎng)站與網(wǎng)頁的設(shè)計流程及主題的確定2.2.1網(wǎng)站與網(wǎng)頁的設(shè)計流程1．網(wǎng)站的前期策劃和搜集資料2．根據(jù)網(wǎng)站的模式、特點及制作規(guī)范定制出最適當(dāng)?shù)臉?biāo)準(zhǔn)樣式3．設(shè)計人員進行二級頁面設(shè)計工作4．制作人員開始制作工作（1）定義站點（2）建立網(wǎng)站結(jié)構(gòu)（3）設(shè)計和制作首頁（4）設(shè)計與制作其他頁面（5）完成5．測試與維護2.2網(wǎng)站與網(wǎng)頁的設(shè)計流程及主題的確定2.2.2網(wǎng)站主題的確定互聯(lián)網(wǎng)上具有相似性質(zhì)、共同內(nèi)容的一組信息資源就是一個網(wǎng)站，構(gòu)成網(wǎng)站的基本元素是文件及存放文件的文件夾。網(wǎng)站選題的主要工作是根據(jù)網(wǎng)站的建設(shè)目標(biāo)和訪問網(wǎng)站的用戶群來確立網(wǎng)站的主題，并給網(wǎng)站起一個簡明的名稱，然后圍繞這個主題搜集素材和相關(guān)資料，并把它們通過網(wǎng)頁的形式呈現(xiàn)出來。個人網(wǎng)站的選題可以涉及學(xué)習(xí)、生活、社會等各個方面，企業(yè)型的網(wǎng)站應(yīng)該選擇貼近企業(yè)發(fā)展的主題。網(wǎng)站名稱的確定是在建立網(wǎng)站過程中非常重要的一環(huán)，名字需要切題，這樣容易令人印象深刻，好的網(wǎng)站名稱可以是精練的、想象力豐富的、別具一格的，不但能反映出網(wǎng)站的主題，而且能吸引更多用戶。2.3需求分析與內(nèi)容組織2.3.1網(wǎng)站的需求分析網(wǎng)站需求分析的主要目的是搞清楚網(wǎng)站要做什么，從而確定網(wǎng)站的主題及實現(xiàn)細節(jié)。需求分析的主要任務(wù)有如下幾方面。1．確定對網(wǎng)站的綜合要求2．分析網(wǎng)站的數(shù)據(jù)要求3．導(dǎo)出網(wǎng)站的邏輯模型4．修正網(wǎng)站開發(fā)計劃2.3需求分析與內(nèi)容組織2.3.2網(wǎng)站的內(nèi)容組織在明確網(wǎng)站的需求之后，接下來的工作就是網(wǎng)站制作。首先需要了解網(wǎng)站的總體設(shè)計和內(nèi)容組織情況，如主要的欄目排版等。1．規(guī)劃草圖2．規(guī)劃頁面結(jié)構(gòu)3．規(guī)劃站點結(jié)構(gòu)4．網(wǎng)站內(nèi)容的組織2.4色彩基礎(chǔ)知識2.4.1色彩理論1．色彩基本概念（1）色相色相（hue）也稱色澤，是顏色的基本特征，反映了顏色的基本相貌。色相是在0°～360°的標(biāo)準(zhǔn)色輪上，按位置度量的。在通常的使用過程中，色相由顏色名稱標(biāo)識，如紅色、綠色或橙色等。（2）飽和度飽和度（saturation）也稱純度，指顏色的純潔程度。飽和度表示色相中彩色成分所占的比例，用0（灰）～100%（完全飽和）進行度量。（3）明度明度（brightness、lightness或luminosity）也稱亮度，指顏色的深淺程度，通常用0（黑）～100%（白）進行度量。2.4色彩基礎(chǔ)知識2.4.1色彩理論2．色彩的三原色計算機屏幕的色彩是由RGB（紅、綠、藍）3種色光所合成的，可通過調(diào)整這3種基色來調(diào)配出其他的顏色。許多圖像處理軟件都提供了色彩調(diào)配功能，可輸入紅、綠、藍3種基色的數(shù)值來調(diào)配顏色，也可直接根據(jù)軟件提供的調(diào)色板來選擇顏色?！袢?。全彩（fullcolor）是指RGB三色光能顯示的所有顏色，每一種色光以8位表示，各有256種階調(diào)，三色光交互增減，可以顯示24位的16777216種顏色（256×256×256=16777216），這是計算機所能顯示的最多色彩，也就是一般所說的RGB真彩（turecolor）?！?位色。8位色是指有256種階調(diào)或者是256種色彩的影像，而常常見到的GIF格式的圖像文件就是帶有256種色彩的圖像文件。2.4色彩基礎(chǔ)知識2.4.1色彩理論3．色輪的主要組成所有的色彩都能在一個色輪中呈現(xiàn)（讀者可自行查閱，觀察色彩表現(xiàn)形式）。在色輪中，一般把顏色分成三大部分，即原色、輔助色和第三顏色。原色分別是紅色、綠色和藍色，這3種顏色是基礎(chǔ)色，它們能夠組成色輪上的所有其他顏色。通過混合原色，可以得到輔助色，它們分別是橙色、綠色和紫色。第三顏色是由中間色組成的，由一個原色和一個輔助色混合而成，如黃綠色和藍綠色。2.4色彩基礎(chǔ)知識2.4.1色彩理論4．顏色的關(guān)系色彩中有大量的術(shù)語來描述顏色的關(guān)系，了解這些術(shù)語有助于設(shè)計者分析色彩、搭配色彩和了解色彩的情感含義。例如，互補色，又叫對比色，是互補互調(diào)的色彩，它們在色輪上處于相對的位置，如藍色和橙色、紫色和黃色，以及紅色和綠色。對比色可以產(chǎn)生強烈的視覺效果，給我刺激、亮麗、鮮艷、喜慶的感覺。鄰色是色輪上相鄰的顏色，鄰色一起使用是很好的搭配，但不會有明顯的對比。2.4色彩基礎(chǔ)知識2.4.2216網(wǎng)頁安全色216網(wǎng)頁安全色是指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中都能夠正常顯示的顏色集合（調(diào)色板），這些顏色在任何終端顯示設(shè)備上的效果都是相同的。使用216網(wǎng)頁安全色進行網(wǎng)頁配色可以避免顏色失真的問題。216網(wǎng)頁安全色是根據(jù)計算機設(shè)備的情況并通過無數(shù)次反復(fù)分析論證得到的結(jié)果，這對于網(wǎng)頁設(shè)計師來說是必備的常識，利用它可以擬定出更安全、更出色的網(wǎng)頁配色方案。2.5網(wǎng)站中的色彩應(yīng)用2.5.1網(wǎng)頁色彩搭配規(guī)則在網(wǎng)頁設(shè)計中，大多數(shù)企業(yè)往往過多地看重網(wǎng)頁布局，卻忽略了網(wǎng)頁色彩的搭配。網(wǎng)頁的色彩搭配其實對用戶的瀏覽體驗有著很重要的影響，它有一定的規(guī)則和技巧。只有熟練掌握這些規(guī)則和技巧，才能制作出一個優(yōu)秀的網(wǎng)頁。網(wǎng)頁的配色規(guī)則是根據(jù)網(wǎng)頁不同位置、不同功能而設(shè)定的。下面將對網(wǎng)頁標(biāo)題、網(wǎng)頁標(biāo)志、網(wǎng)頁文字及網(wǎng)頁鏈接依次進行介紹。1．網(wǎng)頁標(biāo)題2．網(wǎng)頁標(biāo)志3．網(wǎng)頁文字4．網(wǎng)頁鏈接2.5網(wǎng)站中的色彩應(yīng)用2.5.2網(wǎng)頁元素之間的色彩搭配1．網(wǎng)頁色彩搭配的基本原理●色彩的鮮明性●色彩的獨特性●色彩的匹配性●色彩的聯(lián)想性2．黑白灰色彩的應(yīng)用灰色是萬能色，可以和任何色彩搭配，在一些色彩明度較高的網(wǎng)站中配以灰色，可以適當(dāng)?shù)亟档兔鞫取０咨蔷W(wǎng)站中使用最普遍的色彩之一，甚至很多網(wǎng)站用大塊的白色空間作為網(wǎng)站的組成部分。留白可以給人遐想的空間，讓人可以充分發(fā)揮想象力，網(wǎng)頁設(shè)計中恰當(dāng)?shù)牧舭讓f(xié)調(diào)頁面也有相當(dāng)大的作用。2.5網(wǎng)站中的色彩應(yīng)用2.5.2網(wǎng)頁元素之間的色彩搭配3．確定主色調(diào)一個網(wǎng)站不能單一地運用一種色彩，否則就會讓人感覺單調(diào)、乏味，但是如果將所有的色彩都運用到網(wǎng)站中則會給人輕浮、花哨的感覺，所以一個網(wǎng)站必須有一種或兩種主色調(diào)，這樣才不會讓用戶迷失方向，網(wǎng)站也不至于單調(diào)、乏味。確定網(wǎng)站的主色調(diào)有以下幾種方法。●用一種色彩●用兩種色彩●用一個色系●根據(jù)企業(yè)不同的文化背景適當(dāng)?shù)剡x擇顏色。2.6綜合實訓(xùn)案例：飾品銷售網(wǎng)站主頁整體設(shè)計主頁整體設(shè)計的主要工作是根據(jù)網(wǎng)站的主題，確定主頁的布局及色彩搭配，并結(jié)合美工設(shè)計效果圖，主要工作如下。1．網(wǎng)站主題2．主頁布局3．色彩搭配4．效果圖本章小結(jié)在學(xué)習(xí)設(shè)計和制作網(wǎng)頁的方法前，需要先了解一些網(wǎng)頁設(shè)計的相關(guān)知識，如網(wǎng)頁的設(shè)計流程、網(wǎng)頁的內(nèi)容組織、網(wǎng)頁的布局方式和網(wǎng)頁的色彩搭配等。熟悉這些知識后，就可以開始設(shè)計自己的網(wǎng)頁作品了。建立本地站點第3章本書編寫組網(wǎng)頁設(shè)計與制作（微課版第3版）3.1本地站點3.2管理本地站點3.3綜合實訓(xùn)案例：創(chuàng)建“我的第一個站”學(xué)習(xí)目標(biāo)?理解站點的含義；?學(xué)會創(chuàng)建本地站點；?學(xué)會管理本地站點。在制作一個能夠被用戶在瀏覽器上瀏覽的網(wǎng)站前，首先需要在本地磁盤上制作這個網(wǎng)站，然后將這個網(wǎng)站上傳到互聯(lián)網(wǎng)的Web服務(wù)器上，這樣用戶通過Web服務(wù)器的域名或IP地址就可瀏覽這個網(wǎng)站。放置在本地磁盤上的網(wǎng)站稱為本地站點，處于互聯(lián)網(wǎng)Web服務(wù)器上的網(wǎng)站稱為遠程站點。3.1本地站點3.1.1什么是站點1．站點的概念站點是指屬于某個Web站點文檔的本地或遠程存儲位置。簡單地說，一個站點通常對應(yīng)一個本地或遠程的文件夾（包含網(wǎng)頁文檔及相關(guān)文件）。3.1本地站點3.1.1什么是站點2．站點類型●本地站點。即本地文件夾，存儲正在處理的文件。此文件夾通常位于本地計算機上，但也可能位于Web服務(wù)器上。●遠程站點。即遠程文件夾，存儲用于測試、生產(chǎn)和協(xié)作等用途的文件。遠程文件夾通常位于運行Web服務(wù)器的計算機上。遠程文件夾包含用戶從互聯(lián)網(wǎng)訪問的文件。右圖為一個Web服務(wù)器上的遠程站點文件夾示例。本地站點文件夾中的文件夾和文件應(yīng)與遠程站點文件夾中的文件夾和文件一一對應(yīng)。3.1本地站點3.1.1什么是站點1．創(chuàng)建本地站點文件夾建立本地站點就是在某臺計算機的硬盤上建立一個文件夾，然后將所有與制作網(wǎng)頁相關(guān)的文件（圖像、視頻等）都存放在里面，以便進行網(wǎng)頁的制作和管理。3.1本地站點3.1.2創(chuàng)建本地站點建立本地站點文件夾時，應(yīng)注意以下幾點。●不要將所有的文件都存放在根文件夾下，否則容易混淆，不利于管理和上傳?！癜凑瘴募念愋徒⒉煌淖游募A?！窀募A、子文件夾、文件的命名最好使用簡短而又有一定含義的小寫英文或拼音。3.1本地站點3.1.2創(chuàng)建本地站點1.創(chuàng)建本地站點文件夾在磁盤上建立一個文件夾（如D:\mysite），用于存放站點中所有的文件夾和文件，然后在mysite文件夾下新建3個名稱為images、styles和videos的子文件夾。images文件夾用于存放站點中所有裝飾網(wǎng)頁的圖像文件，styles文件夾用于存放所有的CSS文件，videos文件夾用于存放站點中所有的視頻文件。3.1本地站點3.1.2創(chuàng)建本地站點2．使用向?qū)Ы⒄军c下面利用DreamweaverCS6的向?qū)?chuàng)建一個本地站點，具體操作步驟如下。①打開DreamweaverCS6，在菜單欄中選擇“站點”→“新建站點”命令，彈出“站點設(shè)置對象mysite”對話框。3.1本地站點3.1.2創(chuàng)建本地站點在“站點名稱”文本框中輸入站點的名稱，如mysite。單擊“本地站點文件夾”文本框后的按鈕，打開“選擇根文件夾”對話框，選擇D盤下mysite文件夾作為根文件夾，當(dāng)對話框左下角顯示“選擇：mysite”時，單擊“選擇”按鈕，回到“站點設(shè)置對象”對話框。3.1本地站點3.1.2創(chuàng)建本地站點②單擊“保存”按鈕。在DreamweaverCS6界面右下角會出現(xiàn)“文件”面板，表示“mysite”站點已經(jīng)創(chuàng)建成功。3.1本地站點3.1.2創(chuàng)建本地站點3.2管理本地站點3.2.1切換站點在DreamweaverCS6界面右側(cè)“文件”面板中選中某個已創(chuàng)建的站點，就可以切換到這個站點并對其進行相應(yīng)的操作。3.2管理本地站點3.2.2站點的其他操作1．“管理站點”對話框如要對站點進行管理，在菜單欄中選擇“站點”→“管理站點”命令，彈出“管理站點”對話框。3.2管理本地站點3.2.2站點的其他操作在“管理站點”對話框中，選中“您的站點”中某個已建立的站點，即可對其進行新建站點、編輯站點、復(fù)制站點、刪除站點、導(dǎo)入或?qū)С稣军c等操作。對話框下方的按鈕（使用“新建站點”按鈕時不需要先選中站點）功能如下所示?！裥陆ㄕ军c●編輯●復(fù)制●刪除●導(dǎo)出●導(dǎo)入站點3.2管理本地站點3.2.2站點的其他操作●導(dǎo)出。單擊按鈕，彈出“導(dǎo)出站點”對話框，如圖所示。3.2管理本地站點3.2.2站點的其他操作●導(dǎo)入站點。單擊按鈕，彈出“導(dǎo)入站點”對話框。3.2管理本地站點3.2.2站點的其他操作任務(wù)1：復(fù)制站點①在菜單欄中選擇“站點”→“管理站點”命令，彈出“管理站點”對話框。②選中mysite站點，單擊“復(fù)制”按鈕，生成“mysite復(fù)制”站點。③選中“mysite復(fù)制”站點，單擊“編輯”按鈕。④在彈出的對話框中修改站點名稱為mysite2，單擊保存。3.2管理本地站點3.2.2站點的其他操作2．在“文件”面板中管理文件夾和文件對站點文件夾和文件的管理主要包括新建、復(fù)制、移動、重命名、刪除等操作。（1）新建文件或文件夾要在站點中新建文件或文件夾，可在“文件”面板上選擇要操作的站點，選擇“本地視圖”，在站點的根目錄上右擊，在彈出的快捷菜單中選擇“新建文件”或“新建文件夾”。3.2管理本地站點3.2.2站點的其他操作（2）復(fù)制文件或文件夾要在站點中復(fù)制文件或文件夾，可在“文件”面板上選擇并右擊要操作的文件或文件夾，在彈出的快捷菜單中選擇“編輯”→“復(fù)制”。然后在目標(biāo)文件夾中右擊，在彈出的快捷菜單中選擇“編輯”→“粘貼”。3.2管理本地站點3.2.2站點的其他操作復(fù)制文件或文件夾的另外兩種方法如下所示?！袷褂媒M合鍵。選中準(zhǔn)備復(fù)制的文件或文件夾，按【Ctrl+C】組合鍵復(fù)制，然后選擇要復(fù)制的目標(biāo)文件夾，按【Ctrl+V】組合鍵粘貼?！裼覔粢獜?fù)制的文件或文件夾，在彈出的快捷菜單中選擇“編輯”→“拷貝”，可在要復(fù)制的文件或文件夾所在目錄下直接復(fù)制生成一個副本文件。3.2管理本地站點3.2.2站點的其他操作（3）移動文件或文件夾要在站點中移動文件或文件夾，可在“文件”面板上選擇并右擊要操作的文件或文件夾，在彈出的快捷菜單中選擇“編輯”→“剪切”。然后在目標(biāo)文件夾中右擊，在彈出的快捷菜單中選擇“編輯”→“粘貼”。移動文件或文件夾的另一種方法是使用組合鍵：選中準(zhǔn)備移動的文件或文件夾，按【Ctrl+X】組合鍵剪切，然后選擇要移動的目標(biāo)文件夾，按【Ctrl+V】組合鍵粘貼。3.2管理本地站點3.2.2站點的其他操作（4）重命名文件或文件夾要在站點中重命名文件或文件夾，可在“文件”面板上選擇并右擊要操作的文件或文件夾，在彈出的快捷菜單中選擇“編輯”→“重命名”。等選中文件的名稱變?yōu)榭删庉嫚顟B(tài)后，輸入新的文件名稱，按Enter鍵，完成重命名操作。3.2管理本地站點3.2.2站點的其他操作重命名文件或文件夾的另外兩種方法如下。●連續(xù)單擊（注：不是雙擊）要重命名的文件或文件夾，等選中文件或文件夾的名稱變?yōu)榭删庉嫚顟B(tài)后，輸入新的文件或文件夾名稱即可?！襁x中要重命名的文件或文件夾，按F2鍵，等選中文件或文件夾的名稱變?yōu)榭删庉嫚顟B(tài)后即可重命名。3.2管理本地站點3.2.2站點的其他操作（5）刪除文件或文件夾要在站點中刪除文件或文件夾，可在“文件”面板上選擇并右擊要操作的文件或文件夾，在彈出的快捷菜單中選擇“編輯”→“刪除”，如圖3-11所示，完成刪除操作。刪除文件或文件夾的另一種方法是使用快捷鍵：選中準(zhǔn)備刪除的文件或文件夾，按Delete鍵刪除。3.2管理本地站點3.2.2站點的其他操作任務(wù)2：新建文件①在“文件”面板中右擊mysite站點。②在彈出的快捷菜單中選擇“新建文件”。③右擊新文件，在彈出的菜單中選擇“編輯”→“重命名”，命名為index.html。3.3綜合實訓(xùn)案例：創(chuàng)建“我的第一個站點”【內(nèi)容】創(chuàng)建一個站點，名稱為“我的第一個站點”，對應(yīng)的本地路徑是D:\MyFirstSite。在站點根目錄下新建網(wǎng)頁文件index.html。新建3個文件夾，名稱分別是：images、videos和styles。最后，導(dǎo)出站點到D:\MyFirstSite中，文件名為myfirstsite.ste。3.3綜合實訓(xùn)案例：創(chuàng)建“我的第一個站點”【目標(biāo)】通過本案例的練習(xí)，熟悉并掌握DreamweaverCS6中本地站點的創(chuàng)建和管理?！舅悸贰恳獎?chuàng)建一個站點，首先要在本地硬盤上建立一個文件夾，用來存放站點的內(nèi)容，然后在DreamweaverCS6菜單欄中選擇“站點”→“新建站點”創(chuàng)建站點，并選擇“站點”→“管理站點”命令對站點進行管理。3.3綜合實訓(xùn)案例：創(chuàng)建“我的第一個站點”【步驟】①在D盤創(chuàng)建一個文件夾，名稱為MyFirstSite。②啟動DreamweaverCS6，選擇“站點”→“新建站點”命令，打開“站點設(shè)置對象”對話框。③在“站點設(shè)置對象”對話框左側(cè)選擇“站點”，在右側(cè)的“站點名稱”文本框中輸入“我的第一個站點”，在“本地站點文件夾”文本框中輸入“D:\MyFirstSite\”。3.3綜合實訓(xùn)案例：創(chuàng)建“我的第一個站點”④在“文件”面板中選擇“本地視圖”，在站點的根目錄“站點

-

我的第一個站點”上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，文件夾名稱為images，然后用同樣的方式再創(chuàng)建兩個文件夾，其名稱分別是videos和styles。最終創(chuàng)建的文件夾如圖所示。3.3綜合實訓(xùn)案例：創(chuàng)建“我的第一個站點”⑤在“文件”面板中選擇“本地視圖”，在站點的根目錄“站點

-

我的第一個站點”上右擊，在彈出的快捷菜單中選擇“新建文件”命令，文件名稱為index.html，結(jié)果如圖所示。3.3綜合實訓(xùn)案例：創(chuàng)建“我的第一個站點”⑥在Dreamweaver菜單欄中選擇“站點”→“管理站點”命令，在彈出的“管理站點”對話框中單擊“導(dǎo)出”按鈕，彈出“導(dǎo)出站點”對話框，選擇路徑“D:\MyFirstSite”，在文件名文本框中輸入“myfirstsite”，保存類型默認為.ste，單擊“保存”按鈕即可導(dǎo)出站點設(shè)置信息。本章小結(jié)DreamweaverCS6的重要功能之一就是站點的管理，新建站點、導(dǎo)入已有的站點、多站點管理是開發(fā)者制作網(wǎng)頁之前必須掌握的基本操作。制作文本第4章本書編寫組網(wǎng)頁設(shè)計與制作（微課版第3版）4.1創(chuàng)建文檔4.2文本編輯4.3項目符號和編號4.4水平線、網(wǎng)格與標(biāo)尺4.5綜合實訓(xùn)案例：制作文本學(xué)習(xí)目標(biāo)?學(xué)習(xí)在網(wǎng)頁中創(chuàng)建文檔、保存文檔的方法；?能夠編輯網(wǎng)頁文檔中的文本內(nèi)容、設(shè)置文本格式；?能夠在文檔設(shè)計中應(yīng)用項目符號與編號；?能夠使用水平線、網(wǎng)格與標(biāo)尺等對頁面進行布局。網(wǎng)站是由一個個網(wǎng)頁文檔構(gòu)成的，文檔是網(wǎng)站的基本表現(xiàn)形式，在制作網(wǎng)頁時必須先了解網(wǎng)頁文檔的基本組成和基本操作。本章詳細介紹網(wǎng)頁文檔的創(chuàng)建、保存、打開，網(wǎng)頁文檔中文本的輸入，文本格式、段落格式、項目符號和編號的設(shè)置，特殊符號、水平線的插入，頁面屬性的設(shè)置等基本操作。4.1創(chuàng)建文檔4.1.1新建文檔啟動DreamweaverCS6后將出現(xiàn)圖4-1所示的起始頁面，在“新建”選項下單擊所需創(chuàng)建的文檔類型，就能創(chuàng)建一個文檔。如在起始頁面中單擊“HTML”，就能創(chuàng)建一個HTML格式的網(wǎng)頁文檔。4.1.2保存文檔文檔創(chuàng)建完成之后，在菜單欄中選擇“文件”→“保存”命令，就可以彈出“另存為”對話框。此時選擇保存路徑，將文件命名為適合頁面內(nèi)容的名稱。4.1創(chuàng)建文檔4.1.3打開文檔如果要打開已經(jīng)存在的網(wǎng)頁文檔，可以使用以下方法。啟動DreamweaverCS6，在菜單欄中選擇“文件”→“打開”命令，在彈出的對話框中選擇需要打開的文件，單擊“打開”按鈕，網(wǎng)頁文檔即可在窗口中打開。在站點窗口的列表文件中選擇要打開的網(wǎng)頁文檔，雙擊即可打開。4.2文本編輯4.2.1輸入文本文本是網(wǎng)頁的基本組成部分，人們通過網(wǎng)頁了解的信息大部分是從文本對象中獲得的。雖然圖像等多媒體在網(wǎng)頁應(yīng)用中所占的比例越來越高，但由于文本所占的存儲空間非常小，以文字為主體的網(wǎng)頁下載速度很快，可以提高網(wǎng)絡(luò)工作效率，因此文本仍然是信息傳遞的主體。只有將文本格式處理好，才能使網(wǎng)頁更加美觀、易讀、賞心悅目，激發(fā)用戶瀏覽的興趣。在編輯文本框中可以直接輸入文本，并可以對輸入的文本進行剪切、復(fù)制、粘貼等基本操作。4.2文本編輯4.2.1輸入文本1．插入文本將鼠標(biāo)指針移至頁面中需要輸入文本的位置并單擊，此時窗口中就會出現(xiàn)光標(biāo)，光標(biāo)停留的位置表示輸入文字的起始位置，然后選擇合適的輸入法，即可在網(wǎng)頁中輸入文字；另外，在DreamweaverCS6中，也可以從其他應(yīng)用程序中復(fù)制文本，將插入點定位在“文檔”窗口的“設(shè)計”視圖中，然后在菜單欄中選擇“編輯”→“粘貼”命令；還可以在菜單欄中選擇“文件”→“導(dǎo)入”命令導(dǎo)入已有的Word文檔。4.2文本編輯4.2.1輸入文本2．插入日期DreamweaverCS6提供了一個方便的日期對象，該對象使用戶可以以任何喜歡的格式插入當(dāng)前日期（包含或不包含時間都可以）。在菜單欄中選擇“插入”→“日期”命令，在彈出的對話框“插入日期”中選擇需要的格式。需要注意，“插入日期”對話框中顯示的日期和時間不是當(dāng)前日期和時間，也不是用戶在瀏覽站點時所看到的日期和時間，這里的日期和時間只是說明此信息的顯示方式。如果希望在每次保存文檔時都更新插入的日期和時間，可選擇“存儲時自動更新”選項，此后在保存文件時，其日期和時間也將同步更新。4.2文本編輯4.2.1輸入文本3．文本格式的分類網(wǎng)頁文檔中的文本分為標(biāo)題和段落兩種格式。在設(shè)置文本的具體格式時，需要打開“屬性”面板。在DreamweaverCS6中，“屬性”面板主要是用來設(shè)置選擇對象的屬性的，并且會根據(jù)選擇對象的不同而改變所需要設(shè)置的內(nèi)容?！皩傩浴泵姘逡话銜@示在當(dāng)前文檔的底部，可以通過菜單欄“窗口”→“屬性”命令打開。如果想要使頁面顯示區(qū)域更大一些，可以單擊“屬性”面板右上角的關(guān)閉按鈕，將暫時不需要的“屬性”面板關(guān)閉，需要時可再次通過“窗口”菜單打開。4.2文本編輯4.2.1輸入文本4．添加新的字體在設(shè)置字體時應(yīng)注意，DreamweaverCS6默認使用的是“默認字體”。如果選擇“默認字體”，那么在瀏覽網(wǎng)頁時，顯示的文字字體就是瀏覽器默認的字體。在DreamweaverCS6中，預(yù)設(shè)的可供選擇的字體組合一共有13種。如果需要使用這13種字體組合外的字體，則需要編輯新的字體組合。單擊“屬性”面板的“頁面屬性”按鈕，打開“頁面屬性”對話框，打開“外觀（CSS）”的“頁面字體”下拉列表框，選擇“編輯字體列表…”命令，彈出“編輯字體列表”對話框，在其中進行編輯即可。4.2文本編輯4.2.1輸入文本5．設(shè)置更多的文本屬性如果需要對當(dāng)前頁面中不同的文本設(shè)置不同的字體格式、顏色、大小等屬性，可單擊“屬性”面板中的“CSS”按鈕，通過建立CSS的方式，為當(dāng)前頁面的指定文字設(shè)置字號、顏色、對齊方式等樣式，具體內(nèi)容請參考本章中CSS設(shè)置的相關(guān)內(nèi)容。4.2文本編輯4.2.2設(shè)置文本格式1．通過HTML設(shè)置文本格式HTML對文本格式的設(shè)置主要是通過HTML的<h1>，…，<h6>標(biāo)簽來實現(xiàn)的，其基本表達方式如圖所示。4.2文本編輯4.2.2設(shè)置文本格式2．通過DreamweaverCS6設(shè)置文本格式，如圖所示。4.2文本編輯4.2.3設(shè)置文本樣式1．通過HTML設(shè)置文本樣式HTML對文本樣式的設(shè)置主要是通過HTML的<font>標(biāo)簽來實現(xiàn)的，文本的字體屬性face用來設(shè)定文本的字體，其屬性值有“宋體”“黑體”“楷體”“仿宋”等。基本格式為<fontface="屬性值">其基本表達方式如圖所示。4.2文本編輯4.2.3設(shè)置文本樣式文本的大小屬性size用來設(shè)定文本的字號，其屬性值是從1到7，或是從+1到+7，或是從?1到?7。文本的字號沒有絕對意義上的大小，只是相對于默認字體而言的大或小。基本格式為<fontsize=“屬性值”>。4.2文本編輯4.2.3設(shè)置文本樣式文本的顏色屬性color用來設(shè)定文本的顏色，其屬性值由十六進制數(shù)來表示紅、綠、藍（RGB），每個顏色的最低值為0（十六進制為00），最高值為255（十六進制為FF）。十六進制數(shù)的寫法為“#”號后跟三位或六位十六進制數(shù)符。三位數(shù)表示法為#RGB，轉(zhuǎn)換為六位數(shù)表示為#RRGGBB。屬性值不僅可以是十六進制代碼，也可以是表示顏色的英文單詞?；靖袷綖?lt;fontcolor=“屬性值”>。4.2文本編輯4.2.3設(shè)置文本樣式2．通過DreamweaverCS6設(shè)置文本樣式。利用DreamweaverCS6可以很容易地設(shè)置文本樣式?？梢赃x中文本后單擊鼠標(biāo)右鍵，在彈出的快捷菜單中利用“樣式”子菜單進行設(shè)置，如圖所示。4.2文本編輯4.2.3設(shè)置文本樣式3．通過CSS設(shè)置文本樣式CSS是一系列格式設(shè)置規(guī)則，它們可以用來控制網(wǎng)頁頁面內(nèi)容的外觀。在使用CSS設(shè)置文本樣式時，內(nèi)容和表現(xiàn)形式是相互分離的。4.2文本編輯4.2.3設(shè)置文本樣式在菜單欄中選擇“窗口”→“CSS樣式”命令，打開“CSS樣式”面板，單擊面板底部右側(cè)的“新建CSS規(guī)則”按鈕，將彈出“新建CSS規(guī)則”的對話框，在對話框中可以做相應(yīng)的設(shè)置與修改，如圖所示。4.2文本編輯4.2.3設(shè)置文本樣式在“新建CSS規(guī)則”對話框中，選擇“選擇器類型：”中的“類（可應(yīng)用于任何HTML元素）”選項，一般該選項默認是選擇的。在“選擇器名稱：”文本框中輸入“.text”，要確保在單詞“text”前輸入英文句號“.”，在此需要注意的是所有類樣式必須以英文句號開頭。單擊“確定”按鈕后彈出圖所示的對話框。4.2文本編輯4.2.3設(shè)置文本樣式在“.text的CSS規(guī)則定義”對話框中執(zhí)行如下操作。打開“Font-family”下拉列表框，使用上文介紹的添加字體列表的方法添加“微軟雅黑”字體。在“Font-size”文本框中輸入或選擇需要設(shè)置的字號“12”，并在右邊的下拉列表框中選擇“px”。在“Line-height”文本框中輸入“18”，表示CSS規(guī)則的行高是18，并在右邊的下拉列表框中選擇“px”。在“Font-weight”中選擇“bold”選項。在“Color”文本框中輸入“#09F”或者打開色彩面板選擇合適的顏色。單擊“確定”按鈕。4.2文本編輯4.2.3設(shè)置文本樣式單擊“CSS樣式”面板中的“全部”按鈕?？梢钥吹?，DreamweaverCS6已經(jīng)將“text”樣式添加到當(dāng)前的樣式表中。這時如果在“所有規(guī)則”面板中單擊“text”規(guī)則，那么該規(guī)則的屬性將會出現(xiàn)在“屬性”面板中。4．對網(wǎng)頁中的文字應(yīng)用樣式如果要將已經(jīng)設(shè)置好的樣式應(yīng)用到網(wǎng)頁頁面中去，首先選中需要設(shè)置為“text”樣式的文本，然后在頁面下方的“屬性”面板中單擊“HTML”按鈕，在“類”的下拉列表框中選擇“text”，此時選中的文本就被指定為“text”樣式了。4.2文本編輯4.2.4設(shè)置段落1．通過HTML設(shè)置段落在HTML中，<p>標(biāo)簽用來表示段落，<p>與</p>標(biāo)簽就是用來定義段落的，相當(dāng)于在文本中添加了一個回車符。當(dāng)兩個段落之間的間距較大時，就相當(dāng)于插入一個空白行。<p>標(biāo)簽的主要屬性如下。align：用來設(shè)定段落對齊方式，其屬性值有居中對齊center、左對齊left、右對齊right。class/id：用來設(shè)定應(yīng)用類/id。4.2文本編輯4.2.4設(shè)置段落2．通過DreamweaverCS6設(shè)置段落使用DreamweaverCS6也可以設(shè)置段落的對齊方式。方法為選中需要對齊的段落，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇具體的對齊方式。4.2文本編輯4.2.5在頁面中添加其他元素1．內(nèi)容注釋“<!--”和“--!>”標(biāo)簽是用來添加內(nèi)容注釋的，標(biāo)簽中間就是注釋內(nèi)容。注釋通?？梢圆逶谖谋镜娜魏蔚胤?，但是在瀏覽網(wǎng)頁時，注釋內(nèi)容不會顯示。2．圖像在網(wǎng)頁中插入圖像，實際上就是在網(wǎng)頁文件中插入一個鏈接。在HTML中，圖像由<img>標(biāo)簽定義。<img>是單獨的標(biāo)簽，沒有閉合標(biāo)簽，只包含屬性，并且要在頁面上顯示圖像，需要使用源屬性src。src是（源）source的縮寫，源屬性的值是圖像的URL。定義圖像的語法：<imgsrc="url"/>4.2文本編輯4.2.5在頁面中添加其他元素3．網(wǎng)頁背景在設(shè)定<body>標(biāo)簽屬性的值時，還可以設(shè)定網(wǎng)頁背景。一般設(shè)定網(wǎng)頁背景有兩種方式，一種是設(shè)定背景顏色，另一種是設(shè)定背景圖像（用圖像作為網(wǎng)頁的背景）。設(shè)定背景顏色，如：<bodybgcolor="#FFFF99">設(shè)定背景圖像，如：<bodybackground="images/bg.jpg">4.2文本編輯4.2.5在頁面中添加其他元素4．文字的修飾標(biāo)簽粗體標(biāo)簽<b>和<strong>，其語法如下：<b>加粗字體--b</b><strong>加粗字體--strong</strong>斜體標(biāo)簽<i>、<em>和<cite>，其語法如下：<i>傾斜字體--i</i><em>傾斜字體--em</em><cite>也是傾斜字體--cite</cite>4.2文本編輯4.2.5在頁面中添加其他元素4．文字的修飾標(biāo)簽下劃線標(biāo)簽<u>，其語法如下：<u>下劃線u</u>刪除線標(biāo)簽<s>和<strike>，其語法如下：<s>刪除線s</s><strike>刪除線strike</strike>水平線標(biāo)簽<hr/>。水平線標(biāo)簽<hr/>也是一個比較特殊的標(biāo)簽，是單獨的標(biāo)簽，但是可以添加附屬屬性。5．插入空格當(dāng)用戶在HTML文檔中輸入文字時，只能在文字字符之間插入一個空格，在兩個字符之間插入空格后，無論再怎么按Space鍵也不會產(chǎn)生新的空格。如果一定要使用多個空格，就必須使用不換行的特殊空格。4.2文本編輯4.2.5在頁面中添加其他元素5．插入空格要插入連續(xù)空格，首先要確定插入空格的位置，然后使用以下兩種方法之一插入不換行的特殊空格。在菜單欄中選擇“插入”→“HTML”→“特殊字符”→“不換行空格”命令。切換到“代碼”視圖，在需要插入空格的位置輸入代碼“ ”。4.2文本編輯4.2.5在頁面中添加其他元素6．插入特殊字符在HTML文檔中插入特殊字符有其獨特的方法，因為特殊字符與普通文字不同，它們不能通過鍵盤直接輸入，而且許多特殊字符也不包含在當(dāng)前文檔的字符編碼中。DreamweaverCS6中提供了常用的特殊字符，以便用戶使用。插入特殊字符的具體做法為：在文檔中將插入點定位在要插入特殊字符的位置，在菜單欄中選擇“插入”→“HTML”→“特殊字符”命令，選擇要插入的字符名稱。在當(dāng)前菜單的最后一行還有“其他字符”命令，以滿足用戶更多的需求。4.3項目符號和編號項目符號是指放在列表項之前用來強調(diào)效果的圓點或其他特殊符號，也就是在各項目前所標(biāo)注的符號。在內(nèi)容比較多的文檔中使用項目符號，可以讓文檔結(jié)構(gòu)更加清晰、有條理。在DreamweaverCS6中，用戶可以創(chuàng)建有序列表、無序列表。4.3.1添加項目符號和編號1．通過HTML添加項目符號或編號4.3項目符號和編號2．通過DreamweaverCS6添加項目符號或編號。打開需要添加項目符號或編號的文檔，選擇需要向其添加項目符號或編號的列表項，然后在“屬性”面板上執(zhí)行對應(yīng)操作。如果想要向文檔中添加項目符號，那么可單擊“項目符號”按鈕；如果想要添加編號，那么可單擊“編號”按鈕。此時項目符號或編號格式的默認值（或當(dāng)前所選）將會添加到列表項中，如圖所示。4.3項目符號和編號4.3.2修改項目符號和編號項目符號或編號的格式編輯在“列表屬性”對話框中進行。選擇要設(shè)置的文本，然后單擊鼠標(biāo)右鍵，選擇“列表”菜單下的“屬性”命令，在彈出的“列表屬性”對話框中進行設(shè)置，如圖所示。4.4水平線、網(wǎng)格與標(biāo)尺4.4.1水平線1．通過HTML設(shè)置水平線水平線標(biāo)簽<hr>可以用于在屏幕上顯示一條水平線，以分隔頁面中的不同部分。<hr>標(biāo)簽有以下幾個屬性。size：用來設(shè)置水平線的高度，單位為像素，默認值是2。width：用來設(shè)置水平線的長度，可以用絕對值和相對值表示。絕對值用像素來表示，相對值用占屏幕寬度的百分比來表示。align：用來設(shè)置水平線的對齊方式，默認值是center，還可設(shè)置為left、right。noshade：水平線無陰影屬性，為實心水平線。color：用來設(shè)置水平線的顏色，默認值是black。4.4水平線、網(wǎng)格與標(biāo)尺4.4.1水平線2．通過DreamweaverCS6設(shè)置水平線將鼠標(biāo)指針定位到要插入水平線的位置，然后在菜單欄中選擇“插入”→“HTML”→“水平線”命令；或者單擊“插入”工具欄中的“常用”標(biāo)簽，然后單擊“水平線”按鈕插入一條水平線。4.4水平線、網(wǎng)格與標(biāo)尺4.4.2網(wǎng)格與標(biāo)尺在DreamweaverCS6中，可以在“設(shè)計”視圖中使用標(biāo)尺和網(wǎng)格輔助網(wǎng)頁布局。標(biāo)尺一般從上到下顯示在編輯窗口的左邊和頂部，而網(wǎng)格顯示在網(wǎng)頁內(nèi)容的下方。如果選擇對齊網(wǎng)格，那么在將內(nèi)容放到網(wǎng)頁上時，該內(nèi)容會自動與網(wǎng)格線對齊，在此也可以配置網(wǎng)格的間距、線條樣式和線條顏色。4.4水平線、網(wǎng)格與標(biāo)尺4.4水平線、網(wǎng)格與標(biāo)尺4.4.2網(wǎng)格與標(biāo)尺1．顯示或隱藏網(wǎng)格在菜單欄中選擇“查看”→“網(wǎng)格設(shè)置”→“顯示網(wǎng)格”命令，可以在當(dāng)前頁面上顯示網(wǎng)格。如果想要隱藏網(wǎng)格，那么可以再次選擇該命令，取消該命令的選中狀態(tài)。2．更改網(wǎng)格的設(shè)置在菜單欄中選擇“查看”→“網(wǎng)格設(shè)置”→“網(wǎng)格設(shè)置”命令，具體如下圖：4.4水平線、網(wǎng)格與標(biāo)尺4.4水平線、網(wǎng)格與標(biāo)尺4.4.2網(wǎng)格與標(biāo)尺3．標(biāo)尺的設(shè)置標(biāo)尺可以用來測量文檔內(nèi)容的長度，網(wǎng)格可以用來對齊文檔內(nèi)容，以上這些都是非常實用的應(yīng)用。如對齊，是頁面排版的關(guān)鍵操作之一，完成文檔的編輯后，有些內(nèi)容是否對齊可能無法用肉眼判斷，此時就可以借助于標(biāo)尺。在DreamweaverCS6的菜單欄中選擇“查看”→“標(biāo)尺”→“顯示”命令，標(biāo)尺就會顯示在DreamweaverCS6窗口的“設(shè)計”視圖中。4.5綜合實訓(xùn)案例：制作文本創(chuàng)建圖所示的網(wǎng)頁，設(shè)置頁面背景顏色，標(biāo)題，段落格式，字體的顏色、大小等，建立多級項目列表，并插入水平線。本章小結(jié)網(wǎng)頁文檔是網(wǎng)站信息的載體，文本則是網(wǎng)頁文檔中最重要的構(gòu)成元素。本章主要介紹了網(wǎng)頁文檔中文本內(nèi)容的設(shè)置方法，以及輔助文本內(nèi)容排版的常見應(yīng)用，以使網(wǎng)頁結(jié)構(gòu)層次分明、內(nèi)容清晰。網(wǎng)頁中的多媒體第5章本書編寫組網(wǎng)頁設(shè)計與制作（微課版第3版）5.1網(wǎng)頁中常用的圖像格式5.2插入與設(shè)置圖像5.3插入其他圖像元素5.4多媒體在網(wǎng)頁中的應(yīng)用5.5綜合實訓(xùn)案例：插入多媒體5.75.85.9學(xué)習(xí)目標(biāo)?了解網(wǎng)頁中的圖像格式；?掌握在網(wǎng)頁中插入圖像的方法；?掌握在網(wǎng)頁中插入Flash動畫對象的方法；?掌握在網(wǎng)頁中插入FLV視頻及其他格式視頻的方法；?掌握在網(wǎng)絡(luò)中插入音頻文件的方法。網(wǎng)頁中常見的元素除了文本，還有圖像、圖形、動畫、視頻，音頻等，整個網(wǎng)頁就由這些元素有機整合而成。本章主要介紹在網(wǎng)頁中使用圖像、視頻和音頻在網(wǎng)頁中的操作方法。5.1網(wǎng)頁中常用的圖像格式5.1.1GIF格式GIF（graphicsinterchangeformat），可譯為“圖像交換格式”，文件擴展名為“.gif”，是一種無損壓縮格式。GIF格式圖像具有文件體積小、成像相對清晰、下載速度快的特點。5.1.2JPEG格式JPG/JPEG（JointPhotographicExpertsGroup）可譯為“聯(lián)合圖像專家組”，是24位的圖像文件格式，JPG/JPEG格式圖像是一種與平臺無關(guān)的壓縮格式圖像。這種圖像文件在圖像品質(zhì)和文件大小兩者之間達到較好的平衡。5.1網(wǎng)頁中常用的圖像格式5.1.3PNG格式PNG（portablenetworkgraphic）可譯為“便攜網(wǎng)絡(luò)圖像”，是一種極為靈活的圖像格式，采用網(wǎng)頁無損壓縮技術(shù)。使用網(wǎng)頁制作“三劍客”之一的Fireworks制作的圖像的默認格式就是PNG，這種格式的文件體積比較小，應(yīng)用非常普遍。5.2插入與設(shè)置圖像5.2.1插入圖像插入圖像的位置，在菜單欄中選擇“插入”→“圖像”命令，如圖所示，出現(xiàn)如右圖所示的“選擇圖像源文件”對話框。5.2網(wǎng)頁中常用的圖像格式5.2.1插入圖像將動畫、視頻等素材也放在站點相對應(yīng)的文件夾中，如圖所示。5.2網(wǎng)頁中常用的圖像格式5.2.1插入圖像在“選擇圖像源文件”對話框中選擇圖像文件后，單擊“確定”按鈕，將出現(xiàn)如圖所示的“圖像標(biāo)簽輔助功能屬性”對話框。5.2網(wǎng)頁中常用的圖像格式5.2.1插入圖像在“圖像標(biāo)簽輔助功能屬性”對話框的“替換文本”文本框中輸入“華山”，然后單擊“確定”按鈕，就可以在網(wǎng)頁中看到插入圖像后的效果了，如圖所示。這時可以看到圖像是在兩段文字之間，正是由光標(biāo)開始在文本中的位置。然后可保存網(wǎng)頁，如果是新創(chuàng)建的網(wǎng)頁，在保存時，可根據(jù)網(wǎng)頁所展示的內(nèi)容為網(wǎng)頁起一個對應(yīng)的文件名。5.2網(wǎng)頁中常用的圖像格式5.2.1插入圖像在網(wǎng)頁編輯頁面工具欄中單擊“在瀏覽器中預(yù)覽”按鈕，然后選擇相應(yīng)的瀏覽器，即可看到如圖所示的瀏覽效果。。5.2網(wǎng)頁中常用的圖像格式5.2.2設(shè)置圖像選中網(wǎng)頁中的圖像，窗口下方的“屬性”面板內(nèi)容轉(zhuǎn)換為設(shè)置圖像的屬性的內(nèi)容，如圖所示。5.3插入其他圖像元素插入其他圖像元素，如圖像占位符和鼠標(biāo)經(jīng)過圖像的效果。5.3.1插入圖像占位符圖像占位符是指將圖像添加到網(wǎng)頁之前使用的圖形，在對網(wǎng)頁頁面進行布局時往往要用到占位符。通過使用圖像占位符，可以在創(chuàng)建圖像之前確定圖像在網(wǎng)頁中的位置。在網(wǎng)頁中插入一幅圖像前，可以先使用占位符代替圖像位置。5.3插入其他圖像元素5.3.1插入圖像占位符●菜單操作法。在菜單欄中選擇“插入”→“圖像對象”→“圖像占位符”命令，如圖所示。5.3插入其他圖像元素5.3.1插入圖像占位符●“插入”面板操作法。在菜單欄“窗口”下選擇“插入”命令，右側(cè)出現(xiàn)“插入”面板。由此可以看出，面板可在“窗口”菜單中根據(jù)需要進行相應(yīng)的選擇，從而實現(xiàn)面板的顯示或隱藏。在“插入”面板中選擇“常用”→“圖像”→“圖像占位符”命令，如圖所示。5.3插入其他圖像元素5.3.1設(shè)置圖像●會出現(xiàn)如下圖所示的“圖像占位符”對話框。對占位符進行設(shè)置后，將出現(xiàn)如右圖所示的效果。5.3插入其他圖像元素5.3.2實現(xiàn)鼠標(biāo)經(jīng)過圖像打開或新建一個網(wǎng)頁，用插入占位符的操作方式打開“圖像對象”子菜單或“插入”面板組，選擇“鼠標(biāo)經(jīng)過圖像”命令，會出現(xiàn)如下圖所示的“插入鼠標(biāo)經(jīng)過圖像”對話框。5.3插入其他圖像元素5.3.2實現(xiàn)鼠標(biāo)經(jīng)過圖像在“圖像名稱”文本框中可以輸入名稱。單擊“原始圖像”右邊的“瀏覽”按鈕，打開“原始圖像”對話框，向其中添加一幅圖像。單擊“鼠標(biāo)經(jīng)過圖像”右側(cè)的“瀏覽”按鈕，添加另一幅圖像。單擊“確定”按鈕。保存文檔后，按F12鍵，在瀏覽網(wǎng)頁時，當(dāng)鼠標(biāo)指針移入圖如（a）所示的原始圖像中時，就會出現(xiàn)如圖（b）所示的圖像效果。（a）（b）5.4多媒體在網(wǎng)頁中的應(yīng)用5.4.1插入Flash動畫1．Flash文件類型概述Flash是由美國Macromedia公司（現(xiàn)已被Adobe公司收購）于1999年6月推出的交互式矢量圖和Web動畫的標(biāo)準(zhǔn)。在使用DreamweaverCS6提供的Flash命令之前，應(yīng)當(dāng)先了解不同的Flash文件的類型和特點?！馞lash源文件（擴展名為.fla）：由Flash軟