web前端初步學習的自我總結
談到網頁製作，作為一個大二的軟體工程專業的學生，不得不慚愧得說一句自己是個菜鳥，不是一般的菜。前陣子完成一個15個html檔案的網頁都弄了好幾天，折騰在HTML，CSS，Javascript三者之間。弄完這個網頁後也沒多想，正好今天趁這個機會總結一下自己的一些製作過程中的所思所想吧。
剛開始準備做網頁時，說真的有些不知道從哪裡下手，到底是用div搞許多模組出來還是先用iframe弄出個框架，好吧其實壓根忘了先用iframe。於是我就用一個DIV+CSS的佈局開始了我的第一個html檔案編寫（ps:其實回頭想想，應該先用iframe構造框架才比較方便後面的製作）。沒有記錯的話我css程式碼和div剛開始全放在html檔案裡了，這樣可以比較方便得看自己需要用的選擇器，需要強調的是，標籤選擇器，類選擇器，ID選擇器的優先順序一定要弄明白，不然作出的效果常常不是自己想要的，這個可以通過不斷修改css程式碼裡的內容和修改
後面用到js檔案時也有類似引用程式碼，這裡暫且不提js。
我製作網頁是用Dreamweaver8,感覺這個軟體好處就在於html中它給出的程式碼，拆分，設計比較方便新手檢查自己程式碼和對應效果和“偷懶”，這裡說下怎麼偷懶，就是在設計一欄裡面，可以用滑鼠調整圖片，表格或者模組等等的高和寬，以及文字的各種樣式，程式碼會自動幫你修改，神奇之處是就連css裡面都會幫你增加選擇器。雖然這個可以偷懶，但是還是儘量能自己打程式碼打出來會比較有意思。
其實在掌握iframe和DIV+CSS佈局後，基本上就可以作出個大概了，然後再運用一些table之類的標籤，或者div-ul-li和div-dl-dt-dd來實現區域性的佈局，會使頁面圖片文字看起來比較舒服。下面給出自己的程式碼擷取：
<body>
<div id="main1">
<div id="left"><h2> </h2>
<h2> </h2>
<a href="榜單.html"><h2>推</h2>
<h2> </h2>
<h2>薦</h2>
<h2> </h2>
<h2>榜</h2 我鼓起勇氣把這麼搓的程式碼一晒目的是拋磚引玉，不難看出我製作的是一個音樂網站，還可以看出我是個傑迷。言歸正傳，做一個音樂網站，或者是遊戲網站之類的娛樂網站，大多數是需要實現動態圖片，選項卡切換之類的功能。於是就要接觸到我不想提的js了，Javascript。這東西我確實沒認真學，但是個人認為js確實是拉開你和別人網頁差距的重要工具，具體我不多說，js有點像c++之類的程式語言，學好js，網頁這關應該沒什麼問題了。不多說，我默默去學習js了，下面貼一段js程式碼
<SCRIPT language=javascript>
var bannerAD=new Array();
var bannerADlink=new Array();
var adNum=0;
bannerAD[0]="picture/jayych.jpg";
bannerAD[1]="picture/好聲音.jpg";
bannerAD[2]="picture/jay2.jpg";
var preloadedimages=new Array();
for (i=1;i<bannerAD.length;i++)
{
preloadedimages[i]=new Image();
preloadedimages[i].src=bannerAD[i];
}
function setTransition()
{
if(document.all)
{
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
}
function playTransition()
{
if (document.all)
bannerADrotator.filters.revealTrans.play() ;
}
function nextAd()
{
if(adNum<bannerAD.length-1)adNum++ ;
else adNum=0;
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 2500);
}
function jump2url()
{
jumpUrl=bannerADlink[adNum];
jumpTarget='_blank';
if (jumpUrl != '')
{
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
function displayStatusMsg()
{
status=bannerADlink[adNum];
document.returnValue = true;
}
</SCRIPT>好吧我承認js程式碼是借鑑網路上的高手們的，以上是我上一個網頁作業大致的心得，可能一些術語用得也不貼切，寫得也有些亂亂的，因為製作網頁是就是亂亂的，希望通過接下來的學習作出更佳的作品。最後再來一張作品的截圖以作自勉：
