最新第5章-网页制作基础课件PPT
合集下载
网页制作第5章PPT课件
Page 7
5.2 网站数据库的创建 5.2.1 数据库的设计 5.2.2 基本表结构的详细设计
Page 8下表所示：
基本表 基本表存储的信息
books
存放所有图书的信 息
member
存放书店会员的基 本信息
basket 存放购物车的信息
dingdan
5.3 网络书店的主页结构
主页的内容和布局是整个网站开始的 关键。
下面以“清源图书网”的主页为例， 说明如何构建网络书店的主页。
Page 11
Page 12
主
① 书店的功能导航菜单和名称
页
的
框 架
② 会员注册 图书目录
结
图书查询
③ 图书信息
构
④ 版权说明
Page 13
【案例5-1】制作网络书店主页
Page 21
3．分页并循环取出本页每条记录
具体代码如下所示： <% for i=1 to rs.pagesize
if rs.eof or rs.bof then exit for
end if %> …… <% rs.movenext next %>
Page 22
4．表格中插入显示图书信息的asp代码
件 的图书记录。target=“content”表示在右边 框架中打开链接页面“booksbd.asp”。
Page 24
【案例5-3】制作新书和特价书
与【案例5-2】制作方法类似。 注意：将单个图书信息的列表框加入 循环语句中注意，循环的是整个列表框， 包括列表框和其中的内容，一定要看清相 应的HTML标记，否则会出现一些意想不 到的结果，例如循环的是半个列表框或循 环的方向和要求不符正好相反等现象。
5.2 网站数据库的创建 5.2.1 数据库的设计 5.2.2 基本表结构的详细设计
Page 8下表所示：
基本表 基本表存储的信息
books
存放所有图书的信 息
member
存放书店会员的基 本信息
basket 存放购物车的信息
dingdan
5.3 网络书店的主页结构
主页的内容和布局是整个网站开始的 关键。
下面以“清源图书网”的主页为例， 说明如何构建网络书店的主页。
Page 11
Page 12
主
① 书店的功能导航菜单和名称
页
的
框 架
② 会员注册 图书目录
结
图书查询
③ 图书信息
构
④ 版权说明
Page 13
【案例5-1】制作网络书店主页
Page 21
3．分页并循环取出本页每条记录
具体代码如下所示： <% for i=1 to rs.pagesize
if rs.eof or rs.bof then exit for
end if %> …… <% rs.movenext next %>
Page 22
4．表格中插入显示图书信息的asp代码
件 的图书记录。target=“content”表示在右边 框架中打开链接页面“booksbd.asp”。
Page 24
【案例5-3】制作新书和特价书
与【案例5-2】制作方法类似。 注意：将单个图书信息的列表框加入 循环语句中注意，循环的是整个列表框， 包括列表框和其中的内容，一定要看清相 应的HTML标记，否则会出现一些意想不 到的结果，例如循环的是半个列表框或循 环的方向和要求不符正好相反等现象。
网页设计与制作教程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
上一页 下一页
5.3 Dreamweaver MX 2004 基本对象的使用
（5）如果对布局表格内的单元格不满意，可以根据需要随 意移动。移动表格的方法是把鼠标指针放到单元格的边框， 当边框颜色由绿变红时，按住鼠标左键即可拖动整个单元格。
（6）布局设计完成，单击插入面板上的“标准”按钮或者 单击“退出”按钮，既可返回标准视图，用户就可以开始在 文档窗口中适当的地方创建网页的基本对象。
上一页 返 回
5.3 Dreamweaver MX 2004 基本对象的使用
5.3.1 网页布局
页面布局是进行网页设计最基本最重要的工作之一。 Dreamweaver MX 2004提供了一个布局工具——布局 视图。使用这个工具，页面布局可以变得轻松许多。步骤如 下所示。
（1）启动Dreamweaver MX 2004，定义一个本地站 点，并新建一个页面。
（3）从该对话框中选择一种需要创建的文件格式，然后单 击“创建”按钮即可。
（4）如果要基于模板创建文档，则可以通过选择“文 件”→“新建”命令，在出现的“新建文档”对话框中选择 “模板”选项卡，该对话框变为“从模板新建”对话框，如 图5-9所示。
3. 保存网页文件 如果同时打开了多个Dreamweaver MX 2004窗口，而
上一页 下一页
5.3 Dreamweaver MX 2004 基本对象的使用
5.3.2 文本对象的使用
在浏览网页时，浏览者所看到的文本有多种的表现形式，这 都是通过设置文本属性实现的。在文本属性栏中，可以设置 文本的各项属性。
1. 编辑文本 （1）换行。 （2）输入空格 （3）插入特殊的字符。
行为的使用
下一页
第5章 网页编辑软件 Dreamweaver MX 2004
5.3 Dreamweaver MX 2004 基本对象的使用
（5）如果对布局表格内的单元格不满意，可以根据需要随 意移动。移动表格的方法是把鼠标指针放到单元格的边框， 当边框颜色由绿变红时，按住鼠标左键即可拖动整个单元格。
（6）布局设计完成，单击插入面板上的“标准”按钮或者 单击“退出”按钮，既可返回标准视图，用户就可以开始在 文档窗口中适当的地方创建网页的基本对象。
上一页 返 回
5.3 Dreamweaver MX 2004 基本对象的使用
5.3.1 网页布局
页面布局是进行网页设计最基本最重要的工作之一。 Dreamweaver MX 2004提供了一个布局工具——布局 视图。使用这个工具，页面布局可以变得轻松许多。步骤如 下所示。
（1）启动Dreamweaver MX 2004，定义一个本地站 点，并新建一个页面。
（3）从该对话框中选择一种需要创建的文件格式，然后单 击“创建”按钮即可。
（4）如果要基于模板创建文档，则可以通过选择“文 件”→“新建”命令，在出现的“新建文档”对话框中选择 “模板”选项卡，该对话框变为“从模板新建”对话框，如 图5-9所示。
3. 保存网页文件 如果同时打开了多个Dreamweaver MX 2004窗口，而
上一页 下一页
5.3 Dreamweaver MX 2004 基本对象的使用
5.3.2 文本对象的使用
在浏览网页时，浏览者所看到的文本有多种的表现形式，这 都是通过设置文本属性实现的。在文本属性栏中，可以设置 文本的各项属性。
1. 编辑文本 （1）换行。 （2）输入空格 （3）插入特殊的字符。
行为的使用
下一页
第5章 网页编辑软件 Dreamweaver MX 2004
《网页制作基础教程》课件
通过图片和视频，可以更 直观地展示产品、场景和 信息。
交互效果
利用视频和动态图片等元 素，增加页面的交互性和 趣味性。
网页的交互效果
1
动画效果
通过CSS或Javascript添加动画效果，提升用户体验和页面吸引力。
2
弹出层
使用弹出层可以展示更多内容，同时不影响整体页面布局。
3
表单交互
通过表单控件的交互，实现用户输入和网站数据的交互。
2 D OM 操作
Javascript可以通过DOM操控网页上的元素，实现动态交互。
3 事件驱动
Javascript可以响应用户的操作和事件，并执行相应的逻辑。
网页设计的规范
网页设计需要遵循一定的规范和最佳实践，包括颜色搭配、字体选择、排版等方面。
响应式网页设计
自适应布局
网页设计需要适应不同屏幕尺 寸，确保在各种设备上都能良 好显示。
移动优先
考虑到现代用户更多使用移动 设备访问网页，设计应优先适 配移动端。
灵活布局
使用弹性布局和媒体查询等技 术，实现灵活自适应的网页布 局。
常见的网页布局方式
单栏布局
内容以一列的形式呈现，适 合大部分网页的简洁展示。
双栏布局
将内容分为两列，适合多信 息展示，如左侧导航栏和ห้องสมุดไป่ตู้ 侧内容。
网格布局
将内容划分为多个网格，适 合复杂的内容组织和多样化 的展示方式。
网站导航和搜索方式
1 导航菜单
使用导航菜单可以帮助 用户快速浏览网站的不 同部分和页面。
2 搜索框
提供搜索功能，让用户 可以根据关键词查找所 需的内容。
3 面包屑导航
显示用户当前位置，方 便用户追溯和返回。
交互效果
利用视频和动态图片等元 素，增加页面的交互性和 趣味性。
网页的交互效果
1
动画效果
通过CSS或Javascript添加动画效果，提升用户体验和页面吸引力。
2
弹出层
使用弹出层可以展示更多内容，同时不影响整体页面布局。
3
表单交互
通过表单控件的交互，实现用户输入和网站数据的交互。
2 D OM 操作
Javascript可以通过DOM操控网页上的元素，实现动态交互。
3 事件驱动
Javascript可以响应用户的操作和事件，并执行相应的逻辑。
网页设计的规范
网页设计需要遵循一定的规范和最佳实践，包括颜色搭配、字体选择、排版等方面。
响应式网页设计
自适应布局
网页设计需要适应不同屏幕尺 寸，确保在各种设备上都能良 好显示。
移动优先
考虑到现代用户更多使用移动 设备访问网页，设计应优先适 配移动端。
灵活布局
使用弹性布局和媒体查询等技 术，实现灵活自适应的网页布 局。
常见的网页布局方式
单栏布局
内容以一列的形式呈现，适 合大部分网页的简洁展示。
双栏布局
将内容分为两列，适合多信 息展示，如左侧导航栏和ห้องสมุดไป่ตู้ 侧内容。
网格布局
将内容划分为多个网格，适 合复杂的内容组织和多样化 的展示方式。
网站导航和搜索方式
1 导航菜单
使用导航菜单可以帮助 用户快速浏览网站的不 同部分和页面。
2 搜索框
提供搜索功能，让用户 可以根据关键词查找所 需的内容。
3 面包屑导航
显示用户当前位置，方 便用户追溯和返回。
网页制作基础5PPT优秀课件
（3）为该网页设置可编辑区域。 （4）选择“文件”→“另存为模板”命令，弹出“另 存模板”对话框，如图6.1.3所示。 设置可编辑区域是为网页分配可以更改的区域，其设 置方法将在以后的学习中进行讲解。 （5）在该对话框中进行参数设置，并为该模板命名。 （6）单击“保存”按钮即可。
二、创建嵌套模板 在网页设计中为了更加精确地布置页面，往往会使用嵌 套模板，嵌套模板是通过另存为一个基本模板来实现的。 （1）选择“窗口”→“资源”命令，在打开的资源面 板中单击“模板”按钮 ，将该面板的类别切换展”按钮 ，在弹出的下拉菜单中选择“从 模板新建”命令，得到一个从该模板创建的网页。
（6）在该区域插入可编辑区域等其他的内容。 （7）选择“文件”→“保存”命令，将设置的内容保 存。 注意：模板文件的后缀名是.dwt的文件。
第二节 设置模板
对于创建好的模板，还需要对其进行设置，该操作包括 在模板中设置可编辑区域、可编辑标签属性和重复区域等。
一、设置可编辑区域 模板由可编辑区域和不可编辑区域两部分组成，直接创 建的模板所建立的网页是不可以进行编辑的，要利用模板创 建网页必须在模板中设置可编辑区域。设置可编辑区域包括 创建可编辑区域和删除可编辑区域两部分内容。
（4）该面板顶部的单选按钮用于选择该面板左侧的不 同类型的文件是出现在站点中，还是在“我的收藏”文件 夹中。
一、模板的创建 模板的创建可通过直接创建或将网页另存为模板两种方 法来实现。 1．直接创建模板 （1）选择“窗口”→“资源”命令，打开资源面板。
（2）单击资源面板中的“模板”按钮 ，将该面板的 类别切换到模板类型，如图6.1.2所示。
图6.1.2 资源面板
（3）单击该面板上的“扩展”按钮 ，在弹出的下拉 菜单中选择“新建模板”命令，则新建一个模板文件，其名 称为可编辑状态。
二、创建嵌套模板 在网页设计中为了更加精确地布置页面，往往会使用嵌 套模板，嵌套模板是通过另存为一个基本模板来实现的。 （1）选择“窗口”→“资源”命令，在打开的资源面 板中单击“模板”按钮 ，将该面板的类别切换展”按钮 ，在弹出的下拉菜单中选择“从 模板新建”命令，得到一个从该模板创建的网页。
（6）在该区域插入可编辑区域等其他的内容。 （7）选择“文件”→“保存”命令，将设置的内容保 存。 注意：模板文件的后缀名是.dwt的文件。
第二节 设置模板
对于创建好的模板，还需要对其进行设置，该操作包括 在模板中设置可编辑区域、可编辑标签属性和重复区域等。
一、设置可编辑区域 模板由可编辑区域和不可编辑区域两部分组成，直接创 建的模板所建立的网页是不可以进行编辑的，要利用模板创 建网页必须在模板中设置可编辑区域。设置可编辑区域包括 创建可编辑区域和删除可编辑区域两部分内容。
（4）该面板顶部的单选按钮用于选择该面板左侧的不 同类型的文件是出现在站点中，还是在“我的收藏”文件 夹中。
一、模板的创建 模板的创建可通过直接创建或将网页另存为模板两种方 法来实现。 1．直接创建模板 （1）选择“窗口”→“资源”命令，打开资源面板。
（2）单击资源面板中的“模板”按钮 ，将该面板的 类别切换到模板类型，如图6.1.2所示。
图6.1.2 资源面板
（3）单击该面板上的“扩展”按钮 ，在弹出的下拉 菜单中选择“新建模板”命令，则新建一个模板文件，其名 称为可编辑状态。
网页制作ppt教学课件
网页设计的基本原则
一致性
保持设计风格和用户体 验的一致性。
可访问性
确保不同设备和用户都 能方便地访问网页。
响应式设计
根据不同设备的屏幕大 小和分辨率自适应布局
。
简洁明了
避免过多的视觉元素和 信息，突出核心内容。
02 PPT制作技巧
PPT的结构与布局
01
02
03
清晰的主题和目的
确保PPT有一个明确的主 题，并围绕该主题组织内 容。
详细描述：为了使PPT更加符合观众的审美，可以采取 以下措施
2. 使用美观的图表和图片：适当的图表和图片可以使 PPT更加生动和易于理解。选择高质量的图片和图表， 并对其进行适当的排版和美化。
4. 简洁明了：避免过多的文字和复杂的动画效果，保 持PPT简洁明了。
如何避免PPT中的常见错误？
总结词
常见错误避免
4. 检查语法和拼写错误
在完成PPT后，仔细检查语法和拼写错误，确保内容准 确无误。
网页布局
通过HTML和CSS实现网页的排版和 样式设计。
网页制作工具简介
HTML编辑器
如Notepad、Sublime Text等，用于编写HTML代码。
图形设计软件
如Photoshop、Sketch等，用于设计网页界面。
集成开发环境（IDE）
如Visual Studio Code、WebStorm等，集成了代码编辑、调试和 预览等功能。
3. 分段处理
将长段落分成若干个小段落，并添加适当的标题或总结， 以方便观众理解。
4. 使用要点
将主要内容提炼成要点形式，方便观众快速理解。
如何使PPT更加符合观众的审美？
总结词：审美设计
网页制作ppt教学课件
$item1_cJavaScript提供了许多内置函数，如Math.max()、Math.min()、Date()等，用于执行各种常见的数学和日期计算操作。
JavaScript提供了许多内置函数，如Math.max()、Math.min()、Date()等，用于执行各种常见的数学和日期计算操作。
网页制作实例
01
02
03
04
文本
图像
视频
音频
包括动画、电影、直播等视频元素。
包括图片、图标、背景等图像元素。
包括标题、段落、列表等文本元素。
包括音乐、声音、音效等音频元素。
01
02
03
04
05
建站工具介绍
官方介绍：Dreamweaver是一款网页制作软件，它使用了视觉方式创建和管理网页，是创建动态网页的工具之一。
可以选择使用现有的AJAX框架，如jQuery、Axios等，以简化开发流程。
使用AJAX框架实现异步请求，包括发送请求、处理响应、更新页面内容等。
通过优化请求频率、减少服务器响应时间等方式，提高网页的性能和响应速度。
THANK YOU
感谢聆听
CSS的主要作用是描述网页文档的外观和格式，如颜色、高度、宽度、边距等。它能够使网页更加美观、易于阅读和维护。
CSS是一种相对较新的技术，它于1990年代末期由Håkon Wium Lie和Bert Bos共同发明，并由W3C（万维网联盟）进行标准化。
选择器
属性
值
声明块
CSS选择器用于选择要应用样式的HTML元素。例如，元素选择器会选择所有给定的HTML元素。
完成前后端连接后，进行测试和调试，确保动态网页的功能和稳定性。
动态网页通常使用后端技术实现，如PHP、Java、Python等，根据需求选择合适的技术。
JavaScript提供了许多内置函数，如Math.max()、Math.min()、Date()等，用于执行各种常见的数学和日期计算操作。
网页制作实例
01
02
03
04
文本
图像
视频
音频
包括动画、电影、直播等视频元素。
包括图片、图标、背景等图像元素。
包括标题、段落、列表等文本元素。
包括音乐、声音、音效等音频元素。
01
02
03
04
05
建站工具介绍
官方介绍：Dreamweaver是一款网页制作软件，它使用了视觉方式创建和管理网页，是创建动态网页的工具之一。
可以选择使用现有的AJAX框架，如jQuery、Axios等，以简化开发流程。
使用AJAX框架实现异步请求，包括发送请求、处理响应、更新页面内容等。
通过优化请求频率、减少服务器响应时间等方式，提高网页的性能和响应速度。
THANK YOU
感谢聆听
CSS的主要作用是描述网页文档的外观和格式，如颜色、高度、宽度、边距等。它能够使网页更加美观、易于阅读和维护。
CSS是一种相对较新的技术，它于1990年代末期由Håkon Wium Lie和Bert Bos共同发明，并由W3C（万维网联盟）进行标准化。
选择器
属性
值
声明块
CSS选择器用于选择要应用样式的HTML元素。例如，元素选择器会选择所有给定的HTML元素。
完成前后端连接后，进行测试和调试，确保动态网页的功能和稳定性。
动态网页通常使用后端技术实现，如PHP、Java、Python等，根据需求选择合适的技术。
网页制作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第5章
《网页设计与制作》
5
5.3.2 网页文字的处理 在网页中输入文本是最基本的操作。 在网页中输入文本是最基本的操作。在 文档窗口”中可以直接输入文字， “文档窗口”中可以直接输入文字，一般 Dreamweaver 8中的文本段落是自动换行的， 中的文本段落是自动换行的， 中的文本段落是自动换行的 即在输入文字时， 即在输入文字时，若一行文字超过了窗口显示 范围时，会自动换到下一行。 范围时，会自动换到下一行。如果在文本输入 的过程中需要划分段落，可以用Enter键进行 的过程中需要划分段落，可以用 键进行 换行， 换行，用Enter键换行后上下段落的行间距为 键换行后上下段落的行间距为 一行。如果用Shift+Enter键进行强制换行，换 键进行强制换行， 一行。如果用 键进行强制换行 行所产生的行间距为用Enter键换行所产生的 行所产生的行间距为用 键换行所产生的 行间距的一半。另外“文档窗口” 行间距的一半。另外“文档窗口”也支持 Word的复制、粘贴等功能。 的复制、 的复制 粘贴等功能。
《网页设计与制作》
8
5.5 表格的使用 表格是网页制作不可缺少的元素， 表格是网页制作不可缺少的元素，它以简洁明了和 高效快捷的方式将图片、文本、 高效快捷的方式将图片、文本、数据和表单等元素有序 地显示在页面上，让大家可以设计出漂亮的页面； 地显示在页面上，让大家可以设计出漂亮的页面；使用 表格排版的页面在不同平台、 表格排版的页面在不同平台、不同分辨率的浏览器里都 能保持其原有的布局， 能保持其原有的布局，所以表格还是网页中最常用的排 版方式之一。 版方式之一。 5.5.1 表格的创建与编辑 1． 1．插入表格 2．选择表格 ． 3．编辑和应用表格 ． 1）设置表格的属性 ） 2）设置单元格属性 ） 3）应用表格 ） 4．嵌套表格 ．
网页制作计算机基础技术课件
详细描述
动态网页的制作需要掌握服务器端脚本语言（如PHP、Python等）和数据库技术（如MySQL、 MongoDB等）等相关知识。同时需要关注网络安全和数据保护等方面的问题，采取相应的安全措施和 技术手段来保护用户数据的安全性和隐私性。
THANKS FOR WATCHING
感谢您的观看
JavaScript语法基础
变量
使用var、let或const声明变量， 并使用赋值运算符（=）为变量
赋值。
数据类型
JavaScript有基本数据类型（如 Number、String、Boolean、 Null、Undefined）和复杂数据
类型（如Object）。
控制结构
使用if语句、switch语句和循环 （如for、while）来控制程序流
详细描述
响应式网页设计需要考虑不同设备的屏幕尺寸、分辨率和 方向等因素，通过使用CSS3的媒体查询功能，以及采用 流式布局和弹性图片等手段，使网页能够自适应不同屏幕 尺寸，提供良好的用户体验。
总结词
响应式网页设计需要综合考虑页面布局、导航结构和媒体 内容等方面，以确保在不同设备上都能提供一致的用户体 验。
网页制作目的
网页制作的主要目的是为了向用户展示信息，提供服务，推广品牌，并为用户 提供良好的在线体验。
网页制作的基本流程
需求分析
明确网页制作的目的是什么，需要展 示哪些内容，目标受众是谁等信息。
02
设计阶段
根据需求分析结果，进行网页的布局 和样式设计，包括颜色、字体、图片 等元素的选择和搭配。
01
详细描述
在制作响应式网页时，需要考虑页面元素的布局和排列方 式，以及导航菜单的结构和交互效果，同时要确保图片、 视频等媒体内容在不同设备上都能正确显示和播放。
动态网页的制作需要掌握服务器端脚本语言（如PHP、Python等）和数据库技术（如MySQL、 MongoDB等）等相关知识。同时需要关注网络安全和数据保护等方面的问题，采取相应的安全措施和 技术手段来保护用户数据的安全性和隐私性。
THANKS FOR WATCHING
感谢您的观看
JavaScript语法基础
变量
使用var、let或const声明变量， 并使用赋值运算符（=）为变量
赋值。
数据类型
JavaScript有基本数据类型（如 Number、String、Boolean、 Null、Undefined）和复杂数据
类型（如Object）。
控制结构
使用if语句、switch语句和循环 （如for、while）来控制程序流
详细描述
响应式网页设计需要考虑不同设备的屏幕尺寸、分辨率和 方向等因素，通过使用CSS3的媒体查询功能，以及采用 流式布局和弹性图片等手段，使网页能够自适应不同屏幕 尺寸，提供良好的用户体验。
总结词
响应式网页设计需要综合考虑页面布局、导航结构和媒体 内容等方面，以确保在不同设备上都能提供一致的用户体 验。
网页制作目的
网页制作的主要目的是为了向用户展示信息，提供服务，推广品牌，并为用户 提供良好的在线体验。
网页制作的基本流程
需求分析
明确网页制作的目的是什么，需要展 示哪些内容，目标受众是谁等信息。
02
设计阶段
根据需求分析结果，进行网页的布局 和样式设计，包括颜色、字体、图片 等元素的选择和搭配。
01
详细描述
在制作响应式网页时，需要考虑页面元素的布局和排列方 式，以及导航菜单的结构和交互效果，同时要确保图片、 视频等媒体内容在不同设备上都能正确显示和播放。
第5章网页设计基础PPT课件
13
方法一：使用“插入” 菜单插入表单
14
方法二：使用“插入”工具栏的 “表单”选项插入表单
插入表单效果
15
3）设置表单属性 在文档中插入了表单对象后，单击表单红色虚
线框，或单击HTML状态栏中的<form>标记， 系统就会弹出该表单对象的属性面板。
表单对象的属性面板
16
表单属性面板的属性说明： （1）、【表单名称】：此项为表单定义名称， 输入一个能在脚本程序（ASP、Javascript）中 引用的表单名称，一般为英文名称，系统默认给 名为form1。 （2）、【动作】：在此输入一个在服务器端处 理表单信息的应用程序的URL。路径可以表示为：
18
（4）、【MIME类型】：指定对提交给服务器进 行处理的数据使用 MIME 编码类型。默认设置 application/x- 通常与 POST 方法协同使用。 如果要创建文件上传域，请指定 multipart/form-data MIME 类型。
19
（5）、【目标】：指定一个窗口，在该窗口中 显示调用程序所返回的数据。如果命名的窗口尚 未打开，则打开一个具有该名称的新窗口。目标 值有： ◇ _blank，在未命名的新窗口中打开目标文档。 ◇ _parent，在显示当前文档的窗口的父窗口中 打开目标文档。 ◇ _self，在提交表单所使用的窗口中打开目标 文档。 ◇ _top，在当前窗口的窗体内打开目标文档。
8
二、表单工作原理
9
表单有两个重要组成部分： 1）、表单页面。 2）、用于处理浏览者在表单域中输入的信息的 服务器端的应用程序或脚本程序，如CGI、ASP 等。
10
浏览者在网页上看到有关表单的页面，只是供 浏览者输入信息的表单页面。当浏览者按要求在 表单中填写有关信息，单击表单的“提交”按钮 之后，表单的内容就会上传到服务器，并且由事 先编写好的CGI或ASP程序来处理这些信息，最 后服务器再将处理的结果发送给浏览者的浏览器。
方法一：使用“插入” 菜单插入表单
14
方法二：使用“插入”工具栏的 “表单”选项插入表单
插入表单效果
15
3）设置表单属性 在文档中插入了表单对象后，单击表单红色虚
线框，或单击HTML状态栏中的<form>标记， 系统就会弹出该表单对象的属性面板。
表单对象的属性面板
16
表单属性面板的属性说明： （1）、【表单名称】：此项为表单定义名称， 输入一个能在脚本程序（ASP、Javascript）中 引用的表单名称，一般为英文名称，系统默认给 名为form1。 （2）、【动作】：在此输入一个在服务器端处 理表单信息的应用程序的URL。路径可以表示为：
18
（4）、【MIME类型】：指定对提交给服务器进 行处理的数据使用 MIME 编码类型。默认设置 application/x- 通常与 POST 方法协同使用。 如果要创建文件上传域，请指定 multipart/form-data MIME 类型。
19
（5）、【目标】：指定一个窗口，在该窗口中 显示调用程序所返回的数据。如果命名的窗口尚 未打开，则打开一个具有该名称的新窗口。目标 值有： ◇ _blank，在未命名的新窗口中打开目标文档。 ◇ _parent，在显示当前文档的窗口的父窗口中 打开目标文档。 ◇ _self，在提交表单所使用的窗口中打开目标 文档。 ◇ _top，在当前窗口的窗体内打开目标文档。
8
二、表单工作原理
9
表单有两个重要组成部分： 1）、表单页面。 2）、用于处理浏览者在表单域中输入的信息的 服务器端的应用程序或脚本程序，如CGI、ASP 等。
10
浏览者在网页上看到有关表单的页面，只是供 浏览者输入信息的表单页面。当浏览者按要求在 表单中填写有关信息，单击表单的“提交”按钮 之后，表单的内容就会上传到服务器，并且由事 先编写好的CGI或ASP程序来处理这些信息，最 后服务器再将处理的结果发送给浏览者的浏览器。
网页制作课件ppt
提高网站流量，吸引更多 潜在客户，提高品牌知名 度和销售额。
SEO基本原则
关键词研究、内容质量、 网站结构、外部链接和内 部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使 用CDN等方式提高页面加 载速度。
移动端优化
确保网站在移动设备上显 示良好，提高用户体验。
响应式设计
使网站能够适应不同设备 和屏幕尺寸，提供一致的 用户体验。
网站推广策略
关键词广告 社交媒体营销
内容营销 合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容，吸引目标受众。 创建高质量、有价值的文章、视频等，吸引潜在客户并提高品
牌知名度。 与其他网站合作，互相推广，增加网站流量。
06 网页制作实例教 程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体，确保文字内容 在各种设备和屏幕分辨率上都能清晰 显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤，突出核心内容，使用户 能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单，使用户能够方便 地浏览不同页面。
层次分明
合理划分页面区域，使内容按照重要程度进 行排序，提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台，需要展示丰 富的商品信息和购物体验。在制作电商网站时，需要 考虑如何设计出美观、实用的商品展示页面，以及如 何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性，提供良好的 用户体验和购物体验。在制作电商网站时， 需要考虑如何设计出易于操作和使用的界面 和功能，以及如何提供个性化的服务和支持
SEO基本原则
关键词研究、内容质量、 网站结构、外部链接和内 部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使 用CDN等方式提高页面加 载速度。
移动端优化
确保网站在移动设备上显 示良好，提高用户体验。
响应式设计
使网站能够适应不同设备 和屏幕尺寸，提供一致的 用户体验。
网站推广策略
关键词广告 社交媒体营销
内容营销 合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容，吸引目标受众。 创建高质量、有价值的文章、视频等，吸引潜在客户并提高品
牌知名度。 与其他网站合作，互相推广，增加网站流量。
06 网页制作实例教 程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体，确保文字内容 在各种设备和屏幕分辨率上都能清晰 显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤，突出核心内容，使用户 能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单，使用户能够方便 地浏览不同页面。
层次分明
合理划分页面区域，使内容按照重要程度进 行排序，提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台，需要展示丰 富的商品信息和购物体验。在制作电商网站时，需要 考虑如何设计出美观、实用的商品展示页面，以及如 何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性，提供良好的 用户体验和购物体验。在制作电商网站时， 需要考虑如何设计出易于操作和使用的界面 和功能，以及如何提供个性化的服务和支持
网页制作课件ppt
CSS描述了文档在各种设备（显示器、纸张、语音合成器、盲文设备等）上的展示形式。
CSS全称：层叠样式表 (Cascading Style Sheets)。
CSS规则由两个主要部分组成：选择器和一组声明。
声明由属性和值组成。
选择器通常是你想要样式化的HTML元素。
字体样式
font-family, font-size, font-weight, font-style, line-height。
减少HTTP请求
利用合并、压缩、缓存等方法，减少页面加载所需的HTTP请求。
根据需求对图片进行优化，使用适当的格式和大小，以减少加载时间。
通过CDN（内容分发网络）加速技术，将内容更快地传输给用户。
通过压缩技术，减少HTML、CSS和JavaScript文件的体积，加快页面加载速度。
优化图片大小
使用CDN加速
根据不同设备的屏幕尺寸和分辨率，设计适应性的网页布局。
适应不同设备
使用百分比或相对单位代替固定像素值，使元素能够根据屏幕大小自动调整位置和尺寸。
流式布局
使用CSS媒体查询根据不同设备特性（如宽度、高度、方向等）应用不同的样式，实现更精细的布局控制。
媒体查询
使用可视化布局工具（如Bootstrap、Foundation等）快速创建响应式布局，提高开发效率。
使用JavaScript为网页添加交互功能，如弹出窗口、表单验证等。
如果需要动态显示数据，可以通过连接数据库实现，如MySQL、Oracle等。
在完成网页制作后，进行测试和优化，确保动态功能正常运行，同时注意性能和安全问题。
使用JavaScript实现交互
连接数据库
测试和优化
使用AJAX实现异步请求
CSS全称：层叠样式表 (Cascading Style Sheets)。
CSS规则由两个主要部分组成：选择器和一组声明。
声明由属性和值组成。
选择器通常是你想要样式化的HTML元素。
字体样式
font-family, font-size, font-weight, font-style, line-height。
减少HTTP请求
利用合并、压缩、缓存等方法，减少页面加载所需的HTTP请求。
根据需求对图片进行优化，使用适当的格式和大小，以减少加载时间。
通过CDN（内容分发网络）加速技术，将内容更快地传输给用户。
通过压缩技术，减少HTML、CSS和JavaScript文件的体积，加快页面加载速度。
优化图片大小
使用CDN加速
根据不同设备的屏幕尺寸和分辨率，设计适应性的网页布局。
适应不同设备
使用百分比或相对单位代替固定像素值，使元素能够根据屏幕大小自动调整位置和尺寸。
流式布局
使用CSS媒体查询根据不同设备特性（如宽度、高度、方向等）应用不同的样式，实现更精细的布局控制。
媒体查询
使用可视化布局工具（如Bootstrap、Foundation等）快速创建响应式布局，提高开发效率。
使用JavaScript为网页添加交互功能，如弹出窗口、表单验证等。
如果需要动态显示数据，可以通过连接数据库实现，如MySQL、Oracle等。
在完成网页制作后，进行测试和优化，确保动态功能正常运行，同时注意性能和安全问题。
使用JavaScript实现交互
连接数据库
测试和优化
使用AJAX实现异步请求
网页制作基础教程PPT课件
图片多数比较大，最好用图形软件
处理一下，处理方法这点后面会讲
到
静态图片 动态图片
式
工 具 栏
插 入
[]
在 需 要
选菜 插
择单 入
插下 图
[]
入图 片
图片 的
片 的 快 捷
或 者 在
位 置 选 择
方
• 文字链接的制作 ——选中文字，点击鼠标右键，选择超级连接或 者选择文字，鼠标左键点击编辑超连接的快捷方 式
• 制作自己的第一个网页，要求包含图片、文字， 链接
• 将自己的网页另存到“我的文档”文件夹，取名 为：“我的第一个网页”，要求保留页面原本的 全部效果
1. 使用IE浏览器将这个页面添加到收藏夹
• 图片链接的制作 ——选中图片，点击鼠标右键，选择超级连接或 者选中图片，鼠标左键点击编辑超连接的快捷方 式
•不要忘记加入网页的title<标题> ——title是显示在浏览器标题栏的文字，在网页下载时，它是最先出现的，所 以你可以用它提示网页的主要内容，或者写些欢迎的话
•将首页命名为 ——这是规定，没什么好多说的，哪页一旦被你取名叫以后，等你把你的整个 homepage上传了以后，它就是别人用你的网址看到你网站的第一页
•将所有文件的文件名统一格式用英文字母，如都为英文小写且的格式 ——前面的课程里有详细的说过文件名的一些知识
•图片应使用.gif和.jpg(jpeg)格式 ——这是两种位图文件格式，在同样的视觉清晰度下，文件量往往比其他文件 格式小，也就是说在网上下载的时候时间会更短，一般从网上下载的图片不用 考虑这个问题
• 拷贝其他文件的文字 ——如其它网页上的文字，选中反白了以后复制， 粘贴，就可以了
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第5章-网页制作基础
主要内容
概述 设计站点 编辑网页 页面布局 建立超链接 使用CSS样式 层、行为和时间轴 模板 管理和发布站点
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
2
5.1 概述
站点 具有相关主题的网页有机地整合在一起，集中
进行管理，构成一个整体，这就是站点。 超文本标记语言HTML
有文档的文件夹） • 网页设计、制作 • 网页文档复制到服务器中
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
14
5.2.1 网站设计
设计网站的基本步骤
对站点进行规划。
例如：旅游天地
•确定站点的主题和风格，明确建立站点的目的。
•收集素材。
•合理规划站点结构。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
生成相应的页面。 • 由格式标签和资源引用构成。 标签来设置引用内容的格式，标签分头标签和尾
标签，用“<”和“>”括起来，与被标注的内容 区分开来。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
9
5.1.2 HTML简介
文件的开始 头部
文件体 文件的结束
网页标题 图片
段落
Rwjg> xltj.ht ml
属性检查器★
通过菜单 查看>工具栏>XXX 来显示或隐藏某个工具栏，通过菜单 窗口>XXX 来显示或隐藏某个面板组或属性面板。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
8
5.1.2 HTML简介
HTML(HyperText Mackup Language 超文本 标记 语言)
• 制作超文本文档的简单标记语言 只是提供一些语法标记给浏览器，由浏览器解释
《大学计算机信息科技教程（第二版）》——第5章 网页制作
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
18
5.2.2 定义本地站点
修改站点的设置信息
“站点”/“管理站点” －“编辑”
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
19
5.2.2 定义本地站点
站点中的每个网页的内容都要使用一种标准的 语言来描述，这就是超文本标记语言HTML。 常用的网页制作软件 •Microsoft Office中的FrontPage •Macromedia公司的Dreamweaver
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
3
5.1.1 Dreamweaver简述
</ table >
</body>
</html>
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
12
5.2 设计站点
网站设计 定义本地站点 管理站点资源（使用文件面板）
新建（快捷菜单：新建文件、新建文件夹） 移动、复制（拖曳、Ctrl＋拖曳） 删除、重命名（Del、两次单击） 导入（复制/粘贴）
到另一台电脑上
选中站点，单击“导出”按钮，将站点导出为包 含站点设置的 XML 文件，其文件扩展名为.ste。 根文 以后单击“导入”按钮，可以导入该文件，并成 件夹 为站点（注意选择站点根文件夹）。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
21
5.2.3 管理站点资源
定义了本地站点后，在本地计算机中建立了一个用于存放 站点中的文档的文件夹。初始状态下，该文件夹是一个空 文件夹，在此文件夹中可以进行新建文件夹、新建文件、 复制文件、移动文件、删除文件、重命名文件等操作。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
10
5.1.2 HTML简介
<html>和</html>标签标志了文件的开始和结束， 分成两部分：
• 第一部分叫作头部 以<head>和</head>标签标志开始和结束 其中<title>和</title>标签用于定义网页的标题
• 第二部分是文件体 以<body>和</body>标签标志开始和结束 包含对浏览器中显示的内容的具体描述 <p>和</p>标签标志一个段落，之间的文本将显示在浏览器中； <font>和</font>标签控制文本的字体、大小、颜色等； <div>和</div>标签用于排版段落的格式； <img>标签用于插入图片，没有结束标签，通常后面带有属性，
表示图片文件的存储路径、对齐、以及大小。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
11
<html>
<head>
<title>
①
…….
</title>
</head>
<body> <p> …….
</p>
②
<font>和</font> <div>和</div> <img>
<table> <tr> <td> ……. </ td> </ tr>
启动Dreamweaver 后，显示起始页。在 起始页中可以打开最 近使用过的网页，快 速地创建新的网页。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
7
5.1.1 Dreamweaver简述
打开或者创建网页后的操作界面
“插入”
工具栏★
“文档” 工具栏
面板组★
“标准” 工具栏
文档窗口
打开站点
选定站点，单击“完成”按钮
同一时刻只能打开一个站点
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
20
5.2.2 定义本地站点
建立多个站点
“新建”按钮：再建立另一个站点
复制站点
“复制”按钮：建立一个与选定站点相同的站点
删除站点
“删除”按钮：删除选定站点
导出、导入站点
将导出的
.根st文e文件件夹单和一站击起点复…的制
打开、保存和预览网页
打开（文件面板：双击文件） 保存（标准工具栏：保存按钮、全部保存按钮） 预览（标准工具栏：在浏览器中预览按钮）
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
13
5.2.1 网站设计
网站：多个主题相关的网页按一定的组织结构、 以超链接方式连接在一起，形成一个整体。 网站主页：获取网站的信息的起点。 建立网站： • 在本地硬盘建立一个本地站点（存放网站的所
15
5.2.1 网站设计
创建站点的基本结构。 在本地站点中建立若干 个文件夹，用于存放各 类文档，必要时还可以 建立子文件夹。 创建和编辑网页。 将本地站点的所有文档发 布到服务器。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
16
5.2.2 定义本地站点
新建站点
“站点”/“新建站点”
主要内容
概述 设计站点 编辑网页 页面布局 建立超链接 使用CSS样式 层、行为和时间轴 模板 管理和发布站点
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
2
5.1 概述
站点 具有相关主题的网页有机地整合在一起，集中
进行管理，构成一个整体，这就是站点。 超文本标记语言HTML
有文档的文件夹） • 网页设计、制作 • 网页文档复制到服务器中
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
14
5.2.1 网站设计
设计网站的基本步骤
对站点进行规划。
例如：旅游天地
•确定站点的主题和风格，明确建立站点的目的。
•收集素材。
•合理规划站点结构。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
生成相应的页面。 • 由格式标签和资源引用构成。 标签来设置引用内容的格式，标签分头标签和尾
标签，用“<”和“>”括起来，与被标注的内容 区分开来。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
9
5.1.2 HTML简介
文件的开始 头部
文件体 文件的结束
网页标题 图片
段落
Rwjg> xltj.ht ml
属性检查器★
通过菜单 查看>工具栏>XXX 来显示或隐藏某个工具栏，通过菜单 窗口>XXX 来显示或隐藏某个面板组或属性面板。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
8
5.1.2 HTML简介
HTML(HyperText Mackup Language 超文本 标记 语言)
• 制作超文本文档的简单标记语言 只是提供一些语法标记给浏览器，由浏览器解释
《大学计算机信息科技教程（第二版）》——第5章 网页制作
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
18
5.2.2 定义本地站点
修改站点的设置信息
“站点”/“管理站点” －“编辑”
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
19
5.2.2 定义本地站点
站点中的每个网页的内容都要使用一种标准的 语言来描述，这就是超文本标记语言HTML。 常用的网页制作软件 •Microsoft Office中的FrontPage •Macromedia公司的Dreamweaver
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
3
5.1.1 Dreamweaver简述
</ table >
</body>
</html>
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
12
5.2 设计站点
网站设计 定义本地站点 管理站点资源（使用文件面板）
新建（快捷菜单：新建文件、新建文件夹） 移动、复制（拖曳、Ctrl＋拖曳） 删除、重命名（Del、两次单击） 导入（复制/粘贴）
到另一台电脑上
选中站点，单击“导出”按钮，将站点导出为包 含站点设置的 XML 文件，其文件扩展名为.ste。 根文 以后单击“导入”按钮，可以导入该文件，并成 件夹 为站点（注意选择站点根文件夹）。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
21
5.2.3 管理站点资源
定义了本地站点后，在本地计算机中建立了一个用于存放 站点中的文档的文件夹。初始状态下，该文件夹是一个空 文件夹，在此文件夹中可以进行新建文件夹、新建文件、 复制文件、移动文件、删除文件、重命名文件等操作。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
10
5.1.2 HTML简介
<html>和</html>标签标志了文件的开始和结束， 分成两部分：
• 第一部分叫作头部 以<head>和</head>标签标志开始和结束 其中<title>和</title>标签用于定义网页的标题
• 第二部分是文件体 以<body>和</body>标签标志开始和结束 包含对浏览器中显示的内容的具体描述 <p>和</p>标签标志一个段落，之间的文本将显示在浏览器中； <font>和</font>标签控制文本的字体、大小、颜色等； <div>和</div>标签用于排版段落的格式； <img>标签用于插入图片，没有结束标签，通常后面带有属性，
表示图片文件的存储路径、对齐、以及大小。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
11
<html>
<head>
<title>
①
…….
</title>
</head>
<body> <p> …….
</p>
②
<font>和</font> <div>和</div> <img>
<table> <tr> <td> ……. </ td> </ tr>
启动Dreamweaver 后，显示起始页。在 起始页中可以打开最 近使用过的网页，快 速地创建新的网页。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
7
5.1.1 Dreamweaver简述
打开或者创建网页后的操作界面
“插入”
工具栏★
“文档” 工具栏
面板组★
“标准” 工具栏
文档窗口
打开站点
选定站点，单击“完成”按钮
同一时刻只能打开一个站点
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
20
5.2.2 定义本地站点
建立多个站点
“新建”按钮：再建立另一个站点
复制站点
“复制”按钮：建立一个与选定站点相同的站点
删除站点
“删除”按钮：删除选定站点
导出、导入站点
将导出的
.根st文e文件件夹单和一站击起点复…的制
打开、保存和预览网页
打开（文件面板：双击文件） 保存（标准工具栏：保存按钮、全部保存按钮） 预览（标准工具栏：在浏览器中预览按钮）
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
13
5.2.1 网站设计
网站：多个主题相关的网页按一定的组织结构、 以超链接方式连接在一起，形成一个整体。 网站主页：获取网站的信息的起点。 建立网站： • 在本地硬盘建立一个本地站点（存放网站的所
15
5.2.1 网站设计
创建站点的基本结构。 在本地站点中建立若干 个文件夹，用于存放各 类文档，必要时还可以 建立子文件夹。 创建和编辑网页。 将本地站点的所有文档发 布到服务器。
《大学计算机信息科技教程（第二版）》——第5章 网页制作基础
16
5.2.2 定义本地站点
新建站点
“站点”/“新建站点”