第9章 创建“一里麦香”烘焙工坊网站 课件(共22张PPT)《网页设计与制作（第三版）》（高教版）

(课件网) 创建“一里麦香”烘焙工坊网站 高等教育-出卷网- 网页设计与制作 教学目的： 帮助学生了解表单与行为基本概念 帮助学生掌握添加表单及其控件的方法 帮助学生掌握CSS控制网页表单样式的方法 帮助学生掌握添加内置行为的方法 帮助学生掌握表单的提交与验证 教学重点： 帮助学生理解表单与行为的概念 帮助学生理解并掌握表单控件及行为的添加 帮助学生理解并掌握表单的提交与验证 知识点： 表单基本概念 创建表单控件 CSS设置表单元素属性 行为相关概念 内置行为的应用 表单的提交与验证 1. 项目描述与分析 项目描述： “一里麦香”烘培工坊网站已经部分完成。本项目将使用表单控件为网站制作会员注册页面。并使用Dreamweaver的内置行为，为站点制作图片切换导航，以及实现表单的验证与提交。 项目分析： 会员注册、登录功能是商业站点的一个基本功能。我们通过Dreamweaver中的表单控件可以快速完成表单前端页面的制作。Dreamweaver中的行为其实是运行在浏览器中的JavaScript代码。本项目中通过软件提供的简单直观的方式来添加行为，实现表单的验证与提交、图片交互导航等，为“一里麦香”网站添加丰富的交互效果。 2. 预 备 知 识 表单的概念及其组成部分 我们在浏览网页时，常常会遇到一些包含互动内容的页面。如：会员注册与登录、留言板、评论区等等，用户可以在其中输入自己的信息。这类页面我们称之为表单页。网站通过表单页可以收集用户的基本信息，获取购物订单，收集用户反馈意见等。 一个完整的表单应该有两个重要组成部分：一是包含表单域和表单控件的网页文档，用户可以在此输入信息或做出选择；另一个是用于处理用户输入信息的服务器端应用程序或客户端脚本。 Dreamweaver中的表单域与表单控件 行为、事件与动作 行为是一种运行在浏览器中的JavaScript代码，用于浏览者与网页进行的交互。行为是事件和动作的组合，它以多种方式改变页面效果或执行特定任务。 行为由两部分组成。一是触发行为的事件（Event），一是当此事件发生时所执行的动作（Action）。这里的事件通常是与浏览器和鼠标相关，例如：页面加载、单击鼠标左键、鼠标滑过等等。而动作通常由一段JavaScript代码组成，通过执行这段代码可以完成相应的任务，例如：打开一个新的浏览器窗口、弹出信息框、播放声音等。 Dreamweaver中的行为面板 3. 制作会员注册页面准备工作 （1）站点定位 “一里麦香”烘焙工坊网站建站目的旨在推广品牌、建立品牌形象、收集用户信息、为用户提供网上购物服务平台等。站点的设计上使用了棕色与绿色的搭配以及圆角矩形的布局形状，符合健康、美味、亲切的品牌形象。 （2）站 点 内 容 结 构 图 （3）站 点 效 果 图 4.项目任务 任务一、制作“一里麦香”会员注册页 创建站点文件结构，导入已有页面 制作表单页基本框架 制作表单区域Div框架 制作注册表单 任务二、添加各种交互效果 制作交换图像导航条 打开浏览器窗口 检查表单 5. 知 识 链 接 （1）、 线上学习HTML标签 菜鸟教程 https://www. W3School中文网站 HTML5 教程 https://.cn/html5/index.asp （2）、 线下学习静态网站与动态网站的区别 静态网站： 静态网站的页面主要是html编写的，有的可能链接了CSS样式表文件、嵌入了Javascript脚本或SWF动画等。无论静态页面是否包含动画，它的一大特点是：页面编写好后，页面内容就不再发生变化。 动态网站： 动态网站并不是指页面上包含动画的网站，而是指页面内容可根据不同情况动态变更的网站。一般情况下动态网站通过数据库进行架构。 动态网站要为页面文件链接数据库，动态网站页面一般是以ASP、JSP、php、ASPX等为后缀名。 THANK YOU ... ...