网页设计与网站建设1ppt课件.ppt

网站建设与网页开发 Email Office 104 419Phone 730761 2 教材 网页设计与制作 蔡立燕梁芳主编清华大学出版社 网站设计与建设 刘运臣主编清华大学出版社 3 考核 网页制作 30 期末考试 70 4 主要内容 网页和网站的基本概念IP地址和域名的相关知识网站建立的步骤如何规划网页文件常用网页制作工具和网页编程语言 5 一 网页和网站的基本概念 Internet和IntranetInternet是由遍布全世界的大大小小的各种各样的网络组成的一个松散结合的全球网 它使网络上的各台计算机 Internet上称为主机 即host 可以互相交换信息 Intranet 内联网 是指企业内部网 它是采用Internet的协议标准 应用Internet的现有技术建设的企业内部网络 6 一 网页和网站的基本概念 WWWWWW WorldWideWeb 万维网 它是基于 超文本 的信息查询和信息发布系统 由遍布全世界的Web服务器组成 通过浏览器 browser 提供一种友好的信息查询界面来提供丰富的服务 利用超链接将服务器中的文档有机地组织起来 成为一个庞大的信息网 7 一 网页和网站的基本概念 URLURL UniformResourceLocations 统一资源定位符 用来指定因特网上资源的存放位置 以便人们使用浏览器顺利地找到所要查找的资源 地址格式 协议名 主机名或IP地址 端口号 资源所在目录名 文件名 8 一 网页和网站的基本概念 主页和网页主页是用户进入一个站点所看到的第一个页面 是一个站点的目录索引 它引导客户浏览该站点或其他站点的页面 主页实际上是一个网站的入口点 网页也叫Web页 是客户通过浏览器所看到的每一个页面 包含了如文字 图像 声音和动画等多媒体信息 也可以说 WWW服务主要是通过一个个多媒体网页提供给用户各种信息的 9 一 网页和网站的基本概念 站点Web站点又称为站点或网站 类似于一个文件夹 站点中所有资源都存放在这个文件夹中 例如主页 网页 图片 音像文件等 10 一 网页和网站的基本概念 本地站点和远端站点存储在因特网服务器上的站点称为远端站点 是WWW中的一个个节点 在因特网上浏览到的各种网站实际上是存储在因特网服务器上的网页文档及其相关资源 存储在本地机上的站点称为本地站点 远端站点的网站文件和组织形式一般都是先在本地机上制作并调试完毕后 再使用上传工具上传到因特网服务器 11 一 网页和网站的基本概念 网页浏览的基本原理静态网页动态网页HTML语言 12 静态网页 静态网页每个页面都有一个固定的URL 且网页的URL以 htm html shtml等常见形式为后缀 网页内容一经发布到网站服务器上 无论是否有用户访问 每个静态网页的内容都是保存在网站服务器上的 也就是说 静态网页是实实在在保存在服务器上的文件 每个网页都是一个独立的文件 静态网页的内容相对稳定 因此容易被搜索引擎检索 静态网页没有数据库的支持 在网站制作和维护方面工作量较大 因此当网站信息量很大时完全依靠静态网页制作方式比较困难 静态网页的交互性较差 在功能方面有较大的限制 13 静态网页浏览的过程 HTMLHTMSHTML 查找所请求的页面 返回所请求的HTML页面 http请求 14 动态网页 动态网页以数据库技术为基础 可以大大减少网站维护的工作量 采用动态网页技术的网站可以实现更多的功能 如用户注册 用户登录 在线调查 用户管理 订单管理等 动态网页实际上并不是独立存在于服务器上的网页文件 只有当用户请求时 服务器才会返回一个完整的网页 采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求 15 动态网页的浏览过程 数据库 综合数据 数据 AspPhpjsp 客户端的请求页面 显示页面的内容 返回生成的动态页面 服务器获取数据库数据 16 HTML语言 HTML语言 又称超文本标记语言 HypertextMarkupLanguage 与其他编程语言不同 它不是一个真正的计算机编程语言 而是一种在使用转义码文档中应用的格式化语法 其提供一些语法标记 再由浏览器解释生成相应的页面 17 HTML简单示例 第一个主页大家好 运行效果 点击 目录 18 二 IP地址和Internet域名 与Internet相连的任何一台计算机 称为主机 都有唯一的一个网络地址 简称为IP地址 在Internet中域名可以通过域名系统 DomainNameSystem DNS 映射为IP地址 方便人们记忆站点 19 1IP地址 IP地址是在Internet网络中为每一台主机分配的由32位二进制数组成的唯一标识符 例如 某台主机的IP地址是0011011100 为了便于记忆 通常又把32位二进制数分成四个字节段 每字节段8位 用小数点将它们隔开 然后把每一字节段数都转换成相应的十进制数 称为点分十进制数 例如 这台主机用点分十进制数表示为10 65 87 220 20 2域名的相关知识 域名是网站在因特网上的 门牌号码 用户通常由域名访问网站 例如http 域名命名规则 基于IP地址层次化的主机命名方式 可由26个英文字母 10个阿拉伯数字 减号和下划线组成 用圆点分隔成几节 字母不区分大小写 域名应选择简短 有意义 容易记的单词 域名具有唯一性 21 2域名的相关知识 域名的级别从右向左依次降低 例如 cn为顶级或一级域名 为二级域名 为三级域名 最左边为主机名 顶级域名分为机构域名和地理域名 目录 22 网站建立的步骤 网站建立步骤 域名注册购买空间网站建设上传网页 规划主页设计网站标志 Logo 设计网页色彩规划页面设计网页的图形和背景网页文件的放置网页框架网页制作 网页制作应用软件网页编程语言 23 三 网站建立的步骤 域名注册购买空间网站建设上传网页 24 1域名注册 域名选择定义域名除了要考虑公司的性质以及信息内容的特征外 还应该使这个名字简洁 易记 具有冲击力 域名选择也有较多的限制 域名注册登录域名注册的代理网站 如 先查询域名是否已被注册 25 1域名注册 26 1域名注册 27 1域名注册 28 2购买空间 虚拟主机方式 利用虚拟主机技术 可以把一台真正的主机分成许多 虚拟 的主机 每一台虚拟主机都具有独立的域名和IP地址 具有完整的Internet服务器 www 功能 独立的服务器 对于经济实力雄厚且业务量较大的企业 也可以购置自己独立的服务器 29 2购买空间 互联网上很多网站都提供空间购买功能 例如 购买后给虚拟主机绑定自己的域名 网站可正常访问了 30 2购买空间 31 3网站建设 总体策划 需求分析 首先组织相关人员进行调研 包括网站管理者 网站开发者 网页维护人员 美工等 确定网站的定位 信息发布类网站 门户网站和在线查询网站 电子商务类网站 服务类网站 个人网站和娱乐游戏类网站 风格 栏目设置 内容结构等内容 网页创作网站测试测试网页浏览器的兼容性 使用不同的浏览器浏览网页 对一些格式混乱的地方进行修改 测试访问网页所用的时间 尽量减少图片和动画 以提高下载速度 测试页面图片及文字的链接情况 以防出现死链接 拼写检查 32 4上传网页 使用FTP工具来上传网页 例如 CuteFTP等 上传完成后 在IE浏览器中输入注册的域名 就可以浏览到所制作的网页了 33 4上传网页 目录 34 四 网页的规划和步骤 规划主页设计网站标志 Logo 设计网页色彩规划页面设计网页的图形和背景网页文件的放置网页框架网页制作 35 1规划主页 主页的一项重要功能是导航 即引导用户利用超链接查询保存在网站或其他位置的信息 超链接的层数不能太多 网站文件之间要使用相对超链接 以保证网站的可移植性 在网站的每一页相同位置最好设置相同的导航条 以便于用户在网站的各网页间跳转 36 2设计网站标志 Logo 网站标志类似商品的商标 可以是汉字 英文字母 动物或人物的符号或图案 为达到网站与Logo紧密联系的效果 最常用最简单的方式是用网站的名称作标志 配以字体和字母的变形 37 2设计网站标志 Logo 38 3设计网页的色彩 视觉冲击是网站给人的第一印象 好的色彩搭配能体现网站形象 延伸网站内涵 还能直接影响访问者的情绪 通常网站的主要色彩不要超过三种 多用于网站的标志 标题 主菜单和主色块 整体感觉统一 其他色彩可作为点缀和衬托 但不能喧宾夺主 39 3设计网页的色彩 40 4规划页面 规划页面就是规划页面布局 包括主页在内的所有页面都应该简洁清晰 寻求以最少的元素表达最多的信息 页面整体风格要与页面所表述内容一致 41 42 5设计网页的图形和背景 图形是WWW网站的特色之一 具有醒目 吸引人的特点 并起到了传达信息形象的作用 适当运用图形可以为网页增色不少 但应用不当也会带来反效果 图形的传输速度远没有文字快 设计时要充分考虑图形文件的大小和速率 背景也是如此 43 6网页文件放置 一般的小网站可以将所有文件放在同一文件夹中 大一点的网站可以在网站文件夹中设置子文件夹 将本网站所有相关文件分门别类地放入子文件夹 44 7网页框架 网页框架指网页文件系统的组织结构 合理的框架可以让Web页面井井有条 在实际管理中减少不必要的错误 组织站点的基本原则如下 保证一个页面只有一个主题 应避免大主题 将大主题分成几个子主题 在每个页面加入超链接 方便读者按自己意愿阅读 45 46 8网页制作 网页制作一般分为如下步骤 将主题拆分为若干子主题 为每个子主题看作网页 为子主题划分区域 使文本和图形间有所分隔为主页划分区域 合理安排网站名称 网站标志 公共导航等必要内容 并在主页上为每个子主题建立超链接 目录 47 四 网页制作工具 网页制作应用软件1 FrontPage Microsoft公司出品 采用典型微软办公软件界面 简单易学 只要会使用Word就基本上会使用FrontPage 是网页制作的入门级软件 2 Dreamweaver Macromedia公司出品 是 所见即所得 的网页编辑软件 它的直观性和高效性胜过FrontPage 是中级网页设计者的首选软件 3 Fireworks Macromedia公司出品 用于平面图像处理 并能制作网站标志和gif动画 与Flash和Dreamweaver一起合称为 网页制作三剑客 4 Flash Macromedia公司出品 用于制作平面动画 也可以制作网页 它生成的SWF文件体积非常小且画面精美 特别适合网页使用 现在 Flash甚至已经成为了网络多媒体技术的代名词 5 Photoshop Adobe公司出品 是功能非常强大的专业软件 可以制作任何