(一)简介
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 版本)、xml。
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
* 表现标准:css
* 行为:ECMAscript(ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。在日常场合,这两个词是可以互换的。)
4. HTML:HyperText Markup Language超文本标记语言,它是标记语言,但不是编程语言,因为它不需要编译可以由浏览器直接解释执行
a. 超文本:具有音频、视频、图片、超链接等的文件
b. 标记:也叫标签,由尖括号和标签名构成,分为单标记和双标记
* 单标记:<img />
* 双标记:<p></p>
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. 图像标签:<img />
* 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
?