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