网页设计与制作项目一.ppt

1、网页设计与制作项目一项目一搭建网站前期准备工作搭建网站前期准备工作初识网页相关概念初识网页相关概念1构建网站结构构建网站结构2明确网页设计的原则明确网页设计的原则3了解网站建设流程了解网站建设流程4了解网页制作工具了解网页制作工具5网站是网页构成的集合，搭建网站的主要任务是设计网页。通过本项任务的学习，了解网页的相关概念，包括网页、网站、主页、静态网页、动态网页、网页浏览机制等，从而为网页设计打下基础。任务任务1 1初识网页相关概念初识网页相关概念任务任务1 1初识网页相关概念初识网页相关概念网页又称Web页，它是网站的主要组成部分，是被浏览器解读并显示的HTML标准文件，由文字、表格、图片、

2、声音、视频、动画以及各种功能按钮组成。一个网页上的文字、图片、按钮又可以是指向其他页面的链接点，这些链接点称为超级链接(简称超链接)。当用户点击这些超链接时，就会在浏览器中显示被指向的页面。网页的超链接功能为人们从海量的网络信息资源中获取有用信息提供了简便途径。网站(Web Site)，简而言之，就是一组具有共同主题的网页通过超链接的形式所组成的信息系统。网站的概念可以从以下四个方面加以理解。任务任务1 1初识网页相关概念初识网页相关概念任务任务1 1初识网页相关概念初识网页相关概念1从信息组成上来看2从存放形式上来看3从客户访问上来看4从运行管理上来看任务任务1 1初识网页相关概念初识网页相

3、关概念主页是网站的起始页和索引页，是用户浏览网站的“入口处”。与一般网页一样，主页可以存放各种信息，但它又是一个特殊的网页，主要由导航及各种超链接构成，用户可以通过主页提供的超链接访问其他页面的信息和资源。任务任务1 1初识网页相关概念初识网页相关概念(一一)静态网页静态网页静态网页是标准的HTML网页文件，它的文件扩展名是.htm或.html，可以包含文本、图像、声音、Flash动画、客户端脚本、ActiveX控件及Java Applet等。这种网页不包含在服务器端运行的任何脚本，网页上的每一行代码都是由网页设计人员预先编写好后放置到Web服务器上的，在客户端的浏览器上解读的网页代码与服务器

4、端的网页代码是一样的。任务任务1 1初识网页相关概念初识网页相关概念(二二)动态网页动态网页 动态网页是由HTML代码和服务器端运行的脚本代码所构成的网页文件。网页的内容动态地存储在服务器数据库中，当用户请求访问该页面时，通过运行服务器端的脚本代码、读取数据库信息来生成一个标准的HTML网页文件，然后将其发送到客户端的浏览器中进行显示。它们会随请求的用户和时间不同，返回给浏览器不同的网页，因此称其为动态网页。任务任务1 1初识网页相关概念初识网页相关概念静态网页与动态网页的区别可以从以下四个方面理解。静态网页与动态网页的区别可以从以下四个方面理解。从本质上区分从本质上区分1从管理维护上区分从管

5、理维护上区分2从设计技术上区分从设计技术上区分3从形式上区分从形式上区分4任务任务1 1初识网页相关概念初识网页相关概念(一一)服务器与浏览器服务器与浏览器 互联网是一个大型的、相互连接的分布式信息存储系统，它是以客户机/服务器模式工作的。通常来说，提供服务的一方称为服务器，请求服务或接受服务的一方称为客户机。服务器是网络的核心设备，实际上是一种配置较高的计算机，安装有服务器软件(如Windows XP下的IIS)，其基本功能是提供网络资源共享、网络通信管理和网络通信服务。客户机是接受服务的计算机，配置可高可低，但必须安装有浏览器软件以解读网页文件。有些网页文件资源在浏览器不能解读时，会提示客

6、户机安装相关的浏览器插件(如Flash播放器)。浏览器软件有很多，如火狐(Mozilla Firefox)、遨游(Maxthon)、腾讯TT(Tencent Traveler),Netscape Navigator，常用的是Windows自带的IE浏览器。任务任务1 1初识网页相关概念初识网页相关概念(二二)URI、介绍、介绍 URL(Uniform Resource Locator，统一资源定位符)通常称为网址，它是Internet上用来描述信息资源的字符串。其格式为:任务任务1 1初识网页相关概念初识网页相关概念URL由下列三部分组成由下列三部分组成:协议或称为服务方式该资源的主机域名或I

7、P地址资源的具体地址，由路径和文件名组成任务任务1 1初识网页相关概念初识网页相关概念(三三)网页浏览机制网页浏览机制客户机访问服务器中的网络资源的下作原理任务任务2 2构建网站结构构建网站结构物理结构即目录结构，构建网站的物理结构就是根据网站主题的需要，为不同类型的资源分别建立目录进行保存。对于信息量小的站点，可以将不同类型的文件存放在不同的文件夹中。对于文件数量众多、信息量大、文件类型复杂的站点，应根据不同的栏目建立目录，在不同栏目的目录下将不同类型的文件分类存放，如图所示。信息量小的站点的目录结构信息量大的站点的目录结构任务任务2 2构建网站结构构建网站结构(一一)树状链接结构树状链接结

8、构树状链接结构任务任务2 2构建网站结构构建网站结构(二二)网状链接结构网状链接结构网状链接结构任务任务2 2构建网站结构构建网站结构网站的物理结构与逻辑结构是密不可分的，逻辑结构建立在目录结构的基础之上，良好的逻辑结构可以方便用户浏览网站;而物理结构合理与否对网站的管理与维护及网站的逻辑结构的建立都具有重大影响。对浏览者来说，最关心的是网站的逻辑结构，即链接结构，而对网站设计人员来说，两种结构都必须合理策划和构建，要既方便浏览者浏览，又易于管理、更新和移植。任务任务3 3明确网页设计的原则明确网页设计的原则音频、视音频、视频等多媒频等多媒体元素体元素动画动画超链接超链接图像图像文字文字任务任

9、务3 3明确网页设计的原则明确网页设计的原则1.网站的主题不同，配色方案也随之不同网站的主题不同，配色方案也随之不同2.要注意同类色、邻近色、对比色的运用要注意同类色、邻近色、对比色的运用3.不要用大面积的高纯度色彩、过多的颜色不要用大面积的高纯度色彩、过多的颜色4.文字阅读的部分要使用对比色文字阅读的部分要使用对比色5.选择颜色要注意时效性选择颜色要注意时效性任务任务3 3明确网页设计的原则明确网页设计的原则(一一)规则布局规则布局规则布局有一个基本型(上下、上中下、左右、左中右)，通过基本型可以扩展出更多的布局形式。图1-6就是规则布局的四种基本型与十二种简单混合布局，以这十六种布局形式可

10、以扩展出更多的布局形式。规则布局的最大特点是层次清晰，通过比例的合理划分(可参照黄金分割比例)、色彩的运用、图片、动画、视频等元素的合理编排可以达到重心平衡稳定和区块运用合理的布局效果。这类布局是网页设计中最常见的形式，如“国”字形、“匡”字形、“吕”字形和“T”字形，它们适用于信息量较大的网站，如门户网站、政府、企业、学校等正规网站。实际上，所有站点均可使用这种布局形式。任务任务3 3明确网页设计的原则明确网页设计的原则四种基本型与十二种简单混合布局任务任务3 3明确网页设计的原则明确网页设计的原则(二二)不规则布局不规则布局不规则布局的形式自由、个性张扬、使用灵活，完全是一种艺术创意形式。

11、但非专业人员较难掌握色彩的运用、抽象的整体造型。常见的有封面型、广告创意型(POP),Flash动画型，一般个人网站、娱乐型网站可采用这种形式，也有企业网站使用这种形式。任务任务3 3明确网页设计的原则明确网页设计的原则在网页的布局中，不管使用什么形式的布局，都应注意以下几个问题在网页的布局中，不管使用什么形式的布局，都应注意以下几个问题:1.页面布局整体上都是上中下形式2.页面内容的高度、宽度要适应屏幕阅读习惯3.重点信息、焦点信息、亮点信息要突出显示4.图文搭配做到稳定、平衡5.主页、栏目页、文章页的布局既要统一，又要有区别任务任务4 4了解网站建设流程了解网站建设流程网站的内容决定网站的

12、主题，所谓网站的主题就是网站所要表达的主要内容。确定网站的主题是网站建设中极为关键的一步。作为网站设计者，一定要明确自己的网站应该具有哪些内容，网站应向浏览者提供哪些信息，网站是为哪些浏览群体服务的，等等。给网站一个准确的定位，切忌内容过于庞杂，失去了中心主题而降低对浏览者的吸引力。对于初次接触网站建设的人员，最好选择自己喜爱或擅长的主题，如旅游主题、音乐主题、体育主题，以静态页面为主，保持网站结构清晰，尽量不要经常更新网站内容，以便快速掌握网站建设的基本流程。在确定好网站主题后，还必须为网站起一个名字、设计一个Logo。总之，把握好网站建设的方向是网站建设成功的关键。任务任务4 4了解网站建

13、设流程了解网站建设流程网站资料主要包括文本、图像、动画三大类。另外，依据网站的主题，还可能需要准备音频、视频等多媒体素材以及其他资料，如供浏览者下载的软件、Word文档。有些资料要进行制作，如Flash动画;有些资料还需要进一步加工和处理，如在不影响显示效果的情况下，图片应尽量压缩得小一些，以加快页面的加载速度。总之，收集、制作和整理资料时范围要广泛，在进行网页设计时再去粗取精。任务任务4 4了解网站建设流程了解网站建设流程规划网站结构包括两方面的含义，即规划网站的目录结构(物理结构)和链接结构(逻辑结构)。物理结构反映网站中各种信息资源的存放形式，逻辑结构反映网站中信息的浏览形式。网站的物理

14、结构与逻辑结构是密不可分的，逻辑结构建立在目录结构的基础之上，方便了用户的浏览。浏览者最关心的是网站的逻辑结构;而对于网站设计人员来说，两种结构都必须合理地策划和构建，既要方便浏览者浏览，又要易于网站的管理、更新和移植。物理结构的合理与否对网站的管理与维护、逻辑结构的建立都具有重大影响。这两种结构的设计方法在本项目任务2中已经进行了详细说明，此处不再赘述。任务任务4 4了解网站建设流程了解网站建设流程页面设计包括内容设计、用色设计和布局设计，并且主页、栏目页、文章页的设计既要统一，又要有区别。本项目任务3中已经对相关内容进行了详细说明，此处不再赘述。任务任务4 4了解网站建设流程了解网站建设流

15、程(一一)网站的测试网站的测试网站编辑制作完成后，最终需要在服务器上发布，但在发布之前必须对网站进行测试。网站的测试主要包括浏览器兼容性测试、链接测试和下载时间测试等，这些测试方法均可以使用Dreamweaver实现。任务任务4 4了解网站建设流程了解网站建设流程(二二)网站的发布网站的发布确定网站空间申请域名网站上传任务任务4 4了解网站建设流程了解网站建设流程(一一)维护网站维护网站 网站要经常维护，保持内容的新鲜感，才能够吸引浏览者。网站的维护包括文章更新、页面布局变化、栏目调整、图形增删、广告设计、查看网站现有空间大小等内容。如果网站空间发生变化，应该及时对域名和空间进行绑定。静态网站的维护主要通过重新上传更新内容的方法实现，动态网站则是通过网站后台管理界面实现对内容的更新。任务任务4 4了解网站建设流程了解网站建设流程(二二)推广网站推广网站网站有付费的推广方法，如印刷品广告、媒体广告、户外广告，也有免费的推广方法，如搜索引擎注册、网络广告交换、论坛发帖推广。无论用什么方法推广，网站的内容都是第一位的，只有内容具有影响力，搜索引擎才会自动收录网站，各种论坛、QQ群才会广泛传播，所以网站内容是网站最强的生命力。任务任务5 5了解网页制作工具了解网页制作工具标记型网页制作工具“所见即所得”型网页制作工具编程型网页制作工具一一二二三三END.