本教材根据教育部高等学校大学计算机课程教学指导委员会的《高等学校非计算机专业计算机基础课程教学基本要求》编写而成,以培养计算机应用能力为目的,介绍计算机的使用与维护、操作系统的使用、应用文稿的编写技巧、多媒体软件的使用、网页设计与制作、常用工具软件的使用等内容。各章均配有一定数量的实验,并给出了详细的操作步骤。

第5章网页设计与制作万维网(World Wide Web,WWW)是Internet提供的服务之一,它是由许多互相链接的网页组成的信息资源网络,以丰富的文字资料、光彩夺目的图像以及生动活泼的动画效果等,吸引着无数的用户。
本章将介绍HTML、CSS、JavaScript以及如何使用Dreamweaver CS6制作网页。首先概述网页设计的相关知识、工作模式、网站设计流程,然后讲解HTML的文档结构、常见标签及属性、Dreamweaver CS6工作界面、CSS语法及其在HTML文件中的添加方法、两种常见网页布局方法(表格布局和Div布局)、JavaScript语法及其在HTML文件中的添加方法,并以Dreamweaver CS6为例设计一些相关的实验。*后,介绍下一代HTML标准,即HTML5。
5.1网页设计概述〖1〗5.1.1网站与网页〖*4/5〗1. 简介WWW由遍布世界各地的Web服务器组成,而Web服务器又由许多网页(如图51所示)构成,网页中的超链接可将其链接到其他网页,构成万维网纵横交织的结构。
图51网页示例
实际上,网页就是一个纯文本文件,通常是HTML格式,扩展名为html或htm,存放在互联网上某个位置的某台计算机中。浏览网页时,在网页上右击,在弹出的快捷菜单中选择“查看源文件”命令,如图52所示,即可看到网页的实际内容。
图52“查看网页源代码”菜单项
网页通过网址来识别与存取,当我们在浏览器的地址栏中输入网址后按Enter键或单击超链接后,经过一段复杂而又快速的程序,网页文件会被传送到我们的计算机中,*终通过浏览器解释、展示出来。
通过**链接连接在一起的一系列逻辑上可视为一体的页面,称为网站。其中,作为一个组织或个人在WWW上开始的页面,称为首页或主页。
2. 工作模式
WWW采用浏览器/服务器(Brower/Server,B/S)工作模式,如图53所示。服务器是指驻留在Internet上某台计算机上的程序,通常用于存储用户所需信息,并能在用户需要时运行脚本和程序。其任务是等待客户机的连接,监听客户机的请求并为这些请求提供服务。而浏览器是指访问Web的客户端软件,将WWW上的网页文件翻译成网页形式呈现出来。
图53B/S模式
〖1〗〖3〗大学信息技术实用教程第5章网页设计与制作〖3〗〖3〗浏览器是用户与服务器进行通信的软件,常见的有微软的Internet Explorer、谷歌的Chrome浏览器、腾讯的QQ浏览器等。
3. 网站设计流程
网站设计主要有3个阶段: 规划准备阶段、网页设计实现阶段、网站发布维护阶段。
(1) 规划准备阶段: 包括需求分析、搜集资料、规划网站结构和页面内容。
(2) 网页设计实现阶段: 包括网页总体设计、各页面设计制作、链接各页面。
(3) 网站发布维护阶段: 包括测试网站、发布网站、维护更新网站。
5.1.2HTML
HTML(Hypertext Markup Language),即超文本标记语言,通过标记符号来标记网页中的各个部分,告诉浏览器如何显示其中的内容,例如文字如何处理、画面如何安排、图片如何显示等。浏览器按顺序阅读网页文件,然后根据标记符来解释和显示其标记的内容,对书写出错的标记不指出其错误,也不停止其解释执行过程,只能通过显示效果来分析出错原因和出错部位。
需要注意的是,不同的浏览器可能对同一标记符会有不完全相同的解释,因此在不同浏览器中打开网页可能会有不同的显示效果。
1. HTML文档结构
一个网页对应于一个HTML文件,HTML文件以html或htm作为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来编写HTML文件。
标准的HTML文件具有一个基本的整体结构,即HTML文件的开头标记与结尾标记,其中又包括HTML的头部与实体两大部分。有3个双标记符用于页面整体结构的确认,如图54所示。
图54HTML文档基本结构
标记符说明该文件是用HTML来描述的,是文件的始标记。而则表示该文件的结束,是文件的尾标记。
用于表示头部信息结束。头部中包含的标记有页面的标题、序言、说明等内容,一般不作为内容来显示,但影响网页显示的效果。
标记页面正文的开始,标记页面正文的结束。
由于HTML是纯文本文件,使用记事本程序即可编写网页。当然,也可选用所见即所得软件,如Dreamweaver、Frontpage等制作网页。使用这些软件可以在不熟悉甚至不懂HTML的情况下进行网页设计。
【实验51】用记事本编写网页——制作**个网页。
操作步骤:
【步骤1】打开记事本,输入内容如下:

大家好!
【步骤2】将文件保存为网页文件。
执行“文件”→“保存”命令,在打开的“另存为”对话框中,选择保存类型为所有文件(*.*),文件名为51.html,并修改保存路径,如图55所示。
图55保存为网页文件
【步骤3】在所保存路径中找到51.html文件,双击文件图标,用浏览器打开,效果如图56所示。
图56**个网页需要注意的是,用于定义网页的标题,它的内容显示在网页窗口的标题栏中。
2. 常见标签
(1) HTML标题是通过
、
、
、
、
、
定义。
(2) HTML段落是通过
标签定义。
(3) HTML链接是通过标签定义。
(4) HTML图像是通过标签定义。
3. 属性
可以在需要时为HTML标签添加属性,属性一般以名称/值对的形式出现在开始标签中。
例如:
是将段落居中对齐。
是将网页背景颜色设置为黑色。
是将bg.jpg作为网页的背景图片,如果图片较小,则会在屏幕上平铺。
【实验52】常见标签及属性。
操作步骤:
【步骤1】打开记事本,输入如下内容:
这里是标题 1
这里是标题 2
这里是标题 3
这里是标题 4
这里是标题 5
这里是标题 6
**段
第二段
**个网页
其中,href属性指明了超链接的目标链接。
在中,src属性指定所显示图片的文件名,width属性指定所显示图片的宽度,height属性指定所显示图片的高度。
【步骤2】将文件保存为52.html。
【步骤3】用浏览器打开52.html,效果如图57所示,并测试网页中的超链接。
图57预览网页
需要注意的是,为保证能正常链接,须将51.html文件和52.html文件放在同一路径下。
5.1.3Dreamweaver CS6简介
Dreamweaver是Macromedia公司开发的可视化网页制作工具,使用所见即所得的界面,也有HTML编辑的功能,与Flash、Fireworks合在一起称为网页设计三剑客。其中,Dreamweaver用于制作网页文件、Flash用于制作网页动画、Fireworks用于处理网页中的图片。
2005年,Macromedia被 Adobe公司收购,更名为Adobe Dreamweaver(之前称为Macromedia Dreamweaver),随后相继推出Dreamweaver CS3、Dreamweaver CS4、Dreamweaver CS5、Dreamweaver CS5.5和Dreamweaver CS6等版本。
本章以Dreamweaver CS6为例,执行“开始”按钮→“程序”→Adobe Dreamweaver CS6命令,启动Dreamweaver CS6。显示如图58所示欢迎屏幕,可以根据需要打开已有网页文件或新建网页文件。
图58Dreamweaver CS6欢迎屏幕
打开编辑窗口后,Dreamweaver CS6工作界面如图59所示,该窗口包括菜单栏、插入面板、文档区、属性面板、状态栏、面板组等。
图59Dreamweaver CS6工作界面
1. 菜单栏
Dreamweaver CS6的工作界面主要包含10个菜单: 文件、编辑、查看、插入、修改、格式、命令、站点、窗口、帮助,网页制作所用到的所有功能都包含在菜单中。
2. “插入”面板
“插入”面板包含“常用”“布局”“表单”“数据”、Spry、jQuery Mobile、InContext Editing、“文本”“收藏夹”9个选项卡,如图510所示。
图510“插入”面板
3. 文档区
文档区显示当前创建和编辑的网页文档,是用户的主要工作区。在该工作区中可以输入文字、插入图片、设置超链接等。
文档顶端是文档窗口标题栏,显示当前打开网页文档的文件名。如果打开多个网页文件,单击各文件名可以切换文档。
文档窗口有3种视图: 设计视图、代码视图、拆分视图,可以通过“文档”工具栏(如图511所示)进行视图间的切换。
图511“文档”工具栏
4. 状态栏
位于文档窗口的下方,提供与当前文档有关的一些信息,如图512所示。状态栏左侧显示HTML标记的部分是标签选择器,显示环绕当前选定内容的标签的层次结构。
图512状态栏
单击该层次结构中的任何标签即可选择该标签及其全部内容,例如单击标签则选择整个文档。
5. “属性”面板
不同的对象具有不同的属性,“属性”面板用于查看和更改当前所选对象的属性。双击“属性”面板中的“属性”标签,可以折叠或展开属性面板。属性面板中的内容根据选定的元素会有所不同,如图513所示为表格中单元格的属性。
图513“属性”面板
6. 面板组
在Dreamweaver CS6工作界面的右侧是面板组。每个面板都集成了不同类型的功能,通过“窗口”菜单可以对这些面板进行打开和关闭控制。
【实验53】用Dreamweaver CS6设计网页。
操作步骤:
【步骤1】新建网页文件53.html。
打开Dreamweaver,执行“文件”→“新建”命令,打开“新建文档”对话框,如图514所示。选择空白页,页面类型为HTML,布局为<无>,单击“创建”按钮,即可新建一个网页文件,默认文件名为Untitled1.html。可执行“文件”→“保存”命令,将其另存为53.html。
图514“新建文档”对话框
【步骤2】设置网页标题。
将“文档”工具栏右侧标题文本框内输入“李白介绍”,如图515所示。
图515设置网页的标题
【步骤3】输入文本。
可在“文档”工具栏中,单击“拆分”按钮,将文档视图转换成拆分视图,此时文档区域左侧显示代码视图,右侧显示设计视图。
在右侧设计视图中输入如下内容,如图516所示。
图516拆分视图下输入文本
李白
字太白,号青莲居士,唐朝诗人,有“诗仙”之称。代表作有《静夜思》《梦游天姥吟留别》《将进酒》等。
【步骤4】将**段内容修改为标题1。
选中**段内容“李白”,单击“插入”面板中“文本”选项卡内的h1按钮,如图517所示,将**段文字设置为标题1。
图517“文本”选项卡
在左侧代码视图中查看,可见: “
李白
”已经改为“
李白
”。
【步骤5】设置页面背景颜色为#FFFFCC。
单击“属性”面板中的“页面属性”按钮,如图518所示,打开“属性”对话框。
图518“属性”对话框
选择分类为外观(HTML),在“外观(HTML)”中设置背景为#FFFFCC,单击“确定”按钮即可,如图519所示。
图519“页面属性”对话框
……

目录 第1章计算机的使用与维护1 1.1计算机硬件的选购、使用与维护1 1.1.1计算机硬件简介1 1.1.2计算机硬件选购指导7 1.1.3键盘和鼠标的使用9 1.1.4计算机硬件维护技巧13 1.1.5笔记本计算机的选购与使用17 1.2计算机软件的使用与维护19 1.2.1操作系统的使用与维护19 1.2.2驱动程序的使用与维护23 1.2.3应用软件的使用与维护26 1.3计算机常见故障的诊断与维修26 1.3.1计算机故障的原因27 1.3.2计算机故障的诊断方法28 1.3.3计算机硬件故障诊断与维修实例30 1.3.4计算机软件故障诊断与维修实例33 本章小结46
第2章操作系统的使用47 2.1Windows 7操作系统简介47 2.1.1Windows 7操作系统的安装47 2.1.2Windows 7的桌面52 2.1.3Windows 7的窗口57 2.1.4Windows 7的菜单60 2.1.5桌面小工具61 2.2文件管理63 2.2.1文件管理的基本概念63 2.2.2资源管理器65 2.2.3文件和文件夹操作67 2.2.4库76 2.2.5Windows 7的搜索77 2.3系统设置与维护78 2.3.1控制面板简介79 2.3.2外观和个性化设置79 2.3.3鼠标和键盘的设置84 2.3.4时钟、语言和区域选项设置85 2.3.5设置分辨率86 2.3.6添加或删除程序87 2.3.7用户账户设置88 2.3.8设置硬件属性93 2.3.9磁盘管理与系统性能优化94 2.4任务管理器97 2.4.1任务管理器功能简介97 2.4.2任务管理器的使用101 2.5附件程序的使用103 2.5.1记事本和写字板104 2.5.2画图105 2.5.3计算器108 2.5.4截图工具109 本章小结110 〖1〗〖3〗大学信息技术实用教程目录〖3〗〖3〗 第3章应用文稿的编写技巧111 3.1文稿编辑与排版111 3.1.1Word 2010使用简介111 3.1.2文稿编辑实例: 会议通知的制作119 3.1.3文稿编辑实例: 报名汇总表的制作126 3.1.4文稿编辑实例: 科技论文的排版 127 3.2数据报表使用技巧129 3.2.1Excel 2010使用简介129 3.2.2数据报表实例: 学生成绩统计152 3.2.3数据报表实例: 商业销售报表159 3.3演示文稿制作165 3.3.1PowerPoint 2010使用简介165 3.3.2演示文稿实例: 课件制作172 3.3.3演示文稿实例: 毕业答辩174 3.3.4演示文稿实例: 销售报告179 本章小结183 第4章多媒体软件的使用184 4.1声音编辑184 4.1.1初识Adobe Audition CS6184 4.1.2单轨编辑192 4.1.3多轨编辑203 4.2图像编辑210 4.2.1初识Adobe Photoshop CS6210 4.2.2图像处理案例218 4.3视频编辑235 4.3.1初识Adobe Premiere Pro CS6235 4.3.2视频编辑案例244 本章小结275
第5章网页设计与制作276 5.1网页设计概述276 5.1.1网站与网页276 5.1.2HTML278 5.1.3Dreamweaver CS6简介281 5.2CSS与文字格式288 5.2.1CSS概述288 5.2.2CSS语法288 5.2.3CSS添加方法289 5.3页面布局基础293 5.3.1网页基本组成293 5.3.2表格布局301 5.3.3Div布局304 5.4用JavaScript脚本语言编写动态网页310 5.4.1JavaScript脚本语言概述310 5.4.2JavaScript语法基础311 5.5HTML5315 5.5.1HTML5文档基本结构315 5.5.2HTML5 的新特性316 5.5.3HTML5应用实例316 本章小结318
第6章常用工具软件的使用319 6.1压缩软件的使用319 6.1.1压缩软件简介319 6.1.2压缩软件WinRAR的使用方法319 6.2杀毒软件的使用327 6.2.1杀毒软件简介327 6.2.2360**卫士 327 6.2.3腾讯电脑管家333 6.3常用聊天软件341 6.3.1聊天软件简介341 6.3.2QQ聊天软件342 6.3.3微信346 6.4网上支付软件350 6.4.1支付宝351 6.4.2微信支付353 本章小结355
参考文献356

(1) 面向非计算机专业本科生,介绍实用信息技术,包括计算机的日常维护与故障排除,Windows 7操作系统的使用,应用文稿的编写,声音、图像、视频、动画的编辑制作,网页设计与网站开发,以及常用工具软件的使用等。在传统内容基础上,增加了计算机常见故障排除、声音编辑、网页设计,以及聊天工具和网上支付工具使用等新内容。 (2) 注重实用技能的培养,精心设计了案例式、任务式实验项目,把复杂的软件操作融入到实用性很强的实验项目中。通过实验项目来提高学生的信息技术应用能力和综合素养。 (3) 叙述简练,图文并茂,操作提示清晰易懂,易教易学。