網(wǎng)頁設(shè)計(jì)課程設(shè)計(jì)報(bào)告

1、.課 程 設(shè) 計(jì)課 程 名 稱： HTML5開發(fā)技術(shù)課程設(shè)計(jì) 專 業(yè) 班 級(jí)： 計(jì)科1201 學(xué) 生 姓 名： 伍志強(qiáng) 學(xué) 號(hào)： 2 指 導(dǎo) 教 師： 劉宏月 學(xué) 期： 2013-2014學(xué)年第一學(xué)期 ；. HTML5開發(fā)技術(shù) 專業(yè)課程設(shè)計(jì)任務(wù)書學(xué)生姓名伍志強(qiáng)專業(yè)班級(jí)計(jì)科1201學(xué)號(hào)2題 目課題性質(zhì)工程課題來源自擬指導(dǎo)教師劉宏月同組姓名無主要內(nèi)容任務(wù)要求參考文獻(xiàn)審查意見指導(dǎo)教師簽字：教研室主任簽字： 2013 年 月 日 說明：本表由指導(dǎo)教師填寫，由教研室主任審核后下達(dá)給選題學(xué)生，裝訂在設(shè)計(jì)（論文）首頁1 需求分析本課程設(shè)計(jì)為一個(gè)商業(yè)網(wǎng)站，大的框架為整個(gè)網(wǎng)站分為5個(gè)頁面，分別為：主頁面、公司的

2、業(yè)務(wù)面，公司產(chǎn)品問題咨詢面，公司產(chǎn)品的技術(shù)支持面，校園招聘界面。各個(gè)頁面間都是相互連接的，方便讀者更快捷地找到想了解的信息。 在每個(gè)界面擁有的公司logo ，登陸界面，和一些視頻的宣傳和校園招聘網(wǎng)頁的背景音樂，友情鏈接，插入的各種靜動(dòng)態(tài)圖片，搜索欄。每個(gè)界面鏈接的公司的最新各種動(dòng)態(tài)，和基本的各種文字說明，采用的是中英雙板模式書寫。 網(wǎng)站的目錄結(jié)構(gòu)如下：伍志強(qiáng) -網(wǎng)站根目錄Css -存放外置CSS文件 Images -存放圖片文件Music -存放背景音樂 -存放的代碼-編譯時(shí)建立的一個(gè)工程Index系列 -存放的網(wǎng)站的各個(gè)網(wǎng)頁2 概要設(shè)計(jì)工大聯(lián)盟科技投資公司主頁Index 工大公司主頁介紹視頻

3、展示登陸界面Index4校園招聘Index 3支持Index2解決Index1業(yè)務(wù)信息提交后臺(tái)視頻和鏈接相關(guān)的技術(shù)相關(guān)的說明視頻和背景音樂登陸和鏈接登陸和鏈接相關(guān)產(chǎn)品鏈接最新消息業(yè)務(wù)信息3 詳細(xì)設(shè)計(jì)頁面的布局和風(fēng)格DIV+CSS的基本過程是先布局，對(duì)網(wǎng)頁進(jìn)行總體設(shè)計(jì)，再設(shè)計(jì)內(nèi)容，對(duì)布局的每一部分進(jìn)行設(shè)計(jì)。DIV+CSS對(duì)內(nèi)容的設(shè)計(jì)也體現(xiàn)內(nèi)容和表現(xiàn)相分離的思想。對(duì)內(nèi)容的表現(xiàn)的描述都在CSS中，內(nèi)容可以應(yīng)用CSS樣式，不需要額外的HTML標(biāo)簽進(jìn)行內(nèi)容的修飾。CSS網(wǎng)頁布局的原理，就是按照HTML5代碼中對(duì)象聲明的body background:#131b20; font-family:Arial,

4、 Helvetica, sans-serif;font-size:100%; line-height:1.5em;color:#f1fefd;html min-width:980px;html, body height:100%;container margin: 0 auto;position: relative;width: 980px;font-size:.75em; 各個(gè)網(wǎng)頁之間的鏈接： 主頁 業(yè)務(wù) 解決 支持 校園招聘 LOGO 插入： 登陸注冊(cè)界面： 關(guān)于 登陸 注冊(cè) 用戶名 密碼 保存密碼 忘記密碼? 申請(qǐng)一個(gè)新賬號(hào) 網(wǎng)頁部分圖片的插入： 視頻的使用： 背景音樂： .vlinks

5、position:relative;padding:0 0 0 800px; #apDiv2 position:absolute;left:660px;top:29px;width;301px;height:25px;z-index:1;border:#B0B82C 1px solid;background-color:#FFFFCC; 提交的信息欄： Enter Your Name: Enter Your E-mail: Enter Your State: 友情鏈接： Collect from 友情鏈接動(dòng)態(tài)信息欄： 工大聯(lián)盟認(rèn)證 工大聯(lián)盟項(xiàng)目啟動(dòng) 工大聯(lián)盟卓越計(jì)劃 工大聯(lián)盟軟件競(jìng)賽 工大聯(lián)盟

6、采購計(jì)劃 工大聯(lián)盟產(chǎn)品上市 工大聯(lián)盟招牌職員 搜索欄：部分頁面展示：4 調(diào)試分析出現(xiàn)的錯(cuò)誤.1網(wǎng)頁背景色的設(shè)置 2重復(fù)使用實(shí)現(xiàn)相同功能的代碼、或雜七雜八的亂套代碼.3. 在HTML5中，我們并不需要給和增加type屬性4. 不要把所有列表式的鏈接放在nav里。5 logo也不適用于figure6. Align center（自動(dòng)居中）的濫用5測(cè)試結(jié)果 課程設(shè)計(jì)總結(jié)這次網(wǎng)頁設(shè)計(jì)課程設(shè)計(jì)給我的最大的印象是：基本知識(shí)是一切的根本；架構(gòu)是重要的，想像的還要重要；實(shí)踐比一切空談和理論更能學(xué)到東西。從做這個(gè)網(wǎng)頁設(shè)計(jì)開始無論遇到什么困難，我都沒有一絲的放棄的念頭。在設(shè)計(jì)過程中一定要慎重，仔細(xì)。來不得半點(diǎn)馬虎。布局是整個(gè)課程設(shè)計(jì)的中心，考慮要全面，