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

(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.新手指南:网页设计与制作的完整教程网页制作与设计在当今数字化时代,即便你对Web 开发、设计或编码一窍不通,也能轻松搭建属于自己的网站。无论你是想为个人打造展示平台,还是为企业建立线上形象,只要掌握正确的方法,借助合适的工具与资源,就能在短时间内完成网站建设。接下来,就让我们一起开启这段建站之旅吧! https://blog.csdn.net/biwenyunnet/article/details/144267728
2.网站建设HTML网站建设网站设计与制作教程网站设计教程企业网站建设 HTML 网站建设 网站设计与制作教程 网站设计教程 企业网站 搭建自己的网站 网页制作与设计 举报 建站技术解说 关注569 信息 分享: 直播热点 下载APP领会员 直播中 小言儿~ 直播中 丽丽感谢家人宠爱 直播中 悠然~ 千帆直播 人气主播 直播0 婉儿~ 婉儿妹妹 点击观看 直播0 安小燃 小燃在跳舞~ 点击https://www.56.com/u11/v_MTUwOTAzMDIz.html
3.《HTML5+CSS3网站设计基础教程》(传智播客高教产品研发部)简介关联商品 HTML5网站设计 HTML网页制作 PHP网站开发 C#基础入门 IOS入门 IOS经典 Swift项目开发 JavaScript前端开发 Objective-C入门教程 加入购物车 购买电子书 人民邮电出版社 当当自营 进入店铺 收藏店铺 商品详情 开本:16开 纸张:胶版纸 包装:平装-胶订 是否套装:否 国际标准书号ISBN:9787115410641 丛书名:工业和http://product.dangdang.com/23919285.html
4.建站学我站有网页网站制作教程,个人网站建设指南等,以及相关经验技巧类网页教程,另有建站入门,建站必修课,建站关键课等晋级专题。http://www.jzxue.net.cn/
5.网站网页制作教程在数字化时代,拥有一个专业且具吸引力的网站对于企业来说至关重要。无论是展示产品、提供信息还是在线服务,一个好的网站都能极大地提升品牌形象与市场竞争力。中企动力作为领先的网站解决方案提供商,致力于帮助各种规模的企业实现网络转型。以下是基于“中企动力”品牌的网站网页制作教程,帮助你从零开始构建自己的网络https://www.300.cn/xxzx/19416.html
6.网页在线制作基础教程,新手入门篇!如果你对网页在线制作感兴趣,想要学习该如何从零开始制作一个网页?通过本教程的学习,你可以了解制作网页在线制作基础步骤,以及制作网页在线制作需要使用什么工具,该如何交付给开发人员进行开发的全部过程。废话不多说,让我们开始吧! 一、明确你的目标群体与网站用途 https://pixso.cn/designskills/webpage-production-tutorial/
7.网站设计的简单步骤:如何制作网页的详细教程如果你希望在互联网上宣传你的相关信息来获得更多的读者或者客户,那么你就需要制作一个网页。今天JiuStore就介绍一下如何简单地制作网页,以及自己制作网站的详细步骤。 首先,随着科学技术的发展,目前可以用于搭建网站的工具越来越多,而且很多都是免费的,使用也越来越简单方便,所以制作网页和建立网站已经变成了一件轻松的事https://www.jiustore.com/website-designer/
8.网页设计与制作教程——Web前端开发(第6版)第1章HTML5概述在线网页设计与制作教程——Web前端开发(第6版) 第1章 HTML5概述 HTML(Hyper Text Markup Language,超文本标记语言)是制作网页的基础语言,是初学者必学的内容。在学习HTML之前,需要了解一些与Web相关的基础知识,有助于初学者学习后面章节的相关内容。本章将对网页的基础知识、Web标准、编写语言、HTML5的运行环境和创建https://fanqienovel.com/reader/7104211405955402786
9.学做网页设计/网站制作学习教程这跟我们一般的平面设计出来是一整张图片是完全不一样的,这样子的网页是怎么实现的?在做成一个网页之前,通常技术人员都需要进行网站界面效果图的设计,就是类似平面设计那样子,但是网站界面设计它有网站界面设计的规范,所以做平面设计的一般没办法进行网站界面设计,因为他不知道网页设计有哪些的规范。进行网页设计效果图https://www.bunze.com/hots/1818.html
10.网页制作网站建设网页制作公司网页设计公司JSP网站ASP.NET网站网页制作,网页设计 北京网页制作公司,网页设计公司网站制作,网站建设,JSP网站ASP.NET网站PHP网站制作网站设计,网站制作公司,网站建设公司,网站设计公司,北京网站制作公司,北京网站设计公司,北京网站建设公司,网络服务 网站制作多媒体解决方案 网络全程策划服务http://www.aodunet.com/
11.网页设计教程网页设计有2部分组成:①视觉、交互设计(主导者是设计师);②web前端设计(主导者是工程师)。今天便具体说一说第一部分,顺便分享一些网页设计与制作教程。 网页设计教程可以分为4步曲,分别是: 一、明确网页定位和目的 网页定位和目的是网页设计的起点,是在建网页之前就要做好的,因为网页视觉效果是影响用户对网站印象https://modao.cc/design/web-design-guide.html
12.网页设计与制作教程(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
13.如何自学网站设计及网页制作所以在5g时代即将来到的今天,相信各行各业对网页设计师的需求也会骤增,这也吸引了更多的小伙伴想要学网页设计,那么要如何自学网站设计以及网页制作呢? 我们都知道,网络上的资源是非常丰富的,利用搜索可以找到许许多多有关于网站设计以及网页制作的相关教程,既有文字版的也有视频教程的,很多小伙伴们就会跟着这些教程开https://wap.hxsd.com/content/11199/
14.中文版DreamweaverCC+FlashCC+PhotoshopCC网页设计实战视频教程网页设计篇 第1章 初步认识Dreamweaver CC 1.1 Dreamweaver CC的基础操作 14 实战001 启动Dreamweaver CC 14 实战002 退出Dreamweaver CC 15 1.2 创建与编辑本地站点 16 实战003 创建本地静态站点 16 实战004 设置站点服务器 18 实战005 在站点中新建文件夹 20 https://www.epubit.com/bookDetails?id=N19740
15.网页设计与制作微课教程(第4版)书名:网页设计与制作微课教程(第4版) 定价:55.0 ISBN:9787121375064 作者:李敏 版次:第1版 出版时间:2020-02 内容提要: 本书由从事“网页设计与制作”课程教学的优秀教师和经验丰富的企业网页设计师合作共同编写而成。全书共14个单元:单元1、2介绍了网页类型、网站建设流程、HTML5基础语法、网页版式与色彩搭配等基https://detail.youzan.com/show/goods?alias=35wnw9bcqv7ck
16.dreamweaver制作网页详细步骤(设计网站首页)这篇文章主要介绍了dreamweaver制作网页详细步骤(设计网站首页),需要的朋友可以参考下 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用! 【如果你想靠AI翻身,你先需要一个靠谱的工具!】 一、网站设计思路 每个网页开始前,一般要在Firworks或在Photoshop等图像设计软件中设计好基本页面设计,图4-1-1就是Photoshop中https://www.jb51.net/Dreamweaver/150014.html
17.网页设计与制作案例教程网页设计与制作案例教程主编:马涛 王然 彭芳 出版社:北京邮电大学出版社 分类: 资源:1 开始阅读书籍介绍 本书使用Dreamweaver CC 2017工具、HTML5和CSS3 Web技术标准设计与制作网页,以真实网站制作案例组织全书内容,包括网站开发入门、学院网站前期准备、站点主页制作、列表页制作、内容页与留言页制作、网页特效,最后https://www.xinsiketang.com/html/student_show/794
18.125网页设计权威的网页制作,网页设计教程基地125网页设计-权威的网页制作,网页设计教程基地:包含html、css、Javascript等教程及网页制作素材,网页设计欣赏,免费空间,网站推广等资源http://125jz.com/
19.网页设计与制作教程本书是一本全面介绍网页设计与制作技术的教程,它以目前最流行的网页设计软件作为技术支持,由浅入深,系统地介绍了网页的构思、规划、制作和网站建设的全过程。本书分为三篇共11章,并包括一个附录。第一篇是基础篇(第1-3章),介绍了Internet和WWW的基本知识、网站建设的概论以及制作网页的基本HTML,第二篇是应用篇https://lib-klxy.wqxuetang.com/book/16000