网站建设与网页制作复习ppt课件.ppt

E mail 学习内容 网站建设概述网页界面设计艺术HTML语言简介织网工具Dreamweaver动态网页技术 教学要求 了解一定的网页制作的高级部分 包括用来实现前台交互 制作动感网的DHTML和实现后台交互 制作动态网页的ASP 掌握网页界面设计的方法和要素 版式设计 文字编排 图形和动画的应用 色彩的应用等 掌握网页制作各项基本技能 包括HTML语言 可视化网页制作工具 Dreamweaver 具有较强的自主设计与制作网页的基本素质与能力 课程特点 网页建设与网页制作 是一门以实际技能训练为主要教 学内容与目标的实践性课程 知识学习与技能训练的有机结合贯穿于整个教 学过程 最终将以学习者是否具有独立设计并建设网站的基本能力与实践结果作为考核的主要评判标准 学习方法 3P一体化 即Principle Practice Product 原则 实践 作品 预祝大家取得好成绩 考试与实验说明 出勤10 实验 网站设计 20 期末笔试70 考试 课程体系结构 以电子商务 网页制作为中心的多元化授课体系 网站建设概述 HTML语言基础 网页制作工具 网页美化工具 网络新领域 新技巧 网站建设 网页制作 第1章网站建设概述 第一节WWW基础知识 第二节网页界面构成要素 第三节网站开发常用工具 第四节网站建设与规划 第1节www基础知识 WWW服务的基本概念WWW服务的特点WWW服务的工作方式WWW服务的常用术语 1 WWW服务的基本概念 WideWeb 全球信息网 是以超文本标记语言 HTML HyperTextMarkupLanguage 与超文本传输协议 HTTP HyperTextTransferProtocol 为基础 提供面向Internet服务 具有一致的用户界面的信息浏览系统 2 WWW服务的特点 1 超媒体特性 在WWW中可以多媒体 如文本 图像 声音 动画 影像等 的形式传递信息 从而更吸引人的注意力 使传播的信息更易于接受和理解 从而达到更好的传播效果 2 以超文本 Hypertext 方式组织多媒体信息 Web中含有指向其它Web页或其本身内部特定位置的超级链接 HyperLink 可理解为 指针 任何文字 图片 图标等都可被指定为一个超链接 当你选择链接 只要用鼠标在链接上单击一下 就会跳转到链接的内容并显示在你的计算机上 3 用户可以在世界范围内任意查找 检索 浏览信息 4 网点间可以互相链接 以提供信息查找和漫游的透明访问 3 WWW服务的工作方式 WWW浏览器软件安装在用户的计算机上 用户必须通过浏览器来查看服务器上的内容 当客户通过浏览器向服务器发送一个查询请求时 服务器负责对来自客户机的请求做出回答 找到信息和传递文件给用户 当客户机接收到文件 浏览器软件解释该文件在客户机上 用户才能在屏幕上看到 WWW系统的结构采用客户机 服务器模式 4 WWW服务的常用术语 1 URL 统一资源定位符 Internet中使用URL UniformResourceLocators 来定位信息资源所在位置 URL格式由三部分组成 描述了浏览器检索资源所用的协议 资源所在计算机的主机地址及资源的路径与文件名 标准的URL如下 表示用户要连接到名为的主机上 采用http方式读取名为index html的超文本文件 URL通过访问类型来表示访问方式或使用协议 常用的类型有 Webpageshttp ftp Telnettelnet Filefile 2 网页WWW服务器上的基本信息单位就是网页 网页是单个的HTML文件 是作者公布信息的最小单位 3 网站网站是一个存放在WWW服务器上的完整信息的集合体 由一组相关联的网络文件组成 包含一个或多个网页 4 主页 首页 主页是一个特殊的网页 是整个网络文件的起始点和汇总点 读者开始浏览网络文件的开始点 第2节网站界面的基本要素 文字图像声音视频与动画超级链接表格表单导航栏 1 文字 文字是人类最重要的信息载体与交流工具 网页中的信息也以文字为主要表现形式 与图像相比 文字虽然不如图像那样能够很快引起浏览者的注意 但却能准确地表达信息的内容和含义 网页中的文字主要有标题文字和说明性文字 此外 用户还可以在网页中设计各种各样的文字列表 来清晰表达一系列项目 可以对网页中的文字赋予字体 字号 颜色等属性 由文字制作出的网页占用空间小 因此 当用户浏览时 可以很快的展现在用户面前 2 图像 一个优秀的网页 除了有吸引浏览者的文字形式和内容外 图像的表现功能是不能低估的 图像能将信息传达的更生动 形象 直观 增强了网页的宣传力 号召力 感染力 1 链接按钮网页上的链接按钮有一些是由小图片取代文字制作 具有直观 形象的特点 可使网页更加美观 2 背景图像为了加强视觉效果 有些网页在整个网页的底层放置了图像 称作背景图 来衬托主题 但是一个比较大的图像 需要占据较大的空间 致使网页的显示速度明显变慢 3 主图在网页中 通常会放置一些图片来突出网页主题 主图与背景图不同 背景图是衬托主题 而主图是突出主题 表现主题 网页中使用的图像格式 网页中常用的图像文件格式为GIF JPEG JPG PNG 其中使用最广泛的是GIF和JPEG两种格式 GIF是GraphicsInterchangeFormat的简写 用来存储Indexed Color模式的图像 它是采用无损压缩方式压缩的图像文件格式 它的GIF89a格式 能储存成背景透明化的形式 并且可以将多张图片保存在同一个GIF文档中 而且能以默认播放的顺序显示这些图片 用来创造动画的效果 普通GIF文件背景透明GIF89A文件动画GIF89A文件 JPEG是其制定组织JointPhotographicExpertsGroup的简称 其压缩的方法属于一种失真的处理方式 可以依所需的压缩比率调整图片品质 以得到最小的图片尺寸 PNG是PortableGraphicsNetwork的简称 在1996年才由W3C WorldWideWebConsortium 所制定的Web标准图片格式 它采用的是一种无损压缩方式 PNG格式也可生成透明背景 目前没有普遍应用于网页设计 3 声音 声音是多媒体网页的一个重要组成部分 用于网络的声音文件的格式非常多 常用的有MIDI WAV MP3 RM等 很多浏览器不要插件也可以支持MIDI WAV格式的文件 而MP3和RM格式的声音文件则需要专门的浏览器播放 在网页中使用声音有两种方式 一是使用声音文件作为背景音乐 这时应尽量使用MIDI格式 否则会影响网页下载的速度 另一种方式是在网页中设置一个打开声音文件的链接 让音乐播放变得可以控制 4 视频与动画 视频文件的格式也非常多 网页中常用的有Ram AVI等 Ram格式需使用专门的播放器播放 网页中使用的动画通常为gif和swf两种动画文件类型 swf格式需要使用flash播放器 视频和动画的采用让网页变得精彩而有动感 5 超级链接 超级链接是从一个网页指向另一个目的端的链接 例如指向另一个网页或者相同网页上的不同位置 这个目的端通常是另一个网页 但也可以是一幅图片 一个电子邮件地址 一个文件 一个程序或者是本网页中的其他位置 其热点通常是文本 图片或图片中的区域 也可以是一些不可见的程序脚本 当浏览者单击超级链接热点时 其目的端将显示在Web浏览器上 并根据目的端的类型以不同方式打开 例如 当指向一个AVI文件的超级链接被单击后 该文件将在媒体播放软件中打开 如果单击的是指向一个网页的超级链接 则该网页将显示在Web浏览器上 加下划线的文字 就是已经建立了超链接的文本 6 表格 在网页中表格用来控制网页中信息的布局方式 这包括两方面 一是使用行和列的形式把许多相互关联的信息集中起来 便于用户分析 比较 二是可以利用表格来控制各种网页元素在网页中布局定位 对网页进行排版 利用表格进行排版 7 表单 网页中的表单通常用来接受用户在浏览器端的输入 然后将这些信息发送到用户设置的目标端 这个目标可以是文本文件 Web页 电子邮件 也可以是服务器端的应用程序 表单一般用来收集联系信息 接受用户要求 获得反馈意见 设置来宾签名簿 让浏览者注册为会员并以会员的身份登陆站点等 表单由不同功能的表单域组成 最简单的表单也要包含一个输入区域和一个提交按钮 站点浏览者填写表单的方式通常是输入文本 选中单选按钮或复选框 以及从下拉列表框中选择选项等 8 导航栏 导航栏是用户在规划好站点结构 开始设计主页时必须考虑的一项内容 导航栏的作用就是引导浏览者游历站点 事实上 导航栏就是一组超级链接 这组超级链接的目标就是本站点的主页以及其他重要网页 在设计站点中的诸网页时 可以在站点的每个网页上显示一个导航栏 这样 浏览者就可以既快又容易的转向站点的其他网页 一般情况下 导航栏应放在网页中较引人注目的位置 通常是在网页的顶部或一侧 导航栏既可以是文本链接 也可以是一些图形按钮 9 框架页面 一般情况下都是一个浏览器窗口显示一个的Web页面 这一类页面简单 直观制作方便 但是当要求在一个窗口内容纳大量信息时 比如一个大型网站的首页 这种页面就很难胜任了 这时 我们就必须运用框架技术来解决问题 框架的作用就是把浏览器窗口划分为若干个区域 每个区域显示不同的网页 提示 网页界面重要的一个元素 课程体系结构 以网页制作为中心的多元化授课体系 网站建设概述 HTML语言基础 网页制作工具 网页美化工具 网络新领域 新技巧 网站建设 第2章网站开发常用工具 一 网页开发工具二 网页美化工具三 网页动画工具 网页制作基础 HTML语言 HTML语言的一些基本概念 HTML语言的语法 HTML文本的基本结构 HTML语言的标记及其用法 HTML实例 这里是网页标题这是我的第一个网页这是用HTML语言编写的 以后还要学习网页编著工具 以下是一个网页的源代码 这是显示结果 HTML语言的一些基本概念 1 什么是HTML HTML HypertextMarkedLanguage 即超文本标记语言 是一种用来制作超文本文档的简单标记语言 用HTML编写的超文本文档称为HTML文档 它能独立于各种操作系统平台 如UNIX WINDOWS等 超文本 因为它可以加入图片 声音 动画 影视等内容 因为它可以从一个文件跳转到另一个文件 与世界各地主机的文件连接 2 HTML语言的构成HTML文件由标记 代码和注释组成 标记 HTML中用来控制文字 图形等显示方式的符号 如网页上面的标记里面包含了属性和值注释 HTML语言的语法规则 扩展名为 htm或 html HTML不区分大小写 多数HTML标记可以嵌套 但不可以交叉 HTML文件一行可以写多个标记 一个标记可分多行书写 不用任何续行符 HTML文件中换行 回车和空格的表示方法分别是 和 nbsp HTML文本结构 HTML文件的正文写在这里 和 是HTML文件的开始和结束标记 浏览器从开始执行到结束 和之间的内容表示文件的头部信息 标题 预定义变量等 标记表示网页的标题 中间不能用别的标记 和标记 网页中所有的内容均包含在其间 HTML语言的标记及其用法 1 页面标记 显示在标题栏中 仅有一个 中间可以嵌套多个标记 添置多种属性 来设置主体内容的背景 外观等 显示文本或图像 该标记建立超链接 标记中间可以嵌套其他标记 如图像标记Image 文本格式标记font等 例如 href 链接目标的地址 target 链接目标的窗口名 若windowname不存在 则打开一个新窗口 HTML语言的标记及其用法 标尺线标记 属性有 width 绝对 相对 size align left right center color 2 文字格式标记标题设置标记 n 标题字号 1 2 3 4 5 6 数字越小 字号越大 属性有 face 字体 size 字号 1 7 值越大 字越大 HTML语言的标记及其用法 字型设置标记 HTML语言的标记及其用法 段落标记 强制换行标记 预排格式标记 文本对齐方式标记 属性有 align style等 之间加入的文本将会在浏览器中按两边缩进的方式显示出来 3 列表标记无序列表 用来创建一个标有圆点的列表 有序列表 它是用来创建一个标有数字的列表 HTML语言的标记及其用法 4 表格标记 建立表格 其间可以通过加入多个标记和属性来建立表格 有关表格的标记有 表格的说明 开辟一行 开辟一列 HTML语言的标记及其用法 5 图像和多媒体记标6 超链接标记 7 表单标记 HTML语言的标记及其用法 背景色彩和文字色彩属性bgcolor 背景色彩text 非可链接文字的色彩link 可链接文字的色彩alink 正被点击的可链接文字的色彩vlink 已经点击 访问 过的可链接文字的色彩 rrggbb色彩是用16进制的红 绿 蓝 red green blue RGB 值来表示 HTML语言的标记及其用法 背景图像绝对地址和相对地址当前目录使背景不滚动 HTML语言的标记及其用法 页面空白 Magin 页面左边的空白页面上方的空白 天头 页面右边的空白页面下方的空白 是数字 本章练习 1 用HTML语言编辑一个 htm文件 使其在浏览器上显示的效果如下图所示 2 为自己设计的站点用HTML语言制作静态网页 课程体系结构 以网页制作为中心的多元化授课体系 网站建设概述 HTML语言基础 网页制作工具 网页美化工具 网络新领域 新技巧 网站建设 第三章网页制作工具之 Dreamweaver4 0 一 Dreamweaver桌面的基本结构 二 Dreamweaver的菜单功能和实现 三 Dreamweaver的常用操作 四 Dreamweaver应用 Dreamweaver桌面的基本结构 标题栏 显示当前正在编辑的文件的标题 括号中显示文件名 菜单栏 Dreamweaver所有的功能都可以在菜单中找到 工具栏 一些常用的操作图标 包括视图工具 页面标题工具 文件管理工具等 文档窗口 其内容根据所选视图的不同而不同 状态栏 显示当前文档的信息或一些编辑状态 包括以下几种 标签选择器 页面信息 微型发射台 各种工具面板 状态栏 标签选择器可以用来显示光标所在位置或所选对象的层次结构 在页面中选定某个对象后 标签选择器中会将选择的标签加粗显示 页面信息第一项 用于显示和控制文档窗口的大小 单击旁边的小箭头 可以从列表中选择窗口的尺寸 第二项 用于显示和估计文档的大小及下载这个页面所需时间 包括所有与其相链接的图片及Shockware电影 微型发射台 即常用窗口快捷工具栏 如Site 站点管理器 Library 库管理 CSSStyles 样式编辑器 HtmlSource 源代码编辑器 等窗口 点击windows launcher 可以看到迷你发射器放大的样子 如下图所示 叫做 Launcher 面板 点击这里弹出相应的窗口 Launcher面板 即微型发射台 通过Window launcher命令调出该面板 该面板提供了快速显示其他面板的功能 用户可以定制符合自己风格的Launcher面板 Edit preferences命令 选择Panels 可以添加 删除或对元件进行排序 演示定制面板 对象 Objects 面板 可以按下Ctrl F2键 或window object菜单 将其调出 该面板集成了 Insert 主菜单中的命令 用于在网页中插入图形 表格等内容 单击面板上部的小三角 可以在多个功能面板之间切换 面板中各图标功能介绍 Character选卡 Command选卡 Form选卡 Frames选卡 Head选卡 Invisibles选卡 Special选卡 可以按下Ctrl F3键 或window properties菜单 将其调出 属性面板主要用来设定元素的属性 该面板随着我们选择对象的不同而不同 面板中有一个向下的小三角图标 单击后将出现更多的扩展属性 再次单击小三角图标 将关闭扩展属性 恢复到最初状态 下面给出的分别是选中窗口时 上 和选中图像时 下 的属性窗口 属性面板 代码面板 打开代码面板 Window CodeInspector 键盘上的 F10 键 单击文件工作窗口右下方的按钮 设置代码面板 设置代码形式 设置系统 面板上以及固定字体的大小 样式等 设置代码面板的背景 文字和标记的顔色 均在Edit Preferences命令打开的对话框中进行 如下图 可停靠浮动面板 可以通过Window History显示历史面板 默认情况下历史面板中最多可记录前面50步操作 可在Edit Preferences命令下的General选卡中设置 历史面板的具体应用 演示 撤销改变 清空历史面板 自动完成任务 History面板如下图所示 Dreamweaver的菜单功能和实现 1 FILE菜单 New 新建一个文件 NewfromTemplate 利用已经存在的模板来新建文件 Open 打开一个已经存在的文件 OpeninFrame 在框架中打开文件 Close 关掉目前所有的窗口 Save 保存对当前文件的修改 Saveas 将当前文件改名另存 SaveasTemplate 将当前文件存为模板 SaveAllFrames 保存当前所有框架的文件 Revert 将当前文件恢复至上一次存盘时的状态 Import 导入各种格式的文件 Export 导出各种形式的文件 Convert 转换浏览器方式 PreviewinBrowser 指定浏览器或编辑浏览器列表 DebuginBrowser 在浏览器中进行调试 CheckLinks 检查链接是否正确 CheckTargetBrowsers 用不同的浏览器浏览当前页面 DesignNote 设计节点 Exit 退出UltraDev4程序 Edit菜单 Undo 取消上一步操作 Redo 重新执行被撤消的操作 Cut 剪切所选择区域并将内容复制到剪贴板上 Copy 将所选择内容复制到剪贴板中 Paste 将剪贴板上的内容放入到当前位置 Clear 清除所选区域的内容 CopyHTML 只将所选区域的HTML代码拷贝到剪贴板上 PasteHTML 将剪贴板中内容的HTML代码复制到当前位置 SaveAll 保存窗口中的所有文件 SelectParentTag 选择当前标签的父标签 SelectChild 选择当前标签的子标签 FindandReplace 查找与替换功能 FindNext 查找满足条件的下一个元素 IndentCode 代码缩进 OutdentCode 代码突出 不缩进 BalanceBraces 匹配括号 SetBreakpoint 在当前位置设置断点 RemoveAllBreakpoint 删除所有断点 EditWithExternalEditor 启动外部编辑器进行编辑 Preference UltraDev4的工作参数 KeyboardShortcuts 设置菜单项和工具等的快捷键 View菜单 Code 只显示代码 Design 只显示页面设计情况 CodeandDesign 同时显示代码和页面设置情况 RefreshDesignView 刷新页面设计窗口 DesignViewtoTop 定义一个本地站点 在开始用Dreamweaver制作网页时 首先要定义一个本地站点 作为一个网站 里面有很多网页文件 图片 甚至Flash动画等 如果不进行管理归档 分散在硬盘的各个地方就无法方便地进行网页发布 定义本地站点 就是在硬盘上建立一个目录 将所有的网页和相关的文件都放在里面 以便进行网页的制作和管理 单击 Site 菜单下的 NewSite 命令 弹出 SiteDefinition 定义站点 对话框 在 Category 列表中的第一项 LocalInfo 被选中 用来定义一些本地信息 在WideWeb 发展的初期人们制作网页是通过直接编写HTML代码来实现的 这种手工编码制作网页对网页设计人员的要求较高 编码效率低 因此 对大多数网页设计人员来说采用这个方式比较困难 2 可视化网页编辑工具 随着网页制作技术的不断发展 出现了诸如FrontPage Dreamweaver等可视化的网页编辑工具 利用这些工具人们在可视环境下编辑制作网页元素 由编辑工具自动生成对应的网页代码 如要在网页上显示表格 就可直接在工作区中绘制表格而不用考虑编码的规则和语法 利用可视化工具编辑网页操作简单直观 是大众化的网页编辑方式 FrontPage是由Microsoft公司推出的Web页面制作工具软件 FrontPage使网页制作者能够更加方便 快捷地创建和发布网页 具有直观的网页制作和管理方法 简化了大量工作 FrontPage界面与Word PowerPoint等软件的界面极为相似 为使用者带来了极大的方便 Dreamweaver是由Macromedia公司推出的一款网页制作软件 它具有可视化编辑界面 用户不必编写复杂的HTML源代码就可以生成跨平台 跨浏览器的网页 Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用 所以它是网页设计者的首选工具 它可以满足多层次需求 是功能强大的可视化 专业级网页设计及制作工具 3 DHTML技术 DHTML是什么 DHTML是DynamicHypertextMarkupLanguage的缩写 为了和传统的HTML相区别 DHTML通常称为 动态HTML DHTML将HTML CSS和脚本语言有机结合在一起 来制作充满动感的交互性网页 HTML用来定义网页元素 如段落 表格等 CSS用来描述元素属性 如大小 颜色 位置等 脚本语言用来操纵网页元素和浏览器 4 动态网页技术 在Internet早期 Web站点大都是由静态web页组成 静态页面只能固定地显示事先设计好的页面内容 随着Web业务处理越来越多 业务需求层次越来越高 特别是一些特殊的业务需求 比如商业网站中客户资料的获得 产品信息的查询 信息的反馈等 HTML的局限性日益明显 因此能够与用户进行动态交互的技术 就应运而生了 动态网页页面内容经过了服务端处理 完成了动态的个性化设置 但是客户端用户所接收到的页面与传统页面并没有任何区别 1 CGI技术CGI CommonGatewayInterface 公用网关接口 用来实现CGI应用程序的编程语言有许多种 如VisualBasic C C Perl等 当用户在浏览器端填好表单要求输入的资料 提出HTTP请求后 Web服务器端执行该表单所设定的CGI应用程序 处理访问者输入的信息并据此做出响应 将其运行结果传输到客户端的浏览器上 由于CGI程序不是整合在HTML文档中 因此须使用与HTML不同的设计过程来设计一个应用程序 每一次修改程序都必须重新将CGI程序编译成可执行文件 使用CGI方式的缺点是效率低下 2 ASP技术ASP ActiveServerPages 是微软公司推出的Web应用程序开发技术 使用ASP可以建立动态的 交互的 高效的Web服务器应用程序 ASP允许用服务器端脚本来扩展HTML 使HTML编写人员可以利用VBScript JavaScript或其他第三方脚本语言编程 实现动态网页 如果去掉这些包含实现动态功能的脚本语句 它和标准的HTML文件没有任何区别 ASP核心技术是对组件和对象技术的充分支持 利用ASP内建对象可以进一步扩展HTML 使脚本更加强大 ASP还包含标准的ActiveX组件 ASP本身封装了一些基本组件和常用组件 同时也可以使用第三方组件 通过访问组件可以简化编程 快速 简易地完善HTML 3 JSP技术JSP JavaServerPages 是由Sun公司推出的 基于JavaServlet以及整个Java体系的Web开发技术 利用这一技术可以建立先进 安全和跨平台的动态网站 JSP和微软的ASP在技术方面有许多相似之处 两者都是为基于Web应用实现动态交互网页制作提供的技术环境支持 两者都能够为程序开发人员提供实现应用程序的编制与自带组件设计 而且都能够替代CGI使网站建设与发展变得较为简单与快捷 不过两者是来源于不同的技术规范组织 为了使制作的网页更为美观 用户在利用网页制作工具制作网页时 还需利用网页美化工具对网页进行美化 二 网页美化工具 Fireworks是Macromedia公司开发的图形处理工具 是专门为制作网页图形而设计的软件 同时也是专业的网页图形设计及制作的解决方案 作为一款为网络设计而开发的图像处理软件 Fireworks还能够自动切割图像 生成光标动态感应的JavaScript程序等等 而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器 Flash是Macromedia公司开发的矢量图形编辑和动画创作的专业软件 它是一种交互式动画设计工具 用它可以将音乐 声效 动画以及富有新意的界面融合在一起 以制作出高品质的网页动态效果 它主要应用于网页动画制作和多媒体创作等领域 功能十分强大和独特 已成为交互式矢量动画的标准 在网上非常流行 三 网页动画工具 第4节网站建设与规划 有计划 按步骤的进行 才能达到事半功倍的效果 1 分析阶段 研究用户需求 建站目的 提供的服务 网站的功能 网站系统分析 业务流程 数据流程分析 开发方法 开发环境选择 规划网站内容 制订开发任务 对工作进度进行规划 提供详实的网站系统开发策划书 2 设计阶段 精心挑选准备要发布的信息资料网站信息结构设计网站链接结构设计站点目录结构设计网页文件命名设计数据库设计网站风格 板式 色彩 logo等设计 对网站进行整体设计 以确保网站内容条理清楚 结构合理 不仅可以很好地体现设计者的意图 也将使网站可维护性与可扩展性增强 准备要发布的信息资料 收集整理网站内容所需资料 图像的制作 音频 视频的制作等 要求 1 应精心挑选要