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

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