Dreamweaver制作網頁參考手冊_第1頁
Dreamweaver制作網頁參考手冊_第2頁
Dreamweaver制作網頁參考手冊_第3頁
Dreamweaver制作網頁參考手冊_第4頁
Dreamweaver制作網頁參考手冊_第5頁
已閱讀5頁，還剩11頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、學習情境六：Dreamweaver制作網頁參考手冊【教學目標】能力目標：1、 培養用Dreamweaver制作網頁的能力2、 提高學生在制作網頁過程中應用Dreamweaver的各種功能的能力3、 培養學生在實踐中掌握知識的能力4、 培養學生利用所學知識設計與制作網頁的能力5、 提高學生的動手能力知識目標：1、掌握Dreamweaver的各種菜單的用法2、掌握掌握在代碼模式和設計模式下熟練制作網頁的能力3、掌握利用Dreamweaver制作網頁的一般步驟職業素質目標：1、 獲取知識的能力2、 知識應用能力3、 自主學習能力4、 動手能力【教學時間】30課時【任務1】制作“跟我學電腦”網頁(2課

2、時)【效果圖】【學習目標】“跟我學電腦”網頁是使用Dreamweaver制作的第一個網頁，該網頁由標題、文字、圖像等元素組成。通過制作該網頁，可以了解Dreamweaver的基本操作，為后面的學習打下一個堅實的基礎。【任務要求】教師布置任務、要求學生根據參考手冊掌握學習目標的內容一、咨詢（15分鐘）明確任務后，教師幫助學生理解任務要求，分析任務，并介紹網頁設計整體情況的同時提出資訊建議，提供獲取資訊的方法和途徑信息。學生依據任務及提示，尋找完成任務所需的資源。例如：教材參考手冊網上查詢【相關知識點】1什么是DreamweaverDreamweaver是原Macromedia公司推出的網頁制作和

3、網站管理的工具軟件，集網頁制作與網站管理于一身。Dreamweaver是一套功能強大的可視化設計工具、應用開發環境和代碼編輯軟件。軟件的集成程度非常高，開發環境精簡而高效，開發人員能夠運用Dreamweaver與服務器技術構建功能強大的網絡應用程序銜接到用戶的數據、網絡服務體系。Dreamweaver提供了開放式和可擴展的工作環境。賦予使用者最大的自由度和靈活性。Dreamweaver將世界一流水平的“設計”和“代碼”編輯器合二為一。它操作簡便，可以使開發人員和設計師能夠快速創建代碼規范的應用程序，適合各個階段、各個水平的用戶使用。初學者在使用Dreamweaver時，可以無須編寫一句代碼就能

4、夠快速創建自己的網頁。利用該軟件，能夠快速創建格式規范的網頁文檔。Dreamweaver的整個創作環境十分人性化，它不僅界面美觀、友好，而且允許用戶個性化的工作環境。用戶可以創建完全屬于自己的對象和命令，修改鍵盤快捷鍵，甚至可以編寫JavaScript代碼擴充軟件功能。Dreamweaver可以進行多個站點的管理，設置了HTML語言編輯器，支持DHTML和CSS，分類提供了頁面對象，可凈化Microsoft Word生成的HTML文件，可以導入Microsoft Excel和Microsoft Access建立的數據文件，導入和編輯Fireworks制作的HTML源代碼和圖像，以及導入Flas

5、h動畫、按鈕和文字，編輯動態頁面等，同時它可以用來編輯交互式的網頁，即在因特網上，客戶和服務器進行信息交流。Dreamweaver是開放式和可擴展的。賦予用戶最大的自由度和靈活性來選擇最適合用戶的技術。Dreamweaver還提供了純粹的代碼編輯環境，允許用戶使用HTML、CSS、JavaScript、CFML、ASP、JSP、PHP和服務器技術，創建動態的、數據庫驅動的網頁和程序。另外，還可以幫助用戶輕松創建XSLT頁、附加XML文件，并在Web頁中顯示XML數據。目前，Dreamweaver的最新版本是Dreamweaver 8，已經推出了中文Dreamweaver 8。2進入Dreamw

6、eaver 8第一次運行Dreamweaver 8時，會彈出“工作區設置”對話框，如圖1-2-4所示。可以看出，Dreamweaver 8提供了兩種工作區布局（即工作界面）。如下圖：選中某一種工作區名稱的單選項，再單擊“確定”按鈕，即可進入相應的工作區。例如，單擊選中“設計器”單選項，再單擊“確定”按鈕，即可進入“Macromedia Dreamweaver 8”對話框。通常在沒有任何文檔打開時，也會自動彈出“Macromedia Dreamweaver 8”對話框。如果選中“不再顯示此對話框”復選框，則下次啟動Dreamweaver時就不會再出現此對話框。“Macromedia Dreamw

7、eaver 8”對話框中各欄的作用如下。1）“打開最近項目”欄：此欄中列出了Dreamweaver最近打開過的文檔名稱，單擊其中的項目可以快速彈出已經編輯過的文檔。單擊“打開”按鈕，可以彈出“打開”對話框，利用該對話框可以打開選定的文檔。（2）“創建新項目”欄：此欄中列出了“新建文檔”對話框中的大部分可以創建的項目，利用它可以快速創建一個新的文檔或者一個站點。（3）“從范例創建”欄：單擊其中的文件夾按鈕，可彈出不同的“新建文檔”對話框，利用該對話框可以新建一個相應的文檔。在它的底部有一個Dreamweaver Exchange按鈕，單擊此按鈕后，將鏈接到Dreamweaver Exchange

8、網站。（4）“Dreamweaver幫助”欄：有“進入Dreamweaver快速指南”等3個鏈接文字。單擊這3個鏈接文字，可以進入網站中相應的站點，利用網站查找相關信息。單擊“Macromedia Dreamweaver 8”對話框中“創建新項目”欄內的“HTML”鏈接文字，即可進入采用“設計器”風格的Dreamweaver 8的工作區，如下圖所示：由上圖可以看出，Dreamweaver 8的工作區主要由標題欄、菜單欄、文檔窗口、狀態欄、“插入”欄（“對象”欄或“對象”面板）、“標準工具”欄、“文檔工具”欄、“屬性”欄（“屬性”面板或屬性檢查器）和“隱藏面板”按鈕等組成。單擊“查看”“工具欄”

9、“××”菜單命令，可打開或關閉“插入”欄、“標準工具”欄、“文檔工具”欄或“樣式呈現”欄。單擊“窗口”“屬性”菜單命令，可以打開或關閉“屬性”欄。單擊“窗口”“插入”菜單命令，可以打開或關閉“插入”欄。單擊“查看”“隱藏面板”按鈕，可隱藏面板組和“屬性”欄，單擊“查看”“顯示面板”按鈕，可顯示面板組和“屬性”欄。3更換Dreamweaver 8工作區和默認文檔類型（1）單擊“窗口”“工作區布局”“編碼器”菜單命令，即可進入采用“編碼器”風格的Dreamweaver 8的工作區，如圖1-2-6所示。單擊“窗口”“工作區布局”“設計器”菜單命令，可進入采用“設計器”風格的Dre

10、amweaver 8的工作區，如下圖所示：（2）調整工作區布局后，單擊“窗口”“工作區布局”“保存當前”菜單命令，可彈出“保存工作區布局”對話框，在“名稱”文本框內輸入名稱，如下圖所示：再單擊“確定”按鈕，即可將當前工作區布局保存。以后只要單擊“窗口”“工作區布局”“××××”菜單命令（例如，單擊“shendalin”菜單命令），即可進入相應風格的Dreamweaver 8的工作區。3）改變默認文檔類型：單擊“編輯”“首選參數”菜單命令，彈出“首選參數”對話框（Dreamweaver 8的許多設置需要使用該對話框，以后將不斷涉及該對話框的使用）。單擊該對

11、話框左邊“分類”欄中的“新建文檔”選項。此時的“首選參數”對話框如圖1-2-8所示。在“默認文檔類型”下拉列表框內可以選擇默認的文檔類型。4Dreamweaver 8工作區簡介（1）文檔窗口文檔窗口用來顯示和編輯當前的文檔頁面。文檔窗口的底部有狀態欄，可以提供多種信息。在文檔窗口最大化時，其標簽頂部顯示文檔的名稱。文檔工具欄和標準工具欄在文檔窗口內，如果文檔窗口處于還原狀態，則文檔工具欄和標準工具欄在文檔窗口外，其標題欄內顯示網頁的標題和網頁文檔所在的文件夾名稱和網頁文檔的名稱。文檔窗口有3種視圖，單擊文檔工具欄中的按鈕，可進行視圖的切換。也可以單擊“查看”“代碼”（或“設計”、“代碼和設計”

12、）菜單命令或按Ctrl+-鍵。“設計”視圖：它是一個用于可視化頁面布局、可視化編輯和快速應用程序開發的設計環境。在該視圖中，顯示的效果與在網絡瀏覽器中瀏覽時非常相似，可以直接進行編輯。“代碼”視圖：它是一個用于編寫和編輯HTML、JavaScript、服務器語言代碼（如ASP或ColdFusion標記語言）以及任何其他類型代碼的手工編碼環境。“代碼和設計”視圖：它可以使用戶在單個窗口中同時看到同一文檔的“代碼”視圖和“設計”視圖。（2）狀態欄 Dreamweaver 8的狀態欄位于文檔窗口的底部，如圖1-2-9所示。標簽選擇器：標簽選擇器在狀態欄的最左邊，它以HTML標記顯示方式來表示光標當前

13、位置處的網頁對象信息。一般光標當前位置處有多種信息，則可顯示出多個HTML標記。不同的HTML標記表示不同的HTML元素信息。例如，<body>表示文檔主體，<img>表示圖像，<table>表示表格，<font>表示字體，<tr>表示行，<object>表示插入對象等。單擊某一個HTML標記，Dreamweaver 8會自動選取與該標記相對應的網頁對象，用戶可對該對象進行編輯。窗口大小信息欄：它用來顯示與調整窗口大小。單擊它會彈出一個快捷菜單，在還原狀態下單擊該快捷菜單上邊一欄中的一個菜單命令，可馬上按照選定的大小改變窗

14、口的大小。文檔大小/估計的下載時間：它給出了文檔大小的字節數和網頁的預計下載時間。（3）標尺顯示標尺：單擊“查看”“標尺”“顯示”菜單命令，可顯示標尺，如圖1-2-10所示。單擊選中“查看”“標尺”菜單命令的下一級菜單中的“像素”、“英寸”或“厘米”菜單命令，可以更改標尺的單位。用鼠標拖曳標尺左上角處的小正方形，此時鼠標指針呈十字線狀。拖曳鼠標到文檔窗口內合適的位置后松開鼠標左鍵，即可將原點位置改變。如果要將標尺的原點位置還原，可單擊“查看”“標尺”“重設原點”菜單命令。（4）網格顯示與不顯示網格線：單擊“查看”“網格”“顯示網格”菜單命令，可以在顯示網格（選中時，其菜單命令左邊有對勾）和不顯

15、示網格（沒選中時，其左邊沒有對勾）之間切換。網格線的顯示效果如圖1-2-10所示。靠齊功能：如果沒選中“查看”“網格”“靠齊到網格”菜單命令，移動層或改變層的大小時，最小的單位是一個像素，在移動層時不容易與網格對齊。如果選中“查看”“網格”“靠齊到網格”菜單命令，移動層或改變層的大小時，最小的單位是5個像素，在移動層時可以自動與網格對齊。網格的參數設置：單擊“查看”“網格”“網格設置”菜單命令，可以彈出“網格設置”對話框，如圖1-2-11所示。利用該對話框，可對網格和靠齊等參數進行設置。（5）“屬性”欄 “屬性”欄也叫屬性檢查器或“屬性”面板。利用“屬性”欄可以顯示并精確調整網頁中選定對象的屬

16、性。“屬性”欄具有智能化的特點，選中網頁中的不同對象，其“屬性”欄的內容會隨之發生變化。單擊“屬性”欄右下角的按鈕，可以展開“屬性”欄；單擊“屬性”欄右下角的按鈕，可以收縮“屬性”欄。如果在沒有選中任何對象時單擊“屬性”欄右邊的按鈕，可以在光標當前位置添加HTML語言；如果在選中一個對象時單擊按鈕，可以編輯相應標簽的HTML。（6）“插入”欄在Dreamweaver 8中，“插入”欄可以顯示為制表符和菜單兩種外觀效果，如果要將“插入”欄切換到菜單狀態，可右鍵單擊“插入”欄右邊的按鈕，彈出它的快捷菜單，再單擊該菜單中的“顯示為菜單”菜單命令。如果要將“插入”欄切換到制表符狀態，可單擊欄左邊的黑色

17、箭頭，彈出它的快捷菜單，再單擊該菜單中的“顯示為制表符”菜單命令。“插入”欄包括了“常用”、“布局”等8個標簽項或8個與標簽名稱相同的菜單命令。當“插入”欄為制表符狀態時，可以使用鼠標拖曳“插入”欄左邊的圖標，將“插入”欄變為浮動面板。一般人們習慣使用制表符狀態的“插入”欄。在制表符狀態下，每一個標簽內有多個用于插入對象的按鈕。單擊標簽可以切換標簽項，單擊標簽內的對象按鈕或者將相應的按鈕圖標拖曳到文檔窗口中，可將相應的對象插入到網頁中。對于有些對象，會在單擊按鈕或拖曳按鈕后，彈出一個相應的設置對話框，進行完設置后，單擊“確定”按鈕才可以真正在文檔窗口（即網頁）中插入對象。如果在插入對象的同時按

18、住Ctrl鍵，就可以避免出現一個選擇對象對話框，而是直接插入一個相應類型的空對象，如果以后要給該空對象賦予相應內容，可以雙擊該對象。5面板的基本操作（1）面板的拆分與組合面板的拆分：將鼠標指針移到面板左上角圖標處，當鼠標指針變為十字錨狀時，將面板拖離原來的位置，即可使面板成為一個可以用鼠標拖曳的浮動面板，如下圖所示：如果要將面板組合中的面板（例如，“CSS樣式”面板）拆分，可單擊面板中的標簽（例如，“CSS樣式”標簽），使它成為當前面板，再單擊面板右上角的圖標，彈出面板菜單，如圖1-2-13所示。單擊該菜單中的“將文件組合在”“新組合面板”菜單命令，即可將當前面板（例如，“CSS樣式”面板）拆

19、分出來，如下圖所示：面板的組合：單擊面板（例如，“CSS樣式”面板）右上角的圖標，彈出面板菜單，單擊該菜單中的“將文件組合在”“層”菜單命令，即可將當前面板與“層”面板組合在一起。單擊面板菜單中的“重命名面板組”菜單命令，在彈出的“重命名面板組”對話框中將面板組的名稱改為“設計”，即可恢復該面板組。（2）調整面板大小和打開與關閉面板調整面板大小：將鼠標指針移到面板的邊緣，當鼠標指針變成雙向箭頭時，單擊并拖曳面板的邊框，達到所需的大小后松開鼠標左鍵即可打開面板：單擊“窗口”“×××”（面板名稱）菜單命令，即可打開指定的面板。例如，單擊“窗口”“文件”菜單命令，即可打

20、開“文件”面板。關閉面板：單擊面板（組）標題欄右上角的按鈕。另外，在面板標題欄單擊鼠標右鍵，彈出其快捷菜單，再單擊該快捷菜單中的“關閉”菜單命令，也可以關閉該面板。隱藏所有面板：單擊“查看”“隱藏面板”菜單命令或按F4鍵，即可隱藏所有打開的面板。再進行相同的操作，即可以將隱藏的面板（原來打開的面板）顯示出來。6網頁的新建、打開、關閉和保存（1）新建和打開網頁文檔新建網頁文檔：單擊“文件”“新建”菜單命令，即可彈出“新建文檔”對話框，如下圖所示：從該對話框可以看出，利用它可以建立各種類型的文件。從“類別”列表框中選擇“基本頁”選項，然后選擇“基本頁”列表框中的HTML選項。單擊“創建”按鈕，即可

21、新建一個空白的HTML網頁文檔。打開網頁文檔：單擊“文件”“打開”菜單命令，彈出“打開”對話框。在該對話框內選中要打開的HTML文檔，單擊“打開”按鈕，即可將選定的HTML文檔打開。例如，可打開前面編寫的名字為文檔。（2）保存文檔和關閉文檔單擊“文檔”“保存”菜單命令，可以原名字保存當前的文檔。單擊“文檔”“另存為”菜單命令，可彈出“另存為”對話框。利用該對話框可以將當前的文檔以其他名字保存。單擊“文檔”“保存全部”菜單命令，可將當前正在編輯的所有文檔以原名保存。單擊“文檔”“關閉”菜單命令，可以關閉打開的當前文檔。如果當前文檔在修改后沒有存盤，則會彈出一個提示框，提示用戶是否保存文檔。單擊“

22、文檔”“全部關閉”菜單命令，即可關閉所有打開的文檔。二、計劃（5分鐘）在教帥協調下學生分組，明確分工、收集資料。學生按照工作任務的要求，在教師指導下制定學習計劃，教師適時審定工作計劃方案，關注計劃中的預期成果及未來的自查項目，關注工作進度及重要節點。三、實施（55分鐘）學生根據任務計劃依據參考手冊實施任務，教師對任務重點難點進行講解和分析，學生做好知識點記錄，重點掌握重要知識點，使學習計劃能夠按時完成。教師監督學生學習過程，糾正學生學習偏差，注重考察學生在任務實施過程中的能力，關注職業素養的培養，做好相應的記錄。本任務應先由教師系統講解，學生分步跟學。對部分理解掌握知識相對熟練、快速的學生，如

23、果其在學習過程中遇見問題，教師可輔助提示學生查找教材、參考手冊的相關內容或通過網絡獲取相關內容，引導學生解決問題；部分知識構建不熟練的學生則應詳細講解或者建議學生反復理解相關知識并完成任務。鼓勵小組成員在工作過程中互幫互助，解決在完成任務中所遇到的問題。【操作步驟】四、檢查評估（5分鐘）1 、任務完成后，學生自我檢查評價自己的工作，填寫“自我評價表”，小組成員互相檢查和評價并填寫在 “小組互評”表。2 、教師針對學生在完成任務過程中遇見的普遍問題做點評。3 、教師指引學生歸納總結，引導學生獨立寫出自己的經驗和完成任務的更好方法。4 、特別注意對“假如下次做同類似的任務，您認為怎么做更好？”的引

24、導和討論。【任務拓展】教材完成拓展案例3、拓展案例4【任務2】制作“計算機簡史”、“硬件知識”、“外設簡介”網頁(4課時)【效果圖】【學習目標】文字是網頁的基礎和靈魂，任何一個網站都離不開網頁中的文字。在Dreamweaver中，可以對文字的格式、字體、字號、顏色以及對齊格式等屬性進行設置。通過本案例的學習，可以掌握這些屬性設置的方法。在網頁中同時插入圖像和文字時，可以設置不同的對齊方式，以達到不同的顯示效果。圖文混排是網頁制作的基本操作，實用性非常強。在該網頁中，除了常見的文字和圖像外，還包含一個由多個圖像按鈕組成的導航條。當鼠標移到該導航條中的任意一個按鈕上時，該按鈕中的文字會變為“單擊進

25、入”文字圖像。【任務要求】教師布置任務、要求學生根據參考手冊掌握學習目標的內容一、咨詢（15分鐘）明確任務后，教師幫助學生理解任務要求，分析任務，并介紹網頁設計整體情況的同時提出資訊建議，提供獲取資訊的方法和途徑信息。學生依據任務及提示，尋找完成任務所需的資源。例如：教材參考手冊網上查詢【相關知識點】“計算機簡史”網頁1文字屬性設置文字的屬性可以在下圖所示的文本“屬性”欄的“插入”（文本）欄中進行設置。（1）文字標題格式的設置根據HTML語言規定，頁面的文本有6種標題格式，它們所對應的字號大小和段落對齊方式都是設定好的。在“格式”下拉列表框中，可以選擇各種格式。“無”選項：無特殊格式的規定，僅

26、決定于瀏覽器本身。“段落”選項：正文段落，在文字的開始與結尾處有換行，各行的文字間距較小。“標題1”至“標題6”選項：標題1至標題6約為中文6號至中文1號字大小。“預先格式化的”選項：設置預定義的格式。（2）創建字體組合 Dreamweaver 8使用了字體組合的方法，取代了簡單地給文本指定一種字體的方法。字體組合就是多個不同字體依次排列的組合。在設計網頁時，可給文本指定一種字體組合。在網頁瀏覽器中瀏覽該網頁時，系統會按照字體組合中指定的字體順序自動尋找用戶計算機中安裝的字體。采用這種方法可以照顧各種瀏覽器和安裝不同操作系統的計算機用戶。在“字體”下拉列表框中，可以選擇Dreamweaver提

27、供的各種字體組合，如下圖所示。單擊其中的某個列表項，即可設置該字體組合。單擊上圖所示的字體組合列表項中的“編輯字體列表”列表項，彈出“編輯字體列表”對話框，如下圖所示。單擊“編輯字體列表”對話框中“字體列表”列表框內的“在以下列表中添加字體”列表項。在“可用字體”列表框中選擇字體，然后雙擊該字體名稱，即可在“選擇的字體”列表框中顯示出相應的字體名稱；也可以單擊某一個字體名字，再單擊按鈕，將選中的字體添加到“選擇的字體”列表框內。按照上述方法，依次往“選擇的字體”列表框中加入字體組合中的各種字體。同時，會看到在“字體列表”列表框內最下邊隨之顯示出新的字體組合，如圖2-1-4所示。單擊“確定”按鈕

28、，即可完成字體組合的創建操作。如果要刪除字體組合中的一種字體，單擊“選擇的字體”列表框內該字體的名稱，再單擊按鈕。如果要刪除一個字體組合，可在“字體列表”列表框中單擊該字體組合，再單擊“編輯字體列表”對話框中的按鈕。如果還要增加字體組合，可以單擊“編輯字體列表”對話框中的按鈕，使“字體列表”列表框中增加“在以下列表中添加字體”選項。（3）文字屬性的設置文字大小設置：字號的數字越大，文字也越大。在Dreamweaver 8中，默認的字號是13。單擊文字“屬性”欄內的“大小”下拉列表框中的一種字號數字，即可完成字號的設定。在“大小”下拉列表框內，還可以通過選擇“極小”到“極大”以及“較小”和“較大

29、”列表項的方法來設置文字的大小。文字樣式設置：在“樣式”下拉列表框中，單擊“管理樣式”項目，可以彈出“編輯樣式表”對話框。單擊該對話框中的“新建”按鈕，就可以為文字添加樣式設置。文字的對齊設置：文字的對齊是指一行或多行文字在水平方向的位置，它有左對齊、居中對齊和右對齊3種。可以通過在選中頁面內的文字后，單擊文字“屬性”欄內的（左對齊）、（居中對齊）和（右對齊）按鈕來實現。如果文字是直接輸入到頁面中的，則會以瀏覽器的邊界線進行對齊。文字的縮進設置：要改變段落文字的縮進量，可以選中文字，再單擊文字“屬性”欄內的（減少縮進，向左移兩個單位）按鈕或（增加縮進，向右移兩個單位）按鈕。文字風格的設置：選中

30、網頁中的文字，單擊按下按鈕，即可將選中的文字設置為粗體；單擊按下按鈕，即可將選中的文字設置為斜體。利用菜單命令改變文字風格：在“文本”“樣式”菜單的子菜單中，單擊其中的某一個菜單命令，可以將選中的文字樣式做相應的改變。文字顏色的設置：單擊文字“屬性”欄內的“大小”下拉列表框右邊的按鈕，可以彈出顏色面板，利用它可以設置文字的顏色。也可以在其文本框中直接輸入顏色代碼，例如紅色的顏色代碼為“#FF0000”。使用“插入”（文本）欄：單擊“插入”欄的“文本”標簽，如下圖所示。面板中有許多文本格式控制按鈕，通過這些按鈕可以方便地插入各種文本。單擊面板中的“字體標簽編輯器”按鈕，可以彈出“標簽編輯器”對話

31、框，如下圖所示。利用該對話框可以設置文字的字體、大小和顏色等，還可以編輯文字字體列表。2設置和修改項目列表（1）設置項目列表設置無序列表和有序列表：選中要排列的文字段，再單擊文字“屬性”欄內的按鈕，可設置無序列表；選中要排列的文字段，再單擊文字“屬性”欄內的按鈕，可設置有序列表。定義列表方式：選中要排列的文字段，再單擊“文本”“列表”“定義列表”菜單命令。采用這種列表方式的效果是：奇數行靠左，偶數行向右縮進，如下圖所示。（2）修改項目列表屬性首先將列表的文字按照無序或有序列表方式進行列表，然后將光標移到列表文字中。單擊“文本”“列表”“屬性”菜單命令，彈出“列表屬性”對話框，如圖2-1-8所示

32、。“列表類型”下拉列表框用來選擇列表類型，其類型有項目列表、編號列表、目錄列表和菜單列表4種。項目列表的段首為圖案標志符號，是無序列表；編號列表的段首是數字，是有序列表。選擇“編號列表”選項后，“列表屬性”對話框中的隱藏選項會變為有效。在“樣式”下拉列表框內，可以選擇列表的風格，其中各選項的含義為：“默認”選項是默認方式，段首標記為實心圓點；“項目符號”選項是段首標記為項目的符號；“正方形”選項的段首標記為實心方塊。在“新建樣式”下拉列表框內，也有上述4個選項，用來設置光標所在段和以下各段的列表屬性。在“列表類型”下拉列表框中選擇“編號列表”列表項目后，“列表屬性”對話框如下圖所示。在“樣式”

33、列表框中，可以選擇列表的風格。選擇“默認”選項和“數字”選項，段首標記為阿拉伯數字；選擇“小寫羅馬數字”選項，段首標記為小寫羅馬數字；選擇“大寫羅馬數字”選項，段首標記為大寫羅馬數字；選擇“小寫字母”選項，段首標記為英文小寫字母；選擇“大寫字母”選項，段首標記為英文大寫字母。在“開始計數”文本框內可以輸入起始的數字或字母，以后各段的編號將根據起始數字或字母自動排列。在“列表屬性”對話框的“列表項目”欄內的“新建樣式”下拉列表框中，也有上述6個選項，用來設置光標所在段和以下各段的列表為另一種新屬性。在“重設計數”文本框內，輸入光標所在段和以下各段的列表的起始數字或字母。“硬件知識”網頁（1）用鼠

34、標拖曳圖像在Windows的“我的電腦”或“資源管理器”中，單擊一個圖像文件，再用鼠標拖曳該圖像到網頁文檔窗口內，即可將圖像插入到頁面內的指定位置。雙擊頁面內的圖像，可以彈出“選擇圖像源文件”對話框，供用戶更換圖像。（2）利用“插入”（常用）面板插入圖像單擊“插入”（常用）欄“圖像”快捷菜單中的“圖像”按鈕，或用鼠標拖曳“圖像”按鈕到網頁內，可以彈出“選擇圖像源文件”對話框，如圖2-2-2所示。如果“圖像”快捷菜單處顯示的不是“圖像”按鈕，可以單擊旁邊的下三角按鈕，在彈出的快捷菜單中選擇“圖像”按鈕。在“選擇圖像源文件”對話框中選中圖像文件后，單擊“確定”按鈕，即可將選定的圖像插入到頁面的光標

35、處。通常所選圖像應放在站點文件夾下的圖像文件夾內。在“選擇圖像源文件”對話框內，“URL”文本框內會給出該圖像的路徑。在“相對于”下拉列表框內，如果選擇“文檔”選項，則“URL”文本框內會給出該圖像文件的相對于當前網頁文檔的路徑和文件名。例如“pic/2-1-1.jpg”；如果選擇“站點根目錄”選項，則“URL”文本框內會給出以站點目錄為根目錄的路徑，例如“/pic/2-1-1.jpg”。2圖像和文字的相對位置當網頁內有文字和圖像混排時，系統默認的狀態是圖像的下沿和它所在的文字行的下沿對齊。如果圖像較大，則頁面內的文字與圖像的布局會很不協調，因此需要調整它們的布局。調整圖像與文字混排的布局需要

36、使用圖像的“屬性”欄。（1）圖像與文字相對位置的調整圖像“屬性”欄內的“對齊”下拉列表框中有10個列表項，用來進行圖像與文字相對位置的調整。這些列表項的含義如下。“默認值”列表項：使用瀏覽器默認的對齊方式，不同的瀏覽器會稍有不同。“基線”列表項：圖像的下沿與文字的基線水平對齊。“頂端”列表項：圖像的頂端與當前行中最高對象（圖像或文本）的頂端對齊。“中間”列表項：圖像的中線與文字的基線水平對齊。“底部”列表項：圖像的下沿與文字的基線水平對齊。“文本上方”列表項：圖像的頂端與文本行中最高字符的頂端對齊。“絕對中間”列表項：圖像的中線與文字的中線水平對齊。“絕對底部”列表項：圖像的下沿與文字的下沿水

37、平對齊。文字的下沿是指文字的最下邊，而基線不到文字的最下邊。“左對齊”列表項：圖像在文字的左邊緣，文字從右側環繞圖像。“右對齊”列表項：圖像在文字的右邊緣，文字從左側環繞圖像。文字的上沿、中線、基線、下沿、左邊緣和右邊緣之間的關系如下圖所示。（2）圖像與文字間距的調整圖像與文字的間距是指圖像與文字水平方向和垂直方向的間距，可以通過改變“水平邊距”和“垂直邊距”文本框內的數值來實現，數值的單位是像素。3圖像的移動、復制、刪除和調整大小移動和復制圖像：選中要編輯的圖像，這時圖像周圍會出現幾個黑色方形的小控制柄。如果要移動或復制圖像，可以像移動文字那樣，用鼠標拖曳圖像到目標點，即可移動圖像；按住Ct

38、rl鍵并用鼠標拖曳圖像到目標點，即可復制圖像。刪除圖像：先選中要刪除的圖像，再按Delete鍵即可，還可以將它剪切到剪貼板中。簡單調整圖像大小：選中要調整的圖像，用鼠標拖曳其控制柄。按住Shift鍵，同時用鼠標拖曳圖像周圍的小控制柄，可以在保證圖像長寬比不變的情況下調整圖像的大小。4利用圖像“屬性”欄編輯“硬件知識”網頁中的圖像在網頁中插入圖像后，如果要精確調整圖像的大小和圖像的位置，必須使用圖像“屬性”欄。在選中圖像后，圖像“屬性”欄如下圖所示。圖像命名：在圖像“屬性”欄的左上角會顯示縮小的選中的圖像，圖像的右邊會顯示它的字節數。可以在圖像右邊的文本框內輸入圖像的名字，以后可以使用腳本語言（

39、JavaScript、VBScript等）對它進行引用。調整圖像的位置：選中要調整位置的圖像后，或將光標移到圖像所在的行后，單擊（居左）、（居中）或（居右）按鈕，即可對該行的圖像位置進行調整。精確調整圖像的大小：在“寬”文本框內輸入圖像的寬度，系統默認的單位是像素（pixels），如果要使用其他單位，則必須在輸入數字后再輸入單位名稱，例如in（英寸，1in=96 pixels）、mm（毫米，1mm=3.8 pixels)、pt（磅，1pt）和pc（派卡，1pc=16 pixels）等。用同樣的方法可在“高”文本框內輸入圖像的高度。%表示圖像占文檔窗口的寬度和長度百分比，設置后，圖像的大小會隨文

40、檔窗口的大小自動進行調整。若不管頁面大小，只想占頁面寬度的30%，可在“寬”文本框中輸入30%。如果要還原圖像大小的初始值，可單擊和文字或刪除“寬”和“高”文本框中的數值；要想將寬度和長度全部還原，則可單擊“重設大小”按鈕。圖像的路徑：“源文件”右邊的文本框內給出了圖像文件的路徑。文件路徑可以是絕對路徑（“file:/D|/跟我學電腦/pic/2-1-1.jpg”圖像文件不在站點文件夾內），也可以是相對路徑（“pic/2-1-1.jpg”或“/pic/2-1-1.jpg”圖像文件在站點文件夾內）。單擊“源文件”右邊的按鈕，即可彈出“選擇圖像源文件”對話框，利用它可以更換圖像。鏈接：“鏈接”右邊

41、的文本框內給出了被鏈接文件的路徑。超級鏈接所指向的對象可以是一個網頁，也可以是一個具體的文件。設置圖像鏈接后，用戶在瀏覽網頁時只要單擊該圖像，即可打開相關的網頁或文件。建立超級鏈接有3種方法：直接輸入鏈接地址URL；拖曳指向文件圖標到“站點”窗口要鏈接的文件上；單擊該文本框右邊的文件夾按鈕，彈出“選擇文件”對話框，利用該對話框選定文件。給圖像加文字提示說明：選中要加文字提示說明的圖像，再在圖像“屬性”欄內的“替代”下拉列表框中輸入圖像的文字提示說明。用瀏覽器打開圖像頁面后，將鼠標移到加文字提示說明的圖像上，或發生斷鏈現象時，即可出現相應的文字提示說明，如下圖所示。“外設簡介”網頁1插入導航條導

42、航條實際上是一組動態圖像按鈕，單擊一個導航按鈕，可以在瀏覽器中彈出HTML文件和其他（如圖像）文件。插入導航條的方法如下。（1）單擊“插入”（常規）面板中的“圖像”快捷菜單中的“導航條”按鈕，即可彈出“插入導航條”對話框，如下圖所示。（2）在“插入導航條”對話框中進行各選項的設置。各選項的作用如下“導航條元件”列表框：給出導航條中各個動態圖像按鈕的名稱（默認是圖像的名稱）。單擊按鈕，可以增加動態圖像按鈕；選中動態圖像按鈕名稱，再單擊按鈕，可以刪除該按鈕；單擊動態圖像按鈕名稱，再單擊按鈕或按鈕，可以改變動態圖像按鈕在導航條中的位置。“項目名稱”文本框：其內可輸入各動態圖像按鈕的名稱。4個文本框與“瀏覽”按鈕：定義鼠

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論