第2章应用对象并设计链接_应用对象设计-CSDN博客

本文链接：https://blog.csdn.net/luqin/article/details/1210270

第一部分相关内容介绍

1.1 HTML文件的基本结构

HTML文件是一种纯文本格式的文件，它由头部和文件主体组成，基本结构如下：

<html>

<head>

   <title> 这里是网页的标题</title>

    </head>

<body>

     这里是网页的内容

</body>

</html>

说明：

1 HTML文件：以<HTML>开头，以</HTML>结尾，包括头部(HEAD)和主体(BODY)两大部分。

2 < HEAD >…</ HEAD >：表示这是网页的题头部分，用来说明文件命名和文件本身的相关信息。

3 <TITLE>…</ TITLE >：网页的标题。

4 <BODY>…</BODY>：网页的正文部分。

5 对于HTML标识，大、小写或混写都可以。如<HTML>、<html>或<Html>，其结果都是一样

为了程序的易读性，建议将标记的首尾对齐，内部的内容向右缩进几格。

在初学编写HTML文件时，只需一个编辑文本文件的编辑器如记事本，保存为以.htm或.html为后缀的文件就成为一个简单的网页，还有一个浏览器如IE就可以了。

例1-1 一个简单HTML文件（1-1.htm）

<html>

<head>

<title>第一个网页</title>

</head>

<body>

这是我的第一个网页。

</body>

</html>

/*************************常见标记*************************/

1 HTML的换行和分段标记<br>、<nobr>、<p>、<pre>、<hr>、<blockquote>等；设置段落的对齐方式

2 常用的字符格式标记，如<Hn>、<font size=”……” color=”……”>；物理字符格式标记如<b>、<big>、<sup>、<sub>等；逻辑字符格式标记如<em>、<strong>、<code>、<address>等

2          列表标记，包括有序列表标记<ol>、<li>；无序列表标记<ul>、<li>；定义列表标记<dl>、<dt>、<dd>

绝对 URL 和相对 URL 地址的概念；超链接标记 <A href=” 目标 URL” target=” 窗口名称 ”>; 锚点标记 <A name=” 书签名称 ”>

3 图像标记〈IMG〉的src、alt、width，height、align、hspace、vspace等属性

4 图片超链接使用〈A〉标记；热区超链接使用〈MAP〉和〈AREA〉标记，并在〈IMG〉中使用usemap属性引用〈MAP〉标记所定义的热区

5 网页中加入多媒体，包括〈BGSOUND〉、〈IMG dynsrc=”…”〉、〈EMBED〉、〈OBJECT〉标记等

6 滚动字幕标记〈MARQUEE〉……〈MARQUEE〉

7 一个表格的基本元素由以下四个部分组成：

<table>……</table>    表格区

<tr>                 定义行

<th>                 表头

<td>                 数据单元

例4-1

<table>标记常用的属性有：

border：      定义表格边框的粗细。单位是像素，如果省略，则不显示边框线。

Width, height：定义表格的宽度和高度，值为像素数或百分比。

Cellspacing：定义单元格间距，单位是像素。单元格之间的间隔线。

Cellpadding：定义单元格边距，单位是像素。单元格与内容之间的宽度。

Align：       定义表格在窗口中的水平对齐方式，取值可为left，center或right。

<caption>标记用于定义表格的标题，它位于<table>……</table>之间，属性有align和valign，取值如下：

align=left或center或right或top或bottom

valign=top或bottom
可以在<caption>……</caption>标记之间使用修饰文本的标记(如<font>、<b>等)对表格标题文字进行修饰。

8 表单由<FORM>标记、表单控件、提交按钮等组成

• 创建表单使用<FORM>标记,主要有method、action等属性

• 使用<INPUT>标记,通过指定不同的type属性,可以创建9种表单控件

• 使用<TEXTAREA>标记创建多行文本框,使用<SELECT>和<OPTION>可以创建下拉列表;使用<LABEL id=”…”>标记可以指定控件的标签

***********************例如下列例子标记*********************************/

1). 预排格式标记<pre>：在<pre>…</pre>标记中的文字可按照原样显示 .

预排格式样式举例

1 在网页上http://www.ascii-art.de/
选取书本ascii图象

2 回到dreamweaver,开启新网页,从文本属性面板的"格式"下拉菜单中选择"预先格式化的"

3 选取html源代码中<pre>和</pre>标签之间的 

4 粘贴书本ascii图象图象

2) 在网页中插入多媒体
1 加入背景声音：用<bgsound>标记，格式为 <bgsound src=“声音文件” loop=“播放次数”>

l 背景声音文件的格式为：.wav，.au或.mid,播放次数取-1或infinite时，声音将一直播放直到关闭网页。

l <bgsound>标记一般放在<head>……</head>区域中。

2 加入视频剪辑：用<img>标记的dynsrc属性可加入.avi视频剪辑文件，格式为

3 embed元素：embed用来在网页中嵌入对象，语法结构为：

插入flash动画：<embed src=“star.swf” pluginspage=“http://www.macromedia.com/shockwave/…..” >

插入音频和视频文件：

第二部分实验报告模板

附件：

静态网页设计实验报告

实验名称 Dreamweaver(一)

班级 05计算机应用班学号姓名

一、实验的目的和要求

目的： 通过本次实验，使同学们能掌握站点的定义，通过制作简单页面熟悉常见的 HTML 标记。

要求：新建文件夹并把它作为站点文件夹，设计一简单页面，能修改基本 html 标记的属性来显示网页效果。

二、实验内容：

1、定义站点

2、新建一简单页面，修改<title>，<body>,<hr>等标记属性，改变网页显示效果。

三、实验结果：
（附页面效果图）

实验内容一<hn>标记的使用

Chris''s First Homepage
My profile

第2章 HTML语言基础

2.1 设定文字大小、颜色与字型

2.2.1 文字的大小设定

字体color属性 :本行文字为宋体，5号字体，红色
实验内容二有序列表的使用

文学园地

古典文学
1. 西游记
2. 三国演义
武侠天地
1. 寻秦记
现代文学
科幻文学
创作园

添加图片

四、本次实验的收获：

*******************html常见标记的详细解释*(转自互联网上内容)*****************/

第三章背景的变化

语法:

或

TEXT 本文的颜色

LINK 可以链结的文字颜色

VLINK 已链结过的文字颜色

ALINK 被按下的文字颜色

BGCOLOR 背景颜色

BACKGROUND 背景图形

以上各#后为0-9的八个数字，代表各种颜色，若无指定则以浏览器之内定值为准。

第四章字体的变化

语法:<H1>等级一的字</H1>

结果:

等级一的字

语法:<H2>等级二的字</H2>

结果:

等级二的字

语法:<H3>等级三的字</H3>

结果:

等级三的字

语法:<H4>等级四的字</H4>

结果:

等级四的字

语法:<H5>等级五的字</H5>

结果:

等级五的字

语法:<H6>等级六的字</H6>

结果:

等级六的字

语法:<I>斜体字</I>

结果:

斜体字

语法:<B>粗体字</B>

结果:

粗体字

语法:<TT>TELETYPE打字机字体</TT>

结果:

TELETYPE打字机字体

语法:<BLINK>闪烁字体</BLINK>

结果:

闪烁字体

第五章一些分隔的标签

<BR>强迫跳到下一行

<P>产生一行空白

<HR>水平分隔线(就是像上面的那一条线)

<HR WIDTH=40%>水平线占萤幕的40%

结果如下:

<HR SIZE=10>水平线变粗

结果如下:

<HR NOSHADE>不透明水平线

结果如下:

第六章如何依照自定义排列方式显示

范例:

<PRE>

因HTML会忽略多余的空白与行，所以如果想依照PE2所输入的格式显示。

就必须加入PRE的标签。

HTML就会依照输入的格式排列。

不再忽略多余的空白与行。

</PRE>

第七章各种条列的排列

数字化排列

语法:<OL>

<LI>第一章

<LI>第二章

<LI>第三章

</OL>

结果:

第一章
第二章
第三章

语法:<OL TYPE=I>

<LI>第一章

<LI>第二章

<LI>第三章

</OL>

结果:

第一章
第二章
第三章

语法:<OL TYPE=A>

<LI>第一章

<LI>第二章

<LI>第三章

</OL>

结果:

第一章
第二章
第三章

以上TYPE的变化也可用i或a

非数字化排列

语法:<UL>

<LI>第一章

<LI>第二章

<LI>第三章

</UL>

结果:

	第一章
	第二章
	第三章

这是一个最简单的表格

第一格	第二格	第三格
下一格	下二格	下三格

跨栏的表格
第一项	第二项	第三项

跨列的表格	右边第一列
跨列的表格	右边第二列

这是指定表格线条的粗细

指定字与表格的距离

以下文字靠左靠右对中
靠左
靠右
对中

1.2.5几种编写动态网页的语言

1 CGI

CGI(Common Gateway Interface)的中文译名是“公用网关接口“，它是用于Web服务器和外部应用程序之间信息交互的标准接口。即CGI仅是在WWW服务器上可执行的程序代码，其工作就是接受用户的请求，产生用户所需的信息，传输给客户端的浏览器。

可以用任何一种拥护熟悉的高级语言(如C，C++，VB，Perl等)来编写CGI程序。CGI技术编程和调试比较困难，对开发者的要求比较高。同时它与数据库连接方面没有一个公用的标准，而 Internet上数据库的使用是非常多的。这样就使得ASP技术应运而生了。

2 ASP

ASP是Active Server Pages的缩写，中文译名是“动态服务器页面”，它是Microsoft公司推出的用以取代CGI的技术，通过ASP可以结合HTML网页，ASP指令和ActiveX组件建立动态，交互，高效的Web服务器应用程序。

其特点有：

1) 使用VBScript脚本语言和ASP的内置对象以及ADO组件等，可以方便地操作各种数据库，再结合HTML语言，即可编写出功能强大的Web应用程序。

2) 无需编译，直接在服务器端执行

3) ASP设计的网页与浏览器无关，只要用户端使用的浏览器能执行标准HTML代码就可以了。

4)有一定的安全性，ASP源程序不会被传到用户端的浏览器，避免ASP程序被别人抄袭。

支持ASP的Web服务器的第一个成熟版本是Windows NT中的IIS4.0，现在通常是Windows2000中的IIS5.0。由于Windows 2000 Server的广泛应用，以及ASP的简单易用和良好的性能，ASP技术在Internet中的应用越来越普遍。

3 php

PHP是Hypertext PreProcessor的缩写。类似ASP技术，也是一种服务器端的，嵌入HTML的脚本语言。PHP独特的语法混合了C，Java，Perl以及PHP式的新语法，在性能和易用性上与ASP一样，都有不错的表现。

PHP是一种跨平台的服务器端脚本技术，目前有基于Unix和Windows NT/2000的版本，而不像ASP技术，必须运行在Windows NT/2000服务器上。

4 JSP

JSP是Java Server Pages的缩写，这种新的Web应用开发技术为创建高度动态的Web应用提供了一个独特的开发环境。按照SUN公司的说法，JSP能够适应市场上包括Apache Web Server，IIS5.0在内的85%的Web服务器产品。

JSP与Microsoft的ASP技术非常相似。在ASP或JSP环境下，HTML代码主要负责描述信息的显示样式，而程序代码则用来描述处理逻辑。

ASP与JSP都是面向Web服务器的技术，客户端浏览器不需要任何附加的软件支持。

作为Java平台的一部分，JSP拥有Java编程语言“一次编写，各处运行”的特点。

限定的排列

语法:<DL>

<DT>第一章

<DD>第一小节

<DT>第二章

<DD>第一小节

</DL>

结果:

第一章

第一小节

第二章

第一小节

第八章文件中的注解

如一个HTML的文件非常大，最好加上注解， ，在此标签中的文字，将不会

被浏览器显示出来。

第九章如何使用超链结

在HTML文件中的一大特色就是随时可以按一个键就可以连往世界任何一个角落，这样的功能其实只要一行指令就可以做到了。

语法:<A HREF="http://brooklet.yeah.net">回到主页</A>

结果:回到主页

http:後面是接著一个网路的位址

其他还有下列各种链结:

gopher:连接gopher资料库系统

ftp:连接ftp撷取档案系统

news:连接news新闻讨论群

mailto:连接E-mail寄信

telnet:连接远程载入系统

以上链结位址如果在同一机器上而且在同一目录更可省略成:

<A HREF="main.htm">回到清请小河</A>

这就是所谓的相对路径

链结到文件中的某一部份

语法:<A HREF="#TOP">回到本篇文章的最前面</A>

结果：回到本篇文章的最前面

以上语法HREF与NAME 需相互对应，按下链结点即可前往NAME 所在的地方

第十章如何加上图形

加上图形也是一件很简单的事情。

语法:<IMG SRC="../images/red1.gif" ALT=red1></IMG>

结果:

ALT:如使用无法显示图形的浏览器即会出现ALT后所写的文字

图片放置的位置与大小控制

语法<IMG SRC="../images/red1.gif" ALIGN=LEFT></IMG>图片靠左

结果:

图片靠左

语法:<IMG SRC="../images/red1.gif" ALIGN=RIGHT></IMG>图片靠右

结果:

图片靠右

语法:<IMG SRC="../images/red1.gif" ALIGN=TOP></IMG>图片向上对齐

结果:

图片向上对齐

语法:<IMG SRC="../images/red1.gif" ALIGN=BOTTOM></IMG>图片向下对齐

结果:

图片向下对齐

语法:<IMG SRC="../images/red1.gif" ALIGN=MIDDLE></IMG>图片向中对齐

结果:

图片向中对齐

语法:<IMG SRC="../images/red1.gif" HEIGHT=80 WIDTH=150></IMG>指定图片高度为80 宽度150

结果:

指定图片高度为80 宽度150

文字绕图的写法

语法:<IMG SRC="../images/red1.gif" ALIGN=LEFT></IMG>

静夜思<BR>

唐李白<BR>

床前明月光，疑是地上霜。<BR>

举头望明月，低头思故乡。<BR>

<BR>

结果:

静夜思
唐李白
床前明月光，疑是地上霜。
举头望明月，低头思故乡。

第十一章表格的制作

语法:

<TR><TH>这是一个最简单的表格</TH></TR>

</TABLE>

结果:

语法:

</TABLE>

结果:

语法:

<TR><TH COLSPAN=3>跨栏的表格</TH></TR>

</TABLE>

结果:

语法:

<TR><TH ROWSPAN=2>跨列的表格</TH><TH> 右边第一列</TH></TR> <TR><TD> 右边第二列</TD></TR>

</TABLE>

结果:

语法:

<TR><TH>这是指定表格线条的粗细</TH></TR>

</TABLE>

结果:

语法:

<TR><TH>指定字与表格的距离</TH></TR>

</TABLE>

结果:

语法:

<TR><TH ALIGN=CENTER>以下文字靠左靠右对中</TH></TR>

</TABLE>

结果:

---------------------------------------------------------------------

第十二章分栏的制作

语法:

</frameset>

</frameset>

对不起，您的浏览器不支持分栏

</noframes>

说明:

frameset-->设定分割画面的大小比例，此标签须有相对的结束标签

rows-->设定分割为上下画面

cols-->设定分割为左右画面

分割画面大小可用下列数值表示:

80%，20%或300，*或40%，20%，* 以此类推可分割成各种不同大小的视窗

frame-->设定各个分割视窗分别使用的html

name-->指定此视窗的名称

scrolling=no或yes或auto--> 指定此视窗是否要有卷轴bar

noresize-->强迫此视窗不可拖曳改变大小

noframes-->给浏览器不支援分割画面的使用者看的部份，须有结束标签

以下是一些特殊技巧:

在个别视窗中的html如要使用特殊的功能就必须加一些参数

否则所有的动作将在自己本身的视窗中进行

语法:

target-->如设定=_top，代表按下此链结整个画面都会变为所指定的链结

如设定=自定的名称，需与name的参数互相配合，

代表按下此链结与指定name 相同名称的视窗才会改变画面。

第2章 应用对象并设计链接

第2章 HTML语言基础

2.1 设定文字大小、颜色与字型

2.2.1 文字的大小设定

文学园地

等级一的字

等级二的字

等级三的字

等级四的字

等级五的字

等级六的字

第2章应用对象并设计链接