网页设计基础

主讲 白小军 网页设计基础 课程共享网址 网页设计 学习目标 随着互联网的迅猛发展 我们可以方便的从网络上获取大量信息 同时 也可以将自己的信息发布到网上 网络上的信息多数是通过网页的形式展现出来的 一个成功的网站往往由很多个精美绚丽的网页组成 要制作出美观的网页 就要学习网页设计与制作的相关知识 同时 考虑到客户机的多样性和浏览器的多样性 我们设计网页时要特别注意兼容性和标准化问题 保证我们设计的网页能够在各种环境下正常展现 内容提要 网页与网站基础网页的基本构成元素网页设计相关技术和工具网页设计的方法 Internet Internet是由遍布全世界的各种各样的网络通过TCP IP协议连接成的一个松散结合的全球网 它使网络上的各台主机可以互相交换信息 Internet服务 Internet为用户提供了各种各样的服务 如 WWW EMAIL FTP 即时通信等 WWW服务 WWW的含义是全球信息网 WorldWideWeb 简称为Web或 万维网 它由欧洲核子物理研究中心 CERN 研制 是一个基于超文本 hypertext 方式的信息查询工具 通过http协议传输超文本信息 WWW将位于全世界Internet上不同网址的相关数据信息有机地编织在一起 通过浏览器 browser 提供一种友好的信息查询界面 WWW的三个核心要素 URL 统一资源定位器 即网址HTTP 超文本传输协议 在客户机和服务器间传递信息HTML 超文本标记语言 信息的表示方式 请求 响应 服务器 客户端浏览器 URL 万维网采用统一的命名方案来访问Web上的资源 URL UniformResourceLocations 统一资源定位符 用于标识Web上的页面和资源 URL一般由3部分构成 如下 HTTP 协议是一组标准的规则 用于实现通信所需的数据表示 信号发送 身份验证及差错校验等 访问Web上的资源都需要遵循这些规则 HTTP是TCP IP协议栈中的一个应用层协议 用于定义WEB浏览器与服务器之间交换数据的过程及数据本身的格式 HTML 超文本标记语言 HyperTextMarkupLanguage 用于创建网页文档 HTML文档是使用HTML标记和元素创建的 此文件以扩展名htm或html保存在Web服务器上 网页 用户浏览的某一个页面 它是一个纯文本文件 是向访问者传递信息的载体 以超文本和超媒体为技术 采用HTML CSS XML等语言来描述组成页面的各种元素 包括文字 图像 音乐等 并通过客户端浏览器进行解析 示例1 浏览器 用户浏览网页的工具 将HTML文本解释为图形界面展现给用户 并作为代理负责用户与服务器的交互 目前常用的浏览器有 微软的InternetExplorerMozilla的FirefoxGoogle的Chrome 网页的展示原理 客户通过浏览器看到的包含文字 图像 声音和动画等多媒体信息的每一个页面 其本质是一个纯文本文件 浏览器对该文件进行解释 生成了多姿多彩的网页 除文本外 其它媒体素材 图像 声音 动画 影像等 都需要保存成单独的文件 通过URL嵌入到网页文件中 可以看出 WWW服务主要是通过一个个多媒体网页提供给用户各种信息的 静态网页和动态网页 根据网页的生成方式不同 将Web页面分为静态网页和动态网页两大类 静态网页是不包含服务器端代码的html文件 web服务器只是负责把静态网页发送给浏览器 由浏览器展示出来动态网页中含有服务器端代码 需要在服务器上执行这些代码 生成客户端需要的内容后发送给浏览器展示 静态网页 网页的结构和内容都在设计阶段完全确定下来 以后每次用户访问该网页 看到的都是同样的内容 动态网页 网页的内容在服务器端动态生成 然后传递给客户端展示 这样 当用户访问一个网页时 服务器可以根据用户请求的不同而生成不同的数据 例如 用户个人主页 例如 邮箱登录页面 网站 是承载相关内容的一系列网页 为用户提供WWW服务的服务器或服务器集群 平时所说的访问某站点 实际上是访问提供这种服务的一台或多台计算机 Web的工作原理 网页被放置在Web服务器上 用户通过URL请求web服务器时 服务器把相应的网页传送到用户浏览器 分静态和动态两种处理方式 浏览器收到页面代码 将其解释为图形界面并展示 网站的结构 网站中的所有网页一般组织在一个虚拟目录下 如图示 web index htm images style css about html h1 htm h2 htm h3 htm 首页文件的直接上级目录 是网站根目录 网站的特点 众多的网页确定的主题统一的风格便捷的导航栏目的分层 网站制作流程 确定站点的核心内容网站的规划网站外观的设计网页具体制作网站性能测试网站发布网站更新与维护 网页设计的原则 页面整体效果统一 避免纷繁杂乱整个页面和谐一致 符合美学法则较快的下载速度 让页面简洁 避免使用大量的图片 取消自动下载的音乐和媒体素材网页链接无误 主要功能都能正常访问兼容性好 在各种浏览器下显示效果统一 发布前在各种浏览器下都测试一遍 网页的基本元素 一个网页的基本元素主要包括文本 图像和超链接 其它元素包括声音 动画 视频 表格 导航栏 表单等 文本 是网页上最重要的信息载体与交流工具 网页中的主要信息一般都以文本形式为主 与图像网页元素相比 文字虽然并不如图像那样容易被浏览者注意 但却能包含更多的信息并更准确地表达信息的内容和含义 图像 图像元素在网页中具有提供信息并展示直观形象的作用 用户可以在网页中使用GIF JPEG和PNG等多种文件格式的图像 目前应用最广泛的是GIF和JPEG两种格式 动画 动画在网页中的作用是有效地吸引访问者更多的注意 用户在设计制作网页时可以通过在页面中加入动画使页面更加活泼 声音 声音是多媒体和视频网页重要的组成部分 用户在为网页添加声音效果时应充分考虑其格式 文件大小 品质和用途等因素 另外 不同的浏览器对声音文件的处理方法也有所不同 彼此之间有可能并不兼容 视频 视频文件的采用使网页效果更加精彩且富有动感 常见的视频文件格式包括RM MPEG AVI等 超链接 超链接是从一个网页指向另一个目的端的链接 超链接的目的端可以是网页 也可以是图片 电子邮件地址 文件和程序等 当网页访问者单击页面中某个超链接时 将根据自身的类型以不同的方式打开该目的端 例如 当超链接的目的端是一个网页时 将会自动弹出窗口以显示网页内容 表格 表格在网页中用来控制页面信息的布局方式 其作用主要有两个方面 一方面是使用行和列的形式布局文本和图像以及其他列表化数据 另一方面是精确控制网页中各种元素的显示位置 交互式表单 表单在网页中通常用来联系数据库并接受访问用户在浏览器端输入的数据 表单的作用是收集用户在浏览器上输入的联系信息 接受请求 反馈意见 设置签名以及登录信息等 导航栏 导航栏在网页中是一组超链接 其链接的目的端是网站中重要的页面 在网站中设置导航栏可以使访问者既快又容易地浏览站点中的其他网页 其它元素 略 网页设计相关的技术 进行网页设计需要用到一系列相关的技术 主要包括 HTML 用于定义网页的内容CSS 用于定义网页的外观客户端编程 定义页面的客户端行为 JavaScript等服务器编程 定义服务器端行为 ASP PHP JSP等 网页设计相关的工具 为完成网页设计 需要用到一系列的工具 文本编辑工具 手工编辑网页代码 Notepad等可视化设计工具 大幅度提高设计效率Microsoft的ExpressionWebAdobe的Dreamweaver图片处理工具 制作精美的图片 美化网页Adobe的PhotoshopFireworks动画制作工具 制作精彩的动画图片 A