《网页设计与制作》

《网页设计与制作》 深圳职业技术学院郭玲 26731071 guoling@oa.szpt.net.cn

CSS技术 ？网页样式更加丰富多彩？网页文件减肥？修改方便

1、CSS的基本概念 css(Cascading Style Sheets,层叠样式表) • 一种格式化网页的标准方式 • 扩展了 HTML 的功能

2、CSS的使用 1）内嵌使用STYLE关键字直接添加在某个HTML标记内 <标记符 style="属性:属性值;...">

2、CSS的使用 2）内联使用<STYLE>标识符一般写在头部 <style type=“text/css”>css语句</style>

2、CSS的使用 3）外联用<link>标识符 ,一般写在头部单独的样式文件 (*.css)

3、CSS的定义 1）HTML标识符标识符{属性:属性值;...}

3、CSS的定义 2）自定义的类——独立类 .类名{属性:属性值;...}

3、CSS的定义 2）自定义的类——相关类标识符.类名{属性:属性值;...}

3、CSS的定义 3）自定义ID选择符 #ID名{属性:属性值;...}

3、CSS的定义 4）虚类 A:link A:active A:hover A:visited

4、样式的优先级 不冲突，叠加；冲突，“就近优先”；

5、总结--CSS的写法 • 与编写HTML文档的方法一样 • 结构型语言，与HTML惊人相似

6、CSS属性 1）设置字体 • font-family • font-style • font-weight • font-size

6、CSS属性 2）文本排版 • text-indent • text-align • text-decoration • letter-spacing • line-height

6、CSS属性 3）设置颜色和图像背景 • color • background-color • background-image

6、CSS属性 4）设置布局 • margin • padding • border-color 、border-style

6、CSS属性 5）设置定位和显示 • position • top 、bottom、left、right、z-index • visibility

6、CSS属性 7）设置鼠标 • list-style-type

7、CSS过滤器（滤镜） 语法格式： filter:过滤器名（参数）

7、CSS过滤器（滤镜） 1）alpha透明滤镜： filter：alpha（opacity=opcity，finishopacity=finishopacity，style=style，startX=startX，startY=startY，finishX=finishX，finishY=finishY）

7、CSS过滤器（滤镜） 2）blur模糊滤镜： filter：blur（add=add，direction，strength=strength）

7、CSS过滤器（滤镜） 3）FlipH、FlipV翻转滤镜： Filter：FlipH Filter：FlipV

7、CSS过滤器（滤镜） 4）DropShadow投影滤镜： Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，Positive=positive）

7、CSS过滤器（滤镜） 5）Glow发光滤镜： Filter：Glow（Color=color，Strength=strength）

7、CSS过滤器（滤镜） 6）Mask遮罩滤镜： Filter：Mask（Color=颜色)

7、CSS过滤器（滤镜） 7）Shadow阴影滤镜： Filter：Shadow（Color=color，Direction=direction）

7、CSS过滤器（滤镜） 8）Wave波纹滤镜： Filter：Wave（Add=True（False），Freq=频率，LightStrength=增强光效，　　　　　　Phase=偏移量，Strength=强度）

使用层可以以像素为单位精确定位页面元素 。层是一种新的网页元素定位技术。层及其妙用而且层可以放置在页面的任意位置。把页面元素放入层中，可以控制哪个显示在前面，哪个显示在后面，哪个显示，哪个隐藏。配合时间轴的使用，可同时移动一个或多个层，轻松制作出动态效果！

在网页中使用层来实现其特有效果。 示例效果案例在页面中使用层带有图层的网页制作要求：页面是由两张图片和一段文字组成的。将它们分别放在不同的图层中，且使图层之间有相互重叠，将文字放在图层内且放置在图片图层的上面。 1.创建层。创建层有以下几种方法。制作步骤 2. 插入第二layer2 、三个层layer3。 3.设置层的可见性、层的名称、层的Z 指数。

在网页上常常会见到一些小的广告条，这些广告条可以是文字、图片，也可以是动画或小型的游戏等。它们可以通过鼠标拖动来改变在网页中的位置。这里涉及使用层的技术。通过描绘层可制作拖动层示例效果案例制作可拖动的层制作要求：本例中汽车图片放在一个层中，浏览者在浏览网页时可以拖动图片到窗口的任何位置。制作步骤 1.在网页中插入层。 2.为层添加拖动行为动作。打开Behavior行为面板，单击面板上的“+”按钮，选择Drag layer 3. 按F12键预览网页。

网页上经常能看到一些飞翔的鸟或奔跑的动物，在网页中移动 。示例效果案例能够飞行的小鸟能飞的鸟制作要求：选择一个GIF格式的动画，我们这里是一只鸟，利用层和时间线的功能，可以制作一只逼真的鸟在网页中飞翔的效果。单击Timelines中左边第—个小圆圈，可看见红色位置标记移动到第—帧。然后在页面编辑窗口中将层移动到页面的最左端，即动画的起点位置。接下来单击Timelines中紫色条右侧末尾的关键帧小圆圈，将看见红色位置标移动到最后—帧，然后在页面编辑窗口中将层拖动至页面的最右端，即动画的终点位置。选择菜单Window/ Other /Timelines选项，打开Timelines工具栏。 1.在网页中插入层，然后在其中插入gif动画图像。拖动页面中的层将其拖动到Timelines中的第一个通道，随之出现紫色条，并在两端有两个小圆圈，这两个小圆圈代表Timelines的两个关键帧。将红色的位置标记移动到需要添加关键帧的地方，按住Ctrl键，此时鼠标指针变成一个小白圆圈，将这个小白圆圈在位置标记处单击，即可添加一个关键帧。制作步骤 2. 添加Timelines（时间线）。拖动时间线动画条的最末帧标记，将Timeline增加到60帧。与动画播放速度有关。 3. 在Timelines时间线中创建动画的两个关键帧。 4. 设置动画的起、止位置。关键帧是指动画条中某个对象指定了位置的帧，关键帧在创建Timelines动画的过程中非常重要。 5. 增加动画帧数和添加关键帧。

6.设置动画路径为曲线。 制作步骤能飞的鸟选中所添加的某个关键帧，然后按住Ctrl键在页面中拖动层图像上或下移，即可见到路径变成曲线。 7. 添加鸟飞回的动画。在页面中再插入另—个层并插入一幅反向飞的鸟图像，并将该图层拖动到时间线的通道2上，方法同前制作相反方向动画。总结：如果页面有许多动作，可以创建—个Timelines时间线来控制所有的动作。但是这样做很不方便，实际上可以通过创建多个Timeline的方法来控制多个动作。使用这种方法可以将—些复杂的动作分解，这样控制起来就更加方便了。在这个案例中，我们通过两个Timline来控制鸟飞翔的动作。利用层，结合时间线和行为动作可以创建很多特别的效果。

《网页设计与制作 》