DW的基础知识有哪些？

1、认识网页：

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

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

02、网页HTML：

a.HTML：超文本标记语言（HyperTextMarkupLanguage）；

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

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

标记：有语义的单词

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

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

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

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

03、万维网：

a.www.即万维网（WorldWideWeb），也称w3、www、web；

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

04、万维网联盟：

W3C万维网联盟（WorldWideWebConsortium）

注：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）新建）：

空白页

文档类型（PageType）：HTML；

布局（layout）：无；

文档类型（DocType）：HTML4传统网页标准

XHTML1.0Transitional（比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：查看代码视图选项行数

福州贝纳设计学校：http://fjbnsj.91soxue.com/

上一篇: 平面广告设计师应具备哪些特点     下一篇: 福州贝纳设计学校告诉大家室内设计包含哪些