网页制作基本知识.ppt

网页设计与制作,主讲人：吴清燕 E-Mail：,第1章 网页设计概述,$ 知识目标 掌握网页、网站及主页的概念 了解网页中的主要元素 了解各种网页制作工具 8 能力目标 各种网页制作工具的配合使用 网站的整体规划 网站的设计流程,1.1 网页和网站 1.2 网页中的主要元素 1.3 网页制作工具 1.4 网页设计的基本流程 本章小结,第1章 网页设计概述,1.1 网页和网站,1.1.1 网页 1.1.2 网站 1.1.3 网页的基本功能,1网页 网页（WEB）：是用html语言编写的，通过www网传输，并被web浏览器翻译成可以显示出来的集合文本、图片、声音和动画等信息元素的页面文件（网页示例）。 2网页的类型 根据页面内容可以分首页、主页、专栏网页、内容网页和功能网页等类型；按制作技术分为静态网页与动态网页。,1.1.1 网页,1.1 网页和网站,网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合。信息可以是网页形式也可以是其他的文档形式。 网页与网站的区别与联系： 网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的集合。,1.1.2 网站,1.1 网页和网站,1、媒介的作用。使用者与信息之间的媒介。一方面是发布者，功能是发布信息；另一方面是浏览者，功能是提供浏览的信息，通过浏览网页找寻需要的信息。 2、互动的作用。浏览者与网页制作单位之间互动的窗口，可以单向或双向传递信息。 3、传输的作用。作为传输各种电子文件或信息之用，如下载说明书、更新文件、驱动程序等。,1.1.3 网页的基本功能,1.1 网页和网站,1.2 网页中的主要元素,1.2.1 文本 1.2.2 图像 1.2.3 链接标志 1.2.4 其他的基本要素,网页的基本要素一般包括：文字、图像、动画和链接标志等，除此之外，网页的元素还包声音、多媒体和视频等。,是网页中最基本的元素。网页中文字的设计一般从以下几个方面来考虑： 1字体的选择。 2字号、行距的选择。 3特殊字体的使用。 4字体的颜色。,1.2.1文本,1.2 网页中的主要元素,现在网络上使用的绝大多数图片和图像是gif、jpeg和png文件格式。 网页上使用图像要注意的问题： JPEG格式适合于照片图像，GIF格式适合于包含纯色的图像，例如插图和线条图。 利用图像编辑软件来放大或缩小图像 屏幕显示图像的分辨率一般为72dpi。制作图像时，不必使用比此再高的分辨率。,1.2.2图像,1.2 网页中的主要元素,如果建立的图像中只有黑色和白色，处理时可将它保存为黑白图像格式，这样可以减少图像文件的大小。 如果设计的GIF格式图像包含了渐变和直线，应尽量使得它们水平，因为GIF格以每条水平线为基础来压缩。 尝试各种不同的JPEG压缩率 使用合适的色彩模式。 慎用动画。,1.2.2图像,1.2 网页中的主要元素,链接也叫超链接（Hyperlink），是从一个网页指向另一个目的端的链接，是页面间的链接关系。 链接标志（载体）指的是网页中特殊的文本或图像，它们常常用不同的颜色和下划线来标识，在浏览器中，访问者可以用鼠标单击它们，能够从当前的网页转到链接的目的端位置。 超链接的标志一般有：文本、图像、热区三种。要注意的是，所有超链接标志均应清晰无误地向浏览者标识出来，让人一看就知道。,1.2.3链接标志,1.2 网页中的主要元素,除上述几种要素之外，在网页上经常使用的还有动画、视频、声音等各种信息的形式。 1动画。目前网络上常用的动画类型有gif和Flash动画两种。 2视频。是多媒体网页的一个重要组成部分，常用的视频格式有avi、mpeg和mov等，视频会大大增加网页的文件量，从而使用访问速度受到影响，因此要慎用。 3音频。在网页中插入音频会增加网页的生动性。常用的音频格式有rm(ram)、midi、wav和mp3等格式。音频文件和视频文件一样都会增加网页的文件量，因此要慎用。,1.2.4其他的基本要素,1.2 网页中的主要元素,1.3 网页制作工具,1.3.1 网页编辑工具 1超文本标识语言（HTML） 2FrontPage简介 3Dreamweaver 1.3.2 网页图像编辑工具 1.3.3 动态网页技术,1Photoshop。是Adobe公司开发的，是当今最流行的图形图象处理软件之一，它能够实现各种专业化的图像制作、处理及合成。 2Fireworks。是由Macromedia公司开发的图形处理工具，它是第一个专门为制作网页图形而设计的软件，同时也提供专业的网页图形设计及制作的解决方案。 3.Flash。Macromedia公司出品的Flash是目前非常流行的一种交互式Web矢量动画软件。 Dreamweaver和Flash、Fireworks三个软件被称为“网页三剑客”，是现在公认的比较标准的网页制作利器。,1.3.2 网页图像编辑工具,1.3 网页制作工具,动态网页可以实现网页浏览者和网页设计者的交互，实现交互技术有两种：一种是客户端技术如常用的JavaScript和VBScript；另一种是服务器端技术如目前常用的ASP和PHP。 1ASP(Active Server Pages) 2PHP(Hypertext Preprocessor) 3JSP(Java Server Pages),1.3.3动态网页技术,1.3 网页制作工具,1.4 网页设计的基本流程,1.4.1 网站的设计流程 1.4.2 网页的设计与制作 1.4.3 网页的测试 1.4.4 网页上传和发布,1确定网站的主题 2规划网站的整体结构 3收集整合网页素材 4确定网页版面布局。 5制作网页。 6添加网页特效。 7测试和发布网站。,1.4.1 网站的设计流程,1.4 网页设计的基本流程,1确定网页的版面布局 （1）平衡性。（2）对称性。（3）对比性。 （4）疏密度。（5）比例。（6）韵律感。 网页的排版布局是决定网站美观与否的一个重要方面,通过合理的、有创意布局,才可以把文字、图像等内容完美地展现在浏览者前面。 2网页设计与制作 网页设计与制作一般分为静态网页制作和动态网页制作两类。,1.4.2 网页的设计与制作,1.4 网页设计的基本流程,1浏览器兼容性测试。目前浏览器有： Internet Explorer与Netscape两大主流浏览器，二者对HTML和CSS等语法的支持度是不同的。在Dreamweaver中提供了可以检查网页中是否含有某版本浏览器不能识别的语法功能，设计者可以借助其进行检查。 2平台的兼容性测试。设计要为用户着想，必须最少在一台PC和一台Mac机上测试你的网站网页，看看兼容性如何； 3超链接完好性测试。超链接是连接网页之间、网站之间的桥梁，浏览者是不愿意访问一个经常出现“找不到网页”的问题的网站，作为设计者必须检测超链接的完好性，保证链接的有效性，不要留下太多的坏链接。,1.4.3网页的测试,1.4 网页设计的基本流程,网页设计好，必须把它发布到互联网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地。如果是发布到互联网上，要先申请域名和主页空间，然后再利用专用软件（如：CuteFTP）上传，FTP有很多种软件，最著名的是 CuteFTP 和 LeapFTP，也可以用Dreamweaver内置的FTP上传。,1.4.4网页上传和发布,1.4 网页设计的基本流程,本章小结,第1章 网页设计概述,2.1 HTML概述,2.1.1 HTML简介 2.1.2 HTML语法结构,HTML（Hyper Text Markup Language）又称超文本标识语言，是一种标识性的语言，是网页设计的最初语言。文件的扩展名:“html”或“htm”。 例2.1 简单的HTML文档 .长春欢迎您！ 这里是长春悠游网，我们带您畅游长春！ 由“”组成的就是标记。在HTML语言中标记分“单标记”和“围堵标记”。,2.1.1 HTML简介,2.1 HTML概述,1围堵标记 格式： 2单标记 格式： 只有起始标记，没有结束标记。最常用的单标记是, 它表示段内换行。 3标记属性 格式： 各属性间无前后顺序，属性也可省略，当省略属性时取标记的默认值。,2.1.1 HTML简介,2.1 HTML概述,HTML文档的基本结构： 文件开始 标头区开始 .标题区 标头区结束 文件主体内容开始 文件主体内容 文件主体内容结束 文件结束 其中之间表示这是个网页文件，是必有的标记。,2.1.2 HTML语法结构,2.1 HTML概述,2.2 文本的编辑,2.2.1 段落标记 2.2.2 文本标记 2.2.3 标题显示等级 2.2.4 列表,1段落（） 基本语法格式为： 其中参数align用于设定段落的位置是靠左、靠右还是居中。默认值是靠左；除align之外还有其他参数如class。class参数是可选项，如果没有将按照默认值显示。 2换行 单标记，放在一行的末尾，可以在一个段落内实现文本的强制换行，设置标记后面的文本字、图像和表格等内容显示于下一行。,2.2.1 段落标记,2.2 文本的编辑,1字体标记 其基本语法格式为： Size：设置字体的显示字号，范围是从“17”，其中“3”是默认值。 Color：设置文本的颜色，值可以是颜色名（英文如red代表红色）或颜色的十六进制代码（#000000代表黑色，#FFFFFF代表白色）。 Face：设置文本显示的字体，值为字体的名称。 在文本的标记中还有很多常用的标记，比如表示字体效果的，(黑体)，（斜体），（加下划线）。,2.2.2 文本标记,2.2 文本的编辑,2特殊字符 HTML中除了我们上面学的的一些标记外，还有一些我们常用的特殊字符比如“”，这些特殊字符在HTML语言中都有对的转义符，常用的转义符与特殊字符参见下表：,2.2.2 文本标记,2.2 文本的编辑,3水平线标记 水平线是在网页上划出一条水平的分割线，用来标记水平线。语法格式为： Size：设置水平线的高度，以像素为单位。 Color：设置水平线的颜色。 Width：设置水平线的宽度，单位是像素或百分比，像素是绝对大小，不会随着程序窗口的大小而改，百分比是相对于程序窗口水平线所占的比例，会随着程序窗口的大小而改变。 Align：设置水平线的对齐方式。对齐方式有左对齐，居中，右对齐三种。,2.2.2 文本标记,2.2 文本的编辑,语法格式为： n：表示不同级别的标题，n值可以是1-6中的任意数字，其中1表示的标题字体最大。另外，可以用align属性设置对齐方式，常用的有左对齐，居中，右对齐三种对齐方式。,2.2.3 标题显示等级,2.2 文本的编辑,在HTML中，列表常用的有“有序列表”和“无序列表”。 1有序列表 基本语法结构为： 项目1 项目2 项目n ,2.2.4 列表,2.2 文本的编辑,1有序列表 Type：设置列表的序号类型，常用序号如下： n=1：用数字作为序号。 n=A；用大写字母作为序号。 n=a：用小写字母作为序号。 n=I：用大写罗马数字作为序号。 n=i：用小写罗马数字作为序号。 Start：为可选参数，用于设置序号的起始数值。如不添加“start”则从每类序号的第一个序号开始。,2.2.4 列表,2.2 文本的编辑,2无序列表 基本语法结构为： 项目1 项目2 项目n Type:设置符号形状，有实心圆、小正方形、空心圆三种，具体如下： n=disk：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。,2.2.4 列表,2.2 文本的编辑,2.3 图像编辑,2.3.1 插入图像 2.3.2 使用背景图像,我们在网页上经常会浏览图像，适当使用图像可以增加网页的美观。在网页最常用到的是插入图像和设置背景图像。,1语法格式： ，单标记 Src：指明要添加的图像所在的具体路径和文件名。路径可以是相对路径，也可以是绝对路径。例：。 绝对路径：完整的描述文件位置的路径就是绝对路径。对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置。 相对路径：所谓相对路径,顾名思义就是当前文档与目标的相对位置。例.,2.3.1插入图像,2.3 图像编辑,2图像的属性 除了“src”以外，还有其他属性，可以定义图像的对齐方向，与周围元素的距离等，各属性及作用见表2.2。 表2.2 图像属性列表,2.3.1插入图像,2.3 图像编辑,语法格式为： ,2.3.2 使用背景图像,2.3 图像编辑,2.4 建立超链接,2.4.1 建立超链接 2.4.2 使用书签 2.4.3 标记新窗口和基准链接,建立超链接的标记是，语法格式为： 超链接标识 url：指明链接目标的具体路径和文件名。 超链接标识：是网页中链接的载体，可以是文字或图像等页面元素，用户点击它就会跳到超链接的目标位置。,2.4.1 建立超链接,2.4 建立超链接,定义书签 在HTML中，首先要定义书签，然后才在链接使用。定义书签的语法格式为： 书签名不能用中文，只能用英文和数字。 使用书签链接 其链接的格式为： 超链接标识 #与书签名之间不能有空格。,2.4.2使用书签,2.4 建立超链接,1标记新窗口（target） “target=”_blank”，是链接标记的一个参数。语法格式为： 超链接标识 当点击链接载体的，就会在新窗口打开链接目标。 2基准链接 标记是单标记，禁止使用结束标记，可以改变文件中所有链接标记的参数默认值。它只能位于文件的开头部分，即标记 与 之间。语法格式为： ,2.4.3 标记新窗口和基准链接,2.4 建立超链接,2.5 表格与框架,2.5.1 建立表格 2.5.2 表格属性 2.5.3 建立框架 2.5.4 框架属性,表格标记有、和四个，他们的具体含义是： :定义表格,是表格必须的元素 ：定义标题单元格，在这个单元格中的文字将用粗体表示。 ：定义表格中的行。 ：定义单元格，使用标记一定要放在标记内部。 上述标记中，可以省略，其他三个是必须的。具体应用见例2.12。 标记中可以添加属性和参数，其中 border，用于设置表格的边框宽度，值为大于等于“0”的整数，当值为“0”，在浏览器中显示无边框表格，无边框表格是网页布局最主要的手段。,2.5.1 建立表格,2.5 表格与框架,除了border外，常用的表格属性参数有： ：定义单元格之间的距离，值为大于等于“0”的整数，单位是像素，“0”表示没有间距。 ：定义单元格内的文字或其他元素到边框的距离,值为大于等于“0”的整数，单位是像素，“0”表示没有距离。 ：定义表格的高度，值有两种单位，一是像素，表示表格高度为固定大小，一是百分比表示表格占据整个网页的高度百分比。 ：定义表格的宽度，与高度一样有像素和百分比两种单位。 ：定义表格边框的颜色。 ：定义表格的背景色,2.5.2 表格属性,2.5 表格与框架,1