1、认识网页：

a. 分析网页结构：header、banner、main、footer

b.  如何拆分网页：一级盒、二级盒、三级盒等

02、网页HTML：

a.  HTML：超文本标记语言(Hyper Text Markup Language)；

b.  网页由图片、链接、音频、视频、动画等组成的超文本；

超文本：可视化内容，表达含义丰富；

标记：有语义的单词

通过“标记”表现“超文本”

c.  HTML用来制作超文本文档的简单标记语言

d.  使用HTML语言描述的文件，需要通过web浏览器显示出效果

e.  HTML一直被用作web文档描述语言

03、万维网：

a.  www.即万维网(World Wide Web)，也称w3、www、web；

b.  “万维网”发明者：蒂姆·伯纳斯·李；

04、万维网联盟：

W3C万维网联盟(World Wide Web Consortium)

注：HTML符合万维网联盟标准和规范

05、PS基础(DW会使用到的PS知识点)：

a.  画面的缩放Crtl+加号/ Crtl+减号(Alt+鼠标滚轮)

b.  移动画面空格键配合鼠标左键

c.  标尺的使用显示/隐藏标尺Crtl+R

d.  选区高度宽度查看F8

e.  把单位变为像素：首选项(Ctrl+K)单位和标尺设置“像素”

06、PS切片工具(DW会使用到的PS知识点)：

01)．切片工具、切片选择工具快捷键C；

02)．“切片工具”的两大功能

a.  对网页结构进行拆分：

原则1逐级划分(一级盒、二级盒、三级盒等)；

原则21像素原则

b.  图片局部获取

03)．切片可以保存在图片里：文件保存后再次打开切片工具状态下，即可浏览切片;

04)．清除所有切片：视图菜单清除切片；

05)．删除单个切片：先选中切片，再Delete删除；

06)．“切片选择工具”的功能：

a.  选中切片(切片选中时边框为土黄色状态)；

b.  调节切片大小；

c.  双击切片还可以查看该切片区域的宽高

07)．“切片工具”与“切片选择工具”的转换：切片工具状态下，按住Ctrl；

08)．复制切片、加选切片：

a.  切片工具状态下按住Alt键可复制切片；

b.  按住Shift可以加选切片；

09). 移动切片：按住空格键，可以整体移动切片的位置；

10). 导出切片的方式：Ctrl+Shift+Alt+S(文件导出存储Web所用格式)；

注： a. 导航可以看做一个整体不需要划分级盒；

b. PS中“裁剪工具”“透视裁剪工具”快捷键也是C；

c. 四个一级盒结构header、banner、main、footer

07、PS网页存储方式-切片的导出的方式(DW会使用到的PS知识点)：

01)．D盘新建文件夹

02)．存储Web所用格式Ctrl+Shift+Alt+S(文件导出存储Web所用格式)

设置预设：Jpeg-高(图片质量高、文件小)JPEG、高、勾选优化

存储格式：HTML和图像(保存为：网页代码+切后的图片)

设置：默认设置

切片：所有切片

03)．存储格式：仅限图像(保存为：切后的单张图片)

设置：默认设置

切片：选中的切片 (注：保存在image文件夹中)

04)．同时存储切后的多张图片(在存储面板视图窗口中选择切片)

预设 ：Jpeg-高，

“切片选择工具”选中状态下(存储面板视图窗口左上角第二个图标)

存储格式：仅限图像

设置：默认设置

切片：选中的切片(注：保存在image文件夹中，image文件夹是系统自动生成的)

Shift加选切片

还可以用鼠标框选切片

注： a.  如果点击选中所选的切片效果不是很好，可以在存储面板的画面里用鼠标框选；

b.  case：案例 ；responsive响应式；image图片

c. “存储面板”缩放图片调整到适宜状态：Alt+鼠标滚轮；

d.  问题：当存储切片时，在预设中选择jpeg-高，发现导出的图片有jpeg和png两种

解决：在预设下面选择jpeg

08、新建HTML-Ctrl+N(文件(file)新建)：

空白页

文档类型(Page Type)：HTML；

布局(layout)：无；

文档类型(DocType)：HTML 4传统网页标准

XHTML 1.0 Transitional( 比4规范，选择学习)

注：XHTML1.0规定：

a. 标签必须小写字母；

b. 严格闭合标签；

c. 使用引号引起属性；

09、保存HTML-Ctrl+S (文件保存)

.html网页格式；

Eg：命名为index，最终效果为index.html(默认首页)

10、命名：

对项目、文件夹、图片等名称要保存英文名称，这样DW软件中涉及的链接路径才不会出现不识别状态.    Eg：F12预览时，生成的中文路径IE浏览器不能识别

11、代码文件打开方法：

方法一：代码文件右键打开方式选择DWcc2015;

方法二：打开DW代码文件拖拽进去;

12、折叠代码方法：

折叠代码Ctrl+Shift+J，双击就能展开;

补充：

a. 代码：静态的页面(文字或图片)在浏览器中最终实现预览效果

b. DW中连续多选行的方法：先选中起始行，按shift不松手选中尾行

c. 在DW中双击文字可以选中文字

d. 显示行数设置方法：方法1：查看代码视图选项行数

方法2：行号工具

(每周四更新，尽情期待)

作者：小凤凤zero

链接：https://www.jianshu.com/p/c81a21dfb615