【項目說明】本項目是設(shè)計一個簡單的個人網(wǎng)站,目的是通過

1、網(wǎng)站設(shè)計與制作項目教程項目一 個人網(wǎng)站【工程說明】本工程是設(shè)計一個簡單的個人網(wǎng)站，目的是通過完本錢工程掌握dreamweaver cs4的根本操作，接觸根本的html和css樣式，為制作更加復(fù)雜的網(wǎng)站做好知識準備。【技能目標】 掌握本地站點的設(shè)置和管理 根本掌握dreamweaver cs4的根本操作【知識準備】 學(xué)習(xí)網(wǎng)站站點的建立和管理，學(xué)習(xí)Dreamweaver CS4的根本操作，學(xué)習(xí)簡單的文本、圖像等的根本設(shè)置。工程一 個人網(wǎng)站個人網(wǎng)站效果圖工程一 個人網(wǎng)站準備1 創(chuàng)立與管理站點準備2 設(shè)置文本格式準備3 滾動文本準備4 插入圖像準備5 制作導(dǎo)航欄準備6 創(chuàng)立網(wǎng)頁鏈接準備7 動態(tài)鏈接效果

2、 任務(wù)一 index.html導(dǎo)航欄的實現(xiàn)任務(wù)二 完成主頁主頁版塊的設(shè)計準備一 創(chuàng)立與管理站點 制作網(wǎng)頁，第一步就是要創(chuàng)立站點，為網(wǎng)站指定本地文件夾和效勞器，使之建立聯(lián)系。創(chuàng)立本地站點可以使用向?qū)?chuàng)立，也可以使用高級面板創(chuàng)立。 【例1-1】.創(chuàng)立一個名為“my blog的站點，并在站點中新建“image文件夾。如圖：準備二 頁面屬性的設(shè)置 對于Dreamweaver 中創(chuàng)立的每個頁面，您都可以使用“頁面屬性對話框“修改“頁面屬性指定布局和格式設(shè)置屬性?！绊撁鎸傩詫υ捒蜃屇梢灾付撁娴哪J字體系列和字體大小、背景顏色、邊距、鏈接樣式及頁面設(shè)計的其它許多方面。您可以為創(chuàng)立的每個新頁面指定新的頁面

3、屬性，也可以修改現(xiàn)有頁面的屬性. 您在“頁面屬性對話框中所進行的更改將應(yīng)用于整個頁面。Dreamweaver 為“頁面屬性對話框的“外觀 (CSS)、“鏈接 (CSS)和“標題 (CSS)類別中指定的所有屬性定義 CSS 規(guī)那么。這些規(guī)那么嵌入在頁面的 head 局部中。 準備二 頁面屬性的設(shè)置選擇“修改“頁面屬性，或單擊文本的屬性檢查器中的“頁面屬性按鈕，彈出對話框如圖 準備二 頁面屬性的設(shè)置提示/技巧： 如果選擇的頁面屬性僅應(yīng)用于活動文檔，如果頁面使用了外部 CSS 樣式表，Dreamweaver 不會覆蓋在該樣式表中設(shè)置的標簽，因為這將影響使用該樣式表的其它所有頁面。 準備二 頁面屬性的

4、設(shè)置【例1-2】.在站點文件夾“HTML中新建一個名為index.html的網(wǎng)頁文件，作為個人博客的首頁，并設(shè)置頁面屬性。準備三 設(shè)置文本格式 選擇文本，設(shè)置文本格式，單擊屬性面板的“css按鈕，在目標規(guī)那么下拉選項中，選擇“新css規(guī)那么，然后點擊“編輯規(guī)那么，彈出“新css規(guī)那么對話框，如圖1.9所示在對話框中進行如下參數(shù)的設(shè)置：單擊“確定，會進入“.title的css規(guī)那么定義對話框準備三 設(shè)置文本格式 同時，會在代碼視窗的中，產(chǎn)生一個.title的類的css定義。用同樣的方法設(shè)置“我的心靈驛站文字的格式，設(shè)置結(jié)果如圖 準備三 設(shè)置文本格式 準備四 創(chuàng)立網(wǎng)頁鏈接 每個 Web 頁面都有一

5、個唯一地址，稱作統(tǒng)一資源定位器 (URL)。不過，在創(chuàng)立本地鏈接即從一個文檔到同一站點上另一個文檔的鏈接時，通常不指定作為鏈接目標的文檔的完整 URL，而是指定一個始于當(dāng)前文檔或站點根文件夾的相對路徑。 有三種類型的鏈接路徑：1、 絕對路徑例如 :/。2、 文檔相對路徑例如 dreamweaver/contents.html。3、站點根目錄相對路徑例如 /support/dreamweaver/contents.html。 使用 Dreamweaver，可以方便地選擇要為鏈接創(chuàng)立的文檔路徑的類型。 提示/技巧：最好使用您最喜歡和最得心應(yīng)手的鏈接類型 - 站點相對路徑或文檔相對路徑。與鍵入路徑相

6、比，瀏覽到鏈接能確保輸入的路徑始終正確。絕對路徑提供所鏈接文檔的完整 URL，而且包括所使用的協(xié)議如對于 Web 頁面，通常使用 :/，例如， :/。 必須使用絕對路徑，才能鏈接到其它效勞器上的文檔。對本地鏈接即到同一站點內(nèi)文檔的鏈接也可以使用絕對路徑鏈接，但不建議采用這種方式，因為一旦將此站點移動到其它域，那么所有本地絕對路徑鏈接都將斷開。通過對本地鏈接使用相對路徑，還能夠在需要在站點內(nèi)移動文件時提高靈活性。對網(wǎng)頁設(shè)計，經(jīng)常使用的是文檔相對路徑。在當(dāng)前文檔與所鏈接的文檔位于同一文件夾中，而且可能保持這種狀態(tài)的情況下，文檔相對路徑特別有用。文檔相對路徑還可用于鏈接到其它文件夾中的文檔，方法是利

7、用文件夾層次結(jié)構(gòu)，指定從當(dāng)前文檔到所鏈接文檔的路徑。 準備四 創(chuàng)立網(wǎng)頁鏈接 例如，假設(shè)一個站點的結(jié)構(gòu)如下圖：準備四 創(chuàng)立網(wǎng)頁鏈接 準備五 插入圖像 圖像格式 GIF圖形交換格式 GIF 文件最多使用 256 種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像，例如導(dǎo)航條、按鈕、圖標、徽標或其它具有統(tǒng)一色彩和色調(diào)的圖像。 JPEG聯(lián)合圖像專家組 JPEG 文件格式是用于攝影或連續(xù)色調(diào)圖像的較好格式，這是因為 JPEG 文件可以包含數(shù)百萬種顏色。隨著 JPEG 文件品質(zhì)的提高，文件的大小和下載時間也會隨之增加。通常可以通過壓縮 JPEG 文件在圖像品質(zhì)和文件大小之間到達良好的平衡。 PNG可移

8、植網(wǎng)絡(luò)圖形 PNG 文件格式是一種替代 GIF 格式的無專利權(quán)限制的格式，它包括對索引色、灰度、真彩色圖像以及 alpha 通道透明度的支持。 插入圖像的方法 1在“插入面板的“常用類別中，單擊“圖像圖標 。 2選擇“插入“圖像。 提示/技巧： 根據(jù)您的需要，可以在其中一個或兩個文本框中輸入信息。屏幕閱讀器會朗讀圖像的 Alt 屬性。 當(dāng)您單擊“取消時，該圖像將出現(xiàn)在文檔中，但 Dreamweaver 不會將它與輔助功能標簽或?qū)傩韵嚓P(guān)聯(lián)。準備五 插入圖像 設(shè)置圖像屬性 在菜單欄中單擊“窗口“屬性中，會翻開圖像的屬性面板，如圖 寬和高：圖像的寬度和高度，以像素表示。在頁面中插入圖像時，Dream

9、weaver 會自動用圖像的原始尺寸更新這些文本框。提示/技巧：您可以更改這些值來縮放該圖像實例的顯示大小，但這不會縮短下載時間，因為瀏覽器先下載所有圖像數(shù)據(jù)再縮放圖像。假設(shè)要縮短下載時間并確保所有圖像實例以相同大小顯示，請使用圖像編輯應(yīng)用程序縮放圖像。 準備五 插入圖像 準備六 滾動文本設(shè)置我來回滾動我向右滾動我寬300像素，高30像素。我滾動2次。我無限循環(huán)滾動。我大步前進。任務(wù)一 index.html導(dǎo)航欄的實現(xiàn) 任務(wù)目標 經(jīng)過前面的知識準備，已經(jīng)對導(dǎo)航欄有了一定的認識，通過本次實訓(xùn)任務(wù)，主要讓學(xué)生練習(xí)如何設(shè)置導(dǎo)航文字。任務(wù)分析 現(xiàn)在的網(wǎng)站導(dǎo)航根本都以文字導(dǎo)航為主，大都用css來定義它的

10、鏈接，實現(xiàn)了這個導(dǎo)航欄的制作，為制作更復(fù)雜的導(dǎo)航欄打下良好的根底。 本次任務(wù)是要實現(xiàn)個人網(wǎng)站index.html的導(dǎo)航欄任務(wù)完成效果 任務(wù)一 index.html導(dǎo)航欄的實現(xiàn)任務(wù)檢測與評估 任務(wù)完成后，請?zhí)顚懴卤?，對自己的學(xué)習(xí)情況進行評估。檢測項目評分標準分值學(xué)生自評教師評估任務(wù)知識內(nèi)容表格的設(shè)置熟練、一次性完成，得10分；一般熟練，反復(fù)操作后完成得8分；詢問，在別人指導(dǎo)下完成，得6分；未能完成，得0分。10導(dǎo)航文字的設(shè)置10鏈接的設(shè)置10任務(wù)操作技能站點的建立按站點建立的要求，完成站點建立，得10分，錯誤一項扣2分。10表格的布局準確性每出現(xiàn)一處錯誤扣1分。10表格各項參數(shù)設(shè)置美觀且設(shè)置合理

11、，不足一項扣2分。15導(dǎo)航文字css設(shè)置3分鐘內(nèi)設(shè)置好導(dǎo)航文字的css樣式，得15分；每晚半分鐘，扣2分15鏈接設(shè)置的準確性3分鐘內(nèi)完成鏈接的設(shè)置，得20分；每晚半分鐘扣3分20任務(wù)二 完成主頁主頁版塊的設(shè)計任務(wù)目標 完成了任務(wù)1，我們根本掌握了導(dǎo)航欄的設(shè)置，通過本次實訓(xùn)任務(wù)，主要讓我們練習(xí)如何設(shè)置表格的各項參數(shù)以及用表格布局網(wǎng)頁，插入圖像，設(shè)置滾動文本等根本操作。任務(wù)分析 插入圖像、設(shè)置表格格式、設(shè)置滾動文字都是制作網(wǎng)頁最根本的操作，我們通過本任務(wù)來完成網(wǎng)站主頁局部的設(shè)計。任務(wù)步驟步驟1： 設(shè)計如下圖的個人資料欄：任務(wù)二 完成主頁主頁版塊的設(shè)計步驟2： 在公告欄位置設(shè)置如下圖的內(nèi)容塊。設(shè)置公

12、告中的文字滾動。任務(wù)二 完成主頁主頁版塊的設(shè)計步驟 3： 制作如下圖的興趣愛好欄任務(wù)二 完成主頁主頁版塊的設(shè)計步驟 4：完成如下圖的最新日記版塊：任務(wù)二 完成主頁主頁版塊的設(shè)計任務(wù)檢測與評估 檢測項目評分標準分值學(xué)生自評教師評估任務(wù)知識內(nèi)容表格的設(shè)置熟練、一次性完成，得10分；一般熟練，反復(fù)操作后完成得8分；詢問，在別人指導(dǎo)下完成，得6分；未能完成，得0分。10滾動文本的設(shè)置10圖片的插入10任務(wù)操作技能圖片的插入和設(shè)置按要求插入并設(shè)置圖片得10分；在別人的指導(dǎo)下完成得8分；未能完成，得0分。10表格的布局準確性每出現(xiàn)一處錯誤扣2分。20表格各項參數(shù)設(shè)置美觀且設(shè)置合理，不足一項扣1分。20滾動文本的設(shè)置符合要求并熟練設(shè)置得15分，在別人的指導(dǎo)下完成，得12分，未完成得0分。20任務(wù)二 完成主頁主頁版塊的設(shè)計【工程評價】檢測項目評分標準分值學(xué)生自評教師評估項目功能（50分）站點管理網(wǎng)站文件能建立站點并用站點管理網(wǎng)頁文件10分頁面屬性設(shè)置能按照需求設(shè)置頁面屬性10分建立鏈接與導(dǎo)航欄設(shè)置能正確建立鏈接并設(shè)置導(dǎo)航欄的樣式。15分建立主頁版塊能按要求設(shè)置主頁版塊。15分知識掌握（30分）站點配置正確建立站點5分文本格式設(shè)置