計(jì)算機(jī)應(yīng)用基礎(chǔ)項(xiàng)目十制作個(gè)人網(wǎng)站課件

1、項(xiàng)目十制作個(gè)人網(wǎng)站 計(jì)算機(jī)應(yīng)用基礎(chǔ)網(wǎng)站前期規(guī)劃任務(wù)一任務(wù)組建簡(jiǎn)單家庭網(wǎng)絡(luò)任務(wù)二課件的統(tǒng)籌預(yù)演任務(wù)三【項(xiàng)目描述】09級(jí)旅游一班的學(xué)生王小海是個(gè)驢友，他在暑假期間和驢友俱樂部的朋友們一起到西藏去旅游。西藏獨(dú)特的自然風(fēng)光、佛教文化、民俗風(fēng)情都給他留下了深刻的印象，能不能把這次難忘的經(jīng)歷與我的同學(xué)、朋友一起分享呢？小海決定做一個(gè)專門介紹此次西藏之行的個(gè)人網(wǎng)站，以此來(lái)紀(jì)念這次不平凡的經(jīng)歷。【項(xiàng)目分析】為了實(shí)現(xiàn)自己的想法，小海在圖書館翻閱了大量的圖書，對(duì)比了幾種常見的網(wǎng)頁(yè)制作工具，最終決定用Dreamweaver CS4來(lái)制作自己的第一個(gè)網(wǎng)站。Dreamweaver是在網(wǎng)頁(yè)設(shè)計(jì)與制作領(lǐng)域中用戶最多、應(yīng)用最

2、廣、功能最強(qiáng)大的軟件。它集網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站開發(fā)和站點(diǎn)管理功能于一身，具有可視化、支持多平臺(tái)和跨瀏覽器的特性，是目前網(wǎng)站設(shè)計(jì)、開發(fā)、制作的首選工具。它的方便快捷、簡(jiǎn)單易學(xué)對(duì)小海這個(gè)初學(xué)者來(lái)說(shuō)再合適不過(guò)了。因此，小海馬上行動(dòng)起來(lái)，開始設(shè)計(jì)自己的第一個(gè)網(wǎng)站。為了讓自己的整個(gè)制作過(guò)程更加科學(xué)合理，少走彎路，小海嚴(yán)格按照網(wǎng)站開發(fā)的流程來(lái)進(jìn)行，并根據(jù)先后順序分成了5個(gè)任務(wù)來(lái)完成：任務(wù)1：網(wǎng)站前期規(guī)劃。任務(wù)2：網(wǎng)頁(yè)布局與網(wǎng)頁(yè)設(shè)計(jì)。任務(wù)3：組建小型辦公局域網(wǎng)，保證辦公室計(jì)算機(jī)互聯(lián)，實(shí)現(xiàn)打印機(jī)等設(shè)備的共享。（1）網(wǎng)站首頁(yè)制作（2）二級(jí)網(wǎng)頁(yè)制作（3）完善網(wǎng)頁(yè)內(nèi)容任務(wù)4：統(tǒng)一網(wǎng)站風(fēng)格，網(wǎng)頁(yè)的復(fù)雜布局（框架、層），并利

3、用超級(jí)鏈接將前面制作的單個(gè)網(wǎng)頁(yè)有機(jī)地鏈接起來(lái)。在網(wǎng)頁(yè)設(shè)計(jì)前，首先要給網(wǎng)站一個(gè)準(zhǔn)確的定位。小海為自己的第一個(gè)網(wǎng)站的定位就是“個(gè)人網(wǎng)站”，它的特點(diǎn)是結(jié)構(gòu)簡(jiǎn)單、內(nèi)容單一、目標(biāo)明確、個(gè)性突出，非常適合初學(xué)者建站?！疽?、任務(wù)分析】任務(wù)一 網(wǎng)站前期規(guī)劃二、任務(wù)實(shí)現(xiàn)1創(chuàng)建工作目錄2.創(chuàng)建本地站點(diǎn)3.網(wǎng)站結(jié)構(gòu)設(shè)計(jì)4.素材準(zhǔn)備網(wǎng)頁(yè)【知識(shí)鏈接】網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素，用戶訪問某個(gè)網(wǎng)站時(shí)出現(xiàn)在顯示器上的“東西”就是一個(gè)網(wǎng)頁(yè)。它實(shí)際是一個(gè)文件，存放在世界某個(gè)角落的某一臺(tái)計(jì)算機(jī)中，這臺(tái)計(jì)算機(jī)與互聯(lián)網(wǎng)相連。網(wǎng)頁(yè)經(jīng)由網(wǎng)址（URL）來(lái)識(shí)別和存取，當(dāng)用戶在瀏覽器輸入網(wǎng)址后，經(jīng)過(guò)一段復(fù)雜而又快速的程序，網(wǎng)頁(yè)文件被傳送到用戶計(jì)算

4、機(jī)上，通過(guò)瀏覽器解釋網(wǎng)頁(yè)的內(nèi)容，最后展示在用戶眼前。動(dòng)態(tài)網(wǎng)頁(yè)以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，使用的語(yǔ)言一般為html+asp，html+php或html+jsp。采用動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)可以實(shí)現(xiàn)更多的功能，如用戶注冊(cè)、用戶登錄、在線調(diào)查、用戶管理、訂單管理等需要交互的情況。動(dòng)態(tài)網(wǎng)頁(yè)較常見的表現(xiàn)形式有：留言板、論壇、聊天室、計(jì)數(shù)器、校友錄、網(wǎng)上購(gòu)物等。動(dòng)態(tài)網(wǎng)頁(yè)實(shí)際上并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁(yè)文件，只有當(dāng)用戶請(qǐng)求時(shí)，服務(wù)器才返回一個(gè)完整的網(wǎng)頁(yè)。網(wǎng)頁(yè)與網(wǎng)站網(wǎng)頁(yè)與網(wǎng)站的關(guān)系就好像文件與文件夾的關(guān)系，網(wǎng)頁(yè)是網(wǎng)站的基本信息單位。一個(gè)完整的網(wǎng)站是由多個(gè)網(wǎng)頁(yè)構(gòu)成的，網(wǎng)頁(yè)是各自獨(dú)立的，通過(guò)超級(jí)鏈接相互聯(lián)系起來(lái)。超級(jí)鏈接的目標(biāo)可

5、以是另一個(gè)網(wǎng)頁(yè)，也可以是同一個(gè)網(wǎng)頁(yè)的不同位置，或者一個(gè)郵件地址。用戶一般通過(guò)瀏覽器訪問網(wǎng)站的地址，讀取的是該網(wǎng)站內(nèi)的網(wǎng)頁(yè)。網(wǎng)站設(shè)計(jì)，實(shí)際是一個(gè)個(gè)網(wǎng)頁(yè)的設(shè)計(jì)，并在最后給予鏈接。進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，需要考慮其與網(wǎng)站的內(nèi)在聯(lián)系，是否符合網(wǎng)絡(luò)技術(shù)的特點(diǎn)，是否能體現(xiàn)網(wǎng)站的功能等因素。放在本地磁盤上的網(wǎng)站稱為“本地站點(diǎn)”，上傳到Web服務(wù)器上的網(wǎng)站稱為“遠(yuǎn)程站點(diǎn)”。設(shè)計(jì)時(shí)在本地機(jī)器上進(jìn)行，如果想要?jiǎng)e人在互聯(lián)網(wǎng)上訪問自己的網(wǎng)站，就需要發(fā)布到Web服務(wù)器上?！斑h(yuǎn)程站點(diǎn)”通常完全就是“本地站點(diǎn)”的副本。HTMLHTML（Hypertext Markup Language），是用于描述網(wǎng)頁(yè)文檔的一種標(biāo)記語(yǔ)言。網(wǎng)頁(yè)文件

6、本身是一種文本文件，通過(guò)在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理、畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁(yè)文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容。因此，網(wǎng)頁(yè)的本質(zhì)就是HTML，HTML是Web編程的基礎(chǔ)。一個(gè)網(wǎng)頁(yè)對(duì)應(yīng)于一個(gè)HTML文件，HTML文件以.htm或.html為擴(kuò)展名，可以使用任何能夠生成txt類型源文件的文本編輯來(lái)產(chǎn)生HTML文件。標(biāo)準(zhǔn)的HTML文件都具有一個(gè)基本的整體結(jié)構(gòu)： 標(biāo)記網(wǎng)頁(yè)的開始 標(biāo)記頭部的開始：頭部元素描述，如文檔標(biāo)題等 標(biāo)記頭部的結(jié)束 標(biāo)記頁(yè)面正文開始 -頁(yè)面實(shí)體部分- 標(biāo)記正文結(jié)束標(biāo)記該網(wǎng)頁(yè)的結(jié)束站點(diǎn)的管理站點(diǎn)創(chuàng)建

7、后，設(shè)計(jì)者還可以對(duì)站點(diǎn)進(jìn)行管理，如移動(dòng)、復(fù)制、刪除、導(dǎo)入、導(dǎo)出等操作。單擊“站點(diǎn)”菜單的“管理站點(diǎn)”菜單項(xiàng)，在彈出的“管理站點(diǎn)”對(duì)話框中可選擇相應(yīng)的站點(diǎn)操作。建完站點(diǎn)后，小海決定根據(jù)設(shè)計(jì)草樣，先創(chuàng)建網(wǎng)站中的首頁(yè)，然后創(chuàng)建二級(jí)框架網(wǎng)頁(yè)。并將所有網(wǎng)頁(yè)的寬度定為850像素，用表格去布局。首頁(yè)以圖片展示為主，二級(jí)網(wǎng)頁(yè)以文本介紹為主?！疽弧⑷蝿?wù)分析】任務(wù)二 網(wǎng)頁(yè)布局與網(wǎng)頁(yè)設(shè)計(jì)二、任務(wù)實(shí)現(xiàn)1創(chuàng)建首頁(yè)2.創(chuàng)建框架中的網(wǎng)頁(yè)表格布局【知識(shí)鏈接】（1）創(chuàng)建表格（2）設(shè)置表格屬性（3）拆分、合并單元格（4）刪除和增加表格行、列文本輸入（1）輸入文本（2）全角:+（3） “特殊字符”（4） “水平線”（5） +（6）

8、 “插入”格式設(shè)置（1）文本的字體、字號(hào)、顏色以及其他格式的設(shè)置。（2） CSS是一組格式設(shè)置規(guī)則，用于控制頁(yè)面元素的外觀。（3）完成文本的格式設(shè)置（4）文本的項(xiàng)目符號(hào)、列表、段落縮進(jìn)以及鏈接目標(biāo)等設(shè)置。編輯多媒體（1）單擊“插入”菜單“圖像”（2）單擊“插入”菜單“媒體”下的“SWF” （3）在“插入”菜單“媒體”組中還可以實(shí)現(xiàn)音頻、視頻的插入超級(jí)鏈接網(wǎng)頁(yè)中的超級(jí)鏈接是指頁(yè)面對(duì)象之間的鏈接關(guān)系，它可以實(shí)現(xiàn)不同對(duì)象，不同網(wǎng)站之間的跳轉(zhuǎn)。鏈接的目標(biāo)可以使一個(gè)網(wǎng)頁(yè)，也可以是一個(gè)文件、一個(gè)郵箱、一個(gè)位置等。表單設(shè)計(jì)表單是HTML頁(yè)面與瀏覽器之間重要的交互手段。表單由若干個(gè)表單對(duì)象和相關(guān)的網(wǎng)頁(yè)元素組成

9、，表單對(duì)象是用戶輸入數(shù)據(jù)的地方，通過(guò)“提交”按鈕，將信息發(fā)送到Web 服務(wù)器進(jìn)行處理。對(duì)象的運(yùn)動(dòng)效果選中需要運(yùn)動(dòng)的對(duì)象，單擊“代碼”或者“拆分”視圖，在所選內(nèi)容前面添加標(biāo)記，后面添加標(biāo)記；在前面的“marquee”后輸入空格，在彈出的下拉屬性列表中選擇需要設(shè)置的屬性并設(shè)置屬性值。上一個(gè)任務(wù)已經(jīng)實(shí)現(xiàn)了7個(gè)景點(diǎn)的網(wǎng)頁(yè)設(shè)計(jì)，如何將它們組織起來(lái)呢？小海決定用框架集來(lái)實(shí)現(xiàn)?！疽?、任務(wù)分析】任務(wù)三 統(tǒng)一網(wǎng)站風(fēng)格二、任務(wù)實(shí)現(xiàn)1.創(chuàng)建框架集2.保存框架3.框架頁(yè)設(shè)計(jì)4.超級(jí)鏈接使用框架【知識(shí)鏈接】利用表格進(jìn)行網(wǎng)頁(yè)布局時(shí)，需要反復(fù)制作與各個(gè)菜單相對(duì)應(yīng)的網(wǎng)頁(yè)文檔，而且每個(gè)網(wǎng)頁(yè)文檔若要設(shè)置鏈接，還要分別進(jìn)行操作，當(dāng)

10、制作網(wǎng)頁(yè)數(shù)量較多的網(wǎng)頁(yè)文檔時(shí)，整個(gè)操作過(guò)程就會(huì)比較繁瑣。而利用框架設(shè)計(jì)頁(yè)面布局時(shí)，只要單擊相應(yīng)的鏈接，則在可變更的窗口顯示鏈接文檔的相應(yīng)內(nèi)容即可。因此，框架是為了在瀏覽器顯示多個(gè)網(wǎng)頁(yè)文檔而分割的主頁(yè)模塊。創(chuàng)建框架集網(wǎng)頁(yè)設(shè)計(jì)中使用的框架，是由框架集和框架兩部分構(gòu)成?？蚣芗瘜?shí)際上是一個(gè)頁(yè)面，用于定義文檔中框架的結(jié)構(gòu)、數(shù)量、尺寸和裝入框架的頁(yè)面文本。框架集并不顯示在瀏覽器中，只是存儲(chǔ)一些框架如何顯示的信息。比如將一個(gè)頁(yè)面劃分為兩個(gè)框架，那么它實(shí)際上包含的是三個(gè)獨(dú)立的文件：一個(gè)框架集文件和兩個(gè)框架內(nèi)容文件。其中的框架內(nèi)容文件包含了將出現(xiàn)在頁(yè)面框架中的內(nèi)容，而框架集是一個(gè)使用框架定義網(wǎng)頁(yè)的文件。保存框架

11、及框架集框架集插入后，每個(gè)框架區(qū)域中都將顯示一個(gè)頁(yè)面，需要對(duì)它們逐一進(jìn)行保存。單擊“文件”菜單下“框架集另存為”可以對(duì)框架集進(jìn)行保存。單擊“文件”菜單下“框架”另存為可以對(duì)框架頁(yè)逐個(gè)保存?？蚣茼?yè)保存后進(jìn)行單獨(dú)編輯，編輯后的內(nèi)容將會(huì)出現(xiàn)在框架集相應(yīng)的框架內(nèi)。設(shè)置框架集屬性在“窗口”菜單的“框架”前打鉤，在“文件”面板下出現(xiàn)“框架”面板，選擇框架不同區(qū)域即可進(jìn)行框架集相應(yīng)區(qū)域的屬性設(shè)置。層的簡(jiǎn)單介紹層是網(wǎng)頁(yè)中用來(lái)放置文本、圖像、動(dòng)畫、表單、插件等網(wǎng)頁(yè)元素的載體。層在Dreamweaver網(wǎng)頁(yè)編輯區(qū)中可以自由移動(dòng)，改變層在網(wǎng)頁(yè)中的位置，便可實(shí)現(xiàn)層中網(wǎng)頁(yè)元素位置的改變。實(shí)際上，層的應(yīng)用技術(shù)也是一種網(wǎng)頁(yè)元素的定位技術(shù)，利用層能夠精確對(duì)頁(yè)面元素定位?！安迦搿泵姘宓摹安季帧苯M中單