dreamweaver学习笔记（未完待续）

来源：互联网发布：管氏而知礼孰不知礼编辑：程序博客网时间：2024/05/01 18:21

链接的地址按照地址栏，而不是后台代码路径

模板看视频3和视频5和视频6
修改——》模板--》打开附加模板（就会打开网页所依赖的模板）
修改——》模板-->从模板分离（就会脱离模板）

模板的名字不要在文件里修改，而应该在dreamweaver里该
如果网页和模板不同步的话，修改-》模板-》更新当前页
可选区域：指的是可以设置让它是否显示

在css面板里：添加属性里：敲入几个字母后按“下键“就会有提示了

修改css面板里的内容后必须保存.css文件后在网页中才能看到效果

定义css样式时：如果定义的是class，则css是以.class开始的；如果定义的是id，则css是以#id开始的。但是id的优先级大于class。

普通的div加上position的值为：absolute后就变成了AP div；在"AP元素"面板里中的”z轴“值越大在网页显示的时候谁就在上边覆盖到小值的div。

以下为关于Spry下拉菜单栏：
*********************************************************

如图1：阴影部分表示padding，即超链接与边框的距离，这是超链接的属性。
选中字体后，例如选中“项目1”，规则里：ul.MenuBarHorional a，修改它的background-color属性就可以修改它的框的颜色了，修改它的color就可以改变字体的颜色了。

图2

图3

按照常理来讲，只要改变a：hover的值就可以改变鼠标放上去的颜色，但是在这里修改后却不行，说明有个优先级比它还高的class，如图2，右击a：hover查看源码,在源码的下个class文件里如图3，修改color的值就改变鼠标放上去的颜色了,修改background-color就可以改变背景颜色了。
改变鼠标放上去的颜色可以有三种方式：图4

图4

图5，把三角图片换成其他的图片

图5

超链接的“标题”指的是：鼠标放在上边的时候提示的内容，“目标”指的是：链接的方式。

“重置设计器”就会把dreamweaver的布局恢复默认。

************************************************************

1、
关于spry选项卡式面板：
问题一：怎么让鼠标放上去就会显示下面的内容，而不是点击一下？

图1

如上图，复制一下“TablePanels”，然后在.js中查找“TablePanels”到如下图：
图2

把click改为mouseover就行了。

问题二：如何去掉标签和内容之间的虚线框？
把tabindex去掉就行了。tabindex指的是：按下键盘上的tab建就会指向下个标签。
“<li class="TabbedPanelsTab" tabindex="0">标签 1</li>”
问题三：怎么改变内容为超链接？
第一步：图3

，建立一个ul，里面定义class=“news”，li里面定义超链接。
第二步：图4

，在css面板里新建css规则，按照图5

来填写：注意，选择器名称“news”，最好“新建样式表文件”，
以免影响自带的css规则。
第三步：超链接：新建css规则，如图6

。
如图7

就可以随意定义超链接a了，none表示超链接没有下划线！！
那么怎么去掉列表的小点呢？如图8

，设为none即可。
2、
css样式面板里的“规则”就是作用于当前标签的的css类。如果想修改样式，直接修改“规则”就行了。
3、
修改一个类后，点击css样式面板里的“编辑样式”图标就可以修改了、
4、
class的属性不仅可以在css样式面板里修改，而且可以下边的属性栏里修改，比如修改“left”，如图9

。选中代码或者点击设计视图下的“小眼睛”图都能把相关的属性栏显示出来。
5、
为什么把background-image设置为图片后，显示不出来？
在加上图片后，是默认把图片放在站点根目录下的，但是css文件在SpryAssets文件夹下，所以在图片url前加上“../”就可以了。
6、
折叠式面板和选项卡式面板都是为了节省页面空间。
7、
折叠式面板可以通过width，height改变宽度和高度。
8、
ctrl+alt+i：添加图片。
9、

如图10

，点击小眼睛就可以编辑里面的内容了。
10、

10、
Spry可折叠面板：如果设置“默认状态”为：已关闭，则打开网页时就不显示内容；
“启动动画”：慢慢展开。
宽度100%是为了放在表格等中以后就会自动撑满。
11、png格式的图片是透明的，可以显示图片后边的背景颜色。
12、
表格支持嵌套，表格中有表格。
13、表格不利于搜索。
14、
<table width="100%" border="1" cellspacing="5" cellpadding="4" style="border-collapse:collapse">
cellspacing:单元格之间的距离；即：属性栏里的“填充”；
cellpadding：表格内文本和边的距离，即“间距”；
border-collapse:collapse：让表格的边合并。成一天细线。
15、
图1

可以在指定的单元格附近插入行或者列。
16、
td属性里的“不换行”指的是:如果字太多就不会自动换行。
17、clear 属性规定元素的哪一侧不允许其他浮动元素。
18、
可以通过 <div> 和 <span> 将 HTML 元素组合起来。
HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
19、布局
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99;height:200px;width:100px;float:left;}
div#content {background-color:#EEEEEE;height:200px;width:400px;float:left;}
div#footer {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>

<body>

<div id="container">

<div id="header">
<h1>Main Title of Web Page</h1>
</div>

<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>

<div id="content">Content goes here</div>

<div id="footer">Copyright W3School.com.cn</div>

</div>

</body>
</html>
图2

20、
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
开发人员必须同时跟踪更多的HTML文档
很难打印整张页面。
基本的注意事项 - 有用的提示：
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
为不支持框架的浏览器添加 <noframes> 标签。
重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

<html>

<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

</frameset>

</html>

<html>

<frameset cols="50%,*,25%">
<frame src="/example/html/frame_a.html" noresize="noresize" />
<frame src="/example/html/frame_b.html" />
<frame src="/example/html/frame_c.html" />
</frameset>

</html>
21、

HTML Iframe

HTML 框架
HTML 背景

iframe 用于在网页内显示网页。

添加 iframe 的语法

<iframe src="URL"></iframe>

URL 指向隔离页面的位置。

Iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。

实例

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

亲自试一试

Iframe - 删除边框

frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 "0" 就可以移除边框：

实例

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

亲自试一试

使用 iframe 作为链接的目标

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

实例

<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

亲自试一试

HTML iframe 标签

标签描述<iframe>定义内联的子窗口（框架）

22、

22、
get方法只能传输文本类型的。
23、
文本框的“已禁用”：提交时不传数据，与“只读”不同的是：它没有光标显示且不传输数据，只起到显示的功能；
“最大长度”：能输入数据的最大长度；
“大小”：文本框的大小；
在属性栏里：类型有：单行，多行，密码，就是text textarea password可以转换！！
24、
多个单选按钮的名字一样的话，那么就是一组，只能选中一个。

25、

HTML <label> 标签

定义和用法

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

实例

带有两个输入字段和相关标记的简单 HTML 表单：

<form>  <label for="male">Male</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">Female</label>  <input type="radio" name="sex" id="female" /></form>

TIY

浏览器支持

所有主流浏览器都支持 <label> 标签。

Safari 2 或更早的版本不支持 <label> 标签。

HTML 与 XHTML 之间的差异

NONE

提示和注释：

注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性值描述DTDforelement_id规定 label 与哪个表单元素绑定。STF

标准属性

id, class, title, style, dir, lang, xml:lang

如需完整的描述，请访问标准属性。

26、如果把label写在标签两边也可以啊

25、
如果多个复选框的name一样，则应该用数据接收传输的数据。
26、
图3
如上图:“在更改URL后选择第一个项目”,意思是跳转后再返回的话会显示选择框的第一项；
如果不勾选“菜单之后插入前往按钮”，则会自动跳转。
27、打开一个网页后，右键“查看元素”，就可以调试了。
28、
图像域：在表单的功能就是当做提交按钮。
图4
源：图片
替换文本：当图片发生问题时比如不能正常显示提示的内容；
对齐：与其他元素或文本的对齐方式；
宽度和高度：设置图片的大小；
边框：给图片一个边框；
29、

如果点击“姓名”的话，就会在文本框中有光标。

也可以这样写：

<label for="id">姓名：</label>
<input name="saf" id ="id" type="text"/>
30、字段集：<fieldset><legend>成对出现

title>无标题文档</title>
<style type="text/css">
fieldset {
border-style: dotted;
border-color: #CF6;
background-attachment: fixed;
padding:3cm;
}
legend{background-color:#0F0;
padding:2em;}
</style>
</head>

<body>
<fieldset><legend>新闻</legend>
内容
<h1></h1>
<a href="#">米国地震</a>
</fieldset>
</body>

结果为：

31、spar验证文本域中：
强制模式:如果输入的不是正确的要求的话就不会显示在文本框里；
验证于：onBlur:失去焦点时；
onchange：内容发生改变时；
在“输入标签辅助功能属性”时
样式：“无标签标记”：不在代码中添加“label”标签；

访问键：快捷键；

Tab键索引：用tab键来切换的顺序
30、
spay验证文本区域
计数器：“其余字符”：和最大字符数一起使用，提示剩下还能输入的字符个数。
禁止格外字符：如果输入字符超出最大字符数，则输不进去。
提示：刚开始在区域显示的提示内容。
31、spary验证复选框
图1
32、
使图片悬浮在窗口的右侧

33、使div停靠

34、

图1
35、spary选择项验证
图1
如上图，“请选择”的值为空，“做爱”的值为-1.
图2
如上图：“空值”：验证值为空的option，
如果选择“无效值”为“-1”的option，则验证。

36、
spary验证密码：最大字母数、最大数字数、特殊字符等。
37、
Spary确认验证：验证参照对象
38、
Sary验证单选按钮组
图3
如上图：注意空值和无效值。
39、
如果多个样式定义相同的元素，而且是同样的属性的话，那么只能使用一个（最近出现的类），另外的全部有中划线。！！
40、
注意：css规则是对标签定义的！！不是文本！！！
41、
如果暂时不想使用css属性的话，可以在css样式中禁用一下。
42、
编辑--》首选参数-》css样式:就可以设置css样式了。
使用速记：指的是类似于“boder:solid,23px,red”的样式，简化代码。
43、
css样式中有“附加样式表”，可以导入别的css规则。
44、
选上在标签上的id或者class的名字，再点击css样式上的“加号”，就可以编辑了。
45、
做个一像素的图片，设置重复（repeat-x）就可以覆盖了!!千万不要按像素做完！
46、
子元素如果样式，则会继承父元素的样式。
47、
display：块和普通元素的转换。
48、
48、
在做案例一时： height: 三个div都是auto
49、
如果a:hover和a的样式有相同的地方的话，可以在a:hover中省略。
50、
一切皆是方框
51、
图4，
如上图：虽然sf的代码在er之前，但是在浏览器中er在前显示。因为有positon：fixed。
position：fixed 这个属性用的时候小心，因为ie6不支持。！！
52、
cursor：pointer,小手形状。
53、
右击"css样式"下的各种规则-》“移至外部样式表”。可以把本也得css移到指定的外部css文件中。
54、
如果想把标签的样式改为别的类，可以在属性面板下的“类”更改。也可以，选中标签后，在“css样式”面板中，右击规则->"套用"。
55、
怎么把内联样式变为规则？
选中样式代码-》右击-》css样式-》将内联样式转换为规则。
56、