《网页制作与站点管理ppt课件》由会员分享,可在线阅读,更多相关《网页制作与站点管理ppt课件(30页珍藏版)》请在金锄头文库上搜索。
1、.,第九章,网页制作,站点管理,与,.,第9章 网页制作与站点管理,Web是Internet网上最受欢迎的一种信息服务系统 主要由两部分组成:一是服务器端即信息的提供者,也称Web站点;二是客户端即信息的接收者。客户端通过浏览器来访问Web站点。Web信息是以网页的方式来组织的 本章主要内容 网页和站点的基本操作 创建超链接 插入对象和设置特殊效果 使用主题、表单和框架 发布站点 建立Web服务器 HTML及脚本语言简介,.,9.1 基本概念,1. 站点与网页 Web(WWW)由形形式式的Web站点组成 Web站点由一系列精心策划和组织的网页组成,.,主页,网页,网页,网页,网页,网页,网页,
2、超链接,.,2. Web特点 超文本、图形界面、与平台无关,分布式、交互、动态 3. HTTP协议 实现Web服务器与客户机之间数据交换 提供一个快速灵活的系统来发送超文本信息 4. HTML语言 超文本语言(标记性语言) 用来编制网页文档(也称HTML文档) 。并不需要经过编译,只需要通过浏览器来打开就可以看到结果 采用了标记方式,描述了每个在网页上的组件,例如文本段落、文本格式、图像、超链接等,.,通过超文本链接能方便地进行各种信息之间切换 HTML版本 欧洲粒子物理实验室(CERN)首次提出来的 HTML2.0 HTML3.0 HTML3.2 HTML4.0 DHTML(动态HTML)
3、动态HTML能够使网页下载到浏览器以后仍然能够随时变换 包含多种技术,如JavaScript, VBScript, Document Object Model(DOM, 文档对象模型), Layers和CSS等,.,9 .2 网页和网站的基本操作,借助于FrontPage,用户无需学会编程,就能快速地设计编制出具有专业水平的网页 9.2.1 FrontPage的窗口,.,在视图栏内有六个功能键 网页、文件夹、报表、导航、超链接、任务 在“网页”视图方式下,设有“普通”、“HTML”、“浏览”三个控制按钮 “普通”方式:可以利用菜单中的命令或工具栏上的按钮来编辑网页 “HTML”方式:可以直接对
4、网页的HTML代码进行编辑操作 “预览”方式:可以预览当前的网页,让编制者观看自己当前所作的网页效果,.,创建Internet站点的一般方法是:先在本地机中建立站点,即创建和编辑好该站点所必需的一系列按一定要求链接起来的网页文档及相关文件,再发布到指定的Web服务器,形成真正的站点 1. 创建新站点 主要是用站点模板和站点向导来创建站点 站点模板是由一组事先经过格式化的空白网页组成的,相当于一个站点的骨架,通过它可以容易地搭起整个站点的框架,9.2.2 创建、打开和删除站点,.,在“我的文档” 文件夹下建立个人站点“Myweb” (1)在“文件”菜单中指向“新建”,选择“站点或网页”,打开“新
5、建 网页或站点”任务窗格 (2)单击“Web站点模板”,弹出 “Web站点模板”对话框 (3)选择用来创建新站点的模板或向导。本例选择“个人站点” (4)在“指定新站点的位置”框中,键入或选择新站点的位置及名称 本例选择的站点位置为“我的文档”,站点名为“Myweb”,例9.1 建立个人站点,.,新建的“个人站点”,新创建的“个人站点”包括4个基本网页和建立了两个文件夹:_Private和Images Web站点的实质是计算机硬盘上的一个文件夹,.,2. 关闭站点 3. 打开站点 4. 删除站点 删除站点时,系统会将该站点内全部内容(包括网页、图片等)删除掉 ,.,9.2.3 普通网页的制作和
6、测试,1. 新建网页 选择“文件”菜单中的“新建”,再选择“网页”命令,或单击“常用”工具栏上的“新建网页”按钮,此时在网页编辑区中即可看到新建的空白网页 .HTM 或 .HTML 与Word编辑文档的操作方法类似 2. 打开网页 3. 保存网页 4. 关闭网页 5. 测试网页 “预览” 选择“文件”菜单中的“在浏览器中预览” 使用IE浏览器来打开指定的网页文档,.,例10.2 编制新网页“江南好”,并把网页加入到站点的导航系统中,新建网页 把该网页加入导航系统中,.,9.3 创建超链接,超链接是Web的灵魂 9.3.1 三种超链接 绝对链接(WWW超链接) 相对链接(站点内的超链接) 书签式
7、超链接(网页内的超链接) 选择“插入”菜单中的“超链接” 命令,系统弹出“创建超链接”对话框 建立“书签式超链接”的方法,.,整幅图片超链接/“热点”超链接 将一幅图片分为几个区域,为每个区域单独建立超链接,9.3.2 图片超链接,.,一组特定格式的超链接,可实现站点中各个网页之间切换观看 选择“插入”菜单中的“导航”命令,弹出“插入Web组件”对话框,9.3.3 导航栏,.,选择导航栏的样式及方向后,在“链接栏属性”对话框中,为导航栏添加项目。示例如下:,导航栏,导航栏,.,9.4 插入对象和设置特殊效果,9.4.1 插入图片、横幅及声音 1. 插入图片 常用图片文件格式为.jpg和.gif
8、 选择“插入”菜单中的“图片”命令,插入活动图片,.,2. 横幅 横幅是一种快速为网页添加标题的方法 选择“插入”菜单中的“网页横幅”命令 3. 设置声音 设置声音的两种方法:背景声音/“插件”,插入横幅及声音,.,9.4.2 插入Web组件,1. 插入字幕 在网页中设置移动字幕,可以使某段文字在网页上循环作水平移动,.,2. 悬停按钮 悬停按钮是个动感按钮,当访问者将鼠标指向该按钮时,按钮就会改变颜色或形状 3. 横幅广告管理器 在网页的同一地方轮流显示不同的图片,可以在有限的网页页面中提供尽可能多的信息 4. 站点计数器 站点计数器通常添加在主页中,用于统计和显示站点被访问的次数,插入We
9、b组件,.,1. 动态HTML效果 设置动态HTML效果后,当打开网页、进行单击、双击或鼠标悬停等操作时,网页内指定的文本、图像、按钮、字幕、链接等对象能够实现某种动画效果,如飞出、缩放等 选定要制作动态效果的对象 选择“格式”菜单中的“动态HTML效果”命令,打开“DHTML效果”工具栏, 再从工具栏中“选择一种事件”、选择一种效果应用及表现方式,9.4.3 动态效果及网页过渡,.,2. 网页过渡 网页过渡是指进入或离开网页时的特殊效果 选定要设置过渡效果的网页 选择“格式”菜单中的“网页过渡”命令,打开“网页过渡”对话框 在对话框中设置“事件”(即网页过渡效果的触发事件),如“进入网页”、
10、“离开网页”等,再设置“过渡效果”,如“盒状收缩”、“向上擦除”等 例10.2 在网页“江南好”中插入滚动字幕、超链接及动态HTML效果,动态效果及网页过渡,.,9.5 使用主题,每一个主题中都有一套设计好的背景图案、项目符号、横幅、超链接和导航栏等 使用主题可以快速地建立一个美观的网页,并使网页具有统一的风格 9.5.1 对站点或网页应用主题 9.5.2 更改主题的颜色和图形,.,9.6 使用表单,表单是网页中收集信息、与访问者进行交互的主要元素 类似Windows对话框 “网上报名”、“网上选课”等都是表单的具体应用,.,先插入一个表单框 再添加文本和插入所需的表单元素 文本框(单行文本框
11、) 文本区(滚动文本框) 选项按钮(单选按钮) 复选框 下拉框 按钮 其中包括“提交”按钮和“重置”按钮,9.6.1 创建表单,.,例9.4 插入一个“留言簿”多行文本框,在“江南好”网页的末尾处插入一个“留言簿” 从“插入”菜单中选择“表单”,再选“表单”,在当前位置上会出现一个表单框 再次选择“插入”菜单中的“表单”,再选“滚动文本框”,则在插入点处插入一个多行文本框 在“滚动文本框属性”对话框中设置 在表单框内的文本框的左侧,键入文字“留言簿”,.,.,9.6.2 处理表单结果,发送到文件 电子邮件发送结果 保存在现有的数据库 发送到其他对象 9.6.3 创建确认网页 确认网页是在访问者提交了一个表单之后自动出现的网页 使访问者了解到自己提交的信息是否已经发送出去,