《网页设计与制作》课件
合集下载
网页设计与制作教学课件
利用鼠标或键盘事件，触发元素的动 态变化。
通过改变DOM元素的属性或样式，实 现动态效果。
05
网页响应式设计
响应式设计概念
01 响应式网页设计是一种网页设计方法，旨在使网 页能够根据不同的设备和屏幕尺寸自适应显示， 提供更好的用户体验。
02 它通过使用媒体查询、流式布局、弹性图片和灵 活的字体等手段，使网页在不同设备上都能呈现 出良好的视觉效果和交互体验。
02 响应式设计可以提高网站的可用性和访问性，从 而增加用户满意度和网站流量。
媒体查询
媒体查询是响应式设计的核心技术之一，它允许网页根据设备的特定特 性（如屏幕宽度、高度、方向等）应用不同的CSS样式。
通过媒体查询，开发者可以针对不同的设备类型和屏幕尺寸编写特定的 CSS样式，以实现更好的布局和视觉效果。
04
网页交互与动画
网页交互设计
交互元素
包括按钮、表单、链接等， 设计时需考虑易用性和用 户体验。
导航菜单
设计清晰、直观的导航菜 单，方便用户快速找到所 需内容。
响应式设计
根据不同设备的屏幕大小 和分辨率，自动调整网页 布局和元素大小。
CSS动画
01
02
03
关键帧动画
通过定义关键帧和过渡效 果，实现元素的平滑运动。
响应性
设计适应不同设备和 屏幕尺寸的响应式网 站，以确保用户在不 同设备上都能获得良 好的浏览体验。
视觉层次
通过合理安排内容元 素的优先级和组织方 式，突出重要信息， 引导用户的注意力。
网页设计流程
需求分析
了解客户需求，明确网站目标和目标受众， 收集相关资料和竞争对手分析。
规划与草图
制定网站结构、布局和导航方案，绘制草图或 线框图，确定基本的设计风格和元素。
通过改变DOM元素的属性或样式，实 现动态效果。
05
网页响应式设计
响应式设计概念
01 响应式网页设计是一种网页设计方法，旨在使网 页能够根据不同的设备和屏幕尺寸自适应显示， 提供更好的用户体验。
02 它通过使用媒体查询、流式布局、弹性图片和灵 活的字体等手段，使网页在不同设备上都能呈现 出良好的视觉效果和交互体验。
02 响应式设计可以提高网站的可用性和访问性，从 而增加用户满意度和网站流量。
媒体查询
媒体查询是响应式设计的核心技术之一，它允许网页根据设备的特定特 性（如屏幕宽度、高度、方向等）应用不同的CSS样式。
通过媒体查询，开发者可以针对不同的设备类型和屏幕尺寸编写特定的 CSS样式，以实现更好的布局和视觉效果。
04
网页交互与动画
网页交互设计
交互元素
包括按钮、表单、链接等， 设计时需考虑易用性和用 户体验。
导航菜单
设计清晰、直观的导航菜 单，方便用户快速找到所 需内容。
响应式设计
根据不同设备的屏幕大小 和分辨率，自动调整网页 布局和元素大小。
CSS动画
01
02
03
关键帧动画
通过定义关键帧和过渡效 果，实现元素的平滑运动。
响应性
设计适应不同设备和 屏幕尺寸的响应式网 站，以确保用户在不 同设备上都能获得良 好的浏览体验。
视觉层次
通过合理安排内容元 素的优先级和组织方 式，突出重要信息， 引导用户的注意力。
网页设计流程
需求分析
了解客户需求，明确网站目标和目标受众， 收集相关资料和竞争对手分析。
规划与草图
制定网站结构、布局和导航方案，绘制草图或 线框图，确定基本的设计风格和元素。
《网页设计与制作》课件
《网页设计与制作》PPT 课件
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
《网页设计与制作》全套课件 收藏
动画
网页3
视频
2、创建、关闭站点
利用模板创建 ：点击 “文件”—“新建”— “由一个网页组成的网 站”，选择所要的网站 模板。 关闭网站：点击菜单 “文件”---“关闭网 站”，这样即可关闭正 在编辑的网站。
打开“文件”菜单，可 以看到：
关闭 关闭网站 退出
3、站点管理
打开站点：点击菜单“文 件”---“打开网站”，这 样即可打开需要编辑的网 站。 重命名站点：点击菜单 “工具”---“网站设置” --“常规” ---“网站名称”， 在对应的文本框里即可更 改你想要取的名字。
三、编辑网页
设置网页属性：
在网页上方右击， 选中“网页属性”； (1)修改标题 (2)修改边距
思考：标题与名称区别
应用
一、FrontPage 2003基本操作
1、启动：用鼠标左键单击“开始”按钮，选 择“程序” 下面的 “Microsoft Office ” / “Microsoft Office FrontPage 2003 ” 2、关闭：单击命令菜单栏中的“文件”，选 择“退出”即可。
1、界面介绍
FrontPage2003的界面
标题栏 菜单栏 常用工具栏 格式工具栏
标记栏
工作区 任 务 窗 口
文件夹列表
视图栏
2、界面操作
界面的移动： 界面不是一成不变，可以按照用户的习 惯自行调整和变化，如工具栏、菜单栏等。 界面的打开与关闭： （1）菜单栏右击即可出现菜单选项 （2）视图菜单 工具栏 工具菜单
3、网站规划
1
网站的风格
(1)FrontPage (2)Dreamweaver：与Fireworks8、Flash8构成网页三剑客
【完整版】网页设计与制作课程课件
探索响应式网页设计的原理和技巧，学习如何创建适应不同屏幕和设备的网 页。
网页排版和布局
深入研究网页排版和布局的原则，包括网格系统、流式布局和固定布局等技术。
图像、音频和视频在网页中的应用
学习如何在网页中嵌入各种媒体文件，创建富媒体的用户体验，提升网页的吸引力。
动态交互效果设计实战
通过实际案例和项目，学习如何使用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的基本语法和标签，掌握常用标签的用法以及语义化网页的重要性。
《网页设计与制作课件》全册精讲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
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
《网页设计与制作》PPT课件
（五）知识讲解与操作示范（8）
3．页面中图像应用
传递信息的视觉要素包括版式、文字、图像、色彩等。 网页中图像在信息传达上应用具备以下功能： （1）要有良好的视觉吸引力，能吸引浏览者的注意力。 （2）要简洁明确地传达网站信息，能使人们一目了然地抓 住网站信息的重点。 （3）要有强而有力的诱导作用，造成鲜明的视觉感受效果， 从观看过程中产生愿望和欲求。 对图像的处理主要包括以下几个方面： （1）图像的外形处理 （2）图像的面积处理 （3）图像的数量处理 （4）图像的背景处理
（五）知识讲解与操作示范（7）
(2）文字粗细的确定 文字变细会显得十分优美，反之将文字变粗会显得有
力。 （3）文字字号的确定
对于网页中正文文本，其字号一般设置为10～12磅； 对于网页中版权声明等文本一般设置为9～10磅；对于网 页中标题文本，一般设置为12～18磅。 （4）文字的字间距和行间距
网页中文本的字间距和行间距在某种程度上会改变访 问者的阅读心理。
（2）站内搜索引擎 站内搜索引擎提供了一种主动查询方式，浏览者
只要把自己需要寻找的内容的关键字输入到搜索引擎 中，网站将自动地查找出站内符合条件的页面，这是当前浏览位置”就是在网站的每个页面中 加入当前位置的文字说明并逐级加入链接。
（五）知识讲解与操作示范（6）
15.2.4 网页色彩设计
1．色彩的基本知识
（1）三原色 三原色是能够按照一些数量规定合成其他任何
一种颜色的基色。所有的颜色其实都是由三原色按 照不同的比例混合而来。电脑屏幕的色彩是由红、 绿、蓝三种原色组成。
（2）色彩三要素 色彩三要素是指色相、饱和度和明度。
（五）知识讲解与操作示范（2）
2．颜色的计算机表示
4．广告尺寸 广告尺寸应为标准尺寸，全尺寸banner不超过14KB。
网页设计与制作PPT课件
1.1 网页和网站
1.1.3 网页的基本功能
1、媒介的作用。使用者与信息之间的媒介。 一方面是发布者，功能是发布信息；另一方面 是浏览者，功能是提供浏览的信息，通过浏览 网页找寻需要的信息。
2、互动的作用。浏览者与网页制作单位之 间互动的窗口，可以单向或双向传递信息。
3、传输的作用。作为传输各种电子文件或 信息之用，如下载说明书、更新文件、驱动程 序等。
超链接的标志一般有：文本、图像、热区 三种。要注意的是，所有超链接标志均应清晰 无误地向浏览者标识出来，让人一看就知道。
1.2 网页中的主要元素
1.2.4其他的基本要素
除上述几种要素之外，在网页上经常使用 的还有动画、视频、声音等各种信息的形式。
1．动画。目前网络上常用的动画类型有 gif和Flash动画两种。
第2讲 HTML语言基础
$ [知识目标]
了解HTML文件的基本结构 掌握HTML中文本的编辑及图像的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中表格和框架的基本语法
8 [能力目标]
掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 能够编写简单的HTML网页 掌握HTML文件中表格和框架的使用
1.4 网页设计的基本流程
1.4.3网页的测试
1．浏览器兼容性测试。目前浏览器有： Internet Explorer与Netscape两大主流浏览器，二 者对HTML和CSS等语法的支持度是不同的。在 Dreamweaver中提供了可以检查网页中是否含有某版本浏 览器不能识别的语法功能，设计者可以借助其进行检查。
1.4 网页设计的基本流程
1.4.4网页上传和发布
网页设计好，必须把它发布到互联网上， 否则网站形象仍然不能展现出去。发布的服务 器可以是远程，也可以是本地。如果是发布到 互联网上，要先申请域名和主页空间，然后再 利用专用软件（如：CuteFTP）上传，FTP有很 多种软件，最著名的是 CuteFTP 和 LeapFTP， 也可以用Dreamweaver内置的FTP上传。
网页设计与制作ppt课件
网页设计与制作
网站建设基本流程
➢网站的需求分析 ➢规划站点结构 ➢收集素材 ➢设计与制作网站 ➢网站的发布
网页设计与制作
网页设计与制作
第1章 DreamweaverCS3入门
第1章 Dreamweaver CS3入门
本章学习要点： ➢Dreamweaver CS3的主要功能和特点 ➢Dreamweaver CS3的操作环境 ➢利用Dreamweaver CS3制作网页 ➢利用Dreamweaver CS3创建并管理站点
➢ 网页内容一经发布到网站服务器上，无论是否 有用户访问，每个静态网页的内容都是保存在 网站服务器上的。
➢ 静态网页的内容相对稳定，因此容易被搜索引 擎检索。
➢ 静态网页没有数据库的支持。 ➢ 静态网页的交互性较差，在功能方面有较大的
限制。
网页设计与制作
2．动态网页
动态网页的基本特点归纳如下：
➢ 动态网页以数据库技术为基础，可以大大降低 网站维护的工作量。
网页设计与制作
什么是网页?
➢网页是一种可以在互联网上传输，能被浏 览器认识和翻译成页面并显示出来的文件， 网页是网站的基本构成元素。
➢网页实际上就是一个文件。一般网页上都 会有文本和图片等信息，而复杂一些的网 页上还会有声音、视频、动画等多媒体内 容。
➢网页比报纸、广播、电视等传统媒介在信 息传递上更加迅速、多样化，交互能力更 强。
1.网址与域名
➢１．网址
浏览网页时，在浏览器地址栏中输入的诸如 就是一个网址，浏览器访 问网页是由URL（Uniform Resource Locator) 统 一资源定位器的方式来实现的。
➢2．域名
域名就是网站的名称，企业在注册域名时一 般都会申请一个符合网站特点的域名，甚至会把 域名看作企业的网上商标。
网站建设基本流程
➢网站的需求分析 ➢规划站点结构 ➢收集素材 ➢设计与制作网站 ➢网站的发布
网页设计与制作
网页设计与制作
第1章 DreamweaverCS3入门
第1章 Dreamweaver CS3入门
本章学习要点： ➢Dreamweaver CS3的主要功能和特点 ➢Dreamweaver CS3的操作环境 ➢利用Dreamweaver CS3制作网页 ➢利用Dreamweaver CS3创建并管理站点
➢ 网页内容一经发布到网站服务器上，无论是否 有用户访问，每个静态网页的内容都是保存在 网站服务器上的。
➢ 静态网页的内容相对稳定，因此容易被搜索引 擎检索。
➢ 静态网页没有数据库的支持。 ➢ 静态网页的交互性较差，在功能方面有较大的
限制。
网页设计与制作
2．动态网页
动态网页的基本特点归纳如下：
➢ 动态网页以数据库技术为基础，可以大大降低 网站维护的工作量。
网页设计与制作
什么是网页?
➢网页是一种可以在互联网上传输，能被浏 览器认识和翻译成页面并显示出来的文件， 网页是网站的基本构成元素。
➢网页实际上就是一个文件。一般网页上都 会有文本和图片等信息，而复杂一些的网 页上还会有声音、视频、动画等多媒体内 容。
➢网页比报纸、广播、电视等传统媒介在信 息传递上更加迅速、多样化，交互能力更 强。
1.网址与域名
➢１．网址
浏览网页时，在浏览器地址栏中输入的诸如 就是一个网址，浏览器访 问网页是由URL（Uniform Resource Locator) 统 一资源定位器的方式来实现的。
➢2．域名
域名就是网站的名称，企业在注册域名时一 般都会申请一个符合网站特点的域名，甚至会把 域名看作企业的网上商标。
【2024版】网页设计与制作-站点的规划与创建ppt课件
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
站点窗口的显示
站点的创建和管理主要在站点窗口中进行。显 示站点窗口的方法有如下两种。
➢ 在窗口浮动面板组中，单击浮动面板组上的 按钮展 开“文件”面板，如图4-4所示。再单击“站点”下拉 列表，打开如图4-5所示的“站点”下拉列表。
首页 末页 向上 向下 返回 结束 调音
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
第四课 站点的规划与创建
➢课前导读 ➢课堂讲解 ➢上机实战 ➢课后练习
首页 末页 向上 向下 返回 结束 调音
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
在实际的制作过程中，有两种方法保存这些内容。 一种方法是在整个站点中只建一个图像文件夹、一个 模板文件夹、一个动画文件夹……整个站点中的相应 文件都保存在相应文件夹中，如图4-1所示。另外一 种方法是在每个子栏目中分别建立各自的图像、动画、 模板等文件夹，各栏目中的图像、动画、模板分别保 存在各自栏目的文件夹中，如图4-2所示。
创建Web站点的第一步是规划。为了达到最佳 效果，在创建任何Web站点页面之前，应对站点 的结构进行设计和规划，接着配置Dreamweaver 以使可以在站点的基本结构上正常工作。如果在 Web服务器上已经建有一个站点 ，则可以使用 Dreamweaver来编辑修改该站点。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
授课班级：校选课 Email：913954309@ QQ群：212444338
学生作品
上课要求：
• 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格， 实验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老 师。
交互功能
Internet区别其他媒体的一个重要标志是它的交互功能。例如：向某网站购 买商品时，提交相关的个人信息等。通常网页的交互功能都是利用表单来实现 的。
制作网页的基本工具
目前网页制作有两种方法：一种是利用网页制作工具进行制作，如使 用FrontPage、Dreamweaver等；另一种是采用HTML超文本标识语言的 专用格式来进行编制。
即可多次使用，再次点击“格式刷”可取消。
添加边框、底纹：点击“格式”菜单---“边框和底纹”
三、编辑网页(文本)
复制文本：
方法1： Ctrl+c、Ctrl+v 方法2：选择文字，按住“Ctrl”键 ---拖动鼠标左键放到存放的位置即 可。
剪贴板：先打开“编辑”菜单---“office剪贴板”,选择多个对象
根据个人需要设置网站风格，如： 活泼、清纯、庄严。
2
网站的结构
网站如一本书，需要有大纲，主 要目录、具体内容
3
网站的配色
颜色的搭配非常重要，怎么配色 才能吸引用户进来观看
4、 色彩搭配
红色 橙色 蓝色 绿色 紫色 黑色 灰色 白色 热情 时尚 宁静 清新 神秘 深沉 高雅 明快 配色方案的操作：
*点击菜单“格式”--“主题” *点击任务窗口---“主题” *点击某个主题右击--“自定义”
三、编辑网页(文本)
删除文本格式：
方法1：选中文字，在字体对话框里进行更改。这样速 度很慢。 方法2：选中文字，点击“格式”菜单---“删除格式” （快捷键ctrl+shift+z） 方法3：撤消（快捷键ctrl+z）
撤销、恢复 ： ctrl+z、 ctrl+y 格式刷：如果要连续使用格式刷，可以双击“格式刷”，
基本概念： 1、什么是网页、网站？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
网站、网页的概念 2.1 什么是网页
用HTML语言编写的文件称为HTML文件，以页面的形式呈 现在用户的屏幕上。
2.2 网站
存放网页的服务器 。因特网上一块固定的面向全世界 发布消息的地方，由域名(也就是网站地址)和网站空间构成 ，通常包括主页和其他具有超链接文件的页面。
2、插入符号：在“插入”菜单---“符号”对话框，可
以添加所需要的符号。
实验：制作一张文字网页
实验：制作一张文字网页
四、修饰网页(图片)
插入图片：点击“格式”菜单——“插入”——“图片” 设置图片属性：大小、位置等。 插入自选图形：点击“格式”菜单——“插入”——
“自选图形”
实验二、制作一张网页
http://211.80.243.131/
实验二、制作两张网页
要求：网页中包括： (1)文字、图片 (2)文字、图片的超链接、书签 (网页内部链接、网页外部链接) 其它自由发挥。
四、修饰网页(音频、视频)
添加FLASH：点击“插入”菜单---“图片”——
“Flash影片”，选中你要添加的Flash动画即可。扩展名： swf
四、修饰网页(表格)
新建表格：点击“表格”菜单---“插入”---“表格”对话
框
删除表格：选中表格---“表格”菜单---“删除单元格”或
按DEL键即可删除
添加单元格、行和列：在“表格”菜单---“插入”--“单元格”
删除单元格、行和列：将光标放在单元格上，点击
“表格”菜单—-“选择”---“单元格”，再点击“表格”菜 单---“删除单元格”。行和列方法相同。
第一部分： MS FrontPage 2003 应用 第二部分： Flash 2004 动画制作 第三部分：网站建设一条龙 第四部分：实际技能训练 第五部分：Dreamweaver简单应用 第六部分：免费网站空间的申请 第七部分：课件下载地址
第一部分：
Microsoft Office FrontPage 2003
—“背景音乐”。
四、修饰网页
1、主题：选择“格式/主题”，从任务窗口选 择一种样式，会改变整体网页的背景效果。 2、动态字幕：在网页上选定一个位置，单击 “插入/WEB组件/组件类别/选择一种效果/字 幕” ，单击“完成”，在文本框中输入文字。 也可以添加背景图片。 3、在网页中使用网站计数器：在网页上选定 一个位置，单击“插入/WEB组件/组件类别/ 选择计数器”
思考题：1、如何从子页中返回主页？
四、修饰网页(文字超链接)
设置超链接颜色：打开“网页属性”——“格式”—
—超链接、已访问过的链接、当前超链接。
设置超链接屏幕提示：先选中文字：打开“插入超
链接”对话框——右上方“屏幕提示”，输入相应的内容 即可。
删除链接文字的下划线：选中文字——打开“字体”
应用
一、FrontPage 2003基本操作
1、启动：用鼠标左键单击“开始”按钮，选 择“程序” 下面的 “Microsoft Office ” / “Microsoft Office FrontPage 2003 ” 2、关闭：单击命令菜单栏中的“文件”，选 择“退出”即可。
1、界面介绍
FrontPage2003的界面
设置图形属性：填充颜色、边框、阴影样式、三维效
果等。
插入艺术字： 编辑文字
四、修饰网页(文字超链接)
1、文字超链接：先选中文字或其它对象： (1)点击右键——超链接 (2)常用工具栏——插入超链接 (3)点击“插入”菜单——超链接（ctrl+K） 2、创建同一文件的超链接 ：
步骤(1)先选中某些文字或其它对象进行标记，制作标签。 选定文字——“插入”菜单——书签（ctrl+k） (2)选定其它文字链接到上面的文字上。选定文字— —超链接属性——本文档中的位置，选中即可。 3、设置超链接字体效果：打开“网页属性”——“高 级”——“启动超链接翻转效果”——“翻转样式”——打 开后进行设置
问题思考： 还有哪些方式可以新建一张网页？
三、编辑网页
1、预览：单击屏幕左下角的“预览”按钮，于是新网页在浏 览器下的显示效果就出现了。再单击“设计”返回页面设计 状态，可以继续修改。也可以单击菜单栏“文件”下的“在 浏览器中预览/ Microsoft Internet Explorer”或直接按 <F12>键可以在IE下预览制作的网页。 2、保存：单击 “文件”/“保存”，为文件起个名字，并修改 “保存位置”为D盘上“座号姓名”文件夹，然后单击“确 定”。这样所有网页使用的文件都放在这个文件夹中，便于 使用和管理。例如：888张三 思考题：1、怎样找到你的文件夹？ 2、如何修改已经存盘后的网页文件？
5、 设计草图
二、网站
1.制作网站的流程
主题 风格 规划
版面
素材
配色
编辑
测试
上传
网站的设计原则
1）目标明确，重点突出 2）主题鲜明，层次清晰 3）合理设置栏目 4）正确定位整体风格 5）页面布局合理 6）色彩搭配，和谐统一 7）多媒体功能适当应用。
网站元素级别
网页1 文字 表格 网站 网页2 图片
动画
网页3
视频
2、创建、关闭站点
利用模板创建 ：点击 “文件”—“新建”— “由一个网页组成的网 站”，选择所要的网站 模板。 关闭网站：点击菜单 “文件”---“关闭网 站”，这样即可关闭正 在编辑的网站。
打开“文件”菜单，可 以看到：
关闭 关闭网站 退出
3、站点管理
打开站点：点击菜单“文 件”---“打开网站”，这 样即可打开需要编辑的网 站。 重命名站点：点击菜单 “工具”---“网站设置” --“常规” ---“网站名称”， 在对应的文本框里即可更 改你想要取的名字。
标题栏 菜单栏 常用工具栏 格式工具栏
标记栏
工作区 任 务 窗 口
文件夹列表
视图栏
2、界面操作
界面的移动： 界面不是一成不变，可以按照用户的习 惯自行调整和变化，如工具栏、菜单栏等。 界面的打开与关闭： （1）菜单栏右击即可出现菜单选项 （2）视图菜单 工具栏 工具菜单
3、网站规划单， 可以看到：
打开 打开网站
3、站点管理
文件夹列表打开：点击 菜单“视图”---“文件夹 列表” （Alt+F1）。 在文件夹列表里，可以 新建文件夹、更改正文件夹 名称及删除文件夹等操作 ， 注意它的级别（层次）。
三、编辑网页
新建网页：单击命令菜单栏中的“文件”，选择
“新建”，在屏幕的右面出现一个“新建”工具 栏，选择“新建网页”下的 “空白网页”，于是 一个新的网页“new_page_1.htm”就产生了。
对话框——效果——下划线。
创建电子邮件：先选中文字或其它对象：点击右键—
—插入超链接——设置电子邮件地址即可。
四、修饰网页(图片超链接)
不同元素的链接：
1、利用图片本身属性自带的链接——默认链接选中图 片——图片属性——常规——默认超链接。 2、利用图片工具栏里图形工具建立热点链接。包括：长 方形热点、圆形热点、多边形热点。打开图片工具——选 中圆形热点——在图像内拖动鼠标——编辑超链接。
学生作品
上课要求：
• 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格， 实验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老 师。
交互功能
Internet区别其他媒体的一个重要标志是它的交互功能。例如：向某网站购 买商品时，提交相关的个人信息等。通常网页的交互功能都是利用表单来实现 的。
制作网页的基本工具
目前网页制作有两种方法：一种是利用网页制作工具进行制作，如使 用FrontPage、Dreamweaver等；另一种是采用HTML超文本标识语言的 专用格式来进行编制。
即可多次使用，再次点击“格式刷”可取消。
添加边框、底纹：点击“格式”菜单---“边框和底纹”
三、编辑网页(文本)
复制文本：
方法1： Ctrl+c、Ctrl+v 方法2：选择文字，按住“Ctrl”键 ---拖动鼠标左键放到存放的位置即 可。
剪贴板：先打开“编辑”菜单---“office剪贴板”,选择多个对象
根据个人需要设置网站风格，如： 活泼、清纯、庄严。
2
网站的结构
网站如一本书，需要有大纲，主 要目录、具体内容
3
网站的配色
颜色的搭配非常重要，怎么配色 才能吸引用户进来观看
4、 色彩搭配
红色 橙色 蓝色 绿色 紫色 黑色 灰色 白色 热情 时尚 宁静 清新 神秘 深沉 高雅 明快 配色方案的操作：
*点击菜单“格式”--“主题” *点击任务窗口---“主题” *点击某个主题右击--“自定义”
三、编辑网页(文本)
删除文本格式：
方法1：选中文字，在字体对话框里进行更改。这样速 度很慢。 方法2：选中文字，点击“格式”菜单---“删除格式” （快捷键ctrl+shift+z） 方法3：撤消（快捷键ctrl+z）
撤销、恢复 ： ctrl+z、 ctrl+y 格式刷：如果要连续使用格式刷，可以双击“格式刷”，
基本概念： 1、什么是网页、网站？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
网站、网页的概念 2.1 什么是网页
用HTML语言编写的文件称为HTML文件，以页面的形式呈 现在用户的屏幕上。
2.2 网站
存放网页的服务器 。因特网上一块固定的面向全世界 发布消息的地方，由域名(也就是网站地址)和网站空间构成 ，通常包括主页和其他具有超链接文件的页面。
2、插入符号：在“插入”菜单---“符号”对话框，可
以添加所需要的符号。
实验：制作一张文字网页
实验：制作一张文字网页
四、修饰网页(图片)
插入图片：点击“格式”菜单——“插入”——“图片” 设置图片属性：大小、位置等。 插入自选图形：点击“格式”菜单——“插入”——
“自选图形”
实验二、制作一张网页
http://211.80.243.131/
实验二、制作两张网页
要求：网页中包括： (1)文字、图片 (2)文字、图片的超链接、书签 (网页内部链接、网页外部链接) 其它自由发挥。
四、修饰网页(音频、视频)
添加FLASH：点击“插入”菜单---“图片”——
“Flash影片”，选中你要添加的Flash动画即可。扩展名： swf
四、修饰网页(表格)
新建表格：点击“表格”菜单---“插入”---“表格”对话
框
删除表格：选中表格---“表格”菜单---“删除单元格”或
按DEL键即可删除
添加单元格、行和列：在“表格”菜单---“插入”--“单元格”
删除单元格、行和列：将光标放在单元格上，点击
“表格”菜单—-“选择”---“单元格”，再点击“表格”菜 单---“删除单元格”。行和列方法相同。
第一部分： MS FrontPage 2003 应用 第二部分： Flash 2004 动画制作 第三部分：网站建设一条龙 第四部分：实际技能训练 第五部分：Dreamweaver简单应用 第六部分：免费网站空间的申请 第七部分：课件下载地址
第一部分：
Microsoft Office FrontPage 2003
—“背景音乐”。
四、修饰网页
1、主题：选择“格式/主题”，从任务窗口选 择一种样式，会改变整体网页的背景效果。 2、动态字幕：在网页上选定一个位置，单击 “插入/WEB组件/组件类别/选择一种效果/字 幕” ，单击“完成”，在文本框中输入文字。 也可以添加背景图片。 3、在网页中使用网站计数器：在网页上选定 一个位置，单击“插入/WEB组件/组件类别/ 选择计数器”
思考题：1、如何从子页中返回主页？
四、修饰网页(文字超链接)
设置超链接颜色：打开“网页属性”——“格式”—
—超链接、已访问过的链接、当前超链接。
设置超链接屏幕提示：先选中文字：打开“插入超
链接”对话框——右上方“屏幕提示”，输入相应的内容 即可。
删除链接文字的下划线：选中文字——打开“字体”
应用
一、FrontPage 2003基本操作
1、启动：用鼠标左键单击“开始”按钮，选 择“程序” 下面的 “Microsoft Office ” / “Microsoft Office FrontPage 2003 ” 2、关闭：单击命令菜单栏中的“文件”，选 择“退出”即可。
1、界面介绍
FrontPage2003的界面
设置图形属性：填充颜色、边框、阴影样式、三维效
果等。
插入艺术字： 编辑文字
四、修饰网页(文字超链接)
1、文字超链接：先选中文字或其它对象： (1)点击右键——超链接 (2)常用工具栏——插入超链接 (3)点击“插入”菜单——超链接（ctrl+K） 2、创建同一文件的超链接 ：
步骤(1)先选中某些文字或其它对象进行标记，制作标签。 选定文字——“插入”菜单——书签（ctrl+k） (2)选定其它文字链接到上面的文字上。选定文字— —超链接属性——本文档中的位置，选中即可。 3、设置超链接字体效果：打开“网页属性”——“高 级”——“启动超链接翻转效果”——“翻转样式”——打 开后进行设置
问题思考： 还有哪些方式可以新建一张网页？
三、编辑网页
1、预览：单击屏幕左下角的“预览”按钮，于是新网页在浏 览器下的显示效果就出现了。再单击“设计”返回页面设计 状态，可以继续修改。也可以单击菜单栏“文件”下的“在 浏览器中预览/ Microsoft Internet Explorer”或直接按 <F12>键可以在IE下预览制作的网页。 2、保存：单击 “文件”/“保存”，为文件起个名字，并修改 “保存位置”为D盘上“座号姓名”文件夹，然后单击“确 定”。这样所有网页使用的文件都放在这个文件夹中，便于 使用和管理。例如：888张三 思考题：1、怎样找到你的文件夹？ 2、如何修改已经存盘后的网页文件？
5、 设计草图
二、网站
1.制作网站的流程
主题 风格 规划
版面
素材
配色
编辑
测试
上传
网站的设计原则
1）目标明确，重点突出 2）主题鲜明，层次清晰 3）合理设置栏目 4）正确定位整体风格 5）页面布局合理 6）色彩搭配，和谐统一 7）多媒体功能适当应用。
网站元素级别
网页1 文字 表格 网站 网页2 图片
动画
网页3
视频
2、创建、关闭站点
利用模板创建 ：点击 “文件”—“新建”— “由一个网页组成的网 站”，选择所要的网站 模板。 关闭网站：点击菜单 “文件”---“关闭网 站”，这样即可关闭正 在编辑的网站。
打开“文件”菜单，可 以看到：
关闭 关闭网站 退出
3、站点管理
打开站点：点击菜单“文 件”---“打开网站”，这 样即可打开需要编辑的网 站。 重命名站点：点击菜单 “工具”---“网站设置” --“常规” ---“网站名称”， 在对应的文本框里即可更 改你想要取的名字。
标题栏 菜单栏 常用工具栏 格式工具栏
标记栏
工作区 任 务 窗 口
文件夹列表
视图栏
2、界面操作
界面的移动： 界面不是一成不变，可以按照用户的习 惯自行调整和变化，如工具栏、菜单栏等。 界面的打开与关闭： （1）菜单栏右击即可出现菜单选项 （2）视图菜单 工具栏 工具菜单
3、网站规划单， 可以看到：
打开 打开网站
3、站点管理
文件夹列表打开：点击 菜单“视图”---“文件夹 列表” （Alt+F1）。 在文件夹列表里，可以 新建文件夹、更改正文件夹 名称及删除文件夹等操作 ， 注意它的级别（层次）。
三、编辑网页
新建网页：单击命令菜单栏中的“文件”，选择
“新建”，在屏幕的右面出现一个“新建”工具 栏，选择“新建网页”下的 “空白网页”，于是 一个新的网页“new_page_1.htm”就产生了。
对话框——效果——下划线。
创建电子邮件：先选中文字或其它对象：点击右键—
—插入超链接——设置电子邮件地址即可。
四、修饰网页(图片超链接)
不同元素的链接：
1、利用图片本身属性自带的链接——默认链接选中图 片——图片属性——常规——默认超链接。 2、利用图片工具栏里图形工具建立热点链接。包括：长 方形热点、圆形热点、多边形热点。打开图片工具——选 中圆形热点——在图像内拖动鼠标——编辑超链接。