网页制作过程PPT.ppt
网页设计简易教程,江苏城市职业学院,第一篇、学前班,WWW基本概念网站开发前的前期工作班级网站展示,第一篇、学前班-网站开发的基本概念,一、WWW简介,World Wide Web，万维网，是一个建立在INTERNET上的全球性的信息系统。它将位于互联网上的相关数据信息有机的编织在一起，利用一种友好的接口，为人们提供交互的、动态的信息服务。,Web浏览器,Web服务程序,WWW的客户机/服务器（C/S）工作模式,http:/,Index.htm,客户机,服务器,1、web服务器,运行Web服务器程序，在互联网上提供WWW服务的计算机,常见Web服务器程序：WINDOWS-IIS，UNIX/LINUX-APACHE，小旋风,2、HTTP,超文本传输协议，是WWW的标准,3、HTML,超文本标记语言，是制作WWW网页的标准语言,在浏览器软件内，单击查看源文件可查看当前打开的网页的HTML代码,二、网站建设步骤,推荐网站买空间网,网站目录设计：整个网站的文件放在一个文件夹内，称为网站根目录（根文件夹）主页直接放在根内，一般的名称为index.html/index.asp/default.html等，其所用到的图片等素材等在根文件夹下建立一个子文件夹即可各栏目分别建立子文件夹，存放本栏目的网页和素材，素材可再单独建立文件夹所有的文件夹及文件名不要出现中文，应见名知义,三、建站技术,1、静态网页技术,浏览器发送URL给WEB服务器,服务器查找需要的网页文件不加处理直接返回,运行浏览器端的页面是事先已制作完成存放在服务器上的网页（用HTML书写的）,2、动态网页技术,服务端动态技术:实现动态功能的程序代码存放于服务器上,服务器根据客户端的要求运行程序并产生结果页面返回给客户端浏览器,主要技术有ASP（VBSCRIPT、JAVASCRIPT）、ASP.NET、PHP、JSP等,网页扩展名为：.asp/.aspx/.php/.jsp,网页扩展名为：.html/.htm,四、建站软件,ADOBE三剑客,WEB服务器软件,数据库管理系统,IIS,小旋风,Dreamweaver cs3,Flash cs3,Fireworks cs3/PHOTOSHOP,Access,SQL Server,网页设计师基本技能要求,Photoshop Dreamweaver Flash Div+CSS Javascript HTML 编程能力 作品（项目经验）,基本温饱,小康生活,五、IIS的安装及配置,安装：控制面板-添加删除程序-添加删除WINDOWS组件，勾选INTERNET信息服务（IIS），按提示安装，如果需要WINDOWS光盘，可上网下载IIS安装包或选择教师给的IIS安装包配置：控制面板-管理工具-INTERNET信息服务,右击默认网站-属性,网站根文件夹,小旋风的安装及配置,解压后直接双击其中的setup.exe按向导提示安装即可，安装过程中需要选择安装路径，同学们可更改该默认路径，使其不出现中文安装完在桌面有其图标，双击可运行，在任务栏右侧会出现一个闪烁的计算机图标，注意它和迅雷有冲突，运行时最好关闭迅雷要制作的网站根文件夹需放在它的安装路径下的WWWROOT文件夹内，方可调试,七、网页的简单制作方法,网站设计前期的工作流程,资源搜索,确定内容,确定界面,形成效果图,形成静态页面,网页的基本要素,图 1-6 俞晨视觉传奇网站default.html网页基本构成要素,网页标题,LOGO,网页文本,网页图像,网页页脚,网页导航,超级链接,1页面标题,网站中的每一个页面都有标题，用来提示该页面的主要内容，标题出现在浏览器的标题栏中，而不是出现在页面布局中。它还有一个比较重要的作用就是让浏览者清楚地知道所要浏览的内容，不至于迷失方向。设置页面标题很简单，一般的网页编辑软件都提供这项设置。,2网站标志,3页面尺寸,由于页面尺寸和显示器大小及分辨率有关，网页的显示无法突破显示器的显示范围，而且浏览器本身也会占去不少空间，因此留给页面的范围受到了限制。一般分辨率为800像素600像素的情况下，页面的显示尺寸为778像素430像素，分辨率为1024像素768像素的情况下，页面的显示尺寸为1000像素600像素。从以上数据可以看出，分辨率越高，页面尺寸越大。,4页眉和页脚、导航栏、图片、文本,页眉的风格一般要求和页面的整体风格保持一致。一个富有个性特色的页眉将和网站标志一样起到标示的作用。在页眉中常放置含有站点名字的图片、标志、网站宗旨、宣传口号和广告语等,LOGO,页眉,导航栏,5多媒体,在网页中可以使用的媒体对象主要包括flash动画、flash按钮、flash文本、java小程序、音频和视频等。,网页中的Flash动画 网页中的视频,网页效果图的设计制作,网页效果图的设计与传统的平面设计是相同的，但也带有一些特殊的性质。通常网页的图像设计会使用到图像设计软件和一些其他的软件，Fireworks正是一种主要应用于网页图形设计的软件。应用较为广泛的还有Adode公司出品的Photoshop。FIREWORKS利用自身在图像处理上的优势，实现多方面网络应用。利用图像软件可视化操作程度比较高的优势，进行网页视觉设计、排版布局，并可利用其切片功能直接将图像创建为页面的HTML文件。,第一步：采用抓图法或模板法进行优秀网页界面的搜索、分类与积累,积累与分类例如：公司logo、banner广告条、导航条、小图标、动画等,经典网站推荐模板王：http:/模板秀：http:/模板天下：http:/,第二步：网页界面的分析,1、从平面构成入手2、从色彩入手,思考网页需要哪些组成元素？,思考网页的色彩构成?注意一条原则KISS（Keep It Simple and eaSy),原则上保持一个网页在三色以内，可利用同色系形成对比效果。,第三步：网页界面的创新处理,创新方法：从平面构成与色彩入手创新 注意:1.改变构成设计.改变色彩，全局统一,局部对比,淮安旅行社登录页及其构思,作品与其原型,评估网主页,旅游网站,第四步：将网页效果图导出成网页，进行后期修饰,先用IE浏览看效果如何？再进行后期修饰网页的后期修饰与创新方法主要有:,1 位置,2 背景色,3 细节修饰 加边、平滑,4 满屏处理,
