谈到网页制作，作为一个大二的软件工程专业的学生，不得不惭愧得说一句自己是个菜鸟，不是一般的菜。前阵子完成一个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>
<h2> </h2>
<h2>单</h2></a>
</div>
<div id="right">
<div class="content" id="content2">
<p> 港台金曲</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> </dd>
<dt><a href="音乐播放界面.html">枫-周杰伦</a></dt>
<dd> </dd>
<dt><a href="音乐播放界面.html">爱情转移-陈奕迅</a></dt>
<dd> </dd>
<dt><a href="音乐播放界面.html">可惜没如果-林俊杰</a></dt>
<dd> </dd>
</dl>
</div>
<div >
<table width="67%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td height="20" colspan="3"> </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">
<a href="资讯.html">中国好声音第四季</a> </td>
<a href="资讯.html"><td width="264" id="part1">
<a href="资讯.html">周杰伦摩天轮演唱会</td></a> </a>
<a href="资讯.html"><td width="264" id="part1">
<a href="资讯.html">哎呦不错哦专辑首发</td></a> </a>
</tr>
</tr>
</tr>
<tr>
<td height="" colspan="3" align="center" > </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> </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代码是借鉴网络上的高手们的，以上是我上一个网页作业大致的心得，可能一些术语用得也不贴切，写得也有些乱乱的，因为制作网页是就是乱乱的，希望通过接下来的学习作出更佳的作品。最后再来一张作品的截图以作自勉： 
来源：CSDN
作者：天蓝得像笑过
链接：https://blog.csdn.net/fwj958683305/article/details/49871189