网络建设基础...ppt

静态网页设计 HTML表示超文本标记语言 HyperTextMarkupLanguage HTML文件是一个包含标记的文本文件 这些标记保证浏览器怎样显示这个页面 HTML文件必须有htm或者html扩展名 HTML文件可以用一个简单的文本编辑器创建 HTML文件是什么 1 HTML编辑器 关于HTML编辑器 用一些所见即所得的编辑器 比如frontpage dreamweaver 你可以很容易创建一个页面 而不需要在纯文本中编写代码 但是假如你想成为一名熟练的网络开发者 我们强烈推荐你用纯文本编辑器编写代码 这有助于学习HTML基础 2 HTML文件结构的格式 2 1HTML的基本语法1了解HTML的标记HTML文件是由标记和文本组成格式为 标记 受标记影响的文本 标记 标记的属性 标记需要通过属性制作各种效果 格式为 属性示例 注意 使用时属性之间没有顺序 对同一段文本 可以用多个标记来共同作用 产生一定的效果 HTML也有注释标记 之间的部分为注释内容 可以插入文本的任何地方 标记和属性不区分大小写 2HTML的基本结构HTML文件以开头 以结尾 HTML文件包括头部和主体 基本结构为 网页标题网页内容 例1 简单的HTML文件网页设计我的第一个网页 2 2文件结构的格式标记 1 HTML文档标记HTML文档标记的格式为 HTML文档内容处于文档的最前面 表示HTML文档的开始 即浏览器从开始解释 直到遇到为止 每个HTML文件均以开始 以结束 2 HTML文件头标记 HTML文件头标记的格式为 头部内容文件头部在文件标记之后 其内容可以是标题名 文本文件地址 创作信息等网页信息说明 对应于相应的标记 如标题标记 3HTML文件标题标记标题名 例2 如果没有使用标记 而单独使用 标记仍可设定 网页设计无title gt 标记仍起作用 显示结果描述实体不可拆分的空格 单引号 想要在HTML中显示一个小于号 需要用到字符实体 一个字符实体拥有三个部分 一个and符号 注意 实体名是大小写敏感的 4HTML文件主体标记格式为 background 文件名 text 颜色 link 颜色值 vlink 颜色值 alink 颜色值 background设置网页的背景图像 bgcolor设置网页的背景色 text设置文本的颜色 link设置未被访问过的超文本链接的颜色 默认为蓝色 vlink设置已被访问过的超文本链接的颜色 默认为蓝色 alink设置超文本链接在被访问瞬间的颜色 默认为蓝色 3HTML文字格式与页面格式 3 1设置标题格式设置标题格式的格式为 标题属性align用来设置标题在页面中的对齐方式 left 左对齐 center 居中 或right 右对齐 属性n用来指定标题文字的大小 n可以取1 6的整数值 取1时文字最大 6时文字最小 默认时为 这些标记显示宋体字 标记会自动插入一个空行 不必用标记再加空行 在一个标题行中无法使用不同大小的字体 例3 用设置标题的大小 网页设计今天天气真好 今天天气真好 今天天气真好 今天天气真好 今天天气真好 今天天气真好 今天天气真好 3 2设置强制换行标记放在一行的末尾 可使后面的文字换到下一行 而又不会在行与行之间留下空行 强制换行标记的格式为 文字换行标记单独使用 可使页面清晰 整齐 例4 强制换行标记的使用 强制换行标记的使用欢迎进入牡丹园 新闻影视聊天室 3 3设置文字格式 1设置文字的大小设置文字的大小的格式为 被设置的文字标记可设定文字的字体 字号和颜色 size用来设置文字的大小 数字的取值范围从1 7 size取1时最小 取7时最大 face用来设置字体 如黑体 宋体 楷体 GB2312 仿宋 GB2312 隶书 TimesNewRoman等 color用来设置文字颜色 和标记都可以设置文字的大小 当中的size取7时的文字比要大 例5 用设置文字的大小 用设置文字的大小文字的大小 文字的大小size 1文字的大小size 2文字的大小size 3文字的大小size 4文字的大小size 5文字的大小size 6文字的大小size 7 2设置字体当文字是汉字时 格式中的 字体名 可以为 宋体 幼圆 隶书 楷体 GB2312 黑体 仿宋 GB2312等 当文字为英文时 字体名可以为TimesNewRoman等约50种字体 例6 设置字体设置字体幼圆隶书黑体楷体 GB2312仿宋 GB2312 3设置字型字形就是文字的风格 如加粗 斜体 带下划线 上标 下标等 字型的控制标记见表2 3 例7 设置字型设置字型设置字体黑体设置字体斜体设置字体带下划线设置字体带删除线设置字体下标 4设置文字颜色 a 标记中的text属性利用标记的text属性 可以设定整个网页文字的颜色 格式 受影响的文字与标记所含的内容是HTML文件的主体 所以它带来的参数对整个文件起作用 颜色可以用相应英文单词或以 引导的一个十六进制代码表示 例8 用标记设定文字的颜色用标记设定文字的颜色静夜思李白床前明月光 疑是地上霜 举头望明月 低头思故乡 b 标记中的color属性利用标记中的color属性 可以设定段落 短语 词或字的颜色 格式为 受影响的文字颜色的取值与标记的取值方法相同 例9 用标记设定文字的颜色 用标记设定文本的颜色黑色蓝色棕色青色白色绿色红色黄色 c 与的优先级当与同时对文字颜色进行定义时 标记优先 3 4设置段落格式 1强制换段标记强制换段标记的格式为 文字段落标记放在这段文字的末尾 就定义了一个新段落的开始 标记不但能使后面的文字换到下一行 还可以使两段之间留一空行 强制换段标记可以看作强制换行标记和加一行空行 例2 10 强制换段标记欢迎访问吉林大学主页学校概貌美丽校园吉大简报 2设置段落标记设置段落标记的格式为 文字其中属性align用来设置段落的对齐方式 可以为left center或right 分别表示居左 居中 居右 默认时为left 3显示预排格式标记 当用其他编辑工具编排好了一段文字后 其中很可能有一些HTML文件不支持的控制符号 如回车 多个空格 Tab键等 如果希望在浏览网页时仍保留在编辑工具中已经排好的段落格式 可以使用标记将预先排好的格式保留下来 显示预排格式标记的格式为 预先排好的格式 例2 11 预排格式标记的使用 显示预排格式唐诗二首赋得古原草送别长相思唐 白居易唐 白居易离离原上草 一岁一枯荣 汴水流 泗水流 野火烧不尽 春风吹又生 流到瓜洲古渡头 远芳侵古道 晴翠接荒城 吴山点点愁 又送王孙去 萋萋满别情 思悠悠 恨悠悠 恨到归时方始休 月明人依楼 4设置超级链接 列表和表格 4 1设置超级链接1锚点标记 锚点 anchor 标记由定义 它在网页上建立超文本链接 通过单击一个词 句或图片 可从此处转到另一个链接资源 目标资源 这个目标资源有唯一的地址 URL 以上特点的词 句或图片就称为热点 标记的格式为 热点属性href为超文本引用 它的值为一个URL 是目标资源的有效地址 属性name指定当前文档内的一个字符串 作为链接时可以使用的有效的目标资源的地址 热点可以根据需要设置颜色 利用标记中相关的属性 2建立指向其他页面的链接其格式为 热点文本根据目标文件与当前文件的目录关系 有如以下4种写法 1 链接到同一目录内的网页文件链接到同 目录内的网页文件的格式为 热点文本 2 链接到下一级目录中的网页文件链接到下一级目录中的网页文件的格式为 热点文本3 链接到上一级目录中的网页文件链接到上一级目录中的网页文件的格式为 热点文本其中 表示退到上一级目录中 4 链接到同级目录中的网页文件链接到同级目录中的网页文件的格式为 热点文本 5 创建指向本页中的链接要在当前页面内实现超链接 需要定义两个标记 一个为超链接标记 另一个为书签标记 超链接标记的格式为 热点文本即单击热点文本 将跳转到 记号名 开始的文本 书签就是用标记对该文本做一个记号 若有多个链接的书签名 书签名在的name属性中定义 格式为 目标文本附近的字符串 例2 14 链接本页中的文本链接本页中的文本学院概况1专业课2实验室3资料室1专业设置 2实验室 3资料室 6 创建指向电子邮件的链接若要创建指向电子邮件的链接 在标记的href属性中加入mailto 其格式为 热点文本例如 E mail地址是kmas 建立如下链接 信箱 kmas 4 2设置列表 列表分为无序列表和有序列表两类 带序号标志 如数字 字母等 的表项就组成有序列表 否则为无序列表 1 无序列表无序列表中每一个表项的前面是项目符号 如 等 建立无序列表使用标记和表项标记 格式为 第一个列表项第二个列表项 注意 是单标记 即一个一个表项的开始 就是前一个表项的结束 无序列表的特点 列表项目作为一个整体 与上下段文本间各有一行空白 表项向右缩进并左对齐 每行前面有项目符号 每个表项左端的项目符号可为disc 实心圆点 circle 空心圆点 square 方块 也可为图像 例如 例15 无序列表应用示例无序列表专业设置计算机应用计算机软件计算机图形学 2 创建有序列表通过带序号的列表可以更清楚地表达信息的顺序 使用标记可以建立有序列表 表项的标记为 格式为 第一个列表项第二个列表项 在浏览器中显示时 有序列表整个表项与上下段之间各有一行空白 列表项目向右缩进并左对齐 各表项前带序号 例2 17 有序列表应用示例有序列表专业设置计算机应用计算机软件计算机图形学 列表的嵌套列表嵌套把主页分为多个层次 例如书的目录 给人以很强的层次感 有序列表和无序列表不仅可以自身嵌套 而且可以相互嵌套 1 无序列表中套无序列表 例2 19 无序列表中套无序列表无序列表中套无序列表第一层无序列表1第二层无序列表第二层无序列表第一层无序列表2第二层无序列表第二层无序列表第二层无序列表 2 无序列表嵌套有序列表 例2 20 无序列表中套有序列表无序列表中套有序列表第一层序列表1第二层有序列表第二层有序列表第一层无序列表2第二层有序列表第二层有序列表第二层有序列表 4 3设置表格 1建立简单表格最简单的表格仅包括行和列 表格的标记为 行的标记为 表头的标记为 表项的标记为 其中 是单标记 表项内容写在与之间 则必须成对使用 其格式为 表头1表头2 表头n表项1表项2 表项n 表项1表项2 表项n 在浏览器中显示时 标记的文字按粗体显示 标记的文字按正常字体显示 表格的整体外观由标记的属性决定 border定义表格边框的粗细 n取整数 单位是像素 如果省略 则不带边框 width定义表格的宽度 x为像素数或占窗口的百分比height定义表格的高度 y为像素数或占窗口的百分比cellspacing定义表项间隙 单位是像素cellpadding定义表项内部空白 单位是像素 例2 21 建立有框线和无框线简单表格 建立有框线和无框线简单表格学号姓名语文数学平均分数0001张三9298 595 30002李四8882850006王麻子68 59079 3 2 给表格加上标题用标记给表格加标题 其格式为 标题其中 valign设置标题放在表的上部top 默认 还是下部bottom align设置标题放在表的上部top或下部的中间 缺生 左边left 还是右边right 3跨多行多列的表项使用 标记的colspan和rowspan属性 可以分别制作跨多行 合并行 和跨多列 何并列 的表格 跨多列的表元例如 MorningMenuFoodDrinkSweetABC 跨多行的表元MorningMenuFoodADrinkBSweetC 例2 22 建立多重表头的格式建立多重表头的格式成绩表学号姓名成绩语文数学总分数1张三85651502李四76971733王武8778165 4 表格在页面中的属性 1 设定表格在页面中的位置表格浏览器窗口的位置也有三种 居左 居中和居右 使用标记的align属性 格式为 left表示居左 center表示居中 right表示居右 当表格位于页面的左侧或右侧时 文本填充在另一侧 当表格居中时 表格两边没有文本 当align属性默认时 文本在表格的下面 2 表格的图像背景可以在 标记中使用下面属性 background 图像文件名 设置背景图像 bordercolor 颜色 设定表格边框颜色 bordercolorlight 颜色 设定表格边框亮部颜色 rules row cols或none 设定表内线的显示方法 另外 还可以用标记中bgcolor属性给表格的每个单元设置背景色 tdbgcolor 颜色或颜色值 例2 23 设定表格在页面中的位置和图像背景设定表格在页面中的位置和图像背成绩表学号姓名语文数学平均分数0001张三9298 595 30002李四8882850006王武68 59079 3 5 1设置图像标记 Img标签和src属性在HTML里面 图像是由标签定义的 是空标签 意思是说 它只拥有属性 而没有结束标签 想要在页面上显示一个图像 需要使用src属性 src 表示 源 的意思 src 属性的值是所要显示图像的URL 插入图像的语法 5设置多媒体与框架 标记中的属性说明如下 src属性指出想要加入图像的文件名 即 图像文件的路径 图像文件名 alt属性在浏览器尚未完全读入图像时 在图像位置显示的文字 width属性图像的宽度 像素数或百分数 height属性图像的高度 像素数或百分数 hspace属性水平方向空白像素数 vspace属性垂直方向空白像素数 align属性图像在页面中的对齐 布局方式 或图像与文字的对齐方式 例2 24 设置图像的尺寸 设定图像的尺寸原始大小宽60高100宽15 高40 5 4设置网页的背景 1 设置背景色格式为 颜色值 可以为颜色的英文名或相应十六进制值 2 用图像作为背景其格式为 图像文件名 中包括图像文件的路径可以是相对路经也可以是绝对路径 图像文件可为GIF格式或JPEG格式的文件 图像文件要做得很小 以便加快下载速度 例2 25 图像作背景 用图像作为背景用图像作为背景 3用图像作为超链接图像也可以作为热点 可以为图像设置超连接 格式为 链接到的文件名和图像文件名中均须写出所需的路径 5 5设置框架 1 建立框架框架的建立使用 两个标记 它与一般的HTMl文件并无大的区别 只是将标记取代标记 用来声明框架的定义 标记用来声明其中框架页面的内容 其基本结构为 1 标记标记用来定义 个框架组的属性 格式为 其中属性 row设定横向分割的框架数日 cols设定纵向分割的框架数日 border设定边框的宽度 bordercolor设定边框的颜色 frameborder设定有 无边框 framespacing设置各窗口间的空白 2 标记标记用于给各个框架指定页面的内容 也就是 它将各个框架和包含内容的那个文件联系在一起 是一个单标记 格式为 属性 src表示该框架对应的源文件 name指定框架名 框架名由字母开头 下划线开头的名字无效 例如 也就是说 源文件可以是某个网址上的文件 只需写上URL border设定边框的宽度 bordercolor设定边框的颜色 frameborder设定有 yes 无 no 边框 marginwidth设置框架内容与左右边框的空白marginheight设置框架内容与上下边框的空白scrolling设置是 yes 否no 自动 auto 加入滚动条 noresize设置不允许窗口改变大小 默认设置是允许窗口改变大小 例2 27 建立横向排列的框架建立横向排列的框架 例2 28 建立纵横排列的框架 本例题中的网页文件为本章中的例题 建立纵横排列的框架 2 设置框架属性1 设定框架的有无和颜色利用和标记可以设置边框的外观 如大小 颜色 两个标记所不同的是 标记设置的是整个框架的属性 而只能设置它所控制的框架 设定无边框格式为 或其中取值yes或1 默认 表示生成立体的边框 no或0表示无边框 例2 29 将 例2 28 纵向框架设置为有表框 其他设为无边框 建立纵横排列的框架 2 设定边框颜色利用和标记的bordercolor属性给边框着色 格式为 或颜色可取颜色名或十六进制颜色值