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