第3章 HTML与CSS核心基础 网站建设与相关管理课件.pptxVIP

第3章 HTML与CSS核心基础;本章概述;1 HTML概述 2 网页的色彩设计 3 Photoshop制作静态页面 ;1 HTML概述;1 HTML概述;2 网页的色彩设计;2 网页的色彩设计; 网页制作工具有很多，Photoshop是一个很不错的选择。; 使用Photoshop制作网页页头、网页导航、图片、文字等，如网页中的logo、banner、icon制作，一切完毕之后，使用切片工具，将页面切割成相应小块，如图3.2所示。;1 引入CSS方法 2 CSS选择器 3 Web中CSS常用设计剖析与制作 ;1．行内式 行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。 ;2．内嵌式 内嵌式则将对页面中各种元素的设置集中写在head和/head之间，对于单一的网页，这种方式很方便。但是对于一个包含很多页面的网站，如果每个页面都以内嵌式设置各自的样式，就失去了CSS带来的巨大优点，因此一个网站通常都是编写一个独立的CSS样式表文件。使用以下方式引入HTML文档中。 ;2．内嵌式 内嵌式则将对页面中各种元素的设置集中写在head和/head之间，对于单一的网页，这种方式很方便。但是对于一个包含很多页面的网站，如果每个页面都以内嵌式设置各自的样式，就失去了CSS带来的巨大优点，因此一个网站通常都是编写一个独立的CSS样式表文件。使用以下方式引入HTML文档中。 ;3．链接式 链接式是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过link标记链接到页面中，而且该链接语句必须放在页面的head标记区，具体如下： ;网页代码： ; 从head部分链接CSS样式文件，在css.css中对网页内容进行修饰，具体如下： ; 从head部分链接CSS样式文件，在css.css中对网页内容进行修饰，具体如下： ;案例分析:;4．导入式 导入式是指在内部样式表的style标记中使用@import导入一个外部样式表，例如： ;4．导入式 此外，如果需要引入多个CSS文件，则可以首先用链接式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件，具体如下： ? ;1．标记选择器 一个HTML页面由很多不同的标记组成，CSS标记选择器用来声明哪些标记采用哪种CSS样式。因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称。例如，用h1选择器来声明页面中所有的h1标记的风格，具体如下： ? ;2．类别选择器 类别选择器的名称由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范。语法结构如下： ? ;案例分析：;3．ID选择器 ID选择器的使用方法与class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器，其语法结构如下： ? ;1．CSS文字样式 在CSS中字体是通过font-family属性来控制的。 ;2．导航与链接样式 一个网站的导航栏常常成为其设计方案的支柱。导航栏是一个重要且关键的页面组件。导航制作一般有两种，一种是绘制导航图片，包括鼠标移动、鼠标离开等的不同样式的图片，导航文字都嵌在这些图片当中；另外一种是制作背景图片，在背景图片上写导航文字。 就导航而言，应该使用列表，即包含一组链接的列表。列表分无序列表ul和有序列表ol两种。下面分别来看一下： ;3 Web中CSS常用设计剖析与制作;导航和超链接的样式结合案例介绍;下面是对导航和超链接的样式的设置;下面是对导航和超链接的样式的设置;给链接增加一些常见的样式;3．布局的设置 任何一个网站都有自己的布局，CSS布局与table表格式布局是两种完全不同的布局方式。在此采用CSS布局定位方式，div正是这种布局方式的核心对象，页面排版不再依赖表格，仅从div的使用上说，做一个简单的布局只需要依赖两样东西，即div与CSS。因此有人称CSS布局为div+CSS布局。 网页的布局多种多样，有一列、两列、三列、四列的，并且宽度有固定和自适应的。;3 Web中CSS常用设计剖析与制作;3 Web中CSS常用设计剖析与制作