DW基础知识一

1、课程目标：使用CSS美化网页元素 使用DIV+CSS布局网页 制作各种流行的网页组件 制作语义化的表单掌握一些常用的网页制作技巧第一次课：1、DW5工作界面的认识。2、 新建站点（为什么要站点）、网页文件（注意“页面属性”-“标题/编码”的设 置和重要性）、样式文件（外部）3、网页基本结构：DOCTYPE（文档类型）html 样式代码 JS 脚本代码各种标记写成的网页内容代码4、html与xhtml的区别相关规则XHTMLHTML标签名称必须小写大小写均可属性名称必须小写大小写均可标签嵌套必须严格嵌套没有严格规定标签圭寸闭标签必须圭寸闭封闭与不封闭均可空元素标签必须圭寸闭，如vhr/圭寸闭与不

2、圭寸闭均可，如hr与 vhr /均可属性值用双引号括起来可以不必使用双引号属性值形式必须使用完整形式经常使用简写方式设定属性 值标签类型区分内容标签”与结构标 签”没有严格规定5、html常用内容标签标签说明vh1-vh6定义各级标题定义段落va定义链接vimg /插入一幅图片vul定义无序列表vol定义无序列表vdl定义自定义列表vstrong加粗强调内容做网页实例。first.html6、结构标签vdiv标签：定义HTML文档中的分区或节（简单说：就是用于布局！）vspan标签：行内元素区别“表格布局”和“ div布局”。7、CSS简介：级联样式表 (Cascading Style She

3、et) ，简称风格样式表 (Style Sheet) ；用来进行 网页风格设计CSS作用： 有效地控制网页外观 精确定位网页元素 改善用户体验CSS 的优点 内容与表现分离 表现统一，易控制 布局页面更灵活 减少页面代码量 利于搜索引擎收录CSS语法规则(演示) 选择器 属性：值； 标签、类、 ID 三种 P color: red; . top width: 600px; # nav ( font-size: 12px;)CSS 样式引入网页文件 (演示 ) 行内式、嵌入式、 链接式 、导入式关于 DOCTYPEDOCTYP不可怕，但把它拿走，会让你怕了又怕。最近在蓝色理想转悠， 发现很多朋友

4、提出有关 DIV+CSS排版问题，以及IE与FF的兼容 问题。怎么问的都有，结果就是一个显示很奇怪，很难调整。我们浏览的大多数网 站，或者用Dreamweaver创建一个新的网页文档时，源码的顶部都会有DocType声明，但是很多人没有注意它，甚至在创作时候直接将它删掉，其实这往往就是噩梦的开始。在遵循标准的任何 Web文档中，DOCTYP都是一项必需的元素。它会影响代码验证，并 决定了浏览器最终如何显示你的 web文档。为了避免DOCTYP的问题重复出现，我根据 手头的资料整理了这篇文档，以备自己及有兴趣的朋友参考。在默认情况下，FF和IE的解释标准是不一样的，也就是说，如果一个网页没有声明

5、 DOCTYPE它就会以默认的 DOCTYP解释下面的HTML在同一种标准下，不同浏览器的 解释模型都有所差异，如果声明标准不同，不用我说，您自己想就可以了。学习网页标 准，浏览器兼容，从哪里开始您自己决定，但是，请认识DOCTYP：E一、什么是 DOCTYPEDOCTYP是Document Type （文档类型）的简写，在页面中，用来指定页面所使用的 XHTML （或者HTML的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYP声明。只有确定了一个正确的DOCTYP,EXHTML里的标识和CSS才能正常生效。二、DOCTYP的规贝yDOCTYP声明的写法遵循一定的规则，

6、它指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是 w3c所发布的一个文档类型定义（dtd ）中包含的规则。每个dtd都包括标记、attributes 、properties 等内容，它们用于标记web文档的内容；此外还包括一些规则， 它们规定了哪些标记能出现在其他哪些标记中。每个web建议标准（比如 html 4 frameset 和 xhtml 1.0 transitional ）都有自己的 dtd 。以下是从手册上摘抄的规则：语法：HTML 顶级元素 可用性注册/组织/类型 标签/定义 语言URL可能值:

7、顶级元素：指定 DTD中声明的顶级元素类型。这与声明的SGML文档类型相对应。HTML默认HTML可用性：指定正式公开标识符（FPI）是可公开访问的对象还是系统资源。PUBLIC默认。可公开访问的对象。SYSTEM系统资源，如本地文件或URL-注册：指定组织是否由国际标准化组织（ISO）注册。+默认。组织名称已注册。-组织名称未注册。Internet工程任务组（IETF）和万维网协会（W3C）并非注册的ISO 组织组织：指定表明负责由！DOCTYPE 声明引用的DTD的创建和维护的团体或组织的名称，即OwnderID 。IETF IETF。W3C W3C-类型：指定公开文本类，即所引用的对象类

8、型。DTD默认。DTD标签：指定公开文本描述，即对所引用的公开文本的唯一描述性名称。后面可附带版本号。HTML默认。HTML-定义：指定文档类型定义。Frameset框架集文档Strict排除所有W3C专家希望逐步淘汰的代表性属性和元素，因为样式表已经很完善了Transitional 包含除frameSet 元素的全部内容。语言：指定公开文本语言，即用于创建所引用对象的自然语言编码系统。该语言定义已编写为ISO639 语言代码（大写两个字母）。EN默认。英语。-URL :指定所引用对象的位置为了获得正确的DOCTYP声明，关键就是让dtd与文档所遵循的标准对应。例如，假定文档遵循的是xhtml

9、 1.0 strict 标准，文档的doctype声明就应该引用相应的 dtd。另一方面，如果doctype声明指定的是xhtml dtd，但文档包含的是旧式风格的html标记，就是不恰当的；类似地，如果 doctype声明指定的是html dtd，但文档包含的是xhtml 1.0 strict 标记，同样是不恰当的。三、选择什么样的 DOCTYPE如上例所示，XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional ）、严格的（Strict ）和框架的（Frameset ）。这里分别介绍如下。1过渡的一种要求不很严格的 DTD允许在页面中使用 HTML4

10、.01的标识（符合xhtml语法标准）。 过渡的DTD的写法如下：2 严格的一种要求严格的DTD不允许使用任何表现层的标识和属性，例如等。严格的DTD的写法如下：3 框架的一种专门针对框架页面所使用的DTD当页面中含有框架元素时，就要采用这种DTD框架的DTD的写法如下：使用严格的DTD来制作页面，当然是最理想的方式。但是，对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的 DTD因为这种DTD还允许使用表现层的标识、 元素和属性，比较适合大多数网页制作人员。四、需要注意的问题没什么特别的，就是一定要将DOCTYP声明放在XHTM文档的顶部，上面哪怕多个HTML 注释标记都不行。最

11、好示例代码也加上 DOCTYP，否则效果会有差异。关于meta”标签meta标签meta是html语言head区的一个辅助性标签。几乎所有的网页里，我 们可以看到类似网页中meta标签的使用，关键字下面这段的html代码：也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。编辑本段 meta标签的组成meta标签共有两个属性，它们分别是http-equiv 属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功 能。1. name属性name属性主要用于描述网

12、页，与之对应的属性值为content ，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。meta标签的 name属性语法格式是：vmeta name=参数content= 具体的参数值 ;。其中name属性主要有以下几种参数：A、Keywords （关键字）说明：keywords用来告诉搜索引擎你网页的关键字是什么。举例： vmeta n ame =keywordsconten t=scie nce,educati on, culture,politics,ec no mics,relatio nships,e ntertai nmen t,huma nB、 descri

13、ption（网站内容描述）说明：description用来告诉搜索引擎你的网站主要内容。网站内容描述（description ）的设计要点： 网页描述为自然语言而不是罗列关键词（与 keywords设计正好相 反）； 尽可能准确地描述网页的核心内容，通常为网页内容的摘要信息， 也就是希望搜索引擎在检索结果中展示的摘要信息； 网页描述中含有有效关键词； 网页描述内容与网页标题内容有高度相关性； 网页描述内容与网页主体内容有高度相关性； 网页描述的文字不必太多，一般不超过搜索引擎检索结果摘要信息 的最多字数（通常在 100中文字之内，不同搜索引擎略有差异）。举例： vmeta n ame=desc

14、ripti on conten t=This page is about the meaning of scie nce,educatio n, culture.C、robots （机器人向导）说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需 要索引。content 的参数有 all,none,index,noindex,follow,nofollow。默认是 all o举例： vmeta n ame=robots content=non eD author （作者）说明：标注网页的作者举例： vmeta n ame=author conten t=root,root21c

15、n. com2. http -equiv 属性http-equiv顾名思义，相当于 http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性 值为content ， content中的内容其实就是各个参数的变量值。meta标签的http-equiv属性语法格式是：vmeta http-equiv= 参数content=参数变量值 ;其中http-equiv属性主要有以下几种参数：A、Expires （期限）说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器 上重新传输。用法：vmeta http-equiv=expires content

16、=Fri,12 Jan 200118:18:18 GMT注意：必须使用 GMT的时间格式B、Pragma（cache 模式）说明：禁止浏览器从本地计算机的缓存中访问页面内容。用法： vmeta http-equiv=Pragma conten t= no-cache注意：这样设定，访问者将无法脱机浏览。C、Refresh （刷新）说明：自动刷新并指向新页面。用法：vmeta http-equiv=Refreshconten t=2;URL=http:/www.root. net;（注意后面的引号，分别在秒数的前面和网址的后面）注意：其中的2是指停留2秒钟后自动刷新到URL网址。D Set-Co

17、okie（cookie 设定）说明：如果网页过期，那么存盘的cookie将被删除。用法： vmeta http-equiv=Set-Cookie conten t=cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/注意：必须使用GMT的时间格式。E、 Window-target（显示窗口的设定）说明：强制页面在当前窗口以独立页面显示。用法： vmeta http-equiv=Wi ndow-target conten t=_top注意：用来防止别人在框架里调用自己的页面。F、 content-Type（显示字符集的设

18、定）说明：设定页面使用的字符集。用法： vmeta http-equiv=c onten t-Type con te nt=text/html; charset=gb2312G content-Language（显示语言的设定）用法： vmeta http-equiv=C onten t-La nguage conten t=zh-c n /编辑本段 meta标签的功能上面我们介绍了meta标签的一些基本组成，接着我们再来一起看看meta标签的常见功能：帮助主页被各大搜索引擎登录meta标签的一个很重要的功能就是设置关键字，来帮助你的主页被各 大搜索引擎登录，提高网站的访问量。在这个功能中，最

19、重要的就是对 Keywords和description的设置。因为按照搜索引擎的工作原理，搜索引擎首先派出机器人自动检索页面中的keywords和description，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。因此，我们必须设置好关键字，来提高页面的搜索点击率。下面我们来举一个例子供大 豕参考：iIn 壬mi*vT HariMrhMMi W&-r 卄1斫r*a*Q4h-*4*n也H一It.tt刁Wl bwfii*Ma穷 4” 1.由*I Wv? Imf 耳* .i*. Um*r niWMi4*v mnill r iiMM* ）4nrtl/* * w-kwsmp* 4-创建M

20、eta标签vmeta name=keywords content= 政治，经济，科技，文化，卫生，情感，心灵，娱乐，生活，社会，企业，交通 vmeta n ame=descripti on conten t=政治，经济，科技，文化，卫生，情感，心灵，娱乐，生活，社会，企业，交通设置好这些 关键字后，搜索引擎将会自动把这些关键字添加到数据库 中，并根据这些关键字的密度来进行合适的排序。定义页面的使用语言这是meta标签最常见的功能，在制作网页时，我们在纯HTML代码下都会看到它，它起的作用是定义你网页的语言，当浏览者访问你的网页时， 浏览器会自动识别并设置网页中的语言，如果你网页设置的是GB码，

21、而浏览者没有安装 GB码，这时网页只会呈现浏览者所设置的浏览器默认语言。 同样的，如果该网页是英语，那么charset=en。下面就是一个具有代表性的例子：vmeta http- equiv= content Type content= text/html; charset=gb2312 ”该代码就表示将网页的语言设置成国标码。自动刷新并指向新的页面如果你想使您的网页在无人控制的情况下，能自动在指定的时间内去 访问指定的网页，就可以使用meta标签的自动刷新网页的功能。下面我们来看一段代码：meta http- equiv= refresh content= 2;URL=http:/www.r

22、oot. net ”这段代码可以使当前某一个网页在2秒后自动转到 页面中去，这就是 meta的刷新作用，在 content 中, 2代表设置的时间（单位为秒），而URL就是在指定的时间后自动连接的网页地址。编辑本段实现网页转换时的动画效果使用meta标签，我们还可以在进入网页或者离开网页的一刹那实现动 画效果，我们只要在页面的html代码中的v/head ;标签之间添加如下代码就可以了：一旦上述代码被加到一个网页中后，我们再进出页面时就会看到一些 特殊效果，这个功能其实与FrontPage2000 中的Format/Page Transition一样，但我们要注意的是所加网页不能是一个Fram

23、e页；RevealTra ns 动态滤镜Duration表示滤镜特效的持续时间(单位：秒)Tran siti on滤镜类型。表示使用哪种特效，取值为0-23:0矩形缩小1矩形扩大2圆形缩小3圆形扩大4下到上刷新5上到下刷新6左到右刷新7右到左刷新8竖百叶窗9横百叶窗10错位横百叶窗11错位竖百叶窗12点扩散13左右到中间刷新14中间到左右刷新15中间到上下16上下到中间17右下到左上18右上到左下19左上到右下20左下到右上21横条22竖条23以上22种随机选择一种网页定级评价IE4.0以上版本的浏览器可以防止浏览一些受限制的网站，而之所以浏览器会自动识别某些网站是否受限制，就是因为在网站me

24、ta标签中已经设置好了该网站的级别，而该级别的评定是由美国RSAC即娱乐委员会的评级机构评定的，如果你需要评价自己的网站，可以连接到网站 ，按要求提交表格，那么 RSAC会提供一段 meta代码给你，复制到自己网页里就可以了。下面就是一段代码的样例：meta http- equiv= PICS Labelcontent= ( PICS1.1 /ratingsv01.htmll gen true comment RSACi North America Server for on 2001.08.16T08:15 0500r

25、 (n 0 s 0 v 0 l 0)控制页面缓冲meta标签可以设置网页到期的时间，也就是说，当你在In ternetExplorer浏览器中设置浏览网页时首先查看本地缓冲里的页面，那么当浏览某一网页，而本地缓冲又有时，那么浏览器会自动浏览缓冲区里的页面， 直到meta中设置的时间到期，这时候，浏览器才会去取得新页面。例如下 面这段代码就表示网页的到期时间是2001年1月12日18时18分18秒。meta http- equiv= expires content= Friday,12-Jan-200118:18:18 GMT控制网页显示的窗口我们还可以使用 meta标签来控制网页显示的窗口，只

26、要在网页中加入下面的代码就可以了：;，这段代码可以防止网页被别人作为一个Frame调用。说明： scheme can be used whe n n ame is used to specify how the value of content shouldbe in terpreted.用于指定要用来翻译属性值的方案。此方案应该在由标签的profile属性指定的概况文件中进行了定义。用法：vmeta scheme=ISBN name=ide ntifiercontent=0-14-043205-1 /2. Link （链接）说明：链接到文件用法： 注意：很多网站如果你把它保存在收件夹中后，会

27、发现它连带着一个 小图标，如果再次点击进入之后还会发现地址栏中也有个小图标。现在只 要在你的页头加上这段话，就能轻松实现这一功能。用来将目前文件与其它URL作连结，但不会有连结按钮，用於标记间，格式如下：3、Base（基链接）说明：插入网页基链接属性用法： 注意：你网页上的所有相对路径在链接时都将在前面加上“ http:/www.c n8c ”。其中target=_bla nk是链接文件在新的窗口中打开，你可以做其他设置。将“ _blank ”改为“ _parent ”是链接文件 将在当前窗口的父级窗口中打开；改为“ _self ”链接文件在当前窗口（帧）中打开；改为“ _top ”链接文件全

28、屏显示。编辑本段Meta的使用方法技巧Meta标签是用来描述网页属性的一种语言，标准的Meta标签可以便于搜索引擎排序，提高搜索引擎网站权重排名。要想网站做的更符合搜索引 擎标准就必须了解meta标签，下面由Seoer惜缘于大家讲讲 meta标签含义与使用方法：1. META标签的 keywords写法为：vmeta name=Keywords content=信息参数/meat标签的Keywords的的信息参数，代表说明网站的关键词 是什么。2. META标签的 Description写法为：vmeta name=Description content=信息参数/meta标签的Descrip

29、tion的信息参数，代表说明网站的主要内容，概况是什么。3. META标签的 http-equiv=Content-Type content=text/htmlhttp-equiv=Content-Type代表的是HTTP的头部协议，提示浏览器网页的信息，写法为： vmeta http-equiv=Content-Type content=text/html; charset=信息参数/meta标签的charset的信息参数如 GB2312时，代表说明网站是采用的 编码是简体中文；码是繁体中文；meta标签的charset的信息参数如米用的编码是日文;meta标签的charset的信息参数如用

30、的编码是韩文；meta标签的charset的信息参数如用的编码是英文；meta标签的charset的信息参数如码；meta标签的charset的信息参数如 BIG5时，代表说明网站是采用的编iso-2022-jp时，代表说明网站是ks_c_5601时，代表说明网站是采ISO-8859-1时，代表说明网站是采4. META标签的 generator 写法为：meta标签的制作。5. META标签的UTF-8时，代表世界通用的语言编gen erator的信息参数，代表说明网站的采用的什么软件author写法为：vmeta name=author content=信息参数meta标签的author的

31、信息参数，代表说明网页版权作者信息。6. META标签的 http-equiv=Refresh写法为：meta标签的Refresh代表多少时间网页自动刷新，加上Url中的网址参数就代表，多长时间自动链接其他网址。7. META标签的 HTTP-EQIW =Pragma CONTENT=no -cache写法为：vMETA HTTPEQIW =Pragma CONTENT=no -cache ;代表禁止浏览器从本地计算机的缓存中访问页面内容，这样设定，访问者将无法脱机浏览。8. META标签的 COPYRIGHT写法为：meta标签的COPYRIGHT勺信息参数，代表说明网站版权信息9. MET

32、A标签的 http-equiv=imagetoolbar写法为：指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。10.META标签的 Content-Script-Type写法为：W3C网页规范，指明页面中脚本的类型11. META标签的 revisit-after写法为：vMETA name=revisit-after C0NTENT=7 days revisit-after代表网站重访，7 days代表7天，依此类推。12. META标签的 Robots写法为：vmeta name=Robots contect=信息参数Robots代表告诉搜索引擎机器人抓取哪些页面其中的属性说明如下：信息参数为all :文件将被检索，且页面上的链接可以被查询；信息参数