文档介绍：网页与HTML
最简单的网页编写:
工具:“记事本”(Notepad)
<html>
<head>
<title>大家好!</title>
</head>
<body>
大家好!这是我们制做的第一个网页。<br>
点击超级链接进入<a href="">新浪</a>
</body>
</html>
保存网页文件名:“”(*.htm,超文本文件),效果。。代码查看
网页语言:HTML( HyperText Markup Language,超文本标记语言)
HTML组成:
标记(Tag):“<”、中间的标记名及其参数、“>”
双边标记 “/”
单边标记
文本
HTML基本结构:
<html> HTML文件开始
<head> 文件头部开始
文件头部内容(文档的相关信息,标题和关键字)
</head> 文件头部结束
<body> 文件体开始
文件头部内容(正文部分,所有出现在网页上的正文内容)
</body> 文件体结束
</html> HTML文件结束
超媒体:超文本与多媒体(图片、动画、声音、视频)的融合,使用超文本获取结点存储的多媒体信息
带图的网页编写:
<html>
<head>
<title>大家好!</title>
</head>
<body>
<img src="images\"><br>
大家好!这是我们制做的第一个网页。<br>
点击超级链接进入<a href="">新浪</a>
</body>
</html>
保存网页文件名:“”,效果。。代码查看(图片存放路径)
"所见即所得"型网页制作工具
"所见即所得"型网页制作工具
标记型网页制作工具:手工输入标记
优点:用户能很方便地控制代码,同时保证代码是最精简的
缺点:用户必须相当熟悉HTML,效率太低,容易发生错误
“所见即所得”型网页制作工具:Htm文件在编辑过程中的显示与在浏览器中的显示是一样的。工作:“画页面”,由工具自动生成代码。
主要工具:FrontPage和Dreamweaver
(用FrontPage 2000),效果。。代码查看
比较:
FrontPage:容易使用,与Word兼容性好,丰富的内置模板;不灵活
Dreamweaver:强大的网页控制、设计能力,创意的完全发挥,快速、复杂、创意性强;入门难,高级功能学习难。众多独具特色的设计新概念,支持层叠式样表(CSS)和动态网页设计。
页面动态效果
页面动态效果
实现页面元素的二维空间移动
DHTML(Dynamic HTML,动态HTML),各种技术的综合,不同的浏览器实现的程度不一样
JavaScript
VBScript
Cascading Style Sheets(层叠样式表,CSS)
Document Object Model(文件目标模块,DOM)
JavaScript
JavaScript,脚本语言(Scripting Language)
嵌入到HTML 文件中
由客户浏览器编译运行,在客户机上执行
实现交互式Web网页。
“跑马灯”的动态效果:
<html>
<head>
<SCRIPT Language="JavaScript">
var msg="大家好!这里是跑马灯的动态效果!"; var interval = 300; seq = 0;
function Scroll()
{
len = ; = (0, seq+1); seq++;
if ( seq >= len ) { seq = 0 };
("Scroll();", interval );
}
</SCRIPT>
<title>大家好!</title>
</head>
<body onload="Scroll()">
"跑马灯"效果的制作!
</body>
</html>
<SCRIPT Language="JavaScript">
JavaScript程序段
。。
</SCRIPT>
JavaScript程序段的调用:
<body onload="Scroll()">