Step①网页和HTML.ppt-淘文阁

资源描述

《Step①网页和HTML.ppt》由会员分享，可在线阅读，更多相关《Step①网页和HTML.ppt（31页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、StepStep网页和网页和HTMLHTML陈鹏陈鹏内容目录内容目录n网页是一段有格式规定的文本网页是一段有格式规定的文本n网页的格式网页的格式简述简述HTMLHTMLn从从HTMLHTML到页面三元素到页面三元素n常见标签常见标签HTMLHTML、BODYBODY、FONTFONT、B B、U U、I ITABLETABLE、TRTR、TDTDn网页嵌套：网页嵌套：FRAMEFRAME和和IFRAMEIFRAMEn图像和图像和Plug-insPlug-insn图像（静态和动态）图像（静态和动态）n网页中的网页中的Plug-insPlug-ins对象对象nCSS CSS 丰富的格式丰富的格式网

2、页就是一段文本网页就是一段文本n网页实际上是一段网页实际上是一段文本文本n用记事本打开查看可能是：用记事本打开查看可能是：HelloHellon用浏览器打开查看就显示为：用浏览器打开查看就显示为：HelloHellon这段文本必须遵循某种这段文本必须遵循某种格式规定格式规定来来编写，这个格式规定就是编写，这个格式规定就是HTMLHTML内容目录内容目录n网页是一段有格式规定的文本网页是一段有格式规定的文本n网页的格式网页的格式简述简述HTMLHTMLn从从HTMLHTML到页面三元素到页面三元素n常见标签常见标签HTMLHTML、BODYBODY、FONTFONT、A A、B B、U U、I

3、ITABLETABLE、TRTR、TDTDn网页嵌套：网页嵌套：FRAMEFRAME和和IFRAMEIFRAMEn图像和图像和Plug-insPlug-insn图像（静态和动态）图像（静态和动态）n网页中的网页中的Plug-insPlug-ins对象对象nCSS CSS 丰富的格式丰富的格式HTMLHTML何谓何谓HTMLHTML nHypertext Markup Language,Hypertext Markup Language,超文本链接标超文本链接标记语言，是一种直译式语言记语言，是一种直译式语言 n简单的说，就是一个标记出文字、图形、声音简单的说，就是一个标记出文字、图形、声音.等

4、元素在等元素在PagePage上要如何显示的规则而已，它上要如何显示的规则而已，它必须通过浏览器（必须通过浏览器（Browser Browser 如如 Netscape Netscape Navigator Navigator、IE.IE.等）才能看到它的执行结等）才能看到它的执行结果果。n要编辑要编辑HTMLHTML可通过一般的文本处理软件，如记事可通过一般的文本处理软件，如记事本本、EditPlusEditPlus 等，也有一些专门用来编写等，也有一些专门用来编写HTMLHTML的软件：的软件：FrontPageFrontPage、DreamWeaverDreamWeaver从从HTML

5、HTML到页面三元素到页面三元素人的接收信息途径人的接收信息途径网页上的表现手段网页上的表现手段nHypertext Markup Language,Hypertext Markup Language,超文本链接标示语言超文本链接标示语言n通过浏览器的解析，显示为网页上的表现通过浏览器的解析，显示为网页上的表现n页面三元素页面三元素n文本文本字体、颜色、大小字体、颜色、大小布局（左中右）、修饰（粗斜下划线等）布局（左中右）、修饰（粗斜下划线等）n图像图像静态图像：静态图像：JPGJPG、JPEGJPEG、GifGif、VMLVML动态图像：动态图像：GifGif、FlashFlash、Java

6、Java、JavaScriptJavaScript、视频流视频流n声音声音MidiMidi、WaveWaveHTMLHTML文件结构文件结构标题标题主要主要HTML文件的内容写在这里文件的内容写在这里 HTMLHTML文件示例文件示例我的第一份我的第一份HTML文件文件粗体字型粗体字型斜体字型斜体字型下划线字型下划线字型例子例子例子例子例子例子 HTMLHTML FONT n FONT/FONTnSIZESIZEnCOLORCOLORnFACEFACEn如：如：/FONTn n I n U nHTMLHTML A n AnHrefHref=URLURLnTargetTarget_

7、self_self、_parent_parent、_blank_blank、其他名字其他名字n n路径问题路径问题n设当前页面设当前页面URLURL为：为：http:/http:/ TABLE n TABLEnWidth,Height,ColorWidth,Height,ColornBorder,BoderColor,ColorBorder,BoderColor,ColornBorderColorDark,BorderColorLightBorderColorDark,BorderColorLightnnWidth,Height,ColorWidth,Height,ColornnWidth,H

9、简述简述HTMLHTMLn从从HTMLHTML到页面三元素到页面三元素n常见标签常见标签HTMLHTML、BODYBODY、FONTFONT、B B、U U、I ITABLETABLE、TRTR、TDTDn网页嵌套：网页嵌套：FRAMEFRAME和和IFRAMEIFRAMEn图像和图像和Plug-insPlug-insn图像（静态和动态）图像（静态和动态）n网页中的网页中的Plug-insPlug-ins对象对象nCSS CSS 丰富的格式丰富的格式HTMLHTML文件结构二文件结构二 FRAMESET 测测试试 HTMLHTMLn IFRAMEnName,Name,SrcSrcnWidth

10、,Height,BorderWidth,Height,Bordern例：例：This site uses This site uses floating framesfloating frames内容目录内容目录n网页是一段有格式规定的文本网页是一段有格式规定的文本n网页的格式网页的格式简述简述HTMLHTMLn从从HTMLHTML到页面三元素到页面三元素n常见标签常见标签HTMLHTML、BODYBODY、FONTFONT、B B、U U、I ITABLETABLE、TRTR、TDTDn网页嵌套：网页嵌套：FRAMEFRAME和和IFRAMEIFRAMEn图像和图像和Plug-insPlug

11、-insn图像（静态和动态）图像（静态和动态）n网页中的网页中的Plug-insPlug-ins对象对象nCSS CSS 丰富的格式丰富的格式HTMLHTML IMG n WIDTH=150 HEIGHT=150nSRC=SRC=URLURLnWIDH=WIDH=数字数字|数字数字%nHEIGHT=HEIGHT=数字数字|数字数字%n例：例：WIDTH=150 HEIGHT=150n两种标准格式两种标准格式n改变宽度的结果改变宽度的结果图片处理初步图片处理初步n WIDTH=150 HEIGHT=150n位图格式（光栅图）位图格式（光栅图）n像素记录方式导致的海量数据像素记录方式导致的海量数据

12、10247683=21204K=21M;512M/21M=2410247683=21204K=21M;512M/21M=24nGifGif格式格式:颜色编号颜色编号+内容压缩内容压缩nJPEGJPEG格式格式:采用了多项式系数记录方式，有损压缩采用了多项式系数记录方式，有损压缩n色彩的表示色彩的表示nRGBRGB方式方式n人眼的感受人眼的感受:H-H-色调；色调；S-S-饱和度；饱和度；B-B-亮度亮度n立体感的由来立体感的由来n两只眼睛的作用两只眼睛的作用n光线的作用光线的作用PhotoShopPhotoShopnLayerLayer的概念和使用的概念和使用n选区的概念和工具使用选区的概念和

13、工具使用n通道的概念和使用通道的概念和使用n文本工具文本工具n绘图工具（笔、颜色、填充）绘图工具（笔、颜色、填充）n滤镜的使用滤镜的使用nCurveCurve调整调整n图片模式图片模式nGIFGIF的透明色问题的透明色问题n反锯齿的概念（边沿反锯齿问题）反锯齿的概念（边沿反锯齿问题）nSave for WebSave for WebGIFGIF动画制作动画制作n动画帧位图准备动画帧位图准备nUleadUlead Animation GIF Animation GIF网页中的网页中的Plug-insPlug-ins对象对象nnOBJECT CLASSID=clsid:99B42120-6EC7-

14、11CF-A6C7-00AA00A47DD2 width=40 height=250nPARAM NAME=VALUE=ArialnPARAM NAME=VALUE=30nPARAM NAME=VALUE=1nnnEMBED SRC=HEIGHT=61 n用途：用途：nFlashFlash、MP3MP3、视频、视频、MIDIMIDIFlashFlashnEMBED SRC=http:/ QUALITY=highnFlashFlash基本概念基本概念n集图像动画和声音于一身，基础是矢量集图像动画和声音于一身，基础是矢量n矢量图概念矢量图概念n优点：可无级放大，数据量小优点：可无级放大，数据量小n

15、缺点：难以有照片效果，难做滤镜缺点：难以有照片效果，难做滤镜n动画概念动画概念nTimeLineTimeLinen帧、关键帧帧、关键帧n过渡帧过渡帧FlashFlashn层层n绘制工具：线、填充、颜色绘制工具：线、填充、颜色nSymbol:ButtonSymbol:Button、MovieMovie、GraphicGraphicn动画：颜色、透明度、缩放、旋转动画：颜色、透明度、缩放、旋转nMaskMasknGuidGuidn资源导入和使用：图形、图像、声音资源导入和使用：图形、图像、声音(同步问同步问题题)n输出设置输出设置nAction ScriptAction Script内容目录内容目

16、录n网页是一段有格式规定的文本网页是一段有格式规定的文本n网页的格式网页的格式简述简述HTMLHTMLn从从HTMLHTML到页面三元素到页面三元素n常见标签常见标签HTMLHTML、BODYBODY、FONTFONT、B B、U U、I ITABLETABLE、TRTR、TDTDn网页嵌套：网页嵌套：FRAMEFRAME和和IFRAMEIFRAMEn图像和图像和Plug-insPlug-insn图像（静态和动态）图像（静态和动态）n网页中的网页中的Plug-insPlug-ins对象对象nCSS CSS 丰富的格式丰富的格式样式样式nStyleStyle的含义的含义n对外观样式的定义，可作用

17、于几乎所有的标签；对外观样式的定义，可作用于几乎所有的标签；可以定义从颜色、字体、边框到背景、位置等等可以定义从颜色、字体、边框到背景、位置等等几乎所有的外观属性；甚至可产生动态效果几乎所有的外观属性；甚至可产生动态效果n可由页面脚本动态改变可由页面脚本动态改变n两种两种stylestyle类别的定义方法类别的定义方法nStyleStyle的应用方法的应用方法nStyleStyle的重要属性的重要属性两种两种StyleStyle定义方法定义方法n页面内嵌页面内嵌 Style.style1.style1.style2color:blue.style2color:blue.style2:hover

18、color:red.style2:hovercolor:redtdfont-size:12pxtdfont-size:12pxn引用外部文件引用外部文件 StyleStyle的应用方法的应用方法nClassClass方法方法 style1Span class=style1style1a link=class=style2linkn直接定义直接定义 style1div style=font-siez:12pxstyle1n嵌套使用嵌套使用 Span class=style1a link=class=style2linkStyleStyle的重要属性的重要属性nbackgroundbackgrou

19、ndnColor,background-color,background-Color,background-color,background-image:url(image:url(urlurl).style1background-color:.style1background-color:redred;background-;background-image:url(image:url(marble.gifmarble.gif)nFontFontnfont-size:12px;font-family:font-size:12px;font-family:宋体宋体;font-font-weig

21、gin-bottom,marginnborder-top-width,border-right-width,border-bottom-width,border-left-width,border-widthnborder-top-color,border-right-color,border-bottom-color,border-left-color,border-colornborder-top-style,border-right-style,border-bottom-style,border-left-style,border-stylenone|dotted|dashed|sol

展开阅读全文