溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
整理了一下電腦，發現之前我做的網頁設計作品，雖然一般般，但我感覺都是自己一碼一碼的敲的，還是挺有feel的！仿佛就在昨天，那時候的回憶，自己一個人在圖書館，靜心的做這個網頁設計。時間過的很快，轉眼間都離開了學校！
在線演示：http://114.92.228.69/dingxiaowei/webdesign/index.htm
![[網頁設計]點睛價值](http://img.blog.csdn.net/20140215123502656?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGluZ3hpYW93ZWkyMDEz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![[網頁設計]點睛價值](http://img.blog.csdn.net/20140215123648250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGluZ3hpYW93ZWkyMDEz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![[網頁設計]點睛價值](http://img.blog.csdn.net/20140215124042734?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGluZ3hpYW93ZWkyMDEz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![[網頁設計]點睛價值](http://img.blog.csdn.net/20140215124222546?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGluZ3hpYW93ZWkyMDEz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
一、作品內容介紹
我所完成的這個作品，主頁通過DIV+CSS布局構成。頁面包括導航，圖片的插入，音樂媒體文件的插入，超鏈接和javascript特效等等。實現了一個類似于一個個人小空間網站的功能。網站的頂部導航連接是連接到幾大塊，涉及到表單、登錄功能、字幕滾動、和一些js特效的制作，左側導航是連接的一些陶冶情操的小頁面。
二、開發環境
本網站主要使用了Dreamwever和PS做為開發工具。主頁面主要由DIV+CSS進行頁面的布局，通過css實現導航特效，其次通過一些超鏈接實現了子頁面的連接和聲音以及圖片的連接。
（1） 開發環境的設置
打開DreamweaverCS5，執行“站點”->”管理站點”命令，新建一個“10141303”的站點，在文件夾中，選擇已經建立好的站點，單擊鼠標右鍵，選擇“新建文件”
命令，定義主頁面index.htm;接著在站點上選擇“新建文件”命令，定義圖像文件使用的文件夾為pic。
（2） 開發工具的介紹
AdobeDreamweaver CS6是一個可視化的頁面設計和網站管理工具，支持最新的Web技術，包含HTML檢查、HTML格式控制、HTML格式化選項、HomeSite/BBEdit捆綁、可視化頁面設計、圖像編輯、全局查找。
Adobe Photo同樣也是Adobe公司的另外一款軟件，這個提供了豐富的圖片處理功能，圖像處理是對已有的位圖圖像進行編輯加工處理以及運用一些特殊效果，其重點在于對圖像的處理加工。在表現圖像中的陰影和色彩的細微變化方面或者進行一些特殊效果處理時，使用位圖形式是最佳的選擇，它在這方面的優點是矢量圖無法比擬的。
三、系統的結構說明
1、邏輯結構圖
（1）首頁
首頁中運用了DIV布局，javascript特效，CSS樣式表，以及文字、圖片、音樂的連接等等。
index.html
導航連接：
<TR>
<TD vAlign=bottom width=1033style="font-family: 宋體">
<p align="center">
<font size="5"color="#0000FF" face="仿宋_GB2312">
<ul id="menu">
<li><a>首頁</a></li>
<li><a href="超鏈接頁面/表單.htm">表單錄入</a></li>
<li><a href="超鏈接頁面/隨機抽獎1.htm">隨機抽獎</a></li>
<li><a href="超鏈接頁面/電腦節參賽作品/index.html">博客空間</a></li>
<li><a href="超鏈接頁面/海贼王網站/index.html">我愛動漫</a></li>
<li><a href="超鏈接頁面/品味咖啡/index.html">品味咖啡</a></li>
<li><a id="a1"onClick="aclick()">相關聲明</a></li>
</ul>
</font>
</p>
</TD>
</TR>
導航CSS:
#menu
{
list-style-type:none;
margin-top:2px;
margin-left:200px;
}
#menu li
{
background-color:Red;
text-align:center;
cursor:pointer;
width:140px;
height:30px;
float:left;
font-size:26px;
}
導航js特效:
<scripttype="text/javascript">
$(function () {
//鼠標經過變色
$("#menu li").mousemove(function() {
//鏈式編程
$(this).css("background-color","Orange").siblings().css("background-color","Red").siblings().css("fout-size","29");})
//離開時候復原
$("#menu li").mouseleave(function() {
//鏈式編程
$(this).css("background-color","Red").siblings().css("background-color","Red").siblings().css("fout-size","26");})})
</script>
聲明：這里我使用了我自學的Jquery技術，jQuery是javascript一個輕量級的封裝框架，能夠更方便的實現js效果，和屏蔽不同瀏覽器對js的解釋的不同的煩惱。
（2）隨機抽獎
這里運用了js特效，圖片滾動展示的效果，還有js生成隨機數的方法。
(2)隨機抽獎頁面
Javascript：
<scriptlanguage="JavaScript">
var Nos;
function Lottery() {
//隨機生成100-100000的號碼
Nos = Math.round(Math.random() *(100000 - 100) + 100);
var result =document.getElementById("layer1");
if (result != null) {
result.innerHTML = "恭喜這位網友 "+Nos+" 您中獎了！！！;
}
T = setTimeout('Lottery()', 10);
}
</script>
(3)表單錄入頁面
這部分主要就是表格的設計和表單的使用。
表單html
<body>
<form action="reg.aspx">
<input type="text">
<input type="password">
<input type="hidden">
<input type="button">
<input type="submit">
<input type="reset">
<input type="image"src="401861_005556281_2.jpg">
<input type="file">
<input type="radio">
<input type="checkbox">
<hr>
<fieldset>
<legendalign="center">用戶注冊</legend>
<label for="txtName">用戶名:</label><input id="txtName"type="text" value="請輸入"size="20" maxlength="6"><br>
<label for="txtPwd">密 碼:</label><inputid="txtPwd" type="password" value=""size="20"><br>
性 別:<input id="rdoMale" type="radio"value="男" name="sex"checked="checked"><label for="rdoMale">男</label>
<input id="rdoFemale"type="radio" value="女"name="sex"><label for="rdoFemale"> 女</label><br>
學 歷:<inputtype="radio" value="xx" name="xl" checked>小學
<input type="radio"value="cz" name="xl">初中
<input type="radio"value="gz" name="xl">高中<br>
愛 好:<input type="checkbox" value="cf"checked>吃飯
<input type="checkbox"value="sj">睡覺
<inputtype="checkbox" value="dq">打球
<br>
選擇城市：<select>
<optionvalue="1">請選擇</option>
<optionvalue="1" selected="selected">上海</option>
<optionvalue="2">北京</option>
<optionvalue="3">南京</option>
</select>
<hr>
<select size="4"multiple="multiple">
<optgroup label="河北">
<option>邯鄲</option>
<option>石家莊</option>
<option>邢臺</option>
</optgroup>
<optgroup label="河南">
<option>鄭州</option>
<option>石安陽</option>
<option>新鄉</option>
</optgroup>
<br>
自我介紹：<textarea cols="40" rows="3">我是多行文本
</textarea>
</fieldset>
<br>
<br>
<input type="submit"value="注冊">
<input type="reset"value="重置">
<input type="button" value="check">
<marqueedircution="down"><marquee dircution="right">讓×××飛</marquee></marquee>
<!--<bgsound src="E:\音樂\Nightwish - She Is My Sin.mp3"></bgsound>-->
<embed src="冰菊物語古箏版.mp3" loop="true" name="冰菊物語" width="460" height="68">
</form>
</body>
(4) 登錄驗證頁面
這是網站進入的首頁，用戶登錄驗證成功后進入網站首頁，密碼為dingxiaowei。登入的時候，會自動播放優美的美景音樂，讓用戶有一種歡快的體驗。
登錄驗證
<html>
<head>請輸入密碼</head>
<script type="text/javascript">
window.onload = function () {
var pwd;
while(1)
{
pwd=prompt("請輸入口令:(初始密碼dingxiaowei)");
if (pwd == "dingxiaowei"){
break;
}
}
//alert("歡迎進入系統主頁");
window.location= "index.htm";
}
</script>
<body>
<center>
<img src="pic/Login.JPG"></img>
<embed src="mp3/冰菊物語古箏版.mp3"loop="true" name="冰菊物語"width="0" height="0">
</center>
</body>
</html>
四、學習該課程的體會與心得
雖然我從大一開始就對web設計比較感興趣，那時候就自己就在圖書館看看這方面的書籍，后來大一參加過學院組織的電腦節web設計大賽，榮獲一等獎。現在大三了，ASP.NET是我一直專研的方向，html+css+js也是其中一部分比較重要的內容。通過此次的課程設計，將我之前所學的知識都能夠回顧一遍，能夠更加熟練的進行網頁設計。
這個大作業，我花了整整兩天的時間才能夠完成，尤其在首頁的布局方面，可謂花盡心思，精確到每一個邊距的每一個像素，都要計算好，不然就會出現不隨我意的布局效果。
尤其要強調的是javascript，js是一個腳本語言，它不像其他非腳本語言那樣嚴謹，但是如果出現錯誤，也會使你非常頭疼，想完成一個功能，明明覺得是對的，從語言本身的角度，但它就是不能實現你想要的效果，最后通過alert（）函數，進行一步一步的調試，這也不失為一種腳本語言的調試方法，最后找到一個難發現的錯誤，就是我在定義函數的時候，使用了系統關鍵字作為函數的方法名，結果怎么在onclick屬性里面去調用這個js方法就是沒用。同過這個問題的解決，也讓我更深刻的理解了js腳本語言的使用，并不是想象中的那么“不嚴謹”的。
頁面的設計最考驗的就是人的耐心，有耐心的人才能做出一個優雅的頁面，千萬不可浮躁，不然就要實現想要的效果就比較困難的，總覺得頁面跟你對著干。
我也是通過靜下心來，慢慢的對首頁進行布局，最終才完成了想要的效果，雖然比不少人家專業的web設計人員，但能做出這樣，心里還是比較滿意的。
通過這次課程設計，能夠將我之前所學得以鞏固和融會貫通，讓我覺得受益匪淺。
==================== 迂者 丁小未 CSDN博客專欄=================
MyBlog：http://blog.csdn.net/dingxiaowei2013 MyQQ:1213250243
Unity QQ群：858550 cocos2dx QQ群：280818155
====================== 相互學習，共同進步 ===================
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
![[網頁設計]點睛價值](http://img.blog.csdn.net/20140215123310640?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGluZ3hpYW93ZWkyMDEz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![[網頁設計]點睛價值](http://img.blog.csdn.net/20140215124620421?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGluZ3hpYW93ZWkyMDEz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
