最新网页制作案例教程-PPT演示文稿

《最新网页制作案例教程-PPT演示文稿》由会员分享，可在线阅读，更多相关《最新网页制作案例教程-PPT演示文稿（398页珍藏版）》请在金锄头文库上搜索。

1、,网页制作案例教程,网页制作案例教程,第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网站与网页基础知识

2、,网站规划与网页制作是一项综合性非常强的工作，需要设计者具备一定的Internet基础知识，理解Web的工作原理，对网页的类型风格和网页制作软件有所认识，才能更好地开展开发设计工作。,1.1.1 Internet与Web,Internet中文译名因特网，又叫做国际互联网。 它是由使用公用语言互相通信的计算机连接而成的全球网络。 Internet是世界上覆盖面最广、规模最大、信息资源最丰富的计算机网络。 Internet提供了许多受大众欢迎的服务，包括： WWW（万维网 ） E-Mail（电子邮件） FTP（文件传输） Telnet（远程登录） Usenet News（电子公告牌服务） ,1.1

3、.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的工作原理,当

4、用户通过浏览器向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上向全世界发布信息的站点。它是根据一定的规则，使用HTM

5、L等工具制作的、建立在网络服务器上的一组相关网页的集合。 网页(Web Page)，是网站提供信息服务的主要形式。用于展示网站中特定的内容，用网页浏览器阅读。 网页通用标准是HTML，即超文本标记语言 （HyperText Markup Language）,1.1.3 网站、网页与主页,在Internet中，每个网页都具有唯一的地址，即“网址”。 网址由URL（Uniform Resource Locator，统一资源定位器）指定其在Internet上的位置。 主页（homepage），是网站中最重要的页面，是整个网站的导航中心，它提供全面的网站信息链接，能够使访问者快速地了解网站的概貌。,1

6、.1.4 静态网页与动态网页,根据网页制作的技术及网页功能，网页通常分为 静态网页和动态网页 。 静态网页是指纯粹HTML格式的网页 ，其URL以“.htm”、“.html”、“.shtml”、“.xml”等为后缀 。 如: ,1.1.4 静态网页与动态网页,动态网页中除了普通网页中的元素外，还包括一些应用程序，这些应用程序使浏览器与Web服务器之间发生交互行为，而且应用程序的执行需要应用程序服务器才能够完成。 动态网页URL的后缀是以asp、.jsp、.php、.perl、 .cgi等，且在动态网页网址中有一个标志性的符号“？” 如: ,1.2 网站建立及管理,建立自己的Web站点，必须先注

7、册域名和申请站点空间。 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上

8、传文件,1.2.4 网站维护管理方法,1. 网站文件结构的设置 网站文件组织结构上，通常采用以下2种方案：方案一：按文件类型分类,图1-5 按文件类型分类的网站结构,1.2.4 网站维护管理方法,方案二：按部门、业务或项目分类,图1-6按部门、业务或项目分类的网站结构,1.2.4 网站维护管理方法,2网站文件管理原则 在进行网站开发之前建立合适的网站文件结构 。 网站的首页文件通常是“index.html”，它必须存放在网站的根目录中 。 网站使用的所有文件都必须存放在站点的文件夹或者子文件夹中。 相同路径下的文件或文件夹不能同名。 网站文件的删除、重命名或者移动等操作应通过站点管理器来完成,

9、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网站色彩设计 网站标准色彩要用于网站的标志，标题，主菜单和主色块，

10、给人以整体统一的感觉。 要注意色彩的合理搭配。一般来说，一个网站的标准色彩不超过3种,1.3.4 网站导航与布局设计,1网站导航设计 2版面布局设计,1.4 网页制作的主要工具软件,1.4.1 网页设计软件Dreamweaver Dreamweaver是一款“所见即所得”的网页编辑工具，其用户界面非常友好易用，为网页设计者带来了很大的便利。 Dreamweaver不仅提供了强大的网页编辑功能，而且提供了善的站点管理机制，是一个集网页创作和站点管理两大利器于一身的创作工具。,1.4 网页制作的主要工具软件,1.4.2 动画设计软件Flash Flash是一款优秀的网页动画制作软件，主要应用于网页

11、设计和多媒体创作等领域。Flash可以很方便地将音乐、声效、图画以及动画随心所欲地结合起来。 Flash生成的SWF作品文件“体积”小得出奇，并且可以以插件的形式直接插入到网页中，是目前网络中最常用的动画格式。,1.4 网页制作的主要工具软件,1.4.3 网页图形处理软件Fireworks Fireworks是一款真正的网页图形图像处理软件，它与Dreamweaver结合很紧密 。 Fireworks可用于设计动态按钮等网页元素，甚至可直接设计精美的网站首页。,1.4 网页制作的主要工具软件,1.4.3 图像处理软件Photoshop Photoshop是一款专业的图像处理软件，功能强大，为美

12、工设计人员提供了广阔的创意空间， Photoshop广泛应用于网页图像编辑、桌面出版、广告设计、婚纱摄影等各行各业，成为许多涉及图像处理的行业的事实标准。,小结,本章介绍网站与网页的相关概念和基础知识，重点讲解网站建立的方法和管理技术，分析网站设计要则及建站前的准备工作。设计者需要具备一定的网络基础知识、掌握各种多媒体处理技术，才能从容地应对开发过程中遇到的各种问题。,作业与实验,作业： 1人们可以使用连接到Internet的计算机查看Internet上的网页，请你按自己的理解描述在浏览网页的过程中，信息传递的方式和过程。 2例说明网站的主题分类和选择主题的原则。 3申请网站空间有哪几种方式？

13、简述建立一个网站的过程。,作业与实验,实验题： 1. 打开搜狐网主页()，了解搜狐网的主要版块和栏目，说说该网站属于哪种网站类型、具有什么特点。,本章结束,学习目标：,第2章 HTML入门,认识HTML语言的作用，了解HTML代码的编写特点 掌握查看网页代码、修改网页代码的方法 掌握HTML常用标记及其属性的用法 掌握运用HTML编写网页表格、列表、框架和实现超级链接的方法 掌握HTML实现图片、音频、视频/动画等媒体文件在网页中的插入方法,2.1 HTML基本概念,HTML语言是网页制作的基础语言，因为无论使用什么工具制作网页，生成的网页代码都是以HTML语言为基础的。 HTML是Hyper

14、 Text Markup Language的缩写，意为超文本标记语言。,2.1.1 HTML简介,HTML与操作系统平台的选择无关，只要有浏览器就可以运行HTML文档，显示网页内容。 HTML使用了一些约定的标记，对网页上的各种信息进行标记，浏览器会自动根据这些标记，在屏幕上显示出相应的内容，而标记符号不会在屏幕上显示出来。 使用HTML编写代码制作网页文件，是学习制作网页的基础。,2.1.2 标记及其属性,HTML标记用来定义网页文件中信息的格式和功能。 浏览器通过解释HTML文件内的各种标记并执行相应的功能以实现网页效果的显示。 HTML标记用两个尖括号“”括起来，前一个标记是起始标记，后

15、一个标记为结束标记，结束标记以符号“/”开头 。 一般是双标记。如粗体字标记和 。,2.1.2 标记及其属性,某些标记为单标记，只需单独使用就能完整地表达意思。如换行标记。 一些标记有自己的属性，属性细分了标记的功能，属性通常可以赋予具体的属性值 。 如： ,是正文标记,属性值，这里是颜色值(粉红色),bgcolor就是标记的属性，用于设置背景色,2.1.2 标记及其属性,如果一个标记有多个属性，属性和属性之间用空格隔开 。 标记在使用时，应注意以下几点： HTML标记不区分大小写 使用“”标记将HTML文档中注解内容括起来 各标记可以嵌套，但不能交错。 如 是错误的 对于HTML文档中错误的

16、标记及其属性，浏览器通常会跳过它，不处理也不显示。,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基本结构标记,另外，基本结构标记还有网页标题标记。 ： 该标记位于标记中，标记内的文字显示在浏览器的标题栏上。 有很多属性，可以定义页面的背景图像、背景色彩、文字色彩、超文本链接的色彩等。这些属