1网页设计与网站建设基础入门

第1章 初识网站

1

2015年8月26日9时21分

主要内容1 2 3 4 5 6 7 82

1.1网站的基本概念 1.2 网页设计与网站建设基础入门 1.3 网站开发流程 1.4 网站页面策划与设计 1.5 视觉空间的构成 1.6 网页色彩搭配及精美网站赏析 1.7 上机实训——查看与分析网站 1.8 本章小结

2015年8月26日9时21分

1.1 认识网站 1.1.1 什么是网站 网站是因特网上一块固定的面向全世界发布消息的地方， 由域名和网站空间构成。网站页面通常包括主页和其他具 有超链接功能的页面。 如今，许多公司都拥有自己的网站，并利用网站平台来进 行产品宣传、资讯发布、人员招聘等。 随着网页制作技术的流行与普及，很多人也开始拥有个人 主页，通常是制作者用来自我介绍、展现个性的地方。 与此同时，也涌现出一批专业企业网站制作的公司，通常 这些公司的网站上提供了各种有关服务、新闻、旅游、娱 乐、经济等的资讯。

3

2015年8月26日9时21分

1.1 认识网站 1.1.2 网站的分类及特点 1.个人网站 2.企业类网站 3.娱乐休闲类网站 4.机构类网站 5.电子商务类网站 6.综合门户类网站 7.搜索引擎类网站

图1-1 个人网站

4

2015年8月26日9时21分

1.1 认识网站 1.1.3 什么是网页 用户在访问网站时所看到的实际内容即为网页。一个网站 中通常由许多的网页构成，常见的网页文件格式为HTML格 式，其文件扩展名为“.html”、“.htm”、“.asp”、“.aspx”、 “.php” 和“.jsp”等。网页是构成网站的基本元素，而网页 则是由一些基本元素构成的，包括文本、图像、超链接、 表格、动画、音乐和交互式表单等。

5

2015年8月26日9时21分

1.1 认识网站 1.1.4 网页基本构成 1.文本 2.图像和动画 3.声音和视频 4.表单 5.超链接 6.表格 7.其他元素

图1-11 网页中的表单

6

2015年8月26日9时21分

1.1 认识网站 1.1.5 网页的类型 根据网页中的交互功能，可将网页分为静态网页和动态网 页两种类型。 纯粹 HTML 格式的网页通常被称为“静态网页”,也就是 以.htm、.html、.shtml和.xml等为后缀的文件。 “动态网页”的文件里包含了程序代码，通过后台数据库 与 Web 服务器进行信息交互，由后台数据库提供实时数据 更新和数据查询服务。

7

2015年8月26日9时21分

1.2 网站建设的工具软件及技术 1.2.1 网页效果图设计软件 Photoshop软件是由Adobe公司推出的图像处理软件，它具有界面 友好、易学易用等优点，目前已被广泛应用于印刷、广告设计、 网页图像制作和照片编辑等领域。 Fireworks软件是创建、编辑和优化网页图像的多功能应用

程序。

图1-12 Photoshop CS5工作界面

图1-13 Fireworks CS5 工作界面

8

2015年8月26日9时21分

1.2 网站建设的工具软件及技术 1.2.2 网页内容编排软件

图1-14 Dreamweaver CS5工作界面

9

2015年8月26日9时21分

1.2 网站建设的工具软件及技术 1.2.3 网页动画制作软件

图1-15 Flash CS5 工作界面

10

2015年8月26日9时21分

1.2 网站建设的工具软件及技术 1.2.4 超文本标记语言 HTML的英文全称是HyperText Markup Language,中文通常称为 “超文本标记语言”或“超文本标签语言”,是互联网上编写网 页的主要语言，提供了精简而有力的文件定义，可以设计出多姿 多彩的超媒体文件，通过 HTTP 通信协议还可以在全球互联网 (World Wide Web)上进行跨平台的文件交换。

11

2015年8月26日9时21分

1.2 网站建设的工具软件及技术 1.2.5 CSS标记语言 CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联 样式表”)是一组格式设置规则，用于控制Web页面的外观。 通过使用CSS样式设置页面的格式，可以将页面的内容与表现形 式分离，将页面内容存放在 HTML 文档中，而用于定义表现形式 的 CSS 规则被存放在另一个文件中或 HTML 文档的某一部分，通 常为文件头部分。 将内容与表现形式分离，不仅可以使维护站点的外观更加容易， 还可以使HTML文档代码更加简练，缩短浏览器的加载时间。

12

2015年8月26日9时21分

1.2 网站建设的工具软件及技术 1.2.6 网页脚本程序语言 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言， 利用JavaScript程序可以使页面更加生动、活泼，以小的程序量完 成大的功能。 使用它的目的是与超文本标识语言、JavaScript语言一起实现在一 个网页中链接多个对象，与网络客户交互，从而可以开发客户端 的应用程序。它是通过嵌入或调入到标准的 HTML 语言中实现的。

13

2015年8月26日9时21分

1.2 网站建设的工具软件及技术 1.2.7 动态网站编程语言 动 态 网 页 是 与 静 态 网 页 相 对 应 的 ， 网 页 URL 的 后 缀 不 是 以.htm、.html、.shtml、.xml等静态网页的常见动态网页制作形式 存在的，而是以.aspx、.asp、.jsp、.php、.perl、.cgi等形式为后 缀的。 常见的动态网站编程语言有ASP、PHP、JSP、等。

14

2015年8月26日9时21分

1.3 网站开发流程 1.3.1 网站整体规划 对网站的整体风格和特色做出定位，可以从以下几个方面考虑。 (1)明确建立网站的目的：是宣传产品、进行电子商务还是建立 行业性网站？是企业需要还是市场需求? (2)整合公司资源，确定网站的类型：产品宣传、网上营销、客 户服务、电子商务。 (3)当

前网站的规模及其扩展性。

15

2015年8月26日9时21分

1.3 网站开发流程 1.3.2 收集、整理网站资源 重要的文本 重要的图像 库文件 Flash等多媒体元素

16

2015年8月26日9时21分

1.3 网站开发流程 1.3.3 设计网页效果图 网页效果图设计是网站规划中的一个非常重要的环节。网 页的设计包括网站的 LOGO 设计、网页的布局设计、网页 的色彩搭配和网站的字体等。

图1-16 Photoshop中设计的网页效果图17 2015年8月26日9时21分

1.3 网站开发流程 1.3.4 编辑、制作网页 设计完网页效果图后，通常需要将网页效果图中要作为网 页图像的部分图像切片导出，然后按照规划逐步制作网页。 编辑制作网页是一个复杂而细致的过程，一定要按照先大 后小、先简单后复杂的顺序来进行制作。

图1-17 使用Dreamweaver编辑、制作网页

18

2015年8月26日9时21分

1.3 网站开发流程 1.3.5 开发动态网站模块 页面设计制作完成后，如果还需要动态功能，就需要开发 动态功能模块。网站中常用的功能模块有新闻发布系统、 搜索功能、留言板、产品展示管理系统、在线调查系统、 在线购物、会员注册管理系统、招聘系统、统计系统、留 言系统、论坛及聊天室等。

图1-18 在线购物网站

19

2015年8月26日9时21分

1.3 网站开发流程 1.3.6 申请域名和空间 域名是企业或事业单位在因特网上进行相互联络的网络地 址。在网络时代，域名是企业、机构进入因特网必不可少 的身份认证。 域名是由一串用“.”分隔的名称组成的因特网上某一台计算 机或计算机组的名称，用于在数据传输时标识计算机的电 子方位(有时也指地理位置)。目前，域名已经成为互联 网的品牌、网上商标保护必备的产品之一。

20

2015年8月26日9时21分

1.3 网站开发流程 1.3.7 网站测试及维护 (1)制订网站改版计划，及时更新网页内容：站点信息的 不断更新，让浏览者了解企业的发展动态和网上职务等， 同时也会帮助企业建立良好的形象。 (2)制订相关网站维护规定：服务器及相关软、硬件维护， 数据库维护。 (3)网站发布前进行细致周密的测试，保证正常浏览和使 用：服务器、程序和数据库、网页兼容性及其他。 (4)测试通过后，为网站发布进行相关的公关、广告活动。

21

2015年8月26日9时21分

本文来源：https://www.bwwdw.com/article/g794.html