网页制作过程ppt_PPT模板_实用文档

网页设计简易教程江苏城市职业学院第一篇、 第一篇、学前班?WWW基本概念 WWW基本概念 WWW ?网站开发前的后期工作 网站开发前的后期工作 ?班级网站展示 班级网站展示第一篇、学前班 第一篇、--网站开发的基本概念 --网站开发的基本概念 一、WWW简介 WWW简介eb， World Wide Web，万维网，是一个建立在 INTERNET上的全球性的 INTERNET上的全球性的信息系统。它将位 于互联网上的相关数据信息有机的编织在一 利用一种友好的接口， 起，利用一种友好的接口，为他们提供交互 动态的信息服务。 的、动态的信息服务。Web浏览器 浏览器 Index.htmWeb服务程序 服务程序客户机服务器WWW的客户机 服务器（C/S） WWW的客户机/服务器（C/S）工作方式 的客户机/1、web服务器 web服务器 运行Web服务器程序，在互联网上提供WWW服 运行Web服务器程序，在互联网上提供WWW服 Web服务器程序 WWW 务的计算机 常见Web服务器程序：WINDOWS--IIS， 常见Web服务器程序：WINDOWS--IIS， Web服务器程序 --IIS UNIX/LINUX--APACHE， --APACHE UNIX/LINUX--APACHE，小旋风 2、HTTP 超文本传输协议， WWW的标准 超文本传输协议，是WWW的标准 3、HTML在浏览器软件 单击[ 内，单击[查 源文件] 看]—[源文件] 可查看当前打 开的网页的 HTML代码 HTML代码超文本标记语言，是制作WWW网站的标准语言 超文本标记语言，是制作WWW网站的标准语言 WWW推荐网站买空间网二、网站建设流程建立网站系统 网站总体策划 网站设计上传 网站推广维护主要是指帮自己的网站建立研发 和运行的系统，包括申请空间和 和运行的系统，包括申请空间和 域名、创建WEB服务器、安装建 域名、创建WEB服务器、 WEB服务器 站硬件等 站工具等 确定主题、内容策划、设计样式、 确定主题、内容策划、设计样式、 目录设计等?网站目录设计：整个网页的文件放在一个文件夹内，称为网站根目 网站目录设计：整个网页的文件放在一个文件夹内， 网站目录设计 根文件夹） 录（根文件夹） ?主页直接放到根内，一般的名称为 主页直接放到根内， 主页直接放到根内 index.html/index.asp/default.html等 index.html/index.asp/default.html等，其所用到的照片等素材等 在根文件夹下建立一个子文件夹即可 ?各栏目分别设立子文件夹，存放本栏目的网站跟素材，素材能再单 各栏目分别设立子文件夹，存放本栏目的网站和素材， 各栏目分别建立子文件夹 独建立文件夹 ?所有的文件夹及文件名不要出现英文，应见名知义 所有的文件夹及文件名不要出现英文， 所有的文件夹及文件名不要出现英文我的网站 栏目1 栏目??2 ??主页index.htm 主页三、建站技术 1、静态网页技术网页扩展名 为：.html/.htm浏览器发送URL给WEB服务器, 浏览器发送URL给WEB服务器,服务器查找需要的网站文件 URL 服务器 不加处理直接返回, 不加处理直接返回,运行浏览器端的页面是事先已制作完 成放置在服务器上的网站（ HTML书写的 书写的） 成放置在服务器上的网站（用HTML书写的） 2、动态网页技术 服务端动态技术:实现动态功能的程序代码保存于服 服务端动态技术: 务器上, 务器上,服务器根据客户端的规定运行程序并形成结 果页面返回给客户端浏览器 网页扩展名 主要技术有ASP（VBSCRIPT、 （ 主要技术有 、 JAVASCRIPT）、 ）、ASP.NET、PHP、JSP等 ）、 、 、 等网页扩展名 为：.asp/.aspx/ .php/.jsp四、建站软件ADOBE三剑客 三剑客Dreamweaver cs3 Flash cs3 Fireworks cs3/PHOTOSHOP IISWEB服务器软件 服务器软件小旋风数据库管理系统Access SQL Server网页设计师基本技能要求? Photoshop ? Dreamweaver ? Flash ? Div+ CSS ? Javascript ? HTML ? 编程能力 项目经验） ? 作品 （项目经验）基本温饱小康生活五、IIS的安装及配置 IIS的加装及配置?安装：控制面板-添加删除程序-添加删除 安装：控制面板-添加删除程序调试 WINDOWS组件 勾选[INTERNET信息服务（IIS） 组件， [INTERNET信息服务 WINDOWS组件，勾选[INTERNET信息服务（IIS）]， 按提示安装，如果必须WINDOWS光盘， WINDOWS光盘 按提示安装，如果必须WINDOWS光盘，可上网下载 IIS安装包或选择教师给的IIS安装包 安装包或选择教师给的IIS IIS安装包或选择教师给的IIS安装包 ?配置：控制面板-管理软件-INTERNET信息服务 配置：控制面板-管理软件-INTERNET信息服务 配置右击[默认网页 属性] 右击 默认网站]---[属性 默认网页 属性网站根文件夹小旋风的安装及配置?解压后直接双击其中的setup.exe按向导提 解压后直接双击其中的setup.exe按向导提 解压后直接双击其中的setup.exe 示安装即可，安装过程中必须选取安装模式， 示安装即可，安装过程中必须选取安装模式， 同学们可修改该默认模式， 同学们可修改该默认模式，使其不出现中文 ?安装完在桌面有其界面，双击可运行，在任 安装完在桌面有其界面，双击可运行，安装完在桌面有其界面 务栏左侧会出现一个闪烁的计算机字体flash课件模板制作系列教程之按钮导航(上)， 务栏左侧会出现一个闪烁的计算机界面，注 意它跟迅雷有矛盾， 意它跟迅雷有矛盾，运行时最好关闭迅雷 ?要制作的网站根文件夹需放在它的调试模式 要制作的网站根文件夹需放在它的安装模式 下的WWWROOT文件夹内， WWWROOT文件夹内 下的WWWROOT文件夹内，方可调试七、网页的简洁制作方式网站设计初期的工作流程确 定 资 源 搜 索 内 容 确 定 界 面 形 成 效 果 图 形 成 静 态 页 面网页的基本要素网页标题LOGO网页文本超级链接网站图像网页页脚网页导航图 1-6 俞晨视觉传奇网站default.html网页基本构成要素1．页面标题网站中的每一个页面都有标题，用来提醒该页面的主要内容， 网站中的每一个页面都有标题，用来提醒该页面的主要内容，标题出现 在浏览器的标题栏中，而不是出现在页面布局中。

在浏览器的标题栏中，而不是出现在页面布局中。它也有一个比较重要的作 用就是让浏览者清楚地了解所应浏览的内容，不至于迷失方向。 用就是让浏览者清楚地了解所应浏览的内容，不至于迷失方向。 设置页面标题很简单，一般的网站编辑工具都提供这项修改。 设置页面标题很简单，一般的网站编辑工具都提供这项修改。2．网站标示3．页面宽度由于页面尺寸和显示器大小及分辨率有关， 由于页面宽度和显示器大小及信噪比有关，网页的显示能够突破显 示器的显示范围，而且浏览器本身也会占去不少空间， 示器的显示范围，而且浏览器本身也会占去不少空间，因此带给页面的 范围得到了限制。一般分辨率为 像素× 像素的状况下， 范围得到了限制。一般分辨率为800像素×600像素的情况下，页面的显 像素 像素的情况下 示尺寸为778像素×430像素，分辨率为 像素× 像素， 像素× 像素的情况下， 示尺寸为 像素 像素 分辨率为1024像素×768像素的情况下，像素 像素的状况下 页面的显示规格为1000像素×600像素。从以上数据可以看出flash课件模板制作系列教程之按钮导航(上)，分辨率越 像素× 像素。 页面的显示宽度为 像素 像素 从以上数据可以看出， 高，页面尺寸越大。

页面尺寸越大。页眉和页码、导航栏、图片、 4．页眉和页码、导航栏、图片、文本脚注的样式通常要求跟页面的整体色调保持一致。 页眉的样式通常要求跟页面的整体色调保持一致。一个富有时尚特 色的页眉将跟网站标志一样起到标示的作用。 色的页眉将跟网站标志一样起至标识的作用。在页眉中常摆放含有站点 名字的截图、标志、网站宗旨、 名字的照片、标志、网站宗旨、宣传标语和广告语等LOGO 页眉 导航栏5．多媒体在网站中可以使用的外媒对象主要包含flash动画、flash按钮、flash 动画、 按钮、 在网站中可以使用的外媒对象主要包含 动画 按钮 文本、 小程序、 文本、java小程序、音频和视频等。 小程序 音频和视频等。网页中的Flash动画网页中的视频网站效果图的设计制作网页效果图的设计与特色的平面设计是相似的，但也具有一些特殊的性质。 网页效果图的设计与特色的平面设计是相似的，但也具有一些特殊的性质。 通常网页的图像设计会使用到图像设计工具和一些其它的硬件， 通常网页的图像设计会使用到图像设计工具和一些其它的硬件，Fireworks 正是一种主要应用于网页图形设计的硬件。应用较为广泛的也有Adode公 正是一种主要应用于网页图形设计的硬件。

应用较为广泛的也有Adode公 司出品的Photoshop。 司出品的Photoshop。 FIREWORKS利用自身在图像处理上的优势，实现多方面网络应用。 FIREWORKS利用自身在图像处理上的优势，实现多方面网络应用。利用图像 利用自身在图像处理上的优势 软件可视化操作程度相当高的优势，进行网页视觉设计、排版布局， 软件可视化操作程度相当高的优势，进行网页视觉设计、排版布局，并能运用 其切片功能直接将图像建立为页面的HTML文件 其切片功能直接将图像建立为页面的HTML文件。 文件。第一步：采用抓图法或模板法进行优秀网站界面的搜索、分类与积累 第一步：采用抓图法或模板法进行优秀网站界面的搜索、 抓图法或模板法进行优秀网站界面的搜索 积累与分类例如：公司 广告条、 积累与分类例如：公司logo、banner广告条、导航条、小字体、动画等 、 广告条 导航条、小字体、 经典网站推荐 模板王： 模板王： 模板秀： 模板秀： 模板天下： 模板天下： 网页制作大宝库： 网页制作大宝库： 源码之家： 源码之家：第二步： 第二步：网页图标的预测 1、从平面组成入手 、 2、从色彩入手 、 思考网页应该什么组 成元素？ 成元素？思考网页的颜色构成?注意 思考网页的颜色构成 注意 一条原则KISS（Keep It 一条原则 （ Simple and eaSy),原则上 原则上 保持一个网页在三色以内， 保持一个网页在三色以内， 可运用同色系形成对比效 果。

第三步： 第三步：网页图标的创新处理 创新方式： 创新手段：从平面构成与颜色入手创新 注意: 改变色彩， 注意 1.改变构成设计 ２.改变颜色，全局统一 局部对比 改变构成设计 改变颜色 全局统一, 淮安旅行社登录页以及创作新作与其原型评估网主页旅游网站第四步：将网页效果图导出成网页， 第四步：将网页效果图导出成网页，进行后期修饰 先用IE浏览看效果如何？ 先用 浏览看效果如何？再进行前期修饰 浏览看效果如何 网页的前期修饰与创新方式主要有: 网页的前期修饰与创新方式主要有 1 位置2 背景色 3 细节修饰 [加边、平滑 加边、 加边 平滑] 4 满屏处理