成都理工大学校团委信息中心美工部html培训

HTML概念,HTML（HyperTextMarkupLanguage超文本标识语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档。,HTML文档的编写方法,手工直接编写记事本等，存成.htm.html格式使用可视化HTML编辑器Frontpage、Dreamweaver等由Web服务器（或称HTTP服务器）一方实时动态地生成。,网页文件命名,*.htm或*.html无空格无特殊符号（例如指向其他Internet应用的超级链接不是我们掌握的重点。,4.超级链接锚点(书签)1,指向本页面锚点aa的超级链接例：21.htm指向23页面的锚点top的超级链接例：21.htm,练习：,标注出学校首页的html静态代码,HTML对图片的控制-1,基本语法:引用图片必须用元素标志。元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址例：22.htm,HTML对图片的控制-2,所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。定义图片替代文本的方法是：例：23.htm,HTML对图片的控制-3,图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。定义图片的显示大小的方法是：width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。例：24.htm,HTML对图片的控制-4,图片的边框我们可以为一幅图片加一个边框以突出显示：border的属性值为象素数例：25.htm,HTML对图片的控制-5,图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是：例：26.htm,HTML对图片的控制-6,图片的对齐方式定义图片的垂直对齐方式：对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。例：26.htm,HTML对图片的控制-7,定义图片与左、右的文本之间的间距图片在显示时，与左右的文本之间可以有一定的间距Hspace(horizontal)定义水平间距；Vspace(vertical)定义垂直间距。单位都是象素数.例：27.htm,HTML对图片的控制-8,图象的超级链接图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：所以，所谓超级链接实际上就是用元素标志一个图象的引用;例：28.htm,单元格（用来表示，每个单元格可以有背景颜色和背景图片）,表格（用来表示，表格可以有背景颜色、背景图片）,表格边框,每一行可以用来表示，单元格放在行中，每行可以有很多的单元格。,表头（用来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）,表格(TABLE)标记-1,元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。,表格(TABLE)标记-2,表格的基本结构定义表格定义表头定义表行定义单元格,表格(TABLE)标记-2,练习尝试写出这个表格的代码例:1.htm,表格(TABLE)标记-3,表格的属性1width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。border属性：表格边线粗细例02.html,表格(TABLE)标记-2,表格的属性14、bgcolor属性：指定表格或某一个单元格的背景颜色。5、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。例：03.htm,表格(TABLE)标记-3,表格的属性26、bordercolor属性：指定表格或某一个单元格的边框颜色。例：04.htm7、Bordercolorlight属性：亮边框的颜色8、Bordercolordark属性：暗边框的颜色例：05.htm,表格(TABLE)标记-3,表格的属性29、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。例：06.htm,表格(TABLE)标记-3,表格的属性210、cellspacing属性：单元格间距。例：06.htm11、cellpadding属性：单元格边距。例：06.htm,表格(TABLE)标记-4,单元格属性1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：top：顶端对齐；middle：居中对齐；bottom：底端对齐;Baseline：相对于基线对齐;例：07.htm,表格(TABLE)标记-5,单元格属性2、Colspan：属性值表示当前单元格跨越几列例：8.htm3、Rowspan：属性值表示当前单元格跨越几行例：8.htm,表格进阶,表格的嵌套在之间插入表格，实现表格嵌套例：9.htm表格的作用一般只是控制文本和图像的显示，而不显示表格的边框,综合案例,表格的综合使用利用表格做一张你的课程表做一张最近来访的表格,表单(FORM)标记,HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。,表单(FORM)标记,表单是网页上的一个特定区域。这个区域是由一对元素定义的。元素action属性：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。Method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。,表单(FORM)标记,表单是网页上的一个特定区域。这个区域是由一对元素定义的。元素enctype属性：规定了用表单传递信息时的编码格式，有application/x-www-form-urlencoded和multiport/form-data两种选择，前者是默认值，后者一般在表单需要提交文件信息的情况下使用,表单(FORM)标记,表单的基本语法:.*=GET有数据量限制，POST无以上限制,以文件形式传输,表单(FORM)标记,例：输入以下代码，定义一个基本菜单，并以E-mail方式实现提交,表单(FORM)标记,Input元素input元素是与输入相关的元素，它是一个空元素，因此在其末尾必须添加斜杠“/”。Input元素有一个重要的属性type,该属性决定了input的元素类型,表单(FORM)标记,（1）文本框，type=“text”,用于控制用户仅输入一行文本size：控制输入文本框所显示的长度，单位为字符maxlength：控制允许最大输入的字符长度，单位为字符name：通过表单传递出去的变量的名称value：即变量的值，是在表单提交的瞬间，在该输入框内的字符串（如果在input元素中定义该属性，则表示设定了输入框的初始值）11.htm,表单(FORM)标记,（2）密码框，type=“password”，用户输入时所显示的密码是屏蔽号11.htm（3）隐藏条目，type=“hidden”，用于输入框不见，但仍然有name和value属性，一般用于不需要用户填写或选择，变量值已知，又需要将变量发送出去的情况11.htm,表单(FORM)标记,（4）复选框，type=“checkbox”，一般由若干个复选项组成，改组input元素拥有相同的name属性值，而value值不同。当表单提交后，变量将成为一个数组，且数组中包含选中复选框的value值。Checked=“checked”表示默认将该复选框选中11.htm（5）单选按钮，type=“radio”，与复选框类似只能选一个11.htm,表单(FORM)标记,（6）提交按钮，type=“submit”按下该按钮时，表单向form中action属性所定义的地址发送表单变量11.htm（7）重置按钮，type=“reset”按下该按钮时，表单中所有的内容将被清空11.htm,表单(FORM)标记,（8）自定义按钮，type=“button”该按钮没有预定义的功能，但可以用onclick事件调用自己编写的js函数，name和value属性可参照提交按钮（9）图像按钮，type=“image”，该按钮与自定义按钮基本相同，但用图片方式来显示。eg.,表单(FORM)标记,（10）文件域，type=“file”。使用该属性必须将form的enctype属性设置为multipart/form-data.该按钮帮助用户选择一个存储在本地计算机上的文件，在提交表单时会将所选中文件发送给服务器，其属性与文本框基本一致11.html,表单(FORM)标记,select元素用于创建一个下拉菜单或选项表。它是一个非空元素，内容必须包含在和之间。具有一个name属性，其属性值定义了要提交变量的名称.（1）无size属性时；下拉菜单（2）size=“1”且没有multiple属性（表示允许多选）；下拉菜单（3）size“1”或有multiple属性；滚动菜单12.html,表单(FORM)标记,Textarea元素创建多行的，可滚动的文本输入框。非空元素，内容必须包含在和之间Cols、rows属性：制定文本框的列数、行数，单位为字符Name属性：定义变量的名称Wrap属性:确定所提交的信息是否包含换行，按其默认值（文本不换行）提交,表单(FORM)标记,综合练习（*）,13.html,插入外部资源,1.插入音乐embedsrc=“音乐地址”插入音乐autostart=true（false）是否在音乐传送完自动播放loop=true(无限次)，false（1次），3（3次）音乐重复次数Width=宽度；height=高度设定播放器面板大小，均为0则可把播放器隐藏volume=0100设定音量大小Hidden=true隐藏控制面板Starttime=“分：秒”设定歌曲开始播放的时间,插入外部资源,Align=“center”(top,bottom,center,baseline,left,right,texttop,middle,absmiddle,absbottom)设定控制面板及其周围文字或图片的对齐方式Controls=console(正常面板)，smallconsole（较小），playbutton（只显示播放按钮），pausebutton（只显示暂停按钮），stopbutton（只显示停止按钮），volumelever（只显示音量调节按钮）设置控制面板的外观插入背景音乐：,插入外部资源,2.插入视频动画插入何时开始播放控制条（在窗口下方附加mswindows的avi播放控制条）循环延时,会移动的文字,基本语法.文字移动属性(1)方向：direction=#=left,right,up,down,会移动的文字,2、文字移动属性(2)方式：behavior=#=scroll(循环),slide(只走一次),alternate(来回走)(3)循环:loop=#=次数；若未指定则循环不止(infinite),会移动的文字,2、文字移动属性(4)速度:scrollamount=#（默认为6，数字越大速度越快）(5)延时:scrolldelay=#（单位是毫秒）,会移动的文字,3、其他属性(1)底色:bgcolor=#=RRGGBB16进制颜色代码(2)面积:height=#width=#(3)空白:hspace=#vspace=#,网页中的框架frameset,1.Frameset常用属性rows：定义上下分割的框架，单