1講網(wǎng)站建設(shè)的整體流程_第1頁
1講網(wǎng)站建設(shè)的整體流程_第2頁
1講網(wǎng)站建設(shè)的整體流程_第3頁
1講網(wǎng)站建設(shè)的整體流程_第4頁
1講網(wǎng)站建設(shè)的整體流程_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

教師備課首頁蘇州工業(yè)職業(yè)技術(shù)學(xué)院教師備課首頁SuzhouInstituteOfIndustrialTechnology第1頁課題子項(xiàng)目一第1講網(wǎng)站建設(shè)的整體流程課型新授授課班級授課時數(shù)2教學(xué)目標(biāo)1．對網(wǎng)頁制作工具有一個基本的認(rèn)識,知道它的功能、用處和使用的廣度等.2．了解網(wǎng)站的開發(fā)步驟，為接下來的學(xué)習(xí)打基礎(chǔ).教學(xué)重點(diǎn)按照工作的規(guī)格對學(xué)生提出學(xué)習(xí)本課程的具體要求。網(wǎng)站的開發(fā)步驟,以及一些規(guī)格數(shù)據(jù)。教學(xué)難點(diǎn)使學(xué)生能夠明確自己學(xué)習(xí)本課程的最終目標(biāo)，并從整體上了解網(wǎng)站開發(fā)流程,為后面的學(xué)習(xí)打基礎(chǔ)。學(xué)情分析教學(xué)效果教后記第1講網(wǎng)站建設(shè)的整體流程引入：隨著網(wǎng)絡(luò)的發(fā)展因特網(wǎng)已成為了人們生活的一部分,這都是網(wǎng)頁的功勞。通過網(wǎng)頁瀏覽者可以得到各種信息，可以交換思想可以通過網(wǎng)絡(luò)進(jìn)行購物。目前的網(wǎng)頁種類繁多，歸納來可以分成這么幾種：單純根據(jù)興趣而制作的個人網(wǎng)頁、由具有共同愛好的人所組成的團(tuán)體、以宣傳企業(yè)為目的的企業(yè)用網(wǎng)頁、成為因特網(wǎng)商店的大型購物中心以及門戶網(wǎng)站等。而那些視覺效果比較好的網(wǎng)站往往會收到我們的青睞。那么這些網(wǎng)頁是如何制作出來的呢？在目前市面上眾多的網(wǎng)頁編輯軟件中,有的重視效率,有的強(qiáng)調(diào)版面設(shè)計，而Dreamweaver可以很方便地實(shí)現(xiàn)這兩方面的完美結(jié)合。另外，Dreamweaver的網(wǎng)頁動態(tài)效果與網(wǎng)頁排版功能都優(yōu)于一般同類軟件，即使是初學(xué)者也能制作出相當(dāng)水準(zhǔn)的網(wǎng)頁，所以Dreamweaver是網(wǎng)頁設(shè)計者的最佳選擇,已成為目前最為流行的網(wǎng)頁設(shè)計工具.[網(wǎng)頁設(shè)計好學(xué)嗎？]

網(wǎng)頁設(shè)計好學(xué)。只要學(xué)會操作網(wǎng)頁三劍客,人人都可以制作出網(wǎng)頁來.

網(wǎng)頁設(shè)計不好學(xué)。（列出兩個差異巨大的網(wǎng)頁）同樣是設(shè)計公司，但在網(wǎng)上展示出的效果卻如此的不同.假設(shè)大家是客戶，在經(jīng)費(fèi)許可的情況下，你會優(yōu)先選擇哪一家來做設(shè)計呢？當(dāng)然是第一家了。這就是網(wǎng)頁設(shè)計最能體現(xiàn)出效益的地方。但是，同樣是做網(wǎng)頁的，為什么差距如此之大呢？原因就在于網(wǎng)頁設(shè)計是平面設(shè)計、動畫設(shè)計、音效設(shè)計、配色等各個方面結(jié)合的產(chǎn)物.因此，學(xué)會網(wǎng)頁設(shè)計雖然不難，但是要做好網(wǎng)頁,卻需要不斷地學(xué)習(xí)和積累，在不斷的探索和實(shí)踐中進(jìn)步。新授:一、認(rèn)清兩個名詞-—網(wǎng)頁和網(wǎng)站

在互聯(lián)網(wǎng)上應(yīng)用最廣的功能應(yīng)該是網(wǎng)頁瀏覽。瀏覽器窗口中顯示的一個頁面被稱為一個網(wǎng)頁，網(wǎng)頁實(shí)際上就是一個文件，這個文件存放在世界上某個地方的某一臺計算機(jī)中，而且這臺計算機(jī)必須要與互聯(lián)網(wǎng)相連接。當(dāng)我們在瀏覽器的地址欄中輸入網(wǎng)頁的地址后，經(jīng)過一段復(fù)雜而又快速的程序解析后,網(wǎng)頁文件就會被傳送到我們的計算機(jī)中,然后再通過瀏覽器解釋網(wǎng)頁的內(nèi)容,最后展現(xiàn)在我們的眼前.文字和圖片是構(gòu)成網(wǎng)頁的兩個最基本的元素。除此之外，網(wǎng)頁中還包括動畫，表單,視頻和音頻等內(nèi)容。那網(wǎng)站呢？網(wǎng)站是眾多網(wǎng)頁的集合。不同的網(wǎng)頁通過有組織的鏈接整合到一起，為瀏覽者提供更豐富的信息。網(wǎng)站同時也是信息服務(wù)類企業(yè)的代名詞。如果某人在網(wǎng)易或者在搜狐工作，那他可能會告訴你,他在一家網(wǎng)站工作。網(wǎng)頁和網(wǎng)站的關(guān)系：假如網(wǎng)站是一本書的話,網(wǎng)頁就是這本書中的一頁。HTMLHTML文件的基本結(jié)構(gòu)HTML文檔的結(jié)構(gòu)<HTML><HEAD><TITLE>我的第一個網(wǎng)頁</TITLE></HEAD><BODY>HelloWorld!</BODY></HTML>HTML網(wǎng)頁<HEAD>頭部部分<BODY>主體部分<HTML>…</HTML>標(biāo)簽標(biāo)記HTML文檔的開始和結(jié)束網(wǎng)頁標(biāo)題網(wǎng)頁內(nèi)容，可以是文本、圖像等[網(wǎng)站的開發(fā)不僅僅只是把網(wǎng)頁制作出來那么簡單］二、網(wǎng)站的開發(fā)步驟網(wǎng)站的前期策劃確定網(wǎng)站的用戶群和定位網(wǎng)站的主題(確定網(wǎng)站的名稱）整理客戶提交的資料（文字、圖片）網(wǎng)站結(jié)構(gòu)圖(網(wǎng)站導(dǎo)航設(shè)計）網(wǎng)站形象設(shè)計網(wǎng)站的標(biāo)志（Logo）網(wǎng)站的色彩搭配網(wǎng)站的標(biāo)準(zhǔn)字體網(wǎng)站的宣傳標(biāo)語網(wǎng)頁布局圖（版式風(fēng)格）首頁頁面設(shè)計其他二級頁面效果設(shè)計在PhotoShop中裁切設(shè)計稿站點(diǎn)的規(guī)劃與建立在網(wǎng)頁編輯軟件中制作網(wǎng)頁測試與發(fā)布上傳后期更新與維護(hù)具體分析-—“網(wǎng)上書店”:確定網(wǎng)站的名稱網(wǎng)站的名稱很重要,它決定著你的網(wǎng)站是否更容易被人接受?！九e例】：“網(wǎng)上書店”這個網(wǎng)站，名字讀起來瑯瑯上口、能反映出網(wǎng)站的題材、且易記.討論主題:你能列舉出一些你所喜歡的網(wǎng)站名字并說明你喜歡它們的理由嗎？網(wǎng)站的名稱應(yīng)該簡短、有特色、容易記，最重要的，它應(yīng)該能夠很好地概括你的網(wǎng)站主題。網(wǎng)站的名稱應(yīng)該簡短、有特色、容易記，最重要的，它應(yīng)該能夠很好地概括你的網(wǎng)站主題。網(wǎng)站命名的原則:（1）要有很強(qiáng)的概括性，從網(wǎng)站的名稱就能反映出網(wǎng)站的題材。（2）要合理、合法、易記,最好讀起來瑯瑯上口。（3）名稱不宜過長，要方便其它網(wǎng)站鏈接。（4）有個性,體現(xiàn)出一定的內(nèi)涵，能給瀏覽者以更多的想像力和沖擊力。2．整理客戶提交的資料在做網(wǎng)頁之前,我們要盡可能多地收集與網(wǎng)站主題相關(guān)的素材（文字、圖像、多媒體等素材），再去蕪存菁，取其精華為我所用?！九e例】：3．網(wǎng)站結(jié)構(gòu)圖主頁（首頁）主頁（首頁）新書展示暢銷圖書天天特價網(wǎng)上訂單詳細(xì)介紹詳細(xì)介紹詳細(xì)介紹……4．網(wǎng)站的標(biāo)志網(wǎng)站的標(biāo)志是站點(diǎn)特色和內(nèi)涵的集中體現(xiàn)。一個好的Logo設(shè)計應(yīng)該是網(wǎng)站文化的濃縮，應(yīng)該能讓人一見到它就能聯(lián)想到它的網(wǎng)站。【舉例】:其它網(wǎng)站的標(biāo)志賞析：5．網(wǎng)站的標(biāo)準(zhǔn)色彩網(wǎng)站給人的第一印象就來自于視覺的沖擊，因此，確定網(wǎng)站的色彩是相當(dāng)重要的一步.不同的色彩搭配會產(chǎn)生不同的效果,并可能影響到訪問者的情緒.賞心悅目的網(wǎng)頁,色彩的搭配都是和諧而優(yōu)美的?！九e例】：主色調(diào)：藍(lán)+白+黑輔助色：綠+橙+黃+灰6．網(wǎng)站的標(biāo)準(zhǔn)字體網(wǎng)站的字體也是網(wǎng)頁內(nèi)涵的一種體現(xiàn),合適的字體會讓人感覺到美觀、親切、舒適。一般的網(wǎng)頁默認(rèn)的字體是宋體，如果你想體現(xiàn)與眾不同的風(fēng)格,可以做一些特效字體，但特效字體最好是以圖像的形式體現(xiàn)，因?yàn)楹芏酁g覽者的電腦中可能沒有你所設(shè)置的特效字體?！九e例】：正文：宋體、12像素、行高16像素、深灰色標(biāo)題：宋體、14像素、加粗、深灰色版塊標(biāo)題:特殊字體（迷你簡稚藝）處理成圖片的格式7．網(wǎng)站的宣傳標(biāo)語討論主題：請大家列舉出生活中給你留下深刻印象的宣傳標(biāo)語,并分析標(biāo)語的優(yōu)劣?！九e例】：李寧——一切皆有可能8、網(wǎng)頁布局圖網(wǎng)頁布局元素一般包括:網(wǎng)站名稱(logo）、廣告區(qū)（banner)、導(dǎo)航區(qū)(menu）、新聞（what’snew）、搜索（search）、友情鏈接（links）、版權(quán)（copyright）等。網(wǎng)頁版式：我們常見的布局結(jié)構(gòu)有“國”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、標(biāo)題文本型布局、框架型布局和變化型布局等?！九e例】：首頁：三字型（上、中、下)；中：分三欄(左、中、右）Logo圖片Logo圖片導(dǎo)航條用戶登錄新書上架（一本）站長推薦熱門圖書（一本）flash(banner)網(wǎng)上調(diào)查專業(yè)圖書（一本）友情鏈接天天特價（滾動字幕）申明銷售排行榜文字鏈接導(dǎo)航版權(quán)區(qū)子頁——新書展示：三字型(上、中、下）；中：分兩欄（左、右）Logo圖片Logo圖片導(dǎo)航條用戶登錄新書展示（具體內(nèi)容）網(wǎng)上調(diào)查友情鏈接申明文字鏈接導(dǎo)航版權(quán)區(qū)9．首頁及二級頁面設(shè)計頁面設(shè)計主要包括創(chuàng)意、色彩和版式三個方面。創(chuàng)意會使網(wǎng)頁在眾多的競爭對手中脫穎而出；色彩可以使網(wǎng)頁獲得生命的力量；版式則是和用戶溝通的核心，所以這三者缺一不可.使用Photoshop設(shè)計首頁效果圖，首頁設(shè)計完之后，其他頁面的設(shè)計就沒有主頁那么復(fù)雜了。主要是和主頁風(fēng)格保持一致,頁面設(shè)計美觀,要有返回主頁的鏈接等.【舉例】：首頁設(shè)計圖:子頁——新書展示設(shè)計圖:10．在PhotoShop中裁切設(shè)計稿【舉例】:首頁裁切圖：11．站點(diǎn)的規(guī)劃與建立【舉例】：站點(diǎn)文件夾（ebook）站點(diǎn)文件夾（ebook）imagesflashcsstemptemplates12．在網(wǎng)頁編輯軟件中制作網(wǎng)頁【舉例】：用Dreamweaver來完成.13．測試與發(fā)布上傳測試網(wǎng)站創(chuàng)建好了。在上傳到網(wǎng)上之前要測試它的兼容性和鏈接的有效性。兼容性可以使用Dreamweaver的“檢查瀏覽器”功能測試，鏈接可以使用Dreamweaver的“檢查整個站點(diǎn)的鏈接”功能進(jìn)行測試.這種方法我們將在后續(xù)項(xiàng)目中學(xué)習(xí)，在此亦不做贅述。還有一種測試,是把網(wǎng)頁上傳到Internet服務(wù)器上去測試鏈接的有效性、網(wǎng)頁的下載速度等。這種測試，只是你將網(wǎng)頁上傳到網(wǎng)上申請的個人空間后，以一名普通瀏覽者瀏覽的方式去檢驗(yàn)即可。上傳方法一：使用Dreamweaver的FTP功能上傳。方法二：使用一些FTP工具上傳。14．后期更新與維護(hù)網(wǎng)站做好之后必須要有專人維護(hù)，網(wǎng)站才具有生命力，才會有點(diǎn)擊率.對于一個網(wǎng)站來說，它的更新與管理是極其重要的。一個再好的網(wǎng)站如果不進(jìn)行內(nèi)容更新與管理，都會出現(xiàn)許多這樣或那樣的問題。例如,網(wǎng)站內(nèi)容陳舊,超級鏈接斷開等。特色網(wǎng)站的網(wǎng)址：[1]/邊走邊喬［2］漫海精靈[3］7米淺藍(lán)［4］/錯愛雙魚[5］http：///依兒酷站［6］/帕琪奧王國［7]/五米藍(lán)[8]http：///g.htm純快樂物語［9］http：///strangers's[10]/main/main.htmMr。Queen［11]http：///home.htm［12］http://350007。net/myweb/default.htm東區(qū)生活［13]http：///windows。aspseo'slife個人階段任務(wù)1：請從下面十個網(wǎng)站中挑選三個網(wǎng)站，分別從:主題、色彩搭配、網(wǎng)頁布局圖(首頁+子頁，共兩張網(wǎng)頁）、網(wǎng)站邏輯結(jié)構(gòu)圖（從首頁三層）、網(wǎng)站觀后感（至少100字）五個方面進(jìn)行賞析。1。通用汽車中國投資有限公http：///chinese/index。jsp2.「可口可樂」中國網(wǎng)站http：

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論