《网页设计与制作教程》(教程全集)第1章.ppt

1、本本章章要点要点 网站与网页的概念如何规划和设计网站常用的网页制作工具介绍第1章 网页制作基础快速导读快速导读本章介绍网站规划与网页设计的基本知识，本章介绍网站规划与网页设计的基本知识，从网站的设计架构出发，在网站的主题、结构、从网站的设计架构出发，在网站的主题、结构、风格和布局等方面讲述网站的构思和网站的制风格和布局等方面讲述网站的构思和网站的制作流程，并介绍最流行的网页制作工具。作流程，并介绍最流行的网页制作工具。1.1 网站与网页概念1.1.1 Internet1.1.1 Internet与与与与WWWWWW InternetInternet的中文名称是因特网，在了解什么是的中文名称是因

2、特网，在了解什么是InternetInternet之前，先来看一看什么是网之前，先来看一看什么是网络络。所所谓谓网网络络和和InternetInternet，简单简单的的说说，是由一些使用公用是由一些使用公用语语言互相通信的言互相通信的计计算机算机连连接而成接而成的全球网的全球网络络。WWWWWW（world wide webworld wide web，万，万维维网）是网）是InternetInternet上的一上的一种信息服种信息服务务系系统统，也是，也是InternetInternet上最流行的服上最流行的服务务之一。之一。为为您您提供了一个可以提供了一个可以轻轻松松驾驭驾驭的的图图形化

3、用形化用户户界面，用于界面，用于查阅查阅 Internet Internet 上的文档，上的文档，这这些文档与它些文档与它们们之之间间的的链链接一起构成了接一起构成了一个一个庞庞大的信息网。大的信息网。1.1 网站与网页概念1.1.2 1.1.2 网网网网页页与网站与网站与网站与网站 网网页页是是WWWWWW系系统统中信息的基本中信息的基本单单位，位，WebWeb服服务务器就器就是以网是以网页为单页为单位位处处理信息的，客理信息的，客户户端的信息端的信息请请求也是以网求也是以网页页为为基本基本单单位的。网位的。网页页的本身是一个的本身是一个纯纯文本文件，网文本文件，网页页文件中文件中包含的内容

4、可以是文字、包含的内容可以是文字、图图像、影片、像、影片、动动画、声音、超画、声音、超链链接接等等。网站也称网站也称为为站点，它是指存放在网站点，它是指存放在网络络服服务务器上的完整器上的完整信息的集合体，它包含一个或多个网信息的集合体，它包含一个或多个网页页，这这些网些网页页以超以超链链接接方式方式连连接在一起，构成一个整体，描述一接在一起，构成一个整体，描述一组组完整的信息。完整的信息。网站主要由主机、域名和网网站主要由主机、域名和网页页等等组组成成。1.2 网站的规划1.1.网站的网站的网站的网站的题题材材材材 目前目前网站的网站的题题材主要有新材主要有新闻闻、体育、体育、经济经济、科技

5、、科技、计计算机技算机技术术、软软件沙件沙龙龙、房、房产产、通信、短信、网上聊天、即、通信、短信、网上聊天、即时时信息、网上社区、校园天地，交通、信息、网上社区、校园天地，交通、证证券、券、娱乐娱乐网站、旅行、网站、旅行、参考、参考、资讯资讯、网上求、网上求职职、家庭教育、健康知、家庭教育、健康知识识、生活、生活时时尚、尚、游游戏戏、广告以及一些体、广告以及一些体现现个人特色的网站等内容个人特色的网站等内容。每一大每一大类类又可以又可以细细分，比如新分，比如新闻闻可以分可以分为为国内新国内新闻闻、国外新国外新闻闻、体育新、体育新闻闻、甚至天气、甚至天气预报预报等具有新等具有新闻题闻题材特性的材

6、特性的类别类别；体育可以；体育可以细细分分为篮为篮球、足球、网球、球、足球、网球、乒乓乒乓球、登山、球、登山、游泳等更广泛的游泳等更广泛的题题材，而每一材，而每一单项单项也可以又分也可以又分为为更多的更多的类类。1.2 网站的规划2.2.确定确定确定确定网站的主网站的主网站的主网站的主题题 确定网站的主确定网站的主题题建建议议从下几个方面考从下几个方面考虑虑：1 1、主题要小而精、主题要小而精 2 2、主题最好是自己最擅长并且最有兴趣的东西、主题最好是自己最擅长并且最有兴趣的东西 3 3、题材不要太滥或者目标太高、题材不要太滥或者目标太高 4 4、要体现自己的个性和特色、要体现自己的个性和特色

7、1.2 网站的规划3.3.给给网站网站网站网站取名取名取名取名 网站的名称网站的名称还还要合情合理，最好能要合情合理，最好能让让人感人感觉觉到有到有亲亲切切感，当然，感，当然，还还一定要合法，一定要合法，坚坚决不能决不能带带有反有反动动的、色情的、的、色情的、迷信的、危害社会安全的名迷信的、危害社会安全的名词语词语句句。1.2 网站的规划4.4.决定决定决定决定网站性网站性网站性网站性质质 在在创创建网站建网站时时，决定站点的性，决定站点的性质质是必是必须须的。的。设计设计者者应应清楚站点的性清楚站点的性质质，确定它将会提供什么，确定它将会提供什么样样的服的服务务，网，网页页中中应应该显该显示

8、什么内容等，以便在站点示什么内容等，以便在站点设计过设计过程中能突出网站主程中能突出网站主题题。1.3 网站的设计1.3.1 1.3.1 网站网站网站网站的的的的结结构构构构设计设计 网站的网站的结结构构设计设计其其实实也就也就是合理地是合理地设计设计网站的网站的栏栏目和板目和板块块。那么，需要。那么，需要设计设计哪些哪些栏栏目目和板和板块块呢呢?如何合理地去如何合理地去设计设计呢呢?这这是网站是网站设计设计的目的目标标。1.3 网站的设计1.3.2 1.3.2 网站网站网站网站的目的目的目的目录结录结构构构构设计设计 在在组织组织网站目网站目录结录结构构时时，一般，一般应该应该遵循如下一些遵

9、循如下一些规则规则：1 1、用文件夹分类保存文档。、用文件夹分类保存文档。2 2、使用合理的文件名称。、使用合理的文件名称。3 3、将本地站点和远程站点设置为相同的目录结构。、将本地站点和远程站点设置为相同的目录结构。1.3 网站的设计1.3.3 1.3.3 网站网站网站网站的形象的形象的形象的形象设计设计 网站的形象网站的形象设计设计非常重要非常重要，需要考，需要考虑虑：1 1、设计网站的标志、设计网站的标志 2 2、设计网站的标准色彩、设计网站的标准色彩 3 3、设计网站的标准字体、设计网站的标准字体 4 4、设计网站的宣传、设计网站的宣传标语标语1.3 网站的设计1.3.4 1.3.4

10、网站主网站主网站主网站主页页的的的的设计设计 网站主网站主页页的的设计设计是一个网站成功与否的关是一个网站成功与否的关键键，人，人们们上上网网浏览浏览往往看到第一往往看到第一页页就已就已经对经对网站有了一个整体的感网站有了一个整体的感觉觉。能否促使能否促使浏览浏览者者继续继续点点击进击进入网站中去欣入网站中去欣赏赏其内容，全凭主其内容，全凭主页设计页设计的功力的功力。1.3 网站的设计1.3.5 1.3.5 其他其他其他其他页页面的面的面的面的设计设计 其他的其他的页页面面设计设计步步骤骤：确定确定页页面的功能模面的功能模块块设计页设计页面的布局面的布局处处理技理技术术上上的的细节细节。需要需

11、要注意以下几点：注意以下几点：1 1、和主、和主页页保持相同的保持相同的风风格。格。2 2、要有返回首、要有返回首页页的的链链接。接。3 3、在、在页页面上面上显显示当前的位置。示当前的位置。4 4、目、目录结录结构不要超构不要超过过四四层层。1.3 网站的设计1.3.6 1.3.6 企企企企业业网站的网站的网站的网站的设计设计 成功的企成功的企业业网站可以网站可以将公司信息、将公司信息、产产品信息等最完整、品信息等最完整、最形象和最具有良好沟通性等方面向世界最形象和最具有良好沟通性等方面向世界展示。展示。在在网站网站设计时设计时，应该应该考考虑虑以下几个以下几个问题问题：1 1、建、建设设网

12、站的目的是什么？网站的目的是什么？2 2、为谁为谁提供提供产产品和服品和服务务？3 3、企、企业业能提供什么能提供什么样样的的产产品和服品和服务务？4 4、网站的目的消、网站的目的消费费者和用者和用户户有什么特点？有什么特点？5 5、企、企业产业产品和服品和服务务适用什么适用什么样样的表的表现现形式？形式？6 6、采用哪些方式与用、采用哪些方式与用户进户进行行联联系？系？7 7、用、用户户在网上如何来在网上如何来订购产订购产品品？1.3 网站的设计1.3.7 1.3.7 为为网站网站网站网站设计设计目目目目标对标对象象象象 为为了使站点能了使站点能够够吸引更多的吸引更多的访问访问者，者，应该应

13、该充分考充分考虑虑到到访问访问者所使用的者所使用的计计算机算机类类型、使用的操作平台型、使用的操作平台(如如MacintoshMacintosh、WindowsWindows和和LinuxLinux等等)、平均使用的、平均使用的连连接速度接速度(56K(56K调调制解制解调调器器或或ADSL)ADSL)及使用的及使用的浏览浏览器种器种类类、显显示器尺寸和屏幕分辨率等，示器尺寸和屏幕分辨率等，这这些因素都会影响到些因素都会影响到访问访问者者访问访问网站。网站。1.4 网页版面布局设计1.4.1 1.4.1 版面版面版面版面布局的原布局的原布局的原布局的原则则 1 1、主次分明，中心突出、主次分明

14、，中心突出 2 2、大小搭配，相互呼、大小搭配，相互呼应应 3 3、图图文并茂，相得益彰文并茂，相得益彰 4 4、动动静适度，平衡静适度，平衡对对称称1.4 网页版面布局设计1.4.2 1.4.2 版面版面版面版面布局的布局的布局的布局的类类型型型型 1 1、“国国”字型字型 2 2、框架型、框架型 3 3、标题标题正文型正文型 4 4、封面型、封面型 5 5、综综合型合型1.5 常用网页制作工具简介1.5.1 HTML1.5.1 HTML语语言言言言 HTMLHTML是超文本是超文本标记语标记语言（言（Hyper Text Markup Hyper Text Markup LanguageL

15、anguage）的）的缩缩写，它是一种主要写，它是一种主要应应用于用于WWWWWW（World World Wide WebWide Web）上的）上的标记语标记语言。言。HTMLHTML利用利用标记标记元素来描述文元素来描述文档的内容和控制文档的档的内容和控制文档的结结构。构。HTML HTML 的主要功能是控制文档的主要功能是控制文档内容、内容、结结构，构，创创建表格、框架和表建表格、框架和表单单，建立，建立链链接，嵌入多媒接，嵌入多媒体体对对象等。它的最大特点就是可以直接用象等。它的最大特点就是可以直接用HTMLHTML代代码编码编制网制网页页。1.5 常用网页制作工具简介1.5.2 1

16、.5.2 网网网网页页制作制作制作制作“三三三三剑剑客客客客”Dreamweaver Dreamweaver 作作为为可可视视化化页页面面设计设计和网站管理和网站管理工具。工具。Flash Flash 作作为为网网页动页动画画设计设计工具。工具。Fireworks Fireworks 作作为页为页面面图图像像设计设计工具。工具。使使整个网整个网页设计页设计成成为为一个完整的体系，被人一个完整的体系，被人们们称称为为网网页页制作的制作的“梦幻梦幻组组合合”。1.5 常用网页制作工具简介1.5.3 1.5.3 图图形形形形图图像像像像处处理工具理工具理工具理工具PhotoshopPhotoshop PhotoshopPhotoshop是由是由AdobeAdobe公司出品的最著名的公司出品的最著名的图图形形图图像像处处理理软软件。它的功能非常件。它的功能非常强强大，是大，是创创作作专业图专业图像的首像的首选软选软件，件，它可以它可以实现实现各种各种专业专业化的化的图图像像处处理效果理效果。PhotoshopPhotoshop在在图图像像处处理方法上具有独到的理方法上具有独到的优势优势，例如，