我的网页设计（网页页面制作<二>)

原创
huangyouliang10 2011-06-06 02:40:46 博主文章分类：开发 ©著作权
文章标签 网页 html javascript 想象休闲 文章分类 Java 后端开发
©著作权归作者所有：来自51CTO博客作者huangyouliang10的原创作品，请联系作者获取转载授权，否则将追究法律责任
      
    嵌入网页页面制作出自个人的爱好，利用代码的编写融入产生web网页页面的应用效果，来进行页面的选择、搜索。这样可以大大的提高了参考者、浏览者的个人不同需要，从而也了解了对网页页面制作扩大范围和空间。也可以转换对网页页面字体产生文字体的颜色变化“也就是文字体变颜色”。承蒙对爱好者对待网页页面技术开发制造一个很好的交流平台。  
 
 
          
 
     <DOctype html public "-//w3c//dtd//xhtml1.0 transitional//en"   
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">  （表示应用代码向系统声明了当前页面的文档格式。换句话说就是浏览器会根据这个声明来对HTML做出相应的处理，不同的生命会有不同的处理；可能会影响到HTML标签的表现，对于同一段HTML代码不同编写的声明可能会得到不同的页面效果。）  
<html xmlns="http://www.w3.org/dtd1999/xhtml">      <html>   
           <head>   
           <a href="http://auto.soso.com">   
           <title>soso图片---搜搜网页</title>   
           <meta http-equiv="content-Iype" content="text/html charset=GB2312">           
           <meta name="keywords" content="soso网页-搜搜网页"></a> <a href="www.soso.com">网页</a></li> <a href="http://p_w_picpath.soso.com/p_w_picpath">图片</a></li> <a href="http://strong.soso.com/">视频</a></li> <a href="http://music.soso.com/">音乐</a></li> <a href=http://sobar.soso.com/">搜吧</a></li> <a href="http://news.soso.com/">新闻</a></li> <a href="wenwen.soso.com/">问问</a></li> <a href="http://tuan.soso.com/">团购</a></li> <a href="http://sobar.soso.com/category/334.htm?pid=bar.index.ml">更多&gt;</a></li> </td> （以上是标记说明HTML网页文件的范围。）  
           <a href="http://www.soso.com/p_w_picpaths css" type="text/css rel=stylesheet">   
           <script src="http://auto.soso.com/autophotobar index.htm;type="text/javascript"><script>   
           <meta http-equiv="content-type" content="text/html; charset=UTF-8" />    
           <script type="text/javascript"language="javascript">   
   以下应用嵌入式的方法连接，产生网页页面的动态效果，来应用代码、标签编程技巧；从而在页面中形成一个网页页面制作。加入以下编程代码  
           <a href="http://ent.qq.com/picture.shtml">   
         <!--连接图片载入以下方框-->   
     <style>   
   <div id='container'>   
       <!--左箭头-->   
       <img src="left.png" style="left:-5px;top:85px;"   
        onclick="javascript:showImg(-1)"/>   
       <!--左边第一个图片框-->   
       <img id="img01"style="z-index:4;left:31px;top:63px;width:74px;height:74px"   
        onclick="Javascript:showImg(2)"/>   
       <img id="img02" style="z-index:5;left:71px;top:32px;width:138px;height:138px   
        onclick="Javascript:showImg(1)"/>   
       <!--中间的图片框-->   
       <img id="img03"style="z-index:6;left:151px;top:0px;width:198px;height:198px   
        onclick=Javascript:showImg(0)"/>   
       <!--右边第二个图片框-->   
       <img id="img04" style=z-index:5;left:291px;top:opx;top:32px;width:138px;height:138px   
        onclick="Javascript:showImg(-1)"/>   
       <img id="img05"style="z-index:4;left:395px;top:64px;width:74px;height:74px   
        onclick="Javascript:showImg(-2)"/>   
       <!--右箭头-->   
       <img src="right.pag" style="left:486px;top:85px;"   
        onclick="Javascript:showImg(1)"/>   
    </div>   
       <style>   
           /*图片浏览器容器*/   
           #container {   
               position:absolute;   
               left:20%;   
               text-align:center;   
               margin-top:150px;   
               width:500px;   
               height:198px   
           }   
           /*图片浏览器容器中的所有图片样式*/   
           #container img {   
                position:absolute;   
           }   
        </style>   
        <script type="text/Javascript">   
            //图片列表数组   
            varimgArray = new Array();   
            imgArray[0] = "1.png";   
            imgArray[1] = "2.png";   
            imgArray[2] = "3.png";   
            imgArray[3] = "4.png";   
            imgArray[5] = "5.png";   
            imgArray[6] = "6.png";   
            imgArray[7] = "7.png";   
            imgArray[8] = "8.png";   
            imgArray[9] = "9.png";   
            imgArray[10] = "10.png";   
            //默认现实的图片序号   
            var base = 0；   
            //通过指定偏移量来显示数组顺序中前或者后的第几张图片   
        function showImg(offset)   
        {   
            base = (base - offset) % imgArray.length;   
            //显示从base号开启的5个图片   
            for(var i=base; i<base+5; i++)   
            {   
               var img = document.getElementById("img0" + (i-base+1));   
               //判断图片是否从前往后循环显示   
               if(i<0)   
               {   
                  img.src=imgArray[imgArray.length+i];   
               }   
               //判断图片是否从后往前循环显示   
               else if(i > (imgArray.length-1))   
               {   
                  img src = imgArray[i-imgArray.length];   
               }   
               else   
               {   
                  img.src =imgArray[i];   
               }   
          }   
      }   
      //初始化图片浏览器中的图片   
      function initimg()   
      {   
          showImg(3);   
      }   
      //在页面加载完成后调用   
      window.onload = initImg;   
<script type="text/javascript">if(typeof(pgvMain) == 'function') {pgvMain();}</script></span>   
</body> （标记说明之间至body是文件的主体）  
</html>   
  </script> （最后是在代码和字串符或变量输出到HTML文档中形成了运行动态网页的显示效果）    
 
    网页页面的制作贵在以开发和实际应用，基本上编写方法是由（1）由代码向系统声明当前页面的文档格式。（2）应用网址与HTML网页的文件之间编写范围的代码字段。（3）标记说明之间至body是文件的主体。比如可以输入一些语法语句、标签，如：这段代码<script type="text/Javascript">表示指定由脚本引擎解释的脚本来设置获取列表的样式来描述。  
 
<1>HTML对象模型中的属性  
 type有以下不同的表示：   
type 设置或获取列表的样式。  
type 获取选中区的类型。   
type 获取样式表编写所用的样式表(CSS)语言。   
type 获取按钮的分类和缺省行为。   
type 从 event 对象中获取事件名称。   
type 设置或获取对象的 MIME 类型。   
type 获取样式表编写所用的样式表(CSS)语言。   
type 获取或初始设置对象所代表的 input 控件类型。   
type 设置或获取关联的脚本引擎的 MIME 类型。   
type 根据 MULTIPLE 属性的值获取 select 控件的类型。   
type 获取控件类型。   
type 设置或获取 value 标签属性指明的资源内容类型。  
 
 <2>  HTML对象模型中的属性href有不同表示：  
href 设置或获取链接样式表的 URL。   
href 设置或获取目标 URL 或锚点。   
href 设置或获取相对链接基于的 URL。   
href 设置或获取整个 URL 为字符串。   
   
（4）最后是在代码和字串符或变量、标签聚集输出到HTML文档中形成了运行动态网页的显示出完整效果。