HTML5開(kāi)發(fā)技術(shù)課程設(shè)計(jì)

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

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

3、投資公司主頁(yè)Index 工大公司主頁(yè)介紹視頻展示登陸界面Index4校園招聘Index 3支持Index2解決Index1業(yè)務(wù)信息提交后臺(tái)視頻和鏈接相關(guān)的技術(shù)相關(guān)的說(shuō)明視頻和背景音樂(lè)登陸和鏈接登陸和鏈接相關(guān)產(chǎn)品鏈接最新消息業(yè)務(wù)信息3 詳細(xì)設(shè)計(jì)頁(yè)面的布局和風(fēng)格DIV+CSS的基本過(guò)程是先布局，對(duì)網(wǎng)頁(yè)進(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)頁(yè)布局的原理，就是按照HTML5代碼中對(duì)象聲明的body background:#131b

4、20; font-family:Arial, 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è)之間的鏈接：<link rel="stylesheet" href="css/reset.css" type="t

5、ext/css" media="all"> <link rel="stylesheet" href="css/layout.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <ul> <li>

6、<a href="index.html">主頁(yè)</a></li> <li><a href="index-1.html">業(yè)務(wù)</a></li> <li><a href="index-2.html">解決</a></li> <li><a href="index-3.html">支持</a></li> <li><a href

7、="index-4.html">校園招聘</a></li> </ul>LOGO 插入：<div class="logo"> <a href="index.html"><img src="images/logo.png" alt=""></a> </div><div class="logo"> <a href="index.html">

8、;<img src="images/logo.png" alt=""></a> </div>登陸注冊(cè)界面：<form action="" id="search-form"> <fieldset> <input type="text" class="text" value=""> <input type="submit" value="Search&q

9、uot; class="submit"> </fieldset> </form> <ul class="top-nav"> <li class="first"><a href="#" class="about">關(guān)于</a></li> <li><a href="#" class="login">登陸</a></li> &

10、lt;li><a href="#" class="signup">注冊(cè)</a></li> </ul> <form action="" id="login-form"> <fieldset> <div class="field"><label>用戶名</label><input type="text" class="text" value=

11、""></div> <div class="field"><label>密碼</label><input type="password" class="password" value=""></div> <div class="field"> <label for="checkbox">保存密碼</label> <input type=&

12、quot;checkbox" name="checkbox" id="checkbox"> </div> <ul> <li><a href="#">忘記密碼?</a></li> <li><a href="#">申請(qǐng)一個(gè)新賬號(hào)</a></li> </ul> <div class="wrapper"> <input type="

13、;submit" value="Submit" class="submit"> </div> 網(wǎng)頁(yè)部分圖片的插入：<div class="inside"> <div class="wrapper p2"> <figure class="img-wrapper"> <img src="images/1page-img1.jpg" alt=""> </figure>視頻的使

14、用： <embed src=" allowFullScreen="true" quality="high" width="200" height="200" align="left" allowScriptAccess="always" type="application/x-shockwave-flash"> </embed> 背景音樂(lè)：<div id="apDiv2"> <audi

15、o src="sky.mp3" border="0" controls> </audio></div> .vlinksposition: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; 提交的信息欄：<div class="inside&qu

16、ot;> <form action="" id="contacts-form"> <fieldset> <div class="col-1"> <label>Enter Your Name:<br /> <input type="text" value="" /> </label> <label>Enter Your E-mail:<br /> <input type=&quo

17、t;text" value="" /> </label> <label>Enter Your State:<br /> <input type="text" value="" /> </label> </div>友情鏈接： <div class="vlinks">Collect from <a href=" title="友情鏈接" target="_blank"

18、;>友情鏈接</a></div>動(dòng)態(tài)信息欄： <ul class="list1"> <li><a href="#">工大聯(lián)盟認(rèn)證</a></li> <li><a href="#">工大聯(lián)盟項(xiàng)目啟動(dòng)</a></li> <li><a href="#">工大聯(lián)盟卓越計(jì)劃</a></li> <li><a href="#">工大聯(lián)盟軟件競(jìng)賽</a></li> <li><a href="#">