《网页设计与制作》.ppt
合集下载
《网页设计与制作》课件
《网页设计与制作》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">`
《网页设计与制作》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教学课件
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
二、网页的构成元素
网页中的 元素按功 能可分为 站标、导 航条、广 告条、标 题栏和按 钮等。
《网页设计与制作(1)》课件
了解各种颜色间的搭配和配色原则，以及如何使用颜
字体和排版原则
了解如何选择合适的字体和排版样式，以及如何使用
图片和多媒体的使用
1 多媒体的优势
2 图片的优化
3 响应式设计概念
了解如何使用图片、音频和 视频来增强网页的吸引力和 互动性。
了解图片优化的重要性，以 及如何选择合适的图片格式 和尺寸，以达到更快的加载 速度。
了解如何使用响应式设计来 适应不同的屏幕大小和设备 类型，以提升用户体验。
用户体验设计概念
1
了解用户
通过市场调研和用户反馈，了解用户的需求和特点。
2
ห้องสมุดไป่ตู้
设计用户旅程
将用户体验分解为不同的阶段，设计出让用户流畅、愉快的体验过程。
3
测试和优化
通过用户测试和分析数据，对网页进行不断优化，提升用户体验。
网页制作工具和技术
《网页设计与制作(1)》 PPT课件
欢迎来到《网页设计与制作(1)》PPT课件！在这个课程中，我们将探讨网页设 计和制作的基本概念和技术，帮助您成为一名优秀的网页设计师和开发者。
课程介绍
目标和目的
通过本课程，您将学习如何设 计和制作精美、现代化的网页， 并掌握实用的前端技术。
受众群体
任何对网页设计和制作感兴趣 的人，尤其是想要成为网页设 计师和开发者的人群。
安全性和可访问性
了解如何提升网页的安全性和可访问性，以便更好 地保护用户隐私和权益。
总结
感谢您学习本课程！通过本课程，您应该已经掌握了网页设计和制作的基本 概念和技术，为成为一名优秀的网页设计师和开发者打下了坚实的基础。
掌握网页制作的整个流程，包括需求分析、设计、开
常用网页制作技巧和技
字体和排版原则
了解如何选择合适的字体和排版样式，以及如何使用
图片和多媒体的使用
1 多媒体的优势
2 图片的优化
3 响应式设计概念
了解如何使用图片、音频和 视频来增强网页的吸引力和 互动性。
了解图片优化的重要性，以 及如何选择合适的图片格式 和尺寸，以达到更快的加载 速度。
了解如何使用响应式设计来 适应不同的屏幕大小和设备 类型，以提升用户体验。
用户体验设计概念
1
了解用户
通过市场调研和用户反馈，了解用户的需求和特点。
2
ห้องสมุดไป่ตู้
设计用户旅程
将用户体验分解为不同的阶段，设计出让用户流畅、愉快的体验过程。
3
测试和优化
通过用户测试和分析数据，对网页进行不断优化，提升用户体验。
网页制作工具和技术
《网页设计与制作(1)》 PPT课件
欢迎来到《网页设计与制作(1)》PPT课件！在这个课程中，我们将探讨网页设 计和制作的基本概念和技术，帮助您成为一名优秀的网页设计师和开发者。
课程介绍
目标和目的
通过本课程，您将学习如何设 计和制作精美、现代化的网页， 并掌握实用的前端技术。
受众群体
任何对网页设计和制作感兴趣 的人，尤其是想要成为网页设 计师和开发者的人群。
安全性和可访问性
了解如何提升网页的安全性和可访问性，以便更好 地保护用户隐私和权益。
总结
感谢您学习本课程！通过本课程，您应该已经掌握了网页设计和制作的基本 概念和技术，为成为一名优秀的网页设计师和开发者打下了坚实的基础。
掌握网页制作的整个流程，包括需求分析、设计、开
常用网页制作技巧和技
《网页设计与制作》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课件
FTP
• FTP是一种文件传输协议。 • 通过FTP，用户与存有大量文件的远程计算 机（称为FTP服务器）连接，查看远程计算 机上的文件，然后把文件从远程计算机上 复制到本地的计算机上（称为下载），或 者把本地计算机上的文件传送到远程计算 机上去（称为上传）。 • 如果我们是在ISP处申请的主页空间，制作 完成的网页文件一般采用FTP的形式上传到 Web服务器上。
URL
• URL（Uniform Resource Locator的缩写），统 一资源定位器。 • 互联网中某种信息资源以某种方式存储在网络中 的某处，必须用一个惟一的URL来进行标识，这 样才能方便查找。对于Web来说，可以简单并通 俗把URL理解为网址。每个Web网页都有自己的 网址，在浏览器地址栏里输入网页的URL，就可 以访问这个网页。 • 例如，/index.html，其意思就是采用http超文本传 输协议访问搜狐网的首页，由于网页均是通过 http超文本传输协议进行访问，默认下，“”可以省 略不输。
脚本
• 脚本（Script）是网页制作中常见的动态网页制作 技术。 • 根据脚本语言所编写的代码可以直接插入到 HTML中，利用脚本可以操纵网页上的元素去实 现网页的交互功能，还可以制作特殊动态效果的 网页，例如，注册时用户输入信息的有效性验证、 弹出的信息框、鼠标指针的文字跟随、渐隐渐现 的图片等都是脚本的实际运用。 • 常用的脚本语言有JavaScript和VBScript，这两种 脚本语言也是本书所介绍的ASP的语言基础。
第1章 相关的基础知识
1.1 Web的基ld Wide Web，简称WWW，又 称万维网。 • Web采用浏览器/服务器工作模式。信息以 页面（或称Web页）的形式存储在Web服 务器中，通过浏览器为用户提供方便友好 的信息浏览界面。 • 统一资源定位器URL。 • 超链接。
网页设计与制作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上传。
【2024版】网页设计与制作-站点的规划与创建ppt课件
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
站点窗口的显示
站点的创建和管理主要在站点窗口中进行。显 示站点窗口的方法有如下两种。
➢ 在窗口浮动面板组中，单击浮动面板组上的 按钮展 开“文件”面板，如图4-4所示。再单击“站点”下拉 列表，打开如图4-5所示的“站点”下拉列表。
首页 末页 向上 向下 返回 结束 调音
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
第四课 站点的规划与创建
➢课前导读 ➢课堂讲解 ➢上机实战 ➢课后练习
首页 末页 向上 向下 返回 结束 调音
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
在实际的制作过程中，有两种方法保存这些内容。 一种方法是在整个站点中只建一个图像文件夹、一个 模板文件夹、一个动画文件夹……整个站点中的相应 文件都保存在相应文件夹中，如图4-1所示。另外一 种方法是在每个子栏目中分别建立各自的图像、动画、 模板等文件夹，各栏目中的图像、动画、模板分别保 存在各自栏目的文件夹中，如图4-2所示。
创建Web站点的第一步是规划。为了达到最佳 效果，在创建任何Web站点页面之前，应对站点 的结构进行设计和规划，接着配置Dreamweaver 以使可以在站点的基本结构上正常工作。如果在 Web服务器上已经建有一个站点 ，则可以使用 Dreamweaver来编辑修改该站点。
第2章 网页设计与制作PPT课件
《网页设计与制作》 19
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
将库项目应用到网页文件中后，在Dreamweaver的 网页编辑状态，库项目的背景呈现高亮度显示。
方法三：将已经编辑好的网页元素转换为库文件，首先选中要转换 为库文件的网页元素，然后选择“修改”菜单｜“库”｜“增加 对象到库”命令，当前选中的网页元素就会成为一个新的库项目 以供其它网页调用。
创建库文件后，站点中就会多出子文件夹library，库文件的默认 存储路径就是该文件夹。库文件的后缀名为lbi。库的编辑与普通 网页的编辑完全相同。
2020-11-9
谢谢你的观看
12
7.4 使用库
❖ Dreamweaver中提供了库的概念。库是用来存储想要在整 个网站上经常重复使用或更新的网页元素，其它网页可调用 库文件。这样一旦需要修改重复使用的部分，只需要修改库 文件，而其它调用此库的页面将会被全部更新。
2020-11-9
谢谢你的观看
13
2020-11-9
谢谢你的观看
6
7.2.1 创建模板
创建模板有二种常用的方法：一是创建新模板，二是将 当前网页另存为模板。 1. 创建新模板
创建新模板可通过以下两种方法来实现： 方法一：选择“文件”菜单｜“新建”命令，弹出“新 建文档”对话框中，选择“常规”选项卡｜“基本页”｜ “HTML模板”，单击“创建”按钮， 方法二：选择 “窗口”菜单｜“资源”命令，或按F11 键打开“资源”面板，单击“资源”面板左边的“模板” 选项，单击右下角的新建模板按钮，如图所示。 2. 将当前文档另存为模板 将一个编辑好的网页按照要求加以修改，然后另存为模 板。
【例7.1】利用模板技术生成网站实例，如图知识点：
首先进行网页版面布局的设计；
划分模板锁定区域和可编辑区域；
创建模板和编辑模板，最后根据模板快速创建网页。
2020-11-9
谢谢你的观看
5
7.2 创建和设置模板
关于模板最显著的特征就是锁定区域和可编辑区域之分。 锁定区域主要用来锁定体现网站风格部分，而将经常要改 变的文字、图像、链接等网页元素设置成可编辑区域，网 页中只编辑可编辑区域的内容，从而得到与模板相似但又 有所不同的新的网页。
【本章学习目的】 本章通过一个典型的网站案例重点讲解了模板和库技术
的应用，通过本章的学习，掌握利用模板和库技术创建风 格一致的网站的方法。
2020-11-9
谢谢你的观看
3
2020-11-9
谢谢你的观看
4
一个成功的网站首先要具备自己独特的风格，才能够在 茫茫 的网络中脱颖而出，给人留下深刻的印象。但仅凭 网站中的一两个较好的页面，很难收到良好的效果。因此 就需要整个站点内的页面体现出统一的风格。因此通过使 用模板能够生成多个具有相似结构和外观网页，从而提高 网页制作效率。
打开模板文件，对模板文件进行修改，针对在网页编辑中发现的问 题进行修改。
❖ 修改模板：对锁定区域进行修改。
❖ 删除可编辑区域：在模板编辑状态，选中已定义的可编辑区域，选 择“修改”菜单｜“模板”｜“删除模板标记”命令，该可编辑区 域就不存在了。
2. 用模板更新网页和网站
一旦模板被应用到多个网页文档中，对此模板的修改则会更新全部 与其相关联的文档。这种使用模板更新文件的方法大大节省了用户 的时间，尤其在涉及大量的改动时极为有效。
7.4.1 创建库
库项目可以包含多种网页元素，如：图像、链接、表格、脚本等， 但CSS样式表文件不能作为库项目添加到库。
创建库的常用方法有三种：
方法一：选择“窗口”菜单｜“资源”命令，打开“资源”面板，选择 “库”选项，单击“资源”面板下方的“新建库项目”按钮。
方法一：选择“文件”菜单｜“新建”命令，弹出“新建文档”对话框， 选择“常规”选项卡｜“基本页”｜“库项目”命令，单击“创 建”按钮，如图所示。
2020-11-9
谢谢你的观看
7
2020-11-9
谢谢你的观看
8
7.2.2 编辑模板
首先划分可编辑区域和锁定区域，然后编辑模板，通常 是像编辑网页一样先将锁定区域编辑好，然后再定义可编 辑区域。
可编辑区域：在模板中可编辑区域对应网页中的可编辑 部分，锁定区域是那些不可编辑的部分。在默认的方式下， Dreamweaver将新模板的所有部分设置为不可编辑区域， 由用户来定义可编辑区域。在编辑模板时，无论是可编辑 区域还是锁定区域都是可以编辑的。但是将模板应用到网 页中，在网页中的锁定区域是不可以编辑的。
谢谢你的观看
9
2020-11-9
谢谢你的观看
10
7.3 模板的应用和更新
❖ 利用模板快速生成新的网页，也可以将模板应用于已经 存在的网页。
2020-11-9
谢谢你的观看
11
7.3.2 模板的更新
1. 模板的修改
模板创建后，用户利用模板生成了网页文件。在网页文件的编辑过 程中可能会有一些不合适的地方，比如：链接有错误、网页布局中 单元格对齐方式不合理、图像不能正常显示等，而对于锁定区域， 是无法在网页编辑状态进行修改，因此需要对模板进行修改。
2020-11-9
谢谢你的观看
14
2020-11-9
谢谢你的观看
15
7.4.2 应用库
库建立后，可以很轻松地将库应用于网页文件中。操 作步骤如下：
步骤1 打开网页，把光标定位在需要插入库的位置。
步骤2 在“资源”面板中选择“库”选项，然后单击相应 的库项目，单击“插入”按钮，或者将库项目直接拖 到网页需要插入库的位置。
常用定义可编辑区域的方法有二种，首先在模板中将光 标单击要新建可编辑区域位置，选择“插入”菜单｜“模 板对象”｜“可编辑区域”命令，或单击“插入”栏｜ “常用”选项｜“模板”｜“可编辑区域”按钮，弹出一 个“新建可编辑区域”对话框，如图所示，输入这个区域 的名称，单击“确定”按钮。
2020-11-9
《网页设计与制作》
2020-11-9
谢谢你的观看
1
第七章 模板与库的应用
7.1 实例导入：利用模板生成的站点 7.2 创建模板
7.3 模板的应用和更新
7.4 使用库
7.5 利用模板和库生成站点的制作过程
2020-11-9
谢谢你的观看
2
本章主要介绍了利用模板和库设计风格一致的网站，使 用模板和库的组合使得建设网站和维护网站变得很轻松， 尤其是在对一个规模较大的网站进行建设与维护时，就能 体会到模板和库的好处。
方法三：将已经编辑好的网页元素转换为库文件，首先选中要转换 为库文件的网页元素，然后选择“修改”菜单｜“库”｜“增加 对象到库”命令，当前选中的网页元素就会成为一个新的库项目 以供其它网页调用。
创建库文件后，站点中就会多出子文件夹library，库文件的默认 存储路径就是该文件夹。库文件的后缀名为lbi。库的编辑与普通 网页的编辑完全相同。
2020-11-9
谢谢你的观看
12
7.4 使用库
❖ Dreamweaver中提供了库的概念。库是用来存储想要在整 个网站上经常重复使用或更新的网页元素，其它网页可调用 库文件。这样一旦需要修改重复使用的部分，只需要修改库 文件，而其它调用此库的页面将会被全部更新。
2020-11-9
谢谢你的观看
13
2020-11-9
谢谢你的观看
6
7.2.1 创建模板
创建模板有二种常用的方法：一是创建新模板，二是将 当前网页另存为模板。 1. 创建新模板
创建新模板可通过以下两种方法来实现： 方法一：选择“文件”菜单｜“新建”命令，弹出“新 建文档”对话框中，选择“常规”选项卡｜“基本页”｜ “HTML模板”，单击“创建”按钮， 方法二：选择 “窗口”菜单｜“资源”命令，或按F11 键打开“资源”面板，单击“资源”面板左边的“模板” 选项，单击右下角的新建模板按钮，如图所示。 2. 将当前文档另存为模板 将一个编辑好的网页按照要求加以修改，然后另存为模 板。
【例7.1】利用模板技术生成网站实例，如图知识点：
首先进行网页版面布局的设计；
划分模板锁定区域和可编辑区域；
创建模板和编辑模板，最后根据模板快速创建网页。
2020-11-9
谢谢你的观看
5
7.2 创建和设置模板
关于模板最显著的特征就是锁定区域和可编辑区域之分。 锁定区域主要用来锁定体现网站风格部分，而将经常要改 变的文字、图像、链接等网页元素设置成可编辑区域，网 页中只编辑可编辑区域的内容，从而得到与模板相似但又 有所不同的新的网页。
【本章学习目的】 本章通过一个典型的网站案例重点讲解了模板和库技术
的应用，通过本章的学习，掌握利用模板和库技术创建风 格一致的网站的方法。
2020-11-9
谢谢你的观看
3
2020-11-9
谢谢你的观看
4
一个成功的网站首先要具备自己独特的风格，才能够在 茫茫 的网络中脱颖而出，给人留下深刻的印象。但仅凭 网站中的一两个较好的页面，很难收到良好的效果。因此 就需要整个站点内的页面体现出统一的风格。因此通过使 用模板能够生成多个具有相似结构和外观网页，从而提高 网页制作效率。
打开模板文件，对模板文件进行修改，针对在网页编辑中发现的问 题进行修改。
❖ 修改模板：对锁定区域进行修改。
❖ 删除可编辑区域：在模板编辑状态，选中已定义的可编辑区域，选 择“修改”菜单｜“模板”｜“删除模板标记”命令，该可编辑区 域就不存在了。
2. 用模板更新网页和网站
一旦模板被应用到多个网页文档中，对此模板的修改则会更新全部 与其相关联的文档。这种使用模板更新文件的方法大大节省了用户 的时间，尤其在涉及大量的改动时极为有效。
7.4.1 创建库
库项目可以包含多种网页元素，如：图像、链接、表格、脚本等， 但CSS样式表文件不能作为库项目添加到库。
创建库的常用方法有三种：
方法一：选择“窗口”菜单｜“资源”命令，打开“资源”面板，选择 “库”选项，单击“资源”面板下方的“新建库项目”按钮。
方法一：选择“文件”菜单｜“新建”命令，弹出“新建文档”对话框， 选择“常规”选项卡｜“基本页”｜“库项目”命令，单击“创 建”按钮，如图所示。
2020-11-9
谢谢你的观看
7
2020-11-9
谢谢你的观看
8
7.2.2 编辑模板
首先划分可编辑区域和锁定区域，然后编辑模板，通常 是像编辑网页一样先将锁定区域编辑好，然后再定义可编 辑区域。
可编辑区域：在模板中可编辑区域对应网页中的可编辑 部分，锁定区域是那些不可编辑的部分。在默认的方式下， Dreamweaver将新模板的所有部分设置为不可编辑区域， 由用户来定义可编辑区域。在编辑模板时，无论是可编辑 区域还是锁定区域都是可以编辑的。但是将模板应用到网 页中，在网页中的锁定区域是不可以编辑的。
谢谢你的观看
9
2020-11-9
谢谢你的观看
10
7.3 模板的应用和更新
❖ 利用模板快速生成新的网页，也可以将模板应用于已经 存在的网页。
2020-11-9
谢谢你的观看
11
7.3.2 模板的更新
1. 模板的修改
模板创建后，用户利用模板生成了网页文件。在网页文件的编辑过 程中可能会有一些不合适的地方，比如：链接有错误、网页布局中 单元格对齐方式不合理、图像不能正常显示等，而对于锁定区域， 是无法在网页编辑状态进行修改，因此需要对模板进行修改。
2020-11-9
谢谢你的观看
14
2020-11-9
谢谢你的观看
15
7.4.2 应用库
库建立后，可以很轻松地将库应用于网页文件中。操 作步骤如下：
步骤1 打开网页，把光标定位在需要插入库的位置。
步骤2 在“资源”面板中选择“库”选项，然后单击相应 的库项目，单击“插入”按钮，或者将库项目直接拖 到网页需要插入库的位置。
常用定义可编辑区域的方法有二种，首先在模板中将光 标单击要新建可编辑区域位置，选择“插入”菜单｜“模 板对象”｜“可编辑区域”命令，或单击“插入”栏｜ “常用”选项｜“模板”｜“可编辑区域”按钮，弹出一 个“新建可编辑区域”对话框，如图所示，输入这个区域 的名称，单击“确定”按钮。
2020-11-9
《网页设计与制作》
2020-11-9
谢谢你的观看
1
第七章 模板与库的应用
7.1 实例导入：利用模板生成的站点 7.2 创建模板
7.3 模板的应用和更新
7.4 使用库
7.5 利用模板和库生成站点的制作过程
2020-11-9
谢谢你的观看
2
本章主要介绍了利用模板和库设计风格一致的网站，使 用模板和库的组合使得建设网站和维护网站变得很轻松， 尤其是在对一个规模较大的网站进行建设与维护时，就能 体会到模板和库的好处。