第1章网页设计课件

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,主讲：蒋少,主讲：蒋少,1,第1章 网页设计概述,本章学习导读,本章主要讲解网页设计制作的基本方式、构成网页的基,本元素、编辑网页的常用工具、动态网页的支持技术和网页,编码的基本知识。通过本章学习，读者应该掌握以下内容：,网页设计的基本方式,网页包括的常见元素,网页元素的创作与编辑工具,HTML,语言基础知识,动态网页的支持技术,第1章 网页设计概述本章学习导读,2,第1章 网页设计概述,1.1,网页设计的基本方式,网页设计制作的基本方式包括：手工直接编码、利用可视化工具、,手工编码和可视化工具结合3种。,1.1.1 手工编码方式,网页是由,HTML（Hyper Text Markup Language）,超文本标记语,言编码的文档，设计制作网页的过程就是生成,HTML,代码的过程。手工,编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂。,但学习一定的编码知识是网页制作的基础，而且手工编码可以灵活地制,作出丰富的网页效果。,1.1.2 可视化工具方式,随着网页制作技术的不断发展，出现了诸如,FrontPage、Dreamweaver,等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网,页元素，“所见即所得”，再由编辑工具自动生成对应的网页代码，大大,提高的网页开发的效率。,第1章 网页设计概述1.1 网页设计的基本方式,3,第1章 网页设计概述,1.1,网页设计的基本方式,网页设计制作的基本方式包括：手工直接编码、利用可视化工具、,手工编码和可视化工具结合3种。,1.1.1 手工编码方式,网页是由,HTML（Hyper Text Markup Language）,超文本标记语,言编码的文档，设计制作网页的过程就是生成,HTML,代码的过程。手工,编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂。,但学习一定的编码知识是网页制作的基础，而且手工编码可以灵活地制,作出丰富的网页效果。,1.1.2 可视化工具方式,随着网页制作技术的不断发展，出现了诸如,FrontPage、Dreamweaver,等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网,页元素，“所见即所得”，再由编辑工具自动生成对应的网页代码，大大,提高的网页开发的效率。,第1章 网页设计概述1.1 网页设计的基本方式,4,第1章 网页设计概述,1.1,网页设计的基本方式,网页设计制作的基本方式包括：手工直接编码、利用可视化工具、,手工编码和可视化工具结合3种。,1.1.1 手工编码方式,网页是由,HTML（Hyper Text Markup Language）,超文本标记语,言编码的文档，设计制作网页的过程就是生成,HTML,代码的过程。手工,编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂。,但学习一定的编码知识是网页制作的基础，而且手工编码可以灵活地制,作出丰富的网页效果。,1.1.2 可视化工具方式,随着网页制作技术的不断发展，出现了诸如,FrontPage、Dreamweaver,等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网,页元素，“所见即所得”，再由编辑工具自动生成对应的网页代码，大大,提高的网页开发的效率。,第1章 网页设计概述1.1 网页设计的基本方式,5,第1章 网页设计概述,1.2 网页中的常见元素,文本,图像和动画,声音和视频,超级链接,表格,表单,导航栏,其他常见元素,第1章 网页设计概述1.2 网页中的常见元素,6,第1章 网页设计概述,1.3 网页元素的创作与编辑工具,1.3.1 网页图像制作工具,Fireworks,Photo Impact,PhotoShop,1.3.2,动画制作工具,Flash,Director,1.3.3,网页编辑工具,FrontPage 2000,Dreamweaver,HotDog,第1章 网页设计概述1.3 网页元素的创作与编辑工具,7,1.4,HTML,基础知识,1.4.1,HTML,基本概念,1,HTML,概念,HTML,是一种描述语言，对,Web,页面中显示内容的属性以标签的形,式进行描述。客户机上的浏览器（,Browser）,对这些描述进行解释将相,应页面内容正确显示在显示器上。一个,Web,页面就是一个,HTML,文档。,2,HTML,文档的构成,HTML,文档由三大元素构成：,HTML,元素、,HEAD,元素和,BODY,元素。,每个元素又包含各自相应的标记（属性）。,HTML,元素是最外层的元素，,里面包含,HEAD,元素和,BODY,元素。,HEAD,元素中包含对文档基本信息文,档标题、文档搜索关键字、文档生成器等）描述的标记。,BODY,元素是文,档的主体部分，包含有对网页元素（文本、表格、图片、动画、链接等）,描述的标记。,HTML,中标记一般成对，如：,和、,和,等，但也有一些不成对。,1.4 HTML基础知识,8,第1章 网页设计概述,3,HTML,文档的编辑,HTML,文档是普通文本（,ASCII）,文件，它可以用任意编缉器（如,Windows,中的记事本、写字板，,Macintosh,中的,BBEdit,等）生成。你也,可以使用字处理软件，不过要注意保存时文件类型要选择“带换行符的纯,文本”，并且类型扩展名为“.,htm”,或“.,html”。,早期网页制作的过程就是直,接书写,HTML,代码来定义页面元素的过程。,第1章 网页设计概述3HTML文档的编辑,9,1.4.2,HTML,的基本语法结构,HTML,的语法是通过标记来体现的，不同标记的符号及其属性构成了,该语言的语法特征。下面我们以,HTML 4.0,版为例，通过三大元素中的标,记来描述,HTML,的语法结构。,1,HTML,元素,HTML,标记是对整个文档属性的描述，即告诉浏览器,HTML,文档的开始与结,束，是网页中最外层的标记。由,和,标记对标出。,HTML,元素只,有,HTML,一个标记。,2,HEAD,元素,（1）,HEAD,标记。该标记用来表示,HEAD,元素的开始和结束，其格式为：,。,（2）BASE,标记（不成对标记）。,BASE,标记用来确定当前初始的,URL，,当,前文件中的链接都以所定义的初始地址为基础。它有一个,HREF,属性，其值为所,定义的基准,URL,地址，格式为：,1.4.2 HTML的基本语法结构,10,第1章 网页设计概述,3,BODY,元素（可见对象的描述）,（1）,BODY,标记。该标记是,BODY,元素开始和结束的标志，格式为：,元素标记,（2）DIV,层标记。层是各种元素的集合，是一个活动板，便于元素定位。,（3）文本标记。该标记用来标识文本属性，其属性参数比较复杂，具体格式如下：,/,定义文本的字体，?=宋体、楷体、隶书等,/,定义文本的字号，?=17的值,/,定义文本的颜色，?=#,ffcc00,等十六进制值,/,粗体显示,/,斜体显示,/,下划线显示,/,下标显示,/,上标显示,第1章 网页设计概述3BODY元素（可见对象的描述）,11,第1章 网页设计概述,（4）段落标记。该标记用来标识段落和列表。,/,创建一个新的段落，两段落之间有行间空隙。,/,定义段落对齐方式，?=,right、left、center。,/,段内插入回车换行符，行间没有空隙,/,创建无序列表,/,创建有序列表,（5）表格标记。该标记用来定义网页上的表格，格式如下：,/,定义表格的起始、结束位置,/,定义表格的边框宽度，?=像素值,/,定义表格的宽度，?=像素值或百分比,/,定义表格的对齐方式，?=,right、left、center,/,定义表格单元格之间的距离，?=像素值,/,定义表格行的起始和结束位置,/,定义单元格水平对齐方式，?=,right、left、center,/,定义表格列的起始和结束位置,/,定义单元格跨占的列数?=1、2,第1章 网页设计概述（4）段落标记。该标记用来标识段落和列,12,第1章 网页设计概述,（6）图像标记（？号的含义参照“表格标记“的说明，不再重复）。该标记用来定义显示图像的地址、大小等属性，格式如下：,/,添加图片的,URL,地址和文件名,/,图像的对齐方式,/,设置围绕图像边框的大小,/,设置图像下载时的说明文字,/,加入一条水平线,/,设置水平线的高度,/,设置水平线的长度,/,去掉水平线的阴影,（7）下拉表单标记。该标记用来在网页上建立一个下拉表单，格式如下：,/,创建下拉表单,?=1 /,下拉显示，否则滚动显示,/,设置表单项目和选中时的参数值,第1章 网页设计概述（6）图像标记（？号的含义参照“表格标,13,第1章 网页设计概述,（8）链接（,Linking）,标记。该标记用来定义网页中超链接的热点和目标，格式,如下：,热点文字（图像等）/URL.name,为被链接的文,件名,（9）多媒体标记。,第1章 网页设计概述,14,第1章 网页设计概述,1.5 动态网页的支持技术,动态网页此处是指浏览器和服务器数据库可以进行实时数据交流的动态交互,网页，而不是指加上动画等效果的动感网页。随着,Web,技术的发展，动态网页已,成为网页制作的流行趋势。制作动态网页仅用上面的工具是不够的，还要结合下,面几种常见的支持技术，来开发服务器端的脚本应用程序。,1.5.1,CGI,技术,CGI（Common Gateway Interface）,是用于连接主页和应用程序的接口。,CGI,是在服务器端运行的一个可执行程序，由网页的一个热链接激活进行调用，,并对该程序的返回结果进行处理，显示在网页上。简而言之，,CGI,就是为了扩展,网页的功能而设立的。,第1章 网页设计概述,15,第1章 网页设计概述,1.5.2,ASP,技术,ASP（Microsoft Active Server Pages）,是一套微软开发的服务器端脚本环境，,ASP,内含于,IIS 3.0、4.0,和5.0之中，通过,ASP,我们可以结合,HTML,网页、,ASP,指令和,ActiveX,元,件建立动态、交互且高效的,Web,服务器应用程序。,1.5.3,PHP,技术,PHP（Hypertext Preprocesso，,超文本预处理器）是一种易于学习和使用的服务器端,脚本语,PHP,除了能够操作页面，还能发送,HTTP,的标题；它不需要特殊的开发环境和,IDE；,它不仅支持多种数据库，还支持多种通信协议；另外，,PHP,还具有极强的兼容性。,PHP,是,完全免费的，可以从,PHP,官方站点（,http:/）,自由下载。,1.5.4,JSP,技术,JSP(Java Server Pages),是由,Sun Microsystems,公司倡导、许多公司参与一起建立,的一种动态网页技术标准。,JSP,技术是用,JAVA,语言作为脚本语言的，,JSP,网页为整个服务,器端的,JAVA,库单元提供了一个接口来服务于,HTTP,的应用程序。,第1章 网页设计概述1.5.2 ASP技术,16,主讲：蒋少,主讲：蒋少,17,第1章 网页设计概述,本章学习导读,本章主要讲解网页设计制作的基本方式、构成网页的基,本元素、编辑网页的常用工具、动态网页的支持技术和网页,编码的基本知识。通过本章学习，读者应该掌握以下内容：,网页设计的基本方式,网页包括的常见元素,网页元素的创作与编辑工具,HTML,语言基础知识,动态网页的支持技术,第1章 网页设计概述本章学习导读,18,第1章 网页设计概述,1.1,网页设计的基本方式,网页设计制作的基本方式包括：手工直接编码、利用可视化工具、,手工编码和可视化工具结合3种。,1.1.1 手工编码方式,网页是由,HTML（Hyper Text Markup La