垃圾博客

  1. 首页
  2. 文章

如何学习网页制作（个人经验）

发布时间：2017-10-15 13:03
作者：asd

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

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

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

努力.jpg

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

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

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


(一)html标签部分

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

比如：

123456789101112131415161718192021222324252627282930      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的几种引用方式

12345678910111213

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


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。

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

1
2
3
4
5
6
7
8
9
10
11


<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

扫一扫在手机上阅读本文章

版权所有© 垃圾博客    技术支持： 竹子建站
该网站使用竹子建站创建 立即创建