网页制作教程 1.ppt

第二章本地站点的构建与管理 建一个网站 留一片风景 MBA研讨 建一个网站 留一片风景 本章要点内容 站点的创建于站点管理的一般方法 网页文档创建与管理的基础知识 页面属性的设置 网页头信息的设置 MBA研讨 建一个网站 留一片风景 本章学习目标 了解站点的创建与站点管理的一般方法 掌握网页文档创建与站点管理的基础知识 本章学习目标 熟悉DreamweaverMX2004软件 熟悉文件夹与文件的关系 并掌握文件与文件夹的命令原则 MBA研讨 2 1规划与搭建站点 建一个网站 留一片风景 在搭建一个网站时 首先应规划一下网站是由那几个部分组成 然后确定主页的整体风格 颜色搭配 页面布局以及内容结构 不同网站用途 范围都不同 风格各异 在搭建比较大的网站时 应该对网站进行较严格的设计 MBA研讨 2 1规划与搭建站点 建一个网站 留一片风景 对于网站建设这项整体性很强的系统工程 在着手动工之前要确认网站的需求 表述好网站结构图 分析清楚施工步骤 这些工作都是非常重要的 只有严格按照确认下来的工作流程 才能有条不紊地做好网站建设 站点是放置网站上所有文件的地方 每一个网站都有自己的站点 在使用Dreamweaver制作网站之前 最好先建立一个站点 以便让Dreamweaver知道存放站点的位置 在Dreamweaver中 可以创建本地站点和远程站点 在本机上进行开发没有链接到Internet上的站点就称为本地站点 将本地站点上的文件上传到Internet上形成远程站点 在搭建网站时 有很多相关文件 如果文件分散在硬盘的各个地方 就无法方便地进行网站发布 定义本地站点 就是定义一个目录 将网页和相关文件都放在里面 以便进行网页的制作和管理 如何操作 MBA研讨 2 1 1定义站点 建一个网站 留一片风景 为了便于管理 我们分别建立图像 声音 视频等的文件夹 MBA研讨 2 1 2站点结构规划 建一个网站 留一片风景 合理地组织站点结构能够加快站点的设计 提高工作效率 节省工作的时间 尤其是管理规模较大的站点时 如果将一切网页文件都存储在一个目录下的话 会给页面的统筹管理带来诸多不便 因此 通常利用文件夹来管理网页的文档及相关元素 在规划站点结构时 为了便于今后的站点维护与更新 建议遵循以下的站点规划原则 MBA研讨 站点结构规划 建一个网站 留一片风景 一个Web站点实际包括了一系列的文档组合 而且这些文档之间通过各种链接相互关联 为了便于这些文档的管理 通常用文件夹来构建这些文档的合理结构 1 网页文档按性质归类 用户可首先为站点创建一个根文件夹 然后创建多个文件夹 将文档站点中的文档分门别类的存储到相应的文件夹下 这样的组织方式使得站点的结构清晰 层次分明 便于设计人员操作 也便于站点维护人员对其进行有效的维护 MBA研讨 建一个网站 留一片风景 网页文档文件名应该容易理解 例如 在 网络书店 网站中 可定义一个根文件夹 命名 bookshop 把该网站中的所有文件都放在次文件夹下 同时为了便于管理在该文件夹下定义了htgl 后台管理 images 图片 members 会员 assets 资源 qtgl 前台管理 等文件夹与一个主页文件 index html 1 网页文档按性质归类 一般情况下都会默认采用index作为首页的文件名 因为发布系统可以识别其为首页 在进行文件名的选择时尽量不要使用中文文件名 因为很多网络操作系统和网络浏览器是不支持中文的 可用汉语拼音的首字母作为文件的名称 MBA研讨 建一个网站 留一片风景 由于网页文档中统常还有除文字以外的对象 如图像 声音 动画等 为了便于资源的组织和查找 通常将它们与网页文档分开存放 2 合理存储站点资源 最常用的是将站点所有的图像 声音 动画等文件存储到一个公用的资源 assets 文件夹中 这样做的好处是便于统一管理 根据实际情况 该文件夹下还可以创建子文件夹按照不同资源类型进行分别存储 MBA研讨 建一个网站 留一片风景 站点设计人员所设计的本地站点和远程站点应该使用完全相同的结构 尤其是当使用Dreamweaver创建本地站点通过FTP上传所有内容到远程站点的时候 可以保证远程站点和本地站点的结构完全相同 这样可便于站点的维护与管理 3 让本地的网站与远程的网站使用相同的结构 MBA研讨 2 1 3站点结构的搭建 建一个网站 留一片风景 站点的结构规划好之后 我们就可搭建自己的站点结构 下面以 小惠的家 为例来介绍利用DreamweaverMX2004进行站点搭建的步骤 MBA研讨 网站目录建立规范 建一个网站 留一片风景 网站目录建立的原则是以最少的层次提供最清晰简便的访问结构 网站目录建立规范如图所示 MBA研讨 2 2网页文档的创建与管理 建一个网站 留一片风景 Dreamweaver文档的创建是进行网页设计的开始 也是网页设计的平台 用户可通过选择 文件 新建 命令 打开 新建文档 对话框 进行Dreamweaver文档的创建 2 2 1创建和保存Dreamweaver文档 1 创建Dreamweaver文档 创建网页的类别中 基本页是指通过非动态网页技术创建的网页 动态页是指通过动态网页创建的网页 MBA研讨 建一个网站 留一片风景 静态网页和动态网页区别 网页一般又称HTML文件 是一种可以在WWW上传输 能被浏览器认识和翻译成页面并显示出来的文件 文字与图片是构成一个网页的两个最基本的元素 除此之外 网页的元素还包括动画 音乐 程序等 网页是构成网站的基本元素 是承载各种网站应用的平台 通常看到的网页 大都是以HTM或HTML后缀结尾的文件 除此之外 网页文件还有以CGI ASP PHP和JSP后缀结尾的 目前网页根据生成方式 大致可以分为静态网页和动态网页两种 MBA研讨 建一个网站 留一片风景 静态网页和动态网页区别 静态网页静态网页是网站建设初期经常采用的一种形式 网站建设者把内容设计成静态网页 访问者只能被动地浏览网站建设者提供的网页内容 其特点如下 网页内容不会发生变化 除非网页设计者修改了网页的内容 不能实现和浏览网页的用户之间的交互 信息流向是单向的 即从服务器到浏览器 服务器不能根据用户的选择调整返回给用户的内容 MBA研讨 建一个网站 留一片风景 静态网页和动态网页区别 动态网页网络技术日新月异 许多网页文件扩展名不再只是 htm 还有 php asp等 这些都是采用动态网页技术制作出来的 动态网页其实就是建立在B S架构上的服务器端脚本程序 在浏览器端显示的网页是服务器端程序运行的结果 静态网页与动态网页的区别在于Web服务器对它们的处理方式不同 当Web服务器接收到对静态网页的请求时 服务器直接将该页发送给客户浏览器 不进行任何处理 如果接收到对动态网页的请求 则从Web服务器中找到该文件 并将它传递给一个称为应用程序服务器的特殊软件扩展 由它负责解释和执行网页 将执行后的结果传递给客户浏览器 MBA研讨 建一个网站 留一片风景 静态网页和动态网页区别 动态网页动态网页的一般特点如下 动态网页以数据库技术为基础 可以大大降低网站维护的工作量 采用动态网页技术的网站可以实现更多的功能 如用户注册 用户登录 搜索查询 用户管理 订单管理等 动态网页并不是独立存在于服务器上的网页文件 只有当用户请求时服务器才返回一个完整的网页 搜索引擎一般不可能从一个网站的数据库中访问全部网页 因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求 MBA研讨 建一个网站 留一片风景 类型说明 在Dreamweaver中 可以创建多种文件类型 最常用的文件类型是HTML文件 其扩展名为 html 或 htm 此外 Dreamweaver还支持其他文件类型 HTML模板文件 Dreamweaver的模板文件可以编辑可编辑区域 文件扩展名为 dwt CSS文件 CSS是CascadingstyleSheets 层叠样式表 的缩写 是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 其文件扩展名为 css JavaScript文件 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言 它是通过嵌入或调入到标准的HTML语言中实现的 文件扩展名为 js XML文件 XML是TheExtensibleMarkupLanguage 可扩展标识语言 的缩写 XML最初设计的目的是弥补HTML的不足 以强大的扩展性满足网络信息发布的需要 后来逐渐用于网络数据的转换和描述 文件扩展名为 xml MBA研讨 建一个网站 留一片风景 类型说明 动作脚本文件 ActionScript是Macromedia为其Flash产品开发的 是一种完全的面向对象的编程语言 功能强大 类库丰富 语法类似Java 多用于Flash互动性 娱乐性 实用性开发 网页制作和RIA应用程序开发 文件扩展名为 as ASP文件 ASP是ActiveServerPage的缩写 是微软公司开发的代替CGI脚本程序的一种应用 它可以与数据库和其它程序进行交互 是一种简单 方便的编程工具 ASP的网页文件的格式是 asp JSP文件 JSP是JavaServerPages的缩写 是由SunMicrosystems公司倡导 许多公司参与一起建立的一种动态网页技术标准 JSP技术有点类似ASP技术 它是在传统的网页HTML文件 htm html 中插入Java程序段和JSP标记 从而形成JSP文件 jsp PHP文件 PHP是一种服务器端 跨平台 HTML嵌入式的脚本语言 其实 它和大家所熟知的ASP一样 是一门常用于Web编程的语言 PHP的网页文件的格式是 php MBA研讨 建一个网站 留一片风景 2 保存文档 MBA研讨 建一个网站 留一片风景 文件命名规则 所有文件名 文件夹使用小写英文字母 数字 下划线的组合 比如 news html unit1 1 html等 不要使用汉字 空格和特殊字符 有些服务器无法识别这些字符 会导致文件链接出错 尽量使用英文 最好有一定的意义 这样以后便于别人或自己修改 例如 名为 Login html 的文件 一看名称 就知道是登录页面 在做网页时 对文件命名时遵循的基本原则是以最少的字母达到最容易理解的意义 对于文件夹和文件的命名规范 主要遵循以下几点 MBA研讨 建一个网站 留一片风景 文件命名规则 名称分为头部和尾部两部分 用下划线分开 尽量用英文 头部表示图片的大类性质 比如 广告 banner 标志 logo 菜单 menu 按钮 button 背景 bg 等 尾部表示图片的具体含义 比如 banner sohu gif menu aboutus gif title news gif logo maths jpg等 这种命名方式一目了然 便于管理与查找 对于图像文件 在命名时要遵循以下几点 MBA研讨 建一个网站 留一片风景 2 2 2设置网页头信息 一个网页文件在结构上实际由两部分组成 头部分和主体部分 主体部分内容是文档的主要部分 也是包含文本和图像等的可见部分 头部内容是除文档标题外的不可见部分 包含文档类型 语言编程 搜索引擎的关键字和内容指示器以及央视定义等重要信息 这些元素并不是每个页面都需要的 以下就是一个简单网页的代码 头内容部分主体内容部分 MBA研讨 建一个网站 留一片风景 标签是记录有关当前页面信息 如字符编码 作者 版权信息或关键字 的head元素 1 Meta MBA研讨 建一个网站 留一片风景 Meta 格式 metahttp equiv Content Type content text html charset gb2312 这是META最常见的用法 在制作网页时 在纯HTML代码下都会看到它 它起的作用是定义你网页的语言 当访客浏览你的网页时 浏览器会自动识别并设置网页中的语言 如果你网页设置的是GB码 而访客没有安装GB码 这时网页只会呈现访客人所设置的浏览器默认语言 同样的 如果该网页是英语 那么charset en MBA研讨 建一个网站 留一片风景 许多搜索引擎装置 自动浏览Web页为搜索引擎收集信息以编入索引的程序 读取关键字META标签的内容 并使用该信息在它们的数据库中将您的页面编入索引 2 关键字 MBA研讨 建一个网站 留一片风景 许多搜索引擎装置读取描述META标签的内容时 将页面编入索引 而有些还在搜索结果页面中显示该信息 而不只是显示文档的前几行 有些搜索引擎限制索引字的数目 所以最好将描述限制为几个字 3 描述 MBA研讨 建一个网站 留一片风景 使用刷新功能可指定浏览器在一定时间后自动刷新的页面 即重新载入页面或跳转到不同的页面 4 刷新 MBA研讨 建一个网站 留一片风景 2 2 3设置网页属性 一网页属性包括网页标题 背景图像 背景颜色 文本颜色 链接颜色以及页面边距等 它们都是网页文档的重要属性 其中页面标题用于标识和命名文档 即在页面浏览时显示在浏览器左上方的窗口标题 背景图像或背景颜色用于设置文档