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

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

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

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

微課選題與設(shè)計(jì)3.1

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

初識(shí)網(wǎng)頁(yè)制作軟件3.1

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

初識(shí)網(wǎng)頁(yè)制作軟件1．顯示/隱藏面板使用F4鍵，可以顯示或隱藏包括“屬性”在內(nèi)的所有面板?！按翱凇辈藛慰梢源蜷_所有的面板，面板名稱前有標(biāo)記的，表示該面板已打開。2．移動(dòng)面板拖動(dòng)面板標(biāo)簽或是拖動(dòng)面板組的標(biāo)題欄，可以移動(dòng)面板或面板組。移動(dòng)時(shí)，可以看到藍(lán)色顯示的區(qū)域，表示可以在該區(qū)域內(nèi)移動(dòng)和放置。如果拖動(dòng)到的區(qū)域不是放置區(qū)域，則被移動(dòng)的面板或面板組將在窗口中浮動(dòng)。3．關(guān)閉面板單擊面板或面板組的按鈕，可以在打開的菜單中選擇“關(guān)閉”或“關(guān)閉標(biāo)簽組”命令3.1

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

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

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

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

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

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

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

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

站點(diǎn)的創(chuàng)建與管理教學(xué)內(nèi)容3.2.1站點(diǎn)的規(guī)劃創(chuàng)建站點(diǎn)之前，應(yīng)當(dāng)對(duì)站點(diǎn)的目標(biāo)、結(jié)構(gòu)、內(nèi)容、導(dǎo)航機(jī)制、風(fēng)格等內(nèi)容進(jìn)行合理的規(guī)劃。有效的規(guī)劃設(shè)計(jì)，會(huì)為后期站點(diǎn)的制作和管理帶來(lái)便捷，避免盲目設(shè)計(jì)。第3章

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

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

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

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

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

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

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

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

初識(shí)網(wǎng)頁(yè)制作軟件實(shí)例5管理遠(yuǎn)程站點(diǎn)將“我的練習(xí)”站點(diǎn)與遠(yuǎn)程站點(diǎn)連接，嘗試在兩個(gè)站點(diǎn)間上傳和下載文件。2.遠(yuǎn)程站點(diǎn)的管理當(dāng)本地站點(diǎn)與服務(wù)器連接后，就可以對(duì)遠(yuǎn)程站點(diǎn)進(jìn)行各項(xiàng)管理操作，如文件的上傳與下載、新建與復(fù)制等。3.3

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

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

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

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

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

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

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

初識(shí)網(wǎng)頁(yè)制作軟件3.4

小結(jié)和習(xí)題教學(xué)內(nèi)容3.4.2本章練習(xí)

一、選擇題第3章

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

小結(jié)和習(xí)題教學(xué)內(nèi)容3.4.2本章練習(xí)

二、填空題第3章

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

、

和

視圖之間的切換。2．