第3章网页设计技术.pptVIP

第3章 网页设计技术─HTML 3.1 HTML语言入门 3.2 超链接 3.3 网页的修饰 3.4 HTML表格（table） 3.5 HTML表单（form） 3.6 多媒体页面 3.7 用FrontPage 2000设计网页 3.1 HTML语言入门 HTML（Hypertext Markup Language，超文本标记语言）是一种 用来制作Web网页的简单标记语言。Web浏览器能够自动解释超文 本文件（.html或.htm）中标记的含义，并按照一定格式显示。 一般的HTML文件具有如下格式： html head title 出现在浏览器标题栏中的内容 /title /head body 出现在浏览器网页中的内容 /body /html 3.1 HTML语言入门 一个简单例子（first.html） html head title第一个网页/title /head body 这是我的第一个HTML文件！ /body /html 3.2 超链接 超链接是超文本的基本结构，利用链接可以将不连续的两段文字或两个文件联系起来。可分为同一网页中的链接和不同网页中的链接两种。 3.2.1 统一资源定位器（URL） URL的构成： Protocol://[:port]/directory/filename 其中， Protocol为访问该资源所使用的协议，可以是http（超文本传输协议，访问的资源是HTML文件）、ftp（文件传输协议）、gopher（该协议用于访问gopher文件）、News（表明所访问的资源为网络新闻） 。是存放资源的主机名或IP地址， port为该主机使用的端口号（默认的端口号是80，可以不指定），directory和filename代表资源的路径和文件名。 例如，，表示运行燕大WWW服务器上的起始HTML文件。 3.2 超链接 3.2.2 超链接的基本格式 格式如下： a href=“链接的地址或文件”高亮度显示的文本/a 以a为超链接的开始,href指出所要链接的信息，常用HTTP、FTP等链接方式。在a和/a之间的内容是链接到其他资源的链接点。网页中，一般文字上的超链接为蓝色，鼠标指针指向该超链接上时显示“手形”指针。 3.2.3 同一网页中的链接 分两步完成：首先， 用a href=“url#name”text/a设置超链接（即建立指向目标的链接），其中name为标记名，对同一个文件可不用url；然后，通过a name=“name” text/a标识目标（即在被指向目标的地方做标记）。单击网页中的text就可以跳转到标记名为name的部分。一个具体例子（hypertext.html） 3.2 超链接 3.2.4 不同网页之间的链接 既可以是同一网站内不同网页之间的链接，也可以是不同站内网页之间的链接。例如： html head title不同网页之间的链接/title /head body a href=hypertext.html出版物目录/abr a href=清华大学出版社/abr /body /html 3.3 网页的修饰 HTML语言允许使用各种标记来对网页进行修饰。 2.3.1 字体标记 HTML中有许多用于字体的形状、大小、颜色等有关字符描述的标记。对字符大小的描述分为6级，从h1到h6 ，题号越小，字体越大。 hn可以使用对齐属性，表示为：align=#，其中的#可以选left、center或right。例如： h2 align=center Chapter 3/h2 字体可采用font /font标记，并且可以带color属性。例如： font color=“gray” size=3 /font，其中的颜色也可以用十六进制数表示， font color=“808080” size=3 /font 一个对字符控制进行比较的例子（font.html） 3.3 网页的修饰 2.3.2 网页标记 ⒈ 加入注释：! --注释内容--，放在注释中的文本不在网页中显示。 ⒉ 段标记：p… /p p表示新一段开始， /p在应用中经常被省略。 ⒊ 换行标记：br ⒋ 预格式化文本标记：pre…/pre 浏览器不认识段中缩进部分和空白，需要使用该标记预格式化文本。 ⒌ 水平线标记：hr 为了产生较好的视觉效果，可用该标记将文本分开。 ⒍ 文字对齐标记 居中对齐：center…/center 左对齐：left…/left 右对齐：right…/right 3.3 网页的修饰 ⒎ 背景彩色或背景图案 格式： body background=“image-URL” bgcolor=#link=#text=#alink=#=# 其中，Background：背景图案和图