网页设计与制作案例教程

书名：网页设计与制作案例教程ISBN：978-7-111-27397-4作者：池同柱出版社：机械工业出版社本书配有电子课件网页设计与制作案例教程高职高专ppt课件第1章网页设计与制作基础网页设计与制作案例教程高职高专ppt课件一、网页的基本概念1.网页与网站网站是指建立在互联网上的Web站点，是互联网上相关网页的集合，它面向公众提供互联网内容服务。网页是上网时看到的一个个页面，网站与网页的关系类似于一本书与一页书。网页设计与制作案例教程高职高专ppt课件2.静态网页与动态网页网页按其表现形式来划分可分为动态页和静态页。静态网页只能浏览，不能实现客户端和服务器端的交流互动，在静态网页中，也可以出现各种动态的效果，如GIF格式的动画、FLASH影片、滚动字幕等，这些“动态效果”只是视觉上的，并不能实现客户端和服务器端的交互。动态网页的页面内容随用户的输入而变化，能与客户端交流互动，它们会随不同客户、不同时间，返回不同的网页，动态网页使用ASP、PHP、JSP、ASP.NET等技术生成。静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少。网页设计与制作案例教程高职高专ppt课件二、网页制作常用工具1．利用PhotoshopCS3设计网页图像2.利用FireworksCS3设计网页图像3.利用网页编辑软件DreamweaverCS3制作网页4.利用网页动画软件FlashCS3制作动画网页设计与制作案例教程高职高专ppt课件色彩的魅力是无限的，它是网站重要的表现形式之一。1、网页色彩的基础知识从物理学上，色光可分解为红、橙、黄、绿、青、蓝、紫等，其中，红、绿、蓝是三原色，在计算机科学中我们称之为RGB三原色，三原色通过不同比例的混合可以得到自然界中五颜六色、千变万化的各种颜色。现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其他的色彩都属于彩色。任何一种彩色具备3个特征：色相、明度和纯度。其中非彩色只有明度属性。三、网页中色彩的应用网页设计与制作案例教程高职高专ppt课件2、网页色彩的搭配色彩搭配既是一项技术性工作，搭配协调可以设计出色彩鲜明、性格独特的网站。1）网页色彩搭配技巧单色、邻近色、对比色、黑色、背景色、色彩的数量的使用。网站用色一般控制在3种色彩以内，通过调整色彩的各种属性来产生变化。网页设计与制作案例教程高职高专ppt课件2）常见的网页配色方案红色代表热情、活泼、热闹、温暖、幸福和吉祥。易引起人的注意，使人兴奋、激动、紧张和冲动，还易造成人视觉疲劳的颜色。黄色代表明朗、愉快、高贵和希望。只要在纯黄色中混入少量的其他色，其色相感和色性格均会发生较大程度的变化。白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。在白色中加入其他任何色，都会影响其纯洁性，使其性格变的含蓄。紫色代表优雅、高贵、魅力、自傲和神秘的感觉。在紫色中加入白色，可使变得优雅、娇气，并充满女性的魅力。网页设计与制作案例教程高职高专ppt课件蓝色代表深远、永恒、沉静、理智、诚实、公正权威。蓝色是一种在淡化后仍然能保持较强个性的颜色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。绿色代表新鲜、充满希望、和平、柔和、安逸和青春。绿色是具有黄色和蓝色两种成份的颜色。一般农林业、教育类网站常使用绿色代表希望、充满活力。灰色在商业设计中，具有柔和、高雅的意象，而且属于中间性格，易接受，所以也是永远流行的主要颜色。在许多的高科技产品，尤其是和金属材料有关的，几乎都采用灰色来传达高级、科技的形象。网页设计与制作案例教程高职高专ppt课件四、网页布局1．网页设计的原则主次分明，中心突出大小搭配，相互呼应图文并茂，相得益彰简洁一致网页布局时的元素：格式美观的正文、和谐的色彩搭配、较好的对比度、使得文字具有较强的可读性、生动的背景图案、页面元素大小适中、布局匀称、不同元素之间留有足够空白、各元素之间保持平衡、文字准确无误、无错别字、无拼写错误。文本和背景的色彩：一个页面显示的颜色不宜过多，应控制在256色以内。主题颜色通常只需要2～3种，并采用一种标准色。网页设计与制作案例教程高职高专ppt课件2．网页布局的基本要素学习网页设计首先需要了解构成网页的基本元素，这样才能在页面设计中得心应手，根据需要合理地组织和布局网页内容。一般网页的基本内容包括：页面标题、网站标志、页眉、导航栏、主内容区和页脚。1）页面标题网站中的每一个页面都有标题，用来提示该页面的主要内容。标题出现在浏览器的标题栏中，而不是出现在页面布局中。它还有一个比较重要的作用就是引导访问者清楚地知道所要浏览网站的内容，不至于迷失方向。2）网站标志网站标志在互联网上是一个站点的象征，是网站形象的重要体现。另外，还在站点之间的互相链接中扮演着重要的角色，一个好的标志可以很好地树立公司形象。网站标志一般放在网站的左上角，访问者一眼就能看到它，可见标志的重要性。网站标志通常有3种尺寸：88×31像素、120×60像素和120×90像素。3）页面尺寸由于页面尺寸和显示器大小及分辨率有关系，一般分辨率在800×600像素的情况下，页面的显示尺寸为780×428像素；分辨率在640×480像素的情况下，页面的显示尺寸为620×311像素；分辨率在1024×768像素的情况下，页面的显示尺寸为1000×600像素。从以上数据可以看出，分辨率越高页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因。一般浏览器的工具栏都可以取消或者增加，那么当显示全部工具栏和关闭全部工具栏时，页面的尺寸是不一样的。在网页设计过程中，虽然页面可以设计很长的网页，最好不要让访问者拖动页面超过3屏，如果确实需要在同一页面显示超过3屏的内容，那么最好能在网页顶部加上锚点链接，以方便访问者浏览。4）导航栏导航栏既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。一般来说网站中的导航位置在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航的位置对网站的结构与各个页面的整体布局起到举足轻重的作用。导航的位置一般有4种常见的显示位置：在页面的左侧、右侧、顶部和底部。有的在同一个页面中运用了多种导航，如有的在顶部设置了主菜单，而在页面的左侧又设置了折叠式的折叠菜单，同时又在页面的底部设置了多种链接，这样便增强了网站的可访问性。当然并不是导航在页面中出现的次数越多越好，而是要合理地运用页面达到总体的协调一致。如果网页的页面比较长，最后在页面底部也设置一个导航，这样如果浏览者正在阅读页面底部的内容，就不用再拖动浏览器滚动条来选择页面顶部的导航条，而直接使用页面底部的导航。5）页眉和页脚页眉指的是页面上端的部分。有的页面划分的比较明显，有的页面则没有明确的区分或者没有页眉。页眉的风格一般要求和页面的整体风格保持一致。页眉的位置吸引注意力较高。页眉的作用是定义页面的主题。如站点的名字多数都显示在页眉里。这样访问者能很快知道这个站点是什么内容。页眉是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页眉常放置站点的图片、公司标志、公司名称、宣传口号和广告语等，甚至有些网站将此设置为广告席位来出租。页脚和页眉相呼应。页眉是放置站点主题的地方，而页脚是放置公司联系信息的地方。许多信息都是放置在页脚的。3、网页布局方法在制作网页前，可以先布局出网页的草图。网页布局的方法有两种，下面分别加以介绍。1）纸上布局新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西，尽可能地发挥想像力，将想到的“景象”画上去。这属于创造阶段，不必讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽可能地多画几张草图，最后选定一个满意的来创作。2）软件布局如果不喜欢用纸来画出布局意图，那么还可以利用Photoshop、Fireworks等软件来完成这些工作。不像用纸来设计布局，利用软件可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。4、常见的版面布局形式网页设计要讲究编排和布局，虽然网页设计不同于平面设计，但它们有许多相近之处，应加以利用和借鉴。网页的版面布局主要指网站主页的版面布局，其他网页的版面与主页风格基本一致。为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。设计版面布局前先画出版面的布局草图，接着对版面布局进行细划和调整，反复细划和调整后确定最终的布局方案。常见的网页布局形式大致有“国”字型、“厂”字型、“框架”型、“封面”型和Flash型布局。1）“国”字型布局也称为“同”字型，布局如图1-1所示。最上面是网站的标志、广告以及导航栏，接下来是网站的主要内容，左右分别列出一些栏目，中间是主要部分，最下部是网站的一些基本信息、联系方式和版权声明等。这种结构是国内一些大中型网站常见的布局方式。这种布局的优点是充分利用版面、信息量大，缺点是页面拥挤、不够灵活。图1-1“国”字型布局图1-2“厂”字型布局2）“厂”字型布局结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。如图1-2所示为网站采用“厂”字型布局。3）“框架”型布局“框架”型布局一般有左右框架型、上下框架型、综合框架型布局，一栏是导航栏目，一栏是正文信息。复杂的框架结构可以将页面分成许多部分，常见的是三栏布局，如图1-3所示。上部一栏放置图片广告，左边一栏显示导航栏，右边显示正文信息内容。图1-3框架型布局网页图1-4封面型主页4）“封面”型布局这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。如图1-4所示为封面型主页。5）Flash型布局其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。如图1-5所示为采用的Flash型网页布局。图1-5Flash型网页布局5、网页中的文字设计在确定网页的版面布局后，还需要确定文本的样式，如字体、字号和颜色等，还可以将文字图形化。文本是人类重要的信息载体和交流工具，网页中的信息也是以文本为主。1）文字的字体、字号、行距网页中默认的标准字体是中文“宋体”和英文“TheNewRoman”。如果在网页中没有设置任何字体，在浏览器中将以这两种字体显示。字号大小可以用不同的方式来计算，如磅（point）或像素（pixel）。最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。注意：小字号容易产生整体感和精致感，但可读性较差。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。行距可以用行高（line-height）属性来设置，建议以磅或默认行高的百分数为单位。例如：｛line-height：20pt｝、｛line-height：150%｝。2）文字的颜色在网页设计中可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。如正常字体颜色为黑色，默认