网页编程课堂笔记.docx

《网页编程课堂笔记.docx》由会员分享，可在线阅读，更多相关《网页编程课堂笔记.docx（24页珍藏版）》请在冰豆网上搜索。

网页编程课堂笔记

第四章

一、工作原理

在地址栏中输入URL-------->internet----->服务器

IE解释HTML编码变成网页

二、HTML:

标记语言以<开头,以>结束

语法：

<标记名>

<标记名属性名="值">

<标记名>内容

<标记名属性名="值">内容

注：

1、标记结束

2、属性要写<>内

3、值可用"",'',省略。

建议用双引号

4、不区分大小写

5、

--注释-->

常用标记

1....：

网页的开始和结束标记

注：

所有标记都位于中间

2....:

网页的头，放设置代码

3....:

网页的主体,放网页的主要内容

4.:

设置网页标题栏上的文字

注：

放在

5.描述信息

注：

放在

例：

2秒后自动刷新网页

">2秒后刷新到C:

附加：

属性:

bgcolor="背景色",

background="背景图片",

bgproperties="fixed"背景图片固定

6.段落

属性：

align=left/center/right对齐方式（左中右）

注：

，认为该段结束

7.

到

标题

注：

1.

字号最大，

字号最小

2.有align

3.标题与段落，标题与标题区别只有字号区别

8.
回车

注：

与
区别为

多一个空行

9.

:

按预定格式输出，原样显示

10.字符格式化

斜体

加粗

带下划线

上标

下标

11.

无序列表

12.

有序列表

13.

列表项

注：

a.有序列表

可以加type=1/A/a/I/i（数字/大字母...）

b.

有start属性，可以指定起始编号

14.

---

水平线

属性:

size="粗细",width="宽度",noshade无阴影,color="颜色"

align="对齐方式"

注：

宽度可以使用百分比

15.字体

属性：

size="大小",color="颜色",face="字体类型"

16.插图片

src="图片位置",align="bottom/middle/top"对齐方式

alt="提示文字"

注：

a.对齐方式是指与图片同行的文字的对齐方式

b.提示文字指图片不正常显示，则显示文字。

另鼠标悬停时文字

17.插声音和视频

18.超链接

属性：

name="锚名称"href="路径"

格式：

提示文字或图片

第一种：

进入链接某页面

第二种：

雪山飞狐为目标取名

雪链接到名为xue的位置

第三种：

雪跳到另一网页的某个位置

第四种：

邮箱">联系我用outLook发邮件

第五章

第五章

表格:

显示数据和布局

组成:

表格-->行-->单元格

标记:

表格
行

表标题

1.

属性:

align对齐方式（指表格的位置）,width宽,height高,bgcolor背景色,background背景图,

bordercolor边框色,border边框的粗细

cellspacing单元格之间的间隔,默认为1,cellpadding内容与边框的间隔

2.

属性:

align对齐方式（行内容的位置）（left/center/right）

bgcolor背景色,bordercolor边框的颜色,valign垂直对齐方式（bottom/middle/top）

3.

表标题

注:

位于表格上方,居中,编码时需要写在

标记里面

表单

1、表单标记

注：

所有的表单元素（组件）放在标记中

属性：

a.method="post/get"提交方式

post在地址栏中不显示提交内容（表单元素的名称及值）

get显示提交内容

b.action提交页面

2.表单元素相关标记

a.

属性：

type

文本框text

密码框password

提交按钮submit单击后会跳转到action所规定的提交页面

重置按钮reset清空，使表单元素回到初始状态

普通按钮button

图片提交image功能相当于submit

单选框radio

复选框checkbox

文件file

隐藏域hidden

name表单元素的名称

value值

size文本框的宽度

maxlength文本框最大字符数

checked选中（单选和复选）

src图片提交按钮的路径

操作细节

1.与的区别:

前者为图片提交，将所有表单元素的名字及值上传到服务器

后者为页面跳转，只是简单的超链接。

2.单选框和复选框分组，只需要将name即名字设置为一样就OK

3.单复框有提交值与提示值之分

男

value为提交值，提交时上传服务器

标记后的男会显示在页面上，起提示作用,跟提交无关

4.列表框和文本域不能使用input标记

5.单复框用checked，列表框用selected选中

6.按钮可以用也可以用标记,但可以改变字体或在按钮上加图片

b.和列表框及列表项

高中

大专

属性：

size:

框的大小（行）

multiple:

是否可以选择多项

c.文本域</p><p>属性：</p><p>cols总列数</p><p>rows总行数</p><p><textArea>我喜欢没有value属性，值必须放在中间

附:

等同于

按钮

但

按钮

按钮

第一，二章

专业术语:

万维网,协议,UrL,HTML,网站,网页,静态网页,动态网页

Dreamweaver梦工厂

组成:

菜单栏,插入栏,面板组,属性检查器

三种视图:

代码/拆分/设计

菜单栏:

编辑--->标签库（相当于帮助）/首选参数（可以改字体/颜色）

插入（插入所需要的标记）

窗口:

显示所需的面板

插入栏:

常用（普通标记）/布局（对页排版）/表单（表单元素）

/文本（格式化文字的标记）/flash元素

操作一:

建站点（管理网站信息）

建文件夹-->D中-->站点菜单--->新建站点-->为站点取名--->

否,不使用服务器技术--->选择站点所对应的文件夹-->如何连服务器:

无-->完成

操作二:

设置页面的属性

属性检查器-->页面属性->整个页面的字体/字号/前景/背景/超链接

操作三:

布局

插入栏--->布局--->布局--->布局表格/布局单元格

区别:

布局表格:

不能直接输入文字或插图片,它生成的是

,里面可以放布局单元格

布局单元格:

能插文字和图片,但不能放表格或单元格,生成

附: 超链接路径 1.完整路径E: \1.html 2.相对路径: 1.html或aa\1.html 3.URL: 4.文件Doc,ppt.excel 第三章 模板 1、新建站点（必须建站点才能做模板） 2、新建一个普通网页（即做模块就跟做网页一样） 3、各网页相同部分在模块中做好，不同部分变成可编辑区域： 选中-->插入--->模板对象-->可编辑区域 4、创建模板 插入-->模板对象--->创建模板 注： 模板的后缀.dwt,放在目录Templates中 5、使用模板 在需要套用模板的页面-->编辑-->模板-->套用模板到页 插入表单和表单元素 注： 1.先插入表单再插表格，最后加表单元素 2.可以在属性栏中更改表单元素的属性 多媒体 1、flash文本，flash按钮，flash（swf） 步骤： 插入-->媒体 注： gif图片，插入-->图像 层： z轴越大，离我们越近 浮动广告： 1、插入层: 插入-->布局对象-->层 2、时间轴： 窗口菜单-->时间轴（让时间轴可见） 将层拖到时间轴上---->拖长时间轴（速度慢些）--->选择最后一帧---->将层拖到最后停止的位置-->选择自动播放，循环播放--->在中间帧右击选择插入关键帧-->拖动层（调置曲线路） 行为： 窗口菜单--->行为（事件） 常用事件: onLoad: 页面打开 onclick: 单击 onDoubleClick: 双击 onmouseOver: 鼠标悬停 onmouseOut: 鼠标离开 onmouseUp: 鼠标松开 onmouseDown: 鼠标按下 图片： jpg: 图片效果好,不支持动画，占空间大 gif: 支持动画，但像素低，效果差，占空间小 第七章 样式表: css（级联样式表/层叠样式表） 作用: 1、扩展了HTML的功能 2、提高重用功能 3、动画 常用样式 1、文本 text-align: left/right/center对齐方式 text-decoration: overline/underline... 文字装饰 line-height: 行间距 letter-spacing: 字间距 text-indent: 缩进（长度单位）5em 2、背景/颜色 color: 字体颜色 background-color: 背景色 background-image: 背景图片 background-repeat: no-repeat（不重复） （重复方法）/repeat（重复） /repeat-x（横向重复） /repeat-y（纵向） background-position: 对齐方式 left/right/center/bottom/top 3、字体 font-family： 字体 font-size: 字号 font-style: 字体样式（斜体等） font-weight: 字体粗细 4、边框： Border-style: 边框样式 double（双线） dashed（虚线）... border-color: 边框颜色 border-left-color: 左边框颜色 .... 5、定位（一般用于层）150页 样式分类 一、行内样式表: 样式少 注： 只能当前标记内的内容有效 格式： <标记名style="属性: 值;属性2: 值.."> 二、页面级样式 注： 当前页面有效 .... 页面样式必须写在

属性: align,valign,width,height,bgcolor,bordercolor,background colspan合并列,rowspan合并行 4.	列标题 注: 相当于	,只是	中的内容自动加粗居中 5.

单元格	列标题