资源预览内容
第1页 / 共398页
第2页 / 共398页
第3页 / 共398页
第4页 / 共398页
第5页 / 共398页
第6页 / 共398页
第7页 / 共398页
第8页 / 共398页
第9页 / 共398页
第10页 / 共398页
亲,该文档总共398页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
,网页制作案例教程,网页制作案例教程,第1章:网站与网页概述 第2章:HTML入门 第3章:网页基本编辑 第4章:表格 第5章:框架 第6章:AP Div 第7章:表单,第8章:CSS和模板 第9章:网页图形处理工具Fireworks CS5 第10章:图像处理工具Photoshop CS5 第11章:动画制作工具Flash CS5 第12章:网站制作综合应用,学习目标:,第1章 网站与网页概述,了解Internet、Web、网站、网页的基本概念 了解网站、网页与主页之间的相互关系 掌握网站建立及管理方法 了解网站的开发设计应遵循的基本原则 了解网页设计的常用工具软件,1.1网站与网页基础知识,网站规划与网页制作是一项综合性非常强的工作,需要设计者具备一定的Internet基础知识,理解Web的工作原理,对网页的类型风格和网页制作软件有所认识,才能更好地开展开发设计工作。,1.1.1 Internet与Web,Internet中文译名因特网,又叫做国际互联网。 它是由使用公用语言互相通信的计算机连接而成的全球网络。 Internet是世界上覆盖面最广、规模最大、信息资源最丰富的计算机网络。 Internet提供了许多受大众欢迎的服务,包括: WWW(万维网 ) E-Mail(电子邮件) FTP(文件传输) Telnet(远程登录) Usenet News(电子公告牌服务) ,1.1.1 Internet与Web,Web就是一种超文本信息系统。 Web的一个主要的概念就是超文本链接,它使得文本不再像一本书一样是固定的线性的,而是可以从一个位置跳到另外的位置,从而可获取更多的相关信息。,1.1.1 Internet与Web,许多新闻网站,如搜狐、新浪等有大量的超文本链接,1.1.2 Web的工作原理,Web服务器,就是那些对信息进行组织、存储并将其发布到Internet中去,从而使得Internet中的其他计算机可以访问这些信息的计算机。 在Web中使用的通信协议是HTTP协议,通过HTTP协议实现客户端(浏览器)的Web服务器的信息交换。,1.1.2 Web的工作原理,当用户通过浏览器向Web服务器提出HTTP请求时,Web服务器根据请求调出相应的网页文件,类型有HTML、XML、ASP或JSP 。 对于静态网页HTML或XML,服务器直接返回给客户。 对于动态网页ASP或JSP , Web服务器则与数据库服务器建立连接 ,运行脚本程序,最后生成新的、包含动态数据的HTML或XML文档 返回客户端浏览器 。,1.1.2 Web的工作原理,图1-1 Web的工作原理,XML为可扩展标记语言,它与HTML一样都是标准通用标记语言。,1.1.3 网站、网页与主页,网站(Website),就是指在Internet上向全世界发布信息的站点。它是根据一定的规则,使用HTML等工具制作的、建立在网络服务器上的一组相关网页的集合。 网页(Web Page),是网站提供信息服务的主要形式。用于展示网站中特定的内容,用网页浏览器阅读。 网页通用标准是HTML,即超文本标记语言 (HyperText Markup Language),1.1.3 网站、网页与主页,在Internet中,每个网页都具有唯一的地址,即“网址”。 网址由URL(Uniform Resource Locator,统一资源定位器)指定其在Internet上的位置。 主页(homepage),是网站中最重要的页面,是整个网站的导航中心,它提供全面的网站信息链接,能够使访问者快速地了解网站的概貌。,1.1.4 静态网页与动态网页,根据网页制作的技术及网页功能,网页通常分为 静态网页和动态网页 。 静态网页是指纯粹HTML格式的网页 ,其URL以“.htm”、“.html”、“.shtml”、“.xml”等为后缀 。 如: ,1.1.4 静态网页与动态网页,动态网页中除了普通网页中的元素外,还包括一些应用程序,这些应用程序使浏览器与Web服务器之间发生交互行为,而且应用程序的执行需要应用程序服务器才能够完成。 动态网页URL的后缀是以asp、.jsp、.php、.perl、 .cgi等,且在动态网页网址中有一个标志性的符号“?” 如: ,1.2 网站建立及管理,建立自己的Web站点,必须先注册域名和申请站点空间。 1.2.1 注册域名 1域名应简明易记,便于输入 2域名要有一定的内涵和意义,CNNIC中国互联网络信息中心 网址: 是我国域名注册管理机构和域名服务器运行机构。,1.2.1 注册域名,图1-2 CNNIC网站,1.2.2 申请网站空间,申请/建立网站空间 方式: 1使用免费网站空间 2租用虚拟主机 3租用专用服务器 4使用自己的服务器,1.2.2 申请网站空间,“中国万网”(网址:),你好万维网”(网址:) 等可实现虚拟主机租用。,1.2.3 上传网站内容,网站上传的实现方法有: 1使用IE浏览器上传文件 2使用专业的FTP工具上传文件 3使用Dreamweaver上传文件,1.2.4 网站维护管理方法,1. 网站文件结构的设置 网站文件组织结构上,通常采用以下2种方案:方案一:按文件类型分类,图1-5 按文件类型分类的网站结构,1.2.4 网站维护管理方法,方案二:按部门、业务或项目分类,图1-6按部门、业务或项目分类的网站结构,1.2.4 网站维护管理方法,2网站文件管理原则 在进行网站开发之前建立合适的网站文件结构 。 网站的首页文件通常是“index.html”,它必须存放在网站的根目录中 。 网站使用的所有文件都必须存放在站点的文件夹或者子文件夹中。 相同路径下的文件或文件夹不能同名。 网站文件的删除、重命名或者移动等操作应通过站点管理器来完成,1.3 网站的开发设计,1.3.1 网站类型的确定 1门户网站 2商务网站 3个人网站 4办公网站,1.3.2 网站整体风格的定位,网站的风格主要指网站的色彩、版式等方面给浏览者的整体视觉感受。不同类型不同主题的网站,应有自己的独特的风格。,1.3.3 网站标识与色彩设计,1网站标识 网站标识也称为网站Logo。其作用是加深访问者对网站的印象,提高网站的知名度,并最终形成网站文化的标志。,图1-7 搜狐网Logo 图1-8新浪网logo 图1-9 太平洋网Logo,图1-10 百度系列Logo,1.3.3 网站标识与色彩设计,2网站色彩设计 网站标准色彩要用于网站的标志,标题,主菜单和主色块,给人以整体统一的感觉。 要注意色彩的合理搭配。一般来说,一个网站的标准色彩不超过3种,1.3.4 网站导航与布局设计,1网站导航设计 2版面布局设计,1.4 网页制作的主要工具软件,1.4.1 网页设计软件Dreamweaver Dreamweaver是一款“所见即所得”的网页编辑工具,其用户界面非常友好易用,为网页设计者带来了很大的便利。 Dreamweaver不仅提供了强大的网页编辑功能,而且提供了善的站点管理机制,是一个集网页创作和站点管理两大利器于一身的创作工具。,1.4 网页制作的主要工具软件,1.4.2 动画设计软件Flash Flash是一款优秀的网页动画制作软件,主要应用于网页设计和多媒体创作等领域。Flash可以很方便地将音乐、声效、图画以及动画随心所欲地结合起来。 Flash生成的SWF作品文件“体积”小得出奇,并且可以以插件的形式直接插入到网页中,是目前网络中最常用的动画格式。,1.4 网页制作的主要工具软件,1.4.3 网页图形处理软件Fireworks Fireworks是一款真正的网页图形图像处理软件,它与Dreamweaver结合很紧密 。 Fireworks可用于设计动态按钮等网页元素,甚至可直接设计精美的网站首页。,1.4 网页制作的主要工具软件,1.4.3 图像处理软件Photoshop Photoshop是一款专业的图像处理软件,功能强大,为美工设计人员提供了广阔的创意空间, Photoshop广泛应用于网页图像编辑、桌面出版、广告设计、婚纱摄影等各行各业,成为许多涉及图像处理的行业的事实标准。,小结,本章介绍网站与网页的相关概念和基础知识,重点讲解网站建立的方法和管理技术,分析网站设计要则及建站前的准备工作。设计者需要具备一定的网络基础知识、掌握各种多媒体处理技术,才能从容地应对开发过程中遇到的各种问题。,作业与实验,作业: 1人们可以使用连接到Internet的计算机查看Internet上的网页,请你按自己的理解描述在浏览网页的过程中,信息传递的方式和过程。 2例说明网站的主题分类和选择主题的原则。 3申请网站空间有哪几种方式?简述建立一个网站的过程。,作业与实验,实验题: 1. 打开搜狐网主页(),了解搜狐网的主要版块和栏目,说说该网站属于哪种网站类型、具有什么特点。,本章结束,学习目标:,第2章 HTML入门,认识HTML语言的作用,了解HTML代码的编写特点 掌握查看网页代码、修改网页代码的方法 掌握HTML常用标记及其属性的用法 掌握运用HTML编写网页表格、列表、框架和实现超级链接的方法 掌握HTML实现图片、音频、视频/动画等媒体文件在网页中的插入方法,2.1 HTML基本概念,HTML语言是网页制作的基础语言,因为无论使用什么工具制作网页,生成的网页代码都是以HTML语言为基础的。 HTML是Hyper Text Markup Language的缩写,意为超文本标记语言。,2.1.1 HTML简介,HTML与操作系统平台的选择无关,只要有浏览器就可以运行HTML文档,显示网页内容。 HTML使用了一些约定的标记,对网页上的各种信息进行标记,浏览器会自动根据这些标记,在屏幕上显示出相应的内容,而标记符号不会在屏幕上显示出来。 使用HTML编写代码制作网页文件,是学习制作网页的基础。,2.1.2 标记及其属性,HTML标记用来定义网页文件中信息的格式和功能。 浏览器通过解释HTML文件内的各种标记并执行相应的功能以实现网页效果的显示。 HTML标记用两个尖括号“”括起来,前一个标记是起始标记,后一个标记为结束标记,结束标记以符号“/”开头 。 一般是双标记。如粗体字标记和 。,2.1.2 标记及其属性,某些标记为单标记,只需单独使用就能完整地表达意思。如换行标记。 一些标记有自己的属性,属性细分了标记的功能,属性通常可以赋予具体的属性值 。 如: ,是正文标记,属性值,这里是颜色值(粉红色),bgcolor就是标记的属性,用于设置背景色,2.1.2 标记及其属性,如果一个标记有多个属性,属性和属性之间用空格隔开 。 标记在使用时,应注意以下几点: HTML标记不区分大小写 使用“”标记将HTML文档中注解内容括起来 各标记可以嵌套,但不能交错。 如 是错误的 对于HTML文档中错误的标记及其属性,浏览器通常会跳过它,不处理也不显示。,2.1.3 浏览和修改网页,1浏览网页 双击某网页文件的图标,就可以调出网页浏览器窗口并同时显示该网页内容。 2修改网页HTML 在浏览器窗口中: “查看”|“源文件” “文件”|“保存” 刷新按钮“ ”,更新页面,2.2 创建第一个HTML文件,HTML可以使用任何文本编辑器,如Windows“记事本”或“写字板等”进行编辑,代码输入后,一定要把文件的扩展名保存为“.htm”或“.html”。,图2-2 编辑HTML文档,图2-3 IE显示HTML网页内容,2.3 HTML编码基础,2.3.1 HTML文档的基本架构 HTML文档的基本结构如下: 文件开始标记 文件头信息 文件体信息 文件结束标记,2.3.2 HTML基本结构标记,另外,基本结构标记还有网页标题标记。 : 该标记位于标记中,标记内的文字显示在浏览器的标题栏上。 有很多属性,可以定义页面的背景图像、背景色彩、文字色彩、超文本链接的色彩等。这些属
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号