设为首页收藏本站

ZMX - IT技术交流论坛 - 无限Perfect,追求梦想 - itzmx.com

 找回密码
 注册论坛

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

用百度帐号登录

只需两步,快速登录

搜索
查看: 1935|回复: 0

网页制作其实很简单

[复制链接]

签到天数: 18 天

[LV.4]偶尔看看III

发表于 2017/3/9 11:53 | 显示全部楼层 |阅读模式 |搜狗浏览器|Windows XP
天涯海角搜一下: 百度 谷歌 360 搜狗 有道 雅虎 必应 即刻
学网页制作先从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型人才”+项目经验+职业素养。深得学员一致好评。
欢迎光临IT技术交流论坛:http://bbs.itzmx.com/
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册论坛 新浪微博账号登陆用百度帐号登录

本版积分规则

手机版|Archiver|Mail me|网站地图|IT技术交流论坛 ( 闽ICP备13013206号-7 )

GMT+8, 2024/12/25 22:49 , Processed in 0.194964 second(s), 22 queries , MemCache On.

Powered by itzmx! X3.4

© 2011- sakura

快速回复 返回顶部 返回列表