前言：中文期刊網精心挑選了個人網站設計范文供你參考和學習，希望我們的參考范文能激發你的文章創作靈感，歡迎閱讀。
個人網站設計范文1
在互聯網越發普及的今天，越來越多的人接觸互聯網，有更多的年輕人對網上的各類網站很好奇，很想明白它到底是怎么一回事。今天我結合自己的教育教學實踐，在這里談談關于個人網站制作的方式，與同仁共勉。
第一、確定個人網站主題。
做網站，首先必須要解決的就是網站內容問題，即確定網站的主題。你建立的網站所要包含的主要內容，一個網站必須要有一個明確的主題。特別是對于個人網站，你不可能像綜合網站那樣做得內容大而全，包羅萬象。你沒有這個能力，也沒這個精力，所以必須要找準一個自己最感興趣的內容，做深、做透，辦出自己的特色，這樣才能給用戶留下深刻的印象。網站的主題無定則，只要是你感興趣的，任何內容都可以，但主題要鮮明，在你的主題范圍內內容做到大而全、精而深。
第二、進行頁面總體設計。
一個網站設計成功與否，很大程度上決定于設計者的規劃水平。設計的“風格”是抽象的，只是指站點的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI（標志，色彩，字體，標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值等等諸多因素，網站可以是平易近人的、生動活潑的也可以是專業嚴肅的。不管是色彩、技術、文字、布局，還是交互方式，只要你能由此讓瀏覽者明確分辨出這是你網站獨有的，這就形成了網站的“風格”。設計的內容很多，如網站的結構、欄目的設置、網站的風格、顏色搭配、版面布局、文字圖片的運用等，你只有在制作網頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。
網站制作要有整體風格，各部分要保持協調，整個頁面看起來才不顯得凌亂。然后用平面設計軟件制作整個頁面，常用的軟件有Adobe Photoshop、CorelDraw、Macromedia Fireworks等。Photoshop是平面設計的最好工具，我自己也一直用它做頁面設計，它從6.0版開始特別增強了對網頁制作的支持，非常方便。現在流行的Fireworks是Macromedia網頁制作三劍客的重劍手，由于它與Dream weaver及flash無縫集成，越來越受到網站制作的歡迎。也只有如此制作出來的網頁才能有個性、有特色，更具有吸引力。風格也是有人性的，通過網站的色彩、技術、文字、布局、交互方式可以概括出一個站點的個性：是粗獷豪放的，還是清新秀麗的；是溫文儒雅的，還是執著熱情的；是活潑易變的，還是墨守成規的。在明確自己的網站印象后，開始努力建立和加強這種印象。加強自己網站的交互式，發揮網絡優勢，使每個使用者都參與到其中來，這樣的設計才能算是成功的設計。
第三、搜集與主題相關的材料。
明確了網站的主題以后，你就要圍繞主題開始搜集材料了。常言道：“巧婦難為無米之炊。”要想讓自己的網站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集的材料越多，以后制作網站就越容易。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯網上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網頁的素材。
第四、制作網站主頁。
確定了網站主題，明確了頁面設計風格，做完第1步，搜集好材料。我們得到的只是一個個圖片文件，還沒集成網頁上應該有的元素。接下來要將圖片按制作需求切割成小圖。我們要用HTML語言將切割下來的組件按整體設計“拼裝”回去。眾所周知，HTML語言是一種標記型語言，不需要編譯就可以直接在瀏覽器中執行。所以理論上，我們可以用記事本等文本編輯工具來寫代碼。這要用專門的HTML編輯軟件。HTML編輯軟件大體上可分為兩類：一類是代碼型，典型代表為Home site、Hotdog等；一類是所見即所得型，典型代表為FrontPage。也有兩者兼具的，就是大名鼎鼎的Macromedia Dream weaver。代碼型實際上就是一個文本編輯器，不同的是，它可以有專門的代碼提示功能，用起來比較方便。Dream weaver提供了代碼編寫模式和設計模式（即所見即所得），并且首次將“層”概念引入網頁制作。Dream weaver幾乎可以滿足所有人的需求，甚至還提供了ASP、PHP等腳本語言的代碼提示。
你也可以用Netscape4.0或者WORD7.0,我開始用的是FrontPage，打開Netscape,在file菜單里選Edit Page,便可以制作了。文字的處理基本跟Word一樣,關鍵是插入圖片和產生鏈接。在你的封面做好了所有鏈接和圖片后，記住你必須將這一頁保存為index.htm。因為網頁默認的主頁名稱是index。制作主頁其實很簡單，只要多實際制作，工多則藝熟。
第五、個人主題網站。
要在網上安你自己的家，你必須先申請一個主頁空間，即向某一個主機申請一塊硬盤空間。有較多的主機提供免費主頁空間，具體見實用鏈接欄目。這些主機不僅提供免費個人主頁空間，并且還提供留言簿、計數器等很有用的功能。只要到有關站點申請即可，具體方法，參考相關題目。申請完成以后用FTP將你所有的主頁文件上傳至主機指定的目錄就可以了！
將制作好的頁面放到服務器上，以便更多的人能瀏覽。目前的網頁制作工具基本上都有工具，可以通過各種方式你的頁面，如Dream weaver中的“站點管理器”。用戶亦可使用FTP客戶端軟件進行這步操作。網站好之后，也要做好后期的跟蹤，也就是所謂的用戶體檢，要留意哪些地方是用戶比較喜歡去的地方，哪些又是用戶不愿停留的地方，把一些用戶并不喜歡的地方加以改善，更加完善自己的網站。
個人網站設計范文2
項目一：個人網站的設計與制作。隨著網絡技術的不斷發展，個人網站已成為人們展示自己的一種手段。本項目將通過制作一個簡單的“鴻瀾”個人網站，從任務資訊、任務決策與計劃、任務實施、任務檢查與評估和練習與提高五個方面進行描述，了解個人網站規劃與設計的基本原則和主要內容，熟悉網站建設的基本流程，掌握Dreamweaver的基本操作和表格布局排版技術，認識HTML語言的基本結構和常用標記符<table>、<img>、<font>、<p>、<br>等使用方法，培養學生團隊合作和獨立思考的意識，養成良好的職業素養，為制作更加復雜的網站做好知識準備。項目二：電子商務類網站的設計與制作。21世紀以來，電子商務伴隨著IT的成熟，逐漸發展壯大，成為網絡經濟的核心。企業通過電子商務網站實現了宣傳公司形象、企業動態、產品展示、網上訂單、網上交易等功能，與客戶間的距離進一步貼近。本項目通過完成整個電子商務網站的設計與制作，相關內容層層展開，在學生頭腦中形成“如何搭建整體網站”的概念。項目三：中小企業網站的設計與制作。作為企業類網站，主要實現的功能首先是具有較強的盈利能力。其次網站是企業樹立形象和展現文化的重要窗口，是為顧客提供服務的一個工具，是企業整體營銷戰略的一部分。常見功能有企業信息、新聞中心、產品展廳、人力資源、會員中心、留言反饋等。本項目通過某一中小企業類網站的整體設計，培養學生在學習過程中發現問題、解決問題的能力，提高學習的主觀能動性。項目四：主題網站的設計與制作。本項目給出網站設計與制作的如下要點：（1）建立網站站點；（2）建立網站頁面（首頁為：index.html），頁面元素完整；（3）應用表格或者div、css布局頁面；（4）在頁面中插入文字，并用css美化文字大小、字體、顏色等效果；（5）在頁面中添加超級鏈接，并用css美化超級鏈接；（6）建立模板，并制作其他頁面；（7）至少完成8個及以上頁面，頁面標題欄、狀態欄、版權等信息齊全；（8）頁面中超級鏈接如沒有鏈接頁面以空鏈接（#）代替。學生根據以上設計要求，結合所學內容，從旅游類網站、時尚類網站、教育類網站、門戶類網站等幾個大類中選擇某一項進行設計制作。教師將根據學生完成情況的復雜程度和實際效果給予評價，鍛煉了學生的實踐動手能力，增強了自信心和學習興趣。
二、教學素材的選用方法
教學素材是以完成課堂教學任務為目的，以教師引導學生開展課堂活動的形式呈現的教學材料。1.合理性。以個人網站設計來說，文本的制作上講求清晰、明了、突顯個性化，Logo和導航的字體、字號設計可以依個人的喜好采取不規則式，選擇跳躍感強的色彩。在圖像的選取上也是以色彩豐富、形狀多樣的圖案為主。2.整體性。選用的教學素材要能夠自然、貼切地把各個知識點整合在一起，教學素材要服務于教學目標，要突出教學的重點。電子商務類網站以從事電子商務為主，對安全、穩定等性能要求較高，比較考驗網站中運行的程序。在知識點上以表格嵌套、模版運用、腳本語言和行為語句為重點進行講解。3.現實性和針對性。課堂教學中選取的素材要符合學生的認知水平和實際生活，教師可以從具體教學對象的特殊性出發，根據教學對象因人、因地、因時選材，為他們“量身定制”針對性較強的教學素材，如在教授電子商務專業學生時，素材的選取多以電子商務平臺或某一個人網店為主，以便引導學生從自己熟悉的教學素材中直觀體驗獲取知識、提高能力的喜悅。
三、教學模式在教材中的運用
在《網頁設計與制作》校本教材的開發上主要采用“基于過程的項目式教學法”。即“在引導學習者融入有意義的項目完成的過程之中，讓學習者積極地探究與發現，自主地進行知識的整合與建構，以現實的、學生生成的新知識和提高的完成項目任務的能力為主要成就目標，項目完成的過程也是學習者學習活動進行的過程”。為此，以項目作品開發為主線，把教材中的范例網站分解成若干個子任務，將課程標準中的圖像處理、動畫制作、音視頻處理、網頁頁面設計制作、站點維護等多方面的知識點融入其中，在整個課堂教學實施中，教師根據網站設計開發的實際工作順序安排，以作品演示的方式從頭至尾帶領學生操作，讓其感受網站從無到有一步步制作的全過程，有助于提高學生的學習興趣，培養其創新設計能力。
四、結語
個人網站設計范文3
關鍵詞：項目教學法；中職；ASP網站設計
中圖分類號：G712 文獻標識碼：A 文章編號：1672-5727（2012）08-0092-03
全新理念的教學模式
隨著科技的日益發展，信息化時代的到來，人們的工作、學習、生活都發生了極大的變化，都在不斷地尋求更為快捷有效的方式，這就對傳統教育理念及教育模式產生了極大的沖擊。中等職業技術學校的教學宗旨就在于提高學生的實際操作能力，集理論與實踐為一體。因而，計算機知識水平和實踐動手能力就成了中等職業學校計算機教育的根本任務。然而，由于種種原因，中職學生素質不高，學習積極性不高，自學能力和自控能力也較差，這成為中職教師特別是計算機程序科目教師最頭痛的事。如何激發學生的學習興趣，并最大限度地挖掘學生的創造性呢？筆者在中職計算機專業課程《ASP網站設計》的教學實踐中，采用了能充分發揮學生主體性和創新精神的項目教學模式。
項目教學是師生通過共同實施一個完整的項目工作而進行的教學活動。它的特點是：把整個學習過程分解為一個個具體的工程或事件，設計出一個個項目教學方案，按行動回路設計教學思路，不僅傳授給學生理論知識和操作技能，更重要地是培養他們的職業能力，這里的能力已不僅是知識能力或者是專業能力，而是涵蓋了如何解決問題的能力——方法能力、接納新知識的學習能力以及與人協作和進行項目動作的社會能力等幾個方面。項目教學法就是為了充分發揮學生學習的主體性，以學生熟悉的、感興趣的主題為項目工程，來激發學生的學習興趣與創造力。
項目教學法實施步驟
精挑細選的教學內容 項目的確立不是一件輕松的事。項目教學法要求課程單元與任務設計必須達到的前提指標是：（1）項目所涉及的知識和技能在教學大綱所要求的范圍以內，并且每個項目的難度系數要有一定的梯度。（2）學生對所確定的項目及其結果有著較強的興趣，能激發學生的積極性和創造力。（3）項目所涉及的知識和技能、所涉及的內容符合最近發展區理論，通過學生主動的探索和學習是有能力完成的。（4）項目完成過程最好能突出獨立完成與合作完成的能力，有利于對學生進行情感、態度和價值觀的教育。（5）可以用某一標準（正確答案、美感等）對完成的項目是否達到教學目的進行評價。根據以上要求，筆者分別選取了4個項目案例——個人網站（靜態網頁）、在線日記（ASP程序基礎）、會員管理系統（ASP程序進階）、電子商務網站（ASP程序高級應用），融入理論知識講解，逐步引導學生自主學習《ASP網站設計》這門課程。
科學的梯度與課時設計 項目確立之后，建議采用集體教研的方式，對項目進行知識結構、梯度設計、課時安排進行分析與探討，最終確定項目授課順序與課時安排：（1）個人網站，主要解決網頁界面美工圖，添加文字、圖片或Flas等，制作靜態頁面。此項目的完成過程均可在設計視圖中處理，不涉及程序的編寫，相對比較簡單，所以放在第一個項目實例（12課時）。（2）在線日記，主要實現書寫日記、閱讀日記、刪除日記、更新日記、查找日記等主要功能。初步了解ASP程序，理解網頁與數據庫聯系，并掌握實現的基本功能的簡單程序（30課時）。（3）企業會員管理系統，在實現基本功能的基礎上，增加文件上傳功能和管理權限，實現分層管理（40課時）。（4）電子商務網站，ASP程序的高級應用，不僅要實現企業與客戶的交互，還必須考慮網站的安全性，網頁與數據庫的加密技術（48課時）。以上4項舉例如圖1～4所示。對于初學ASP的學生來講，馬上要設計整個網站項目，肯定是吃不消的。就像沒給學生任何工具，卻要他們砍倒眼前的一大片樹林那樣，學生會覺得無從下手、不知所措，進而產生恐懼心理，這將大大打擊他們的學習積極性。因此，教師應該給予學生工具，一把斧頭或電鋸，然后教會他們工具的使用方法，每天定量去完成任務。所以，分解細化項目是項目教學必不可少的一個重要環節。以“在線日記的網站建設”為例，根據客戶提供的需求，整個設計過程分為四個子項目——制作項目策劃或草圖設計、然后開始編寫程序進行網站設計、最后進行網站后期處理，每個子項目仍可以繼續細分，具體項目分解如圖5所示。
對于學生來說，他們只要接受教師在課堂中給予的一個個小項目，研究它、解決它、體會它、總結它，最終會升華到一個更高的層次。
項目實踐過程
（一）創設學習環境，獲取解題方法
教師在項目實踐過程中充當引導者、指導者和監督者，主要任務有：課前熟悉項目內容進行深入研究，并準備好項目討論可能涉及的有關知識；創設學習的資源和協作學習的環境；介紹項目內容，吸引學生的注意力，激發學生學習的積極性和討論的熱情。學生在項目實踐過程中是學習主體，在教師的幫助和小組合作交流中，利用動手操作探索，發現新知識，自主學習。以“在線站建設”項目中的子項目《讀取數據庫》為例，教師在課前準備好學生學習環境、學習資源（圖片、文字、數據庫、多媒體影音素材）等，并預設好學生在實際操作過程中可能遇到的問題以及解決方法或提示文字（ASP讀取功能程序代碼、SQL語法與用法等），學生則在教師的引導下進行項目實踐，發現新知識，充分利用所提供的學習資源，探索求解思路，獲取解題的“金鑰匙”，最后完成項目。
（二）分小組合作，模擬設計公司
個人網站設計范文4
[關鍵詞] 多媒體技術 網站 藝術設計
doi:10.3969/j.issn.1002-6916.2012.05.043
近幾年來，計算機多媒體技術快速發展并走向成熟，在微機上就可以實現諸多傳統模擬的數字化，使得視頻、音頻、圖像、動畫和圖形文字一起在計算機中進行處理，因此，計算機所處理和表達的信息量急劇增加，從而為多媒體計算機在計算機輔助設計中的應用提供了可能性。計算機多媒體技術指計算機交互綜合處理文本、圖形、圖像、聲音、視頻等多種媒體信息，使多種信息建立邏輯聯系，集成為一個具體有交互性的系統。
1.多媒體技術的詮釋
多媒體技術是將文字、圖像、動畫、視頻、音樂、音效等數字資源通過編程方法整合在一個交互式的整體中，以圖文并茂、生動活潑的動態形式表現出來，給人以很強的視覺沖擊力，留下深刻印象。多媒體技術能夠利用多種交互手段，使原本枯燥無味的播講變成互動的雙向信息交流。它極大地改變了人們獲取信息的傳統方法，符合人們在信息時代的閱讀方式。
現代多媒體技術在藝術設計教學中的應用具有直觀性、視覺沖擊力強、信息量大的特點，它優化了藝術設計教學的教學方式，也有效地提高了學生的學習主動性和創新性，同時在很大程度上提升了教師自身的素質。利用多媒體技術可以制作生動、有趣的網頁，[1]使得Internet上的瀏覽者留連忘返。到目前為止，在Internet上所能使用的多媒體可以說越來越廣泛，從簡單的GIF動畫，3DVRML動畫，廣播站到電影文件幾乎都可搬上Internet。網頁設計的趨勢越來越接近于一門藝術，而不僅僅是一項技術。網頁的藝術設計是藝術與技術的高度統一，正日益被網站建設者和企業所注重。
多媒體的技術可以制作更生動、更活潑有趣的網頁，隨著網絡技術的迅速發展和廣泛應用，越來越多的公司和企業擁有了自己的網站，深刻體現出多媒體技術的重要性。
2.網站與藝術設計的關系
有了在虛擬空間宣傳和推廣產品的平臺，通過它可以較為準確地表達企業內在的理念精神，體現企業內在的特有的形象。如何才能在競爭日益激烈的今天脫穎而出，吸引更多的訪問用戶呢？將現代多媒體技術應用到網站建設也許是一個不錯的解決方法。
2.1網站藝術設計的釋義
網頁藝術設計包含視聽元素與版式設計兩項內容；以主題鮮明、形式與內容相統一、強調整體為設計原則；多媒體具有交互性與持續性、多維性、綜合性、版式的不可控性、藝術與技術結合的緊密性五個特點。由于多媒體自身的互動性、娛樂性，自然會吸引瀏覽者的眼球，當然設計要有創意。
任何設計都有一定的內容和形式。內容是構成設計的一切內在要素的總和，是設計存在的基礎，被稱為“設計的靈魂”，網站設計也不例外，形式是構成內容諸要素的內部結構或內容的外部表現方式。設計的內容就是指它的主題、形象、題材等要素的總和，形式就是它的結構、風格或設計語言等表現方式。內容決定形式，形式反作用于內容。一個優秀的設計必定是形式對內容的完美表現。商務網站在建設時，要明確企業網站的內容，確定采用什么樣的形式，從而明確主題，利用多媒體技術圍繞它們展開設計。例如，設計類的個人站點與商業站點性質不同，目的也不同，所以評論的標準也不同。[3]它的主題只有一個，就是美。而將音頻、視覺完美融合的多媒體動畫和影片能體現主題，清晰地傳達這個站點的信息，表現了網站的藝術風格和別出心裁。一個好的多媒體網站設計不僅能吸引顧客的注意，而且能表達出這個產品或者服務的實質。為了能留住顧客，應該確定要有“跳躍信息”的連接?？梢赃@樣說，融合多媒體的網站設計就是網站信息加上圖形、動畫和聲音等的一個集合。對于商務網站，要利用多媒體技術的優勢，形象、具體、全方位地展現自己的商品與服務，這是傳統、單一媒體無法實現的。
網絡技術與藝術創意的緊密結合，使網頁的藝術設計由平面設計擴展到立體設計，由純粹的視覺藝術擴展到空間聽覺藝術，網頁效果不再近似于書籍或報刊雜志等印刷媒體，而更接近于電影或電視的觀賞效果。技術發展促進了技術與藝術的緊密結合，把瀏覽者帶入一個真正的虛擬世界。
2.2藝術設計在網絡中的限制
隨著多媒體技術的不斷發展，網絡傳輸速度的不斷提高，藝術性受技術的限制不斷減低，藝術與技術會更好的結合。商務網站因多媒體技術的大量應用而獨具魅力和眩目，但它的首要功能是作為交流的一個工具，一個平臺，更確切地說它是一個用戶與網站一個交互的界面。多媒體技術與藝術的緊密結合在網頁藝術設計中的優勢非常明顯，而它們的發展將推動網站提升到更高的層次，會給公司企業的文化宣傳、產品介紹、銷售渠道帶來更多的好處。而多媒體技術在網站上的應用也必將成為未來的發展方向，有著很廣闊的前景。
藝術設計教育又是一項充滿創造性的工作，作為藝術設計專業的教師，如何及時更新藝術教育觀念，重新審視自己的教學方式，開發與利用課程資源，都是值得思考的問題。多媒體教學是指在教學過程中根據教學目標和教學對象的特點，通過教學設計，合理選擇和運用現代教學媒體，[2]并與傳統教學手段有機結合，以多種媒體信息作用于學生，形成合理的教學過程結構，達到最優化的教學效果。
3.網站設計和多媒體技術的結合
網站設計和多媒體技術，怎樣才能結合好？更加貼近生活、貼近實際呢？網站設計服務于公司或企業，優秀的網頁必然要圍繞它們的主題和文化，就是說，什么樣的網站，應該有什么樣的設計。例如，設計類的個人站點與商業站點性質不同，目的也不同，所以評論的標準也不同。網頁藝術設計與網站主題的關系應該是這樣：首先，設計是為主題服務的；其次，設計是藝術和技術結合的產物，就是說，既要“美”，又要實現“功能”；最后，“美”和“功能”都是為了更好地表達主題。而大部分個人網站，可以只體現作者的設計思想，或者僅僅以設計出“美”的網頁為目的。[4]它的主題只有一個，就是美。而將音頻、視覺完美融合的多媒體動畫和影片能體現主題，清晰地傳達出來這個站點的信息，表現了網站的藝術風格和別出心裁。
一個好的多媒體網站設計不僅能吸引顧客的注意，而且能表達出這個產品或者服務的實質。為了能留住顧客，應該確定要有“跳躍信息”的連接。如果站點像烤番薯，那么多媒體設計就應該像黃油、干酪和酸乳。可以這樣說，融合多媒體的網站設計就是網站信息加上圖形、動畫和聲音等的一個集合。
網絡技術與藝術創意的緊密結合，使網頁的藝術設計由平面設計擴展到立體設計，由純粹的視覺藝術擴展到空間聽覺藝術，網頁效果不再近似于書籍或報刊雜志等印刷媒體，而更接近于電影或電視的觀賞效果。技術發展促進了技術與藝術的緊密結合，把瀏覽者帶入一個真正的虛擬世界。站點設計的主要目的是為了傳播信息，將多媒體融入網站設計后給平淡的頁面增添了不少生機與活力，[5]但同時也帶來了不少問題。大量的多媒體站點設計需要花大量時間來下載，是否每個人都愿意坐下來花很多時間下載沒多少信息的“多媒體的設計”？很多用戶現在并沒有很快的因特網連接速度，因此我們在設計多媒體時應盡量避免大圖片、飽聲音，在不影響基本品質的基礎上盡可能地壓縮文件的大小，使得客戶端能更快地獲取到多媒體流文件。同時要使多媒體本身從形式上獲得良好的誘導力，鮮明地突出訴求主題，[6]具體可以通過對網頁的空間層次、主從關系、視覺秩序及彼此間的邏輯性把握運用來達到。
4.結語
隨著多媒體網站設計的出現和發展，多媒體網站設計的首要功能是作為交流的一個工具，一個平臺，更確切地說它是一個用戶與網站一個交互的界面。[6]多媒體技術與藝術的緊密結合在網頁藝術設計中的優勢非常明顯，而它們的發展將推動網站提升到更高的層次和高度，相信會給公司企業的文化宣傳、產品介紹、銷售渠道帶來更多的好處。而多媒體技術在網站上的應用也必將成為未來的發展方向，有著很廣闊的前景。
參考文獻
[1] 劉光然:多媒體技術與應用.人民郵電出版社,2005. 9
[2] 游澤清:多媒體畫面藝術基礎.高等教育出版社,2002.12
[3] 丁龍:現代教育技術基礎.哈爾濱地圖出版社,2004.12
[4] 肖冰:淺談網頁藝術設計[J]．安陽師范學院學報,2005.5
[5] 王海燕,張正凱:.從審美角度淺談網頁藝術設計[J],2004.9
[6]網頁藝術設計初探.省略/g204118b/
作者簡介
個人網站設計范文5
信息圖表設計最常見的類型為時序性圖表，以時間軸圖為代表，這種圖表以時間信息為基礎，描述事件在空間中的先后流動變化。Adam是一個年僅21歲的波蘭平面設計師，尤其擅長網頁設計及界面設計，在三年的從業經歷中，Adam獲得了三個國際性獎項，先后完成了150多個設計項目。在其個人網站上（圖一），Adam采用時序性圖表的方式回顧了自己的設計歷程：第一件作品誕生，第一個商業網頁設計，第一次同廣告公司合作，第一次獲專業獎項，第一次成為公司藝術指導等。但在具體性的數據展現上，Adam設計的是獨立的六邊形圖標，粗黑體數字置于六邊形圖標中心位置，數個六邊形圖標一字排開，構成并列性數據圖表。
通常情況下，餅狀圖是信息圖表中展示數據內容之間比率關系的最有效方式之一。網站更突破一般平面圖視覺沖擊力較弱的局限，利用網絡的流媒體特征，創意出利用平面餅狀圖向立體餅狀圖轉化的過程來個性化表現數據的形態。Adcade是紐約一家互聯網營銷機構，網站用大量篇幅介紹了新媒體對于當代企業營銷的重要意義和價值，圖二展現的是消費者在桌面終端與移動終端使用互聯網的數據比率。為了形象而清晰地說明二者關系，同時體現頁面的豐富性與生動性，網站設計了餅狀圖從平面延展為立體的Flas。而在展示公司廣告效果測量的理論與實際經驗時，網站則采用了柱狀圖的方式。當鼠標移至此頁面時，數個小正方形演變為按照透視原理排列的高度層次不齊、明度深淺不一的方形柱，藍色字體的比率數據呈現在方形柱之間，構成別有趣味的動態化信息圖表。
數據是信息的重要形式，但并非信息的全部，很多信息圖表可能并非表現具體的數量或比率關系，而是表現空間位置的距離、高度、面積、區域，并將這些內容按照一定比例高度抽象化，形成空間組織模式圖，常見的有地圖、導視圖或器物結構圖等。圖三是全球知名營銷創意公司Asylum在美洲地區的機構分布圖。這家公司在美國、墨西哥、哥倫比亞和巴拿馬四個國家擁有五間辦公室，在整個美洲地區則遍布50家以上的合作組織。網頁繪制了大半個美洲的地圖，并用黃色、紅色在深灰色地圖上醒目地標示出直屬辦公室與合作機構所在的位置，簡單而又清晰。
除了時間關系、位置關系、數量關系等信息圖表表現內容外，很多信息圖表也可用來表現邏輯關系與組織關系。前者展現的是事件的因果關系或者邏輯變化情況，后者則用來展現信息之間整體局部或上下級的從屬關系。奧迪汽車“選擇奧迪的一百萬個理由”品牌宣傳網站就采用組織關系圖表的樣式。奧迪宣稱從網絡社交媒體及線下銷售終端搜集了一百萬個選擇和熱愛奧迪汽車的緣由，并將這些理由用黑色的圓球表現出來，呈現在網站上。一百萬個黑色圓球顆粒在網頁中有規則的聚集，組成了一輛奧迪汽車的3D透視圖。當鼠標點擊任一黑色圓球時，其所對應的來自消費者對奧迪汽車的評價便呈現在頁面中央。奧迪汽車3D視圖可隨鼠標移動在頁面空間中做360度旋轉，也可將視角深入汽車內部或向外拉伸。與其他信息圖表不同的是，關于奧迪汽車的評價信息是隱藏起來的，只有瀏覽者有意識地去探尋時，信息才會暴露出來，動態的信息展露過程本來就充滿了趣味性，也更能體現尊重瀏覽者信息獲取的主體意愿。
信息圖表是一個可讀、可視的復合系統，在視覺內容上體現為文字、圖像和數字的創意化與個性化融合，它幫助人們更好地借助特定視覺內容元素系統、顯著、鮮明、直接、連貫和全面地轉化文本內容，使得信息被重新整合、個性再現。當信息圖表介入到網頁設計中后，其表現形式便進一步變得豐富和多樣，動態、交互等信息表現形態有了施展魅力的基礎和空間。這是信息圖表設計的網絡化與媒體進化，也是網頁設計的風格化與個性化。2013c
鏈接
.cn
蘭蔻“小黑瓶”產品升級活動網站。在產品介紹及互動體驗環節，設計師借鑒達芬奇著名素描作品《維特魯威人》的造型創意，以“小黑瓶”代替男性人體，設計了圍繞“小黑瓶”的圓形視覺圖示，代表“十種年輕印記”的十條文字信息均勻編排于圓形視覺圖示周圍。
數字設計公司官方網站。這家位于烏克蘭基輔市的數字設計機構在網站上按照時間順序展示了他們所做過的大部分經典作品。網站設計了一個騎自行車、頭套紙袋的年輕人形象，隨著鼠標的滾動，自行車在頁面上左右行進，而其行進的地圖就是按時間先后順序排列的設計作品案例。
銳步新產品介紹網站。網站在介紹銳步三款新鞋產品時，將產品實景圖片置于頁面中央，采用空間結構圖表介紹三款鞋的創新部件，如添加了特殊材料的鞋幫、輕質的鞋跟等。網站采用Flas創意出三幅結構圖表依次呈現的動態信息展露效果。
opencolleges.edu.au/informed/learningstrategies
開放學院“探索你的大腦”網站。網站設計了一個大腦的3D模型，并用色彩區分開了各個不同的區域。鼠標無操作時，3D大腦圖形上會顯示出不同色彩的圓點和“+”號標記，鼠標點擊此處，大腦對應區域則呈現藍綠黃紅等不同色彩，一旁同時出現介紹該區域名稱、功能等信息的圖表。
個人網站設計范文6
從“靜態”逐步轉變為“動態”，動態網站的設計技術也隨之發展成熟起來介紹了動態網頁的一些特點以及日前在
動態網頁設計中應用相當)‘一泛的開發環境—ASP，以如何建立基于IIS的ASP動態網站為中心，簡要介紹了動態
商業網站設計的趨勢，并以實例分析比較直觀地展示了ASP在動態網頁設計中的優越性
關鍵詞:動態網站;物件導向;表單;腳本語A
1引言
目前呈兒何增長的互聯網站中，有相當一部分仍固守“靜態“，無形中已大大落后于時代的步伐.所謂“靜態”指的就是網站的網頁內容“固定不變“，當用戶瀏覽器通過互聯網的HTTP(HypertextTransportProtocx>1)協議向WEB服務器清求提供網頁內容時，服務器僅僅是將原已設計好的靜態HTML文檔傳送給用戶瀏覽器.其頁面的內容使用的僅僅是標準的HTML代碼，最多再加上流行的GIF''''89A格式的動態圖片，若網站維護者要更新網頁的內容，就必須手動地來更新其所有的HTML文檔.“靜態”網站的致命弱點就是不易維護，為了不斷更新網頁內容所做的工作量是巨大的.
隨著網站信息量的不斷增大，靜態網站逐漸沒落，動態網站已經成熟起來，它的“交互性”少自動更新”、“因時因人而變”等諸多優良特性無疑很好地適應了信息時代的要求.能夠使網站“動態化”的技術較多，目前比較流行和成熟的是ASP技術.
2基于ASP的動態網站建設概述
2.1“動態”的概念
所謂“動態”，并不是指那兒個放在網頁上的GIF動態圖片，在這里筆者為動態頁面的概念制定了以下兒條規則:
1)“交互性”，即網頁會根據用戶的要求和選擇而動態改變和響應，將瀏覽器作為客戶端界面，這將是今后WEB發展的大勢所趨.
2)“自動更新”，即無須手動地更新HTML文檔，便會自動生成新的頁面，可以大大節省工作量.
3)“因時因人而變”，即當不同的時問、不同的人訪問同一網址時會產生不同的頁面.
2.2ASP的概念及特點
MicrosoftActiveS。二Pages即我們所稱的ASP，其實是一套微軟開發的服務器端腳本環境，ASP內含于IIS3.0和4.0之中，通過ASP我們可以結合HTML網頁,ASP指令和ActiveX元件建立動態、交互目_高效的WEB服務器應用程序.有了ASP你就不必擔心客戶的瀏覽器是否能運行你所編寫的代碼，因為所有的程序都將在服務器端執行，包括所有嵌在普通HTML中的腳本程序.當程序執行完畢后，服務器僅將執行的結果返回給客戶瀏覽器，這樣也就減輕了客戶端瀏覽器的負擔，大大提高了交互的速度.以下羅列了ActiveS。
二Pages所獨具的一些特點:
1）使用VBScriptJScript等簡單易懂的腳本語言，結合HTML代碼，即可快速地完成網站的應用程序.
2)無須Compile編譯，容易編寫，可在服務器端直接執行.
3)使用普通的文本編輯器，如Window、的記事本，即可進行編輯設計.
4)與瀏覽器無關(Br+wserIn<lepen<lenoe)，用戶端只要使用可執行HTML碼的瀏覽器，即可瀏覽Active
S。二Pages所設計的網頁內容.ActiveS。二Pages所使用的腳本語言(VBSoriptJsoript)均在WEB服務器端執
行，用戶端的瀏覽器不需要能夠執行這些腳本語言，如圖1所示.
用戶端瀏覽器IE或NS1r1''''1''''1''''潔求11而1''''III]子
WEB服務器ActiveServerP
5)ActiveS。二Pages能與任何AotiveXscripting語言相容.除了可使用VBSoript或JSoript語言來設計外，還通過plug-in的方式，使用由第三方所提供的其他腳本語言，譬如REXX,Perl,Tol等.腳本引擎是處理腳本程序的COM(ComponentObjectModel)物件.
6)ActiveS。二Pages的源程序，不會被傳到客戶瀏覽器，因而可以避免所寫的源程序被他人票J竊，也提高了程序的安全性.
7)可使用服務器端的腳本來產生客戶端的腳本.
8)物件導向(Obje<，一(>riented).
9)AotiveXS。二Components(AotiveX服務器元件)具有無限可擴充性.可以使用VisualBasic,JavaVisualC++,Cobol等編程語言來編寫你所需要的AotiveXS。二Component.
2.3ASP技術流行的原因
如果你是個人網站的維護者，使用的是免費主頁空問，那么絕大多數情況下你只能使用Java,JavaScript和最新的DHTML技術.DHTML就是當網頁從WEB服務器下載后無須再經過服務器的處理，而在瀏覽器中直接動態地更新網頁的內容排版樣式、動畫.
或許對于一個個人網站來說，充分運用DHTML技術足以令網頁栩栩如生，動感十足.然而對于建立商業網站的企業而言，僅僅擁有DHTML是遠遠不夠的.因為僅僅發生在客戶瀏覽器端的動態效果是無法滿足商業網站大量信息查詢，客戶咨詢，資源交互等“動態”需求的.因此作為商業網站的設計者，必須要設計出更具實用性和交互性的“動態”網站.由于絕大多數商業網站都具有大量的數據和信息，而建網的初衷也就是在于方便客戶查詢企業資料，方便同客戶的交流，及時獲得信息反饋.那么，就必然會面臨如何讓使用者在瀏覽器界面中，通過互聯網或內聯網(Intran川查詢WEB數據庫的資料，甚至輸入、更新和刪除WEB服務器上的資料.
目前)匕種常用的“動態”網站設計方法有:CGI(CommonGatc}vayInterlace),IDC(InternetDatabaseConnec-tor),ActiveXDataOhje川ADO)，相比較而言ADO具有容易使用、開發執行快速、消耗系統資源較少和占用磁盤空問小等優點.根據許多從事網站設計工作多年的專家的經驗，ADO和ASP的結合可以高效快速地使網站“動態化”，使得網站便于管理和維護，從長遠來看這對搭檔也勢必成為今后一段時問內“動態’''''WEB的核心技術，因此ASP技術在動態網站設計中的流行也成為了一種必然.
3實例
以下通過兒段源代碼很好地說明了ASP的簡潔、靈活、迅速、多變的特性.
建立一個自動監測瀏覽時問并根據不同時段動態顯示不同頁面內容的ASP程序，用記事本書寫該源代碼，存為[estl.asp:
<html>
<ho<ly>
<F01}TCOLOR=“Green">
<%If''''T油e<#12:00:00#An<1T油e>=#00:00:00#Then%>
早上好，今天天氣不賴啊!
<%E1seIf''''T油e<#19:00:00#An<1T油e>=#12:00:00#Then%>
下午好!
<%Else%>
哈u}!今晚你有沒有去IRC聊天!
<%EndIf%>
</ho<ly>
</html>
將testl.asp保存在WEB服務器的虛擬目錄(如:aspsamp/)下，并在瀏覽器中用HTTP的方式進行瀏覽，如:yourcx>mpu[二二e/aspsamp/test1.asp.
雖然，這只是一個非常簡單的實例，而A_這一功能完全可以通過JavaScript完成，但是不難發現使用ASP要比JavaScript簡潔迅速得多，而A_運用此法，完全可以輕而易舉地令你的網頁在不同的時段展示不同的風格，此例中的“Time"實際上是一個VBScript內置的顯示系統當前時問的函數，由于系統默認的腳本語言是VBSeript，因此在ASP命令中調用該函數時，腳本引擎會自動將其轉換成當前的系統時問.接下來是給testl.
asp添加一點色彩，在<holy>標識中添加“bgcx>lor=“<%=hgc%>””即變為<bodybgcx>lor=“<%=bgc%
>”>，并在<holy>標記前添加如下語句:
<%If''''T油e<#12:00:00#An<1T油e>=#00:00:00#Then
bg}}=“silver"
E1seIf''''T汕e<#19:00:00#An<1T油e>=#12:00:00#Then
hg(一“navy
Else
bg}}=“re<1"
En<1且
%>
如此一來，當用戶在不同的時段訪問該頁面時，將會看到不同的頁面背景色.我們可以做的事情還有很
多，譬如想知道在凌晨至十二點之問瀏覽該頁面的客戶的姓名，并向客戶問好，那么下面的這段程序將能助你達成心愿.首先你需要在頁面中設置表單，將以下HTML代碼剪貼到“<%IfTime<#12:00:00#An<1Time>=#00:00:00#Then%>”之后:
歡迎光臨我的主頁，清填寫以下信息:<FORMMETHOD="POST"ACTION="testl.asp">
<P>FirstName:<INPUTNAME="fname"SIZE="48">
<P>LastName:<INPUTNAME=“lname"SIZE=“48">
<P>Title:<INPUTNAME=“title"TYPE=RADIO、4LUE="mr">Mr.
<INPUTNAME=“title"TYPE=RADIO、4LUE="ms">Ms.
<P><INPUTTYPE=SUBMIT><INPUTTYPE=RESET>
</FOR1Vl>
然后在以上HTML代碼后面添加如下ASP命令:
<%title=request.form(“title")
iftitle="mr"then
%>
歡迎您Mr.<%=二qu艦.拓mi(+.二;request.form((name)%>.
<%elseiftitle="ms"then%>
歡迎您Ms.<%=二qu艦.拓mi(+.二;request.form((name)%>.<%else%>
<B><Fontcola</font></B>
<%endif%>
保存文件testl.
12:00:00之問的話，>r=blue>歡迎您<%=二que從.長)mi(+.二e;)&+;&二明es[.長)mi(“玩二e;request.form((name)&&request.form(lname%>
asp，并在瀏覽器中以HTTP方式進行瀏覽，如果此時的系統時問在凌晨0:00:00和中
這其實是一個在Internet和Intranet上常見的功能，即當用戶在瀏覽器端填寫完表單后，通過調用一個通用網關程序將用戶數據傳送到服務器，由服務器進行處理后再將結果返還給客戶瀏覽器.過去為了實現這樣的功能必須編寫一個獨立于HTML之外的CGI程序，并通過HTML進行調用，撇開CGI編寫復雜等缺點不談，CGI的執行效
率也是一個大問題，每一個表單(form)均須執行一個可執行文檔，當多人同時上線使用時，多個文檔同時執行，將大大降低WEB服務器的執行速度，如今ASP提供了與HTML完全相融的編程環境，顯然要比使用CGI便捷得多.
