网页设计第一课基础知识.ppt

《网页设计第一课基础知识.ppt》由会员分享，可在线阅读，更多相关《网页设计第一课基础知识.ppt（52页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、一、网页设计基础知识1、网页与网站的关系 网页就是通过浏览器在 Internet上看到的页面，英文名称为 Web Page；网站也称为站点，英文名称为 Web Site，是多个网页的集合，但不是简单的集合，而是取决于该网站的内容（如网页的数量及网站的定位）。2、网站的类型 网站按内容进行分类，可分为门户网站、垂直网站、地方网站；而其中的垂直网站又可分为新闻网站、娱乐网站、体育网站、科技网站、汽车网站、财经网站、房产网站、游戏网站、生活服务网站和教育职业网站等。二、如何上网二、如何上网三、网页设计的基本方式三、网页设计的基本方式1 1、手工编码方式、手工编码方式网页是由HTML超文本标记语言编码

2、的文档，设计制作网页的过程就是生成HTML代码的过程。在WWW（World Wide Web）发展的初期人们制作网页是通过直接编写HTML代码来实现的。指出HTML文档的开始与结束。用来标识网页的头部网页标题网页标题这是正文部分！这是正文部分！2 2、可视化工具方式、可视化工具方式用FrontPage、Dreamweaver等网页编辑工具在可视环境下编辑制作网页元素，由编辑工具自动生成对应的网页代码。如制作表格，就可以直接在工作区中绘制表格而不用考虑编码的规则和语法。利用可视化工具编辑网页操作简单直观，调试方便，是大众化的网页编辑方式。但在制作一些特殊网页效果上有一定的局限性。3 3、编码和可

3、视化工具结合方式、编码和可视化工具结合方式编码和可视化工具结合是一种比较成熟的网页制作方式。具具体体过过程程：一般的网页元素通过可视化工具编辑制作，一些特殊的网页效果通过插入代码生成。四、网页中的常见元素四、网页中的常见元素1 1、文本、文本文本是网页发布信息所用的主要形式，由文本制作出的网页占用空间小，传输速度快。网页中的信息以文本为主。虽然不如图象那样能够很快引起浏览者的注意，但能准确地表达信息的内容和含义。为了克服文本固有的缺点，人们赋予了文本更多的属性，如字体，字号，颜色，底纹和边框等，通过不同格式的区别，表现不同的内容。2 2、图像和动画、图像和动画图像在网页中具有提供信息，展示作品

4、，装饰网页，表达个人情调和风格的作用。用户可以在网页中使用GIF,JPEG(JPG),PNG三种图象格式，其中使用最广泛的是GIF和JPEG两种格式。3 3、声音和视频、声音和视频声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。视频文件的格式也非常多，常见的有Realplay(RM),MPEG,AVI和DivX等。不支持的格式，尽量少用或者不用。4 4、超级链接、超级链接超级链接技术可以说是万维网流行起来的最主要的原因。从本质上讲，是指向目的信息页面的地址信息。是指向目的信息页面的地址信息。可以指向一幅图片，一个电子邮件地址，一个

5、文件，一个程序或者是本网页中的其他位置。5 5、表格、表格在网页中表格用来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。即作为一种容器。6 6、表单、表单使用超级链接，浏览者和Web站点便建立起了一种简单的交互关系。网网页页中中的的表表单单通通常常用用来来接接受受用用户户在在浏浏览览器器端端的的输输入入，然然后后将将这这些些信信息息发发送送到到用户设置的目标端。用户设置的目标端。即问答式交流。7 7、导航栏、导航栏导航栏是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。导航栏的

6、作用就是引导浏览者游历站点。网站中的导航系统，实质上就是一组使用了超链接技术的网页对象（包括文字、按钮、小图片、图形等），它们将网站中的内容有机地连接在一起。网页的基本组成要素网页的基本组成要素 网网页页的的基基本本组组成成要要素素网页常见版面布局形式：国字型、厂字型、框架型、封面型、FLASH型1、国字型：也可以称为同字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。2、拐角型：这种结构与上

7、一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。厂形结构布局：优点是页厂形结构布局：优点是页面结构清晰，主次分明；面结构清晰，主次分明；缺点是规矩呆板，如果细缺点是规矩呆板，如果细节色彩不注意，易让人看节色彩不注意，易让人看之无味。之无味。3、封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。POP

8、布局：页面布局像一布局：页面布局像一张精美的图片。优点是漂张精美的图片。优点是漂亮吸引人，缺点是速度慢亮吸引人，缺点是速度慢对称对比布局：采取左右对称对比布局：采取左右或上下对称的布局，一半或上下对称的布局，一半深色一半浅色，用于设计深色一半浅色，用于设计站点。优点是视觉冲击力站点。优点是视觉冲击力强，缺点是两部分结合较强，缺点是两部分结合较困难。困难。返回“口口”型布局：页面中间型布局：页面中间是主要内容。优点是充分是主要内容。优点是充分利用版面信息，容量大；利用版面信息，容量大；缺点是页面拥挤，不够灵缺点是页面拥挤，不够灵活。活。五、网页元素的创作与编辑工具五、网页元素的创作与编辑工具1

9、1、网页图像制作工具、网页图像制作工具、Fireworks MXFireworks MXFirework MX是Macromedia公司的产品，是目前最流行的网页图像制作软件。、PhotoshopPhotoshop2 2、动画制作工具、动画制作工具、Flash MXFlash MXFlash MX也是Macromedia公司的产品，是目前最流行的矢量动画制作软件。、DirectorDirectorDirector是Macromedia公司推出的多媒体开发工具，它为广大多媒体制作人员提供了建立交互式应用的强大功能。3 3、网页编辑工具、网页编辑工具、FrontPageFrontPageFront

10、Page是 Microsoft Office家 族 中 的 一 员，FrontPage的界面，功能与Word非常相似。操作方法与 Office软件一致。、Dreamweaver MXDreamweaver MXDreamweaver MX和Fireworks MX、Flash MX一起，被人们喻为“网页制作三剑客”。、HotDogHotDogHotDog是较早基于代码的网页设计工具，其最具特色的地方是提供了许多向导工具，能帮助设计者制作页面中的复杂部分。1.3网页配色网页配色1.3.2 网页配色方案1、基本色、辅助色和强调色1.3网页配色网页配色2、常用概念 色彩的对比 色彩对比是指各种色彩在

11、界面内形成的面积、形状、位置以及色相、明度、纯度之间的差异，使网页出现不同的变化和心理感受。1.3网页配色网页配色 色彩的调和 两种或两种以上色彩和谐搭配在一起，会产生调和、统一的效果，是人们追求视觉得到统一、舒适、达到心理平衡的手段。1.3网页配色网页配色1.3.3 色彩在网页设计中的基本应用1、前提：以网站的内容为基础2、寻找搭配方案的技巧和经验3、颜色与文本1.3网页配色网页配色具体搭配实例分析1、儿童类网站1.3网页配色网页配色2、男性特征的网站1.3网页配色网页配色3、体现华丽高贵特色的网站1.3网页配色网页配色4、青年人网站1.3网页配色网页配色5、服装服饰类1.3网页配色网页配色经验与技巧1、忌“花”：色彩不要过多2、冷暖搭配要谨慎3、网站各界面色彩统一4、不要用“花”背景1.6 优秀网站赏析1.6.1 时尚娱乐类网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6.2 信息类网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6.3 商务类网站赏析1.6 优秀网站赏析1.6 优秀网站赏析1.6 优秀网站赏析网页设计宝库http:/