网页制作PPT-ch11
合集下载
网页制作(详细版)ppt课件
WWW信息发布模式：
• WWW信息发布：采用客户端/服务器（Client / Server）模式。WWW服务器程序运行在WWW服务 器上，用于发布存放在WWW服务器中的网页；
下一页
WWW客户端程序运行在用户计算机上的网页浏览
1. 网站设计的基本知识
HTTP协议 • 超文本传输协议HTTP（Hyper Text Transfer Protocol）是 WWW服务所使用的信息传输协议，即访问Internet上的 Web页面所用协议。 • 打开Internet上某一网页：HTTP://<WWW服务器的域名 或ip地址>/<目录路径>/<文件名> 如：/wlzx/index.htm 或者：http://210.40.64.7/wlzx/index.htm
第八章 网页制作
本章内容
8.1 网站规划与设计 8.2 Dreamweaver MX基础知识 8.3 在网页中添加对象 8.4 在网页中使用行为和层 8.5 在网页中使用模板 8.6 网站制作实例
8.1 网站规划与设计
8.1.1 概述 8.1.2 网站设计 8.1.3 内容搜集与组织
home
8.1.1 概述
home
2. 网站结构设计
(1) 确定栏目和版块
• 突出特点 • 设置最近更新、网站指南和交互栏目
(2) 确定网站的目录结构
• 将所有的文件都放在站点根目录下的相应目录中。
• 按栏目内容建立子目录。每个主要的目录下都建立独 立的“images”目录。
• 不要使用中文作为目录或文件的名字，命名的名称不
能过长，应简单明了。
下一页
2. 网站结构设计
(3) 确定网站的链接结构
• WWW信息发布：采用客户端/服务器（Client / Server）模式。WWW服务器程序运行在WWW服务 器上，用于发布存放在WWW服务器中的网页；
下一页
WWW客户端程序运行在用户计算机上的网页浏览
1. 网站设计的基本知识
HTTP协议 • 超文本传输协议HTTP（Hyper Text Transfer Protocol）是 WWW服务所使用的信息传输协议，即访问Internet上的 Web页面所用协议。 • 打开Internet上某一网页：HTTP://<WWW服务器的域名 或ip地址>/<目录路径>/<文件名> 如：/wlzx/index.htm 或者：http://210.40.64.7/wlzx/index.htm
第八章 网页制作
本章内容
8.1 网站规划与设计 8.2 Dreamweaver MX基础知识 8.3 在网页中添加对象 8.4 在网页中使用行为和层 8.5 在网页中使用模板 8.6 网站制作实例
8.1 网站规划与设计
8.1.1 概述 8.1.2 网站设计 8.1.3 内容搜集与组织
home
8.1.1 概述
home
2. 网站结构设计
(1) 确定栏目和版块
• 突出特点 • 设置最近更新、网站指南和交互栏目
(2) 确定网站的目录结构
• 将所有的文件都放在站点根目录下的相应目录中。
• 按栏目内容建立子目录。每个主要的目录下都建立独 立的“images”目录。
• 不要使用中文作为目录或文件的名字，命名的名称不
能过长，应简单明了。
下一页
2. 网站结构设计
(3) 确定网站的链接结构
《网页设计与制作》PPT课件
图片边框宽度为0 (无边框)
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href="求职意向.htm"> <img border="0" src="鸽.gif" > </a> <a href="成绩单.htm="旗.gif" > </a> <a href="能力展示.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
4、你们怎么学？ 5、如何获得学分又获得知识？
教学网站：/qjbok
基本概念： 1、什么是网页？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
教学、教室安排：
周二班：时间：晚上5、6节（14:00~16:10） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） 周四班：时间：晚上9、10节（7:00~8:40） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） • 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格，实 验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老师。
五、制作滚动字幕
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href="求职意向.htm"> <img border="0" src="鸽.gif" > </a> <a href="成绩单.htm="旗.gif" > </a> <a href="能力展示.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
4、你们怎么学？ 5、如何获得学分又获得知识？
教学网站：/qjbok
基本概念： 1、什么是网页？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
教学、教室安排：
周二班：时间：晚上5、6节（14:00~16:10） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） 周四班：时间：晚上9、10节（7:00~8:40） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） • 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格，实 验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老师。
五、制作滚动字幕
网页制作(超详细ppt版)
Web浏览器的选用
现在可以得到许多web浏览器，他们遍 及了几乎所有的计算机系统。Web浏览器 的功能是充当与web的接口，它们在 internet上对特定的web页面和文档发出请 求，当它们接收到文件后，就将格式化后 的版本返回html文件并显示到屏幕之上。 安装了web浏览器的计算机还可以处理ftp 等方法的信息请求。
1.网页和网站 2.动态网站和静态网站 3.web1.0和web2.0
三.Html基础及简单页面设计
HTML的编写是指创制和定义html文档 的过程。重要内容:
1.Html标记 2.Html的基本结构 3.创建一个简单页面 4.浏览自己的页面
文档结构和格式的定义是由html元素来 完成的。而html元素是由单个或一对标记 定义的包含范围。一对标记是指一个起始
要创建自己的页面，最基础技术就是html （hypertext makeup language，超文本标记语 言），现在绝大多数web文档都是由html编写的。
www是一个全球性的、交互式的、动态的、 多平台的、分布式的、图像超文本的信息系统。
要能在web上四处不遨受游地域，的首访限问先制者，必和网须网站站安上有装的信一息个可 w上e台导b的不浏航限受览制最操器，作简如系。单台统有的客平一了户台方只通机服自法要就构务己互可就成器联以的分，是网布多w交信结保e互息布持b合的、多可浏连过反媒浏以览以新程馈体在览随器，信信w时器w提息息后w随上交，的，地发如各进在行种w更性eb 能w在ind各ows页、上lin移n式ux动等。你可以通图过像和选声择音指、视定频的高亮 度系显统示平台的文字、词或图像从等一个页面移至另一 页面，也可以利用该页的地址或url（uniform resource locator）统一资源定位器来直接移至 该指定页。
网页制作PPT教学课件
7
任务三:在首页插入四幅图像,每一幅图像 代表一个模块,图象大小设置成”249*48”, 后面用文字说明模块的概意
2020/12/09
5
使用背景图像的一些方法：
①使用小图，图片容量小，方便传输，页 面美观
②色彩淡点，有利于后面的页面制作。
2020/12/09
6
PPT精品课件
谢谢观看
Thank You For Watching
(做完的同学可以在在导航条上加入背景图像)
2020/12/09
3
表格属性的设置
合并单元格 表格（选中整个表格）、文字的对齐方式
（选中单元格） 背景色设置
任务二:仿照”心系奥运”首页进行布局
2020/12/09
4
④添加图像
添加图像: 方法一:“插入”/“图像”命令 方法二: 点击插入栏中表格的按钮
6.1（二） 网页制作
Dreamweaver 8
2020/12/09
1
第二节 学习目标
1、插入表格，利用表格布局页面 2、插入背景图像，插入图象
2020/12/09
2
③插入表格
插入表格有两种形式: ①利用表格布局网页(边框粗细设置为0) ②普通表格(根据设计要求设置边框粗细)
任务一:在”心系奥运”首页分别利用表格布局 和普通表格两种方法设计导般条.
任务三:在首页插入四幅图像,每一幅图像 代表一个模块,图象大小设置成”249*48”, 后面用文字说明模块的概意
2020/12/09
5
使用背景图像的一些方法：
①使用小图，图片容量小，方便传输，页 面美观
②色彩淡点，有利于后面的页面制作。
2020/12/09
6
PPT精品课件
谢谢观看
Thank You For Watching
(做完的同学可以在在导航条上加入背景图像)
2020/12/09
3
表格属性的设置
合并单元格 表格（选中整个表格）、文字的对齐方式
（选中单元格） 背景色设置
任务二:仿照”心系奥运”首页进行布局
2020/12/09
4
④添加图像
添加图像: 方法一:“插入”/“图像”命令 方法二: 点击插入栏中表格的按钮
6.1（二） 网页制作
Dreamweaver 8
2020/12/09
1
第二节 学习目标
1、插入表格，利用表格布局页面 2、插入背景图像，插入图象
2020/12/09
2
③插入表格
插入表格有两种形式: ①利用表格布局网页(边框粗细设置为0) ②普通表格(根据设计要求设置边框粗细)
任务一:在”心系奥运”首页分别利用表格布局 和普通表格两种方法设计导般条.
网页制作教程教案ppt
包括边框样式、颜色、 宽度等。
盒模型与布局
盒模型
每个HTML元素都可以看作是一个盒子，由内容、内边 距、边框和外边距组成。
布局方式
包括块级元素和行内元素，以及常见的布局方式如浮动 布局、定位布局和弹性布局等。
CSS动画与过渡效果
CSS动画
通过关键帧定义动画效果，可以实现元素的移动、变形等效果。
CSS过渡效果
获取元素
使用getElementById、getElementsByClassName、 getElementsByTagName等方法获取DOM元素。
修改元素
通过JavaScript修改元素的属性、内容和样式。
事件处理
了解事件类型，如click、mouseover、keydown等，并学习如何为 元素添加事件监听器。
在元素状态改变时，通过过渡效果实现平滑的视觉效果。
04
网页布局与响应式设计
固定布局与流式布局
固定布局
网页的宽度被固定，浏览器窗口变化 时，网页的宽度不会改变，但高度可 能会变化。
流式布局
网页的宽度按照浏览器窗口的大小进 行自动调整，但每行显示的内容数量 保持不变。
CSS Flexbox布局
特点
变量
使用var、let或const声明 变量，并了解变量的作用 域。
运算符
包括算术运算符、比较运 算符、逻辑运算符等。
条件语句
使用if...else、switch等语 句进行条件判断。
循环语句
使用for、while、 do...while等语句进行循环 操作。
DOM操作与事件处理
DOM结构
了解HTML文档的DOM结构，以及如何通过JavaScript访问和修改 DOM元素。
盒模型与布局
盒模型
每个HTML元素都可以看作是一个盒子，由内容、内边 距、边框和外边距组成。
布局方式
包括块级元素和行内元素，以及常见的布局方式如浮动 布局、定位布局和弹性布局等。
CSS动画与过渡效果
CSS动画
通过关键帧定义动画效果，可以实现元素的移动、变形等效果。
CSS过渡效果
获取元素
使用getElementById、getElementsByClassName、 getElementsByTagName等方法获取DOM元素。
修改元素
通过JavaScript修改元素的属性、内容和样式。
事件处理
了解事件类型，如click、mouseover、keydown等，并学习如何为 元素添加事件监听器。
在元素状态改变时，通过过渡效果实现平滑的视觉效果。
04
网页布局与响应式设计
固定布局与流式布局
固定布局
网页的宽度被固定，浏览器窗口变化 时，网页的宽度不会改变，但高度可 能会变化。
流式布局
网页的宽度按照浏览器窗口的大小进 行自动调整，但每行显示的内容数量 保持不变。
CSS Flexbox布局
特点
变量
使用var、let或const声明 变量，并了解变量的作用 域。
运算符
包括算术运算符、比较运 算符、逻辑运算符等。
条件语句
使用if...else、switch等语 句进行条件判断。
循环语句
使用for、while、 do...while等语句进行循环 操作。
DOM操作与事件处理
DOM结构
了解HTML文档的DOM结构，以及如何通过JavaScript访问和修改 DOM元素。
网页设计理论课件
网页设计理论
色彩的色调变化
配色决定印象的三要素 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）=（红色光+绿色光+蓝色光）—蓝色光=红色+绿色
网页制作ppt课件
面向21世纪高职高专计算机系列规划教材
1.4 网站与网页的基本知识
网页设计基础 网站设计基础 网站开发流程
面向21世纪高职高专计算机系列规划教材
“网页”就是指通过浏览器在WWW上看到的 页面，网页的英文名为Web Page，我们通常所说 的主页（home page）是指网站的第一个网页， 通常名称为index。 网页设计的基本要求有：页面版式和布局、 网页的色彩、网页的文字、网页中的表格等。
面向21世纪高职高专计算机系列规划教材
网站是网页的集合，是网页的组织形式。 在网站的设计过程中要注意以下几点：网站 的目标、网站的风格、网站的CI形象（Corporate Identity）、网站的栏目和版块、网站目录和链接 结构等。
面向21世纪高职高专计算机系列规划教材
一个完整的网站开发流程如下： 定义站点 建立网站结构 首页的设计和制作 其他页面的制作 测试 发布和维护
网 页 制 作
徐晓明 蔡向东 方蓓 主编 副主编
网页制作
第1章 第2章 第3章 第4章 第5章 第6章 第7章 第8章 第9章 第10章 第11章 第12章 初识Dreamweaver MX Photoshop 7.0和Flash MX的基本操作 创建网页的基本对象 样式表 使用框架 层与时间轴 插入媒体 行为 表单 库与模板 测试并发布网站 使用Dreamweaver MX创建一个讨论区
4.2 层叠样式表
层叠样式表简述 编辑CSS样式
面向21世纪高职高专计算机系列规划教材
CSS样式分类 使用CSS样式的方式 “CSS样式”面板 创建CSS样式 附加外部CSS样式表
面向21世纪高职高专计算机系列规划教材
1.4 网站与网页的基本知识
网页设计基础 网站设计基础 网站开发流程
面向21世纪高职高专计算机系列规划教材
“网页”就是指通过浏览器在WWW上看到的 页面，网页的英文名为Web Page，我们通常所说 的主页（home page）是指网站的第一个网页， 通常名称为index。 网页设计的基本要求有：页面版式和布局、 网页的色彩、网页的文字、网页中的表格等。
面向21世纪高职高专计算机系列规划教材
网站是网页的集合，是网页的组织形式。 在网站的设计过程中要注意以下几点：网站 的目标、网站的风格、网站的CI形象（Corporate Identity）、网站的栏目和版块、网站目录和链接 结构等。
面向21世纪高职高专计算机系列规划教材
一个完整的网站开发流程如下： 定义站点 建立网站结构 首页的设计和制作 其他页面的制作 测试 发布和维护
网 页 制 作
徐晓明 蔡向东 方蓓 主编 副主编
网页制作
第1章 第2章 第3章 第4章 第5章 第6章 第7章 第8章 第9章 第10章 第11章 第12章 初识Dreamweaver MX Photoshop 7.0和Flash MX的基本操作 创建网页的基本对象 样式表 使用框架 层与时间轴 插入媒体 行为 表单 库与模板 测试并发布网站 使用Dreamweaver MX创建一个讨论区
4.2 层叠样式表
层叠样式表简述 编辑CSS样式
面向21世纪高职高专计算机系列规划教材
CSS样式分类 使用CSS样式的方式 “CSS样式”面板 创建CSS样式 附加外部CSS样式表
面向21世纪高职高专计算机系列规划教材
【精品课件】网页制作的基本知识PPT共21页
61、奢侈是舒适的，否则就不是奢侈 。——CocoCha nel 62、少而好学，如日出之阳；壮而好学 ，如日 中之光 ；志而 好学， 如炳烛 之光。 ——刘 向 63、三军可夺帅也，匹夫不可夺志也。 ——孔 丘 64、人生就是学校。在那里，与其说好 的教师 是幸福 ，不如 说好的 教师是 不幸。 ——海 贝尔 65、接受挑战，就可以享受胜利的喜悦 。——杰纳勒 尔·乔治·S·巴顿
谢谢！
பைடு நூலகம்
【精品课件】网页制作的基本知识
11、获得的成功越大，就越令人高兴 。野心 是使人 勤奋的 原因， 节制使 人枯萎 。 12、不问收获，只问耕耘。如同种树 ，先有 根茎， 再有枝 叶，尔 后花实 ，好好 劳动， 不要想 太多， 那样只 会使人 胆孝懒 惰，因 为不实 践，甚 至不接 触社会 ，难道 你是野 人。(名 言网) 13、不怕，不悔(虽然只有四个字，但 常看常 新。 14、我在心里默默地为每一个人祝福 。我爱 自己， 我用清 洁与节 制来珍 惜我的 身体， 我用智 慧和知 识充实 我的头 脑。 15、这世上的一切都借希望而完成。 农夫不 会播下 一粒玉 米，如 果他不 曾希望 它长成 种籽； 单身汉 不会娶 妻，如 果他不 曾希望 有小孩 ；商人 或手艺 人不会 工作， 如果他 不曾希 望因此 而有收 益。-- 马钉路 德。