商務(wù)網(wǎng)頁(yè)實(shí)例項(xiàng)目03課件

1、 內(nèi)容提要在了解了商務(wù)網(wǎng)站的相關(guān)理論后，如何利用網(wǎng)頁(yè)制作軟件實(shí)現(xiàn)網(wǎng)頁(yè)的構(gòu)想呢？本項(xiàng)目將為你打開網(wǎng)頁(yè)制作的第一步。通過(guò)本項(xiàng)目的學(xué)習(xí)，可以了解到在Dreamweaver CS5中新建、管理、導(dǎo)入、導(dǎo)出本地站點(diǎn)的方法。本項(xiàng)目知識(shí)點(diǎn)相對(duì)單一，卻是設(shè)計(jì)制作任何網(wǎng)站至關(guān)重要的第一步。本項(xiàng)目主要內(nèi)容有： Dreamweaver CS5有關(guān)站點(diǎn)的概念。 Dreamweaver CS5創(chuàng)建站點(diǎn)的方法。 Dreamweaver CS5站點(diǎn)管理功能。 Dreamweaver CS5發(fā)布站點(diǎn)的方法。1簡(jiǎn)介站點(diǎn)可以簡(jiǎn)單地理解成存放站內(nèi)信息的文件夾，是一組網(wǎng)頁(yè)文檔的集合。設(shè)計(jì)者通過(guò)各種鏈接把這些網(wǎng)頁(yè)聯(lián)系在一起，瀏覽者通過(guò)

2、不同的鏈接，可以從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)，從而實(shí)現(xiàn)對(duì)整個(gè)網(wǎng)站的訪問(wèn)。網(wǎng)頁(yè)制作的第一步不是制作一個(gè)網(wǎng)頁(yè)，而是創(chuàng)建一個(gè)新的站點(diǎn)。Dreamweaver站點(diǎn)由3種類型的文件夾組成，這3種文件夾是否是同一個(gè)文件夾，取決于開發(fā)環(huán)境和所開發(fā)的網(wǎng)站類型。（1）本地文件夾。（2）遠(yuǎn)程文件夾。（3）測(cè)試服務(wù)器文件夾?；顒?dòng)1 了解有關(guān)站點(diǎn)的概念2站點(diǎn)的設(shè)計(jì)流程要設(shè)計(jì)一個(gè)好的網(wǎng)站并不簡(jiǎn)單，這需要做好充分的事先準(zhǔn)備，如果準(zhǔn)備做得好，那么在后續(xù)工作中往往會(huì)達(dá)到事半功倍的效果，反之，則會(huì)做很多無(wú)用功。在此，介紹站點(diǎn)設(shè)計(jì)的基本流程和幾大步驟。第1步：對(duì)網(wǎng)站進(jìn)行周密的規(guī)劃，確定建站目的和面向的對(duì)象，明確幾級(jí)頁(yè)面，頁(yè)面之間的

3、關(guān)系，服務(wù)器配置的各項(xiàng)情況等。第2步：建立完整的站點(diǎn)目錄結(jié)構(gòu)。第3步：使用網(wǎng)頁(yè)制作工具完成網(wǎng)站的創(chuàng)建。3站點(diǎn)常見的素材文件1）文字。2）圖像。3）聲音。4）動(dòng)畫。5）視頻。6）其他。除此以外，Dreamweaver中還能添加JavaScript、ActiveX控件等，使網(wǎng)頁(yè)的動(dòng)態(tài)效果千變?nèi)f化。4常見站點(diǎn)結(jié)構(gòu)以站點(diǎn)web為例，web站點(diǎn)根目錄下，有images、css和swf三個(gè)文件夾和一個(gè)index.html文件，其中從文件名上就能看出index.html是該站點(diǎn)的首頁(yè)，images文件夾存儲(chǔ)網(wǎng)站所用的圖片，也是網(wǎng)站的默認(rèn)圖片文件夾，css文件夾存放該網(wǎng)站的樣式表，swf存放flash等多媒體

4、文件，如圖3-1所示。該站點(diǎn)創(chuàng)建完成后在Dreamweaver“文件”面板中顯示如圖3-2所示。 圖3-1 web站點(diǎn)結(jié)構(gòu) 圖3-2 web本地站點(diǎn)以上站點(diǎn)規(guī)劃比較適合規(guī)模較小的網(wǎng)站，例如個(gè)人制作的個(gè)人空間等，如果要制作企業(yè)等一些專業(yè)性的網(wǎng)站或者商業(yè)購(gòu)物網(wǎng)站，那么建立的站點(diǎn)結(jié)構(gòu)就會(huì)復(fù)雜些，各部分有專門的子文件夾，每個(gè)部分的文件夾下均包括html文件夾和images文件夾分別存放文本資料和圖片資料，但是值得注意的是，文件目錄不適宜過(guò)深，一般不超過(guò)三層，因?yàn)槟夸涍^(guò)深，不容易管理。5站點(diǎn)的目錄結(jié)構(gòu)基本常識(shí)創(chuàng)建站點(diǎn)前，應(yīng)該有所計(jì)劃，將站點(diǎn)下的各文件及文件夾進(jìn)行有效的分類，以便將來(lái)管理站點(diǎn)時(shí)節(jié)省更多的時(shí)

5、間。通常在本地磁盤上新建一個(gè)文件夾，該文件夾稱為“根目錄”，存放所有的站點(diǎn)資料。以下是站點(diǎn)目錄結(jié)構(gòu)的幾個(gè)常識(shí)：1）一般主頁(yè)文件名“index.html”，放在站點(diǎn)的根目錄下。2）文件名通常使用小寫英文字母，不使用空格、特殊符號(hào)，不使用中文。3）文件命名盡量以4種方式命名，即漢語(yǔ)拼音，漢語(yǔ)拼音縮寫，英文，英文縮寫。方便通過(guò)文件名直觀地了解頁(yè)面內(nèi)容。切忌用默認(rèn)的untitled-1、untitled-2、untitled-3等方式命名，即便是初學(xué)者，也需要養(yǎng)成很好的文件命名習(xí)慣。4）圖像一般存放于單獨(dú)的文件夾中，如“images”，“img”。5）各分支頁(yè)面的文件存放在各自的文件夾中。1定義站點(diǎn)通

6、過(guò)之前的學(xué)習(xí)我們知道了站點(diǎn)的重要性和需要注意的地方，那么怎樣在Dreamweaver 中創(chuàng)建站點(diǎn)呢？這里特別需要注意的是Dreamweaver CS5與之前的版本在站點(diǎn)的定義上的區(qū)別。Dreamweaver CS5定義站點(diǎn)時(shí)有所升級(jí)，取消了向?qū)Фx站點(diǎn)和直接定義站點(diǎn)，取而代之的是“站點(diǎn)設(shè)置對(duì)象”對(duì)話框來(lái)對(duì)站點(diǎn)進(jìn)行定義。我們只需在“站點(diǎn)設(shè)置對(duì)象”對(duì)話框通過(guò)每個(gè)選項(xiàng)卡中的每個(gè)文本框一步一步引導(dǎo)我們創(chuàng)建一個(gè)新的站點(diǎn)。2創(chuàng)建貿(mào)貿(mào)女裝本地站點(diǎn)（1）活動(dòng)分析創(chuàng)建站點(diǎn)是制作網(wǎng)站前必不可少的，本例利用“站點(diǎn)設(shè)置對(duì)象”對(duì)話框一步步地創(chuàng)建一個(gè)新的站點(diǎn)。（2）知識(shí)要點(diǎn) 理解什么是Dreamweaver站點(diǎn)。 通過(guò)“

7、新建站點(diǎn)”命令創(chuàng)建一個(gè)站點(diǎn)。活動(dòng)2 創(chuàng)建“貿(mào)貿(mào)女裝”本地站點(diǎn)（3）動(dòng)手操作步驟1 前期準(zhǔn)備在本機(jī)E盤創(chuàng)建根目錄文件夾maomaonvzhuang，在文件夾內(nèi)新建images文件夾來(lái)存放圖像，新建css文件夾來(lái)存放樣式表，如圖3-3所示。圖3-3 maomaonvzhuang本地目錄步驟2 創(chuàng)建站點(diǎn)1）打開Dreamweaver CS5軟件。2）在Dreamweaver CS5窗口中，選擇“站點(diǎn)”“新建站點(diǎn)”，如圖3-4所示。步驟3 站點(diǎn)設(shè)置對(duì)象1）打開站點(diǎn)定義對(duì)話框，單擊“站點(diǎn)”選項(xiàng)卡，在“您可以在此處為Dreamweaver站點(diǎn)選擇本地文件夾和名稱”的文本框中輸入站點(diǎn)名稱和本地站點(diǎn)文件夾的位

8、置，如圖3-5所示。 圖3-4 新建站點(diǎn)圖3-5 “站點(diǎn)“選項(xiàng)卡2）單擊“服務(wù)器”選項(xiàng)卡，此處將在此位置上選擇承載web的頁(yè)面服務(wù)器。如果要鏈接到Web并發(fā)布頁(yè)面，則只需定義一個(gè)遠(yuǎn)程服務(wù)器即可。如果只在Dreamweaver站點(diǎn)上工作，則無(wú)需完成此步驟，如圖3-6所示。圖3-6 “服務(wù)器”選項(xiàng)卡3）在需要添加的時(shí)候，單擊空白列表下面的“”按鈕，在彈出的對(duì)話框的文本框中依次輸入服務(wù)器的相關(guān)信息即可。本書的案例以本地站點(diǎn)為基礎(chǔ)，因此直接保存跳至“高級(jí)設(shè)置”選項(xiàng)卡。如圖3-7、圖3-8所示。4）單擊“高級(jí)設(shè)置”選項(xiàng)卡，出現(xiàn)高級(jí)選項(xiàng)卡的下拉選項(xiàng)卡。在本地信息選項(xiàng)卡的“默認(rèn)圖片文件夾”文本框中單擊文件夾

9、圖標(biāo)選擇站點(diǎn)默認(rèn)的圖片文件夾。在“鏈接相對(duì)于”中選擇“文檔”按鈕。如果沒有定義遠(yuǎn)程服務(wù)器則在Web URL文本框中輸入Web URL，如果已定義遠(yuǎn)程服務(wù)器，則Dreamweaver CS5根據(jù)設(shè)置的遠(yuǎn)程服務(wù)器自動(dòng)生成Web URL。“啟用緩存”選項(xiàng)是用來(lái)設(shè)置是否建立高速緩存文件，它的作用是為每個(gè)實(shí)際存在的文件創(chuàng)建一條記錄，當(dāng)移動(dòng)、刪除和重命名時(shí)，迅速更新鏈接，建議選中該復(fù)選框。剩余選項(xiàng)卡沒有特別要求一律選擇默認(rèn)，不作更改，如圖3-9所示。5）單擊“保存”按鈕，Dreamweaver CS5創(chuàng)建初始站點(diǎn)緩存，站點(diǎn)創(chuàng)建完成，在文件面板中可以查看，如圖3-10所示。如果文件面板沒有顯示，可通過(guò)“窗口

10、”“文件”菜單命令或者直接按鍵即可打開文件面板。圖3-10 maomaonvzhuang本地站點(diǎn)1站點(diǎn)管理功能Dreamweaver CS5包含許多站點(diǎn)管理功能，例如建立站點(diǎn)，編輯站點(diǎn)，復(fù)制、刪除站點(diǎn)以及導(dǎo)入、導(dǎo)出站點(diǎn)。這些操作對(duì)網(wǎng)站的建立和編輯提供了便利。2管理站點(diǎn)在Dreamweaver CS5中，所定義的站點(diǎn)是以本地文件夾為根目錄的，當(dāng)該文件夾被刪除、移動(dòng)或重命名后，站點(diǎn)將無(wú)法正確使用，重新新建站點(diǎn)又需要浪費(fèi)更多的時(shí)間和精力，因此可以對(duì)該站點(diǎn)進(jìn)行編輯操作或者刪除操作?？梢酝ㄟ^(guò)執(zhí)行“站點(diǎn)”“管理站點(diǎn)”菜單命令對(duì)站點(diǎn)進(jìn)行管理，如圖3-11所示。打開“管理站點(diǎn)”對(duì)話框，如圖3-12所示。活動(dòng)3

11、 管 理 站 點(diǎn)（1）新建站點(diǎn)單擊“新建”按鈕，彈出對(duì)話框后的操作和“站點(diǎn)”“新建站點(diǎn)”相同，如圖3-13所示。（2）編輯站點(diǎn)編輯當(dāng)前選定的站點(diǎn)，如圖3-14所示。選擇后重新彈出“站點(diǎn)設(shè)置對(duì)象”對(duì)話框，可以對(duì)站點(diǎn)的所有對(duì)象重新進(jìn)行設(shè)置。（3）復(fù)制站點(diǎn)復(fù)制當(dāng)前選定的站點(diǎn)，如圖3-15所示。（4）刪除站點(diǎn)刪除當(dāng)前選定的站點(diǎn)，如圖3-16所示。（5）導(dǎo)出站點(diǎn)導(dǎo)出當(dāng)前的站點(diǎn)，用于網(wǎng)站備份。（6）導(dǎo)入站點(diǎn)導(dǎo)入當(dāng)前的站點(diǎn)，比如將備份文件導(dǎo)入到站點(diǎn)內(nèi)。3使用“文件”面板管理文件和文件夾（1）打開文件（2）新建文件或文件夾（3）刪除站點(diǎn)文件或文件夾（4）重命名文件或文件夾（5）移動(dòng)文件或文件夾（6）刷新“文件

12、”面板（1）活動(dòng)分析Dreamweaver具有與遠(yuǎn)程服務(wù)器進(jìn)行文件傳輸?shù)墓δ埽ㄟ^(guò)站點(diǎn)窗口，可以將本地站點(diǎn)結(jié)構(gòu)復(fù)制到遠(yuǎn)程站點(diǎn)上，也可以將遠(yuǎn)程站點(diǎn)結(jié)構(gòu)復(fù)制到本地計(jì)算機(jī)中。當(dāng)在本地站點(diǎn)創(chuàng)建了鏈接關(guān)系并連接到遠(yuǎn)程站點(diǎn)后，就可以向遠(yuǎn)程站點(diǎn)傳遞文件，因?yàn)閮蓚€(gè)站點(diǎn)的結(jié)構(gòu)是完全相同的。（2）知識(shí)要點(diǎn) 學(xué)習(xí)Dreamweaver的遠(yuǎn)程傳輸功能。 上傳站點(diǎn)。（3）動(dòng)手操作活動(dòng)4 發(fā)布“貿(mào)貿(mào)女裝”站點(diǎn)步驟1 定義遠(yuǎn)程站點(diǎn)1）在“文件”面板的站點(diǎn)列表中選中需要上傳的站點(diǎn)，如圖3-17所示。2）單擊“文件”面板的“上傳文件”按鈕，如圖3-18所示。3）此時(shí)彈出對(duì)話框提示需要定義遠(yuǎn)程服務(wù)器，單擊“是”按鈕，如圖3-19

13、所示。4）單擊“是”按鈕后，界面跳轉(zhuǎn)至“站點(diǎn)設(shè)置對(duì)象 添加服務(wù)器”對(duì)話框，單擊“添加新服務(wù)器”按鈕，如圖3-20所示。5）在彈出的對(duì)話框中，依次填寫“服務(wù)器名稱”，選擇“連接方法”為“FTP”，填寫“FTP地址”“用戶名”和“密碼”，單擊“保存”按鈕，如圖3-21所示。6）回到“站點(diǎn)設(shè)置對(duì)象 添加服務(wù)器”對(duì)話框，同樣單擊“保存”按鈕。步驟2 上傳站點(diǎn)文件1）在“文件”面板中單擊“展開以顯示本地和遠(yuǎn)程站點(diǎn)”按鈕，打開站點(diǎn)窗口，如圖3-22所示。2）打開站點(diǎn)窗口后，在右側(cè)的“本地文件”窗口中選擇要上傳的文件及文件夾，單擊“上傳”按鈕，如圖3-23所示。3）單擊“上傳”按鈕后，將彈出提示對(duì)話框，確定是否上傳整個(gè)站點(diǎn)，單擊“確定”按鈕，上傳文件。4）上傳的過(guò)程需要一點(diǎn)時(shí)間，待文件全部上傳后，站點(diǎn)