您好,欢迎访问本站博客!登录后台查看权限
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 网站所有资源均来自网络,如有侵权请联系站长删除!

网页制作个人小经验

网站制作学习 Mlingkun 2019-06-29 56 次浏览 0个评论

许多年后的今天,互联网离我们已经越来越近了,而各式网站也进入了人们的生活,想要自己制作这些网页也不是那么难的事情了,俗话说的好,师傅领进门修行在个人,等到入门了以后就简单了。

记住不管学什么,一定得找到适合自己的学习方法来学习,这样学东西才会起到事半功倍的效果。

接下来就跟大家一起谈谈:网页制作到底该怎么学?以及我分享我学习网页制作这一年来的一些经验和总结吧!

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

一、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语法

1413276182139155.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开发出来的一个类库,比较容易上手,有良好的文档和帮助手册。可以用更少的代码,完成更多的功能。

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

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

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

已有 56 位网友参与,快来吐槽:

发表评论