Web前端技术项目式教程电子教案 第1章 初探Web前端技术 任务一教案_第1页
Web前端技术项目式教程电子教案 第1章 初探Web前端技术 任务一教案_第2页
Web前端技术项目式教程电子教案 第1章 初探Web前端技术 任务一教案_第3页
Web前端技术项目式教程电子教案 第1章 初探Web前端技术 任务一教案_第4页
Web前端技术项目式教程电子教案 第1章 初探Web前端技术 任务一教案_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE1PAGE第1章初探Web前端技术课程名称网页设计项目名称初探Web前端技术任务名称初探Web前端技术课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标能力目标：1.掌握使用软件创建网页的方法。知识目标：1.了解与网页相关的基本概念。2.熟悉标准化网页的基本结构。3.熟悉Web标准三要素。素质目标：1.培养学生标准化开发Web前端程序的意识。2.培养学生严谨、规范的习惯。教学内容任务描述某校宣传部需要制作一个介绍中华传统文化的网站，接到网站制作任务的是宣传部部长李明。宣传部干事张华想借此机会跟着李明学习。因为张华在网页制作方面没有基础，李明打算从网页制作基础知识开始，逐步教会张华制作网页的技能。本任务的具体要求如下。安装与使用网页开发工具。制作并预览网页。任务展示与实现（1）展示第一个网页效果（2）利用编辑工具编写HTML代码并验证其效果（3）学生动手操作3.教师讲解本任务涉及的知识点4.任务小结教学重点什么是Web前端开发利用编辑工具编写HTML代码并使用浏览器预览教学难点利用编辑工具编写HTML代码、使用浏览器调试网页教学准备1.装有VScode的电脑2.教学课件PPT3.教材：《Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap）》作业设计参考课本例1-2代码，使用VScode制作一个网页来介绍自己的家乡。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】分别从网页相关基本概念，Web和Web标准、Web前端技术的发展、VScode软件介绍、使用VScode编写HTML代码等方面介绍网页开发基本知识。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。网站、网页和主页1、网站网站是由多个网页组成的，但网站不是网页的简单罗列组合，而是由超链接方式组成的具有统一风格的有机整体，2、网页网页指网站中的一个页面，其主要由文本、图像、超链接、表格、表单、动画、声音和视频等构成。3、主页主页也称首页，是在浏览器打开某个网站后用户首先看到的页面，它承载着网站中所有指向二级页面或其他网站的链接信息。二、什么是Web和Web标准全球广域网（WorldWideWeb，Web），也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统，是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。Web标准是由W3C和其他标准化组共同制定的一套规范集合，目的在于创建统一的用于Web表现层的技术标准，以便通过不同的浏览器或终端设备向最终用户展示信息内容。目前的Web标准主要由3大部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）。真正符合Web标准的网页设计是指能够灵活使用Web标准对Web内容进行结构、表现与行为的分离。Web页面基本结构1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title>文档标题</title>6 </head>7<body>8文档内容9</body>10</html>动手编写第一个前端页面案例：<body> <h1align="center">冬天</h1>/*h1标签定义页面中的一级标题*/ <hr>/*br标签用于插入水平分隔线*/ <imgsrc="head_bg.jpg"/>/*img标签用于插入图片*/ <p>说起冬天，忽然想到豆腐。是一“小洋锅”（铝锅）白煮豆腐，热腾腾的。水滚着，像好些鱼眼睛，一小块一小块豆腐养在里面，嫩而滑，仿佛反穿的白狐大衣。锅在“洋炉子”（煤油不打气炉）上，和炉子都熏得乌黑乌黑，越显出豆腐的白。这是晚上，屋子老了，虽点着“洋灯”，也还是阴暗。围着桌子坐的是父亲跟我们哥儿三个。“洋炉子”太高了，父亲得常常站起来，微微地仰着脸，觑着眼睛，从氤氲的热气里伸进筷子，夹起豆腐，一一地放在我们的酱油碟里。我们有时也自己动手，但炉子实在太高了，总还是坐享其成的多。这并不是吃饭，只是玩儿。父亲说晚上冷，吃了大家暖和些。我们都喜欢这种白水豆腐；一上桌就眼巴巴望着那锅，等着那热气，等着热气里从父亲筷子上掉下来的豆腐。</p>/*p标签用于插入段落文字*/</body>1.创建一个HTML文档，在文档中可以实现输出“这是我的第一个网页”。2.创建一个HTML文档，在网页中实现上面案例效果。通过学习，学生能够掌握HTML网页基本结构，HTML网页的编写方法。本节

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论