情境一 网页设计与制作概述（教案）-《网页设计与制作》同步教学（电子工业版）

情境一 网页设计与制作概述 课程名称 网页设计与制作 学时 授课时间 第1周 授课章节 情境一 网页设计与制作概述 授课班级 授课教师 网页设计与制作课程组 教学目的 专业理论知识 1、学会创建本地站点和管理本地站点 2、熟悉Hbuilder的工作界面 3、熟悉浏览器窗口的基本组成和网页的基本组成元素 4、了解网站与网页的相关概念及网页的基本布局 5、了解一些制作网页、处理图像、制作动画的工具 实际操作技能 1、 掌握网页的基本概念 2、 熟悉网页设计的基本工具 3、 了解HTML和CSS语言简介 思政元素目标 1、 引导学生对国家相关政策的关注，培养学生的社会责任心 2、 培养学生的职业素养 知识、技能重点 1、创建本地站点 2、网页的基本组成元素和网页的布局结构 知识、技能难点 1、网页的布局结构 2、网页的基本概念 教学方法 课前、课中、课后“三课一体”螺旋渗透教学法 教具 学习通APP，腾讯会议 教学过程设计 任务1.1赏析网页 创建本地站点“单元1” 并浏览网页 认识Hbuilder的工作界面 打开并保存文档index.html 在浏览器中浏览index.html 教学过程 【组织教学】 1、准备教学设备、软件等； 2、点名检查学生出勤情况，填写教学情况记录表； 3、发布教学资料 【复习旧课、导入新课】 1、提问：什么是网页？里面包含了哪些元素？ 2、展示几种不同类型网站的主页； 3、教学目的：让学生知道什么是网页及其组成元素，知道它的工作原理，了解与之相关的软件和常用术语。 【讲授新课】 知识储备 1.1学习路线，如图1.1 图1.1 网页设计概述学习路线 1.2 知识小天地 什么是网页？ 1.2.1 认识网页 为了使初学者更好地认识网页，首先看一下学校的官方网站。打开Internet Explorer浏览器，在地址栏输入传智播客的网址Http://www.jxgzy.cn，按Enter键，这时浏览器中显示的页面即为学校官方网站的首页，如图1-1所示。 图1.2 学校首页 分析网页由哪些内容组成？ 1.2.2 Web服务器和客户端 WWW基于客户机／服务器模式，与平台无关。客户机和服务器都是独立的计算机，客户机是浏览者使用的机器，服务器是存放程序的计算机。如果一台连入网络的计算机，向其他计算机提供各种网络服务（如数据、文件的共享等）时，它就被称为服务器。而那些用于访问服务器资料的计算机则被称为客户机。通常，服务器对于浏览Web站点的用户是透明的，Web服务器传送HTMLN面使浏览器可以浏览。确切一点，Web服务器专门处理客户机请求（request），处理完请求之后，会将这些请求发送到客户端。为了处理一个请求，Web）报务器可以响应（response）一个静态页面或图片，进行页面跳转（redirect）。客户机主要享受网络上提供的各种资源。 客户端浏览器 浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标签语言的一个应用)内容，并让用户与这些文件交互的一种软件。 它用来显示在万维网或局域网等内的文字、图像及其他信息。这些文字或图像，可以是连接其他网址的超链接，用户可迅速及轻易地浏览各种信息。大部分网页为HTML格式。目前常见的网页浏览器有QQ浏览器、Intermet、Explorer、Firefox、Safari,Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、160浏览器、UC浏览器、傲游浏览器、世界之窗浏览器等，浏览器是最经常使用到的客户端程序。但是并非所有浏览器都支持HTML5,同一浏览器不同的版本对HTML5的支持情况也不同。 浏览器内核 浏览器最重要的部分是浏览器的内核。浏览器内核是浏览器的核心，也称“渲染引擎”，用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同，因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。 浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。 最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有 10 多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。 常用浏览器所使用的内核 · IE浏览器内核：Trident内核，也是俗称的IE内核； · Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核； · Firefox浏览器内核：Gecko内核，俗称Firefox内核； · Safari浏览器内核：Webkit内核； · Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核； · 360浏览器、猎豹浏览器内核：IE+Chrome双内核； · 搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）； · 百度浏览器、世界之窗内核：IE内核； · 2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核； 你知道有哪五大浏览器吗 浏览器是网页运行的平台。目前常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，如下图所示，是一些常见浏览器的图标。基于某些因素，这些浏览器不能完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不同的解析。 图1.3 五大浏览器图标 1.2.3统一资源定位器（URL） URL（Uniform Resource Locator）即统一资源定位器，它是一个能识别Internet中地址的信息资源。通过URL可以到达Internet任何一个地方来寻找需要的东西，如文件、数据库、图像、新闻组等。 例如，http://www.qinxue165.corn/index.html就是一个常见的URL资源。 1.2.4 网页概念 网页（Web Page）是存放在Web服务器上供客户端用户浏览的文件，可以在Internet上传输。网页是按照网页文档规范编写的一个或多个文件，这种格式的文件由超文本标记语言创建，能将文字、图片、声音等各种多媒体文件组合在一起，这些文件被保存在特定计算机的特定目录中。几乎所有的网页都包含链接，可以方便地跳转到其他相关网页或是相关网站。 如果在浏览器的地址栏中输入网站地址，浏览器会自动连接到这个网址所指向的网络服务器，并出现一个默认的网页（一般为index.html或default.html），这个最先打开的默认页面就被称为“主页”或“首页”。 1.2.5 静态网页和动态网页 静态网页指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件，不加处理直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。其页面的内容使用的仅仅是标准的HTML代码，静态网页通常由纯粹的HTML/CSS语言编写。 静态网页内容通常以HTML语言编写，文件的扩展名通常是是.html（标准）或.htm（兼容）。 动态网页是指在服务器端运行的，使用程序语言设计的交互式网页，它们会根据某种条件的变化，返回不同的网页内容。 动态网页需要使用服务器脚本语言，如使用Java脚本语言的JSP技术。 动态网页的后缀名通常为.jsp、.asp、.aspx、.cgi、.perl等，动态网页相对复杂，不能直接双击打开。 网页制作技术及相关工具有哪些 1.2.6 掌握网页制作的基本技术要求 （1）HTML HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。 （2）CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 （3）JavaScript JavaScript 是为满足制作动态网页的需要而诞生的一种编程语言 ，是由 Netscape（网景通信公司）开发的嵌入到 HTML 文件中的基于对象（Object）和事件驱动（Event Driven）的脚本语言。在 HTML 基础上，使用 JavaScript 可以开发交互式（网页）Web。.JavaScript 的出现使得网页和用户之间实现了实时、动态和交互的关系。 （4）Adobe Flash Adobe Flash（原称Macromedia Flash，简称Flash；前身FutureSplash）是美国Macromedia公司（已被Adobe公司收购）所设计的一种二维动画软件。通常包括Adobe Flash，用于设计和编辑Flash文档，以及Adobe Flash Player，用于播放Flash文档。 （5）Photoshop Photoshop (PS) Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。 （6）后端语言 如果我们想一直在网站制作行业发展，那么你还需要掌握一门后端语言如：PHP、.Net、ASP等等。 1.2.7 常见网页制作工具简介 （1）Hbuilder Hbuilder是由我国开发的一款开发网页的编辑器，使用起来及其方便容易上手，而且在Hbuilde全语法库中，可以清楚地看到对各个浏览器、各个版本的支持情况，集成了大量语法快，少敲多行代码，体验飞一般的感觉。 （2）Dreamweaver软件 Dreamweaver简称“DW”，中文名 "梦想编织者"，是集网页制作和管理网站于一身的网页代码编辑器，是一种网页设计软件；利用对HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。 （3）Sublime软件 Sublime全称为Sublime Text，是一个代码编辑器。Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图、功能插件等。Sublime text还是一个跨平台的编辑器，支Windows、linux、Mac等操作系统。 （4）Visual Studio Code软件 Visual Studio Code(简称“VS Code”)是一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。 （5）WebStorm WebStorm 是JavaScript开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。 二、模仿型任务讲解 2.1 网页赏析 网页赏析任务卡如表1-1所示。 表1-1 网页赏析任务卡 任务编号 01-1 任务名称 创建本地站点“单元1” 网页主题 赏析各类网站的主页 赏析网页任务描述 1、通过赏析网页认识浏览器窗口的基本组成结构； 2、通过赏析网页认识网页中的基本组成元素； 3、通过赏析网页了解网页的常用布局结构； 4、介绍与网页的概念以及与之相关的常用术语。 任务实现流程分析 教师在课堂上引导学生赏析网页，学生分别浏览指定的快乐旅游类网站，分析网页的布局结构以及组成元素，教师进行点评与讲解。 通过小组讨论，派代表上台阐述小组观点。评判出布局结构奖、色彩特点奖、思辨能力奖、团队协作的职业道德奖。发挥榜样的力量，激发学生对网页设计课程的兴趣；培养学生的创新思维能力及团队协作能力。 三、实操示范 3.1创建“Firstweb”站点并浏览网页 操作步骤 Step01 以Hbuilder为例，双击运行该软件，依次点击文件→新建→选择项目（按下Ctrl+N，W可以触发快速新建） 图1.4 Hbuilder界面-1 直接点击软件首页的新建项目，也可以创建一个项目。 图1.5 Hbuilder界面-2 Step02 为项目起名字，选择“基本HTML项目”，并选择项目保存的路径，如下图 图1.6 创建HTML文件向导 Step03 在body标签里面写上“我的第一个页面，保存并运行”。注意：如果没有保存，当前页面左上角会有*号。如下图 图1.7 HTML页面 Step04 保证电脑安装有谷歌浏览器，选择：运行》运行到浏览器》Chrome 图1.8网页运行 或者直接点击运行按钮，选择相应的浏览器即可。 图1.9网页运行 Step05 运行效果如图 图1.10 第一个页面 【课堂小结】 通过本次任务的学习，我们认识了网页和网站，了解了制作网页需要的基本知识，如浏览器窗口的组成、网页中的基本元素，常见布局结构，并对制作网页的常用软件以及和网页相关的术语有了初步的了解。 【布置作业】 1、简述静态网页和动态网页的区别？ 2、构成网页的基本元素有哪些？ 3、网页常用的布局方式有哪些？ 【创新型任务】 搜索江西名山网站，比较分析这些网站首页的主要组成元素、布局结构以及色彩使用方面的特点，将有江西特色的绿色文化贯穿于教学体验过程，加强生态文明教育，引导学生树立崇尚自然、尊重自然的理念，切实增强学生投身生态文明建设的责任感、使命感。 教学评价 考核要点 考核内容 标准分 计分 知识考核 (1)课前观看学习通微视频及完成微课下方进阶练习题 20   (2)熟练地创建本地站点 (3)正确分析网页的基本元素 (4)熟悉HBuilder的工作界面 能力考核 (5)会打开与保存网页文档、会在浏览器中浏览网页 30   思政考核 (6)考查学生的态度端正、时间观念强，表述思辨能力等方面综合评价 20   (7)搜索素材江西名山旅游网站等体现生态文明意识等方面进行评价分析 30   总计 100   评价方式 自我评价 小组评价 教师评价 考核得分       学科网（北京）股份有限公司 $$