三DreamweaverCS4网页设计.ppt

DreamweaverCS4网页设计 任务一表格的设计任务二图片视频的插入任务三超链接任务四布局任务五框架任务六表单任务七CSS样式 项目二DreamweaverCS4网页设计 任务一表格的设计 任务一表格的设计 表格基本概念表格是网页制作中使用最多的工具之一 它不仅可以将相关数据有序的排列起来 还可以精确地定位文字 图像等网页元素在页面中的位置 使得页面在形式上丰富多彩又条理清楚 在组织上井然有序又不显单调 任务一表格的设计 任务实施案例1表格的设计 主页面main asp的整体设计新建页面main asp查看表格属性面板进行表格属性设置插入或删除行和列单元格的拆分和合并 任务一表格的设计 图片宽 204 高 231 图片宽 204 高 263 图片宽 486 高 263 图片宽 204 高 263 将单元格拆分为1列7行 插入内嵌表格 1行7列 任务一表格的设计 表格基本概念表格是网页制作中使用最多的工具之一 它不仅可以将相关数据有序的排列起来 还可以精确地定位文字 图像等网页元素在页面中的位置 使得页面在形式上丰富多彩又条理清楚 在组织上井然有序又不显单调 表格由行 列和单元格3部分组成 一般通过表格标记table 行标记tr 单元格标记td来创建 任务一表格的设计 行 列 列标题 在HTML文档中 广泛使用表格来存放网页上的文本和图像 单元格 任务一表格的设计 元素 定义一个表格 每一个表格只有一对和 一张页面中可以有多个表格 元素 定义表格的行一个表格可以有多行 所以对于一个表格来说不是唯一的 元素 定义表格的一个单元格 每行可以有不同数量的单元格 在和之间是单元格的具体内容 需要注意的是 上述的三个元素必须 而且只能够配对使用 缺少任何一个元素 都无法定义出一个表格 任务一表格的设计 表格的基本构成第1行第1列单元格第1行第2列单元格第2行第1列单元格第2行第2列单元格 任务一表格的设计 任务一表格的设计 caption设置表格标题 设置表格的标题 一般位于整个表格之前 一个表格只能有一个表格标题语法 表格标题th表头 表格的表头是单元格的一种变体 实质上仍然是一种单元格 一般位于第一行和第一列 用来表明这一行或列的内容类别 在一般情况下 浏览器会以粗体和居中的样式显示元素中的内容 语法 任务一表格的设计 表格的表头考试成绩表姓名语文数学副科张三957680 李四889085三毛808990 任务一表格的设计 表格的属性width属性 指定表格或某一个表格单元格的宽度 单位可以是 或者象素 height属性 指定表格或某一个表格单元格的高度 单位可以是 或者象素 align属性 指定表格或某一个单元格里的内容 文本 图片等 的对齐方式 任务一表格的设计 表格的基本属性考试成绩表姓名语文数学副科张三957680 李四889085三毛808990 任务一表格的设计 border属性 表格边线粗细 可以使用border设置表格的边框效果 包括边框的宽度 变宽的颜色等 语法 border属性设置的表格边框职能影响表格四周的边框宽度 而不能影响单元格之间的边框尺寸 bordercolor表格边框颜色默认情况下边框颜色是灰色 设置边框颜色的前提是边框的宽度不能为0 否则无法显示出边框的颜色 语法 任务一表格的设计 表格的边框颜色单元格1单元格2单元格3单元格4 任务一表格的设计 内框宽度cellspacing 间距 用于设置表格内部每个单元格之间的间距 单位是像素 语法 表格内文字与边框间距cellpadding 填充 在默认情况下 单元里的内容会紧贴着表格的边框 这样看上去非常拥挤 可以使用cellpadding来设置单元格边框与单元格里的内容之间的距离 语法 任务一表格的设计 表格内文字与边框距离单元格1单元格2单元格3单元格4 任务一表格的设计 表格的属性bgcolor属性 指定表格或某一个单元格的背景颜色 background属性 指定表格或某一个单元格的背景图片 其属性值为一个URL地址 任务一表格的设计 单元格属性width属性 指定表格或某一个表格单元格的宽度 单位可以是 或者象素 height属性 指定表格或某一个表格单元格的高度 单位可以是 或者象素 bordercolordark属性 单元格的暗边框就是单元格边框背光的部分 通过bordercolordark可以设置单元格暗边框的颜色 bordercolorlight属性 单元格的两边框就是单元格边框向光的部分 通过bordercolorlight可以设置单元格亮边框的颜色 任务一表格的设计 单元格的暗 亮边框颜色白羊座金牛座双子座巨蟹座射手座魔羯座水瓶座双鱼座 狮子座处女座天秤座天蝎座 任务一表格的设计 单元格属性align属性 指定表格或某一个单元格里的内容 文本 图片等 的水平对齐方式 valign属性 指定表格或某一个单元格里的内容 文本 图片等 的垂直对齐方式 任务一表格的设计 单元格属性baseline值基线是一条虚构的线 在一行文本中 大多数字母以基线为基准 baseline值设置行中的所有表格数据都分享相同的基线 该值的效果常常与bottom值相同 不过 如果文本的字号各不相同 那么baseline的效果会更好 任务一表格的设计 单元格属性colspan属性 水平跨度rowspan属性 垂直跨度 创建表格第一学期第二学期数学科学英语数学科学英语989580958788 COLSPAN n 属性表示跨多少列 1 创建表格螺母螺栓锤子第一季度一月250010001240二月300025004000 ROWSPAN n 属性表示跨多少行 任务一表格的设计 水平跨度2005秋冬系列的四大类别童趣罗曼蒂克爱的故事大都会之夜 任务一表格的设计 垂直跨度商品名称 彩晶石银手链规格 材质 925纯银天然紫晶黄晶橄榄石单位 每条类别 925银饰银链手镯 任务一表格的设计 表格的结构表首标记 表主体标记以及表尾标记 使用这些标记能对表格的一行或多行单元格属性进行统一修改 从而省去了逐一修改单元格属性的麻烦 表首标记语法 用于定义表格最上端表首的样式一个表元素中只能有一个标记 任务一表格的设计 表格结构某购物网站列表产品名称类型价格 任务一表格的设计 手工编织厚围巾围巾45 00元彩音盒MP3数码599元彩晶石银手链银饰68元欢迎光临本购物网站 任务一表格的设计 嵌套表格在HTML文件中 第一个标记表示插入第一表格 第二个标记插入在标记之间 表示在单元格中插入表格 也就是嵌套表格 表格常用属性总结 widthheightalignborderbordercolorbackgroundbgcolorcellspacingcellpadding 表格属性 alignwidthheightbordercolorbgcolorbackground 表格行属性 widthheightcolspanrowspanbgcolorbordercoloralign 单元格属性 注意 距离目标元素最近的标签属性起作用 作业3 1 2编写如下图所示效果对应的html代码 任务一表格的设计 任务一表格的设计 作业3 2阿里巴巴旗下网站我要买我要买我淘宝你好 欢迎来淘宝 跨2行 并放了一副图片 此单元格放了一副图片 此单元格跨了3列 作业3 1 3编写如下图所示效果对应的html代码 插入图片 任务一表格的设计 任务一表格的设计 作业3 2你好 欢迎来淘宝 任务一表格的设计 作业3 1 4使用代码编写一个网页 要求 网页中包含5行3列的表格 表格居中对齐 表格边框为1像素 表格的宽度为400像素 表格标题为 一月 二月销售记录表 表格第一行的背景颜色为 ff9966 第二行的背景颜色为 ffccff 第三行的北京颜色为 66CC99 第四行的背景颜色为 FFCCFF 第五行的背景颜色为 FF9966 第一列为左对齐 第二列为右对齐 第三列为右对齐 第一行和最后一行使用th代替td 将文件保存为 姓名作业3 2 asp 并上交 任务一表格的设计 消费记录一月 二月消费记录表消费项目 一月二月衣服 241 10 50 20化妆品 30 00 44 45食物 730 40 650 00总计 1001 50 744 65 任务一表格的设计 作业3 1 5使用代码编写一个网页 要求 表格居中对齐 表格边框为1像素 表格的宽度为470像素 第一行使用th 最后一行合并了三列 嵌套了一个表格 该表格宽度为100 无边框 为一行四列 分别使用thead tbody tfoot三个标签设置表格的颜色 如右下图所示 颜色可以自己选择 将文件保存为 姓名作业3 3 asp 并上交 任务一表格的设计 作业3 3动态网页设计与制作网页设计数据库开发程序设计DreamweaverAcessC DreamweaverAcessVBscriptAcessJAVAscript邮箱QQ地址电话 作业3 1 6根据下面的内容 编写如下图所示效果对应的html代码某班级同学的期末成绩表 任务一表格的设计 作业3 1 6根据下面的内容 编写如下图所示效果对应的html代码 任务一表格的设计 任务二图片视频的插入 任务二图片视频的插入 图片的插入引用图片必须用元素标志 元素下的基本元素属性是src属性 src的属性值为所引用的图片的URL地址 src属性是必须的 Src的URL可以是绝对地址 也可以是相对地址 图像提示文字alt所谓图片的替代文本 指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本 替代文本可以使用title 语法 任务二图片视频的插入 图片的插入图片的显示大小width指定图片的宽度 height指定高度 它们的属性值可以是象素 也可以是 border图像的边框可以为图像添加边框线 但是边框的颜色不可以设置 边框的颜色为黑色 当图像添加了超链接时 边框颜色和链接文字颜色一致 任务二图片视频的插入 图片的插入图像的垂直边距vspace调整图像与文字的垂直边距图像的水平边距hspace调整图像与文字之间的水平距离图像的对齐方式align 作业3 2 1 素材 回归大自然的体验 尝试做个摩登原始人 登天入地 攀岩涉水 充满乐趣 个人训练 团体活动皆适宜 是全山西省最大 最富趣味性与挑战性的山训场 本山训场是一片布置于树林及原野间的山训场 场内的设施均具野味而刺激 山庄还安排体能锻炼及充满活力的团队山训课程 在教练的指导及安全的环境中体验惊险艰困而得到的成功滋味 对于精神压力的放松以及体能耐力的精进有实质的助益 任务二图片视频的插入 图像排列回归大自然的体验 尝试做个摩登原始人 登天入地 攀岩涉水 充满乐趣 个人训练 团体活动皆适宜 是全山西省最大 最富趣味性与挑战性的山训场 本山训场是一片布置于树林及原野间的山训场 场内的设施均具野味而刺激 山庄还安排体能锻炼及充满活力的团队山训课程 在教练的指导及安全的环境中体验惊险艰困而得到的成功滋味 对于精神压力的放松以及体能耐力的精进有实质的助益 任务二图片视频的插入 插入flash动画语法 作业3 2 2 表格 宽度995 无填充 无间距居中对齐 图片 宽度995 高 140 swf 宽度778 高 250 图片 宽度217 高 559 图片 宽度778 高 81 图片 宽度234 高 194左对齐 文字 宋体字号 4 图片 宽度985 高 87 任务二图片视频的插入 作为一名发展势头强劲的农业科技新贵 公司正以快速而稳健的步伐走在种子行业的前沿 并逐步向集团化公司过渡 我们坚信 在全体同仁的共同努力下 公司的明天会更美好 一定能够在农业的腾飞中大放异彩 任务二图片视频的插入 插入音频文件语法例如 任务二图片视频的插入 插入背景音乐语法背景音乐需要不断地播放 可以通过设置loop来实现循环次数的控制 循环次数设置为true 表示无限次地循环播放背景音乐 任务二图片视频的插入 设置滚动效果滚动标记marquee 滚动的内容 direction默认情况下职能从右向左滚动 通过direction设置不同的滚动方向 取值 up down left right up 从下往上 left 从右向左 任务二图片视频的插入 设置滚动效果滚动标记marquee 滚动的内容 behavior设置滚动方式 默认是循环滚动Loop默认情况下 滚动会不停的循环下去 如果希望滚动几次后停止 可以使用loop设置滚动次数 任务二图片视频的插入 设置滚动效果滚动标记marquee 滚动的内容 Scrollamount设置滚动的快慢 滚动的速度实际上是设置每次滚动时移动的长度 以像素为单位 Scrolldelay设置滚动滚动的时间间隔 单位是毫秒 如果设置的时间比较长 会产生走走停停的效果 任务二图片视频的插入 设置滚动效果滚动标记marquee 滚动的内容 bgcolor设置滚动的背景颜色width height设置滚动背景的面积 通过width height其水平和垂直的范围 hspace vspace使用hspace vspace设置滚动对象与周围的文字或图像之间的空白空间 图片视频的插入总结 altborderwidthheightalignvspacehspace 图片的插入img widthheightalignvspacehspace 动画和视频插入embed ScrollamountScrolldelaybgcolorwidthheighthspacevspace 滚动标记marquee 作业3 2 3使用代码编写教材项目三任务一中的首页 作业3 2 3 作业3 2 3 单元格宽 204 高 231 单元格宽 204 高 263 单元格宽 486 高 263 单元格宽 202 高 263 单元格宽 202 高 231 关于 的图片都以单元格背景图片插入 插入内嵌表格 1行7列 宽度 900 边框不显示 单元格背景色 0375B4 设置背景音乐为 autumn MP3 播放次数为5 单元格高 43设置滚动文字 内容为 学校地址 云南省丽江市丽江师范高等专科学校联系方式 0888 3196079邮编 674100 整个表格 宽度 900 边框不显示 间距为0 填充为0 居中对齐 任务二图片视频的插入 竞赛网站首页学校地址 云南省丽江市丽江师范高等专科学校联系方式 0888 3196079邮编 674100 任务三超链接 任务三超链接 超链接语法 target 链接的目标窗口 任务三超链接 超链接例题源文件 e3 3 1 asp1 asp效果文件 e3 3 1 ok asp 任务三超链接 超链接空连接未指定目标文档的链接 使用空链接可以为页面上的对象或文本附加行为 语法 例如 例题效果文件 e3 3 2 ok asp 任务三超链接 锚点链接锚实质上就是在文件中命名的位置或文本范围 锚链接起到的作用就是在文档中定位 创建命名锚记语法 链接到命名锚记语法 链接到同一页面中的锚点 链接到其他页面中的锚点 任务三超链接 锚点链接例题链接到同一页面中的锚点源文件 e3 3 3 asp效果文件 e3 3 3 ok asp链接到不同页面中的锚点源文件 e3 3 4 asp效果文件 e3 3 4 ok asp 任务三超链接 链接到外部网站语法 链接到E mail语法 任务五框架 任务五框架 框架是网页设计中很常用的技术 可以在一个浏览器窗口中显示多个文档 利用这一特点 框架技术可以广泛地应用到网站导航和文档浏览器中 方便访问者对网页的浏览 减少访问者下载页面所需的时间 框架最常见的用途就是导航 任务五框架 框架的基本概念框架一般由框架集和框架组成 框架集框架集是HTML文件 它定义一组框架的布局和属性 包括框架的数目 框架的大小和位置 以及在每个框架中初始显示的页面URL 框架集本身不包含要在浏览器中显示的HTML内容 但noframes除外 框架集文件只是向浏览器提供应如何显示一组框架 以及在这些框架中应显示哪些文档的有关信息 任务五框架 框架的基本概念框架框架是浏览器窗口中的一个区域 设置框架集的属性frameset框架页面的结构是在框架集中设置的rows水平分割窗口将页面沿水平方向分割 也就是将页面分成上下排列的窗口语法 任务五框架 rows可以取多个值 它由逗号分割的像素值或百分比组成 应用举例cols垂直分割窗口将页面沿垂直方向分割语法 cols可以取多个值 它由逗号分割的像素值或百分比组成 应用举例 任务五框架 嵌套分割窗口嵌套分割窗口就是在一个页面中 既有水平分割框架 又有垂直分割的框架 语法 应用举例 任务五框架 框架的边框frameborder默认情况下 浏览器总是给每一个框架结构加上一条有明显宽度的边框 通过frameborder可以控制边框的显示和隐藏 取值只能为0 1 或者yes no 0或no 边框将会隐藏 1或yes 边框将会显示 框架的边框宽度framespacing默认情况下 框架的边框宽度为1 通过framespacing可以控制边框宽度 border设置边框的宽度框架边框颜色bordercolor 任务五框架 设置窗口属性frameframe用来定义每一个单独的框架页面 框架页面的属性设置都在标记里进行 页面源文件src页面名称name禁止调整窗口尺寸noresize每一个框架都有其固定的宽度和高度 可以通过拖动边框进行调整 不过有时候需要框架的宽度保持不变 禁止浏览器在访问框架的时候随意改变框架尺寸 可以使用noresize设置 任务五框架 应用举例注明 语法 noresize或noresize noresize 任务五框架 边框与页面内容的水平边距marginwidth边框与页面内容的垂直边距marginheight控制框架滚动条显示scrolling取值包括 yes no或autoyes 一直显示滚动条no 不显示滚动条auto 是系统的默认值 根据具体内容来调整的 当页面长度超过浏览器窗口的范围时就会自动显示滚动条 应用举例 任务五框架 不支持框架标记noframes如果遇到不支持框架结构的浏览器 此时就需要来设置替换内容 告诉浏览者其浏览器无法打开框架页面 例如 对不起 您的浏览器不支持框架结构 任务五框架 浮动框架iframe浮动框架是一种特殊的框架 它是在浏览器窗口中嵌套的子窗口 整个页面并不一定是框架页面 但要包含一个框架窗口 页面源文件src浮动框架的宽和高width height生成的框架结构是依赖上级空间尺寸的 它的宽度或者高度必须有一个和上级框架相同 而浮动框架可以完全由指定宽度和高度决定 单位为像素 任务五框架 浮动框架的对齐方式align用于设置浮动框架页面相对于浏览器窗口的水平位置 取值 浮动框架滚动条显示属性scrolling属性值 auto yes no应用举例index iframe asp 任务五框架 创建框架链接一般情况下 创建框架网页的目的是为了更好地对页面内容进行导航 通过框架进行链接不同的页面 普通框架结构的链接语法 链接文字 任务五框架 浮动框架的链接语法 产品展示 任务五框架 作业3 5 1 任务五框架 无标题文档赛场报道赛场布局赛场介绍 任务六表单 任务六表单 在制作动态网页时 要实现信息交互 常常用到表单 表单主要用于收集客户端提供的相关信息 使网页具有交互功能 任务六表单 表单标记语法 在表单的标记中 可以设置表单的基本属性 包括表单的名称 处理程序和传送方法等 一般情况下 表单的处理程序action和传送方法method是必不可少的参数 提交表单action用于指定表单数据提交到那个地址进行处理表单名称name用于给表单命名 这一属性不是表单的必要属性 但是为了防止表单提交后到后头处理程序时出现混乱 一般需要给表单命名 任务六表单 传送方法method表单的method属性用于指定在数据提交到服务器的时候使用哪种HTTP提交方法 可取值为get或post get 表单数据被传送到action属性指定的URL 然后这个新URL被传送到处理程序上 post 表单数据被包含在表单主体中 然后被送到处理程序上 说明 传送方法的值只有两种即get和post 任务六表单 编码方式enctype表单中的enctype属性用于设置表单信息提交的编码方式 enctype属性用于设置表单信息提交的编码方式 任务六表单 目标显示方式target用于指定目标窗口的打开方式 表单的目标窗口往往用来显示表单的返回信息 任务六表单 应用实例e3 6 1 aspe3 6 1 ok asp 任务六表单 插入单行文本字段text在网页中最常见的表单元素就是文字字段 用户可以在文字字段内输入字符或者单行文本 语法 任务六表单 提示 文字字段的长度如果加入了size属性 就可以设置size属性的大小 最小值为1 最大值将取决于浏览器的宽度 任务六表单 应用实例e3 6 2 ok asp 任务六表单 插入密码文本字段password密码域是一种特殊的文字字段 它的各属性和文字字段是相同的 不同的是密码域输入的字符全部以 显示 语法 任务六表单 任务六表单 应用实例e3 6 3 ok asp 任务六表单 插入多行文本字段textarea当需要让浏览者填入多行文本时 就需要使用文本域 和其它大多数表单对象不一样 文本域使用的是textarea 语法 不能使用value属性来建立一个在文本域中显示的初始值 相反应当在textarea标记的开头和结尾之间包含想要在文本域内显示的任何文本 任务六表单 应用实例e3 6 4 ok asp 任务六表单 插入单选按钮radio单选按钮是在一组选项中 只允许选择一个选择项 语法在单选按钮中必须设置value的值 提交到后台的 对于一个选择列表中的所有单选按钮来说 往往要设置为相同的名称 这样在传递时才能更好地对某一个选择内容进行判断 一个单选按钮组中只有一个单选按钮可以设置为checked 任务六表单 应用实例e3 6 5 ok asp 任务六表单 插入复选框checkbox复选框可以让用户从一个选项列表中选择超过一个选项 语法checked参数表示该项在默认情况下已经被选中 一个选项列表中可以有多个复选框被选中 任务六表单 应用实例e3 6 6 ok asp 任务六表单 插入列表 菜单菜单和列表也是表单中常用的元素之一 它可以显示多个选项 用户通过滚动条在多个选项中选择 通过和标记来实现 下拉菜单select语法选项显示内容 选项值是提交表单时的值 而选项显示内容才是真正在页面中显示的选项内同 selected表示该选项在默认情况下是选中的 一个下拉菜单中只能有一个默认选项被选中 任务六表单 应用实例e3 6 7 ok asp 任务六表单 列表项在页面中列表项可以显示出几条信息 一旦超过这个信息量 在列表项右侧会出现滚动条 拖动滚动条可以看到所有的选项 语法选项显示内容 size用于设置在页面中显示的最多列表项数 当超过这个值时会出现滚动条 multiple属性规定可同时选择多个选项 对于windows 按住Ctrl按钮来选择多个选项 任务六表单 应用实例e3 6 8 ok asp 任务六表单 插入文件域file文件域是为了提交表单中上传一些文件的 通过表单将选中的文件上传 语法 任务六表单 应用实例e3 6 9 ok asp 任务六表单 插入隐藏域hidden隐藏域是用来收集或发送信息的不可见元素 对于网页访问者来说 隐藏域是看不见的 当表单被提交时 隐藏域就会将信息用你设置时定义的名称和值发送到服务器上 语法 type hidden 定义隐藏域 name属性定义隐藏域的名称 要保证数据的准确采集 必须定义一个独一无二的名称 value属性定义隐藏域的值 任务六表单 插入按钮在网页中按钮也是很常见 在提交页面 清除内容时常常用到 普通按钮button普通按钮一般情况下要配合脚本来进行表单处理 语法value的取值就是显示在按钮上的文字 在button属性中可以添加onclick来实现一些特殊的功能 任务六表单 应用实例e3 6 10 ok asp 任务六表单 提交按钮submit提交按钮是一种特殊的按钮 单击该类按钮可以实现表单内容的提交 语法value的取值就是显示在按钮上的文字 任务六表单 应用实例e3 6 11 ok asp 任务六表单 重置按钮reset重置按钮用来清除用户在页面中输入的信息 语法value的取值就是显示在按钮上的文字 任务六表单 应用实例e3 6 12 ok asp 任务六表单 图像域image可以使用图像制作按钮 语法 任务六表单 应用实例e3 6 13 ok asp 任务六表单 id标记id标记是一个较为特殊的标记 它主要用于标示一个唯一的元素 这个元素可以是文字字段 可以是密码域 也可以是其他的表单元素 甚至可以是一幅图像 一个表格 语法 id用来标示页面的惟一元素 因此在定义标签名时最好根据其含义进行命名 任务六表单 课堂作业3 6 1参考教材101页图3 6 26 制作表单 任务六表单 课堂作业3 6 2制作如图所示表单网页 任务六表单 任务六表单 任务四和任务七DIV CSS布局网页基础 任务四和任务七 CSS的基本知识CSSCascadingStyleSheets 中文名称是层叠样式表 用于控制网页样式并允许将样式与网页内容分离的一种标记性语言 CSS的优点将内容结构和格式控制相分离 CSS可以更加精确地控制网页的内容形式 CSS的定义样式灵活多样 可以根据不同的情况 选用不同的定义方法 任务四和任务七 CSS基本语法选择符 样式属性 取值 样式属性 取值 选择符 selector 指这组样式编辑所要针对的对象 可以是html标签 如body h1 也可是定义了特定id或class标签 如 mystyle定义的样式可以应用到所有包含值id mystyle 的标签 mystle 则调用时class mystyle属性 property 是CSS样式控制的核心 如颜色 大小 定位 浮动方式等 值 value 是指属性的值 例如 H1 font size 30px Font weight bold Color blue Text align center 任务四和任务七 应用实例e3 7 1 ok asp 任务四和任务七 添加CSS的方法链接外部样式表链接外部样式表就是在网页中调用已经定义好的样式表来实现样式表的应用 它是一个单独的文件 适合大型网站的CSS样式定义 rel stylesheet是指在页面中使用外部样式表 type text css 是指文件的类型是样式表文件 href是CSS文件所在位置 例如href slstyle css 任务四和任务七 应用实例e3 7 2 ok aspslstyle css 任务四和任务七 添加CSS的方法内部样式表内部样式表一般位于HTML文件的头部 即标签内 并且以开始 以结束 这些定义的样式就可以应用到页面中 任务四和任务七 应用实例e3 7 3 ok asp 任务四和任务七 添加CSS的方法导入外部样式表导入外部样式表是指在内部样式表的里导入一个外部样式表 导入时用 import例如 注意 导入外部样式表必须在样式表的开始部分 在其他内部样式表上面 任务四和任务七 应用实例e3 7 4 ok asp 任务四和任务七 添加CSS的方法内嵌样式表内嵌样式是混合在HTML标记里使用的 使用这种方法可以简单地对某个元素单独定义样式 内嵌样式的使用是直接在HTML标记里添加style参数 而style参数的内容就是CSS的属性和值 这种方法使用比较简单 显示很直观 但是无法发挥样式表的优势 因此不推荐使用 例如 这是个表格 任务四和任务七 应用实例e3 7 5 ok asp 任务四和任务七 字体属性font family字体语法 font family 字体1 字体2 浏览器不支持字体1时 则会采用字体2 以此类推font size字号语法 font size pxpx为像素font style字体风格设置字体是否为斜体 normal是默认的正常字体 italic 以斜体显示文字 oblique 属于中间状态 以偏斜体显示 任务四和任务七 字体属性font weight加粗字体设置字体的粗细取值 normal表示正常粗细 bold表示粗体 bolder表示特粗体 lighter 表示特细体 number范围为100 900 一般情况下都是整百的数字 这些数字序列代表从最细 100 到最粗 900 的字体粗细程度 每一个数字定义的粗细都要比上一个等级稍微粗一些 font variant小写字母转为大写字母取值 normal表示正常显示 small caps将小写字母转换为大写字母且字体较小 任务四和任务七 应用实例e3 7 6 ok asp 任务四和任务七 字体属性字体复合属性可以设置font的复合属性 用来简化CSS代码 语法font 字体取值复合属性可以是字体 字体大小 加粗字体等 各值之间用空格相连例如 任务四和任务七 应用实例e3 7 7 ok asp 任务四和任务七 课堂作业3 7 1自己重新编写例题e3 7 1 ok asp e3 7 7 ok asp的内容 提交时请提交整个文件夹 文件夹命名为 姓名作业3 7 1 任务四和任务七 颜色和背景属性颜色属性color用来设置指定元素的颜色 背景颜色background color用来设置指定元素的颜色背景颜色 可以是网页背景颜色 文字背景颜色 表单背景颜色等 任务四和任务七 应用实例e3 7 8 ok asp 任务四和任务七 背景图像background image用来设置指定元素的颜色背景图像 语法 background image url images ber 12 gif背景重复background repeat设置背景图像的显示方式 例如是否平铺显示 任务四和任务七 应用实例e3 7 9 1 ok aspe3 7 9 2 ok aspe3 7 9 3 ok aspe3 7 9 4 ok asp 准确定位 儿童消费市场 时尚个性尽显其中 历时一年的周密调研 专攻 中国儿童时尚消费 之经营定位 加上专营儿童用品的经验与研究成果 切入市场如定海神针 低价策略 数千种儿童用品 价格档次齐全 折扣最低1折供货 规模效益 薄利多销 贝与知名儿童用品厂商合作 大规模销售 流行时间差 换季不同步 大部分产品的价位在三四十元到一两百之间 高 中 低档都有 适合大众消费 创新时尚 儿童消费 关键有新意 针对各地儿童文化背景 地域背景 兴趣喜好 智力开发等进行研究设计 每年推出的新产品设计就达上万余件 引领潮流 符合标准的质量 符合个性的潮流创意 令每件产品都成为名品 创意好当然效果好 财富自然跑不了 任务四和任务七 背景附件background attachment设置背景图像是随对象滚动还是固定不动 任务四和任务七 应用实例e3 7 10 ok asp 任务四和任务七 背景位置background position用于设置背景图像的位置 这个属性只能应用与块级元素和替换原色 替换原色包括 img input textarea select和object语法中取值有两种 一种是采用数字 另一种是关键字描述 任务四和任务七 任务四和任务七 应用实例e3 7 11 ok asp 任务四和任务七 复合背景属性background 任务四和任务七 应用实例e3 7 12 ok asp 任务四和任务七 段落属性单词间隔word spacing可以控制单词之间的间隔距离 是单词之间的间距 不是字母之间的间距 word spacing对中文无效 取值可以使用normal 也可以使用长度值 例如 word spacing 3px字符间距letter spacing可以控制字符之间的间隔距离 包括字母之间的距离和文字之间的距离 取值可以使用normal 也可以使用长度值 例如 letter spacing 3px 任务四和任务七 应用实例e3 7 13 ok asp 任务四和任务七 段落属性文字修饰text decoration对文本进行修饰 如设置下划线 删除线等 不是任何浏览器都支持blink效果 任务四和任务七 应用实例e3 7 14 ok asp 任务四和任务七 垂直对齐方式vertical align设置文字的垂直对齐方式 任务四和任务七 水平对齐方式text align 任务四和任务七 应用实例e3 7 15 ok asp标签被用来组合文档中的行内元素 span没有固定的格式表现 当对它应用样式时 它才会产生视觉上的变化 任务四和任务七 文本缩进text indenthtml中只能控制段落的整体向右缩进 而不设置 浏览器默认不缩进 文本所禁止必须是一个长度值例如12px或一个百分比 文本行高line height控制段落中航宇行之间的间距行高值可为长度 倍数或百分比 任务四和任务七 应用实例e3 7 16 ok asp 任务四和任务七 文本转换text transform定义文本的大小写状态 此属性对中文无意义capitalize 首字母大写uppercase 每个单词的所有字母大写lowercase 每个单词的所有字母小写none 正常无变化inherit 继承 任务四和任务七 定位属性使用定位属性可以控制元素的位置 包括相对定位和绝对定位两种方式 相对定位 指允许元素在相对于文档布局的原始位置上进行偏移 绝对定位 指允许元素与原始的文档布局分离且任意定位 任务四和任务七 定位方式position控制浏览器应如何定位HTML元素 任务四和任务七 语法top auto 长度值 百分比right auto 长度值 百分比bottom auto 长度值 百分比left auto 长度值 百分比auto表示采用默认值 长度值包含数字和单位 也可以使用百分比来设置 任务四和任务七 应用实例e3 7 17 ok asp 可爱讨喜的卡通文具 爱不释手的动漫饰品 馈赠学友的毛绒玩具 品种丰富的学习用品 学生用品将实用和轻松完美融合 缓解学生学习压力 并具有智力开发功能 卡通的造型 艳丽的图案 多样的用途 种种独具匠心 个性十足 任务四和任务七 DIV层是一种HTML页面元素 是指具有绝对或者相对位置的DIV标签 利用层可以非常灵活地放置内容 DIV是CSS布局方式的核心对象 做一个简单的布局只需要依赖DIV与CSS 因此也称CSS布局为DIV CSS布局 DIV CSS是一种常用的网页布局格式 控制性要比布局表格强得多 语法 div本身就是容器性质的 不但可以内嵌table 还可以内嵌文本和其他的HTML代码 任务四和任务七 层叠顺序z index使用层叠顺序可以设置层的先后顺序和覆盖关系 默认情况下 z index值为1 表示该层为与最底层 属性值越高 它的层越靠上 语法 z index auto 数字数字必须为无单位的整数值 可取负值 值无 1的元素在值为1的元素下层 z index仅能在定位元素上奏效 例如position absolute 任务四和任务七 应用实例e3 7 18 ok asp 可爱讨喜的卡通文具 爱不释手的动漫饰品 馈赠学友的毛绒玩具 品种丰富的学习用品 学生用品将实用和轻松完美融合 缓解学生学习压力 并具有智力开发功能 卡通的造型 艳丽的图案 多样的用途 种种独具匠心 个性十足 任务四和任务七 浮动属性float使用浮动属性float可以设置文字在某个元素的周围 它能应用于所有的元素 语法 float none left right 任务四和任务七 应用实例e3 7 19 ok asp 可爱讨喜的卡通文具 爱不释手的动漫饰品 馈赠学友的毛绒玩具 品种丰富的学习用品 学生用品将实用和轻松完美融合 缓解学生学习压力 并具有智力开发功能 卡通的造型 艳丽的图案 多样的用途 种种独具匠心 个性十足 任务四和任务七 清除属性clear用于指定一个元素是否允许有其他元素漂浮在它的周围 语法 clear none left right both 任务四和任务七 应用实例 四个div 让它们显示成两行e3 7 20 ok asp 任务四和任务七 可视区域clip使用clip属性可以限定只显示裁切出的区域 裁切出的区域为矩形 语法 clip auto rect 数字 auto 表示对象不裁切 是默认值 rect 数字 表示它依据上 右 下 左的顺序提供自对象左上角 0 0 坐标计算的四个偏移数值 其中任一数值都可用auto替换 即此边不裁切 任务四和任务七 应用实例 e3 7 21 ok asp 餐厅面积约300平方米 可供220人同时用餐 餐厅布置典雅高贵 是举行中高档型宴会的理想之选 11间各具特色的包厢 让您在享受美食的同时 更能享受不同异域风味与文化 营业时间 早餐7 00 10 30午餐 11 00 14 00晚餐 17 00 21 00 任务四和任务七 层的宽度和高度width heightwidth和height分别用于设置层的宽度和高度 语法 width auto 长度值height auto 长度值auto 表示自动设置长度 一般以层包含的内容为准 如果需要设置确切的长度 需要设置数值和单位 任务四和任务七 应用实例 e3 7 22 ok asp 餐厅面积约300平方米 可供220人同时用餐 餐厅布置典雅高贵 是举行中高档型宴会的理想之选 11间各具特色的包厢 让您在享受美食的同时 更能享受不同异域风味与文化 营业时间 早餐7 00 10 30午餐 11 00 14 00晚餐 17 00 21 00 任务四和任务七 超出范围overflow使用overflow属性可以设置当层内的内容超出层所能容纳的范围时的显示方式 语法 overflow visible auto hidden scroll 任务四和任务七 应用实例 e3 7 23 ok asp 餐厅面积约300平方米 可供220人同时用餐 餐厅布置典雅高贵 是举行中高档型宴会的理想之选 11间各具特色的包厢 让您在享受美食的同时 更能享受不同异域风味与文化 营业时间 早餐7 00 10 30午餐 11 00 14 00晚餐 17 00 21 00 任务四和任务七 可见属性visibilityvisibility属性是针对嵌套层的设置 嵌套层是插入在其他层中的层 分为嵌套的层和被嵌套的层 语法 visibility inherit visible hidden 任务四和任务七 应用实例 e3 7 24 ok asp 餐厅面积约300平方米 可供220人同时用餐 餐厅布置典雅高贵 是举行中高档型宴会的理想之选 11间各具特色的包厢 让您在享受美食的同时 更能享受不同异域风味与文化 营业时间 早餐7 00 10 30午餐 11 00 14 00晚餐 17 00 21 00 任务四和任务七 一列居中固定宽度一列布局是所有布局的基础 也是最简单的布局形式 一列固定宽度中宽度的属性值是固定的像素 任务四和任务七 应用实例 e3 7 25 ok asp Margin 上下外边距为0 左右外边距auto 会让浏览器自动判断 浏览器会将左右边距设置为相当 呈现居中显示 任务四和任务七 应用实例 e3 7 26 css 任务四和任务七 应用实例e3 7 26 e3 7 26 css 任务四和任务七 应用实例e3 7 26 e3 7 26 asp 任务四和任务七 应用实例e3 7 26 任务四和任务七 一列自适应自适应布局能够根据浏览器窗口的大小 自动改变其宽度或高度值 任务四和任务七 应用实例 e3 7 27 asp 任务四和任务七 两列固定宽度应用实例 e3 7 28 asp 任务四和任务七 两列右列宽度自适应应用实例 e3 7 29 asp 任务一表格的设计 使用CSS设计网站导航栏无序列表标记列表符号不使用数字或字母 无序列表的项目排列没有顺序 只以符号作为分项标识 语法列表项列表项列表项 不赞成使用disc square circle 一般使用样式规定列表的项目符号的类型 任务四和任务七 列表属性列表符号list style type 任务四和任务七 图像符号list style image语法 list style image url 图片地址 列表缩进list style p