学习网页制作

 【写在前面】

 

其实从去年就开始接触网页编程了，那时候因为一个项目学习了PHP和MySQL,当时只是很没有技术含量地开发了一个班级网页，结果后来因为空间奔溃而不了了之。现在2012年暑假又重新学习了一下css，感觉有了明显的进步，设计的东西也显得更加美了，当然技术方面还有待提高。其实学习网页制作门槛比较低，稍微有写过博客的人都应该会，大部分IT人士以及博主都能写出很漂亮的页面。DL说“CSS是一门艺术”，我想也的确是。今天写下这篇，总结一下我之前的疑问，同时帮助更多想学习网页设计的同学找一种更加简单易行的办法。

 

疑问：

 

1、那些网页是怎么做得那么漂亮的呀？比如圆角以及镜面渲染。

2、学习网页制作要学习些什么？

3、怎样的网页设计才是好的设计？

 

下面就通过阐述我的学习历程，来发现这些问题的答案。

 

【学习网页制作第一站——html】

 

学习网页制作，一般先学习HTML语言，这是专门用来作为网页文档的脚本语言（也有人叫它编程语言）。HTML用一些标签（tags）来格式化网页的内容。比如：

 

<h1>

我是一个大标题

</h1>

 

就是将“我是一个大标题”作为大标题。这样通过一些tags，就可以将一些块元素和内联元素组装到html文档里面。学习html就是学习各种各样的标签，段落、表格、div等等，通过网络上的一些教程，可以在几小时或者几天之内掌握基本的一些元素以及他们的使用方法。这时候应该找一个好的网站，例如 w3school,里面有一整套的网络编程教程，按照它的流程学习下来（html->css->javaScript->php），相信会受益匪浅。当然也可以买一两本书来学习， 《head first html and css》就很不错，可以在看书的过程中立马学会怎样编写html文档。往后则学习CSS，CSS是层叠样式表，它可以让你的网页看起来更加漂亮，没错，那些漂亮的圆角以及渲染效果都是CSS做的，以前我一直以为是用ps搞出来的，原来CSS是如此的神奇。

 

【学习网页制作进阶——css和javaScript】

 

学习了html，就应该在自己的计算机上用dreamweaver或者nvu试试，可以任选一款编辑器编辑网页文档。我目前比较喜欢在linux下用bluefish或者Gvim直接编写html文档，然后在本地用浏览器打开即可查看效果。html里面很重要的一些元素是需要理解的，比如div元素将逻辑上为一个整体的各个元素圈在一起。还有一个很厉害的属性是float，使得网页可以漂浮在左边或者右边。这时，你应该会用css的-webkit等来渲染网页，从而做出很美的效果。

 

例如上图中的好看的标题底图是用下面的css做的：

 

h2{

          padding: 10px;

          background-image: -webkit-gradient(linear,left top,left bottom,from(#ccc),to(#fff));   

            /*指定背景图片是一个由颜色#ccc渐变到#fff的样式*/

          -webkit-border-top-left-radius:5px;       /*设定边框的角的半径，就是倒角（圆角）*/

         -webkit-border-top-right-radius:5px;

      }

 

还可以使用background-color属性，绘制透明的背景：

#content {

        background-color: rgba(0,0,0,0.2);         /*透明的黑色，透明度0.8，alpha值表示透明度*/

        size: auto;

        padding:  20px;

        margin: auto;

         -webkit-border-top-left-radius:5px;

         -webkit-border-top-right-radius:5px;

         -webkit-border-bottom-left-radius:5px;

         -webkit-border-bottom-right-radius:5px;

    }

总之有了CSS，一切都变得很容易。

接下来就要学习一些浏览器端的脚本语言了，例如javaScript。因为服务器不可能时时刻刻和客户端浏览器进行互动，这就需要客户端有脚本语言来相应客户的操作，让用户觉得没有受到冷落（例如我想看到网页上有个时钟，服务器不可能每秒钟发信息来刷新时间，这种任务最好交给浏览器来做，在本机上可以随时刷新时间）。学习javascript也能做出很强悍的效果，这时一般要下载别人写的库，例如jquery，可以写成很炫的上拉下拉、淡入淡出等效果。蚂蚁师兄说过“javascript甚至可以在网页上模拟一个操作系统的桌面”，不信的同学可以去ubuntu的官网看看 http://www.ubuntu.com/tour/en/简直炫瞎了。学习jquery也可以到w3school去，那里真的是个宝库。学习网页制作要学习很多东西，从html到css再到javascript然后到php，最后可能会接触linux服务器以及网络编程，不管怎样这个过程是必须的，我们也能从中获取很多乐趣。

 

【做出好的网页】

 

bibo自身也没有怎么好好学习php编程，只是稍微接触过，要做出真正有用的网站，还得继续深入学习php。但是在这里，我还想讨论一些怎样做出好的网页。我认为好的网页：

1、在外观上典雅大方，能够突出文档内容

2、在编码程序上，能够做到简洁，简单即是美

 

虽然我自己没有多少设计网页的经验，但是品位还是不差的，有些国内网页做得很糟糕，可能内容没有多少，但是挂的广告却是——满天飞。一流的网页设计者绝对不会让网页看起来杂乱不堪，他们利用各种布局技术，将内容整洁放置。甚至有简单到 极致者，只有一个背景图片，再没有多余的效果以及渲染。

  

 

在代码上也能清晰明了，使人能读懂。css代码指哪打哪，javascript也物尽其用。修炼之道还很长很长，通过努力，我们也能到达这个境界。

 

 ps:编写html代码也要注意规范化以及测试等问题

 

by bibodeng   2012-07-18 原载于 bibodeng think beyond