網(wǎng)站畢業(yè)設計論文

./現(xiàn)代物流職業(yè)技術(shù)學院畢業(yè)設計題目洛楓公司建設_系部物流信息系專業(yè)電子商務班級電商1002班姓名喻奇指導教師歐陽紅巍2012摘要隨著計算機、網(wǎng)絡與通訊技術(shù)的發(fā)展,Internet在人們的生活、學習和工作的位置越來越重要,通過發(fā)布屬于公司的Web站點宣傳推廣公司產(chǎn)品或開展公關(guān)活動已成為一種趨勢。電子商務的發(fā)展使得企業(yè)管理模式和貿(mào)易模式發(fā)生了很大的改變,企業(yè)在發(fā)展和壯大自己的同時也非常的注重其自身信息化和商業(yè)化程度的提高,企業(yè)便成為一個企業(yè)展示自我和對外貿(mào)易的重要平臺。企業(yè)門戶性的建設和管理水平,直接影響企業(yè)的網(wǎng)絡形象,擁有一個設計美觀、功能全面的門戶性,已經(jīng)成為企業(yè)網(wǎng)絡化建設的一個重要容。而Web設計的健康發(fā)展依靠web標準的采用,沒有web標準就不會有真正的可訪問性和連貫的設計。不用web標準,就跟不上時代。在這樣的標準時代,人們需要網(wǎng)頁更加容易擴展,適合自動數(shù)據(jù)交換,使其更加規(guī)整。而css,則實現(xiàn)了頁面容與樣式分離。鑒于web標準,本論文著重對div+css布局與公司頁面實現(xiàn)進行了分析；同時根據(jù)公司的需求,采用div+css實現(xiàn)了企業(yè)網(wǎng)頁的設計,具體實現(xiàn)了公司首頁、公司簡介、公司文化、最新動態(tài)、產(chǎn)品展示、蟲害知識、招聘信息、服務承諾、聯(lián)系我們、在線留言功能,系統(tǒng)功能符合公司的需求。[關(guān)鍵詞]企業(yè)網(wǎng)頁設計建設前言當今世界已進入信息時代,Internet成為21世紀最受關(guān)注的行業(yè)之一,它的飛速發(fā)展和全球圍的普及應用正在給人類生活帶來革命性變化。網(wǎng)絡技術(shù)的發(fā)展也取得了巨大的成就,為開發(fā)提供了很好的技術(shù)支持。已經(jīng)成為現(xiàn)階段眾多企業(yè)不可或缺的網(wǎng)絡營銷平臺,互聯(lián)網(wǎng)應用規(guī)模正在不斷擴大。其中,特別是中小型企業(yè),對于網(wǎng)絡平臺搭建的需求相當?shù)钠惹?。各大門戶網(wǎng),企業(yè)網(wǎng)都在WEB2.0的標準上,采用div+css來布局.市洛楓有害生物防治用品為拓展網(wǎng)絡銷售市場,實施公司品牌宣傳,擬建立一個以公司宣傳和產(chǎn)品推廣為主要目的的企業(yè)。針對該公司的需求,本課題設計了一個滿足其要求的信息發(fā)布類。本旨在宣傳公司形象及其產(chǎn)品推介。本主要實現(xiàn)以下幾方面功能：企業(yè)宣傳,發(fā)布企業(yè)相關(guān)信息,展示企業(yè)品牌形象,展示企業(yè)產(chǎn)品,實現(xiàn)產(chǎn)品推介、在線交流,從而需要對本的進行設計和制作。在設計過程中主要是采用dreamweaver制作,通過將HTML語言、div+css布局和dreamweaver工具軟件整合應用,結(jié)合photoshop軟件進行圖片素材處理,從而實現(xiàn)的制作和建設。論文詳細論述了一個基于公司開發(fā)的設計過程。在技術(shù)上,采用了Dreamweaver開發(fā)工具,以HTML的超大功能結(jié)合JavaScript的客戶端語言,這樣的構(gòu)造有利于對系統(tǒng)開發(fā)。其中,最主要的就是介紹和展示DIV+CSS在網(wǎng)頁中的作用和魅力。本文實現(xiàn)了公司首頁、公司簡介、公司文化、最新動態(tài)、產(chǎn)品展示、蟲害知識、招聘信息、服務承諾、聯(lián)系我們、在線留言功能,系統(tǒng)基本符合公司的需求。論文組織如下：首先闡述了該建設的研究背景、意義以及建設的一般流程及其原則,然后進行需求分析,接下來詳細介紹設計技術(shù)：Dreamweaver、Photoshop制作工具、html語言、div+css、JavaScript代碼、淘寶客基本知識,其次介紹了總體規(guī)劃以及頁面的實現(xiàn)。目錄TOC\o"1-2"\h\z\u前言2第一章緒論41.1建設的研究背景41.2建設的一般流程及其原則5第二章需求分析82.1需求分析活動92.2用戶調(diào)查活動92.3市場調(diào)研10第三章設計工具113.1dreamweaver制作工具113.2adobePhotoshop軟件工具123.3html語言123.4div+css133.5javascript代碼133.6淘寶客15第四章總體規(guī)劃174.1首頁設計174.2容設計174.3功能設計184.4結(jié)構(gòu)設計184.5頁面可視化設計184.6風格184.7的欄目和版塊設計19第五章頁面實現(xiàn)205.1功能分析205.2首頁設計205.3頁設計235.4部分技術(shù)實現(xiàn)32總結(jié)35致36參考文獻37第一章緒論隨著21世紀的到來,人們更深切地感受到計算機在生活和工作中的作用越來越重要,越來越多的職業(yè)需要具有計算機應用技能型人才。掌握計算機是職業(yè)的需要,更是事業(yè)發(fā)展的需要。網(wǎng)頁設計與制作是計算機能力的具體表現(xiàn),本章主要介紹建設的研究背景和建設的一般流程及其原則。1.1建設的研究背景如今,互聯(lián)網(wǎng)對企業(yè)來說已經(jīng)不再是新鮮的事物了,大多數(shù)的企業(yè)都已經(jīng)建立了自己的。隨著互聯(lián)網(wǎng)的快速發(fā)展,網(wǎng)絡已成為人們生活的一部分。電子商務、網(wǎng)絡營銷已不再只是被炒做的概念,人們對其的認識也越來越深刻。不僅僅是大企業(yè)需要來開展電子商務,中小企業(yè)一樣也迫切需要自己的企業(yè)用以實現(xiàn)宣傳和聯(lián)系客戶等許多傳統(tǒng)媒介無法完成的目標。搭建模型需要各方面的資訊,而如何在網(wǎng)頁上正確明晰地表達企業(yè)的資訊,使企業(yè)達到建站的目的,對建設好企業(yè)是有非常大的意義的?？梢哉f,有正確的建站思路再配合下文所講的具有普遍性的建站原理才能創(chuàng)造出真正的企業(yè),而不是只在技術(shù)上苦苦追求完美,堆砌出華麗卻沒有實際意義的工藝品。電子商務是一種新興的、處于發(fā)展過程中的現(xiàn)代商務方式,從95年來得到了迅速發(fā)展,顯現(xiàn)了巨大的現(xiàn)代商業(yè)價值。1997年歐洲、美國、新加坡等許多國家政府發(fā)表了電子商務發(fā)展綱要,其目的是引導全球電子商務的自由競爭和健康發(fā)展,大力推動電子商務的實踐。本國政府的發(fā)展綱要也將在近期出臺,促進本國企業(yè)適應國際化的發(fā)展、參與國際競爭。有理由相信,在21世紀,電子商務將逐漸成為社會生活的主要方式,也將成為數(shù)字化社會的基礎(chǔ)。電子商務活動是通過公共計算機通信網(wǎng)絡進行商務活動的現(xiàn)代方式,該方式將突破傳統(tǒng)商務在時間、地域上的限制,成為方便、快捷、安全可靠的新興電子化商務活動模式。電子商務使現(xiàn)代商務活動具有安全、可靠、快速、明確和方便的特點,通過國際互聯(lián)網(wǎng)絡人們可隨時隨地開展電子商務活動。由于電子商務涉及社會、經(jīng)濟、金融、法律以及生活等許多方面,故存在一定的困難和問題。其健康發(fā)展一方面要求人們的工作生活方式、思想觀念和管理方法都將有根本的變革；另一方面國家宏觀控制和管理需要對電子商務進行立法和規(guī)；再者技術(shù)安全上必須完善可靠。電子商務的發(fā)展將逐步改變?nèi)藗兊纳罴肮ぷ鞣绞?原來面對面談判、紙上交流的管理與商務活動方式逐步變成了由計算機遠距離操作完成的數(shù)字化活動方式。沒有了時間、空間和人為條件上的限制,人們的生活和工作將變得方便、靈活和自如。特別在獲取信息、傳輸信息、各種服務活動、付款、送貨方式等方面將有根本的變化。任何合法組織和公司甚至個人通過在國際互聯(lián)網(wǎng)絡上建立自己的站點都可成為全球化的信息發(fā)布者；信息的獲取具有了廣泛的容和選擇性；貿(mào)易、商務活動中的商品認識、合同談判、交易都通過國際互聯(lián)網(wǎng)信息和網(wǎng)絡軟件完成。企業(yè)行政管理將進入電子化辦公方式,金融服務中的支票、柜臺、保險、投資、企業(yè)銀行業(yè)務和家庭銀行業(yè)務將搬到網(wǎng)絡上進行。數(shù)字化電子貨幣的使用與發(fā)展為人們進行跨地域的商務金融活動提供了方便條件。人類將不可避免地習慣與計算機共存,適應電子商務時代的數(shù)字化生存。電子商務也完全改變了人們當今的商務方式,由于沒有了時間和空間的限制,人們可以在家中處理各種業(yè)務。1.2建設的一般流程及其原則1、建設流程一個的成功與否與制作前的規(guī)劃有著極為重要的關(guān)系。為使能夠達到預期的目的,滿足用戶要求,不僅需要在建設過程中與用戶方進行良好的溝通與交流,更重要的是要遵循建設流程,只有這樣,才能做到既不浪費時間也能提高效率,又能保證的科學性、嚴謹性。一般將設計過程分為以下幾個階段：A、對需求的分析首先要明確制作的目的和具體要什么,進行的功能定位,從而確定制作類型。B、根據(jù)需求來規(guī)劃設計確定類型后,在正是建站前需要對進行一系列的規(guī)劃與設計。規(guī)劃主要包括的類型選擇、主題設計、風格設計、容設計、版面布局設計以及策劃書的撰寫等。規(guī)劃對建設起到計劃和指導作用,對的容和維護起到定位作用。這一環(huán)節(jié)的有無和好壞,不僅直接影響的整體效果,而且是發(fā)布后能否成功運行的主要因素。C、確認好設計之后進行美工操作、制作經(jīng)過精心設計的規(guī)劃方案最終要通過網(wǎng)頁表現(xiàn)出來,制作網(wǎng)頁是將規(guī)劃付諸實施的主要任務。在制作頁面前要考慮到的風格和功能,要根據(jù)所建的特點做充分準備,使的基本格調(diào)符合用戶的要求,使的功能滿足用戶的使用需求。2、建設原則A、第一原則:目的性任何一個,首先必須具有明確的目的和目標群體。是面對客戶、供應商、消費者還是全部?主要目的是為了介紹企業(yè)、宣傳某種產(chǎn)品還是為了試驗電子商務?如果目的不是唯一的,還應該清楚的列出不同目的的輕重關(guān)系。建站包括類型的選擇、容功能的籌備、界面設計等各個方面都受到目的性的直接影響,因此目的性是一切原則的基礎(chǔ)。建站的目的應該是經(jīng)過成熟考慮的,包含幾大要素:目的應該是明確定義的,而不是籠統(tǒng)地說要做一個平臺、要弄電子商務,應該清楚主要希望誰來瀏覽,具體要做到哪些容,提供怎樣的服務,達到什么樣是效果。在當前的資源環(huán)境下能夠?qū)崿F(xiàn)的,而不能脫離了自身的人力、物力、互聯(lián)網(wǎng)基礎(chǔ)以及整個外部環(huán)境等因素盲目制定目標,尤其是對外部環(huán)境的考慮通常容易被忽略,結(jié)果只能成為美好的一廂情愿。如果目標比較龐大,應該充分考慮各部分的輕重關(guān)系和實現(xiàn)的難易度,想要一步登天的做法通常會導致投入過大且缺少頭緒,不如分清主次循序漸進。在充分考慮了目的和目標群體的特點以后,再來選擇建站類型,并相應的安排適當?shù)男畔⑷莺凸δ芊铡、第二原則:專業(yè)性信息容應該充分展現(xiàn)企業(yè)的專業(yè)特性對外介紹企業(yè)自身,最主要的目的是向外界介紹企業(yè)的業(yè)務圍、性質(zhì)和實力,從而創(chuàng)造更多的商機。在這里包括:應該完整無誤的表述企業(yè)的業(yè)務圍<產(chǎn)品、服務>及主次關(guān)系、應該詳細的介紹企業(yè)的地址、性質(zhì)、聯(lián)系方式、提供企業(yè)的年度報表、則有助于瀏覽者了解企業(yè)的經(jīng)營狀況、方針和實力。C、第三原則:實用性提供的功能服務應該是切合瀏覽者實際需求,并且符合企業(yè)特點。提供的功能服務必須保證質(zhì)量,包括:每個服務必須有清晰定義的流程,每個步驟需要什么條件、產(chǎn)生什么結(jié)果、由誰來操作、如何實現(xiàn)等都應該是清晰無誤的,實現(xiàn)功能服務的程序必須是正確的、健壯的、能夠及時響應的、能夠應付預想的、同時請求服務數(shù)峰值的。需要人工操作的功能服務應該設有常備人員和相應責權(quán)制度。用戶操作的每一個步驟完成后,應該被提示當前處于什么狀態(tài)。當功能較多的時候應該清楚的定義相互之間的輕重關(guān)系,并在界面上和服務響應上加以體現(xiàn)。D、第四原則:層次性條理清晰的結(jié)構(gòu),表現(xiàn)為的板塊劃分的合理性,這里需要注意:板塊的劃分應該有充分的依據(jù)并且是容易理解的。不同板塊的容盡量做到?jīng)]有交叉重復容,共性較多的容應盡量劃分到同一板塊。在最表層盡量減少劃分的板塊數(shù)量,通?？刂圃?~6之間比較合適。劃分后的結(jié)構(gòu)層次不宜過深,通常不超5層為佳。在安排層次的時候要充分考慮用戶操作,比較常用的信息容、功能服務應該盡量放到更淺的層次以減少用戶點擊次數(shù)。信息容的獲取和功能服務的過程都應該盡量將所需要進行的步驟控制在3~5步以,不得不需要更多的步驟的時候應該有明確的提示。E、第五原則:藝術(shù)性網(wǎng)頁創(chuàng)作本身已經(jīng)成了一種獨特的藝術(shù),要達到吸引眼球的目的,再結(jié)合界面設計的相關(guān)原理,形成了一種獨特的藝術(shù),這使得企業(yè)的設計應該滿足:遵循基本的圖形設計原則,符合基本美學原理和排版原則。對于主題和次要對象的處理符合排版原理。全站的設計作為一個整體,應該具有整體的一致性。整體視覺效果特點鮮明:頁面版式結(jié)構(gòu);用色;線條和構(gòu)圖;配圖的精細、觀程度;元素風格;整體氣氛表達;字體選用。整體風格同企業(yè)形象相符合,適于目標對象的特點。第二章需求分析是企業(yè)向用戶和網(wǎng)民提供信息的一種方式,是企業(yè)開展電子商務的基礎(chǔ)設施和信息平臺。企業(yè)的網(wǎng)址被稱為"網(wǎng)絡商標",也是企業(yè)無形資產(chǎn)的組成部分,而則是反映企業(yè)形象和文化的重要窗口。一個項目的確立是建立在各種各樣的需求之上的。這種需求往往來自于客戶的實際需求。由于需要面對不同層次的用戶,因此項目的負責人對用戶需求的理解,在很大程度上決定了此類開發(fā)項目的成敗。如何更好地了解、分析、明確用戶需求,并且能夠準確、清晰地以文檔的形式表達給參與項目開發(fā)的每個成員,保證開發(fā)過程按照用戶需求進行,是每個開發(fā)項目管理者需要面對的問題。需求分析工作是建設中重要的一步,也是決定性的一步。只有通過需求分析,才能把功能的總體概念描述為具體的功能描述書,從而奠定開發(fā)的基礎(chǔ)。需求分析的目的是完整、準確地描述用戶的需求,跟蹤用戶需求的變化,將用戶的需求準確地反映到系統(tǒng)的分析和設計中,并使系統(tǒng)的分析、設計與用戶的需求保持一致。市洛楓有害生物防治用品是一家專業(yè)從事白蟻、蟑螂、老鼠、蚊蠅、螞蟻、跳蚤、臭蟲、蜱等病媒生物防治及產(chǎn)品銷售的專業(yè)公司。該公司本著"以人為本、誠信服務、口碑相傳、永續(xù)經(jīng)營"的服務原則,推崇"誠信、高效、安全、環(huán)保"的控蟲理念,以改善和保護人們的生活環(huán)境、自然環(huán)境為目的。該公司為拓展網(wǎng)絡銷售市場,實施公司品牌宣傳,擬建立一個以公司宣傳和產(chǎn)品推廣為主要目的的企業(yè)。針對該公司的需求,本課題設計了一個滿足其要求的信息發(fā)布類。本旨在宣傳公司形象及其產(chǎn)品推介。本主要實現(xiàn)以下幾方面功能：企業(yè)宣傳,發(fā)布企業(yè)相關(guān)信息,展示企業(yè)品牌形象,展示企業(yè)產(chǎn)品,實現(xiàn)產(chǎn)品推介、在線交流。與此同時借助了淘寶客的使用,點擊產(chǎn)品展示中的圖片,就可以到淘寶旗艦店,從而可以進行產(chǎn)品的購買。在設計過程中主要是采用dreamweaver制作,通過將HTML語言、div+css布局、JavaScript代碼,結(jié)合Photoshop軟件進行圖片素材處理,從而實現(xiàn)的制作和建設。2.1需求分析活動需求分析活動其實本來就是一個和客戶交流,引導客戶能夠正確的將自己的實際需求用較為適當?shù)募夹g(shù)語言進行表達,以明確項目的實現(xiàn)。這個過程中也同時包含了對要建立的基本功能和模塊的確立和策劃活動?；顒影ㄒ韵聨讉€部分：1、與公司的負責人員進行需求分析討論。2、編寫《開發(fā)項目描述書〔初稿》文檔。3、《開發(fā)項目描述書〔初稿》進行反復討論和修改,確定《開發(fā)項目描述書》正式文檔。4、需求分析中需要編寫的文檔主要是《開發(fā)項目描述書》,它基本上是整個需求分析活動的結(jié)果性文檔,也是開發(fā)工程中項目成員主要可供參考的文檔。為了更加清楚的描述《開發(fā)項目描述書》,往往還需要編寫《用戶調(diào)查報告》和《市場調(diào)研報告》文檔來輔助說明。各種文檔最好有一定的規(guī)和固定格式,以便增加可閱讀性和方便閱讀者快速理解文檔容。為了建設符合公司要求的企業(yè),本人去了公司進行了公司資料的收集,和相關(guān)人員進行了溝通,了解了其需實現(xiàn)的功能,并在次基礎(chǔ)上對于的定位達成了共識。2.2用戶調(diào)查活動在需求分析的過程中,往往有很多模棱兩可的用戶需求,這個時候就需要調(diào)查用戶的實際情況,明確用戶需求。一個比較理想化的用戶調(diào)查活動需要用戶的充分配合,而且還有可能需要對調(diào)查對象進行必要的培訓。所以調(diào)查的計劃安排如時間、地點、參加人員、調(diào)查容,都需要雙方的共同認可。調(diào)查的形式可以是：發(fā)需求調(diào)查表、開需求調(diào)查座談會或者現(xiàn)場調(diào)研。調(diào)查的容主要如下：1、當前以及日后可能出現(xiàn)的功能需求。2、客戶對的性能的要求和可靠性的要求。3、確定維護的要求。4、的實際運行環(huán)境。5、頁面總體風格以及美工效果。6、主頁面和次級頁面數(shù)量,是否需要多種語言版本、容管理及錄入任的分配等。7、各種頁面特殊效果及其數(shù)量。8、項目完成時間及進度。9、明確項目完成后的維護責任。調(diào)查結(jié)束以后,需要編寫《用戶調(diào)查報告》。編寫《用戶調(diào)查報告》的要點是：1、調(diào)查概要說明：項目的名稱；用戶單位；參與調(diào)查人員；調(diào)查開始終止的時間；調(diào)查的工作安排。2、調(diào)查容說明：用戶的基本情況；用戶的主要業(yè)務；信息化建設現(xiàn)狀；當前和將來潛在的功能需求、需求、可靠性需求、實際運行環(huán)境；用戶對新的期望等。3、調(diào)查資料匯編：將調(diào)查得到的資料分類匯總〔如調(diào)查問卷,會議記錄等等。4、界面設計。2.3市場調(diào)研市場調(diào)研活動容通過市場調(diào)研活動,清晰的分析相似的性能和運行情況?？梢允贡救烁忧宄臉?gòu)想出的大體架構(gòu)。但是由于實際中時間、經(jīng)費、公司能力所限,市場調(diào)研覆蓋的圍有一定的局限性,在調(diào)研市場同類的時候,應盡可能調(diào)研到所有比較出名和優(yōu)秀的同類。應該了解同類的使用環(huán)境與用戶的差異點、類似點,同類產(chǎn)品所定義的用戶詳細需求。市場調(diào)研的重點應該放在主要競爭對手的作品或類似作品的有關(guān)信息上。市場調(diào)研可以包括下列容：1、市場中同類作品的確定。2、調(diào)研作品的使用圍和訪問人群。3、調(diào)研產(chǎn)品的功能設計〔主要模塊構(gòu)成,特色功能,性能情況等等。4、簡單評價所調(diào)研的情況。調(diào)研的目的是明確并且引導用戶需求。對市場同類產(chǎn)品調(diào)研結(jié)束后,應該撰寫《市場調(diào)研報告》。第三章設計工具3.1Dreamweaver制作工具Dreamweaver是在網(wǎng)頁設計與制作領(lǐng)域中用戶最多、應用最廣、功能最強大的軟件,隨著Dreamweaver8的發(fā)布,更堅定Dreamweaver在該領(lǐng)域的地位。它集網(wǎng)頁設計、開發(fā)和站點管理功能于一身,具有可視化、支持多平臺和跨瀏覽器的特性,是目前設計、開發(fā)、制作的首選工具。1、靈活的編寫方式Dreamweaver具有靈活編寫網(wǎng)頁的特點,不但將世界一流水平的"設計"和"代碼"編輯器合二為一,而且在設計窗口中還精化了源代碼,能幫助用戶按工作需要定制自己的用戶界面。2、可視化編輯界面Dreamweaver是一種所見即所得的HTML編輯器,可實現(xiàn)頁面元素的插入和生成?；蛞暬庉嫮h(huán)境大量減少了代碼的編寫,同時亦保證了其專業(yè)性和兼容性,并且可以對部的HTML編輯器和任何第三方的HTML編輯器進行實時的訪問。無論用戶習慣手工輸入HTML源代碼還是使用可視化的編輯界面,Dreamweaver都能提供便捷的方式使用戶設計網(wǎng)頁和管理變得更容易。3、功能更多的CSS支持——CSS可視化設計、CSS檢查工具4、動態(tài)跨瀏覽器驗證當保存時系統(tǒng)自動檢查當前文檔的跨瀏覽器有效性,可以指定何種瀏覽器為測試用瀏覽器,同時系統(tǒng)自動檢驗以確定頁面有沒有目標瀏覽器不支持的tags或CSS結(jié)構(gòu)。動態(tài)跨瀏覽器有效性檢查功能可以自動核對tags和CSS規(guī)則是否適應目前的主瀏覽器。5、強大的WEB站點管理功能6、建的圖形編輯引擎7、Dreamweaver的集成特性Dreamweaver8、繼承了Fireworks、Flash和Shockwave的集成特性,可以在這些Web創(chuàng)作工具之間自由地切換,輕松地創(chuàng)建美觀實用的網(wǎng)頁。9、豐富的媒體支持能力可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒體。Dreamweaver具有強大的多媒體處理功能,在設計DHTML和CSS方面表現(xiàn)得極為出色,它利用JavaScript和DHTML語言代碼輕松地實現(xiàn)網(wǎng)頁元素的動作和交互操作。Dreamweaver還提供行為和時間線兩種控件來產(chǎn)生交互式響應和進行動畫處理。9、超強的擴展能力Dreamweaver還支持第三方插件,任何人都可以根據(jù)自己的需要擴展Dreamweaver的功能,并且可以發(fā)布這些插件。3.2AdobePhotoshop軟件工具Photoshop8.0是目前最流行的圖形、圖像編輯設計軟件,在數(shù)碼影像處理、圖像編輯合成、廣告設計、封面設計、美術(shù)繪畫、網(wǎng)頁設計等領(lǐng)域都被廣泛地應用。1、文字處理更加方便2、增加的圖層集使圖層管理更有序。3、新增圖像功能：圖像的剪切和剪裁更加方便。4、將所有工具的選項板改進為工具選項欄放置在工作區(qū)頂部,方便先項參數(shù)的設置。5、為了更方便地用路徑繪畫,改進增加了幾何形狀工具,通過選擇工具的不同工作模式,可創(chuàng)建路徑、幾何形狀或幾何填充區(qū),使得矢量繪圖功能得到了加強。3.3Html語言HTML〔HyperTextMark-upLanguage即超文本標記語言或超文本標示語言,是目前網(wǎng)絡上應用最為廣泛的語言,也是構(gòu)成網(wǎng)頁文檔的主要語言。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字、圖形、動畫、聲音、表格、等。HTML的結(jié)構(gòu)包括頭部〔Head、主體〔Body兩大部分,其中頭部描述瀏覽器所需的信息,而主體則包含所要說明的具體容。HTML文檔制作不是很復雜,且功能強大,支持不同數(shù)據(jù)格式的文件鑲?cè)?這也是WWW盛行的原因之一,其主要特點如下：1、簡易性,HTML版本升級采用超集方式,從而更加靈活方便。2、可擴展性,HTML語言的廣泛應用帶來了加強功能,增加標識符等要求,HTML采取子類元素的方式,為系統(tǒng)擴展帶來保證。3、平臺無關(guān)性。雖然PC機大行其道,但使用MAC等其他機器的大有人在,HTML可以使用在廣泛的平臺上,這也是WWW盛行的另一個原因。3.4div+cssDIV+CSS是標準中常用術(shù)語之一,div+css是一種網(wǎng)頁的布局方法,這一種網(wǎng)頁布局方法有別于傳統(tǒng)的HTML網(wǎng)頁設計語言中的表格定位方式,真正地達到了w3c容與表現(xiàn)相分離。HTML語言自HTML4.01以來,不再發(fā)布新版本,原因就在于HTML語言正變得越來越復雜化、專用化。XHTML語言是一種可以將HTML語言標準化,用XHTML語言重寫后的HTML頁面可以應用許多XML應用技術(shù)。使得網(wǎng)頁更加容易擴展,適合自動數(shù)據(jù)交換,并且更加規(guī)整。在XHTML設計標準中,不再使用表格定位技術(shù),而是采用DIV+CSS的方式實現(xiàn)各種定位。以下是DIV+CSS的特點簡介：1、符合W3C標準。微軟等公司均為W3C支持者。這一點是最重要的,因為這保證您的不會因為將來網(wǎng)絡應用的升級而被淘汰。2、支持瀏覽器的向后兼容,也就是無論未來的瀏覽器大戰(zhàn),勝利的是IE7或者是火狐,您的都能很好的兼容。3、搜索引擎更加友好。相對與傳統(tǒng)的table,采用DIV+CSS技術(shù)的網(wǎng)頁,對于搜索引擎的收錄更加友好。4、樣式的調(diào)整更加方便。容和樣式的分離,使頁面和樣式的調(diào)整變得更加方便?，F(xiàn)在YAHOO,MSN等國際門戶,網(wǎng)易,新浪等國門戶,和主流的WEB2.0,均采用DIV+CSS的框架模式,更加印證了DIV+CSS是大勢所趨。5、CSS的極大優(yōu)勢表現(xiàn)在簡潔的代碼,對于一個大型來說,可以節(jié)省大量帶寬,而且眾所周知,搜索引擎喜歡清潔的代碼。6、表現(xiàn)和結(jié)構(gòu)分離,在團隊開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。3.5JavaScript代碼JavaScript是一種基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言。同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言,常用來給HTML網(wǎng)頁添加動態(tài)功能,比如響應用戶的各種操作。它最初由網(wǎng)景公司的BrendanEich設計,是一種動態(tài)、弱類型、基于原型的語言,置支持類。JavaScript是Sun公司的注冊商標。Ecma國際以JavaScript為基礎(chǔ)制定了ECMAScript標準。JavaScript也可以用于其他場合,如服務器端編程。完整的JavaScript實現(xiàn)包含三個部分：ECMAScript,文檔對象模型,字節(jié)順序記號。Netscape公司在最初將其腳本語言命名為LiveScript。在Netscape在與Sun合作之后將其改名為JavaScript。JavaScript最初受Java啟發(fā)而開始設計的,目的之一就是"看上去像Java"[2],因此語法上有類似之處,一些名稱和命名規(guī)也借自Java。但JavaScript的主要設計原則源自Self和Scheme[3].JavaScript與Java名稱上的近似,是當時網(wǎng)景為了營銷考慮與Sun公司達成協(xié)議的結(jié)果。為了取得技術(shù)優(yōu)勢,微軟推出了JScript來迎戰(zhàn)JavaScript的腳本語言。為了互用性,Ecma國際〔前身為歐洲計算機制造商協(xié)會創(chuàng)建了ECMA-262標準〔ECMAScript。現(xiàn)在兩者都屬于ECMAScript的實現(xiàn)。盡管JavaScript作為給非程序人員的腳本語言,而非作為給程序人員的編程語言來推廣和宣傳,但是JavaScript具有非常豐富的特性。JavaScript代碼能夠具有交互性,能夠包含更多活躍的元素,就有必要在網(wǎng)頁中嵌入其它的技術(shù)。如：Javascript、VBScript、DocumentObjectModel〔DOM,文檔對象模型、Layers和CascadingStyleSheets〔CSS,層疊樣式表,這里主要講Javascript。那么Javascript是什么東東？Javascript就是適應動態(tài)網(wǎng)頁制作的需要而誕生的一種新的編程語言,如今越來越廣泛地使用于Internet網(wǎng)頁制作上。Javascript是由Netscape公司開發(fā)的一種腳本語言,或者稱為描述語言。在HTML基礎(chǔ)上,使用Javascript可以開發(fā)交互式Web網(wǎng)頁。Javascript的出現(xiàn)使得網(wǎng)頁和用戶之間實現(xiàn)了一種實時性的、動態(tài)的、交互性的關(guān)系,使網(wǎng)頁包含更多活躍的元素和更加精彩的容。運行用Javascript編寫的程序需要能支持JavaScript語言的瀏覽器。Netscape公司Navigator3．0以上版本的瀏覽器都能支持JavaScript程序,微軟公司InternetExplorer3．0以上版本的瀏覽器基本上支持JavaScript。微軟公司還有自己開發(fā)的JavaScript,稱為JScript。JavaScript和Jscript基本上是相同的,只是在一些細節(jié)上有出入。JavaScript短小精悍,又是在客戶機上執(zhí)行的,大大提高了網(wǎng)頁的瀏覽速度和交互能力。同時它又是專門為制作Web網(wǎng)頁而量身定做的一種簡單的編程語言。JavaScript使網(wǎng)頁增加互動性。JavaScript使有規(guī)律地重復的HTML文段簡化,減少下載時間。JavaScript能及時響應用戶的操作,對提交表單做即時的檢查,無需浪費時間交由CGI驗證。JavaScript的特點是無窮無盡的,只要你有創(chuàng)意。3.6淘寶客淘寶客是指通過互聯(lián)網(wǎng)幫助淘寶賣家推廣商品,并按照成交效果獲得傭金的人或者集體〔可以是個人、、團體、公司。1、組成模式在淘寶客中,有淘寶聯(lián)盟、賣家、淘客以及買家四個角色,他們每個都是不可缺失的一環(huán),如圖所示。圖3.1淘寶聯(lián)盟組成模式〔1淘寶聯(lián)盟：一個推廣平臺,幫助賣家推廣產(chǎn)品；幫助淘客賺取利潤,每筆推廣的交易抽取10%的服務費用。〔2賣家：傭金支出者,他們提供自己需要推廣的商品到淘寶聯(lián)盟,并設置每賣出一個產(chǎn)品愿意支付的傭金?！?淘寶客：傭金賺取者,他們在淘寶聯(lián)盟中找到賣家發(fā)布的產(chǎn)品,并且推廣出去,當有買家通過自己的推廣成交后,那么就能夠賺到賣家提供的傭金〔其中一部分需要作為淘寶聯(lián)盟的服務費。〔4買家：就是單純的購買者。2、發(fā)展歷程2009年1月12日起,國網(wǎng)絡營銷平臺"淘客推廣平臺"正式更名為淘寶客,意味著大淘寶戰(zhàn)略實施后,原淘客推廣平臺與淘寶交易平臺的進一步整合的完成！2010年3月19日消息,基于淘寶客的"淘寶聯(lián)盟"已悄然成型,淘寶網(wǎng)將在近日針對中小站長以及網(wǎng)絡合作伙伴推出這一平臺。所有用戶都可以自由申請加入淘寶聯(lián)盟,當通過注冊申請后,即可成為一名"淘寶客"。目前淘寶客的推廣是一種按成交計費的推廣模式,淘寶客只要從淘寶客推廣專區(qū)獲取商品代碼,任何買家〔包括您自己經(jīng)過您的推廣〔、個人,博客或者社區(qū)發(fā)的帖子進入淘寶賣家店鋪完成購買后,就可得到由賣家支付的傭金。3、具體形式淘寶客推廣目前主要可以分成如下2大類：〔1擁有獨立平臺的專業(yè)淘寶客：這類淘寶客精通技術(shù),搭建專業(yè)的平臺,如淘寶客返利〔惠集網(wǎng),返利,QQ等、獨立博客、商品導購平臺、用戶分享〔美麗說等來吸引客戶,賺取一定的傭金?！?自由的淘寶客：這類淘寶客沒有固定的推廣方式,不管技術(shù)還是實力都不是很雄厚,主要論壇、博客、SNS平臺,或者微博、、Q群等作為推廣方式。很適合大眾新手。第四章總體規(guī)劃隨著互聯(lián)網(wǎng)的普及和發(fā)展,電子商務成為企業(yè)和商家的最終選擇,它具有開放性、國際性、實時性、互動性和低成本的特點,越來越受到企業(yè)的青睞。而企業(yè)要實現(xiàn)電子商務活動則必須依賴于電子商務。所謂電子商務是企業(yè)開展電子商務的基礎(chǔ)設施和信息平臺,是實施電子商務的公司或商家與服務對象的交互頁面,是電子商務系統(tǒng)運轉(zhuǎn)的承擔者和表現(xiàn)者。無論是什么樣的企業(yè),電子商務都是企業(yè)在互聯(lián)網(wǎng)平臺上與客戶交流的一個窗口,是買賣雙方信息交流與傳遞的渠道,是企業(yè)宣傳其形象,展示其產(chǎn)品與服務的平臺。電子商務的設計是否合理,功能是否齊全,用戶使用是否方便,安全是否得到保障是企業(yè)實現(xiàn)電子商務成敗的關(guān)鍵。4.1首頁設計首頁設計是一個成功與否的關(guān)鍵。是否能夠吸引瀏覽者留在站點上,是不是能夠促使瀏覽者繼續(xù)點擊進入,全憑首頁設計的效果。所以,首頁的設計和制作必須高度重視。從根本上說,首頁就是全站容的目錄,也是一個索引。但不能只是簡單地羅列目錄,要設計好一個首頁,必須做好以下幾方面的工作:一是要確定好首頁的功能模塊,如名稱、主菜單、新聞、友情、等;二是要設計好首頁的版面,在功能模塊確定后,要開始設計首頁的版面;三是首頁的容要緊扣主題,不要太過繁雜;四是要確保首頁能夠快速安全訪問;五是首頁的結(jié)構(gòu)要簡單清晰;六是首頁的色彩搭配要合理,不要使用過多的顏色?？傊?首頁的規(guī)劃應該是:主題鮮明而富有特色、容精煉而新穎、結(jié)構(gòu)簡單而清晰、訪問安全而快速、功能完善而易用、布局合理而高雅、色彩鮮明而和諧,具有親和力和吸引力,能夠留住以前的訪問者和不斷吸引新的訪問者。4.2容設計信息容是的核心與靈魂,是最根本的要素。如果說架構(gòu)是骨架,那么容就是血和肉,是瀏覽者了解企業(yè)的關(guān)鍵。在確定容時,第一,要保證的容要新穎、精煉、專業(yè)、準確、真實;第二,雖然圖像、聲音和視頻信息能夠比普通文本提供更豐富和更直接的信息,產(chǎn)生更大的吸引力,但由于目前網(wǎng)絡速度的限制文本字符可提供較快的瀏覽速度,因此,圖像和多媒體信息的使用要適中。另外減少文件數(shù)量和大小也是必要的。第三,容要及時更新,經(jīng)常維護更新,給用戶提供最新的信息,是增加吸引力的重要手段。4.3功能設計在進行功能設計時,首先要知道的具體容,所以的功能和所提供的容息息相關(guān)。在進行企業(yè)功能設計時應該進行需求分析,功能的設計取決于的目標和規(guī)模,所以在進行功能設計時,首先要確定的目標和規(guī)模,在此基礎(chǔ)上再決定應該具有哪些功能,從而才能符合實際需求。4.4結(jié)構(gòu)設計為了實現(xiàn)信息的有效傳遞,使訪問者方便快速地查找所需要的信息,也為了便于正式運行后的更新和維護,結(jié)構(gòu)設計十分重要。的結(jié)構(gòu)包括的目錄結(jié)構(gòu)和的結(jié)構(gòu)。規(guī)劃合理的目錄結(jié)構(gòu)對于所有者來說,可以在以后的容更新和維護中,節(jié)省大量的時間和精力。目錄結(jié)構(gòu)是一個容易忽略的問題,很多都是未經(jīng)規(guī)劃,隨意創(chuàng)建目錄和子目錄。目錄結(jié)構(gòu)的好壞,對瀏覽者并沒有什么太大的影響,但是對于站點本身的上傳維護、未來的容擴充和移植有著重要的影響。4.5頁面可視化設計頁面可視化設計主要包括頁面組織效果、頁面色調(diào)效果、頁面版式設計、頁面美術(shù)設計等幾方面容。在頁面組織過程中,可以運用對比與調(diào)和、對稱與平衡、節(jié)奏與韻律以及留白等手段。在網(wǎng)頁配色中,還應該注意:一是不要將所有顏色都用到,盡量控制在三種色彩以;二是背景和前景的對比盡量要大,絕對不要用花紋繁復的圖案作背景,以便突出主要文字容。對于版面布局的設計,應當重視如下原則:加強視覺效果,加強文字圖案的可視度和可讀性;統(tǒng)一感的視覺;新鮮和個性是布局的最高境界。4.6風格的整體風格是人們最希望掌握,也是最難以掌握的。其難點在于沒有一個固定的模式可以參照和模仿。如果要設計和普通有區(qū)別的站點,則必須要研究的整體風格。風格是抽象的,是指站點的整體形象給瀏覽者的綜合感受;風格是獨特的,是一個站點不同于其他的地方,或者色彩、或者技術(shù)、或者交互性;風格是有人性的,通過的外表、容、文字和交流,可以概括一個的個性。4.7的欄目和版塊設計設計的中心工作之一,就是設置的欄目和版塊。欄目的實質(zhì)是的大綱索引,索引應該將的主體明確地顯示出來。在制定欄目的時候,要仔細考慮,合理安排。一般的欄目安排要注意以下幾方面:一是緊扣主題;二是設立一個最近更新或指南欄目;三是設定一個可以雙向交流的欄目;四是設計一個下載或常見問題解答欄目。版塊比欄目的概念要大一些,每個版塊都有自己的欄目。例如,網(wǎng)易的站點分新聞、體育、財經(jīng)、娛樂、教育等版塊,每個版塊下面還有各自的主欄目。一般的個人站點容少,只有主欄目就夠了。根據(jù)以上幾點,設計了的整體結(jié)構(gòu)：的前臺頁面包括公司首頁、公司簡介、公司文化、最新動態(tài)、產(chǎn)品展示、蟲害知識、招聘信息、服務承諾、聯(lián)系我們、在線留言等。圖4.1總體結(jié)構(gòu)圖第五章頁面實現(xiàn)有了設計的基礎(chǔ),企業(yè)的需求,技術(shù)的支持等一系列的準備之后就可以開始設計一個了,下面就說說洛楓有害生物防治企業(yè)的頁面實現(xiàn)。5.1功能分析將要做的是一個公司,該公司是一家專業(yè)從事白蟻、蟑螂、老鼠、蚊蠅、螞蟻、跳蚤、臭蟲、蜱等病媒生物防治及產(chǎn)品銷售的專業(yè)PCO公司。因此建設的目的主要有兩個：一是使瀏覽者或潛在的客戶迅速了解公司,這就要求的文字要簡練,盡量減少大篇幅的文字敘述,項目效果圖要精彩,當然網(wǎng)頁的頁面效果也要漂亮,以使瀏覽者或潛在的客戶感覺到公司的實力和品牌；二是使瀏覽者或潛在的客戶迅速了解及熟悉公司的相關(guān)產(chǎn)品。建立公司要有一個清晰的布局。比如說,導航條要不要？很多人說那東西人人在做,就顯得太俗沒個性,難顯示出新潮。但導航條之所以有那么多人在用,是因為它給瀏覽者一個明確的布局,便利人們查找本身所需的信息。從某種角度上說,大家都在用的東西就說明它確實被大家所接受。要清楚做出來是給每一個人普通用戶看的。還要經(jīng)常更新,給人以新意。的前臺頁面包括公司首頁、公司簡介、公司文化、最新動態(tài)、產(chǎn)品展示、蟲害知識、招聘信息、服務承諾、聯(lián)系我們、在線留言等。5.2首頁設計有了基于準備之后的策劃,就可以開始進行頁面設計了,頁面設計主要包括創(chuàng)意、色彩和版式三個方面。創(chuàng)意會使網(wǎng)頁在眾多的競爭對手中脫穎而出；色彩可以使網(wǎng)頁獲得生命的力量；板式則是和用戶溝通的核心,所以這三者缺一不可。一般的都需要這樣一些版塊站名稱、廣告區(qū),導航區(qū)、新聞區(qū)、友情和等版塊。這些版塊又可以稱之為模塊。選擇哪些模塊,實現(xiàn)哪些功能是否需要添加其他模塊都是首頁設計制作時首先需要確定的,下面就開始具體的首頁設計制作工作。1、首頁結(jié)構(gòu)根據(jù)需求可以知道,版面布局采用的是CSS定位、層、和表格等技術(shù),CSS可以很方便地修改網(wǎng)頁的格式、減小網(wǎng)頁的體積、輕松增加網(wǎng)頁的特殊效果,用CSS固定好每個區(qū)域要放置的容后,再附加用層或表格；頁面結(jié)構(gòu)是Logo于整個頁面的頭部,然后是Banner和導航條,中間是網(wǎng)頁的主要容,最底層是。這種結(jié)構(gòu)既美觀又符合人們的瀏覽習慣。圖5.1頁面布局圖2、風格定位打開一個,給用戶留下第一印象的既不是豐富的容,也不是合理的版面布局,而是的色彩。色彩對人的視覺效果非常明顯,一個設計成功與否,在某種程度上取決于色彩的運用和搭配。因為網(wǎng)頁設計屬于一種平面效果設計,在排除立體圖形、動畫效果之外,在平面圖上,色彩的沖擊力是最強的,它很容易給用戶留下深刻的印象。因此,在設計網(wǎng)頁時,必須要高度重視色彩的搭配。本的搭配主色為：白、淡藍、綠、三種顏色。白色代表純潔、純真、樸素、神圣、明快。淡藍色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥。綠色代表心情平靜,心曠神怡,安詳嫻靜,心情很安定、舒適,充分代表了一個企業(yè)應有的氣質(zhì)和形象。給客戶留下深刻的印象。3、頁頭設計的頁頭主要分為兩個部分。一是Logo,logo是一公司的標志圖,直接放置在頭部容器左側(cè),調(diào)整好位置；二是導航條,導航條因為有立體感效果,因此它需要脫離文本流,因此在控制樣式的時候要用定位,相對于文本流的定位。的導航欄目可以讓用戶對的容及信息一目了然。導航分為：公司首頁、公司簡介、公司文化、最新動態(tài)、產(chǎn)品展示、蟲害知識、招聘信息、服務承諾、聯(lián)系我們、在線留言。4、banner設計Banner可以說是企業(yè)網(wǎng)頁中一道美麗的風景線。網(wǎng)頁中的banner信息代表著一個企業(yè)的素質(zhì)和形象,所以應該表現(xiàn)的大氣、端莊而且精細。還更要表現(xiàn)出一個企業(yè)應該有的朝氣和活力。因此banner圖片加文字說明成為首選。實例展示從側(cè)面讓客戶了解到公司的實力。在首頁的版面,先是用Photoshop對模板進行切片,然后用DIV+CSS進行排版。圖5.2banner效果圖5、首頁主信息部分設計根據(jù)瀏覽者在閱讀時經(jīng)常采用從上到下,從左到右的習慣,主體容中,分為三個板塊：左欄：白蟻危害的視頻、聯(lián)系我們；中欄：公司簡介、公司動態(tài)；右欄：蟲害知識、服務項目；下方還有一欄產(chǎn)品展示,這樣能更好地吸引瀏覽者的眼球,同時也體現(xiàn)公司的專業(yè)、能力等。優(yōu)秀案例采用網(wǎng)頁圖片切換的形式展現(xiàn)在首頁中,使整個首頁處于于靜于動的畫面,這種結(jié)構(gòu)既美觀又符合人們的瀏覽習慣。圖5.3首頁主信息部分效果圖6、頁腳頁腳用了表格嵌套,采用了四行布局,第一行是友情,第二行是公司網(wǎng)址,第三行是所有,第四行是流量統(tǒng)計代碼,另外右下角還有一個回到頂部的按鈕。圖5.4底部圖圖5.5首頁整體圖5.3頁設計其他頁面的導航和頁面屬性都是采用首頁的導航和body屬性,左邊部分固定,顯示蟲害知識和聯(lián)系我們兩個板塊。1、公司簡介公司簡介界面介紹了公司基本情況,讓客戶更好的了解公司的產(chǎn)品和服務。效果圖如下圖5.6所示：圖5.6公司簡介效果圖2、公司文化公司文化板塊讓客戶清晰的了解公司的文化,服務信息等等。公司文化是隨著企業(yè)的誕生和發(fā)展而共同生存的,并在企業(yè)中起著巨大的作用,是企業(yè)發(fā)展的能源,一個好的企業(yè)必然有一個有凝聚力的企業(yè)文化伴隨企業(yè)的發(fā)展和壯大。效果圖如下圖5.7所示：圖5.7公司文化效果圖3、最新動態(tài)最新動態(tài)板塊介紹了公司的行業(yè)動態(tài),讓客戶更好的了解公司發(fā)展狀況,發(fā)展前景等,效果圖如下圖5.8所示：圖5.8最新動態(tài)效果圖4、產(chǎn)品展示產(chǎn)品展示頁面用來展示公司所銷售的各種產(chǎn)品,點擊圖片可以進入淘寶旗艦店進行購買,主要是用來產(chǎn)品推介。效果圖如下5.9圖所示：圖5.9產(chǎn)品展示/淘寶店頁面效果圖5、蟲害知識蟲害知識板塊能讓客戶更好的了解各種有害生物的危害和防治方法,從而有助于激進客戶購買公司的各種產(chǎn)品,界面效果如下圖5.10所示：圖5.10蟲害知識效果圖6、招聘信息招聘信息板塊能夠讓客戶知道公司的招聘需要,提供給對本職位感興趣的人一個應聘的機會。的