网页制作教学课件 (10)
合集下载
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
网页设计与制作说课稿（盒子模型） -完整课件PPT
教学重难点
教学重点
掌握DIV+CSS布局应用与技巧，熟练CSS语法规则。
教学难点
深入理解布局的精髓——盒子模型以及如何灵活、简练的应用。
提纲
教法与学法
◇课前分析
◇教学目标及重难点
1
◇教法与学法 ◇教学时间安排 ◇教学设计
小组讨论法
宏观： 项目教学法
◇教学反思
直观演示法
微观
任务驱动法
活动探究法
提纲 ◇课前分析 ◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教材分析
上海交通大学出版社 《网页制作三合一案例教程》
第9章“CSS标准流布局”。 对页面进行整体布局——盒子 模型
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
学情分析
对文本、图形、动画等多媒体信息的处理技术 有了一定的使用经验，但基础差异大 计算机实际操作能力较弱 对理论讲解不感兴趣。 对网页内容、结构、效果等设计的优劣有一定 的感性认识，但自主创作设计能力不足
提纲 ◇课前分析 ◇教学目标及重难点
教学目标 重点难点
◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
展
示 与
自信感、成就感、责任心
评
价
以工作任务为主线，以学生为主体，以教师为主导，融“教、 学、做、评”为一体。
提纲
布置作业
◇课前分析
◇教学目标及重难点
◇教法与学法
网页制作ppt教学课件
$item1_cJavaScript提供了许多内置函数，如Math.max()、Math.min()、Date()等，用于执行各种常见的数学和日期计算操作。
JavaScript提供了许多内置函数，如Math.max()、Math.min()、Date()等，用于执行各种常见的数学和日期计算操作。
网页制作实例
01
02
03
04
文本
图像
视频
音频
包括动画、电影、直播等视频元素。
包括图片、图标、背景等图像元素。
包括标题、段落、列表等文本元素。
包括音乐、声音、音效等音频元素。
01
02
03
04
05
建站工具介绍
官方介绍：Dreamweaver是一款网页制作软件，它使用了视觉方式创建和管理网页，是创建动态网页的工具之一。
可以选择使用现有的AJAX框架，如jQuery、Axios等，以简化开发流程。
使用AJAX框架实现异步请求，包括发送请求、处理响应、更新页面内容等。
通过优化请求频率、减少服务器响应时间等方式，提高网页的性能和响应速度。
THANK YOU
感谢聆听
CSS的主要作用是描述网页文档的外观和格式，如颜色、高度、宽度、边距等。它能够使网页更加美观、易于阅读和维护。
CSS是一种相对较新的技术，它于1990年代末期由Håkon Wium Lie和Bert Bos共同发明，并由W3C（万维网联盟）进行标准化。
选择器
属性
值
声明块
CSS选择器用于选择要应用样式的HTML元素。例如，元素选择器会选择所有给定的HTML元素。
完成前后端连接后，进行测试和调试，确保动态网页的功能和稳定性。
动态网页通常使用后端技术实现，如PHP、Java、Python等，根据需求选择合适的技术。
JavaScript提供了许多内置函数，如Math.max()、Math.min()、Date()等，用于执行各种常见的数学和日期计算操作。
网页制作实例
01
02
03
04
文本
图像
视频
音频
包括动画、电影、直播等视频元素。
包括图片、图标、背景等图像元素。
包括标题、段落、列表等文本元素。
包括音乐、声音、音效等音频元素。
01
02
03
04
05
建站工具介绍
官方介绍：Dreamweaver是一款网页制作软件，它使用了视觉方式创建和管理网页，是创建动态网页的工具之一。
可以选择使用现有的AJAX框架，如jQuery、Axios等，以简化开发流程。
使用AJAX框架实现异步请求，包括发送请求、处理响应、更新页面内容等。
通过优化请求频率、减少服务器响应时间等方式，提高网页的性能和响应速度。
THANK YOU
感谢聆听
CSS的主要作用是描述网页文档的外观和格式，如颜色、高度、宽度、边距等。它能够使网页更加美观、易于阅读和维护。
CSS是一种相对较新的技术，它于1990年代末期由Håkon Wium Lie和Bert Bos共同发明，并由W3C（万维网联盟）进行标准化。
选择器
属性
值
声明块
CSS选择器用于选择要应用样式的HTML元素。例如，元素选择器会选择所有给定的HTML元素。
完成前后端连接后，进行测试和调试，确保动态网页的功能和稳定性。
动态网页通常使用后端技术实现，如PHP、Java、Python等，根据需求选择合适的技术。
网页制作PPT课件
CSS历史
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
《网页设计》完整课件网页设计
《网页设计》完整课件
目录
• 网页设计概述 • 网页设计基础 • 网页设计技巧 • 网页设计实战 • 网页设计工具 • 网页设计发展趋势
01
网页设计概述
定义与特点
定义
网页设计是使用HTML、CSS和 JavaScript等技术，对网页进行布局 、配色、排版和交互设计的艺术。
特点
网页设计具有跨平台、跨设备的特性 ，能够通过互联网快速传播信息，提 供良好的用户体验。
色彩搭配
色彩理论
掌握基本的色彩理论，了解颜色搭配的原则和技巧，如对比、调 和等。
品牌色彩
根据品牌形象和定位，选择合适的色彩搭配，以传达品牌价值和特 点。
色彩心理学
了解不同颜色给人的心理感受，根据目标用户的需求和喜好进行色 彩搭配。
排版与布局
字体选择
01
根据内容和风格，选择合适的字体，以提升页面可读性和视觉
3
丰富的符号库
提供各种符号库，方便设计师快速创建重复元素 。
Sketch
矢量设计
Sketch是一款专注于网页设计的矢量图形软件，支持多种 平台。
插件生态
Sketch拥有丰富的插件生态，可扩展其功能，满ch支持实时预览功能，方便设计师在多种设备上查看 设计效果。
可访问性
确保网站对所有用户都易于访问和使用，满 足不同用户的需求。
一致性
保持设计风格的一致性，有助于提高网站的 辨识度和专业度。
响应式设计
根据不同设备和屏幕大小自适应布局，提供 良好的跨平台体验。
02
网页设计基础
HTML基础
HTML标签
标题、段落、列表、链接、图片等常用标签的用法。
HTML语义化标签
Figma
目录
• 网页设计概述 • 网页设计基础 • 网页设计技巧 • 网页设计实战 • 网页设计工具 • 网页设计发展趋势
01
网页设计概述
定义与特点
定义
网页设计是使用HTML、CSS和 JavaScript等技术，对网页进行布局 、配色、排版和交互设计的艺术。
特点
网页设计具有跨平台、跨设备的特性 ，能够通过互联网快速传播信息，提 供良好的用户体验。
色彩搭配
色彩理论
掌握基本的色彩理论，了解颜色搭配的原则和技巧，如对比、调 和等。
品牌色彩
根据品牌形象和定位，选择合适的色彩搭配，以传达品牌价值和特 点。
色彩心理学
了解不同颜色给人的心理感受，根据目标用户的需求和喜好进行色 彩搭配。
排版与布局
字体选择
01
根据内容和风格，选择合适的字体，以提升页面可读性和视觉
3
丰富的符号库
提供各种符号库，方便设计师快速创建重复元素 。
Sketch
矢量设计
Sketch是一款专注于网页设计的矢量图形软件，支持多种 平台。
插件生态
Sketch拥有丰富的插件生态，可扩展其功能，满ch支持实时预览功能，方便设计师在多种设备上查看 设计效果。
可访问性
确保网站对所有用户都易于访问和使用，满 足不同用户的需求。
一致性
保持设计风格的一致性，有助于提高网站的 辨识度和专业度。
响应式设计
根据不同设备和屏幕大小自适应布局，提供 良好的跨平台体验。
02
网页设计基础
HTML基础
HTML标签
标题、段落、列表、链接、图片等常用标签的用法。
HTML语义化标签
Figma
网页制作课件_10 模板和扩展Dreamweaver
10.1.4 使用可编辑的可选区域
前面分别介绍了可选区域和可编辑区域，在大多数情
况下，可选区域和可编辑区域是配套出现的，因此 Dreamweaver 8提供了一种可编辑的可选区域，可以 提高此类区域的制作效率。 1．创建可编辑可选区域 2．设置模板参数 3．保存并应用模板 4．利用参数控制模板的作用
10.3.3 课堂实例――模拟打字
Typewriter扩展插件可以在页面上显示打字效果，这
个扩展插件的类型是行为，可以从行为面板中调用， 并且使用这个扩展插件时页面中必须至少有一个层。
1．安装Typewriter扩展插件 2．使用Typewriter扩展插件
本章习题
上机练习
练习1 课件吧网站教程网页模板
10.2.1 用Fireworks制作网页切片
在Internet上冲浪时，会发现有些网页的整个背景是
一幅完整的画，非常有个性，也很漂亮。其实这样的 网页效果是利用Fireworks制作出网页图像，然后通过 切片导出为HTML代码，最后再在Dreamweaver中编 辑完成的。 1．用Fireworks制作网页图像 2．制作网页切片
练习2 Dreamweaver与Fireworks 结合制作网站首页
10.2 Dreamweaver与Fireworks结合
Fireworks最独特的功能，在于既可以编辑网页图像，又可以制作一些
网页上的动画，具有强大的矢量图和位图综合处理的功能。它可以与 Dreamweaver软件的紧密结合，无须离开Dreamweaver软件环境就可 以对Fireworks图像修剪、调整大小及进行二次编辑。 本节以一个网站主页的制作过程讲解Dreamweaver与Fireworks结合制 作网页的方法。实例效果如图所示。
网页制作ppt课件
➢ 页面的布局 ➢ 页面属性的设置
面向21世纪高职高专计算机系列规划教材
➢ 网页布局的基本概念（页面尺寸、整体造型、页 头、文本、页脚、图片、多媒体）
➢ 网页布局的方法（纸上布局法、软件布局法）
面向21世纪高职高专计算机系列规划教材
➢ 标题 ➢ 背景图像 ➢ 背景 ➢ 设置文本或链接颜色 ➢ 设置页面边距
➢ 通道（通道的含义、创建新通道、复制通道） ➢ 路径（路径的含义、路径的绘制、路径控制面板）
面向21世纪高职高专计算机系列规划教材
➢ 滤镜介绍 ➢ 滤镜使用（“水波”滤镜、“动感模糊”滤镜）
面向21世纪高职高专计算机系列规划教材
➢ 文字工具 ➢ 文字变形 ➢ 字符与段落设置
面向21世纪高职高专计算机系列规划教材
面向21世纪高职高专计算机系列规划教材
➢ 认识图层 ➢ 层的基本操作 ➢ 引导层 ➢ 运动引导层 ➢ 蒙版层 ➢帧
面向21世纪高职高专计算机系列规划教材
➢ 逐帧动画 ➢ 形变动画 ➢ 运动动画 ➢ 蒙版动画
面向21世纪高职高专计算机系列规划教材
➢ 认识符号 ➢ 制作符号 ➢ 按钮的制作 ➢ 编辑符号 ➢ 实例和符号的关系
面向21世纪高职高专计算机系列规划教材
➢ 导入外部表格数据 ➢ 导出表格数据
面向21世纪高职高专计算机系列规划教材
3.5 超级链接
➢ 了解超级链接 ➢ 创建超级链接 ➢ 管理超级链接 ➢ 导航条
面向21世纪高职高专计算机系列规划教材
➢ 超级链接的基础 ➢ 合理安排超级链接 ➢ 链接的路径（URL、绝对路径、相对路径、基于
➢ 2.1 Photoshop 7.0的基本操作 ➢ 2.2 Flash MX的基本操作
面向21世纪高职高专计算机系列规划教材
面向21世纪高职高专计算机系列规划教材
➢ 网页布局的基本概念（页面尺寸、整体造型、页 头、文本、页脚、图片、多媒体）
➢ 网页布局的方法（纸上布局法、软件布局法）
面向21世纪高职高专计算机系列规划教材
➢ 标题 ➢ 背景图像 ➢ 背景 ➢ 设置文本或链接颜色 ➢ 设置页面边距
➢ 通道（通道的含义、创建新通道、复制通道） ➢ 路径（路径的含义、路径的绘制、路径控制面板）
面向21世纪高职高专计算机系列规划教材
➢ 滤镜介绍 ➢ 滤镜使用（“水波”滤镜、“动感模糊”滤镜）
面向21世纪高职高专计算机系列规划教材
➢ 文字工具 ➢ 文字变形 ➢ 字符与段落设置
面向21世纪高职高专计算机系列规划教材
面向21世纪高职高专计算机系列规划教材
➢ 认识图层 ➢ 层的基本操作 ➢ 引导层 ➢ 运动引导层 ➢ 蒙版层 ➢帧
面向21世纪高职高专计算机系列规划教材
➢ 逐帧动画 ➢ 形变动画 ➢ 运动动画 ➢ 蒙版动画
面向21世纪高职高专计算机系列规划教材
➢ 认识符号 ➢ 制作符号 ➢ 按钮的制作 ➢ 编辑符号 ➢ 实例和符号的关系
面向21世纪高职高专计算机系列规划教材
➢ 导入外部表格数据 ➢ 导出表格数据
面向21世纪高职高专计算机系列规划教材
3.5 超级链接
➢ 了解超级链接 ➢ 创建超级链接 ➢ 管理超级链接 ➢ 导航条
面向21世纪高职高专计算机系列规划教材
➢ 超级链接的基础 ➢ 合理安排超级链接 ➢ 链接的路径（URL、绝对路径、相对路径、基于
➢ 2.1 Photoshop 7.0的基本操作 ➢ 2.2 Flash MX的基本操作
面向21世纪高职高专计算机系列规划教材
网页设计理论课件
网页设计理论
色彩的色调变化
配色决定印象的三要素 1、色调 2、色相 3、对比
网页设计理论
1、主色 2、背景色 3、融合色 4、强调色
色彩的分类
网页设计理论
特点： 1、内容多，功能多。 2、以点盖面为主。 3、首页一般突出教育文化
布局： 横向布局较多 色彩： 以绿色、蓝色较多 ……
教育类网站
网页设计理论
特点： 1、布局简单，学问多。 2、用户体验很重要。 3、精神感受和粘合度高。
布局： 布局简单，速度快。 色论
CMY （CMYK） -- 减色混合色彩模型 青（Cyan）、品红（Magenta）、黄（Yellow）分别是红（R）、绿（G）、蓝（B）三色的互补色，是硬拷贝设备上输出图形的颜色，如彩 色打印、印刷等。它们与荧光粉组合光颜色的显示器不同，是通过打印彩墨（ink）、彩色涂料的反射光来显现颜色的，是一种减色组合。 由青、品红和黄三色组成的色彩模型，使用时相当于从白色光中减去某种颜色，因此又叫减色系统。 在笛卡儿坐标系中，CMY色彩模型与RGB色彩模型外观相似（如图），但原点和顶点刚好相反，CMY模型的原点是白色，相对的顶点是黑色。 CMY模型中的颜色是从白色光中减去某种颜色，而不是象RGB模型那样，是在黑色光中增加某种颜色。 因此，CMY三种被打印在纸上的颜色，我们可以理解为： 青（C）= 白色光 — 红色光 品红（M）= 白色光 — 绿色光 黄（Y）= 白色光 — 蓝色光 由于白色光是由红、绿、蓝三色光相加得到的，上面的等式可以还原为我们常用的加色等式： 青（C）=（红色光+绿色光+蓝色光）—红色光=绿色+蓝色 品红（M）=（红色光+绿色光+蓝色光）—绿色光=红色+蓝色 黄（Y）=（红色光+绿色光+蓝色光）—蓝色光=红色+绿色
色彩的色调变化
配色决定印象的三要素 1、色调 2、色相 3、对比
网页设计理论
1、主色 2、背景色 3、融合色 4、强调色
色彩的分类
网页设计理论
特点： 1、内容多，功能多。 2、以点盖面为主。 3、首页一般突出教育文化
布局： 横向布局较多 色彩： 以绿色、蓝色较多 ……
教育类网站
网页设计理论
特点： 1、布局简单，学问多。 2、用户体验很重要。 3、精神感受和粘合度高。
布局： 布局简单，速度快。 色论
CMY （CMYK） -- 减色混合色彩模型 青（Cyan）、品红（Magenta）、黄（Yellow）分别是红（R）、绿（G）、蓝（B）三色的互补色，是硬拷贝设备上输出图形的颜色，如彩 色打印、印刷等。它们与荧光粉组合光颜色的显示器不同，是通过打印彩墨（ink）、彩色涂料的反射光来显现颜色的，是一种减色组合。 由青、品红和黄三色组成的色彩模型，使用时相当于从白色光中减去某种颜色，因此又叫减色系统。 在笛卡儿坐标系中，CMY色彩模型与RGB色彩模型外观相似（如图），但原点和顶点刚好相反，CMY模型的原点是白色，相对的顶点是黑色。 CMY模型中的颜色是从白色光中减去某种颜色，而不是象RGB模型那样，是在黑色光中增加某种颜色。 因此，CMY三种被打印在纸上的颜色，我们可以理解为： 青（C）= 白色光 — 红色光 品红（M）= 白色光 — 绿色光 黄（Y）= 白色光 — 蓝色光 由于白色光是由红、绿、蓝三色光相加得到的，上面的等式可以还原为我们常用的加色等式： 青（C）=（红色光+绿色光+蓝色光）—红色光=绿色+蓝色 品红（M）=（红色光+绿色光+蓝色光）—绿色光=红色+蓝色 黄（Y）=（红色光+绿色光+蓝色光）—蓝色光=红色+绿色
第10课网页的编辑与发布(共19张PPT)八年级上册
03
网页优化
搜索引擎优化
关键词选择：选择与网页内容相关的关键词，提高搜索排名
内容优化：提高网页内容的质量，增加原创性和可读性
结构优化：优化网页结构，提高用户体验和搜索引擎友好度
链接优化：增加高质量的外部链接和内部链接，提高网页权重和流量
减少HTTP请求次数：合并CSS和JavaScript文件，使用CSS Sprites等压缩文件：使用Gzip压缩，减少文件大小延迟加载：将不重要的内容延迟加载，提高页面加载速度使用CDN：将静态文件存储在CDN上，提高用户访问速度减少DOM操作：减少DOM操作次数，提高页面渲染速度使用缓存：使用浏览器缓存，减少服务器请求次数优化图片：使用压缩和优化后的图片，减少文件大小减少重定向：减少页面重定Figma：专业的在线协作设计软件，适合团队协作设计网页
06
InDesign：专业的排版设计软件，可用于设计网页的版式和布局
网页布局与排版
网页布局：合理规划页面元素，使页面结构清晰、易于阅读
03
字体选择：根据页面主题和内容选择合适的字体
04
色彩搭配：根据页面主题和内容选择合适的色彩搭配，提高页面视觉效果
同学们再见！
授课老师：
时间：2024年9月1日
网页加载速度优化
网页兼容性优化
浏览器兼容性：确保网页在不同浏览器上正常显示
屏幕分辨率兼容性：适应不同屏幕分辨率的设备
操作系统兼容性：兼容不同操作系统，如Windows、Mac、Linux等
设备兼容性：适应不同设备，如PC、手机、平板等
谢谢
同学们再见！
授课老师：
时间：2024年9月1日
2024课件
02
空间：存放网站文件和数据的服务器，需要购买和配置
网页优化
搜索引擎优化
关键词选择：选择与网页内容相关的关键词，提高搜索排名
内容优化：提高网页内容的质量，增加原创性和可读性
结构优化：优化网页结构，提高用户体验和搜索引擎友好度
链接优化：增加高质量的外部链接和内部链接，提高网页权重和流量
减少HTTP请求次数：合并CSS和JavaScript文件，使用CSS Sprites等压缩文件：使用Gzip压缩，减少文件大小延迟加载：将不重要的内容延迟加载，提高页面加载速度使用CDN：将静态文件存储在CDN上，提高用户访问速度减少DOM操作：减少DOM操作次数，提高页面渲染速度使用缓存：使用浏览器缓存，减少服务器请求次数优化图片：使用压缩和优化后的图片，减少文件大小减少重定向：减少页面重定Figma：专业的在线协作设计软件，适合团队协作设计网页
06
InDesign：专业的排版设计软件，可用于设计网页的版式和布局
网页布局与排版
网页布局：合理规划页面元素，使页面结构清晰、易于阅读
03
字体选择：根据页面主题和内容选择合适的字体
04
色彩搭配：根据页面主题和内容选择合适的色彩搭配，提高页面视觉效果
同学们再见！
授课老师：
时间：2024年9月1日
网页加载速度优化
网页兼容性优化
浏览器兼容性：确保网页在不同浏览器上正常显示
屏幕分辨率兼容性：适应不同屏幕分辨率的设备
操作系统兼容性：兼容不同操作系统，如Windows、Mac、Linux等
设备兼容性：适应不同设备，如PC、手机、平板等
谢谢
同学们再见！
授课老师：
时间：2024年9月1日
2024课件
02
空间：存放网站文件和数据的服务器，需要购买和配置
教学课件电子商务网页设计与制作10.2任务一制作电商网站轮播图动画
01 打开一个素材文件，浏览页面效果。
02转换到源代码视图中，可以看到<body>标签之间的页面主体内容代码。
03 将实现图像滑动切换的JavaScript代码添加到<body>与</body>之间
04 保存页面，在浏览器中浏览页面，体验JavaScript实现的图像滑动效果。
SAMPLE
THANKS
练一练使用JavaScript实现可选择字体大小
03切换到10-1.css中，创建名为.link01的类CSS样式的4种伪类，如图10-14所示。并将样式应用到页面文字中，如图10-15所示。
图10-14
图10-15
04执行“文件>保存”，将页面保存，并保存外部CSS样式表文件，按下键盘上的F12键测试页面，页面效果如图10-16所示。
制作电商网站首页轮播图
图10-25
4 新手试炼——制作多彩下拉列表
如果一个网页界面能够展示图像的空间很有限，那么我们便可以通过使用滑动切换的方式将较多的图像全部展示在浏览者面前，并且还能够为网页界面增加动态的视觉效果，本实例就通过使用JavaScript脚本实现网页中图像滑动切换的效果。
02在源代码视图中，为设置字体大小链接的超链接设置脚本链接，如图10-13所示。
图10-13
提示：该段JavaScript代码是用来定义一个函数接收传递来的字体大小参数，能够将指定id名称的元素中的文字大小修改为接收到的参数的大小。例如，在该页面中添加的JavaScript代码中是将页面中ID名为text的Div中的字体大小属性进行重新设置。
图10-16
3 任务实施——制作电商网站首页轮播图
制作电商网站首页轮播图
01执行“文件>打开”命令，将“项目九/index.html”文件打开，页面效果如图10-17所示。在源代码中找到id为banner的div，将其里面的图片删除，如图10-18所示。
02转换到源代码视图中，可以看到<body>标签之间的页面主体内容代码。
03 将实现图像滑动切换的JavaScript代码添加到<body>与</body>之间
04 保存页面，在浏览器中浏览页面，体验JavaScript实现的图像滑动效果。
SAMPLE
THANKS
练一练使用JavaScript实现可选择字体大小
03切换到10-1.css中，创建名为.link01的类CSS样式的4种伪类，如图10-14所示。并将样式应用到页面文字中，如图10-15所示。
图10-14
图10-15
04执行“文件>保存”，将页面保存，并保存外部CSS样式表文件，按下键盘上的F12键测试页面，页面效果如图10-16所示。
制作电商网站首页轮播图
图10-25
4 新手试炼——制作多彩下拉列表
如果一个网页界面能够展示图像的空间很有限，那么我们便可以通过使用滑动切换的方式将较多的图像全部展示在浏览者面前，并且还能够为网页界面增加动态的视觉效果，本实例就通过使用JavaScript脚本实现网页中图像滑动切换的效果。
02在源代码视图中，为设置字体大小链接的超链接设置脚本链接，如图10-13所示。
图10-13
提示：该段JavaScript代码是用来定义一个函数接收传递来的字体大小参数，能够将指定id名称的元素中的文字大小修改为接收到的参数的大小。例如，在该页面中添加的JavaScript代码中是将页面中ID名为text的Div中的字体大小属性进行重新设置。
图10-16
3 任务实施——制作电商网站首页轮播图
制作电商网站首页轮播图
01执行“文件>打开”命令，将“项目九/index.html”文件打开，页面效果如图10-17所示。在源代码中找到id为banner的div，将其里面的图片删除，如图10-18所示。
精品课件-图像处理及网页制作-第10章
ImageReady的主要功能有创建和管理切片、图像映射、制 作翻转和动画，并可对图像进行Web优化。
Photoshop和ImageReady可以很方便地进行相互切换，只 需单击工具箱底部的切换按钮，或按快捷键Ctrl + Shift + M 即可(如图10-1所示)。
5 图10-1 ImageReady切换按钮
4
10.1.1 ImageReady简介 Photoshop自带了一个Web图像处理和动画制作工具——
ImageReady。在设计网页时，两个工具互相配合，各司其职。 Photoshop主要用于创建在Web上的静态图像，而ImageReady则 用于高级Web处理和创建动态Web图像(如动画和翻转)。
具”，在图像中拖出一个矩形框，将要创建切片的区域包括进
去。默认情况下所创建的用户切片其边缘显示为黄色的实线，
而自动切片的边缘为蓝色的虚线。自动切片区域呈半透明显示。
(2) 修改切片大小。如果对切片的区域不满意，可以调整
其大小，自动切片区域会根据调整结果重新划分。将鼠标放到
切片边缘上，此时该切片区边缘显示为黄色实线，其上还会显
11
(1) “原稿”视图：显示未优化的图像。 (2) “优化”视图：显示经优化设置的图像。 (3) “双联”视图：并排显示图像的两个版本。 (4) “四联”视图：同时显示图像的四个版本。
12
2. 查看图像信息 (1) 缩放比例：单击文档窗口左下部的”缩放级别”区域， 弹出一组菜单，从中可选择图像的显示比例，或者对图像进行 缩放。 (2) 图像信息：单击文档窗口下部的“图像信息”，弹出 一组菜单，在从中选择所要显示的信息，如原稿/优化文件大 小、优化信息、图像尺寸等，还可以显示在不同网络速度时的 估计下载时间。 在“双联”和“四联”视图中，每个视图下方的注释区域 也提供了相关的优化信息。
Photoshop和ImageReady可以很方便地进行相互切换，只 需单击工具箱底部的切换按钮，或按快捷键Ctrl + Shift + M 即可(如图10-1所示)。
5 图10-1 ImageReady切换按钮
4
10.1.1 ImageReady简介 Photoshop自带了一个Web图像处理和动画制作工具——
ImageReady。在设计网页时，两个工具互相配合，各司其职。 Photoshop主要用于创建在Web上的静态图像，而ImageReady则 用于高级Web处理和创建动态Web图像(如动画和翻转)。
具”，在图像中拖出一个矩形框，将要创建切片的区域包括进
去。默认情况下所创建的用户切片其边缘显示为黄色的实线，
而自动切片的边缘为蓝色的虚线。自动切片区域呈半透明显示。
(2) 修改切片大小。如果对切片的区域不满意，可以调整
其大小，自动切片区域会根据调整结果重新划分。将鼠标放到
切片边缘上，此时该切片区边缘显示为黄色实线，其上还会显
11
(1) “原稿”视图：显示未优化的图像。 (2) “优化”视图：显示经优化设置的图像。 (3) “双联”视图：并排显示图像的两个版本。 (4) “四联”视图：同时显示图像的四个版本。
12
2. 查看图像信息 (1) 缩放比例：单击文档窗口左下部的”缩放级别”区域， 弹出一组菜单，从中可选择图像的显示比例，或者对图像进行 缩放。 (2) 图像信息：单击文档窗口下部的“图像信息”，弹出 一组菜单，在从中选择所要显示的信息，如原稿/优化文件大 小、优化信息、图像尺寸等，还可以显示在不同网络速度时的 估计下载时间。 在“双联”和“四联”视图中，每个视图下方的注释区域 也提供了相关的优化信息。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
10.2
矢量图形绘制与编辑
图像有位图和矢量图两种。严格地说，位图被称 为图像，矢量图被称为图形。它们之间最大的区 别就是位图放大到一定比例时会变得模糊，而矢 量图不管放到多大都不会模糊。平时我们拍摄的 照片、扫描的图像等都属于位图。位图与矢量图 相比，优点是所表现的效果更真实、细腻，常用 于广告设计等领域；缺点是文件尺寸太大，且和 分辨率有关。
10.2.3
绘制形状
利用Fireworks提供的其他绘画工具可以非常方 便地绘制椭圆、矩形、星形等。其中，使用“矩 形”工具和“椭圆”工具时，如果按住【Shift 】键单击并拖动，则可绘制正方形和圆形。按住 【Alt】键单击并拖动可绘制中心对称矩形和椭 圆。按住【Shift+Alt】组合键单击并拖动，可 从中心点绘制正方形和圆形。
范例2
绘制卡通广告条背景
在学习了矢量图形的绘制与编辑后，本节通过 制作一个“卡通广告条背景”的例子，来了解 一下它们在实际网页制作中的应用（具体操作 见视频10-2）。
3．“更改区域形状”工具
利用“更改区域形状”工具可推拉路径。选择 该工具后，将光标移至路径区域单击并拖动即 可改变路径形状。同样，利用该工具的属性面 板可设置推拉半径、推拉强度等。
4．“刀子”工具
用“指针”工具 选中路径后，选择“刀子”工 具 在目标路径上单击并拖动可绘制分割线，释 放鼠标后即可分割路径。
10.1.3
属性面板
“属性”面板是一个上下文关联面板，它用来 显示或设置当前工具、对象或文档的属性。默 认情况下，“属性”面板位于工作区底部。
单击此按钮 可展开或折 叠属性面板 单击此按钮可以 半高或全高方式 显示属性面板
10.1.4
文档编辑窗口
顾名思义，文档编辑窗口主要用于编辑文档。 Fireworks 8的多文档编辑界面可以使用户同 时打开和浏览多个文档，单击窗口左上方的文 档标签可以在各个文档之间切换。
第10章
Fireworks 8入门
初识Fireworks 8 矢量图形绘制与编辑
10.1
初识Fireworks 8
Fireworks 8同Dreamweaver 8的启动过程类似。 启动Fireworks 8后，系统会首先显示起始页。 在起始页的“新建”列中单击“Fireworks文件” 后，将打开“新建文档”对话框。设置各项参数 后单击“确定”按钮，将进入Fireworks 8的操作 界面。
拖动调整杆 端点，调整 填充效果 移动图案 中心点
10.2.6
对象组合和取消
要组合对象，应首先选择“指针”工具 或“ 部分选定”工具 ，然后按住【Ctrl】键单击 选择多个对象；或者拖出一个选择框来选择多 个对象，此时位于选择框内或与选择框相交的 对象均被选中。最后选择“修改”>“组合” 菜单或按【Ctrl+G】组合键，也可单击“修改 ”工具栏中的“组合”按钮。
10.2.1
设置笔触与填充
如果已经确定了所要绘制图形的颜色，最好在 绘制前就设置好笔触（描边）和填充颜色。
单击此按钮表 示不要笔触 单击此按钮表 示不要填充
此时将滴管移至文 档区单击可将文档 中的现有颜色设置 为笔触或填充色
10.2.2
绘制线条
在Fireworks中，用来绘制线条的工具有“直线 ”工具、“钢笔”工具、“矢量路径”工具以及 “重绘路径”工具，本节重点介绍“钢笔”工具 的应用。 选中“钢笔”工具后，在不同位置单击可绘制连 续的直线段。如在某点单击并拖动，则可绘制曲 线路径，此时将在节点位置出现调整杆。
5．组合路径
通过选择“修改”>“组合路径”菜单下的“联 合”、“交集”、“打孔”或“裁切”等命令可 以方便地组合路径。
6．改变路径
使用“修改”>“改变路径”菜单中的各选项也 可以非常方便地对路径进行编辑。 （1）路径简化
（2）扩展笔触 （3）扩展与收缩路径
10.2.5
设置矢量图形填充效果
如果路径的填充内容为渐变色或图案，则使用 “指针”工具单击路径后将出现一个或两个调 整杆，利用调整杆可调整填充效果。
10.1.1
工具栏
Fireworks 8的工具栏包括“主要”工具栏和 “修改”工具栏。默认状态下，工具栏是关闭 的，选择“窗口”>“工具栏”菜单下的相应 选项，可打开相应的工具栏。
“主要”
工具栏
“修改”
工具栏
10.1.2
工具面板
默认状态下，“工具”面 板位于）、颜色和视 图。如果某个工具图标的 右下角有一个小黑三角符 号，单击并按住鼠标不放 将打开该工具的同位工具 组。
标尺
网格
“帧的播放” 工具栏
视图控 制栏
10.1.5
控制面板
默认情况下，Fireworks中的控制面板成组停 放在工作区右侧。利用这些面板，可以方便地 管理文档中的层，设置文档优化参数，设置动 画效果，以及插入特殊字符等。
范例1
制作一个简单广告条
在认识了Fireworks 8的操作界面后，下面通 过一个简单的实例来认识一下在Fireworks 8 中工作的一般流程（具体操作见视频10-1）。
10.2.4
编辑矢量图形
1．“部分选定”工具
利用“部分选定”工具可以方便地调整路径 形状。例如，单击节点并拖动可调整节点位 置；单击调整杆端点并拖动可改变调整杆的 长度与方向，进而改变路径形状。
2．“自由变形”工具
利用“自由变形”工具 可推拉路径的任意部 分，从而弯曲路径，此时系统将自动增加、移 动或删除路径上的节点。 当光标靠近路径时，如果光标箭头的右下角显 示了一个“s”，此时单击并拖动可调整路径 的弯曲程度。如果光标离路径稍远，光标箭头 的右下角显示为“o”，此时单击可为路径增 加一段圆弧，如果继续拖动，则可以改变圆弧 的位置。