web前端初步学习的自我总结

谈到网页制作,作为一个大二的软件工程专业的学生,不得不惭愧得说一句自己是个菜鸟,不是一般的菜。前阵子完成一个15个html文件的网页都弄了好几天,折腾在HTML,CSS,Javascript三者之间。弄完这个网页后也没多想,正好今天趁这个机会总结一下自己的一些制作过程中的所思所想吧。

刚开始准备做网页时,说真的有些不知道从哪里下手,到底是用div搞许多模块出来还是先用iframe弄出个框架,好吧其实压根忘了先用iframe。于是我就用一个DIV+CSS的布局开始了我的第一个html文件编写(ps:其实回头想想,应该先用iframe构造框架才比较方便后面的制作)。没有记错的话我css代码和div刚开始全放在html文件里了,这样可以比较方便得看自己需要用的选择器,需要强调的是,标签选择器,类选择器,ID选择器的优先级一定要弄明白,不然作出的效果常常不是自己想要的,这个可以通过不断修改css代码里的内容和修改

里的属性来摸索出来。如果需要另外创建个css文件,则剪切粘贴上去然后再在html中别忘了用一段引用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>&nbsp;</h2>
     <h2>&nbsp;</h2>
     <a href="榜单.html"><h2></h2>
     <h2>&nbsp;</h2>
     <h2></h2>
     <h2>&nbsp;</h2>
     <h2></h2>
     <h2>&nbsp;</h2>
     <h2></h2></a>
   </div>
   <div id="right">
       <div class="content" id="content2">

        <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;港台金曲</p>
        <dl>
          <dt>   <a href="榜单.html"><img src="picture/jay1.jpg" alt="周杰伦专辑封面" width="194" height="120px" /></a></dt>
          <dt><a href="音乐播放界面.html">说好的幸福呢-周杰伦</a></dt>
          <dd>&nbsp;</dd>
          <dt><a href="音乐播放界面.html">枫-周杰伦</a></dt>
          <dd>&nbsp;</dd>
          <dt><a href="音乐播放界面.html">爱情转移-陈奕迅</a></dt>
          <dd>&nbsp;</dd>
          <dt><a href="音乐播放界面.html">可惜没如果-林俊杰</a></dt>
          <dd>&nbsp;</dd>
        </dl>
     </div>


  <div >
   <table width="67%" border="0" cellspacing="0" cellpadding="1">
    <tr>

      <td height="20" colspan="3">&nbsp;</td>
      </tr>
              <tr>
                <td height="300" colspan="3"  align="center" valign="top">
                  <p align="left">
                    <img src="picture/好声音.jpg"    name=bannerADrotator width="1194" height="474" border=0  style="FILTER: revealTrans(duration=2,transition=20)" />
                    <script language=javascript>nextAd()</script>
             </p>
             <td width="6" height="300" colspan="3" align="left" valign="top"></td>          
             </tr>
             <tr >
                  <td width="264" id="part1">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="资讯.html">中国好声音第四季</a>                </td>
                  <a href="资讯.html"><td width="264" id="part1">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="资讯.html">周杰伦摩天轮演唱会</td></a>                  </a>
                  <a href="资讯.html"><td width="264" id="part1">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="资讯.html">哎呦不错哦专辑首发</td></a>                  </a>
             </tr>
      </tr>
    </tr>
            <tr>
            <td height="" colspan="3" align="center" >&nbsp;</td>
            </tr>
             <tr> 
             <td height="" colspan="3"  align="center" ><div align="center"><span class="STYLE4"> 热门歌手</span></div></td>
             </tr>
    </table>

  </div>


 <div>
  <div class="content1">
   <dl>
          <dt>  <a href="歌手花名册.html"><img src="picture/周杰伦.jpg" alt="周杰伦" width="230" height="175" /></a></dt>
                  <dt><a href="歌手个人资料.html">周  杰  伦</a></dt>
                  <dd>&nbsp;</dd>
     </dl>
   </div>



  </div>
</div>

</body>

我鼓起勇气把这么搓的代码一晒目的是抛砖引玉,不难看出我制作的是一个音乐网站,还可以看出我是个杰迷。言归正传,做一个音乐网站,或者是游戏网站之类的娱乐网站,大多数是需要实现动态图片,选项卡切换之类的功能。于是就要接触到我不想提的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代码是借鉴网络上的高手们的,以上是我上一个网页作业大致的心得,可能一些术语用得也不贴切,写得也有些乱乱的,因为制作网页是就是乱乱的,希望通过接下来的学习作出更佳的作品。最后再来一张作品的截图以作自勉:

展开阅读全文

没有更多推荐了,返回首页