《htmlcss培训》PPT课件.ppt

技术部新人培训HTML培训教程基础篇,一、HTML培训教程基础篇,HTML简介,文件结构的格式标记,文字格式与页面,超链接、列表和表格,4,1,2,3,外媒体,5,表单和框架,6,1.1HTML是什么HTML(HyperTextMarkupLanguage，超文本标记语言)是用来描述网页的一种语言。是Web最基本的构成元素。用HTML的语法规则建立的文档可以在不同操作系统的平台上运行。HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言，而是一种标记语言(markuplanguage)标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页,1.HTML简介,1.2HTML标签HTML文档和HTML元素是通过HTML标签进行标记的HTML标签由开始标签和结束标签组成开始标签是被括号包围的元素名结束标签是被括号包围的斜杠和元素名某些HTML元素没有结束标签，比如注释：开始标签的英文翻译是starttag或openingtag，结束标签的英文翻译是endtag或closingtag。,1.HTML简介,1.3HTML能做什么格式化文本：如设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。建立超链接。只需用鼠标单击，就可达任何一处。创建列表。把信息用一种易读的方式表现出来。插入图像。使网页图文并茂，还可设置图像的各种属性，如大小、边框、布局等。建立表格。表格为浏览者提供快速找到需要信息的显示方式，还可以用表格来设定整个网页的布局。加入多媒体。可在网页中加入音频、视频、动画，还能设定播放的时间和次数。交互式表单、计数器等。,1.HTML简介,1.HTML简介,1.4HTML编辑环境任何文本编辑器都可用来制作网页，包括记事本、写字板、Word、WPS等编辑程序。专业设计人员会有专业的网页编辑器，如：dreamweaver、frontpage等。完成以后用.htm或.html为文件扩展名保存。若要看到用户自己设计的网页效果，就需要安装一个浏览器，如InternetExplorer，NetscapeNavigator等,2.HTML基本结构,一个HTML文件应具有下面的结构HTML文件以开头，以结尾。HTML文件包括头部和主体，用来说明文件命名和与文件本身的相关信息，主体定义浏览器中显示的网页内容。网页标题网页内容,2.HTML基本结构,HTML文件是由标记和文本组成。标记（Tag）能够产生所需的各种效果。就像一个排版程序，可将网页排成理想的效果。格式：收标记影响的文本单一标记：只要一个标记就能完成所要表示的功能，如可以显示一条水平的分隔线。成对标记：需要两个标记组合才能完成所需功能，如及、及。HTML的元素有以下三种表达方式对象对象标记需要通过属性制作各种效果。,2.HTML基本结构,注意：使用时属性之间没有顺序。对同一段文本，可以用多个标记来共同作用，产生一定的效果。HTML也有注释标记。“”之间的部分为注释内容,可以插入文本的任何地方。标记和属性不区分大小写。,2.HTML基本结构,【例2-1】简单的HTML文件网页设计我的第一个网页！,2.2.1文件结构的格式标记,1、HTML文档标记HTML文档标记的格式为:HTML文档内容处于文档的最前面，表示HTML文档的开始，即浏览器从开始解释，直到遇到为止。每个HTML文件均以开始，以结束。,2.2.1文件结构的格式标记,2、HTML文件头标记HTML文件头标记的格式为：头部内容文件头部在文件标记之后，其内容可以是标题名，文本文件地址、创作信息等网页信息说明，对应于相应的标记。如标题标记。本标记在HTML文件中不是必须的，如果没有，浏览器也会照常解读文件。,2.2.1文件结构的格式标记,3、HTML文件标题标记HTML文件标题标记的格式为：标题名标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。为什么要给网页加上标题呢？标题概括了网页的内容，能够迅速了解网页的大意；如果浏览者喜欢该网页，将它加入书签或保存到磁盘上，标题就作为改页面的标志和文件名；使用搜索引擎时显示的结果也是页面的标题。,2.2.1文件结构的格式标记,【例2-2】如果没有使用标记，而单独使用，标记仍可设定标题。网页设计无标记仍起作用显示效果,2.2.1文件结构的格式标记,4、HTML文件主体标记格式为：background设置网页的背景图像：bgcolor设置网页的背景色；text设置文本的颜色：link设置未被访问过的超文本链接的颜色，默认为蓝色；vlink设置已被访问过的超文本链接的颜色，默认为红色或紫色alink设置超文本链接在被访问瞬间的颜色，默认为蓝色,2.3HTML文字格式与页面,2.3.1设置标题格式设置标题格式的格式为：标题属性align用来设置标题在页面中的对齐方式：left(左对齐)、center(居中)或right(右对齐)。属性n用来指定标题文字的大小。n可以取16的整数值，取1时文字最大，6时文字最小，默认时为。这些标记显示宋体字。标记会自动插入一个空行，不必用标记再加空行。在一个标题行中无法使用不同大小的字体。,2.3HTML文字格式与页面,【例2-3】用设置标题的大小。使用标题一级标题二级标题三级标题四级标题五级标题六级标题默认标题显示效果,2.3HTML文字格式与页面,2.3.2设置强制换行标记www浏览器忽视超文本文件中的回车符（除非用户指定用标记元素限制按源文件文本格式展示文本内容），而是用专门的标记符号表示回车。放在一行的末尾，可使后面的文字换到下一行，而又不会在行与行之间留下空行。强制换行标记的格式为：文字换行标记单独使用，可使页面清晰、整齐。,2.3HTML文字格式与页面,【例2-4】强制换行标记的使用，强制换行标记的使用欢迎进入牡丹园!新闻影视聊天室显示效果,2.3HTML文字格式与页面,小技巧：在中文的段落中，往往在段首空两个的空格符号，可是HTML语言忽略多余的空格，最多只能空一个空格.可用4个连续的“ ；”或者输入两个全角中文空格。“ ；”为非换行的空格符号，用它可以在文本中加入任意多个空格。,2.3HTML文字格式与页面,2.3.3设置文字格式格式为：被设置的文字标记可设定文字的字体、字号和颜色。size用来设置文字的大小。数字的取值范围从17，size取1时最小，取7时最大。face用来设置字体。如黑体、宋体、楷体GB2312、仿宋GB2312、隶书、TimesNewRoman等。color用来设置文字颜色。,2.3HTML文字格式与页面,1、设置文字的字号与的区别,注：和标记都可以设置文字的大小，当中的size取7时的文字比要大。,2.3HTML文字格式与页面,【例2-5】用设置文字的大小。用设置文字的大小文字的大小!文字的大小size=1文字的大小size=2文字的大小size=3文字的大小size=4文字的大小size=5文字的大小size=6文字的大小size=7,2.3HTML文字格式与页面,2、设置字体当文字是汉字时，格式中的“字体名”可以为：宋体、幼圆、隶书、楷体_GB2312、黑体、仿宋_GB2312等。当文字为英文时，字体名可以为TimesNewRoman等约50种字体。,2.3HTML文字格式与页面,【例2-6】设置字体设置字体幼圆隶书黑体楷体_GB2312仿宋_GB2312显示效果,2.3HTML文字格式与页面,3、设置字型字形就是文字的风格，如加粗、斜体、带下划线、上标、下标等。字型的控制标记见下表,2.3HTML文字格式与页面,【例2-7】设置字型设置字型设置字体黑体设置字体斜体设置字体带下划线设置字体带删除线设置字体上标设置字体下标设置字体大号字体设置字体小号字体设置字体倾斜设置字体倾斜设置字体缩小设置字体缩小+斜体设置字体粗体设置字体标准打印字体显示效果,2.3HTML文字格式与页面,4、设置文字颜色HTML的颜色代码，由六个字符组成：RRGGBB，每一位都是十六进制，从09AF，所以可以产生166种颜色，也就是1677万多种颜色。,2.3HTML文字格式与页面,【例2-5】用设置文字的大小。用设置文字的大小文字的大小!文字的大小size=1文字的大小size=2文字的大小size=3文字的大小size=4文字的大小size=5文字的大小size=6文字的大小size=7,2.3HTML文字格式与页面,【例2-5】用设置文字的大小。用设置文字的大小文字的大小!文字的大小size=1文字的大小size=2文字的大小size=3文字的大小size=4文字的大小size=5文字的大小size=6文字的大小size=7,Clicktoedittitlestyle,Addyourtitleinhere,Addyourtitleinhere,Addyourtitleinhere,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ClicktoaddTextClicktoaddText,ClicktoaddTextClicktoaddText,Clicktoedittitlestyle,Contents,Contents,Contents,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,Titleinhere,Titleinhere,Titleinhere,Titleinhere,Titleinhere,Descriptionofthecontents,Clicktoedittitlestyle,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,0001020304050607,50%,70%,160%,230%,100%,150%,380%,300%,Textinhere(unit:%),Year,ClicktoaddTextClicktoaddTextClicktoaddText,ClicktoaddTextClicktoaddTextClicktoaddText,Clicktoedittitlestyle,Addyourtextinhere,Addyourtextinhere,Text,Text,Text,Text,Text,Text,Text,Text,Clicktoedittitlestyle,Titleinhere,Descriptionofthecontents,Titleinhere,Textinhere,Textinhere,Textinhere,Textinhere,Textinhere,Textinhere,Descriptionofthecontents,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,Clicktoedittitlestyle,2.DescribecontentsforaChartDescriptionofthecompanyssubcontentsDescriptionofthecompanyssubcontents,1.DescribecontentsforaChartDescriptionofthecompanyssubcontentsDescriptionofthecompanyssubcontents,AddYourTitleinhere,Clicktoedittitlestyle,Growth,Start,Jump,200820072006,200520042003,200220012000,DescriptionofthecontentsDescriptionofthecontentsDescriptionofthecontents,DescriptionofthecontentsDescriptionofthecontentsDescriptionofthecontents,DescriptionofthecontentsDescriptionofthecontentsDescriptionofthecontents,Clicktoedittitlestyle,AddyourtextinhereYourtextinhereYourtextinhereYourtextinhereAddyourtextinhereYourtextinhereYourtextinhereYourtextinhere,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,Clicktoedittitlestyle,ClicktoaddTextClicktoaddTextClicktoaddTextClicktoaddText,Textinhere,Textinhere,Textinhere,Textinhere,ClicktoaddTextClicktoaddTextClicktoaddTextClicktoaddText,ClicktoaddTextClicktoaddTextClicktoaddTextClicktoaddText,ClicktoaddTextClicktoaddTextClicktoaddTextClicktoaddText,Clicktoedittitlestyle,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ClicktoaddText,Descriptionofthecontents,Descriptionofthecontents,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,Clicktoedittitlestyle,PleasewritedownofcontentsexplanationforBusinessArea.,BusinessArea,BusinessArea,BusinessArea,BusinessArea,PleasewritedownofcontentsexplanationforBusinessArea.,PleasewritedownofcontentsexplanationforBusinessArea.,PleasewritedownofcontentsexplanationforBusinessArea.,PleasewritedownofcontentsexplanationforBusinessArea.,Clicktoedittitlestyle,Textinhere,Titleinhere,Textinhere,Textinhere,2005,2006,2007,2008,DescriptionofthecontentsDescriptionofthecontents,DescriptionofthecontentsDescriptionofthecontents,DescriptionofthecontentsDescriptionofthecontents,DescriptionofthecontentsDescriptionofthecontents,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,Clicktoedittitlestyle,Contents,Contents,Content,Content,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ClicktoaddTextClicktoaddTextClicktoaddTextClicktoaddText,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ClicktoaddTextClicktoaddTextClicktoaddText,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,Clicktoedittitlestyle,Titleinhere,Descriptionofthecontents,Textinhere,Descriptionofthecontents,Descriptionofthecontents,Descriptionofthecontents,Descriptionofthecontents,1.Title,2.Title,3.Title,4.Title,*Descriptionofthecontents,*Descriptionofthecontents,Clicktoedittitlestyle,AddyourtextinhereYourtextinhereYourtextinhere,AddyourtextinhereYourtextinhereYourtextinhere,AddyourtextinhereYourtextinhereYourtextinhere,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ClicktoaddText,ClicktoaddText,ClicktoaddText,Clicktoedittitlestyle,Textinhere,Textinhere,Textinhere,Title,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,Title,Title,Title,Clicktoedittitlestyle,ContentsThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,YourTextHere,YourTextHere,YourTextHere,YourTextHere,Descriptionofthecontents,ClicktoaddText,ClicktoaddText,ClicktoaddText,ClicktoaddText,Clicktoedittitlestyle,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,Titleinhere,2.Descriptionofthecompanyssubcontents,Describeavisionofcompanyorstrategiccontents,1.Descriptionofthecompanyssubcontents,Clicktoedittitlestyle,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,Titleinhere,Titleinhere,Titleinhere,Titleinhere,A,B,C,D,Clicktoedittitlestyle,70%,10%,5%,60%,25%,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,Textinhere,Textinhere,Textinhere,Textinhere,Clicktoedittitlestyle,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,ThemeGalleryisaDesignDigitalContent&ContentsmalldevelopedbyGuildDesignInc.,Cli