没有合适的资源?快使用搜索试试~ 我知道了~
WEB前端设计课程资料整理.docx
0 下载量 185 浏览量
2023-07-04
01:02:25
上传
评论
收藏 2.27MB DOCX 举报
温馨提示
试读
121页
WEB前端设计课程资料整理.docx
资源推荐
资源详情
资源评论
WEB 前端设计师是什么?
前端设计师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过 5 年。
但是,随着 Web2.0 概念的普及和 W3C 组织的推广,网站重构的影响力正以惊人的速度增长。
XHTML+CSS 布局、DHTML 像一阵旋风,铺天盖地地席卷而来,包括新浪、搜狐、网易、腾讯、
淘宝等在内的各种规模的 IT 企业都对自己的网站进行了重构。
在互联网的演化进程中,网页制作是 Web1.0 时代产物,那时网站的主要内容是静态的,
用户使用网站的行为也以浏览为主。2005 年以后,互联网进入 Web2.0 时代,各种类似桌面
软件的 Web 应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一
的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了
更好的使用体验,这些都是基于 web 前端技术实现的。
随着人们对用户体验的要求越来越高,前端开发的技术难度越来越大,前端设计师这一
职业开发技术包括四个要素:图形设计、HTML、CSS 和 JavaScript,但随着市场的需求发展,
服务器端语言也将是前端开发设计师应该掌握的。前端设计师既要与上游的交互设计师,视
觉设计师和产品经理沟通,又要与下游的服务器端工程师沟通,需要掌握的技能非常多。这
就从知识的广度上对前端设计师提出了要求。如果要精于前端开发这一行,也许要先精十行。
然而,全才总是少有的。所以,对于不太重要的知识,我们只需要“通”即可。但“通”到
什么程度才是够用呢?对于很多初级前端设计师来说这个问题是非常令人迷惑的。重要的是
前端开发的门槛其实非常低,与服务器端语言先慢后快的学习曲线相比,前端开发的学习曲
线是先快后慢。所以,对于从事 IT 工作的人来说,前端开发是个不错的初入点。也正因为
如此,前端开发的领域有很多自学成“才”的同行,但大多数人都停留在会用的阶段,因为
后面的学习曲线越来越陡峭,每前进一步都很难。另一个方面,正如前面所说,前端开发是
个非常新的职业,对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不是
闪现出来,例如 CSS sprite、负边距布局、栅格布局等;各种 JavaScript 框架层出不穷,
为整个前端开发领域注入了巨大的活力;浏览器大战也越来越白热化,跨浏览器兼容方案依
然是五花八门。为了满足“高可维护性”的需要,我们需要更深入,更系统地去掌握前端知
识,这样才可能创建一个好的前端架构,保证代码的质量。
第一阶段 图形设计
主讲:Adobe Fireworks 和 Adobe Flash(辅修:Adobe Photoshop)
一、 Adobe Fireworks
1、 Fireworks 简介
2、 Fireworks 矢量图与位图
3、 Fireworks 基础工具与运用
4、 Fireworks 层与蒙版
5、 Fireworks 网站实例
网站效果图
二、 Adobe Flash
1、 Adobe Flash 简介
2、 Adobe Flash 基础工具与运用
3、 Adobe Flash 时间轴介绍
4、 Adobe Flash 动画设计
5、 Adobe Flash 轨迹动画和遮罩动画
6、 Adobe Flash 按钮制作
7、 Adobe Flash 处理图形对象
8、 Adobe Flash 音频处理.
9、 Adobe Flash 基础代码
10、 Adobe Flash 贺卡制作
11、 Adobe Flash MTV 制作
12、 Adobe Flash 导航制作
Flash 作品效果图
第二阶段 HTML 语言
主讲:HTML 的基础语言
一、什么是 HTML 语言
HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种
语言,由 W3C(World Wide Web Consortium)所制定和更新。我们可以用任何一种文本编译起
来编辑 HTML 文件,因为它就是一总纯文本文件。
HTML 语言的基本结构
下面我们来看一小段 HTML 语言的代码,来了解 HTML 语言的基本结构:
<html>
<head>
<title>HTML 语言的基本结构</title>
</head>
<body>
HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语
言。
</body>
</html>
将这一小段代码粘贴至文本文件中,然后选择“另存为”,将文件的后缀名改为.htm 或者.html
即可,然后再所在的目录下就可看到一个 IE 的图标,名字就是你所存的文件名称。
<html>…… ……</html> 这是声明 HTML 文件的语法格式。每一个 HTML 文件,都必须以
<HTML>开头,以</HTML>结束。
<head>…… ……</head> 这是文件头声明的语法格式。在这之内的所有文字都属于文件的
文件头,并不属于文件本体。
<title>…… ……</title> 这是声明文件标题的语法格式。在这之中写下的所有内容,都将写
在网页最上面的标题栏中。
<body>…… ……</body> 这是声明文件主体的语法格式。在者之间写下的内容都是文件的
主体,也就是说将会被显示在客户区之中。
注意:几乎每一种 HTML 语言的语法都是以<>开头,以</>结束。在编辑 HTML 语言过程中,
也可以使用注释。语法格式为:<!-文件注释->。就好像 C 语言中的 /* …… …… */ 一样,
中间的内容只是解释说明,并不被编译器所编译。
二、HTML 语言的基本单位
1. 长度单位
长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性,同
时也可以用来定义这些对象在页面上的位置等属性,用来描述页面上可能遇到的各种长度。
长度的表示方法有两种:绝对长度和相对长度。他们的单位都是像素(pixel)和百分比
(%),像素代表的是屏幕上的每个点,而百分比代表的是相对于客户区的多少。下面我们就
以水平线的宽度为例,说明这两种表示方法。
<html>
<head>
<title>HTML 语言的长度表示</title>
</head>
<body>
HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语
言。
<hr width="500"> <!绝对长度的声明>
<hr width="50%"> <!相对长度的声明>
</body>
</html>
在文本编译器中编译,改变网页的大小,就会看到这两者表示长度方法的不同。
其中 <hr> 标记是在页面上建立水平线的标记。width 是水平线元素中的一种属性,用
来表示水平线的宽度。这里 width="500"即表示这个水平线的宽度是 500 像素;width="%50"
即表示水平线占据客户区的总宽度的%50。
2. 颜色单位
和长度单位一样,颜色单位也是描述页面表现形式的一种很重要的的数据类型。颜色单
位有三种表示方法:16 进制颜色代码、10 进制 RGB 码、直接颜色名称。这三种表示方法不
同,但是效果却是一样的。下面用一小段代码说明这三种颜色的表示方法。
<html>
<head>
<title>HTML 语言中颜色的不同表示方法</title>
</head>
<body>
剩余120页未读,继续阅读
资源评论
zzzzl333
- 粉丝: 689
- 资源: 7万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功