《網(wǎng)設計與制作》課程設計模板

1、沈陽工業(yè)大學網(wǎng)頁設計與制作課程設計題目：電話簿管理系統(tǒng)學院：工程學院專業(yè)/班級：電子商務1101姓名：陳超同組人姓名：燕海霞 王莉 黃程程 唐易靈指導教師：關學銘報告時間：2014年6月20日成績與教師評語成績教 師 評 語一 網(wǎng)頁設計的總體概述 1.1 網(wǎng)頁設計1.2 網(wǎng)頁設計的目的1.3 網(wǎng)頁設計的任務1.4 網(wǎng)頁設計的要求內容1.4.1 HTML標記語言142 Dreamweaver8 1.4.3平面圖像處理軟件 1.5 本文所制作網(wǎng)頁主題內容介紹 1.5.1 網(wǎng)頁題目1.5.1 網(wǎng)頁主題內容二網(wǎng)頁素材制作2.1 2.2 三 Dreamweaver8 網(wǎng)頁制作 3.1 創(chuàng)建本地站點3.2

2、 主頁制作過程3.3 二級頁面制作 3.4 頁面之間的超鏈接四程序設計與實現(xiàn)4.1 功能設計4.2 數(shù)據(jù)庫設計五程序測試六 總結致謝參考文獻網(wǎng)頁設計的總體概述1.1 網(wǎng)頁設計網(wǎng)頁設計是網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息 （ 包括產(chǎn)品和服務 ）的一種方 式, 是企業(yè)開展電子商務的基礎設施和信息平臺，離開網(wǎng)站（或者只是利用第三 方網(wǎng)站）去談電子商務是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡商標” ，也是企業(yè) 無形資產(chǎn)的組成部分，而網(wǎng)站是INTERNE上宣傳和反映企業(yè)形象和文化的重要 窗口。網(wǎng)頁設計的建站包含：企業(yè)網(wǎng)站、集團網(wǎng)站、門戶網(wǎng)站、社區(qū)論壇、電子商 務網(wǎng)站、網(wǎng)站優(yōu)化技術等，如中華網(wǎng)庫，在行業(yè)中各自有各自

3、的作用。網(wǎng)頁設計 是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng) 站。不同領域的網(wǎng)頁設計，網(wǎng)頁圖形設計，界面設計，創(chuàng)作，其中包括標準化的 代碼和專有軟件， 用戶體驗設計和搜索引擎優(yōu)化。 許多人常常會以工作小組負責 不同方面的設計過程中， 雖然有些設計師將他們所有的網(wǎng)頁設計是設計過程的前 端（客戶端）的設計用于描述一個網(wǎng)站，包括寫標記，但是這是一個灰色地帶， 因為這還覆蓋了網(wǎng)絡的發(fā)展。 網(wǎng)頁設計師預計將有意識的可用性， 如果他們的作 用，需要創(chuàng)建標記，那么它們也有望成為最新的網(wǎng)頁易讀性指引。1.2 網(wǎng)頁設計的目的本課程的設計目的是通過實踐使同學們經(jīng)歷 Dreamweaver

4、8 開發(fā)的全過程和 受到一次綜合訓練， 以便能較全面地理解、 掌握和綜合運用所學的知識。 結合具 體的開發(fā)案例，理解并初步掌握運用 Dreamweaver 8 可視化開發(fā)工具進行網(wǎng)頁 開 發(fā)的方法;了解網(wǎng)頁設計制作過程。通過設計達到掌握網(wǎng)頁設計、 制作的技巧。 了解和熟悉網(wǎng)頁設計的基礎知識和實現(xiàn)技巧。 根據(jù)題目的要求， 給出網(wǎng)頁設計方 案，可以按要求， 利用合適圖文素材設計制作符合要求的網(wǎng)頁設計作品。 熟練掌 握 Photoshop 8 、Dreamweaver 8 等軟件的的操作和應用。增強動手實踐能力， 進 一步加強自身綜合素質。我本次主要是設計的是以“電話簿管理系統(tǒng)”為主題的網(wǎng)頁。1.3

5、 網(wǎng)頁設計的任務任務一、網(wǎng)站欣賞：Dreamweaver CS3提供了站點創(chuàng)建與管理工具，通過站 點管理器可以更好地利用站點對文件進 行管理，實現(xiàn)本地路徑設置、地址信息管理、遠程服務器信息管理、測試服務器環(huán)境配置、模板和庫 管理等功能任務二、網(wǎng)頁布局：網(wǎng)頁布局的好壞是決定網(wǎng)頁美觀與否的一個重要 因素， 主要從兩方面去理解，一種是結構布局，另一種是藝術布局。通過合理的布局， 可以將頁面中的文字、 圖像等內容完美、 直觀地展現(xiàn)給訪問者， 同時合理安排網(wǎng) 頁空間， 優(yōu)化網(wǎng)頁的頁面效果和下載速度。 因此，在對網(wǎng)頁進行布局的過程中， 應遵循視覺的對稱平衡、 對比、凝視和空白等原則。 常見的網(wǎng)頁布局 形式

6、包括 : n型布局、“三”型布局、框架布局和 POP布局。任務三、色彩基礎：網(wǎng)頁設計是一種特殊的視覺設計，它對色彩的依賴性很 高。由于色彩能夠在不知不覺間影響人的心理， 左右人的情緒， 所以色彩設計也 是網(wǎng)站風格設計的決定性因素之一。任務四、軟件的安裝：啟動計算機，將 Dreamweaver CS3光盤放入 CD-ROM 驅動器中，找到 Dreamweaver CS3安裝文件setup.exe，雙擊即可啟動安裝程 序。按操作向導提示操作即可完成全部安裝過程。1.4 網(wǎng)頁設計的要求內容本程序的設計是為用戶提供一個電話薄管理平臺， 給用戶提供一個管理聯(lián)系 人的聯(lián)系方式的小系統(tǒng)。本電話薄管理系統(tǒng)利用

7、計算機對通訊錄進行統(tǒng)一管理， 包括了添加、修改、查詢記錄等功能。程序中涉及結構體、數(shù)組、文件等方面的 知識，從而實現(xiàn)通訊錄管理工作的系 統(tǒng)化、規(guī)范化和自動化，給用戶的工作和 生活提供便利。系統(tǒng)模塊設計 : 整個電話薄管理系統(tǒng)包括如下幾個功能模塊。 (1) 輸入記錄 模塊: 輸入記錄模塊主要完成將數(shù)據(jù)存入數(shù)組中的工作。 在此電話薄管理系統(tǒng)中， 記錄可以從以文本形式存儲的數(shù)據(jù)文件中 讀入，也可以從鍵盤逐個輸入記錄。(2) 查詢記錄模塊 :查詢記錄模塊主要完成在數(shù)組中查找滿足相關條件的記錄。在電話薄管理系統(tǒng)中，用戶可以按照聯(lián)系人姓名或聯(lián)系人 電話號碼在數(shù)組中進 行查找。 (3) 更新記錄模塊 : 更

8、新記錄模塊主要完成對記錄的維護。 在電話薄管 理系統(tǒng)中，它能實現(xiàn)對記錄的修改、刪除、插入和排序操作。 (4) 輸出記錄模 塊: 輸出記錄模塊主要完成兩個任務1.4.1 HTML 標記語言基本內容：1. 構建HTML網(wǎng)頁2. 文本及版面風格控制3. 圖像、超鏈接和表格4. HTML的表單5. HTML的其他常用標記6. 層疊樣式表 CSS。要求：1）了解HTM語言與高級語言（如VB C等）的區(qū)別；識記網(wǎng)頁常用標記及屬性，如標題、字體、段落、圖像、超鏈接、表格等；2）熟練掌握HTML表單中各界面對象的標記符號和屬性，如表單、文本域、 列表域、復選框與單選鈕、命令按鈕等；3）熟練掌握在Dreamwe

9、aver中使用層疊樣式表CSS 了解層疊樣式表與標 記屬性的區(qū)別。1.4.2 Dreamweaver8基本內容1. Dreamweaver8基礎知識2設計站點3. 文字處理與圖像4. 超鏈接5. 表格與圖層的使用6. 框架7. 層疊樣式表 CSS8. 表單與行為要求：了解Dreamweaver8基礎知識、掌握設計站點、文字與圖像處理、超鏈接、 表格與圖層的使用、框架、層疊樣式表 CSS表單與行為。1.4.3 平面圖像處理軟件基本內容：1. 靈活運用 Fireworks 8 作網(wǎng)站的圖像處理2. 靈活運用 Flash 8 作網(wǎng)站的動畫處理要求：了解網(wǎng)頁文字素材、圖 形圖像素材、 聲音素 材、 動

10、畫素材的基礎和Fireworks 、 Flash 的使用方法。1.5 本文所制作網(wǎng)頁主題內容介紹1.5.1 網(wǎng)頁題目電話簿管理系統(tǒng)1.5.2 網(wǎng)頁主題內容本文網(wǎng)頁是沈陽工業(yè)大學工程學院 11 級電子商務專業(yè)小蘋果組合的電話簿， 其中包括對小蘋果成員電話信息進行添加、 刪除和修改， 以及及時更新成員的電 話號碼和所在單位部門， 方便其他同學及時取得小蘋果成員的最新聯(lián)系方式和相 關動態(tài)。二 網(wǎng)頁素材制作2.1 Fireworks 制作圖片2.2 Photoshop 制作首頁圖片三 程序設計與實現(xiàn)3.1 功能設計（1）制作該網(wǎng)頁頁面主要實現(xiàn)電話簿的管理，其主要功能分別為：添加電話； 電話管理；電話修

11、改 添 加 電 話 將添 加電 話設 置成超 鏈接 ，點擊“添加電話”跳轉到 user_add.asp 進行操作 電 話 管 理 將電 話管 理設 置成超 鏈接 ，點擊“ 電話管理”跳轉到 user_manage.asp 進行操作注銷登錄 將注銷登錄設置成超鏈接，點擊“注銷登錄”跳轉到 loginout.asp 進行操作3.2 數(shù)據(jù)庫設計四 程序測試（1）網(wǎng)頁登錄頁面（2）電話簿管理網(wǎng)頁首頁 首頁顯示數(shù)據(jù)庫中存入的電話信息：（3）首頁搜索引擎 通過輸入姓名，實現(xiàn)在數(shù)據(jù)庫中搜索數(shù)據(jù)的功能： 功能實現(xiàn)代碼： 搜 索 電 話 按姓名查找 :   input name=checkbox ty

12、pe=checkbox =checkbox2 value=1 checked模糊查詢 (4) 電話添加頁面點擊首頁添加電話彈出該頁面， 帶有星號的選項必須進行填寫， 填寫好信息后點 擊保存，將數(shù)據(jù)添加到數(shù)據(jù)庫。功能實現(xiàn)代碼：電話維護頁面 %if lid then%電話信息修改 %else%電話信息添加 v/tr 電話信息 姓名 :input name=name type=text class=text id=name style=width:154px value= /* 電話： input name=tel type=text class=text id=tel style=width:15

13、4px value= /* 單位 : input name=department type=text class=text id=department style=width:154px value= / input type=hidden name=id value=/（5）刪除信息選中要刪除的信息， 然后點擊刪除所選項， 系統(tǒng)會自動彈出 “你確定這樣做嗎？ 點擊確定刪除所選中的信息。點擊反回，取消操作。功能實現(xiàn)代碼： 全選 五 總結Internet 正在以強大的沖擊力影響著人類的生活。 Internet 的出現(xiàn)和迅速 發(fā)展，徹底改變了人們的傳統(tǒng)生活方式。 Internet 現(xiàn)在已經(jīng)滲透到了

14、人類社會 的各個領域， 以及人們的日常生活的各個環(huán)節(jié)。 Internet 的迅速普及，正是依 靠不計其數(shù)、 豐富多彩的網(wǎng)站。 網(wǎng)站是由網(wǎng)頁按照一定的鏈接順序組成。 現(xiàn)在有 越來越多的人希望在網(wǎng)絡上擁有自己的個人主頁或個人網(wǎng)站， 來展示個人的個性 和特點。 同時也有越來越多的企業(yè)通過互聯(lián)網(wǎng)上來展示自身形象，提供服務和 產(chǎn)品資訊。以這種廉價的方式獲取最大的宣傳效果。因此網(wǎng)頁制作已經(jīng)成為現(xiàn)代社會中人們的一種基本功， 越來越多的人希望學 習如何制作網(wǎng)頁， 同時越來越多的網(wǎng)頁制作工具展現(xiàn)在人們面前。 當然掌握所有 的網(wǎng)頁制作工具是不可能， 也是不必要的。 網(wǎng)頁制作， 以及工具之間如何搭配使 用，使我們能夠快速方便地制作出網(wǎng)頁， 把人們想了解的信息更便捷的展現(xiàn)給大 家。經(jīng)過一周的時間網(wǎng)頁課程設計， 我們小組的題目為 “電話簿管理系統(tǒng)” 基本 完成課程設計的要求，基本實現(xiàn)了課程設計要求的所有功能。我主要負責實現(xiàn)網(wǎng)頁的功能，通過本次設計使得我們熟悉了 Dreamweaver8 和 SqlServer2000 的各項功能，也對也對網(wǎng)頁設計與制作有了更進一步的了解， 提高了我學習網(wǎng)頁的興趣， 以后我會在自己的課余時間多看些此方面的書籍， 多