网页设计与制作教程第三版杨选辉答案PDF-网页设计与制作ppt课件.ppt

讲座 11 网页设计概述 网页设计概述 讲座 22 讲座 HTML 语言基础知识 讲座 33 Dreamweaver 基础知识 Dreamweaver 讲座 44 网页中的基本元素 网页中的基本元素 讲座 55 网页布局 网页布局 第 66 章： 图层和时间轴网页中的图层和时间轴 第 77 章：表单的应用 表单的应用 第 88 章：在网页中使用行为 在网页中使用行为 第 88 章 第 99 章：使用 CSS CSS 样式。 使用样式。 讲座1010：网页中的多媒体应用。 网页中的多媒体应用。 讲座 1111：模板和库。 模板和库。 讲座 1212：站点测试和发布。 网站测试与发布 111111$ 【知识目标】掌握网页、网站、主页的概念。 掌握网页、网站和主页的概念。 了解网页中的主要元素。 了解网页中的主要元素。 了解各种网页制作工具。 了解各种网页制作工具 【能力目标】 各种网页制作 工具的配合使用 各种网页制作工具的配合使用 网站总体规划 网站总体规划 网站设计流程 网站设计流程 221.11.1 Web网页和网站 网页和网站 1.21.2 网页中的主要元素 1.31.3 网页制作工具 网页制作工具 1.41.4 网页设计的基本流程 网页设计的基本流程 概要本讲 小结 11331.11.11.1.1 网页 1.1.2 网站 1.1.3 网页的基本功能 441、网页（WEB）：用 HTML 语言编写，通过 www 网络传输，由Web 浏览器生成一个页面文件（网页示例），该文件收集文本、图片、声音、动画和其他可以显示的信息元素。

2、网页类型按页面内容可分为首页、主页、栏目网页、内容网页和功能网页； 按制作技术可分为静态网页和动态网页。 1.1.11.1.1 网页Web page 1.11.155 网站是一些网页与其他信息文件通过超链接关联起来而形成的信息文件的集合。 该信息可以是网页或其他文档的形式。 网页和网站的区别和联系：网站是一个文件夹，里面的文件不仅是网页，还包括网站所需的其他文件或文件夹。 网页是用于发布各种信息的页面文件。 网页是网站的组成元素，是网站信息发布和表达的主要形式； 网站是通过超链接形成的网页的集合。 1.1.21.1.2 网站 网站1.11.1661，媒体的作用。 用户和信息之间的媒介。 一方面是出版商，其职能是发布信息；另一方面是出版商。 另一方面是浏览器，其功能是提供浏览信息，通过浏览网页找到所需的信息。 2.互动的作用。 浏览者与网页制作单元交互的窗口，可以向一个或两个方向传递信息。 3、传输作用。 用于传输各种电子文件或信息，如下载说明、更新文件、驱动程序等 1.1.31.1.3 网页基本功能 网页基本功能 1.11.1771.21.21.2.1 文字 1.2.2 图片 1.2.3 链接标识 1.2 .4 其他基本元素 网页的基本元素一般包括：文字、图像、动画和链接标记。 此外，网页的元素还包括声音、多媒体和视频。

88是网页中最基本的元素。 网页汉字设计一般从以下几个方面考虑： 1、字体选择。 2. 字体大小和行距的选择。 3． 使用特殊字体。 4.字体的颜色。 1.2.11.2.1 文本 文本 1.21.299 当今 Internet 上使用的绝大多数图片和图像都是 gif、jpeg 和 png 文件格式。 在网页上使用图像时应注意的事项： • JPEG 格式适用于照片图像，GIF 格式适用于包含纯色的图像，例如插图和线条图。 •使用图像编辑软件放大或缩小图像。 •屏幕显示图像的分辨率一般为72dpi。 创建图像时，您不必使用比这更高的分辨率。 1.2.21.2.2 图像 图像1.21.21010 • 如果创建的图像仅包含黑白，则在处理过程中可以将其保存为黑白图像格式，这样可以减小图像文件的大小。 •如果设计的GIF格式图像包含渐变和直线，请尽量将其水平化，因为GIF格式是按水平线压缩的。 • 尝试各种JPEG 压缩率。 • 使用适当的颜色模式。 •谨慎使用动画。 1.2.21.2.2 图像 图像1.21.21111 链接也称为超链接。 它是从一个网页到另一个目的地的链接，是页面之间的链接关系。 链接标签（载体）是指网页中的特殊文字或图像。 它们通常用不同的颜色和下划线来标​​识。 在浏览器中，访问者可以用鼠标单击它们，从当前网页转到该链接。 目的地位置。

超链接符号一般有三种类型：文本、图像和热区。 需要注意的是，所有的超链接标志都应该向观看者清楚地标识，以便浏览者一目了然。 1.2.31.2.3 链接标记 链接标记 1.21.21212 除上述元素外，网页上还经常使用动画、视频、声音等形式的信息。 1.动画。 目前，网络上常用的动画类型有两种：gif和Flash动画。 2.视频。 它是多媒体网页的重要组成部分。 常用的视频格式有avi、mpeg、mov等，视频会大大增加网页的文件大小，从而影响访问速度，请谨慎使用。 3． 声音的。 在网页中插入音频可以增加网页的生动性。 常用的音频格式包括rm(ram)、midi、wav和mp3格式。 音频文件与视频文件一样表情包设计，会增加网页的文件大小，因此请谨慎使用。 1.2.41.2.4 其他基本元素 其他基本元素 1.21.213131.31.31.3.1 网页编辑工具 1. 超文本标记语言（HTML） 2. FrontPage 简介 3． Dreamweaver1.3.2 网页图像编辑工具 1.3.3 动态网页技术 14141. Photoshop。 它由 Adob​​e 开发，是当今最流行的图形和图像处理软件之一。 可以实现各种专业图像的制作、处理和合成。

2.烟花。 它是Macromedia公司开发的图形处理工具。 它是第一个专门为制作网页图形而设计的软件。 它还提供专业的网页图形设计和制作解决方案。 3.闪光。 Flash是Macromedia公司出品的一款非常流行的交互式Web矢量动画软件。 Dreamweaver、Flash、Fireworks被誉为“网络三剑客”，是目前公认的比较标准的网页制作工具。 1.3.21.3.2 网页图片编辑工具 网页图片编辑工具 1.31.31515 动态网页可以实现网页浏览器和网页设计者之间的交互。 实现交互的技术有两种：一种是客户端技术，如常用的JavaScript、VBScript；另一种是客户端技术网页设计与制作教程第三版杨选辉答案PDF，如常用的JavaScript、VBScript等。 另一种是目前常用的ASP、PHP等服务器端技术。 1. ASP(ActiveServerPages)2. PHP(超文本预处理器)3． JSP（JavaServerPages） 1.3.31.3.3 动态网页技术 动态网页技术 1.31.316161.41.41.4.1 网站设计流程 1.4.2 网页设计与制作 1.4.3 网页测试 1.4.4 网页上传与发布 17171确定网站主题 2.规划网站整体结构 3.收集、整合网页素材 4.确定网页布局。

5. 创建网页。 6.添加网页效果。 7. 测试并发布网站。 1.4.1 1.4.1 网站设计流程 网站设计流程 1.4 1.4 18 18 1. 确定网页布局 (1) 平衡。 (2)对称性。 (3)对比。 (4)密度。 (5)比例。 (6)节奏感。 网页的布局是决定网站美观的一个重要方面。 只有通过合理、富有创意的布局网页设计与制作教程第三版杨选辉答案PDF，文字、图像等内容才能完美地展现在观看者面前。 2、网页设计与制作 网页设计与制作一般分为两类：静态网页制作和动态网页制作。 1.4.2 1.4.2 网页设计与制作 网页设计与制作 1.4 1.4 19 19 1. 浏览器兼容性测试。 目前，有两种主要的浏览器：Internet Explorer 和 Netscape。 两者对 HTML 和 CSS 等语法的支持不同。 Dreamweaver提供了一个功能来检查网页是否包含某个版本的浏览器无法识别的语法，设计者可以用它来检查。 2.平台兼容性测试。 设计一定要为用户着想，你的网站必须在至少一台PC和一台Mac上进行测试，看看兼容性如何； 3.超链接完整性测试。 超链接是连接网页和网站的桥梁。 浏览者不愿意访问经常出现“找不到页面”问题的网站。 作为设计者，必须检查超链接的完整性，以确保链接的有效性。 ，不要留下太多不良链接。

1.4.3 1.4.3 网页测试 网页测试 1.4 1.4 20 20 网页设计好后，必须发布到互联网上，否则网站图像仍然无法显示。 发布服务器可以是远程的或本地的。 如果要发布到网上，必须先申请域名和主页空间，然后使用专用软件（如CuteFTP）进行上传。 FTP软件有很多种卡通人物，其中最著名的是CuteFTP LeapFTP。 您还可以使用Dreamweaver的内置FTP来上传。 1.4.4 1.4.4 网页上传与发布 网页上传与发布 1.4 1.4 21 21 本讲概要 本讲概要 第 11 讲 网页设计概述 网页设计概述 网页和网站概述 网页中的主要元素 基础网页设计流程 网页制作 工具 网页 网页基本功能 文字图片 链接符号 其他基本要素 网页编辑工具 网页图片编辑工具 网站设计流程 网页设计与制作 网页测试 网页上传与发布 常见的各种网页页面制作工具 动态网页技术 22 22 $[知识目标] 了解HTML HTML文件的基本结构，文件的基本结构，掌握HTML中文本的编辑和图像的语法，掌握文本编辑和图像的语法、掌握HTML中超链接各种设置的语法。 掌握设置各种超链接的语法。 掌握 HTML 中表格和框架的基本语法。 掌握HTML中表格、框架的基本语法 【能力目标】掌握文本、图像的编辑操作。 掌握文字和图像的编辑操作。 掌握各种超链接的创建。 掌握链接的操作。 掌握创建各种超链接的操作。 能够编写简单的 HTML。 能够编写简单的 HTML HTML 网页。 掌握HTML HTML 文件中表格和框架的使用。 HTML 文件中表格和框架的使用。 22 HTML HTML 22 HTML HTML 23 23 2.1 HTML 2.1 HTML 概述 概述 2.22.2 文本编辑 文本编辑 2.32.3 图像编辑 图像编辑 2.42.4 创建超链接 创建超链接 2.52.5 表格和框架 表格和框架 本讲座摘要本讲座 22 HTML HTML 22 HTML HTML 24 24 2.1 HTML 2.1 HTML 2.1.1 HTML简介 2.1.2 HTML语法结构 25 25 HTML（Hyper Text Markup Language），又称超文本标记语言，是一种标记语言，原版网页设计语言。

文件扩展名：“html”或“htm”。 例 2.1 简单的 HTML 文档 html 头标题。 欢迎来到长春！ /title /head body 这里是长春优优网，我们带您畅游长春！ /body /html 由“”组成，“”是标签。 在HTML语言中，标签分为“单一标签”和“封闭标签”。 2.1.1 HTML 2.1.1 HTML 简介 简介 2.1 HTML 2.1 HTML 26 26 1. 包含标记格式：mark…/mark2。 单标签格式：标签只有开始标签，没有结束标签。 最常用的单个标签是 br，它表示段落中的换行符。 3． 标记属性格式：标记属性1、属性2、属性3……属性之间没有顺序，属性也可以省略。 当省略属性时，采用标记的默认值。 2.1.1 HTML 2.1.1 HTML 简介 2.1 HTML 2.1 HTML 27 27 HTML 文档的基本结构： HTML 文件开始 HEAD 标头区域开始 TITLE…/TITLE 标题区域/HEAD 标头区域结束 BODY 文件正文内容开始文件 Main content…/BODY 文件主要内容结束/HTML 文件结束。 HTML/HTML 之间的空格表示这是一个网页。