项目1网页设计与制作（教案）《网页设计》（劳动保障出版社）

《网页设计与制作》 教学设计 20 年 月 日 课题名称 项目一网页基础 计划课时 课时 内容分析 网页设计中每个细节都是重要的，如同一个颜色的色值要相同、元素要进行规则处理、圆角按钮的大小要一样等。细节上处理得恰当，当设计的产品受到质疑时，可以详尽地说明细节设计的原因，使人信服。完美的网页设计需要巨大努力和付出，培养细心耐心的品质至关重要。 教学目标 · 了解网页基础知识。 · 熟悉网页设计语言。 · 掌握网页制作工具的使用方法。 重点及措施 教学重点：能够安装网页制作工具；能够使用网页制作工具设计简单页面 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：网页基础知识，网页设计语言 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 任务1.1信息与信息技术 1.1.1认识网页与网站 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 什么是网页和网站？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 网页是Internet中基本的信息单位，是由超文本标记语言（Hyper Text Markup Language，HTML）或者其他语言编写的。 网站是一个或多个网页的集合。网站是指通过浏览器在Internet上访问的页面。网站可以用于发布自己想要公开的信息，也可以用于提供相关的网络服务，同样可以获取自己需要的信息或者享受网络服务。网站设计者先将整个网站结构规划好，然后分别制作各个网页，大多数网站都会为浏览者提供一个主页，最后将其他网页与主页链接起来。 · 知识点讲解 · 讲解网页的概念： 教师展示PPT，对网页的概念进行具体讲解。网页是Internet中基本的信息单位，是由超文本标记语言（Hyper Text Markup Language，HTML）或者其他语言编写的。 中国知网：https://www.cnki.net/ 学生自主提问，教师对疑难问题进行解答。 · 讲解网站概念： 1. 教师展示PPT，讲解网站概念。网站是一个或多个网页的集合。网站是指通过浏览器在Internet上访问的页面。网站可以用于发布自己想要公开的信息，也可以用于提供相关的网络服务，同样可以获取自己需要的信息或者享受网络服务。网站设计者先将整个网站结构规划好，然后分别制作各个网页，大多数网站都会为浏览者提供一个主页，最后将其他网页与主页链接起来。 1. 中国大学MOOC：https://www.icourse163.org/ 1. 生自主提问，教师对疑难问题进行解答。 · 讲解网页的特点 1. 教师展示PPT，讲解网页的特点。 1. 学生自主提问，教师对疑难问题进行解答。 · 讲解网站分类： 1. 教师展示PPT，讲解网站分类。网站有很多不同的分类方法，例如，按照其使用的技术可分为静态网站和动态网站；按照网站的性质可以分为企业网站、政府网站、教育网站和个人网站；按照网站的作用可以分为搜索引擎网站、社区论坛网站、在线翻译网站、软件下载网站和音乐欣赏网站等。 1. 直观的网站分类方法是按网站的主题进行分类。主题是网站的题材，它决定网站的内容，体现网站代表的形象。一般常见的题材有公司企业、休闲娱乐、教育培训、电脑网络、文化艺术、交通旅游等，而每一个题材又可以继续划分。 学生自主提问，教师对疑难问题进行解答。 · 讲解网站的特征 (1) 教师展示PPT，讲解网站的特征。 (2) (3) (4) 学生自主提问，教师对疑难问题进行解答。 1.1.2网页的组成元素 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 网页有哪些组成要素？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 网页包含了许多元素，如文本、图像、动画、音频、视频等，使得内容丰富，引人入胜。 · 知识点讲解 · 讲解文本、图像、动画、音频、视频、 （1）教师展示PPT，讲解网页的特点。 新华网：http://education.news.cn/index.htm 1. 文本 　　文本是指网页中叙述性的文字，是理想的网页信息载体与交流工具，网页中主要信息一般都以文本为主，与图像相比，文本虽然不如图像那样容易被浏览者注意，但却能简明扼要地表达出主题。 　　　2. 图像 　　图像是指网页中插入的具有说明性的图片。图像拥有丰富的色彩和表现形式，能够表达更加丰富的内容和含义，并且具有文本无法达到的视觉效果。添加适量的图像可以使制作的网页图文并茂，展现出更好的活力和表现力。 　　在网页中可以使用GIF、JPEG、BMP、TIFF和PNG等格式的图像文件，其中使用广泛的是GIF和JPEG两种格式。 　　　3. 动画 　　动画在网页中的作用是有效地吸引浏览者更多的注意，在设计网页时可以在页面中加入动画使页面更加生动。 　　在网页中使用的动画主要有GIF和Flash两种方式。GIF动画主要用在对动画效果要求不高的网页中，如在网页中制作友情链接的网站Logo时，通常都使用GIF动画，且播放不需要插件。Flash动画适用于品质优良，大型的、复杂的网页，在浏览器中播放Flash动画需要安装Flash播放插件。 　　　4. 音频 　　音频是多媒体网页重要的组成部分。在为网页添加声音效果时应充分考虑其格式、文件大小、品质和用途等因素。另外，不同的浏览器对声音文件的处理方法有所不同，它们彼此之间有可能不兼容。网络的音频文件格式很多，常用的有MP3、MIDI、WAV等。 　　　5. 视频 　　视频能够丰富网页内容，越来越多的视频文件被应用到网页中，使得网页效果更加精彩且富有动感。常见的视频文件格式有MP4和FLV。 （2）学生自主提问，教师对疑难问题进行解答。 1.1.3静态网页和动态网页 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 什么是静态网页和动态网页？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 静态网页使用HTML语言，每个网页都有一个固定的URL（Uniform Resource Locators，统一资源定位符），以.htm、.html、.shtml等常见形式为后缀。静态网页中包含文本、图像、动画、音频、视频等网页元素。静态网页的交互性较差，在功能方面有较大的限制。 动态网页是指与静态网页相对的一种网页技术，以.aspx、.asp、.jsp、.php、.pert、.cgi 等形式为后缀。动态网页的显示内容可以随着时间、环境或者数据库操作的结果而发生改变，也可以与后台数据库交互，实现用户注册、登录、聊天、留言等功能。 · 知识点讲解 · 讲解静态网页 （1）教师展示PPT，对静态网页进行具体讲解。静态网页使用HTML语言，每个网页都有一个固定的URL（Uniform Resource Locators，统一资源定位符），以.htm、.html、.shtml等常见形式为后缀。静态网页中包含文本、图像、动画、音频、视频等网页元素。静态网页的交互性较差，在功能方面有较大的限制。静态网页可以出现各种动态的效果，如GIF格式的动画、Flash、滚动字幕等，这些“动态效果”只是视觉上的。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解静态网页 （1）教师展示PPT，对静态网页进行具体讲解。 动态网页是指与静态网页相对的一种网页技术，以.aspx、.asp、.jsp、.php、.pert、.cgi 等形式为后缀。动态网页的显示内容可以随着时间、环境或者数据库操作的结果而发生改变，也可以与后台数据库交互，实现用户注册、登录、聊天、留言等功能。 动态网页具有以下特征 · 交互性 · 自动更新 · 针对性 （2）学生自主提问，教师对疑难问题进行解答。 任务1.2网页设计语言 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 什么是HTML？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： HTML称为超文本标记语言。超文本指页面内可以包含图片、链接、音乐、视频等非文字的元素。标记语言主要由标签属性、标签以及元素构成，网页中包含的对象是由相应HTML标签指示出来的。HTML不像其他语言一样被编译为指令，它只提供一些语法标签，后由浏览器编译生成相应的页面。 · 知识点讲解 · 讲解HTML （1）教师展示PPT，对HTML具体讲解。 HTML称为超文本标记语言。超文本指页面内可以包含图片、链接、音乐、视频等非文字的元素。标记语言主要由标签属性、标签以及元素构成，网页中包含的对象是由相应HTML标签指示出来的。HTML不像其他语言一样被编译为指令，它只提供一些语法标签，后由浏览器编译生成相应的页面。 HTML编辑环境 HTML代码既可以在记事本中编写，也可以在其他任何文本编辑器中编写，但在保存时要保存为.html或.htm格式。HTML写成的网页文件只有通过浏览器才能进行解析。 文档结构 HTML文档是由一系列的元素和标签组成的。元素名不区分大小写。HTML用标签来规定元素的属性和它在文件中的位置，标签用“<标签名字属性>”来表示，标签以“< >”开始，以“</>”结束。HTML文档分为<head>（文档头）和<body>（文档体）两部分，在文档头中对文档进行了一些必要的定义，文档体中是要显示的各种文档信息。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解实例1 HTML文档代码 <html></html>在文档的外层，文档中的所有文本和标签都包含其中，它表示该文档是以HTML编写的。 <head></head>是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文中的。在此标签中可以插入其他标签，用以说明文件的标题和整个文件的一些公共属性。 <title>和</title>是嵌套在<head>标签中的，标签之间的文本是文档标题，这些文本作为浏览器窗口的标题栏内容被显示。<body></body>标签之间的文本是正文，正文中的内容作为网页内容显示在浏览器中。 以上标签在文档中都是唯一的，<head>标签和<body>标签是嵌套在<html>标签中的。 任务1.3网页制作工具 1.3.1网页设计工具 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 网页设计工具有哪些？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 1. Dreamweaver。 2. Sublime Text 3. EditPlus · 知识点讲解 · 讲解网页设计工具 （1）教师展示PPT，对网页设计工具进行具体讲解。 1. Dreamweaver 　　Adobe Dreamweaver（DW，梦想编织者）是用于网页设计与制作的开发工具，它可以制作出跨平台和浏览器的网页。 Dreamweaver是“所见即所得”的网页编辑器，如果改变网页位置或档案名称，Dreamweaver会自动更新所有链接。在Dreamweaver中使用HTML代码、HTML属性标签和一般语法的搜寻及置换功能，可以提升网页设计的效率。 2. Sublime Text 　　Sublime Text 是功能强大的代码编辑器，能够进行网页设计。它的主要功能有拼写检查、书签、完整的Python API、Goto功能、即时项目切换、多选择、多窗口等，具有体积小、运行速度快、文本功能强大、支持编译功能且可在控制台看到输出等优势。 3. EditPlus 　　EditPlus是功能强大、界面美观的文本编辑器，它的主要功能有Hex查看器、HTML工具栏、用户工具、行号、标尺、URL 高亮显示、自动完成、剪贴画、列选择、搜索和替换、拼写检查器、自定义键盘快捷方式等。 （2）学生自主提问，教师对疑难问题进行解答。 1.3.2网页美化工具 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 网页美化工具有哪些？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： Photoshop，Mockplus，Adobe Illustrator · 知识点讲解 · 讲解网页美化工具 （1）教师展示PPT，对网页美化工具进行具体讲解。 1. Photoshop 　　Photoshop是一款优秀而强大的图形图像处理软件，可以对图像进行各种变换，如放大、缩小、旋转、倾斜、镜像、透视等，可以进行复制、去除斑点、修补、修饰图像的残损等操作。此外，它具有的强大功能已经完全涵盖了网页设计的需要。 2. Mockplus 　　Mockplus支持平台有Windows和Mac平台，它是一款高效简单的界面设计工具，是比较流行的一款国产界面原型设计工具。软件提供了封装好的3000多个图标以及200多个组件，学习成本低，无需代码参与。它的主要特色是丰富的图标及组件、拖曳实现交互界面等。 3. Adobe Illustrator Adobe Illustrator是应用于出版、多媒体和在线图像的工业标准矢量插画的软件。它是一款非常好的图片处理工具，广泛应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等，并可以提供较高的精度和控制。 （2）学生自主提问，教师对疑难问题进行解答。 1.3.3Dreamweaver工作环境 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： Dreamweaver的特点？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： Dreamweaver在操作方法、界面风格等方面突出人性化设计，能够进行多任务工作，使用者可以根据个人喜好和工作方式，重新排列面板和面板组，自定义工作区。。 · 知识点讲解 · 讲解Dreamweaver工作环境 （1）教师展示PPT，对Dreamweaver工作环境具体讲解。 1. 工作界面 1）菜单栏 　　Dreamweaver有10个菜单，包括“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”“帮助”，单击这些菜单可以打开其子菜单。其他菜单打开后也有类似效果。Dreamweaver的菜单功能极其丰富，能够完成各种功能操作。 　　2）插入栏 　　插入栏位于菜单栏下方，包含用于创建和插入对象（如表格、图像）的按钮。当鼠标指针移动到一个按钮时，会出现一个工具提示，其中含有该按钮的名称。当需要插入某一元素时，可根据选项卡的名称来选择。 　　3）文档工具栏 　　文档工具栏在插入栏下方，其中包含一些按钮，可以实现在代码视图、设计视图及拆分视图间的切换。文档工具栏还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 　　4）文档窗口 　　文档窗口会显示当前打开或编辑的文档，可以选择“代码”“拆分”或“设计”视图。窗口顶部选项卡显示的是当前编辑的文档的文件名。当有多个文档被打开时，可以通过选项卡在文档间进行切换。 　　5）状态栏 　　状态栏显示当前文档的有关信息，如页面大小、下载页面的大小和速度等。 　　6）属性面板 　　属性面板位于文档编辑区下方，显示文档窗口中被选中对象的属性，可以通过修改面板中的数据，改变被选中对象的属性。 　　7）功能面板 　　功能面板包括当前打开的各种功能面板，可以折叠或移动。 Dreamweaver的工作界面主要由“菜单栏”“插入栏”“文档工具栏”“文档窗口”“状态栏”“属性面板”和“功能面板”组成， 　2. 调整界面 　　在网页制作过程中，往往需要变换工作界面的布局，使用者可以通过移动面板或面板组来创建新的工作界面。单击标题栏上的“设计器”按钮，可以选择任意一种预设的工作界面。 　　1）显示/隐藏面板 　　使用F4键，可以显示或隐藏包括属性面板在内的所有面板。利用“窗口”菜单可以打开所有面板。 　　2）移动面板 　　拖动面板标签或是拖动面板组的标题栏，可以移动面板或面板组。移动时，看到蓝色显示的区域，表示可以在该区域内移动和放置。如果拖动到的区域不是放置区域，则被移动的面板或面板组将在窗口中浮动。 3）关闭面板 　　单击面板或面板组的按钮，在打开的菜单中选择“关闭”或“关闭标签组”命令。 3. 选择视图模式 　　Dreamweaver的视图模式默认为“设计”视图，可以通过视图按钮进行切换。 　　（1）代码视图 　　代码视图是用于编辑HTML、JavaScript等代码的手工编码环境。对于代码使用熟练的操作者，可以直接在此视图中输入代码，实现网页的编辑制作。 　　（2）拆分视图 　　拆分视图文档窗口分为左右部分，分别显示“设计”和“代码”两个视图，可对比查看。 　　（3）设计视图 　　设计视图用于可视化页面布局、内容编辑和应用程序开发的编辑环境。视图中显示的文档形式与浏览器中查看的页面内容基本一致，可以在编辑时显示动态内容。 （2）学生自主提问，教师对疑难问题进行解答。 1.3.4Dreamweaver基本操作 · 内容学习 · 知识点讲解 · 讲解实例2 新建和保存空白页 步骤1： 打开软件 步骤2： 新建文档 步骤3： 保存网页 · 讲解实例3 设置默认浏览器及浏览网页 步骤1： 设置默认浏览器 步骤2： 打开网页 步骤3 保存并预览网页 项目小结 本项目主要介绍了网页的基础知识,具体内容如下。 网页基础知识: 介绍了网页与网站的概念、网页的组成元素、静态网页和动态网页。 网页设计语言: 介绍了 HTML 基础知识,并通过实例讲解 HTML 的文档结构。 网页制作工具: 介绍了网页设计工具、网页美化工具、Dreamweaver 工作环境和Dreamweaver 基本操作。 通过本项目的学习,掌握网页与网站的基础知识,学习 HTML 基础知识,了解网页制作工具，逐步掌握网页设计的基本概念,为下一步的学习打下基础。 项目实训 实训1 · 实训名称 HTML文档结构 · 实训目标 正确书写HTML基本代码 · 实训实施 在记事本中输入如下代码，修改后缀名为“.html”，在浏览器中显示“Hello World！” 实训2 · 实训名称 使用Dreamweaver新建网页 · 实训目标 新建和预览网页 · 实训实施 步骤1： 新建网页 　　打开Dreamweaver软件，选择“文件”→“新建”命令，新建空白网页。 步骤2： 预览网页 选择“编辑”→“首选参数”→“在浏览器中预览”命令，添加Internet Explorer浏览器。 选择“文件”→“打开”命令，打开Index网页。 步骤3： 设置页面属性 选择“修改”→“页面属性”命令，设置页面标题为“我的主页”。 设置HTML中的外观背景为灰色。 （作品点评） 教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。 · 布置作业 · 完成教师布置的作业。 · 预习下章内容。 项目测评 1.网页与网站能够正确描述网页与网站的关系 2.网页特点能够描述网页的五个特点 3.网站特征能够正确描述网站特征 4.网页基本组成元素能够掌握网页中不同元素的概念 5.静态网页和动态网页能够区分静态网页和动态网页 6.网页设计语言能够正确写出实例1代码并运行 7.Dreamweaver工作环境 · 熟悉Dreamweaver工作界面 · 能够移动面板、关闭面板 · 能够使用代码视图 · 能够使用拆分视图 · 能够使用设计视图 8.Dreamweaver基本操作 · 能够完成实例2 · 能够完成实例3 9.课后习题能够完成课后习题 10.课堂表现能够遵守纪律，完成学习任务 教 学 后 记 学科网（北京）股份有限公司 $$