1、Step 网页和HTML,陈鹏,内容目录,网页是一段有格式规定的文本 网页的格式简述HTML 从HTML到页面三元素 常见标签 HTML、BODY、FONT、B、U、I TABLE、TR、TD 网页嵌套：FRAME和IFRAME 图像和Plug-ins 图像（静态和动态） 网页中的Plug-ins对象 CSS 丰富的格式,网页就是一段文本,网页实际上是一段文本 用记事本打开查看可能是： Hello 用浏览器打开查看就显示为： Hello 这段文本必须遵循某种格式规定来编写，这个格式规定就是HTML,内容目录,网页是一段有格式规定的文本 网页的格式简述HTML 从HTML到页面三元素 常见标签
2、HTML、BODY、FONT、A、B、U、I TABLE、TR、TD 网页嵌套：FRAME和IFRAME 图像和Plug-ins 图像（静态和动态） 网页中的Plug-ins对象 CSS 丰富的格式,HTML何谓HTML,Hypertext Markup Language,超文本链接标记语言，是一种直译式语言 简单的说，就是一个标记出文字、图形、声音等元素在Page上要如何显示的规则而已，它必须通过浏览器（Browser 如 Netscape Navigator 、 IE 等）才能看到它的执行结果 。 要编辑HTML可通过一般的文本处理软件，如记事本、 EditPlus 等，也有一些专门用来编
3、写HTML的软件：FrontPage、DreamWeaver,从HTML到页面三元素,人的接收信息途径网页上的表现手段 Hypertext Markup Language,超文本链接标示语言 通过浏览器的解析，显示为网页上的表现 页面三元素 文本 字体、颜色、大小 布局（左中右）、修饰（粗斜下划线等） 图像 静态图像：JPG、JPEG、Gif、VML 动态图像：Gif、Flash、Java、JavaScript、视频流 声音 Midi、Wave,HTML文件结构, 标题 主要HTML文件的内容写在这里,HTML文件示例, 我的第一份HTML文件 粗体字型 斜体字型 下划线字型 例子例子例子,H
4、TML, SIZE COLOR FACE 如： ,HTML, Href=URL Target _self、_parent、_blank、其他名字 路径问题 设当前页面URL为：http:/ 绝对路径：http:/ 路径：xxx.htm = http:/ 路径：/xxx.htm = http:/ Width,Height,Color Border,BoderColor,Color BorderColorDark,BorderColorLightWidth,Height,ColorWidth,Height,Color Align:left | center | right Valign:top |
5、 middle | bottom,HTML其他重要的布局标签, ALIGN: left, center, right ALIGN: left, center, right ,内容目录,网页是一段有格式规定的文本 网页的格式简述HTML 从HTML到页面三元素 常见标签 HTML、BODY、FONT、B、U、I TABLE、TR、TD 网页嵌套：FRAME和IFRAME 图像和Plug-ins 图像（静态和动态） 网页中的Plug-ins对象 CSS 丰富的格式,HTML文件结构二,FRAMESET 测 试 ,HTML, Name, Src Width, Height, Border 例： Th
6、is site uses floating frames,内容目录,网页是一段有格式规定的文本 网页的格式简述HTML 从HTML到页面三元素 常见标签 HTML、BODY、FONT、B、U、I TABLE、TR、TD 网页嵌套：FRAME和IFRAME 图像和Plug-ins 图像（静态和动态） 网页中的Plug-ins对象 CSS 丰富的格式,HTML, SRC=URL WIDH=数字|数字% HEIGHT=数字|数字% 例： 两种标准格式 改变宽度的结果,图片处理初步, 位图格式（光栅图） 像素记录方式导致的海量数据 10247683=21204K=21M;512M/21M=24 Gif
7、格式:颜色编号+内容压缩 JPEG格式:采用了多项式系数记录方式，有损压缩 色彩的表示 RGB方式 人眼的感受:H-色调；S-饱和度；B-亮度 立体感的由来 两只眼睛的作用 光线的作用,PhotoShop,Layer的概念和使用 选区的概念和工具使用 通道的概念和使用 文本工具 绘图工具（笔、颜色、填充） 滤镜的使用 Curve调整 图片模式 GIF的透明色问题 反锯齿的概念（边沿反锯齿问题） Save for Web,GIF动画制作,动画帧位图准备 Ulead Animation GIF,网页中的Plug-ins对象,用途： Flash、MP3、视频、MIDI,Flash, Flash基本概
8、念 集图像动画和声音于一身，基础是矢量 矢量图概念 优点：可无级放大，数据量小 缺点：难以有照片效果，难做滤镜 动画概念 TimeLine 帧、关键帧 过渡帧,Flash,层 绘制工具：线、填充、颜色 Symbol:Button、Movie、Graphic 动画：颜色、透明度、缩放、旋转 Mask Guid 资源导入和使用：图形、图像、声音(同步问题) 输出设置 Action Script,内容目录,网页是一段有格式规定的文本 网页的格式简述HTML 从HTML到页面三元素 常见标签 HTML、BODY、FONT、B、U、I TABLE、TR、TD 网页嵌套：FRAME和IFRAME 图像和P
9、lug-ins 图像（静态和动态） 网页中的Plug-ins对象 CSS 丰富的格式,样式,Style的含义 对外观样式的定义，可作用于几乎所有的标签；可以定义从颜色、字体、边框到背景、位置等等几乎所有的外观属性；甚至可产生动态效果 可由页面脚本动态改变 两种style类别的定义方法 Style的应用方法 Style的重要属性,两种Style定义方法,页面内嵌.style1 .style2color:blue .style2:hovercolor:red tdfont-size:12px引用外部文件 ,Style的应用方法,Class方法 style1 link 直接定义 style1 嵌套使
10、用link ,Style的重要属性,background Color, background-color, background-image:url(url) .style1background-color:red; background-image:url(marble.gif) Font font-size:12px;font-family:宋体;font-weight:bold font:12px 宋体 bold Text text-decoration: none | underline | overline | line-through | blink line-height:150
11、% text-align: left | center | right; vertical-align: top | middle | bottom,Style的重要属性,Box Width,height: | | auto margin-left, margin-right, margin-top, margin-bottom, margin border-top-width, border-right-width, border-bottom-width, border-left-width, border-width border-top-color, border-right-colo
12、r, border-bottom-color, border-left-color, border-color border-top-style, border-right-style, border-bottom-style, border-left-style, border-style none | dotted | dashed | solid | double | groove | ridge | inset | outset,Style的重要属性,Position clip| auto : rect ( ) left, top position absolute | relative | static Visibility inherit | visible | hidden z-index auto | ,练习：用文本编辑器写出如下页面,标题：“手工编写HTML源码试验”,这个表格是在页面中居右的,这是个链接，点击后在新窗口中弹出百度首页,
