第18講綜合實例

Dreamweaver8

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

第十八講綜合實例1、綜合實例一：設計個人主頁

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

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

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

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

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