最新GIS精品课件网站设计开发课件-第13-14次课创建网页特效(2)

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

比较常用的type src属性，比如<script type=“text/JavaScript” src=“1.js”> 调用1.js文件
JavaScript 语言基础
创建网页特效
2、JavaScript变量的声明和赋值使用Var关键字，比如: 1）为 num1变量赋值为整数10 使用： Var num1=10； 2）为num2变量赋值为一个字符串，使用： Var num2=“欢迎光临我的网站”； 3）为num3变量赋值一个图片数组，使用：
3）将鼠标定位在层中，执行插入-表格命令，插入一个2 行1列，宽度为100%，边框粗细为1的表格
4）将鼠标定位在第1行，在属性面板设置背景颜色为黑色，输入文本“公告栏”，设置字体为黑体的，大小为 24，颜色为白色，居中对齐显示 5）将鼠标定位在第2行，在属性面板设置背景颜色为灰色#CCCCCC,垂直对齐方式为顶端，输入内容： “我校将于9月20日下午2：00举办秋季运动会，希望各位同学积极参与，谢谢！河南大学 2015.8.10”，设置字体大小为18px，行距为20，周围填充为10px
{ 循环语句；}
例11.6 在例11.5的基础上设置该公告栏在页面内自由移动
要求：公告栏在页面范围内移动，鼠标放上终止移动
创建网页特效
实现步骤：
创建网页特效
1、在文件面板站点上右单击，执行新建文件命令，命名为move.js
首先，将鼠标移至公告栏第1行1列，单击属性面板的拆分按钮或右单击该单元格，选择表格-拆分单元格，将单元格拆分为2列，在第2列插入一个关闭的图表（images/close）
创建网页特效
其次，选择该按钮，单击行为面板，添加行为按钮，选择显示-隐藏层命令，设置layer层隐藏，触发事件为 onClick
创建网页特效
弹出式菜单的设计
公告栏的设计
使用JavaScript脚本
创建网页特效
例11.4 制作如图所示的弹出式菜单
创建网页特效
说明：弹出式通常在网页中由鼠标指针来触发菜单效果，当鼠标指针移动至导航对象时，就会弹出菜单。当鼠标指针从导航对象移开时，弹出菜单自动消失。制作弹出式菜单可以通过显示弹出式菜单行为来制作
var num3=new Array（“pic1”, “pic2”, “pic3”, “pic4”, “pic5”, ）
JavaScript 语言基础
3、JavaScript语句 1）条件语句：
创建网页特效
if（表达式）语句1； else 语句2； 2）循环语句： for(初始化；条件；增量) 循环语句； While (表达式)
JavaScript 语言基础
创建网页特效
1、html中嵌入JavaScript 在<head>和</head>之间使用<script></script>标记 <script>标记包含如下四类属性 defer：告诉浏览器脚本是否有输出内容 language: 指定脚本使用的语言 src：使用外部JavaScript代码的URL地址 type：代替language，指明脚本使用的语言
创建网页特效
6）选中设计窗体左下角的body，选择整个body部分，单击行为面板的添加行为按钮，从弹出快捷菜单选择拖动层选项，打开拖动层对话框，如图所示，根据需要进行设置
注：放下目标：确定目的点的坐标；靠齐距离：输入一个值，当层与目的位置小于该值，就被认为已到目的地；
创建网页特效
7）为公告栏插入一个关闭图标，单击该图标，关闭整个公告栏：
第11-12讲创建网页特效（2）
河南大学环境与规划学院
2015年
创建网页特效
本次课在复习前几次课导航条特效的制作、视频的添加、网页表格的制作的基础上，学习创建网页的其他特效，比如创建弹出菜单、创建公告栏
注：课件下载地址：课程实例下载地址：邮箱包含网站设计与开发课程的所有的课件， Dreamweaver工具
创建网页特效
主要步骤：1）选择课程建设（已设置链接），单击“行为”面板上添加行为按钮，从弹出的快捷菜单选择“显示弹出式菜单”选项，打开“弹出式菜单”对话框
创建网页特效
2）单击添加项按钮为弹出菜单添加项目-课程描述，链接选择course1.html，目标为_self；目标指的是选择打开链接的方式，_blank: 在新窗口打开链接；_parent: 在父窗口打开链接；_self：在当前窗体打开链接，此为默认值；_top:在当前窗体打开链接，并替换当前整个窗体。
最后，保存网页，按F12运行，查看效果，按下关闭按钮，公告栏关闭。
创建网页特效
弹出式菜单的设计
公告栏的设计
使用JavaScript脚本
创建网页特效
使用JavaScript脚本可以制作动态的特殊的效果，实现丰富多彩的页面特效，能为网页增色
第四章我们学习了使用JavaScript语言基础，使用 JavaScript进行了：1）奇数、偶数的判断；2）将一个数字转化成字符串；3）使用循环进行了100以内的数字的和的求解等
例11.5 利用拖动层行为为index.html页面添加公告栏，公告栏显示信息“我校将于9月20日下午2：00举办秋季运动会，希望各位同学积极参与，谢谢！”，该公告栏可以随意在页面移动，如图
创建网页特效
主要步骤：
创建网页特效
1）打开需要添加的网页文件，index.html 2) 在“布局”插入工具栏中，单击绘制层按钮，在网页任意位置绘制一个层，如图所示
3）使用同样的添加菜单项-教学条件
Байду номын сангаас
创建网页特效
4）位置选项卡，设置相对于触发器的位置，其中包含4类位置，也可以自定义位置，在此X、Y坐标指的是以左上角为基准计算的坐标
5）
创建网页特效
弹出式菜单的设计
公告栏的设计
使用JavaScript脚本
创建网页特效
• 公告栏一般作为网页的附属页面，可以随意在网页中移动，可以通过行为面板的“拖动层”行为来实现该效果 • 拖动层行为允许浏览者访问网页时随意拖动层，使用该行为可以创建拼图游戏，滑块控件和其他可以移动的页面元素 • 拖动层行为的添加，执行添加行为-拖动层命令，打开拖动层对话框，进行相关的设置即可