網頁制作與網頁設計PAGE14目錄前言…………４網站建設前的準備…………4統一網站整體風格中需準備的內容…………………..4網站的定位和規劃………5總體設計方案主題鮮明……………….5網站頁面的版式及色彩………………6網頁制作的原則……………7關于網頁導航…………7關于網頁布局…………7關于表格………………8關于圖形………………8網頁制作與網頁設計全文共15頁，當前為第1頁。網頁制作與網頁設計全文共15頁，當前為第1頁。關于背景………………8關于動畫………………8關于頁面………………8關于鏈接………………9更新與維護……………9網頁制作方法與技巧………9應用表格的定位功能…………………9修改HTML代碼來實現頁面的動態效果………………10適當運用網頁特效……………………11幾個值得注意的問題………………..……12預覽時看不到圖片……………………12不要忽略頁面屬性的設置………..…12網頁制作與網頁設計全文共15頁，當前為第2頁。網頁制作與網頁設計全文共15頁，當前為第2頁。適當變化網頁中的字體…………..…13網站的發布與后期維護……………………13網站測試……….……13網站發布…………..…13網站維護與更新………………….…13結束語………………………14

論文摘要

網頁制作與網頁設計全文共15頁，當前為第3頁。[摘要]隨著Internet的日益興起和以網頁為載體的網絡信息的廣泛傳播和應用，使得網站的建設及網頁制作得到發展的空間，大至大型企業的產品推銷、售后服務、解決方案，小至個人Web頁面開發，形形色色，五彩繽紛，網站建設和網頁制作也成為計算機網絡領域最熱門的話題。本文介紹了網站建設的定位和規劃，總體設計的方案的主題以及網站頁面的版式及色彩，網頁制作的原則關于網頁導航、網頁布局、表格、圖形等；網頁制作中應用表格的定位功能、修改HTML代碼來實現頁面的動態效果、適當運用網頁特效的一些方法與技巧，以及在建設和制作中值得注意的一些問題；最后說明了網站發布后和后期維護的相關內容

.網頁制作與網頁設計全文共15頁，當前為第3頁。[關鍵詞]網站網頁網站建設網頁制作

淺談網站建設和網頁制作的方法高愛春(開封大學軟件學院07級應用3班)前言

網頁制作與網頁設計全文共15頁，當前為第4頁。隨著計算機網絡的廣泛應用，尤其是互聯網的普及與發展，上網已成為人們新的生活方式。上網可以了解發生的新聞事件，查詢各種所需資料信息，利用網絡購物，辦公，還可以進行商務貿易和休閑聊天。對互聯網的需求自然拉動了供應，各種網站便成幾何倍數的增長起來。在網絡空間里，網站是發布和獲得知識與信息的載體，是個人、企業和政府機關在網絡空間的形象和存在。網站由許多相關網頁構成，因此著作也就成為這個時代的熱門技術。本文介紹了網站建設的定位和規劃，總體設計的方案的主題以及網站頁面的版式及色彩，網頁制作中應用表格的定位功能、修改HTML代碼來實現頁面的動態效果、適當運用網頁特效的一些方法與技巧，以及在建設和制作中值得注意的一些問題。網頁制作與網頁設計全文共15頁，當前為第4頁。

網站建設前的準備統一網站整體風格中需準備的內容:(1)確定網站的整體顏色。(2)設計網站的Logo(標志)。(3)設計Banner(旗幟廣告條)。(4)確定導航條一級欄目和二級欄目的表現形式。(5)確定其他版塊的擺放位置。(6)準備欄目的具體能容。網頁制作與網頁設計全文共15頁，當前為第5頁。網站在設計要考慮到網站整體風格的統一。從頁面的排版和布局下手,各個頁面使用相同的頁邊距,文本、圖形之間保持相同的間距;主要的圖形、標題或符號旁邊留下相同的空白;如果在第一頁的部放置了站點標志,那么在其他各頁面都放上這一標志;如果使用圖標導航,則各個頁面應當使用相同的圖標。要實現這樣的效果通常有兩種方法,一種是使用模板,模板是Dreamweaver中一種特殊類型的文檔。設計者在模板中將各頁面中相同的部位定義為鎖定區域,而將不同的部位定義為可編輯區域。此后在制作每個頁面時,都選擇由模板新建,然后在編輯區域輸入不同的文字內容,從而簡化了設計主頁的工序。此外,模板最強大的用途之一在于一次更新多個頁面。由模板創的文檔與該模板保持連接狀態,修改模板就可以更新所有基于該模板的文檔的設計,大大降低了頁面維護的時間。另一種方法是使用框架,是現在制作頁面時較為常用的一種技術。該技術可以把瀏覽器窗口劃分為幾個小窗口,每一個窗口都顯示一個頁面的內容,并分別設置大小、有無滾動條等信息。這樣就方便了設計網站的結構,可以在上方的框架里放置網站的標志,在左面的框架里顯示導航欄,而在下方的框架里安置版權信息。當然這只是一個比較公式化的設計,每個人可以根據自己的實際需要和創意來做安排。而且瀏覽時,可以指定連接的頁面在哪個框架里顯示,從而避免了網頁上相同內容的重復下載,這對于提高網頁顯示速度和網絡傳輸效率方面都有著積極的意義。網頁制作與網頁設計全文共15頁，當前為第5頁。網站的定位和規劃要建設一個網站，首先需要定位，既要清楚建設網站的目的和面向瀏覽的對象，只有定位準確的網站才會有可觀性和應用性。Web站點的設計是展現企業形象、介紹產品和服務、體現企業發展戰略的重要途徑，因此必須明確設計站點的目的和用戶需求，從而做出切實可行的設計計劃。要根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析，牢記以“消費者（customer）”為中心。在目標明確的基礎上，完成網站的構思創意即規劃。網站的設計者必須清楚地了解本網站的瀏覽者的基本情況；對網站的整體風格和特色做出定位，規劃網站的組織結構，主題鮮明突出，要點明確，以簡明的語言和畫面休現站點的主題；最后，在此基礎上收集、制作網站所需的素材，在進行頁面制作時，要調動一切手段充公表現網站的個性和情趣，展示出網站的特色。總體設計方案主題鮮明

在目標明確的基礎上，完成網站的構思創意即總體設計方案。對網站的整體風格和特色作出定位，規劃網站的組織結構。Web站點應針對所服務對象（機構或人）的不同而具有不同的形式。好的Web站點把圖形表現手法和有效的組織與通信結合起來。要做到主題鮮明突出，要點明確，以簡單明確的語言和畫面體現站點的主題。調動一切手段充分表現網站點的個性和情趣，辦出網站的特點。Web站點主頁應具備的基本成分包括：頁頭：準確無誤地標識你的站點和企業標志；Email地址：用來接收用戶垂詢；聯系信息：如普通郵件地址或電話。網頁制作與網頁設計全文共15頁，當前為第6頁。網站在設計時要考慮到網站整體風格的統一。從頁面的排版和布局下手，各個頁面使用相同的頁邊距，文本、圖形之間保持相同的間距；主要的圖形、標題或符號旁邊留下相同的空白；如果在第一頁的頂部放置了站點標志，那么在其他各頁面都放上這一標志；如果使用圖標導航，則各個頁面應當使用相同的圖標。網頁制作與網頁設計全文共15頁，當前為第6頁。要實現這樣的效果通常有兩種方法，一種是使用模板，模板是Dreamweaver中一種特殊類型的文擋。設計者在模板中將各頁面中相同的部位定義為鎖定區域，而將不同的部位定義為可編輯區域。此后在制作每個頁面時，都選擇由模板新建，然后在編輯區域輸入不同的文字內容，從而簡化了設計主頁的工序。此外，模板最強大的用途之一在于一次更新多個頁面。由模板創的文擋與該模板保持連接狀態，修改模板就可以更新所有基于該模板的文擋中的設計，大大降低了頁面維護的時間。另一種方法是使用框架，框架（FRAME）也叫幀頁，是現在制作頁面時較為常用的一種技術。該技術可以把瀏覽器窗口劃分為幾個小窗口，每一個窗口都顯示一個頁面的內容，并分別設置大小、有無滾動條等信息。這樣就方便了設計網站的結構，可以在上方的框架里放置網站的標志，在左面的框架里顯示導航攔，而在下方的框架里安置版權信息。當然這只是一個比較公式化的設計，每個人可以根據自己的實際需要和創意來做安排。而且瀏覽時，可以指定連接的頁面在哪個框架里顯示，從而避免了網頁上相同內容的重復下載，這對于提高網頁顯示速度和網絡傳輸效率方面都有著積極的意義。網站頁面的版式及色彩網站頁面要簡潔大方，在頁面中不要過多的加入與本頁內容無關的信息，保證主題內容讓瀏覽者一目了然。如果希望人們在看完你的頁面后能留下印象，最好用一個簡單的關鍵詞語或圖像吸引他們的注意力。網站的版式設計網頁設計作為一種視覺語言，要講究編排和布局，雖然主頁的設計不等同于平面設計但它們有許多相近之處，應充分加以利用和借鑒。版式設計通過文字圖形的空間組合，表達出和諧與美。一個優秀的網頁設計者也應該知道哪一段文字圖形該落于何處，才能使整個網頁生輝。多頁面站點頁面的編排設計要求把頁面之間的有機聯系反映出來，特別要處理好頁面之間和頁面內的秩序與內容的關系網頁制作與網頁設計全文共15頁，當前為第7頁。設計網站前要先確定網站的主題色。一個網站必需有一種或兩種主題色，不至于讓瀏覽者迷失方向，也不至于單調、乏味。例如：兒童類網站一般都使用橙色、紅色用以體現兒童的活潑和、溫翰氣氛等效果。主題色確定好以后，使用其他配色時一定要注意它與主題色的關系，要表現什么樣的效果。例如：教育類網站使用藍色為主題色，再用紅色和黑色作為配色，就能表達出嚴肅、穩重的效果。同時，在使用色彩時要考慮它會帶給人心理上的感覺。比如，冷色使人平靜，而暖色使人激動；強的色彩對比造成緊張感；暗的顏色給人以沉重感和壓迫感；亮的顏色給人輕松、開放的感覺。我們可以根據所要表達的主題，選擇合適的色彩與主題色進行搭配。網頁制作與網頁設計全文共15頁，當前為第7頁。網頁制作的原則通常遵循的三個基本原則：內容、速度和美觀。內容是最重要的，一個成功的網頁首先在內容上有吸引力。故首先應該考慮網站的內容，包括網站功能和用戶需求。整個設計都應該圍繞這些方面來進行。在確定內容的基礎上，盡量提高速度十分必要，以免影響網站的訪問量。要提高速度有時必須犧牲頁面美觀，拋棄太大的圖片或者動畫。在以上兩點為前提的情況下，再考慮頁面的美觀性，提高網頁制作上的親和力。這要求設計者有較高的創意，懂得使用眾多的工具軟件。關于網頁導航主頁的一個很重要的功能就是導航，指引用戶查閱信息。基于清晰明確和速度的考慮，主頁上的超級鏈接應限于幾個大的類別。此外，超級鏈接的層數不能太多，不能超過4層。應在廣度和深度之間求取平衡。關于網頁布局網頁制作的布局一定要簡潔清晰，以最少的元素表達最多的信息。一個頁面應該只有一個重點的屏幕元素作為頁面的主體，它可以是文字塊或圖像，具體隨內容而定。其他屏幕元素不應比主體元素更醒目，而應該圍繞主體，突出主體。在繪畫和攝影中常采用畫面橫豎比三等分的方式得到4個三等分交叉點，這4個點基本上符合美學中的黃金比定律。這種布局是網頁中常用的方式之一，重點元素應該放在這些點周圍，而不應放在正中央，以免太過呆板。在網頁布局時要保持平衡，即以布面中心為支點，給人以平衡的感覺。平衡包括兩種：對稱平衡和非對稱平衡。對稱平衡給人以莊重、穩定的感覺。而非對稱平衡更有變化感。在處理平衡問題時，不僅需要考慮形體上的平衡，而且應該考慮顏色上的平衡。因為深顏色往往讓人感覺重，而淺顏色則讓人感覺輕，因此必須充分考慮顏色給人的視覺影響。關于表格現在許多門戶網站的布局方式往往應用表格，使網頁內容整齊合一。不要將網站內容簡單的羅列，要注意多用表格把內容的層次性和空間性突出顯示出來，以便重點突出，結構分明。網頁制作與網頁設計全文共15頁，當前為第8頁。關于圖形網頁制作與網頁設計全文共15頁，當前為第8頁。圖形是WWW網站的特色之一，是兩大網頁元素之一，它帶有醒目、吸引人以及傳達訊息形象的功能，應用好的圖形可以使網頁增色不少，但圖形應用不當則會帶來反效果。使用圖形時應盡量縮小或省略圖形，且一定要考慮傳輸時間的問題。一般超過90秒鐘的傳輸會使瀏覽者放棄打開頁面。因此必須依據HTML文件、圖形文件的大小，考慮傳輸速率、延遲時間、網絡交通狀況，以及服務端與客戶端的軟硬件條件，估算網頁的傳輸與顯示時間。在圖形使用上，盡量采用瀏覽器支持的壓縮圖形格式，目前因特網上大多使用Gif和Jpeg格式的圖象。在這兩種圖像中JPEG的壓縮效果較好，適合中大型的圖形，以節省傳輸時間。給圖像加上替代文字及低分辨率圖像替代也很重要。關于背景在頁面上添加背景圖案，雖可增加美觀，但卻會耗費傳輸時間，且有時影響視覺，反而給人不好的印象。若沒有絕對必要，最好避免，保持干凈清爽的背景。如果要用背景底色，最好使用單一色系，且要跟前景文字有明顯區別，最忌諱花俏多色的背景。背景音樂的添加也要慎重。關于動畫動畫很耗費系統資源，使操作較困難，網頁中應使用盡量少的動畫，Flash動畫雖然有許多優點，但需要瀏覽者的電腦安裝插件，多采用Gif動畫，其文件格式要小得多。閃爍的文字也不能應用太多，以免給人眼花繚亂的感覺。關于頁面頁面的長度要適中，因為長頁面的傳輸時間明顯比短頁面的傳輸時間長，防止嚇跑訪問者。而且長文本的頁面閱讀不便，單頁不易放置過多的文字。且不要把重要的內容放到頁尾，訪問者注重頁面頭部，尾部可能來不及看就跳轉啦。整個頁面的風格要統一，網頁上所有的圖像、文字，包括背景色、分隔線、字體、標題、注腳等，要統一風格，貫穿全站，給瀏覽者一個專業的印象。另外，網頁中應有供訪問者表達意見的E_mail信箱。為網頁添加描述性的標題不可少，以便收藏網頁。關于鏈接在制作超級鏈接時，盡可能地使用相對鏈接，以增強可移植性，因為相對路徑在一組文件轉移后仍然有效，其目標地址不用修改。如果是鏈接到不直接相關的文件時，則采用絕對路徑較好。網頁制作與網頁設計全文共15頁，當前為第9頁。友情鏈接沒有必要連到非常一般熱的鏈接（如網易等），而應包括對于訪問者來說較特殊或未曾去過的網站的鏈接。文件下載的鏈接應注明文件的大小，以幫助訪問者估計下載時間。網頁制作與網頁設計全文共15頁，當前為第9頁。更新與維護成功的網頁一定是要時時更新，精心維護的，在網頁內容上一定要注意即時性，時時保持新鮮感才較容易成功。另外，與訪問者產生互動是制作成功網頁的重要方法，網站推廣也很重要。網頁制作方法與技巧在網頁制作中，為了提高頁面效果，需要使用一些技巧和方法。應用表格的定位功能運用表格可以自由地控制文本和圖像在網頁上出現的具體位置，而不用擔心不同對象之間的影響，從而使整個網頁看上去緊湊統一。要充分利用表格的定位功能，準確地將每一段文字、每一副圖片按照一定的次序進行合理的編排和布局。對于表格的框度，應采用絕對定位，不用百分比，以便瀏覽者在不同的顯示分辨率下都能看到同樣的效果。考慮到目前上網瀏覽者使用電腦屏幕的分辨率多為800×600，因此，每個頁面在設計時也要設定在此分辨率下，如有特殊，還要給瀏覽者做出提示。表格內容的下載比較耗時，往往要在整張表格中全部內容下載完成后，才能顯示該表格內容。因此，表格中盡量不要嵌套過多的表格，以免影響頁面的下載速度。瀏覽器解釋HTML頁面的順序是自上而下依次逐行解釋和顯示，但當碰到表格中所有的元素后才將結果在頁面中顯示出來，在頁面內容教多而訪問者瀏覽的速度又很慢的情況下，瀏覽器的這種解釋次序將明顯表露出來，只有等到瀏覽器解釋到了頁面的最后，才會將整個頁面的內容在訪問者眼前顯示出來，而在瀏覽器解釋過程中，訪問者什么也看不到，這將會使訪問這產生不耐煩的心情。一些優秀網站的設計，通常也都采用表格來定位，而且大多都是一行一行來設計的，當然每個單行排列的表格里也存有表格嵌套，但各個頁面的內容最好不要放于一張的表格里面。因此在使用表格進行網頁元素布局時，應盡量避免使用整個表格。修改HTML代碼來實現頁面的動態效果網頁制作與網頁設計全文共15頁，當前為第10頁。現在有了那些“所見即所得”的網頁制作工具，假如只想制作出功能簡單的網頁，使用這些網頁制作工具即可。但是，要想制作出功能完善、風格獨特的網頁，只靠那些工具是遠遠不夠的，還是要學習一些HTML語言。如在網頁制作中使用“跑馬燈”，可以使網頁增色不少，因為其中的文字有一種動感的效果，這種效果完全可以用修改HTML代碼來實現。網頁制作與網頁設計全文共15頁，當前為第10頁。先來談一下如何制作最簡單的跑馬燈效果。一般情況下，在層或表格中輸入若干個文字，先對其中的文字設置顏色、字體及大小等，然后選中該文字切換到代碼窗口，你會看到代碼窗口的文字還是呈現選中狀態，在第一個文字前輸入<marquee>，你會發現自動生成</marquee>，只要將</marquee>移到最后一個文字后面，在預覽時，就可以看到文字從右往左移動或從左向右移動，就像跑馬燈一樣。文字的默認運動方向就是從右往左移動，相當于用了語句direction=“left”，如果想讓“文字”從右往左移動，只要把“left”改成“right”就可以了。同樣的道理，要使文字上下移動，只要再把“right”改為“up”，或“down”就可以了。改成上下運動的跑馬燈你會發現速度很快，讀者根本無法閱讀滾動的文字，修改時只需加入scrollamount=“1”參數，值得一提的是scrollamount的值越大，其上下移動的速度就越快。Scrollamount=“6”就是默認的速度很快的效果。此外，還可以用width、height參數來設置跑馬燈區域的范圍。下面這段HTML代碼是與一個從下而上的跑馬燈效果相對應的：<marqueewidth=”400”height=”100”direction=”up”scrollamount=”1”歡迎光臨本網站></marquee適當運用dreamweaver網頁特效dreamweaver網頁特效是指在網頁中調用一種特殊的小程序使網頁頁面有一種特殊的效果，如圖片滾動與下拉菜單，滾動字幕、為圖像添加陰影、運動、波浪、及淡入淡出等特效等。這些特殊效果在Dreamweaver中都可以用HTML語言實現的。例如：<HTML>網頁制作與網頁設計全文共15頁，當前為第11頁。<HEAD>網頁制作與網頁設計全文共15頁，當前為第11頁。<METAhttp-equiv='Content-Type'content='text/html;charset=gb2312'><TITLE>一段實用的圖片滾動顯示代碼</TITLE></HEAD><BODY><marqueedirection=upheight=200scrollamount=1scrolldelay=90width="100%"><ahref="/"><imgborder=0src="/TLimages/yeskyimages/tob/homepage_02.jpg"></a><br><ahref="/"><imgborder=0src="/imagelist/06/03/ukk13g5y4hnh.gif"></a><br><ahref="/"><imgborder=0src="/imagelist/06/03/14yiw1100n6t.gif"></a><br>網頁制作與網頁設計全文共15頁，當前為第12頁。<ahref="/"><imgborder=0網頁制作與網頁設計全文共15頁，當前為第12頁。src="/imagelist/06/03/y9ges43gk4v6.gif"></a><br></marquee></BODY></HTML>幾個值得注意的問題預覽時看不到圖片有時圖片在編輯狀態下是好的，而在預覽時或在網頁發布后無法顯示，究其原因，一個方面可能是路徑問題，另一方面可能就是因為圖片用的是中文文件名而招來的麻煩。如果是路徑的問題，可能是圖片不在站點內，這就需要把圖片存人相應的文件夾中，然后改變圖片的路徑就可以了。如果圖片是在站點內，在預覽時仍看不見圖片，則往往是使用了中文的文件名、目錄名或文件名。解決的方法是把中文名字改為英文字母、數字和下劃線等符號組合成文件名或目錄。不要忽略頁面屬性的設置設置左邊界、頂部邊界、邊界寬度和邊界高度。細心的用戶會發現在沒有進行設置前瀏覽時頁面會在上下、左右，各留一片空白，這塊區域用戶不能利用，白白浪費了，為了節省網頁中的寶貴空間，建議把這四個選項都設置為0。適當變化網頁中的字體網頁制作與網頁設計全文共15頁，當前為第13頁。網頁中的字體字號、字距、行距和文字顏色可作些適當變化，以求最美的視覺效果。需要突出的地方可以用不同的字體、字號和不同的顏色表示。字體最好采用系統自帶的字體，因為字體的顯示效果是由瀏覽者的瀏覽器來決定的。許多漂亮的文字，瀏覽器可能并不支持，可以把文字做成圖片的方式來處理