第1章网页设计及工具培训教材

《第1章网页设计及工具培训教材》由会员分享，可在线阅读，更多相关《第1章网页设计及工具培训教材（67页珍藏版）》请在金锄头文库上搜索。

1、第1章 网页设计及工具,现今，网站已经被越来越多的人所熟识与使用。构成网站的基本元素是网页，当你轻点鼠标，遨游网络世界时，精彩的网页将一副副的呈现于面前，使人们通过网站来发布以及获取相关信息更加地方便。本章将通过相关内容的介绍，来详细讲解网页设计的基础知识，同时认识有关网页设计的常用工具。,1.1 网页设计概述,网站由一个特定人群和组织控制的一组网页的组合。网站是由众多的网页组成的，页面是否精彩直接关系着网站是否受人们的欢迎。本章通过讲解，将向大家展示有关网页设计的基础知识及相关概念。,1.1.1 网页和网站基础知识,网站的建设首先需要从网页开始，网页和网站究竟是怎么一回事呢？接下来让我们通过

2、了解网页和网站的基础知识，来初步认识它们，为网页和网站的建设与制作铺路开拓。,关于网站：网站是众多网页集合而成的，不同的用户通过有组织的连接整合一起，为浏览者提供更丰富的信息。网站由域名（domain name又称网址），网站源程序和网站空间三部分构成。网站也是信息服务类企业的代名词，如在新浪、搜狐工作的人，也可以说，他在一家网站工作。如图所示是新浪网站的首页的截图。,2什么是网页设计与制作 其实网页就是一个HTML文件，我们所要学习的网页设计与制作，就是学习如何编辑这个文件。多个HTML文件集合而成的内容也就是网站，制作一个网站，也就意味着你需要单独编辑若干个HTML文件。多个HTML文件需

3、要通过“超链接”进行连接。,3主页面 一般情况下，一个网站都相应的制作有一个被称作主页（HomePage）的页面，它常常被看作是该网站的大门，起着引导访问者去进入浏览的作用。同时，网站有些什么内容，更新了什么内容等等，都可以通过主页直接被访问者熟知。如图所示是腾讯网的主页。,1.1.2 网站类型,网站有静态和动态之分，根据不同的划分标准，网站被分为好多种类型。接下来我们通过详细的分析，来具体介绍网站的类型，以及在制作网站前，如何选择适合的网站类型。,1网站分类 从所用编程语言不同来划分，包括ASP、PHP、JSP、ASP.net 从用途不同来划分，包括门户网站、行业网站、娱乐网站 从持有者不同

4、来划分，包括个人网站、商业网站、政府网站 从商业目的不同来划分，包括营利型网站、非营利型网站,2类型选择 将网站按照主体性质不同可分为政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其它非盈利机构网站以及其它类型。按网站模式划分，可分为综合类门户网站、电子商务网站、专业网站等。以下，通过简要介绍网站的模式，分析有关合适网站类型的选择。其具体内容如表所示。,1.1.3 静态网站制作流程,静态网站的制作相对比较简单，主要可以分四个部分来完成。 1内容的策划 在网站创业前，进行系统的策划是非常必要的。如果要让网站从大量站点中脱颖而出，就必须进行详细而深入的论证。 （1）确定需要建立什么样的

5、网站 （2）选择什么样的网站内容 （3）确定用户群体，便于内容投其所好 （4）前期策划决定网站竞争力 （5）怎样策划一个好的网站 （6）策划需要注意的事项,2图纸的设计 设计图纸是在Photoshop或者Fireworks中把你想做的网站用图片的形式画出来。Photoshop的灵活多变以及超级强大的功能，完全可以画出绚烂的网页出来。浏览器的不同像多窗口浏览器有一个标签栏，就算是IE，常用图标也有大小之分。因此具体的尺寸是多少，你需要在实际制作过程中自己灵活掌握。 3网页的切割 网页的切割还是要交给Photoshop或者Fireworks来完成，这里主要是使用它们的切片工具。这建议大家更多使用F

6、ireworks，因为它专业，也更容易上手。切割网页就是把图片切割成若干个小图片，其中宽度高度什么的都得自己去掌握去学习。,4制作网页 网页就是表格加图片加Flash，在完成了内容策划，图纸设计，页面切割之后，我们就可以着手进行网页的制作了。在本书的具体制作的应用实例，我们都通过Dreamweaver CS5来进行相关操作。当然，用于制作网页的工具远远不止这一些。,1.1.4 动态网站制作流程,对于动态网站，因为有脚本语言，所以比较复杂的。同样，要做的工作也就更多了。主要有以下几方面： 1整体规划 对于整体规划，可以从以下几方面来进行： 动态程序语言的确立 网站栏目功能规划 根目录策划,2数据

7、库规划 3编写网站后台 4编写网站前台 5测试及修改阶段 6网站的发布,1.2 网页设计工具,“工欲善其事，必先利其器”。制作网页第一件事就是选定一种网页制作软件。从原理上来讲，虽然直接用记事本也能写出网页，但是对网页制作必须具有一定的Html基础，非初学者能及，且效率也很低。用Word也能做出网页，但有许多效果做不出来，且垃圾代码太多，也是不可取的。接下来具体为大家介绍实用的几款网页设计工具。,1.2.1 Dreamweaver CS5简介,Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计

8、师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。下面针对该软件的一些特性以及相关内容进行简单介绍。,1.新增功能特性 关于新增功能的相关内容及其特性如表所示。,2操作界面 （1）界面显示 在打开Dreamweaver CS5之后，窗口将显示如图所示的内容。通过有针对性的选择“打开最近的项目”、“新建”、“主要功能”这些栏目中的选项，可以进行具体操作。,（2）菜单栏 如图所示，是打开Dreamweaver CS5后它的菜单栏。我们可以通过它的各项功能命令，来实现最终的效果与制作。,（3）工具箱 如图所示，是打开Dreamweaver CS5

9、后它的工具箱中的内容显示。我们可以通过它的各项功能，来使用工具制作与实现效果。,1.2.2 Flash CS5简介,Flash是用于制作适合网络传输的流媒体动画的软件。Flash动画文件具有体积小、可边下载边播放、多媒体交互性等特点。最大的好消息是，Flash CS5对开发人员更加友好，Flash CS5可以和Flash Builder（即最新版本的Flex Builder）协作来完成项目。如果你使用Flash CS5，那么就可以通过它的新的导出对话框建立一个新的FlashBuilder项目。下面针对该软件的一些特性以及相关内容进行简单介绍。,1功能特点 （1）Flash与Dreamweave

10、r、Fireworks具有相同相同风格的快速启动栏、浮动面板、菜单栏、工具箱等； （2）提供了与Fireworks基本相同的绘图工具，因此对于熟悉Fireworks的用户基本可以不用重新学习就可以绘图； （3）利用关键帧和元件等技术可以轻易地制作出各类动画； （4）提供了层技术，使动画的各个组成部分既分又合，方便制作和修改； （5）支持许多图像、声音、视频格式，这些多媒体文件均可以直接导入动画中，从而使Flash动画声像并茂； （6）提供了较完善的ActionScript脚本语言，可以为动画加入交互效果。,2新的功能特性 关于新功能的相关内容及其特性如表所示。,3操作界面 （1）界面显示 在打

11、开Flash CS5之后，窗口将显示如图所示的内容。通过有针对性的选择“从模板创建”、“新建”、“学习”这些栏目中的选项，可以进行具体操作。,（2）菜单栏 如图1所示，是打开Flash CS5后它的菜单栏。我们可以通过它的各项功能命令，来实现最终的效果与制作。 （3）工具箱 如图1所示，是打开Flash CS5后它的工具箱中的内容显示。我们可以通过它的各项功能，来使用工具制作与实现效果。 图1 图2,（4）时间轴 对于Flash的制作，时间轴起着相当重要的作用，在初始界面中，软件将自动将其打开，以便于用户使用，其界面内容如图所示。,1.2.3 Fireworks CS5简介,Fireworks

12、是网络图形处理软件，集网页图形的创建、编辑、管理于一体，简化了制作网页图形的流程，能生成大小合适质量较好的网页图形。Fireworks是网页原型和网页效果图设计利器，在最新的CS 5版本中相信大家更有体会。下面针对该软件的一些特性以及相关内容进行简单介绍。,1功能特点 （1）工作环境与Dreamweaver、Flash和谐统一，具有风格相同的面板、菜单栏、工具箱等。 （2）提供了强大的矢量图形和位图图像的编辑功能，可以直接在位图图像和矢量图象之间进行切换，避免在多个应用程序之间转移。 （3）可快速创建Web导航，由向导程序自动生成图形和JavaScript代码，并可在Dreamweaver中方

13、便地编辑所生成的图形文件。 （4）可进行图形的热区与切片操作，创建复杂的交互动作和GIF动画文件。,2新增功能特性 （1）自定义笔刷，Fireworks CS5终于能够像他的老大哥Photoshop那样自定义笔刷样式了，甚至在Fireworks CS5中可以导入PhotoShop和illustrate所定义好的笔刷效果。 （2）在Fireworks CS5中，将包含PhotoShop的所有滤镜，让你发挥无限创意的可能! （3）支持表格布局，可以使用类似于Dreamweaver的表格工具在Fireworks CS5中直接绘制表格。 （4）新增的修剪变形工具，能够轻松创建各种曲线图形。 （5）在F

14、ireworks CS5中使用Microsoft帮助！也许这个并不重要，但是这说明微软正在和Adobe联手开发基于Fireworks CS5的各种应用。,3操作界面 （1）界面显示 在打开Fireworks CS5之后，窗口将显示如图所示的内容。通过有针对性的选择“打开最近的项目”、“新建”这些栏目中的选项，可以进行具体操作。,（2）菜单栏 如图所示，是打开Fireworks CS5后它的菜单栏。我们可以通过它的各项功能命令，来实现最终的效果与制作。,（3）工具箱 如图所示，是打开Fireworks CS5后它的工具箱中的内容显示，在窗口中分别显示于左右两侧。我们可以通过它的各项功能，来使用工

15、具制作与实现效果。,1.2.4 Photoshop CS5简介,Photoshop CS5有标准版和扩展版两个版本。Photoshop CS5标准版适合摄影师以及印刷设计人员使用，Photoshop CS5扩展版除了包含标准版的功能外还添加了用于创建和编辑3D和基于动画的内容的突破性工具。下面针对该软件的一些特性以及相关内容进行简单介绍。,1特点及功能 （1）支持大量的图像文件格式. （2）文本处理更加方便，可以在任何时候修改文本内容，并可以对文本层进行多种格式设置。 （3）增强的色彩功能，提供了更广泛的色彩范围。 （4）增强图层的功能，可以建立文本层、效果层，并增加了图层操作命令。 （5）丰

16、富的滤镜功能。 （6）具有“Actions（动作）选项板”，能对图像处理操作进行有效的控制管理。 （7）无限的撤消和重复操作为图像处理提供了更广泛的空间。 （8）具有“魔术棒”、“磁性套索”等工具。,2新增功能特性和增强的功能特性 关于新增功能特性和增强的功能特性，具体见表所示。,3操作界面 （1）初始界面 Photoshop CS5的初始界面，并不像前面的Dreamweaver、Flash、Fireworks这些所显示的类型，它在用户打开使用该软件时，直接进入到可操作的画面了。具体效果，如图所示。,（2）菜单栏 如图所示，是打开Photoshop CS5后它的菜单栏。我们可以通过它的各项功能命令，来实现最终的效果与制作。,（3）工具箱 如图所示，是打开Photoshop CS5后它的工具箱中的内容显示，在窗口中分别显示于左右两侧。我们可以通过它的各项功能，来使用工具制作与实现效果。,如图所示的效果，是使用Photoshop进行制作的内容。是不是觉得它很不错，那么就让我们一起来学习这些软件的使用的方法吧！,1.3 网站设计的方法和技巧,网站设计除了要考虑整体的画面效果