1、第一部分：Dreamweaver基础,教学目标：1、了解dreamweaver软件css的一般用法；2、了解网页编辑的几种语言 。 重点难点： css排版 教学时数：2课时 教学方法与手段：讲授法与多媒体相结合,学好网页制作起码要先学会html超文本标记语言 再谈其他的，工具方面 应该掌握dreamweaver 8.0。 图像及动画方面 至少应该用photoshop cs3 flash 8.0 这三个做网页。 学会html之后再学css网页排版 再学javascript网页特效 都学会了再去学数据库 这是动态网页的基础 之后再去学asp php,CSS网页布局开发应该使用什么软件呢？这是一个非
2、常常见的问题。往往会令新学者感觉迷茫。 很多设计工作者是用DreamWeaver进行开发，DreamWeaver是三剑客之一，在传统的table布局中，可视化的环境让我们编辑网页非常轻松，各项功能面板进行设置即可达到想要的效果。虽然简化了操作，方便了我们的制作，但我们丢掉了很多东西，以至于有朋友从业几年了，却完全看不懂HTML代码，看不明白那些标签的真正含义是什么。,CSS网页布局是建立符合WEB标准的网页，表现、内容、行为分离。我们要简化我们的代码，让其效率更 高。而应用DreamWeaver往往会增加许多垃圾代码，而且不够简化。一句代码能够搞定的设置，DreamWeaver或许搞出四五句话
3、来帮你完成。更重要的是，如果项目是由一个多人团队协作完成，这样由 DreamWeaver所制作出来的代码，往往会让其他成员感觉很棘手，一堆代码，没有明确的界定与规律，无 从下手与识别。这与table布局时的代码大同小异。,有些朋友或许会说，我们可以使用DreamWeaver的代码提示功能，辅助编码。例如我们在代码中键入“F”往往DreamWeaver就会提示以“F”有关的一些样式，这对于英文基础薄弱的朋友来说是雪中送炭。这个功能我们可以使用，但请注意，不要产生依赖的心理。如果你到了一个新单位，或者加入一个新的项目团队，或者处理一些应急问题，脱离了DreamWeaver这个环境，你很快就愣了，完
4、全不知道如何进行样式的编写。而且这样长久下去，你对代码的含义理解也不够明确与清晰。,如果你想对CSS了如指掌，想对CSS网页布局的工作非常熟练。建议你扔掉一切辅助软件，用记事本进行开发。如果感觉很困难或者一些单词记不住。没有关系，放一个参考列表在手边，一行一句，一个词一 个字母的慢慢的进行编写。一两天以后，你感觉就适应了，一两个星期以后，你就完全熟练了。实践证明 这样的付出是值得的，你完全能理解代码是什么，为了少敲字母，你会尽量的想办法去精简你的代码，用 很少的代码实现同样的功能与样式设置。假以时日，你的代码就规范了，你就越接近高手的境地了。,当我们熟练了，我们为了提高工作效率，让开发的速度更
5、快，我们就可以使用相关的辅助软件了。例如最通用的DreamWeaver。或者其它开发工具Notepad+，TopStyle。 html是静态网页制作语言 css是网页布局用的 javascript是网页特效 比如弹出式菜单什么的，很多 而asp php 等语言是做动态网页的 比如论坛一类的网页,什么是html语言,在WWW上的一个超媒体文档称之为一个页面（page）。作为一个组织或个人在万维网上放置开始点的页面称为主页Homepage，或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。 Web
6、页面也就是通常所说的网页 。,HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。,HTML之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。所谓超级链接
7、，就是一种URL指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。 由此可见，网页的本质就是HTML，通过结合使用其他的Web技术（如：脚本语言、CGI、组件等），可以创造出功能强大的网页。因而，HTML是Web编程的基础，也就是说万维网是建立在超文本基础之上的。,什么是ASP 语言,ASP是Active Server Page的缩写，意为“动态服务器页面”。ASP是微软公司开发的代替CGI脚本程序的一种应用，它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具。ASP的网页文件的格式是。asp，现在常用于各种动态网站中。在其中，可以
8、混合使用HTML、脚本语言以及组件来创建服务器端功能强大的Internet应用程序。 如果你以前创建过一个站点，其中混合了HTML、脚本语言以及组件，你就可以在其中加入ASP程序代码。通过在HTML页面中加入脚本命令，你可以创建一个HTML用户界面，并且，还可以通过使用组件包含一些商业逻辑规则。组件可以被脚本程序调用，也可以由其他的组件调用。,的工作原理： 当在Web站点中融入ASP功能后，将发生以下事情： 1、用户调出站点内容，默认页面的扩展名是.asp。 2、浏览器从服务器上请求ASP文件。 3、服务器端脚本开始运行ASP。 4、ASP文件按照从上到下的顺序开始处理，执行脚本命令，执行HT
9、ML页面内容。 5、页面信息发送到浏览器。 因为脚本是在服务器端运行的，所以Web服务器完成所有处理后，将标准的HTML页面送往浏览器。这意味着，ASP只能在可以支持的服务器上运行。让脚本驻留在服务器端的另外一个益处是：用户不可能看到原始脚本程序的代码，用户看到的，仅仅是最终产生的HTML内容。,ASP网页特点,ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或Web应用程序。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。利用ASP可以向网页中添加交互式内容（如在线表单），也可以创建使用HTML网页作为用户界面的web应用程序。 与HTML相比，ASP网页具有
10、以下特点： （1）利用ASP可以实现突破静态网页的一些功能限制，实现动态网页技术； （2）ASP文件是包含在HTML代码所组成的文件中的，易于修改和测试； asp 网页界面(5张)（3）服务器上的ASP解释程序会在服务器端执行ASP程序，并将结果以HTML格式传送到客户端浏览器上，因此使用各种浏览器都可以正常浏览ASP所产生的网页；,（4）ASP提供了一些内置对象，使用这些对象可以使服务器端脚本功能更强。例如可以从web浏览器中获取用户通过HTML表单提交的信息，并在脚本中对这些信息进行处理，然后向web浏览器发送信息； （5）ASP可以使用服务器端ActiveX组件来执行各种各样的任务，例如
11、存取数据库、发送Email或访问文件系统等。 （6）由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器，因此使用者不会看到ASP所编写的原始程序代码，可防止ASP程序代码被窃取。 (7) 方便连接ACCESS与SQL数据库. (8)开发需要有丰富的经验,否则会留出漏洞,让骇客（cracker）利用进行注入攻击. ASP也不仅仅局限于与HTML结合制作WEB网站，而且还可以与XHTML和WML语言结合制作WAP手机网站。但是其原理也是一样的。,什么是php 语言,PHP，是英文超级文本预处理语言Hypertext Preprocessor的缩写。PHP 是一种 HTML 内嵌式的语
12、言，是一种在服务器端执行的嵌入HTML文档的脚本语言，语言的风格有类似于C语言，被广泛的运用。,PHP 独特的语法混合了 C、Java、Perl 以及 PHP 自创新的语法。 它可以比 CGI或者Perl更快速的执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。PHP具有非常强大的功能，所有的CGI的功能PHP都能实现，而且支持几乎所有流行的数据库以及操作系统。最重要的是PHP可以用C、C+进行程序的扩展。,上几节课我们学
13、习了数字办公技术中媒体宣传软件之一的网站制作的基础，当然，我们用的是Dreamwaver网站制作软件，我们现在已经初步学会了网站的设置及发布还有简单的制作程序，那么我们这一节课要学习制作的是以“我的网站”为站点名称的网站。,教学目标：1、掌握Dreamwaver框架、布局的制作方法； 2、掌握Dreamwaver子页的的制作方法； 重点难点：模板的制作 教学时数：4 教学方法与手段：讲授法与多媒体相结合,Dreamweaver实例-制作个人网站,在桌面上建一个以你的名字命名的文件夹。 打开Dreamweaver，选择“创建新项目”下方的“Dreamweaver站点”。 把“未命名站点1”改为你
14、的名字后点击下一步。 选择“否，我不想使用服务器技术”，点击下一步。 设置路径为桌面，点击下一步。 在“您如何链接远程服务器”中选择“无”，点击下一步。 选择“完成”。 在右下方“文件”面板中的以你的名字命名的网站文件夹下方点击右键，选择第一个“新建文件”。 把新建文件名字“untitled.html”中的“untitled”改为“index”（注意：要改点以前的，不要改.html）。 在点击右键，新建一个文件夹，取名为“images” 双击“index.html”文件，进入编辑状态。 点击“修改”菜单下的“页面属性”选项，在“外观”栏中点击“背景图像”右侧的“浏览”按钮，选择“bg.gif”
15、图片作为背景图片，在弹出的提示中点击“是”。 在弹出的界面中选择“images”文件夹（注：图片本身不在网站内，我们要所有把图片保存在此文件夹中，也就是说网站内的所用到的图片都要保存在里边）,再次点击“修改”菜单下的“页面属性”选项，把上下左右边距都设为0. 在页面中插入一个一行一列的表格，宽度为760像素，边框粗细、单元格边距和单元格间距都设为0。,鼠标在表格中点一下，在下方“属性”面板中将“背景颜色”设为深绿色（或者直接在后边白框中输入#1f3e00）。鼠标在表格中点一下，再插入一个2行1列的表格。 将鼠标光标定位在第一行中，单击“属性”面板中“拆分单元格”按钮， 将第一行拆分为两列。,将
16、鼠标光标定位在右侧单元格中，把其拆分为两行，在下方“属性”面板中将宽度改为480像素。将鼠标光标定位在右侧下方单元格中插入一个1行5列。 将鼠标光标定位表格下部空白处点一下，插入一个1行1列的表格，宽度为760像素。,将鼠标光标定位在左上角单元格内，插入图片“img-logo.jpg”，并保存在网站“images”文件夹内，在弹出的“图像标签辅助功能属性”面板中，在“替换文本”中输入“logo”，点击确定（这是让网站发布后浏览者知道这是什么图片）。 点击“logo”图片，在下方“属性”面板中将图像ID命名为“logo”,点击右上角单元格，插入图像“img-top1.jpg”，并在下方“属性”面
17、板中将图像ID命名为“top1”。 点击5列的第一个单元格，插入图像“img-n11.jpg”，并在下方“属性”面板中将图像ID命名为“n11”。 选中刚插入的“n11”图片，单击屏幕右侧“行为”面板上的 按钮在弹出的动作菜单中选择“交换图像”选项。,在图像栏中选择“图像n11”，单击“设定原始档为”右侧的“浏览”按钮。选择“img-n12.jpg”图片后点击确定，回到交换图像面板中再点击确定。 在剩余单元格中依次插入“img-n21.jpg” “img-n31.jpg” “img-n41.jpg” “img-n51.jpg”，并分别设置交换图像为“img-n22.jpg” “img-n32.
18、jpg” “img-n42.jpg” “img-n52.jpg”（注：还要把每个导航图片ID命名） 点击导航栏下的单元格，插入“img-top2.jpg”图片， ID命名top2。 点击最下边的单元格，插入“img-index.jpg”图片，ID命名index。 在最下方空白处点一下，然后插入一个1行1列，宽度为760像素的单元格。 输入以下文字“版权所有：XXX，电话：13839956609，地址：河南开封。”字体默认，字号为10，颜色为白色。,选择所有表格，将下方属性面板中“对齐”设为“居中对齐”。,点击“关于我”导航图片，在下方属性面板的“链接”栏中输入aboutme/aboutme.h
19、tml。（有三种超级链接方法） 点击“随手画”导航图片，在下方属性面板的“链接”栏中输入suishou/suishou.html。 点击“收藏品”导航图片，在下方属性面板的“链接”栏中输入shoucang/shoucang.html。 点击“留言板”导航图片，在下方属性面板的“链接”栏中输入liuyan/liuyan.asp。 点击页面正中间图片，在下方属性面板的“图像热点工具”，在“欢迎进入”字样上建立矩形图像热点。 选中该图像热点，在下方属性面板的“链接”栏中输入aboutme/aboutme.html。 保存，或按“Ctrl+S”。,制作超级链接,建立模板，节省时间,在DR中打开主页并删
20、除中间图片。 确定选中页面中间表格，执行“插入”-“模板对象”-“可编辑区域”命令。 在弹出的“新建可编辑区域”对话框中确定名称为“EditRegion1”,点击确定。 选择“文件”-“另存为模板”。,下面我们开始制作“关于我”的子页,打开-“另存为模板”，从“站点”下拉列表框中选择你的名字站点，在下方“另存为”框中输入“IndexTemp”，点击保存。 点击“文件”下拉菜单，选择“新建”，在“新建文档”对话框中点击右侧的模板，选择模板“IndexTemp”。点击“创建”。,点击可编辑区域“EditRegion1”中，插入一个1行2列宽度为760像素的表格，并设定左侧宽度为602像素，右侧宽度
21、为158像素。 在下方属性面板中，将背景颜色值设为“#5c6f35”。 点击左侧单元格，插入一个1行2列的表格，并设定左侧宽度为82像素，右侧宽度为520像素。 点击宽度为520像素的单元格，在下方属性面板中点击“拆分单元格”，将单元格拆分为3行，高度分别为35像素、300像素、55像素。 点击左侧单元格，插入“leftPic. gif”图片。 点击中间上边单元格，插入“topPic.gif”图片。,制作子页,点击中间单元格，插入一个1行1列居中对齐的表格，高为300像素，宽为520像素。 点击右侧单元格，插入一个6行1列的表格，将宽度设为100像素，高度分别为19、19、19、19、19、2
22、63。 点击插入6行中的第一行，插入“right_n1.jpg”。 在下面的单元格中依次插入“right_n2.jpg” 、“right_n3.jpg” 、“right_n4.jpg” 、“right_n5.jpg”、 “rightDraw.jpg”五张图片。 利用模板依次制作出“关于我”、 “我的照片”、 “我的日记” “我的历史” 、“练习我”二级子页。并赋予超级链接。 二级子页做完后，我们练习做一级子页中的“随手画”、“收藏品”和“联系我们”。,1、插入声音（插入文字或图片，链接音频） 2、嵌入声音（插入-媒体-插件，属性面板中可以改变高度和宽度） 3、插入视频(最好先转为SWF格式)A
23、插入文字或图片，链接视频B插入-媒体-插件,选择视频文件 4、插入动画A插入文字或图片，链接视频B插入-媒体-插件,选择视频文件 5、命名锚记（同一页或不同页插入锚记后迅速回到添加锚记的地方，属超链接的一种，先给锚记命名为XX，后边链接文字输入#XX） 6、以往网页嵌入当前网页中：插入-标签-HTML标签-iframe,点击浏览按钮，选择插入网页并设宽和高。,CSS样式,Filter: 滤镜名称（参数1，参数2）滤镜所适用的元素 BODY 网页主体元素BUTTON 设置窗口区域的按钮DIV 可在网页上用来定义区域范围IMG 通常用来将图片传入到网页中INPUT 输入窗体区域MARQUEE 移动
24、字模效果SPAN 可在网页上定义区域范围TABLE 建立表格TD 表格中的单元格TEXTAREA 文本框区域TFOOT 多行输入文本框区域TH 表格中的标题单元格THEAD 表格中的标题TR 表格中的行,CSS样式- 滤镜种类,视觉滤镜只可达到静态的特效效果。只需在网页内使用CSS的定义语法即可。 转换滤镜是用于两个画面进行转换是所使用的特效，将产生动态效果，除CSS外还需了解SCRIPT语言。 视觉滤镜视觉滤镜的种类： Alpha 透明的渐变效果Blur 快速移动的模糊效果Chroma 特定颜色的透明效果DropShadow 阴影效果FlipH 水平翻转效果FlipV 垂直翻转效果Glow
25、边缘光晕效果Gray 灰度效果Invert 将颜色的饱和度以及亮度值完全反转，建立底片效果Light 加入光源投射效果Mask 屏蔽效果Shadow 渐层阴影效果Wave 加入波浪变形效果Xray 加入轮廓效果,Alpha滤镜,Opacity 开始时的透明度。0（完全透明）100（完全不透明）finishOpacity 结束时的透明度。0（完全透明）100（完全不透明）style 渐变的形状。0：均匀；1：直线；2：圆形；3：矩形startX 渐变开始时的X坐标，度量单位为图片宽度的百分比startY 渐变开始时的Y坐标，度量单位为图片高度的百分比finishX 渐变结束时的X坐标，度量单位为
26、图片宽度的百分比finishY 渐变结束时的Y坐标，度量单位为图片高度的百分比Eg) style= “filter: Alpha(style=1)”style=“filter:Alpha(style=1,opacity=100,finishopacity=0,startX=0,startY=0,finishX=50, finishY=50)” Blur滤镜 add 是否要显示原来的对象 0（不显示）1（显示）。默认值为1direction 动态模糊效果的方向 总单位为360度，0代表垂直向上，并以每45度为一个单位，默认值为270度strength 动态模糊效果的大小，表示有多少象素的大小会被
27、影响 以整数来设置，默认值为5pxEg) style= “filter: blur(add=0,direction=90,strength=20)”/不显示原来的图片，且以90度的方向模糊20px,Alpha实例-设置图片透明度,Alpha 设置透明的渐变效果滤镜 1、点击图片，处于选中状态，选择“CSS样式”面板上的“新建CSS样式” 2、设置“选择器类型”为“类”，“选择器名称”输入image,选择“仅限于该文档”，点击确定。 3、在弹出的“image的CSS规则定义”面板中点击左侧“分类”中的“扩展”选项，选择“滤镜”中的Alpha 。 分别将其中的？号改为以下值： Opacity=10
28、0， finishOpacity=0， style=2 ， startX=0， startY=0， finishX=120， finishY=70. 最后在属性面板中的“类”下拉列表中选择“image”,预览查看效果。,blur（模糊）,模糊滤镜给予对象朦胧神秘的效果，它的表达式如下： filter：progid：DXImagetransform.microsoft.blur（makeshadow=makeshadow，pixelradius=pixelradius， shadowopacity=shadowopacity）； 其中makeshadow代表是否处理为阴影，pixelradius
29、表示模糊作用深度，shadowopacity表示阴影的透明度。,Blur（模糊）实例,新建一个网页，插入一个一行一列的表格，输入以下字符：2010级文秘班XXX，字体为黑体，字号为24，黑色。 1、点击表格，处于选中状态，选择“CSS样式”面板上的“新建CSS样式” 2、设置“选择器类型”为“类”，“选择器名称”输入text,选择“仅限于该文档”，点击确定。 3、在弹出的“text的CSS规则定义”面板中点击左侧“分类”中的“扩展”选项，选择“滤镜”中的Blur 。 分别将其中的？号改为以下值： Add=true， Direction=120， Strength=10 . 最后在属性面板中的“
30、类”下拉列表中选择“text”,预览查看效果。,Glow滤镜设置对象产生边缘光晕的模糊效果 Color 设置边缘光晕的颜色 以#rrggbb的格式，或名称strength 设置边缘光晕的强度大小 设置值为1255的整数Eg) style= “filter: glow(color=yellow,strength=10)”Gray滤镜 (gray 灰色)将对象中的颜色去除，以变成黑白的效果，gray滤镜并无参数Eg) Style= “filter: gray” Invert滤镜 （invert 使反转）将颜色的 度以及亮度值完全反转，类似于底片效果，invert滤镜并无参数。Eg) style=
31、“filter: invert” Light滤镜 Mask滤镜 (mask 掩饰，假面具)设置对象的屏蔽效果，就好象印章一样印出模型的模样。color 设置屏蔽的颜色 以#rrggbb为格式，或名称Eg) style= “filter: mask(color=#0000ff)” /将设置对象使用蓝色屏蔽效果,Glow实例-发光字,新建一个网页，插入一个一行一列的表格，输入以下字符：2010级文秘班XXX，字体为黑体，字号为24，黑色。 1、点击表格，处于选中状态，选择“CSS样式”面板上的“新建CSS样式” 2、设置“选择器类型”为“类”，“选择器名称”输入text,选择“仅限于该文档”，点击
32、确定。 3、在弹出的“text的CSS规则定义”面板中点击左侧“分类”中的“扩展”选项，选择“滤镜”中的Blur 。 分别将其中的？号改为以下值： Color =#99CCFF， Strength=15 . 最后在属性面板中的“类”下拉列表中选择“text”,预览查看效果。,Shadow滤镜除了具备DropShadow的阴影效果外，它还多了阴影渐变的特效。Color 设置阴影的颜色 以#rrggbb为格式，或名称direction 设置阴影的方向 总单位为360度，0代表垂直向上，并以每45度为一个单位，默认为225度 Wave滤镜设置对象产生垂直的波浪效果 Add 是否显示原来的对象 0（不
33、显示）1（显示）默认是0Freq 设置出现在对象上的波浪数目 以正数设置Strength 设置波浪的振幅大小 单位为像素，数值为正数Lightstrength 设置波浪上光的照射强度 0（弱）100（强）phase 设置正玄波起始波形位置 0100（相当将360度，划分为100份）Eg) style= “filter: wave(add=1,freq=3,strength=50,lightstrength=50,phase=100)” /设置显示对象，有3个振幅为50像素的波浪，其光的强度为50，波浪的起始位置为100 Xray滤镜让对象显示轮廓加亮，有点类似X光片的效果Eg) style=
34、“filter: xray”,DropShadow滤镜实例-投影字,新建一个网页，插入一个一行一列的表格，输入以下字符：2011级文秘班XXX，字体为黑体，字号为24，黑色。 1、点击表格，处于选中状态，选择“CSS样式”面板上的“新建CSS样式” 2、设置“选择器类型”为“类”，“选择器名称”输入text,选择“仅限于该文档”，点击确定。 3、在弹出的“text的CSS规则定义”面板中点击左侧“分类”中的“扩展”选项，选择“滤镜”中的DropShadow 。 分别将其中的？号改为以下值： Color =#CCCCCC， OffX=10, OffY=10 ,Positive=false. 最后
35、在属性面板中的“类”下拉列表中选择“text”,预览查看效果。,Chroma滤镜可以指定对象中的某个颜色为透明效果 color 指定对象中要变为透明的颜色 以#rrggbb的格式设置Eg) style= “filter: chroma(color=#ceff9c)”Dropshadow滤镜设置对象产生阴影效果 Color 设置阴影颜色 以#rrggbb的格式Offx 阴影相对于原始对象的水平位移量 设置值为整数，单位为像素。若水平往右移，则正数；反之为负数。Offy 阴影相对于原始对象的垂直位移量 设置值为整数，单位为像素。若垂直往下移，则正数；反之为负数。positive 设置阴影的透明度
36、0（透明）1（不透明）Eg) style= “filter: dropshadow(color=pink,offx=-5,offy=-5,positive=1)” FlipH, FlipV滤镜 (v: vertical垂直)Eg) Style= “filter: FlipH” /水平翻转Style= “filter: FlipV” /垂直翻转 Style= “filter: FlipH” /水平翻转,转换滤镜 转换滤镜的种类：融合转换滤镜(Blend Transition Filter)：此滤镜用于执行淡入或淡出揭示转换滤镜(Reveal Transition Filter)：以揭示的方式进行
37、转换 融合转换滤镜(Blend Transition Filter)Duration 滤镜转换的延迟时间 数字(秒为单位)Enabled 滤镜效果是否打开 0（打开）1（关闭 ）Percent 设置动态滤镜时，停止在进度的百分之几 整数Status 滤镜转换的状态 0（转换滤镜已停止）1（转换滤镜已经调用）2（转换滤镜正在执行）Eg) Style= “filter:blendTrans(duration=2)”/2是指延迟时间为2秒,JavaScript行为特效实例-关闭提示,打开主页，在右侧行为面板上点击“添加行为”按钮。 选择“调用JavaScript”命令，在“调用JavaScript”
38、命令面板输入框中输入window.close(),点击确定，保存后浏览效果。,JavaScript行为特效实例-改变导航浏览字体大小,打开阳光传媒网站主页，选择导航文字“团队精神”，点击“添加行为”按钮，选择“改变属性”命令。 在打开的“改变属性”对话框的“元素类型”中选择DIV，“元素ID”选择div“a1”,属性选择“fontSize”，值为15，点击确定。（注：如果版本代码已经封装在一个函数中，只需输入该函数的名称） 在行为下的详细列表中单击“oneClick”,在打开的菜单中选择“onMouseOver”选项，保存后浏览效果。,JavaScript行为特效实例-显示弹出信息,打开阳光传
39、媒网站主页，选择文字“下载”，点击“添加行为”按钮，选择“弹出信息”命令。 在“弹出信息”对话框中将 消息栏中输入“请先登录”字样，点击确定，保存后浏览效果。 。,JavaScript行为特效实例-更改指定内容,打开阳光传媒主页，点击 “添加行为”按钮，选择“设置文本”-“设置状态栏文本”命令。 在弹出面板的“消息”框中输入以下文字“本页面应用了设置状态栏文本行为”，点击确定。 在行为下方详细列表中点击“onMouseOver”下拉列表，选择“onLoad”,保存后浏览效果。,JavaScript行为特效实例-状态栏显示需要信息,CSS布局基础,今天我们开始学习css的一列布局，包含以下几种形
40、式： 一列固定宽度 一列固定宽度居中 一列自适应宽度 一列自适应宽度居中 一列二至多块布局,一列固定宽度 我们先看一下一列固定宽度，首先要新建一个以你名字命名的网站，新建一个主页： 接下来在页面中插入一个布局对象中的div标签，我们可以点击工具栏的“插入-布局对象-标签”按钮，在打开的对话框中ID项给这个div命一下名，我们给它起个名叫layout（名称根据自己需要命名）。,点击新建css样式按钮，在选择器类型中选择“高级” ，选择器中输入“#layout”（记住前边一定要加#）,起名字后保存CSS规则在网站内 在 “CSS规则定义”中的点击背景分类，把背景颜色改为#99FFcc,在 “CSS
41、规则定义”中的点击方框分类，把方框的高度和宽度分别改为300、400像素。,在 “CSS规则定义”中的点击边框分类，把边框的样式改为实线，宽度改为2，颜色改为#0099FF，选择全部相同。,预览效果如图,一列固定宽度并居中,一列固定宽度居中和一列固定宽度相比，我们要解决的问题就是居中。这里我们用到css的外边距属性：margin。我们只需在“方框”分类中的边界面板的“上”改为自动即可。,预览效果如图,多行多列 思考题：怎样用CSS样式布局下图,二列和三列布局,二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三列固定宽度居中,下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。首先创建html代码如下： 此处显示 id “side“ 的内容 此处显示 id “main“ 的内容,
