加载中…
个人资料
山歌书
山歌书
  • 博客等级:
  • 博客积分:0
  • 博客访问:2,167,324
  • 关注人气:12,845
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

网页制作讲义  大学教师  计算机专业

(2011-05-20 17:35:30)
标签:

网页制作

讲义

大学教师

计算机

专业

教育

分类: 教育教学

 

 

《金博志》网址

需要原PDF格式文件请联系金博志网址 

一、网页的概述
二、静态网页HTML
三、可交互网页
四、多窗口页面
五、CSS层叠样式表介绍
六、动态网页应用
七、JavaScript
一、网页的概述
网页的基础知识
网页的组成
文字
图形
超级链接
创建网页工具
网页的基础知识
􀂄 WWW(World Wide Web,万维网)
􀂉 WWW上有种类极其繁多的信息资源,WWW服务主要是一个个网页
来呈现。
􀂉 网站:一群相关网页的集合。设计者制作了几个网页,并且经过组
织规划,让网页彼此相连,这样的完整结构就称为网站。例如微软
的网站是由许多不同内容的网页组成,包括有产品介绍、软件下
栽、访客留言…等等,这样的结构就组成了网站。
􀂉 主页:网站后所看到的第一个页面通称为Home Page,主页通常用
来作为一个网站中的目录或索引,主页的角色就代表了整个网站的
门面,一个网站的风格。
网页的基础知识
􀂄 Web的三要素
􀂉 统一的资源命名方式:URL(Uniform Resource
Locator,统一资源定位符,即地址)。
URL基本格式: how://Who/Where/What
Http://www.logo.com/homepage.html
􀂉 统一的资源访问方式:HTTP(超文本传输协议)。
􀂉 统一的信息组织方式:HTML(超文本标记语言)。
HTML是什么
HTML是用来制作网页的标记语言。
HTML是Hypertext Markup Language的英文缩写,即超文本标记语言。
HTML语言是一种标记语言,不需要编译,直接由浏览器执行。
HTML文件是一个文本文件,包含了一些HTML元素,标签等。HTML文件
必须使用html或htm为文件名后缀。
HTML是大小写不敏感的,HTML与html是一样的。
HTML是由W3C (World Wide Web Consortium)的维护的。
网页的组成
􀂄 一个HTML文档四个最基本标记
􀂉 文件标记
􀂉 头部标记
􀂉 头部标题标记
􀂉 主体标记
对任何一个HTML文档,这四个最基本的标记被称为文档结构标记。
二、静态网页HTML
1.HTML
2.Head
3.Body
4.页面标记
5.文档标题
6.格式标记
7.超链接
8.图形链接
9.表格
HTML主要
源代码介绍
HTML的基本格式
<HTML>
<HEAD>
<TITLE>…</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
Web页面的基本结构
理解HTML标记:<HTML></HTML>,这个标记没有任何意义,
只是告诉浏览器正在处理含有HTML标记的文件。<head>、
<body>标记把文档分成两个部分。
<HTML>
<HEAD>
<TITLE> My Home Sweet Home Page </TITLE>
</HEAD>
<BODY>
This text appears in the body of web page(浏览器会忽略空格,TAB,
回车)
</BODY>
</HTML>
•页面标记
文字颜色<BODY TEXT=“#nnnnnn”>
背景颜色<BODY BGCOLOR=“#nnnnnn”>
背景图片:<body background="image-name">
注意:可以使用的图片格式为BMP,GIF,JPG
<body bgproperties=FIXED> :不滚屏的背景
编号列表使用两种标记
整个列表的前后分别是<OL>和</OL>标记
列表每一项之前是<LI>列表项标记
符号列表使用两种标记
整个列表的前后分别是<UL>和</UL>标记
列表每一项之前还是<LI>列表项标记
•定义列表
定义列表
无序列表:<ul><li>...</ul>
有序列表:<ol><li>...</ol>
定制列表元素的标记:<li type=#> #=disk, circle, square
定制有序列表表中的序号: <li type=#> #=A, a, I, i, 1
定制有序列表表中的序号的起始值: <ol start=#> #=number
• 文档标题
HTML文档也有标题,用<Hn>标记表示。其中,n为
1~6的整数,指定文档标题级别。H 1最大,H6最小。
标题字体
<h#> ... </h#> #=1, 2, 3, 4, 5, 6
格式标记
(1)字符格式标记
标记<Font>与关键字Face,Size,Color组合,可指定字体、字号和字体颜色。
设定不同字体
<font face="#"> ... </font>
字体大小
<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#
字体颜色
<font color=#> ... </font>
(2)段落格式标记
使用<Br>产生新行
使用<P>产生段落和一个空行
(3)<Hr>标记
在屏幕的宽度内画一条水平线
•移动文字(marquee)
基本语法:<marquee> ... </marquee>
文字移动属性的设置:
方向:<direction=#> #=left, right,top,bottom(向左,向右,
向上,向下)
方式:<behavior=#> #=scroll(循环),slide(只走一次),
alternate(来回走)
• 超链接
基本语法<a href="URL"> ... </a>
基本格式有以下几种
<A Name="对象名">…</A> 使指定的对象成为一个超文本链接的目标
<A Name="#对象名">…</A> 定义同一文档中的一个目标
<A Name="URL">…</A> 定义链接的另一目标或目标资源
<A Name="URL#文档名">…</A> 定义另一文档中的一个目标
基本格式中属性Name也可改用HREF
链接
<a href="URL " Target= " _self " > ... </a>在当前窗口展开
<a href="URL" Target= " _Blank " > ... </a>在新窗口展开
<a href="URL" Target= " _Top " > ... </a>在浏览器窗口展开
<a href="URL" Target= " _Test " > ... </a>在Test窗口展开
• 图形链接的基本语法
<IMG SRC="图形文件的URL" 属性>
属性有:
ALT=“Alternate Text”:表示如果是非图形终端,或则图
形终端的设置不兼容时,或则非自动载入图像时,在图像位置替
代图像显示的是字符串。
Align=Bottom或者Middle或者Top:定义图像的位置。
Width=x,Height=y:定义图像的大小,x、y是x轴、y轴
方向的像素数或占整个屏幕大小的百分比。
• 表格的基本语法
<table>...</table>:定义一个表格
<th> ...</ th >:定义表头
<tr> ... </ tr >:定义表中一行
<td>... </ td >:定义表元(表格的具体数据)
三、可交互网页
交互概念
创建交互的方法
实现交互的控件——表单
• 表单的基本语法
<form action="url" method=* enctype="text/plain" >
...
<input type=submit>
<input type=reset>
</form>
*=GET:有字符编码(不能含非ASCII码)和数据量限
制,传输的数据会暴露在URL中。
POST :无以上限制,有些浏览器不支持
action=mailto:xxxxx@xxx.xxx
文本框
<input name=? type=* value=** size=*** maxlength=??>
? 􀃆 文本框的名字
* 􀃆 text, password
** 􀃆 默认值
***􀃆 长度
?? 􀃆 最大输入字符数
复选框和单选框
复选框常用选项:
<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>
单选框常用选项:
<input type=radio value=**>
<input type=radio value=** checked>
注意:各个选项的name必须一样才能达到预期效果。
列表框
基本用法:
<select name=*>
<option selected>
<option value=**>
</select>
<select size=**>:列表框的长度
<select size=** multiple>:允许多选
文本区域
<textarea name=* rows=** cols=**> ...
<textarea>
四、多窗口页面
基本语法:
<frameset>
<frame src="url">
<frame src="url">

<noframes> ... </noframes>
</frameset>
在<noframes> 标记后的文字将只出现在不支持
FRAMES 的浏览器中。
Frames有四个属性:Frameborder,Noresize,
scrolling=yes,no,auto,name
各窗口的尺寸:
<frameset cols=#>:纵向排列多个窗口
<frameset cols=30%,20%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>
横向排列多个窗口
<frameset rows=#>
<frameset rows=30%,20%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>
COLS & ROWS:纵横排列多个窗口
<frameset cols=20%,*>
<frame src="A.htm">
<frameset rows=40%,*>
<frame src="B.htm">
<frame src="C.htm">
</frameset>
</frameset>
不允许各窗口改变大小<frame noresize>
缺省设置是允许各窗口改变大小的。
五、CSS层叠样式表介绍
CSS层叠样式表单是为Web页面定义样式标准的文
档。它们在保证多个页面样式一致性方面颇有价值。样式表
单允许Web设计者从中心位置定义字体、颜色等设计要
素,因此可以使设计者避免了对由于浏览器显示的不同或开
发者疏忽而导致的图形不一致的关注。
CSS层叠样式表单可以对不同的HTML元素设置样式属
性,这些元素包括:文本样式、字体大小和显示样式、链接
颜色等。
CSS定义的四种方法:
1. 在<HEAD>中定义
2. 在<BODY>中定义
3. 建立独立外部样式表文件并附于HTML文档
4. 在行内定义
<HEAD><TITLE>CSS例子</TITLE>
<STYLE TYPE="text/css">
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>
样式规则组成如下:
选择符{ 属性: 值}
单一选择符的复合样式声明应该
用分号隔开:
选择符{ 属性1: 值1; 属性2: 值2 }
六、动态网页应用
动态网页的基本特点:
交互性
自动更新
因时因人而变
静态网页与动态网页
静态网页:是指主页内容是“固定不变”的。当浏
览器通过Internet 的HTTP(Hypertext Transport
Protocol)协议,向站点服务器(Web Server)要求提
供主页的内容时,站点服务器收到要求后,就传送
原已设计好的静态的HTML的文件数据给浏览
器。
动态网页:所谓“动态”,是指主页内容可以因时
因地、根据不同用户的不同要求在浏览器上显示出
不同的结果。
访问网页工作原理
广告HTML
<股票信息> 程序
广告HTML
<0715> HTML
服务器端A 客户端A'
广告HTML 广告HTML
服务器端A 客户端A
静态网页工作原理
动态网页工作原理
Active Server Pages 是什么?
Active Server Pages(动态服务器主页,
简称ASP),内含于Internet Information
Server(IIS)或PWS(Personal Web Server)当
中,提供一个服务器端(server-side)的
Scripting环境,可以产生和执行动态、交互
式、高效率的站点服务器的应用程序。
Active Server Pages实际上是将标准的
HTML文件拓展了一些附加特征,Active
Server Pages象标准的HTML文件一样包含
HTML对象并且在一个浏览器上解释并显
示。
.Asp文件的组成
*.asp文件
Active Server Pages(ASP)制作成.ASP扩展名
的文件,一个.asp文件是一个文本文件,包括:
1.HTML标记(tags)
2.VBscript 或JavaScript语言的程序码
3.ASP语法
七、JavaScript
􀂄 Java Script是脚本语言
􀂄 Java Script是基于对象的语言
􀂄 Java Script是事件驱动的程序
􀂄 Java Script是安全的语言
􀂄 Java Script是与平台无关的语言
JavaScript基础
<Script Language="JavaScript">
<!-- //过滤不支持JS的浏览器
-->
</script>
使用外部文件(后缀名为js)
<html>
<head>
< Script Language="JavaScript " src="abc.js">
</head>
<body>
</body>
</html>
提示:把.js 文件放到网站目录中通常存放脚本的子目录中,
这样更容易管理和维护。
可在head中使用
位于head部分的脚本:在整个页面加载完成之前,
脚本被读取。
<html>
<head>
<Script Language="JavaScript">
....
</script>
</head>
....
可在body中使用
位于body 部分的脚本:在整个页面加载完成之后脚本被读取。
<html>
<head>
</head>
<body>
<Script Language="JavaScript">
....
</Script>
</body>
</html>
JavaScript 语句
JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做
的事情。
document.write("Hello world") 这个JavaScript 语句告诉浏览器向网页
输出“Hello world”:
通常要在每行语句的结尾加上一个分号。
注释:通过使用分号,可以在一行中写多条语句。
JavaScript 代码
JavaScript 代码是JavaScript 语句的序列。浏览器按照编写顺序依次执行
每条语句。
本例向网页输出一个标题和两个段落:
<Script Language="JavaScript">
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</Script>
JavaScript 代码块
JavaScript 可以分批地组合起来。代码块以左花括号开始,以右花括号结
束。
本例向网页输出一个标题和两个段落:
< Script Language="JavaScript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</Script >
JavaScript 注释
􀂄 JavaScript 注释可用于增强代码的可读性
单行的注释以// 开始
本例用单行注释来解释代码:
<Script Language=JavaScript>
function welcome()
{
//这行代码将弹出一个警告窗体。
alert(“欢迎进入JavaScript世界”)
}
</ Script >
JavaScript 多行注释
多行注释以 结尾。本例使用多行注释来解释代码:
<Script Language=JavaScript>

function welcome()
{
alert(“欢迎进入JavaScript世界”)
}
</ Script >
JavaScript 注释
使用注释来防止执行
在本例中,用注释来阻止一行代码的执行:
<Script Language=JavaScript>
function welcome()
{
//alert("欢迎进入JavaScript世界")
}
</Script>
在行末使用注释
在本例中,注释放置在语句的行末:
<Script Language=JavaScript>
function welcome()
{
alert(“欢迎进入JavaScript世界”) //函数alert() 将弹出一个警告窗体。
}
</Script>
JavaScript 的变量
变量是用于存储信息的容器,可以给变量起一个简短名称,比
如x,或者更有描述性的名称,比如length。JavaScript 变
量用于保存值或表达式,比如, length=10; z=x+y;
JavaScript 变量也可以保存文本值,比如,name=“张明”。
JavaScript 变量名称的规则:变量对大小写敏感(y 和Y 是两
个不同的变量);变量必须以字母或下划线开始。注释:由于
JavaScript 对大小写敏感,变量名也对大小写敏感。
JavaScript 的变量
声明(创建) JavaScript 变量
在JavaScript 中创建变量经常被称为“声明”变量。可以通过var 语句来声明
JavaScript 变量:
var length;
var name;
在以上声明之后,变量并没有值,不过可以在声明它们时向变量赋值:
var length=10;
var name="张明";
注释:在为变量赋文本值时,为该值加引号。
JavaScript的表达式与运算符
􀂾表达式的结构
例: x+y
例: 2*3.1415926*r
例: “I like “ + “JavaScript”
􀂾运算符
1、算术操作符:+、-、*、/、%(取模)、++、--、-
2、逻辑操作符:==、!=、<、>、<=、>=
3、赋值操作符:=
4、字符串连接符:+
􀂾布尔操作符
&&(与)
||(或)
!(取反)
JavaScript 中的条件语句
􀂾条件语句
if语句
单条件语句:if(条件){事件}
分支条件语句:
if(条件)
{事件1}
else{事件2}
嵌套条件语句:
if(条件1)
{
事件1
if(条件2) {事件2 }
else {事件3}
}
else{事件4}
JavaScript对象及其属性方法
􀂄 JavaScript 是面向对象的编程语言
对象只是一种特殊的数据。对象拥有属性和方法。
􀂄 属性指与对象有关的值
􀂄 方法指对象可以执行的行为(或者可以完成的功能)
对象及其属性方法
􀂾对象名.属性名
􀂾对象名.方法名()
􀂾创建对象new
var 对象实例名=new 对象名;
window.setTimeout() 在指定的毫秒数后调用函数或计算表达式。
string.substring() 提取字符串中两个指定的索引号之间的字符。
方法描述
window.status 用于设置状态栏显示的文本。
string. length 计算字符串的长度
属性描述
JavaScript 对象
􀂄 Date 对象:用于处理日期和时间。可以通过new 关键词来定义
Date 对象。
以下代码定义了名为myDate 的Date 对象:
var myDate=new Date()
注释:Date 对象自动使用当前的日期和时间作为其初始值。
􀂄 String 对象:用于处理文本(字符串)。
􀂄 Array 对象:用于在单个的变量中存储多个值。
􀂄 Document对象:文挡对象。
document.write() //动态向页面写入内容
Date对象的getHours() 方法
􀂄 getHours() 方法可返回时间的小时
<Script Language=JavaScript>
var d = new Date()
document.write(d.getHours())
</Script >
JavaScript 中的条件语句
If 语句实例
<html>
<body>
<Script Language=JavaScript>
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("早安")
}
</script>
<p>本例演示If 语句。
<p>如果浏览器时间小于10,那么会向您问“早安”。
</body>
</html>
JavaScript 中的条件语句
if...else 语句实例
<html>
<body>
<Script Language=JavaScript>
var d = new Date()
var time = d.getHours()
if (time <10)
{
document.write("早安")
}
else
{
document.write("祝您愉快")
}
</Script>
<p>本例演示If...Else 语句。</p>
<p>如果浏览器时间小于10,那么会向您问“早安”,否则会向您问候“祝您愉快”。
</body>
</html>
JavaScript 中的条件语句
if..else if...else 语句实例
<html>
<body>
<Script Language=JavaScript>
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("Good morning")
}
else if (time>=10 && time<16)
{
document.write("Good day")
}
else
{
document.write("Hello World!")
}
</Script>
<p>本例演示if..else if...else 语句。
</body>
</html>
JavaScript的函数
􀂾函数定义
function 函数名(形参列表)
{
函数体;
(若有返回值return 返回值;)
}
􀂾函数调用
函数名(实参列表)
存放返回值的变量=函数名(实参列表)
􀂾数组参数
函数的参数是以数组的形式来保存的。
arguments[i] 或函数名.arguments[i]
arguments.lengh
变量名也对大小写敏感。“function” 这个词必须是小写的。
JavaScript的事件
􀂾 JavaScript事件驱动
点击事件onClick()、onDblClick()
改变事件onChange()
选中事件onSelect()
焦点事件onFocus() 、onBlur()
装卸事件onLoad()、onUnload()
鼠标事件onMouseOver()、onMouseOut()、onMouseDown()、
onMouseUp()、onMouseMove()
键盘事件onKeyDown()、onKeyUp()、onKeyPress()
其它事件onAbort()、onError()
JavaScript的函数和事件
<html>
<head>
< Script Language=JavaScript>
function myFunction()
{
alert ("您好,祝您愉快!")
}
</ Script >
</head>
<body onload=myFunction()>
</body>
</html>

《金博志》网址

 

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有