网页制作基础网页设计第一讲ppt课件.ppt

网站开发基础 学习目标 理解网页的基本原理 区分静态网页和动态网页 掌握HTML语言的语法规则 掌握基本的网页标记符和属性 了解网页制作的常用工具 理解网站开发的流程 Part1 网页的基本概念 Internet与WWW 通俗地讲 Internet就是许多功能不同的计算机通过线路连接起来组成的一个世界范围的网络 Internet与WWW Internet提供的服务 WWW服务 网上冲浪 电子邮件服务 Email 文件传输 FTP 网络游戏即时信息传递 OICQ WWW与浏览器 WWW是由遍布在Internet上的称为Web服务器的计算机组成 它将不同的信息资源有机地组织到一起 通过浏览器进行浏览 WWW与浏览器 网站与主页 在逻辑上可视为一个整体的一系列页面的有机集合称为网站 WebSite或Site 作为一个组织或个人在WWW 或其他Web 上开始点的页面称为主页 Homepage HTML的基本工作原理 HTML HypertextMarkupLanguage 是一种规范 一种标准 它通过标记符 tag 来标记要显示的网页的各个部分 HTML的基本工作原理 通过在网页中添加标记符 可以告诉浏览器如何显示网页 即确定内容的格式 浏览器按顺序阅读网页文件 HTML文件 然后根据内容周围的HTML标记符解释和显示各种内容 HTML的基本工作原理 演示 HTML的基本原理 静态网页与动态网页 一般网页的每一行HTML代码都是在将页放置到服务器之前由设计人员编写的 因为HTML在放置到服务器后不发生更改 所以这种页称为静态页 例如 大多数的个人网站 当Web服务器接收到对静态页的请求时 服务器将读取该请求 查找该页 然后将其发送到请求浏览器 如图所示 静态网页与动态网页 所谓动态网页 是指根据用户的请求 由服务器动态生成的网页 例如 ASP网页 PHP网页 JSP网页 当Web服务器接收到对动态页的请求时 它将该页传递给应用程序服务器 它读取页上的代码 根据代码中的指令完成页 然后将代码从页上删除 所得的结果将是一个静态页 应用程序服务器将该页传递回Web服务器 然后Web服务器将该页发送到请求浏览器 该过程如图所示 静态网页与动态网页 应用程序服务器使用户能够使用服务器端的资源 如数据库 动态页可以指示应用程序服务器从数据库中提取数据并将其插入页的HTML中 例如 搜索页面 电子商务网站等 Part2 HTML基础 标记符基础 在HTML中 所有的标记符都用尖括号括起来 例如 HTML标记符是不区分大小写的 和没有区别 注意 XHTML要求标记符区分大小写 养成习惯都用小写 标记符基础 绝大多数标记符都是成对出现的 包括开始标记符和结束标记符 某些标记符 例如 只要求单一标记符号 注意 对于XHTML 这样的标记写为开始标记符与结束标记符的区别在于 结束标记符多一个斜杠 不是反斜杠 标记符基础 属性是用来描述对象特征的特性 例如 一个人的身高 体重就是人这个对象的属性 在HTML中 所有的属性都放置在开始标记符的尖括号里 多个属性之间用空格分开 通常也不区分大小写 标记符基础 例如 可以用字体标记符和字号属性指定文字的大小 本行字将以较小字体显示 演示 属性的作用 Web页的基本结构 一个Web页实际上对应于一个HTML文件 HTML文件以 htm或 html为扩展名 最基本的HTML文档包括 HTML标记 首部标记和 以及正文 HTML标记符 和是Web页的第一个和最后一个标记符 Web页的其他所有内容都位于这两个标记符之间 这两个标记告诉浏览器或其他阅读该页的程序 此文件为一个Web页 HEAD标记符 首部标记和位于Web页的开头 其中不包括Web页的任何实际内容 而是提供一些与Web页有关的特定信息 HEAD标记符 首部标记中的内容也用相应的标记符括起来 例如 样式表 CSS 定义位于和之间 脚本定义位于之间 TITLE标记符 在首部标记符中 最基本 最常用的标记符是标题标记和 用于定义网页的标题 当网页在浏览器中显示时 网页标题将在浏览器窗口的标题栏中显示 演示 TITLE的作用 BODY标记符 正文标记符和包含Web页的内容 文字 图形 链接以及其他HTML元素都位于该标记符内 BODY标记符 正文标记符中的文字 如果没有其他标记符修饰 则将以无格式的形式显示 注意 空格 回车这些格式控制在显示时都不起作用 如要使它们起作用 应使用预格式化元素和 小节 综上所述 一个不包含任何内容的基本Web页文件如下所示 背景颜色 在标记符中使用BGCOLOR属性可以为网页设置背景颜色 TEXT属性用于设置正文的颜色 在HTML中 除了使用颜色名称以外 还可以用格式 RRGGBB来表示颜色 演示 设置网页背景颜色 背景图案 使用BODY标记符的BACKGROUND属性可以设置背景图案 HTML语句为 演示 设置网页背景图案 演示 设置网页背景声音 在HEAD中添加 添加注释 不论是编写程序还是制作网页 为所做的工作添加注释都是一种良好的工作习惯 实际上 添加注释是任何开发工作必须遵循的规范之一 添加注释 HTML的注释由开始标记符构成 这两个标记符之间的任何内容都将被浏览器解释为注释 而不在浏览器中显示 演示 添加注释 显示特殊字符 如果用户需要在网页中显示某些特殊字符 例如 大于号 引号 等 则需使用参考字符来表示 而不能直接输入 参考字符以 号开始 以 结束 既可以使用数字代码 也可以使用代码名称 显示特殊字符 例如 要在Web页中显示以下内容 则需使用参考字符 112 演示 特殊字符的显示 演示 创建与测试网页 Page5 Part3 网页制作工具 网页编辑工具 HTML编辑器HomeSiteBBEdit Mac CuteHTML 网页编辑工具 WYSWYG编辑器MacromediaDreamweaverMicrosoftFrontPageAdobeGoLive 素材处理与创作工具 图像浏览与处理ACDSeePhotoshopFireworksPhotoImpact 矢量图创作工具FreeHandCorelDrawIllustrator 素材处理与创作工具 特效制作工具AnfyCool3DGIFAnimator 多媒体制作工具FlashDirectorAuthorwareLiveMotion Part4 网站开发流程 概述 首先定义开发网站的目的 接下来对网站的外观进行设计 然后进行实际页面的制作 然后对所制作的网站进行测试 以确保它符合最初设定的目标 最后是将网站发布 在将网站发布后还需要有维护工作 以便及时更新网站内容 网站规划 确定建设网站的目标分析目标用户对站点的需求确定网站风格考虑网络技术因素网络速度浏览器与分辨率及时交互与插件 网站设计 设计页面的布局页面设计草图导航系统的设计设计原则 通过最少的点击次数得到最多的信息量 保持风格一致 提供页面的位置信息 提供返回上级页面的链接 网站设计 网页中的颜色红 绿 蓝三原色的数值相同则称为安全色 由 00 33 66 99 CC FF 组成的颜色值称为标准安全色 设计颜色方案的原则保持一致性注意可读性 文字 图像 动画和多媒体 中文网站中的字体最好使用默认的 宋体 以及 楷体 黑体 等基本字体 建议使用CSS样式表对站点的字体进行统一管理 使用任何对象时要考虑的一点 是否有利于达到站点目标 网页制作 根据设计阶段制作出的示范网页 通过Dreamweaver等软件在各个具体网页中添加实际内容 包括 文本 图像 声音 Flash电影以及其他多媒体信息 网站测试 对所有影响页面显示的细节因素进行测试 测试页面中的超链接是否能够正常跳转 将本地站点文件夹在计算机硬盘中移动位置 是测试超链接能否正确工作的一种简便方法 网站发布 用户创建了Web页之后 通常可以直接将其保存在硬盘 软盘或光盘上 作为一种电子文档 也可以将其发布到Internet或Intranet上 以便其他浏览者浏览 网站发布 申请网页空间免费收费用FTP上传网页CuteFTPLeapFTP 网站维护 随着网站的发布 应根据访问者的建议 不断修改或是更新网站中的信息 并从浏览者的角度出发 进一步完善网站 这时网站建设工作又返回到了流程中的第一步