网页制作CSS样式
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
创建CSSFra Baidu bibliotek式
• 自定义CSS样式 • HTML标签样式 • CSS选择器样式
自定义CSS样式
自定义CSS样式可以对任何文本 块或文本区域进行且需要用户手动进 行应用。
HTML标签样式
该样式是对现有的HTML标记进行重新 定义，当创建或改变该样式时，所有应用 了该样式的文本格式都会自动更新。
CSS选择器样式
上机实战
本课上机实战主要练习某公司站点的CSS样式 定义。在练习中主要用到CSS样式的创建和添加外 部CSS样式的链接等知识点，通过练习读者应充分 掌握自定义样式、HTML标签样式等CSS样式的创 建。在制作中主要分为创建<body>标签样式、自定 义文本样式以及创建超级链接样式这3个部分。
上机实战 ：学习园地
定位设置
“定位”设置主要用于控制网页元素，特 别是层的位置。
扩展设置
“扩展”设置主要用于为打印的页面设置分页和为 网页元素设置视觉效果。
管理CSS样式
• • • • • 修改CSS样式 删除CSS样式 复制CSS样式 重命名层叠样式 应用CSS样式表 – 自定义CSS样式的应用 – 链接外部CSS样式
类型设置
类型设置应用实例-超级连接
• 样式-新建立样式-选择css样式表-命名-设置 (一般是超级链接的都会自动应用 除非已经重新定义文本的格式) 重新修改:文本-css样式-编辑
正常状态 已经访问过 鼠标经过 活动链接
类型设置应用实例-超级连接
• 1、锚的伪类 最常用的是4种a（锚）元素的伪类，它表示动态 链接在4种不同的状态： Link：未访问的链接 Visited：已访问的链接 Hover ：鼠标停留在链接上 Active ：激活链接
所有的超级链接的文字都会变成这样的效果,不用套用
样式使用
• 建立样式 • 名称:bk 颜色:#333300 虚线细边框的设置
样式使用
• 大小18像素, 行高26,颜色 #FF6633
• 建立样式 • 名称:subHeader大 小:11像素 行高:22 颜色:#993300 其它的标题文字也用这 个样式
样式使用
• 建立样式 • 名称:td • 大小:11像素 颜色:#666666 所有的单元格中的文字都 会变成这样的文字,不用 套用
重命名层叠样式
自定义CSS样式的应用
在CSS样式中的HTML标签样式和CSS选择器样 式是自动应用的，只有自定义层叠样式需要用户手动 操作。 选择对象---应用样式
链接外部CSS样式
通过链接外部CSS样式可将其他网页中的样式应 用到当前网页中。附加样式表----链接或者导入
应用CSS滤镜效果
例子
• 将myweb中的主页的链接设置为： 链接 黑色 变换图像链接 红色 活动链接 绿色 已访问链接 粉红色 无下划线
知识点拨
使用css样式 第4.2 使用 样式
4.2.1CSS技术概述 技术概述 4.2.2 设置 设置CSS属性 属性 4.2.3 创建和使用 创建和使用CSS样式 样式
课堂讲解
修改CSS样式
创建层叠样式后，可以修改样式中的某些 参数。
删除CSS样式
• 在“CSS样式”面板中，选择要删除的样式名称。 • 单击面板底部的“删除”按钮即可将样式删除。
复制CSS样式
复制一个已经创建完成的CSS样式，再对其参数 进行修改，即可创建一个全新的CSS样式，这样可以 提高工作效率。
• • • •
新建立站点:css 新建立站点文件夹:pic 新建立文件:xxyd.htm 把图片hphoto .jpg复制到pic中
学习园地页面的制作
• 1、插入２行２列的表格，表格宽７７ ０像素，边框和间距都为０.表格居中， 背景色为#D5ECB4插入内容如下图
学习园地页面的制作
• ２、插入１行３列的表格，表格宽７７ ０像素，边框和间距都为０.表格居中， 背景色为#00FF99插入内容如下图红框 部分
• ２、插入２行４列的表格，表格宽７７０像素，边框和间距都为０.表 格居中，背景色为#99FF99插入内容如下图
• ２、选择第一行背景色为#CCCC99插入内容如下图，在第一行 的中间表格插入一个８行１列的表格。
• ２、选择第一行背景色为#CCCC99插入内容如 下图，在第一行的中间表格插入一个８行１ 列的表格。
该样式是对某些特定的标记组合进行重新定义，如所有包 含了特定ID属性的标记，设置完成此样式后Dreamweaver会自 动应用该样式。
设置CSS样式
• • • • • • • • 类型设置 背景设置 区块设置 方框设置 边框设置 列表设置 定位设置 扩展设置
类型设置
类型设置应用实例-文字
• 样式-新建立样式-自定义样式-命名-设置 • 选择文字--应用
正常状态 已经访问过 鼠标经过 活动链接
方框设置
“方框”设置可以定义控制元素在页面上的 放置方式和属性等。
边框设置
“边框”设置包括定义元素周围边框的 样式、宽度及颜色等。
边框设置
“边框”设置包括定义元素周围边框的 样式、宽度及颜色等。
边框设置
“边框”设置包括定义元素周围边框的 样式、宽度及颜色等。
• • • • • • CSS样式简介 创建CSS样式 设置CSS样式 管理CSS样式 应用CSS滤镜效果 扩展的CSS支持
CSS样式简介
CSS（Cascading Style Sheets）样式又叫 层叠样式，使用它可以对网页中的布局元素，如 表格、字体、颜色、背景、链接效果和其他图文 效果实现更加精确的控制。CSS样式不仅可以在 一个页面中使用，而且可以用于其他多个页面。
样式使用
无法显示图像。计算机可能没有足够的内存以打开该图像，也可能是该图像已损坏。请重新启动计算机，然后重新打开该文件。如果仍然显示红色 “x”，则可能需要删除该图像，然后重新将其插入。
• 建立样式 • 名称:a 颜色:#993300 • 建立样式 • 名称:a:hover 颜色:#5c743d
样式使用
网页设计与制作
知识点拨
网页美化
1、页面属性 、 2、 CSS技术创建和应用CSS 、 CSS技术创建和应用 技术创建和应用CSS
样式
1、 页面属性 、
设置“外观” 设置“外观”页面属性 设置“链接” 设置“链接”页面属性 设置“标题” 设置“标题”页面属性 要点】注意几个易混的动作： 【要点】注意几个易混的动作： 变换图像链接指鼠标放在链接文字上 活动链接指鼠标按住文字链接但没有松手 已访问链接指鼠标按住文字连接后松手
会有什么样的效果? 会有什么样的效果?
背景设置
“背景”设置包括设置背景颜色、选择背景图像、 设置背景图像是否重复及重复的方式、背景图像是 否滚动、背景图像相对于应用样式元素的位置。
区块设置
“区块”指网页中文本、图像和层等替 代元素，主要用于控制块中元素的间距和对 齐方式等。
列表设置
“列表”设置主要用于控制列表内各项元素的属 性，如项目符号类型、项目符号图像和项目符号位置。
CSS滤镜是CSS的一个扩展，能把可视化的滤镜和转换效果添加 到一个标准的HTML元素上，使应用样式的对象产生模糊、反转、发 光等特殊效果。在Dreamweaver 8中，可直接在对话框中添加滤镜的 参数，而不用编写复杂的代码。
扩展的CSS支持
在Dreamweaver 8中，CSS面板设计成了统一的面板， 我们在此面板中可以快速确认样式、编辑样式、查看应用 于页面元素的样式。