web前端工程师—开发工具

前端开发工具技巧介绍----Dreamweaver

1-1 简介及站点管理

1.站点的概念

    保存编写好的网页和其他相关资源文件的电脑或服务器，一个网站就是一个站点

2.Dreamweaver的功能

    对各种格式的网页文件（本质都是文本文件）编辑，并提供了对这些文件相关代码的智能提示，使操作更方便；管理站点

3.本地站点和网络站点

    为本地站点设置远程的服务器站点，在本地编辑网页文件，一旦完成之后，将这些文件上传到网络的服务器上

1-2 工作区概述及预览设置

1.工作区分为三类：代码窗口、设计窗口、实时视图窗口

2.实时视图窗口中的网页效果是Chrome浏览器的

1-3 首选参数的设置

    首选参数是对整个界面的设置，可以调整文本格式、字体、窗口颜色、大小等，且无恢复默认值选项

1-4 关联标签及常用工具介绍

1.折叠

2.扩展

3.行号

4.高亮显示无效代码

5.选择父标签

6.选取当前代码段

1-5 智能提示功能

    Dreamveaver Cs6针对不同脚本语言有相应的智能提示

1.HTML 内置所有标签

2.CSS 内置所有属性列表

3.javascript   a.用不同颜色标志内置函数  

                     b.用不同颜色或加粗标记关键字和保留字

                     c.错误时行号提示

                     d.操作提示

4.jquery 内置库，属性（方法）提示

1-6 设计窗口功能介绍

1.作为一名专业的开发人员，设计窗口应作为网页效果的参考，而不应在其中插入表格等，会引入冗余代码

2.PC、智能手机、平板电脑分辨率不同，使用{多屏幕按钮}调整分辨率，实时显示

3.{可视化处理}->{CSS布局背景}为<div>块文档渲染上不同颜色

1-7 W3C验证及浏览器兼容性

1-8 CSS面板介绍

功能：链接样式表：a.代码窗口中编辑

                                b.{CSS样式}窗口中{附加样式表}按钮

          编辑样式表：a.代码窗口中编辑

                                b.{CSS样式}窗口中{编辑样式}按钮

          {禁用/启用CSS属性}：用来调试样式

          {CSS样式}中{当前}标签下，在代码窗口中选定的标签的样式会被显示出来，并定位相应的CSS属性

1-9 属性面板和文件面板