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><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代码是借鉴网络上的高手们的，以上是我上一个网页作业大致的心得，可能一些术语用得也不贴切，写得也有些乱乱的，因为制作网页是就是乱乱的，希望通过接下来的学习作出更佳的作品。最后再来一张作品的截图以作自勉：
web前端初步学习的自我总结相关推荐
- 小猿圈Web前端开发学习路线
很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功 ...
- Web前端入门学习（5）——浮动原理及清除浮动
浮动原理及清除浮动 上节回顾 在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/ ...
- Web前端开发学习误区，你掉进去了没？
从接触网站开发以来到现在,已经有五个年头了吧,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上的一串串回忆,成功与喜悦.烦恼与纠结都历历在目,感慨颇多. 先 ...
- iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
- html5移动web开发黑马掌上商城_月入35k大佬总结：web前端必须学习的内容（附全套前端教程）...
为了让学习变得轻松,高效!今天给大家分享一套教学资源,帮助大家在学习Web前端的道路上披荆斩棘,这套资源的领取方式请看文末 优秀的WEB前端工程师具备编写任何一个互联网系统的前端页面.交互代码的能力. ...
- web 前端必备学习指南-精华
工具 box-shadow generator 生成 box-shadow 的工具. gradient-generator 渐变生成器. Ultimate CSS Gradient Generator ...
- web前端需要学习什么？
Web前端工程师,是伴随着Web的兴起而细分的行业,随着当下企业对用户体验的重视,无论互联网公司还是大型企业都把前端作为自己的招牌门面,看得相当重要.而且随着互联网的不断发展,每年都会诞生大量的企业, ...
- web前端需要学习什么？需要掌握什么技术
1.Web前端是什么意思 Web前端是网站前台部分,运行在PC端,移动端等浏览器上展现给用户所浏览的网页. 用我们的话来说,前端就是网页给访问网站的人看的内容和页面,Web前端开发意思就是这些内容的制 ...
- web前端从学习到学废
web前端从学习到学废 了解web前端 1.HTML.CSS系列之导学 2.什么是HTML.CSS? 3.宇宙第一编辑器VSCode 4.chrome浏览器 5.深入了解网站开发 6.web三大核心技 ...
最新文章
- 一台主机装两个mysql数据库_一台主机装两个mysql数据库
- Asp.net 序列化应用实例(转载)
- 安徽信息技术初中会考上机考试模拟_中学信息技术上机操作考试技巧
- 简单json语句转化为map保存
- [React Native]高度自增长的TextInput组件
- 【转】使用FiddlerCore来测试WebAPI
- Linux学习：第六章-Linux网络配置
- java里新建线程设置线程名字_多线程开发不得不掌握，设置和获取线程名称及JVM如何运行的...
- 【语音识别】基于matlab功率谱和倍频法男女生识别【含Matlab源码 705期】
- pytorch的vgg19的预训练模型提取图片特征
- 深度学习在语音识别中的算法、应用、数据集、行业分析
- 流光容易把人抛，红了樱桃，绿了芭蕉
- QQ等级计算方法及图标
- C#：什么是委托和事件及其相关(转)
- document.getElementById(“id”)与$(#id)的区别
- 【PTA】代码部分基础整理
- 武汉mysql ocp考点_MySQL OCP考试复习系列–开篇：了解MySQL考试
- Python爬虫BS4库的解析器正确使用方法
- 归一法的计算方法讲解_数学归一法是什么能举个具体例子吗
- js在页面刷新或关闭之前对后台发送请求