個人網(wǎng)站我的博客課件

1、第9章 個人網(wǎng)站我的博客 1網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.1網(wǎng)頁效果圖 主頁效果圖2網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.1網(wǎng)頁效果圖 子頁效果圖3網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.2客戶需求 “博客”一詞是從英文單詞Blog音譯而來，一種表達(dá)個人思想和網(wǎng)絡(luò)鏈接，內(nèi)容按照時間順序排列，并且不斷更新的出版方式。 個人博客（個人網(wǎng)站）的作用有以下幾點：作為網(wǎng)絡(luò)個人日記；個人展示自己某個方面的空間；網(wǎng)絡(luò)交友的地方；學(xué)習(xí)交流的地方；通過博客賺外快；通過博客展示自己的企業(yè)形象或企業(yè)商務(wù)活動信息。4網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.2客戶需求 對于個人博客，客戶往往都希望能夠制作出既美觀又能彰顯自己風(fēng)格的頁面，這就要求做到以下幾點： 1

2、簡潔為美：博客的裝飾盡量簡單，放棄那些不實的設(shè)計，即使要有也不要因為裝飾影響到文章的閱讀。 2要有自己的見解：對于某個事物你必須有自己的態(tài)度；對于你提供的信息和內(nèi)容，必須做到真實、廣博、生動、高品位；轉(zhuǎn)載別人的文章要寫名出處，無法查究出處的要寫明轉(zhuǎn)載。 3結(jié)構(gòu)清晰：可分為個人區(qū)域（如個人介紹、日志等）、交際區(qū)域（如好友、留言等）和服務(wù)區(qū)域（如音樂、視頻、新聞等）。 持續(xù)更新：做到至少一個星期更新一次，隔幾天最好。5網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.3頁面風(fēng)格定位 個人博客的風(fēng)格定位相對容易，主要取決于作者的性格、喜好，總體上來講體現(xiàn)為以下四個方面： 1.顏色風(fēng)格：選擇一種體現(xiàn)個人形象、延伸個人內(nèi)涵的色

3、彩。 2.字體風(fēng)格：一般網(wǎng)頁默認(rèn)的字體是宋體。為了體現(xiàn)站點的“與眾不同”和特有風(fēng)格，可以根據(jù)需要選擇一些特別字體。 3.內(nèi)容風(fēng)格：布局簡單明了，內(nèi)容清新，欄目齊全便于交流。 4.語言風(fēng)格：通俗易懂，便于溝通與交流。6網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.4 網(wǎng)站建設(shè)方案 網(wǎng)站建設(shè)方案包括以下幾個部分：客戶情況分析； 網(wǎng)站需要實現(xiàn)的目的和目標(biāo)； 網(wǎng)站形象說明； 網(wǎng)站的欄目板塊和結(jié)構(gòu)； 網(wǎng)站內(nèi)容的安排，相互鏈接關(guān)系； 使用軟件、硬件和技術(shù)分析說明； 開發(fā)時間進度表； 宣傳推廣方案； 維護方案； 制作費用； 本公司簡介：成功作品，技術(shù)，人才說明等。 7網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.5網(wǎng)站主頁設(shè)計 效果圖設(shè)計 個人網(wǎng)

4、站比較簡單，內(nèi)容信息較少，往往是利用空閑時間來發(fā)展網(wǎng)站，這就造成了投入網(wǎng)站的人力和時間都非常有限，網(wǎng)頁布局結(jié)構(gòu)比較單一。由于網(wǎng)站面向的瀏覽者也相對較少，所以要在主頁面上優(yōu)先提供最重要的信息，提供可以吸引瀏覽者注意的信息。本網(wǎng)站把個人日志放在內(nèi)容區(qū)的主要位置。 個人網(wǎng)站要想做大很難，所以就要在已有的基礎(chǔ)上做出自己的特點。 首先，網(wǎng)站定位要準(zhǔn)確。個人網(wǎng)站最好走個性化路線，避開與大網(wǎng)站的正面競爭。網(wǎng)站要小而精，不要一來就搞個大而全的東西。其次，內(nèi)容、觀點要獨特。內(nèi)容是最好的推廣載體，它的重要性不言而喻。最后，適當(dāng)加些動畫和交互功能。這樣可以使瀏覽者記住你的網(wǎng)站，并用幫助推廣你的網(wǎng)站。8網(wǎng)站設(shè)計基礎(chǔ)與

5、實例教程9.5網(wǎng)站主頁設(shè)計效果圖設(shè)計9網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.5網(wǎng)站主頁設(shè)計 主頁制作用Fireworks完成效果圖切片 本案例中的頁面分割要進行的工作很少，主要是將一幅大的圖片分割成三部分，分別用于頁面頂部、導(dǎo)航、頁面底部的背景圖，起到上下輝映的效果。10網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.5網(wǎng)站主頁設(shè)計 主頁制作用Flash完成動畫設(shè)計 網(wǎng)頁中的動畫已成為網(wǎng)站創(chuàng)立獨特風(fēng)格的重要手段，本案例中使用Flash的遮罩特效實現(xiàn)百葉窗效果。畫面轉(zhuǎn)換的時間要恰到好處，太快會使瀏覽者看不清楚要傳達(dá)的信息，創(chuàng)意沒有意義。太慢則感覺空洞、單調(diào)，使瀏覽者厭倦、注意力分散。11網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.5網(wǎng)站主頁設(shè)計

6、主頁制作用Flash完成動畫設(shè)計 打開Flash CS3并新建一文檔。 修改文檔屬性，寬為210像素，高為130像素。 在圖層1導(dǎo)入第一幅圖片，并調(diào)整圖片大小與場景1同大。 新建一圖層，再導(dǎo)入第二幅圖片，同樣，調(diào)整到與場景1同大。 新建一元件，選擇“影片剪輯”，命名為“矩形”。 在影片剪輯“矩形”中畫一無線框的長矩形，長210高13，并讓其中心對齊 。 在第20幀處插入關(guān)鍵幀，將矩形尺寸改為210*1 。 設(shè)置120幀為Shape（形狀）動畫。 12網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.5網(wǎng)站主頁設(shè)計 主頁制作用Flash完成動畫設(shè)計 新建一元件，選擇“影片剪輯”，命名為“百葉窗” 。 打開庫面板，并拖出

7、十個“矩形”影片剪輯，并整齊地排列，使其完全覆蓋主場景。 回到場景1中，并新建一圖層，命名為“百葉窗”。把“百葉窗”影片剪輯拖入進來，并中心對齊。 設(shè)置“百葉窗”層為遮罩層。 預(yù)覽，導(dǎo)出。 13網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.5網(wǎng)站主頁設(shè)計 主頁制作Javascript腳本設(shè)計 JavaScript 使網(wǎng)頁增加互動性。JavaScript 使有規(guī)律地重復(fù)的HTML文段簡化，減少下載時間。JavaScript 能及時響應(yīng)用戶的操作，對提交表單做即時的檢查，無需浪費時間交由 CGI 驗證。JavaScript 的特點是無窮無盡的，只要你有創(chuàng)意。 14網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.5網(wǎng)站主頁設(shè)計 Javasc

8、ript腳本設(shè)計 1.制作JavaScript時間特效之退出顯示訪問時間。編寫代碼fangWen = new Date();function bye() tuiChu = new Date();minutes = (tuiChu.getMinutes() - fangWen.getMinutes();seconds = (tuiChu.getSeconds() - fangWen.getSeconds();time = (seconds + (minutes * 60);if (time = 1) time = (time + second);else time = (time + secon

9、ds); alert(您在這兒呆了 + time + .歡迎再來!);15網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.5網(wǎng)站主頁設(shè)計 Javascript腳本設(shè)計 1.制作JavaScript時間特效之退出顯示訪問時間。引用腳本把區(qū)域改為16網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.5網(wǎng)站主頁設(shè)計 Javascript腳本設(shè)計 2.制作JavaScript狀態(tài)欄特效之動態(tài)顯示狀態(tài)欄。編寫代碼var mess=歡迎光臨我的博客;var shiJian = 300;/設(shè)置時間間隔seq = 0;function scroll() len = mess.length;window.status = mess.substring(0,

10、 seq+1);/在狀態(tài)欄上顯示msg的第一到seq+1個字符，seq每次遞加seq+;if ( seq = len ) seq = 0 ;/當(dāng)seq的長度大于等于msg的字符長度時，seq=0window.setTimeout(scroll();, shiJian );/每個時間間隔調(diào)用一次scroll函數(shù) 17網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.5網(wǎng)站主頁設(shè)計 Javascript腳本設(shè)計 2.制作JavaScript狀態(tài)欄特效之動態(tài)顯示狀態(tài)欄。引用腳本把區(qū)域改為18網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.5網(wǎng)站主頁設(shè)計 主頁制作用Dreamweaver完成頁面整合 19網(wǎng)站設(shè)計基礎(chǔ)與實例教程9.5網(wǎng)站主頁設(shè)計 主頁制作用Dreamweaver完成頁面整合 網(wǎng)頁頂部設(shè)計1導(dǎo)航設(shè)計2“日志”設(shè)計3“相片”設(shè)計4“關(guān)于我”設(shè)計5“留言”設(shè)計6網(wǎng)