网页设计及工具.ppt

第1章 网页设计及工具,现今，网站已经被越来越多的人所熟识与使用。构成网站的基本元素是网页，当你轻点鼠标，遨游网络世界时，精彩的网页将一副副的呈现于面前，使人们通过网站来发布以及获取相关信息更加地方便。本章将通过相关内容的介绍，来详细讲解网页设计的基础知识，同时认识有关网页设计的常用工具。,1.1 网页设计概述,网站由一个特定人群和组织控制的一组网页的组合。网站是由众多的网页组成的，页面是否精彩直接关系着网站是否受人们的欢迎。本章通过讲解，将向大家展示有关网页设计的基础知识及相关概念。,1.1.1 网页和网站基础知识,网站的建设首先需要从网页开始，网页和网站究竟是怎么一回事呢？接下来让我们通过了解网页和网站的基础知识，来初步认识它们，为网页和网站的建设与制作铺路开拓。,1网页和网站的区别关于网页：简单来说，大家通过浏览器看到的画面就是网页。在互联网上应用最广的是网页浏览，浏览器窗口中显示的一个页面称作一个网页，网页可以包括文字、图片、动画以及视频、音频等内容。网页说具体了是一个HTML文件，浏览器是用来解读这份文件的。如图所示是一网站页面。,关于网站：网站是众多网页集合而成的，不同的用户通过有组织的连接整合一起，为浏览者提供更丰富的信息。网站由域名（domain name又称网址），网站源程序和网站空间三部分构成。网站也是信息服务类企业的代名词，如在新浪、搜狐工作的人，也可以说，他在一家网站工作。如图所示是新浪网站的首页的截图。,2什么是网页设计与制作其实网页就是一个HTML文件，我们所要学习的网页设计与制作，就是学习如何编辑这个文件。多个HTML文件集合而成的内容也就是网站，制作一个网站，也就意味着你需要单独编辑若干个HTML文件。多个HTML文件需要通过“超链接”进行连接。,3主页面一般情况下，一个网站都相应的制作有一个被称作主页（HomePage）的页面，它常常被看作是该网站的大门，起着引导访问者去进入浏览的作用。同时，网站有些什么内容，更新了什么内容等等，都可以通过主页直接被访问者熟知。如图所示是腾讯网的主页。,1.1.2 网站类型,网站有静态和动态之分，根据不同的划分标准，网站被分为好多种类型。接下来我们通过详细的分析，来具体介绍网站的类型，以及在制作网站前，如何选择适合的网站类型。,1网站分类从所用编程语言不同来划分，包括ASP、PHP、JSP、ASP.net从用途不同来划分，包括门户网站、行业网站、娱乐网站从持有者不同来划分，包括个人网站、商业网站、政府网站从商业目的不同来划分，包括营利型网站、非营利型网站,2类型选择将网站按照主体性质不同可分为政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其它非盈利机构网站以及其它类型。按网站模式划分，可分为综合类门户网站、电子商务网站、专业网站等。以下，通过简要介绍网站的模式，分析有关合适网站类型的选择。其具体内容如表所示。,1.1.3 静态网站制作流程,静态网站的制作相对比较简单，主要可以分四个部分来完成。1内容的策划在网站创业前，进行系统的策划是非常必要的。如果要让网站从大量站点中脱颖而出，就必须进行详细而深入的论证。（1）确定需要建立什么样的网站（2）选择什么样的网站内容（3）确定用户群体，便于内容投其所好（4）前期策划决定网站竞争力（5）怎样策划一个好的网站（6）策划需要注意的事项,2图纸的设计设计图纸是在Photoshop或者Fireworks中把你想做的网站用图片的形式画出来。Photoshop的灵活多变以及超级强大的功能，完全可以画出绚烂的网页出来。浏览器的不同像多窗口浏览器有一个标签栏，就算是IE，常用图标也有大小之分。因此具体的尺寸是多少，你需要在实际制作过程中自己灵活掌握。3网页的切割网页的切割还是要交给Photoshop或者Fireworks来完成，这里主要是使用它们的切片工具。这建议大家更多使用Fireworks，因为它专业，也更容易上手。切割网页就是把图片切割成若干个小图片，其中宽度高度什么的都得自己去掌握去学习。,4制作网页网页就是表格加图片加Flash，在完成了内容策划，图纸设计，页面切割之后，我们就可以着手进行网页的制作了。在本书的具体制作的应用实例，我们都通过Dreamweaver CS5来进行相关操作。当然，用于制作网页的工具远远不止这一些。,1.1.4 动态网站制作流程,对于动态网站，因为有脚本语言，所以比较复杂的。同样，要做的工作也就更多了。主要有以下几方面：1整体规划对于整体规划，可以从以下几方面来进行：动态程序语言的确立 网站栏目功能规划 根目录策划,2数据库规划3编写网站后台4编写网站前台5测试及修改阶段6网站的发布,1.2 网页设计工具,“工欲善其事，必先利其器”。制作网页第一件事就是选定一种网页制作软件。从原理上来讲，虽然直接用记事本也能写出网页，但是对网页制作必须具有一定的Html基础，非初学者能及，且效率也很低。用Word也能做出网页，但有许多效果做不出来，且垃圾代码太多，也是不可取的。接下来具体为大家介绍实用的几款网页设计工具。,1.2.1 Dreamweaver CS5简介,Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。下面针对该软件的一些特性以及相关内容进行简单介绍。,1.新增功能特性关于新增功能的相关内容及其特性如表所示。,2操作界面（1）界面显示在打开Dreamweaver CS5之后，窗口将显示如图所示的内容。通过有针对性的选择“打开最近的项目”、“新建”、“主要功能”这些栏目中的选项，可以进行具体操作。,（2）菜单栏如图所示，是打开Dreamweaver CS5后它的菜单栏。我们可以通过它的各项功能命令，来实现最终的效果与制作。,（3）工具箱如图所示，是打开Dreamweaver CS5后它的工具箱中的内容显示。我们可以通过它的各项功能，来使用工具制作与实现效果。,1.2.2 Flash CS5简介,Flash是用于制作适合网络传输的流媒体动画的软件。Flash动画文件具有体积小、可边下载边播放、多媒体交互性等特点。最大的好消息是，Flash CS5对开发人员更加友好，Flash CS5可以和Flash Builder（即最新版本的Flex Builder）协作来完成项目。如果你使用Flash CS5，那么就可以通过它的新的导出对话框建立一个新的FlashBuilder项目。下面针对该软件的一些特性以及相关内容进行简单介绍。,1功能特点（1）Flash与Dreamweaver、Fireworks具有相同相同风格的快速启动栏、浮动面板、菜单栏、工具箱等；（2）提供了与Fireworks基本相同的绘图工具，因此对于熟悉Fireworks的用户基本可以不用重新学习就可以绘图；（3）利用关键帧和元件等技术可以轻易地制作出各类动画；（4）提供了层技术，使动画的各个组成部分既分又合，方便制作和修改；（5）支持许多图像、声音、视频格式，这些多媒体文件均可以直接导入动画中，从而使Flash动画声像并茂；（6）提供了较完善的ActionScript脚本语言，可以为动画加入交互效果。,2新的功能特性关于新功能的相关内容及其特性如表所示。,3操作界面（1）界面显示在打开Flash CS5之后，窗口将显示如图所示的内容。通过有针对性的选择“从模板创建”、“新建”、“学习”这些栏目中的选项，可以进行具体操作。,（2）菜单栏如图1所示，是打开Flash CS5后它的菜单栏。我们可以通过它的各项功能命令，来实现最终的效果与制作。（3）工具箱如图1所示，是打开Flash CS5后它的工具箱中的内容显示。我们可以通过它的各项功能，来使用工具制作与实现效果。图1 图2,（4）时间轴对于Flash的制作，时间轴起着相当重要的作用，在初始界面中，软件将自动将其打开，以便于用户使用，其界面内容如图所示。,1.2.3 Fireworks CS5简介,Fireworks是网络图形处理软件，集网页图形的创建、编辑、管理于一体，简化了制作网页图形的流程，能生成大小合适质量较好的网页图形。Fireworks是网页原型和网页效果图设计利器，在最新的CS 5版本中相信大家更有体会。下面针对该软件的一些特性以及相关内容进行简单介绍。,1功能特点（1）工作环境与Dreamweaver、Flash和谐统一，具有风格相同的面板、菜单栏、工具箱等。（2）提供了强大的矢量图形和位图图像的编辑功能，可以直接在位图图像和矢量图象之间进行切换，避免在多个应用程序之间转移。（3）可快速创建Web导航，由向导程序自动生成图形和JavaScript代码，并可在Dreamweaver中方便地编辑所生成的图形文件。（4）可进行图形的热区与切片操作，创建复杂的交互动作和GIF动画文件。,2新增功能特性（1）自定义笔刷，Fireworks CS5终于能够像他的老大哥Photoshop那样自定义笔刷样式了，甚至在Fireworks CS5中可以导入PhotoShop和illustrate所定义好的笔刷效果。（2）在Fireworks CS5中，将包含PhotoShop的所有滤镜，让你发挥无限创意的可能!（3）支持表格布局，可以使用类似于Dreamweaver的表格工具在Fireworks CS5中直接绘制表格。（4）新增的修剪变形工具，能够轻松创建各种曲线图形。（5）在Fireworks CS5中使用Microsoft帮助！也许这个并不重要，但是这说明微软正在和Adobe联手开发基于Fireworks CS5的各种应用。,3操作界面（1）界面显示在打开Fireworks CS5之后，窗口将显示如图所示的内容。通过有针对性的选择“打开最近的项目”、“新建”这些栏目中的选项，可以进行具体操作。,（2）菜单栏如图所示，是打开Fireworks CS5后它的菜单栏。我们可以通过它的各项功能命令，来实现最终的效果与制作。,（3）工具箱如图所示，是打开Fireworks CS5后它的工具箱中的内容显示，在窗口中分别显示于左右两侧。我们可以通过它的各项功能，来使用工具制作与实现效果。,1.2.4 Photoshop CS5简介,Photoshop CS5有标准版和扩展版两个版本。Photoshop CS5标准版适合摄影师以及印刷设计人员使用，Photoshop CS5扩展版除了包含标准版的功能外还添加了用于创建和编辑3D和基于动画的内容的突破性工具。下面针对该软件的一些特性以及相关内容进行简单介绍。,1特点及功能（1）支持大量的图像文件格式.（2）文本处理更加方便，可以在任何时候修改文本内容，并可以对文本层进行多种格式设置。（3）增强的色彩功能，提供了更广泛的色彩范围。（4）增强图层的功能，可以建立文本层、效果层，并增加了图层操作命令。（5）丰富的滤镜功能。（6）具有“Actions（动作）选项板”，能对图像处理操作进行有效的控制管理。（7）无限的撤消和重复操作为图像处理提供了更广泛的空间。（8）具有“魔术棒”、“磁性套索”等工具。,2新增功能特性和增强的功能特性关于新增功能特性和增强的功能特性，具体见表所示。,3操作界面（1）初始界面Photoshop CS5的初始界面，并不像前面的Dreamweaver、Flash、Fireworks这些所显示的类型，它在用户打开使用该软件时，直接进入到可操作的画面了。具体效果，如图所示。,（2）菜单栏如图所示，是打开Photoshop CS5后它的菜单栏。我们可以通过它的各项功能命令，来实现最终的效果与制作。,（3）工具箱如图所示，是打开Photoshop CS5后它的工具箱中的内容显示，在窗口中分别显示于左右两侧。我们可以通过它的各项功能，来使用工具制作与实现效果。,如图所示的效果，是使用Photoshop进行制作的内容。是不是觉得它很不错，那么就让我们一起来学习这些软件的使用的方法吧！,1.3 网站设计的方法和技巧,网站设计除了要考虑整体的画面效果之外，更多的还需要有相关的功能操作的合理与否、便捷与否方面的考虑。这就要求大家掌握网站设计的方法和技巧，以便于大家在实际的制作过程中，能更好的制作出被大家所喜欢的网站，吸引更多的浏览者，达到网站的宣传、展示以及其它的作为网络推广手段的根据地与战壕。在设计过程中，如下内容可供大家借鉴、参考。包装爆点整文案，信息层级是关键；题图设计重创意，发散思维找图例；突出按钮显氛围，视觉引导要记牢；下面样式上面找，整体统一很重要；内容排版耐心调，虎头蛇尾太糟糕。,1总体构思的方法与技巧（1）留白量和版面率的重要性如图所示二图的效果，是对留白量和版面率的一个反映。,（2）明暗状态的调整如图所示是一明暗状态调整前后，不同显示效果的展示。,（3）垂直与水平状态如图所示，是垂直与水平状态在网页中的应用。,（4）统一与调和状态如图所示，是对统一与调和状态的诠释。,（5）大小、明暗、粗细的对比如图所示，是关于大小、明暗和粗细效果的处理结果。,（6）平衡关系如图所示，就是平衡关系。,2字体图形化设计的方法与技巧为了满足网站浏览者的审美要求，需要对字体进行独特的个性化的设计。达到让用户有效的了解页面的重点信息的目的。这就督促我们，在不断接触设计、制作的过程中，掌握字体图形化设计的方法与技巧，并且提高。（1）变形处理建议在自己设计时，可以参考英语字母的字体，如图所示。,（2）组合处理如图所示，就是此类效果。,（3）3D技术的运用在掌握了上述几种技术后，大家同时也需要注意一些内容：（1）网页设计主要是信息的传达设计，任何的设计目的的是为了让用户快速有效到其信息，同时不要为了浮夸的设计技巧而舍本逐末，首先最重要的是先保证其识别性；（2）字体不是孤立存在的，是页面内容之一，在设计的时候需考虑与周围的其他页面元素的协调一致，强化页面的整体氛围的营造。,3网站导航条设计界面的一些常见方法技巧网站导航条一般位于网站的最上面，也算是网站设计的几大吸引点之一，导航条的形状与色系关系到整个网站的版面风格走向，在网页设计的过程中处于非常重要的作用。如图所示，是一网站及其导航条的截图。,4网站的建设方法与技巧（1）设计从题图开始，因为题图设计的质量决定了活动页面对用户的吸引力，突显创意是题图设计的首要任务。（2）活动内容区域的样式设计可从题图中提取元素，既可以保持页面风格的统一也可以提高设计的效率和质量。（3）定位好网站的主题和名称，主题要有特色而且精巧，题材要与网站的各内容有关。,（4）首页的设计，它是全站内容的目录，起到索引作用，从确定首页的功能模块、设计首页的版面、处理技术上的细节这几点出发，如果处理好了，你的此设计就是成功的。（5）定位好网站的形象，主要从设计好网站的标志（logo），设计网站的标准色彩，设计网站的标准字体，设计网站的宣传标语这些内容出发，将网站的建设给完善起来。（6）确定网站的栏目和版块。在动手制作网站前，一定要确定栏目和版块，确定网站的目录结构和链接结构，确定网站的整体风格创意设计。,1.4 网站维护,在千辛万苦的通过大家的共同努力之下，将网站建立之后，那么一定不能忽视网站的维护。网站发布，大家通过网站来了解相关信息、内容，但也有一些东西是跟随网站始终的。那就是网站的内容以及其它的维护。下面具体来为大家讲解有关网站维护的相关内容。,1.4.1 创建站点,关于站点与网站的关系是，先创建站点，接着就可以管理站点，然后就可以着手创建网页了。因此，在进行一切的设计与制作之前，我们的头等大事就是先把站点给创建好，下面就具体来为大家介绍有关它的创建方法。1创建在Dreamweaver CS5中，能有效建立并管理多个站点。关于站点的创建，可以有二种方法，方法一通过向导来创建站点，方法二利用高级设定来完成创建站点。下面具体介绍站点创建的操作方法，具体内容如下：,（1）建目录在打开的Dreamweaver中，单击“站点”|“新建站点”命令，在弹出的“站点设置对象”对话框中，“站点”选项卡下，分别在“站点名称”和“本地站点文件夹”文本框中输入相应的名称，进行站点文件放置目录的创建，单击“保存”目录完成，如图所示。,（2）IIS配置IIS配置的具体方法是，右键单击“我的电脑”，在弹出的快捷菜单中，右键单击“管理”|“Internet信息服务”|“默认网站”|“属性”命令。设置“属性”对话框中的“网站”、“主目录”、“文档”选项卡，分别如图1、图2、图3所示。图1 图2,图3,（3）新建站点在Dreamweaver中，单击“命令”|“新建站点”命令，在弹出的“站点设置对象”对话框中，分别选择“高级设置”选项卡下的“本地信息”和“远程信息”选项，进行相关的设置，单击“确定”按钮完成，如图所示。,（4）建HTML在完成了基础创建后，接下来可以进行HTML网页的创建，具体根据需要来完成即可。（5）用浏览器访问主页当HTML网页创建完成后，为了查看发布时的效果，可以用浏览器访问主页，以及相应的网站页面，进行相应内容的查看。,2管理站点创建完成后，为了它的有序运行，需要进行有效的管理。它的具体内容可以在执行“站点”|“管理站点”命令，弹出的“管理站点”对话框中来实现。在列表中选择要修改的站点，单击“编辑”按钮，弹出“站点定义”对话框。单击“高级”选项卡，在“分类”列表中分别选择“本地信息”、“远程信息”和“测试服务器”，对本地站点、远程站点和测试服务器的设置进行修改。Dreamweaver站点最多由三部分（或文件夹）组成：（1）本地文件夹：是用户的工作目录。Dreamweaver将该文件夹称为本地站点。本地文件夹一般位于本地计算机上，用于存储正在编辑的网页文档及其相关文件。（2）远程文件夹：是存储文件的位置，这些文件用于测试、生产、协作和发布等。远程文件夹一般位于运行Web服务器的计算机上，Dreamweaver将此文件夹称为远程站点。,（3）测试服务器：是Dreamweaver处理动态网页的文件夹。如果运行Web服务器的计算机上同时运行应用程序服务器，则测试服务器文件夹与远程文件夹可指定为同一文件夹，如图所示。,在进行站点的管理过程中，会使用到站点的复制、删除、导入导出的相关操作，它们的具体作用如下：复制站点 删除站点 导入导出站点,1.4.2 申请空间、域名,在网站制作完成后，要实现发布，申请并注册相应的空间和域名是必须的。现在域名提供商和空间提供商，都有相应的这方面的服务。根据自己的需要，为网站申请合适大小的空间，符合自己的域名，这是关键内容。,1.4.3 测试网页,在执行到上述的工作，并且完成以后，网站的建设工作也就完成了。这时，为了发布后的安全，避免错误、以及问题的发生，需要对网站、网页进行试使用，也就是所谓的测试。其实，到这里网站的各项功能是已经成熟并且完善的了，需要做的就是发现BUG，或者是发现其它不合理、不符合在设计和构思之处的严重偏离点，以便于在发布前进行修改或者制作。只有在认为这些都OK了，觉得没问题了，反复检查之后，我们才能将网站呈现在观众面前。,1.5 本章小结,本章的内容，主要从网页设计的基础知识出发，着重介绍了几款用于网页设计的软件。同时，也讲述了有关网站的使用设计的技巧和方法，这个是难点。关于网站维护的相关内容，包括站点的创建，域名、空间的申请，网页的测试的这一系列也是大家需要掌握的。内容之中，也包括了网页制作流程，以及网站的不同的类型。,1.6 本章习题,【习题1】尝试用Dreamweaver CS5创建名为admin的文件。要求：该文件可以直接进行并用于以后的网页制作。【习题2】创建名称为“我的网站”的站点。要求：目录具体包含图片、动画、视频、音乐、admin、data等多个文件。【习题3】自己练习注册一个个人网站的域名，并申请域名空间。,