（一）简介

1. 网站和网页的区别

   a. 网站和网页是不同的概念
   b. 网站包含网页，网页是用来显示内容的一个页面，网站是网页的集合
   c. 网站的第一个页面被称为首页（或叫主页），默认的名称为index.html/default.html

2. 网页浏览工具——浏览器

   a. 主流浏览器：IE(Trident)、谷歌(webkit)、火狐(gecko)、苹果、欧朋(blink)

3. W3C组织

   a. World WideWeb Consortium万维网联盟
   b. 1994年创立，非盈利性组织，是Web领域最具有权威的组织，web标准的制定者和推荐值
   c. 它认为网页被分为三部分：结构、表现、行为

   • 结构标准：XHTML（XHTML可扩展超文本标记语言 是更严谨更纯净的 HTML 版本。
     XHTML 元素必须被正确地嵌套。
     XHTML 元素必须被关闭。
     标签名必须用小写字母。
     XHTML 文档必须拥有根元素。
     ）、xml
   • 表现标准：css
   • 行为：ECMAscript（ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。）

4. HTML：HyperText Markup Language超文本标记语言，它是标记语言，但不是编程语言，因为它不需要编译可以由浏览器直接解释执行

   a. 超文本：具有音频、视频、图片、超链接等的文件
   b. 标记：也叫标签，由尖括号和标签名构成，分为单标记和双标记

   • 单标记:
   • 双标记:

5. 网页的编辑工具——sublime text3，需要记住他的快捷键

   a. 新建：Ctrl+N
   b. 保存：Ctrl+S
   c. 复制光标所在行：Ctrl+shift+D
   d. 删除光标所在行：Ctrl+shift+K
   e. 注释/取消注释：Ctrl+/
   f. 向上移动光标所在行：Ctrl+shift+向上的方向键
   g. 向下移动光标所在行：Ctrl+shift+向下的方向键
   h. 向右缩进：Tab
   i. 去除缩进：shift+Tab
   j. Ctrl+鼠标滚轮
   k. 返回：Ctrl+z

6. 常用的标记

   a. <p>标记：用来修饰大量文本
   b. h标记：用来修饰标题，附加效果为加粗、h1字号最大，h6字号最小
   <h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
   c. <br />换行标记
   d. 符号

   • 空格： 
   • 小于号：<
   • 大于号：>
   • 双引号："
   • 版权符号：©
   • 注册商标：®

   e. 列表：无序列表、有序列表、定义列表

   • 无序列表

     <ul  type=”disc/circle/square”>
              <li></li>
              …..
     </ul>

   • 有序列表

     <ol  type=”1,a,A,i,I”  start=”数值”>
              <li></li>
              ….
     </ol>

   • 定义列表

     <dl>
              <dt></dt>
              <dd></dd>
              ….
     </dl>

   f. 图像标签：

   • src：图像的地址路径
   • width：宽度，属性值可以是像素值、百分比
   • height：高度，属性值为像素值
   • alt：当图片无法正常加载时的替代文字，一般写图片的名字或对图片内容的描述信息
   • title：鼠标悬停在图片上时的提示文字

   g. 路径：相对路径、绝对路径

   • 相对路径：三种情况
   • 绝对路径：从盘符或协议开始写的路径（了解）

   h. 站点的管理

（二）Photoshop的基本操作

1. 放大、缩小

   a. 放大：Ctrl+加号
   b. 缩小：Ctrl+减号
   c. 或者使用工具栏中的缩放工具，直接点击图片就是放大，alt+放大工具就是缩小，在放大工具上面双击鼠标左键就是100%比例，或者ctrl+数字1也可以100%显示。
   d. Alt+鼠标滚轮

2. 选择：使用矩形选择工具

   a. 取消选区：Ctrl+D
   b. 变换选区：在选区上面点击鼠标右键——“变换选区”
   c. 增加选区：Shift+矩形选择工具
   d. 减小选区：Alt+矩形选择工具

3. 显示/隐藏信息面板：F8或者窗口——“信息”
4. 临时抓手工具：空格+鼠标左键
5. 显示/隐藏标尺：Ctrl+R，在标尺上面点击鼠标右键，可以设置单位，要求设置为像素

6. 参考线：

   a. 水平参考线：用鼠标左键按住水平标尺向下拉动
   b. 垂直参考线：用鼠标左键按住垂直标尺向右拉动
   c. 隐藏参考线：视图——显示——参考线
   d. 删除参考线：从哪里来，到哪里去，如果要一次性删除，可以到视图——清除参考线
   e. 如果要调节参考线的位置，使用移动工具进行拖动

7. 吸管工具的使用（用来拾取效果图中的颜色）：在要拾取的颜色上面点击鼠标右键——拷贝颜色十六进制代码

8. 切片工具的使用：所谓切片工具作用就是从效果图中截取我们想要的图片

   a. 步骤：点击切片工具——在要截取的图片上按住鼠标左键拖动——在选好的图片上双击鼠标左键——命名——点击文件菜单——存储为Web所用格式——可以设置图片的格式和切片选项（选中切片）——保存

9. 可以使用矩形选择工具来截取图片，步骤为：选择——复制（Ctrl+C）——Ctrl+N——Ctrl+V