第一部分 相关内容介绍
1 HTML的换行和分段标记<br>、<nobr>、<p>、<pre>、<hr>、<blockquote>等;设置段落的对齐方式
预排格式样式举例
1 在网页上http://www.ascii-art.de/
选取书本ascii图象
2 回到dreamweaver,开启新网页,从文本属性面板的"格式"下拉菜单中选择"预先格式化的"
3 选取html源代码中<pre>和</pre>标签之间的
4 粘贴书本ascii图象图象
2) 在网页中插入多媒体
1 加入背景声音:用<bgsound>标记,格式为 <bgsound src=“声音文件” loop=“播放次数”>
2 加入视频剪辑:用<img>标记的dynsrc属性可加入.avi视频剪辑文件,格式为
3 embed元素:embed用来在网页中嵌入对象,语法结构为:
第二部分 实验报告模板
实验名称 Dreamweaver(一)
班级 05计算机应用班 学号 姓名
二、实验内容:
( 附页面效果图 )
实验内容一<hn>标记的使用
My profile
第2章 HTML语言基础
2.1 设定文字大小、颜色与字型
2.2.1 文字的大小设定
字体color属性 :本行文字为宋体,5号字体,红色
实验内容二 有序列表的使用
文学园地
目录
- 古典文学
- 西游记
- 三国演义
- 武侠天地
- 寻秦记
- 现代文学
- 科幻文学
- 创作园
添加图片
四、本次实验的收获:
*******************html常见标记的详细解释*(转自互联网上内容)*****************/
语法:
<BODY TEXT=#008000 LINK=#008000 VLINK=#008000 ALINK=#008000 BGCOLOR=#008000>
或
<BODY BACKGROUND="mybackground.jpg">
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>
结果:
第一章 | |
第二章 | |
第三章 |
这是一个最简单的表格 |
---|
第一格 | 第二格 | 第三格 |
---|---|---|
下一格 | 下二格 | 下三格 |
跨栏的表格 | ||
---|---|---|
第一项 | 第二项 | 第三项 |
跨列的表格 | 右边第一列 |
---|---|
右边第二列 |
这是指定表格线条的粗细 |
---|
指定字与表格的距离 |
---|
以下文字靠左靠右对中 |
---|
靠左 |
靠右 |
对中 |
2 ASP
3 php
PHP是一种跨平台的服务器端脚本技术,目前有基于Unix和Windows NT/2000的版本,而不像ASP技术,必须运行在Windows NT/2000服务器上。
4 JSP
作为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>
<A NAME="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>
结果:
静夜思
唐 李白
床前明月光,疑是地上霜。
举头望明月,低头思故乡。
语法:
<TABLE COLSPEC="L20" BORDER=1>
<CAPTION ALIGN=top></CAPTION>
<TR><TH>这是一个最简单的表格</TH></TR>
</TABLE>
结果:
语法:
<TABLE COLSPEC="L20 L20 L20" BORDER=1>
<CAPTION ALIGN=top></CAPTION>
<TR><TH>第一格</TH><TH> 第二格</TH><TH>第三格</TH></TR>
<TR><TH>下一格</TH><TD> 下二格</TD><TD>下三格</TD></TR>
</TABLE>
结果:
语法:
<TABLE COLSPEC="C20 L20 L20" BORDER=1>
<CAPTION ALIGN=top></CAPTION>
<TR><TH COLSPAN=3>跨栏的表格</TH></TR>
<TR><TH>第一项</TH><TD> 第二项</TD><TD>第三项</TD></TR>
</TABLE>
结果:
语法:
<TABLE COLSPEC="L20 L20" BORDER=1>
<CAPTION ALIGN=top></CAPTION>
<TR><TH ROWSPAN=2>跨列的表格</TH><TH> 右边第一列</TH></TR> <TR><TD> 右边第二列</TD></TR>
</TABLE>
结果:
语法:
<TABLE COLSPEC="L20" BORDER=10>
<CAPTION ALIGN=top></CAPTION>
<TR><TH>这是指定表格线条的粗细</TH></TR>
</TABLE>
结果:
语法:
<TABLE COLSPEC="L20" BORDER=1 CELLPADDING=20">
<CAPTION ALIGN=top></CAPTION>
<TR><TH>指定字与表格的距离</TH></TR>
</TABLE>
结果:
语法:
<TABLE COLSPEC="C20" BORDER=1>
<CAPTION ALIGN=top></CAPTION>
<TR><TH ALIGN=CENTER>以下文字靠左靠右对中</TH></TR>
<TR><TH ALIGN=LEFT>靠左</TH></TR>
<TR><TH ALIGN=RIGHT>靠右</TH></TR>
<TR><TH>对中</TH></TR>
</TABLE>
结果:
---------------------------------------------------------------------
语法:
<frameset rows="80%,20%">
<frameset cols="20%,80%">
<frame src=html-13b.htm>
<frame src=html-13c.htm name="lwwwbody">
</frameset>
<frame src=html-13d.htm scrolling=no>
</frameset>
<noframes>
对不起,您的浏览器不支持分栏
</noframes>
说明:
frameset-->设定分割画面的大小比例, 此标签须有相对的结束标签
rows-->设定分割为上下画面
cols-->设定分割为左右画面
分割画面大小可用下列数值表示:
80%,20%或300,*或40%,20%,* 以此类推可分割成各种不同大小的视窗
frame-->设定各个分割视窗分别使用的html
name-->指定此视窗的名称
scrolling=no或yes或auto--> 指定此视窗是否要有卷轴bar
noresize-->强迫此视窗不可拖曳改变大小
noframes-->给浏览器不支援分割画面的使用者看的部份, 须有结束标签
以下是一些特殊技巧:
在个别视窗中的html如要使用特殊的功能就必须加一些参数
否则所有的动作将在自己本身的视窗中进行
语法:
<A HREF="LWWW.HTM" target="_top">
<A HREF="lwwwbody.htm#01" target="lwwwbody">
target-->如设定=_top, 代表按下此链结整个画面都会变为所指定的链结
如设定=自定的名称, 需与name的参数互相配合,
代表按下此链结与指定name 相同名称的视窗才会改变画面。