第18講綜合實(shí)例

Dreamweaver8

中文版網(wǎng)頁(yè)制作基礎(chǔ)主講人

第十八講綜合實(shí)例1、綜合實(shí)例一：設(shè)計(jì)個(gè)人主頁(yè)

2、綜合實(shí)例二：制作留言本3、綜合實(shí)例三：上傳發(fā)布網(wǎng)站

1、綜合實(shí)例一：設(shè)計(jì)個(gè)人主頁(yè)1．設(shè)計(jì)分析2．準(zhǔn)備工作3．設(shè)計(jì)制作1.1.設(shè)計(jì)分析個(gè)人主頁(yè)的設(shè)計(jì)說(shuō)簡(jiǎn)單也簡(jiǎn)單，說(shuō)難也難。說(shuō)簡(jiǎn)單是指?jìng)€(gè)人主頁(yè)的設(shè)計(jì)可以不受任何規(guī)范的約束，設(shè)計(jì)者可以完全按照自己的想法去設(shè)計(jì)，去表現(xiàn)自己的創(chuàng)意和個(gè)性，再加上可視化的設(shè)計(jì)工具──Dreamweaver8，讓用戶可以不必了解其中原理，不懂復(fù)雜的編程，就可以輕松設(shè)計(jì)出自己的主頁(yè)。說(shuō)難是指要設(shè)計(jì)一個(gè)優(yōu)秀的頁(yè)面是需要付出的努力的，它需要廣泛的知識(shí)、審美的眼光、精心的投入，還需要用戶慢慢的體會(huì)與摸索。一般來(lái)說(shuō)設(shè)計(jì)個(gè)人頁(yè)面要注意以下幾個(gè)問(wèn)題：一、定位明確，主題突出。主題是指網(wǎng)頁(yè)所言表現(xiàn)的主要思想內(nèi)涵，它是網(wǎng)頁(yè)的靈魂。網(wǎng)站設(shè)計(jì)表達(dá)的是一定的意圖和要求，有明確的主題。設(shè)計(jì)者可以通過(guò)對(duì)網(wǎng)頁(yè)構(gòu)成元素進(jìn)行條理性處理，更好地營(yíng)造符合設(shè)計(jì)目的的環(huán)境，突出主題，增強(qiáng)瀏覽者對(duì)網(wǎng)頁(yè)的注意力，增進(jìn)對(duì)網(wǎng)頁(yè)內(nèi)容的理解。比如說(shuō)可以把主題定位在自我展示、交友、愛(ài)好或者攝影等比較小的主題上，最好是自己感興趣的內(nèi)容。二、內(nèi)容與形式統(tǒng)一。設(shè)計(jì)網(wǎng)頁(yè)不能只講花哨的頁(yè)面，過(guò)于強(qiáng)調(diào)獨(dú)特而脫離內(nèi)容，或者只求內(nèi)容而缺乏藝術(shù)的表現(xiàn)。要確保網(wǎng)頁(yè)上的每一個(gè)元素都有存在的必要性，不要為了炫耀而使用冗余的技術(shù)，那樣得到的效果可能會(huì)適得其反。三、結(jié)構(gòu)清晰，方便瀏覽。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，要強(qiáng)調(diào)頁(yè)面各組成部分的共性因素或者使各部分共同含有某種形式特征，同時(shí)要將各個(gè)組成部分放在合理的位置上，這就是整體布局。一個(gè)合理的布局可使網(wǎng)頁(yè)內(nèi)容顯得清晰、有條不紊，并有很強(qiáng)的層次感，方便查看內(nèi)容。有了整體性強(qiáng)的布局，才能讓瀏覽者更容易理解和接受網(wǎng)頁(yè)的主題。四、文字與圖像的編排適當(dāng)。頁(yè)面中的文字和圖片搭配要適當(dāng)，不要整個(gè)頁(yè)面全是密密麻麻的文字，讓人看了沒(méi)有耐心讀下去。同時(shí)還要設(shè)計(jì)一下文字的樣式，使文字易于閱讀，不刺眼。圖片使用之前最好處理一下，以適合自己頁(yè)面的要求。頁(yè)面中文字和圖片最好是穿插混排。1.2．準(zhǔn)備工作

主頁(yè)面的結(jié)構(gòu)被定格以后，可以動(dòng)手準(zhǔn)備網(wǎng)頁(yè)素材了。(1) 文字文字是頁(yè)面信息最重要的部分，也是最常用的表達(dá)手段。文本內(nèi)容可以自己撰寫或者從網(wǎng)絡(luò)轉(zhuǎn)載，轉(zhuǎn)載時(shí)要注明出處。(2) 圖像如果頁(yè)面中沒(méi)有圖像，就缺少生機(jī)，讓讀者興趣減半，有時(shí)會(huì)沒(méi)有讀下去的耐心。圖像內(nèi)容可以去借助軟件自己制作，如Photoshop，或者從購(gòu)買的素材光盤復(fù)制，或者從網(wǎng)路上搜索下載一些共享的東西。網(wǎng)絡(luò)的最大用處之一就是資源共享，用戶可以充分利用網(wǎng)絡(luò)資源。從網(wǎng)絡(luò)下載的圖片最好自己處理一下，以符合自己頁(yè)面的表達(dá)要求。(3) 動(dòng)畫、音頻、視頻為了使自己的頁(yè)面充滿活力，豐富多彩，用戶可以在頁(yè)面中適當(dāng)?shù)奶砑觿?dòng)畫、音頻和視頻等元素，用于表達(dá)主題的需要。(4) 建立站點(diǎn)為了存放和管理頁(yè)面文件和素材，需要先建立一個(gè)站點(diǎn)，例如我們創(chuàng)建一個(gè)名為“myweb”的本地站點(diǎn)，同時(shí)為了避免文件和素材放置混亂，需要在根目錄myweb下，再建立幾個(gè)子文件夾用于存放不同類別的素材，如創(chuàng)建images文件夾用于存放圖片，創(chuàng)建media文件夾用于存放多媒體文件等。1.3．設(shè)計(jì)制作具體制作參考范例解析18.1.2。2、綜合實(shí)例二：制作留言本2.1數(shù)據(jù)庫(kù)2.2設(shè)計(jì)思路2.3動(dòng)態(tài)站點(diǎn)2.4數(shù)據(jù)庫(kù)面板2.1．?dāng)?shù)據(jù)庫(kù)什么是數(shù)據(jù)庫(kù)？實(shí)際上數(shù)據(jù)庫(kù)就是為了實(shí)現(xiàn)一定的目的按某種規(guī)則組織起來(lái)的數(shù)據(jù)集合。一個(gè)數(shù)據(jù)庫(kù)可以包含多個(gè)表，表是一種結(jié)構(gòu)化的文件，可用來(lái)存儲(chǔ)某種特定類型的數(shù)據(jù)。表由多個(gè)列組成，一個(gè)列就是一個(gè)字段，一個(gè)字段代表一種數(shù)據(jù)類型。表中的數(shù)據(jù)是按行有序存儲(chǔ)的，一行就是一條記錄。我們經(jīng)常聽說(shuō)的Access、MySQL

、SQLserver、Oracle等都是數(shù)據(jù)庫(kù)的管理系統(tǒng)，它們是用來(lái)創(chuàng)建數(shù)據(jù)庫(kù)、存儲(chǔ)數(shù)據(jù)的，其中以Access數(shù)據(jù)庫(kù)較為簡(jiǎn)單。本例中數(shù)據(jù)庫(kù)就用Access來(lái)創(chuàng)建，此數(shù)據(jù)庫(kù)只有一個(gè)表liuyan，表中含有如下字段：姓名（name）：用于存放留言者姓名。地址（address）：用于存放留言者聯(lián)系地址。郵箱（email）：用于存放留言者電子郵箱地址。內(nèi)容（content）：用于存放留言者具體留言內(nèi)容。日期（lydate）：用于存放留言者發(fā)言時(shí)間和日期。2.2．設(shè)計(jì)思路

本留言本的設(shè)計(jì)思路是：首先制作一個(gè)用于提交留言信息的ASP頁(yè)面，通過(guò)表單提交到服務(wù)器，將數(shù)據(jù)存入數(shù)據(jù)庫(kù)，完成后自動(dòng)跳轉(zhuǎn)到一個(gè)顯示所有留言信息的頁(yè)面，通過(guò)此頁(yè)面可以查看以往的所有留言信息。整個(gè)過(guò)程主要包含3個(gè)文件：guestbook.asp：訪客留言的頁(yè)面，提交后，將數(shù)據(jù)存入數(shù)據(jù)庫(kù)。show.asp：顯示所有留言信息的頁(yè)面。guestbook.mdb：數(shù)據(jù)庫(kù)文件，用于存放用戶的留言信息。2.3．動(dòng)態(tài)站點(diǎn)為了支持動(dòng)態(tài)頁(yè)面需要先創(chuàng)建一個(gè)動(dòng)態(tài)站點(diǎn)，需要注意下面兩處，其余操作與本地站點(diǎn)相似。2.4．?dāng)?shù)據(jù)庫(kù)面板執(zhí)行【窗口】/【數(shù)據(jù)庫(kù)】命令，調(diào)出【數(shù)據(jù)庫(kù)】面板，然后鏈接數(shù)據(jù)庫(kù)，具體操作參考范例。3、綜合實(shí)例三：上傳發(fā)布網(wǎng)站3.1網(wǎng)站檢測(cè)3.2申請(qǐng)空間、域名3.3上傳發(fā)布3.4網(wǎng)站宣傳3.1．網(wǎng)站檢測(cè)在將自己的站點(diǎn)上傳到互聯(lián)網(wǎng)服務(wù)器供大家瀏覽之前，建議用戶先在本地對(duì)網(wǎng)站進(jìn)行一次全面的測(cè)試，確保頁(yè)面在目標(biāo)瀏覽器中如預(yù)期的那樣顯示和工作，而且頁(yè)面中沒(méi)有斷開的鏈接，下載也不占用太長(zhǎng)時(shí)間。一般測(cè)試站點(diǎn)可從如下幾個(gè)方面入手：檢查瀏覽器的兼容性：確保頁(yè)面在目標(biāo)瀏覽器中能夠如預(yù)期的那樣工作，并確保這些頁(yè)面在其他瀏覽器中要么工作正常，要么“明確地拒絕工作”。頁(yè)面在不支持樣式、層、插件或JavaScript的瀏覽器中應(yīng)清晰可讀且功能正常。對(duì)于在較早版本的瀏覽器中根本無(wú)法運(yùn)行的頁(yè)面，應(yīng)考慮使用“檢查瀏覽器”行為，自動(dòng)將訪問(wèn)者重定向到其他頁(yè)面。在瀏覽器中預(yù)覽和測(cè)試頁(yè)面：應(yīng)盡可能多地在不同的瀏覽器和平臺(tái)上預(yù)覽頁(yè)面。這樣可是使得用戶有機(jī)會(huì)查看布局、顏色、字體大小和默認(rèn)瀏覽器窗口大小等方面的區(qū)別，這些區(qū)別在目標(biāo)瀏覽器檢查中是無(wú)法預(yù)見的。鏈接檢查：檢查站點(diǎn)是否有斷開的鏈接，并修復(fù)斷開的鏈接。由于其他站點(diǎn)也在重新設(shè)計(jì)、重新組織，所以用戶所鏈接的頁(yè)面可能已被移動(dòng)或刪除?？蛇\(yùn)行鏈接檢查報(bào)告對(duì)鏈接進(jìn)行測(cè)試，查找斷開的、外部的和孤立的鏈接和修復(fù)斷鏈接。設(shè)置下載時(shí)間和大小首選參數(shù)：監(jiān)測(cè)頁(yè)面的文件大小以及下載這些頁(yè)面所占用的時(shí)間。要知道對(duì)于由大型表格組成的頁(yè)面，在某些瀏覽器中，在整張表完全載入之前，訪問(wèn)者將什么也看不到。應(yīng)考慮將大型表格分為幾部分；如果不可能這樣做，請(qǐng)考慮將少量?jī)?nèi)容（例如歡迎辭或廣告橫幅）放在表格以外的頁(yè)面頂部，這樣用戶可以在下載表格的同時(shí)查看這些內(nèi)容。測(cè)試站點(diǎn)：運(yùn)行一些站點(diǎn)報(bào)告來(lái)測(cè)試并解決整個(gè)站點(diǎn)的問(wèn)題。用戶可以檢查整個(gè)站點(diǎn)是否存在問(wèn)題，例如無(wú)標(biāo)題文檔、空標(biāo)簽以及冗余的嵌套標(biāo)簽等。驗(yàn)證標(biāo)簽：檢查用戶的代碼中是否存在標(biāo)簽或語(yǔ)法錯(cuò)誤。網(wǎng)站測(cè)試通過(guò)之后，可以考慮上傳網(wǎng)站了，在上傳之前，需要先申請(qǐng)一個(gè)空間，這樣才能將網(wǎng)站發(fā)布到遠(yuǎn)端服務(wù)器上。3.2．申請(qǐng)空間、域名網(wǎng)站測(cè)試通過(guò)之后，可以考慮上傳網(wǎng)站了，在上傳之前，需要先申請(qǐng)一個(gè)空間，這樣才能將網(wǎng)站發(fā)布到遠(yuǎn)端服務(wù)器上從費(fèi)用上講，空間分為付費(fèi)空間和免費(fèi)空間兩種。用戶可以根據(jù)網(wǎng)站的性質(zhì)和實(shí)際的需要來(lái)選擇。如果是公司企業(yè)的網(wǎng)站，需要一個(gè)穩(wěn)定的服務(wù)和足夠的空間，那么一般選擇付費(fèi)空間。如果是個(gè)人站點(diǎn)這樣的小網(wǎng)站，可以考慮申請(qǐng)免費(fèi)的空間。收費(fèi)空間功能齊全，服務(wù)穩(wěn)定，有獨(dú)立的IP，可以對(duì)應(yīng)的申請(qǐng)一個(gè)一級(jí)域名，也沒(méi)有廣告的騷擾。域名的申請(qǐng)與空間申請(qǐng)基本相同，它一般都是伴隨著空間申請(qǐng)一起來(lái)的，網(wǎng)絡(luò)服務(wù)商在提供空間服務(wù)時(shí)一般都提供域名服務(wù)，它也有付費(fèi)和免費(fèi)之分，得到的域名的等級(jí)不同。用戶可以到中國(guó)萬(wàn)網(wǎng)上查看具體的申請(qǐng)方法。申請(qǐng)的過(guò)程一般按照頁(yè)面的提示信息一步一步進(jìn)行即可，直到最后申請(qǐng)成功后，發(fā)給用戶一個(gè)上傳網(wǎng)站的用戶名和密碼以及上傳地址，用戶憑此用戶名和密碼就可以上傳站點(diǎn)了。為了能夠正常發(fā)布，上傳網(wǎng)站都會(huì)有一個(gè)說(shuō)明，規(guī)定用戶網(wǎng)站的首頁(yè)名稱，一般主頁(yè)名規(guī)定為index.html、index.htm、index.asp、index.php、default.htm、default.asp等，在上傳之前用戶要確認(rèn)一下自己的首頁(yè)名，是否符合要求。上傳的空間一般是FTP網(wǎng)站，憑借自己的賬戶和密碼，用戶可以將站點(diǎn)內(nèi)容直接粘貼復(fù)制進(jìn)去，這種方法不穩(wěn)定，容易中斷出錯(cuò)，比較好的方法是借助FTP上傳軟件將站點(diǎn)上傳上去。3.2．上傳發(fā)布Dreamweaver8本身也提供了Ftp上傳方法，在【文件】面板中單擊按鈕，打開【站點(diǎn)定義】對(duì)話框，設(shè)置“遠(yuǎn)程信息”，將FTP的地址、帳號(hào)和密碼都輸入進(jìn)去，可以先測(cè)試網(wǎng)絡(luò)是否通暢。設(shè)置好之后【文件】面板中單擊上傳文件按鈕，彈出如下圖所示的信息提示框，單擊“確定”按鈕后上傳整個(gè)站點(diǎn)。上傳完畢后，在瀏覽器中輸入網(wǎng)站提供的域名，就可以訪問(wèn)自己的網(wǎng)站了。3.2．網(wǎng)站宣傳自己在Internet上有家了，怎樣讓別人知道并且來(lái)訪問(wèn)呢？這需要自己去主動(dòng)的去宣傳，比如將個(gè)人站點(diǎn)的網(wǎng)址發(fā)送給好友