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

(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.现代其他节点详图施工图下载ID:1182124903设计风格:-- CAD版本:CAD2014 包含文件:施工图 授权独家 价格:50知币 官方补贴价: 36知币 30知币 立即下载 收藏 分享 举报 iGo 124㎡国内常见平层优化案例源文件 施工图 30天内热门平层 现代其他休闲娱乐空间 茶室棋牌娱乐休闲 施工图 30天内热门休闲娱乐空间 现代酒店 顶级客房整理https://sgt.znzmo.com/sgt/1182124903.html
2.首页【设计必备】国内外优秀规划设计案例精选 3634 10个高端优质·居住区彩平图PSD源文件 3621 全网首发·最全PS精品素材库! 2997 最美民宿集150套【网友投稿】 2083 78份景观平面图PSD合集包 2034 带你学习植物配置/分析(造景大师的植物配置) 1936 《民宿集》精选70套完整版 https://www.zhishew.com/competition
3.知末全球案例寰球室内设计案例知末全球案例 - 收录了室内工装、家装、软装、景观设计、国内外建筑案例,学习优秀获奖作品,了解大师设计思维就上知末网.https://news.znztv.com/
4.作品鉴赏知本设计2024年12月18日 01:04恭喜135***7164作品备案用户:图片作品/平面设计作品 【923888】 已成功备案(备案号:A20241218010447863) 2024年12月18日 01:03恭喜135***7164作品备案用户:图片作品/平面设计作品 【912094】 已成功备案(备案号:A20241218010331474) 2024年12月18日 01:01恭喜135***7164作品备案用户:图片作http://www.333cn.com/designer/15870/zuopin/
5.知末全球案例寰球室内设计案例名师获奖作品欣赏笔点导航(www.bidianer.com)是一个简洁的网址导航网站。你可以自定义上网常用网址、自定义你需要的工具模块。你还可以发现、收集、分享,Web开发、设计工作中的优质资源、干货。https://www.bidianer.com/site/348159
6.电子商务网站建设《电子商务网站建设》是由北京大学出版社出版的图书,作者是臧良运、崔连和。《电子商务网站建设》是北京大学出版社出版图书,由三大部分组成。第一部分是电子商务网站的基础理论,包括电子商务网站概述、电子商务网站的规划设计,重点奠定学生规划设计网站的能力;第二部分https://baike.sogou.com/v5852534.htm
7.网站设计建设案例中网互联广州网站建设工作室在2004年建立,至今已有16年的建站经验,过万家企业成为我们的定制型设计客户,各行业网站都有着丰富的设计经验及其案例。http://www.zw110.com/case/
8.网站设计作品素马专注于网站设计及开发的核心业务,具有高度订制的特征,是国内优秀网站建设公司中的代表性机构,能为你的互联网梦想踏出坚实的第一步。https://www.sumaart.com/works/company-brand/
9.网站设计传媒网站优秀网站网站案例优站网(you-zhan.com)致力于帮助客户和设计师的建设品质优秀的网站。优站网长期从事网站建设,拥有丰富的建站经验和海量的网站案例,能为客户提供高水准的行业网站设计案例和领先的网站设计资讯分享,包括但不限于:艺术网站,摄影网站,建筑网站,企业网站,家居数码网站https://youzhan.ousaikeji.com/
10.厚知空间设计设计师装修案例口碑评价设计本为您提供厚知空间设计相关介绍,包括厚知空间设计设计师、厚知空间设计装修案例、厚知空间设计口碑评价,供您参考。https://www.shejiben.com/sjs/8563197/
11.案例网案例网---设计自媒体平台,设计师可在平台发布、存档、下载、销售设计案例;用户能在平台发布任务招标众包服务,是设计威客的案例平台;平台也可快捷引导使用AI、cim工具,完成智慧设计。每个人既是用户也是网站主人,平台帮助用户聚才散财,是知识分子发挥才智的大家园!http://www.anligood.com/
12.设计案例名师获奖设计案例鉴赏流行设计趋势3d溜溜网设计案例库汇集了全球各类型名师获奖设计案例,包括住宅,商业地产,文体医疗娱乐餐饮及建筑景观等佳作,了解流行设计趋势,大师设计思维就上3d溜溜网!https://anli.3d66.com/
13.花坛设计案例装修知识大全装一网花坛设计案例知识专区,为您分享花坛设计案例的相关装修资讯,以及与花坛设计案例相关的装修效果图片,要装修上装一网。https://www.zhuangyi.com/tag/2135/
14.17个优秀设计案例,帮你快速了解情感化设计优设网17个优秀设计案例,帮你快速了解情感化设计 情感化设计,由唐纳德·诺曼在 《情感化设计》 一书中完整提出,书中其由浅入深的将情感化设计分成了三个层次:本能层、行为层、反思层。相关的概念你可以看这篇: 关于情感化设计,这篇干货带你快速入门这个知识点!https://www.uisdc.com/emotional-design-2
15.马蹄网室内设计官网马蹄网室内vi设计官网3、别墅设计案例:马蹄网室内设计公司在别墅设计方面拥有独到的设计理念和丰富的实践经验。他们注重与客户的沟通和合作,了解客户的需求和生活方式,根据客户的个性化要求,打造出独一无二的别墅设计。无论是现代简约风格、欧式豪华风格还是中式传统风格,马蹄网室内设计公司都能够根据客户的喜好和要求,提供个性化的设计方案。 https://www.rhtimes.com/brand/logo-design-news17400.html
16.青海司法行政网在上诉人广州华欣电子科技有限公司与被上诉人广州诚科商贸有限公司、广州君海商贸有限公司、广州兆科电子科技有限公司、峻凌电子(东莞)有限公司、佛山市厦欣科技有限公司侵害发明专利权纠纷案【(2020)最高法知民终580号】中,最高人民法院指出,说明书对于权利要求中的技术术语没有作出特别界定的,应当首先按照本领域技术人http://qh.12348.gov.cn/pub/qhsfxzw/sfxzyw/zhdt/202304/t20230423_103402.html
17.2024年网络规划设计师考试大纲网络规划设计师6.4互联网相关的法律法规 7.财务管理相关知识 7.1会计常识 7.2财务管理实务 8.应用数学 8.1概率统计应用 8.2图论应用 8.3 组合分析 8.4 运筹方法 9.专业英语 9.1具有高级工程师所要求的英文阅读水平 9.2熟悉网络规划设计师岗位相关领域的专业教术语 考试科目2:网络规划与设计案例分析 https://www.educity.cn/rk/5251264.html
18.实战:企业网络系统规划与设计与事项腾讯云开发者社区办公楼的网络系统设计,既有有线网络系统,也有无线覆盖系统。 并且安防系统的网络系统有时候会单独设计,有时候和计算机网络系统共用局域网。 今天的案例重点介绍计算机网络和视频监控组网方式与选择。 某办公楼拟建总建筑面积约7500㎡;建筑类型为高层建筑,地上1-6层。 https://cloud.tencent.com/developer/article/1626751
19.如何做出优秀的科技感网站设计?这10个案例收好点击图片立即获取,10+科技风可视化大屏网页面设计模板 8、科技感网站设计案例八:农业科技感网站 我们可以选择现代、无衬线字体,并注意行距、字间距,优化字体与排版,确保文字内容易于阅读,同时符合整体的科技感风格。如以下的农业科技网站纯色底色再加上字体的合理分布,排版十分清晰好看。 https://js.design/special/article/technology-sense-website-case.html
20.知末网室内设计网知末网室内设计网提供了大量的室内设计案例展示,涵盖了各种风格、面积、户型等不同场景。这些案例既包括知名设计师的作品,也有普通用户的自宅设计。用户可以通过案例了解各种室内设计的优点和不足,借鉴优秀的设计经验,为自己的设计提供参考。此外,该平台还提供案例的详细分析,帮助用户深入了解设计师的设计思路和技巧。 https://www.sousou.com/bk/202330.html
21.电子商务职业规划(精选10篇)一、首先分享一个案例: 我同学的一个网店,主营年轻90男女服装,信用4心,12年4月创店,到现在没有什么交易。我就从内部来简单分析下。 因此,我试着为自己拟定一份职业生涯规划,将自己的未来好好的设计一下。有了目标,才会有动力。 一个人的大学时光一生中只有一次。与其浑浑噩噩地消磨掉https://yjbys.com/jiuyezhidao/zhiyeguihua/1932528.html
22.12个不错的设计案例灵感素材网站推荐建E网设计资讯1.建e网设计案例 建e网设计案例:汇集全球众多高清设计案例佳作,室内工装、家装、软装、景观设计、国内外建筑案例、网红设计案例等,了解大师设计思维就上建e网!" 2.Dribbble 设计网站Dribbble的目标是帮助设计师建立他们的团队和品牌。它是一个充满活力的社区和社交网络设计网站,也非常适合关注设计的朋友。这个设计网站的https://www.justeasy.cn/news/15845.html
23.把最熟悉的事物做成最意想不到的设计,凌云创意是谁?凌云创意曾为帝亚吉欧、汾酒、泸州老窖、五粮液、华润雪花啤酒等知名酒企提供创意设计方案,也为认养一头牛、安慕希、竹叶青等品牌设计包装。 本文汇总了凌云创意的公司介绍、精选包装案例、设计理念以及获奖情况等,帮助您快速了解凌云创意的相关信息。 目录 一、关于凌云创意https://www.foodtalks.cn/news/38862