最新网页制作教学设计案例网页制作教学设计方案(三篇)

(2)掌握框架网页的新建、制作、编辑与保存,了解框架的拆分方法。

(3)初步掌握将框架结构与表格布局结合使用来制作网页。

2、过程与方法:

(1)通过对表格网页的分析,体验新知识(框架结构网页)的优点,从而促进其学习新知识。

(2)理解框架的概念与组成,学会分析网站的结构。

3、情感态度与价值观:

(2)能够将表格与框架结构网页结合使用,在创作中体验乐趣。

1、重点:框架的概念、用途,创建、编辑与保存框架网页的方法。

2、难点:框架的拆分。

对比教学法、探究学习法、模仿学习法。

1、引入

老师展示一组利用表格制作的网页,要求学生仔细观察,找出它们的一个共同特点(学生答:网页上方和左侧内容都是相同的,仅右下部分内容不一样),并提问如何快捷地制作这种网页?(学生答:使用复制粘贴快捷地制作)

2、新授

(1)框架网页概念

由以上例子入手,再展示一个框架网页,教师引导学生理解框架网页的概念

(2)框架网页的新建与保存

教师要求学生先阅读教材中的操作步骤,再尝试进行探究操作。

任务1创建"横幅和目录"结构的框架网页,新建top和left页面,并学会保存。

此处为教学难点,可先由框架的概念入手,再针对保存页面中的蓝色部分,教师进行讲解,教会学生注意观察。

学生要理解框架网页的概念,通过阅读教材中的内容,自学新建框架网页的操作,初步了解"新建网页"和"设置初始网页"两个按钮的不同,并认真聆听教师的讲解,注意观察,按要求模仿操作。

设计意图:培养学生自主

学习能力,课堂教学难点在教师的讲解后模仿操作,有效突破难点。

任务2top和left页面的制作。

要求:

○1top页面内插入1行2列的表格,左边单元格插入logo图片,右边单元格插入banner图片。

○3调整表格边框的粗细。

○4为main区域设置初始页面。(该网页由教师提供现成的)

(4)框架网页属性的设置

创建好框架网页后,可以根据实际需要改变框架的属性。

任务3调整框架的大小、设置框架的边框、设置框架窗口中的滚动条等。

提高任务:框架的拆分。

学生自主探究学习,可向老师寻求帮助。完成设置后请同学示范操作,并说明自己设置的方法和原因。操作基础扎实的同学完成任务后可进行扩展学习。

3、总结与评价

设计意图:开拓学生的视野,使学生了解框架的应用,教会学生要善于总结,要学会学习的方法。

课程编号:

中文名称:网页设计与制作

英文名称:webdesignandproduction课程类别:选修课适用专业:所有专业

开课学期:20xx—20xx第2学期总学时:24学时总学分:1课程简介:

本课程突出网页设计与制作的现代特点,从internet的基础知识入手,重点介绍html超文本标记语言,以及所见即所得的网页设计制作工具dreamweaver的基本操作流程。从静态页面到动态页面由浅入深的介绍网页设计与制作全过程。采用案例分析和亲自实践的方式突出、突破课程的重点和难点。并指导每一名选课的同学为自己建一个博客网站,以此提高同学对网页设计与制作的兴趣和爱好。参考书:

1、网页设计与制作教程,熊前兴闵联营,科学出版社;

2、网站与网页设计,张贵明,清华大学出版社;

3、网页美术设计原理及实战策略,王晓峰焦燕,清华大学出版社;

4、网站建设典型案例,张枭,清华大学出版社;

网页和网站是internet的重要组成部分,企业、公司和机构通过网站来宣传推介自己的技术和产品,个人发布主页展示自己的风采,人们从不同类型的网站来获取需要的信息。因此,设计与制作网页已经成为计算机应用技术的一个重要方面。本课程的主要教学目的是使学生掌握网页设计与制作的基础知识,能运用网页工具设计和制作常用网页。

第一章、网页的基础知识(1学时)

(1)internet基础知识

(2)www简介

(3)网页制作的技术和工具介绍

第二章、超文本编辑语言html(8学时)

(1)html文件的基本结构

(2)文字和段落标记

(3)列表标记

(4)图片标记

(5)表格标记

(6)超链接标记

(7)表单标记

(8)框架标记

第三章、javascript语言(4学时)

(1)javascript语言简介

(2)javascript编程基础

(3)基于对象的javascript语言

(4)javascript程序实例

第四章、层叠样式表css(1学时)

(1)css概述

(2)css属性

第五章、可视化网页设计工具

(1)网页的基本操作

(2)图像、表格与超链接

(3)表单与框架

(4)添加网页元素

(5)发布站点

第六章、动态网页设计语言asp(4学时)

(1)asp简介

(2)vbscript脚本基础

(3)asp的内置对象

(4)实用文件

第七章、利用ad0访问数据库(1学时)

(1)数据库的连接

(2)数据库的检索

(3)数据库的操作

总结复习(1学时)

四、实验教学内容与要求

五、作业

六、考核方式

期末考核每个同学为自己设计制作一个博客网站。

七、成绩评定

1、自制网站(80%)

2、平时考勤、作业(20%)平时成绩分配:

平时考勤5次,每次2分,共占10%作业5次,每次2分,共占10%

八、执行大纲时应注意的问题

根据学生对课程内容的掌握和理解程度会对进度做适当的调整。

1、知识与技能

(1)了解超级链接的含义及链接源和链接目标的含义,掌握同一站点内以及不同站点间网页超级链接的创建方法。

(2)掌握网页内书签的作用及创建书签链接方法,掌握交互式按钮、框架网页内超级链接的设置方法。

(3)理解热区链接的含义及创建方法。

2、过程与方法

(1)通过创建网页超级链接的操作,使学生了解网页中创建超级链接的基本方法,破除对网页链接的神秘感。

(2)通过对不同对象设置超级链接的操作,使学生总结出操作的规律,培养学生自主学习与操作的能力。

(3)通过网页不同的超级链接方法,拓展学生思维,创建多种形式的网页链接。

3、情感态度与价值观

(1)通过链接我国主要自然保护区网页,激发学生热爱祖国、热爱自然、热爱生命的激情。

(2)完成超级链接,使学生感受成功的喜悦和快乐。

1、教学重点:

(1)超级链接的含义及链接源和链接目标的含义。

(2)超链接的制作方法——给文字、图片制作超链接,制作书签链接,给交互式按钮制作超链接,框架页面内的超链接,图片区域制作超链接等。

2、教学难点

(1)书签链接中名称及对应链接位置的设定。

(2)在框架页面中制作超链接时,目标对象所选择的显示窗口形式。

教学方法与教学手段:

任务驱动法、讨论探究法、讲解与演示法、类比知识迁移法。

教学准备:

"动物——人类的朋友"站点,包括未链接的网页,如欢迎页、表格页、框架页,表单页等。

教学过程:

展示两个主页,一个已经创建了链接,一个没有创建链接,让学生进行比较并找出区别,引出本课课题——超级链接。

学生展开交流,通过对比找出不同点,并积极思考,回答老师的问题。

设计意图:通过对比操作、交流,再辅以知识迁移,明确本节课教学内容。

(1)站内超级链接

引导学生回顾powerpoint中超链接的制作方法(教师提示:右击链接源,利用快捷菜单制作超链接),辅以教材中的内容,让学生自行探究并完成以下操作:

任务1同一站点内不同页面之间的链接

○1制作首页(欢迎页)到表格页的超链接。

教师巡视,及时指导,安排学生示范操作并讲解如何制作超链接。

交互式按钮的超链接制作要求在框架网页中演示操作。老师可以提问学生:演示者操作的对吗?有没有问题?

引导学生发现问题:超链接制作完成后需要检验(保存后预览)。

教师讲解,突破难点,再交由学生操作。

以上是同一站点内不同网页之间的链接,有时一个页面中内容过多,需要不断拖动滚动条实现阅读,能否实现快速跳转呢?

任务2同一站点内同一页面内的跳转(链接):在"动物趣闻"页面内制作书签链接。

教师讲解:由生活中的书签引入,介绍"书签链接"的概念,然后再演示如何操作。

提示:书签链接的双向性问题(返回)。

学生认真听讲后模仿制作,教师巡视进行指导并反馈学生的完成情况。

(2)站间超级链接

仅凭我们课堂上制作的这些页面还不足以详细介绍我们的主题,此时我们还可以借助超链接,链接到因特网上的其他网站,以丰富我们的内容。

开展同学间的互助,检验其链接完成情况,推荐优秀同学做展示。引导学生分类总结本节课的知识点。

THE END
1.oeasyhtml5css3网页设计与制作(html5教程)本教程专门讲解网页设计与制作前端技术h5(html5)+css3+javascript。本课程是讲解网页设计与制作、网站建设、前端建设的教程,网站建设的基础语言https://study.163.com/course/introduction/266008.htm
2.网站设计与制作教程您好,您查找的“网站设计与制作教程”问题,目前没有相关的答案,您可以通过下面查看是否有与“网站设计与制作教程”相关内容!也可以扫描二维码添加微信了解相关内容。 相关前20条内容: 问道65级怎么升级最快_服务器 新闻来源:网络整理 2023-3-9共有:3569浏览 https://www.gzit.cn/theme/1799896.html
3.网站设计与制作教程网站设计与制作教程 查看更多案例 品牌创意网站 颠覆视觉创新 塑造优秀品牌 品牌网站以品牌营销为目标,搭配多变创新的设计风格,突出展现企业品牌魅力。尘凡科技提供的品牌网站建设服务,努力发掘每一品牌的独特记忆点,设定专属的品牌展示角度;并以震撼的视觉冲击力,塑造令人记忆深刻的品牌形象;助力企业扩大品牌知名度,增强https://www.021van.com/web/200711.html
4.网站建设HTML网站建设网站设计与制作教程网站设计教程企业网站建设 HTML 网站建设 网站设计与制作教程 网站设计教程 企业网站 搭建自己的网站 网页制作与设计 举报 建站技术解说 关注569 信息 分享: 直播热点 下载APP领会员 直播中 小言儿~ 直播中 丽丽感谢家人宠爱 直播中 悠然~ 千帆直播 人气主播 直播0 婉儿~ 婉儿妹妹 点击观看 直播0 安小燃 小燃在跳舞~ 点击https://www.56.com/u11/v_MTUwOTAzMDIz.html
5.网站设计与制作项目教程.pdf网页设计/UI网站设计与制作项目教程.pdf 22页内容提供方:a888118a 大小:6.27 MB 字数:约7.37千字 发布时间:2017-11-27发布于贵州 浏览人气:31 下载次数:仅上传者可见 收藏次数:0 需要金币:*** 金币 (10金币=人民币1元)网站设计与制作项目教程.pdf 关闭预览 想预览更多内容,点击免费在线预览全文https://max.book118.com/html/2017/1125/141391429.shtm
6.网页设计与制作教程,入门零基础初学指南Joomla:适用于企业网站、门户网站等,提供强大的扩展和模块,灵活性高,可实现复杂的功能需求,需要一定的技术基础,点击参阅《6个免费的网页制作平台推荐,建网站的看!》。 选择合适的网页设计与制作平台后,我们可以根据平台提供的工具和模板进行网站的设计和搭建。例如Pixso资源社区会提供一些基础的网页设计与制作模板和https://pixso.cn/designskills/a-tutorial-on-web-design-and-production/
7.《网页设计与制作项目教程(HTML+CSS+JavaScript)》(黑马程序员当当网图书频道在线销售正版《网页设计与制作项目教程(HTML+CSS+JavaScript)》,作者:黑马程序员,出版社:人民邮电出版社。最新《网页设计与制作项目教程(HTML+CSS+JavaScript)》简介、书评、试读、价格、图片等相关信息,尽在DangDang.com,网购《网页设计与制作项目http://product.dangdang.com/24176969.html
8.HTML个人网页设计与制作实战教程这篇博客详细介绍了如何设计和制作一个HTML个人网页,包括网站描述、布局设计、编程语言选择、素材选取和代码实现。内容涵盖HTML5、CSS3、JS特效,以及学习方法建议和更多资源分享。 摘要由CSDN通过智能技术生成 文章目录 一、?网站题目 二、网站描述 三、网站介绍 四、网站演示 五、https://blog.csdn.net/qq_524614081/article/details/134878476
9.网页设计与制作案例教程(HTML5+CSS3+JavaScript)(微课版)(第2版2.创建网站首页单击项目中的index.html文件,打开该文件,添加如下代码。案例实现案例小结案例分析案例描述输入首页代码案例实现案例小结案例分析案例描述3.创建公司简介页面右击项目名称project04,选择“新建”|“html文件”命令,将文件名称改为intr.html,并添加如下代码。案例实现案例小结案例分析案例描述4.创建所获荣誉页面https://m.renrendoc.com/paper/306269363.html
10.淘宝网页设计与制作教程好的淘宝网页设计与制作可以让店铺更加吸引人,增加店铺浏览量和销售量,还会让店铺在竞争者中脱颖而出。淘宝网上的店铺越来越多,各商家对于淘宝网页设计与制作人员的需求是很大的。学淘宝网页设计与制作技能,就业机会会有很多!一些小伙伴想知道哪里有淘宝网页设计与制作教程。火星时代网站上会有淘宝网页设计与制作教程哦https://www.hxsd.com/content/27005
11.《2023新书HTML5+CSS3网站设计基础教程(第3版)HTML5与CSS3进行网页图书 > 大中专教材教辅 > 大学教材 > 2023新书 HTML5+CSS3网站设计基础教程(第3版) HTML5与CSS3进行网页制作的方法和技巧 网页设计 黑马程序员系列 湖南弘道图书专营店 黑马程序员著 京东价 ¥ 促销 展开促销 配送至 --请选择-- 支持https://item.jd.com/10078651295462.html
12.平面教程影视动画教程办公教程机械设计教程网站设计教程我要自学网-免费视频教程,提供全方位软件学习,有3D教程,平面教程,多媒体制作教程,办公信息化教程,机械设计教程,网站制作教程,电脑培训https://www.51zxw.net/
13.PPT设计教程网PPT设计教程网为您提供入门级、高级的图文、视频PPT教程,助你学习PPT设计从入门到精通;和专业的PPT设计师交流,在PPTer成长之路上你不再孤独;提供海量高品质PPT模板、PPT素材免费下载,矢量级的欧美PPT模板等你来用。https://www.pptfans.cn/
14.2024年如何制作WordPress网站(终极指南)WordPress 是免费、开源的,并附带数千个预构建的网站设计和扩展。它非常灵活,几乎可以与网站所有者可用的所有第三方工具和服务配合使用。 我们使用 WordPress 构建所有网站,包括 WPBeginner。 如何充分利用本网站设计教程? 这是有关如何制作网站的分步教程。我们已将其分为不同的步骤,我们将引导您从开始到结束完成所有https://wpeyes.com/wordpress/archives/7816
15.网站建设网站设计北京网站建设高端网站制作公司尚品中国2008年成立于北京,是国内十佳品牌网站设计公司,专注于网站建设、小程序开发、业务系统定制等业务,打造了数千精品案例,为北京、天津、上海、河北、山东及全国各地用户服务,电话:010-60259772.https://www.sino-web.net/
16.网页设计与制作教程(HTML+CSS+JavaScript)第3版《网页设计与制作教程(HTML+CSS+JavaScript)第3版》共11章,主要内容包括网页设计与制作基础、编辑HTML5元素、网页布局与交互、CSS3样式基础、使用CSS3修饰网页元素、CSS3盒模型、Div+CSS布局页面、JavaScript基础、JavaScript DOM编程、HTML5的高级应用和“馨美装修”网站的制作。《网页设计与制作教程(HTML+CSS+http://www.cmpedu.com/books/book/5606155.htm
17.网页设计教程网页设计有2部分组成:①视觉、交互设计(主导者是设计师);②web前端设计(主导者是工程师)。今天便具体说一说第一部分,顺便分享一些网页设计与制作教程。 网页设计教程可以分为4步曲,分别是: 一、明确网页定位和目的 网页定位和目的是网页设计的起点,是在建网页之前就要做好的,因为网页视觉效果是影响用户对网站印象https://modao.cc/design/web-design-guide.html
18.深圳网站建设网站设计品牌网站定制网站改版方维网络专注网站建设定制开发,是深圳高端品牌网站设计公司,服务数千企业有建行、大疆、稳健、华大基因、会展中心、深圳清华大学等知名品牌,建站热线400-800-9385https://www.szfangwei.cn/
19.网页设计论文网站想要被更多的使用者所接受,需要传达一种安全可靠的信息,而图像是网站中最直观的部分,对图像处理进行严谨的对待,可以提升网页使用阶段的安全性,并避免在系统中出现严重的使用功能不稳定现象,促进管理计划在现场得到更好的落实应用。网页制作期间背景图像选择要与所传播的文化理念保持一致,并将提升使用稳定性作为设计https://www.ruiwen.com/lunwen/6161857.html
20.IconWorkshop教程图标制作技巧IconWorkshop中文官方网站> 用户教程 IconWorkshop 使用教程 使用教程分类 新手入门丨更 多 IconWorkshop 6如何进行安装、激活和换机? 第12课 - 创建一个新的图标库(管理器) 第5课 - 如何保存图标至管理器(图标库) IconWorkshop制作Ico图标方法 中国更好的ico图标制作软件iconworkshop https://www.iconworkshop.cn/jiaocheng.html
21.企业网站制作教程,3个步骤用AI轻松生成!企业网站制作是企业数字化转型中至关重要的一环。但是对于小公司来说,请设计师和开发人员来制作一个企业网站成本真的太高了!那要不就自己上手试试其实企业网站制作真不难,用对设计工具就行。今天就是一份 0 经验设计小白也能实践的企业网站制作教程制,不需要美术功底、也不需要有会敲代码,只需要使用文生 UIhttps://js.design/special/article/what-are-the-avatar-sites.html