电子教案 《网页设计与制作基础教程(第3版)》
网页设计与制作 第3版 第3章 建立本地站点
第3章 建立本地站点
3.3 综合实训案例：创建“我的第一个站点”
⑤在“文件”面板中选择“本地视 图”，在站点的根目录“站点 - 我 的第一个站点”上右击，在弹出的 快捷菜单中选择“新建文件”命令， 文件名称为index.html，结果如图所 示。
第3章 建立本地站点
3.3 综合实训案例：创建“我的第一个站点”
第3章 建立本地站点
3.2 管理本地站点
3.2.2 站点的其他操作 ● 导出 。 单击 按钮，弹出“导出站点”对话框，如图所示。
第3章 建立本地站点
3.2 管理本地站点
3.2.2 站点的其他操作
● 导入站点
。单击
按钮，弹出“导入站点”对话框。
3.2 管理本地站点
3.2.2 站点的其他操作
第3章 建立本地站点
第3章 建立本地站点
3.3 综合实训案例：创建“我的第一个站点”
④在“文件”面板中选择“本地视图”， 在站点的根目录“站点 - 我的第一个站点” 上右击，在弹出的快捷菜单中选择“新 建文件夹”命令，文件夹名称为images， 然后用同样的方式再创建两个文件夹， 其名称分别是videos和styles。最终创建的 文件夹如图所示。
3.2 管理本地站点
3.2.2 站点的其他操作
第3章 建立本地站点
（4）重命名文件或文件夹 要在站点中重命名文件或文件夹， 可在“文件”面板上选择并右击 要操作的文件或文件夹，在弹出 的快捷菜单中选择“编 辑”→“重命名”。等选中文件 的名称变为可编辑状态后，输入 新的文件名称，按Enter键，完 成重命名操作。
3.2 管理本地站点
3.2.2 站点的其他操作
第3章 建立本地站点
1．“管理站点”对话框 如要对站点进行管理， 在菜单栏中选择“站 点”→“管理站点”命 令，弹出“管理站点” 对话框。
网页设计与制作基础教程 第3版 第03章-使用表格布局页面
::::::::::
::::::::::
3.2.8 导入与导出表格式数据
使用Dreamweaver CC，用户不仅可以将另一个应用程序，例如Excel中 创建并以分隔文本格式(其中的项以制表符、逗号、冒号、分号或其他分隔 符隔开)保存的表格式数据导入到网页文档中并设置为表格的格式，而且还 可以将Dreamweaver CC中的表格导出。
::::::::::
3.2.6 复制与粘贴单元格
用户在Dreamweaver CC中插入表格并选中表格中一个单元格后，选择 “编辑”命令，在弹出的的菜单中可以对表格执行“剪切”、“拷贝”、“ 粘贴”等操作。
::::::::::以根据单个列的内容对表格中的行进行 排序或者根据两个列的内容执行更加复杂的表格排序。
《 网页设计与制作基础教程(第3版)》
第三章
使用表格布局页面
学习目标
在网页中插入的文本和图像会随着浏览器窗口的放大与缩 小发生变化，这使得网页处于不稳定的显示状态。要解决这种 状态，最简单的方法就是使用表格，表格不仅能够控制网页在 浏览器窗口中的位置，还可以控制网页元素在网页中的显示位 置。
::::::::::
本章重点
创建基本表格 插入表格元素 调整表格大小 导入与导出表格数据 使用表格制作网页
::::::::::
3.1 使用表格
网页能够向访问者提供的信息是多样化的，包括文字、图像、动画和视 频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不 仅美观而且有条理，是网页设计者在着手设计网页之前必须要考虑的问题。 表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地 表达设计者的思想。
网页中表格的用途 创建表格 插入表格元素 设置表格属性
发布和维护Web站点网页设计与制作教程第3版教学ppt课件
在“我的电脑〞或“资源管理器〞中右键单击Web站点主目录 文件夹，在弹出的快捷菜单中执行“属性〞命令，在翻开的 对话框中单击“平安〞选项卡，翻开图9-5所示的对话框。
本题考查学生综合知识解决问题的能 力。最 早研制 成功的 火车、 飞机分 别是在 第一、 二次工 业革命 中。火 车动力 来源于 蒸汽机 ，飞机 动力来 源于内 燃机
本题考查学生综合知识解决问题的能 力。最 早研制 成功的 火车、 飞机分 别是在 第一、 二次工 业革命 中。火 车动力 来源于 蒸汽机 ，飞机 动力来 源于内 燃机
第9章 发布和维护Web站点
9.1 在Windows 2000 Server中配置IIS
9.1.1 创立Web站点
1．配置IIS 在Windows 2000 Server环境中创立Web站点的操作方法如下。 执行Windows“开场〞菜单“程序〞下“管理工具〞中的“Internet效劳管理器 〞命令翻开图9-1所示的窗口。 在图9-2所示的“IP地址和端口设置〞对话框中选择站点使用的IP地址。
远程维护Web站点
9.2.1 使用FTP客户端工具
1．使用IE浏览器登录FTP效劳器 2．使用FlashFXP登录FTP效劳器
(1) 上传及下载文件 程序启动后的界面如图9-11所示。执行“会话〞菜单下的“快速连接〞命令或按 〈F8〉键，翻开图9-12所示的“快速连接〞对话框。
本题考查学生综合知识解决问题的能 力。最 早研制 成功的 火车、 飞机分 别是在 第一、 二次工 业革命 中。火 车动力 来源于 蒸汽机 ，飞机 动力来 源于内 燃机
本题考查学生综合知识解决问题的能 力。最 早研制 成功的 火车、 飞机分 别是在 第一、 二次工 业革命 中。火 车动力 来源于 蒸汽机 ，飞机 动力来 源于内 燃机
机工社网页设计与制作教程(HTML+CSS+JavaScript)第3版教学课件第1章 网页设计与
网页内容 </body> </html>
1.3.3 HTML5编码规范
页面的HTML代码书写必须符合HTML规范。 1．HTML书写规范 2．标签的规范 3．属性的规范 4．元素的嵌套 5．代码的缩进
1.4 编辑HTML文件
1.4.1 常见的网页编辑工具 1.4.2 HTML文件的创建
1.2 Web前端开发技术简介
1.2.1 HTML5简介 1.2.2 CSS3简介 1.2.3 JavaScript简介
1.2.1 HTML5简介
HTML是HyperText Markup Language（超文本标记语言）的缩 写，是构成Web页面、表示Web页面的符号标签语言。通过HTML， 将所需表达的信息按某种规则写成HTML文件，再通过专用的浏览 器来识别，并将这些HTML文件翻译成可以识别的信息，这就是网 页。
JavaScript的开发环境很简单，不需要Java编译器，而是直接 运行在浏览器中，JavaScript通过嵌入或调入到HTML文件中实现其 功能。
1.3 HTML5的基本结构和编码规范
1.3.1 HTML5语法结构 1.3.2 HTML5文档结构 1.3.3 HTML5编码规范
1.3.1 HTML5语法结构
1.1 网页与网站的概念
1.1 网页与网站的概念
网页（Web Page）是存放在Web服务器上供客户端用户浏览 的文件，可以在Internet上传输。
根据侧重点的不同，网站（Web Site，也称站点）被定义为已 注册的域名、主页或Web服务器。网站由域名（也就是网站地址） 和网站空间构成。网站是一系列网页的组合，这些网页拥有相同或 相似的属性并通过各种链接相关联。所谓相同或相似的属性，就是 拥有相同的实现目的、相似的设计或共同描述相关的主导体。通过 浏览器，可以实现网页的跳转，从而浏览整个网站。
《网页设计与制作》课程教案
《网页设计与制作》课程教案第一章：网页设计与制作概述1.1 课程介绍网页设计与制作的基本概念网页设计与制作的目的与意义网页设计与制作的应用领域1.2 网页设计原则网页设计的基本原则用户体验设计原则响应式网页设计原则1.3 网页制作工具与技术网页设计软件的选择与使用HTML与CSS的基本语法与使用方法JavaScript的基础知识与应用第二章：网页布局与排版2.1 网页布局的基本概念网页布局的定义与作用常见的网页布局方式布局元素的分类与使用2.2 排版的原则与方法排版的基本原则文本的格式化与排版图片与多媒体元素的排版2.3 响应式网页布局与排版响应式网页布局的概念与意义媒体查询的使用方法布局与排版在不同设备上的应用第三章：网页色彩与字体3.1 色彩的基本概念与应用色彩的视觉效应与心理作用色彩的搭配原则与技巧色彩在网页设计中的应用案例3.2 字体的选择与使用字体的分类与特点字体的搭配原则与技巧字体在网页设计中的应用案例3.3 网页色彩与字体的综合应用色彩与字体的协调与平衡字体大小与行距的设置与调整色彩与字体的个性化应用与创新第四章：网页图片与多媒体元素4.1 网页图片的选择与处理图片的格式与特点图片的选择标准与技巧图片的处理与优化方法4.2 多媒体元素的应用音频与视频元素的应用动画与GIF图片的应用交互式多媒体元素的应用4.3 网页图片与多媒体元素的优化图片与多媒体元素的加载优化图片与多媒体元素的响应式应用图片与多媒体元素的视觉效果与用户体验第五章：网页交互与动画5.1 网页交互的基本概念与原理交互的定义与作用交互的实现方式与技术交互的设计原则与技巧5.2 JavaScript基础与应用JavaScript的基本语法与功能事件处理与DOM操作JavaScript库与框架的选择与使用5.3 网页动画的实现与优化CSS动画的制作方法与技巧JavaScript动画的制作方法与技巧动画的加载优化与性能考虑第六章：HTML与CSS高级应用6.1 表单设计与验证表单的基本结构与属性表单元素的使用与布局表单验证的实现方法6.2 网页组件设计与实现导航栏与面包屑的制作折叠面板与标签页的制作轮播图与幻灯片的设计与实现6.3 网页动画与过渡效果CSS过渡与动画的实现JavaScript动画的实现方法动画的性能优化与调试第七章：前端框架与库7.1 前端框架的基本概念前端框架的作用与优势常见的前端框架介绍框架的选择与使用7.2 Bootstrap框架的应用Bootstrap的基本结构与组件栅格系统与布局设计Bootstrap表单与样式定制7.3 React与Vue框架的选择与应用React框架的基本概念与使用方法Vue框架的基本概念与使用方法框架项目结构与组件化开发第八章：网页兼容性与优化8.1 网页兼容性基本概念浏览器兼容性的原因与挑战兼容性测试的方法与工具兼容性解决方案与最佳实践8.2 网页性能优化网页加载速度的影响因素图片与多媒体元素的优化代码压缩与合并技巧8.3 搜索引擎优化（SEO）SEO的基本概念与原则关键词研究与内容优化代码优化与站点结构调整第九章：网页安全与维护9.1 网页安全基本概念网页安全的威胁与挑战跨站脚本攻击（XSS）的预防跨站请求伪造（CSRF）的预防9.2 数据备份与恢复数据备份的重要性与方法数据库备份与文件备份恢复策略与流程9.3 网站维护与更新网站维护的内容与流程网站更新的方法与技巧网站监控与性能调优第十章：项目实践与案例分析10.1 项目实践流程项目需求分析与规划设计阶段与实现阶段项目测试与上线流程10.2 项目案例分析案例一：个人博客网站设计与制作案例二：电子商务网站设计与制作案例三：响应式企业官网设计与制作项目过程中的问题与解决方法网页设计与制作的趋势与展望重点和难点解析1. 第一章：网页设计与制作概述难点解析：网页设计原则的理解与应用、网页制作工具与技术的熟练运用2. 第二章：网页布局与排版难点解析：响应式网页布局与排版的设计与实现3. 第三章：网页色彩与字体难点解析：色彩与字体的协调与平衡、字体大小与行距的设置与调整4. 第四章：网页图片与多媒体元素难点解析：网页图片与多媒体元素的优化方法、响应式应用5. 第五章：网页交互与动画难点解析：JavaScript事件的处理与DOM操作、动画的实现与优化6. 第六章：HTML与CSS高级应用难点解析：表单验证的实现方法、网页组件的布局与样式设计7. 第七章：前端框架与库难点解析：框架的选择与使用、React与Vue框架的选择与应用8. 第八章：网页兼容性与优化难点解析：兼容性解决方案与最佳实践、网页性能优化的实施方法9. 第九章：网页安全与维护难点解析：预防跨站脚本攻击（XSS）与跨站请求伪造（CSRF）的策略、网站维护与更新的方法10. 第十章：项目实践与案例分析难点解析：项目需求的分析与规划、项目测试与上线流程的控制本教案《网页设计与制作》涵盖了网页设计与制作的基本概念、技术应用、项目实践等各个方面。
网页设计与制作基础教程 第3版 第13章-制作ASP动态网页
“删除记录”行为 “登录用户”行为 “限制对页面的访问”行为 “注销用户”行为 “检查新用户名”行为
::::::::::
1.1.2 网页的布局结构
结构化布局是最基本的网页布局之一，其特点是将网页的各种结构模块 进行平面排列，以构成整个网页。在设计网页布局的过程中，应遵循对称平 衡、异常平衡、对比、凝视和空白等原则。一般情况下，网页的常见布局有 以下几种结构。
::::::::::
1.3.2 规划站点
用户在规划网站时，应明确网站的主题，并搜集所需要的相关信息。规 划站点指的是规划站点的结构，完成站点的规划后，在创建站点时用户既可 以创建一个网站，也可以创建一个本地网页文件的存储地址。
Dreamweaver CC工作界面 Dreamweaver CC基本操作
::::::::::
1.2.1 Dreamweaver CC工作界面
Dreamweaver CC的工作界面效果秉承栏Dreamweaver系列软件产品一 贯简洁、高效和易用的特点，软件的多数功能都能在功能界面中非常方便地 找到。
::::::::::
1.3.1 站点简介
互联网中包括无数的网站和客户端浏览器，网站宿主于网站服务器中， 它通过存储和解析网页的内容，向各种客户端浏览器提供信息浏览服务。通 过客户端浏览器打开网站中的某个网页时，网站服务软件会在完成对网页内 容的解析工作后，将解析的结构回馈给网络中要求访问该网页的浏览器。
Access数据库的基本操作 Access数据库的基础知识
::::::::::
13.1.1 Access数据库的基本操作
Access数据库是目前比较流行的数据库管理系统，它是一个运行在 Windows系统环境下的桌面关系型数据库，也是Office的组件之一。下面将 围绕几个与创建Access数据库相关的问题进行讲述，以便用户对该数据库的 应用有个概括的了解。
网页设计与制作教程(第3版)
1.5 Internet技术用语一览
局域网（Local Area
Network，LAN）
广域网（Wide Area
Network, WAN）
网关（Gateway）
Signal)
物理媒体 (Physical Media) 传输介质(Media)
数字信号 (Digital
*
Population % of World
Internet Usage, Latest Data
% Population ( Penetration )
Usage % of World
Usage Growth 2000-2007
Africa
941,249,130
14.2 %
44,361,940
4.7 %
1. Web服务器的安装 下载得到gzip压缩包。 使用Red Hat自带的RPM包。 2. Web服务器的配置 3. Web服务器的配置文件主要有以下三个： Httpd.conf Srm.conf Access.conf 4. 设置主页
*
1.3 Internet Explorer简介
*
1.2.2 Windows Web服务器的建立
为新的Web网站创建唯一的标识 IP地址：对于同一台主机可以分配多个IP地址。每个IP地址支持一个独有的网站。 端口号：每个TCP/IP过程是用一个端口号来标识的。 主机头名称（Host header name） 创建新的Web网站
*
1.2.3 UNIX Web服务器的建立
*
中国互联网用户正处于快速增长期
*
全球部分国家互联网普及率比较
*
1.1.2 Internet与TCP/IP协议
网页设计与制作基础教程 第3版 第04章-制作简单图文网页
第四章
制作简单图文网页
学习目标
文本和图像是网页中不可缺少的部分，对文本进行格式化 可以充分体现页面所要表达的重点，而在网页中插入图像的实 质则是把我们设计完成的最终效果展示给人们看。
::::::::::
本章重点
在网页中插入文本 设置网页文本的属性 在网页中插入图像 在网页中插入特殊符号
4.2.1 制作无序列表
在制作网页时，如果需要把各个项目美观地排列在一起，建议用户使用 无序列表。在无序列表中各项目前面的圆点直接用制作好的图像来替代，也 可以在CSS样式表中定义更改圆点形状。
::::::::::
4.2.2 制作有序列表
在各个项目中将赋予编号或字母表来创建的目录称为“有序列表”。在 有序列表中各项目之间的顺序是非常重要的。在每项之前赋予数字、罗马数 字的大小写以及字母表的大小写。
网页图像简介 插入普通网页图像 插入网页背景图像 插入Photoshop智能图像 制作鼠标经过图像
::::::::::
::::::::::
4.2 创建无序列表和有序列表
在网页中，我们可以用很多方法来排列文本项目，可以将多种项目没有 顺序地排列在一起，也可以给每个项目赋予编号后再进行排列。此时，没有 顺序的文本排列方式称为无序列表，赋予编号排列的文本项目则称为有序列 表。
制作无序列表 制作有序列表
:::::::::属性
使用Dreamweaver的“属性”检查器可以设置网页中文本的大小、颜色 和字体等文本属性，并且可以设置HTML的基本属性，也可以设置CSS文本 的扩展属性。
设置文本基本属性 添加网页文本字体
::::::::::
4.4 在网页中插入图像
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.1.3 网页的常见类型
一般情况下，网页的常见类型分为静态网页与动态网页两种。网页程序 是否在服务器端运行，是区分静态网页与动态网页的重要标志，在服务器端 运行的网页(包括程序、网页、组件等)属于动态网页(动态网页会随不同用户、 不同时间，返回不同的网页)。运行于客户端的网页程序(包括程序、网页、 插件、组件等)则属于静态网页。
网页制作软件——Dreamweaver 图像处理软件——Photoshop 动画制作软件——Flash
:::::《计算机基础与实训教材 系列》系列丛书官方网站 /edu
1.4 与网页相关的概念
Internet是从Interconnected Networks延伸而来的，是跨国界的网络。 Internet把世界各地数以千万计的计算机和传输线路连接在一起构成一个网络。 通过它可以交换信息、共享资源，并以此为基础实现各种计算机通信应用项 目。在Internet中，网页是它的重要组成部分，本节将主要介绍一些与网页相 关的名词和概念。
:::::《计算机基础与实训教材 系列》系列丛书官方网站 /edu
1.2 网页设计的构思与 布局
网页设计的成功与否，很重要的一个原因就在于它的构思与布局，具有 创造性构思和巧妙的页面布局会让网页具有更强的生命力和观赏性。本节将 重点介绍网页构思与布局的相关知识。
:::::《计算机基础与实训教材 系列》系列丛书官方网站 /edu
1.4.2 超文本传输协议
HTTP(HyperText Transfer Protocol)即超文本传输协议，它是WWW服务器 上最主要的协议。通过这一跨平台的通信协议，在WWW任何平台上的电脑 都可以阅读远方服务器(Server)上的同一文件。
1.1.1 网页和网站
在网页和网站开发领域，有着各式各样的专有名词。弄清楚它们之间的 概念和联系，对于用户学习网页知识有极大的裨益。
网页的概念 网站的概念
:::::《计算机基础与实训教材 系列》系列丛书官方网站 /edu
1.1.2 网页的基本元素
:::::《计算机基础与实训教材 系列》系列丛书官方网站 /edu
本章重点
网页制作的基础知识 网页设计构思与布局 常见的网页制作工具 与网页相关的概念
:::::《计算机基础与实训教材 系列》系列丛书官方网站 /edu
简单地说，WWW是漫游Internet的工具，它把Internet上不同地点的相关 信息聚集起来，通过WWW浏览器(如IE，即Internet Explorer)检索，无论用户 所需的信息在什么地方，只要浏览器为用户检索到之后，就可以将这些信息 (文字、图片、动画、声音件，其通过HTML、CSS等脚本语言对页面元素进行 标识，然后由浏览器自动生成页面。组成网页的基本元素通常包括文本、图 像、超链接、Flash动画、表格、交互式表单以及导航栏等。
:::::《计算机基础与实训教材 系列》系列丛书官方网站 /edu
1.1 网页制作的基础知 识
网页是构成网站的基本元素，是承载各种网站应用的平台。它是一个文 件，通常为HTML格式，可以存储在世界某个角落的某一台计算机中。
网页和网站 网页的基本元素 网页的制作流程 网页的常见类型
:::::《计算机基础与实训教材 系列》系列丛书官方网站 /edu
万维网（WWW） 超文本传输协议 统一资源定位器 网页框架语言HTML
:::::《计算机基础与实训教材 系列》系列丛书官方网站 /edu
1.4.1 万维网（WWW）
WWW(World Wide Web)即环球信息网，也可以称为 Web，中文名字为 “万维网”。用户在使用浏览器来访问Web的过程中，无须关心一些技术性 的细节即可得到丰富的信息资料。WWW是Internet上发展最快和目前使用最 广泛的一种服务。
1.4.3 统一资源定位器
URL(Uniform Resource Locator)即统一资源定位器，它使用数字和字母来 代表网页文件在网上的地址。URL好比Internet的门牌号码，它可以帮助用户 在Internet的信息海洋中查找到所需要的资料。
《 网页设计与制作基础教程(第3版)》
第一章
网页设计基础知识
学习目标
随着因特网（Internet）的不断发展，越来越多的人都想要 学习设计与制作网页，但是要实现较好的网页效果，设计者首 先要了解网页的相关基础知识，例如网页与网站的关系，网页 设计的构思与布局方式，常用的网页制作工具，以及与网页相 关的概念等。
HTTP协议经常用来在网络上传送Web页。当用户以“http://”开始一个 超链接的名字时，就是告诉浏览器去访问使用HTTP协议的Web页。HTTP协议 不仅能保证正确传输超文本文档，还可以确定传输文档中的哪一部分，以及 哪部分内容首先显示。
:::::《计算机基础与实训教材 系列》系列丛书官方网站 /edu
网页的设计构思 网页的布局结构
:::::《计算机基础与实训教材 系列》系列丛书官方网站 /edu
1.3 网页制作工具简介
网页制作工具可以分为两类：一类是源代码编辑工具(如HotDog、 HomeSite、EditPlus等)，另一类是所见即所得编辑工具(如HotMetal、 FrontPage、Dreamweaver等)。除此之外，设计者在制作网页时，还需要用到 图像设计工具(如Photoshop、FireWorks)和动画制作工具(如Flash)。本节将简 要介绍目前常用的网页制作工具Dreamweaver、图像设计工具Photoshop和动 画制作工具Flash。