dreamweaver8网页设计教案

合集下载

Dreamweaver8网页超链接教学设计

Dreamweaver8网页超链接教学设计

patr nd ppiain s fwa e a h are.W ih t e ” b ln s a x mp e o t sg te c u s a e o su n s t n a a l t o t r s te c rir e c o t h we i k ” s e a l .h w o dein h o re b s d n tde t
3 教 学策 略
本 课 内 容 的 学 习是 一 种 自我 需 求 下 的 获 取 ,所 以 关 键 在 于 学 习 方 法 、学 习 习 惯 的 培 养 。平 时 授 课 巾就
要 注 重 倡 导 学 生 自主 学 习 ,碰 到 困 难 要 想 办 法 ,通 过
Te c i sg o he D r a we v r W e n a h ng De i n f t e m ae 8 b Li ks
GUAN Ll i i
( i nj n i lH sa dy & Vee n r o ain lC l g,Heln j n 10 1 Hel gi g Anma u b n r o a tr a V ct a ol e i y o e i gi g 5 1 ) o a 1
完 成 对 知 识 点 的学 习 与 掌 握 .增 强 主动 学 习 、探 究 的
意识 。
信 息 链 接 实 现 的 方 法 , 让 基 础 一 般 的 学 生 能 对
D e mw a e8 中创 建 超 链 接 的 几 种 方 法 有 个 全 面 了 ra e v r
解 ,能掌 握 其 巾的 部 分 内容 ,学 会 学 习 方 法 ,为 以 后
21 0 1年 第 2期
Dra mwe v r e a e8网 页 超 链 接 教 学 设 计

dreamweaver8网页设计 第九章 使用框架布局网页

dreamweaver8网页设计 第九章 使用框架布局网页

2021/10/10
6
9.2 框架和框架集的基本操作
9.2.1 选择框架和框架集 1.在文档编辑窗口中选择
在文档编辑窗口中选择框架的方法为:按住【Alt】 键的同时在要选择的框架内单击,被选中的框架 边框变为虚线。 如要选择框架集,则单击该框架集上的任意边框 即可,选中的框架集所有边框都呈虚线显示。
2021/10/10
2
9.1.2 了解框架网页构造
下图所示网页至少由三个单独的网页文档组成:两 个框架区域中显示的两个页文档和把这两个文档 显示在一个界面上的框架集文档。在Dreamweaver 中设计使用框架的网页时,必须全部保存这三个文 件,框架网页才能在浏览器中正常显示。
2021/10/10
3
9.1.3 创建框架集
1.使用“新建文档”对话框创建
使用“新建文档”对话框创建框架集的方法同 创建普通页面的方法相似。
2021/10/10
4
2.使用“布局”插入栏创建
使用“布局”插入栏创建框架集就像插入表格 一样简单。
2021/10/10
5
3.手动创建
使用前面两种方法创建的都是Dreamweaver中预 定义的框架集,当这些框架集无法满足用户需求 时,可以在此基础上手动分割创建框架。
2021/10/10
7
2.在“框架”面板中选择
选择“窗口”>“框架”菜单,可打开“框架” 面板,该面板中显示了窗口中框架的结构,不同 的框架区域显示了框架的名称。
选择框架:在“框架”面板中单击需要选择的 框架即可将其选中,被选择的框架在“框架” 面板中以粗黑框显示。 选择框架集:在“框架”面板中单击框架集的 边框即可选择框架集。
2021/10/10

网页设计与制作案例教程-电子教案第21单元

网页设计与制作案例教程-电子教案第21单元

HTML源代码中的换行、回车符和多个连续空格在浏览时都是无效的,浏览网页时,会自动忽略文档中的换行符、回车符、空格,所以在文档中输入的回车符,并不意味着在浏览器中将看到不同的段落。
网页中所有的显示内容都应该受限于一个或多个标记,不能存在游离于标记之外的文字或图像等,以免产生错误。
对于浏览器不能分辨的标记可以忽略,不显示其中的对象。
HTML文档以纯文本形式存放,扩展名为“.html”或“.htm”。
HTML文档中标记采用“<”与“>”作为分割字符。
HTML标记及属性不区分大小写,例如<HTML>和<html>是相同的标记。
大多数HTML标记可以嵌套,但不能交叉,各层标记是全包容关系。
HTML文档一行可以书写多个标记,一个标记也可以分多行书写,不用任何续行符号,显示效果相同。
在查看HTML源代码或编写网页时,经常会遇到三种格式的HTML标记。 不带属性的双标记:<标记名称>内容</标记名称> 带有属性的双标记:<标记名称 属性名称=对应的属性值 ……>网页对象</标记名称> 单标记:<标记名称 />
HTML标记的类型
2 Dreamweaver 8的HTML源代码编辑功能
在代码窗口中<body>与</body>之间输入文字“长沙世界之窗实现总经理领导下的部门经理负责制,管理上采用垂直领导、分层管理、逐级负责。”,接着输入“<br />”
回车换行,然后输入“<img src="image/bumen1.jpg" width="690" height="303" />”。

《Dreamweaver网页设计》教案

《Dreamweaver网页设计》教案

《Dreamweaver网页设计》教案一、教案简介二、教学目标1. 掌握Dreamweaver的界面结构和基本操作。

2. 学会使用Dreamweaver制作和管理网页布局。

3. 掌握在Dreamweaver中插入和编辑各种网页元素,如文本、图片、等。

4. 学会使用CSS样式表美化网页。

5. 掌握在Dreamweaver中进行网页代码编辑和调试。

三、教学内容1. Dreamweaver的安装和界面介绍。

2. 网页制作的基本流程和规范。

3. 文本的插入、编辑和格式设置。

4. 图片的插入、编辑和优化。

5. 的创建和管理。

四、教学方法采用讲解、演示、实践相结合的教学方法。

教师先进行理论知识讲解和操作演示,学生跟随实践,巩固所学知识。

在实践过程中,教师会提供指导和解答疑问。

五、教学环境1. 计算机房,每台计算机安装有Dreamweaver软件。

2. 投影仪或白板,用于展示操作过程。

3. 教学PPT或教案文档。

六、教学评估1. 课堂参与度:观察学生在课堂上的积极参与程度,提问和回答问题的积极性。

2. 实践操作:评估学生在实践环节中制作网页的质量和完成情况。

3. 作业和练习:布置相关作业和练习题,评估学生的理解和掌握程度。

4. 期末考核:进行期末考核,包括理论知识和实践操作,以评估学生整体学习效果。

七、教学资源1. Dreamweaver软件:确保每台计算机都安装有Dreamweaver软件,以便学生实践操作。

2. 教学PPT或教案文档:提供清晰的教学内容和操作步骤,方便学生理解和跟随。

3. 网页设计素材:提供一些图片、字体等网页设计素材,供学生自由使用。

4. 网络资源:提供一些优秀的网页设计参考案例和教程,供学生学习和参考。

八、教学进度安排1. 教案一:Dreamweaver的安装和界面介绍(1课时)2. 教案二:网页制作的基本流程和规范(1课时)3. 教案三:文本的插入、编辑和格式设置(1课时)4. 教案四:图片的插入、编辑和优化(1课时)5. 教案五:的创建和管理(1课时)6. 实践环节:学生自主制作网页(4课时)7. 作业和练习:布置相关作业和练习题,学生进行理论知识巩固(1课时)8. 教学评估:进行课堂参与度、实践操作、作业和练习的评估(1课时)9. 期末考核:进行期末考核,包括理论知识和实践操作(2课时)九、教学注意事项1. 确保学生已经掌握基本的计算机操作技能,如文本编辑、图片浏览等。

dreamweaver8网页设计教案

dreamweaver8网页设计教案

初识Dreamweaver 8课题:Dreamweaver8简介及创建文档一、教学基本内容1、什么是网页和网站2、网页的分类3、网页中的常用术语4、网页设计的相关知识5、认识Dreamweaver 86、Dreamweaver 8的基本操作7、Dreamweaver 8工作界面介绍二、课型:新授课三、课时:1个课时四、教学重点与难点重点:什么是网页和网站难点:1、网页的分类2、网页设计的一般步骤3、Dreamweaver 8的基本操作五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识,激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、什么是网页和网站(1)网页网页是由HTML(超级文本标识语言)或者其他语言编写的,通过IE浏览器编译后供用户获取信息的页面,它又称为Web页,其中可包含文字、图像、表格、动画和超级链接等各种网页元素。

(2)网站网站就是一个或多个网页的集合。

从广义上讲,网站就是当网页发布到Internet上以后,能通过浏览器在Internet上访问的页面。

◆门户网站◆职能网站◆专业网站◆个人网站2、网页的分类(1)按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类。

(2)按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页。

3、网页设计的相关知识(1)设计网页的原则A、整体规划B、鲜明的主题C、善用图像D、醒目的导航E、及时更新F、易记的网站名称G、通用网页H、动画适量(2)网页设计的一般步骤A、规划网站B、收集整理资源C、配置站点D、创建页面E、测试站点F、发布站点G、维护、更新站点(3)网页制作的常用工具A、网页设计软件Dreamweaver是目前使用最多的网页设计软件。

B、图像处理软件制作网页图像的软件种类繁多,大多数网页设计人员选择的是Fireworks 或Photoshop。

dreamweaver8教案

dreamweaver8教案

dreamweaver8教案第1课Dreamweaver8基础知识教学目的:对Dreamweaver8有总体了解,掌握Dreamweaver8工作界面的组成。

教学重点:掌握工作界面的快捷工具栏,网页编辑窗口,属性面板和浮动面板显示及使用。

教学难点:快捷工具栏的显示及组成、使用,浮动面板的显示与隐藏教学方式:多媒体演示,教师讲解、演示,学生思考分析、记忆。

教学课时:2课时教具使用:多媒体教室投影显示教学内容及过程:1、导入新课:提问学生对网站的了解,internet网与我们生活的联系及重要性。

引发学生思考,带着颖问进入教学课题。

2、讲授新课:多媒体教师操作演示讲解和幻灯片的演示或板书:一、简介Dreamweaver8是著名的“所见即所得”的可视化网站开发工具,是国内外普遍应用的专用网页设计软件。

在国内,它被称为“织梦者”,它不仅提供了强大的网页编辑功能,而且提供了完善的站点管理机制,可以说,它是一个集网页创作和站点管理两大利器于一身的超重量级创作工具。

Dreamweaver8优势:1、所见即所得与兼顾HTML源代码两种模式相互切换编辑。

2、不仅有同类软件的所有功能,而且有自身的许多出色设计理念。

3、无需手写代码,就能轻松创建各种动态效果。

4、有强大的自定义及扩展功能,提高了工作效率。

5、支持跨浏器和层叠样式表。

6、Dreamweaver8最新版本,采用多种先进技术,能够高效地创建极具表现力和动感效果的网页。

7、易学,易用,初学者也可制作精致的网页。

二、Dreamweaver8工作环境1、启动Dreamweaver8从开始菜单启动,出现工作区设置对话框,选择设计器工作区。

设计器是标准的工作区。

2、Dreamweaver8工作界面认识Dreamweaver8工作界面,对掌握和提高制作效率是关键的一步。

(1)、标题栏:左侧有网页标题,所在位置及文件名称,右侧有最小化,最大化和关闭。

(2)、菜单栏:有“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”、“帮助”。

DreamWeaver网页制作公开课教案

DreamWeaver网页制作公开课教案

最新DreamWeaver网页制作公开课教案一、课程简介1. 课程目标:通过本课程的学习,使学员掌握DreamWeaver的基本操作,能够独立制作出满足需求的网页。

2. 课程内容:主要包括DreamWeaver的安装与使用、网页基本结构、HTML 代码、CSS样式、表单、JavaScript等。

3. 适用对象:无基础或有一定基础想进一步学习的网页制作爱好者。

二、教学资源1. 教材:最新版DreamWeaver教程。

2. 软件:DreamWeaver CC 2024。

3. 辅助工具:浏览器、代码编辑器。

三、教学安排1. 课时:共计30课时。

2. 上课方式:线上授课。

3. 课程进度:每课时1小时,每周安排2课时。

四、教学方法1. 讲授:讲解DreamWeaver的基本操作和功能。

2. 演示:展示实例,边操作边讲解。

3. 练习:学员跟练,老师辅导。

4. 答疑:学员提问,老师解答。

五、课程大纲1. 第一课时:DreamWeaver的安装与使用1.1 安装DreamWeaver CC 2024 1.2 启动与界面简介1.3 创建第一个网页2. 第二课时:网页基本结构2.1 HTML基本结构2.2 DreamWeaver的代码视图2.3 插入与编辑文本3. 第三课时:HTML代码3.1 标签3.2 段落与换行3.3 列表标签4. 第四课时:CSS样式4.1 了解CSS4.2 添加内部样式表4.3 应用外部样式表5. 第五课时:表单5.1 表单概述5.2 插入表单元素5.3 表单的高级应用六、第六课时:插入图像与多媒体6.1 插入图像6.2 设置图像属性6.3 插入Flash动画6.4 插入音频与视频七、第七课时:超与锚点7.1 创建超7.2 管理超7.3 创建锚点7.4 使用命名锚点八、第八课时:表格8.1 插入表格8.2 设置表格属性8.3 表格样式与布局8.4 表格排序功能九、第九课时:框架与框架集9.1 了解框架与框架集9.2 创建框架集9.3 插入框架9.4 管理框架内容十、第十课时:HTML5与CSS310.1 HTML5新特性10.2 新增HTML5标签10.3 CSS3样式10.4 响应式设计初步十一、第十一课时:响应式网页设计基础11.1 响应式网页设计概念11.2 使用DreamWeaver的Responsive Design视图11.3 媒体查询的使用11.4 实战:创建一个简单的响应式网页十二、第十二课时:移动端网页优化12.1 移动端网页设计原则12.2 触摸事件与滑动手势12.3 移动端布局技巧12.4 实战:优化一个移动端网页十三、第十三课时:网页布局与排版13.1 盒子模型13.2 浮动与清除13.3 定位与层叠13.4 实战:制作一个排版精美的网页十四、第十四课时:JavaScript基础14.1 JavaScript简介14.2 在DreamWeaver中编写JavaScript14.3 基本语法与数据类型14.4 实战:实现一个简单的JavaScript效果十五、第十五课时:综合实战与作品展示15.1 课程回顾与总结15.2 学员作品展示与点评15.3 网页制作常见问题与解决方法15.4 展望未来:网页制作与发展的趋势重点和难点解析本文主要介绍了最新DreamWeaver网页制作公开课的教案,涵盖了从安装与使用、网页基本结构、HTML代码、CSS样式、表单、JavaScript等基础知识,到响应式网页设计、移动端网页优化、网页布局与排版等高级应用。

中职网页设计与实训整套课件完整版ppt教学教程最全电子讲义教案最新

中职网页设计与实训整套课件完整版ppt教学教程最全电子讲义教案最新
green
黄 色
#FFFF00
yellow
白 色
#FFFFFF
white
任务3.2 网页的基本制作
知识3.2.1 页面属性
建立网页时,需要对网页的“外观”、“链接”、“标题”等进行基本的设置,这些设置需要在“页面属性”中完成。
页面属性对话框
知识3.2.2 META标记
知识2.1.2 网站规划
一 .确定目标群体
在创建一个站点之前,首先要确定站点是给什么人访问的,即确定站点的用户群体,以便于确定在站点内添加的内容、为网站设计不同的视觉内格、色彩效果等。
化妆品网
二 .确定站点功能
确定了站点的目标群体后,就要设计网站需要为这些用户实现哪些愿望和功能,以确定网站各方面的内容及效果要求,例如如果是企业网站,就应立足于企业形象来展开,如果是购物网站,就要强化网站的在线购物等功能。
任务4.1 文本基本操作
文本作为网页中最基本的信息载体,以最直接、最直观的方式使用户获取信息,在网页中有着不可替代的地位与作用,它涵盖的信息量大,插入、编辑操作简便,容易被浏览器下载,不会像图片一样占用太长的等待时间,因此掌握好文本的操作,对于网页制作是最基本的技能。
知识4.1.1 选择性粘帖
Dreamweaver 8网页设计与实训
走进Dreamweaver8
创建本地站点
网页基础知识和基本制作
文本编辑
图像与多媒体的应用
网站链接
表格和布局
框架
表单
模板和库
CSS样式
行为和JavaScript
层和时间轴
整站建设、测试与上传
动态网站制作
项目一 —走进Dreamweaver 8

第8章 网页制作工具Dreamweaver 8

第8章  网页制作工具Dreamweaver 8

图8-14 站点参数设置
8.2 站点管理
所谓站点,可以看做是一系列文档的组合,这些文档之 所谓站点,可以看做是一系列文档的组合, 间通过各种链接关联起来,可能拥有相似的属性,例如, 间通过各种链接关联起来,可能拥有相似的属性,例如,描 述相关的主体,采用相似的设计,或者实现相同的目的等, 述相关的主体,采用相似的设计,或者实现相同的目的等, 也可能只是毫无意义的链接。利用浏览器, 也可能只是毫无意义的链接。利用浏览器,就可以从一个文 档跳转到另一个文档,实现对整个网站的浏览。 档跳转到另一个文档,实现对整个网站的浏览。 8.2.1 本地站点和远端站点 严格地说,站点也是一种文档的磁盘组织形式, 严格地说,站点也是一种文档的磁盘组织形式,它同样 是由文档和文档所在的文件夹组成的。 是由文档和文档所在的文件夹组成的。设计良好的网站通常 具有科学的结构,利用不同的文件夹, 具有科学的结构,利用不同的文件夹,将不同的网页内容分 门别类地保存,这是设计网站的必要前提。结构良好的网站, 门别类地保存,这是设计网站的必要前提。结构良好的网站, 不仅便于管理,也便于更新。 不仅便于管理,也便于更新。
图8-12 常规参数设置中更改工作区
8.1 Dreamweaver简介 Dreamweaver简介
8.1.2 Dreamweaver 8的参数设置 8的参数设置 2.新建文档参数设置 新建文档参数设置用于建立默认的新文档类型和首选参数。 新建文档参数设置用于建立默认的新文档类型和首选参数。 选择“分类”列表中的“新建文档”选项, 选择“分类”列表中的“新建文档”选项,对话框右侧显示出相关 的属性,如图8-13所示。 的属性,如图8 13所示。 所示
图8-5 文档工具栏的常用命令和选项
8.1 Dreamweaver简介 Dreamweaver简介

Dreamweaver8-chs教程 第1章_认识Dreamwaver

Dreamweaver8-chs教程  第1章_认识Dreamwaver

I. II.
应用可视化助理来描画CSS布局 边框或为CSS布局加上颜色; 布局加上颜色; 应用可视化助理可揭示出复杂 的嵌套方案,并改善所选内容 的嵌套方案,
“可视化助理”菜单
1.13
© 2007
第1章
认识 Dreamweaver 8
代码折叠
通过隐藏和展开代码块, 通过隐藏和展开代码块,重点显示想要查看的代码
1.11
© er 8
新的“ 样式” 新的“CSS样式”面板 样式
I. 使用“CSS样式”面板可以跟踪影 样式” 使用“ 响当前所选页面元素( 正在” 响当前所选页面元素(“正在”模 规则和属性, 式)的CSS规则和属性,或影响整 个文档的规则和属性( 全部” 个文档的规则和属性(“全部”模 式); 使用“CSS样式”面板顶部的切换 样式” 使用“ 按钮可以在两种模式之间切换; 按钮可以在两种模式之间切换;
1.3
© 2007
第1章
认识 Dreamweaver 8
本章内容
Dreamweaver 8概述 8概述 Dreamweaver 8的新功能 8的新功能
1.4
© 2007
第1章
认识 Dreamweaver 8
Dreamweaver 8概述 概述
1.1 Dreamweaver 8概述 8概述
2005年8月, 美国 Macromedia公司推出了Dreamweaver 8 年 月 Macromedia公司推出了Dreamweaver Dreamweaver是目前主流的网页设计工具,不仅具有强大的 Dreamweaver是目前主流的网页设计工具,不仅具有强大的 页面 设计功能,而且具有完善的站点管理能力,使用Dreamweaver设计网 设计功能,而且具有完善的站点管理能力,使用Dreamweaver设计网 页将是一个便捷、高效的工作流程 Dreamweaver 8结合了Dreamweaver 的可视化排版功能,融合了 8结合了Dreamweaver Dreamweaver UltraDev的动态数据库页面开发功能和HomeSite的强大 UltraDev的动态数据库页面开发功能和HomeSite的强大 的代码编辑支持

如何使用Dreamweaver8进行网页设计和开发

如何使用Dreamweaver8进行网页设计和开发

如何使用Dreamweaver8进行网页设计和开发第一章:介绍Dreamweaver8Dreamweaver8是一款专业的网页设计和开发工具,由Adobe公司开发。

它可以帮助开发者创建各种类型的网页,包括静态网页、动态网页和响应式网页。

本章将介绍Dreamweaver8的基本特点和功能,以及如何使用它进行网页设计和开发。

第二章:安装和设置Dreamweaver8在开始使用Dreamweaver8之前,首先需要进行安装和设置。

本章将介绍Dreamweaver8的安装过程,包括下载安装包、运行安装程序和输入序列号。

同时,还会介绍如何进行基本的设置,包括语言选择、默认文件夹设置和主题选择等。

第三章:Dreamweaver8的主要界面本章将介绍Dreamweaver8的主要界面,包括工具栏、菜单栏、面板和编辑窗口等。

同时,还会介绍如何自定义界面,根据自己的工作习惯进行布局和设置。

第四章:创建网页文件在Dreamweaver8中,创建网页文件非常简单。

本章将介绍如何创建一个新的网页文件,包括选择页面模板、设置页面属性和编辑页面内容等。

同时,还会介绍如何导入现有的网页文件,并进行必要的转换和调整。

第五章:网页设计基础网页设计是Dreamweaver8的核心功能之一。

本章将介绍网页设计的基础知识,包括颜色选择、字体选择和布局设计等。

同时,还会介绍如何使用Dreamweaver8中的设计工具,如图像处理工具和样式编辑器等。

第六章:网页开发基础网页开发是Dreamweaver8的另一个重要功能。

本章将介绍网页开发的基础知识,包括HTML、CSS和JavaScript等。

同时,还会介绍如何使用Dreamweaver8中的代码编辑器和调试工具,进行网页开发和调试。

第七章:网页优化和测试在完成网页设计和开发后,需要对网页进行优化和测试。

本章将介绍如何使用Dreamweaver8中的网页优化工具,包括代码优化、图像优化和链接检查等。

Dreamweaver8¸0网站与网页制作教程

Dreamweaver8¸0网站与网页制作教程
第5章 表格和样式表
Chapter 5 Table and CSS

页面的布局对于网页制作来说很重要,在进行 布局时可使用表格、层和框架等网页布局工具, 使页面布局更合理、更美观。表格、层和框架 各有优点、缺点,在布局页面时应结合使用多 种布局工具,设计出理想的页面。



“亘”字型网页布局结构:适合内容较少、整个 站点页面内容相似的网站。 “目”字型布局结构:该结构页面信息量大,一 般应用于大型网站。 “匚”右框型布局结构:这种布局方式在网页制 作中较为广泛,初学者容易上手。
1. 选择整个表格 法一:单击表格的左上角或单击右边或 底部边缘的任意位置 法二:单击表格中的任意单元格,然后 在文档窗口左下角的标签选择器中选择 table标签 法三:单击单元格,选择“修改”菜单 下的“表格”子菜单中的“选择表格”

5.2 表格的选定
Selecting the table
典型案例——用CSS样式设置文本格式

下面练习用CSS样式为“银杏树”网页进行文 本格式设置。
最终效果图
让背景不跟随内容 滚动

背景图片是很多网页设计者经常添加的东西, 当网页内容超出一屏时,拖动滚动条,背景图 片会与内容相对静止的一起滚动,那么能否锁 定背景不跟随滚动呢?当然可以。下面就来试 一下。
4)列表
– “位置”下拉列表框:在其中可以选
择列表文本是否换行和缩进。其中 “内”选项表示当列表过长而自动换 行时不缩进;“外”选项表示当列表 过长而自动换行时以缩进方式显示。
设置“列表”样式对话框
3.应用CSS样式

自定义样式通常是针对网页中个别元素 进行设置时而用到的。其名称前必须以 “.”开始,在网页中自定义样式元素有 两种方法:

第二章Dreamweaver网页设计技术

第二章Dreamweaver网页设计技术
用布局单元格在布局表格中进行详细设计,产生组成网格的行和列。 布局单元格可以占据数行数列,但不能相互重叠。如果两个布局单元格离 的太近,系统会自动将两个单元格靠齐以维持不重叠的结构。如图所示。
用布局表格设计页面举例,如图所示。
2.6 层的使用
层可以放在网页任何位置,比表格更灵活,常用来作为表格的补充。 层中不但可以插入文本、图像、表格等对象,还可以在层中嵌套层。
2.保存文档
“文件”菜单→“保存”→选择与逻辑站点相关联的本地站点(如: e:\weblx)→为文件起名→单击“保存”→在Dreavweaver站点面板中单 击刷新按钮。可以看到新建的文件被显示在站点面板中。
3.页面属性
“修改”菜单→“页面属性”,打开“页面属性”对话框,如图所示.
4.使用CSS样式格式化文本
4. 用布局模式布局页面
布局表格用来完成稍微复杂一点的页面布局,还可以与标准表格相互 转换。先用布局表格给页面划分大的区域,再用布局单元格对页面做细致的 划分。 如图所示。
(1)绘制布局表格和嵌套的布局表格
最外层的布局表格只能上下排列,嵌套的布局表格可以上下左右排列。 如图所示。
(2)绘制布局单元格
(4) 拆分单元格
单击一个单元格→“修改”菜单→“表格”→“拆分单元格”→在对话 框中定义拆分的行数或列数,或单击属性面板中的“拆分单元格”按钮。 (5) 使用剪切、复制、粘贴命令对所选单元格进行操作,能保留单元格
的格式设置。
3. 设置表格属性 选定表格后,在表格的属性面板中设置表格属性。如图所示。
2.文档位置和路径 超链接有3种类型:绝对路径、相对路径和基于站点的相对路径。 (1)如果超链接路径中包含所使用的协议,而且与链接源点所处位置无关, 称这种链接路径为绝对路径,例如,一个使用http协议的绝对路径可以写 为:/index.htm。 (2)如果超链接路径描述源点与锚点相对位置,也就是由当前文件所在位 置引起的路径,称这种连接路径为相对路径。使用相对路径的站点结构 和文档相对位置不变,整个本地站点上传到服务器时文档之间的链接关 系不变。所以,提倡使用相对路径。 (3)从站点根目录开始的路径称为站点根目录相对路径,提供从站点文件 夹到文档的路径,与起始端点的位置无关,用斜线“/”表示站点根目录。 例如:/liran/index.htm。这种路径能够保持站点结构和文档相对位置不变, 也被提倡使用。

DreamWeaver网页制作公开课教案

DreamWeaver网页制作公开课教案

最新DreamWeaver网页制作公开课教案一、课程简介1. 课程目标:通过本课程的学习,使学员掌握DreamWeaver的基本操作,能够独立制作出满足需求的网页。

2. 课程内容:涵盖DreamWeaver的安装与启动、界面熟悉、基本操作、HTML 代码编辑、CSS样式设置、表单创建、特效实现等。

3. 适用对象:无网页制作经验的初学者,以及对DreamWeaver有一定了解,希望进一步提高的学员。

二、教学准备1. 软件环境:安装有最新版DreamWeaver的计算机。

2. 硬件环境:投影仪、计算机、投影屏幕等。

3. 教学资料:教案、PPT、案例文件、素材文件等。

三、教学安排1. 课时:共计10课时,每课时45分钟。

2. 课程安排:第1课时:DreamWeaver的安装与启动、界面熟悉第2课时:DreamWeaver基本操作第3课时:HTML代码编辑第4课时:CSS样式设置第5课时:表单创建与编辑第6课时:图像与多媒体操作第7课时:超的使用第8课时:表格制作第9课时:框架页面布局第10课时:综合案例实战四、教学方法1. 讲授法:讲解DreamWeaver的基本操作、功能及使用技巧。

2. 演示法:通过实际操作,展示如何制作网页,使学员更好地理解与掌握。

3. 练习法:安排课后练习,巩固所学知识,提高实际操作能力。

4. 案例教学法:通过分析与制作案例,使学员掌握网页制作的实际应用。

五、课程评价1. 课堂参与度:评估学员在课堂上的积极参与程度,提问、回答问题等。

2. 课后练习:评估学员课后练习的完成情况,包括正确性和创新性。

3. 课程总结:要求学员在课程结束后,提交一份课程总结报告,概括所学内容、收获及改进建议。

4. 综合案例实战:评估学员在综合案例实战中的表现,包括设计思路、制作技巧等。

六、教学内容1. 图像与多媒体操作插入与编辑图像插入与编辑多媒体文件图像映射的使用数据检查器的应用2. 超的使用管理超创建网站地图检查的有效性七、教学内容3. 表格制作创建表格调整表格结构应用表格样式利用表格进行页面布局4. 框架页面布局创建框架设置框架属性处理框架中的内容消除框架边框八、教学内容5. CSS样式设置CSS基本概念创建与应用样式管理样式表利用CSS进行页面美化6. 表单创建与编辑添加表单元素设置表单属性验证表单数据九、教学内容7. 网站项目管理规划网站结构管理网站资源优化网站性能部署与维护网站8. 综合案例实战案例一:个人博客页面制作案例二:产品展示页面制作案例三:在线问卷调查制作案例四:响应式网页制作十、教学内容9. 扩展学习与资源探索DreamWeaver扩展插件了解网页设计趋势与技术推荐学习资源与社区参与评估自身学习成果与设定目标10. 课程总结与反馈回顾课程重点与个人收获分析学习中的挑战与解决方案提交课程反馈与改进建议规划后续学习路径与目标设定通过上述十个章节的教学内容,学员将能够全面掌握DreamWeaver网页制作的基本技能,并能够独立完成网页设计与制作任务。

Dreamweaver网页制作教案

Dreamweaver网页制作教案

Dreamweaver网页制作教案第一章:Dreamweaver概述1.1 课程介绍了解Dreamweaver作为网页制作工具的优势熟悉Dreamweaver的工作界面1.2 创建和管理网页创建新文档打开和保存网页管理标签库1.3 实践操作制作一个简单的网页学会使用Dreamweaver的实时视图和代码视图第二章:网页基本结构2.1 网页元素文本图像表格表单2.2 排版和格式化字体和大小颜色和样式段落对齐和间距2.3 实践操作制作一个包含文本、图像和的网页学习使用Dreamweaver的排版和格式化工具第三章:CSS样式3.1 CSS介绍了解CSS的作用和优势熟悉CSS的基本语法3.2 创建和应用CSS样式创建样式表应用样式到网页元素编辑和删除样式3.3 实践操作制作一个使用CSS样式的网页学习使用Dreamweaver的CSS面板第四章:网页布局4.1 布局技术表格布局CSS布局框架布局4.2 常用布局方法固定布局可变布局响应式布局4.3 实践操作制作一个使用表格布局的网页学习使用CSS布局和响应式布局第五章:表单和交互5.1 表单元素表单标签输入框选择框文件5.2 验证和提交表单表单验证方法提交表单到服务器接收服务器返回的数据5.3 实践操作制作一个简单的表单页面学习表单的验证和交互功能第六章:Dreamweaver 网站管理6.1 网站结构规划了解网站结构的重要性学习如何规划网站结构熟悉网站的目录和文件组织方式6.2 站点设置和管理创建和定义站点管理站点文件和目录更新和网站文件6.3 实践操作规划并创建一个简单的网站结构配置和管理Dreamweaver 站点第七章:Dreamweaver 模板和框架7.1 模板的概念和应用理解模板的作用学习如何创建和使用模板掌握模板的插入点和使用技巧7.2 框架和框架集了解框架和框架集的概念学习如何创建和编辑框架掌握框架的布局和内容管理7.3 实践操作创建一个简单的模板文件使用模板创建网站的多个页面制作一个使用框架的网页布局第八章:Dreamweaver 动画和多媒体8.1 动画技术概述了解Dreamweaver 支持的视频和动画格式学习如何插入和编辑动画元素8.2 多媒体元素的应用插入图像、音频和视频设置多媒体属性和行为掌握交互式多媒体元素的制作8.3 实践操作制作一个包含动画和多媒体元素的网页学习使用Dreamweaver 的行为面板为网页添加交互功能第九章:Dreamweaver 网页编程9.1 行为和事件理解行为和事件的概念学习如何使用行为为网页添加功能掌握常见行为的使用方法9.2 JavaScript 基础了解JavaScript 的基本概念学习如何在Dreamweaver 中编写JavaScript 代码掌握Dreamweaver 的JavaScript 调试工具9.3 实践操作编写简单的JavaScript 代码为网页添加功能学习使用Dreamweaver 的JavaScript 面板和调试工具第十章:Dreamweaver 网站发布和维护10.1 网站测试学习网站在不同浏览器和设备上的测试方法掌握网站性能测试和优化技巧10.2 网站发布了解网站发布的流程和注意事项学习如何使用Dreamweaver 发布网站10.3 网站维护和更新学习网站的日常维护和更新技巧掌握网站安全和备份方法10.4 实践操作对一个网站进行全面的测试和优化发布和维护一个简单的网站第十一章:Dreamweaver 数据库和动态内容11.1 数据库基础了解数据库的概念和作用学习如何连接和操作不同类型的数据库11.2 动态内容创建学习如何创建动态网页和表单掌握Dreamweaver 内置的服务器模型和数据源11.3 实践操作连接一个数据库并创建一个动态表单使用Dreamweaver 插入动态内容到网页第十二章:Dreamweaver 扩展性和高级技巧12.1 扩展Dreamweaver学习如何安装和使用Dreamweaver 插件和扩展掌握Dreamweaver 扩展的创建和分享12.2 高级网页技术学习如何使用CSS3 和HTML5掌握响应式设计和移动网页制作技巧12.3 实践操作制作一个使用CSS3 和HTML5 的网页创建一个响应式设计的网页layout第十三章:Dreamweaver 与其他工具的集成13.1 图像和图形编辑工具学习如何使用Adobe Photoshop 和Fireworks 与Dreamweaver 协同工作掌握图像和图形的导入和编辑技巧13.2 代码编辑和调试工具学习如何使用Dreamweaver 的代码编辑功能掌握使用外部代码编辑器和调试工具的技巧13.3 实践操作使用Photoshop 和Fireworks 制作网页素材在Dreamweaver 中导入和应用图像和图形第十四章:Dreamweaver 项目管理和团队协作14.1 项目管理学习如何管理Dreamweaver 项目文件和资源掌握Dreamweaver 项目的备份和版本控制14.2 团队协作了解团队协作的重要性学习如何在团队中使用Dreamweaver 和版本控制系统14.3 实践操作管理一个Dreamweaver 项目并实现版本控制在团队中使用Dreamweaver 进行协作第十五章:Dreamweaver 综合实战项目15.1 项目规划和设计学习如何进行项目规划和设计熟悉项目的时间管理和资源分配15.2 项目实施学习如何实施Dreamweaver 项目掌握项目的时间管理和问题解决技巧15.3 项目评估和优化学习如何评估Dreamweaver 项目的效果掌握项目的优化和维护技巧15.4 实践操作完成一个Dreamweaver 综合实战项目进行项目评估和优化以提高网站质量和性能重点和难点解析重点:Dreamweaver的工作界面和基本操作网页基本结构元素的插入和编辑CSS样式的创建和应用网页布局技术,包括表格布局、CSS布局和响应式布局表单的创建和交互功能的实现网站的管理和站点的设置模板和框架的使用动画和多媒体元素的插入网页编程,包括行为和事件的应用、JavaScript基础网站的测试、发布和维护数据库连接和动态内容的创建扩展性和高级技巧的运用与其他工具的集成和项目管理的实践团队协作和综合实战项目的实施难点:CSS样式的复杂应用和调试网页布局的高级技巧,如响应式布局的实现表单验证和交互逻辑的编写网站管理和站点配置的细节处理模板和框架的精细操作JavaScript代码的编写和调试数据库连接和动态内容的管理扩展性和高级技巧的深入应用团队协作和项目管理的策略制定综合实战项目的规划和实施通过理解和掌握这些重点和难点,学生将能够熟练使用Dreamweaver进行网页制作,并能够应对真实世界的网页设计挑战。

《Dreamweaver网页设计》教案

《Dreamweaver网页设计》教案

《Dreamweaver网页设计》教案一、教学目标1. 了解Dreamweaver的基本功能和操作界面。

2. 学会使用Dreamweaver创建、编辑和管理网页。

3. 掌握Dreamweaver中的基本标签和属性。

4. 学会使用Dreamweaver的布局功能进行网页设计。

5. 掌握Dreamweaver的预览和发布网页的方法。

二、教学内容1. Dreamweaver的基本功能和操作界面介绍Dreamweaver的启动和关闭方法,熟悉Dreamweaver的操作界面,包括菜单栏、工具栏、状态栏等。

2. 创建、编辑和管理网页学习创建新网页的方法,编辑网页的内容,删除和复制网页元素,以及管理网页的打开和保存。

3. 基本标签和属性介绍HTML基本标签,如标签、段落标签、图片标签等,并学习如何使用这些标签在Dreamweaver中创建和编辑网页内容。

4. 布局功能学习使用Dreamweaver的布局功能,包括表格、框架和Div标签,进行网页的设计和排版。

5. 预览和发布网页学习在Dreamweaver中预览网页的方法,以及如何将网页发布到互联网上。

三、教学方法1. 讲授法:讲解Dreamweaver的基本功能、操作界面和基本标签。

2. 演示法:展示如何使用Dreamweaver进行网页设计和排版。

3. 练习法:让学生动手实践,创建和编辑网页。

4. 提问法:引导学生思考和解决问题。

四、教学步骤1. 启动Dreamweaver,熟悉操作界面。

2. 创建新网页,学习编辑网页内容。

3. 学习使用基本标签,如、段落和图片标签。

4. 练习使用表格、框架和Div标签进行网页布局。

5. 预览和保存网页,了解发布网页的方法。

五、教学评价1. 课后作业:让学生独立完成一个简单的网页设计,检验对Dreamweaver的掌握程度。

2. 课堂练习:在课堂上让学生动手实践,实时评价学生的操作能力。

3. 学生互评:让学生互相评价,促进学习交流。

中文版Dreamwear8网页设计教程第一章

中文版Dreamwear8网页设计教程第一章


作业标准记得牢,驾轻就熟除烦恼。2 020年1 2月12 日星期 六12时4 0分40 秒00:40:4012 December 2020

好的事情马上就会到来,一切都是最 好的安 排。上 午12时4 0分40 秒上午1 2时40 分00:40:4020.1 2.12

一马当先,全员举绩,梅开二度,业 绩保底 。20.12. 1220.1 2.1200:4000:40 :4000:4 0:40De c-20
按表现形式分类
按网页的表现形式可将网页分为静 态网页和动态网页。
首页 末页 向上 向下 返回 结束 调音
《中文Dreamweaver 8网页设计培训教程》
网页中的常用术语
首页 末页 向上 向下 返回 结束 调音
《中文Dreamweaver 8网页设计培训教程》
万维网(www)是World Wide Web的中文简称,也称为3W网,它的 本质是一种基于超级文本技术的交互式 信息浏览检索工具,是Internet提供的 应用最普及、功能最丰富、使用方法最 简便的信息服务,用户可通过它在 Internet上浏览、编辑、传递超文本格 式的文件(即.html格式文件)。
首页 末页 向上 向下 返回 结束 调音
《中文Dreamweaver 8网页设计培训教程》
什么是网页和网站
➢什么是网页 ➢什么是网站
首页 末页 向上 向下 返回 结束 调音
《中文Dreamweaver 8网页设计培训教程》
什么是网页
网页是由 HTML(超级文 本标识语言)或 者其他语言编写 的,通过IE浏览 器编译后供用户 获取信息的页面, 它又称为Web页, 其中可包含文字、 图像、表格、动 画和超级链接等 各种网页元素。

《Dreamweaver网页设计》教案

《Dreamweaver网页设计》教案

《Dreamweaver网页设计》教案第一章:Dreamweaver简介1.1 课程目标:了解Dreamweaver的发展历程和功能特点掌握Dreamweaver的基本操作界面1.2 教学内容:Dreamweaver的历史和发展Dreamweaver的功能特点Dreamweaver的操作界面及基本操作1.3 教学方法:讲解与演示相结合学生实际操作练习1.4 教学资源:PowerPoint课件Dreamweaver软件1.5 教学评估:课堂问答学生操作练习情况第二章:网页制作基础2.1 课程目标:掌握HTML标签的使用学会使用Dreamweaver的代码视图2.2 教学内容:HTML标签的基本概念和使用方法Dreamweaver代码视图的操作方法常用的HTML标签及其功能2.3 教学方法:讲解与演示相结合学生实际操作练习2.4 教学资源:PowerPoint课件Dreamweaver软件2.5 教学评估:课堂问答学生操作练习情况第三章:图像和多媒体的使用3.1 课程目标:学会在网页中插入图像和多媒体文件了解图像和多媒体文件的基本属性设置3.2 教学内容:图像和多媒体文件在网页中的作用在Dreamweaver中插入图像和多媒体文件的方法图像和多媒体文件的基本属性设置3.3 教学方法:讲解与演示相结合学生实际操作练习3.4 教学资源:PowerPoint课件Dreamweaver软件图像和多媒体文件素材3.5 教学评估:课堂问答学生操作练习情况第四章:超的使用4.1 课程目标:学会创建和设置超了解超的类型及应用场景4.2 教学内容:超的概念和作用在Dreamweaver中创建和设置超的方法超的类型及应用场景4.3 教学方法:讲解与演示相结合学生实际操作练习4.4 教学资源:PowerPoint课件Dreamweaver软件超素材4.5 教学评估:课堂问答学生操作练习情况第五章:表格的使用5.1 课程目标:学会使用Dreamweaver创建和编辑表格了解表格的基本属性设置5.2 教学内容:表格在网页中的作用在Dreamweaver中创建和编辑表格的方法表格的基本属性设置5.3 教学方法:讲解与演示相结合学生实际操作练习5.4 教学资源:PowerPoint课件Dreamweaver软件表格素材5.5 教学评估:课堂问答学生操作练习情况第六章:CSS样式应用6.1 课程目标:掌握CSS样式的概念和作用学会在Dreamweaver中创建和应用CSS样式6.2 教学内容:CSS样式的基本概念Dreamweaver中的CSS面板操作创建和应用CSS样式的方法CSS选择器及属性设置6.3 教学方法:讲解与演示相结合学生实际操作练习6.4 教学资源:PowerPoint课件Dreamweaver软件CSS样式素材6.5 教学评估:课堂问答学生操作练习情况第七章:布局页面7.1 课程目标:学会使用Dreamweaver进行页面布局了解常用的页面布局方法7.2 教学内容:页面布局的基本概念使用Dreamweaver的布局工具进行页面布局常用的页面布局方法(如:固定布局、百分比布局、弹性布局等)7.3 教学方法:讲解与演示相结合学生实际操作练习7.4 教学资源:PowerPoint课件Dreamweaver软件页面布局素材7.5 教学评估:课堂问答学生操作练习情况第八章:表单的使用8.1 课程目标:学会在网页中创建和使用表单了解表单的基本属性设置8.2 教学内容:表单在网页中的作用在Dreamweaver中创建和编辑表单的方法表单的基本属性设置表单元素(如:文本框、复选框、单选按钮等)的使用8.3 教学方法:讲解与演示相结合学生实际操作练习8.4 教学资源:PowerPoint课件Dreamweaver软件表单素材8.5 教学评估:课堂问答学生操作练习情况第九章:Dreamweaver与服务器端编程9.1 课程目标:了解Dreamweaver与服务器端编程的关系学会在Dreamweaver中插入服务器端代码9.2 教学内容:服务器端编程语言(如:PHP、JavaScript等)的基本概念在Dreamweaver中插入服务器端代码的方法Dreamweaver与服务器端代码的交互方式9.3 教学方法:讲解与演示相结合学生实际操作练习9.4 教学资源:PowerPoint课件Dreamweaver软件服务器端代码素材9.5 教学评估:课堂问答学生操作练习情况第十章:综合案例实训10.1 课程目标:学会运用所学知识完成一个完整的网页设计项目提高实际操作能力和网页设计水平10.2 教学内容:网页设计项目的需求分析网页设计的基本流程综合运用所学知识完成网页设计项目10.3 教学方法:学生分组进行实际操作教师指导与解答疑问10.4 教学资源:Dreamweaver软件案例素材及设计工具10.5 教学评估:学生完成的项目成果展示重点和难点解析第一章:Dreamweaver简介1. Dreamweaver的功能特点2. Dreamweaver的操作界面及基本操作难点解析:Dreamweaver功能特点的深入理解,特别是与其它网页编辑器的区别。

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

初识Dreamweaver 8课题:Dreamweaver8简介及创建文档一、教学基本内容1、什么是网页和网站2、网页的分类3、网页中的常用术语4、网页设计的相关知识5、认识Dreamweaver 86、Dreamweaver 8的基本操作7、Dreamweaver 8工作界面介绍二、课型:新授课三、课时:1个课时四、教学重点与难点重点:什么是网页和网站难点:1、网页的分类2、网页设计的一般步骤3、Dreamweaver 8的基本操作五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识,激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、什么是网页和网站(1)网页网页是由HTML(超级文本标识语言)或者其他语言编写的,通过IE浏览器编译后供用户获取信息的页面,它又称为Web页,其中可包含文字、图像、表格、动画和超级链接等各种网页元素。

(2)网站网站就是一个或多个网页的集合。

从广义上讲,网站就是当网页发布到Internet上以后,能通过浏览器在Internet上访问的页面。

◆门户网站◆职能网站◆专业网站◆个人网站2、网页的分类(1)按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类。

(2)按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页。

3、网页设计的相关知识(1)设计网页的原则A、整体规划B、鲜明的主题C、善用图像D、醒目的导航E、及时更新F、易记的网站名称G、通用网页H、动画适量(2)网页设计的一般步骤A、规划网站B、收集整理资源C、配置站点D、创建页面E、测试站点F、发布站点G、维护、更新站点(3)网页制作的常用工具A、网页设计软件Dreamweaver是目前使用最多的网页设计软件。

B、图像处理软件制作网页图像的软件种类繁多,大多数网页设计人员选择的是Fireworks 或Photoshop。

C、动画制作软件网页动画制作中最常用的软件非Flash莫属。

4、Dreamweaver 8的基本操作A、启动Dreamweaver 8B、新建空白HTML网页C、保存网页文档D、预览网页效果E、退出Dreamweaver 8第一章Dreamweaver8概述课题:Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型:新授课三、课时:1个课时四、教学重点与难点重点:熟悉Dreamweaver8工作界面中各个工具的作用难点: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课件进行演示。

第二章创建与规划站点课题:规划站点及创建静态站点一、教学基本内容1、站点规划概念2、站点规划的方法3、站点的组成4、定义站点二、课型:新授课三、课时:2个课时四、教学重点与难点重点:1、站点组成2、如何创建静态站点难点:1、站点的定义2、编辑、删除站点五、教学目的1、掌握建立静态站点的流程2、掌握静态站点的基本操作六、教学过程1、复习引入由上节所学习的建立HTML网页引出站点概念2、讲授新课(1)站点规划概念及方法概念:所谓本地站点,就是指定本地硬盘中存放远程站点所有文档的文件夹方法:规划网站一般需要从3个方面去思考,即网站的主题、网站的内容和网站的对象。

(2)创建本地站点站点组成:Dreamweaver 8站点由3部分组成,具体内容取决于环境和所开发的Web站点类型。

包括本地文件夹、远程文件夹、动态页文件夹定义站点:(01)选择“站点”|“新建站点”选项,或者选择“站点”|“管理站点”选项,在弹出的“站点管理”对话框中单击“新建”按钮,弹出对话框,在“基本”选项卡的站点名称输入框中输入所要创建站点的名称,如图2-5所示(02)输入站点名称后,单击“下一步”按钮,在弹出的是否使用服务器技术对话框中,根据自己所制作网页的类型,确定是否使用服务器技术。

在此制作静态页面,因此不使用服务器技术,如图2-6所示。

(03)单击“下一步”按钮,在弹出的设置站点文件夹对话框中,选择或输入一个本地文件夹作为“本地站点文件夹”,如图2-7所示。

(04)选择了本地站点文件夹后,单击该对话框中的“下一步”按钮,进入设置是否与远程服务器相连的对话框,在这里选择“无”,设置为不与远程服务器相连,如图2-9所示。

(05)单击“下一步”按钮,便会显示在站点定义向导中所选择设置的详细报告,如果感觉满意,单击“完成”按钮,完成本网站的创建,如图2-10所示;否则单击“上一步”按钮重新修改各项设置。

(3)站点的基本操作其基本操作包括编辑、复制、删除站点。

3、巩固练习练习站点的建立,及其基本操作。

七、作业处理在课堂上要求每一个同学在F盘下建立一个名为“我的站点”的文件夹,在dreamweaver中创建一个静态站点,将站点信息存放到我的站点文件夹中。

八、教具所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。

课题:搭建动态网站服务器及创建动态站点一、教学基本内容1、安装IIS2、动态站点与静态站点的区别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所示(3)设置“编辑别名”对话框。

选中“共享文件夹”单选按钮,在弹出的“编辑别名”对话框中将“别名”设置为site;在“访问权限”中选择“读取”;在“应用程序权限”中选择“脚本”,如图2-20所示。

最后单击“确定”按钮关闭对话框,便完成了定义动态站点的准备工作。

<02>进入“高级”选项卡。

(1)选择“站点”|“新建站点”选项,选择“站点定义”对话框中的“高级”选项卡。

(2)从“分类”列表框中选择“本地信息”(默认选项)选项,如图2-21所示。

<03>设置“本地信息”的各参数(见图2-22<04>设置“测试服务器”的各参数(见图2-23)。

<05>显示结果。

(3)测试站点<01>将ch02\ test.asp文件复制到C:\site文件夹中,并使用Dreamweaver 8 打开test.asp。

<02>单击浏览器中“预览/调试” 按钮,或者按F12键在浏览器中运行test.asp页面。

出现如图2-25所示的成功页面。

若浏览器提示找不到服务器,则需重新搭建ASP服务器。

3、巩固练习练习站点的建立,及其基本操作。

七、作业处理在课堂上要求每一个同学在F盘下建立一个名为”我的动态站点”的文件夹,将其设置为虚拟目录,在dreamweaver中创建一个动态站点,将站点信息存放到我的动态站点文件夹中。

八、教具所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。

第三章文本及其格式化课题:输入文本及其格式化一、教学基本内容1、输入普通文本2、插入符号、日期3、使用项目列表二、课型:新授课三、课时:2个课时四、教学重点与难点重点:1、插入符号、空格和日期2、使用项目列表难点:1、项目列表五、教学目的1、掌握文本输入方法2、掌握日期的插入3、掌握项目列表的使用六、教学过程1、引入首先例用一个已完成的网页,让学生来看别人的设置,由此引入文本的格式化。

2、讲授新课(1)文本的输入两种方法:a:直接在文档窗口中输入文本。

即先选择要插入文本的位置,然后直接输入文本。

b:在其他编辑器中复制已经生成的文本,然后切换到Dreamweaver 8文档窗口中,将选取插入点,然后选择“编辑”|“粘贴”选项。

(2)创建项目列表类型:无序列表、有序列表、定义列表、目录列表和菜单列表。

(3)插入日期3、巩固练习练习各种项目列表的使用七、作业处理要求每一个同学建立一个名为“我的网页”的空白文档,在网页中输入文字,然后在右下角插入日期,在内容当中便用有序列表。

八、教具所用的教室为多媒体实验室,因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。

课题:CSS样式一、教学基本内容1 、演示并讲解 CSS 的应用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 常用属性与值六、教学过程向学生演示多个项目:成品站点,分阶段演示和分析此网页的设计流程和过程,在每个阶段演示完毕后,让学生对此阶段进行巩固。

相关文档
最新文档