项目1网页设计与制作（课件）《网页设计》（劳动保障出版社）

网页设计与制作 项目一 网页基础 N 1 知识目标 了解网页基础知识 熟悉网页设计语言 掌握网页制作工具的使用方法 ‹#› 网页设计与制作 2 1.1.1 认识网页与网站 任务1.1〓信息与信息技术 网页的概念： 　网页是Internet中基本的信息单位，是由超文本标记语言（Hyper Text Markup Language，HTML）或者其他语言编写的。 中国知网：https://www.cnki.net/ ‹#› 网页设计与制作 1.1.1 认识网页与网站 任务1.1〓信息与信息技术 网站概念： 　网站是一个或多个网页的集合。网站是指通过浏览器在Internet上访问的页面。网站可以用于发布自己想要公开的信息，也可以用于提供相关的网络服务，同样可以获取自己需要的信息或者享受网络服务。网站设计者先将整个网站结构规划好，然后分别制作各个网页，大多数网站都会为浏览者提供一个主页，最后将其他网页与主页链接起来。 中国大学MOOC：https://www.icourse163.org/ ‹#› 网页设计与制作 1.1.1 认识网页与网站 任务1.1〓信息与信息技术 序号 特点 含义 1 图形化的界面 网页能同时显示色彩丰富的图形和文本，可以提供将图形、音频和视频等集于一体的信息资源。 2 兼容的系统平台 网页可以兼容多个系统平台，如Windows、UNIX、Macintosh、Android等，系统平台不影响用户通过Internet访问网页。 3 交互式的操作 在用户向Web提出请求后，Web会提供用户需要的信息。 4 分布式的存储 在网络中有大量的图形、音频和视频信息，这会占用相当大的磁盘空间，不可能将所有的信息都存储在一起，只能将其存放在不同的站点中。服务器会根据查询的情况选择需要读取的信息。 网页的特点 5 信息的时效性 Web站点上的信息是动态的、经常更新的，一般信息站点都会保证信息的时效性。 ‹#› 网页设计与制作 1.1.1 认识网页与网站 任务1.1〓信息与信息技术 网站分类： 　网站有很多不同的分类方法，例如，按照其使用的技术可分为静态网站和动态网站；按照网站的性质可以分为企业网站、政府网站、教育网站和个人网站；按照网站的作用可以分为搜索引擎网站、社区论坛网站、在线翻译网站、软件下载网站和音乐欣赏网站等。 直观的网站分类方法是按网站的主题进行分类。主题是网站的题材，它决定网站的内容，体现网站代表的形象。一般常见的题材有公司企业、休闲娱乐、教育培训、电脑网络、文化艺术、交通旅游等，而每一个题材又可以继续划分。 ‹#› 网页设计与制作 1.1.1 认识网页与网站 任务1.1〓信息与信息技术 序号 特征 含义 1 网页相互链接 网站是由多个网页相互链接组成的，建设网站就是制作网页。在所有的网页中，网站的主页是整个网站中最重要的。 2 网站标志 任何网站都有自己的网站标志，而且都力求自己的网站标志与众不同，一个好的网站标志通常具有朗朗上口的名字和醒目的图形特征。 3 风格统一 网站虽然有很多网页，但是作为一个整体来讲，它必须有一个统一的风格。主页是网站重要的网页，它的风格往往决定了整个网站的风格。 4 网页导航 网页导航是一个网站非常重要的组成部分，也是衡量一个网站是否优秀的主要标准。便捷的网页导航能够帮助用户以较快的速度找到自己需要的网页。网页导航常用的实现方法是导航条。 网站的特征 ‹#› 网页设计与制作 1.1.1 认识网页与网站 任务1.1〓信息与信息技术 序号 特征 含义 5 分层的栏目组织 网站的层次型组织方法是将网站的内容分成若干个大栏目，再将大栏目分成若干个小栏目，小栏目还可以分成若干个更小的栏目。 6 切合主题的内容 任何网站都有自己的网站标志，而且都力求自己的网站标志与众不同，一个好的网站标志通常具有朗朗上口的名字和醒目的图形特征。 7 网站交互栏目 网站是一个开放的环境，除发布信息外，还有一个非常重要的功能就是收集用户的信息，与用户进行交互，如账号注册、电子邮件、留言板、信息查询等。 8 域名 在Internet上发布的任何网站都有自己的域名，如中国知网的域名为“https://www.cnki.net/”。 网站的特征 ‹#› 网页设计与制作 1.1.2网页的组成元素 任务1.1〓信息与信息技术 网页的组成元素 含义 文本 文本是指网页中叙述性的文字。 图像 图像是指网页中插入的具有说明性的图片。GIF、JPEG、BMP、TIFF和PNG等格式的图像文件 动画 在网页中使用的动画主要有GIF和Flash两种方式 音频 网络的音频文件格式很多，常用的有MP3、MIDI、WAV等 视频 常见的视频文件格式有MP4和FLV 新华网：http://education.news.cn/index.htm ‹#› 网页设计与制作 1.1.3静态网页和动态网页 任务1.1〓信息与信息技术 静态网页： 　静态网页使用HTML语言，每个网页都有一个固定的URL（Uniform Resource Locators，统一资源定位符），以.htm、.html、.shtml等常见形式为后缀。静态网页中包含文本、图像、动画、音频、视频等网页元素。静态网页的交互性较差，在功能方面有较大的限制。 静态网页可以出现各种动态的效果，如GIF格式的动画、Flash、滚动字幕等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。 ‹#› 网页设计与制作 1.1.3静态网页和动态网页 任务1.1〓信息与信息技术 动态网页： 　动态网页是指与静态网页相对的一种网页技术，以.aspx、.asp、.jsp、.php、.pert、.cgi 等形式为后缀。动态网页的显示内容可以随着时间、环境或者数据库操作的结果而发生改变，也可以与后台数据库交互，实现用户注册、登录、聊天、留言等功能。 动态网页具有以下特征 交互性 自动更新 针对性 ‹#› 网页设计与制作 任务1.2〓网页设计语言 HTML简介 HTML编辑环境 文档结构 HTML称为超文本标记语言。超文本指页面内可以包含图片、链接、音乐、视频等非文字的元素。标记语言主要由标签属性、标签以及元素构成，网页中包含的对象是由相应HTML标签指示出来的。HTML不像其他语言一样被编译为指令，它只提供一些语法标签，后由浏览器编译生成相应的页面。 HTML代码既可以在记事本中编写，也可以在其他任何文本编辑器中编写，但在保存时要保存为.html或.htm格式。HTML写成的网页文件只有通过浏览器才能进行解析。 HTML文档是由一系列的元素和标签组成的。元素名不区分大小写。HTML用标签来规定元素的属性和它在文件中的位置，标签用“<标签名字属性>”来表示，标签以“< >”开始，以“</>”结束。HTML文档分为<head>（文档头）和<body>（文档体）两部分，在文档头中对文档进行了一些必要的定义，文档体中是要显示的各种文档信息。 ‹#› 网页设计与制作 任务1.2〓网页设计语言 实例1 HTML文档代码 运行结果： 代码： ‹#› 网页设计与制作 任务1.2〓网页设计语言 <html></html>在文档的外层，文档中的所有文本和标签都包含其中，它表示该文档是以HTML编写的。 <head></head>是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文中的。在此标签中可以插入其他标签，用以说明文件的标题和整个文件的一些公共属性。 <title>和</title>是嵌套在<head>标签中的，标签之间的文本是文档标题，这些文本作为浏览器窗口的标题栏内容被显示。<body></body>标签之间的文本是正文，正文中的内容作为网页内容显示在浏览器中。 以上标签在文档中都是唯一的，<head>标签和<body>标签是嵌套在<html>标签中的。 解释 ‹#› 网页设计与制作 任务1.3〓网页制作工具 1.3.1网页设计工具 任务1.3〓网页制作工具 Dreamweaver Sublime Text EditPlus ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务1.3〓网页制作工具 Photoshop Mockplus Illustrator 1.3.2网页美化工具 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务1.3 〓网页制作工具 工作界面 1.3.3 Dreamweaver工作环境 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务1.3〓网页制作工具 代码视图 1.3.3Dreamweaver工作环境 设计视图 拆分视图 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务1.3〓网页制作工具 步骤1： 打开软件 1.3.4Dreamweaver基本操作 实例2 新建和保存空白页 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务1.3〓网页制作工具 步骤2： 新建文档 1.3.4Dreamweaver基本操作 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务1.3〓网页制作工具 步骤3： 保存网页 1.3.4Dreamweaver基本操作 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务1.3〓网页制作工具 步骤1： 设置默认浏览器 1.3.4Dreamweaver基本操作 实例3 设置默认浏览器及浏览网页 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务1.3〓网页制作工具 步骤2： 打开网页 1.3.4Dreamweaver基本操作 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务1.3〓网页制作工具 步骤3 保存并预览网页 1.3.4Dreamweaver基本操作 ‹#› 网页设计与制作 项目小结 本项目主要介绍了网页的基础知识,具体内容如下。 网页基础知识: 介绍了网页与网站的概念、网页的组成元素、静态网页和动态网页。 网页设计语言: 介绍了 HTML 基础知识,并通过实例讲解 HTML 的文档结构。 网页制作工具: 介绍了网页设计工具、网页美化工具、Dreamweaver 工作环境和Dreamweaver 基本操作。 通过本项目的学习,掌握网页与网站的基础知识,学习 HTML 基础知识,了解网页制作工具，逐步掌握网页设计的基本概念,为下一步的学习打下基础。 谢谢 $$