实验一网页设计.ppt

实验一实验一 网页设计网页设计一、实验目的一、实验目的熟悉超文本描述语言熟悉超文本描述语言HTMLHTML。熟悉常用网页标记，并能熟练掌握。熟悉常用网页标记，并能熟练掌握。二、二、超文本描述语言超文本描述语言HTMLHTMLHTMLHTML文件一般由三部分组成：文件一般由三部分组成：标记标记 单一标记（单一标记（）成对标记成对标记()文字、图像等资料文字、图像等资料 提供给浏览者查看的内容。提供给浏览者查看的内容。统一资源定位器统一资源定位器URLURL 三、标记三、标记使被标记的内容产生所需的各种效果。使被标记的内容产生所需的各种效果。格式格式 受标记受标记影响的内容影响的内容注意注意 大小写没有限制；大小写没有限制；对同一段内容可以用多个标记共同作用；对同一段内容可以用多个标记共同作用；不是所有标记均有属性（换行标记就没有属性）；不是所有标记均有属性（换行标记就没有属性）；标记、属性的顺序没有特别要求。标记、属性的顺序没有特别要求。四、常用标记四、常用标记一个简单的实例一个简单的实例 HTML 一个简单的一个简单的HTMLHTML示例示例/TITLE 欢迎光临我的主页欢迎光临我的主页/H3 1、文件结构的格式标记、文件结构的格式标记文档标记文档标记 文件头标记文件头标记 文件标题标记文件标题标记 文件主体标记文件主体标记 2 2、标题文字标记、标题文字标记设置不同大小的标题，使文章条理更清晰。设置不同大小的标题，使文章条理更清晰。格式格式 标题文字标题文字/注意注意 对齐方式：对齐方式：leftleft、centercenter、rightright；属性属性n n的取值范围：的取值范围：1 16 6（1 1最大，最大，6 6最小）；最小）；标记默认字体为宋体。标记默认字体为宋体。一级标题一级标题二级标题二级标题H4=center四级标题四级标题3 3、段落标记、段落标记注释标记注释标记 强制换行标记强制换行标记 强制换段标记强制换段标记 水平线水平线 (单标记单标记)对齐对齐 粗细粗细 长度长度 颜色颜色 平面显示平面显示 一级标题一级标题新闻新闻学习窗口学习窗口HR align=center size=8 width=320(60%)4 4、文字标记、文字标记FONT size=被设被设置的文字置的文字font size=4 face=color=red红色的隶书红色的隶书SizeSize的取值范围是的取值范围是1 17 7（1 1最小，最小，7 7最大）最大）字型设计字型设计加粗加粗 斜体斜体 带下划线带下划线 标准打印机字体标准打印机字体 带删除线带删除线 下标下标 上标上标 大字体文本大字体文本 小字体文本小字体文本 5 5、超级链接、超级链接锚点标记锚点标记格式格式 A 热点热点 注意注意 地址：目标资源的有效地址。地址：目标资源的有效地址。字符串：当前网页链接时使用的目标有效地址。字符串：当前网页链接时使用的目标有效地址。打开窗口方式：打开窗口方式：_blank(_blank(开新浏览器窗口开新浏览器窗口)_parent(_parent(链接内容显示在父框架窗口链接内容显示在父框架窗口)_self(_self(链接内容显示在当前窗口链接内容显示在当前窗口)1)1)、链接到同一目录中的网页文件、链接到同一目录中的网页文件A 热点文本热点文本 一个简单的一个简单的HTMLHTML示例示例A=ex3.html欢迎光临我的主页欢迎光临我的主页 2)2)、链接到下级目录中的网页、链接到下级目录中的网页A 热点文件热点文件 一个简单的一个简单的HTMLHTML示例示例A bbb/ex3.html欢迎光临我的主页欢迎光临我的主页 3)3)、链接到上级目录中的网页、链接到上级目录中的网页A 热点文件热点文件 一个简单的一个简单的HTMLHTML示例示例A./ex3.html欢迎光临我的主页欢迎光临我的主页 4)4)、链接到同级目录中的网页、链接到同级目录中的网页A 热点文字热点文字 一个简单的一个简单的HTMLHTML示例示例A./ccc/ex3.html欢迎光临我的主页欢迎光临我的主页 5)5)、指向本页中的链接、指向本页中的链接A 热点文字热点文字 学生之家学生之家A=#news新新 闻闻   &nbspnbsp;   A=#study学习窗口学习窗口   &nbspnbsp;   A=#health健康信箱健康信箱   &nbspnbsp;   A=#talking聊聊 天天 室室 新闻新闻.学习窗口学习窗口.6 6、图片、图片加入网页中的图片常用格式为加入网页中的图片常用格式为GIFGIF和和JPEGJPEG。设置网页的背景设置网页的背景 使用使用标记设计背景。标记设计背景。1 1）设置背景色）设置背景色 BODY 2 2）以图片作为背景）以图片作为背景 BODY background=一个简单的一个简单的HTMLHTML示例示例BODY)A=ex3.html欢迎光临我的主页欢迎光临我的主页 图片标记图片标记使用图片标记，可以把一幅图片加入到网页中。用图片标使用图片标记，可以把一幅图片加入到网页中。用图片标记可以设置图片的替代文本、尺寸、布局的属性。记可以设置图片的替代文本、尺寸、布局的属性。格式格式 IMG 说明说明 altalt属性：在浏览器尚未完全读入图片时，在图片位置显示属性：在浏览器尚未完全读入图片时，在图片位置显示的文字。的文字。宽度宽度/高度：像素值或百分数。高度：像素值或百分数。一个简单的一个简单的HTMLHTML示例示例信息理论与编码教材信息理论与编码教材IMG 原始大小原始大小IMG width=18%height=40%设置图片布局设置图片布局需要需要和和、等标记一起设置。等标记一起设置。对齐方式对齐方式 P align=（特殊：（特殊：IMG ）图片与文本间的关系图片与文本间的关系 1 1）图片与文本之间的空白）图片与文本之间的空白(hspacehspace、vspacevspace)2 2）alignalign属性属性 top top 文本与图片的顶部对齐文本与图片的顶部对齐 middle middle 文本与图片的中央对齐文本与图片的中央对齐 bottom bottom 文本与图片的底部对齐文本与图片的底部对齐3 3）文本环绕图片）文本环绕图片 借助借助alignalign属性进行设置属性进行设置 left left 图片居左，文本在图片的右边图片居左，文本在图片的右边 right right 图片居右，文本在图片的左边图片居右，文本在图片的左边 取消文本环绕取消文本环绕 BR clear=leftall4 4）图片作为超链接）图片作为超链接 格式：格式：A 7 7、表格、表格表格标记表格标记 行标记行标记(单标记单标记)表项标记表项标记标头标记标头标记 在浏览器中显示时，在浏览器中显示时，标记的文字按粗体显示，标记的文字按粗体显示，标记的文字按正常字体显示。标记的文字按正常字体显示。表格标题标记表格标题标记学生成绩表学生成绩表学号学号姓名姓名数学数学英语英语00010001张三张三8585 70 7000020002李四李四9595 90 90跨多行、多列的表项跨多行、多列的表项借助借助、标记的标记的colspancolspan和和rowspanrowspan属性。属性。TD=n表项表项TD=n表项表项TH=n表项表项8 8、表单、表单使用表单可以在网页中实现交互操作。使用表单可以在网页中实现交互操作。表单标记表单标记 (单标记单标记)FORM属性属性 action 表单处理方式，一般为网址或表单处理方式，一般为网址或E-mail地址地址 methord 表单数据的传送方向，表单数据的传送方向，get(获得获得)/post(送出送出)INPUR属性属性 type 指定加入表单项目的类型指定加入表单项目的类型(text、password、heckbox.)name 该表项的控制名，主要在处理表单时起作用。该表项的控制名，主要在处理表单时起作用。size 单行文本区域的宽度。单行文本区域的宽度。maxlength 允许输入的最大字符数目。允许输入的最大字符数目。表单实例表单实例个人资料个人资料姓名：姓名：INPUT type=text name=密码：密码：INPUT type=password name=INPUT type=submit value=INPUT type=reset value=复选框和单选框复选框和单选框属性名属性名 checkbox(checkbox(复选框复选框)radio(radio(单选框单选框)例：例：性别：性别：INPUT type=radio name=checked 男男 INPUT type=radio name=女女 特长：特长：INPUT type=checkbox name=足球足球 INPUT type=checkbox 篮球篮球 9 9、框架、框架在同一浏览器窗口中显示多个相互隔离的在同一浏览器窗口中显示多个相互隔离的HTMLHTML页的结页的结构，每个区域显示一个构，每个区域显示一个HTMLHTML文件。文件。标记标记 、(单标记单标记)说明说明 所有框架标记需要放在一个总起的所有框架标记需要放在一个总起的HTMLHTML文件中，这个文件中，这个文件只记录该框架如何划分，不显示任何资料，所以文件只记录该框架如何划分，不显示任何资料，所以用用标记取代标记取代标记。划分出来的每一标记。划分出来的每一个框体分别由一个个框体分别由一个标记标示，必须在标记标示，必须在范围中使用。范围中使用。标记标记属性属性 rows rows 设定横向分割的框架的数目设定横向分割的框架的数目 cols cols 设定纵向分割的框架的数目设定纵向分割的框架的数目 border border 设定边框的宽度设定边框的宽度 bordercolorbordercolor 设定边框的颜色设定边框的颜色 frameborderframeborder 设定有设定有/无边框无边框 framespacingframespacing 设置各窗口间的空白设置各窗口间的空白标记标记属性属性 srcsrc 表示该框架对应的源文件表示该框架对应的源文件 name name 制定框架名制定框架名 border border 设定边框的宽度设定边框的宽度 bordercolorbordercolor 设定边框的颜色设定边框的颜色 frameborderframeborder 设定有设定有/无边框无边框 marginwidthmarginwidth 设置框架内容与左右边框的空白设置框架内容与左右边框的空白 marginheightmarginheight 设置框架内容与上下边框的空白设置框架内容与上下边框的空白 scrolling scrolling 设置是设置是/否否/自动加入滚动条自动加入滚动条 noresizenoresize 不允许各窗口改变大小，默认可以不允许各窗口改变大小，默认可以一个简单的框架示例一个简单的框架示例FRAME=ex2.htmlFRAME=ex3.htmlFRAME=ex4.html 纵横排列多个框架纵横排列多个框架 一个简单的框架示例一个简单的框架示例 FRAME =ex2.html FRAME =ex3.html FRAME =ex4.html 1010、多媒体、多媒体滚动字幕滚动字幕标记标记 属性属性 loop 设置循环次数，设置循环次数，-1或或infinite为无限为无限 behavior scroll单向流动单向流动 alternate流动文字到达边界反向流动流动文字到达边界反向流动 scrollamount 字母移动速度字母移动速度 滚动字幕示例滚动字幕示例 MARQUEE width=450 height=50 behavior=scroll =50新书预告：新书预告：protelprotel 20002000教材即将由清华大学出版社出版，欢迎大家选教材即将由清华大学出版社出版，欢迎大家选购购 加入音频和视频加入音频和视频加入背景声音加入背景声音 加入视频加入视频 说明说明 start属性：属性：fileopen 链接到含本标记的网页播放链接到含本标记的网页播放 mouseover 将鼠标移到播放区时将鼠标移到播放区时