《网页设计10文字效果分析》由会员分享，可在线阅读，更多相关《网页设计10文字效果分析（23页珍藏版）》请在金锄头文库上搜索。
1、授课人：何蕴婷EMAIL：网页设计与制作网页设计与制作（1010）- CSS- CSS样式样式（5 5） 内部培训资料,不作任何宣传用途l 知识技能目标 1、通过实训项目熟练掌握css对页面文字效果的综合运用。内部培训资料,不作任何宣传用途l 实训内容css对页面文字效果的综合运用1、模拟Google的Logo2、制作五彩的标题3、模拟百度搜索页面内部培训资料,不作任何宣传用途l 实训项目实训一、模拟Google的Logo实训二、制作五彩的标题实训三、模拟百度搜索页面内部培训资料,不作任何宣传用途复习引入复习引入文字粗体文字粗体!- 文字文字粗粗体体文字粗细文字粗细:100:100文字粗细文字
2、粗细:200:200文字粗细文字粗细:300:300文字粗细文字粗细:400:400文字粗细文字粗细:500:500文字粗细文字粗细:600:600文字粗细文字粗细:700:700文字粗细文字粗细:800:800文字粗细文字粗细:900:900文字粗细文字粗细:bold:bold文字粗细文字粗细:normal:normal实例实例1：页面中使用到：页面中使用到的多种选择器的多种选择器内部培训资料,不作任何宣传用途复习引入复习引入思考：思考：上例中红框中的是何种选择器，给页面带来怎样的控制？小知识：小知识：1. SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含
3、段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。 2. SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。DIV也被用来在HTML文件中建立逻辑部分。但与SPAN不同， DIV工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。内部培训资料,不作任何宣传用途新课讲授新课讲授GoogleGoogleGoogleGoogle实训一：模拟实训一：模拟Google的的L
4、ogo文字效果的综合运用文字效果的综合运用1.新建页面的基本结构，在页面显示新建页面的基本结构，在页面显示”Google”内部培训资料,不作任何宣传用途新课讲授新课讲授GoogleGoogleGoogleGoogle实训一：实训一：2.对对标记的文字效果进行控制标记的文字效果进行控制内部培训资料,不作任何宣传用途新课讲授新课讲授GoogleGoogleGoogleGoogle实训一：实训一：3.对各字母分别设定对各字母分别设定CSS风格风格这种定义方式是？何时适用这种定义方式是？何时适用内部培训资料,不作任何宣传用途新课讲授新课讲授1.1.在页面中用在页面中用标记文字标记文字CSSCSS控制控
5、制TitleTitleSuper Title CSSSuper Title CSS实训二：制作五彩的标题实训二：制作五彩的标题内部培训资料,不作任何宣传用途新课讲授新课讲授CSSCSS控制控制TitleTitle!-Super Title CSSSuper Title CSS实训二：实训二：2.对对标记加入简单控制标记加入简单控制（只做参考，大家可自由设定）（只做参考，大家可自由设定）内部培训资料,不作任何宣传用途新课讲授新课讲授CSSCSS控制控制TitleTitle!-Super Title CSSSuper Title CSS实训二：实训二：3.给文字下补白并加一灰色边框（给文字下补白并
6、加一灰色边框（大家改变值后观察大家改变值后观察）内部培训资料,不作任何宣传用途新课讲授新课讲授CSSCSS控制控制TitleTitle!-Super Title CSSSuper Title CSS实训二：实训二：4.给文字加效果（给文字加效果（大家改变值后观察大家改变值后观察）内部培训资料,不作任何宣传用途新课讲授新课讲授CSSCSS控制控制TitleTitle!-Super Title CSSSuper Title CSS实训二：实训二：5.给文字加背景图（给文字加背景图（大家改变值后观察大家改变值后观察）内部培训资料,不作任何宣传用途新课讲授新课讲授CSSCSS控制控制TitleTitl
7、e!-Super Title CSSSuper Title CSS实训二：实训二：6.给文字添加图标（给文字添加图标（大家改变值后观察大家改变值后观察）内部培训资料,不作任何宣传用途新课讲授新课讲授CSSCSS控制控制TitleTitle!- Super Title CSSSuper Title CSS实训二：实训二：7.把把gif图标变颜色图标变颜色内部培训资料,不作任何宣传用途新课讲授新课讲授实训三实训三：段落实例：段落实例模拟百度搜索页面模拟百度搜索页面内部培训资料,不作任何宣传用途新课讲授新课讲授段落实例段落实例:Baidu:Baidu搜索搜索 中国中国春节春节网网欢迎光临中国欢迎光临
8、中国春节春节网网, ,您现在的位置是中国您现在的位置是中国span class=search春节春节网首页网首页! ! 年年 兽的传说兽的传说 熬年的传说熬年的传说 万年创建历法说万年创建历法说 中国古代历法发展中国古代历法发展 span class=search春节春节:传统和现代传统和现代 元宵灯节源于何时元宵灯节源于何时? ? 猜灯谜的来由猜灯谜的来由 十二生肖的源流、排列与信仰十二生肖的源流、排列与信仰 祭灶祭灶 扫尘扫尘 贴春联贴春联 年画年画 倒贴福字倒贴福字 除夕夜除夕夜 46K 2006-12-18 - 46K 2006-12-18 - 百度快照百度快照喜迎喜迎200420
9、04春节春节_TOM_TOM新闻新闻春节春节流行三类流行三类“拜年短信拜年短信”: :猴、祝福、个性猴、祝福、个性 span class=search春节春节期间电视节目早知道期间电视节目早知道(1(1月月1919日日-1-1月月2525日日) ) 猴年贺岁猴年贺岁: :短信短信 彩信彩信.TOM.TOM游戏与大家同过快游戏与大家同过快乐乐春节春节 一起来玩免费网游一起来玩免费网游! “! “对对联对对联 贺新春贺新春” ” 玩乐吧强档推荐玩乐吧强档推荐 许个愿吧许个愿吧 span class=search春节春节听觉搜爆听觉搜爆-.- 82K 2004-1-25 - 82K 2004-1-
10、25 - 百度快照百度快照春节春节 我把我把moneymoney献给你献给你_ _阿里巴巴阿里巴巴编者按编者按: :新年、新年、春节春节、情人节、情人节, ,一年中时尚男女血拼的最佳一年中时尚男女血拼的最佳时节。商家借节造势时节。商家借节造势, ,推出的揽客推出的揽客“花招花招”也是层出不穷也是层出不穷 新春最受欢迎的开新春最受欢迎的开.春节春节期间期间: :这些生意好赚钱这些生意好赚钱( (一一)( )(图图)01/20 )01/20 鼎大祥鼎大祥“红腰带吉祥裤红腰带吉祥裤”销售红火销售红火01/18 01/18 春节春节 这这些生意好些生意好 . 33K 2006-12-10 - span
11、 . 33K 2006-12-10 - class=quick百度快照百度快照实训三实训三：1.建立段落结构建立段落结构内部培训资料,不作任何宣传用途新课讲授新课讲授段落实例段落实例:Baidu:Baidu搜索搜索!-实训三实训三：2.定义段落中字体、大小、距离定义段落中字体、大小、距离内部培训资料,不作任何宣传用途新课讲授新课讲授段落实例段落实例:Baidu:Baidu搜索搜索!-实训三实训三：3.定义段落中文字的颜色定义段落中文字的颜色内部培训资料,不作任何宣传用途新课讲授新课讲授段落实例段落实例:Baidu:Baidu搜索搜索!-实训三实训三：3.改变关键字的下划线颜色改变关键字的下划线颜色内部培训资料,不作任何宣传用途课后作业课后作业 参照课本参照课本P127-138P127-138中的例子，创建一网页应用不同的文字和中的例子，创建一网页应用不同的文字和段落效果。段落效果。 内部培训资料,不作任何宣传用途The EndThe EndThanks a lot!
