文本控制
控制间距:
1 单词间距:word-spacing
2 字母间距:letter-spacing
空白属性
1 设置:white-space
2 tag旁边的间距通常会被忽略(如果有回车应该是会设置一个空格);
3 字符中间的间距会被设置为一个字符间隔宽(不管有多小空格);
修改文本的大小写:text-transform:lowercase
使用大型小写字母:font-variant:samll-caps
声明字符编码:<meta content="charset=*** />
CSS中的标题单位
单位 说明
% 百分数 相对于父对象的大小,而不是元素本身的大小;特别是图像时要注意;
cm 厘米
em 1em等于当前元素的字体大小
ex 1ex是字体中x字母的高度
in 英寸
mm 豪米
pc 1pc=12pt
pt 1pt=1/72英寸
px 1像素代表计算机显示屏上的一个小点
地址栏和收藏夹的个性化图标
图标格式:.ico
大小:16*16适宜;或32*32
<head>
<title>图标变更</title>
<link rel="shortcut icon"href="favicon.ico">
</head>
<body>
本地直接访问,也不会显示,要上传到网站或在本机配置iis站点才能看到。建议ie7或第三方浏览器如maxthon
按上述的编码就是将图标放在根目录下;当然也可以放在其它位置,只是把路径写出来即可;
地址栏和收藏夹可以分别用不同的图标来描述;
PS在网页中的应用
Firework---优化面板(尽可能高清晰度、小的尺寸)(需安装);
制作首页切片:PS切片-存储为WEB所用格式-存储-保存类型:HTML和图像-自动生成一个名为images的文件夹和一个html文件;
1 PS中编辑
2 切换到imageReady
3 切片
4 文件---将优化结果存储为:
5 保存后即可输出为网页,同时产生一个images文件夹,其中包含了所有切片图像,生成的网页是以表格将切片组合在一起(在代码中可查看;当浏览网页时,就会将下载的一片图像马上显示出来,而不必等待到下载完全部图像后才显示,这样从心理上缩短了浏览者的等待时间;
透明图像
1 建PS文档
2 设置背景为透明(或去除背景图层、再新建透明图层)
3 将需要的图像拖入;
4 另存为GIF;
自动化处理
1 确认动作面板有需要的动作;
2 将要使用相同动作的图像放入一个文件夹中;
3 文件-自动-批处理;
4 在“组合”下拉列表中选择动作序列,然后在“动作”下拉列表中选择要使用的动作;
5 在“源”下拉列表中选择“文件夹”选项,
6 单击“选取”按钮,选择存放图像的文件夹;
7web照片画廊
由一个文件夹中的所有图像自动生成一个用于展示或浏览的图片型网站,同时自动生成HTML网页文件,并建立相关的超链接。创建了web画廊后会自动产生两组图片,一组为缩览图,另一组为大图片,因此,我们经常使用该功能来创建图像的缩览图,以便在多媒体开发或网页制作中使用。
1 新建文件夹,放入需要的图片;
2 文件---自动---web照片画廊
3 单击“浏览”,确定目标文件夹(即需要处理的文件夹);
4 单击“目的”,确定需要处理结果的位置;
dreamweaver基础
脚本Java script
script指的是一系列的命令和指令,它与HTML标识的主要区别在于脚本可以完成数据的运算和执行操作,而HTML标识只能执行对文件的简单格式化,或是对图形、视频和音频文件的简单读取;
是一种基于对象和事件驱动并具有安全性能的脚本语言;
网页脚本语言是在客户端执行的,执行速度很快,并且大多的操作与服务器之前没有交互运算,所以在网页中应用十分广泛。日期及时间特效是网页是最常见的一种特效,可以显示出当前时间、客户停留时间、自动记录网站更新日期、在一定的时间内关闭窗口等。
ASP文件
对过标记对把VB Script或Java Script语言的程序嵌入文档中,当服务器遇到这对标记时,便将其视为程序来解释执行,然后把执行的结果传送到客户机上供用户浏览;ASP不是编程语言,而是一种开发环境,提供了一个在服务器端执行指令的环境,它利用特殊的符号()来区分HTML与必须经过服务器翻译才能送往客户端的命令;它执行的指令包括HTML语言,MS VBScript,MS Javascript等,因此可以制作功能强大的WEB应用程序;
ASP脚本只能运行有server端,而VBScript和Javascript可運行在client端;
换行:shift+enter;
空格:ctrl+shift+space;
插入特殊字符:插入-HTML-特殊字符;
模板和库
在建立并维护站点的过程中,有时候需要建立外观及部分内容相同的大量网页,使站点具有统一的风格.如果逐页建立,修改,既费时有费力,且效率不高,一个站点的网页很难做到有统一的外观和结构.DW提供了强大的模板,可以快速创建大量风格一致的网页,从模板创建的文档与该模板保持链接状态,可以修改模板并更新所有利用该模板的网页.
模板的功能就是把网页布局和内容编辑分享,在布局好之后将其存储为模板,这样可以通过模板创建相同布局的页面,因此能够极大地提高工作效率.
库是一种特殊的DW文件,其中包含已创建的以便放在网页上单独的资源或资源副本的集合.如果只是想让页面具有相同的标题和脚注,但具有不同的页面布局.可以使用库项目存储标题和脚注.库项目是可以在多个页面中重复使用的存储页面元素;第当更改某个库项目的内容时,都可以更新所有使用该项目的页面.
行为是用来动态响应用户操作\改变当前页面效果或是执行特定任务的一种方法.行为由对象\事件和动作构成。行为是为某一具体事件而采取的一个或多个动作。当指定的事件被触发时,将运行相应的JavaScript程序,执行相应的动作。所以在创建行为时,必须先指定一个动作,然后指定触发动作的事件。行为是针对网页中的所有对象,要结合一个对象添加行为。
行为-添加-显示、隐藏层-完成后查看代码,会多了一段查看显示层的JS代码;同时,对超链接也有相应的动作或事件定义;
窗口特效是网页设计中常见的技术,用户会看到自动滚屏的网页窗口、震动的网页窗口、全屏显示窗口、背景色不断闪烁的网页窗口等。
表单主要是用来得到用户反馈信息,然后将这些信息交给服务器进行处理。表单是网站管理者和浏览者之间沟通的桥梁。表单可以包含允许用户进行交互的各种对象,包括文本域、密码域、单选按钮、复选框、按钮以及各种表单对象。如电子邮件表单。
用标记tag控制输出;
<tbody>标记可以控制表格分行下载,可以让其中的内容比网页中其他内容先被下载下来,这样可以让浏览者先看到网页的实质内容,而不要待太长时间,在需要分行下载外加上<tbody>t </tbody>即可;
使用外部CSS
"CSS样式"面板右击-附加样式表-
插入特殊字符:工具栏下拉菜单---文本---字符工具栏
DM的操作界面:
标题栏\菜单栏\插入栏\工具栏\文档窗口\下边两个面板\右边四个面板
插入栏:可以显示为菜单或显示为制表符;
7个选项:常用\布局\表单\HTML\应用程序\Flash元素\收藏夹
面板:左边的面板可一起收缩或展开;每个面板都有选项卡(属性和历史记录面板除外),面板可由菜单命令窗口来控制是否显示?(F4)
面板框上的箭头:面板箭头:箭头朝右,表示未展开,箭头朝下,表示已展开;右边的四个面板的总箭头朝右,表示已展开,总箭头朝左,表示未展开;单击面板框黑色框右击,可关闭面板组
下1:属性面板
下2:结果面板:搜索\参考\验证\目标浏览器检查\链接检查器
下3:时间轴面板
右1:CSS面板:CSS样式\层
右2:应用程序面板:数据库\绑定\服务器行为\组件
右3:标签检查器:属性\行为
右4:文件面板:文件\资源\代码片段
右5:框架面板
右6:历史记录面板
左边:一些很有用的工具,特别是对于代码,同时有行号显示;
布局插入栏:可方便地控制表格,有三个模式,标准\扩展\布局;扩展是标准的延伸,在视觉上更方便对表格进行操作,布局,可随意画,然后系统根据画的具体位置来确定具体表格的行\列和宽度;三个模式可相互切换.
flash对象可以分为三种,即flash动画、flash按钮、flash文本;
flash文件有三种不同的类型:flash源文件格式、flash影片文件、flash模板文件;
flash源文件格式:.fla,flash程序创建和打开,不能在DM和浏览器中打开;
flash影片文件:.swf,是fla的压缩版,可以在DM中预览和浏览器中播放,但不能在flash程序中编辑;
flash模板文件:.swt,用在flash按钮对象中;
选取工具:在状态栏,可以一次选定多个页面元素;
ctrl+T:在文档中选择某一个标签,按ctrl+t,快速启动标签编辑器;(在设计模式下进行代码输入,然后shift+enter插入)
3 导入导出站点:方便在PC间移动站点;
4 插入栏:“收藏夹”,可以组合自己经常使用的一些工具;
5 导入word文档;
6 编辑字体列表;
8 插入“导航条”:可以设置4种按钮状态:状态、鼠标经过、按下、按下时鼠标经过;插入-图像对象;修改-导航条;
9 插入flash文档,图像查看器等都会生成一个swf文档;
12 ASP:active server pages,是一套微软开发的服务器端脚本编写环境,通过ASP结合html,ASP指令和activex元件建立动态、交互且高效的web服务器应用程序。ASP的所有程序都在服务端执行,包括嵌在普通HTML中的脚本程序。当程序执行完毕后,服务器仅将执行的结果返回给客户端浏览器。
浏览器为web排版设置的默认的文字大小为16px;相当于medium;此时的1em=16px;body{font-size:62.5%},有了样式后,则1em=10px;
10 如何添加字体:
属性面板-字体-添加字体列表-可用字体中选取-点击左边箭头-确定;
HTC HTML Component:IE浏览器内置的一种脚本封装机制;
HTML组件:Behavior,是一个简单易用的组件,它封闭了页面上特定的动作或功能;
一个HTC文件就是一个以.htc为扩展名存储的文本文件;主要包含一组HTC特有的文件定义元素和JavaScript脚本以及CSS样式代码;
可视化控制:
布局模式-查看--可视化助理;
关于行高line-height
1 默认是120%,也就是行内字体的1.2倍;
2 适合阅读的行高应该是160-180%;
3 当行高小于100%时会发生重叠现象;
4 行间距=(行高-字体大小)/2
5 允许使用数字来表示行高,如line-height:1.6;即行高为1.6em;
6 行高具有继承性;
查看JS的效果,可采用重要属性或难理解属性不删,但应用为备注,来查看效果的变化;
查看HTML代码内容或结构,采用逐级绽放标签,即DM左边的第二个按钮,鼠标要点到"<"的后面;
对于宽度的应用
当缩放文档,即字体变大时,窗口的滑动块只有在纵方向上有变化,这就要求不设置宽度值,或宽度值高为%值;
属性面板操作时,切换到代码窗口,会发现自动添加了CSS样式,也可以关闭这一功能:首选参数:取消选择:使用CSS而不是HTML标签;当应用属性时,建立的是传统的行内属性定义,而不是CSS样式表;而属性面板也可直接在代码窗口下使用,如颜色选取;在代码窗口下,标签选择器(即主代码窗口下的一行)可以快捷地查看标签的包含关系,通过CSS样式面板可以方便地查看和修改对象或CSS的属性;且可显示类别视图、显示列表视图、只显示设置属性(可直接添加属性)且在面板下部有“编辑样式”工具;
文档分析
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
</head>
第一行:文档类型
第四行:字符集
设计的网页能最大限度适合最大使用比例的用记的屏幕显示器:
手机屏幕:128*160px;
传统电脑显示屏:640*480px;
现在的液晶显示器:1280*800px;
html,一种语言,多个版本;一个版本,三种风味
html1 1993
html2 1995
html3 1996
html4 1997
html5 12008
strict
trnasitional
frameset
空白符:web浏览器会忽略多余的换行和回车符,并把多余的空格综合成一个空格。如果你想保留多余的空格、制表符、换行符,如在页面上编排、计算机代码等格式时,元素pre正是用于这种描述多段预告编排过格式的文本的场合;
URL:模式+服务器名称+路径+文件名
http://www.site.com/doc/index.htm
ftp://ftp.site.com/mb/pro.exe
mailto:html@163.com
file:///c|/path/home.htm
为链接创建键盘快捷键:accesskey="x"
为链接设置制表符次序:tabindex="n"
属性的值:
1 inherit;
2 预定义;
3 用户设置;
局部应用样式:style="border:1px red dashed;"
三列等高布局
通过三列底边距的负值来控制;
#left,#mid,#right(
padding-bottom:9999px;
magin-bottom:-9999px;
当padding-bottom设置很大时,会向下延伸很多;滚动条会很长;
如果有上述相同的等值,则会把多出的内边距给隐藏起来;
我们再定义包含框隐藏出多的内容#main{overflow:hidden;},这样当某个栏止的内容很多时,很自动撑开包含框;而当包含框被撑开后,其它栏目的高度也被自动撑开了,当然不是它们的height,而是他们的背景色;
在gone with the wind网页中设置上述负值时,当设很大时;DM以布局显示时,会撑开很高;当设置很小一点时(55px),一些边框会达不到包含框撑开的高度,即只有其内容等高的高度+55px;
实现网页的背景渐变(样式style中应用滤镜filter功能)
<body style="FILTER:progid:DXImageTransform.Microsoft.Gradient
(gradientType=0,startColorStr=#FFFFFF,endColorStr=#5BC561)">
在网页中使用包含文件
1 用iframe调用html文件,<iframe name="content_frame" width 90% height=130 marginwidth=0 marginheight=0 src="gonggao.htm"></iframe>
2 用<script>调用.JS文件;<script language=javascript src="images/daohang.js"></script>
3 利用include调用.asp文件:<!--#include file="webtop.asp"--!>
作为Html文档的附件后有对应的文件夹做为其整合的路径:可能包括的文件类型有:图形图像、视频音频、JS文件、CSS文件等;(同样的一个网页另存后,一定也会有一个html网页文件及对应的一个同名的文件夹)
在网页中的地址分隔只有/////////////////////////////////////
background-image:url(images/top.jpg);
<img src="file:///I|/wwuhn/Website/mybg.gif" width="1280" height="8" />
<a href="novel/english novel/who moved my cheese/who_moved_my_cheese.htm" target="_blank">who moved my chess</a>
<a href="http://www.eoezone.com/" target="_blank">一荣英语</a>
创建空链接:在链接地址中输入:# or javascript:void(null)
创建锚接链接:首先要创建锚记:插入-命名锚接,并确定锚记名称:1;然后选择需要建立链接的对象,对链接地址中输入:#1;
创建图像热点链接:在图像的属性面板中选择:矩形热点工具;
给链接文字添加链接提示:
在<a href="">中添加"title"属性;即title=提示信息;
快速选择表格:鼠标单击任一单元格,接着连续按两次ctrl+A;
超链接可以绑定不同的样式
1 应用到全文档的样式
a (text-decoration:none; color:#333; }/*超链接基本样式
2 应用到单个超链接的样式
.class1 :link{---}
.class2 :link{---}
<a class="class1" href="-">
3 应用到某个区块的超链接的样式
#id1 :hover{---}
属性面板链接处的“指向文件”工具用于拖放指定到文件面板中的文件形成链接;