第三章网页界面设计与制作精品PPT课件

管管管毕 理理理业 学班专班 生级业管 信信信理 息息息
录更打 入新印 成成成 绩绩绩
网站系统模块图
3.数据库设计 （1）新闻系统数据库设计(E-R)
用户表
用户编号 用户名 密码
新闻内容表
新闻编号
新闻标题
新闻内容
图片名
1:N
来源
添加时间
密码
栏目编号
栏目表
栏目编号 栏目名 级别 根栏目 添加时间
（2）邮件系统数据库设计(E-R)
发附数参用 送件据数户 邮管管设管 件理理置理
班 级 与 学 生 管 理
老 师 资 料 管 理
成 课绩 程管 表理 管 理
用 户 管 理
查发 管 看表 理 留留 留 言言 言
学 学 学 规增 修 删 栏
院 院 院 章加 改 除 目
新 闻
工 作
公 告
制 度
新 闻
新 闻
新 闻
管 理
理常课 论用件 学表点 习格播
用left函数将取ຫໍສະໝຸດ 的IP数据作一定的处理将处理后的数值跟数据库 中的IP地址段作比较
Y 用户是否合法 N
页面自动跳转内 网首页(inner.asp)
页面返回到客户端 浏览的上一页
退出
内网入口自动引导程序流程图
开始
根据用户选择要发送邮件的群，对数据库中相应的记录fs字段值更改为1
用户填写邮件内容
选择数据库中字段fs为1 的第一条记录 对此记录中的邮箱地址发送邮件
开始
传递一个变量s_keyword,标记新闻调用哪个栏目。从头开始 搜索数据库中归属栏目为s_keyword的新闻记录
跳到下条记录
跳到下条记录
是否为

《网页设计与制作》PPT 课件
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计

2、学生练习 3、按照组员互补讨论。 4、完成作品 5、展示成品
本章小结
本章主要讲述了网页设计界面的相关知识，以网站 进入页界面为例，进行了练习与学习。学生基本能完成 设定目标。
拓展训练
实训练习：制作网页切片 p51---p52
作业
1、设计制作一其他网进入界面
新课教学
一、任务一 应用蒙版 学生查找 1、分类 快速蒙版 剪切蒙版 图层蒙版 矢量蒙版 2、使用任一蒙版编辑图片 注意：抠图范围，仔细，按照步骤 展示图片：汽车高端车照片 组长辅导（已经分好了两组）
新课教学
一、任务二 应用滤镜 学生查找 1、分类 模糊滤镜
高斯模糊滤镜 USM锐化滤镜 镜头光晕滤镜 添加杂色滤镜
教学方法
工作过程导向+探究式学习+任务驱动教 学法
教学回顾
本次课属于新授课，回顾之前网页图像 设计部分内容，进行部分个人作品的展示和 点评。
作品点评
新课导入
网站进入页界面的美观程度，直接影响 下一步的访问。比如QQ空间的欢迎界面， 山东省人事信息网的欢迎界面， 搜索打开山东省人事信息网，分析，避 免同一时间访问，控制用户访问数量。 。 我们这节课来学习下网页界面设计。
2、使用任一滤镜编辑图片
注意：滤镜应用的范围，仔细，按照步骤 展示图片：风景优美的图片 组长辅导（已经分好了两组）
新课教学
三、任务三 切片工具 1、打开一张图片
2、应用切片工具。 3、存储为Web和设备所用格式。 4、html样式 5、添加链接 观看演示成品。 学生练习，组长辅导。
新课教学
三、任务四 设计网站进入页界面 1、学生读懂操作步骤
第3章 网页界面设计
教学准备
一、熟悉教材，制作PPT 二、让学生安装上课所需软件 三、督促学生认真听讲，检查学生到位情况

第3页/共100页
3.1.1 Fireworks CS4的新功能
• Fireworks CS4不仅继承了以前Fireworks的强大 功能，还增加了更友好、高效的新特性、新的功能。 在新功能的帮助下，我们可以更方便地使用 Fireworks。 • 改进的性能和稳定性：使用Fireworks CS4从文件 打开和保存到元件更新，以有密集的位图和矢量操 作等整体性能增强，让用户能够更快速有效地工作。 • 全新的用户界面：Fireworks CS4使用简单易用的 通用用户界面设计，用户可以从其他Creative Suite应用程序（如Photoshop CS4、Illustrator
单击“否”按扭，则不保存对文件的修改直接退出。
第10页/共100页
3.1.3 Fireworks CS4的界面
• 1、中文版Fireworks CS4的界面
• Fireworks CS4的工作界面，如图3-1所示。它由标题 栏、菜单栏、常用工具栏与修改工具栏、工具箱、属性检 查器、其它面板和开始页六部分组成，开始页位于窗口的 中间，它包括打开最近的项目、新建、扩展和教程区四种 任务提示。
第17页/共100页
3.1.4 创建Fireworks文件
2、打开文件 打开文件的步骤如下： （1）选择“文件/打开”命令。 （2）在弹出的“打开”对话框中找到文件所在的文 件夹，选择文件。 （3）单击“打开”按钮。 用 Fireworks可以打开在其它应用程序中或以其它文 件格式创建的文件，但在打开非 PNG 格式的文件时，将 基于所打开的文件创建一个新的 Fireworks PNG 文件。 可以使用 Fireworks 的所有功能来编辑图像。然后，可以 选择“另存为”将所编辑的文档保存为新的 Fireworks PNG 文件或保存为另一种文件格式；这样做，原始文件 仍然保持不变，只是增加了新的格式文件罢了。