《java課程設(shè)計《新聞發(fā)布系統(tǒng)》用戶界面設(shè)計模板》由會員分享,可在線閱讀,更多相關(guān)《java課程設(shè)計《新聞發(fā)布系統(tǒng)》用戶界面設(shè)計模板(14頁珍藏版)》請在裝配圖網(wǎng)上搜索。
1、新聞發(fā)布系統(tǒng)系統(tǒng)
第一部分 案例描述
案例目的
使用HTML和CSS樣式表構(gòu)建小型網(wǎng)站,熟悉網(wǎng)站的靜態(tài)頁面的制作。
案例難度
★★★
案例覆蓋技能點
a) html基本元素
b) Css樣式表
c) JavaScript編程基礎(chǔ)
推薦案例完成時間
10天
適用課程和對象
無
對象前置知識:無
第二部分 需求和開發(fā)環(huán)境
案例需求
把數(shù)據(jù)庫中新聞信息,通過組織,合理有序地呈現(xiàn)在客戶面前。
使用技術(shù)和開發(fā)環(huán)境
Dreamweaver、UltraEdit等均可。建議使用UltraEdit。
設(shè)計網(wǎng)站的標(biāo)準(zhǔn)
1. 所設(shè)計和制作的網(wǎng)站為中小型門戶網(wǎng)站
2、,編輯好的網(wǎng)站頁面必須能夠滿足兼容IE6、IE7、IE8和Firefox瀏覽器。
2. 網(wǎng)站中的欄目標(biāo)題需滿足自動生成和替換功能。
3. 所編輯的靜態(tài)網(wǎng)站必須全部使用DIV+css布局,內(nèi)部文章列表使用無序列表。不要使用表格。
4. 所有文件命名要用英文,不能使用漢語拼音。
5. 文件夾統(tǒng)一使用:Images 存放圖片。Javascript 存放腳本。Style 存放樣式。Flash 存放動畫。
6. 圖片命名:背景圖片:Bj_圖片名,網(wǎng)頁圖片:Pic_圖片名。圖片格式:.gif, .jpg。
頁面要求
1. 文章列表使用無序列表時其代碼形式參考如下:
2. 圖片列表使用無序列表時其代碼形式參考如下:
3. 下圖所示的形式可以使用一次表格,且表格只能針對單個人使用:
第三部分 功能點介紹
功能點介紹
1新聞發(fā)布系統(tǒng)首頁
2新聞列表頁
3新聞內(nèi)容頁
4新聞搜索頁
5新聞發(fā)布后臺管理——登錄
新聞發(fā)布后臺管理系統(tǒng)的圖片,沒有制作。借用京博書畫網(wǎng)的后臺管理系統(tǒng),框架一樣。
界面功能點
功能點要求
登錄
點擊進(jìn)入主頁面,見頁面6。
6新聞發(fā)布后臺管理——主頁面
界面功能點
功能點要求
管理中心
點擊
6、管理中心,顯示類別管理和新聞管理小菜單。正常情況下不顯示小菜單。
類別管理
點擊類別管理,右邊內(nèi)容框里顯示類別列表,頁面見功能7
新聞管理
點擊新聞管理,右邊內(nèi)容框里顯示新聞列表,頁面見功能10
退出
返回登錄頁
主頁
右邊內(nèi)容框里,顯示主頁
時間顯示
顯示年月日和星期,
分隔欄
點擊以后,隱藏菜單欄。分隔欄收縮值左邊。再點擊以后,顯示菜單欄,分隔欄顯示在正常值為。
7新聞發(fā)布后臺管理——類別管理
界面功能點
功能點要求
添加類別
鼠標(biāo)移動上以后呈橙紅色,點擊以后鏈接到類別添加頁,見功能8
修改
鏈接到類別修改頁,見功能9
8新聞發(fā)布后臺
7、管理——類別添加
界面功能點
功能點要求
取消
返回類別列表頁,見功能7
9新聞發(fā)布后臺管理——類別修改
界面功能點
功能點要求
取消
返回類別列表頁,見功能7
10新聞發(fā)布后臺管理——新聞管理
界面功能點
功能點要求
添加新聞
鼠標(biāo)移動上以后呈橙紅色,點擊以后鏈接到新聞添加頁,見功能11
修改
鏈接到新聞修改頁,見功能12
11新聞發(fā)布后臺管理——新聞添加
界面功能點
功能點要求
取消
返回新聞列表頁,見功能10
12新聞發(fā)布后臺管理——新聞修改
界面功能點
功能點要求
取消
返回新聞列表頁,見功能10
第四部分 考核評價點
驗收標(biāo)準(zhǔn)
1. 分別使用IE6、IE7、IE8和Firefox瀏覽器在電腦分辨為1024×768和1280×1024的設(shè)置下做瀏覽時,頁面在瀏覽器中居中顯示且同分辨率下的效果相同。
2. 網(wǎng)站靜態(tài)代碼整齊簡練,使用的成對標(biāo)簽全部閉合,不要出現(xiàn)多于的層嵌套;網(wǎng)站樣式有單獨的樣式文件,每個樣式或者層內(nèi)部樣式盡量出現(xiàn)少的重復(fù)。
3. 各個文件必須能夠完全按照網(wǎng)站初步標(biāo)準(zhǔn)規(guī)定的位置存放。