第章個(gè)人網(wǎng)站我的博客

1、整理ppt1第第9 9章章 個(gè)人網(wǎng)站個(gè)人網(wǎng)站我的博客我的博客 整理ppt29.1網(wǎng)頁效果圖網(wǎng)頁效果圖 主頁效果圖整理ppt39.1網(wǎng)頁效果圖網(wǎng)頁效果圖 子頁效果圖整理ppt49.2客戶需求客戶需求 “博客”一詞是從英文單詞Blog音譯而來，一種表達(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í)交流的地方；通過博客賺外快；通過博客展示自己的企業(yè)形象或企業(yè)商務(wù)活動(dòng)信息。整理ppt59.2客戶需求客戶需求 對(duì)于個(gè)人博客，客戶往往都希望能夠制作出既美觀又能彰顯自己風(fēng)格的頁面，這

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

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

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

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

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

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

8、pt159.5網(wǎng)站主頁設(shè)計(jì)網(wǎng)站主頁設(shè)計(jì) Javascript腳本設(shè)計(jì) 1.制作JavaScript時(shí)間特效之退出顯示訪問時(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)

9、;else time = (time + seconds); alert(您在這兒呆了 + time + .歡迎再來!);整理ppt169.5網(wǎng)站主頁設(shè)計(jì)網(wǎng)站主頁設(shè)計(jì) Javascript腳本設(shè)計(jì) 1.制作JavaScript時(shí)間特效之退出顯示訪問時(shí)間。引用腳本把區(qū)域改為整理ppt179.5網(wǎng)站主頁設(shè)計(jì)網(wǎng)站主頁設(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.

10、status = mess.substring(0, 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ù) 整理ppt189.5網(wǎng)站主頁設(shè)計(jì)網(wǎng)站主頁設(shè)計(jì) Javascript腳本設(shè)計(jì) 2.制作JavaScript狀態(tài)欄特效之動(dòng)態(tài)顯示狀態(tài)欄。引用腳本把區(qū)域改為整理ppt199.5網(wǎng)站主頁設(shè)計(jì)網(wǎng)站主頁設(shè)計(jì) v主頁制作 用Dreamweaver完成頁面整合 整理ppt209.5網(wǎng)站主頁設(shè)計(jì)網(wǎng)站主頁設(shè)計(jì) v主頁制作 用Dreamweaver完成頁面整合 網(wǎng)頁頂部設(shè)計(jì)1導(dǎo)航設(shè)計(jì)2“日志”設(shè)計(jì)3“相片”設(shè)計(jì)4“關(guān)于我”設(shè)計(jì)5“留言”設(shè)計(jì)6網(wǎng)頁底部設(shè)計(jì)7整理ppt2