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

  • 编辑时间: 2014-10-14
  • 浏览量: 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> 这种基本上比较少用(但也要知道)

    

(3)CSS选择器

1.标签选择器
  html标签:比如:P标签  div标签 span标签....
 
  p{color:red;}   
  
2.Class选择器
  以"."开头的为Class选择器 .p{color:red;}
  
3.ID选择器
  以"#"开头的为ID选择器,一般来说,一个ID选择器在一个页面中具有唯一性,有且只存在一次。
 
  #p{color:red;}
 
4、后代选择器
  比如:我们要给 h1 标签下面的em 标签添加样式
     
  html:<h1>This is a <em>important</em> heading</h1>
     
  css: h1 em {color:#c34;}
     
5、子元素选择器 (>)
    
   比如:我们要给H1标签的子元素(strong)添加颜色
    
  html: <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> 
  
      <h1>This is <em>really <strong>very</strong></em> important.</h1>
      
  css: h1 > strong { color:red}
        
  更多请查看: http://www.w3school.com.cn/css/


(4)理解:浮动和清除浮动以及定位

其实我觉得在CSS中只有两点需要重点去理解:一是:浮动和清除浮动。二是:定位。只要你深刻明白这点两点了,我相信CSS部分应该没有多大难题。

为什么这么说呢?因为接触很多新手朋友们,大多数都不理解为什么用了浮动后又要"清除浮动",以及这清除浮动的含义是什么。

其实用清除浮动主要是为了防止网页产生一些异常的小BUG,比如:网页错位。相信很多人新手朋友都遇到过这样的问题:“为什么我的网页会错位啊,没有按正常情况下布局摆放”。

其实这类情况,大多数都是为清除浮动产生的,由此可见“清除浮动的重要性”。

在定位方面:一定要理解三种定位的含义:相对定位(position:relative)绝对定位(position:absolute),还有固定定位(position:fixed)以及默认属性static。

其中我觉得最需要理解的是绝对定位,因为绝对定位是相对于某个元素来定位的。比如说:

<html>
    <body>
        <div id="box">
            <p style="position:absolute;top:100px;left:200px;">
                我是绝对定位哦!
            </p>
        </div>
    </body>
</html>

大家来猜想下,会是一个怎么样的情况呢?

友情提示:如果给一个元素绝对定位,那么它就会向父级一直寻找有定位的元素。如果找到有个地方用了定位,则相对于它定位。如果都没有找到,则相对于浏览器来定位。由此可见P元素是相对于浏览器来定位的,因为他的父级DIV没有定位。

如果还不能了解:可以点击视频学习


(三)布局

 通俗点说:就是把一个个DIV模块组合起来,好比建房子一样。


(四)关于JS特效(javascript/jquery)

关于javascript和jquery的学习,我觉得前期新手没必要去深入学习,只需要会使用这些特效就行。如果以后走web前端这块发展的话,我建议去学习javascript基础语法,DOM操作,BOM操作。然后在去学习jquery。因为jquery是基于javascript开发出来的一个类库,比较容易上手,有良好的文档和帮助手册。可以用更少的代码,完成更多的功能。


写在最后:我不敢说我的学习方法适合你,因为每个人的学习方法都会不同,但至少你已经走在了一个正确的起跑线上。我觉得要想快速学会网页制作有两点诀窍:

第一、有一个适合自己的学习方法。

第二、多善于思考,多去写多去练。只有在不断去写的过程中,才会发现自己存在着哪些的缺点。


如果想系统学习,可以点击:学习网页制作


本文出自段亮个人博客,转载请注明出处

本文出处:http://www.duanliang920.com/learn/web/jc/288.html

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

上一篇:什么是静态和动态网页?
下一篇:没有了
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • 蓝天
    2016-10-10 15:09:05发表

    博主好厉害呀!

  • 段亮自媒体博客
    2016-10-06 21:15:36发表

    不是,后期有时间。会考虑用vue来写一个版本

  • 2016-10-06 17:35:09发表

    这个博客是用angularjs写的么

  • 不离不弃
    2016-09-09 10:00:23发表

    教我javascript吧

  • 段亮自媒体博客
    2016-08-20 11:08:47发表

    只要是网页,都会需要它的,你说能有什么用?

  • 刘国强
    2016-08-06 10:04:25发表

  • ﹎妙語傾婷ゞ
    2016-07-22 11:32:19发表

    学这有啥用。。

  • 樟新馗19
    2015-10-29 13:11:43发表

    [晴转多云]

  • 西航小萝莉
    2015-10-20 17:36:56发表

    [蛋糕]

  • 结婚百科
    2015-08-24 15:21:20发表

    简直是太感谢聪哥了啊!

  • 段亮自媒体博客
    2015-08-12 19:38:49发表

  • 支付宝借条
    2015-08-12 11:41:22发表

    我也是一个网页设计爱好者。很好受用了。谢谢。

  • 阿龙博客
    2015-06-19 18:30:28发表

    还是等你的博客通知吧!

  • 段亮自媒体博客
    2015-06-19 16:51:19发表

    会的,或者加我

  • 阿龙博客
    2015-06-19 14:29:33发表

    那好啊,但我怎么知道你啥时候开设培训班呢?博客会有通知吗?很是期待。

  • 段亮自媒体博客
    2015-06-19 12:17:34发表

    等我后期,开设培训班,跟我学就是。分分钟学会,没什么难度

  • 阿龙博客
    2015-06-16 13:54:38发表

    这个对于我来说,是真心学不来。

  • 段亮自媒体博客
    2015-05-30 18:54:48发表

  • 未来De您
    2015-05-29 23:03:41发表

    感谢博主给了我一个学习的方向。

  • 马国辉
    2015-05-29 22:58:32发表

    感谢博主给了自学的我一个方向。

  • 营口婚纱摄影
    2015-05-08 22:56:53发表

    路过留个言

  • 呼叫中心
    2015-05-04 09:41:26发表

    博主文章写的不错,赞一个,欢迎互动我的网站,谢谢!~ 呼叫中心www.fuziseo.com

  • liguang
    2015-04-17 11:02:29发表

    谢谢分享

  • 段亮自媒体博客
    2015-04-11 15:43:51发表

    肯定啊!但是想要做网站,这就是基本,想做网页效果就必须学JS来写特效

  • t302969428
    2015-04-11 14:44:59发表

    我现在也在学习DIV+CSS、HTML,可是我发现,单纯学会这个也不行。还有动画效果诶。

  • 段亮自媒体博客
    2015-04-10 21:51:59发表

    我这篇文章基本就告诉你学习了方向,先从常见的html标签开始学,明白之后,在学CSS,理解CSS是个什么东西

  • 画册设计
    2015-04-10 21:48:52发表

    应该从那学起呢...

  • 段亮自媒体博客
    2015-04-09 18:40:40发表

    做SEO的,怎么能不懂代码呢?要是不懂,基本上就残废了一半

  • 画册设计
    2015-04-09 17:45:02发表

    我在做SEO呢,也想学习网页制作

  • hao2345导航
    2015-04-01 17:34:40发表

    很不错,又读了一遍

  • 段亮自媒体博客
    2015-03-27 21:35:57发表

    只有自己亲身经历过,分享出来的东西。我觉得才最有价值!

  • hao2345导航
    2015-03-27 15:00:48发表

    自己做的最容易引起共鸣

  • nora
    2015-03-17 12:11:07发表

    博主报的是什么培训课程?

  • 段亮自媒体博客
    2015-02-25 10:20:48发表

    前端就是兼容性比较麻烦点,只要你代码写的规范一点,基本没多大事的

  • Amateurs_ds
    2015-02-24 23:49:39发表

    解决小bug极其繁琐,令人抓狂

  • 段亮自媒体博客
    2015-02-24 11:14:29发表

    加油!

  • Amateurs_ds
    2015-02-01 23:58:03发表

    通过后盾网学css入了一点门,慢慢摸索,起码看得懂一些代码了

  • 银月飞星
    2015-01-29 00:16:06发表

    赞一个

  • 不起逼引
    2015-01-25 23:26:13发表

    赞一个

  • 建站爱好者
    2014-12-19 13:36:11发表

  • 杨雨涵
    2014-11-19 21:28:32发表

    我也在学习网页制作,谢谢分享

  • 段亮自媒体博客
    2014-10-20 23:10:42发表

    每个人的起点都不一样,要照顾下新手朋友们!

  • 上帝之手
    2014-10-20 20:50:04发表

    前面那感觉都不是事 我就关注JS 和其他的新特性

  • s星空s
    2014-10-14 18:12:59发表

    赞一个

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

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