网页设计第15 课题综合实例(一) 教学目标1、表格的应用:2、深圳先进技术研究院主页 教学重点表格的应用 教学难点表格的应用 实例分析 1、效果图如下: 江优调技求研究院一ft1nt!x1ar 件①)编福查看①收座0工其①Q0 菜单有: 0·0团必户☆收⊙ 解言到 首页 1究代1试1候发1人才物1评化1文化1的才1内题1系们1 ERATH 研究院概况 中国科学院深辑先进技术研究院 标 新闻资讯 科技研发 大量式被美1杂平 百人形将启事 人才教育 气售了盘成2000宝大气摩件 “计忆厂士后形种启事 右专毛民得虎技重标究网 成果转化 砖导 流人 学母:场投资母亿异中122 文化领地 机 在术与技部花射留行工作 吴于健进平还市围市仁管 便请 教广纳人才 述显专测 内部信息 度 进技开工心目立确性1+10 酒书带 1-10 联系我们 中气大件才年四赶量盒山1 中手发市值息73用高14 English 程中 碱聘研究人 学 进技术究石料址1作口工企三际魔山行器械产 在舞积3//精科 分析 过使用嵌套表格来完成本实例,其中大表格为4行5列,表格宽度为760像素,第一行嵌套插入1 行11列的表格用于放置11个菜单,高度为25像素;第二行用于放置网标和功能菜单栏,可嵌套插 入一个3行3列表格完成:第三行第一列宽150像素,用于放功能菜单或图片,第二列和第四列宽 菜|单栏嵌套|1行1列表格 程 网标栏及搜索功能菜单栏 150 150 像 像 主要内容区域 像 像 素 素 素 嵌套插入2行1列表格 10像素,用来作为分界线,第五列宽150像素,用于放置临时内容,中间第3列用于放主要内容, 可嵌套插入表格:第四行用于放置网站信息,嵌套2行1列表格 二、上机练习三、小结、作业
网页设计 第 15 周 星期二 第 5、6 节 课 题 综合实例（一） 教学目标 1、表格的应用；2、深圳先进技术研究院主页 教学重点 表格的应用 教学难点 表格的应用 教 学 过 程 一、实例分析 1、 效果图如下： 菜单有： 首页 研究院概况 新闻资讯 科技研发 人才教育 成果转化 文化领地 广纳人才 内部信息 联系我们 English 2、分析 使用嵌套表格来完成本实例，其中大表格为 4 行 5 列，表格宽度为 760 像素，第一行嵌套插入 1 行 11 列的表格用于放置 11 个菜单，高度为 25 像素；第二行用于放置网标和功能菜单栏，可嵌套插 入一个 3 行 3 列表格完成；第三行第一列宽 150 像素，用于放功能菜单或图片，第二列和第四列宽 10 像素，用来作为分界线，第五列宽 150 像素，用于放置临时内容，中间第 3 列用于放主要内容， 可嵌套插入表格；第四行用于放置网站信息，嵌套 2 行 1 列表格。 二、上机练习 三、小结、作业 菜 单 栏 嵌 套 11 行 1 列 表格 网标栏及搜索功能菜单栏 宽 150 像 素 宽 10 像 素 主要内容区域 宽 10 像 素 宽 150 像 素 嵌套插入 2 行 1 列表格
网页设计教案第15周星期四第5、6 课题综合实例二 教学目标1、层制作下拉菜单:2、深圳先进技术研究院首页 教学重点 层 的应用 教学难点层属性设置 复习:完成深圳先进技术研究院首页表格操作 讲授新课 层的操作 1、层的创建 2、层基本属性设置 3、层高级属性设置(行为面板,层显示、隐藏等操作) 4、层的嵌套操作 5、具体应用 、实例(接上次课) 1、将光标定位在“研究院概况”所在单元格,单击“插入”菜单,选择“层”命令,在该单元格里 插入一个层,调整层的位置(注意,层的上边框一定要和单元格一下边框重合,否则制作出的下拉 教菜单功能是不能实现的) 2、在层中插入一个6行1列的表格,表格宽度为100像素,单元格高度均为20像素,在每一个单 元格中分别输入内容:院长致词、先进院简介、先进院领导、组织机构、创新管理和园区参观 3、在行为面板中为层添加高级属性,当鼠标移动到单元格上时,下拉菜单(层)显示出来,当鼠标 学|移开单元格时,下拉菜单(层)隐藏。 4、用同样的方法完成其他几个下拉菜单的制作: 科研方向 科研力量 科学院新闻 科技研发:科研成果 先进院新闻 知识产权 过 新闻资讯:〈国内新闻 学术前沿 传媒扫描 合作项目 科技漫步 国际交流 程 「教育概貌 「工程中心 招生信息 技术转移 人才教育:了研究生管理 成果转化:〈产业公司 研究生手册 产业需求信息 文件下载 产品介绍 科研人员招聘 地理位置 内部信息:了管理人员招聘 联系我们:联系我们 招考信息 在线咨询 5、浏览保存 、上机练习:完成本主页(主要下拉菜单制作) 四、小结、作业
网页设计教案 第 15 周 星期四 第 5、6 节 课 题 综合实例二 教学目标 1、层制作下拉菜单；2、深圳先进技术研究院首页 教学重点 层的应用 教学难点 层属性设置 教 学 过 程 复习：完成深圳先进技术研究院首页表格操作 讲授新课： 一、层的操作 1、 层的创建 2、 层基本属性设置 3、 层高级属性设置（行为面板，层显示、隐藏等操作） 4、 层的嵌套操作 5、具体应用 二、实例（接上次课） 1、将光标定位在“研究院概况”所在单元格，单击“插入”菜单，选择“层”命令，在该单元格里 插入一个层，调整层的位置（注意，层的上边框一定要和单元格一下边框重合，否则制作出的下拉 菜单功能是不能实现的）。 2、在层中插入一个 6 行 1 列的表格，表格宽度为 100 像素，单元格高度均为 20 像素，在每一个单 元格中分别输入内容：院长致词、先进院简介、先进院领导、组织机构、创新管理和园区参观。 3、在行为面板中为层添加高级属性，当鼠标移动到单元格上时，下拉菜单（层）显示出来，当鼠标 移开单元格时，下拉菜单（层）隐藏。 4、用同样的方法完成其他几个下拉菜单的制作： 5、浏览保存。 三、上机练习：完成本主页（主要下拉菜单制作） 四、小结、作业 科学院新闻 先进院新闻 新闻资讯： 国内新闻 传媒扫描 科技漫步 科研方向 科研力量 科技研发： 科研成果 知识产权 学术前沿 合作项目 国际交流 教育概貌 招生信息 人才教育： 研究生管理 研究生手册 文件下载 工程中心 技术转移 成果转化： 产业公司 产业需求信息 产品介绍 科研人员招聘 内部信息： 管理人员招聘 招考信息 地理位置 联系我们： 联系我们 在线咨询
网页设计第15周星期五第5、6节 课题动态图片效果 教学目标|1、掌握 JavaScript脚本的应用:2、网页中图片的动态效果 教学重点 JavaScript脚本的应用 教学难点| JavaScript脚本的应用 复习:1、利用层制作下拉菜单 2、回忆“深圳先进技术研究院”首页制作过程 讲授新课: 动态图片效果 1、制作前准备 1)站点及站点文件夹创建 2)拷贝4幅JPG/JPEG图片到站点文件夹下的 IMAGES子文件夹下面 3)在Dw204编辑状态下新建一文档,然后切换到“代码视图下 2、代码:4)在<body></body>标签内输入如下代码 动态切换图片.txt-记事本 回 文件①)编辑)格式)查看⑩帮助⑩ 教 <script language="javascript"> var tp new Array (; var lady=0; tp[o]"images0161. jpg" tp[1]=images/0162.jpg tp[2]images/0163.jpg 学 tp[3]=images/5164.]pg var map-new Array() ap[i] Function seto) Kif(document all) 过 r filters. revealTrans Transition=Math floor(Math. random(*23) rfilters. revealTransapply (): >> function cc( rfilters. revealTrans play ()y function Ad() kif (lady<tp length-1)lady++; 程 else lady=6; documentimages.rsrc=tp[lady] CCO: theImer=setTimeout(Ad("4000):) document.write(' <img style="filter:revealTrans (duration=2, transition=20) height=306 width=466 javascript: Ad() </script> 4)在代码中将tp[0-3]中的图片路径进行更改,换成在第三步中拷入的四幅图片 5)保存浏览,完成动态效果的操作。 上机练习 、小结、练习
网页设计 第 15 周 星期五 第 5、6 节 课 题 动态图片效果 教学目标 1、掌握 JavaScript 脚本的应用；2、网页中图片的动态效果 教学重点 JavaScript 脚本的应用 教学难点 JavaScript 脚本的应用 教 学 过 程 复习：1、利用层制作下拉菜单； 2、回忆“深圳先进技术研究院”首页制作过程 讲授新课： 一、动态图片效果 1、制作前准备 1） 站点及站点文件夹创建； 2） 拷贝 4 幅 JPG/JPEG 图片到站点文件夹下的 IMAGES 子文件夹下面； 3） 在 DW2004 编辑状态下新建一文档，然后切换到“代码视图下”。 2、代码：4）在<body></body>标签内输入如下代码 4） 在代码中将 tp[0-3]中的图片路径进行更改，换成在第三步中拷入的四幅图片； 5） 保存浏览，完成动态效果的操作。 二、上机练习 三、小结、练习
网页设计第 课题|T型网站实例 教学目标表格的应用 教学重点表格的应用 教学难点表格的应用 复习:动态图片切换效果制作过程 讲授新课 T型网站 1、网站效果图 olofbif esis Team 关于我们|站点导航联系我们 业界动态|设计竞赛|佳作欣贯|理论文敝|人物访该|软件技法 栏目更新列表 档前位置:七色鸟设计空间》平面设计》佳作欣赏 历届奥运会奖牌设计欣赏 雅典奥运会的设计及周边设 中黑入选 Archie精作品选 佳作欣赏一文章列表 教 鸣堂新年创意卡欣 历届奥运会奖牌设计欣贯(200408·26) 国V设计欣 雅典奥运会的设计及周边设计(2004-082 人大校友女年设计新核做 中国入选Ache精梓作品选(2004-05-01) 华人设计大师陈幼坚作品集(2004-03-19) DIESEL广告欣赏 意鸣堂新年创意卡片欣赏(2004-03-18) 韩国Ⅵ设计欣赏 铝息搜索 学 文字广告 人大校友七年设计新校做(2004-02-24) 艾特事业机构 》七色鸟平面版优秀原创作品阶段展(2004-01-21) 1930马拉圭到2002韩日世界杯海报欣贯(2004-01-12) 业幼摄影、艺术写烹、儿童 DIESEL广告欣9009 摄影机构 httpt//www.aitecn/ 帕需特设计作品欣赏(200308-28) 过 92000-2005. Colorbird design team. All rights reservec 2、分析 程|1)方法之一:整个页面可以利用三个大表格加嵌套表格来完成 方法之二:整个页面可以利用一个大表格加嵌套表格来完成 方法之三:可以利用布局表格和单元格来完成 2)利用方法一来完成本页面其中一制作可这样考虑:三个表格,第一个表格也就是最上面图片加菜 单栏部分,可用2行2列表格来完成,第1行第一个单元格用于放置网标,第二个单元格分别放 置“关于我们”、“站点导航”和“联系我们”。第二行可以嵌套插入一个1行7列的表格用于放 置功能菜单,分别是:业内动态、佳作欣赏、设计竞赛、理论文献、人物访谈和软件精选。 3)内容区域,可以用一个1行2列表格完成,左边一列嵌套表格用于放置功能菜单,右边一列为主 要区域,也可用嵌套表格完成。 4)最下面一个表格用来放置基本信息 上机练习 小结、作业
网页设计 第 16 周 星期二 第 5、6 节 课 题 T 型网站实例 教学目标 表格的应用 教学重点 表格的应用 教学难点 表格的应用 教 学 过 程 复习：动态图片切换效果制作过程 讲授新课： 一、T 型网站 1、 网站效果图： 2、分析 1） 方法之一：整个页面可以利用三个大表格加嵌套表格来完成 方法之二：整个页面可以利用一个大表格加嵌套表格来完成 方法之三：可以利用布局表格和单元格来完成。 2） 利用方法一来完成本页面其中一制作可这样考虑：三个表格，第一个表格也就是最上面图片加菜 单栏部分，可用 2 行 2 列表格来完成，第 1 行第一个单元格用于放置网标，第二个单元格分别放 置“关于我们”、“站点导航”和“联系我们”。第二行可以嵌套插入一个 1 行 7 列的表格用于放 置功能菜单，分别是：业内动态、佳作欣赏、设计竞赛、理论文献、人物访谈和软件精选。 3） 内容区域，可以用一个 1 行 2 列表格完成，左边一列嵌套表格用于放置功能菜单，右边一列为主 要区域，也可用嵌套表格完成。 4） 最下面一个表格用来放置基本信息。 二、上机练习 三、小结、作业
网页设计教案第16周星期四第5、6 课题网页中透明 Flash效果 教学目标1、表格的应用:2、 Flash的应用 教学重点 Flash属性设置 教学难点Fas属性设置 复习:T型网站制造过程 讲授新课 网页中透明 FLASH效果 1、创作思想 打开 Dreamweaver MX2004软件新建页面,然后在页面中插入表格,并在表格里插入 Flash文 件,设置Fash文件的参数,制作透明背景的 Flash 2、操作步骤 (1)打开 Dreamweaver mX2004软件新建文件,并保存页面。 (2)插入表格和设置背景。为使 Flash的效果更加明显,先插入表格并设置背景图 (3)设置完背景后,可以插入 Flash文件 (4)接着设置 Flash文件的参数,如下图所示 教 参数 〖值 取消 ransparent 学 帮助Q 过 比例)在背景颜色(【参数 (5)保存文件,完成操作。在网络上看到自己喜欢的 Flash作品,想把它引用到自己的网站,但 程又不喜欢底色,就可以用本例介绍的这种方法,使它透明后再使用 上机练习 小结 1、网页中表格操作 2、网页中 FLASH应用及参数设置 作业
网页设计教案 第 16 周 星期四 第 5、6 节 课 题 网页中透明 Flash 效果 教学目标 1、表格的应用；2、Flash 的应用 教学重点 Flash 属性设置 教学难点 Flash 属性设置 教 学 过 程 复习：T 型网站制造过程 讲授新课： 一、网页中透明 FLASH 效果 1、创作思想 打开 Dreamweaver MX 2004 软件新建页面，然后在页面中插入表格，并在表格里插入 Flash 文 件，设置 Flash 文件的参数，制作透明背景的 Flash 。 2、操作步骤 （ 1 ）打开 Dreamweaver MX 2004 软件新建文件，并保存页面。 （ 2 ）插入表格和设置背景。为使 Flash 的效果更加明显，先插入表格并设置背景图。 （ 3 ）设置完背景后，可以插入 Flash 文件。 （ 4 ）接着设置 Flash 文件的参数，如下图所示。 （ 5 ）保存文件，完成操作。在网络上看到自己喜欢的 Flash 作品，想把它引用到自己的网站，但 又不喜欢底色，就可以用本例介绍的这种方法，使它透明后再使用。 二、上机练习 三、小结 1、 网页中表格操作 2、 网页中 FLASH 应用及参数设置 四、作业