Maxsoftware官網(wǎng)設(shè)計畢業(yè)設(shè)計

畢業(yè)設(shè)計說明書題目：Maxsoftware官網(wǎng)設(shè)計產(chǎn)品設(shè)計工藝設(shè)計方案設(shè)計√類型：學生姓名：_________________________學號：______________________學院：______軟件學院___________________專業(yè)：______軟件開發(fā)（ERP項目實施方向）班級：________________學校指導教師：_______________________企業(yè)指導教師：_____________________2015年5月2日摘要在互聯(lián)網(wǎng)飛速發(fā)展的今天，網(wǎng)站已經(jīng)成為了人民獲取各種信息的主要渠道。在信息技術(shù)飛速發(fā)展的今天，人們獲取信息的方式更多是來源于互聯(lián)網(wǎng)。而吸引瀏覽用戶的則是視覺效果出色、信息量豐富、使用起來便捷的網(wǎng)頁，所以網(wǎng)頁設(shè)計尤為重要，一個好的網(wǎng)站往往容易給人留下社科的印象。本文從網(wǎng)頁設(shè)計的角度出發(fā)，介紹一些設(shè)計中要素和技巧，例如框架、CSS樣式的使用，與排版類型使用了網(wǎng)頁制作軟件Dreamweaver；平面設(shè)計軟件Photoshop等。關(guān)鍵詞：信息;網(wǎng)頁設(shè)計;網(wǎng)絡(luò)；Dreamweaver目錄1.緒論 41.1引言 42.網(wǎng)站設(shè)計工具介紹 42.1網(wǎng)頁制作軟件Dreamweaver 42.1.1平面設(shè)計軟件PHOTOSHOP 42.2靜態(tài)網(wǎng)頁制作概述 53.網(wǎng)站的設(shè)計與實現(xiàn) 53.1網(wǎng)頁布局 53.1.1網(wǎng)頁配色 64.企業(yè)網(wǎng)頁的實現(xiàn) 94.1布局與配色 95.總結(jié) 12參考文獻 13致謝 14

1.緒論Maxsoftware是一家以科技創(chuàng)新為公司企業(yè)文化的科技公司。公司主要以網(wǎng)站建設(shè)，軟件開發(fā)，云服務器的搭建等為主。是一家現(xiàn)代化的企業(yè)1.1引言當今世界已進入信息時代，Internet成為21世紀最受關(guān)注的焦點之一,它的飛速發(fā)展和在全球范圍的普及應用正在給人類生活帶來革命性變化。網(wǎng)頁設(shè)計伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起，作為上網(wǎng)的主要依托，由于人們使用網(wǎng)絡(luò)的頻繁而變得非常的重要。網(wǎng)站已經(jīng)成為現(xiàn)階段眾多企業(yè)不可或缺的網(wǎng)絡(luò)營銷平臺，互聯(lián)網(wǎng)應用規(guī)模正在不斷擴大。企業(yè)極需要一種快捷，便利的平臺來對外宣傳企業(yè)形象,、企業(yè)文化、經(jīng)營理念、介紹最新產(chǎn)品和及時售后服務。一個好的網(wǎng)站是一個公司的臉，所以選取了這個題目。 網(wǎng)站設(shè)計工具介紹2.1網(wǎng)頁制作軟件DreamweaverDreamweaver是創(chuàng)建和管理網(wǎng)頁的專業(yè)化可視編輯器。使用Dreamweaver可以輕松創(chuàng)建跨平臺、跨瀏覽器的頁面。Macromedia的RoundtripHTML技術(shù)允許用戶隨意導入HTML文檔而無需重新設(shè)置代碼格式。Dreamweaver可以為用戶做到：使用動態(tài)HTML功能（例如具有動態(tài)效果的層和行為）而不用寫一行代碼。它甚至還可以檢查用戶的工作成果在所有流行的平臺和瀏覽器中可能發(fā)生的錯誤。Dreamweaver還是一個可以完全自定義的應用程序。用戶可以創(chuàng)建自己的對象和命令修改菜單和快捷鍵，甚至編寫JavaScript代碼擴展Dreamweaver的行為和屬性檢查器。2.1.1平面設(shè)計軟件PHOTOSHOPAdobePhotoshop，簡稱“PS”，是由AdobeSystems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像,是對已有的位圖圖像進行編輯、加工、處理以及運用一些特殊效果。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及,是專業(yè)設(shè)計人員的首選軟件。Photoshop是圖像處理軟件，其優(yōu)勢不在圖形創(chuàng)作。AdobePhotoshop的適用范圍很多。靜態(tài)網(wǎng)頁制作概述互聯(lián)網(wǎng)的誕生和快速發(fā)展，給網(wǎng)頁設(shè)計師提供了廣闊的設(shè)計空間。相對傳統(tǒng)的平面設(shè)計來說，網(wǎng)頁設(shè)計具有更多的新特性和更多的表現(xiàn)手段，借助網(wǎng)絡(luò)這一平臺，將傳統(tǒng)設(shè)計與電腦、互聯(lián)網(wǎng)技術(shù)相結(jié)合，實現(xiàn)網(wǎng)頁設(shè)計的創(chuàng)新應用與技術(shù)交流。網(wǎng)頁設(shè)計是傳統(tǒng)設(shè)計與信息、科技和互聯(lián)網(wǎng)結(jié)合而產(chǎn)生的，是交互設(shè)計的延伸和發(fā)展，是在新媒介和新技術(shù)支持下的一個全新的設(shè)計創(chuàng)作領(lǐng)域。如今的網(wǎng)頁設(shè)計往往要結(jié)合動畫、圖像特效與后臺的數(shù)據(jù)交互等，而DreamweaverCS3、PhotoshopCS3和FlashCS3作為Adobe公司經(jīng)典的常用網(wǎng)頁設(shè)計軟件，是目前網(wǎng)頁制作的首選工具。它們具有強大的網(wǎng)頁設(shè)計、動畫制作和圖像處理功能，在靜態(tài)頁面設(shè)計、圖片設(shè)計和網(wǎng)站動畫設(shè)計等方面，都可以使網(wǎng)站設(shè)計人員的思想體現(xiàn)得淋漓盡致。網(wǎng)站的設(shè)計與實現(xiàn)3.1網(wǎng)頁布局網(wǎng)頁布局的好不好就是給人的第一印象，布局的有新意，就會給人帶來深刻的印象，下面我來介紹幾種網(wǎng)頁布局方式（1）“國字”型布局“國”字型布局由“同”字型布局進化而來，因布局結(jié)構(gòu)與漢字“國”相似而得名。（2）T型布局T型布局結(jié)構(gòu)因與英文大寫字母T相似而得名。其頁面的頂部一般放置橫網(wǎng)站的標志或Banner廣告，下方左側(cè)是導航欄菜單，下方右側(cè)則用于放置網(wǎng)頁正文等主要內(nèi)容。（3）標題正文型標題正文型布局的布局結(jié)構(gòu)一般用于顯示文章頁面、新聞頁面和一些注冊頁面等。（4）左右框架型布局左右框架型布局結(jié)構(gòu)是一些大型論壇和企業(yè)經(jīng)常使用的一種布局結(jié)構(gòu)。其布局結(jié)構(gòu)主要分為左右兩側(cè)的頁面。左側(cè)一般主要為導航欄鏈接，右側(cè)則放置網(wǎng)站的主要內(nèi)容（5）上下框架型上下框架型布局與前面的左右框架型布局類似。其區(qū)別僅在于是一種上下分為兩頁的框架。（6）綜合框架型綜合框架型布局是結(jié)合左右框架型布局和上下框架型布局的頁面布局技術(shù)（7）POP布局POP布局是一種頗具藝術(shù)感和時尚感的網(wǎng)頁布局方式。頁面設(shè)計通常以一張精美的海報畫面為布局的主體。本網(wǎng)站采用的是T型布局3.1.1網(wǎng)頁配色企業(yè)網(wǎng)頁的配色主要采用藍色和白色色這樣一種大眾化的配色，使網(wǎng)頁簡潔大方而且方便瀏覽者瀏覽，同時和公司logo非常搭配。顏色也可以代表很多意義，例如藍色就是科技與生產(chǎn)力的代表。3.2網(wǎng)頁設(shè)計流程1.網(wǎng)站的主題網(wǎng)頁設(shè)計的首要任務就是確定網(wǎng)站的主題，即決定整個網(wǎng)站的方向、中心內(nèi)容及提供的主要信息。這些都需要從瀏覽者的角度去考慮，也就是你設(shè)計的網(wǎng)頁是準備給誰看。例如：個人網(wǎng)頁主要是個人的一些資料庫，主要是讓他人了解自己的。而“電腦報信息網(wǎng)”則是為訪問者提供各種即時的電腦技術(shù)知識的。2.規(guī)劃網(wǎng)站內(nèi)容的結(jié)構(gòu)網(wǎng)站的目標明確之后，就要考慮網(wǎng)站里存放的具體內(nèi)容，同時還要考慮如何使內(nèi)容系統(tǒng)化，如何把各項內(nèi)容以頁面的形式表現(xiàn)出來。還要規(guī)劃頁面之間的關(guān)系。如圖7-19所示。3.搜集有關(guān)資料網(wǎng)站的骨架搭建起來以后，就需要進行內(nèi)容的搜集各整理了。4.設(shè)計網(wǎng)頁版面有了骨干，有了內(nèi)容，接下來就要考慮如何將這些信息展現(xiàn)給訪問者，即進行網(wǎng)頁版面設(shè)計階段。決定各部分資料顯示在什么位置，以及以什么樣的方式呈現(xiàn)出來等等。我們可以通過畫草圖完成這一步的工作。主頁主頁關(guān)于作者網(wǎng)頁設(shè)計友情鏈接興趣經(jīng)歷相關(guān)技術(shù)游戲網(wǎng)站教育網(wǎng)站基礎(chǔ)教育職業(yè)教育音樂運動圖3-1規(guī)劃網(wǎng)站內(nèi)容和結(jié)構(gòu)5.進入實際操作附階段在規(guī)劃出網(wǎng)頁的版面和呈現(xiàn)方式后，就要進入實質(zhì)性的工作了，即用各種軟件，如文字編輯、圖象處理、動畫制作、音樂處理等來進行實際操作，最后通過網(wǎng)頁設(shè)計軟件將這些文字、圖象、動畫組合到頁面中。6.檢查網(wǎng)站內(nèi)容當一切工作都已經(jīng)完成后，在發(fā)布網(wǎng)頁之前還要檢查頁面上的超鏈是否正確，圖片是否正常顯示，文字中是否有錯別字等，以保證呈現(xiàn)給訪問者一個完美的網(wǎng)站。3.3網(wǎng)頁設(shè)計原則一、明確建立網(wǎng)站的目標和用戶需求Web站點的設(shè)計是展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略的重要途徑，因此我們必須明確設(shè)計站點的目的和用戶需求，從而做出切實可行的設(shè)計計劃。我們會根據(jù)消費者的需求、市場的狀況、企業(yè)自身的情況等進行綜合分析，以“消費者(customer)”為中心，而不是以“美術(shù)”為中心進行設(shè)計規(guī)劃。二、網(wǎng)頁設(shè)計總體方案主題鮮明在目標明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計方案。對網(wǎng)站的整體風格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。Web站點應針對所服務對象(機構(gòu)或人)的不同而具有不同的形式。有些站點只提供簡潔文本信息;有些則采用多媒體表現(xiàn)手法，提供華麗的圖像、閃爍的燈光、復雜的頁面布置，甚至可以下載聲音和錄像片段。好的Web站點把圖形表現(xiàn)手法和有效的組織與通信結(jié)合起來。為了做到主題鮮明突出，要點明確，我們將按照客戶的要求，以簡單明確的語言和畫面體現(xiàn)站點的主題;調(diào)動一切手段充分表現(xiàn)網(wǎng)站點的個性和情趣，辦出網(wǎng)站的特點。三、網(wǎng)站的版式設(shè)計網(wǎng)頁設(shè)計作為一種視覺語言，特別講究編排和布局，雖然主頁的設(shè)計不等同于平面設(shè)計，但它們有許多相近之處。版式設(shè)計通過文字圖形的空間組合，表達出和諧與美。多頁面站點頁面的編排設(shè)計要求把頁面之間的有機聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。為了達到最佳的視覺表現(xiàn)效果，我們將反復推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。四、色彩在網(wǎng)頁設(shè)計中的作用色彩是藝術(shù)表現(xiàn)的要素之一。在網(wǎng)頁設(shè)計中，我們的設(shè)計師根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進行組合.搭配來構(gòu)成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運用。如果您的企業(yè)有CIS(企業(yè)形象識別系統(tǒng))，我們將按照其中的VI進行色彩運用。五、網(wǎng)頁設(shè)計形式與內(nèi)容相統(tǒng)一為了將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。靈活運用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。如對稱原則在頁面設(shè)計中，它的均衡有時會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會達到比較好的效果。點、線、面作為視覺語言中的基本元素，巧妙地互相穿插、互相襯托、互相補充構(gòu)成最佳的頁面效果，充分表達完美的設(shè)計意境。六、三維空間的構(gòu)成和虛擬現(xiàn)實網(wǎng)絡(luò)上的三維空間是一個假想空間，這種空間關(guān)系需借助動靜變化.圖像的比例關(guān)系等空間因素表現(xiàn)出來。在頁面中，圖片、文字位置前后疊壓，或頁面位置變化所產(chǎn)生的視覺效果都各不相同。通過圖片、文字前后疊壓所構(gòu)成的空間層次不太適合網(wǎng)頁設(shè)計，根據(jù)現(xiàn)有瀏覽器的特點，網(wǎng)頁設(shè)計適合比較規(guī)范、簡明的頁面，盡管這種疊壓排列能產(chǎn)生強節(jié)奏的空間層次，視覺效果強烈。網(wǎng)頁上常見的是頁面上、下、左、右、中位置所產(chǎn)生的空間關(guān)系，以及疏密的位置關(guān)系所產(chǎn)生的空間層次，這兩種位置關(guān)系使產(chǎn)生的空間層次富有彈性，同時也讓人產(chǎn)生輕松或緊迫的心理感受?，F(xiàn)在，人們已不滿足于HTML語言編制的二維Web頁面，三維世界的誘惑開始吸引更多的人，虛擬現(xiàn)實要在Web網(wǎng)上展示其迷人的風采，于是VRML語言出現(xiàn)了。VRML是一種面向?qū)ο蟮恼Z言，它類似Web超級鏈接所使用的HTML語言，也是一種基于文本的語言，并可以運行在多種平臺之上，只不過能夠更多地為虛擬現(xiàn)實環(huán)境服務。七、網(wǎng)頁設(shè)計中多媒體功能的利用網(wǎng)絡(luò)資源的優(yōu)勢之一是多媒體功能。要吸引瀏覽者注意力，網(wǎng)頁的內(nèi)容可以用三維動畫、FLASH等來表現(xiàn)。但要由于網(wǎng)絡(luò)寬帶的限制，在使用多媒體的形式表現(xiàn)網(wǎng)頁的內(nèi)容時不得不考慮客戶端的傳輸速度。八、結(jié)構(gòu)清晰并且便于使用如果人們看不懂或很難看懂您的網(wǎng)站，那么，他如何了解你的企業(yè)和服務呢?使用一些醒目的標題或文字來突出您的產(chǎn)品與服務。并且即使您擁有最棒的產(chǎn)品，如果客戶從您的網(wǎng)站上不清楚您在介紹什么或不清楚如何受益的話，他們是不會喜歡您的網(wǎng)站的，這就是網(wǎng)頁設(shè)計的失敗。九、導向清晰網(wǎng)頁設(shè)計中導航使用超文本鏈接或圖片鏈接，使人們能夠在您的網(wǎng)站上自由前進或后退，而不會讓他們使用瀏覽器上的前進或后退。我們在所有的圖片上使用“ALT”標識符注明圖片名稱或解釋，以便那些不愿意自動加載圖片的觀眾能夠了解圖片的含義。

4.企業(yè)網(wǎng)頁的實現(xiàn)4.1布局與配色本網(wǎng)站布局技術(shù)采用層疊樣式表的應用，使用CSS實現(xiàn)出一個完美的網(wǎng)站。是布局方法采用軟件布局法，利用Photoshop軟件對圖像進行編輯。主體采用藍色為主色調(diào)。突出科技創(chuàng)新。圖4-1網(wǎng)頁整體圖4.2企業(yè)門戶企業(yè)門戶是展示一個企業(yè)最好的作品，一個好的企業(yè)門戶會給人們對企業(yè)的看法留下深刻，美好的印象。首頁包括網(wǎng)站logo、導航欄、banner、底部公司信息、等公司的logo設(shè)計的得不得體，就有很大一部分決定企業(yè)以后發(fā)展，把公司比喻成人的話，公司名稱就是人的姓名，公司logo就相當于人的臉。臉好看，事才好辦。首先查閱大量科技公司的網(wǎng)站，尋求共同點，確立好主題色，開始按T型布排版。圖4-2網(wǎng)頁標題圖圖4-3網(wǎng)頁新聞圖4.2.1.“聯(lián)系我們”制作（3）左邊放上公司聯(lián)系人的信息，右邊建立一個數(shù)據(jù)接口，方便統(tǒng)計用戶數(shù)據(jù)圖4-4聯(lián)系我們圖4.2.2.公司簡介圖4-5公司簡介圖4.2.3.“新聞”制作我們設(shè)置了新聞這一欄，方便了用戶在瀏覽我們網(wǎng)站也可以關(guān)注該行情，增加用戶粘性。圖4-6網(wǎng)頁新聞圖4.2.4.店招設(shè)計左邊放置公司LOGO，右邊放置導航欄，整體清晰，易用性強，主題明確圖4-7網(wǎng)站logo圖5.總結(jié)一開始接觸到這個網(wǎng)站建設(shè)時，憑著自己有設(shè)計這方面的技能，認為網(wǎng)站建設(shè)很容易，之前做了幾個版面都不行，漸漸的發(fā)現(xiàn)了網(wǎng)站建設(shè)的困難的地方，并不是想象中的容易，做出來容易，做的漂亮難。這次網(wǎng)站建設(shè)我學習到了以下幾點：（1）掌握設(shè)計工具（2）確定網(wǎng)站界面（3）確定網(wǎng)站風格。在今后的日子里，我會朝著這個方向更加努力，設(shè)計更多的精品網(wǎng)站。大學三年，不快也不慢，學習到的東西真的很多，對我以后人生也有很大的幫助，我可以很自信的說大學三年沒有浪費青春。

參考文獻[1]何秀芳.網(wǎng)頁制作與網(wǎng)站建設(shè)課堂實錄[M].北京：人民郵電出版社.2009，3[2]唐守國主編，創(chuàng)意+：Photoshopcs4網(wǎng)頁設(shè)計、配色與特