实验一 网页设计.ppt

实验一网页设计 一 实验目的 熟悉超文本描述语言HTML 熟悉常用网页标记 并能熟练掌握 二 超文本描述语言HTML HTML文件一般由三部分组成 标记单一标记 成对标记 文字 图像等资料提供给浏览者查看的内容 统一资源定位器URL 三 标记 使被标记的内容产生所需的各种效果 格式受标记影响的内容注意大小写没有限制 对同一段内容可以用多个标记共同作用 不是所有标记均有属性 换行标记就没有属性 标记 属性的顺序没有特别要求 四 常用标记 一个简单的实例一个简单的HTML示例欢迎光临我的主页 1 文件结构的格式标记 文档标记 文件头标记 文件标题标记 文件主体标记 2 标题文字标记 设置不同大小的标题 使文章条理更清晰 格式标题文字注意对齐方式 left center right 属性n的取值范围 1 6 1最大 6最小 标记默认字体为宋体 一级标题二级标题四级标题 3 段落标记 注释标记强制换行标记强制换段标记水平线 单标记 对齐粗细长度颜色平面显示 一级标题新闻学习窗口 4 文字标记 被设置的文字红色的隶书Size的取值范围是1 7 1最小 7最大 字型设计 加粗 斜体 带下划线 标准打印机字体 带删除线 下标 上标 大字体文本 小字体文本 5 超级链接 锚点标记格式热点注意地址 目标资源的有效地址 字符串 当前网页链接时使用的目标有效地址 打开窗口方式 blank 开新浏览器窗口 parent 链接内容显示在父框架窗口 self 链接内容显示在当前窗口 1 链接到同一目录中的网页文件 热点文本 一个简单的HTML示例欢迎光临我的主页 2 链接到下级目录中的网页 热点文件 一个简单的HTML示例欢迎光临我的主页 3 链接到上级目录中的网页 热点文件 一个简单的HTML示例欢迎光临我的主页 4 链接到同级目录中的网页 热点文字 一个简单的HTML示例欢迎光临我的主页 5 指向本页中的链接 热点文字 学生之家新闻聊天室新闻 学习窗口 6 图片 加入网页中的图片常用格式为GIF和JPEG 设置网页的背景使用标记设计背景 1 设置背景色2 以图片作为背景 一个简单的HTML示例欢迎光临我的主页 图片标记 使用图片标记 可以把一幅图片加入到网页中 用图片标记可以设置图片的替代文本 尺寸 布局的属性 格式说明alt属性 在浏览器尚未完全读入图片时 在图片位置显示的文字 宽度 高度 像素值或百分数 一个简单的HTML示例信息理论与编码教材原始大小 设置图片布局 需要和 等标记一起设置 对齐方式 特殊 图片与文本间的关系1 图片与文本之间的空白 hspace vspace 2 align属性top文本与图片的顶部对齐middle文本与图片的中央对齐bottom文本与图片的底部对齐 3 文本环绕图片借助align属性进行设置left图片居左 文本在图片的右边right图片居右 文本在图片的左边取消文本环绕 4 图片作为超链接格式 7 表格 表格标记 行标记 单标记 表项标记 标头标记 在浏览器中显示时 标记的文字按粗体显示 标记的文字按正常字体显示 表格标题标记 学生成绩表学号姓名数学英语0001张三85700002李四9590 跨多行 多列的表项 借助 标记的colspan和rowspan属性 表项表项表项 8 表单 使用表单可以在网页中实现交互操作 表单标记 单标记 FORM属性action表单处理方式 一般为网址或E mail地址methord表单数据的传送方向 get 获得 post 送出 INPUR属性type指定加入表单项目的类型 text password heckbox name该表项的控制名 主要在处理表单时起作用 size单行文本区域的宽度 maxlength允许输入的最大字符数目 表单实例个人资料姓名 密码 复选框和单选框 属性名checkbox 复选框 radio 单选框 例 性别 男女特长 足球篮球 9 框架 在同一浏览器窗口中显示多个相互隔离的HTML页的结构 每个区域显示一个HTML文件 标记 单标记 说明所有框架标记需要放在一个总起的HTML文件中 这个文件只记录该框架如何划分 不显示任何资料 所以用标记取代标记 划分出来的每一个框体分别由一个标记标示 必须在范围中使用 标记属性rows设定横向分割的框架的数目cols设定纵向分割的框架的数目border设定边框的宽度bordercolor设定边框的颜色frameborder设定有 无边框framespacing设置各窗口间的空白 标记属性src表示该框架对应的源文件name制定框架名border设定边框的宽度bordercolor设定边框的颜色frameborder设定有 无边框marginwidth设置框架内容与左右边框的空白marginheight设置框架内容与上下边框的空白scrolling设置是 否 自动加入滚动条noresize不允许各窗口改变大小 默认可以 一个简单的框架示例 纵横排列多个框架 一个简单的框架示例 10 多媒体 滚动字幕标记 属性loop设置循环次数 1或infinite为无限behaviorscroll单向流动alternate流动文字到达边界反向流动scrollamount字母