網頁制作概述課件

第一章 網站制作概述2023/12/61第八章 Internet基礎1 網站的定義網站：存放在網絡服務器上的信息的集合體，它包含一個或多個網頁，這些網頁按照一定的組織結構、以鏈接等方式連接在一起，形成一個整體，描述一組完整的信息。在建立完整的網站之前首先必須先明確此網頁設計的目標，并圍繞著一目標搜集素材，確定所要設計的網站的類型，以及它所具有的特點和主要內容。2023/12/62第八章 Internet基礎2 網站的分類在建立完整的網站之前首先必須先明確此網站的類型，以便準確的定位網頁的設計。1.公司或單位的信息發(fā)布如：公司、政府部門、教育及科研機構等。主要用于樹立企業(yè)形象，方便各單位之間的交流合作。/2.出版物即電子報刊，例如新浪網、計算機世界、計算機報、電腦報等都在網上擁有自己的站點，方便讀者在線閱讀或訂閱電子報刊。/此類網站需要較多較及時的維護及更新工作，以保證實時性。2023/12/63第八章 Internet基礎2 網站的分類3.個人主頁個人主頁這類網站在近幾年非常流行，很多站點都提供免費的個人主頁存放服務?？梢园褌€人簡歷、興趣愛好等個人信息組成個人主頁并發(fā)布到網上。/www/vhost//制作個人主頁應該注意體現個性、個人的特色/4.網上購物即為目前熱門的——電子商務。他可以大大縮短廠家、零售商、消費者之間的距離，最大程度的取締中間商、降低銷售及庫存成本，其中代表性的網站有：戴爾網站（http://www.D）AMAZON網上書店（http://www.AMAZON.com）2023/12/64第八章 Internet基礎2 網站的分類5.專題網站此類網站常常為某一專題設立，只適用于一個特定時期。如：“德國世界杯”站點/等等，在一定時期內成為網上焦點，全面、迅速的報道專題信息，并提供網上交流場所。此類網站實用性極強，內容集中而統(tǒng)一。6.實用信息服務此類網站常由某些組織或個人收集的一類信息組成。如：Java源程序發(fā)布、網頁設計素材、免費軟件下載，免費mp3下載等等。此類網站在內容上分類詳細，組織結構清晰。/

/2023/12/65第八章 Internet基礎3 網站結構的規(guī)劃規(guī)劃：就是組織網站的內容和設計其結構。網頁制作者在明確網頁制作的目的及主要的內容后，接下來就應該對網站進行規(guī)劃，目的是確保內容條例清楚、結構合理，這樣不僅可以提高可閱讀能力，也能增強網站可維護性和可擴展性。2023/12/66第八章 Internet基礎3 網站結構的規(guī)劃組織網站的內容要從兩個角度來考慮：1.設計者的角度主要依據被描述對象的組織機構、類別劃分等來組織。()()(/mall/index.jsp)(/cn/index.asp)2.瀏覽者的角度要將各種素材依據瀏覽者的需要進行內容分類，以便瀏覽者快捷的獲取他所需要的信息內容。(/)當然，設計網頁時常常需要多方位考慮兩者的需要，是網站最大限度的思想設計者目標并為瀏覽者提供最有效的服務。2023/12/67第八章 Internet基礎3 網站結構的規(guī)劃組織網站時常用的結構：1.分級結構具有很強的層次性。2023/12/68第八章 Internet基礎3 網站結構的規(guī)劃2.線性結構可以引導瀏覽者按部就班的瀏覽整個文件，通常用于平行意義上的頁面。2023/12/69第八章 Internet基礎3 網站結構的規(guī)劃線性和分級結構混合（通常網站文件使用的結構）網站文件既具有條理性、規(guī)范性，又可以同時滿足設計者和瀏覽者的要求。2023/12/610第八章 Internet基礎3 網站結構的規(guī)劃3.Web結構類似互聯網的結構，用戶可以隨意瀏覽。2023/12/611第八章 Internet基礎4 網站的設計原則及標準建議的網站設計原則及標準：1.包含的內容一個網站最吸引人的第一位永遠都是內容，設計是其次。對于專業(yè)性的網站（如企業(yè)、部門等），網站的內容是由企業(yè)提出的需求所定，無需作太多考慮。如：中國工商銀行網站(/index.jsp)

而對于個人或娛樂服務類網站，一定要保證內容新穎獨特，不必浪費太多時間去做一有的內容。2023/12/612第八章 Internet基礎4 網站的設計原則及標準建議的網站設計原則及標準：2.如何構思在制作網站之前，先擬議份詳細的草稿是必不可少的。分如下三部分：1）內容：記錄下希望放在網頁上的內容，準備好相關的材料（文件、圖片等等）。

2）網站結構：好比程序設計中的E-R圖，不妨在一張白紙上把你所構思的網站結構畫出來，這樣在制作時就能做到心中有框架、手中有實物。為了日后的管理，在制作網頁之前，最好把收集的文件分門別類，并存放到一個大的文件夾的不同子文件夾中，如把圖像放到images目錄中。但是請注意不要分的過細，避免日后工作中過于繁瑣，更加不便。2023/12/613第八章 Internet基礎4 網站的設計原則及標準3）版面設計：不要試著用電腦來做草圖，也不要認為自己的腦袋足夠用。根據我個人的經驗，一張白紙、一只鉛筆才是最好的工具，你可以隨心所欲的修改，充分發(fā)揮你的想象力。3.什么是好的設計？獨特的設計理念是好的，但是需要注意，越是獨特就越少有人能欣賞。此外，切忌不要在網頁內狂加特效，如波紋、禮花等，除非你非常難以割舍，否則還是少用為好。/另外，常用的特效大多是使用Java制作的，應注意瀏覽器是否能支持，是否需要下載其它的插件。如果電腦的配置不高，可以多使用GIF動畫、或Flash動畫（例如onMouseOver、文字跳躍、滾動等效果）。2023/12/614第八章 Internet基礎4 網站的設計原則及標準4.慎用圖像首先，要考慮圖像的大小。背景的圖像切忌不可使用太大的圖像，要考慮下載速度等因素；其次不要改變圖像的大小。其次，要考慮圖像與文字的匹配，尤其是背景圖片如果過于復雜或色彩鮮明，很容易喧賓奪主，讓文字變得不清楚，背景應與文字有較強的反差，如深底白字，白底深字。如果背景圖像的圖案較為復雜，要使用Fireworks和PhotoShop等工具更改其明亮度和對比度。2023/12/615第八章 Internet基礎4 網站的設計原則及標準5.主頁的設計主頁（homepage）作為整個網站的首頁，具有相當重要的作用。首先，主業(yè)要能夠體現網站的總體概念，使瀏覽者對網站的總體風格和內容一目了然，并提供主要的鏈接以便用戶快速的進入相關頁面中去。其次，主頁設計要力求布局合理、美觀大方、有較多的內容，又不失活潑。2023/12/616第八章 Internet基礎5 網站的外觀設計網站設計表面上看，不過是關于網頁版式編排的技巧與方法，而實際上，它不僅是一種技能，更是藝術與技術的高度統(tǒng)一。網頁設計同報刊雜志等平面媒體的版式設計有很多共同之處。但是，由于表現形式、運行方式和社會功能的不同，網頁設計又有其自身的特殊規(guī)律。所謂網頁設計，是在有限的屏幕空間上將各種網頁元素，主要包括：文本、圖像、表格、顏色、音樂、動態(tài)影像等進行有機的排列組合，將理性思維個性化的表現出來，是一種具有個人風格和藝術特色的視聽傳達方式。它在傳達信息的同時，也產生感官上的美感和精神上的享受。2023/12/617第八章 Internet基礎5 網站的外觀設計一個好的網站首先是內容的豐富，其次就是外觀的設計。它要求設計者必須掌握以下三個主要原則：1.主題鮮明，富有特色網頁設計表達的是一定的意圖和要求，有明確的主題。網頁設計不但要單純、簡練、清晰和精確，而且應該通過對網頁構成元素運用藝術的形式美法則進行條理性處理，更好地營造符合設計目的的視覺環(huán)境，突出主題，增強瀏覽者對網頁的注意力，增進對網頁內容的理解。優(yōu)秀的網頁設計必然服務于網站的主題，就是說，什么樣的網站，應該有什么樣的設計。例如，設計類的個人站點與商業(yè)站點性質不同，目的也不同，所以評論的標準也不同。網頁設計與網站主題的關系應該是這樣：首先，設計是為主題服務的；其次，設計是藝術和技術結合的產物。要使網頁從形式上獲得良好的誘導力，鮮明地突出訴求主題，具體可以通過對網頁的空間層次、主從關系、視覺秩序及彼此間的邏輯性的把握運用來達到。2023/12/618第八章 Internet基礎5 網站的外觀設計2.形式內容和諧統(tǒng)一

任何設計都有一定的內容和形式。內容是是設計存在的基礎；形式是內容的外部表現方式。一方面，網頁設計所追求的形式美，必須適合主題的需要。只講花哨的表現形式以及過于強調“獨特的設計風格”而脫離內容，或者只求內容而缺乏藝術的表現，網頁設計都會變的空洞而無力。另一方面，要確保網頁上的每一個元素都有存在的必要性，不要為了炫耀而使用冗余的技術。那樣得到的效果可能會適得其反。3.色彩和諧，重點突出，強調整體

網頁設計時強調其整體性，可以使瀏覽者更快捷、更準確、更全面地認識它、掌握它，并給人一種內部有機聯系、外部和諧完整的美感。整體性也是體現一個站點獨特風格的重要手段之一。2023/12/619第八章 Internet基礎6 網站外觀設計時要考慮的細節(jié)1.要根據網站的性質，訪問者的類型來決定網頁的外觀；2.要充分利用網頁的上部空間，這是整個網頁中最顯眼最有價值的部位，不要只是幾個文字或一幅圖片。3.考慮好分辨率的問題，通常是800*640，現在也有使用1024*800。但總體原則是充分考慮使用者的顯示水平。4.使用統(tǒng)一風格的字體（通常使用的字體是9磅的宋體）5.不同頁面盡量采用相同或相近的風格，不要每個頁面都采用不同的背景壁紙，采用相同的底色還可以提高速度，增強一致性，方便建立自己的風格。2023/12/620第八章 Internet基礎6 網站外觀設計時要考慮的細節(jié)6.背景或壁紙要跟文字形成反差，但并不是要求永遠用鮮亮的背景搭配深色文字，如果網頁中包含大量的文字，不妨多參考一些網頁的設計風格，以確定自己搭配的方式。最終目標是閱讀舒適。7.少使用廣告，少添加閃爍或晃動等效果。8.注意透明和白色的區(qū)別，在必要時要設“定”好顏色，以免不同操作系統(tǒng)的設置不同可能引起的大空底或斷層，必要時要事先設置好圖片的透明等效果。2023/12/621第八章 Internet基礎7 網頁制作工具概述在WWW出現初期，人們制作網頁都是在文本編輯器中（如：記事本）使用HTML語言來編寫，這需要有一定的編程基礎。近年來，出現了FrontPage、Dreamweaver等所見即所得的工具，方便快捷。如果需要制作交互方式的網站或特殊的效果，還需要使用JavaScript、Java、ASP、JSP、ASP.NET、PHP等來完成。1.ASP(ActiveServerPage)是由Microsoft公司開發(fā)的用于制作動態(tài)Web網頁的技術。其核心是在HTML中嵌入部分代碼，如VBScript，在頁面運行時，服務器執(zhí)行這些代碼并把執(zhí)行結果返回給瀏覽器的頁面。采用微軟IIS服務2023/12/622第八章 Internet基礎7 網頁制作工具概述2.

JAVA是由SUN公司開發(fā)的編程語言，此語言產生的代碼與工作平臺無關，具有極好的移植性。在HTML中嵌入JAVA程序以實現動態(tài)效果和交互，是近年來WEB開發(fā)的主流。3.JSP(JavaServletPage)JavaServlet是一組運行在Web服務器上的Java程序。而JSP是SUN公司近年推出的基于JavaServlet和整個Java體系的Web開發(fā)技術，具有公共、原碼開放等優(yōu)勢。Java和