2022年网站建设实训教案 .pdf
《2022年网站建设实训教案 .pdf》由会员分享,可在线阅读,更多相关《2022年网站建设实训教案 .pdf(45页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、石家庄计算机职业学院教案(实训教案)编写格式与基本要求一、概念实训教案又称课程实训指导,是任课教师实训教学的实施方案。任课教师应遵循专业教学计划制订的培训目标,以教学大纲为依据,在熟悉教材、了解学生的基础上,结合教学实践经验,提前编写设计好课程的实训指导。实训教案一般以独立的实训内容为单位设计编写。二、基本格式1、教案封面如表一2、每次课教案包含的内容如表二(1)教案首页主要包括课次,学时,实训题目,实训目的,实训重点,实训难点,实训仪器或实训环境,实训方法。(2) 、续页主要包括实训内容和步骤,补充内容和时间分配。(3) 、尾页主要包括思考题、作业题、讨论题,课后总结和分析。三、印制教案要求
2、用 A4型纸张;字体用五号宋体,标题加黑;边距(mm ) :上 20、下 15、左 20、右 15。页码居中、格式为“ 1” 。三、编写要求1、明确教学目标。2、将课程内容及其结构与教学对象的认识结构有机对应,构架教学内容的逻辑路线,设计讲述策略。3、科学安排进度,突出重点,讲清难点,注重启发。4、精心选用教学手段,注明其使用时机。5、详略得当,书写工整,项目齐全。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页,共 45 页 - - - - - - - - - 石家庄计算机职
3、业学院电子商务网站建设(实训)教案系部:电子商务任课教师:孙悦教师职称:授课对象:06 电子商务 1 班、 2 班课程学时:24学年学期:2007-2008 学年第二学期名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页,共 45 页 - - - - - - - - - 第1 次课,学时2 教案编写时间实训题目Dreamwerver 的安装和启动,安装IIS ,实训目的:学生掌握IIS 的安装与调试,能建设站点,制作简单的页面实训重点:IIS 的安装与调试站点的建设实训难点:实训
4、器材或实训环境:机房,系统安装盘,dreamweaver 软件环境实训方法:上机练习名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页,共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配一、 IIS 的安装调试添加 Internet 信息服务组件,插入安装盘,安装。调试:在浏览器地址栏输入http:/localhost/ 二、建立站点步骤:(1) 选择【站点】【新建站点】命令,打开【站点定义】对话框,在【基本】选项卡的【您打算为您的站点起什么名字?
5、】文本框中输入站点名称,本例输入My site。(2) 单击【高级】标签,在【高级】选项卡中设置本地站点的参数,(3) 在对话框左侧的【分类】列表中显示了站点设置的多种类型选项,从中选定不同选项后,其右侧选项卡中将显示不同的设置内容,选择【本地信息】选项可设置本地站点。(4) 在【站点名称】文本框中输入当前编辑的站点名称。本例用My site 作为站点的名称。设计者可能会创建多个站点,站点名称是站点的标识,便于 Dreamweaver MX对各个站点分别管理。站点名称不能含有“ ” 、“/ ”、“ : ” 、“ ;” 、“*”、“ ?” 、“ ” 、“ ” 、 “ ” 符号。(5) 在【本地根
6、文件夹】文本框中输入本地站点所对应的本地根文件夹,指明当前创建的网页所在的位置。单击文本框右侧的按钮,可用浏览的方式输入本地站点的路径。若在文件列表区域右击,可利用快捷菜单新建一个文件夹,并可将其指定为本地根文件夹。(6) 选中【自动刷新本地文件列表】复选框后,当设计者将文件复制到站点有关的文件夹中时,系统会自动更新站点文件列表。如果不选该复选框,则要单击站点管理器窗口中的【刷新】按钮,才能自动更新站点的文件列表。(7) 在【默认图像文件夹】文本框中输入本地站点所对应的图像文件夹,指明当前创建的网页所用图片的位置。单击文本框右侧的按钮,可用浏览的方式输入本地站点的路径。(8) 在【 HTTP
7、地址】文本框中,输入当前网页将要使用的网址。如果设计者已经申请了域名,可 在此文本框中输入申请好 的域名。例如网 站的网址是http: /202.121.160.100 ,可将此网址输入到【HTTP 地址】的文本框中。(9) 选中【缓存】复选框后,Dreamweaver MX 会给这个本地站点设置一个缓存,以提高站点管理的速度。(10) 完成以上设置后,单击【确定】按钮,新的本地站点就创建完毕。三、制作一个网页,设置其背景,图片和文字制作要求如下:(1) 页面的背景图片为bg0000.jpg;(2) 在合适的位置插入图片earth.gif ;(3) 在网页中输入横排带阴影的文字“Busines
8、stoCustomer” 和“ 欢迎访问电子商务网站 ” ;(4) 将网页用welcome.htm 为名保存在本地站点My site 中。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页,共 45 页 - - - - - - - - - 思考题作业题讨论题课后总结分析名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页,共 45 页 - - - - - - - -
9、- 第2 次课,学时2 教案编写时间实训题目网页文档的格式化、网页元素的插入、超级链接的设计方法、实训目的:学生掌握网页文档的格式化、网页元素的插入、超级链接的设计方法、实训重点:网页元素的插入,超级链接的设计实训难点:实训器材或实训环境:机房, Dreamweaver 软件环境实训方法:实训内容和步骤补充内容和时间分配名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页,共 45 页 - - - - - - - - - 一、制作一个符合下列要求的网页文件,(1) 将 ch04 文
10、件夹中Word 文件 “ 新书精选 .doc ” 转换成 HTML 文件 newbook.htm 。(2) 在新的 Web 页面中导入HTML 文件 newbook.htm , 并设置页面背景图片为img文件夹中的bg0003.jpg。(3) 添加标题 “ 书海指南 ” ,将其格式设置为:【标题 1】“ 华文行楷 ” 、“ 红色” 、“ 居中” 、“ 加粗 ”(4)用 HTML 标记【标题2】 、 【标题 3】 【标题 6】分别格式化后5 段文字,并给这些文字设置不同的颜色。(5)将网页用newbook.htm 为名保存在本地站点的根文件夹My site 中。二、1.插入水平线(1)在网页中选
11、择水平线插入点的位置。(2) 单击【插入】面板中【常用】选项卡的【水平线】按钮,或选择【插入】|【水平线】命令在网页中插入一条水平分隔线。(3) 选中水平线,在【属性】面板上可编辑其属性,改变水平线的形状,如图4-8所示。(4)单击属性面板中按钮,在编辑标签框中给水平线设置颜色,如图4-9 所示。(5)按 F12 键预览水平线的效果。2. 插入日期(1)在网页中选择日期插入点的位置。(2)单击【插入】面板中【常用】选项卡的【日期】按钮,或选择【插入】|【日期】命令,此时系统将打开【插入日期】对话框,如图4-10 所示,此时可在网页的当前插入点上插入日期。(3) 在插入日期对话框中设置了各项参数
12、后,单击【确定】按钮,即可在指定位置插入时间和日期对象。3. 插入 Flash 按钮和 Flash 文字插入 Flash 按钮的操作步骤如下: (1)在网页中选择Flash 按钮插入点的位置。(2)单击【插入】面板中【媒体】选项卡的【Flash 按钮】,或在网页编辑窗口中选择【插入】 |【交互式图像】|【Flash 按钮】命令,此时系统将打开【插入Flash 按钮】对话框,如图4-11 所示。(3)单击【确定】按钮后,就会产生一个.swf 格式的文件,文件会被自动导入当前正在编辑的网页中。(4)单击网页中做好的Flash 按钮,在Flash 按钮的【属性】面板中单击【播放】按钮,无须打开浏览器
13、便可预览按钮的动态效果,如图4-12 所示。(5)可在Flash 按钮的【属性】面板中,给该按钮命名,设置大小、对齐方式、品质、比例、背景颜色等参数。制作 Flash 动态文字操作步骤如下: (1)在网页中选择Flash 文字要插入的位置。(2)单击【插入】面板中【媒体】选项卡的【Flash 文本】按钮,或在网页编辑窗口中选择【插入】|【交互式图像】|【Flash 文本】命令,此时系统将打开【插入Flash 文本】对话框,如图4-13 所示。(3)单击【确定】按钮,就会产生一个.swf 格式的文件,文件会自动导入当前的网页中。名师资料总结 - - -精品资料欢迎下载 - - - - - - -
14、 - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页,共 45 页 - - - - - - - - - 实训内容和步骤补充内容和时间分配4. 插入 Java Applet 程序(1) 将要使用的Java Applet程序复制到本地站点的相关文件夹中。(2) 在网页中选择Java Applet程序插入点的位置。(3) 单击【插入】面板中【媒体】选项卡的【Applet 】按钮,或选择【插入】|【媒体】 | 【Applet 】命令,此时系统将打开【选择文件】对话框。选择目标文件和路径并单击【确定】按钮,Java Applet便被插入到网页中。(4) 与其
15、他插入的对象一样,只要在网页中选中Java Applet对象,【属性】面板中就会显示Java Applet所有属性设置5、文本的查找和替换三、建设网站相册(1) 选择【命令】 | 【创建网站相册】命令,在打开的【创建网站相册】对话框中输入各类参数,如图4-19 所示。(2) 将需要制作成相册的图片放在一个单独的文件夹(即源图像文件夹)中。同时建立一个新的空文件夹(即目标文件夹),用来存放系统生成的图片和文件。(3) 在【相册标题】 、 【副标信息】 、 【其他信息】文本框中输入相册的标题、副标题和其他补充信息。(4) 在【源图像文件夹】和【目标文件夹】文本框中,指定图片的源文件夹和目标相册的位
16、置。(5) 设置【缩略图大小】的参数,每张缩略图片可选择3636、7272、100100、144144、200200 像素 5 种选项。在【列】文本框中设置每行放置几张图片,选中【显示文件名称】复选框,则在网站相册的缩略图下方显示文件名称。(6) 设置【缩略图格式】和【相片格式】为【JPEG-品质较高】,并为每张图片创建导览页面。(7) 单击【确定】按钮后,Dreamweaver MX 自行启动Fireworks MX为网站相册完成批处理操作。Fireworks MX自动将【源图像文件夹】中所有图片按指定的大小处理成缩略图,并在【目标文件夹】中存放制作完成的缩略图和相片。(8) 当 Firew
17、orks MX将网站相册制作完成后,在Dreamweaver MX 的窗口中弹出【相册已经建立】对话框。(9) 单击【确定】按钮后,Dreamweaver MX 将自动创建并打开网站相册的页面,按 F12 键可浏览网站相册的页面。四、鼠标经过图像(1) 在网页中选择鼠标经过图像插入点的位置。(2) 选择【插入】 | 【交互式图像】| 【鼠标经过图像】命令,打开【插入鼠标经过图像】对话框,如图4-28 所示。(3) 单击【原始图像】文本框右边的【浏览】按钮,选择一幅主图像。(4) 单击【鼠标经过图像】文本框右边的【浏览】按钮,选择一幅翻转图片。(5) 选中【预载鼠标经过图像】复选框,使翻转图片预
18、先装入浏览器的高速缓存中(6) 在【按下时,前往的URL 】文本框中,输入单击图片时链接文件的URL地址。(7) 单击【确定】按钮,便在网页中插入了鼠标经过图像。五、超级链接的设置名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页,共 45 页 - - - - - - - - - 思考题作业题讨论题课后总结分析名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页,共
19、45 页 - - - - - - - - - 第3 次课,学时2 教案编写时间实训题目创建导航条、创建跳转菜单、创建映射图、实训目的:利用以上所讲的知识创作揖个网页实训重点:实训难点:实训器材或实训环境:实训方法:实训内容和步骤补充内容和时间分配名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页,共 45 页 - - - - - - - - - 1、创建导航条(1) 在网页上选择插入导航条的位置。(2) 选择【插入】 | 【交互式图像】| 【导航条】命令,或者在【插入】浮动面板
20、的【常用】选项卡中,单击【导航条】按钮,此时在网页编辑窗口中会弹出【插入导航条】对话框,如图4-36 所示。(3) 在【项目名称】文本框中输入导航条元素的名称,名称对中文不支持。所输入的名称将在【导航条元件】列表框里显示。可用按钮、调整导航条中元素的次序。(4) 分别单击【状态图像】 、 【鼠标经过图像】 、 【按下图像】 、 【按下时鼠标经过图像】 4 个文本框右侧的【浏览】按钮,选择图像。(5) 在【替换文本】的文本框中,输入该【导航条】按钮的替换文字。(6) 在【按下时,前往的URL 】文本框中,输入要链接的网页地址,并在右侧的下拉列表框中,选择在何处打开要链接的网页。(7) 如果要在打
21、开网页时先将图像装载到内存中,应选中【预先载入图像】复选框。(8) 如果要在导航条上显示【按下时鼠标经过图像】的图像,可选中【页面载入时就显示“鼠标按下图像”】复选框。(9) 在【插入】下拉列表框中选择【水平】或【垂直】选项,在网页上水平或垂直放置导航条。(10) 如果要将导航条插入表格中,则选中【使用表格】复选框。(11) 单击、按钮,可将该【导航条】按钮加入导航条中或从导航条中移去。(12) 重复第 (3) (11) 步,插入导航条中的其他按钮。(13) 完成后,单击【确定】按钮,并返回网页编辑窗口。(14) 按 F12 键预览网页2、创建跳转菜单(1) 在网页的合适位置插入光标,选择【插
22、入】| 【表单对象】| 【跳转菜单】命令。或者在【插入】浮动面板的【表单】选项卡中,单击【跳转菜单】按钮,也可以拖曳【跳转菜单】按钮到当前网页的光标处(2) 网页编辑窗口弹出【插入跳转菜单】对话框,如果要在跳转菜单中创建一个提示选项,可在【文本】框中输入提示内容的文字,然后【选项】区域里选中【更改 URL后选择第一个项目】复选框。这一选项是菜单提示性质的说明,单击按钮添加这个提示项。(3) 在【文本】文本框中,输入跳转菜单其他选项的名字。(4) 单击【选择时,前往URL 】文本框中右侧的【浏览】按钮,输入该菜单选项所链接的页面文件和路径。(5) 在【打开URL于】下拉列表框中,选择链接页面文件
23、的显示方式。(6) 要想继续添加菜单选项,可单击按钮,然后重复第(3) (6) 步的操作。(7) 如果在跳转菜单右边添加一个提交按钮,可选中【菜单之后插入前往按钮】复选框。 如果要在选择了某个菜单选项后重新返回再选择第一个菜单项,可选中【更改 URL后选择第一个项目】复选框(8) 完成设置后,单击【确定】按钮。(9) 按 F12 键预览网页,30 分钟20 分钟20 分钟实训内容和步骤补充内容和时间分配名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页,共 45 页 - - -
24、 - - - - - - 3、创建映射图连接(1) 在网页编辑窗口中插入一幅图像,并选中这幅图像。(2) 此时在图像的【属性】面板左下方有一个名为【地图】的文本框,如图4-43所示,可在其中输入映射链接的名称。若不输入内容,Dreamweaver MX将会自动加上一个映射链接的名字(3) 在【地图】文本框下面有4 个图标按钮,分别是选择编辑箭头、矩形、圆形和多边形,这些图标的功能分别是调整热点区域,创建矩形、圆形和不规则多边形的热点区域。(4) 单击创建多边形热点区域的图标,然后用鼠标依次在选作映射图链接的几何图形外部轮廓线上依次单击,可定义一个多边形的热区,如图4-44 所示。(5) 如果用
25、鼠标单击矩形或圆形图标,然后在选作映射图形的外部轮廓线上拖曳鼠标,可定义矩形或圆形的热区,(6) 当一个热区被选定后,图像的【属性】面板变成图像热点的【属性】面板,如图 4-44 所示。(7) 单击图像热点的【属性】面板中【链接】文本框右边的图标,选择当前热区链接的文件。或者直接在【链接】文本框中输入链接文件的路径和名称。(8) 在【目标】下拉列表框中设置链接的目标对象的显示方式。(9) 在【替代】文本框中输入所定义的热区的说明文字。在浏览网页时,鼠标指在热区上将会显示【替代】文本框中的说明文字。4、网页实例制作(1) 网页名为exa4.htm ,网页的背景图片为bg0040.gif,网页保存
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2022年网站建设实训教案 2022 网站 建设 教案
限制150内