《网页设计10-文字效果分析优秀PPT.ppt》由会员分享，可在线阅读，更多相关《网页设计10-文字效果分析优秀PPT.ppt（23页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
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 1.SPAN 和和 DIV D
3、IV 的区分在于，的区分在于，DIV(division)DIV(division)是一个块是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而摘要和备注等。而SPAN SPAN 是行内元素，是行内元素，SPAN SPAN 的前后的前后是不会换行的，它没有结构的意义，纯粹是应用样式，是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以运用当其他行内元素都不合适时，可以运用SPANSPAN。2.SPAN2.SPAN标记有一个重要而好用的特性，即它什么事标记有一个重要而好用的特性，即它什么事也不会做，它的唯
4、一目的就是围绕你的也不会做，它的唯一目的就是围绕你的HTMLHTML代码中代码中的其它元素，这样你就可以为它们指定样式了。的其它元素，这样你就可以为它们指定样式了。DIVDIV也被用来在也被用来在HTMLHTML文件中建立逻辑部分。但与文件中建立逻辑部分。但与SPANSPAN不不同，同，DIV DIV工作于文本块一级，它在它所包含的工作于文本块一级，它在它所包含的HTMLHTML元素的前面及后面都引入了行分隔。元素的前面及后面都引入了行分隔。内部培训资料,不作任何宣传用途新课讲授新课讲授GoogleGoogleGoogleGoogle实训一：模拟实训一：模拟Google的的Logo文字效果的综
5、合运用文字效果的综合运用1.新建页面的基本结构，在页面显示新建页面的基本结构，在页面显示”Google”内部培训资料,不作任何宣传用途新课讲授新课讲授GoogleGoogleGoogleGoogle实训一：实训一：2.对对标记的文字效果进行限制标记的文字效果进行限制内部培训资料,不作任何宣传用途新课讲授新课讲授GoogleGoogleGoogleGoogle实训一：实训一：3.对各字母分别设定对各字母分别设定CSS风格风格这种定义方式是？何时适用这种定义方式是？何时适用内部培训资料,不作任何宣传用途新课讲授新课讲授1.1.在页面中用在页面中用标记文字标记文字CSSCSS限制限制TitleTit
6、leSuper Title CSSSuper Title CSS实训二：制作五彩的标题实训二：制作五彩的标题内部培训资料,不作任何宣传用途新课讲授新课讲授CSSCSS限制限制TitleTitle!-Super Title CSSSuper Title CSS实训二：实训二：2.对对标记加入简洁限制（只做参考，大家可标记加入简洁限制（只做参考，大家可自由设定）自由设定）内部培训资料,不作任何宣传用途新课讲授新课讲授CSSCSS限制限制TitleTitle!-Super Title CSSSuper Title CSS实训二：实训二：3.给文字下补白并加一灰色边框（大家变更值后给文字下补白并加一灰
7、色边框（大家变更值后视察）视察）内部培训资料,不作任何宣传用途新课讲授新课讲授CSSCSS限制限制TitleTitle!-Super Title CSSSuper Title CSS实训二：实训二：4.给文字加效果（大家变更值后视察）给文字加效果（大家变更值后视察）内部培训资料,不作任何宣传用途新课讲授新课讲授CSSCSS限制限制TitleTitle!-Super Title CSSSuper Title CSS实训二：实训二：5.给文字加背景图（大家变更值后视察）给文字加背景图（大家变更值后视察）内部培训资料,不作任何宣传用途新课讲授新课讲授CSSCSS限制限制TitleTitle!-Sup
8、er Title CSSSuper Title CSS实训二：实训二：6.给文字添加图标（大家变更值后视察）给文字添加图标（大家变更值后视察）内部培训资料,不作任何宣传用途新课讲授新课讲授CSSCSS限制限制TitleTitle!-Super Title CSSSuper Title CSS实训二：实训二：7.把把gif图标变颜色图标变颜色内部培训资料,不作任何宣传用途新课讲授新课讲授实训三：段落实例实训三：段落实例模拟百度搜寻页面模拟百度搜寻页面内部培训资料,不作任何宣传用途新课讲授新课讲授段落实例段落实例:Baidu:Baidu搜寻搜寻 中国中国春节春节网网欢迎光临中国欢迎光临中国春节春节
9、网网,您现在的位置是中国您现在的位置是中国span class=search春节春节网首页网首页!年年 兽的传闻兽的传闻 熬年的传闻熬年的传闻 万年创建历法说万年创建历法说 中国古代历法发展中国古代历法发展 span class=search春节春节:传统和现代传统和现代 元宵灯节源于何时元宵灯节源于何时?猜灯谜的来由猜灯谜的来由 十二生肖的源流、排列与信仰十二生肖的源流、排列与信仰 祭灶祭灶 扫尘扫尘 贴贴春联春联 年画年画 倒贴福字倒贴福字 除夕夜除夕夜 2006-12-18- 2006-12-18-百度快照百度快照喜迎喜迎20042004春节春节_TOM_TOM新闻新闻春节春节流行三类流
10、行三类“拜年短信拜年短信”:”:猴、祝愿、特性猴、祝愿、特性 span class=search春节春节期间电视节目早知道期间电视节目早知道(1(1月月1919日日-1-1月月2525日日)猴年贺岁猴年贺岁:短信短信 彩信彩信.TOM.TOM游戏与大家同过快游戏与大家同过快乐乐春节春节 一起来玩免费网游一起来玩免费网游!“!“对对联对对联 贺新春贺新春”玩乐吧强档举荐玩乐吧强档举荐 许个愿吧许个愿吧 span class=search春节春节听觉搜爆听觉搜爆-.-.news.tom /hot/2004year/82K 2004-1-25-news.tom /hot/2004year/82K 2
11、004-1-25-百度快照百度快照春节春节 我把我把moneymoney献给你献给你_ _阿里巴巴阿里巴巴编者按编者按:新年、新年、春节春节、情人节、情人节,一年中时尚男女血拼的最佳一年中时尚男女血拼的最佳季节。商家借节造势季节。商家借节造势,推出的揽客推出的揽客“花招花招”也是层出不穷也是层出不穷 新春最受欢迎的开新春最受欢迎的开.春节春节期期间间:这些生意好赚钱这些生意好赚钱(一一)()(图图)01/20)01/20 鼎大祥鼎大祥“红腰带祥瑞裤红腰带祥瑞裤”销售红火销售红火01/18 01/18 春节春节 这些生这些生意好意好.info.china.alibaba /news/subjec
12、t/v3000.33K 2006-12-10-span info.china.alibaba /news/subject/v3000.33K 2006-12-10-class=quick百度快照百度快照实训三实训三：1.建立段落结构建立段落结构内部培训资料,不作任何宣传用途新课讲授新课讲授段落实例段落实例:Baidu:Baidu搜寻搜寻!-实训三实训三：2.定义段落中字体、大小、距离定义段落中字体、大小、距离内部培训资料,不作任何宣传用途新课讲授新课讲授段落实例段落实例:Baidu:Baidu搜寻搜寻!-实训三实训三：3.定义段落中文字的颜色定义段落中文字的颜色内部培训资料,不作任何宣传用途新课讲授新课讲授段落实例段落实例:Baidu:Baidu搜寻搜寻!-实训三：实训三：3.变更关键字的下划线颜色变更关键字的下划线颜色内部培训资料,不作任何宣传用途课后作业课后作业 参照课本参照课本P127-138P127-138中的例子，创建一网页应用不同的文字和中的例子，创建一网页应用不同的文字和段落效果。段落效果。内部培训资料,不作任何宣传用途The EndThe EndThanks a lot!