网页设计与制作_吕菲张春胜郝英丽主编.pdf

优 秀 教 学 成 果 奖 系 列 丛 书中等职业教育“十三五”规划教材网页设计与制作主 编 吕 菲 张春胜 郝英丽副主编 王宏春 梁 梁 葛长利参 编 赵 粲 田 红 王靖文 宋 焱 张甘雨内 容 简 介本教材主要讲解了网页制作所需要具备的基础知识，主要内容包括基本概念的理解、网页素材所需要的软件及使用、网页制作的环境设置、网页制作的基本流程及方法。在编写中采用任务驱动法对知识点进行分割讲解，更易于读者学习。本教材可以对网页设计与制作的学习起到启发、引领的作用，主要适合于中等职业学校计算机专业、数字媒体专业的学生使用，也适合从事网页设计与制作的初学者使用。版权专有 侵权必究 图书在版编目（）数据 网页设计与制作 吕菲，张春胜，郝英丽主编.北京：北京理工大学出版社，.-.网.吕 张 郝.网页制作工具-教材.中国版本图书馆 数据核字（）第 号出版发行 北京理工大学出版社有限责任公司社 址 北京市海淀区中关村南大街 号邮 编 电 话 （）（总编室）（）（教材售后服务热线）（）（其他图书服务热线）网 址 ：.经 销 全国各地新华书店印 刷 北京虎彩文化传播有限公司开 本 毫米 毫米 印 张 .责任编辑 陈莉华字 数 千字文案编辑 陈莉华版 次 年 月第 版 年 月第 次印刷责任校对 周瑞红定 价 .元责任印制 李志强图书出现印装质量问题，请拨打售后服务热线，本社负责调换 随着互联网络在人们日常生活中的普及，“网页设计与制作”课程便成为计算机专业及数字媒体技术专业的核心课程之一。同样，该课程也是长春职业技术学校省级重点专业数字媒体技术的专业核心课程之一。由于现有教材不能满足中等职业技术学校的教学需求，在长春尚道科技有限公司的技术支持下，课程组全体成员编写了这本教材。本教材主要讲解了网页设计与制作所需具备的基础知识。特点是采用以任务引领为核心的编写方式，通过任务完成整体过程，将知识点贯穿于每个任务之中，并辅以大量的详细图解，使整个学习过程更生动、丰富。本教材在编写、出版过程中得到了长春职业技术学校校领导和长春尚道科技有限公司的大力支持，王晓杰、丛路卫参与了校正工作，在此向长春尚道科技有限公司及其他支持我们工作的全体人员表示感谢。本教材适用于网页设计与制作的初级读者，也适用于从事网页设计与制作的专业人士。本教材中提供了尽可能详尽的操作步骤和图示，可以使读者毫无困难地学习任何实例。本教材在编写过程中集众家所长，有企业提供的案例分享，有编者整理的知识梳理，也有互联网优秀思想作品的借鉴。在编写期间也受到校方领导的大力支持，在此一并表示感谢！由于作者的编写水平有限，书中难免存在错误和不妥之处，敬请广大读者批评指正。编 者 学习情境一 网站的管理与创建 任务一 网页制作的相关概念 任务二 开发工具介绍 任务三 创建与管理网站站点 学习情境二 网页效果图的设计与制作 任务 网页效果图的设计与制作 学习情境三 网页素材设计与制作 任务一 提取图片元素 任务二 网站 设计与制作 任务三 动画设计与制作 任务四 动画设计与制作 信息更新 任务五 动画设计与制作一 任务六 动画设计与制作二 任务七 动画设计与制作三 任务八 网页特效的制作 焦点图 任务九 网页特效的制作 轮播效果 学习情境四 网站页面的设计与制作 任务一 基本结构标签 任务二 常用语法规则 任务三 布局 任务四 创建二级页面模板 参考文献学习情境一网站的管理与创建网页设计与制作 任务一网页制作的相关概念【知识目标】（）了解并掌握网页制作的相关概念。（）了解网页元素的种类。【能力目标】培养学生自主学习理论知识的能力。【任务实施】.网页制作相关概念.简介万维网（，亦称、）是一个由许多互相链接的超文本组成的系统，通过互联网进行访问。在这个系统中，每个有用的事物均称为“资源”；并且由一个全局“统一资源标识符”（，）标识；这些资源通过超文本传输协议（，）传送给用户，而后者通过单击链接来获得资源。万维网联盟（），简称，又称 理事会，于 年 月在麻省理工学院（）计算机科学实验室成立。万维网联盟的创建者是万维网的发明人蒂姆伯纳斯李。万维网的核心部分是由以下 个标准构成的。（）统一资源标识符，这是一个统一的为资源定位的系统。（）超文本传输协议，它负责规定客户端和服务器怎样互相交流。（）超文本标记语言，作用是定义超文本文档的结构和格式。.网页网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，你的网站就是由网页组成的，如果你只有域名和虚拟主机而没有制作任何网页，你的客户仍旧无法访问你的网站。网页是一个文件，它可以存放在世界某个角落的某台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.或.）。网页通常用图像文档来提供图画，要通过网页浏览器来阅读。.网站因特网起源于美国国防部高级研究计划管理局建立的阿帕网。网站（）开始学习情境一 网站的管理与创建 是指在因特网上根据一定的规则，使用 （标准通用标记语言下的一个应用）等工具制作的用于展示特定内容相关网页的集合。简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。衡量一个网站的性能通常是从网站空间大小、网站位置、网站连接速度（俗称“网速”）、网站软件配置、网站提供服务等几方面考虑，最直接的衡量标准是网站的真实流量。.静态网页与动态网页）静态网页静态网页也称为普通网页，是相对动态网页而言的。静态网页不是指网页中的元素都是静止不动的，而是指网页文件中没有程序代码，只有 （，超文本标记语言）标记，一般后缀为.、.、.或.等。在静态网页中，可以包括 动画，鼠标经过 按钮时，按钮可能会发生变化。对于静态网页，用户可以直接双击打开，看到的效果与访问服务器是相同的，即服务器参加与否对页面的内容是不会有影响的。这是因为在用户访问该网页之前，网页的内容就已经确定了，无论用户何时、以怎样的方式访问，网页的内容都不会再改变。静态网页的工作流程可以分为以下 个步骤。（）编写一个静态文件，并在 服务器上发布。（）用户在浏览器的地址栏中输入该静态网页的 （，统一资源定位符）并按 键，浏览器发送请求到 服务器。（）服务器找到此静态文件的位置，并将它转换为 流传送到用户的浏览器。（）浏览器收到 流后显示此网页的内容。在步骤（）（）中，静态网页的内容不会发生任何变化。其工作原理如图 -所示。图 -）动态网页动态网页是指在网页文件中除了 标记外，还包括一些实现特定功能的程序代码，这些程序代码使得浏览器与服务器之间可以进行交互，即服务器端可以根据客户端的不同请求动态产生网页内容。动态网页的后缀名通常根据所用的程序设计语言的不同而不同，一般为.、.、.、.、.等。动态网页可以根据不同的时间、不同的浏览者显示不同的信息。常见的留言板、论坛、聊天室都是用动态网页实现的。网页设计与制作 动态网页相对复杂，不能直接双击打开。动态网页的工作流程分为以下 个步骤。（）编写动态网页文件，其中包括程序代码，并在 服务器上发布。（）用户在浏览器的地址栏中输入该动态网页的 并按 键，浏览器发送访问请求到 服务器。（）服务器找到此动态网页的位置，并根据其中的程序代码动态建立 流传送到用户浏览器。（）浏览器接收到 流后显示此网页的内容。从整个工作流可以看出，用户浏览动态网页时，需要在服务器上动态执行该网页文件，将含有程序代码的动态网页转化为标准的静态网页，最后把静态网页发送给用户。其工作原理如图 -所示。图 -.语言 是 的描述语言。制作的网页以.或.为扩展名，它支持丰富的样式表、脚本、框架、表格和表单等多种网页元素，可以嵌入 语言等。.在 上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫，它是 的统一资源定位标志，就是指网络地址。由三部分组成，即资源类型、存放资源的主机域名、资源文件名。在浏览器的地址栏里输入网页的，就可以访问这个网页了。例如，输入网址：.时，就是采用（协议）访问新浪网的首页。.地址（，网络之间互联的协议）也就是为计算机网络相互连接进行通信而设计的协议。在因特网中，它是能使连接到网上的所有计算机网络实现相互通信的一套规则，规定了计算机在因特网上进行通信时应当遵守的规则。任何厂家生产的计算机系统，只要遵守 协议就可以与因特网互联互通。正是因为有了 协议，因特网才得以迅速发展成为世界上最大的、开放的计算机通信网络。因此，协议也可以叫作“因特网协议”。地址被用来给 上的计算机一个编号。大家日常见到的情况是每台联网的 上都需要有 地址，才能正常通信。可以把 比作“一台电话机”，那么“地址”就相当于“电话号码”，而 中的路由器，就相当于电信局的“程控式交换机”。学习情境一 网站的管理与创建 地址是一个 位的二进制数，通常被分割为 个“位二进制数”（也就是 个字节）。地址通常用“点分十进制”表示成（.）的形式，其中、是 之间的十进制整数。例如，点分十进制 地址（.），实际上是 位二进制数（.）。.域名域名（），也简称网域，是由一串用点分隔的名字组成的 上某台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。网域名称系统（，有时也简称为域名）是因特网的一项核心服务，它作为可以将域名和 地址相互映射的一个分布式数据库，能够使人更方便地访问互联网，而不用去记住能够被机器直接读取的 地址数串。例如，.是一个域名，和 地址.相对应。就像一个自动的电话号码簿，可以直接拨打 的名字来代替电话号码（地址）。直接调用网站的名字后，就会将便于人类使用的名字（如.）转化成便于机器识别的 地址（如.）。.网页构成的基本元素网页由文本、图像、动画、超级链接等基本元素构成，本节将对这些基本元素进行简单介绍，为后面各章中运用这些元素制作网页奠定基础。.文本一般情况下，网页中最多的内容是文本，可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置。建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文文字一般可使用宋体，大小为 磅或 像素左右即可。.图像丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为 格式和 格式。网页中的图像主要用于点缀标题的小图片、介绍性的图片以及代表企业形象或栏目内容的标志性图片，用于宣传广告等多种形式。.超级链接超级链接是 网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是另一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一幅图片、一个 -地址等。超级链接可以是文本、按钮或图片，鼠标指针指向超级链接位置时会变成小手形状。.导航栏导航栏是一组超级链接，用来方便地浏览站点。导航栏一般由多个按钮或者多个文本超级链接组成。网页设计与制作 .动画动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球的最有效方法之一。但是如果网页动画太多，也会物极必反，使人眼花缭乱，进而产生视觉疲劳。.表格表格是 语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观，通过表格可以精确地控制各网页元素在网页中的位置。.框架框架是网页的一种组织形式，将相互关联的多个网页内容组织在一个浏览器窗口中显示。例如，在一个框架内放置导航栏，另一个框架中的内容可以随单击导航栏中的链接而改变。.表单表单是用来收集访问者信息或实现一些交互作用的网页，浏览者填写表单的方式是输入文本、选中单选按钮或复选框、从下拉菜单中选择选项等。网页中除了上述这些最基本的构成元素外，还包括横幅广告、字幕、悬停按钮、日戳、计算器、音频、视频、等元素。.网页的布局类型网页布局是网页设计中最重要的一环，主要指网站主页的版面布局，其他网页应该与主页风格基本一致。为了达到更好的视觉效果，应考虑布局的合理性，版面布局是整个页面制作的关键。常见的网页布局形式有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、型、变化型。（）“国”字型。也可以称为“同”字型，是一