网络建设基础.ppt

静态网页设计 1.HTML 编辑器 关于HTML编辑器：用一些所见即所得的编辑器，比如frontpage，dreamweaver，你可以很容易创建一个页面，而不需要在纯文本中编写代码。但是假如你想成为一名熟练的网络开发者，我们强烈推荐你用纯文本编辑器编写代码，这有助于学习HTML基础。 2. HTML文件结构的格式 2.1 HTML的基本语法 1 了解HTML的标记 HTML文件是由标记和文本组成 格式为： 〈标记〉受标记影响的文本〈／标记〉 标记的属性。标记需要通过属性制作各种效果。格式为： 标记 属性1＝属性值 属性2＝属性值…〉受影响的文本〈／标记〉 font size=4 color=red 属性示例 /font 注意： 使用时属性之间没有顺序。对同一段文本，可以用多个标记来共同作用，产生一定的效果。 HTML也有注释标记。“!--”和“-- ”之间的部分为注释内容,可以插入文本的任何地方。 标记和属性不区分大小写。 2 HTML的基本结构 HTML文件以html开头,以/html结尾。 HTML文件包括头部head和主体body。 基本结构为： html head title 网页标题 ／title /head body 网页内容 /body /html 【例1】简单的HTML文件 html head title 网页设计 /title /head body 我的第一个网页！ /body /html 2.2 文件结构的格式标记 1、 HTML文档标记 HTML文档标记的格式为: html HTML文档内容 /html html处于文档的最前面，表示HTML文档的开始，即浏览器从html开始解释，直到遇到/html为止。每个HTML文件均以html开始，以/html结束。 2、HTML文件头标记head../head HTML文件头标记的格式为： head 头部内容 /head 文件头部在文件标记html之后，其内容可以是标题名，文本文件地址、创作信息等网页信息说明，对应于相应的标记。如标题标记title…/title。 3 HTML文件标题标记 title 标题名 ／title 【例2】如果没有使用head标记，而单独使用title，title标记仍可设定。 html title 网页设计 /title body 无lt;headgt;时，lt;titlegt；标记仍起作用 /body /html 4 HTML文件主体标记 格式为： body background=”文件名” text=”颜色” link=”颜色值” vlink=”颜色值” alink=”颜色值”／body background 设置网页的背景图像： bgcolor 设置网页的背景色； text 设置文本的颜色： link 设置未被访问过的超文本链接的颜色，默 认为蓝色； vlink 设置已被访问过的超文本链接的颜色，默 认为蓝色； alink 设置超文本链接在被访问瞬间的颜色， 默认为蓝色 3 HTML文字格式与页面格式 3.1 设置标题格式 设置标题格式的格式为： hn align=对齐方式 标题 ／hn 属性align用来设置标题在页面中的对齐方式：left(左对齐)、center(居中)或right(右对齐)。 属性n用来指定标题文字的大小。n可以取1—6的整数值，取1时文字最大，6时文字最小，默认时为h1。 hn…／hn这些标记显示宋体字。hn…／hn标记会自动插入一个空行，不必用p标记再加空行。在一个标题行中无法使用不同大小的字体。 【例3】用hn设置标题的大小。 html head title 网页设计 /title /head body h1今天天气真好!/hl h2今天天气真好!/h2 h3今天天气真好!/h3 h4 align=left今天天气真好!/h4 h5 align=center今天天气真好!/h5 h6 align=right今天天气真好!/h6 h今天天气真好!h /body /html 3.2 设置强制换行标记 br放在一行的末尾，可使后面的文字换到下一行，而又不会在行与行之间留下空行。 强制换行标记的格式为： 文字 br 换行标记单独使用，可使页面清晰、整齐。 【例4】强制换行标记的使用， html