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

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

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

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

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

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

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

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

8、ript腳本設(shè)計(jì) 1.制作JavaScript時(shí)間特效之退出顯示訪問(wèn)時(shí)間。編寫代碼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 + .歡迎再來(lái)!);15網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程9.5網(wǎng)站主頁(yè)設(shè)計(jì) Javascript腳本設(shè)計(jì) 1.制作JavaScript時(shí)間特效之退出顯示訪問(wèn)時(shí)間。引用腳本把區(qū)域改為16網(wǎng)站設(shè)計(jì)基礎(chǔ)與實(shí)例教程9.5網(wǎng)站主頁(yè)設(shè)計(jì) Javascript腳本設(shè)計(jì) 2.制作JavaScript狀態(tài)欄特效之動(dòng)態(tài)顯示狀態(tài)欄。編寫代碼var mess=歡迎光臨我的博客;var shiJian = 300;/設(shè)置時(shí)間間隔seq = 0;function scroll() len = mess.length;window.status = mess.substring(0,

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