培训PPT

Download Report

Transcript 培训PPT 

重构入门培训
2013年12月22日
厚朴工作室
前端设计组
郭娟
目录
网页制作
流程
重构基础
知识
典型问题
解决
网页制作
现场演示
网页制作流程
设计
切片
重构
网页设计流程
So，啥叫重构！
网页制作流程
将设计稿转换成web页面
重构基础知识
网页制作
流程
重构基础
知识
典型问题
解决
网页制作
现场演示
重构基础知识
基于table布局
基于DIV+CSS布局
1、表现与内容分离
2、提高页面加载速度
3、代码精简
4、易于维护和修改
5、搜索引擎友好
P
K
1、无法实现表现与内容
分离
2、冗余代码多
3、维护与修改不变
4、嵌套问题
5、搜索引擎不友好
重构基础知识
结构。
(X)HTML
将设计稿转换成web页面
房屋的基础。
WEB
组成
CSS
表现。
房屋的砖、瓦、墙等装饰性元素。
行为。
JavaScript 会飞的房子！！！
重构基础知识
PART1：HTML
重构基础知识
• HTML定义
HTML，Hyper Text Mark-up Language（超文本标记语言）；
HTML被用来结构化信息——例如标题、段落和列表等等。
XHTML 是更严谨更纯净的 HTML 版本。
• 目前所使用版本大多为HTML4.01。
重构基础知识
• HTML文档结构
DOCTYPE（文档类型）
head
body
重构基础知识
• HTML组成
标签
由开始标签和结束标签组成；
元素
从开始标签到结束标签的所有代码；行内元素、块状元素。
属性
属性
属性值
属性值
元素内容
<a href=“链接路径” title=“链接标题” >厚朴工作室前端设计组</a>
开始标签
结束标签
重构基础知识
• 行内元素&块状元素
常用块状元素： div、h1～h6、ol、ul、li、table、form、dl、dd、dt······
常见行内元素有：span、strong、a、em、img、input、label等；
块状元素单独占据一行；行内元素不会单独占据一行；
块状元素
行内元素
display:inline
display:block
行内元素
块状元素
重构基础知识
• 常用HTML标签
<link>
定义文档与外部资源的关系；最常见的用途是链接样式表。
<link href=“css/index.css” rel=“stylesheet” type=“text/css” />
<style> 为 HTML 文档定义样式信息;
<div style=“background:red;”></div>
<script> 标签用于定义客户端脚本，比如 JavaScript；
<script type="text/javascript“ src=“js/slider.js”></script>
重构基础知识
• 常用HTML标签
<div>
<ul class=“nav”>
<li>栏目1</li>
定义文档中的分区或节
<li>栏目2</li>
<li>栏目4</li>
<ul> 定义无序列表，跟li联用；
<ol> 定义有序列表，跟li联用；
<li> 定义列表项目；
</ul>
<ol class=“nav”>
<li>栏目1</li>
<li>栏目2</li>
<li>栏目4</li>
</ol>
重构基础知识
• 常用HTML标签
<img>
向网页中插入图片。（内容性图片）注意添加alt属性。
<img src=“图片路径” alt=“” />
<a> 创建超链接。
<a href=“路径” title=“厚朴工作室”>厚朴工作室</a>
<h1~h6>
标题；h1为一级标题、h2为二级标题，以此类推。
<h1>我是老大！</h1>
重构基础知识
• 常用HTML标签
<p> 段落
<p>这是一个段落</p>
<br> 换行
<p＞厚朴工作室前端设计组是一个很有活力、学习氛围非常浓厚的组，
在前端设计组，你可以学到数码、编程、美工设计······收获多多呀~<br /> 师弟
师妹们快来加入吧~</p>
重构基础知识
PART2：CSS
重构基础知识
• CSS定义
CSS,即层叠样式表，定义如何显示HTML元素。
• CSS组成
CSS规则=选择器+声明； selector {declaration1; declaration2; ...}
声明=属性+属性值；selector {property1: value; property2: value; ...}
.banner {width:960px;height:150px;margin-bottom:20px;}
选择器
属性
属性值
声明
重构基础知识
• 选择器
1、元素选择器
选择某个元素；ｐ{color:red;}
2、类选择器
将class属性指定为某一值使类选择器与元素相关联；
类名前加点号，区分大小写；
实例：
HTML：<p class=“test”>类选择器</p>
CSS：.test{font-size:14px;}
重构基础知识
• 选择器
3、id选择器
与类选择器类似，但引用的是ID属性中的值；
id名前加#，区分大小写；
注意，id 属性只能在每个 HTML 文档中出现一次。
实例：
HTML <div id=“footer”></div>
CSS
#footer {color:red;}
重构基础知识
• 选择器
3、伪类选择器
a:hover {color:blue;}
4、属性选择器
5、后代选择器
6、通配选择器
7、包含选择器
重构基础知识
• 选择器
3、伪类选择器
a:hover {color:blue;}
4、属性选择器
5、后代选择器
6、通配选择器
7、包含选择器
重构基础知识
• CSS属性
字体属性
文本属性
背景属性
布局属性
方框属性
列表属性
重构基础知识
PART3：盒模型
重构基础知识
margin
padding
content
padding
margin
content
border
重构基础知识
盒子实际所占宽度= width + padding-left + padding-right + border-left
+ border-right + margin-left + margin-right;
盒子实际所占高度=height +padding-top + padding-bottom +bordertop + border-bottom + margin-top + margin-bottom;
重构基础知识
PART4：定位
重构基础知识
• 相对定位
position:relative
• 绝对定位
绝对定位的元素不占文档流。
position:abosolute
• 固定定位
position:fixed
重构基础知识
PART3：浮动
重构基础知识
• float 属性定义元素在哪个方向浮动。
• 任何元素都可以浮动。
当给行内元素加上浮动属性后，行内元素会自动变为块状元素。
重构基础知识
• 浮动元素会脱离文档流
• 指定宽度
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地
窄。
重构基础知识
PART3：清除浮动
重构基础知识
PART3：语义化
重构基础知识
WHY?
无障碍
便于团队开发
便于后期修改
啥玩意！
重构基础知识
• 如何语义化？
合理使用HTML标签。
很多HTML标签有自身含义，编辑页面时应根据每个标签的含义合理使用。
如使用p标签表示一个段落，使用table标签表示一个表格。
重构基础知识
•
如何语义化？
类名、ID名命名语义化
大多数网页的框架基本相同，例如首页一般有banner、导航条、slider、文章列表等。
典型问题解决
网页制作
流程
重构基础
知识
典型问题
解决
网页制作
现场演示
典型问题解决
1. 如何切片
按需切片。
网页中的图片分为装饰性图片与内容性图片。
可通过“background-repeat”属性实现重复的只切1px。
语义化命名。
典型问题解决
2. Table代码的消除
使用FW或PS导出的html文件是使用table标签构建页面框架的，应删除
body标签内的所有代码。
典型问题解决
3. 代码格式
HTML
嵌套缩进
CSS
不要缩进
每条规则写在一行
典型问题解决
4. 如何加网页链接
在a标签中的href属性中将值改为要链接的页面的路径
使用DW工具
典型问题解决
5. 如何实现网页居中
在CSS中给外层最大容器添加属性margin:0 auto
6. jQuery的引入
典型问题解决
网页制作
流程
重构基础
知识
典型问题
解决
网页制作
现场演示
前端设计组
设计
摄影
重构
美工
前端设计组
（女）汉纸
妹纸
吃货
大厨
谢谢！