靜態(tài)網(wǎng)頁(yè)制作設(shè)計(jì)報(bào)告

靜態(tài)網(wǎng)頁(yè)制作設(shè)計(jì)報(bào)告1.對(duì)靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)的認(rèn)識(shí)1.1網(wǎng)頁(yè)設(shè)計(jì)介紹1.2網(wǎng)頁(yè)設(shè)計(jì)及網(wǎng)頁(yè)布局技術(shù)1.3靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)要點(diǎn)2.主要實(shí)訓(xùn)項(xiàng)目及效果2.1項(xiàng)目12.1.1項(xiàng)目介紹2.1.2關(guān)鍵技術(shù)應(yīng)用2.1.3作品展示2.2項(xiàng)目22.2.1項(xiàng)目介紹2.2.2關(guān)鍵技術(shù)應(yīng)用2.2.3作品展示2.3項(xiàng)目32.3.1項(xiàng)目介紹2.3.2關(guān)鍵技術(shù)應(yīng)用2.3.3作品展示3.實(shí)訓(xùn)過程總結(jié)3.1實(shí)訓(xùn)收獲3.2存在的問題及解決思路4.結(jié)束語(yǔ)刖言Dreamweaver是美國(guó)MACROMEDIA司開發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺化網(wǎng)頁(yè)開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。Dreamweave、FLASH以及在DREAMWEAV之后推出的針DREAMWEAVER寸專業(yè)網(wǎng)頁(yè)圖像設(shè)計(jì)的FIREWORKSE者被MACROMED公司稱為DREAMTEAM夢(mèng)之隊(duì)），足見市場(chǎng)的反響和MACROMED公司對(duì)它們的自信。說到DREAMWEAVER我們應(yīng)該了解一下網(wǎng)頁(yè)編輯器的發(fā)展過程，隨著互聯(lián)網(wǎng)（Internet）的家喻戶曉，HTM技術(shù)的不斷發(fā)展和完善，隨之而產(chǎn)生了眾多網(wǎng)頁(yè)編輯器，從網(wǎng)頁(yè)編輯器基本性質(zhì)可以分為所見即所得網(wǎng)頁(yè)編輯器和非所見即所得網(wǎng)頁(yè)編輯器（則原始代碼編輯器），兩者各有千秋。所見則所得網(wǎng)頁(yè)編輯器的優(yōu)點(diǎn)就是直觀性，使用方便，容易上手，您在所見即所得網(wǎng)頁(yè)編輯器進(jìn)行網(wǎng)頁(yè)制作和在WOR中進(jìn)行文本編輯不會(huì)感到有什么區(qū)別，但它同時(shí)也存在著致命的弱點(diǎn)?，F(xiàn)如今，數(shù)以萬計(jì)的網(wǎng)站以網(wǎng)頁(yè)的方式提供了豐富、精彩的信息。在人類社會(huì)進(jìn)入信息時(shí)代的時(shí)候，在網(wǎng)絡(luò)成為通信的主要手段的時(shí)候，在計(jì)算機(jī)網(wǎng)絡(luò)普及的今天，網(wǎng)頁(yè)也在它自己的崗位上做出了突出的貢獻(xiàn)。網(wǎng)頁(yè)是我們?cè)诰W(wǎng)絡(luò)上的“代言人”。1．對(duì)靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)的認(rèn)識(shí)1.1網(wǎng)頁(yè)設(shè)計(jì)介紹從文件的角度來說，一個(gè)網(wǎng)頁(yè)就是一個(gè)HTMI文件。當(dāng)瀏覽者輸入一個(gè)網(wǎng)址或單擊某個(gè)鏈接后，在瀏覽器中顯示出來的就是一個(gè)網(wǎng)頁(yè)。一般網(wǎng)頁(yè)上都會(huì)有文本、圖片等信息，而復(fù)雜一些的網(wǎng)頁(yè)上還會(huì)有聲音、視頻、動(dòng)畫等多媒體內(nèi)容，為網(wǎng)頁(yè)增添了豐富的色彩和動(dòng)感。靜態(tài)網(wǎng)頁(yè)是指網(wǎng)頁(yè)文件中沒有程序，只有HTML代碼，一般以.html或.htm為后綴名的網(wǎng)頁(yè)，靜態(tài)網(wǎng)站內(nèi)容不會(huì)在制作完成后發(fā)生變化，任何人訪問都顯示一樣的內(nèi)容。網(wǎng)站是一系列邏輯上可以視為一個(gè)整體的網(wǎng)頁(yè)集合，是許多相關(guān)網(wǎng)頁(yè)有機(jī)結(jié)合而組成的一個(gè)信息服務(wù)中心。對(duì)于小型網(wǎng)站，是指帶有一定主題的多個(gè)網(wǎng)頁(yè)集合;對(duì)于大型網(wǎng)站還包含數(shù)據(jù)庫(kù)和服務(wù)器端應(yīng)用程序等如新浪、網(wǎng)易、搜狐等門戶網(wǎng)站。在構(gòu)成網(wǎng)站的眾多網(wǎng)頁(yè)中，有一個(gè)頁(yè)面比較特殊，稱為首頁(yè)，即網(wǎng)站的第一個(gè)頁(yè)面。動(dòng)態(tài)網(wǎng)頁(yè)是指網(wǎng)頁(yè)文件不僅具有HTML標(biāo)記，而且還含有程序代碼，并使用數(shù)據(jù)庫(kù)連接。動(dòng)態(tài)網(wǎng)頁(yè)能根據(jù)不同的時(shí)間，不同的來訪者顯示不同的內(nèi)容，動(dòng)態(tài)網(wǎng)站更新方便，一般在后臺(tái)直接更新。1.2網(wǎng)頁(yè)設(shè)計(jì)及網(wǎng)頁(yè)布局技術(shù)網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素。一個(gè)網(wǎng)頁(yè)是否精彩與網(wǎng)頁(yè)布局有著重要關(guān)系。常見的網(wǎng)頁(yè)布局類型有“國(guó)”字型、“匡”字型、“三”字型、“川”字型等。其他類型的有：標(biāo)題文本型，封面型，F(xiàn)lash型，框架型?？梢杂帽砀竦男问街v一個(gè)頁(yè)面分成幾個(gè)單元格，通過單元格的合并拆分，對(duì)網(wǎng)頁(yè)進(jìn)行布局，單元格就相當(dāng)于是一塊紙，在紙上寫的東西單元格里都可以容得下。通過設(shè)置單元格的長(zhǎng)寬對(duì)頁(yè)面進(jìn)行布局?？蚣軐?duì)網(wǎng)頁(yè)進(jìn)行布局有很多優(yōu)點(diǎn)網(wǎng)頁(yè)結(jié)構(gòu)清晰，易于維護(hù)和更新。方便用戶瀏覽網(wǎng)頁(yè)，采用滾動(dòng)條，可節(jié)省頁(yè)面空間，使網(wǎng)頁(yè)風(fēng)格保持統(tǒng)一;csS乍為網(wǎng)頁(yè)設(shè)計(jì)中的一種重要技術(shù)，具有以下優(yōu)點(diǎn)：，表現(xiàn)和內(nèi)容相分離，提高頁(yè)面瀏覽速度，易于維護(hù)和修改，應(yīng)用apdiv創(chuàng)建網(wǎng)頁(yè)，網(wǎng)頁(yè)清晰，易于分塊。應(yīng)用表單創(chuàng)建網(wǎng)頁(yè)，應(yīng)用行為創(chuàng)建網(wǎng)頁(yè)。1.3靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)要點(diǎn)用框架對(duì)網(wǎng)頁(yè)進(jìn)行布局時(shí)有很多缺點(diǎn)：網(wǎng)頁(yè)內(nèi)容無法被大多數(shù)搜索引擎搜索到，不被低版本瀏覽器支持，樣式陳舊，無法滿足個(gè)性化設(shè)置，難以實(shí)現(xiàn)不同框架中各元素的精確對(duì)齊。在網(wǎng)頁(yè)設(shè)計(jì)過程中使用csS羊式表，主要有以下兩種方式，內(nèi)部csS羊式表，外部csS羊式表，應(yīng)用庫(kù)創(chuàng)建網(wǎng)頁(yè)時(shí)：對(duì)于站點(diǎn)訪問者和開發(fā)人員而言，使用交互式網(wǎng)頁(yè)具有更多用途，使訪問者可以快速方便地在一個(gè)內(nèi)容豐富的網(wǎng)站上查找信息，后臺(tái)管理者可以收集、保存和分析站點(diǎn)訪問者提供的數(shù)據(jù)，，后臺(tái)管理者可以對(duì)內(nèi)容不斷變化的網(wǎng)站進(jìn)行更新。靜態(tài)網(wǎng)頁(yè)每個(gè)網(wǎng)頁(yè)都有一個(gè)固定的URL且網(wǎng)頁(yè)URL以.htm、.html、.shtml等常見形式為后綴，而不含有“?”;網(wǎng)頁(yè)內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上，無論是否有用戶訪問，每個(gè)靜態(tài)網(wǎng)頁(yè)的內(nèi)容都是保存在網(wǎng)站服務(wù)器上的，也就是說，靜態(tài)網(wǎng)頁(yè)是實(shí)實(shí)在在保存在服務(wù)器上的文件，每個(gè)網(wǎng)頁(yè)都是一個(gè)獨(dú)立的文件;靜態(tài)網(wǎng)頁(yè)的內(nèi)容相對(duì)穩(wěn)定，因此容易被搜索引擎檢索;靜態(tài)網(wǎng)頁(yè)沒有數(shù)據(jù)庫(kù)的支持，在網(wǎng)站制乍和維護(hù)方面工乍量較大，因此當(dāng)網(wǎng)站信息量很大時(shí)完全依靠靜態(tài)網(wǎng)頁(yè)制乍方式比較困難;靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有較大的限制。2．主要實(shí)訓(xùn)項(xiàng)目及效果2.1項(xiàng)目12.1.1項(xiàng)目介紹應(yīng)用現(xiàn)有素材，創(chuàng)建網(wǎng)頁(yè)“中秋送祝?！?.1.2關(guān)鍵技術(shù)應(yīng)用插入apdiv標(biāo)簽，插入圖片，創(chuàng)建超鏈接，設(shè)置段落2.1.3乍品展示圖一：中秋送祝福2.2項(xiàng)目22.2.1項(xiàng)目介紹有鐵血戰(zhàn)鷹的的圖片素材及相關(guān)資料，對(duì)鐵血戰(zhàn)鷹進(jìn)行描述，創(chuàng)建“鐵血戰(zhàn)鷹網(wǎng)頁(yè)”2.2.2關(guān)鍵技術(shù)應(yīng)用表格布局，插入橫線對(duì)網(wǎng)頁(yè)進(jìn)行美化2.2.3作品展示圖二：鐵血戰(zhàn)鷹2.3項(xiàng)目32.3.1項(xiàng)目介紹現(xiàn)有自然寫真的圖片，要求自然寫真的圖片在鼠標(biāo)經(jīng)過時(shí)換成別的圖片，點(diǎn)下導(dǎo)航欄的標(biāo)題時(shí)轉(zhuǎn)向別的網(wǎng)頁(yè)，制作靜態(tài)網(wǎng)頁(yè)，網(wǎng)頁(yè)名稱為自然寫真。2.3.2關(guān)鍵技術(shù)應(yīng)用練習(xí)頭標(biāo)題的應(yīng)用，超鏈接的創(chuàng)建，flash的插入，導(dǎo)航欄的創(chuàng)建。2.3.3作品展示圖三：自然寫真3．實(shí)訓(xùn)過程總結(jié)3.1實(shí)訓(xùn)收獲這個(gè)階段的實(shí)訓(xùn)我們主要是練習(xí)網(wǎng)頁(yè)制作及網(wǎng)站發(fā)布的各種知識(shí)。近些年隨著計(jì)算機(jī)的廣泛應(yīng)用，Internet已經(jīng)成為人們獲得信息不可或缺的媒介，特別是Internet的普及和發(fā)展，網(wǎng)絡(luò)已經(jīng)成為了不可或缺的通信手段。無論是最新的新聞信息、新產(chǎn)品的出臺(tái)、新游戲的發(fā)布、最新的動(dòng)態(tài)，包括等候就業(yè)人才的個(gè)人簡(jiǎn)歷，我們都是可以通過網(wǎng)絡(luò)來獲得。但是什么為這提供平臺(tái)的呢。我們又是通過什么來獲取這些信息的呢—網(wǎng)頁(yè)。由于人們使用網(wǎng)絡(luò)的頻繁，網(wǎng)頁(yè)作為上網(wǎng)的主要依托就變得非常的重要。網(wǎng)頁(yè)講究的是排版布局，其功能主要就是提供一種形式給每個(gè)上網(wǎng)者，讓他們能夠了解網(wǎng)站提供的信息。網(wǎng)頁(yè)設(shè)計(jì)直接面對(duì)的是大量的用戶，隨時(shí)都會(huì)反饋回來對(duì)網(wǎng)頁(yè)的批評(píng)建議等，可以根據(jù)實(shí)際情況進(jìn)行修改，這樣做可以使使用者用起來更加的方便。Dreamweaver工具為我們實(shí)現(xiàn)這些提供了便利，下面我將網(wǎng)頁(yè)制作和網(wǎng)站發(fā)布的知識(shí)總結(jié)如下：(1)網(wǎng)頁(yè)制作的前期工作是搜集大量的素材，我們的網(wǎng)頁(yè)只有是實(shí)用的才會(huì)是大眾喜歡的，搜集素材以充實(shí)我們的網(wǎng)頁(yè)。當(dāng)然我們也應(yīng)該在此時(shí)定下網(wǎng)站的方向是什么，剩下的就是靠Dreamweaver進(jìn)行編輯；(2)網(wǎng)頁(yè)的版式設(shè)計(jì)，版式設(shè)計(jì)時(shí)我們應(yīng)該有重點(diǎn)，把重要的內(nèi)容新聞放在醒目的位置上。規(guī)劃各元素在網(wǎng)頁(yè)中的位置關(guān)系和表現(xiàn)方法，合理安排圖像、文本等元素，使網(wǎng)頁(yè)布局合理、美觀大方；(3)文本編寫，我們的網(wǎng)頁(yè)中需要大量的文字材料，這就要在網(wǎng)頁(yè)編輯器中用HTML語(yǔ)言中的標(biāo)簽編寫。也可以利用網(wǎng)頁(yè)編輯工具的“所見即所得”功能，直接寫入文字。在瀏覽器中運(yùn)行時(shí)出現(xiàn)冗余代碼時(shí)返回代碼頁(yè)面重新進(jìn)行查看修改;(4)處理網(wǎng)頁(yè)之間的關(guān)聯(lián)，這主要是建立合理、高效的網(wǎng)頁(yè)導(dǎo)航系統(tǒng);(5)網(wǎng)頁(yè)發(fā)布過程，主要是將建設(shè)好的網(wǎng)頁(yè)上傳到服務(wù)器中供用戶瀏覽。3.2存在的問題及解決思路⑴在Dreamweaver基礎(chǔ)方面：制作網(wǎng)頁(yè)時(shí)如何實(shí)現(xiàn)網(wǎng)頁(yè)不跳轉(zhuǎn)就可以出現(xiàn)新的內(nèi)容，實(shí)現(xiàn)頁(yè)面內(nèi)的鏈接;用代碼編寫網(wǎng)頁(yè)上的按鈕，實(shí)現(xiàn)按鈕的各種功能，如刷新，重置，確定操作。Css樣式表的概念模糊。(2)網(wǎng)站風(fēng)格方面：一個(gè)網(wǎng)站的各個(gè)頁(yè)面之間風(fēng)格應(yīng)該是統(tǒng)一的，只有圍繞一個(gè)風(fēng)格才會(huì)成功。(3)網(wǎng)站的內(nèi)容方面：在制作網(wǎng)站時(shí)內(nèi)容之間應(yīng)該是相關(guān)的，在制作時(shí)我們不能追求面面俱到，只能做到精益求精。雜亂無章的網(wǎng)站是不會(huì)有大的發(fā)展的。4．結(jié)束語(yǔ)網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)就快結(jié)束了，在這短短的兩周里，我學(xué)會(huì)了很多新的知識(shí)，更掌握了新的技能，讓我覺得受益匪淺。在實(shí)訓(xùn)時(shí)，有空閑就會(huì)想到學(xué)校里青蔥歲月，簡(jiǎn)單流暢，無憂無慮，回想各位老師的授課，孜孜不倦，學(xué)校的生活固然是快樂，但是學(xué)校的實(shí)訓(xùn)課程真的很重要，因?yàn)樗茏屛覀冞@些在校學(xué)生接觸到社會(huì)的發(fā)展，讓我們有時(shí)間崗位環(huán)境，順利得從單純的校園生活感到復(fù)雜社會(huì)生活的不同。在這一周的時(shí)間里，我一心只做網(wǎng)頁(yè)，做自己喜歡的風(fēng)格的網(wǎng)頁(yè)。經(jīng)歷了一次充實(shí)而有愉快的實(shí)訓(xùn)，我學(xué)會(huì)了制作框架、使用錨點(diǎn)、給網(wǎng)頁(yè)網(wǎng)頁(yè)插入背景音樂、表格、視頻、flash、導(dǎo)航條等更深層次的掌握了它們的用法，現(xiàn)在我心目中的網(wǎng)頁(yè)也已經(jīng)大體竣工，我感到很開心，經(jīng)過這兩的不斷探索，我喜歡上了這門課程，感覺很有意思?；蛟S實(shí)訓(xùn)的結(jié)束代表一段新生活的開始，但是我認(rèn)為它不但是一門課，需要我們?nèi)フ莆?，同時(shí)還可以鍛煉我們的邏輯思維能力和思維的嚴(yán)密性，還有就是在制作網(wǎng)頁(yè)