网站建设与网页制作课程PPT59326.ppt

1、一，1，网页设计与制作，崔，2012年9月，一，2，教学目标，通过本章的学习，学生可以了解网站的设计和工作流程，掌握HTML的基本概念和结构，用HTML制作网页，了解与DHTML/XML的区别，并掌握使用Dreamweaver制作网页，Fireworks制作图片和Flash制作动画；并且可以被有机地结合以产生美丽的网页。a，3，第1章网页设计概述第2章HTML语言基础第3章Dream weaver基础第4章网页中的基本元素第5章网页布局第6章网页中的层和时间线第7章表单的应用第8章网页中的使用行为第9章CSS样式使用第10章网页中的多媒体应用第11章模板和库第12章网站测试和发布第13章Fla

2、sh简介第8章第14章简介网页设计概述第1章，目录，a，4，第8页，知识目标掌握网页、网站和主页的概念，理解网页中的主要元素，并理解各种网页制作工具的功能。 瞄准各种网页制作工具的合作。利用网页制作工具1.4网页设计的基本流程本章概要，第一章网页设计概述，a，6，1.1网页和网站，1.1.1网页1.1.2网站1.1.3网页的基本功能，a，7，1网页(网页):用html语言编写，通过www 2网页的类型可根据网页分为主页、主页、栏目网页、内容网页和功能网页根据制作工艺，可分为静态网页和动态网页。1.1.1网页，1.1网页和网站，a，8网站是通过超链接将网页等一些信息文件链接起来而形成的信息文件的

3、集合。信息可以是网页或其他文档的形式。网页和网站的区别和联系：网站是一个文件夹，其中的文件不仅是网页，也是网站需要的其他文件或文件夹。网页是用于发布各种信息的页面文件。网页是网站的组成要素，是网站信息发布和表达的主要形式。网站是由超链接形成的网页集合。1.1.2网站，1.1网页和网站，a，9，1媒体的作用。用户和信息之间的媒介。一方面，它是一个出版商，其功能是发布信息；另一方面，它是一个浏览器，其功能是提供浏览信息，并通过浏览网页找到所需的信息。2.互动的作用。观众和网页制作人之间的互动窗口可以单向或双向传递信息。3.传输的功能。用于传输各种电子文件或信息，如下载指令、更新文件、驱动程序等。1

4、.1.3网页的基本功能，1.1网页和网站的主要元素，10，1.2网页，1.2.1文本1.2.2图像1.2.3链接标志1.2.4其他基本元素，一般包括：文本，图像，动画和链接标志等。此外，网页的基本元素。a，11，是网页中最基本的元素。网页中字符的设计一般从以下几个方面考虑：1 .字体的选择。2.字体大小和行距的选择。3特殊字体的使用。4字体的颜色。1.2.1文本，1.2网页中的主要元素，a，12，现在互联网上使用的大多数图片和图像都是gif、jpeg和png文件格式。在网页上使用图像时需要注意的问题：JPEG格式适用于照片图像，GIF格式适用于包含纯色的图像，如插图和线条图。图像编辑软件用于放

5、大或缩小图像。屏幕显示图像的分辨率通常为72dpi。制作图像时，您不必使用比这更高的分辨率。1.2.2图像，1.2网页中的主要元素，a，13。如果创建的图像只有黑白，则可以在处理过程中以黑白图像格式保存，这样可以减小图像文件的大小。如果设计的GIF格式图像包含渐变和直线，它们应该尽可能水平，因为GIF网格是基于每条水平线压缩的。尝试不同的JPEG压缩率，并使用适当的颜色模式。小心使用动画。1.2.2图像，1.2网页中的主要元素，a，14链接，也称为超链接，是从一个网页到另一个目的地的链接，是网页之间的链接。链接标记(载体)是指网页中的特殊文本或图像，通常用不同的颜色和下划线标记。在浏览器中，访

6、问者可以用鼠标点击它们，并且他们可以从当前网页转到链接的目的地。一般来说，超链接有三个标志：文本、图像和热区。应该注意的是，所有的超链接符号都应该被观众清楚地识别出来，这样人们可以一目了然。1.2.3链接标志，1.2网页中的主要元素，a，15，除了上述元素之外，动画，视频，声音等其他形式的信息也常用于网页上。1动画。目前，互联网上常用的动画有两种：gif和Flash动画。2个视频。它是多媒体网页的重要组成部分。常用的视频格式有avi、mpeg和mov等。视频会大大增加网页的文件大小，从而影响访问速度，所以应该谨慎使用。3音频。将音频插入网页会增加网页的生动性。常用的音频格式有rm(ram)、m

7、idi、wav和mp3。音频文件，像视频文件一样，会增加网页的文件大小，所以应该小心使用。1.2.4其他基本元素，1.2网页中的主要元素，a，16，1.3网页制作工具，1.3.1网页编辑工具1超文本标记语言(html) 2简介HTML)2 FrontPage 3 Dreamweaver 1 . 3 . 2网页图像编辑工具1.3.3动态网页技术，a，17，1照片商店。它由Adobe公司开发，是最流行的图形和图像处理软件之一，可以实现各种专业的图像制作、处理和合成。2烟花.这是一个由Macromedia公司开发的图形处理工具。它是第一款专门为制作网页图形而设计的软件，也为网页图形的设计和制作提供了

8、专业的解决方案。3.闪光灯.宏媒体公司生产的Flash是目前非常流行的交互式网络矢量动画软件。Dreamweaver、Flash和Fireworks被称为“网页三剑客”，它们现在被认为是制作网页的相对标准的工具。1.3.2网页图像编辑工具，1.3网页制作工具，a，18，动态网页可以实现网页浏览者和网页设计者之间的交互，有两种交互技术：一是客户端技术，如常用的JavaScript和VBScript；另一种是服务器端技术，如ASP和PHP。1 ASP(动态服务器页面)2 PHP(超文本预处理器)3 JSP (Java服务器页面)，1.3.3动态网页技术，1.3网页制作工具，1，19，1.4网页设计

9、的基本过程，1.4.1网站设计过程1.4.2网页设计和制作1.4.3网页测试1.4.4网页上传和发布，1，20，1确定网站的主题2规划网站的整体结构3收集和整合网页材料4确定网站的布局5.创建网页。6.在网页上添加特殊效果。7测试和发布网站。1.4.1网站设计流程，1.4网页设计的基本流程，a，21，1确定网页的布局(1)平衡。(2)对称性。(3)对比。(4)密度。(5)比例。(6)节奏。网页排版布局是决定网站是否美观的一个重要方面。只有通过合理和创造性的布局，文本、图像和其他内容才能完美地展现在游客面前。2网页设计和制作网页设计和制作一般分为两类：静态网页制作和动态网页制作。1.4.2网页的

10、设计和制作，1.4网页设计的基本过程，a，22，1浏览器兼容性测试。目前，主要有两种浏览器：网络浏览器和网景浏览器，它们对HTML和CSS语法有不同的支持。Dreamweaver提供了检查网页是否包含特定版本的浏览器无法识别的语法的功能，设计人员可以使用它进行检查。平台2的兼容性测试。为了用户的利益而设计，你必须在至少一台个人电脑和一台苹果电脑上测试你的网页，看它的兼容性如何；3超链接完整性测试。超链接是网页和网站之间的桥梁。访问者不愿意访问经常存在“找不到网页”问题的网站。作为一名设计师，他们必须检查超链接的完整性，确保链接的有效性，并且不要留下太多不好的链接。1.4.3网页测试，1.4网页

11、设计的基本过程，a，23，如果网页设计得很好，就必须在互联网上发布，否则网站的图像仍然无法显示。发布的服务器可以是远程的，也可以是本地的。如果你在网上发布它，你应该首先申请域名和主页空间，然后用特殊的软件上传它(比如CuteFTP)。FTP软件有很多种，其中最著名的是CuteFTP和LeapFTP，你也可以用Dreamweaver内置的FTP上传。1.4.4网页的上传和发布，1.4网页设计的基本流程，a，24，本章概述，第1章网页设计概述，a，25，知识目标了解超文本标记语言文档的基本结构，掌握超文本标记语言中文本编辑和图像的语法，掌握超文本标记语言中各种设置的超链接的语法，掌握超文本标记语言

12、中表格和框架的基本语法，掌握文本和图像的编辑操作， 掌握创建各种超链接的操作，编写简单的超文本标记语言网页，掌握超文本标记语言文档中表格和框架的使用。 第二章超文本标记语言基础，一，26，2.1超文本标记语言概述2.2文本编辑2.3图像编辑2.4超链接2.5表格和框架本章概述，第二章超文本标记语言基础，一，27，2.1超文本标记语言概述，2.1.1超文本标记语言介绍2.1.2超文本标记语言语法结构，一，28超文本标记语言(超文本标记语言)也称为超文本标志文件的扩展名是：“HTML”或“HTML”。示例2.1简单的HTML文档。欢迎来到长春！这是长春友谊。我们会带你去长春。由 组成的是标签。用超

13、文本标记语言标记“单一标记”和“包含标记”。2.1.1 HTML简介，2.1 HTML概述，a，29，1包含标记格式：2单标记格式：仅开始标记，无结束标记。最常用的单个标记是，它表示线段内的一个换行符。3标签属性格式：属性之间没有顺序，属性可以省略。当省略属性时，采用标签的默认值。2 . 1 . 1 html简介，2.1 html概述，a，30，html文档的基本结构：文件开始标题区域开始.标题区域结束文件正文内容开始文件正文内容结束文件结束，这表明它是一个网页文件，是一个必要的标记。2.1.2 HTML语法结构，2.1 HTML概述，a，31，2.2文本编辑，2.2.1段落标记2.2.2文本

14、标记2.2.3标题显示级别2.2.4列表，a，32，1段落()基本语法格式：其中参数align用于设置段落向左和向左的位置。默认值保留不变；除了对齐还有其他参数，例如类。类参数是可选的，如果不是，它将显示为默认值。2.放置在行尾的新行标记可以强制文本在段落中换行，并将标记后面的文本单词、图像和表格设置为在下一行显示。2.2.1段落标记，2.2文本编辑，a，33，1字体标记。它的基本语法格式是：大小：设置字体的显示大小，范围从“17”，其中“3”是默认值。颜色：设置文本的颜色。该值可以是颜色名称(英文中红色代表红色)或颜色的十六进制代码(# 00000代表黑色，#FFFFFF代表白色)。字体：用

15、字体名称的值设置文本显示的字体。文本标记中有许多常用的标记，如，(粗体)、(斜体)、(下划线)。2.2.2文本标记，2.2文本编辑，a，34，2特殊字符除了我们在上面学到的一些标记外，还有一些常用的特殊字符，如 。这些特殊字符在HTML语言中有成对的转义字符。常用转义字符和特殊字符见下表：语法格式是：大小：以像素为单位设置水平线的高度。颜色：设置水平线的颜色。宽度：以像素或百分比设置水平线的宽度。像素是绝对尺寸，不会随着程序窗口的大小而改变。百分比是程序窗口中水平线的比例，将随程序窗口的大小而变化。对齐：设置水平线的对齐方式。有三种对齐方法：左对齐、中对齐和右对齐。2.2.2文本标记，2.2文

16、本编辑，a，36，语法格式为：n:表示不同级别的标题，n的值可以是1到6之间的任何数字，其中1表示标题的最大字体。此外，align属性可用于设置对齐方法。有三种常用的对齐方法：左对齐、中对齐和右对齐。2.2.3标题显示级别，2.2文本编辑，a，37。在超文本标记语言中，“有序列表”和“无序列表”常用于列表中。1有序列表的基本语法结构是：1项2项n，2.2.4列表，2.2文本编辑，a，38，1有序列表类型：设置列表的序列号类型，常用的序列号如下：n=1:使用数字作为序列号。n=A；使用大写字母作为序列号。N=a:使用小写字母作为序列号。使用大写罗马数字作为序列号。N=i:使用小写罗马数字作为序列号。起始：可选参数，用于设置序列号的起始值。如果没有添加“开始”，它将从每种类型的第一个序列号开始。2.2.4列表，2.2文本编辑，以及，39，2无序列表。基本语法结构如下：第1项、第2项、第n项类型：设置符号形状，包括三种类型：实心圆、小正方形和空心圆。细节如下：n=圆盘：符号是实心圆。n=正方形：符号是正方形。n=圆：符号是一个空圆。2.2.4列表，2.2文本编辑，a，40，2.3图像编辑，2.3.1插入图像2.3.2使用背景图像，我们经常浏览网页上的图像，适当使用图像可以增加网页的美感。网页中最常用的是插入图像和设置背景图像。a，41，1语法格式