畢業(yè)設(shè)計制作說明(小型企業(yè)網(wǎng)站設(shè)計)

作品制作說明 課題 小型企業(yè)網(wǎng)站設(shè)計小型企業(yè)網(wǎng)站設(shè)計 學(xué)學(xué) 院院電子信息工程學(xué)院電子信息工程學(xué)院 專業(yè) 方向 專業(yè) 方向 計算機(jī)應(yīng)用技術(shù)專業(yè) 信息管理方向 計算機(jī)應(yīng)用技術(shù)專業(yè) 信息管理方向 班班 級級微機(jī)微機(jī) 094094 學(xué)學(xué) 號號 姓姓 名名 完成日期完成日期20132013 年年 1212 月月 9 9 日日 指導(dǎo)教師指導(dǎo)教師 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 1 小型企業(yè)網(wǎng)站設(shè)計 作品簡介 21 世紀(jì)將是電子商務(wù)飛速發(fā)展的時代 越來越多的企業(yè)建立了自己的網(wǎng)站 越來 越多的人開始習(xí)慣從互聯(lián)網(wǎng)上獲取各種各樣的信息 尤其是利用互聯(lián)網(wǎng)來尋覓各種商 業(yè)機(jī)會早已成為眾多商業(yè)贏家的首選 網(wǎng)絡(luò)可以給企業(yè)不分地域 不分國別的大量客 戶 帶來無限商機(jī) 為了獲得本行業(yè)的領(lǐng)先地位 抓住不斷涌現(xiàn)的機(jī)會 企業(yè)建立一 個具有特色的 集多功能為一體的企業(yè)網(wǎng)站就顯得十分必要了 本網(wǎng)站通過互聯(lián)網(wǎng)向社會展示自己的網(wǎng)站 從而吸引投資者前來投資 擴(kuò)大企業(yè) 品牌知名度 增加企業(yè)的綜合競爭力 從而獲得更多的商業(yè)利潤 本網(wǎng)站主要由首頁 企業(yè)介紹 產(chǎn)品展示 新聞中心 家紡加盟 人才招聘 聯(lián) 系我們七大模塊組成 首頁主要展示了企業(yè)的情況 新聞中心 產(chǎn)品展示等 以黑色作為企業(yè)網(wǎng)站的背 景色 顯得企業(yè)成熟穩(wěn)重 值得投資者信賴 企業(yè) logo 由英文 Bluesky 和中文組 成 藍(lán)天家紡 以藍(lán)色為底色 顯示了藍(lán)天家紡擁有如天空廣闊般的胸懷 企業(yè)介紹主要企業(yè)的發(fā)展歷程和主要經(jīng)營的項(xiàng)目 讓投資者更進(jìn)一步的的了解我 們的網(wǎng)站 產(chǎn)品展示主要向大眾展示我們企業(yè)的產(chǎn)品 讓顧客能夠深入了解我們產(chǎn)品的特點(diǎn) 和優(yōu)勢 從而對我們的產(chǎn)品產(chǎn)生信心 購買我們的產(chǎn)品 新聞中心主要向客戶展示我們企業(yè)最新的企業(yè)動態(tài) 讓客戶了解我們企業(yè)最新的 情況 展示企業(yè)文化 拉近客戶與企業(yè)的距離 讓客戶感覺企業(yè)就在他的身邊 家紡加盟主要向客戶介紹成為企業(yè)經(jīng)銷商的要求和具體流程 并提供了企業(yè)的聯(lián) 系方式 人才招聘主要面向社會向各界精英提供一個成為我們企業(yè)人才的平臺 為企業(yè)招 賢納士 源源不斷為企業(yè)輸送新鮮血液 聯(lián)系我們主要給企業(yè)和客戶提供一座溝通的橋梁 客戶和游客如果對我們企業(yè)有 任何意見和建議都可以通過留言的方式聯(lián)系我們 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 2 一個界面友好 互動性強(qiáng)的頁面往往能在企業(yè)推廣中起到事半功倍的效果 本網(wǎng)站 恰恰也遵循這一原則 明確建立網(wǎng)站的目標(biāo)和用戶需求 企業(yè)網(wǎng)站的設(shè)計是展現(xiàn)企業(yè)形象 介紹產(chǎn)品和服務(wù) 體現(xiàn)企業(yè)發(fā)展戰(zhàn)略的重要途 徑 因此必須明確設(shè)計站點(diǎn)的目的和用戶需求 從而做出切實(shí)可行的設(shè)計計劃 要根 據(jù)消費(fèi)者的需求 市場的狀況 企業(yè)自身的情況等進(jìn)行綜合分析 牢記以消費(fèi)者為中 心 而不是以美術(shù)為中心進(jìn)行設(shè)計規(guī)劃 在設(shè)計規(guī)劃之初同樣考慮 建設(shè)網(wǎng)站的目的 是什么 為誰提供服務(wù)和產(chǎn)品 企業(yè)能提供什么樣的產(chǎn)品和服務(wù) 網(wǎng)站的客戶的特點(diǎn)是什 么 企業(yè)產(chǎn)品和服務(wù)適合什么樣的表現(xiàn)方式 網(wǎng)頁形式與內(nèi)容相統(tǒng)一 要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu) 形式語言必須符合頁面的 內(nèi)容 體現(xiàn)內(nèi)容的豐富含義 運(yùn)用對比與調(diào)和 對稱與平衡 節(jié)奏與韻律以及留白等 手段 通過空間 文字 圖形之間的相互關(guān)系建立整體的均衡狀態(tài) 產(chǎn)生和諧的美感 如對稱原則在頁面設(shè)計中 它的均衡有時會使頁面顯得呆板 但如果加入一些富有動 感的文字 圖案 或采用夸張的手法來表現(xiàn)內(nèi)容往往會達(dá)到比較好的效果 點(diǎn) 線 面作為視覺語言中的基本元素 要使用點(diǎn) 線 面的互相穿插 互相襯托 互相補(bǔ)充 構(gòu)成最佳的頁面效果 網(wǎng)頁設(shè)計中點(diǎn) 線 面的運(yùn)用并不是孤立的 很多時候都需要 將它們結(jié)合起來 表達(dá)完美的設(shè)計意境 多媒體功能的利用 網(wǎng)絡(luò)資源的優(yōu)勢之一是多媒體功能 要吸引瀏覽者注意力 頁面的內(nèi)容可以用三 維動畫 FLASH 等來表現(xiàn) 但要注意頁面加載的速度 本網(wǎng)站主要運(yùn)用了 Dreamwaver Access fireworks 等軟件 使用了 ASP 動態(tài)網(wǎng)頁 技術(shù) Access 作為后臺數(shù)據(jù)庫 制作了一個小型的企業(yè)網(wǎng)站 實(shí)現(xiàn)了企業(yè)網(wǎng)站的動態(tài) 交互的基本功能 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 3 1 1 開發(fā)工具介紹開發(fā)工具介紹 本網(wǎng)站主要使用了 Macromedia Dreamweaver8 Macromedia fireworks8 和 Access 2003 等軟件 Dreamweaver 與其他腳本語言組合使用提供各種面向?qū)ο蟮拈_發(fā)工具 能較好的完成網(wǎng)頁的設(shè)計 布局及 ASP 程序 利用 Access 的方便性 快捷性來建設(shè)數(shù) 據(jù)庫 1 11 1 MacromediaMacromedia DreamweaverDreamweaver 8 8 介紹介紹 Macromedia Dreamweaver8 是由 macromedia 公司設(shè)計開發(fā)的一款可視化的網(wǎng)頁設(shè) 計和網(wǎng)站管理工具 支持最新的 Web 技術(shù) 包含 HTML 檢查 HTML 格式控制 HTML 格 式化選項(xiàng) 可視化網(wǎng)頁設(shè)計 圖像編輯 全局查找替換 全 FTP 功能 處理 Flash 等 富媒體格式和動態(tài) HTML 基于團(tuán)隊的 Web 創(chuàng)作 1 21 2 MacromediaMacromedia fireworksfireworks 8 8 介紹介紹 Fireworks 是 Macromedia 公司發(fā)布的一款專為網(wǎng)絡(luò)圖形設(shè)計的圖形編輯軟件 它大大簡化了網(wǎng)絡(luò)圖形設(shè)計的工作難度 無論是專業(yè)設(shè)計家還是業(yè)余愛好者 使用 Fireworks 都不僅可以輕松地制作出十分動感的GIF 動畫 還可以輕易地完成大圖 切割 動態(tài)按鈕 動態(tài)翻轉(zhuǎn)圖等 因此 對于輔助網(wǎng)頁編輯來說 Fireworks 將 是最大的功臣 1 1 3 3 MicrosoftMicrosoft OfficeOffice AccessAccess 介紹介紹 Microsoft Office Access 是由微軟發(fā)布的關(guān)聯(lián)式數(shù)據(jù)庫管理系統(tǒng) 它結(jié)合了 Microsoft Jet Database Engine 和 圖形用戶界面兩項(xiàng)特點(diǎn) 是 Microsoft Office 的系統(tǒng)程式之一 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 4 2 2 IISIIS 的安裝與配置的安裝與配置 要實(shí)現(xiàn)所建的網(wǎng)站的發(fā)布 就必須建立 IIS 互聯(lián)網(wǎng)信息服務(wù) 安裝配置完成 IIS 后在 瀏覽器地址欄中輸入 127 0 0 1 即可實(shí)現(xiàn)網(wǎng)頁的瀏覽 2 12 1 安裝安裝 IISIIS 打開 控制面板 然后單擊啟動 程序和功能 單擊打開 打開或關(guān)閉 Windows 功能 選中 Internet 信息服務(wù) 如圖 2 1 所示 圖 2 1 安裝 IIS 單擊 完成 等待幾分鐘后完成 IIS 的安裝 2 22 2 IISIIS 的配置的配置 右擊 計算機(jī) 單擊 管理 服務(wù)和應(yīng)用程序 Internet 信息服務(wù)管 理器 網(wǎng)站 如圖 2 2 所示 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 5 圖 2 2 配置 IIS 右擊 default web site 單擊 高級設(shè)置 如圖 2 3 設(shè)置 單擊 確定 完成 IIS 配置 圖 2 3 IIS 配置 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 6 3 3 主頁的設(shè)計主頁的設(shè)計 本網(wǎng)站主頁由 logo 與導(dǎo)航欄 正文內(nèi)容和版權(quán)內(nèi)容三大部分組成 3 13 1 logologo 與導(dǎo)航欄與導(dǎo)航欄 本網(wǎng)站 logo 由本人利用 Fireworks 制作完成 企業(yè) logo 由英文 Bluesky 和中 文組成 藍(lán)天家紡 以藍(lán)色為底色 顯示了藍(lán)天家紡擁有如天空廣闊般的胸懷 Logo 與導(dǎo)航欄如圖 3 1 所示 圖 3 1 logo 與導(dǎo)航欄 3 23 2 正文內(nèi)容正文內(nèi)容 正文部分由新聞?wù)故?產(chǎn)品展示 家紡加盟三部分組成 為瀏覽者展示了企也的 最近動態(tài) 了解了企業(yè)的主要產(chǎn)品等一系列信息 正文部分如圖 3 2 所示 圖 3 2 正文內(nèi)容 3 33 3 版權(quán)部分版權(quán)部分 在網(wǎng)頁的底部插入如圖 3 3 所示的版權(quán)部分 版權(quán)部分由企業(yè)的電話 傳真 郵 箱組成 體現(xiàn)了一個網(wǎng)站的完整性 圖 3 3 版權(quán)部分 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 7 4 4 關(guān)于藍(lán)天關(guān)于藍(lán)天 關(guān)于藍(lán)天頁面主要向?yàn)g覽者介紹企業(yè)的發(fā)展歷程 以及企業(yè)的主營產(chǎn)品和企業(yè)產(chǎn) 品的設(shè)計理念 通過應(yīng)用已經(jīng)建立好的模板構(gòu)成頁面的主體框架 然后再插入層 在 層里輸入介紹企業(yè)的文本 見附圖 附圖 關(guān)于藍(lán)天 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 8 5 5 家紡產(chǎn)品家紡產(chǎn)品 產(chǎn)品展示主要向大眾展示我們企業(yè)的產(chǎn)品 讓顧客能夠深入了解我們產(chǎn)品的特點(diǎn) 和優(yōu)勢 從而對我們的產(chǎn)品產(chǎn)生信心 購買我們的產(chǎn)品 通過已建立好的模板建立頁 面的大體框架 通過插入層來插入圖片 如圖 5 1 5 2 所示 圖 5 1 家紡產(chǎn)品展示 圖 5 2 家紡產(chǎn)品 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 9 6 6 新聞中心新聞中心 新聞中心主要向客戶展示我們企業(yè)最新的企業(yè)動態(tài) 讓客戶了解我們企業(yè)最新的 情 況 展示企業(yè)文化 拉近客戶與企業(yè)的距離 通過已建立好的模板建立頁面的大體框 架 新建幾個層 在層中插入圖片和文本 如圖 6 1 所示 圖 6 1 新聞中心 新聞頁面主要由圖片和文字組成 通過應(yīng)用建立好的模版 完成網(wǎng)頁大體框架的 建設(shè) 再插入幾個層來插入圖片和文本 如圖 6 2 所示 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 10 圖 6 2 新聞頁面 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 11 7 7 家紡加盟家紡加盟 家紡加盟主要向客戶介紹成為企業(yè)經(jīng)銷商的要求和具體流程 并提供了企業(yè)的聯(lián) 系方式 通過已建立好的模板建立頁面的大體框架 新建幾個層 在層中插入圖片和 文本 見附圖 附圖 家紡加盟 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 12 8 8 精英人才精英人才 人才招聘主要面向社會向各界精英提供一個成為我們企業(yè)人才的平臺 為企業(yè)招 賢納士 源源不斷為企業(yè)輸送新鮮血液 通過已建立好的模板建立頁面的大體框架 新建幾個層 在層中插入圖片和文本 見附圖 附圖 精英人才 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 13 9 9 留言板的實(shí)現(xiàn)和顯示留言板的實(shí)現(xiàn)和顯示 留言板主要給企業(yè)和客戶提供一座溝通的橋梁 客戶和游客如果對我們企業(yè)有任 何意見和建議都可以通過留言的方式聯(lián)系我們 企業(yè)會認(rèn)真聽取這些要求和建議 從 而改正企業(yè)發(fā)展過程中的不足 留言板主要包括留言頁面 liuyan asp 和留言顯示頁面 liuyanxianshi asp 數(shù)據(jù)庫 liuyan mdb 用來存儲留言信息 9 19 1 留言板的實(shí)現(xiàn)留言板的實(shí)現(xiàn) 通過應(yīng)用已經(jīng)建立好的模板建立頁面的主要框架 然后在頁面中插入一個 686 326 的層 在層里面插入一個 9 行 4 列的表格 在表格中輸入您的姓名 聯(lián)系電話等信息 如圖 9 1 如示 圖 9 1 留言板頁面 在表格最下面插入 表單 按鈕 提交 動作為提交表單 執(zhí)行菜單欄 窗 口 服務(wù)器 命令 打開 服務(wù)器命令 面板 單擊 按鈕 選擇 插入記 錄 命令 則打開 輸入記錄對話框 進(jìn)行如圖 9 2 設(shè)置 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 14 圖 9 2 插入記錄 建立數(shù)據(jù)庫連接 執(zhí)行菜單欄 窗口 數(shù)據(jù)庫 命令 打開 數(shù)據(jù)庫 面板 單擊該對話框中的 按鈕 選擇 數(shù)據(jù)源名稱 DNS 命令 打開 數(shù)據(jù)源名稱 DNS 進(jìn)行如圖 9 3 進(jìn)行設(shè)置 圖 9 3 數(shù)據(jù)庫連接 9 29 2 建立建立 liuyan mdbliuyan mdb 數(shù)據(jù)庫數(shù)據(jù)庫 數(shù)據(jù)庫用來存儲留言信息 通過 ASP 實(shí)現(xiàn)與網(wǎng)頁連接 數(shù)據(jù)庫結(jié)構(gòu)設(shè)計如圖 9 4 所示 圖 9 4 數(shù)據(jù)庫設(shè)置 9 39 3 留言板的實(shí)現(xiàn)留言板的實(shí)現(xiàn) 此動態(tài)頁面主要實(shí)現(xiàn)留言的實(shí)現(xiàn) 通過應(yīng)用已經(jīng)建立好的模板建立頁面的主要框 架 然后在頁面中插入一個 678 409 的層 在層里面插入一個 8 行 2 列的表格 在表 格中輸入游客姓名 聯(lián)系電話等信息 執(zhí)行菜單欄上的 窗口 綁定 命令 打 開 綁定 面板 單擊該對話框中的 按鈕 選擇 記錄集查詢命令 命令 打開 記錄集 對話框 如圖 9 5 設(shè)置成如圖 9 6 如示 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 15 圖 9 5 記錄集 圖 9 6 留言顯示設(shè)置 南通職業(yè)大學(xué)電子信息工程學(xué)院作品制作說明 16 通過本次專題網(wǎng)站的制作自己對 Dreamweaver 有了進(jìn)一步的深入了解 覺得自己 學(xué)到了許多知識 在制作網(wǎng)站技術(shù)上也有了一定的提高 滿懷信心的開始了本次的項(xiàng)目設(shè)計 在設(shè)計的過程中真的是問題不斷 大大小小 的問題全有 不過我并沒有放棄 通過了自己的努力學(xué)習(xí)以及向老師同學(xué)請教 幾乎 都一一解決了這些問題 有句話說得好 問題并不可怕 可怕的是你在遇到這些問題 時選擇了放棄 通過不斷地學(xué)習(xí) 不斷地努力 在制作網(wǎng)頁時為讓我的網(wǎng)頁更加豐富多彩 在網(wǎng) 頁中插入圖像 動態(tài)特效等 讓瀏覽者更加直接 方便地了解我們的網(wǎng)站 同時在視 覺上給人一種賞心悅目的感受 在制作網(wǎng)站中 我使用了 F