网页设计与制作 项目式 教学课件 ppt 作者 冯文惠 田源 模块一

网页设计与制作,内容简介,网页设计基础知识 使用标记语言制作网页 认识DreamweaverCS5 编辑网页元素 使用表格框架布局网页 DIV+CSS 制作特效网页,内容简介,使用模板和库提高制作效率 制作动态网页 网站的发布与管理,任务一 优秀网站赏析,什么是网页,网页是由HTML（超文本标识语言）编写，通过WWW网传输，且被浏览器编译后供用户获取信息的页面文件，又称为Web页，集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素。,网战赏析,HTML（Hyper Text Markup Language） 超级文本标记语言不是一种程序语言，而是 一种描述文档结构的标记语言，是用户与电 脑之间进行交流的一种文本技术。各种网页 均是用HTML语言来描述的，用HTML语言编写 的网页文件的扩展名一般为“*.htm”或 “*.html”。,超文本标记语言,万维网（www）是World Wide Web的中 文简称，也称为3W网，它的本质是一种基 于超级文本技术的交互式信息浏览检索工 具，是Internet提供的应用最普及、功能 最丰富、使用方法最简便的信息服务，用 户可通过它在Internet上浏览、编辑、传 递超文本格式的文件，即.html格式文件,WWW网,浏览器是用于阅读网页中信息的一 种软件工具。 Internet Explorer（IE） Netscape Navigator（NE） 傲游浏览器 360浏览器 火狐浏览器,浏览器,超级链接是网页中最常用的元素之 一，网页就是通过无数的超级链接才能 组成一个网站。 超级链接可以链接到网站内部页 面、对象，也可以链接到其它网站，大 大方便了用户在各个页面对象之间实现 跳转。,超级链接,根据页面内容，网页可以分为首页、主页、专栏网页、内容网页和功能网页等 根据网页的表现形式，可以分为“国”字型、“匡”字型、标题正文型（以文字为主）、海报型和Flash型网页 根据网页的交互性能可以分为静态网页和动态网页,网页分类,网页 内容分类,首页（主页）,专栏网页,内容网页,功能网页,网页 布局分类,“国”字型,“匡”字型,标题正文型,海报型,flash型,网页 交互性能分类,静态网页,动态网页,静态网页和动态网页,网页一般由站点徽标、导航栏、广 告栏和信息区等部分组成。 示例,网页组成,网页举例,网站是一个或多个网页通过超级链接形成的 网页集合，是提供www服务的网络空间。 网站一般由通信线路、www服务器（为网络用 户提供信息服务，内容包括一个或多个网站）和 数据库服务器（提供数据库访问能力，负责数据 库维护）组成。 根据网站的功能可以分为个人网站、电子商 务网站、政府网站、企业网站、门户网站和教育 网站等；根据网站的设计技术可以分为静态网站 和动态网站（ASP、JSP、PHP和Web后台服务器软 件）。,什么是网站,任务二 网站设计工作流程,网站设计流程,确定网站主题，组织网站内容 a.网站主题定位要小、网站资料准备充分。 b.网站主题根据网站的类型和领域、网站服务的对象、设计者的创意等规划，突出：专、精、新。 c.围绕主题收集相关的文字、图片、图像等信息资料。,网站规划-网站主题,规划网站栏目和目录结构 a.网站栏目的设计原则：内容重点突出、浏览方便。 b.规划时的注意事项：栏目要服从、体现主题。 内容要打破栏目层次束缚。 建立子目录。 根目录的合理使用。 Images目录：必要时每个栏目下都应建立一个Images文件夹。 目录文件的命名:一般应小于8个字符，采用英文小写。,网站规划-网站栏目,网页版面布局 常见的网页版面： “国”字型 “匡”字型 标题正文型 海报型 Flash型,网站规划-网页布局,网页素材的应用 a.网页素材分别应用于：网站徽标、广告栏、导航栏、宣传语、按钮、文本、图片、动画、背景音乐。 b.网页中的文件处理：将收集的资料文件转换为网页能识别的格式；将书面文字转换为文本文件；将图片转换为网页适用的格式；音效、视频和动画文件的采集。 网页相关联的文件,网站素材收集,整合网页素材 a.网页素材的整合：通过网页编辑软件对素材文件进行处理。 b.网页编辑软件：Dreamweaver、Flash、Fireworks等。 添加特效 网页特效通过HTML语句、Flash动画、页面滚屏和层、滤镜等技术实现。,网页设计,平衡性 对称性 对比性 疏密度 反复性 韵律感,网页布局原则,整体规划 鲜明的主题 善用图像 醒目的导航 及时更新 易记的网站名称 通用网页 动画适量,设计网页原则,测试站点 a.浏览器兼容性的测试。 b.超级链接的测试。 申请空间 向因特网服务商（ISP）申请站点空间。 上传文件 利用ISP提供的方式或编辑软件进行上传,站点测试和发布,