第1章网页设计与制作基础
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（2）Internet。Internet即互联网，也叫因特网，是将 全球五大洲的各种电脑网络连接起来的全球性网络。Internet 提供各种服务供用户使用，例如WWW服务（网页浏览服务）、 电子邮件服务、网上传呼（如OICQ）、文件传输（FTP服务）、 在线聊天、网上购物、网络炒股、联网游戏等。
网络规划及艺术设计
（7）动画。动画是由一组连续播放的静态画面组成的，所 谓连续播放既指时间上的连续，也指画面内容上的连续，即播 放的相邻两幅图像之间内容相差不大，如图1.3.3所示为一段香 蕉卡通动画。网页上的动画主要分为两类：一类是GIF格式的图 片动画，一类是Flash动画。
网络规划及艺术设计
网络规划及艺术设计
网络规划及艺术设计
图1.1.3 浏览网页
1.2 网页相关术语
在进行网页设计与制作时，经常会遇到一些术语，例如 URL、Internet、WWW和浏览器、IP地址和域名等。如果不了解 这些术语，在以后制作网页时将会遇到很多的麻烦，下面对这 些术语一一进行解释。
网络规划及艺术设计
பைடு நூலகம்
（1）URL。URL的英文全名为Uniform Resource Locator， 中文译名为统一资源定位器。它的功能是提供一种在Internet 上查找任何信息的标准方法，用户只要在浏览器中输入URL的 内容，便可以得到它指定的相关文件。简单地说，URL就是WWW 服务器主机的地址，也叫网址。使用最广的URL形式是用于表 示网页位置的“http://”。
网络规划及艺术设计
（5）IP地址。为了使连接在Internet上的计算机能够相 互通信，每台计算机都必须有一个唯一的“标识号”，即IP 地址。IP地址是一个32位的二进制编码，其标准写法是4个十 进制数，即将32位IP地址按8位一组分成4组，每组数值用一 个十进制数表示，每组的范围为0～255，组与组之间用小数 点分隔，例如202.117.78.6。
网络规划及艺术设计
1.3 网页基本元素
大多数网页都包含站标、导航栏、广告条、色彩、文本、 图片和动画等，它们是网页的基本元素，对网页的制作有着举 足轻重的作用。
（1）站标。站标是一个网站的标志，一般位于网页的左 上角，其作用类似于商品的商标或公司的徽标，如图1.3.1所 示为几个经典站标。
网络规划及艺术设计
（5）文本。文本是网页发布信息的主要形式，用它制作 出的网页占用的空间比较小，因此当用户浏览时可以很快地展 现在用户面前。在浏览器中，默认的中文字体为宋体，英文字 体为Times New Roman。也就是说，如果没有设置任何字体， 网页将以这两种字体显示。
网络规划及艺术设计
（6）图片。图片是网页十分重要的组成部分，有了图片， 网页才能够吸引更多的访问者，才能够更好地表现主题。
1.1 网页概述 1.2 网页相关术语 1.3 网页基本元素 1.4 1.5 1.6 本章总结
网络规划及艺术设计
1.1 网页概述
在学习网页设计与制作之前，首先要知道什么是网页。网 页的英文名称为Web Page，它是用户通过浏览器在Internet上 看到的页面。通常所说的Home Page是指首页，即进入网站其他 页面的“入口”。一个网站可以有多个网页，但只能有一个首 页，如图1.1.1所示为“hao123”的首页。
1．FrontPage与Dreamweaver 虽然网页的实质是HTML，但现在已经很少有人直接用 HTML来编辑网页了，这是因为HTML不能直观地显示网页设计 的结果，本身也比较枯燥。现在绝大多数的网页设计与制作 工作都是通过所见即所得的编辑工具完成的。 在所见即所得的网页编辑工具中，应用最为广泛的是 Dreamweaver和FrontPage。FrontPage作为微软公司的办公工 具之一，与Office的其他工具高度兼容，适合于初学者使用。 与FrontPage相比，Dreamweaver的排版功能更强，操作更灵 活，专业性更强，因而已成为专业网页设计人员的常用工具。
（1）单击“开始”按钮，选择“所有程序”→“附 件”→“记事本”命令，启动记事本程序。
（2）在记事本中输入HTML代码，如图1.1.2所示。 （3）保存文件，例如以文件名“index.htm”保存到D盘 根目录下。 （4）找到该文件，双击鼠标将其打开，如图1.1.3所示。
网络规划及艺术设计
图1.1.2 在记事本中输入HTML代码
（6）域名。由于IP地址的数字形式难以记忆和使用， 因此人们引入了域名用以代替复杂的IP地址。域名是用英文 来表示IP地址的。域名是由固定的域名管理组织在全球进行 统一管理的，要获取域名需到各地的网络管理机构进行申请。 申请域名后，无论在哪里，只要在与Internet相连的浏览器 的地址栏中输入域名即可登录相应的网站。
网络规划及艺术设计
网络规划及艺术设计
图1.1.1 “hao123”的首页
从文件角度讲，网页是一种由HTML语言编写的文本文件， 所以网页文件又叫做HTML文件，其扩展名为.html或.htm。网 页作为一种文本文件，可以用任意文本编辑器编辑，例如可 使用Windows系统中的记事本程序，其操作步骤如下：
图1.3.3 香蕉卡通动画
1.4 网页制作与美化工具
目前，制作网页有两种方法：一种是使用FrontPage， Dreamweaver等网页制作工具进行；另一种是使用HTML来编写。 由于网页中含有文本、图片、图像、动画、音频、视频等多种 信息表达形式，因而还需要使用一些工具对素材进行美化处理。
网络规划及艺术设计
图1.3.1 几个经典站标
（2）导航栏。导航栏其实是一组超级链接，用于完成不同网 页之间的跳转，通常被置于网页的顶部或一侧，如图1.3.2所示。
网络规划及艺术设计
图1.3.2 导航栏
（3）广告条。广告条又称广告栏，一般位于网页的顶部， 导航栏的下方，主要用于显示站点服务商要求的一些商业广告。
（4）色彩。在浏览网页时，最先引起访问者注意的往往 是网页的色彩，其次才是图像和文字。一个网站的色彩不要超 过3种，太多会让人感到眼花缭乱。
（3）的英文全名为World Wide Web，又称3W或Web，中文 译名为万维网。提供的服务之一，它由遍布在Internet上的称 为Web服务器的计算机组成。
（4）浏览器。浏览器是一种浏览网页的软件，通过它可以 方便地浏览Internet上提供的电子邮件、FTP、网络新闻组和电 子公告栏等服务资源。目前，主要的浏览器有Internet Explorer和Netscape，其版本越高，所支持的网页效果就越多， 所以要经常升级。
网络规划及艺术设计
（7）动画。动画是由一组连续播放的静态画面组成的，所 谓连续播放既指时间上的连续，也指画面内容上的连续，即播 放的相邻两幅图像之间内容相差不大，如图1.3.3所示为一段香 蕉卡通动画。网页上的动画主要分为两类：一类是GIF格式的图 片动画，一类是Flash动画。
网络规划及艺术设计
网络规划及艺术设计
网络规划及艺术设计
图1.1.3 浏览网页
1.2 网页相关术语
在进行网页设计与制作时，经常会遇到一些术语，例如 URL、Internet、WWW和浏览器、IP地址和域名等。如果不了解 这些术语，在以后制作网页时将会遇到很多的麻烦，下面对这 些术语一一进行解释。
网络规划及艺术设计
பைடு நூலகம்
（1）URL。URL的英文全名为Uniform Resource Locator， 中文译名为统一资源定位器。它的功能是提供一种在Internet 上查找任何信息的标准方法，用户只要在浏览器中输入URL的 内容，便可以得到它指定的相关文件。简单地说，URL就是WWW 服务器主机的地址，也叫网址。使用最广的URL形式是用于表 示网页位置的“http://”。
网络规划及艺术设计
（5）IP地址。为了使连接在Internet上的计算机能够相 互通信，每台计算机都必须有一个唯一的“标识号”，即IP 地址。IP地址是一个32位的二进制编码，其标准写法是4个十 进制数，即将32位IP地址按8位一组分成4组，每组数值用一 个十进制数表示，每组的范围为0～255，组与组之间用小数 点分隔，例如202.117.78.6。
网络规划及艺术设计
1.3 网页基本元素
大多数网页都包含站标、导航栏、广告条、色彩、文本、 图片和动画等，它们是网页的基本元素，对网页的制作有着举 足轻重的作用。
（1）站标。站标是一个网站的标志，一般位于网页的左 上角，其作用类似于商品的商标或公司的徽标，如图1.3.1所 示为几个经典站标。
网络规划及艺术设计
（5）文本。文本是网页发布信息的主要形式，用它制作 出的网页占用的空间比较小，因此当用户浏览时可以很快地展 现在用户面前。在浏览器中，默认的中文字体为宋体，英文字 体为Times New Roman。也就是说，如果没有设置任何字体， 网页将以这两种字体显示。
网络规划及艺术设计
（6）图片。图片是网页十分重要的组成部分，有了图片， 网页才能够吸引更多的访问者，才能够更好地表现主题。
1.1 网页概述 1.2 网页相关术语 1.3 网页基本元素 1.4 1.5 1.6 本章总结
网络规划及艺术设计
1.1 网页概述
在学习网页设计与制作之前，首先要知道什么是网页。网 页的英文名称为Web Page，它是用户通过浏览器在Internet上 看到的页面。通常所说的Home Page是指首页，即进入网站其他 页面的“入口”。一个网站可以有多个网页，但只能有一个首 页，如图1.1.1所示为“hao123”的首页。
1．FrontPage与Dreamweaver 虽然网页的实质是HTML，但现在已经很少有人直接用 HTML来编辑网页了，这是因为HTML不能直观地显示网页设计 的结果，本身也比较枯燥。现在绝大多数的网页设计与制作 工作都是通过所见即所得的编辑工具完成的。 在所见即所得的网页编辑工具中，应用最为广泛的是 Dreamweaver和FrontPage。FrontPage作为微软公司的办公工 具之一，与Office的其他工具高度兼容，适合于初学者使用。 与FrontPage相比，Dreamweaver的排版功能更强，操作更灵 活，专业性更强，因而已成为专业网页设计人员的常用工具。
（1）单击“开始”按钮，选择“所有程序”→“附 件”→“记事本”命令，启动记事本程序。
（2）在记事本中输入HTML代码，如图1.1.2所示。 （3）保存文件，例如以文件名“index.htm”保存到D盘 根目录下。 （4）找到该文件，双击鼠标将其打开，如图1.1.3所示。
网络规划及艺术设计
图1.1.2 在记事本中输入HTML代码
（6）域名。由于IP地址的数字形式难以记忆和使用， 因此人们引入了域名用以代替复杂的IP地址。域名是用英文 来表示IP地址的。域名是由固定的域名管理组织在全球进行 统一管理的，要获取域名需到各地的网络管理机构进行申请。 申请域名后，无论在哪里，只要在与Internet相连的浏览器 的地址栏中输入域名即可登录相应的网站。
网络规划及艺术设计
网络规划及艺术设计
图1.1.1 “hao123”的首页
从文件角度讲，网页是一种由HTML语言编写的文本文件， 所以网页文件又叫做HTML文件，其扩展名为.html或.htm。网 页作为一种文本文件，可以用任意文本编辑器编辑，例如可 使用Windows系统中的记事本程序，其操作步骤如下：
图1.3.3 香蕉卡通动画
1.4 网页制作与美化工具
目前，制作网页有两种方法：一种是使用FrontPage， Dreamweaver等网页制作工具进行；另一种是使用HTML来编写。 由于网页中含有文本、图片、图像、动画、音频、视频等多种 信息表达形式，因而还需要使用一些工具对素材进行美化处理。
网络规划及艺术设计
图1.3.1 几个经典站标
（2）导航栏。导航栏其实是一组超级链接，用于完成不同网 页之间的跳转，通常被置于网页的顶部或一侧，如图1.3.2所示。
网络规划及艺术设计
图1.3.2 导航栏
（3）广告条。广告条又称广告栏，一般位于网页的顶部， 导航栏的下方，主要用于显示站点服务商要求的一些商业广告。
（4）色彩。在浏览网页时，最先引起访问者注意的往往 是网页的色彩，其次才是图像和文字。一个网站的色彩不要超 过3种，太多会让人感到眼花缭乱。
（3）的英文全名为World Wide Web，又称3W或Web，中文 译名为万维网。提供的服务之一，它由遍布在Internet上的称 为Web服务器的计算机组成。
（4）浏览器。浏览器是一种浏览网页的软件，通过它可以 方便地浏览Internet上提供的电子邮件、FTP、网络新闻组和电 子公告栏等服务资源。目前，主要的浏览器有Internet Explorer和Netscape，其版本越高，所支持的网页效果就越多， 所以要经常升级。