重构入门培训 2013年12月22日　 厚朴工作室 前端设计组　郭娟

目录 网页制作 流程 重构基础 知识 典型问题 解决 网页制作 现场演示

网页制作流程 设计 切片 重构

网页设计流程 So，啥叫重构！

网页制作流程 将设计稿转换成web页面

重构基础知识 网页制作 流程 重构基础 知识 典型问题 解决 网页制作 现场演示

PK 重构基础知识 基于table布局 1、无法实现表现与内容分离 2、冗余代码多 基于DIV+CSS布局 1、表现与内容分离 2、提高页面加载速度 3、代码精简 4、易于维护和修改 5、搜索引擎友好 基于table布局 1、无法实现表现与内容分离 2、冗余代码多 3、维护与修改不变 4、嵌套问题 5、搜索引擎不友好 PK

重构基础知识 将设计稿转换成web页面 表现。 房屋的砖、瓦、墙等装饰性元素。 (X)HTML WEB 组成 CSS JavaScript 结构。 房屋的基础。 将设计稿转换成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>　定义无序列表，跟li联用；　　　 　 <ol>　定义有序列表，跟li联用； <li>　定义列表项目； 　　　 <ul class=“nav”> <li>栏目1</li> <li>栏目2</li> <li>栏目4</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 content padding padding content margin border

重构基础知识 盒子实际所占宽度= width + padding-left + padding-right + border-left + border-right + margin-left + margin-right; 盒子实际所占高度=height +padding-top + padding-bottom +border- top + 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、文章列表等。

典型问题解决 网页制作 流程 重构基础 知识 典型问题 解决 网页制作 现场演示

典型问题解决 如何切片 按需切片。 网页中的图片分为装饰性图片与内容性图片。 可通过“background-repeat”属性实现重复的只切1px。 语义化命名。

典型问题解决 Table代码的消除 使用FW或PS导出的html文件是使用table标签构建页面框架的，应删除 body标签内的所有代码。

典型问题解决 代码格式 HTML 嵌套缩进 CSS 不要缩进 每条规则写在一行

典型问题解决 如何加网页链接 在a标签中的href属性中将值改为要链接的页面的路径 使用DW工具

典型问题解决 如何实现网页居中 在CSS中给外层最大容器添加属性margin:0 auto jQuery的引入

典型问题解决 网页制作 流程 重构基础 知识 典型问题 解决 网页制作 现场演示

前端设计组 设计 摄影 美工 （女）汉纸 前端设计组 重构 妹纸 吃货 大厨

谢谢！