基础班-cs基础完整课件.ppt

在DreamWeaver中制作网页 介绍DW CSS的好处 样式表能实现内容与样式的分离，方便团队开发 方便统一定义格式,修改也方便. 外观美化 布局、定位 HTML标签的外观样式比较单一 页面色彩不生动 样式修改不方便 样式表的作用相当于华丽的衣服 样式表的基本结构 STYLE type=text/css P {color:red; font-size:30px; font-family:隶书;} …… /STYLE 类样式 如果希望其他的标签也能采用P标签的样式，怎么办？ STYLE type=text/css .red { color:red; font-family:隶书; font-size:24px; } …… /STYLE 练习: 黑体，字体大小20px 字体大小14px，蓝色 常用的样式 STYLE type=text/css …… table { background-image: url(images/type_back1.jpg); background-repeat:no-repeat; } /STYLE …… 属 性 CSS名称 说 明 边界属性 margin-top 设置对象的上边距 margin-right 设置对象的右边距 margin-bottom 设置对象的下边距 margin-left 设置对象的左边距 边框属性 border-style 设置边框的样式 border-width 设置边框的宽度 border-color 设置边框的颜色 填充属性 padding-top 设置内容与上边框之间的距离 padding-right 设置内容与右边框之间的距离 padding-bottom 设置内容与下边框之间的距离 padding-left 设置内容与左边框之间的距离 练习: 线宽2px、虚线框样式dashed、颜色为red 行的背景色为yellow 给按钮设置背景 按钮的边界、边框、填充值均为0px 使用background-image、 margin、 border、padding、height、width和font-size属性 按钮背景图像与按钮宽度、高度大小一样 字体大小14px .picButton{ background-image: url(images/back.jpg); border:0 px; margin: 0px; padding: 0px; height: 23px; width: 82px; font-size: 14px; } …… INPUT name=Rt1 type=reset class=picButton value= 重填 INPUT name=Bt1 type=submit class=picButton value= 提交 ……. 行内样式表 如果希望某段文字和其他段落文字显示风格不一样， 该如何解决？ 导入外部样式 1.外部HEAD LINK href=newsyle.css rel=stylesheet type=text/css /HEAD 练习:完成下面的网页 点击查看常见的图片格式 img标签: src width height alt属性 ol、ul、li标签的使用 a标签: href target 属性 链接文件的路径问题 相对路径:指定相对于当前文件的文件位置 绝对路径:指定从根目录到文件的完整路径 锚标记的使用 定义锚标记,使用a标签的name属性 如:a name=标记名目标位置/a 跳转到错标记的公交车,使用a标签的href属性,描标记名称前加#号 如:：a href=#标记名当前位置/a a标签的mailto的使用方法 marquee标签:scrolldelay direction属性 !--注释内容 -- 练习: 表格 为什么要使用表格: 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像进行布局 行 列 单元格 表格应用场合 论坛中应用表格 购物网站应用表格 门户网站应用表格 定义表格的基本语法 TABLE border=1 TR TD 单元格内容 /TD …… /TR …… /TABLE table表签 :表格的开始 tr一行的开始 td一列的开始 加/表示结束 演示下面的例子 表格中的文字也可以添加超链接 表格中的文字也可以更改颜色,设置字号 试试把table的b