网页设计第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)在标签内输入如下代码 动态切换图片.txt-记事本 回 文件①)编辑)格式)查看⑩帮助⑩ 教 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 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）在标签内输入如下代码 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 应用及参数设置 四、作业
网页设计第16周星期五第5、6节 课题| Dreamweaver中插入Fsh文本 教学目标DW中插入 Flash文本 教学重点媒体菜单的应用 教学难点Fash文本插入 复习:网页中透明 FLASH效果制作过程 讲授新课 Dream weaver中插入 Flash文本 1、创作思想 打开 Dreamweaver MX2004软件并新建页面,然后单击【插入】|【媒体】|【Fash文本】 命令,打开【插入Fash文本】对话框,在该对话框中输入相应的参数,就可以制作出动感的 Flash 文本了 2、操作步骤 (1)打开 Dreamweaver mX2004软件,新建文件并保存页面。 (2)插入Flah文本并输入参数,如图所示 aver X 教 1叉点击【插入】菜单會口帮助0 CriTe 图像① 2》选择【媒体】命令 Carlat+r 表格可 Ctrl+Alt+T 学 表格对象) 3·选择[Fh文本】命令 素单入F1出文本 选择文本的字体与大小 超级链接 电子部件 字体:AiaB4k 大小:20 选择文本的默认颜色类 ⑤选择文本转换颜 过 释画e国e HTML 模板[DwMx 点击【确定】按钮 自定义收 输入文本 程 回显示字体 A8[击【浏卫按钮 链接:bt,ht ①)无 背景色 渝入要保存的文件 另存为:btsf 图48-2插入Hash文本 11 注意: Dream weaver MX2004可以快速制作简单的 Flash文件,如果要制作的Fash效果要求不高, 不妨考虑这种方法。但是,如果想制作比较复杂,水平较高的动画就只能使用专业的动画制作软件, 如三剑客之一的 Flash mX2004 上机练习 小结、作业
网页设计 第 16 周 星期五 第 5、6 节 课 题 Dreamweaver 中插入 Flash 文本 教学目标 DW 中插入 Flash 文本 教学重点 媒体菜单的应用 教学难点 Flash 文本插入 教 学 过 程 复习：网页中透明 FLASH 效果制作过程 讲授新课： 一、Dreamweaver 中插入 Flash 文本 1、创作思想 打开 Dreamweaver MX 2004 软件并新建页面，然后单击【插入】 | 【媒体】 | 【 Flash 文本】 命令，打开【插入 Flash 文本】对话框，在该对话框中输入相应的参数，就可以制作出动感的 Flash 文本了。 2、操作步骤 （ 1 ）打开 Dreamweaver MX 2004 软件，新建文件并保存页面。 （ 2 ）插入 Flash 文本并输入参数，如图所示。 （3 ）保存文件，完成操作。 注意：Dreamweaver MX 2004 可以快速制作简单的 Flash 文件，如果要制作的 Flash 效果要求不高， 不妨考虑这种方法。但是，如果想制作比较复杂，水平较高的动画就只能使用专业的动画制作软件， 如三剑客之一的 Flash MX2004。 二、上机练习 三、小结、作业
网页设计第17周星期二第5、6节 课题随机播放背景音乐网页效果 教学目标行为及行为面板的应用 教学重点行为中播放声音的应用 教学难点行为中播放声音的应用 复习:在DW2004中插入Fash文本制作过程 讲授新课 随机播放背景音乐网页 1、创作思想 打开 Dreamweaver MX2004软件新建页面,再选择【行为】面板下的【+】选项插播音乐, 设置参数。然后重复此操作4次,就可以随机播放背景音乐 2、操作步骤 (1)打开 Dreamweaver mX2004软件新建文件,并保存页面。 (2)选择好“标签”页,在“行为”面板中插入要播放的音乐文件,如图所示。 教 点击【确定】按钮 学 击【o标 →[ ④日开【光盘/文件/实5b8udd】文件 图551插入音乐文件 (3)接着选择插入的声音文件,打开参数窗口,设置其参数,如图所示 过 (4)重复执行第三图0底声音文件 步和第三步操作4次, 点击【确定】按钮 这样就添加了4种音 程|乐,使得程序可以随机 入以下的参数 在这四种音乐中挑选 STAKE 其中一首来播放。 ASTElSUUND HIDDEN (5)保存文件,完 成操作。适当放置轻松 的音乐背景,可以让用 屎性 户感觉更轻松、愉快。 插件,1体宽①)0西文件) beyound nid 对齐0)默认值 上机练习 垂直边距D 水平边距Q 已e 、小结 四、作业 图55-2设置参数
网页设计 第 17 周 星期二 第 5、6 节 课 题 随机播放背景音乐网页效果 教学目标 行为及行为面板的应用 教学重点 行为中播放声音的应用 教学难点 行为中播放声音的应用 教 学 过 程 复习：在 DW2004 中插入 Flash 文本制作过程 讲授新课： 一、随机播放背景音乐网页 1、创作思想 打开 Dreamweaver MX 2004 软件新建页面，再选择【行为】面板下的【 + 】选项插播音乐， 设置参数。然后重复此操作 4 次，就可以随机播放背景音乐。 2、操作步骤 （ 1 ）打开 Dreamweaver MX 2004 软件新建文件，并保存页面。 （ 2 ）选择好“标签”页，在“行为”面板中插入要播放的音乐文件，如图所示。 （ 3 ）接着选择插入的声音文件，打开参数窗口，设置其参数，如图所示。 （ 4 ）重复执行第二 步和第三步操作 4 次， 这样就添加了 4 种音 乐，使得程序可以随机 在这四种音乐中挑选 其中一首来播放。 （ 5 ）保存文件，完 成操作。适当放置轻松 的音乐背景，可以让用 户感觉更轻松、愉快。 二、上机练习 三、小结 四、作业
网页设计教案第17周星期四第5、6 课题制作1px边框表格 教学目标1、网页中代码的应用:2、网页中CSS的应用 教学重点代码的含义 教学难点代码的含义 复习:网页中实现背景音乐随机播放效果制作过程 讲授新课 细表格边框制作 方法一:用嵌套表格 用两个表格嵌套,外层的表格的长与宽比里层的多出2px,并设置对齐属性为水平居中、垂直 中,然后把外层表格的背景设为你需要的边框颜色,里层表格背景设为与网页背景相同,这样就实 现我们的愿望了,实例如下 Ktable cellspacing="0 cellpadding="0 bgcolor="#000000 width="32 height="32 border=0> 方法二:设置亮、暗边框颜色 表格有亮边框( bordercolorlight)和暗边框 bordercolordark)两个属性,把表格边框( border)设为lpx 学亮边框( bordercolorlight))设为背景色,暗边框( bordercolordark)设为你需要的实际边框颜色就可以了, 实列女 Ktable border="1" cellpadding=0 cellspacing="0 width="32 height=32 bordercolorlight="#000000 bordercolordark"#FFFFFF"> /tr> 过 方法三:用CSS定义(一) style=" border- collapse: collapse"实例如下 /tr> 方法四:用CSS定义(二) style=" border:1 px solid#00实例如下: /table> 注意:这时候不要再设置表格边框( border)、亮边框( bordercolorlight)和暗边框( bordercolordark)属性, 否则不会出现预想的结果。 、上机练习 、小结、作业
网页设计教案 第 17 周 星期四 第 5、6 节 课 题 制作 1px 边框表格 教学目标 1、网页中代码的应用；2、网页中 CSS 的应用 教学重点 代码的含义 教学难点 代码的含义 教 学 过 程 复习：网页中实现背景音乐随机播放效果制作过程 讲授新课： 一、细表格边框制作 方法一：用嵌套表格 用两个表格嵌套，外层的表格的长与宽比里层的多出 2px，并设置对齐属性为水平居中、垂直居 中，然后把外层表格的背景设为你需要的边框颜色，里层表格背景设为与网页背景相同，这样就实 现我们的愿望了，实例如下： 方法二：设置亮、暗边框颜色 表格有亮边框(bordercolorlight)和暗边框(bordercolordark)两个属性，把表格边框(border)设为 1px， 亮边框(bordercolorlight)设为背景色，暗边框(bordercolordark)设为你需要的实际边框颜色就可以了， 实列如下： 方法三：用 CSS 定义（一） 方法四：用 CSS 定义（二） 注意：这时候不要再设置表格边框(border)、亮边框(bordercolorlight)和暗边框(bordercolordark)属性， 否则不会出现预想的结果。 二、上机练习 三、小结、作业 style="border-collapse: collapse" 实例如下： style="border: 1px solid #000000;" 实例如下：
网页设计第17周星期五第5、6节 课题网页表格特效 教学目标able标签的应用 教学重点 Table标签 教学难点abe标签 复习:细表格边框制作方法 讲授新课 网页表格特效 1、彩色虚线表格 2、鼠标指向单元格变色 > > 教|3、立体表格 ≤ align="center">立 学|表格 > 4、表格嵌套 过|5、半透明表格 > bg i 程 background-color: #66CCFF filter: Alpha(Opacity=20); tr>4 透明 k F > 6、阴影表格 、上机练习 、小结 四、作业
网页设计 第 17 周 星期五 第 5、6 节 课 题 网页表格特效 教学目标 Table 标签的应用 教学重点 Table 标签 教学难点 Table 标签 教 学 过 程 复习：细表格边框制作方法 讲授新课： 一、网页表格特效 1、彩色虚线表格 2、鼠标指向单元格变色 3、立体表格 4、表格嵌套 5、半透明表格 6、阴影表格 二、上机练习 三、小结 四、作业 ＜table width="200" border="1" cellspacing="0" cellpadding="0"＞＜tr＞ ＜td onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'"＞ ＜/td＞＜/tr＞＜tr＞ ＜td onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFccaa'"＞ ＜/td＞＜/tr＞＜/table＞ ＜table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0"＞ ＜tr align="center"＞＜td width="86" bordercolorlight="#000000" bordercolordark="#eeeeee" bgcolor="#B7B7B7" ＞立 体＜/td＞ ＜td width="108" bordercolorlight="#000000" bordercolordark="#eeeeee" bgcolor="#B7B7B7" ＞表格＜/td＞ ＜/tr＞＜/table＞ ＜style type="text/css"＞ ＜!-- .bg { background-color: #66CCFF; filter: Alpha(Opacity=20); } --＞ ＜table width="200" border="0" cellpadding="0" cellspacing="0" class="bg"＞ ＜tr＞ ＜td＞＜div align="center"＞半＜/div＞＜/td＞ ＜td＞＜div align="center"＞透明＜/div＞＜/td＞＜/tr＞ ＜tr＞ ＜td＞＜div align="center"＞表＜/div＞＜/td＞ ＜td＞＜div align="center"＞格＜/div＞＜/td＞＜/tr＞ ＜/table＞
网页设计第18周星期二第5、6节 课题论坛设计 教学目标数据库应用 教学重点数据库 教学难点数据库 复习:表格几种特效制作方法 讲授新课 论坛结构分析 (1)网友注册和管理模块 (2)文章显示模块 (3)发表文章模块 (4)文章审阅模块 表的结构: (1)作者表(用来存放作者讯息) ID:文本类型,必填。是网友代号。 密码:文本类型,必填。 教昵称:文本类型,必填 EMAIL:文本类型,必填。 职务:数字类型,必填。-1代表普通网友,0代表站长。大于0的数字代表版主 文章数:数字类型,必填。网友发表的文章总数 学|姓名:文本类型,可选 性别:文本类型,可 电话:文本类型,可选 (2)内容表(用来存放具体文章内容和相关讯息) 过|ID:自动编号,并为其设置索引,以加快搜寻的速度。 看板ID:数字类型,来自看板列表,表示文章所属看板 主题ID:数字类型,来自主题表,表示文章所属主题。 作者ID:文本类型,来自作者表,表示文章的作者 程日期:日期时间类型,预置初值为函数NOWO,自动取系统当前时间为其值 标题:文本类型。文章的标题。 发表:是/否类型,为"真"时表示文章已经通过审阅,可以发表;为"否"表示文章尚待审阅 推荐度:数字类型,文章的推荐程度 内容:备注类型,文章的具体内容 点击次数:数字类型,文章的点击次数。 (3)看板列表(用来存放有关看板的讯息) (4)主题表(用来存放有关主题的讯息) 、构建 1、构建主窗体 构建文章显示模块 小结作业
网页设计 第 18 周 星期二 第 5、6 节 课 题 论坛设计 教学目标 数据库应用 教学重点 数据库 教学难点 数据库 教 学 过 程 复习：表格几种特效制作方法 讲授新课： 一、论坛结构分析 （1） 网友注册和管理模块 （2） 文章显示模块 （3） 发表文章模块 （4） 文章审阅模块 表的结构： （1）作者表（用来存放作者讯息）： ID：文本类型，必填。是网友代号。 密码： 文本类型，必填。 昵称： 文本类型，必填。 EMAIL： 文本类型，必填。 职务： 数字类型，必填。-1 代表普通网友，0 代表站长。大于 0 的数字代表版主。 文章数：数字类型，必填。网友发表的文章总数。 姓名： 文本类型，可选。 性别： 文本类型，可选。 电话： 文本类型，可选。 （2）内容表（用来存放具体文章内容和相关讯息）： ID：自动编号，并为其设置索引，以加快搜寻的速度。 看板 ID：数字类型，来自看板列表，表示文章所属看板。 主题 ID：数字类型，来自主题表，表示文章所属主题。 作者 ID：文本类型，来自作者表，表示文章的作者。 日期：日期/时间类型，预置初值为函数 NOW()，自动取系统当前时间为其值。 标题：文本类型。文章的标题。 发表：是/否类型，为"真"时表示文章已经通过审阅，可以发表；为"否"表示文章尚待审阅。 推荐度：数字类型，文章的推荐程度。 内容：备注类型，文章的具体内容。 点击次数：数字类型，文章的点击次数。 （3）看板列表（用来存放有关看板的讯息） （4）主题表（用来存放有关主题的讯息） 二、构建 1、 构建主窗体 2、 构建文章显示模块 三、小结作业