在dw做网页教程时 怎样把单选按钮的形状?比如把圆形按钮变为方形按钮?

DW在做网页的时候怎样才能更改鼠标的形状。把鼠标换成其它的图形。_百度知道
DW在做网页的时候怎样才能更改鼠标的形状。把鼠标换成其它的图形。
DW在做网页的时候怎样才能更改鼠标的形状。把鼠标换成其它的图形。 比如想把鼠标指针改成一个小鸟 点击时小鸟还能动一下
我有更好的答案
你可以使用 style 属性或是 CSS。 方法1:使用 style 属性 如果想让全文都是某个鼠标指针,则使用: &body style=&cursor:指针类型;&& &!-- 这里是网页内容 --& &/body& 如果是某个段落,则使用: &P style=&cursor:指针类型;&& 这里是段落内容 &/P& 如果是连接,则使用: &A href=&连接目标& style=&cursor:指针类型;&& 这里是连接内容 &/A& 方法2:使用 CSS 在&HEAD&&/HEAD&之间插入: &style& &!-- /* 以下部分供选用,不一定全要 */ body /* 应用于全文 */ { cursor:指针类型; } 其中,指针类型可以是下面的内容(不包括冒号后面的): auto:自动 col-resize:左右调整大小(列之间) crosshair:十字线 default:指针 hand:手形 help:上下文帮助 move:移动 wait:忙 text:水平文本
采纳率:73%
BODY {cursor:url('鼠标网址')} 去网上下载鼠标样式
为您推荐:
其他类似问题
做网页的相关知识
换一换
回答问题,赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。如何改变一个按扭的位置
[问题点数:20分,结帖人CSDN]
如何改变一个按扭的位置
[问题点数:20分,结帖人CSDN]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2007年7月 C/C++大版内专家分月排行榜第一2007年6月 C/C++大版内专家分月排行榜第一2007年5月 C/C++大版内专家分月排行榜第一2007年4月 C/C++大版内专家分月排行榜第一2007年3月 C/C++大版内专家分月排行榜第一2007年2月 C/C++大版内专家分月排行榜第一2007年1月 C/C++大版内专家分月排行榜第一2006年12月 C/C++大版内专家分月排行榜第一2006年11月 C/C++大版内专家分月排行榜第一2006年9月 C/C++大版内专家分月排行榜第一2006年8月 C/C++大版内专家分月排行榜第一2006年7月 C/C++大版内专家分月排行榜第一2006年6月 C/C++大版内专家分月排行榜第一2006年5月 C/C++大版内专家分月排行榜第一2006年4月 C/C++大版内专家分月排行榜第一2006年3月 C/C++大版内专家分月排行榜第一2005年8月 C/C++大版内专家分月排行榜第一
2007年8月 C/C++大版内专家分月排行榜第二2006年10月 C/C++大版内专家分月排行榜第二
匿名用户不能发表回复!|豆丁微信公众号
君,已阅读到文档的结尾了呢~~
扫扫二维码,随身浏览文档
手机或平板扫扫即可继续访问
网页制作的基本方法
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由:
将文档分享至:
分享完整地址
文档地址:
粘贴到BBS或博客
flash地址:
支持嵌入FLASH地址的网站使用
html代码:
&embed src='http://www.docin.com/DocinViewer-.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布,请您等待!
3秒自动关闭窗口当前位置: >>
dreamweaver8网页设计教程
《dreamweaver8 网页设计》课程 教目 录第二章案第一章 遨游 DREAMWEAVER8 精彩世界 ....................................................................................... 1 创建与规划站点 ..................................................................................................................... 3第三章 文本及其格式化 ..................................................................................................................... 12 第四章 表格 ......................................................................................................................................... 15 第五章 图像 ......................................................................................................................................... 19 第六章 框架 ......................................................................................................................................... 23 第七章 页面布局视图的使用 ............................................................................................................. 27 第八章 链接 ......................................................................................................................................... 30 第九章 层与时间轴 ............................................................................................................................. 34 第十章 表单 ......................................................................................................................................... 38 第十一章 行为 ..................................................................................................................................... 41 第十二章 制作动态页面 ..................................................................................................................... 44 第十三章 代码片断、库项目和模板 ................................................................................................. 48 第十四章 网页的制作 ......................................................................................................................... 51 第十五章 网站的测试与上传 ............................................................................................................. 55 第十六章使用 FIREWORKS 8 处理网页图像 .................................................................................. 58第一章 遨游 Dreamweaver8 精彩世界课题:Dreamweaver8 简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面 2、建立 html 文档 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:熟悉 Dreamweaver8 工作界面中各个工具的作用 难点:1、各个面板的调用1 2、建立一个 HTML 的网页 3、插处图像 五、教学目的 1 、对 Dreamweaver 这个制作网页的工具及网页有一定的认识,激发学生学习网页设计的兴趣 2、一定要学会建立一个空白网页 3、会对页面有一个简单的设置 六、教学过程 1、引入 (1)为什么要用 Dreamweaver 而不用 Frontpage?Dreamweaver 是 Macromedia 公司的出品,它以程序小、运行速度快、所制作网页代码少这些优点,赢得了网页制 作人员的喜爱。 (2)相关工具的介绍因为这是第一节网页制作课,所以首先要简单介绍下制作网页的一些相关工具,比如与 Dreamweaver 合称为网页三剑客的 Flash 和 Fireworks。 2、讲授新课(1) Dreamweaver 的界面 a.文档窗口:主菜单、工具栏、底部启动条、文档编辑区 b.对象面板:标准、表格、表单、框架、特殊、文件廷冖隐藏、字符 c.启动面板:站点管理、代码检查、HTML 样式、CSS 样式、行为、历史记录、资源管理 d.属性面板:随目前对象不同而内容不同(2)创建 HTML 网页 (3)在网页中插入图像 输入文字以后,插入图像,并对图像设置对齐的方式,使之与文字呈混排的状态。 3、巩固练习 练习使用界面中的各个工具 七、作业处理 根据本节所学的内容,课堂上练习创建一个空白网页,并且输入一段文字,在文本的左边插入一张图 片 八、教具 所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。2 第二章创建与规划站点课题:规划站点及创建静态站点一、教学基本内容1、站点规划概念 2、站点规划的方法 3、站点的组成 4、定义站点 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、站点组成 2、如何创建静态站点 难点:1、站点的定义 2、编辑、删除站点 五、教学目的3 1、掌握建立静态站点的流程 2、掌握静态站点的基本操作 六、教学过程 1、复习引入 由上节所学习的建立 HTML 网页引出站点概念 2、讲授新课 (1)站点规划概念及方法 概念:所谓本地站点,就是指定本地硬盘中存放远程站点所有文档的文件夹 方法:规划网站一般需要从 3 个方面去思考,即网站的主题、网站的内容和网站的对象。(2)创建本地站点 站点组成:Dreamweaver 8 站点由 3 部分组成,具体内容取决于环境和所开发的 Web 站点类型。 包括本地文件夹、远程文件夹、动态页文件夹 定义站点: (01)选择“站点”|“新建站点”选项,或者选择“站点”|“管理站点”选项,在 弹出的“站点管理”对话框中单击“新建”按钮,弹出对话框,在“基本”选项卡的站点名称输入框 中输入所要创建站点的名称,如图 2-5 所示4 (02)输入站点名称后,单击“下一步”按钮,在弹出的是否使用服务器技术对话框中,根据自 己所制作网页的类型,确定是否使用服务器技术。在此制作静态页面,因此不使用服务器技术,如图 2-6 所示。(03)单击“下一步”按钮,在弹出的设置站点文件夹对话框中,选择或输入一个本地文件夹作 为“本地站点文件夹”,如图 2-7 所示。5 (04)选择了本地站点文件夹后,单击该对话框中的“下一步”按钮,进入设置是否与远程服务 器相连的对话框,在这里选择“无”,设置为不与远程服务器相连,如图 2-9 所示。(05) 单击“下一步”按钮, 便会显示在站点定义向导中所选择设置的详细报告, 如果感觉满意, 单击“完成”按钮,完成本网站的创建,如图 2-10 所示;否则单击“上一步”按钮重新修改各项设 置。(3)站点的基本操作 其基本操作包括编辑、复制、删除站点。6 3、巩固练习 练习站点的建立,及其基本操作。 七、作业处理 在课堂上要求每一个同学在 F 盘下建立一个名为“我的站点”的文件夹,在 dreamweaver 中创建 一个静态站点,将站点信息存放到我的站点文件夹中。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。7 课题:搭建动态网站服务器及创建动态站点一、教学基本内容1、安装 IIS 2、动态站点与静态站点的区别 3、搭建动态站点 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:动态站点与静态站点的区别 难点:1、虚拟目录的概念 2、动态站点的定义 3、站点测试 五、教学目的 1、学会安装 IIS,知道 IIS 的作用 2、学会创建虚拟目录 3、会创建动态站点 六、教学过程 1、引入 先提出静态站点的作用及限制性,引入动态站点的功能 2、讲授新课 (1)安装并启动 IIS(现场操作) (2)定义一个动态站点 步骤:&01&设置虚拟目录。 (1)在本地磁盘“C:\”下新建一个 site 文件夹作为本地站点的根文件夹。 (2)设置 web 共享。找到“C:\site”文件夹,选中并右击该文件夹,从弹出的快捷菜单中选择“共享和 安全”选项。在打开的“site 属性”对话框中,选择“Web 共享”选项卡,如图 2-19 所示8 (3)设置“编辑别名”对话框。选中“共享文件夹”单选按钮,在弹出的“编辑别名”对话框中将“别名” 设置为 site;在“访问权限”中选择“读取”;在“应用程序权限”中选择“脚本”,如图 2-20 所示。最后单 击“确定”按钮关闭对话框,便完成了定义动态站点的准备工作。&02&进入“高级”选项卡。 (1)选择“站点”|“新建站点”选项,选择“站点定义”对话框中的“高级”选项卡。 (2)从“分类”列表框中选择“本地信息”(默认选项)选项,如图 2-21 所示。&03&设置“本地信息”的各参数(见图 2-229 &04&设置“测试服务器”的各参数(见图 2-23) 。&05&显示结果。 (3)测试站点 &01&将 ch02\ test.asp 文件复制到 C:\site 文件夹中,并使用 Dreamweaver 8 打开 test.asp。 &02&单击浏览器中“预览/调试” 按钮,或者按 F12 键在浏览器中运行 test.asp 页面。出现如图 2-25 所 示的成功页面。若浏览器提示找不到服务器,则需重新搭建 ASP 服务器。3、巩固练习10 练习站点的建立,及其基本操作。 七、作业处理 在课堂上要求每一个同学在 F 盘下建立一个名为”我的动态站点”的文件夹,将其设置为虚拟目 录,在 dreamweaver 中创建一个动态站点,将站点信息存放到我的动态站点文件夹中。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。11 第三章 文本及其格式化课题:输入文本及其格式化一、教学基本内容 1、输入普通文本 2、插入符号、日期 3、使用项目列表 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、插入符号、空格和日期 2、使用项目列表 难点:1、项目列表 五、教学目的 1、掌握文本输入方法 2、掌握日期的插入 3、掌握项目列表的使用 六、教学过程 1、引入 首先例用一个已完成的网页,让学生来看别人的设置,由此引入文本的格式化。 2、讲授新课 (1)文本的输入 两种方法:a:直接在文档窗口中输入文本。即先选择要插入文本的位置,然后直接输入文本。 b:在其他编辑器中复制已经生成的文本,然后切换到 Dreamweaver 8 文档窗口中,将选取 插入点,然后选择“编辑”|“粘贴”选项。 (2)创建项目列表 类型:无序列表、有序列表、定义列表、目录列表和菜单列表。 (3)插入日期 3、巩固练习12 练习各种项目列表的使用 七、作业处理 要求每一个同学建立一个名为“我的网页”的空白文档,在网页中输入文字,然后在右下角插入 日期,在内容当中便用有序列表。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。课题:CSS 样式一、教学基本内容 1 、演示并讲解 CSS 的应用13 2 、 CSS 的基本概念 3 、 CSS 的特点 4 、 CSS 样式定义 5 、 CSS 常用属性与值 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、掌握 CSS 样式定义 2、掌握 CSS 常用属性与值 难点:1、掌握 CSS 样式定义 2、CSS 常用属性与值 3、能独立完成 CSS 样式的应用 五、教学目的 1 、掌握 CSS 的基本概念 2 、掌握 CSS 样式定义 3 、掌握 CSS 常用属性与值 六、教学过程 向学生演示多个项目:成品站点,分阶段演示和分析此网页的设计流程和过程,在每个阶段演示完毕 后,让学生对此阶段进行巩固。讲解完毕后学生完成课后作业,教师实施指导。 第一步:演示并讲解用 CSS 样式制作的网页。 第二步:分步演示并讲解 CSS 样式的基本概念。 第三步:讲解并分析 CSS 常用属性与值。 第四步:结合 CSS 样式的使用制作网页 第四步:课程小结。 七、作业处理 课堂上进行计论: 第一步:演示并讲解用 CSS 样式制作的网页。 第二步:分步演示并讲解 CSS 样式的基本概念。 第三步:讲解并分析 CSS 的知识点。 第四步:结合 CSS 样式的使用制作网页 第四步:课程小结。14 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。第四章 表格课题:表格创建及设置一、教学基本内容 1 、创建表格 2 、 添加表格对象15 3 、自动套用表格格式 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、创建表格 2、自动套用表格格式 难点:套用表格格式 五、教学目的 1 、掌握创建表格的基本方法 2 、会使用自动套用表格格式 六、教学过程 1、引入 网页需要进行排版,由报纸的排版引入网页的排版,由此提出表格的作用 2、讲授新课 (1)创建表格 步骤:&01&将光标停放在页面需要创建表格的位置。 &02&如果未打开“插入”工具栏,可以在文档窗口单击按钮。如果在文档窗口中找不到该按钮, 可使用 Ctrl+F2 快捷键切换“插入”工具栏的显示或隐藏状态, &03&在“常用”标签中,单击“表格”按钮 &04&弹出“表格”对话框 输入要插入表格的行数,在此输入 2。 列数 输入要插入表格的列数,在此输入 3&05&单击“确定”按钮(2)套用表格格式 3、巩固练习 创建一个表格,练习格式的套用。 七、作业处理 在课堂上创建一个五行四列的表格,要求边框为 0,宽 150,高 254 的表格。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演16 示。课题:表格的应用一、教学基本内容 1、设置单元格 2、表格的基本操作 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:表格的编辑17 难点:排序表格 五、教学目的 1 、掌握表格的基本操作 2 、能够熟练设置单元格格式 六、教学过程 1、引入 (1)文字的定位:空格、回车 (2) 图片的定位:垂直边距、水平边距 2、 表格 插入表格:插入(Insert)表格(table) ,或者在对象面板 行数(row) 列数(column)边距(cell padding) :单元格中的内容与单元格边框之间的距离 间距(cell spacing) :单元格之间的距离 宽度(width) :可以是像素(pixel)或百分比为单位(percent) 边框(boder) : 属性面板:只有在选定整个表格时才出现表格属性 在表格中也可以通过右击,调出的快捷菜单中选择表格来对表格进行设置清除行高和列宽按钮 改变列宽单位按钮 背景颜色: 边框颜色:设置整个表格的格线颜色 背景图像: 3、 表格所对应的 HTML 代码 表格:[table][/table] 行:[tr][/tr] 列:[td][/td] 4、 表格的编辑 (1) 表格的嵌套 (2) 在网页中,要进行复杂的定位,一般需要用到嵌套表格。不过,一般不超过三层。 (2) 复制剪切粘贴 (3) 插入行、列,删除行列 (4) 合并单元格,拆分单元格18 (5) 改变行、列、表格的大小:拖放,属性面板精确定义 (6) 表格模板:命令(command)格式化表格(format table) 七、作业处理 根据课本上的实训作出一个精美课程表网页 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。第五章 图像课题:图像插入及属性设置一、教学基本内容 1、图像的类型 2、插入鼠标经过图像 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:插入图像 难点:图像属性 五、教学目的 1 、掌握图像的插入方法19 2 、掌握图像属性设置 六、教学过程 1、引入 网页的页面背景颜色和文本颜色在 HTML 代码中是如何表示的? RGB 方式表示颜色:红绿兰,0 表 示最弱,255 表示最强 一共可以表示:256w256w256= 种颜色 由于浏览器的关系,只有 216 种颜色能在浏览器中正常显示,多于这个范围的颜色,有的浏览器显示时就可能发生偏差,不能 正常显示。 这个范围我们称之为网页安全颜色范畴 网页中运用颜色原则 :切忌采用过;背景颜色不要太深;要保持整个网页的色调统一; 要围绕网页 主题选择颜色 2、讲授新课 (1)网页中的图像格式 *BMP:位图格式 GIF:Graphics Interchange Format 可交换的图像格式 特点:只支持 256 种颜色支持透明效果、可以交 错下载、可以实现动画效果、文件所占用空间小、不能支持渐变色彩、更改图片大小要从原文件改起 JPEG:Joint Photographic Experts Group 联合摄影专家组文件格式 特点:支持 24 位图像、有损压缩。 (2)插入图像 3、巩固练习 练习设置图像的属性。 七、作业处理 在表格中插入一张背景图像。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。20 课题:制作地图网页及电子相册一、教学基本内容 1、制作地图网页 2、电子相册 二、课型:实验课 三、课时:2 个课时 四、教学重点与难点 重点:制作地图网页 难点:热点选择 五、教学目的 1 、掌握图像使用 2 、掌握图像的其它操作 六、教学过程 此节是实验课,实验步骤为: (01)启动 Dreamweaver 8,打开 ch05\SAMPLE01\MAP.ASP 文件。 (02)选中该文档中“丝绸之路示意图”图像。 (03)在菜单栏中依次选择“窗口”|“属性”选项或按下 Ctrl+F3 组合键,打开“属性”面板,如果没有显21 示图像地图制作工具,单击“属性”面板右下角的扩展箭头, (04)在“属性”面板中的“地图”文本框中输入图像地图名称。 (05)创建图像地图(热区) ,可根据地图中不同的形状选择不同的热区工具,在所选定图像上拖动 鼠标指针,便可完成图像地图的创建。 (06)图像地图创建完成后,选中所创建的热区,打开“属性”面板。 在热点“属性”面板的“链接”文本框中输入链接文件的名称,或者单击文件夹图标并通过浏览选择在用 户单击该热点时要打开的文件。 在“目标”下拉列表中,选择用于打开该文件的窗口。 (07)在“地中海”创建一个矩形热区,在“替换”框中输入“关于地中海的论述”替代文本,并设置好链 接(链接到 DZH.ASP) 。 (08)按照相同的方法分别为不同的路线或地名创建热区,并输入不同的链接和替代文字, 保存并预览。当鼠标指针移到图像地图中时将显示“替换”框中的内容,如果设置有链接,单击便可进 入所链接的文档。 (9)完成创建。22 第六章 框架课题:框架集的创建及其基本操作一、教学基本内容 1 、演示并讲解用框架制作的网页 2 、框架的基本结构 3 、框架的各种属性 4 、框架结构之间的链接 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、框架的各种属性 2、框架结构之间的链接 难点:1、框架的各种属性 2、框架结构之间的链接 五、教学目的 1 、掌握框架的基本结构 2 、掌握框架的各种属性 3 、掌握框架结构之间的链接 六、教学过程 1、复习引入 回忆:Frontpage 中的框架应用 2、框架的应用 重复出现在不同网页文档中的元素:网页标题、导航栏等等 3、建立框架 (1) 将对象面板切换到框架页(Frame) (2)插入不同的框架,一个区域对应于一个页面 (3)在框架中打开原有网页:文件(File)à在框架中打开(Open in Frame) 4、保存框架23 (1) 选择文件(File)/保存所有框架(Save Frameset) ,先保存框架文件,接着会出现提示, 逐个保存框架中的网页 (2) 保存时注意名称 5、框架编辑 框架面板:窗口(Windows)à其它(Other)à框架(Frame)调出框架面板 选定框架组:单击整个框架组的边框;或在框架面板中单击整个框架的边框 框架属性:名称、源文件,滚动否,是否可以调整大小,是否有边框,边框颜色,边界宽度, 边界高度等 拆分框架:按 Alt 键,拖动边框;修改(Modify)à框架页(Frameset)à拆分左/右/上/下(split frame top/bottom/left/right) *注意区别:插入一个新的框架与拆分框架的区别 6、 框架所对应的 HTML 代码 框架组: 通过设置 rows 或 cols 来设定是横的还是竖的,是顶部还是底部 框架组属性:frameborder 框架是否有边框,border 边框的宽度多少,framespacing 框 架间距 框架项: 框架属性:src 指向的页面,name 框架名,scrolling 是否有滚动条,noresize 不 能由用户改变大小 七、作业处理 1、建立框架页面如图,菜单链接到不同的图片,单击菜单中的一项,图片在右边的框架中打开 2、 建立左右型的框架,并在其中的左框架中插入上下型的框架 3、建立左右型框架,并将左边的框 架拆分为上下型 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。24 课题:创建电子图书一、教学基本内容 利用框架制作电子图书网页 二、课型:实验课 三、课时:2 个课时 四、教学重点与难点 重点:框架结构之间的链接 难点: 框架集 五、教学目的 1 、掌握框架的运用 2 、掌握框架结构之间的链接 六、教学过程 步骤: (01)打开或新建一个空白的文档,在该文档中创建一个 框架集。 (02)命名框架。将左列框架命名为 index、右列上部框架命名为_top、右列下部框架命名为 main。 (03)保存框架。将框架集保存为 06A.asp 文档,index 框架保存为 06B.asp 文档,_top 框架保存为 06C.asp 文档,main 框架保存为 06D.asp,文档均保存在 ch06 文件夹下。 (04)设置框架的行或列。将 index 框架的列设置为 150 像素,_top 框架的行设置为 90 像素。 (05)设置页面的配色方案。单击“属性”面板中的“页面属性”按钮,将 index 框架的 06B.asp 文档的 文本颜色设置为#669966,背景颜色设置为#FFCC99。 (06)将链接颜色按图 6-14 右侧图进行设置,然后单击“确定”按钮。 (07)定义样式。选择“文本”|“CSS 样式”|“新建”选项,将 index 框架的 06B.asp 文档的 tr 标签定义为 宋体 9points。 (08) 填充页面。 index 框架 06B.asp 文档中输入如图 6-15 所示的文本并插入一个 9 行 1 列的表格。 在其中“休闲娱乐”文本为隶书 5 号字体,颜色为#66CC00;表格边框的颜色为白色;单元格的高度为 30 像素,单元格的对齐方式为水平居中、垂直居中。 (09)在“页面属性”对话框中将_top 框架的标题设置为“标题栏”,将所有边界都设置为 0 (10)将光标停留在_top 框架中,输入文本并插入 images 文件夹下的图像,其中文本为 4 号宋体, 颜色为#66CC00。 (11)设置链接。选中左边框架(index)中目录下的“考试作弊”文本,在“属性”面板中的“链接”框中25 设置与之对应的笑话内容(WJ/wj6-1.asp)的链接。这时“目标”框变为激活状态,从“目标”下拉列表 框中选择链接的目标为 main。 (12)使用相同的方法设置其他“笑话”目录所链接的内容和链接目标,其他的链接目标均为 main 框 架。笑话目录各项和 WJ 文件夹中 wj6-1.asp~wj6-8.asp 是一一对应的关系。 (13)指定框架源文件。选中 main 框架,在“属性”面板中的“源文件”文本框中设置框架的源文件。 单击旁边的文件夹,选择 WJ 文件夹中 wj6-1.asp 文件 (14)在文档窗口的菜单栏中选择“文件”|“保存全部”选项,将所有的框架进行保存。 (15)按 F12 键便可预览该实例26 第七章 页面布局视图的使用课题:布局表格和布局单元格的基本知识及操作一、教学基本内容 1、布局表格和布局单元格的基本知识 2、布局表格和布局单元格的创建 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:创建布局表格和布局单元格 难点:布局表格的使用 五、教学目的 1 、掌握布局的基本知识 2 、熟练运用布局表格和布局单元格 六、教学过程 1、引入 在第四章学习过了表格的布局,用表格与布局表格相比,看其特点,从而使学生更加了解什么是布局 表格和布局单元格。 2、讲授新课 (1)布局表格的基本知识 (2)布局表格和布局单元格的基本操作 选择布局表格: 须要执行下列操作之一: a:双击所绘制的布局表格中的 标志。b:单击文档窗口左下角的&table&标签,如图 7-3 所示。 调整布局单元格的大小: 具体操作步骤如下: (01)选中要调整的布局单元格。 (02)选择布局单元格边线上的调整手柄,拖动鼠标便可调整布局单元格的大小27 移动布局表格和布局单元格: (01)选中要移动的布局表格或布局单元格。 (02)使用方向键便可移动布局表格或布局单元格了,但这样每次只能移动 1 像素的距离;如果是在 按下 Shift 键的同时再利用方向键移动,每次可移动 10 像素的距离。 设置布局宽度为固定宽度: 具体操作步骤如下: (01)选择要设置固定宽度的布局表格。 (02)在菜单栏中选择“窗口”|“属性”选项,打开“属性”面板。 (03)在“属性”面板中选择“固定”单项按钮,并在后面的文本框中输入一个数值,在此输入 640,其 单位在默认的条件下是像素。 七、作业处理 进入布局模式,练习布局与布局单元格 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。28 课题:制作完整页面一、教学基本内容 利用布局制作完整页面 二、课型:实验课 三、课时:2 个课时 四、教学重点与难点 重点:布局表格的创建 难点:布局单元格的使用 五、教学目的 1 、掌握布局表格的运用 2 、掌握布局单元格的作用 六、教学过程 步骤: (01)选中在布局表格中所绘制的布局单元格,在“属性”面板中将该布局单元格的宽度也设 置为 775 像素,高度为 68 像素。 (02)将光标停留在布局单元格内,选择菜单栏中的“插入”|“图像”选项,在弹出的“选择图像 源文件”对话框中,选择存放在 ch07\IMAGES 文件夹下的 BANER.JPG 图像 (03)选择图像文件后,单击“确定”按钮,便可在布局单元格内插入该图像文件 (04)单击“绘制布局单元格”按钮 ,在已经插入图像的布局表格下面绘制 3 个布局单元格(05) 分别选中所绘制的布局单元格, 并打开“属性”面板, 将布局单元格的宽度和高度分别设置为: (156、40)(338、40)(199、40) 、 、 。 (06)在所绘制布局单元格 1 和 2 内分别输入文本“生活空间”和“音乐天地”,并在布局单元格 3 内插入存放在 ch07\IMAGES 文件夹下的 01.GIF 图像 (07)在其下绘制 2 个布局单元格,分别选中并同时打开“属性”面板,将单元格的宽度和高度分别 设置为: (148、326)(516、326) 、 ,如 (08)在图 7-17 所示布局单元格(1)中绘制 4 个宽度为 136 像素,高度为 34 像素的布局单元格, 并在其单元格内分别输入文本, (09)填充布局单元格内容。完成所对应的布局单元格文本的输入 (10)最后将“布局模式”转化为“标准模式”。在“标准模式”中根据自己的审美观进行调整,可 为布局单元格的边框进行修饰29 第八章 链接课题:链接与路径介绍一、教学基本内容 1、链接的基本知识 2、路径的基本知识 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:链接与路径的概念 难点:路径的理解 五、教学目的 1 、掌握路径的类型 2 、能够正确运用路径 六、教学过程 1、引入 在打开一个文件或插入一张图片的时候都会用到路径,由此来引入究竟什么是路径。 2、讲授新课 (1)URL 简介 URL(Uniform Resource Locator,统一资源定位符)主要用于指定欲取得因特网上资源的位置与方 式。一个 URL 的构成如下: [资源取得方式]://[URL 地址][port]/[目录]/?/[文件名称] (2)路径类型 要正确创建链接,必须了解链接与被链接文档之间的路径。每个网页都有一个唯一的地址,即 URL。 常用的文档路径类型有 3 种: 绝对路径 :绝对路径就是被链接文档的完整 URL,包括所使用的传输协议(对于网页通常是 http://) 。 文档相对路径 : 文档相对路径指以原来文档所在位置为起点到被链接文档所经过的路径。这是用 于本地链接最适宜的路径。30 根相对路径:根相对路径是指从站点根文件夹到被链接文档所经过的路径。一个根相对路径以正 斜杠开头,其代表站点根文件夹。 给出例子以区分这三种类型: 例:a: c:/website/img/photo.jpg(这是 photo.jpg 的绝对路径) b: c:/website/web/index.htm c:/website/img/photo.jpg(指出 photo.jpg 的相对路径)七、作业处理 通过在地址栏中输入一个文件的地址来练习路径的使用。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。31 课题:创建链接一、教学基本内容 1、创建锚记链接 2、创建空链接 3、创建下载链接 二、课型:讲授+实验 三、课时:2 个课时 四、教学重点与难点 重点:下载链接 难点:锚记链接 五、教学目的 1 、掌握链接创建的不同方法 2 、掌握锚记链接的创建 六、教学过程 1、创建链接 方法: (01)选择窗口中要链接的文本或图像。选择“窗口”|“属性”选项,打开“属性”面板,并 执行以下操作之一 a:单击“链接”框右边的“浏览文件”图标 ,如图 8-1 所示,在弹出的“选择文件”对话框中浏览并选择一个文件。注意,在“选择文件”对话框中的“相对于”下拉列表中,通常选择“文 档”而不选择“站点根目录”。单击“选择文件”对话框中的“确定”按钮,在“链接”框中将 显示出被链接文件的路径。 b:在“属性”面板的“链接”框中,输入要链接的文档的路径,如图 8-2 所示。 (02)选择被链接文档的载入位置。在默认情况下,被链接文档在当前窗口或框架中打开。要使 被链接的文档显示在其他地方,需要从“属性”面板的“目标”下拉列表中选择一个选项。2、创建锚记链接 锚记链接(简称锚记)就是在文档中插入一个位置标记,并给该位置设置一个名称。 步骤: (01)打开 ch08\LIANJIE.ASP 文件,把光标置于文档中“比输赢”文本的右边(文档中需要设 置锚记的地方) 。 (02)在文档窗口的菜单栏中依次选择“插入”|“命名锚记”选项32 (03)在“命名锚记”对话框的“锚记名称”文本框中输入锚记名:mj1(注意,所命名锚记是区分 大小写的) 。 (04)如果锚记标记没有出现在插入点,选择“查看”|“可视化助理”|“不可见元素”选项,在所 选择插入“锚记”的位置便会出现锚记标志,如图 8-16 所示。 (05)同样的方法,分别在笑话栏下的“先生尿裤”、“大街上叫喊的人”文本的右边插入锚记,并 且分别命名为 mj2、mj3。 (06)在菜单栏中选择“窗口”|“属性”选项,打开“属性”面板。 (07) 选中窗口左边“笑话集锦”下的“比输赢”文本, 在“属性”面板中的“链接”框中输入#mj1。 (08)同样的方法,分别创建“笑话集锦”栏下的“先生尿裤”、“大街上叫喊的人”文本与#mj2、 #mj3 的锚记链接。 (09)保存操作结果。 七、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。33 第九章 层与时间轴课题:层的创建与设置一、教学基本内容 1、层的创建 2、层的基本操作 3、层的属性 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:层的属性 难点:z-index、子层 五、教学目的 掌握层的相关操作,为动画设置打基础 六、教学过程 1、 复习引入 网页中的定位--表格 2、建立层 (1)菜单,插入(Insert)层(Layer) ,默认大小:200w115 (2) 对象面板 3、层的意义 (1)可以将元素重叠 (2)可以用于精确定位网页元素 (3)可以通过应用时间线使层移动和变换,实现简单的动画效果 (4)网页和网页元素的可见或不可见可以通过层的显示和隐藏属性实现 (5) 层可以转换成表格 4、层属性 (1)层编号(LayerID) (2)Z 轴(Z-index) :控制层重叠时谁在前谁在后的问题 (3)背景图像(Bgimage)34 (4) 显示 (Vis) 默认 : (default)(继承) 、 inherit、 (可见) visible、隐藏(hidden) 四个选项之一 (5)标签(Tag) :DIV、SPAN、LAYER、ILAYER,选 DIV (6)溢出(Overflow) :当层内容超过层大小的时候如何显示。显示层内的全部内容 (visible) 只显示层尺寸以内的内容 、 (hidden) 不改变层大小、 、 只添加滚动条 (scroll) 、 只有层不够大时才显示滚动条(auto) (7) 剪裁(Clip) :指定层的哪一部分是可见的,输入的数值是距离层的 4 个边界的距 离 6、 子层 (1) 在一个层中再插入一个层,后者就是前者的子层 (2) 子层不一定在父层里面 (3) 移动子层,父层位置不发生变化 (4) 移动父层,子层跟着变化,对父层的相对位置不变 (5)子层可以继承父层的可见性 7、层与表格的转换 (1)层转换为表格:修改---转换层到表格 (2)表格转换为层:修改----转换表格到层 七、作业处理 1、制作阴影字 2、用层将 5 个图片放置围绕一个图片 3、将上题结果转换为表格 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。35 课题:时间轴与其相关操作一、教学基本内容 1、时间轴的概念 2、制作层的时间轴动画 3、给时间轴附加动作 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:制作层的时间轴动画 难点:1、录制层的时间轴运动路径 2、添加附加动作 五、教学目的 掌握简单的动画设置 六、教学过程 创建时间轴动画 步骤: (01)在页面添加层,并在层中插入元素(如一幅图片或一些文字) ,把层移到动画的起始位置。 (02)选择“窗口”|“时间轴”选项,打开“时间轴”面板。 (03)选择要制作动画的层。单击层标记或层边界,或用“层”面板选择层(注意:在层内部单击, 可以把插入点置于层内,但并不选中该层。当一个层被选中时,层边界会显示出可调整大小的手柄) 。 (04)直接把选定的对象拖入“时间轴”面板中;或者单击“时间轴”面板中的 按钮,选择“添加 对象”选项。 (05)此时时间轴的第一个通道中将出现一个紫色条,即动画条,条中显示了层的名称 Layer1,动 画条两端的两个圆圈,即为时间轴的关键帧。 (06)单击第 1 个关键帧,将红色的播放头移到第 1 个关键帧,拖动被选中的层到某一个位置,即确 定动画运动的起始位置。 (07)单击动画条最后的关键帧标记(注意播放头也跟着移到该处) ,再把页面上的该层拖到动画结 束处。 之后,从动画起始位置到结束位置会显示一条线,这就是层的运动轨迹。如果没有显示一条线,说明 做法不对,需要重新开始。 (08)如果使动画层作曲线移动,选择动画条,按住 Ctrl 键单击,在插入点位置添加一个关键帧; 或在动画条中间单击一帧,并从右键快捷菜单中选择“增加关键帧”选项。36 (09)移动层,使运动轨迹呈曲线状。 (10)单击“播放”按钮,预览页面上的动画 七、作业处理 根据书上的实例,创建一个网站广告。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。37 第十章 表单课题:表单创建、对象及其属性一、教学基本内容 1 、表单概念 2 、表单创建 3 、表单属性 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、创建表单 2、掌握表单的应用 难点:1 、掌握表单元素的各项属性 2 、能独立制作完成常见的各种表单页面 五、教学目的 掌握表单创建方法 六、教学过程 向学生演示多个项目:成品站点,分阶段演示和分析此网页的设计流程和过程,在每个阶段演示完毕 后,让学生对此阶段进行巩固。讲解完毕后学生完成课后作业,教师实施指导。 第一步:演示并讲解注册网页。 第二步:分步演示并讲解、制作表单元素。 第三步:分析并制作网页。 第四步:课程小结。 七、作业处理 第一步:演示并分析网页中的相关效果。 第二步:分步讲解并完成网页中效果的实现。 第三步:分组讨论并修改网页 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。38 39 课题:制作调查表单一、教学基本内容 1 、表单概念 2 、表单创建 3 、表单属性 二、课型:实验课 三、课时:2 个课时 四、教学重点与难点 重点:1、创建表单 2、掌握表单的应用 难点:1 、掌握表单元素的各项属性 2 、能独立制作完成常见的各种表单页面 五、教学目的 能够熟练的运用表单中的各个属性,会制作表单。 六、教学过程 调查表单制作过程: (01)用 Dreamweaver 8 打开 ch10\SAMPLE02\FORM2.ASP 文件。 (02)打开“插入”工具栏,在“表单”标签下单击“表单”按钮 ,在页面中创建一个表单。 03)在所插入的表单中插入一个 6 行 4 列、宽度为 600 的表格,其中表格的边框粗线为 1。 (04)根据需要对表格进行编辑,并在表格内输入所要调查的项目。 (05)在表格内插入对应的表单对象,设置各表单对象属性(名称不做要求)。 , (06)完成该网上调查表单的制作,保存文档 七、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。学生利用计算机进行实验操作。40 第十一章 行为课题:行为面板用法及基本操作一、教学基本内容 1 、行为的基本知识 2 、事件的基本知识 3 、行为动作 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、行为面板的用法 2、行为动作 难点:行为的动作 五、教学目的 掌握行为面板的用法,并且会添加行为。 六、教学过程 1、行为的概念 行为是事件和动作的组合。动作是预先编写好的 JavaScript 脚本,可用来执行指定任务。事件则是 由浏览器为每个页面元素定义的,是访问者对网页的基本操作 2、行为面板的用法 (01)选择“窗口”|“行为”选项或按 Shift+F4 组合键打开“行为”面板, (02)单击“行为”面板中的 按钮,则可在出现的菜单中选择所需要的动作。(03)选中“行为”面板中某一事件,单击 按钮便可从事件列表中删除所选择的事件。 3、行为的基本操作 (1)添加行为 (2)修改行为 4、行为动作 在这里行为包含了二十多种动作,不再一一叙述。 5、巩固练习 对各种行为动作进行练习,看其效果。41 七、作业处理 在网页中添加一些内容,然后添加一些行为。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演 示。学生利用计算机进行实验操作。42 课题:行为动作及事件设置 一、教学基本内容 1 、事件的基本知识 2 、行为事件的设置 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、行为面板的用法 2、事件的种类 难点:对事件的理解及掌握 五、教学目的 掌握各个事件的作用。 六、教学过程 检查表单步骤: (01)用 Dreamweaver 8 打开光盘中的 ch11\SAMPLE02\FORM.ASP 文件。 (02)在文档的标签栏中选中&form&标签。选择“窗口”|“行为”选项,打开“行为”面板。 (03)在打开的“行为”面板中单击 按钮,在弹出的行为菜单中选择“检查表单”选项。 (04)在“检查表单”对话框中,从“命名的栏位”中选择要验证的表单对象文本域的名称,“值” 是用来确定某个文本域是否可以空缺, “可接受”栏中用来设置文本域所要输入的文本类型以及对文 本的限制,将 E-MAIL 文本域设置为必填内容、电子邮件地址。最后单击“确定”按钮返回。 (05)更改行为的触发事件。选择“行为”面板中的 按钮,在弹出的菜单中,将行为事件设置为 onSubmit,即触发点为提交表单时触发,然后关闭“行为”面板。 (06)保存文档,按 F12 键测试效果。 5、巩固练习 对各种事件进行练习,看其效果。 七、作业处理 制作一个弹出式菜单。 八、教具 所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。43 第十二章 制作动态页面课题:构建动态页面、数据库链接一、教学基本内容 1、建立 ACCESS 数据库 2、创建 DSN 3、定义数据库连接 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、ACCESS 数据库 2、创建 DSN 难点:定义数据库连接 五、教学目的 能够掌握配置数据源的方法,正确连接数据库。 六、教学过程 设定 DSN 的方法: (01)启动控制面板,双击“管理工具”下的“数据源(ODBC)”图标。 (02)在弹出的“ODBC 数据源管理器”对话框中,选择“系统 DSN”选项卡,单击“添加”按钮。 (03)在弹出的“创建新数据源”对话框中,选择数据库的驱动程序为 Microsoft Access Driver (*.mdb) ,单击“完成”按钮。 (04)在弹出的“ODBC Microsoft Access 安装”对话框中,“数据源名”文本框中输入 dwmx,单击 “数据库”栏中的“选择”按钮,选择网站根目录中的 DWMX.MDB。单击“确定”按钮。 (05)这时会发现系统数据源名称中已经多了一个 dwmx,这就是接下来要使用的数据库。 (06)单击“确定”按钮,完成对 DSN 数据源的创建。 定义数据库连接的方法: (01)在 Dreamweaver 8 面板组中,打开“应用程序”面板组。选择“数据库”面板, (02)在“数据库”面板中单击 据源名称(DSN)”对话框。44按钮,在弹出的快捷菜单中选择“数据源名称”选项,弹出“数 (03)在“连接名称”文本框中输入 dsdwx。 (04)单击对话框中的“测试”按钮来测试是否可以跟数据库正确连接。 (05)单击“确定”按钮,再单击“数据源名称(DSN)”对话框中的“确定”按钮,便完成数据库 连接的设定。 七、作业处理 随堂练习数据源的连接。 八、教具 所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。45 课程:注册、登录页面、服务器端验证 一、教学基本内容 1、客户注册页的基本知识 2、客户登录页的基本知识 3、登录验证 二、课型:实验课 三、课时:2 个课时 四、教学重点与难点 重点:1、记录的插入 2、用户身份验证 难点:记录集 五、教学目的 掌握插入记录的方法,能够正确运用记录集。 六、教学过程 注册页面的创建步骤: (01)启动 Dreamweaver 8,打开 ch12\Register.asp 文件 (02)检查注册表单。选择新客户注册页面中的注册表单。按 Shift+F4 组合键打开“行为”面板, 在“行为”面板中单击 按钮,从弹出的菜单中选择“检查表单”选项,弹出“检查表单”对话框。 (03)单击“确定”按钮,完成检查表单设置,并将该行为的事件设置为 onSubmit。 (04)插入客户注册信息到数据库表中。 (05)使用“检查新用户名”服务器行为,防止客户注册的用户名重复。在“服务器行为”面板中单 击 按钮, 从弹出的快捷菜单中依次选择“用户身份验证”|“检查新用户名”选项,在弹出的“检查新用户名”对话框中做如书上的设置。 (06)单击“确定”按钮返回。 (07)对完成的注册页面进行保存,便完成了注册页面的制作。 登录页面的建立: (01)打开 ch12\LOGIN.ASP 文件。 (02)选择“窗口”|“行为”选项,打开“行为”面板。 (03)选中需要验证表单的&form&标签,再单击“行为”面板上的“添加”按钮 ,从弹出的菜单中 选择“检查表单”选项。 (04) 在“检查表单”对话框中, 把“命名的栏位”列表框中与登录相关的两项设置为必需的就可以46 了。 (05)单击“确定”按钮返回。在“行为”面板中将触发事件设置为 onSubmit。 (06)这样便完成了在客户端验证的行为设置。保存文件之后,按 F12 键进行浏览。如果用户所输入 的“登录信息”不完整或不正确,系统将出现提示对话框,提示用户输入完整的登录信息。 七、作业处理 依据书上的案例,做出一个留言页面,要求能够显示和删除留言。 八、教具 所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。47 第十三章 代码片断、库项目和模板课题:代码片断创建与使用一、教学基本内容 1、代码片断的概念及意义 2、代码片断的创建与使用 3、库项目的创建与使用 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、代码片断的创建 2、库项目的创建 难点:代码的编写 五、教学目的 掌握代码片断的使用方法,熟练运用库项目。 六、教学过程 1、代码片断 使用代码片断,可使所存储的内容快速地被重复使用。可以创建和插入 HTML、JavaScript、CFML、 ASP、JSP 等代码片断。Dreamweaver 8 本身还包含一些预定义的代码片断,也可以使用这些预定义的 代码片断作为起始点,通过对这些代码片断进行再编辑或修改以满足自己页面的需要。 2、代码片断的创建 新建代码片断文件夹,具体操作步骤如下: (01)启动 Dreamweaver 8,在菜单栏中选择“窗口”|“代码片断”选项,打开“代码片断”面板。 (02)在空白位置单击一下来选择存放新文件夹的位置,否则新文件夹将成为子文件夹。 (03)单击“代码片断”面板右上角的 按钮,从弹出的快捷菜单中选择“新建文件夹”选项。(04) 为新建的“未命名”的代码片断文件夹命名即可,如输入“我的代码片断”作为该文件夹的名 称。 新建代码片断: 利用输入代码创建代码片断,具体操作步骤如下:48 (01)启动 Dreamweaver 8,在菜单栏中选择“窗口”|“代码片断”选项,打开“代码片断”面板。 (02)右击“我的代码片断”文件夹,从弹出的菜单中选择“创建新代码片断”选项。 (03)弹出“代码片断”对话框。 (04)根据步骤 3 中论述,完成的设置。 (05)单击“确定”按钮,便可完成该代码片断的创建,并在“我的代码片断”文件夹中显示出来。 七、作业处理 做一个显示当前日期的代码片断,使之插入到页面的合适位置。 八、教具 所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。49 课题:模板使用一、教学基本内容 1、模板的创建与使用 2、利用模板更新页面 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:模板的创建与使用 难点:使用模板更新页面 五、教学目的 掌握模板的使用方法,伟用模板更新页面。 六、教学过程 1、模板特点 使用模板创建文档可以使网站和网页具有统一的结构和外观,如果有多个网页想要用同一风格来制 作,用模板绝对是最有效,并且也是最快的方法。模板实质上就是作为创建其他文档的基础文档。在 创建模板时,可以说明哪些网页元素应该长期保留,不可编辑,哪些网页元素可以编辑修改。 2、在模板中定义新的可编辑区域 定义新的可编辑区域的具体步骤如下: (01)打开模板文件,在文档中选择要定义为可编辑区域的文本(或其他内容) ,这里选择页眉区的 标题文本。 (02) 右击从弹出菜单中选择“模板”|“新建可编辑区域”选项,弹出“新建可编辑区域”对话框。 (03)在“新建可编辑区域”对话框中,为可编辑区域输入名称。命名一个可编辑区域时不能使用单 引号(') 、双引号(&) 、尖括号(&&)和&。 (04)在模板中,可编辑区域被突出显示,并显示出可编辑区域的名称。 七、作业处理 针对书上案例实训 2 做模板的演练 八、教具 所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。50 第十四章 网页的制作课题:个人主页制作流程一、教学基本内容 1 、建站流程 2 、在网页中设置各种元素 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1 、建站流程 2 、网站的定位 3 、熟练掌握在网页中添加文字等元素 难点:1 、网站的定位 2 、网页风格的设计 五、教学目的 1 、熟练掌握建站流程 2 、掌握网站的定位 3 、掌握网站风格的设计 4 、熟练掌握在网页中添加各元素 六、教学过程 向学生演示多个项目:成品站点,分阶段演示和分析此网页的设计流程和过程,在每个阶段演示完毕 后,让学生对此阶段进行巩固。讲解完毕后学生完成课后作业,教师实施指导。 第一步:讲解建站的流程。 第二步:讲解市场调查与分析。 第三步:讲解建站内容。 第四步:讲解功能框架。 第五步:讲解界面设计。 第六步:演示站点框图。 第七步:演示网站截图。51 第八步:讲解并演示在网页中添加元素。 七、作业处理 根据以上各章所讲的内容,设计一个个人主页。 八、教具 所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。52 课题:网页特效 一、教学基本内容 1、墨林老人代码 2、飘动图层代码 二、课型:实验课 三、课时:2 个课时 四、教学重点与难点 重点:特效的使用 难点:代码的理解 五、教学目的 掌握网页特效的添加方法。 六、教学过程 墨林老人代码: &object classid=CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F id=ricci& &/object& &script class=&fsttd1&& var MerlinID;var MerlinACS; ricci.Connected =MerlinLoaded = LoadLocalAgent(MerlinID, MerlinACS); Merlin = ricci.Characters.Character(MerlinID); Merlin.Show();Merlin.Play(&Surprised&); Merlin.Speak(&欢迎来到 http://jm1218.boy.net.cn&); Merlin.Play(&GestureLeft&);Merlin.Think(&这里是《家庭百科》 !&); Merlin.Play(&Pleased&);Merlin.Think(&有什么问题请到论坛发言&); Merlin.Play(&GestureDown&);Merlin.Speak(&谢谢大家光临与支持!&); Merlin.Hide(); function LoadLocalAgent(CharID, CharACS) {LoadReq = ricci.Characters.Load(CharID, CharACS); return(true);} &/script& 七、作业处理 在上节完整页面上,添加特效代码,实现案例中的效果。53 八、教具 所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。54 第十五章 网站的测试与上传课题:网站测试一、教学基本内容 1、优化网站 2、优化文档 3、网站本地测试的意义 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、链接测试 2、搜索文件 难点:链接测试 五、教学目的 掌握测试方,会优化文档。 六、教学过程 具体的测试和修改操作步骤如下: (01)打开需要测试的网页。在菜单栏中选择“文件”|“检查页”|“检查目标浏览器”选项。 (02)系统开始对当前的页面进行检查,会在“结果”面板组的“目标浏览器检查”面板中列出一个报告 单。 该报告单中列出了错误项和有可能出现的错误项, 并在该报告单的下面列出了出现错误的具体位置和 原因。 (03)可以根据报告单中的提示,对该页面中的文档进行修改,直到没有错误为止。 检查链接,具体操作步骤如下: (01)在菜单栏中选择“窗口”|“结果”选项,打开“结果”面板组,单击其中的“链接检查器”面板。 (02)单击该窗口左上角的 按钮,选择要检查的范围。(03)如果选择“检查当前文档中的链接”选项,则弹出显示当前文档中链接检查的报告单。 (04)在“显示”下拉列表中,用户可以选择要检查的链接方式。 七、作业处理55 对自己所做的个人网站做一个测试。 八、教具 所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。56 课题:网站上传一、教学基本内容 上传网站 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:网站上传 难点:网站上传 五、教学目的 掌握网站上传方法。 六、教学过程 上传网页步骤: (01)单击“文件”面板中的 按钮,如图 15-12 所示,切换到站点管理窗口。 ,连接远程服务器。当(02)在站点管理窗口中,单击工具栏上的“连接到远端主机”按钮 Dreamweaver 8 成功连入服务器后,按钮会自动变为“闭合”状态,并且在一旁亮起一个小绿灯。左侧窗格中显示为“远程站点”信息,列出了远程网站接收到的目录,右侧窗格显示为“本地信息”,是本 地目录。 (03)在本地目录中选择要上传的文件,因为是第一次上传,可按 Ctrl+A 组合键将文件全部选中, 再单击工具栏上的 按钮,开始上传网页。上传后的文件会在左侧窗格中显示出来。当此 HTML 文件上传成功后,状态条中将显示所上传的文件,说明 Dreamweaver 8 正在上传这个 HTML 文件所调 用的其他本地文件。 七、作业处理 对大作业(即个人网站)进行上传。 八、教具 所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。57 第十六章使用 Fireworks 8 处理网页图像课题:如何使用 Fireworks8一、教学基本内容 1、Fireworks8 的工作环境 2、创建图像 3、优化图像 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:Fireworks8 的工作环境 难点:Fireworks8 的使用 五、教学目的 掌握 Fireworks8 的使用方法,会修改图像。 六、教学过程 1、引入 因为本班学生都学过了 Photoshop 这一软个,因些可以用 Photoshop 与 Fireworks8 进行比较,以此引 入这一课题。 2、讲授新课 (1)介绍 Fireworks8 这一软件的相关知识,熟悉其工作环境。 (2)Fireworks 8 的工作流程 Fireworks 8 可以在矢量图模式和位图模式下进行图像编辑。在矢量模式下,绘制和编辑的是路径(线 段和曲线) ;在位图模式下,编辑的是像素点。 (3)常用的操作 如何使用 Fireworks 8 真正设置图像尺寸大小。具体操作步骤如下: (01)在 Fireworks 8 中打开需要设置大小的图像,如图 16-2 所示。 (02)在文档窗口的主菜单中选择“修改”|“画布”|“图像大小”选项,弹出 “图像大小“对话框 (03)根据所需要的图像尺寸,在“像素尺寸”选项区域中输入宽度和高度值,单击“确定”按钮便完成 了图像尺寸大小的设置。58 (04)当完成了大小设置后,可对该图像文件进行保存。 七、作业处理 根据 16.4 案例实训,做一个网标志。 八、教具 所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。59 课题:制作网页动画一、教学基本内容 网页动画 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:Fireworks8 的使用 难点:动画的制作 五、教学目的 掌握 Fireworks8 的使用方法,制作网页动画。 六、教学过程 制作步骤: (01)启动 Fireworks 8 软件。选择“文件”|“新建”选项,弹出“新建文档”对话框。在“新建文档”对话框 中设置新建一个“宽度”为 100 像素,“高度”为 100 像素,“分辨率”为 72 像素/英寸,“画布颜色”设置 为透明的文档。 (02)在面板组中选择“帧”面板,如果“帧”面板未被打开,按 Shift+F2 组合键也可打开“帧”面板。连 续单击“帧”面板右下角中的“新建/重制帧”按钮 ,新建 3 个帧。(03)添加帧图片。在“帧”面板中选中“帧 1”,选择“文件”|“导入”选项,弹出“导入文档”对话框,选 择“图片 1.gif”图片, 单击“打开”按钮, 此时光标变为 图片。 (04)重复步骤 3 的操作,分别在“帧 2”中导入“图片 2.gif ”图片,在“帧 3”中导入“图片 3.gif ”图片。 (05)设置导出动画格式。选择“文件”|“导出向导”选项,弹出“导出向导”对话框, 。 (06)单击“继续”按钮,在之后的对话框中选择“GIF 动画”单选按钮。 (07)单击“继续”按钮,弹出“图像预览”对话框。选择“动画”选项卡,并选中“永久”循环动画的循环 方式。 (08)单击“导出”按钮,保存动画。 七、作业处理 在自己的网页中添加一幅动画。 八、教具 所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。60形状, 在新建的文档中单击, 导入“图片 1.gif ” 61
用Dreamweaver8 表格进行页面布局教程本文介绍如何在 Macromedia Dreamweaver 8 中...在下面的部分,您将使用 Dreamweaver 展示此设计。 您也可以打开原始草样文件以便...dreamweaver8使用教程_IT/计算机_专业资料。第一天的内容可能让你觉得枯燥乏味,...继续努力吧^_^ Dreamweaver 8 插入并编辑表格 表格是网页设计制作不可缺少的...Dreamweaver8 图文教程一、Dreamweaver8 的操作环境 在首次启动 Dreamweaver8 时会出现一个“工作区设置”对话框,在对话框左侧是 Dreamweaver8 的设计视图,右侧是 ...Dreamweaver8网页制作及网站运营教程第一部分_互联网_IT/计算机_专业资料。Dreamweaver8网页制作及网站运营系列教程Dreamweaver 8 的功能介绍 中的可视化编辑功能, 利用...dreamweaver8网页制作与开发教程习题_计算机软件及应用_IT/计算机_专业资料。dreamweaver8网页制作与开发教程习题《Dreamweaver8 以模拟考试的试题为主。 网页制作与开发...网页设计期末复习题一、单项选择题 1、下面不属于状态栏上的工具是 A.手形...java Applet 23、在 dreamweaver 8 中可以通过 功能来制作类似幻灯片的图片转换...Dreamweaver 8.0制作简易留言板图文教程_计算机软件及应用_IT/计算机_专业资料。...4 (1)、打开 Dreamweaver 8.0 新建 ASP VBScript,建立留言页面 message.Asp。...网页设计、网站编辑1、Dreamweaver 基本操作界面2、站点的新建,根目录的设置3、表格布局4、框架布局5、超链接6、输入文字及排版7、插入8、建立库及模板9、CSS样式...Dreamweaver CS3网页制作基础教程第8章习题答案 本书共15章,主要介绍如何在网页中插入文本、图像、媒体、超级链接、表单等网页元素并设置其属性,如何运用表格、框架、...
All rights reserved Powered by
www.tceic.com
copyright &copyright 。文档资料库内容来自网络,如有侵犯请联系客服。

我要回帖

更多关于 bootstrap单选按钮 的文章

 

随机推荐