网页设计学习笔记

1. 初级阶段使用的编辑器EditPlus。HomeSite4。2. 屏幕捕捉工具PSCapture。3. 安装各种主流浏览器用于测试编写的网页。或者安装专门用于测试的IETester。火狐、谷歌、苹果。4. 表格直列化，控制某一列的整体效果： 学生成绩表 姓名 语文 数学 英语 效果如下：如果要控制最后一列:13 5. 设置跳转到其他页面的某一指定位置。XHTML教程 6. 设为首页&添加收藏设为首页添加收藏7. 脚本链接：脚本链接是一种特殊的链接，当单击设置脚本链接的文本或者图片时，可以运行相应的JavaScript语句。常用到的脚本链接：打开关闭窗口8. 模仿别人的网页，查看分析源代码。9. 图解说明：布局分析。10. 表单标记：所有表单元素必须包含type和name属性。11.选中字就可以选中单选按钮的实现：男女原理：标注内容标签为input元素定义标注。标签的for属性应当与相关的元素的id属性相同。11. 为列表框分组：武汉黄冈朝阳海淀12. 隐藏域的使用。13. 定义围绕表单中元素的边框；为fieldset元素定义标题。效果 用户名 密  码 效果图：14. 使用标记插入FLASH动画。属性值说明Srcurlflash路径width像素/百分比flash宽度height像素/百分比flash高度wmodetransparent使flash背景部分透明化15. 在网页中插入falsh的方式有两种：【1】通过embed标签。【2】通过dreamweaver自动生成。16. 滚动字幕滚动的文字direction=”滚动的方向”left左 right右 up上 down下behaviour=”滚动方式”scroll一圈一圈绕着走 slide只走一次 alternate来回的走loop=”滚动的循环次数”若未制定则循环不止（loop=”inlinite”）bgcolor=”背底颜色” width=”宽度” height=”高度”onMouseOver=”this.stop()”onMouseOut=”this.start()”scrollmout=”速度”数值越大速度越快；scrolldelay=”延时”(走一步，停一停)17. 测试参数时，建议先用大的参数，再用小的参数。18. 采用Web标准的好处：【1】提高页面浏览速度。使用CSS方法，比传统的web设计方法至少节约50%以上的文件尺寸。【2】缩短改版时间，将表现（样式/外观）与内容（信息/数据）相分离。只要简单的修改几个CSS文件就可以重新设计一个成千上万页面的站点。【3】降低网站流量的费用。带宽要求降低，成本降低。【4】更容易被搜索引擎搜索到。提高网站在百度或google中的排名。【5】内容能被更广泛的设备所访问。包括屏幕阅读机、手持设备、搜索机器人、打印机等等。19. 理解web标准的含义为什么采用web标准核心思想：表现与内容相分离。20. css定义中英文字体在前，中文字体在后:font-family: “Arial”, “宋体”。21. 想让文字在处置方向上居中，将行高设置为元素的高度。行高=元素的高度。关键一点：文字的内容不能换行。22. css可以改变xhtml标签的默认值。例如h1标签设置的标题是加粗的，但是加上这样一个设置后标题就变细了：h1font-weight:normal;23. 网页中加CSS的方式有四种：【1】内联式样式表：直接写在现有的标记中，如：这里是红色文字【2】嵌入式样式表：使用标签嵌入到HTML文件的头部标记内。用于浏览器不支持样式表时，不会将样式表内容显示出来。【3】【推荐使用】外部链接式样式表：将样式表写在一个独立的.css文件中，然后在页面head区标记内用标签调用它，主要用于表现与结构分离，如：【4】导入式样式表：导入式样式表与链接式样式表的功能基本相同，只是语法和动作方式上略有不同。同样也是将导入样式代码写在标记内。语法：import url(“main.css”);*导入式会占用html文件空间，有些浏览器解析会有问题。可能浏览器会最后读取import中的内容。24. CSS选择符类型：【1】 标签类型选择符：就是针对HTML文档中的标签，哪些html标签应用哪些css样式：pfont-size:12px;【2】 类选择符：可是自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式。类以英文“.”开头，后面的名字自己定义。类定义后还需要在网页中加入class=类名称，加以调用。如：.warning属性:值亭亭玉立同时给某个元素应用多个类亭亭玉立* a1和a2之间需要空一个格。同一个元素应用多个类，类名之间用空格隔开。* 类名和ID名不要以数字开头。【3】ID选择符：与类基本相似，只是以英文“#”开头，因为ID具有唯一性，所以在网页中只能出现一次，用于定义只出现一次的样式。如：#main属性:值亭亭玉立可以同时给某个元素应用多个类与ID亭亭玉立【4】通配选择符：*属性:值，用于定义所有html元素【5】包含选择符（嵌套/派生）语法：e1 e2属性:值,含义是所有被e1包含的e2.如：table td属性:值；#head li a属性:值。【6】选择符分组（集体控制）：将同样的样式定义于多个选择符，选择符之间用逗号分隔。如：p,div,waring属性:值【7】标签指定式选择符：如果既想使用id或class，也想同时使用标签选择符h1#content表示针对所有id为content的h1标签【8】组合选择符：将以上选择符进行组合使用h1.p1,#content h125. CSS样式的特点：【1】继承：子元素会继承氟元素的某些样式。【2】层叠：子元素如果定义与父元素相同的样式，会覆盖掉父元素的样式。后面的样式会覆盖掉前面的样式。27.CSS样式的优先权【1】四种方式的优先权：内联式嵌入式式链接式导入式【2】CSS优先权：就近原则。【3】作用范围越小，优先权越高【4】离要修饰的目标越近的样式优先权越高28. CSS控制字体29.CSS选择符命名规范，三种：驼峰命名法：除第一个单词字母小写外，其余所有单词首字母都大写；帕斯卡命名法：所有单词首字母都大写；匈牙利命名法：需要在名称前面加上一个或多个小写字母作为前缀。CSS命名就一个原则：容易理解，方便协同工作。30. 页面模块的常用CSS命名：31.CSS盒子模型：盒子模型主要定义四个区域：内容content，填充padding，边框border，边界margin。边界：外边距。填充：内边距。32.可以通过一个padding后面跟参数设置。只有一个参数时，表示上、右、下、左四个方向。只有两个参数时，表示 上下、左右。只有三个参数时，表示上、左右、下。33.使用外边距的时候要注意兼容性的问题：解决办法是增加border：1px solid blue.34.除了值为0的情况下，所有的非零的值后面都要加单位。35.CSS控制元素的尺寸：36.关于列表的属性：list-style : list-style-image | list-style-position | list-style-type列表的样式：列表的图片 列表符号的位置 列表的样式列表存在兼容性的问题，所以一般的各大门户网站都不用列表：list-style :none 不要列表的符号37.CSS边框：如果只写border，则后面要跟着的是，三个不同的子属性，第一个表示粗细，第二个表示样式，第三个表示颜色。38. CSS控制边框属性：39.CSS中元素分类：【1】块状元素：可以容纳内联元素和其他块状，例如div，body，p，h1h6等。能设置宽和高，独占一行。【2】内联元素：只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度和高度不起作用，例如a，em，span等。思考：如何使内联元素的宽高起作用？40.CSS控制背景：41.CSS精灵技术：减少http请求。制作翻转按钮的两种方法：第一种：需要准备两张图片，一张正常的图片，一张鼠标经过图片，思路就是设置链接a的背景为第一张图片，a:hover的背景为第二张图片；第二种：将两张图片合并成一张图片，设置成按钮的背景，然后，将a:hover的背景向上移动相应的像素即可。【定位是关键】【例子：126邮箱登录界面】42.CSS布局的方式：【1】默认的文档流顺序【2】浮动【定位】43.ul和li默认情况下是块元素。要想让它们在一行中显示就要用到浮动。44.当IE6父元素中的子元素的高度超过了父元素的高度，IE6默认会把父元素的高度自动增加。45.如果想让多个块显示在同一行中，可以将这些块都浮动，并且方向一致。46.清除浮动：去掉前面对象浮动对后面对象浮动的影响。属性clear取值：none：默认值。允许两边都可以有浮动对象。left：不允许左边有浮动对象right：不允许右边有浮动对象both：不允许有浮动对象。47.由于浏览器窗口的大小会改变浮动的位置，如何解决？创建一个父元素。48.设置一个块为水平居中时，都会给这个块设置一个宽度值。49.当父元素没有指定高度时，并且它的子元素有浮动，这时，这个父元素的高度不会自动增加。50.清除浮动的方法【1】额外标签法：W3C建议在容器的末尾增加一个“clear:both”的元素，强迫容器适应它的高度以便装下所有的元素。 左增加一个空的div【2】父元素使用overflow的方法：通过设置父元素overflow值设置为hidden，是最简单的清除浮动方法，但如果子元素使用了定位布局，就会很难实现。 【3】51. 定位布局属性：position描述：设置对象的