网页制作教学课件
合集下载
《网页设计基础》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
【完整版】网页设计与制作课程课件
探索响应式网页设计的原理和技巧，学习如何创建适应不同屏幕和设备的网 页。
网页排版和布局
深入研究网页排版和布局的原则，包括网格系统、流式布局和固定布局等技术。
图像、音频和视频在网页中的应用
学习如何在网页中嵌入各种媒体文件，创建富媒体的用户体验，提升网页的吸引力。
动态交互效果设计实战
通过实际案例和项目，学习如何使用JavaScript和CSS创建各种动态交互效果。
PHP语言基础
介绍PHP的基本语法、函数和流程控制，学习如何使用PHP开发动态网页。
MVC模式与Web应用程序框架
深入研究MVC模式的原理和应用，介绍常用的Web应用程序框架。
网站发布与维护
了解网站发布的流程和方法，学习如何进行网站的维护和更新。
网站安全和防范策略
探索网站安全的重要性和挑战，学习如何应对常见的安全威胁和攻击。
【完整版】网页设计与制 作课程课件
探索网页设计与制作的全过程，从前端开发基础到后端开发基础，通过丰富 的案例和实战项目，提升您的技能与知识。
网页设历程以及课程的主要内容和学习目标。
前端开发基础
介绍前端开发的基本概念、技术工具和流程，包括HTML、CSS和JavaScript。
网页性能和优化
深入了解网页性能优化的技术和策略，提高网页的加载速度和用户体验。
前端框架的使用
介绍常见的前端框架，如Bootstrap和Vue.js，学习如何使用框架开发快速高效的网页。
后端开发基础
探索后端开发的基本概念和技术，包括服务器端语言和数据库。
数据库设计和应用
学习数据库的基本原理和设计方法，以及如何使用SQL语言进行数据查询和操 作。
HTML语言基础
学习HTML的基本语法和标签，掌握常用标签的用法以及语义化网页的重要性。
网页排版和布局
深入研究网页排版和布局的原则，包括网格系统、流式布局和固定布局等技术。
图像、音频和视频在网页中的应用
学习如何在网页中嵌入各种媒体文件，创建富媒体的用户体验，提升网页的吸引力。
动态交互效果设计实战
通过实际案例和项目，学习如何使用JavaScript和CSS创建各种动态交互效果。
PHP语言基础
介绍PHP的基本语法、函数和流程控制，学习如何使用PHP开发动态网页。
MVC模式与Web应用程序框架
深入研究MVC模式的原理和应用，介绍常用的Web应用程序框架。
网站发布与维护
了解网站发布的流程和方法，学习如何进行网站的维护和更新。
网站安全和防范策略
探索网站安全的重要性和挑战，学习如何应对常见的安全威胁和攻击。
【完整版】网页设计与制 作课程课件
探索网页设计与制作的全过程，从前端开发基础到后端开发基础，通过丰富 的案例和实战项目，提升您的技能与知识。
网页设历程以及课程的主要内容和学习目标。
前端开发基础
介绍前端开发的基本概念、技术工具和流程，包括HTML、CSS和JavaScript。
网页性能和优化
深入了解网页性能优化的技术和策略，提高网页的加载速度和用户体验。
前端框架的使用
介绍常见的前端框架，如Bootstrap和Vue.js，学习如何使用框架开发快速高效的网页。
后端开发基础
探索后端开发的基本概念和技术，包括服务器端语言和数据库。
数据库设计和应用
学习数据库的基本原理和设计方法，以及如何使用SQL语言进行数据查询和操 作。
HTML语言基础
学习HTML的基本语法和标签，掌握常用标签的用法以及语义化网页的重要性。
《网页设计项目》课件
适度使用
在适当的地方使用动画和特效，增强网站的互动性和吸引力。
性能优化
确保动画和特效流畅运行，不影响用户的浏览体验。
响应式动画
根据设备性能和屏幕尺寸，调整动画效果，提供一致的视觉体验。
04
网页设计案例分析
案例一：优秀网页设计欣赏
总结词
简洁大方、布局合理、色彩搭配和谐
详细描述
该网页设计简洁大方，没有过多的装饰元素，突出内容本身。布局合理，各个 区块划分清晰，便于用户浏览。色彩搭配和谐，整体色调统一，给人舒适的感 觉。
测试网站在不同浏览器、不同设备和屏幕分辨率下的显示效果和兼 容性。
安全测试
检测网站是否存在安全漏洞和安全隐患，如SQL注入、跨站脚本攻 击等。
上线与维护
上线发布
将网站部署到服务器上，对外发 布。
维护更新
定期对网站进行维护和更新，包 括内容更新、功能升级和修复漏 洞等。
03
网页设计技巧
用户体验设计
提高网站流量
通过设计吸引用户点击和 浏览，增加网站流量和用 户粘性。
项目背景
市场需求
随着互联网的普及，网页 设计在商业、教育、娱乐 等领域的需求日益增长。
技术发展
网页设计技术的不断更新 和进步，为设计提供了更 多的可能性。
用户体验
用户对网页设计的要求越 来越高，要求设计简洁、 美观、易用。
项目意义
流式布局
03
采用百分比宽度代替像素宽度，使元素在不同屏幕尺寸下都能
良好显示。
色彩与排版
色彩搭配
选择与品牌或主题相符的颜色，保持色彩的协调和统一。
字体选择
选用易读、易识别的字体，确保文字内容在各种设备上都能清晰显 示。
网页制作ppt课件第4章超链接
超链接的重要性
总结词
超链接在网页制作中起着至关重要的作用，它能够提高用户体验、增强网站导航、增加网站流量和提升搜索引擎 排名。
详细描述
超链接是网页中不可或缺的一部分，它能够提高用户体验，使用户能够方便地浏览和获取信息。通过设置合理的 超链接，可以增强网站的导航结构，使用户更容易找到所需内容。同时，超链接还可以增加网站的外部链接数量， 提高网站的权重和流量，从而提升搜索引擎排名。
问。
图片链接
总结词
图片链接是指将一张图片设置为超链接 ，当用户点击这张图片时，会跳转到指 定的片链接，首先需要插入一 张图片，然后选中这张图片，选择“插入 ”菜单中的“超链接”选项。在弹出的对 话框中，输入要链接到的网址或文件路径 ，并设置好显示的文字和颜色等属性。点 击确定后，选中的图片就会变成超链接， 用户可以直接点击访问。
确保超链接指向的内容合法、合规， 不涉及任何违法、侵权或不良信息。
避免在超链接中传递任何误导、虚假 或欺诈信息，以免引起法律纠纷和不 良后果。
在使用外部链接时，尊重原网站的版 权和隐私政策，避免侵犯他人的权益。
06
案例分析
优秀超链接案例一
01
案例名称
旅游网站导航栏
02 03
描述
该网站通过超链接将各个旅游景点的页面相互连接，使用户可以轻松跳 转到感兴趣的景点页面，同时每个景点页面都提供了返回主页的超链接， 方便用户浏览。
使用链接管理工具或插件来检 测和清除死链，提高网站的用 户体验和搜索引擎优化效果。
优化用户体验
确保超链接的文本清晰、简洁， 易于理解，避免使用过于复杂或
难以理解的链接描述。
合理规划超链接的位置和布局， 使其符合用户的浏览习惯和阅读
网页制作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 提供了状态管理功能，可以方便地管理组件的状态和数据。
网页制作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）=（红色光+绿色光+蓝色光）—蓝色光=红色+绿色
网页制作课件ppt
提高网站流量，吸引更多 潜在客户，提高品牌知名 度和销售额。
SEO基本原则
关键词研究、内容质量、 网站结构、外部链接和内 部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使 用CDN等方式提高页面加 载速度。
移动端优化
确保网站在移动设备上显 示良好，提高用户体验。
响应式设计
使网站能够适应不同设备 和屏幕尺寸，提供一致的 用户体验。
网站推广策略
关键词广告 社交媒体营销
内容营销 合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容，吸引目标受众。 创建高质量、有价值的文章、视频等，吸引潜在客户并提高品
牌知名度。 与其他网站合作，互相推广，增加网站流量。
06 网页制作实例教 程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体，确保文字内容 在各种设备和屏幕分辨率上都能清晰 显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤，突出核心内容，使用户 能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单，使用户能够方便 地浏览不同页面。
层次分明
合理划分页面区域，使内容按照重要程度进 行排序，提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台，需要展示丰 富的商品信息和购物体验。在制作电商网站时，需要 考虑如何设计出美观、实用的商品展示页面，以及如 何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性，提供良好的 用户体验和购物体验。在制作电商网站时， 需要考虑如何设计出易于操作和使用的界面 和功能，以及如何提供个性化的服务和支持
SEO基本原则
关键词研究、内容质量、 网站结构、外部链接和内 部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使 用CDN等方式提高页面加 载速度。
移动端优化
确保网站在移动设备上显 示良好，提高用户体验。
响应式设计
使网站能够适应不同设备 和屏幕尺寸，提供一致的 用户体验。
网站推广策略
关键词广告 社交媒体营销
内容营销 合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容，吸引目标受众。 创建高质量、有价值的文章、视频等，吸引潜在客户并提高品
牌知名度。 与其他网站合作，互相推广，增加网站流量。
06 网页制作实例教 程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体，确保文字内容 在各种设备和屏幕分辨率上都能清晰 显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤，突出核心内容，使用户 能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单，使用户能够方便 地浏览不同页面。
层次分明
合理划分页面区域，使内容按照重要程度进 行排序，提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台，需要展示丰 富的商品信息和购物体验。在制作电商网站时，需要 考虑如何设计出美观、实用的商品展示页面，以及如 何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性，提供良好的 用户体验和购物体验。在制作电商网站时， 需要考虑如何设计出易于操作和使用的界面 和功能，以及如何提供个性化的服务和支持
第9章 网页制作 《计算机文化基础》 教材课件
使用格式如下：
<p align=对齐方式> … </p> 2）换行标记<br> <br>标记可以强制文本换行。该标记只有起始标记。 3）水平线标记<hr> 水平线标记<hr>用于在网页中插入一条水平线。
2020/9/24
——大学IT——
11
2. 文字格式
HTML语言中用于文字格式化的标记有： 1）标题标记<hn> 格式为：<hn 属性=属性值> 标题文字内容 </hn> 目 录 其中n说明大小级别，取值范围为1到6的数字。把 上一页 标题分为 6级，即h1~h6，其中h1文字最大，h6文 字最小。
2020/9/24
——大学IT——
13
目录 上一页 下一页 结束
2020/9/24
文字格式
3）字形标记
字形标记用于设置文字的粗体、斜体、下 划线、上标、下标等。
标记格式
<B>…</B>
<I>…</I>
<U>…</U> <SUP>…</SU
P> <SUB>…</SU
B>
字形结果 粗体 斜体
下划线 上标 下标
我们把用HTML语言编写的文件称为HTML文件。它 通常被存储在Web服务器上，客户端通过浏览器向Web 服务器发出请求，服务器响应请求并将HTML文件发送 目 录 给浏览器，然后由浏览器对文件中的标记作出相应的解 上一页 释，以页面的形式呈现在用户屏幕上。因此，我们又把 下一页 HTML文档称为网页 (Web Page)。
下一页
<p align=对齐方式> … </p> 2）换行标记<br> <br>标记可以强制文本换行。该标记只有起始标记。 3）水平线标记<hr> 水平线标记<hr>用于在网页中插入一条水平线。
2020/9/24
——大学IT——
11
2. 文字格式
HTML语言中用于文字格式化的标记有： 1）标题标记<hn> 格式为：<hn 属性=属性值> 标题文字内容 </hn> 目 录 其中n说明大小级别，取值范围为1到6的数字。把 上一页 标题分为 6级，即h1~h6，其中h1文字最大，h6文 字最小。
2020/9/24
——大学IT——
13
目录 上一页 下一页 结束
2020/9/24
文字格式
3）字形标记
字形标记用于设置文字的粗体、斜体、下 划线、上标、下标等。
标记格式
<B>…</B>
<I>…</I>
<U>…</U> <SUP>…</SU
P> <SUB>…</SU
B>
字形结果 粗体 斜体
下划线 上标 下标
我们把用HTML语言编写的文件称为HTML文件。它 通常被存储在Web服务器上，客户端通过浏览器向Web 服务器发出请求，服务器响应请求并将HTML文件发送 目 录 给浏览器，然后由浏览器对文件中的标记作出相应的解 上一页 释，以页面的形式呈现在用户屏幕上。因此，我们又把 下一页 HTML文档称为网页 (Web Page)。
下一页
网页制作技术PPT课件
网页制作技术
2.网页的保存和打开
执行“文件”→“保存”命令，进入“另存为” 对话框，进行相应设置，设置完毕，单击“保存” 即可。 注意：新建网页后，应该立即保存，这样以后在页 面中插入的图片、链接可以以相对路径保存。 如果要对网页进行编辑，首先需要打开该网页文 件，其操作为：执行“文件/打开”命令或在文件 面板中双击网页。
网页制作技术
7.3 站点的创建和管理
一、建立新站点
一旦创建好站点结构，必须在Dreamweaver中指 定新站点，这样就可以使用带FTP功能的 Dreamweaver将站点上传到Web服务器中。
在创建网页之前最好建立本地站点，站点的本地 根目录应该是一个专门为该站点创建的文件夹。 建立站点的操作步骤：可参见实验二
网页制作技术
(4) 链接的目标 链接的目标就是指链接的内容怎样表现出来。
_blank：是指在新的窗口中打开网页。 _seft：是指在当前窗口中打开网页。 _top：是指在最顶层打开网页。 _parent：是指在父框架打开网页
网页制作技术
四、网页制作常用方法
1.用可视化网页制作工具进行页面设计 (1) FrontPage软件 (2) Dreamweaver软件 (3) Word文字处理软件
<HTML> <HEAD> 头部信息 </HEAD> <BODY> 文档主体，正文部分 </BODY>
</HTML> 。
网页制作技术
<HTML>标记
<HTML>标记是HTML文档的第一个标记，它 通知客户端该文档是HTML文档。结束标记 </HTML>应该出现在HTML文档的尾部。
2.网页的保存和打开
执行“文件”→“保存”命令，进入“另存为” 对话框，进行相应设置，设置完毕，单击“保存” 即可。 注意：新建网页后，应该立即保存，这样以后在页 面中插入的图片、链接可以以相对路径保存。 如果要对网页进行编辑，首先需要打开该网页文 件，其操作为：执行“文件/打开”命令或在文件 面板中双击网页。
网页制作技术
7.3 站点的创建和管理
一、建立新站点
一旦创建好站点结构，必须在Dreamweaver中指 定新站点，这样就可以使用带FTP功能的 Dreamweaver将站点上传到Web服务器中。
在创建网页之前最好建立本地站点，站点的本地 根目录应该是一个专门为该站点创建的文件夹。 建立站点的操作步骤：可参见实验二
网页制作技术
(4) 链接的目标 链接的目标就是指链接的内容怎样表现出来。
_blank：是指在新的窗口中打开网页。 _seft：是指在当前窗口中打开网页。 _top：是指在最顶层打开网页。 _parent：是指在父框架打开网页
网页制作技术
四、网页制作常用方法
1.用可视化网页制作工具进行页面设计 (1) FrontPage软件 (2) Dreamweaver软件 (3) Word文字处理软件
<HTML> <HEAD> 头部信息 </HEAD> <BODY> 文档主体，正文部分 </BODY>
</HTML> 。
网页制作技术
<HTML>标记
<HTML>标记是HTML文档的第一个标记，它 通知客户端该文档是HTML文档。结束标记 </HTML>应该出现在HTML文档的尾部。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<li>222</li>
<li>333</li>
</ul>
有序列表
<ol start="1" type="a"> <li>111</li>
<li>222</li>
<li>333</li>
</ol>
类型序号：”1 ” “a” “A” “I”
缩进列表
<dl> <dt>项目1</dt>
<dd>子项1-1</dd>
•
日期
3.1.2 添加字体
执行菜单命令“文本”|“字体”|“编辑字体列表”
3.1.3 设置文本的属性
图3-4 文本的“属性”面板
【例3-1】设计一个只有文字的页面。对照设计界 面和代码界面，熟悉文本属性的标签。
标题
<hn 属性名=属性值>标题</hn> 指定标题文字大小、 对齐。
注释 强制 换行
“同”字型结构的特点是超链接多、信息量大。 网站的顶端是徽标和图片（广告）栏，下部分分 为三列，或者更多。两边的两列区域比较小，一 般是导航超链接和小型图片广告等，中间是网站 的主要内容，最下面是网站的版权信息等。
页眉区 导航栏区
左信息区
中信息区
右信息区
版权区
标题正文型结构的顶端是网站标识和标题 ，下面是网页正文。内容非常简单。
普通静态网页
动态特效网页
交互式动态网页
第2章
Dreamweaver基础
2.1 Dreamweaver的编辑环境
2.1.1 文档窗口 2.1.2 面板
2.2 设置工作参数 2.3 建立和管理站点 2.4 创建网页 思考题
• Dreamweaver 是所见即所得的网页编辑器； • 集成网页制作与动态网页管理于一身； • 制作跨平台和跨浏览器的网页。
网页布局 所谓网页的布局，就是确定网页上的网站标 志、导航栏、菜单等元素的位置。
不同的网页，各种网页元素所处的地位不 同，他们的位置也就不同。一般情况下， 重要的元素都放在突出的位置。
简单划分，网页的布局一般可以分为：“ 厂”字型、“同”字型、标题正文型、分 栏型、Flash型、封面型等。
“厂”字型结构的特点是内容清晰 ，一目了然。网页最顶端是徽标和 图片（广告）栏，下半部分的左边 是导航链接，右边是信息发布区。 这种结构非常常见。
2.1 Dreamweaver的编辑环境
1．启动Dreamweaver 8 选择“开始”>“所有程序”>“Macromedia”>“Macromedia Dreamweaver 8”，将显示开始页对话框，如图所示。 第一次启动，在“工作区设置”窗口选择 “设计器” 或 “编码器”
文档窗口 +
面板
<dd>子项1-2</dd>
<dt>项目2</dt>
<dd>子项2-1</dd>
dl是容器,dt是标题， dd是内容
<dd>子项2-2</dd>
</dl>
菜单列表 ——包含菜单标题的列表
<menu> <lh>菜单标题1</lh> <li>列表1-1</li> <li>列表1-2<br /></li> <lh>菜单标题2</lh> <li>列表2-1</li> <li>列表2-2</li> </menu>
设置远程服务器
• 步骤一：备份站点文件 • 步骤二：设置远程站点参数
ftp主机IP、主机目录（./）、
启动存回和取出（一组人协同设计网页）
• 步骤三：上传站点
网站发布
1、利用Dreamweaver8.0中的上传、下载功能。
• •
步骤一：设置远程站点参数。
步骤二：上传站点。
2、利用IIS设置虚拟目录，搭建个人web服务器来发布
2.1.1 文档窗口
•
标题栏 （* 未保存）
•
•
菜单栏：提供系统功能的所有命令选项 。
工具栏
网页窗口标题 刷新设计视图
浏览器兼容性
标记验证
文件管理
浏览器中预览/调试
代码/设计视图选项
是否显示可视化元素
• •
多文档文件名切换选项卡
状态栏
•
下载时间：根据网页中对象的多少，计算出网页的
大小及在某个连接速度下的下载时间。
大或缩小面板组。
2．插入面板
切换到选项卡外观
3. 4.
属性面板
右边面板组
CSS 样式面板
层面板 数据库面板 绑定面板 服务器行为面板 组件面板
2. 2 设置系统工作参数（编辑|首选参数） 1. “常规”类
• 移动文件时更新链接 • 允许多个连续的空格 • 历史步骤最多次数
2. “字体”类
• 字体设置：设置语种，应选择简体中文
2.1.2 面板
1．面板操作
• • • • •
隐藏或折叠面板
面板组自身可以被展开或折叠。
菜单命令“窗口”|“隐藏面板” ，可以隐藏全部面板； 执行“窗口”|“显示面板” ，又可以显示全部面板。 打开面板组右上角的选项菜单，执行“关闭面板组”
命令，可以关闭该面板组。
拖动面板组与文档编辑区之间的分隔条，可以横向扩
3.2.2 建立超链接
1．外部文档链接 链接到本文档之外的文档，包括站内和站外的网页。
• 在热字“属性”面板的“链接”框中填入超链接
的外部文档地址（属性href的值)；
• 在“目标”下拉列表框中设置超链接的目标窗口
(属性target的值)。
2．书签链接
<a href="地址#书签名" target="打开窗口方式" > 热点 </a>
3.1 文本的基本编辑
互联网上大量信息的传播以文本为 主。因此，对于网页制作人员来说， 文本的处理是最基本而重要的技巧之 一。 学习网页制作首先应掌握网页中文 本的制作和编辑方法。
3.1.1 插入文本、符号、日期
•
软回车(间距小，shift+enter）和硬回车（enter） br <p> </p> • 特殊 字符
【例3-2】混合列表示例
3.2 超链接 3.2.1 路径
•
绝对路径 ：是Internet上资源的完整地址。
• 包括3部分：协议种类、放有所须文件的计算机地
址（计算机域名）、具体文件的路径及文件名。
协议://计算机域名/文件路径及文件名 （缺省）
• 创建对站点以外的链接必须用绝对路径。
•
根相对路径 ：从站点根文件夹到文档所经过的路程， 以斜杠/开始，如/html/*.htm。
<!--注 释--> 文字<br />
不限于一行，长度 不受限制。 软回车，行间距小。
强制 换段
预排 格式 级联 显示
<p 属性名=属性值>文字</p>
<pre>预先格式</pre> <span 属性名=属性值>文本 或图像</span> <hr 属性名=属性值 />
硬回车，行间距大
保留预先在编辑工 具中排好格式。 设置具有相同属性 的级联文本 对齐、粗细、宽度
站点；这种方式适合动态交互式网站的发布，具体 实现方法在后面第8章详细介绍。
3、利用网上免费申请空间。有些网站提供免费主页空
间服务，例如： 等网站都提供免 费的主页空间，可将站点文件上传到免费网站空间。
2. 4 创建网页
1. 新建或打开网页 2. 设置页面属性 3. 设置头部信息 4. 规划页面布局 5. 添加页面元素 6. 制作超链接 7. 保存网页 8. 预览网页
水平 线
<head> <title>网页中的文本</title> <style type="text/css"> <!-.STYLE1 {font-family: "隶书", "华文中宋"; color: #FF0000;} .STYLE2 {font-size: 18px; font-family: "华文行楷", "华文新魏";} body,td,th {font-family: 仿宋_GB2312; font-size: 14px;}--></style> </head>
3.1.4 建立列表——书的目录或文章各级标题
• •
列表分为无序列表和有序列表。
与列 表有关 的标签 为 <ul>、 <ol>、 <li>、 <menu>、
<lh>、<dl>、<dt>、<dd>等，格式、功能和样例见表
3-2。
•
通过文本的“属性”面板建立列表
无序列表
<ul type="square"> <li>111</li>
分栏型结构，这种结构一般分为左右（或上下 ）两栏，也有的分为多栏。一般将导航链接与 正文放在不同的栏中。这样打开新的网页，导 航链接栏的内容不会发生变化。