網(wǎng)站畢業(yè)設計論文的優(yōu)秀文檔

1、網(wǎng)站畢業(yè)設計論文的_優(yōu)秀文檔 湖南現(xiàn)代物流職業(yè)技術學院畢業(yè)設計題 目 洛楓公司網(wǎng)站建設_系 部 物流信息系專 業(yè)電 子 商 務班 級電商1002班 姓 名 喻奇 指導教師 歐陽紅巍2012年12月09日摘 要 隨著計算機、網(wǎng)絡與通訊技術的發(fā)展,internet 在人們的生活、學習和工作的位置越來越重要,通過發(fā)布屬于公司的 web 站點宣傳推廣公司產(chǎn)品或開展公關活動已成為一種趨勢。電子商務的發(fā)展使得企業(yè)管理模式和貿易模式發(fā)生了很大的改變,企業(yè)在發(fā)展和壯大自己的同時也非常的注重其自身信息化和商業(yè)化程度的提高,企業(yè)網(wǎng)站便成為一個企業(yè)展示自我和對外貿易的重要平臺。企業(yè)門戶性網(wǎng)站的建設和管理水平,直接影

2、響企業(yè)的網(wǎng)絡形象,擁有一個設計美觀、功能全面的門戶性網(wǎng)站,已經(jīng)成為企業(yè)網(wǎng)絡化建設的一個重要內容。而web設計的健康發(fā)展依靠web標準的采用,沒有web標準就不會有真正的可訪問性和連貫的設計。不用web標準,就跟不上時代。在這樣的標準時代,人們需要網(wǎng)頁更加容易擴展,適合自動數(shù)據(jù)交換,使其更加規(guī)整。而css,則實現(xiàn)了頁面內容與樣式分離。鑒于web標準,本論文著重對div+css布局與公司網(wǎng)站頁面實現(xiàn)進行了分析;同時根據(jù)公司網(wǎng)站的需求,采用div+css實現(xiàn)了企業(yè)網(wǎng)站網(wǎng)頁的設計,具體實現(xiàn)了公司首頁、公司簡介、公司文化、最新動態(tài)、產(chǎn)品展示、蟲害知識、招聘信息、服務承諾、聯(lián)系我們、在線留言功能,系統(tǒng)功能

3、符合公司網(wǎng)站的需求。【關鍵詞】 企業(yè)網(wǎng)站 網(wǎng)頁設計 網(wǎng)站建設前 言 當今世界已進入信息時代,internet成為21世紀最受關注的行業(yè)之一,它的飛速發(fā)展和全球范圍的普及應用正在給人類生活帶來革命性變化。網(wǎng)絡技術的發(fā)展也取得了巨大的成就,為網(wǎng)站開發(fā)提供了很好的技術支持。網(wǎng)站已經(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è)網(wǎng)站。針

4、對該公司的需求,本課題設計了一個滿足其要求的信息發(fā)布類網(wǎng)站。本網(wǎng)站旨在宣傳公司形象及其產(chǎn)品推介。本網(wǎng)站主要實現(xiàn)以下幾方面功能:企業(yè)宣傳,發(fā)布企業(yè)相關信息,展示企業(yè)品牌形象,展示企業(yè)產(chǎn)品,實現(xiàn)產(chǎn)品推介、在線交流,從而需要對本網(wǎng)站的進行設計和制作。 在網(wǎng)站設計過程中主要是采用dreamweaver制作,通過將6html語言、div+css布局和dreamweaver工具軟件整合應用,結合photoshop軟件進行網(wǎng)站圖片素材處理,從而實現(xiàn)網(wǎng)站的制作和建設。 論文詳細論述了一個基于公司網(wǎng)站開發(fā)的設計過程。在技術上,采用了 dreamweaver網(wǎng)站開發(fā)工具,以 html的超大功能結合 javascr

5、ipt 的客戶端語言,這樣的構造有利于對網(wǎng)站系統(tǒng)開發(fā)。其中,最主要的就是介紹和展示div+css在網(wǎng)頁中的作用和魅力。 本文實現(xiàn)了公司首頁、公司簡介、公司文化、最新動態(tài)、產(chǎn)品展示、蟲害知識、招聘信息、服務承諾、聯(lián)系我們、在線留言功能,系統(tǒng)基本符合公司網(wǎng)站的需求。論文組織如下:首先闡述了該網(wǎng)站建設的研究背景、意義以及網(wǎng)站建設的一般流程及其原則,然后進行網(wǎng)站需求分析,接下來詳細介紹網(wǎng)站設計技術:dreamweaver、photoshop制作工具、html語言、div+css、javascript代碼、淘寶客基本知識,其次介紹了網(wǎng)站總體規(guī)劃以及網(wǎng)站頁面的實現(xiàn)。目錄前 言2第一章 緒論41.1 網(wǎng)站建

6、設的研究背景41.2 網(wǎng)站建設的一般流程及其原則5第二章 網(wǎng)站需求分析82.1 需求分析活動92.2 用戶調查活動92.3 市場調研10第三章 網(wǎng)站設計工具113.1 dreamweaver制作工具113.2 adobe photoshop軟件工具123.3 html語言123.4 div+css133.5 javascript代碼133.6 淘寶客15第四章 網(wǎng)站總體規(guī)劃174.1 網(wǎng)站首頁設計174.2 網(wǎng)站內容設計174.3 網(wǎng)站功能設計184.4 網(wǎng)站結構設計184.5 網(wǎng)站頁面可視化設計184.6 網(wǎng)站風格184.7 網(wǎng)站的欄目和版塊設計19第五章 網(wǎng)站頁面實現(xiàn)205.1 網(wǎng)站功能分

7、析205.2 首頁設計205.3 內頁設計235.4 部分技術實現(xiàn)32總 結35致 謝36參考文獻37第一章 緒論 隨著21世紀的到來,人們更深切地感受到計算機在生活和工作中的作用越來越重要,越來越多的職業(yè)需要具有計算機應用技能型人才。掌握計算機是職業(yè)的需要,更是事業(yè)發(fā)展的需要。網(wǎng)頁設計與制作是計算機能力的具體表現(xiàn),本章主要介紹網(wǎng)站建設的研究背景和網(wǎng)站建設的一般流程及其原則。1.1 網(wǎng)站建設的研究背景 如今,互聯(lián)網(wǎng)對企業(yè)來說已經(jīng)不再是新鮮的事物了,大多數(shù)的企業(yè)都已經(jīng)建立了自己的網(wǎng)站。隨著互聯(lián)網(wǎng)的快速發(fā)展,網(wǎng)絡已成為人們生活的一部分。電子商務、網(wǎng)絡營銷已不再只是被炒做的概念,人們對其的認識也越來

8、越深刻。不僅僅是大企業(yè)需要網(wǎng)站來開展電子商務,中小企業(yè)一樣也迫切需要自己的企業(yè)網(wǎng)站用以實現(xiàn)宣傳和聯(lián)系客戶等許多傳統(tǒng)媒介無法完成的目標。搭建網(wǎng)站模型需要各方面的資訊,而如何在網(wǎng)頁上正確明晰地表達企業(yè)的資訊,使企業(yè)達到建站的目的,對建設好企業(yè)網(wǎng)站是有非常大的意義的。可以說,有正確的建站思路再配合下文所講的具有普遍性的建站原理才能創(chuàng)造出真正的企業(yè)網(wǎng)站,而不是只在技術上苦苦追求完美,堆砌出華麗卻沒有實際意義的工藝品。 電子商務是一種新興的、處于發(fā)展過程中的現(xiàn)代商務方式,從95年來得到了迅速發(fā)展,顯現(xiàn)了巨大的現(xiàn)代商業(yè)價值。1997年歐洲、美國、新加坡等許多國家政府發(fā)表了電子商務發(fā)展綱要,其目的是引導全球

9、電子商務的自由競爭和健康發(fā)展,大力推動電子商務的實踐。本國政府的發(fā)展綱要也將在近期出臺,促進本國企業(yè)適應國際化的發(fā)展、參與國際競爭。有理由相信,在21世紀,電子商務將逐漸成為社會生活的主要方式,也將成為數(shù)字化社會的基礎。 電子商務活動是通過公共計算機通信網(wǎng)絡進行商務活動的現(xiàn)代方式,該方式將突破傳統(tǒng)商務在時間、地域上的限制,成為方便、快捷、安全可靠的新興電子化商務活動模式。電子商務使現(xiàn)代商務活動具有安全、可靠、快速、明確和方便的特點,通過國際互聯(lián)網(wǎng)絡人們可隨時隨地開展電子商務活動。由于電子商務涉及社會、經(jīng)濟、金融、法律以及生活等許多方面,故存在一定的困難和問題。其健康發(fā)展一方面要求人們的工作生活

10、方式、思想觀念和管理方法都將有根本的變革;另一方面國家宏觀控制和管理需要對電子商務進行立法和規(guī)范;再者技術安全上必須完善可靠。電子商務的發(fā)展將逐步改變人們的生活及工作方式,原來面對面談判、紙上交流的管理與商務活動方式逐步變成了由計算機遠距離操作完成的數(shù)字化活動方式。沒有了時間、空間和人為條件上的限制,人們的生活和工作將變得方便、靈活和自如。特別在獲取信息、傳輸信息、各種服務活動、付款、送貨方式等方面將有根本的變化。任何合法組織和公司甚至個人通過在國際互聯(lián)網(wǎng)絡上建立自己的站點都可成為全球化的信息發(fā)布者;信息的獲取具有了廣泛的內容和選擇性;貿易、商務活動中的商品認識、合同談判、交易都通過國際互聯(lián)網(wǎng)

11、信息和網(wǎng)絡軟件完成。企業(yè)行政管理將進入電子化辦公方式,金融服務中的支票、柜臺、保險、投資、企業(yè)銀行業(yè)務和家庭銀行業(yè)務將搬到網(wǎng)絡上進行。數(shù)字化電子貨幣的使用與發(fā)展為人們進行跨地域的商務金融活動提供了方便條件。人類將不可避免地習慣與計算機共存,適應電子商務時代的數(shù)字化生存。電子商務也完全改變了人們當今的商務方式,由于沒有了時間和空間的限制,人們可以在家中處理各種業(yè)務。1.2 網(wǎng)站建設的一般流程及其原則 1、網(wǎng)站建設流程 一個網(wǎng)站的成功與否與網(wǎng)站制作前的規(guī)劃有著極為重要的關系。為使網(wǎng)站能夠達到預期的目的,滿足用戶要求,不僅需要在網(wǎng)站建設過程中與用戶方進行良好的溝通與交流,更重要的是要遵循網(wǎng)站建設流程

12、,只有這樣,才能做到既不浪費時間也能提高效率,又能保證網(wǎng)站的科學性、嚴謹性。一般將網(wǎng)站設計過程分為以下幾個階段: a、對網(wǎng)站需求的分析 首先要明確網(wǎng)站制作的目的和具體要求是什么,進行網(wǎng)站的功能定位,從而確定網(wǎng)站制作類型。 b、根據(jù)需求來規(guī)劃設計 確定網(wǎng)站類型后,在正是建站前需要對網(wǎng)站進行一系列的規(guī)劃與設計。網(wǎng)站規(guī)劃主要包括網(wǎng)站的類型選擇、主題設計、風格設計、內容設計、版面布局設計以及網(wǎng)站策劃書的撰寫等。網(wǎng)站規(guī)劃對網(wǎng)站建設起到計劃和指導作用,對網(wǎng)站的內容和維護起到定位作用。這一環(huán)節(jié)的有無和好壞,不僅直接影響網(wǎng)站的整體效果,而且是網(wǎng)站發(fā)布后能否成功運行的主要因素。 c、確認好設計之后進行美工操作、

13、網(wǎng)站制作 經(jīng)過精心設計的網(wǎng)站規(guī)劃方案最終要通過網(wǎng)頁表現(xiàn)出來,制作網(wǎng)頁是將網(wǎng)站規(guī)劃付諸實施的主要任務。在制作頁面前要考慮到網(wǎng)站的風格和功能,要根據(jù)所建網(wǎng)站的特點做充分準備,使網(wǎng)站的基本格調符合用戶的要求,使網(wǎng)站的功能滿足用戶的使用需求。 2、 網(wǎng)站建設原則 a、網(wǎng)站第一原則: 目的性 任何一個網(wǎng)站,首先必須具有明確的目的和目標群體。網(wǎng)站是面對客戶、供應商、消費者還是全部? 主要目的是為了介紹企業(yè)、宣傳某種產(chǎn)品還是為了試驗電子商務? 如果目的不是唯一的,還應該清楚的列出不同目的的輕重關系。建站包括類型的選擇、內容功能的籌備、界面設計等各個方面都受到目的性的直接影響, 因此目的性是一切原則的基礎。建

14、站的目的應該是經(jīng)過成熟考慮的, 包含幾大要素:目的應該是明確定義的,而不是籠統(tǒng)地說要做一個平臺、 要弄電子商務, 應該清楚主要希望誰來瀏覽,具體要做到哪些內容, 提供怎樣的服務,達到什么樣是效果。在當前的資源環(huán)境下能夠實現(xiàn)的, 而不能脫離了自身的人力、物力、互聯(lián)網(wǎng)基礎以及整個外部環(huán)境等因素盲目制定目標, 尤其是對外部環(huán)境的考慮通常容易被忽略,結果只能成為美好的一廂情愿。如果目標比較龐大,應該充分考慮各部分的輕重關系和實現(xiàn)的難易度, 想要一步登天的做法通常會導致投入過大且缺少頭緒,不如分清主次循序漸進。在充分考慮了目的和目標群體的特點以后, 再來選擇建站類型, 并相應的安排適當?shù)男畔热莺凸δ芊?/p>

15、務。 b、網(wǎng)站第二原則: 專業(yè)性 信息內容應該充分展現(xiàn)企業(yè)的專業(yè)特性對外介紹企業(yè)自身,最主要的目的是向外界介紹企業(yè)的業(yè)務范圍、性質和實力,從而創(chuàng)造更多的商機。在這里包括:應該完整無誤的表述企業(yè)的業(yè)務范圍 產(chǎn)品、服務及主次關系、應該詳細的介紹企業(yè)的地址、性質、聯(lián)系方式、提供企業(yè)的年度報表、則有助于瀏覽者了解企業(yè)的經(jīng)營狀況、方針和實力。 c、網(wǎng)站第三原則: 實用性 網(wǎng)站提供的功能服務應該是切合瀏覽者實際需求,并且符合企業(yè)特點。網(wǎng)站提供的功能服務必須保證質量,包括:每個服務必須有清晰定義的流程,每個步驟需要什么條件、產(chǎn)生什么結果、由誰來操作、如何實現(xiàn)等都應該是清晰無誤的,實現(xiàn)功能服務的程序必須是正確

16、的、健壯的、能夠及時響應的、能夠應付預想的、同時請求服務數(shù)峰值的。需要人工操作的功能服務應該設有常備人員和相應責權制度。用戶操作的每一個步驟完成后,應該被提示當前處于什么狀態(tài)。當功能較多的時候應該清楚的定義相互之間的輕重關系,并在界面上和服務響應上加以體現(xiàn)。 d 、網(wǎng)站第四原則: 層次性 條理清晰的結構,表現(xiàn)為網(wǎng)站的板塊劃分的合理性,這里需要注意:板塊的劃分應該有充分的依據(jù)并且是容易理解的。不同板塊的內容盡量做到?jīng)]有交叉重復內容,共性較多的內容應盡量劃分到同一板塊。在最表層盡量減少劃分的板塊數(shù)量, 通?？刂圃?4 6 之間比較合適。劃分后的結構層次不宜過深, 通常不超5層為佳。在安排層次的時候

17、要充分考慮用戶操作, 比較常用的信息內容、功能服務應該盡量放到更淺的層次以減少用戶點擊次數(shù)。信息內容的獲取和功能服務的過程都應該盡量將所需要進行的步驟控制在 3 5 步以內,不得不需要更多的步驟的時候應該有明確的提示。 e、 網(wǎng)站第五原則: 藝術性 網(wǎng)頁創(chuàng)作本身已經(jīng)成了一種獨特的藝術,要達到吸引眼球的目的,再結合界面設計的相關原理,形成了一種獨特的藝術,這使得企業(yè)網(wǎng)站的設計應該滿足:遵循基本的圖形設計原則,符合基本美學原理和排版原則。對于主題和次要對象的處理符合排版原理。全站的設計作為一個整體, 應該具有整體的一致性。整體視覺效果特點鮮明:頁面版式結構;用色;線條和構圖; 配圖的精細、觀程度;

18、 元素風格;整體氣氛表達;字體選用。整體風格同企業(yè)形象相符合, 適于目標對象的特點。第二章 網(wǎng)站需求分析 網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息的一種方式,是企業(yè)開展電子商務的基礎設施和信息平臺。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡商標”,也是企業(yè)無形資產(chǎn)的組成部分,而網(wǎng)站則是反映企業(yè)形象和文化的重要窗口。 一個網(wǎng)站項目的確立是建立在各種各樣的需求之上的。這種需求往往來自于客戶的實際需求。由于網(wǎng)站需要面對不同層次的用戶,因此網(wǎng)站項目的負責人對用戶需求的理解,在很大程度上決定了此類網(wǎng)站開發(fā)項目的成敗。如何更好地了解、分析、明確用戶需求,并且能夠準確、清晰地以文檔的形式表達給參與項目開發(fā)的每個成員,保證開發(fā)過程按照用戶

19、需求進行,是每個網(wǎng)站開發(fā)項目管理者需要面對的問題。需求分析工作是網(wǎng)站建設中重要的一步,也是決定性的一步。只有通過需求分析,才能把網(wǎng)站功能的總體概念描述為具體的網(wǎng)站功能描述書,從而奠定網(wǎng)站開發(fā)的基礎。需求分析的目的是完整、準確地描述用戶的需求,跟蹤用戶需求的變化,將用戶的需求準確地反映到系統(tǒng)的分析和設計中,并使系統(tǒng)的分析、 設計與用戶的需求保持一致。 長沙市洛楓有害生物防治用品有限公司是一家專業(yè)從事白蟻、蟑螂、老鼠、蚊蠅、螞蟻、跳蚤、臭蟲、蜱等病媒生物防治及產(chǎn)品銷售的專業(yè)公司。該公司本著 “以人為本、誠信服務、口碑相傳、永續(xù)經(jīng)營”的服務原則,推崇“誠信、高效、安全、環(huán)?！钡目叵x理念,以改善和保護

20、人們的生活環(huán)境、自然環(huán)境為目的。 該公司為拓展網(wǎng)絡銷售市場,實施公司品牌宣傳,擬建立一個以公司宣傳和產(chǎn)品推廣為主要目的的企業(yè)網(wǎng)站。針對該公司的需求,本課題設計了一個滿足其要求的信息發(fā)布類網(wǎng)站。本網(wǎng)站旨在宣傳公司形象及其產(chǎn)品推介。本網(wǎng)站主要實現(xiàn)以下幾方面功能:企業(yè)宣傳,發(fā)布企業(yè)相關信息,展示企業(yè)品牌形象,展示企業(yè)產(chǎn)品,實現(xiàn)產(chǎn)品推介、在線交流。與此同時借助了淘寶客的使用,點擊產(chǎn)品展示中的圖片,就可以鏈接到淘寶旗艦店,從而可以進行產(chǎn)品的購買。 在網(wǎng)站設計過程中主要是采用dreamweaver制作,通過將html語言、div+css布局、javascript代碼,結合photoshop軟件進行網(wǎng)站圖片

21、素材處理,從而實現(xiàn)網(wǎng)站的制作和建設。2.1 需求分析活動 需求分析活動其實本來就是一個和客戶交流,引導客戶能夠正確的將自己的實際需求用較為適當?shù)募夹g語言進行表達,以明確項目的實現(xiàn)。這個過程中也同時包含了對要建立的網(wǎng)站基本功能和模塊的確立和策劃活動。活動包括以下幾個部分: 1、與公司的負責人員進行需求分析討論。 2、編寫網(wǎng)站開發(fā)項目描述書(初稿) 文檔。 3、網(wǎng)站開發(fā)項目描述書(初稿) 進行反復討論和修改,確定網(wǎng)站開發(fā)項目描述書正式文檔。 4、需求分析中需要編寫的文檔主要是網(wǎng)站開發(fā)項目描述書,它基本上是整個需求分析活動的結果性文檔,也是開發(fā)工程中項目成員主要可供參考的文檔。為了更加清楚的描述網(wǎng)站

22、開發(fā)項目描述書,往往還需要編寫用戶調查報告和市場調研報告文檔來輔助說明。各種文檔最好有一定的規(guī)范和固定格式,以便增加可閱讀性和方便閱讀者快速理解文檔內容 。 為了建設符合公司要求的企業(yè)網(wǎng)站,本人去了公司進行了公司資料的收集,和相關人員進行了溝通,了解了其網(wǎng)站需實現(xiàn)的功能,并在次基礎上對于網(wǎng)站的定位達成了共識。2.2 用戶調查活動 在需求分析的過程中,往往有很多模棱兩可的用戶需求,這個時候就需要調查用戶的實際情況,明確用戶需求。一個比較理想化的用戶調查活動需要用戶的充分配合,而且還有可能需要對調查對象進行必要的培訓。所以調查的計劃安排如時間、地點、參加人員、調查內容,都需要雙方的共同認可。調查的

23、形式可以是:發(fā)需求調查表、開需求調查座談會或者現(xiàn)場調研 。 調查的內容主要如下: 1、網(wǎng)站當前以及日后可能出現(xiàn)的功能需求。 2、客戶對網(wǎng)站的性能的要求和可靠性的要求。 3、確定網(wǎng)站維護的要求。 4、網(wǎng)站的實際運行環(huán)境。 5、網(wǎng)站頁面總體風格以及美工效果。 6、主頁面和次級頁面數(shù)量,是否需要多種語言版本、內容管理及錄入任的分配等。 7、各種頁面特殊效果及其數(shù)量。 8、項目完成時間及進度。 9、明確項目完成后的維護責任。 調查結束以后,需要編寫用戶調查報告 。編寫用戶調查報告的要點是: 1、調查概要說明:網(wǎng)站項目的名稱;用戶單位;參與調查人員;調查開始終止的時間;調查的工作安排。 2、調查內容說明

24、:用戶的基本情況;用戶的主要業(yè)務;信息化建設現(xiàn)狀;網(wǎng)站當前和將來潛在的功能需求、需求、可靠性需求、實際運行環(huán)境;用戶對新網(wǎng)站的期望等。 3、調查資料匯編:將調查得到的資料分類匯總(如調查問卷,會議記錄等等)。 4、界面設計。2.3 市場調研 市場調研活動內容通過市場調研活動,清晰的分析相似網(wǎng)站的性能和運行情況。可以使本人更加清楚的構想出網(wǎng)站的大體架構。但是由于實際中時間、經(jīng)費、公司能力所限,市場調研覆蓋的范圍有一定的局限性,在調研市場同類網(wǎng)站的時候,應盡可能調研到所有比較出名和優(yōu)秀的同類網(wǎng)站。應該了解同類網(wǎng)站的使用環(huán)境與用戶的差異點、類似點,同類產(chǎn)品所定義的用戶詳細需求。市場調研的重點應該放在

25、主要競爭對手的作品或類似網(wǎng)站作品的有關信息上。 市場調研可以包括下列內容: 1 、市場中同類網(wǎng)站作品的確定。 2、調研作品的使用范圍和訪問人群。 3、調研產(chǎn)品的功能設計(主要模塊構成,特色功能,性能情況等等)。 4、簡單評價所調研的網(wǎng)站情況。調研的目的是明確并且引導用戶需求。對市場同類產(chǎn)品調研結束后,應該撰寫市場調研報告 。 第三章 網(wǎng)站設計工具3.1 dreamweaver制作工具 dreamweaver是在網(wǎng)頁設計與制作領域中用戶最多、應用最廣、功能最強大的軟件,隨著dreamweaver 8的發(fā)布,更堅定dreamweaver在該領域的地位。它集網(wǎng)頁設計、網(wǎng)站開發(fā)和站點管理功能于一身,具

26、有可視化、支持多平臺和跨瀏覽器的特性,是目前網(wǎng)站設計、開發(fā)、制作的首選工具。 1、靈活的編寫方式dreamweaver具有靈活編寫網(wǎng)頁的特點,不但將世界一流水平的“設計”和“代碼”編輯器合二為一,而且在設計窗口中還精化了源代碼,能幫助用戶按工作需要定制自己的用戶界面。 2、可視化編輯界面dreamweaver是一種所見即所得的html編輯器,可實現(xiàn)頁面元素的插入和生成?；蛞暬庉嫮h(huán)境大量減少了代碼的編寫,同時亦保證了其專業(yè)性和兼容性,并且可以對內部的html編輯器和任何第三方的html編輯器進行實時的訪問。無論用戶習慣手工輸入html源代碼還是使用可視化的編輯界面,dreamweaver都能提

27、供便捷的方式使用戶設計網(wǎng)頁和管理網(wǎng)站變得更容易。 3、功能更多的css支持?css可視化設計、css檢查工具 4、動態(tài)跨瀏覽器驗證當保存時系統(tǒng)自動檢查當前文檔的跨瀏覽器有效性,可以指定何種瀏覽器為測試用瀏覽器,同時系統(tǒng)自動檢驗以確定頁面有沒有目標瀏覽器不支持的tags或css結構。動態(tài)跨瀏覽器有效性檢查功能可以自動核對tags和css規(guī)則是否適應目前的主瀏覽器。 5、強大的web站點管理功能 6、內建的圖形編輯引擎 7、dreamweaver的集成特性dreamweaver 8、繼承了fireworks、flash和shockwave的集成特性,可以在這些web創(chuàng)作工具之間自由地切換,輕松地創(chuàng)

28、建美觀實用的網(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.2 adobe photoshop軟件工具 photoshop 8.0是目前

29、最流行的圖形、圖像編輯設計軟件,在數(shù)碼影像處理、圖像編輯合成、廣告設計、封面設計、美術繪畫、網(wǎng)頁設計等領域都被廣泛地應用。 1、文字處理更加方便 2、增加的圖層集使圖層管理更有序。 3、新增圖像功能:圖像的剪切和剪裁更加方便。 4、將所有工具的選項板改進為工具選項欄放置在工作區(qū)頂部,方便先項參數(shù)的設置。 5、為了更方便地用路徑繪畫,改進增加了幾何形狀工具,通過選擇工具的不同工作模式,可創(chuàng)建路徑、幾何形狀或幾何填充區(qū),使得矢量繪圖功能得到了加強。3.3 html語言 html(hypertext mark-up language)即超文本標記語言或超文本鏈接標示語言,是目前網(wǎng)絡上應用最為廣泛的語

30、言,也是構成網(wǎng)頁文檔的主要語言。html文本是由html命令組成的描述性文本,html命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。html的結構包括頭部(head)、主體(body)兩大部分,其中頭部描述瀏覽器所需的信息,而主體則包含所要說明的具體內容。 html文檔制作不是很復雜,且功能強大,支持不同數(shù)據(jù)格式的文件鑲入,這也是盛行的原因之一,其主要特點如下: 1、簡易性,html版本升級采用超集方式,從而更加靈活方便。 2、可擴展性,html語言的廣泛應用帶來了加強功能,增加標識符等要求,html采取子類元素的方式,為系統(tǒng)擴展帶來保證。 3、平臺無關性。雖然pc機大行其道,但使用mac

31、等其他機器的大有人在,html可以使用在廣泛的平臺上,這也是盛行的另一個原因。 3.4 div+css div+css是網(wǎng)站標準中常用術語之一,div+css 是一種網(wǎng)頁的布局方法,這一種網(wǎng)頁布局方法有別于傳統(tǒng)的html網(wǎng)頁設計語言中的表格定位方式,真正地達到了w3c內容與表現(xiàn)相分離。html語言自html4.01以來,不再發(fā)布新版本,原因就在于html語言正變得越來越復雜化、專用化。xhtml語言是一種可以將html語言標準化,用xhtml語言重寫后的html頁面可以應用許多xml應用技術。使得網(wǎng)頁更加容易擴展,適合自動數(shù)據(jù)交換,并且更加規(guī)整。在xhtml網(wǎng)站設計標準中,不再使用表格定位技術

32、,而是采用div+css的方式實現(xiàn)各種定位。以下是div+css的特點簡介: 1、 符合w3c標準。微軟等公司均為w3c支持者。這一點是最重要的,因為這保證您的網(wǎng)站不會因為將來網(wǎng)絡應用的升級而被淘汰。 2、 支持瀏覽器的向后兼容,也就是無論未來的瀏覽器大戰(zhàn),勝利的是ie7或者是火狐,您的網(wǎng)站都能很好的兼容。 3、 搜索引擎更加友好。相對與傳統(tǒng)的table, 采用div+css技術的網(wǎng)頁,對于搜索引擎的收錄更加友好。 4、 樣式的調整更加方便。內容和樣式的分離,使頁面和樣式的調整變得更加方便。 現(xiàn)在yahoo,msn等國際門戶網(wǎng)站,網(wǎng)易,新浪等國內門戶網(wǎng)站,和主流的web2.0網(wǎng)站,均采用div

33、+css的框架模式,更加印證了div+css是大勢所趨。 5、 css的極大優(yōu)勢表現(xiàn)在簡潔的代碼,對于一個大型網(wǎng)站來說,可以節(jié)省大量帶寬,而且眾所周知,搜索引擎喜歡清潔的代碼。 6、 表現(xiàn)和結構分離,在團隊開發(fā)中更容易分工合作而減少相互關聯(lián)性。3.5 javascript代碼 javascript是一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言。同時也是一種廣泛用于客戶端web開發(fā)的腳本語言,常用來給html網(wǎng)頁添加動態(tài)功能,比如響應用戶的各種操作。它最初由網(wǎng)景公司的brendan eich設計,是一種動態(tài)、弱類型、基于原型的語言,內置支持類。javascript是sun公司的注冊商標

34、。ecma國際以javascript為基礎制定了ecmascript標準。javascript也可以用于其他場合,如服務器端編程。完整的javascript實現(xiàn)包含三個部分:ecmascript,文檔對象模型,字節(jié)順序記號。 netscape公司在最初將其腳本語言命名為livescript。在netscape在與sun合作之后將其改名為javascript。javascript最初受java啟發(fā)而開始設計的,目的之一就是“看上去像java”2,因此語法上有類似之處,一些名稱和命名規(guī)范也借自java。但javascript的主要設計原則源自self和scheme3.javascript與java

35、名稱上的近似,是當時網(wǎng)景為了營銷考慮與sun公司達成協(xié)議的結果。為了取得技術優(yōu)勢,微軟推出了jscript來迎戰(zhàn)javascript的腳本語言。為了互用性,ecma國際(前身為歐洲計算機制造商協(xié)會)創(chuàng)建了ecma-262標準(ecmascript)?，F(xiàn)在兩者都屬于ecmascript的實現(xiàn)。盡管javascript作為給非程序人員的腳本語言,而非作為給程序人員的編程語言來推廣和宣傳,但是javascript具有非常豐富的特性。 javascript代碼能夠具有交互性,能夠包含更多活躍的元素,就有必要在網(wǎng)頁中嵌入其它的技術。如:javascript、vbscript、document objec

36、t model(dom,文檔對象模型)、layers和cascading style sheets(css,層疊樣式表),這里主要講javascript。那么javascript是什么東東?javascript就是適應動態(tài)網(wǎng)頁制作的需要而誕生的一種新的編程語言,如今越來越廣泛地使用于internet網(wǎng)頁制作上。javascript是由 netscape公司開發(fā)的一種腳本語言,或者稱為描述語言。在html基礎上,使用javascript可以開發(fā)交互式web網(wǎng)頁。javascript的出現(xiàn)使得網(wǎng)頁和用戶之間實現(xiàn)了一種實時性的、動態(tài)的、交互性的關系,使網(wǎng)頁包含更多活躍的元素和更加精彩的內容。運行用j

37、avascript編寫的程序需要能支持javascript語言的瀏覽器。netscape公司 navigator 3.0以上版本的瀏覽器都能支持javascript程序,微軟公司internet explorer 3.0以上版本的瀏覽器基本上支持javascript。微軟公司還有自己開發(fā)的javascript,稱為jscript。javascript和jscript基本上是相同的,只是在一些細節(jié)上有出入。 javascript短小精悍,又是在客戶機上執(zhí)行的,大大提高了網(wǎng)頁的瀏覽速度和交互能力。 同時它又是專門為制作web網(wǎng)頁而量身定做的一種簡單的編程語言。 javascript 使網(wǎng)頁增加互動

38、性。javascript 使有規(guī)律地重復的html文段簡化,減少下載時間。javascript 能及時響應用戶的操作,對提交表單做即時的檢查,無需浪費時間交由cgi 驗證。javascript 的特點是無窮無盡的,只要你有創(chuàng)意。3.6 淘寶客 淘寶客是指通過互聯(lián)網(wǎng)幫助淘寶賣家推廣商品,并按照成交效果獲得傭金的人或者集體(可以是個人、網(wǎng)站、團體、公司)。 1、組成模式 在淘寶客中,有淘寶聯(lián)盟、賣家、淘客以及買家四個角色,他們每個都是不可缺失的一環(huán),如圖所示。 圖 3.1 淘寶聯(lián)盟組成模式 (1)淘寶聯(lián)盟:一個推廣平臺,幫助賣家推廣產(chǎn)品;幫助淘客賺取利潤,每筆推廣的交易抽取10%的服務費用。 (2

39、)賣家:傭金支出者,他們提供自己需要推廣的商品到淘寶聯(lián)盟,并設置每賣出一個產(chǎn)品愿意支付的傭金。 (3)淘寶客:傭金賺取者,他們在淘寶聯(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)絡合作伙伴推出這一平臺。所有用戶都可以

40、自由申請加入淘寶聯(lián)盟,當通過注冊申請后,即可成為一名“淘寶客”。 目前淘寶客的推廣是一種按成交計費的推廣模式,淘寶客只要從淘寶客推廣專區(qū)獲取商品代碼,任何買家(包括您自己)經(jīng)過您的推廣(鏈接、個人網(wǎng)站,博客或者社區(qū)發(fā)的帖子)進入淘寶賣家店鋪完成購買后,就可得到由賣家支付的傭金。 3、具體形式 淘寶客推廣目前主要可以分成如下2大類: (1)擁有獨立平臺的專業(yè)淘寶客:這類淘寶客精通網(wǎng)站技術,搭建專業(yè)的平臺,如淘寶客返利網(wǎng)站(惠集網(wǎng),返利,等)、獨立博客、商品導購平臺、用戶分享網(wǎng)站(美麗說)等來吸引客戶,賺取一定的傭金。 (2)自由的淘寶客:這類淘寶客沒有固定的推廣方式,不管技術還是實力都不是很雄厚

41、,主要論壇、博客、sns平臺,或者微博、郵件、q群等作為推廣方式。很適合大眾新手。 第四章 網(wǎng)站總體規(guī)劃 隨著互聯(lián)網(wǎng)的普及和發(fā)展, 電子商務成為企業(yè)和商家的最終選擇,它具有開放性、國際性、實時性、互動性和低成本的特點,越來越受到企業(yè)的青睞。而企業(yè)要實現(xiàn)電子商務活動則必須依賴于電子商務網(wǎng)站。所謂電子商務網(wǎng)站是企業(yè)開展電子商務的基礎設施和信息平臺,是實施電子商務的公司或商家與服務對象的交互頁面,是電子商務系統(tǒng)運轉的承擔者和表現(xiàn)者。無論是什么樣的企業(yè),電子商務網(wǎng)站都是企業(yè)在互聯(lián)網(wǎng)平臺上與客戶交流的一個窗口,是買賣雙方信息交流與傳遞的渠道,是企業(yè)宣傳其形象,展示其產(chǎn)品與服務的平臺。電子商務網(wǎng)站的設計是

42、否合理,功能是否齊全,用戶使用是否方便,安全是否得到保障是企業(yè)實現(xiàn)電子商務成敗的關鍵。4.1 網(wǎng)站首頁設計 首頁設計是一個網(wǎng)站成功與否的關鍵。是否能夠吸引瀏覽者留在站點上,是不是能夠促使瀏覽者繼續(xù)點擊進入,全憑首頁設計的效果。所以,首頁的設計和制作必須高度重視。從根本上說,首頁就是全站內容的目錄,也是一個索引。但不能只是簡單地羅列目錄,要設計好一個首頁,必須做好以下幾方面的工作:一是要確定好首頁的功能模塊,如網(wǎng)站名稱、主菜單、新聞、友情鏈接、版權等;二是要設計好首頁的版面,在網(wǎng)站功能模塊確定后,要開始設計首頁的版面;三是首頁的內容要緊扣主題,不要太過繁雜;四是要確保首頁能夠快速安全訪問;五是首

43、頁的結構要簡單清晰;六是首頁的色彩搭配要合理,不要使用過多的顏色?？傊?首頁的規(guī)劃應該是:主題鮮明而富有特色、內容精煉而新穎、結構簡單而清晰、訪問安全而快速、功能完善而易用、 布局合理而高雅、色彩鮮明而和諧,具有親和力和吸引力,能夠留住以前的訪問者和不斷吸引新的訪問者。4.2 網(wǎng)站內容設計 信息內容是網(wǎng)站的核心與靈魂,是網(wǎng)站最根本的要素。如果說網(wǎng)站架構是骨架, 那么網(wǎng)站內容就是血和肉,是瀏覽者了解企業(yè)的關鍵。 在確定網(wǎng)站內容時,第一, 要保證網(wǎng)站的內容要新穎、精煉、專業(yè)、準確、真實; 第二,雖然圖像、聲音和視頻信息能夠比普通文本提供更豐富和更直接的信息,產(chǎn)生更大的吸引力,但由于目前網(wǎng)絡速度的限

44、制文本字符可提供較快的瀏覽速度,因此,圖像和多媒體信息的使用要適中。另外減少文件數(shù)量和大小也是必要的。第三,網(wǎng)站內容要及時更新,經(jīng)常維護更新,給用戶提供最新的信息,是網(wǎng)站增加吸引力的重要手段。4.3 網(wǎng)站功能設計 在進行網(wǎng)站功能設計時,首先要知道網(wǎng)站的具體內容,所以網(wǎng)站的功能和網(wǎng)站所提供的內容息息相關。在進行企業(yè)網(wǎng)站功能設計時應該進行網(wǎng)站需求分析,網(wǎng)站功能的設計取決于網(wǎng)站的目標和規(guī)模,所以在進行網(wǎng)站功能設計時,首先要確定網(wǎng)站的目標和規(guī)模,在此基礎上再決定網(wǎng)站應該具有哪些功能,從而才能符合網(wǎng)站實際需求。4.4 網(wǎng)站結構設計 為了實現(xiàn)信息的有效傳遞,使訪問者方便快速地查找所需要的信息,也為了便于網(wǎng)

45、站正式運行后網(wǎng)站的更新和維護,網(wǎng)站結構設計十分重要。網(wǎng)站的結構包括網(wǎng)站的目錄結構和網(wǎng)站的鏈接結構。規(guī)劃合理的目錄結構對于網(wǎng)站所有者來說,可以在以后的內容更新和維護中,節(jié)省大量的時間和精力。目錄結構是一個容易忽略的問題,很多網(wǎng)站都是未經(jīng)規(guī)劃,隨意創(chuàng)建目錄和子目錄。目錄結構的好壞,對瀏覽者并沒有什么太大的影響,但是對于站點本身的上傳維護、未來的內容擴充和移植有著重要的影響。4.5 網(wǎng)站頁面可視化設計 頁面可視化設計主要包括頁面組織效果、頁面色調效果、頁面版式設計、頁面美術設計等幾方面內容。在頁面組織過程中,可以運用對比與調和、對稱與平衡、節(jié)奏與韻律以及留白等手段。在網(wǎng)頁配色中,還應該注意:一是不要

46、將所有顏色都用到,盡量控制在三種色彩以內;二是背景和前景的對比盡量要大,絕對不要用花紋繁復的圖案作背景,以便突出主要文字內容。對于版面布局的設計,應當重視如下原則:加強視覺效果,加強文字圖案的可視度和可讀性;統(tǒng)一感的視覺;新鮮和個性是布局的最高境界。4.6 網(wǎng)站風格 網(wǎng)站的整體風格是人們最希望掌握,也是最難以掌握的。其難點在于沒有一個固定的模式可以參照和模仿。如果要設計和普通網(wǎng)站有區(qū)別的站點,則必須要研究網(wǎng)站的整體風格。風格是抽象的,是指站點的整體形象給瀏覽者的綜合感受;風格是獨特的,是一個站點不同于其他網(wǎng)站的地方,或者色彩、或者技術、或者交互性; 風格是有人性的,通過網(wǎng)站的外表、內容、文字和

47、交流,可以概括一個網(wǎng)站的個性。4.7 網(wǎng)站的欄目和版塊設計 設計網(wǎng)站的中心工作之一, 就是設置網(wǎng)站的欄目和版塊。欄目的實質是網(wǎng)站的大綱索引,索引應該將網(wǎng)站的主體明確地顯示出來。在制定欄目的時候,要仔細考慮,合理安排。一般的網(wǎng)站欄目安排要注意以下幾方面:一是緊扣主題;二是設立一個最近更新或網(wǎng)站指南欄目; 三是設定一個可以雙向交流的欄目;四是設計一個下載或常見問題解答欄目。版塊比欄目的概念要大一些,每個版塊都有自己的欄目。例如,網(wǎng)易的站點分新聞、體育、財經(jīng)、娛樂、教育等版塊,每個版塊下面還有各自的主欄目。一般的個人站點內容少,只有主欄目就夠了。根據(jù)以上幾點,設計了網(wǎng)站的整體結構:網(wǎng)站的前臺頁面包括

48、公司首頁、公司簡介、公司文化、最新動態(tài)、產(chǎn)品展示、蟲害知識、招聘信息、服務承諾、聯(lián)系我們、在線留言等。圖4.1網(wǎng)站總體結構圖第五章 網(wǎng)站頁面實現(xiàn) 有了網(wǎng)站設計的基礎,企業(yè)網(wǎng)站的需求,技術的支持等一系列的準備之后就可以開始設計一個網(wǎng)站了,下面就說說長沙洛楓有害生物防治有限公司企業(yè)網(wǎng)站的頁面實現(xiàn)。5.1 網(wǎng)站功能分析 將要做的是一個公司網(wǎng)站,該公司是一家專業(yè)從事白蟻、蟑螂、老鼠、蚊蠅、螞蟻、跳蚤、臭蟲、蜱等病媒生物防治及產(chǎn)品銷售的專業(yè) pco公司。因此建設網(wǎng)站的目的主要有兩個:一是使瀏覽者或潛在的客戶迅速了解公司,這就要求網(wǎng)站的文字要簡練,盡量減少大篇幅的文字敘述,項目效果圖要精彩,當然網(wǎng)頁的頁面

49、效果也要漂亮,以使瀏覽者或潛在的客戶感覺到公司的實力和品牌;二是使瀏覽者或潛在的客戶迅速了解及熟悉公司的相關產(chǎn)品。 建立公司網(wǎng)站要有一個清晰的網(wǎng)站布局。比如說,導航條要不要?很多人說那東西人人在做,就顯得太俗沒個性,難顯示出新潮。但導航條之所以有那么多人在用,是因為它給瀏覽者一個明確的布局,便利人們查找本身所需的信息。從某種角度上說,大家都在用的東西就說明它確實被大家所接受。要清楚網(wǎng)站做出來是給每一個人普通用戶看的。網(wǎng)站還要經(jīng)常更新,給人以新意。 網(wǎng)站的前臺頁面包括公司首頁、公司簡介、公司文化、最新動態(tài)、產(chǎn)品展示、蟲害知識、招聘信息、服務承諾、聯(lián)系我們、在線留言等。5.2 首頁設計 有了基于準

50、備之后的網(wǎng)站策劃,就可以開始進行頁面設計了,頁面設計主要包括創(chuàng)意、色彩和版式三個方面。創(chuàng)意會使網(wǎng)頁在眾多的競爭對手中脫穎而出;色彩可以使網(wǎng)頁獲得生命的力量;板式則是和用戶溝通的核心,所以這三者缺一不可。 一般的網(wǎng)站都需要這樣一些版塊站名稱、廣告區(qū),導航區(qū)、新聞區(qū)、友情鏈接和版權等版塊。這些版塊又可以稱之為模塊。選擇哪些模塊,實現(xiàn)哪些功能是否需要添加其他模塊都是首頁設計制作時首先需要確定的,下面就開始具體的首頁設計制作工作。 1、網(wǎng)站首頁結構 根據(jù)需求可以知道,版面布局采用的是 css 定位、層、和表格等技術,css 可以很方便地修改網(wǎng)頁的格式、減小網(wǎng)頁的體積、輕松增加網(wǎng)頁的特殊效果,用 css

51、 固定好每個區(qū)域要放置的內容后,再附加用層或表格;頁面結構是 logo 于整個頁面的頭部, 然后是 banner 和導航條,中間是網(wǎng)頁的主要內容,最底層是版權。 這種結構既美觀又符合人們的瀏覽習慣。 圖 5.1 頁面布局圖 2、風格定位 打開一個網(wǎng)站,給用戶留下第一印象的既不是網(wǎng)站豐富的內容,也不是網(wǎng)站合理的版面布局,而是網(wǎng)站的色彩。色彩對人的視覺效果非常明顯,一個網(wǎng)站設計成功與否,在某種程度上取決于色彩的運用和搭配。因為網(wǎng)頁設計屬于一種平面效果設計,在排除立體圖形、動畫效果之外,在平面圖上,色彩的沖擊力是最強的,它很容易給用戶留下深刻的印象。因此,在設計網(wǎng)頁時,必須要高度重視色彩的搭配。 本

52、網(wǎng)站的搭配主色為:白、淡藍、綠、三種顏色。白色代表純潔、純真、樸素、神圣、明快。淡藍色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥。綠色代表心情平靜,心曠神怡,安詳嫻靜,心情很安定、舒適,充分代表了一個企業(yè)應有的氣質和形象。給客戶留下深刻的印象。 3、頁頭設計 網(wǎng)站的頁頭主要分為兩個部分。一是logo,logo是一張公司的標志圖,直接放置在頭部容器左側,調整好位置;二是導航條,網(wǎng)站導航條因為有立體感效果,因此它需要脫離文本流,因此在控制樣式的時候要用定位,相對于文本流的定位。網(wǎng)站的導航欄目可以讓用戶對網(wǎng)站的內容及信息一目了然。導航分為:公司首頁、公司簡介、公司文化、最新動態(tài)、產(chǎn)品展示、蟲害知識、招聘信息、服務承諾、聯(lián)系我們、在線留言。 4、banner