最新网络工程师教程(三)

企业网站维护企业网站维护Page3/23课程目标了解Dreamweaver的工作环境和制作网页的常识理解网站基础维护的工作过程掌握网站页面的制作维护技术Page4/23课程结构图网页制作基础网页综合技术应用网站优化、维护利用Dreamweaver制作网页的基本操作技术：包括文本格式化，应用表格，在页面中插入图片、动画。这部分还将讲述构成网页的HTML基本标记等。第一到第三章网页制作各种技术的整合应用。掌握使用CSS样式表美化页面等，用表格安排页面的各个元素，用DW内置的行为命令实现交互功能。利用模板实现页面的外观统一等。第四到第五章根据企业的实际需求，对企业的站点项目整体进行优化。第六章网页制作基础第1章Page6/23本章目标了解网页文本格式化掌握使用表格进行页面布局的方法掌握创建站点的方法Page7/23本章结构网页制作基础创建网站的常识格式化、样式应用表格布局普通表格的作用标准视图下创建布局表格布局视图下创建表格表格属性、格式化表格嵌套网页的文本处理Page8/23网站和站点相关概念2-1网站是日常维护工作内容网络发展，企业有自己的网站网站的维护是网络管理员日常网络维护工作内容之一掌握网站维护技术是网络工程师职业发展的需要案例背景BENET公司站点是典型的静态站点（BENET站点）•静态和动态站点的区别？•例如：新华网的新闻网页是随数据源实时更新的静态站点需要网管手工的维护更新Page9/23网站和站点相关概念2-2项目介绍介绍了教材中涉及的案例BENET公司，企业以及网站的基本情况网站更新、维护的需求网站相关概念、常识的介绍实现项目需求所需要那些技术作为支撑对项目所涉的内容做以全面的介绍•(web)、网站、网页、URL、链接、超文本标记语言、网页制作的CSS样式等Page10/23Internet和万维网•全球范围内网络的网络•Internet的一部分•由包含各种信息的文档组成了解Internet和万维网（）Page11/23万维网2-1Web服务器客户端协议•用于访问Web上资源的一组规则•HTTP是Web协议站点地址或URLHTMLHEAD…………/HEADBODY…………/BODY/HTMLHTML语言用于制作网页Page12/23万维网2-2Web服务器客户端向服务器发送页面请求Web服务器处理请求并返回请求的页面HTTP负责请求和响应Page13/23Web相关术语网站万维网上相关网页的集合网页文件后缀名通常为*.html或*.htm的页面HTML用于制作网页的超文本标记语言(HyperTextMark-upLanguage)Page14/23关于DreamweaverMX一款用于设计、开发网站和Web应用程序的专业HTML编辑器用户可以选择使用布局单元格或框架来设计页面的布局可用于创建文本、插入动态图像、提供网页超链接、创建Flash文本和Flash按钮等可用于组合由某些软件（如Photoshop、ImageReady和Flash等）制作的图形、动画和按钮Page15/23Dreamweaver中的概念静态网页只能浏览，不能实现客户端和服务器端的交流互动动态网页网站页面随用户的输入而变化，能与客户端交流互动本地站点一个在我们自己的计算机上，存储网站所有文件的临时文件夹远程站点位于远程Web服务器上，与本地站点相对应根文件夹用于存储网站文件的本地根目录Page16/23DreamweaverMX入门认识Dreamweaver的界面结构文档窗口、文档工具栏、插入栏面板组•根据自己的喜好，可以定制不同的工作区•可以停靠也可以浮动属性检查器•快速为对象应用属性Page17/23创建网站和网页新建站点，应该注意的规则根目录文件夹应该是专门为远程站点设立的不可将一个硬盘分区或程序文件夹作为网站的根目录最好将网站名作为根目录文件夹名根文件夹内分别再分配几个存储不同类型文件比如Image、CSS、JS等的子文件夹创建、打开、保存文档页面标题、属性的设置演示演示在DreamweaverMX中创建网站和网页Page18/23为网页添加文本要在文档中插入文本，可以使用以下方式：在网页中键入文本从其他应用程序（如MS-Word、记事本和MS-Excel等）复制并粘贴文本将Word文档导入Dreamweaver演示演示在文档中插入文本的步骤Page19/23处理文本段落和标题三种段落格式段落标题预先格式化的处理段落、换行、添加连续空格段落对齐、缩进使用属性检查器中的字体类型、字体大小、字体颜色等设置可以格式化文本Page20/23文本格式化2-1在网页中，段落用于组织内容，一个段落就是一个文本块。Dreamweaver提供了三种基本段落样式：段落标题预先格式化的使用属性检查器中的“格式”选项可应用这些样式段落标题预格式化的Page21/23文本格式化2-2字符字符面板文本格式化设置字体、设置字号、文本颜色、文本样式通过属性面板实现演示演示在DreamweaverMX中演示文本格式化Page22/23列表列表项目列表编号列表项目列表编号列表演示演示在DreamweaverMX中演示创建列表Page23/23阶段总结背景及项目情况介绍创建站点处理网页文本为页面添加文本网页文本的格式处理Page24/23表格多表格总体布局思考：看到这些原文件，会想到什么？页面的元素如何排列的呢？Page25/23创建表格、格式化表格基础标准模式下创建表格创建表格时应该注意的参数项的设置表格格式化（例：多彩的表格）处理表格•处理行和列•处理单元格表格属性•边框、背景色等演示演示在DreamweaverMX中演示创建表格以及进行格式化处理Page26/23表格布局使用表格布局网页布局视图下用表格布局表格嵌套例：blueideaBENET网站首页•注意外层表格的宽度和内层表格宽度的单位设置演示演示在DreamweaverMX中演示创建布局表格Page27/23阶段总结了解表格的基本结构如何使用表格表格的格式化表格属性的修改表格布局的方法嵌套表格Page28/23本章总结DreamweaverMX是一个所见即所得的网页编辑工具，在工作区内提供了便于工作的各种面板和工具栏，可以快速创建网页文档，建立站点为Dreamweaver的网页文本格式化，如粗体、斜体、下划线三种段落格式：段落、标题、和预先格式化的常用的列表样式，如何为设置列表表格可以装载数据，但是更多的是用表格做页面的布局在标准视图下可以为网页插入普通表格在布局视图下插入表格，分层处理布局表格的嵌套关系HTML表格可以装载页面的各种元素，文字、图片、动画、多媒体等等Page29/23实验任务1：添加网页文本并进行格式化任务2：修改数据表格、完善布局表格Page30/23任务1注意事项提示1：创建站点时，注意目录层次的规划提示2：注意处理网页文本格式的时候，注意快捷方式的运用Page31/23任务2注意事项提示1：表格的嵌套层次，不要超过三层。外层用绝对宽度，嵌套层建议用相对宽度提示2：注意布局表格的边框值、单元格间距和填充的参数的设定，最终影响布局的效果Page32/23第1章内容回顾DreamweaverMX是一个所见即所得的网页编辑工具，在工作区内提供了便于工作的各种面板和工具栏，可以快速创建网页文档，建立站点为Dreamweaver的网页文本格式化，如粗体、斜体、下划线三种段落格式：段落、标题、和预先格式化的常用的列表样式，如何为设置列表表格可以装载数据，但是更多的是用表格做页面的布局在标准视图下可以为网页插入普通表格在布局视图下插入表格，分层处理布局表格的嵌套关系HTML表格可以装载页面的各种元素，文字、图片、动画、多媒体等等HTML基本标记和网站链接第2章Page34/23本章目标熟悉HTML文档的基本结构掌握运用基本标记修改网页格式及外观掌握设置超链接的几种方法以及按照不同目的设置各个目标参数Page35/23本章结构HTML基本标记和网站链接标题标记HTML基础HTML基本语法超级链接和路径URL概述链接路径链接类型及目标属性创建链接HTML文档结构HTML基本标记段落标记文本格式标记列表其他常用标记使用特殊字符META标记文档结构HTML表格标记Page36/23HTML基础进行复杂的网页设计必须学习HTML标记语言HTML(HypertextMarkedLanguage)超文本标记语言用HTML编写的超文本文档称为HTML文档能独立于各种操作系统平台运行用于描述网页的格式设计和它与web上其它网页的连结信息HTML并不是一种程序语言，它只是一种排版网页中资料显示的结构语言需要通过web浏览器显示出效果超文本语言，是除了文字以外它可以插入图片、声音、动画、视频等多媒体内容Page37/23HTML文档结构HTML文档结构HTMLHEADTITLE一个基本的HTML页面/TITLE/HEADBODYCENTERh2欢迎光临我的主页/h2fontcolor=“#FF6600”这是我第一次做主页，无论怎样，我都会努力做得更好！/font/CENTER/BODY/HTML开始标记结尾标记下面是一个基本的网页的HTML源代码头标记文档主体HTML…/HTML标签标记HTML文档的开始和结束这部分包括标题和其他说明信息。包括在HEAD…/HEAD标签内这部分包含文本、图像和链接。它包括在BODY…/BODY标签内在浏览器中的输出结果Page38/23HTML基本语法HTML的标记有以下三种表示方法标记名文本或超文本／元素名这是关闭型标记元素名属性名＝“属性值…文本或超文本／元素名这是带有可选属性的标记元素名这是“非关闭型”标记应用举例：•关闭型，例如：体标记titlehelloword!/title•带有可选属性，例如：bodybgcolor=limegreen绿色的世界充满了生机和希望！/body•非关闭型，/p、hr、br等Page39/23META标记3-1META标记出现在网页的标题部分。META是HTML文档HEAD部分的一个辅助性标记META标记共有两个属性它们分别是http-equiv属性name属性name属性应用name属性主要用于描述网页，与之对应的属性值为content标注网页的作者metaname=作者content=BlueMokacontent中的内容主要是便于搜索引擎机器人查找信息和分类信息用的例如，要将BlueMoka指定为网页的作者，则使用以下META标记：Page40/23META标记3-2设定关键字例如，要用Keywords（关键字）来告诉搜索引擎你网页的关键字是什么索引向导例如，告诉搜索机器人哪些页面需要索引，哪些页面不需要索引content的参数有all，none，index，noindex，follow，nofollow。metaname=“keywords”content=“IT,教育,网络,科学,培训，职业生涯，未来发展metaname=robotscontent=allPage41/23META标记3-3http-equiv属性http-equiv属性可用来代替name属性。http-equiv类似于HTTP的头部协议，它给浏览器回应一些有用的信息，以帮助正确地显示网页内容•Expires（期限）,可以用于设定网页的到期时间(GMT的时间格式)•refresh（自动刷新）,比如间隔5秒网页自动刷新，并指向新的URL网址：metahttp-equiv=expirescontent