15個(gè)優(yōu)秀響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)教程
響應(yīng)式設(shè)計(jì)是由著名網(wǎng)頁(yè)設(shè)計(jì)師EthanMarcotte在2023年5月提出的設(shè)計(jì)概念,隨后席卷前端和設(shè)計(jì)領(lǐng)域,成為了如今網(wǎng)頁(yè)設(shè)計(jì)的大趨勢(shì)。正如同Ethan所說(shuō):“響應(yīng)式網(wǎng)站設(shè)計(jì)提供了一種全新的選擇,這種基于柵格布局和CSS3的流動(dòng)*網(wǎng)頁(yè)設(shè)計(jì),可以讓網(wǎng)頁(yè)隨著屏幕變化而響應(yīng)。這是一種更為統(tǒng)一,更加全面的設(shè)計(jì)技巧,一種打破網(wǎng)頁(yè)固有型態(tài)和限制的靈活設(shè)計(jì)方法。”
這種兼顧多屏幕多場(chǎng)景的靈活設(shè)計(jì),這就是響應(yīng)式設(shè)計(jì)令人著迷的所在。這一點(diǎn)和編程開(kāi)發(fā)領(lǐng)域所追求的“一次編寫,到處運(yùn)行”有著異曲同工之妙。所以它在短短幾年內(nèi)迅速火起來(lái),然后成為大趨勢(shì),可以說(shuō)是意料之中,水到渠成。響應(yīng)式設(shè)計(jì)的網(wǎng)頁(yè)現(xiàn)在已經(jīng)很多了,而相關(guān)的教程也是數(shù)不勝數(shù)。國(guó)外的設(shè)計(jì)博客Pixel77搜集了15篇優(yōu)秀的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的教程,讓喜歡鉆研的你來(lái)學(xué)習(xí)。
現(xiàn)在先簡(jiǎn)單介紹一下這15個(gè)教程,隨后優(yōu)設(shè)會(huì)挑選其中比較突出的文章單獨(dú)翻譯出來(lái),F(xiàn)在,大家就先睹為快吧!
1、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì):它是什么以及如何使用(作者KaylaKnight)
KaylaKnight的這篇文章是非常不錯(cuò)的入門基礎(chǔ)教程。Knight會(huì)引導(dǎo)你了解響應(yīng)式設(shè)計(jì)的基礎(chǔ)知識(shí),讓你明白它的基本原理。如果你想著手設(shè)計(jì)響應(yīng)式網(wǎng)頁(yè),這篇文章會(huì)告訴你應(yīng)該從何處下手。
2、響應(yīng)式網(wǎng)站*(作者ThoriqFirdaus)
響應(yīng)式網(wǎng)站中,*欄是非常重要的組成部分,如何設(shè)計(jì)出優(yōu)質(zhì)的響應(yīng)式*欄就顯得特別重要了。所以我們專門挑出這篇一流的響應(yīng)式網(wǎng)站*設(shè)計(jì)的教程,供大家參考學(xué)習(xí)。
3、使用CSS構(gòu)建基礎(chǔ)的響應(yīng)式站點(diǎn)(作者JasonMichael)
這又是一篇響應(yīng)式網(wǎng)站設(shè)計(jì)領(lǐng)域重量級(jí)的入門教程。這篇文章不僅僅為你講述了響應(yīng)式網(wǎng)站基本的CSS設(shè)計(jì)方法,Micheal還會(huì)幫你解答一系列設(shè)計(jì)響應(yīng)式網(wǎng)站時(shí)常見(jiàn)的問(wèn)題和迷思。
4、如何將任何網(wǎng)站轉(zhuǎn)化為響應(yīng)式網(wǎng)站(作者RochesterOliveira)
這篇教程同樣是從響應(yīng)式設(shè)計(jì)的基礎(chǔ)概念開(kāi)始,作者熟練地分析解讀了常見(jiàn)的標(biāo)簽,在文中后半段還傳授了一項(xiàng)極有價(jià)值的技能:教你如何將現(xiàn)有的網(wǎng)站轉(zhuǎn)化成為一個(gè)響應(yīng)式的站點(diǎn)。所以,這篇文章一定不能錯(cuò)過(guò)!
5、使用響應(yīng)式柵格系統(tǒng)設(shè)計(jì)網(wǎng)站(作者GrahamMiller)
響應(yīng)式柵格系統(tǒng)并非框架,深入理解柵格系統(tǒng)是非常有意義的。如果你想深入了解這個(gè)概念,那么還有什么方式比閱讀這個(gè)概念的提出者GrahamMiller的文章來(lái)的更有效呢?這篇教程會(huì)教你使用柵格系統(tǒng)1小時(shí)快速創(chuàng)建響應(yīng)式網(wǎng)站!
6、教你使用FlowType.JS制作響應(yīng)式web排版(作者JDGraffam)
眾所周知,排版是Web的未來(lái)。所以,學(xué)會(huì)響應(yīng)式排版并不是一種額外的優(yōu)勢(shì),而是必備的技能。因此,JD的這篇排版的教程就是幫你解決這方面問(wèn)題的。
7、如何制作響應(yīng)式排版(作者ValHead)
這是另外一篇關(guān)于排版的教程。ValHead詳細(xì)地解釋了為什么一個(gè)尺寸無(wú)法應(yīng)付所有的場(chǎng)景,并且詳細(xì)介紹了如何讓圖片和布局能隨著尺寸改變而響應(yīng)。
8、響應(yīng)式設(shè)計(jì)三部曲(作者NickLa)
這篇教程詳細(xì)講述了如何正確使用Meta標(biāo)簽、HTML結(jié)構(gòu)和媒體查詢來(lái)制作響應(yīng)式網(wǎng)站。這是最基礎(chǔ)的入門教程之一,寫的非常不錯(cuò)。如果你對(duì)這些東西掌握得不夠好的話,不妨讀讀這篇文章!
9、CSS:響應(yīng)式*欄菜單(作者NickLa)
這是NickLa的另外一篇文章,寫的也是如何使用CSS來(lái)寫響應(yīng)式*欄的。這篇文章寫的簡(jiǎn)潔明了,值得一讀。
10、響應(yīng)式網(wǎng)站設(shè)計(jì)中的可擴(kuò)展*模型(作者M(jìn)ichaelMesker)
這篇教程可以幫你創(chuàng)造易于配置、體驗(yàn)良好的響應(yīng)式網(wǎng)站模板。這篇文章是源自于作者M(jìn)esker的經(jīng)驗(yàn)總結(jié),在此之前,他曾參與過(guò)一個(gè)大型的響應(yīng)式網(wǎng)站開(kāi)發(fā)項(xiàng)目。
11、基于現(xiàn)有網(wǎng)站的響應(yīng)式改造(作者M(jìn)attStow)
作者M(jìn)attStow通過(guò)這篇網(wǎng)站手把手地教你如何將你的現(xiàn)有網(wǎng)站轉(zhuǎn)化為一個(gè)足夠出*的現(xiàn)代響應(yīng)式站點(diǎn)。強(qiáng)烈推薦需要改造網(wǎng)站的同學(xué)閱讀一下這篇文章。
12、如何讓*欄在小屏幕上轉(zhuǎn)化為下拉框(作者ChrisCoyier)
如何讓*欄在小屏幕上轉(zhuǎn)化為下拉框?這篇優(yōu)秀的教程可以幫你解決這一小問(wèn)題。當(dāng)你處理移動(dòng)端的頁(yè)面布局的時(shí)候,有時(shí)候會(huì)有這一的需求,有了這篇教程,你就再也不用擔(dān)心這個(gè)問(wèn)題了!
13、響應(yīng)式圖片:嘗試讓圖片感知環(huán)境自適應(yīng)(作者ScottJehl)
這篇教程會(huì)教你如何正確控制響應(yīng)式網(wǎng)站中的圖片,讓它們能隨著屏幕尺寸的變化而自適應(yīng)。作者ScottJehl思路清晰,言簡(jiǎn)意賅,值得閱讀。
14、響應(yīng)式水平布局(作者M(jìn)aryLou)
這篇教程會(huì)教你如何創(chuàng)建一個(gè)具幾個(gè)水平滾動(dòng)面板的響應(yīng)式布局。這種設(shè)計(jì)的技巧在于,當(dāng)屏幕空間夠大的時(shí)候,面板會(huì)水平鋪開(kāi),當(dāng)空間不足的時(shí)候,它們會(huì)合并到一起,以選項(xiàng)卡的形式存在。
15、視差流態(tài)特效的CSS3幻燈片響應(yīng)式網(wǎng)站設(shè)計(jì)(作者RingWing)
視差滾動(dòng)式網(wǎng)頁(yè)也是目前網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì),如何將響應(yīng)式網(wǎng)站中的幻燈片使用CSS3制作成視差滾動(dòng)的效果,就是這篇教程要叫你做的事情。
第2篇:響應(yīng)式網(wǎng)絡(luò)課程設(shè)計(jì)論文
1研究背景
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì),是目前網(wǎng)頁(yè)前端設(shè)計(jì)領(lǐng)域最前沿的話題.那么,什么是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì),為什么把網(wǎng)頁(yè)設(shè)計(jì)成響應(yīng)式,我們的網(wǎng)絡(luò)課程制作為什么要遵循這一設(shè)計(jì)思路是本文闡述的重點(diǎn).伴隨著互聯(lián)網(wǎng)高速發(fā)展,各種類型的網(wǎng)絡(luò)技術(shù)及應(yīng)用服務(wù)紛紛涌現(xiàn).從靜態(tài)網(wǎng)站到動(dòng)態(tài)網(wǎng)站,從web1.0到web2.0,日新月異的網(wǎng)絡(luò)技術(shù)和服務(wù)時(shí)刻在刷新我們的眼球.近些年,智能手機(jī)及平板電腦等移動(dòng)設(shè)備快速崛起,基于移動(dòng)終端的互聯(lián)網(wǎng)訪問(wèn)已經(jīng)走入了我們的日常生活,現(xiàn)在移動(dòng)終端的網(wǎng)絡(luò)訪問(wèn)量已超過(guò)基于普通電腦的訪問(wèn)量.因此要求網(wǎng)絡(luò)課程不僅要在普通電腦的大尺寸屏幕上可以為學(xué)習(xí)者提供友好的用戶界面和學(xué)習(xí)體驗(yàn),同時(shí)在各種不同分辨率的小尺寸移動(dòng)終端上也應(yīng)提供相對(duì)一致的學(xué)習(xí)體驗(yàn).
2基本技術(shù)方案
顯然,面對(duì)這一問(wèn)題,原有的網(wǎng)絡(luò)課程設(shè)計(jì)模式已經(jīng)遠(yuǎn)遠(yuǎn)不能適應(yīng)這一要求,那么,如何讓網(wǎng)絡(luò)課程也能實(shí)現(xiàn)響應(yīng)式設(shè)計(jì),并可以根據(jù)不同的終端設(shè)備給出不同的輸出信息數(shù)據(jù),我們根據(jù)現(xiàn)有的一些網(wǎng)站開(kāi)發(fā)的技術(shù)手段和前端頁(yè)面的設(shè)計(jì)模式,以及根據(jù)實(shí)際開(kāi)發(fā)過(guò)程中總結(jié)出的一些實(shí)踐方法,一般使用以下手段來(lái)實(shí)現(xiàn),比如把固定的數(shù)值包括位置定位、長(zhǎng)寬高、大小等變?yōu)橄鄬?duì)的量,這其中主要包括三個(gè)主要手段:流體式表格,液態(tài)圖片,媒體選擇器.
2.1流體式表格
在流體式表格出現(xiàn)之前的頁(yè)面設(shè)計(jì),一般會(huì)使用固定的網(wǎng)頁(yè)寬度設(shè)定,這主要是因?yàn)楫?dāng)時(shí)主流的電腦顯示器的分辨率是基本相同的,固定的寬度可充分的使用顯示器寬度,同時(shí)又不會(huì)使用戶感覺(jué)頁(yè)面過(guò)滿.但隨著電腦硬件的不斷發(fā)展變化,屏幕尺寸和分辨率越變?cè)酱,自適應(yīng)寬度的網(wǎng)頁(yè)逐漸問(wèn)世,這種設(shè)計(jì)方式可占據(jù)整個(gè)瀏覽器頁(yè)面適度的寬度,同時(shí)隨著頁(yè)面寬度的變化進(jìn)行重新排列布局.流體式表格的概念就是將網(wǎng)頁(yè)頁(yè)面進(jìn)行柵格劃分,使用相對(duì)單位代替絕對(duì)單位,使用相對(duì)單位來(lái)設(shè)置頁(yè)面元素的位置偏移和大小等變量,這樣可以使整個(gè)網(wǎng)頁(yè)的布局模式和內(nèi)容大小隨著寬度的變化而改變,從而適應(yīng)不同的顯示需求.同時(shí)使用基于div的布局方式,例如要進(jìn)行經(jīng)典的三列式排布,我們可以將div設(shè)置為左浮動(dòng),并且寬度設(shè)置為33%,這樣當(dāng)寬度改變時(shí),這三個(gè)div也一直會(huì)在自己所在的區(qū)塊里排成三列.因?yàn)槲覀冊(cè)O(shè)定了浮動(dòng)式布局,段落不會(huì)因?yàn)轫?yè)面的變化而出現(xiàn)重疊或分離的情況.流體式表格保*了網(wǎng)頁(yè)能夠響應(yīng)瀏覽器的寬度變化,同時(shí)保*不會(huì)出現(xiàn)橫向滾動(dòng)條.
2.2液態(tài)式圖片
液態(tài)式圖片也可以稱為響應(yīng)式的圖片,這是一個(gè)比較抽象的說(shuō)法,我們可以這樣理解,那就是不僅要保持縮放圖片時(shí)保持圖片的寬高比,而且還要在移動(dòng)終端上適當(dāng)降低圖片的分辨率.這個(gè)技術(shù)的實(shí)現(xiàn)需要使用網(wǎng)頁(yè)腳本檢測(cè)當(dāng)前設(shè)備的屏幕分辨率,根據(jù)不同設(shè)備的情況,向網(wǎng)頁(yè)中添加特定的web請(qǐng)求信息或標(biāo)記,并將后續(xù)的網(wǎng)頁(yè)html頁(yè)面代碼、頁(yè)內(nèi)圖片、網(wǎng)頁(yè)腳本和樣式表等加載請(qǐng)求定向到網(wǎng)站虛擬路徑上.當(dāng)這些請(qǐng)求到達(dá)網(wǎng)站的服務(wù)器端時(shí),網(wǎng)絡(luò)服務(wù)器會(huì)根據(jù)發(fā)送來(lái)的請(qǐng)求信息來(lái)決定這些請(qǐng)求所需要網(wǎng)頁(yè)中是*入的大尺寸的高分辨率圖片還是小尺寸的低分辨率的圖片,并向請(qǐng)求用戶進(jìn)行液態(tài)圖片相應(yīng)地反饋輸出.對(duì)于小屏幕和低分辨率的移動(dòng)設(shè)備,大尺寸圖片則不會(huì)被用到.使用液態(tài)式圖片可以有效降低移動(dòng)端的網(wǎng)絡(luò)數(shù)據(jù)流量并提高網(wǎng)頁(yè)訪問(wèn)速度.
2.3css3媒體選擇器
css中文名是層疊樣式表,目前最新的版本是第三版也就是css3,它能實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容與表現(xiàn)分離的一種技術(shù).流體式表格為我們提供了響應(yīng)式的頁(yè)面布局方式,不過(guò)在某些較小的屏幕終端上,如果頁(yè)面沒(méi)有辦法容納四列顯示,只能重新排列成三列或者兩列顯示,那么,該如何響應(yīng)此設(shè)備,我們可以使用css3媒體選擇器技術(shù)解決這個(gè)問(wèn)題.css3兼容之前的css版本所支持的所有媒體類型,例如:screen,print,handheld等,并且css3又添加了很多涉及媒體類型的最新的功能和屬*,包括最大寬度、設(shè)備寬度、屏幕定向,橫屏或豎屏及顏*設(shè)定等.在css3發(fā)布之后出現(xiàn)的新的移動(dòng)終端,如蘋果或安卓等設(shè)備,都可以相對(duì)完整的支持這些新屬*.所以可以通過(guò)媒體選擇器為新設(shè)備設(shè)置獨(dú)特的樣式,而忽略不支持css3的舊電腦中的老舊的瀏覽器;可以根據(jù)使用預(yù)先設(shè)想的使用目標(biāo)創(chuàng)建多個(gè)不同類型的樣式表,以適應(yīng)不同寬度范圍的設(shè)備類型.而目前最高效的解決方案,是將多個(gè)類型的選擇器整合到一個(gè)css文件中.
3深入探討
有了流體式表格、液態(tài)圖片、css3媒體選擇器,已經(jīng)基本可以根據(jù)終端設(shè)備的不同屏幕尺寸及分辨率顯示不同的課程頁(yè)面變化,但響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)不僅如此,還應(yīng)包含一些其他方面的內(nèi)容,我們列舉出如下的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的主要包含的幾個(gè)方面:(1)響應(yīng)不同終端的屏幕尺寸及分辨率變化.當(dāng)終端的屏幕尺寸及分辨率發(fā)生改變的時(shí)候,根據(jù)設(shè)備情況需要對(duì)頁(yè)面菜單、文字、布局等做出動(dòng)態(tài)調(diào)整,使用戶仍然能夠獲得友好的使用體驗(yàn);(2)響應(yīng)設(shè)備*作行為變化.如鼠標(biāo)拖拽(ipad上使用javascript事件模擬拖拽),觸摸屏手勢(shì)支持或其它移動(dòng)設(shè)備上特有的輸入方式;(3)網(wǎng)絡(luò)狀況自適應(yīng).用戶在慢速網(wǎng)絡(luò)或網(wǎng)絡(luò)延遲較大的情況下可以選擇不下載一些消耗帶寬的資源;(4)其他輔助功能響應(yīng).根據(jù)不同的終端,調(diào)用程序所需要的傳感器和控制器,如gps、陀螺儀、電話、短信等功能;(5)對(duì)使用場(chǎng)景做出響應(yīng).根據(jù)用戶身處的不同使用環(huán)境,提供給用戶不同網(wǎng)頁(yè)體驗(yàn);(6)響應(yīng)用戶偏好.因?yàn)椴煌挠脩粲兄煌钠茫热缱笥沂郑?作習(xí)慣,反映速度,眼睛辨別能力,**喜好,關(guān)注內(nèi)容不同等,網(wǎng)站都可以考慮做出響應(yīng).上述討論的三個(gè)重要手段,主要是針對(duì)第一條內(nèi)容.針對(duì)第二條內(nèi)容則主要依靠瀏覽器和設(shè)備傳感器的狀態(tài)檢測(cè),來(lái)實(shí)時(shí)動(dòng)態(tài)調(diào)整課程頁(yè)面表現(xiàn)或運(yùn)行方式,相對(duì)于普通電腦上基于鼠標(biāo)和鍵盤的人機(jī)交互,觸摸屏技術(shù)為我們帶來(lái)了完全不同的互動(dòng)方式與新的設(shè)計(jì)需求;這兩者又有各自所適用的領(lǐng)域.幸運(yùn)的是,要想讓網(wǎng)站滿足不同設(shè)備的需求,并非一件很難的事,只需要把注意力集中在某些地方.比如:觸屏設(shè)備無(wú)法對(duì)鼠標(biāo)滑過(guò)或指針的一些行為做出響應(yīng),因?yàn)橛|屏設(shè)備中根本就沒(méi)有鼠標(biāo)指針的設(shè)定,我們用手指點(diǎn)擊屏幕就是單擊,因此設(shè)計(jì)時(shí)不要讓觸屏設(shè)備出現(xiàn)任何依賴于鼠標(biāo)的狀態(tài)的觸發(fā)模式.而其他幾個(gè)方面則可根據(jù)網(wǎng)絡(luò)課程的實(shí)際情況來(lái)實(shí)現(xiàn)不同的需求,例如:視頻或圖片比較多的課程,就需要對(duì)網(wǎng)絡(luò)狀況進(jìn)行檢測(cè),以根據(jù)不同的用戶帶寬顯示不同的視頻或圖片質(zhì)量,以提高用戶訪問(wèn)速度,提升用戶體驗(yàn).而一門制作優(yōu)良的網(wǎng)絡(luò)課程,如果能根據(jù)不同的用戶給出不同的用戶體驗(yàn),使課程的學(xué)習(xí)更加貼近用戶的習(xí)慣,那么,這一課程的受歡迎程度肯定會(huì)大大提升.
4響應(yīng)式網(wǎng)站制作流程
從頁(yè)面設(shè)計(jì)到技術(shù)實(shí)現(xiàn)真格過(guò)程來(lái)說(shuō),設(shè)計(jì)并制作一個(gè)響應(yīng)式網(wǎng)絡(luò)課程,大致可以劃分為以下4個(gè)過(guò)程:(1)網(wǎng)站美工,用戶界面設(shè)計(jì)師,描繪出頁(yè)面的風(fēng)格和樣式,并確定網(wǎng)頁(yè)在最大分辨率的設(shè)備下應(yīng)顯示的全部?jī)?nèi)容,然后在頁(yè)面尺寸不斷縮小的情況下,如何布局,什么樣的頁(yè)面元素比如文字、圖片、內(nèi)容等需要改變顯示方式進(jìn)行隱藏,縮放或裁剪等,再一一做出調(diào)整;(2)使用相對(duì)單位對(duì)頁(yè)面元素進(jìn)行定位和設(shè)定,設(shè)置長(zhǎng)度、寬度、大小等;(3)針對(duì)不同顯示終端的屏幕尺寸和分辨率使用流體式表格和液體圖片實(shí)現(xiàn)響應(yīng);(4)根據(jù)分辨率變化視情況加入適當(dāng)?shù)拿襟w選擇器來(lái)調(diào)整元素.通過(guò)以上步驟,一個(gè)可以適應(yīng)各種平臺(tái)和終端的響應(yīng)式網(wǎng)絡(luò)課程基本實(shí)現(xiàn),經(jīng)過(guò)后期的各種優(yōu)化調(diào)整,一個(gè)優(yōu)秀的并保持一致的用戶體驗(yàn)的網(wǎng)絡(luò)課程就呈現(xiàn)在了各種終端用戶面前,通過(guò)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì),大大減低了針對(duì)同一課程開(kāi)發(fā)多個(gè)系統(tǒng)的工作強(qiáng)度,實(shí)現(xiàn)了網(wǎng)絡(luò)課程制作的效率化和通用*.響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)點(diǎn):(1)網(wǎng)站制作的工作量相對(duì)較小,不需要注冊(cè)多個(gè)域名,對(duì)于所有設(shè)備適用;(2)相對(duì)一致的用戶體驗(yàn),個(gè)*化的用戶習(xí)慣響應(yīng),很貼近用戶平時(shí)的上網(wǎng)習(xí)慣;(3)可根據(jù)不同的用戶終端,調(diào)用不同的終端工具,實(shí)現(xiàn)設(shè)備的有效合理利用.
5結(jié)語(yǔ)
通過(guò)實(shí)際應(yīng)用檢驗(yàn),我們制作的響應(yīng)式的網(wǎng)絡(luò)課程在學(xué)生學(xué)習(xí)過(guò)程中取得了較好的效果,學(xué)生普遍反應(yīng)課程學(xué)習(xí)更方便、更人*化.相信未來(lái)越來(lái)越多的網(wǎng)絡(luò)課程會(huì)逐漸的開(kāi)始支持多平臺(tái)的響應(yīng)式設(shè)計(jì)方案.本文雖然只是探討面向多平臺(tái)的響應(yīng)式網(wǎng)絡(luò)課程實(shí)現(xiàn)技術(shù),但也是對(duì)各種新技術(shù)、新方法的拋磚引玉,希望通過(guò)本文使讀者能夠?qū)W(wǎng)絡(luò)課程的制作技術(shù)產(chǎn)生更多的好的想法和思路.
第3篇:網(wǎng)頁(yè)課程設(shè)計(jì)心得體會(huì)
不知不覺(jué),二個(gè)星期的《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》課程的實(shí)*即將過(guò)去,回顧這一段日子,真的令我體會(huì)很深,也學(xué)會(huì)很多東西,懂得很多以前不懂的東西,也明白了一些事情.
自從第一天接觸《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》課程,我以下定決心要把網(wǎng)頁(yè)這門課學(xué)好,做出一個(gè)優(yōu)秀的網(wǎng)站.所以我時(shí)刻沒(méi)有錯(cuò)過(guò)任何學(xué)習(xí)的機(jī)會(huì),無(wú)論在課堂上,還是在課外上.更何況這一次實(shí)*.回顧今次的實(shí)*覺(jué)得我過(guò)得很充實(shí),很有意義,因?yàn)槲铱梢哉\(chéng)實(shí)的說(shuō)我在實(shí)*沒(méi)有玩過(guò)一次游戲,我每時(shí)每刻都在設(shè)計(jì)網(wǎng)站,還記得晚上做網(wǎng)站做到一、二點(diǎn),可能有人會(huì)說(shuō)我傻,但正因?yàn)檫@個(gè)傻的行動(dòng),令我學(xué)會(huì)很多東西,學(xué)會(huì)別人不懂的東西,做出一個(gè)令自己滿意的網(wǎng)站,可能跟別人比還需要繼續(xù)完善,但我不會(huì)因?yàn)閷?shí)*結(jié)束,就把網(wǎng)頁(yè)設(shè)計(jì)拋到九霄云外,我會(huì)繼續(xù)學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)技術(shù),把它變?yōu)樽约旱囊豁?xiàng)特長(zhǎng)。
回顧第一天的《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)》課程實(shí)*,老師叫我們繼續(xù)完善以前設(shè)計(jì)的網(wǎng)站,做出留言板、注冊(cè)的功能。我很快就完成了,但可能我是一個(gè)追求完善的人,所以盡管一個(gè)網(wǎng)站做好可以馬上交給老師。但我做出一個(gè)別人都不贊同的決定,從頭開(kāi)始做一個(gè)網(wǎng)站。因?yàn)槲矣X(jué)得以前那個(gè)真的不是太好,盡管實(shí)*的時(shí)間過(guò)去了一半,盡管別人對(duì)我說(shuō)你交原來(lái)這個(gè)不就行了嗎!何必再做一個(gè)呢?但真因?yàn)槲业膱?zhí)著,追求成功,追求完善的人,才會(huì)使我今天交出一個(gè)令自己滿足的答卷。
在制作個(gè)人網(wǎng)站時(shí)我們首先:
一、必需進(jìn)行個(gè)人網(wǎng)站前臺(tái)功能設(shè)計(jì)
包括個(gè)人網(wǎng)站主題的確定,前臺(tái)功能設(shè)計(jì)與管理、個(gè)人網(wǎng)站主頁(yè)設(shè)計(jì)、個(gè)人網(wǎng)站留言板、注冊(cè)、忘記密碼、搜索等網(wǎng)頁(yè)設(shè)計(jì)與管理。
二、對(duì)個(gè)人網(wǎng)站后臺(tái)管理功能設(shè)計(jì)
包括個(gè)人網(wǎng)站后臺(tái)管理功能的設(shè)計(jì)、后臺(tái)管理信息系統(tǒng)功能的設(shè)計(jì)、后臺(tái)系統(tǒng)權(quán)限管理、后臺(tái)文件管理、個(gè)人網(wǎng)站后臺(tái)管理系統(tǒng)主頁(yè)設(shè)計(jì)。
三、網(wǎng)站的發(fā)布
通常我們發(fā)布一個(gè)網(wǎng)站可能以能過(guò)域名注冊(cè),但我們也可以利用自己主機(jī),裝了iis別人就可以通過(guò)我的ip地址來(lái)訪問(wèn)我的主頁(yè)。第一次做的那個(gè)網(wǎng)頁(yè)我已經(jīng)發(fā)布在上網(wǎng)了。
四、個(gè)人網(wǎng)站推廣
一個(gè)網(wǎng)站做好了,就要對(duì)個(gè)人網(wǎng)站進(jìn)行推廣,這是一個(gè)電子商務(wù)網(wǎng)站必需做得的一步,因?yàn)槿绻悴粚?duì)你的網(wǎng)站進(jìn)行推廣,就算你發(fā)布了也沒(méi)有人會(huì)知道的。
在設(shè)計(jì)這個(gè)網(wǎng)站時(shí)真的體會(huì)很多東西,從一開(kāi)始網(wǎng)頁(yè)主題的確定,到主頁(yè)總體的設(shè)計(jì)、搜集資料、前臺(tái)功能設(shè)計(jì)與管理、后臺(tái)功能設(shè)計(jì)與管理、每個(gè)分頁(yè)面的設(shè)計(jì)等。我都一一進(jìn)行了規(guī)劃,因?yàn)槿绻悴灰?guī)劃好,想做什么就做什么,是不會(huì)做得好的。因我為體會(huì)到這一句話:“機(jī)會(huì)中屬于有準(zhǔn)備的人”。我詳細(xì)到一個(gè)表格寬度都一一列明。例如:775寬度,分三欄,每一欄占多少。因?yàn)槲疑钌疃谩凹?xì)微處才見(jiàn)真功夫”。
在這次實(shí)*過(guò)程中令我印象最深的是做留言板,因?yàn)閯偤迷谏弦粋(gè)星期sql數(shù)據(jù)庫(kù)實(shí)*做過(guò)了,所以今次在做就比較輕松,但我以前是經(jīng)過(guò)一個(gè)比較長(zhǎng)的練習(xí),做完了n次,可能有人會(huì)想,肯定是不會(huì)才做這么多次啦!但我想告訴這位同學(xué)我每次做得都不是不同的方法。第一次我用的是access數(shù)據(jù)庫(kù),第二次我用的是sql數(shù)據(jù)庫(kù)加權(quán)限管理,第三次我用的是數(shù)據(jù)源名稱的連接,第四次我用的是自定義連接字符串,第五次……每一次用的方法都是不同的,可能有人會(huì)說(shuō)我傻,會(huì)一種方法就行了,還要那么多嗎?但我想說(shuō)的就是不是這么多次的練習(xí),不是之么多次不同的方法,也就不會(huì)造就出今天熟能生巧的我,也不會(huì)對(duì)同學(xué)提出的問(wèn)題解決到,也不會(huì)輕松教會(huì)同學(xué),因?yàn)槟阕约菏紫葘W(xué)會(huì),學(xué)通,學(xué)廣,才能把問(wèn)題一一的解決。
令我難以忘懷的鏡頭也是在做留言板的時(shí)候,但不是為我自己的而做,而是一步一步教同學(xué)做,直到令同學(xué)學(xué)懂;把同學(xué)留言板的問(wèn)題一一解決;當(dāng)同學(xué)因?yàn)樽霾怀龆鴽](méi)心情,過(guò)去對(duì)她進(jìn)行鼓勵(lì)的,然后一一解決;當(dāng)自己也不會(huì),與同學(xué)共同研究的情況,這種學(xué)習(xí)氛圍是最難得的,就是在做留言板的時(shí)候,令我深深體會(huì)到我?guī)拙湓挘赫J(rèn)真做事只是把事情做對(duì),用心做事才能把事情做好。把每一件簡(jiǎn)單的事情做好就是不簡(jiǎn)單,把第一件平凡的事情做好就是不平凡。
版權(quán)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn),該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容, 請(qǐng)發(fā)送郵件至 yyfangchan@163.com (舉報(bào)時(shí)請(qǐng)帶上具體的網(wǎng)址) 舉報(bào),一經(jīng)查實(shí),本站將立刻刪除