[網(wǎng)頁設(shè)計(jì)]點(diǎn)睛價(jià)值

發(fā)布時(shí)間：2020-06-16 13:26:30 來源：網(wǎng)絡(luò) 閱讀：380 作者：蓬萊仙羽欄目：web開發(fā)

整理了一下電腦，發(fā)現(xiàn)之前我做的網(wǎng)頁設(shè)計(jì)作品，雖然一般般，但我感覺都是自己一碼一碼的敲的，還是挺有feel的！仿佛就在昨天，那時(shí)候的回憶，自己一個(gè)人在圖書館，靜心的做這個(gè)網(wǎng)頁設(shè)計(jì)。時(shí)間過的很快，轉(zhuǎn)眼間都離開了學(xué)校！

在線演示：http://114.92.228.69/dingxiaowei/webdesign/index.htm

一、作品展示

1.登陸界面

[網(wǎng)頁設(shè)計(jì)]點(diǎn)睛價(jià)值

2.主界面

3.表單界面

4.隨機(jī)抽獎(jiǎng)(JQuery制作)

5.我愛動(dòng)漫

二、文檔說明

一、作品內(nèi)容介紹

我所完成的這個(gè)作品，主頁通過DIV+CSS布局構(gòu)成。頁面包括導(dǎo)航，圖片的插入，音樂媒體文件的插入，超鏈接和javascript特效等等。實(shí)現(xiàn)了一個(gè)類似于一個(gè)個(gè)人小空間網(wǎng)站的功能。網(wǎng)站的頂部導(dǎo)航連接是連接到幾大塊，涉及到表單、登錄功能、字幕滾動(dòng)、和一些js特效的制作，左側(cè)導(dǎo)航是連接的一些陶冶情操的小頁面。

二、開發(fā)環(huán)境

本網(wǎng)站主要使用了Dreamwever和PS做為開發(fā)工具。主頁面主要由DIV+CSS進(jìn)行頁面的布局，通過css實(shí)現(xiàn)導(dǎo)航特效，其次通過一些超鏈接實(shí)現(xiàn)了子頁面的連接和聲音以及圖片的連接。

（1）開發(fā)環(huán)境的設(shè)置

打開DreamweaverCS5，執(zhí)行“站點(diǎn)”->”管理站點(diǎn)”命令，新建一個(gè)“10141303”的站點(diǎn)，在文件夾中，選擇已經(jīng)建立好的站點(diǎn)，單擊鼠標(biāo)右鍵，選擇“新建文件”

命令，定義主頁面index.htm;接著在站點(diǎn)上選擇“新建文件”命令，定義圖像文件使用的文件夾為pic。

（2）開發(fā)工具的介紹

AdobeDreamweaver CS6是一個(gè)可視化的頁面設(shè)計(jì)和網(wǎng)站管理工具，支持最新的Web技術(shù)，包含HTML檢查、HTML格式控制、HTML格式化選項(xiàng)、HomeSite/BBEdit捆綁、可視化頁面設(shè)計(jì)、圖像編輯、全局查找。

Adobe Photo同樣也是Adobe公司的另外一款軟件，這個(gè)提供了豐富的圖片處理功能，圖像處理是對(duì)已有的位圖圖像進(jìn)行編輯加工處理以及運(yùn)用一些特殊效果，其重點(diǎn)在于對(duì)圖像的處理加工。在表現(xiàn)圖像中的陰影和色彩的細(xì)微變化方面或者進(jìn)行一些特殊效果處理時(shí)，使用位圖形式是最佳的選擇，它在這方面的優(yōu)點(diǎn)是矢量圖無法比擬的。

三、系統(tǒng)的結(jié)構(gòu)說明

1、邏輯結(jié)構(gòu)圖

（1）首頁

首頁中運(yùn)用了DIV布局，javascript特效，CSS樣式表，以及文字、圖片、音樂的連接等等。

[網(wǎng)頁設(shè)計(jì)]點(diǎn)睛價(jià)值

index.html

導(dǎo)航連接：

<TR>

<li><a href="超鏈接頁面/隨機(jī)抽獎(jiǎng)1.htm">隨機(jī)抽獎(jiǎng)</a></li>

</ul>

</font>

</p>

</TD>

</TR>

導(dǎo)航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;

}

導(dǎo)航j(luò)s特效:

<scripttype="text/javascript">

$(function () {

//鼠標(biāo)經(jīng)過變色

$("#menu li").mousemove(function() {

//鏈?zhǔn)骄幊?/p>

$(this).css("background-color","Orange").siblings().css("background-color","Red").siblings().css("fout-size","29");})

//離開時(shí)候復(fù)原

$("#menu li").mouseleave(function() {

//鏈?zhǔn)骄幊?/p>

$(this).css("background-color","Red").siblings().css("background-color","Red").siblings().css("fout-size","26");})})

</script>

聲明：這里我使用了我自學(xué)的Jquery技術(shù)，jQuery是javascript一個(gè)輕量級(jí)的封裝框架，能夠更方便的實(shí)現(xiàn)js效果，和屏蔽不同瀏覽器對(duì)js的解釋的不同的煩惱。

（2）隨機(jī)抽獎(jiǎng)

這里運(yùn)用了js特效，圖片滾動(dòng)展示的效果，還有js生成隨機(jī)數(shù)的方法。

[網(wǎng)頁設(shè)計(jì)]點(diǎn)睛價(jià)值

(2)隨機(jī)抽獎(jiǎng)頁面

Javascript：

<scriptlanguage="JavaScript">

var Nos;

function Lottery() {

//隨機(jī)生成100-100000的號(hào)碼

Nos = Math.round(Math.random() *(100000 - 100) + 100);

var result =document.getElementById("layer1");

if (result != null) {

result.innerHTML = "恭喜這位網(wǎng)友 "+Nos+" 您中獎(jiǎng)了?。?！;

}

T = setTimeout('Lottery()', 10);

}

</script>

(3)表單錄入頁面

這部分主要就是表格的設(shè)計(jì)和表單的使用。

[網(wǎng)頁設(shè)計(jì)]點(diǎn)睛價(jià)值

表單html

<body>

<hr>

<legendalign="center">用戶注冊(cè)</legend>

性  別:<input id="rdoMale" type="radio"value="男" name="sex"checked="checked"><label for="rdoMale">男</label>

學(xué)  歷:<inputtype="radio" value="xx" name="xl" checked>小學(xué)

<input type="radio"value="cz" name="xl">初中

愛  好:<input type="checkbox" value="cf"checked>吃飯

<input type="checkbox"value="sj">睡覺

<inputtype="checkbox" value="dq">打球

<br>

選擇城市：<select>

<optionvalue="1">請(qǐng)選擇</option>

<optionvalue="1" selected="selected">上海</option>

<optionvalue="2">北京</option>

<optionvalue="3">南京</option>

</select>

<hr>

</optgroup>

<option>新鄉(xiāng)</option>

</optgroup>

<br>

自我介紹：<textarea cols="40" rows="3">我是多行文本

</textarea>

</fieldset>

<br>

<marqueedircution="down"><marquee dircution="right">讓×××飛</marquee></marquee>

</form>

</body>

(4) 登錄驗(yàn)證頁面

這是網(wǎng)站進(jìn)入的首頁，用戶登錄驗(yàn)證成功后進(jìn)入網(wǎng)站首頁，密碼為dingxiaowei。登入的時(shí)候，會(huì)自動(dòng)播放優(yōu)美的美景音樂，讓用戶有一種歡快的體驗(yàn)。

登錄驗(yàn)證

<html>

window.onload = function () {

var pwd;

while(1)

{

pwd=prompt("請(qǐng)輸入口令:(初始密碼dingxiaowei)");

if (pwd == "dingxiaowei"){

break;

}

//alert("歡迎進(jìn)入系統(tǒng)主頁");

window.location= "index.htm";

}

</script>

<body>

</center>

</body>

</html>

四、學(xué)習(xí)該課程的體會(huì)與心得

雖然我從大一開始就對(duì)web設(shè)計(jì)比較感興趣，那時(shí)候就自己就在圖書館看看這方面的書籍，后來大一參加過學(xué)院組織的電腦節(jié)web設(shè)計(jì)大賽，榮獲一等獎(jiǎng)?，F(xiàn)在大三了，ASP.NET是我一直專研的方向，html+css+js也是其中一部分比較重要的內(nèi)容。通過此次的課程設(shè)計(jì)，將我之前所學(xué)的知識(shí)都能夠回顧一遍，能夠更加熟練的進(jìn)行網(wǎng)頁設(shè)計(jì)。

這個(gè)大作業(yè)，我花了整整兩天的時(shí)間才能夠完成，尤其在首頁的布局方面，可謂花盡心思，精確到每一個(gè)邊距的每一個(gè)像素，都要計(jì)算好，不然就會(huì)出現(xiàn)不隨我意的布局效果。

尤其要強(qiáng)調(diào)的是javascript，js是一個(gè)腳本語言，它不像其他非腳本語言那樣嚴(yán)謹(jǐn)，但是如果出現(xiàn)錯(cuò)誤，也會(huì)使你非常頭疼，想完成一個(gè)功能，明明覺得是對(duì)的，從語言本身的角度，但它就是不能實(shí)現(xiàn)你想要的效果，最后通過alert（）函數(shù)，進(jìn)行一步一步的調(diào)試，這也不失為一種腳本語言的調(diào)試方法，最后找到一個(gè)難發(fā)現(xiàn)的錯(cuò)誤，就是我在定義函數(shù)的時(shí)候，使用了系統(tǒng)關(guān)鍵字作為函數(shù)的方法名，結(jié)果怎么在onclick屬性里面去調(diào)用這個(gè)js方法就是沒用。同過這個(gè)問題的解決，也讓我更深刻的理解了js腳本語言的使用，并不是想象中的那么“不嚴(yán)謹(jǐn)”的。

頁面的設(shè)計(jì)最考驗(yàn)的就是人的耐心，有耐心的人才能做出一個(gè)優(yōu)雅的頁面，千萬不可浮躁，不然就要實(shí)現(xiàn)想要的效果就比較困難的，總覺得頁面跟你對(duì)著干。

我也是通過靜下心來，慢慢的對(duì)首頁進(jìn)行布局，最終才完成了想要的效果，雖然比不少人家專業(yè)的web設(shè)計(jì)人員，但能做出這樣，心里還是比較滿意的。

通過這次課程設(shè)計(jì)，能夠?qū)⑽抑八鶎W(xué)得以鞏固和融會(huì)貫通，讓我覺得受益匪淺。

需要完整的設(shè)計(jì)文檔以及網(wǎng)站項(xiàng)目文件的請(qǐng)留言！

==================== 迂者丁小未 CSDN博客專欄=================

MyBlog：http://blog.csdn.net/dingxiaowei2013 MyQQ:1213250243

Unity QQ群：858550 cocos2dx QQ群：280818155

====================== 相互學(xué)習(xí)，共同進(jìn)步 ===================

向AI問一下細(xì)節(jié)

[網(wǎng)頁設(shè)計(jì)]點(diǎn)睛價(jià)值

一、作品展示

1.登陸界面

2.主界面

4.隨機(jī)抽獎(jiǎng)(JQuery制作)

5.我愛動(dòng)漫

二、文檔說明

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

一、作品展示

二、文檔說明