网页制作其实很简单

深蓝一生 · 发表于 2017/3/9 11:53

学网页制作先从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语法

　　(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)理解：浮动和清除浮动以及定位
　　其实我觉得在CSS中只有两点需要重点去理解：一是：浮动和清除浮动。二是：定位。只要你深刻明白这点两点了，我相信CSS部分应该没有多大难题。
　　为什么这么说呢？因为接触很多新手朋友们，大多数都不理解为什么用了浮动后又要"清除浮动"，以及这清除浮动的含义是什么。
　　其实用清除浮动主要是为了防止网页产生一些异常的小BUG，比如：网页错位。相信很多人新手朋友都遇到过这样的问题：“为什么我的网页会错位啊，没有按正常情况下布局摆放”。
　　其实这类情况，大多数都是为清除浮动产生的，由此可见“清除浮动的重要性”。
　　在定位方面：一定要理解三种定位的含义：相对定位（position:relative）绝对定位（position:absolute）还有position:fixed相对于浏览器定位。
　　其中我觉得最需要理解的是绝对定位，因为绝对定位是相对于某个元素来定位的。比如说：
　　<html>
　　<body>
　　<div id="box">
　　<p style="position:absolute;top:100px;left:200px;">我是绝对定位哦！</p>
　　</div>
　　</body>
　　</html>
　　思路：如果给一个元素绝对定位，那么它就会向外层一直寻找相对定位。如果找到有个地方用了相对定位，则相对于它定位。如果都没有找到。则相对于浏览器来定位。由此可见P元素是相对于浏览器来定位的，因为他的父级DIV没有相对定位。
　　（三）布局
　　其实布局，就是把一个个DIV模块组合起来，利用CSS来布局。这里我写一个最常见的布局框架
　　（四）关于JS特效（java/jquery）
　　关于java和jquery的学习，我觉得前期新手没必要去深入学习，只需要会使用这些特效就行。如果以后走web前端这块发展的话，我建议去了解学习java，重点去学习jquery。因为jquery是基于java开发出来的一个类库,比较容易上手，有良好的文档和帮助手册。可以用更少的代码，完成更多的功能。
IT行业对人才的需求量大，薪资高、前景好，西安华育国际紧跟IT市场需求导向，积极为广大学员提供符合市场需要的软件开发技术，一对一的职业规划及就业指导，边工作边学习，实现“T型人才”+项目经验+职业素养。深得学员一致好评。

帐号		自动登录	找回密码
密码			注册论坛