网页设计和制作基础知识.pptVIP

主讲人：物理与电子工程学院　张亮;教学内容;主要教学环节;网络计算机网络在信息时代中的作用;Internet的历史;;Internet提供的主要服务;网络协议;;2.WEB服务器及客户机; 客户端浏览器：通过在地址栏中输入Web服务器地址从而访问Web服务器的软件； 目前主要是Internet Explorer（IE）和Netscape：;浏览网页的工作过程;浏览网页的工作过程;统一资源定位器（URL） URL的全文为Uniform Resource Locator，译为统一资源定位器用于指定要取得的Internet上资源的位置与方式; 以目前的网页技术来说，大致可分为三个方面来加以说明 静态网页（HTML、CSS）：仅展示信息 静态网页是用HTML编写，扩展名为.htm或.html。 静态网页只能单纯地在网页中展示文字与图片，它是所有网页的基础技术。 网页美工（Flash、Fireworks） 动态网页（JavaScript/VBScript、ASP） ）：可实现互交功能;一个网站的制作流程类似与一个电视节目的制作过程，包括:;1.网页设计基本步骤 （1）设计网页栏目及组织结构 （2）准备素材 （3）界面设计 （4）网页排版（页面实现） （6）网页测试与发布 （7）网页推广与维护;2.制作网页时要注意的问题 网页的标题要简洁，明确。 对重点内容要强调显示。 网页中插入的图片要尽量的小。 图形要附加文字说明，以便关闭图像时查看。 网页中引用的资料及商标（或图标），不能侵犯版权。 ;*;*;*;*;*;*;版式设计的构成类型;　　水平分割的页面具有较强的视觉稳定性，给人平静、安定的感觉 ;　　垂直分割强调的是垂线的视觉冲击力，体现坚强、理智与秩序的感觉 ;　　曲线、弧线、曲线形状的应用能够产生运动、韵律的动感，形成富有活力的视觉效果。 ;　　曲形与直形的综合应用是将以上两种线条和形状结合起来运用，不仅能够丰富网页的表现力，还能使网页更富于变化，艺术效果更丰富多彩。 ;页面中的点、线、面及留白的处理; 线与面的作用;版面的大面积的空白给人以无限的想象空间 ; 点、线、面关系的处理 ;由文字构成的点、线、面关系的标题与导航按钮 ;版式设计的构成形式;*;*;非彩色的搭配 ;色彩的搭配 ;;　首先确定运用一种色彩，然后调整透明度或者饱和度，将网页背景、文字、边框等元素都控制在此色彩中，只是在明度上有所变化 。;　　需要你熟悉色环，准备一个色环参考。首先选定一种色彩，然后选择它的对比色。影响对比色配色效果的重要因素在于使用的色调。 ;　　同类色、类似色适合凝造整齐统一的气氛，但是应注意避免缺少对比，而使画面不够响亮。 ;　　深浅不同的灰色与较单一的有彩色搭配是比较安全的配色方案。非彩色与彩色搭配时，可以起到突出色彩的效果。 ;*;*;*;*;*;*;*;*;*;网页色彩搭配方案 ;　　动态效果强烈的鲜明对比色彩赋于站点奔放、激情的个性。 ;自然的、静寂的配色;　　宁静、朴素的氛围要以整洁的环境为基础，所以在创造这种环境时要避免运用过多的颜色，尽量运用浅淡清爽的色调，才能得到较好的效果。;亲切的配色 ;　　女性带给人的感觉多是柔美、典雅的，粉质的色彩用来表现女性的温柔和典雅魅力再合适不过了。 ;　　蓝紫色、金色等能营造神秘的高层感觉。;职业的配色 ;网页美化工具（图像）： Photoshop和Fireworks等 网页美化工具（动画）： Flash和Swish等 网页排版工具： DreamWeaver和FrontPage等 ;网页欣赏;（三）知识讲解;;;（三）知识讲解;　 欣赏“凤凰古城旅游网”，网址是：。 该首页给人的视觉效果是一种古朴的气息迎面扑来， 　 整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。 主页题头的凤凰古城图片恰到好处，突出了主题， 同时也起到了广告作用。 导航栏的文字颇具特色。 首页的模块划分采用的是左右两大模块， 内容划分清晰。;图1-1　　凤凰古城旅游网的首页 ;1.3　体育类网站赏析; 欣赏新东方教育网站，网址是： 其首页主要列出了导航菜单和网站地图，简洁明了、排列整齐。 　颜色的搭配主要采用黄、绿色调，采用了类似色的搭配，给人以清新、和谐的视觉美感。 　该网页给人的视觉感受是和谐美观，在模块的划分上比较明显，采用“左、中、右”三个板块 　每个内容板块都采用了不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。;图1-4　　新东方教育网的新闻网页 ; 浏览几个网站，对所浏览网站首页的特色和不足进行赏析说明，主要包括页面布局结构、颜色搭配、导航栏、文字效果、图片效果、动画效果等。从以下网站中选