如何学习网页制作(个人经验)

  • 编辑时间: 2014-10-14 10:33:00
  • 浏览量: loading...
  • 作者: 段亮

最近看了聪哥的(SEO白手起家的创业录)有很深的感触!我觉得有一些话说得很有道理:如果你分享的东西,不是你亲自经历过,或者实践过的话,你的分享是很难打动别人和得到别人的认同。其实最真实的故事,才是最有价值!

还记得刚接触网页制作的时候还是大二的第一学期。那天老师上完课,见下面的同学,都是玩手机的、聊天的。于是就开玩笑的跟我们说:“你们按照现在这样情况下去,到大三毕业找工作时怎么办啊?大二了,难道都没给自己做一个职业规划吗?如果你们不对本专业感兴趣的话,也可以去尝试学点其它东西呀,总比你们现在什么都不学要强吧?”随后就向我们展示了,曾经那些学得比较好的学长、学姐们的网页作品。我当时心里第一感觉:“真厉害!能做出这么棒的网站,要是以后自己有这么厉害就好了,至少不会为找不到工作而发愁。”

   可能正是因为老师说的这些话触动了我,在这么玩下去,等到大三毕业出去找工作。我拿什么去闯荡这现实的社会呢?也是时候该为自己以后有个规划,在心底暗下决定,就学网页制作了。做出决定后,就要开始行动了。在接下来的时间里,通过在网上搜索相关教程和与别人的推荐了解到,学习网页制作学胡崧的Dreamweaver比较不错。通过学习了一个多月之后,发现自己依然还是不会做网站。虽然看着别人在视频里面做着容易,等到自己真正做起来的时候,你会发现很难。后来通过在一所在线培训学校学习后,才发现原来做网站也有一个流程。按照这个流程走,做一个网站出来并不难。真正难的是:“不知道该如何下手。”

努力.jpg


   由此我总结出一个道理:“自学真的很苦逼,没方向。而且把时间和精力浪费在不该浪费的地方上。”其实有时候能理解那些想自学的大学生们,因为大学期间时间比较多,想凭借着这些时间去自学,而不愿意花钱去培训,因为每个月基本的经济来源,都是靠父母的伙食费。包括当时我选择报名培训学习也犹豫了很久,花这钱我到底值不值得呢?真的能学到东西吗?最后想开了,把它当成一种在学习上的投资。直到今天,我觉得很庆幸有了当初的决定,才有现在的一切。现在不仅连当初报名的学费挣回来了,而且还收获到一些用金钱都无法买到的东西,和一些互联网上的人脉。


   我觉得不管学什么,一定得找到适合自己的学习方法来学习。这样学东西才会起到事半功倍的效果。接下来就跟大家一起谈谈:网页制作到底该怎么学?以及我分享我学习网页制作这一年来的一些经验和总结吧!

   有人说:学网页制作先从PS制作效果图学起,有人说从DW学起,众说风云!而我认为学习网页制作一定要从html标签和CSS学起,因为网页制作的核心就是html标签加上CSS,像dreamweaver只是一个开发工具,不建议一开始就先学习怎么去使用。只要你把核心学会了,利用记事本照样也能写网页。想必大家都知道哪个更加重要了!

(一)html标签部分


   我们都知道html标签大大小小有几十个标签,而在我们实际开发中过程中,却只用到有十多个标签。所以我建议先学习常用的一些标签,然后在逐渐深入学习其它标签。

比如:

      p标签--->表示一个段落
      
      h标签--->标题标签 
      
      网页中一般只用:h1、h2、h3这个三个标签。并且h1标签在一个网页中有且只有一个,一般用于网页的标题。
      
      div标签--->可以理解为盒子容器
      
      a标签--->链接标签
      
      比如要跳转到百度<a href="www.baidu.com">百度</a>
      
      img标签--->在网页中引用图片
      比如我要链接一张图片:<img src="图片地址" width="" height="" alt=""/>
      
      注:假设有一张1.jpg的图片,若该网页和图片在同一级目录,那么地址为:src="1.jpg"。
      如果在某个文件夹下,就在前面加该文件名称,有多少层级加多少。依次类推。比如图片在images文件夹下,那么地址就为:src="images/1.jpg"。
      
      br标签--->换行
      
      span标签--->行内标签
      
      strong标签--->加粗效果,强调定义的文本内容很重要。
      
      table--->表格标签
      定义一个表格里面有tr标签(行)td标签(列)th标签(一般用于表格的标题)
      
      ul--->无序列表
      
      ol--->有序列表

注:更多标签以及测试效果可以访问:万维网联盟
   (W3C)进行测试。

    http://www.w3school.com.cn/tags/index.asp

(二)CSS部分

CSS(层叠样式表)可以理解成人穿的衣服。只要更换CSS,就相当于给网页换了一套漂亮衣服。在CSS部分,我觉得有以下几个知识点需要注意:


(1)CSS语法

CSS语法.gif


(2)CSS的几种引用方式

1.行内样式
比如:<p style="width:120px;height:30px;border:1px solid red;"></p>  2.内嵌样式
<style>
       p{width:120px;height:30px;border:1px solid red;} 
</style>        3.外部引用样式 
<link rel="stylesheet" type="text/css" href="样式列表地址"> 
   
<style type="text/css">@import url("样式列表地址");></style> 这种基本上比较少用(但也要知道)

 


剩余79%内容付费后可查看

为保证文章的高质量产出,以下内容为vip付费阅读哦!

开通VIP会员

已有1位小伙伴打赏过本篇文章:

.
阿里云服务器优惠

写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!

微信打赏 微信打赏

支付宝打赏 支付宝打赏

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客

站长推荐
loading... 数据加载中...

超低服务器价格,值得购买!

超低服务器价格,值得购买!