网页设计关键技巧全.doc

第一课 网页设计简介万维网（World Wide Web）超文本 检索W3C负责维护与制定标准URL、IP设计静态网页的技术：HTML（HyperText Markup Language）组织页面内容CSS（Cascade Style Sheets）修饰与定位网页内容JS（JavaScript）处理事件、验证等交互HTML标记内容或，HTML还支持单标签标记可以嵌套，但是不能交叉标记不区分大小写注释：开发工具：记事本EditplusDreamweaverMyEclipse（Java）Visual Studio（C#）浏览器：IE（360、搜狗、TT、遨游）Mozilla FireFoxSafariChromeOpera第二章 HTML基础介绍第三章 文字与段落标题文字：h1h6 标题文字是块标记 align属性是控制文本水平对齐方式的特殊：空格  或者 > <& &注释： 和 ，不能嵌套段落标记：p，brFont标记：文字效果第四章 列表1. 中国2. 美国3. 英国4. 韩国5. 法国无序列表：unorder listlist itemtype: circle，disc，square有序列表：order listtype：1，A，a，I，istart：起始值（以数字表示）自定义列表：defined list 嵌套列表：第八章 框架标记：注意：frame必须在frameset中，frameset不能和body共存。框架网页只负责分割页面区域，不能包含其他页面内容。浮动框架：是独立的框架不需要frameset包裹，跟body也没有冲突，控制比较随意注意：当今浏览器对框架的支持都很弱且各不相同，所以网页人员基本舍弃这种布局方法第五章 超链接a标记属性：1. href=”URL” 链接资源路径2. target=”_self | _top | _parent | _blank | ” 资源出现的位置。默认_self分别代表：自身所在位置、上一层、父级容器、新窗口、指定名称的框架3. title=”鼠标悬浮时的提示信息”4. name=”作为书签时定义的位置名称”相对位置和绝对位置网页中所谓的绝对位置往往是从Web服务器的根目录出发，现在还无需关注而与相对位置相关的一些概念：. 代表当前目录，默认可以不写. 代表上一级目录/ 代表根目录书签（锚）：用书签来理解这种应用在使用书签之前，要先放置书签，就是加锚标记：xxx使用书签：同一文件锚的访问xxx不同文件锚的访问xxx用T-SQL语句附加数据库邮件链接 联系我们mailto实际上是去启动本地邮件客户端下载链接浏览器对于超链接指向的资源，如果自身能够解释，则处理它；如果自身解释不了，则调用客户端本地软件或者弹出下载对话框。图片链接多媒体 不同浏览器对相对路径和绝对路径的支持？表格容纳数据：Table 是表格的起始属性：border/bordercolor/width/cellpadding/cellspacing/align/bgcolorCaptionTr：align/width/valignTd：colspan、rowspanTh布局：表格嵌套的时候，子表格一定是被外部表格的td包围，而不该出现在其他位置表单接收用户的输入，收集必要的信息表单内容及各种表单域Mothod默认是get方式提交，get方式是明文提交，且追加在URL后面：URL?name=value&name1=value1&Type：text单行文本框Password密码框Radio单选框相同name为一组（同组互斥）Checkbox复选框Submit提交按钮Reset重置按钮Button普通按钮Image图片按钮（提交）File选择文件Hidden隐藏域Name：可以重复。表单只提交有name的表单域的valueId：便于CSS或者JavaScript查找定位（id理论上在一个HTML中只能有一个）Value：在按钮上的文字、在文本框和密码框中的内容、单选和复选提交的值、如果是submit或者reset、button按钮则直接显示为按钮上的文字Checked：单选或者复选的默认选中（自说明属性，有它和无它已经说明两种状态。在HTML中它直接就说明问题，但是在XHTML中，不允许没有值的属性存在，所以要写成：checked=”checked”）Size：文本框和密码框能显示的字符数Maxlength：文本框和密码框最多接收输入的字符数文本组名下拉框或者列表框：显示文本多行文本域文本中的特殊符号不会解释，不需要转移。但是转义字符会解释。按钮上的字CSSCascading Style Sheets，层叠样式表语法：selector attrName:attrVaule;CSS属性名一般都不用缩写，如果组成名称的单词超过一个，中间用【-】组合成一个复合词引入方式：内嵌：优点：直接简单缺点：高耦合，不能重用内联：在中定义Selector 优点：可以被同一个HTML共享缺点：不能跨HTML文件共享外联：创建【.css】后缀名的CSS文件 在HTML的中引入嵌入：import url(“css文件的URL路径”);优点：跨HTML重用缺点：会将CSS文件代码潜入进HTML链接：优点：内容与样式分离分工可能HTML简化搜索引擎方便样式重用降低耦合优先级：内嵌内外联（在中，写在后面的优先（覆盖前面）选择器：l 元素选择器：element 优点：无需添加额外信息缺点：不能个别控制l 类选择器：.className 优点：可以个别控制，最常用的一种缺点：需要给元素添加class属性可以给一个元素同时指定多个class，用空格隔开（写在CSS文件中靠后的优先（后者覆盖前者），与元素的class属性值的先后无关）l ID选择器：#idName 优点：可以精确控制某一个元素缺点：需要给元素添加id属性优先级：idclasselement常用属性字体相关：Font-family Font-size: Npx | xx-small | medium | xx-large Color: colorName | #FFFFFF | #FFF | rgb(255,255,255) | rgb(%,%,%)Font-weight: normal | lighter | bold | bolder | 100-500 | 600-900Font-style: normal | italic | obliqueText-decoration: none | underline（） | line-through() | overline | blink()Font-variant: normal | small-capsFont: font-style font-variant font-weight font-size/line-height font-family组合属性，CSS将多个属性的值统一写在一起。这样简化代码，采用默认值的可以不写，但是要按要求的顺序，值之间用空格分隔文本相关：Text-indent: Npx | N%首行缩进Letter-sapcing:Npx | N% 字符间距Line-height:normal | Npx 单行高度Text-align: left | center | right | justify 内容对齐方式Vertical-align: top | middle | bottom | base-line | text-top | sub | super背景相关：Background-color: Background-image: url(“”);Background-repeat: repeat | no-repeat | repeat-x | repeat-y;Background-attachment: scroll | fixed;Background-position: Npx | N% | top | center | bottom | left | right;Background: color image repeat attachment position伪类(选择器)：:link当超链接从未被点击的时候:hover当鼠标悬停在超链接上时:active正在点击超链接时:visited被点击过的超链接Visited一旦指定了color，就会覆盖hover和active的color鼠标光标：Cursor：auto | wait | move | pointer | text | help | url(“xxx.cur”)盒子模型：ContentBorder：Border: width style color统一控制四个边框的宽度、样式、颜色Border-style: solid | dotted | dashed | double控制四个边框的线条样式（1个值：四个边统一；2个值：上下边和左右边分别控制；3个值： 上、左右、下分别控制；4个值：上、右、下、左边分别控制）Border-bottom: width style color只控制下边框Border-left-color只控制左边框的颜色Padding(内容与边框的边距)Margin（各个盒子边框之间的间距）标准流：按照文档流的先后顺序排列元素区域元素：块元素：前后会换行，独占一行可以包含任何元素P,div行内元素：与其他行内元素共处一行只能包含行内元素不支持width和height控制大小的属性A,input,font,span 互换： display: normal | inline | block | none;浮动：Float: none | left | right(以左浮动为例)尽量往左靠，遇到边界或者其他浮动元素停止。将右侧空间留给其他元素使用，其他元素如果容纳不下，会往下掉。Clear: none | left | right | both(以左清除浮动为例)不去使用左浮动留出的右侧空间。Both是左右浮动留出的空间都不会用。定位：Position:Static:固定不动。Top和left等坐标属性无效。Relative:相对于文档流规定的位置，利用top和left偏移来达到移动的目的。Top为正时，向下移动，left为正向右移动；反之亦然。文档流中的位置会保留。Fixed:相对于窗口的左上角，利用top和left偏移来达到定位的目的。脱离文档流，文档流中的位置消失。Absolute:和fixed一样。但是参照点是非标准流的父容器。其他选择器：元素选择器类选择器ID选择器复合选择器伪类选择器父子选择器selector1 selector2 选择selector1下面的直接或间接selector2，中间是空格隔开合并选