《网页设计与制作实例教程》第1章(梁祥)ppt课件(全).ppt
《《网页设计与制作实例教程》第1章(梁祥)ppt课件(全).ppt》由会员分享,可在线阅读,更多相关《《网页设计与制作实例教程》第1章(梁祥)ppt课件(全).ppt(40页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、清华大学出版社 网页设计与制作实例教程第1章高等学校计算机应用规划教材 2023/3/4主编 方其桂内容提要第1章 网页与网站基础随着网随着网络时代的到来,互代的到来,互联网成了海量信息的网成了海量信息的载体,网体,网络从最初的信息从最初的信息发布与布与资源共享,到源共享,到现在的网在的网络咨咨询、网、网络会会议、网、网络购物、网物、网络社区等,网社区等,网络越来越越来越显示出它的魅力示出它的魅力和生机。和生机。网网络逐逐渐成成为人人们生活的一部分,网上冲浪、生活的一部分,网上冲浪、浏览各种各种各各样的网的网页已已经成成为很多网民的每天很多网民的每天习惯。你是否考。你是否考虑过这些些缤纷多彩的
2、网多彩的网页是如何是如何设计出来的呢?网出来的呢?网页背后有哪些相背后有哪些相关的技关的技术呢?你是否能呢?你是否能够想制作出美想制作出美观大方的网大方的网页呢?呢?通通过本章的学本章的学习,你将掌握网,你将掌握网页与网站的基与网站的基础知知识,认识网网页与网站的相关概念,感受网与网站的相关概念,感受网页编写写语言,了解网站开言,了解网站开发的流程。的流程。教学目录网网页网站知网站知识网网页编写写语言言网站开网站开发流程流程010203第1章 网页与网站基础1.1 网页与网站知识教学内容1.1.1 1.1.1 认识网页与网站认识网页与网站 网网页是用来承是用来承载各种多媒体信息的文件,网站是由
3、网各种多媒体信息的文件,网站是由网页构成的,构成的,网站网站的的访问、特征与分、特征与分类是学是学习网网页设计与制作的基与制作的基础知知识。1.网页概念 网页(Web)就是网站上某一个页面,是向浏览者传递信息的载体。它以超文本和超媒体为技术,采用HTML、CSS、XML等语言来描述组成页面的各种元素,如文字、图像、动画、音乐、超链接等,并通过客户端浏览器进行解析,从而向浏览者展示网页的各种内容。第1章 网页与网站基础2.网站概念 网站(Website)是指互联网上根据一定的规则,使用HTML、CSS、XML等语言和其他工具制作的用于展示特定内容的相关网页集合,一般包括一个首页和若干个子页。网站
4、设计者先将整个网站结构规划好,然后再分别制作各个网页。大多数网站为浏览者提供一个首页,然后再将其他网页与首页链接起来。1.1 网页与网站知识教学内容3.网页特点 图形化的界面、兼容的系统平台、交互式的操作、分布工的存储、信息的时效性、Web的可设计性。第1章 网页与网站基础1.1 网页与网站知识教学内容4.网站分类 网站有很多不同的分类方法,例如按照其使用的技术可分为静态网站和动态网站。按照网站所属部门的性质可以分为企业网站、政府网站、教育网站和个人网站;按照网站的作用可以分为搜索引擎网站、社区论坛网站、在线翻译网站、软件下载网站和音乐欣赏网站等。第1章 网页与网站基础1.1 网页与网站知识教
5、学内容5.访问网站 (1)门户网站:是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。门户网站最初是提供搜索引擎和网络接入服务的,后来由于市场竞争日益激烈,门户网站不得不快速地拓展各种新的业务类型。(2)搜索引擎的基本功能是为用户查询信息提供方便,随着互联网上信息量的爆炸式增长,如何寻找有价值的信息显得日益重要,因此搜索引擎便应运而生。目前国内较为常用的搜索引擎是百度。(3)电子商务是一种在Web上进行商务活动的方式,这种商务通常是零售、银行交易、期货交易、咨询或培训等。电子商务网站是以完成电子商务活动为目的的网站。任何通过互联网进行产品或服务的出售和买入的行为均属电子商务范畴。第
6、1章 网页与网站基础1.1 网页与网站知识教学内容6.网站特征 网站是由大量的网页组成的,所以从某种角度上讲,建设网站就是制作网页。第1章 网页与网站基础1.1 网页与网站知识教学内容7.网站结构 网站的体系结构一般有三种,C/S结构、B/S结构和混合结构。第1章 网页与网站基础1.1 网页与网站知识教学内容1.1.2 1.1.2 网页基本组成元素网页基本组成元素1.文本 文本是指网页中叙述性的文字,是最理想的网页信息载体与交流工具,网页中主要信息一般都以文本为主,与图像网页元素相比,文字虽然不如图像那样容易被浏览者注意,但却能简明扼要地表达出主题。第1章 网页与网站基础2.图像 图像是指网页
7、中插入的具体说明性图片。图像拥有丰富的色彩和表现形式,能够表达更加丰富的内容和含义,并且具有文本无法达到的视觉效果。添加适量的图像可以使制作的网页图文并茂,具有更好活力和表现力。1.1 网页与网站知识教学内容3.动画 动画在网页中的作用是有效地吸引访问者更多的注意,用户在设计网页时可以通过在页面中加入动画使页面更加生动。在网页中使用的动画主要有两种方式,即GIF和FLASH动画。第1章 网页与网站基础4.音频 音频是多媒体网页重要的组成部分。在为网页添加声音效果时应充分考虑其格式、文件大小、品质和用途等因素。另外,不同的浏览器对声音文件的处理方法也有所不同,它们彼此之间在有可能并不兼容。用于网
8、络的音频文件的格式种类很多,常用的有MP3、MIDI、WAV等。5.视频 随着网络带宽的增加,越来越多的视频文件被应用到网页中,使得网页效果更加精彩且富有动感。常见的视频文件格式有MP4和FLV等。1.1 网页与网站知识教学内容6.超链接 超链接是网页中最常用的一种元素。它是指某个网页指向某个目标的链接关系,这个目标可以是另一个网页,也可以是本页面的不同位置,不可以是一张图片、一个电子邮箱地址,或者是一个文件夹,甚至可以是一个应用程序。使用超链接管理器可以清楚地看出各文件之间的链接关系,并且可以用来检查站点中网页链接是否正确。第1章 网页与网站基础7.表单 表单在网页中通常用来连接数据库并接受
9、访问,以采集用户在浏览器端发出的请求,它可以是文本文件、WEB页、电子邮件,也可是服务器端的应用程序。表单的是收集用户在浏览器上信息,接受请求,反馈意见,设置签名以及登录信息等。8.导航栏 导航栏是网页中的超链接,其链接的目标是网站中重要的页面,在网站中设置导航栏可以使访问者便捷地浏览站点中的其他网页。1.1 网页与网站知识教学内容1.1.3 1.1.3 静态网页和动态网页静态网页和动态网页1.静态网页 静态网页是指没有程序代码的网页。运行于客户端的程序、插件和组件等都属于静态网页,在网络中看到的静态网页文件通常是以htm或html为扩展名的,俗称HTML文件。第1章 网页与网站基础2.动态网
10、页 动态网页就是含有程序代码的网页。运行于服务器端的程序、网页和组件都属于动态网页,它们会随不同客户、不同时间及不同需要而返回不同的网页。在网络中看到的动态网页文件通常是以ASP、PHP和JSP等为扩展名的,这种文档类型的网页由于采用了动态页面技术,所以拥有更好的交互性、安全性和友好性。1.1 网页与网站知识教学内容3.动态网站原理 动态网页一般需要通过访问数据库(或文本类文件)来实现网页的生成,系统中可有一台单独的数据库服务器(存放数据库系统),也可以将WWW服务与数据库系统放置在同一个服务器上。第1章 网页与网站基础4.动态网站特点 (1)交互性:网页会根据用户的选择和要求产生各种用户所需
11、要的结果,进而完成各种数据交互功能。(2)自动更新:用户不需要手工制作HTML文件,即可根据数据库中的数据生成各种网页。(3)针对性:网页可以根据不同地区、不同的人、不同时间的浏览,产生不同的内容。1.1 网页与网站知识教学内容5.动态网站技术 以前的动态网站主要是使用CGI技术,CGI(Common Gateway Interface)即公用网关接口,可以使用Visual BasicDelphi或C/C+等语言开发CGI程序。虽然CGI的功能强大,但是其语法复杂,开发效率低下,程序维护更新难度较大,后来逐渐被其他网站编程技术所取代。现在比较流行的网页编程技术有ASP、PHP、JSP、ASP.
12、NET等。第1章 网页与网站基础1.2 网页编写语言与制作工具教学内容1.2.1 1.2.1 网页设计语言基础网页设计语言基础1.HTML语言简介 HTML语言,又称为超文本标记语言(Hypertext Markup Language)。与其他编程语言不同,它不是一种真正的计算机编程语言,而是一种在使用转义码文档中应用的格式化语法。HTML语言不像其他语言一样被编译为指令,而只是提供一些语法标签,再由浏览器解释生成相应的页面。第1章 网页与网站基础2.HTML文档的基本结构 HTML文档的构成是十分简单的,它主要包括文件头、表头和主体三个部分。文件头和为文件的开头和结尾。表头是指和,用来定义文
13、档的属性和文档的标题,主体部分和,由来表示网页文字、图像、表格等内容。3.常用页面标签 通过几种不同的水平线,它们在宽度、长度、颜色、位置等方面分别有所不同。水平线的颜色设定可以采用十六进制数也可以直接输入对应原英文。如红色的水平线,可以设定为color=red或者color=#ff0000。1.2 网页编写语言与制作工具教学内容1.2.2 1.2.2 网页编写语言介绍网页编写语言介绍1.HTML代码 在记事本中就可以编写HTML代码,就可以制作网页。用IE浏览器就可以查看(.html文件)效果第1章 网页与网站基础2.CSS概念 CSS就是Cascading Style Sheets,译为“
14、层叠样式表”,简称样式表,它是一种制作网页的新技术。“样式”就是指网页中文字大小、颜色、图片位置等格式,“层叠”的意思是,当在HTML中引用了数个样式文件(CSS文件)时,当样式文件中的样式发生冲突时,浏览器将依据层叠顺序处理。1.2 网页编写语言与制作工具教学内容3.CSS角色 CSS所扮演的角色:是目前唯一的网页页面排版样式标准,它能使任何浏览器都听从指令,知道该以何种布局、格式显示各种元素及其内容。在HTML语言中可以直接编写CSS代码。CSS能帮助用户对页面的布局加以更多的控制。CSS可以控制网页字体变化和大小。CSS弥补了HTML对网页格式化方面的不足,起到排版定位的作用。CSS可实
15、现页面格式的动态更新。第1章 网页与网站基础4.JavaScript概念 出现使得用户与信息之间不只是一种浏览与显示的关系,而是实现了一种实时、动态、交互的页面功能。这样静态的HTML页面也逐渐被客户端可做出响应的动态页面所取代。1.2 网页编写语言与制作工具教学内容1.2.3 1.2.3 网页制作工具网页制作工具1.Dreamweaver Adobe Dreamweaver,简称DW,中文名称梦想编织者,是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,DW是针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器
16、限制的充满动感的网页。第1章 网页与网站基础2.FrontPage FrontPage是微软公司出品的一款网页,作入门级软件,FrontPage使用方便简单,所见即所得是其特点,该软件结合了设计、程式码、预览三种模式。FrontPage 2002还允许我们设定数据库的交互功能,利用该功能,用户可以设置让指定的访问者通过浏览器来编辑数据库中的记录,或者在数据库中新增记录,查看已有的资料等。1.2 网页编写语言与制作工具教学内容3.SharePoint Designer SharePoint Designer 是微软继 FrontPage之后推出的新一代网站创建工具。Microsoft Share
17、Point Designer 提供了更加与时俱进的制作工具,用于创建交互式 Web 应用程序)和全站支持 AJAX 功能,让企业用户很方便地给网站添加丰富的多媒体和互动性体验。Microsoft SharePoint 还具有全新的备份和恢复功能,能够更加方便地选择需要备份的组件,节省操作时间也缩短了之前复杂繁琐的过程。还可以添加更多的管理员用户,新的管理员用户的添加能够让 IT 人员更好的控制网页上资源的分配,从而能够让服务器运行效率得到提高。第1章 网页与网站基础4.CutePage CutePage 2.0是一个集代码编辑,可视化编辑,站点管理和特效制作为一体的功能强大的网页编辑器。代码编
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作实例教程 网页 设计 制作 实例教程 梁祥 ppt 课件
限制150内