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

(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.设计项目一网站开发入门网页设计制作网站教程文章浏览阅读884次,点赞8次,收藏18次。带你以项目形式从头学div+css的布局方式_网页设计制作网站教程https://blog.csdn.net/qiyihan/article/details/142202593
2.新手必看详细搭建网站全流程教程从零开始快速入门插件服务器搜索本文旨在为新手提供一个详细的从零开始搭建网站的全流程教程。文章从六个方面详细阐述了网站搭建的各个步骤,包括需求分析与规划、选择域名与主机、网站设计与开发、内容管理系统(CMS)的选择与安装、网站内容创建与优化,以及网站的发布与维护。每个方面都分成多个自然段,深入探讨了相关的知识点和实践技巧,帮助新手快速入门https://www.163.com/dy/article/JEUDQTBC055699L3.html
3.网站首页如何制作?5个步骤帮你轻松掌握!了解牧受众,是制作网站首页的关键。理解网站目标受众的需求、喜好、期望,以及他们如何如何与网站交互,可以帮助设计师确定网页设计和网站首页内容方向。例如,如果你的网站目标受众是年轻人,那么你可以使用风格更加大胆的设计和文字,彰显网站首页制作的独特性;如果你的网站目标受众是企业客户,那么你需要更加保守、规整的设计https://pixso.cn/designskills/website-homepage-production/
4.怎样设计一个网站(网页设计制作网站教程)在当今数字化时代,互联网已经成为人们生活中不可或缺的一部分。而网页作为互联网的重要组成部分,其设计和制作的质量直接影响着用户体验和网站的成功与否。学习网页设计制作成为了许多人的追求。 了解网页设计的基本原理是非常重要的。网页设计需要考虑布局、色彩、字体、图像等多个方面。合理的布局可以使用户更好地理解https://ar.gan-ren.com/aa/ngeatggtyerngtret4.html
5.网页设计如何制作教程视频教程,如何制作网页视频教程成都创新互联公司是少有的成都做网站、网站建设、营销型企业网站、小程序开发、手机APP,开发、制作、设计、外链、推广优化一站式服务网络公司,自2013年起,坚持透明化,价格低,无套路经营理念。让网页惊喜每一位访客多年来深受用户好评 1,如何制作网页视频教程 http://www.cxhlcq.com/article/icjhej.html
6.学做网页设计/网站制作学习教程在做成一个网页之前,通常技术人员都需要进行网站界面效果图的设计,就是类似平面设计那样子,但是网站界面设计它有网站界面设计的规范,所以做平面设计的一般没办法进行网站界面设计,因为他不知道网页设计有哪些的规范。进行网页设计效果图环节,就是你要去设计整个网站到时候呈现会是什么样子的效果?效果图跟到时候做好的网站https://www.bunze.com/hots/1818.html
7.建站学我站有网页网站制作教程,个人网站建设指南等,以及相关经验技巧类网页教程,另有建站入门,建站必修课,建站关键课等晋级专题。http://www.jzxue.net.cn/
8.网页设计作品优秀网站设计网页制作教程设计素材Pizza Hut必胜客官方网站设计欣赏 01-18 17 0 17 爱似毒分享在国内网站设计欣赏 hay家具沙发椅子品牌网站设计欣赏 01-18 19 0 19 爱似毒分享在国内网站设计欣赏 丹麦时尚时装摄影化妆师个人网站 01-18 22 0 22 簡簡單單ヾ分享在个人网站设计欣赏 网页设计秀 http://www.cnwebshow.com/
9.网站设计的简单步骤:如何制作网页的详细教程如果你希望在互联网上宣传你的相关信息来获得更多的读者或者客户,那么你就需要制作一个网页。今天JiuStore就介绍一下如何简单地制作网页,以及自己制作网站的详细步骤。 首先,随着科学技术的发展,目前可以用于搭建网站的工具越来越多,而且很多都是免费的,使用也越来越简单方便,所以制作网页和建立网站已经变成了一件轻松的事https://www.jiustore.com/website-designer/
10.网站网页制作教程在数字化时代,拥有一个专业且具吸引力的网站对于企业来说至关重要。无论是展示产品、提供信息还是在线服务,一个好的网站都能极大地提升品牌形象与市场竞争力。中企动力作为领先的网站解决方案提供商,致力于帮助各种规模的企业实现网络转型。以下是基于“中企动力”品牌的网站网页制作教程,帮助你从零开始构建自己的网络https://www.300.cn/xxzx/19416.html
11.网页制作网站建设网页制作公司网页设计公司JSP网站ASP.NET网站网页制作,网页设计 北京网页制作公司,网页设计公司网站制作,网站建设,JSP网站ASP.NET网站PHP网站制作网站设计,网站制作公司,网站建设公司,网站设计公司,北京网站制作公司,北京网站设计公司,北京网站建设公司,网络服务 网站制作多媒体解决方案 网络全程策划服务http://www.aodunet.com/
12.网页制作教程汇html视频教程做网站优秀网页设计网页制作教程汇_html视频教程_做网站_优秀网页设计_网页设计教程_html5_网站搭建_php视频_php培训_网页制作视频案例_前端学习 举报 建站技术解说 关注569 信息 分享: 直播热点 下载APP领会员 直播中 小言儿~ 直播中 丽丽感谢家人宠爱 直播中 悠然~ 千帆直播 人气主播 直播0 桃. 桃之夭夭,灼灼其华 点击观看https://www.56.com/u16/v_MTUyMDAxNDM3.html
13.平面教程影视动画教程办公教程机械设计教程网站设计教程我要自学网-免费视频教程,提供全方位软件学习,有3D教程,平面教程,多媒体制作教程,办公信息化教程,机械设计教程,网站制作教程,电脑培训https://www.51zxw.net/
14.网页设计与制作教程(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
15.125网页设计权威的网页制作,网页设计教程基地125网页设计-权威的网页制作,网页设计教程基地:包含html、css、Javascript等教程及网页制作素材,网页设计欣赏,免费空间,网站推广等资源http://125jz.com/
16.如何自学网站设计及网页制作所以在5g时代即将来到的今天,相信各行各业对网页设计师的需求也会骤增,这也吸引了更多的小伙伴想要学网页设计,那么要如何自学网站设计以及网页制作呢? 我们都知道,网络上的资源是非常丰富的,利用搜索可以找到许许多多有关于网站设计以及网页制作的相关教程,既有文字版的也有视频教程的,很多小伙伴们就会跟着这些教程开https://wap.hxsd.com/content/11199/
17.网页制作教程网本网站提供了一个电子商务网站制作教程,从设计网页布局到添加商品和购物车功能,帮助您打造一个功能完善的电子商务网站。 制作一个响应式网页 本网站提供了一个响应式网页制作教程,教您如何使用媒体查询和弹性布局来实现网页在不同设备上的自适应显示。 4. 实用工具推荐 https://www.yncaili.com/32197.html
18.网页制作实战教程:从零到一打造专业网站3. 内容更新:保持网站内容的时效性和新鲜感,吸引用户持续关注。 五、总结 网页制作是一个综合性的过程,需要技术、创意和策略的结合。从基础构建到内容填充,再到交互体验的优化与维护,每一步都至关重要。希望这篇实战教程能为你提供有价值的参考和启发,让你在网页制作的道路上越走越远。 https://www.batmanit.cn/blog/j/21337.html
19.《网站设计与网页制作立体化项目教程(第4版)》简介书评当当土星图书专营店在线销售正版《网站设计与网页制作立体化项目教程(第4版)》。最新《网站设计与网页制作立体化项目教程(第4版)》简介、书评、试读、价格、图片等相关信息,尽在DangDang.com,网购《网站设计与网页制作立体化项目教程(第4版)》,就上当当土星图书专营店。http://product.dangdang.com/11205854811.html
20.网页陶吧个人网站的常见弊病 免费个人主页空间信息 如何设计成功的网站 网站流量和金钱的关系 Web服务器实战性能篇 WEB开发导航 ASP多媒体视频教程专题 功能强大的HTML编辑器FCKeditor CSS+DIV下的网页设计实例展示 构建WAP网站全攻略 基于Ajax技术网站赏析 网页制作速查手册 https://homepage.yesky.com/
21.网页设计与制作项目教程(HTML+CSS+JavaScript)(第2版)图书其中,项目1介绍了HTML、CSS和JavaScript的基础知识,包括Web基本概念、HTML简介、CSS简介、JavaScript简介、Dreamweaver工具的使用等;项目2~项目8为7个完整的网页设计项目,涉及“博客”“网店”“家居”“教育”“婚恋”“视频”“美食”多个方向,有助于读者掌握不同网站的设计风格和制作技巧。本书以项目为导向,通过https://www.ryjiaoyu.com/book/details/44119
22.网页设计教程网页设计有2部分组成:①视觉、交互设计(主导者是设计师);②web前端设计(主导者是工程师)。今天便具体说一说第一部分,顺便分享一些网页设计与制作教程。 网页设计教程可以分为4步曲,分别是: 一、明确网页定位和目的 网页定位和目的是网页设计的起点,是在建网页之前就要做好的,因为网页视觉效果是影响用户对网站印象https://modao.cc/design/web-design-guide.html
23.网页设计与制作教程本书是一本全面介绍网页设计与制作技术的教程,它以目前最流行的网页设计软件作为技术支持,由浅入深,系统地介绍了网页的构思、规划、制作和网站建设的全过程。本书分为三篇共11章,并包括一个附录。第一篇是基础篇(第1-3章),介绍了Internet和WWW的基本知识、网站建设的概论以及制作网页的基本HTML,第二篇是应用篇https://lib-klxy.wqxuetang.com/book/16000