图像处理和CSS技术.pptxVIP

第7章 图像处理和CSS技术;教学目标;教学要求;学习重点;本章目录;7.1 【案例25】案例效果;（1）打开记事本输入一下代码： html head title案例26/title link rel=stylesheet type=text/css href=7-1.css / /head body h1开始学习CSS吧！/h1 p这是我使用CSS制作的网页brbrbr a href=7-1.html target=_blankCSS学习/a /p /body /html;再打开记事本创建CSS文件，输入以下代码 ：;相关知识;相关知识;相关知识;CSS语句的基本结构： 选择符{属性:属性值;} 常见选择符有三种： 标签选择符 id选择符，唯一性选择符 class选择符，多重选择符;3.CSS的基本设置方式 （1）内联样式表 （2）嵌入样式表 （3）外部样式表 （4）输入样式表;7.2 【案例26】案例效果;代码设计;相关知识;相关知识;相关知识;4)“容器”;(2) 填充距(padding);(3) 边框(border);(4) 图文混排常用属性;5) 分级;6) 鼠标;2．CSS定位;3．CSS滤镜;7.3 综合实训;代码设计;该网页布局主要由以下5个部分构成。 ① Navigation：logo和导航。图7.6 目录结构 ② Header：Banner图片，大小为760px*160px。 ③ Sidebar：边框，一些附加信息，如注册登录块、公告栏。 ④ Content：网站的主要内容。 ⑤ Footer：网站底栏，包含版权信息等。;(2) 创建网站文件目录结构：; (4) 新建HTML网页，并保存为首页“index.html”。输入以下代码： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html head meta http-equiv=Content-type content=text/html; charset=UTF-8 / title我的CSS网站/title link rel=stylesheet type=text/css href=css/master.css / /head body /body /html; (5) 创建网站的整体框架，在HTML文件的body和/body之间写入以下代码： div id=container Hello world. /div (6)创建CSS文件，命名为master.css，保存在css文件夹下，输入（7-13.txt）代码。;(7) 编写网页基本布局代码，在HTML文件的body和 /body之间用以下代码替换文本“Hello world.”： div id=navigationNavigation/div div id=headerHeader/div div id=sidebar-aSidebar A/div div id=contentContent/div div id=footerFooter/div (8) 在HTML文件中的导航Navigation部分添加（7-14.txt）代码。; (9) 在HTML文件中的Header部分添加以下代码（7- 15.txt）： div id=header img src=imgs/header.jpg alt=校园风景 border=0 / /div div img src=imgs/line.jpg style=margin-top:10px/ /div;(10) 在HTML文件中的Sidebar部分添加（7-16.txt）代码。 (11) 在HTML文件中的Content部分添加（7-17.txt）代码。 (12) 在HTML文件中的Footer部分添加（7-18.txt）代码。 (13) 保存，按F12预览网页效果。