《網(wǎng)頁設計與制作實例教程》第3章(李東亞)

清華大學出版社《網(wǎng)頁設計與制作實例教程》第3章高等學校計算機應用規(guī)劃教材

2024/9/26主編方其桂初識網(wǎng)頁制作軟件內容提要第2章

微課選題與設計Dreamweaver是一款常用的網(wǎng)頁設計軟件，將網(wǎng)頁制作、網(wǎng)站開發(fā)站點管理集于一身，具有易學、易用的特點，用戶無需手寫代碼，即使是初學者也可以輕松地創(chuàng)建各種動態(tài)效果，快速制作極具表現(xiàn)力的網(wǎng)頁。本章從DreamweaverCS6的操作界面入手，主要介紹了站點的創(chuàng)建與管理、網(wǎng)頁的新建與屬性設置、外部參數(shù)設置等基礎知識。教學目錄Dreamweaver工作環(huán)境站點的創(chuàng)建與管理Dreamweaver基本操作010203第2章

微課選題與設計3.1

Dreamweaver工作環(huán)境教學內容3.1.1使用界面DreamweaverCS6的使用界面主要包括菜單欄、插入欄、文檔工具欄、文檔窗口、狀態(tài)欄、屬性面板和功能面板等。第3章

初識網(wǎng)頁制作軟件3.1

Dreamweaver工作環(huán)境教學內容3.1.2自定義工作界面在網(wǎng)站制作過程中，往往需要變換工作界面的布局，使用者可以通過移動面板或面板組來創(chuàng)建新的工作界面。單擊標題欄上的“設計器”按鈕，可以選擇任意一種預設的工作界面。第3章

初識網(wǎng)頁制作軟件1．顯示/隱藏面板使用F4鍵，可以顯示或隱藏包括“屬性”在內的所有面板。“窗口”菜單可以打開所有的面板，面板名稱前有標記的，表示該面板已打開。2．移動面板拖動面板標簽或是拖動面板組的標題欄，可以移動面板或面板組。移動時，可以看到藍色顯示的區(qū)域，表示可以在該區(qū)域內移動和放置。如果拖動到的區(qū)域不是放置區(qū)域，則被移動的面板或面板組將在窗口中浮動。3．關閉面板單擊面板或面板組的按鈕，可以在打開的菜單中選擇“關閉”或“關閉標簽組”命令3.1

Dreamweaver工作環(huán)境教學內容3.1.3視圖模式DreamweaverCS6的視圖模式，可以通過文檔工具欄上的按鈕進行切換，默認為“設計”視圖。第3章

初識網(wǎng)頁制作軟件1．代碼視圖用于編輯HTML、JavaScript等代碼的手工編碼環(huán)境。對于代碼使用熟練的操作者，可以直接在此視圖中輸入代碼，實現(xiàn)網(wǎng)頁的編輯制作。3.1

Dreamweaver工作環(huán)境教學內容3.1.3視圖模式DreamweaverCS6的視圖模式，可以通過文檔工具欄上的按鈕進行切換，默認為“設計”視圖。第3章

初識網(wǎng)頁制作軟件2．拆分視圖文檔窗口分為左右部分，分別顯示“代碼”和“設計”兩個視圖，適合初學者對比查看。3.1

Dreamweaver工作環(huán)境教學內容3.1.3視圖模式DreamweaverCS6的視圖模式，可以通過文檔工具欄上的按鈕進行切換，默認為“設計”視圖。第3章

初識網(wǎng)頁制作軟件3．設計視圖用于可視化頁面布局、內容編輯和應用程序開發(fā)的編輯環(huán)境。視圖中顯示的文檔形式，與瀏覽器中查看的頁面內容基本一致，甚至可以在編輯時顯示動態(tài)內容。使用者即使沒有任何HTML語言基礎，也可以輕松實現(xiàn)網(wǎng)頁的編輯制作。3.1

Dreamweaver工作環(huán)境教學內容3.1.3視圖模式DreamweaverCS6的視圖模式，可以通過文檔工具欄上的按鈕進行切換，默認為“設計”視圖。第3章

初識網(wǎng)頁制作軟件4．實時視圖在Dreamweaver工作區(qū)內，實時查看網(wǎng)頁的外觀，預覽網(wǎng)頁效果，但不能對網(wǎng)頁進行編輯。切換到“實時視圖”后，“設計視圖”被凍結，使用者只能通過“代碼視圖”編輯網(wǎng)頁。3.2

站點的創(chuàng)建與管理教學內容3.2.1站點的規(guī)劃創(chuàng)建站點之前，應當對站點的目標、結構、內容、導航機制、風格等內容進行合理的規(guī)劃。有效的規(guī)劃設計，會為后期站點的制作和管理帶來便捷，避免盲目設計。第3章

初識網(wǎng)頁制作軟件3.站點內容的規(guī)劃站點內容的規(guī)劃，既方便網(wǎng)站的設計，又能使網(wǎng)站用戶便捷的獲取信息。1.明確站點目標站點目標要根據(jù)網(wǎng)站主題來確定。2.站點結構的規(guī)劃以文件夾的形式組織文件，可以使站點具有清晰的結構，易于后期的維護和管理。4.站點的導航機制導航可以是標題文字，也可是圖像。5.站點風格的規(guī)劃站點風格是頁面整體形象和風格，必須貼合網(wǎng)站的主題和內容，能凸顯網(wǎng)站主旨。3.2

站點的創(chuàng)建與管理教學內容3.2.2站點的創(chuàng)建DreamweaverCS6的站點包括本地站點和遠程站點，可以實現(xiàn)文件的上傳和下載，以及本地站點和遠程站點的同步更新。第3章

初識網(wǎng)頁制作軟件實例1創(chuàng)建本地站點在F盤創(chuàng)建“我的練習”站點，并保存。1.本地站點的創(chuàng)建本地站點是計算機中用來存放網(wǎng)站文件的場所。創(chuàng)建本地站點之前，應在本地磁盤建立一個網(wǎng)站文件夾，用來存放站點的所有文件，如F:\myweb。3.2

站點的創(chuàng)建與管理教學內容3.2.2站點的創(chuàng)建DreamweaverCS6的站點包括本地站點和遠程站點，可以實現(xiàn)文件的上傳和下載，以及本地站點和遠程站點的同步更新。第3章

初識網(wǎng)頁制作軟件實例2創(chuàng)建遠程站點使用FTP連接遠程服務器，創(chuàng)建“我的練習”站點的遠程站點。2.遠程站點的創(chuàng)建通過設置遠程站點，可以實現(xiàn)本地站點與遠程站點的關聯(lián)，從而進行文件的上傳和下載，管理遠程服務器上的文件。使用者可以通過FTP、SFTP、本地/網(wǎng)絡等多種方式建立遠程站點。3.2

站點的創(chuàng)建與管理教學內容3.2.3站點的管理DreamweaverCS6可以將本地站點和遠程站點統(tǒng)一管理，同步更新，便捷的管理站點中的文件。本地站點和遠程站點內的文件管理，操作方法相同。第3章

初識網(wǎng)頁制作軟件實例3站點文件管理在“我的練習”站點內新建“index.html”文件和“book”文件夾，并在“book”文件夾內新建“work.html”文件。1.本地站點的管理管理本地站點分為站點文件管理和站點管理兩部分。文件管理包括新建網(wǎng)頁和文件夾、移動和復制文件、刪除和重命名文件。站點管理包括新建和刪除站點、編輯站點等。實例4站點管理復制和編輯“我的練習”站點，并將復制后的站點刪除。3.2

站點的創(chuàng)建與管理教學內容3.2.3站點的管理DreamweaverCS6可以將本地站點和遠程站點統(tǒng)一管理，同步更新，便捷的管理站點中的文件。本地站點和遠程站點內的文件管理，操作方法相同。第3章

初識網(wǎng)頁制作軟件實例5管理遠程站點將“我的練習”站點與遠程站點連接，嘗試在兩個站點間上傳和下載文件。2.遠程站點的管理當本地站點與服務器連接后，就可以對遠程站點進行各項管理操作，如文件的上傳與下載、新建與復制等。3.3

Dreamweaver基本操作教學內容3.3.1新建網(wǎng)頁新建網(wǎng)頁一般有兩種方式，一種是創(chuàng)建空白HTML網(wǎng)頁，另一種是使用模版創(chuàng)建帶有格式的網(wǎng)頁。第3章

初識網(wǎng)頁制作軟件實例6新建空白網(wǎng)頁在“我的練習”站點中，新建空白網(wǎng)頁“novel.html”，并保存在book文件夾內。3.3

Dreamweaver基本操作教學內容3.3.2網(wǎng)頁預覽及參數(shù)設置網(wǎng)頁制作過程中，需要經(jīng)常在瀏覽器中查看頁面效果，以便進行修改和完善。由于目前廣泛使用的瀏覽器眾多，使用者想在多種瀏覽器中測試效果，就需要進行預覽設置。第3章

初識網(wǎng)頁制作軟件實例7設置預覽參數(shù)并預覽網(wǎng)頁添加2345瀏覽器為新的瀏覽器，預覽“我的練習”站點中的“index.html”頁面。3.3

Dreamweaver基本操作教學內容3.3.3設置頁面屬性網(wǎng)頁的基本屬性包括網(wǎng)頁標題、背景顏色和圖像、文本格式和超鏈接格式等，正確的設置頁面屬性可以更好的完成網(wǎng)頁的制作。第3章

初識網(wǎng)頁制作軟件實例8設置頁面屬性為“index.html”網(wǎng)頁設置標題“我的主頁”，再設置背景、文本及超鏈接的顏色。3.4

小結和習題教學內容3.4.1本章小結DreamweaverCS6是一款所見即所得的軟件，操作簡單，易學好用，集網(wǎng)頁制作與網(wǎng)站管理功能與一身，可以制作跨平臺、跨瀏覽器限制的各種網(wǎng)頁。DreamweaverCS6可與Flash、Photoshop等多種設計軟件完美搭配，在Dreamweaver界面內即可使用這些軟件進行編輯。本章主要介紹了DreamweaverCS6軟件基本功能，具體包括以下主要內容：DreamweaverCS6工作環(huán)境：主要介紹了開始頁、工作界面、自定義工作界面和軟件的基本視圖模式。站點的創(chuàng)建與管理：主要介紹了站點的規(guī)劃、本地站點和遠程站點的創(chuàng)建與管理。DreamweaverCS6基本操作：主要介紹了新建空白網(wǎng)頁、網(wǎng)頁的預覽、網(wǎng)頁參數(shù)設置以及頁面屬性的設置等。第3章

初識網(wǎng)頁制作軟件3.4

小結和習題教學內容3.4.2本章練習

一、選擇題第3章

初識網(wǎng)頁制作軟件1．不屬于功能菜單的是（）。A.格式B.文件C.視圖D.站點2．預覽網(wǎng)頁制作效果的快捷鍵是（）。A.F4B.F2C.F12D.F53．管理遠程站點必須將（）與（）連接。A.本地站點與遠程站點B.本地站點與遠程服務器C.遠程站點與遠程服務器D.本地站點與網(wǎng)絡3.4

小結和習題教學內容3.4.2本章練習

二、填空題第3章

初識網(wǎng)頁制作軟件1．文檔窗口中可以實現(xiàn)

、

和

視圖之間的切換。2．