网页设计11 PPT课件
合集下载
网页设计与制作使用教程第11章
注：插入单选钮的HTML代码为＜INPUT type="radio" name="..." value="..."＞ 选中该单选钮，在属性面板中进行相应的属性设置
单选按钮：该名称是存储该域的值（选定值）的变量 名，必须在该表单内唯一。要保证数据的准确采集， 单选钮都是以组为单位使用的，在同一组中的单选钮 必须用同一个名称。 选定值：定义该单选钮的值。当选中该单选钮时，此 “选定值”就随表单一起提交，作为该单选钮的当前 值。 初始状态：在浏览器中首次载入该表单时该单选钮的 状态。如果选择“已勾选”，则该单选钮一加载就是 选中状态
注：多个复选框可以共用一个名称，一个复选框名称变量也可以 拥有多个值（多个值在提交时用逗号隔开）。多个复选框可以共用一 个名称时，被选中的多个复选框的值将作为该复选框名称变量的当前 值提交到服务器
（4）单选钮 单选钮允许用户在待选项中选择唯一的答案。 在新建的表单内点击鼠标，确定插入位置，然后点击插入 面板上的按钮 ，插入一单选钮
注意：1. 如果要处理表单数据，我们需要在服务器端（
即放置网页的远程计算机上）编写程序（如ASP程序）， 这部分内容已经超出了本书的范围，有兴趣的同学可以 参考其他的动态网页编程的书籍，后面我们只是对多种 动态网页技术做个简单的介绍。
2．具体使用哪种数据发送方式取决于服务器类型，可以 询问管理员来决定。如果方式任意，默认是Get方法，大 部分HTML设计者偏好使用Post方法。
，所输入的文本被替换为星号或项目符号，以隐藏该文 本，保护这些信息不被看到。
当文本框的类型设置为“多行”时，属性面板发生变 化，即文本框从“文本字段”变为“文本区域” 其属性设置和“单行”类型相似，只是更新了2个属性
《网页设计》课件——11-CSS浮动布局
A
PART ONE
重难点分析
重点：
1、浮动布局 2、消除浮动影响
难点：
1、浮动布局 2、消除浮动影响
B
PART TWO
课程讲解
常见网页布局
这是常见的1-2-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
每一块都是一个div
常见网页布局
这是常见的1-3-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
4. 多个块一起浮动，如果外层块缩小，使得同行浮动块空间不足时，浮动块会依 次向下一行移动。
5. 行内元素浮动后会强制转换成块级元素。此时要注意，一些内联属性将失效 （比如：vertical-align）.
浮动规则-1
1、浮动的块可以向左或向右移动，直到它 的外边缘碰到包含它区块的边框、或另 一个浮动框的边框、或一个标准流块的 下一行。
文档流布局方式
块级元素独占 一行，所以文档 流布局只能依次 顺序向下排列， 不能进行复杂布 局。
在实际应用中， 都采用浮动布局 或定位布局
网页元素的三种位置方式
• 普通流
• 浮动
• 定位
相对定位 绝对定位 固定定位
浮动——float属性
• 浮动的方式 取值 float : left float : right float : none
ShenYang ChinaSoft International 沈阳中软国际
浮动规则-3-1
3、如果多个块一起浮动，那么它们按照HTML代码顺序从前向后依 次跟随。 靠近页面边缘的一端是前，远离页面边缘的一端是后。
A、B块都向左浮动： A块向左浮动，B块依次跟随向左浮动。
浮动规则-3-2
PART ONE
重难点分析
重点：
1、浮动布局 2、消除浮动影响
难点：
1、浮动布局 2、消除浮动影响
B
PART TWO
课程讲解
常见网页布局
这是常见的1-2-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
每一块都是一个div
常见网页布局
这是常见的1-3-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
4. 多个块一起浮动，如果外层块缩小，使得同行浮动块空间不足时，浮动块会依 次向下一行移动。
5. 行内元素浮动后会强制转换成块级元素。此时要注意，一些内联属性将失效 （比如：vertical-align）.
浮动规则-1
1、浮动的块可以向左或向右移动，直到它 的外边缘碰到包含它区块的边框、或另 一个浮动框的边框、或一个标准流块的 下一行。
文档流布局方式
块级元素独占 一行，所以文档 流布局只能依次 顺序向下排列， 不能进行复杂布 局。
在实际应用中， 都采用浮动布局 或定位布局
网页元素的三种位置方式
• 普通流
• 浮动
• 定位
相对定位 绝对定位 固定定位
浮动——float属性
• 浮动的方式 取值 float : left float : right float : none
ShenYang ChinaSoft International 沈阳中软国际
浮动规则-3-1
3、如果多个块一起浮动，那么它们按照HTML代码顺序从前向后依 次跟随。 靠近页面边缘的一端是前，远离页面边缘的一端是后。
A、B块都向左浮动： A块向左浮动，B块依次跟随向左浮动。
浮动规则-3-2
《网页设计与制作》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
动画效果
通过添加动画效果，使网页更加生动有趣，吸 引用户的注意力。
用户反馈
及时响应用户的操作和反馈，提供直观的提示和引导，增强用户的使用体验。
数据可视化
可视化图表
使用图表、图形和数据可视化工 具，将复杂的数据以直观的方式 呈现给用户。
大数据呈现
通过数据可视化技术，展示大量 数据和信息，帮助用户更好地理 解和分析数据。
网页设计原则
内容优先
网页设计应以内容为核心，确保信息架构清晰、内容易于理解和访问。
一致性
保持设计的一致性有助于用户理解和使用网站，同时还能提高网站的 品质和品牌形象。
可访问性
设计师应确保网站对所有人都是可访问的，特别是对于残障人士和老 年人，需要考虑不同的访问需求。
响应式设计
随着移动设备的普及，响应式设计成为必须考虑的原则，确保网站在 不同设备上都能良好地展示和交互。
随着移动设备的普及，网页设计 需要实现响应式布局，以适应不 同屏幕尺寸和分辨率的设备。
02
03
适配多种浏览器
自适应设计
不同的浏览器对网页的支持程度 不同，设计师需要确保网页在不 同浏览器中呈现一致的效果。
根据设备特性，自动调整网页布 局和样式，提供最佳的用户体验。
动态交互
交互式元素
使用动态效果和交互式元素，如按钮、表单和 弹窗，提高用户参与度和互动性。
合理使用关键词，提高网站在 搜索引擎中的排名。
元标签优化
设置合适的标题、描述和关键 词元标签，提高网站在搜索结
果中的可见性。
内部链接结构
合理规划内部链接结构，提高 网站的可爬取性和内容相关性
。
外部链接建设
与其他高质量网站建立外部链 接，提高网站的权威性和信誉
Dreamweaver网页设计案例教程 第11章 综合设计实训
11.1.2 【项目创意及制作】
1．设计素材 2．设计作品效果图ຫໍສະໝຸດ 11.1.2 【项目创意及制作】
3．步骤提示
1
2
3
4
11.2 游戏娱乐网页——锋七游戏网页
【项目背景及要求】 【项目创意及制作】
11.2.1 【项目背景及要求】
1．客户名称 锋七游戏公司。 2．客户需求 锋七游戏公司是全球领先的游戏互动娱乐平台、游戏玩家的网上乐园，汇集 最新最热门的网络游戏、最好玩的大型游戏、玩家真实交友等服务，现推出几款 新的游戏，要为其前期的宣传做准备，网站内容要求能够表现公司的特点，达到 宣传效果。 3．设计要求 （1）以浅色的背景与深色图像形成对比，突出前方的宣传主体。 （2）以观感强烈的游戏画面瞬间抓住人们的视线，让人印象深刻。 （3）整体设计整洁干净，方便人们的操作。 （4）以沉稳严谨的设计体现出公司的经营特色。 （5）设计规格为1600像素（宽）×1206像素（高）。
11.4.2 【项目创意及制作】
1．设计素材 2．设计作品
效果图
11.4.2 【项目创意及制作】
3．步骤提示
1
2
3
4
11.5 电子商务网页——家政无忧网页
【项目背景及要求】 【项目创意及制作】
11.5.1 【项目背景及要求】
1．客户名称 家政无忧服务有限公司。 2．客户需求 家政无忧服务有限公司是一家以日常保洁、家电清洗、干洗服务、新居开荒 为主要经营项目的专业家政服务公司。公司为扩大服务范围，使服务更便捷，需 要制作网站，网站要突出公司的优势，整体风格简洁大气。 3．设计要求 （1）网页整体风格简洁大气，突出家政服务的专业性。 （2）网页的内容以家居为主，画面和谐，具有特色。 （3）向客户传达真实的服务信息内容。 （4）画面表现出空间感与层次感，图文搭配协调。 （5）设计规格为1400像素（宽）×2082像素（高）。
《网页设计与制作课件》全册精讲PPT教学课件
1．屏幕分辨率对网页制作的重要性
要根据网页和浏览者的特性，以合适的屏幕分 辨率为基准来设置网页尺寸，以使浏览者更加 便利地浏览网页。如游戏爱好者大部分都使用 高配置系统，所以游戏网站的网页尺寸大都在 1024像素×768像素以上，如下图所示。
项目一 网页设计与制作基础知识
13
2．常见网页尺寸
对于网页尺寸，是没有硬性规定的。目前常见的网页宽 度有1000像素、1190像素和1200像素3种，例如新浪 是1000像素、淘宝和京东是1190像素，当当是1200像 素。如果需要兼容不同浏览器尺寸，现在比较流行的做 法是做成响应式的，即根据不同分辨率显示不同的尺寸， 不过这样工作量要大很多。网页高度可根据网页内容来 定，一般不要超过3屏。
右图显示了新华网的主页，可 以看到网页中有文字、图像和 动画等。
项目一 网页设计与制作基础知识
6
在浏览三器、中网单击页右的上本角质的“工具”按钮 ，在弹出的菜单中选择“文件”>“另存为”菜单，打开
“保存网页”对话框，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，将网 页保存到磁盘中，便可看到网页的组成文件，如下图所示。
网页就是我们上网时在浏览器中打开的一 个个画面。网站则是一组相关网页的集合。 一个小型网站可能只包含几个网页，而一 个大型网站则可能包含成千上万个网页， 如新浪网就包括新闻、财经、科技、体育、 娱乐等多个板块，而每个板块又包括很多 网页。
另外，打开某个网站时显示的第一个网页 被称为网站的主页（或首页）。
当当网主页
项目一 网页设计与制作基础知识
4
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
要根据网页和浏览者的特性，以合适的屏幕分 辨率为基准来设置网页尺寸，以使浏览者更加 便利地浏览网页。如游戏爱好者大部分都使用 高配置系统，所以游戏网站的网页尺寸大都在 1024像素×768像素以上，如下图所示。
项目一 网页设计与制作基础知识
13
2．常见网页尺寸
对于网页尺寸，是没有硬性规定的。目前常见的网页宽 度有1000像素、1190像素和1200像素3种，例如新浪 是1000像素、淘宝和京东是1190像素，当当是1200像 素。如果需要兼容不同浏览器尺寸，现在比较流行的做 法是做成响应式的，即根据不同分辨率显示不同的尺寸， 不过这样工作量要大很多。网页高度可根据网页内容来 定，一般不要超过3屏。
右图显示了新华网的主页，可 以看到网页中有文字、图像和 动画等。
项目一 网页设计与制作基础知识
6
在浏览三器、中网单击页右的上本角质的“工具”按钮 ，在弹出的菜单中选择“文件”>“另存为”菜单，打开
“保存网页”对话框，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，将网 页保存到磁盘中，便可看到网页的组成文件，如下图所示。
网页就是我们上网时在浏览器中打开的一 个个画面。网站则是一组相关网页的集合。 一个小型网站可能只包含几个网页，而一 个大型网站则可能包含成千上万个网页， 如新浪网就包括新闻、财经、科技、体育、 娱乐等多个板块，而每个板块又包括很多 网页。
另外，打开某个网站时显示的第一个网页 被称为网站的主页（或首页）。
当当网主页
项目一 网页设计与制作基础知识
4
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
11网页设计与制作PPT-0401(精)
<script language="javascript" Type="text/javascript">
...... </Script> JavaScript代码在HTML页面中出现的位置： • HTML页面主体部分<body>和</body>之间 • HTML页面头部<head>和</head>之间 ② 通过单独的外部文件关联到HTML页面中 <script language=“javascript” Type=“text/javascript“ src=“***.js”>
三、项目单元知识准备 对比CSS样式 ① 行内样式 <p style=“font-size:16px;color:#f00;”>内联样式</p>
② 直接嵌入到HTML页面中
在HTML页面中使用<style>和</ style >标记嵌入样式代码，其语 法格式如下： < style Type="text/css">.....</style> JavaScript代码在HTML页面中出现的位置： • HTML页面头部<head>和</head>之间 ③ 通过单独的外部文件关联到HTML页面中 <link href=“mystyle.css” rel=“stylesheet“ type=“text/css”>
② 交换图片特效
① 用行为添加交换图片特效 ② 用js文件添加交换图片特效 effect.js文件添加如下代码：window.onload=function(){
alert("欢迎访问计算机技术系");
《网页设计基础》课件
字体运用技巧
讲解如何选择适合的字体， 以及如何运用字体来增强网 页设计的可读性。
用户体验设计
1
用户体验概述
介绍用户体验的重要性和目标，以及如何创造积极的用户体验。
2
用户分析技巧
讲解如何进行用户分析，并如何将这些分析应用于用户体验设计。
3
用户行为模型
探索用户行为模型，如用户目标和使用场景，以指导用户体验的设计和优化。
SEO优化
SEO基础知识
介绍搜索引擎优化的基本知识，包括关键字研究和网站结构优化等方面。
SEO技巧介绍
讲解如何通过内容优化、链接建设和社交媒体等技巧来提高网站的搜索排名。
SEO工具使用
介绍常用的SEO工具，如Google Analytics和Moz等，并讲解其功能和用途。
响应式设计
响应式设计概念
图标设计技巧
图形元素运用
探索图标设计的关键技巧，如 简洁性、可识别性和可扩展性。
讲解如何将图形元素巧妙地应 用于网页设计中，以增强视觉 效果。
字体设计
字体的作用
探讨字体在网页设计中的重 要性，如对读者的影响和品 牌形象的表达。
字体分类介绍
介绍常见的字体分类，如衬 线体、无衬线体和手写体， 并讨论其特点和适用场景。
色彩设计
1 色彩的作用
探讨色彩在网页设计中 的重要性，包括情绪传 达和品牌形象等方面。
2 色彩搭配原则
介绍色彩搭配的基本原 则和技巧，以及如何选 择适合的色彩组合。
3 色彩运用技巧
讲解如何巧妙地运用色 彩，以增强网页设计的 吸引力和可读性。
图形设计
图形设计原则
介绍图形设计的基本原则，包 括对比、重和对齐等方面。
介绍响应式设计的基本原理 和优势，以及如何创建适应 不同设备的网站。