网页制作过程PPT.ppt

* 网页设计简易教程 江苏城市职业学院 第一篇、学前班 WWW基本概念 网站开发前的前期工作 班级网站展示 第一篇、学前班 --网站开发的基本概念 一、WWW简介 World Wide Web，万维网，是一个建立在INTERNET上的全球性的信息系统。它将位于互联网上的相关数据信息有机的编织在一起，利用一种友好的接口，为人们提供交互的、动态的信息服务。 Web浏览器 Web服务程序 WWW的客户机/服务器（C/S）工作模式 /index.htm Index.htm 客户机 服务器 1、web服务器 运行Web服务器程序，在互联网上提供WWW服务的计算机 常见Web服务器程序：WINDOWS--IIS，UNIX/LINUX--APACHE，小旋风 2、HTTP 超文本传输协议，是WWW的标准 3、HTML 超文本标记语言，是制作WWW网页的标准语言 在浏览器软件内，单击[查看]—[源文件]可查看当前打开的网页的HTML代码 二、网站建设步骤 网站总体策划 搭建网站平台 网站设计上传 网站推广维护 主要是指给自己的网站构建开发和运行的平台，包括申请空间和域名、创建WEB服务器、安装建站软件等 确定主题、内容策划、设计风格、目录设计等 推荐网站 买空间网 我的网站 栏目1 栏目2 主页index.htm 图片 图片 网站目录设计：整个网站的文件放在一个文件夹内，称为网站根目录（根文件夹） 主页直接放在根内，一般的名称为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像