企业网站维护之网页制作基础bvkc.pptx

《企业网站维护之网页制作基础bvkc.pptx》由会员分享，可在线阅读，更多相关《企业网站维护之网页制作基础bvkc.pptx（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、企业网站维护企业网站维护企业网站维护企业网站维护第一学期课程目标示意图第一学期课程目标示意图InternetVlan trunk单臂路由单臂路由RIP v2 路由路由接入互联网接入互联网VLANVLANVLANVLAN DCFilesrvPrintsrvProxyVlan trunkVlan trunkInternetChapter2/31课程目标课程目标课程目标课程目标v了解了解Dreamweaver的工作环境和制作网页的常识的工作环境和制作网页的常识v理解网站基础维护的工作过程理解网站基础维护的工作过程v掌握网站页面的制作维护技术掌握网站页面的制作维护技术Chapter3/31课程结构图课

2、程结构图课程结构图课程结构图网网页制作基制作基础网网页综合技合技术应用用网站网站优化、化、维护利用Dreamweaver制作网页的基本操作技术：包括文本格式化，应用表格，在页面中插入图片、动画。这部分还将讲述构成网页的HTML基本标记等。第一到第三章第一到第三章网页制作各种技术的整合应用。掌握使用CSS样式表美化页面等，用表格安排页面的各个元素，用DW内置的行为命令实现交互功能。利用模板实现页面的外观统一等。第四到第五章第四到第五章根据企业的实际需求，对企业的站点项目整体进行优化。第六章第六章Chapter4/31网页制作基础网页制作基础网页制作基础网页制作基础第第1章章本章目标本章目标本章目

3、标本章目标v了解网页文本格式化了解网页文本格式化v掌握使用表格进行页面布局的方法掌握使用表格进行页面布局的方法v掌握创建站点的方法掌握创建站点的方法Chapter6/31本章结构本章结构本章结构本章结构网页制作基础网页制作基础网页制作基础网页制作基础创建网站的常识创建网站的常识创建网站的常识创建网站的常识格式化、样式格式化、样式格式化、样式格式化、样式应用表格布局应用表格布局应用表格布局应用表格布局普通表格的作用普通表格的作用普通表格的作用普通表格的作用标准视图下创建布局表格标准视图下创建布局表格标准视图下创建布局表格标准视图下创建布局表格布局视图下创建表格布局视图下创建表格布局视图下创建表格

4、布局视图下创建表格表格属性、格式化表格属性、格式化表格属性、格式化表格属性、格式化表格嵌套表格嵌套表格嵌套表格嵌套网页的文本处理网页的文本处理网页的文本处理网页的文本处理Chapter7/31网站和站点相关概念网站和站点相关概念网站和站点相关概念网站和站点相关概念2-12-1v网站是日常维护工作内容网站是日常维护工作内容网络发展，企业有自己的网站网络发展，企业有自己的网站网站的维护是网络管理员日常网络维护工作内容之一网站的维护是网络管理员日常网络维护工作内容之一 v掌握网站维护技术是网络工程师职业发展的需要掌握网站维护技术是网络工程师职业发展的需要v案例背景案例背景BENET公司站点是典型的静

5、态站点公司站点是典型的静态站点（BENET 站点站点）静态和动态站点的区别？静态和动态站点的区别？例如：新华网的新闻网页是随数据源实时更新的例如：新华网的新闻网页是随数据源实时更新的静态站点需要网管手工的维护更新静态站点需要网管手工的维护更新Chapter8/31网站和站点相关概念网站和站点相关概念网站和站点相关概念网站和站点相关概念2-22-2Chapter9/31Internet Internet 和万维网和万维网和万维网和万维网Internet全球范围内网络的网络Internet 的一部分由包含各种信息的文档组成World Wide Web万万维维网网Chapter10/31万维网万维网

6、万维网万维网2-12-1Web 服务器客户端客户端HTTP协议协议协议用于访问 Web 上资源的一组规则HTTP 是 Web 协议 站点地址或 URLBODYHTML语言用于制作网页Chapter11/31万维网万维网万维网万维网2-22-2Web 服务器客户端客户端向服务器发送页面请求Web 服务器处理请求并返回请求的页面HTTP 负责请求和响应Chapter12/31Web Web 相关术语相关术语相关术语相关术语v网网站站万维网上相关网页的集合万维网上相关网页的集合v网网页页文件后缀名通常为文件后缀名通常为*.html 或或*.htm的页面的页面vHTML用于制作网页的超文本标记语言用于

7、制作网页的超文本标记语言(Hyper Text Mark-up Language)Chapter13/31关于关于关于关于Dreamweaver MXDreamweaver MXv一一款用于款用于设计、开发网站和设计、开发网站和 Web 应用程序的专应用程序的专业业HTML 编辑器编辑器 v用户可以选择使用布局单元格或框架来设计页面用户可以选择使用布局单元格或框架来设计页面的布局的布局v可用于创建文本、插入动态图像、提供网页超可用于创建文本、插入动态图像、提供网页超链接、创建链接、创建 Flash 文本和文本和 Flash 按钮等按钮等v可可用于组合由某些软件（如用于组合由某些软件（如 Pho

8、toshop、ImageReady 和和 Flash 等）制作的图形、动画等）制作的图形、动画和按钮和按钮Chapter14/31DreamweaverDreamweaver中的概念中的概念中的概念中的概念v静静态网页态网页只能浏览，不能实现客户端和服务器端的交流互动只能浏览，不能实现客户端和服务器端的交流互动v动动态网页态网页网站页面随用户的输入而变化，能与客户端交流互动网站页面随用户的输入而变化，能与客户端交流互动 v本地站点本地站点一个在我一个在我们们自己的自己的计计算机上，存算机上，存储储网站所有文件的网站所有文件的临时临时文件文件夹夹v远远程站点程站点位于位于远远程程Web 服服务务

9、器上，与本地站点相器上，与本地站点相对应对应v根根文件夹文件夹用于存储网站文件的本地根目录用于存储网站文件的本地根目录Chapter15/31 Dreamweaver MX Dreamweaver MX入门入门入门入门 v认识认识Dreamweaver 的界面结构的界面结构文档窗口文档窗口、文档工具栏、插入栏、文档工具栏、插入栏面板组面板组 根据自己的喜好，可以定制不同的工作区根据自己的喜好，可以定制不同的工作区可以停靠也可以浮动可以停靠也可以浮动属性检查器属性检查器 快速为对象应用属性快速为对象应用属性Chapter16/31 创建网站和网页创建网站和网页创建网站和网页创建网站和网页v新建站

10、点，应该注意的规则新建站点，应该注意的规则 根目录文件夹应该是专门为远程站点设立的根目录文件夹应该是专门为远程站点设立的不可将一个硬盘分区或程序文件夹作为网站的根目录不可将一个硬盘分区或程序文件夹作为网站的根目录最好将网站名作为根目录文件夹名最好将网站名作为根目录文件夹名根文件夹内分别再分配几个存储不同类型文件比如根文件夹内分别再分配几个存储不同类型文件比如Image、CSS、JS等的子文件夹等的子文件夹v创建、打开、保存文档创建、打开、保存文档 v页面标题、属性的设置页面标题、属性的设置在在 Dreamweaver MX 中创建网站和网页中创建网站和网页Chapter17/31为网页添加文本

11、为网页添加文本为网页添加文本为网页添加文本v要在文档中插入文本，可以使用以下方式：要在文档中插入文本，可以使用以下方式：在网页中键入文本在网页中键入文本从其他应用程序（如从其他应用程序（如 MS-Word、记事本和、记事本和 MS-Excel 等）复制并粘贴文本等）复制并粘贴文本将将 Word 文档导入文档导入 Dreamweaver在文档中插入文本的步骤在文档中插入文本的步骤Chapter18/31处理文本处理文本处理文本处理文本v段落和标题段落和标题 v三种段落格式三种段落格式段落段落标题标题预先格式化的预先格式化的处理段落、换行、添加连续空格处理段落、换行、添加连续空格段落对齐、缩进段落

12、对齐、缩进v使用属性检查器中的字体类型、字体大小、字体使用属性检查器中的字体类型、字体大小、字体颜色等设置可以格式化文本颜色等设置可以格式化文本Chapter19/31文本格式化文本格式化文本格式化文本格式化2-12-1在网页中，段落用于组织内容，在网页中，段落用于组织内容，一个段落就是一个文本块。一个段落就是一个文本块。Dreamweaver 提供了提供了三种基本段落样式：三种基本段落样式：段落段落标题标题预先格式化的预先格式化的使用属性检查器中的使用属性检查器中的“格式格式”选项选项可应用这些样式可应用这些样式段落段落标题标题预格式化的预格式化的Chapter20/31文本格式化文本格式化

13、文本格式化文本格式化2-22-2v字符字符字符面板字符面板v文本格式化文本格式化 设置设置字体字体、设置、设置字号字号、文本、文本颜色颜色、文本样式、文本样式通过属性面板实现通过属性面板实现在在 Dreamweaver MX 中演示文本格式化中演示文本格式化Chapter21/31列表列表列表列表v列表列表项目列表项目列表编号列表编号列表项目列表项目列表编号列表编号列表在在 Dreamweaver MX 中演示创建列表中演示创建列表Chapter22/31阶段总结阶段总结阶段总结阶段总结背景及项目情况介绍背景及项目情况介绍创建站点创建站点处理网页文本处理网页文本为页面添加文本为页面添加文本网页

14、文本的格式处理网页文本的格式处理Chapter23/31表格表格表格表格多表格总体布局思考：看到这些原文件，思考：看到这些原文件，思考：看到这些原文件，思考：看到这些原文件，会想到什么？会想到什么？会想到什么？会想到什么？页面的元素如何排列的呢？页面的元素如何排列的呢？页面的元素如何排列的呢？页面的元素如何排列的呢？Chapter24/31创建表格、格式化创建表格、格式化创建表格、格式化创建表格、格式化v表格基础表格基础标准模式下创建表格标准模式下创建表格创建表格时应该注意的参数项的设置创建表格时应该注意的参数项的设置v表格格式化表格格式化（例：多彩的表格）（例：多彩的表格）处理表格处理表格处

15、理行和列处理行和列处理单元格处理单元格表格属性表格属性边框、背景色等边框、背景色等在在 Dreamweaver MX 中演示创建表格以及中演示创建表格以及进行格式化处理进行格式化处理Chapter25/31表格布局表格布局表格布局表格布局v使用表格布局网页使用表格布局网页布局视图下用表格布局布局视图下用表格布局表格嵌套表格嵌套 例：例：blueidea BENET网站首页网站首页注意外层表格的宽度和内层表格宽度的注意外层表格的宽度和内层表格宽度的单位设置单位设置在在 Dreamweaver MX 中演示创建布局表格中演示创建布局表格Chapter26/31阶段总结阶段总结阶段总结阶段总结 了解

16、表格的基本结构了解表格的基本结构 如何使用表格如何使用表格 表格的格式化表格的格式化表格属性的修改表格属性的修改表格布局的方法表格布局的方法嵌套表格嵌套表格Chapter27/31本章总结本章总结本章总结本章总结v Dreamweaver MX是一个所见即所得的网页编辑工具，是一个所见即所得的网页编辑工具，在工作区内提供了便于工作的各种面板和工具栏，可以快在工作区内提供了便于工作的各种面板和工具栏，可以快速创建网页文档，建立站点速创建网页文档，建立站点v 为为Dreamweaver的网页文本格式化，如粗体、斜体、下的网页文本格式化，如粗体、斜体、下划线划线v三种段落格式：段落、标题、和预先格式

17、化的三种段落格式：段落、标题、和预先格式化的v常用的列表样式，如何为设置列表常用的列表样式，如何为设置列表v表格可以装载数据，但是更多的是用表格做页面的布局表格可以装载数据，但是更多的是用表格做页面的布局v在标准视图下可以为网页插入普通表格在标准视图下可以为网页插入普通表格v在布局视图下插入表格，分层处理布局表格的嵌套关系在布局视图下插入表格，分层处理布局表格的嵌套关系vHTML表格可以装载页面的各种元素，文字、图片、动画、表格可以装载页面的各种元素，文字、图片、动画、多媒体等等多媒体等等 Chapter28/31实验实验实验实验v任务任务1：添加网页文本并进行格式化：添加网页文本并进行格式化

18、v任务任务2：修改数据表格、完善布局表格：修改数据表格、完善布局表格Chapter29/31任务任务任务任务1 1v注意事项注意事项提示提示1：创建站点时，注意目录层次的规划创建站点时，注意目录层次的规划提示提示2：注意处理网页文本格式的时候，注意快捷方式的运用注意处理网页文本格式的时候，注意快捷方式的运用Chapter30/31任务任务任务任务2 2v注意事项注意事项提示提示1：表格的嵌套层次，不要超过三层。外层用绝对宽度，嵌表格的嵌套层次，不要超过三层。外层用绝对宽度，嵌套层建议用相对宽度套层建议用相对宽度提示提示2：注意布局表格的边框值、单元格间距和填充的参数的注意布局表格的边框值、单元格间距和填充的参数的设定，最终影响布局的效果设定，最终影响布局的效果Chapter31/31