网页设计基础知识.ppt

第一章 网页设计基础知识,1.1 网站概述 1.2 网站策划 1.3 网站开发流程 1.4 网页版式设计 1.5 色彩 1.6 网站标准结构,internet基础,INTERNET的概述 Internet是相互连接的网络集合。Internet是由成千上万个网络、上亿台计算机通过特定的网络协议相互连接而成的全球计算机网络，是提供信息资源查询和信息资源共享的全球最大的信息资源平台。 网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何种方法获得所需的信息。,Internet最初并不是为商业性和广泛使用而设计的。它起源于1969年美国国防部高级研究计划署协助开发的ARPANET。最初是只允许国防部人员进入的封闭式网络。到1987年，在美国国家科学基金会的推动下，将之主要从军事用途转向科学研究和民事用途，形成了今天的Internet主干网雏形NSFNET。全球网络的发展是空前且出人意料的。今天，检查电子邮件、访问喜爱的网站这些活动已融入我们的日常生活。,internet基础,从国内Internet的发展现状来看，1994年4月，中科院计算机网络信息中心正式接入Internet，在10多年的时间里，中国Internet发生了飞速的发展，截至2009年底，我国网民人数超过了2亿。10%的网民普及率将是互联网发展的高速拐点，突破10%之后，中国互联网将迎来更快速的增长期。另外网站数、IP地址等也迅速增长，分别达到84.3万和9800万。从域名、网站数、IP地址等增长情况来看，我国互联网资源得到了全面提升。 Internet所提供的服务主要是WWW、E-mail、FTP、网上传呼、在线聊天、网上购物等等，而其中WWW和E-mail是最常用的服务。,internet基础,WWW,WWW(World Wide Web)简称为Web或万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问internet上的服务器端，迅速地获得所需的信息。如图所示。,用户通过浏览器访问WEB服务器的网页，那么如何查找这些网页呢？通过在浏览器的地址栏中输入网址，即URL，统一资源定位器。 URL的一般格式为：“协议名：/主机名/文件夹名/文件名” 常用的协议名如下： HTTP：超文本传输协议，用于转换网页。 FTP：文件传输协议，主要用于传输文件，许多提供软件下载的网站使用“FTP”作为下载的网址。 MAILTO：传送E-mail协议，主要用于传输电子邮件。 例如： mailto:,1.1.1 网页与网站,构建WWW的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。 通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。 网站点概念是相对的，大的如新浪、搜狐等大的门户网站，页面非常多，可能分布于多台服务器上；小的如一些个人网站，可能只有几个页面，仅在某台WEB服务器的占据很小的空间。 一个站点的起始页面通常被称为“主页”，主页是一个网站的开始，因此主页的好坏决定了这个网站的访问情况，一般主页的名称是固定的index.htm或index.html等。,1.1.2 网站基本分类,专业网站 商业网站 形象类网站 个人主页网站,域名与IP地址,在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。 IP地址是由32bits的二进制数值构成，分成4组，转化为十进制用点分隔，比如：1。,A类地址的范围为： 55 B类地址的范围： -55 C类地址的范围： -55,A,B,C,域名与IP地址,IP地址是一串难以记忆的数字，因此在1985年开始，引入了域名的概念，用具有含义的字符来表示网络中的主机，以便于浏览者访问。域名与IP地址如何对应呢？通过DNS域名解析系统将域名解析到相应的IP地址上，实现这二者之间的对应关系。 我们知道新浪网的域名：，但很少有人知道新浪网WEB服务器的IP地址是多少？ 域名的分类：域名系统是一个分层的树状结构组织，如图所示。最上面是一个无名的根域，下层为顶级域名，接着是二级,1.1.4 域名与IP地址,表1.1 按组织分类的顶级域名,表1.2 按地理区域分类的项级域名,域名的书写格式为：叶节点名.二级域名.顶级域名 例如：，www：web服务器名，sohu：企业名称，com：顶级域名。,1.1.3 网页设计软件概述,目前网页制作工具较多，大多数网页制作工作都是通过“所见即所得”的编辑工具完成的，在网页制作过程，还需要进行素材的创作和加工，即图形和动画制作工具。,网页编辑工具,网页编辑工具主要分为标记型和所见即所得型。标记型工具常用的是notepad(记事本)、Ultraedit等。 所见即所得型的编辑软件主要有：微软的Frontpage和Dreamweaver。其中Frontpage继承了OFFICE系列软件的界面通用、操作简单的特点，十分适合初学者使用。但与MacroMedia公司的Dreamweaver相比，在HTML源代码的精确性、实用性以及对各种新技术的支持上都略逊一筹，因此我们这本教材主要介绍的网页编辑工具是Dreamweaver。,图形和图像处理工具,目前常用的图形和图像处理工具主要：Photoshop及Firework。 Photoshop的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆绑了Image Ready，能够实现各种专业化的图像处理、动画的制作等。 Fireworks是由MacorMedia公司出品的首选WEB图形图像处理软件。它的独特之处在于其能够优化处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等，可以生成Firework HTML，直接导入到网页中，使用非常方便。本教材将在以后的章节做详细的介绍。,动画制作工具,Flash是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。Flash所使用的图形是压缩的矢量图形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出高品质的动画，Flash已经慢慢成为网页动画的标准，成为一种新兴的技术发展方向。本教材将在以后的章节做详细的介绍。,1.2 网站策划,网站策划是以客户需求为基础，以个性化创意为主线，用专业的逻辑、语言与流程，阐述网站价值、模式及其实现方式，从而有效地解决网站建设的方向性问题。,1.3 网站开发流程,要建设一个优秀的网站，通常应该遵循以下工作流程：确定站点的核心网站的规划网站外观的设计网页具体制作网站性能测试网站发布网站更新与维护。,1.3.1 网站规划,一个网站的成功与否与建站前的网站规划有着极为重要的关系。在建立网站前应明确建设网站的目的，确定网站的功能，确定网站规模、投入费用，进行必要的市场分析等。只有详细的规划，才能避免在网站建设中出现的很多问题，使网站建设能顺利进行。 1明确建立网站的目标和用户需求 2确定网站的风格 3网站的技术问题,1.3.2 网站设计,对网站进行详细的规划之后，就可进入到设计阶段。 好的Web站点要做到主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题。调动一切手段充分表现网站点的个性和情趣，突出网站的特点。 1网站的版式设计 2色彩在网页设计中的作用 3网页形式与内容相统一 4三维空间的构成和虚拟现实 5多媒体功能的利用,1.3.3 网页制作,静态网页的制作：采用HTML（超文本标记语言）生成的网页，供浏览者浏览。此阶段需要根据设计阶段制作的示范网页，通过去Dreamweaver等软件在各个具体网页中添加实际内容，如：文字、图像、FLASH动画、多媒体文件等。这类静态网页缺少动态的交互，因此还需添加网页的交互性，即动态网页的制作。 动态网页的制作：动态网页的编程目前常用的技术为.ASP.PHP.JSP等，实现客户端与服务器的交互。比如说：会员注册、信息查询、产品选购、留言、论坛等。,1.3.4 站点的测试和上传 网站制作完毕，在本机上进行测试，查看网站上是否存在某些错误，如网站是否存在链接的错误，图片是否正常显示，网页程序代码是否有错等。 测试完毕，后用上传工具传到WEB服务器上。 1.3.5 站点更新和维护 要充分发挥网站的市场功能，及时更新最新的产品信息。一个企业要有专业的网站维护人员或交给专业的网络公司来承担这项工作。,1.4 网页版式设计,一.网页布局的基本概念 1.页面尺寸： 由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。,1.4 网页版式设计,浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。 在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。,1.4 网页版式设计,2.整体造型： 页面的整体形象，是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。 对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。,1.4 网页版式设计,3.页头： 页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。 4.文本： 文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。,1.4 网页版式设计,5.页脚： 页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。 6.图片 图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。 7.多媒体 除了文本和图片，还有声音，动画，视频等等其它媒体。随着动态网页的兴起，它们在网页布局上也将变得更重要。,1.4 网页版式设计,网页布局的技术 1.层叠样式表的应用 在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。 2.表格布局 表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。,1.4 网页版式设计,表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。对于表格布局，你可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它(要所见即所得的软件)，你会看到这个页面是如何利用表格的。 3.框架布局 不知道什么原故，框架结构的页面开始被许多人不喜欢，可能是因为它的兼容性。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。 我今天来介绍的布局指南并不是全部的网页布局技术，从某种意义上来说，我想引导你在制作网页的时侯，怎样把图片和文本放置的恰到好处，而且如何拥有一个跳越的设计思维。,1.5 色彩,一、色彩的基础知识 色彩五颜六色、千变万化，我们平时所看到的白色光，经过分析在色带上可以看到，它事实上包括红、橙、黄、绿、青、蓝、紫等七色，各颜色间自然过渡。其中，红、黄、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。色彩有冷暖色之分，冷色(如蓝色)给人的感觉是安静、冰冷；而暖色(如红色)给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效果。 色彩与人的心理感觉和情绪也有一定的关系，利用这一点可以在设计网页时形成自己独特的色彩效果，给浏览者留下深刻的印象。一般情况下，各种色彩给人的感觉是：,1.5 色彩,红色代表热情、活泼、热闹、温暖、幸福、吉祥 橙色代表光明、华丽、兴奋、甜蜜、快乐 黄色代表明朗、愉快、高贵、希望 绿色代表新鲜、平静、和平、柔和、安逸、青春 蓝色代表深远、永恒、沉静、理智、诚实、寒冷 紫色代表优雅、高贵、魅力、自傲 白色代表纯洁、纯真、朴素、神圣、明快 灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 黑色代表崇高、坚实、严肃、刚健、粗莽,1.5 色彩,色彩搭配既是一项技术性工作，同时它也是一项艺术性很强的工作，因此，设计者在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。 1.特色鲜明 一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。 2.搭配合理 网页设计虽然属于平面设计的范畴，但它又与其它平面设计不同，它在遵从艺术规律的同时，还考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。,1.5 色彩,3.讲究艺术性 网站设计也是一种艺术活动，因此它必须遵循艺术规律，在考虑到网站本身特点的同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。 三、色彩搭配要注意的问题 1.使用单色 尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。 2.使用邻近色 所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。,1.5 色彩,3.使用对比色 对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。 4.黑色的使用 黑色是一种特殊的颜色，如果使用恰当，设计合理，往往产生很强烈的艺术效果，黑色一般用来作背景色，与其它纯度色彩搭配使用。 5.背景色的使用 背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。 6.色彩的数量 一般初学者在设计网页时往往使用多种颜色，使网页变得很“花”，缺乏统一和协调，表面上看起来很花哨，但缺乏内在的美感。事实上，网站用色并不是越多越好，一般控制在三种色彩以内，通过调整色彩的各种属性来产生变化。,第2章 Dreamweaver 基础,本章详细讲解Dreamweaver 的基础知识，其中包括Dreamweaver 的界面、面板和菜单的的简单介绍。,2.1 Dreamweaver 工作界面,安装好Dreamweaver 软件后，双击安装后的运行程序图标（或者从Windows“开始”菜单的“所有程序”中选择Dreamweaver ）运行Dreamweaver 程序，程序运行后的显示效果如图所示。,2.1.1 菜单栏,菜单栏中包含了Dreamweaver中大多数的命令，菜单栏包括“文件”、“编辑”、“查看”、“插入记录”、“修改”、“文本”、“命令”、“站点”、“窗口”、“帮助”等10个选项。 菜单栏中包含了Dreamweaver 中大多数操作和常用命令，在实际的页面制作中经常使用。,1.参数设置,选择“编辑” “首选参数”，打开对话框，可以进行相应的参数设置,2.页面属性设置,选择“修改” “页面属性”，打开对话框，可以进行相应的页面属性设置。在“页面属性”对话框中，可以定义页面的外观、链接、标题、标题/编码、跟踪图像等。下面讲解部分选项中参数的含义。,2.3.2 定义页面属性,1外观属性 2链接属性 选择“页面属性”中的“链接”选项，打开“链接”对话框， “链接”对话框用来定义页面链接内容的样式，其中部分选项的含义如下所示。,2.3.2 定义页面属性,3标题属性 选择“页面属性”中的“标题”选项，打开“标题”对话框 “标题”对话框用来定义页面中各种标题的显示样式，其中对应的页面HTML代码为、等6个标题标签。,2.3.2 定义页面属性,4标题/编码属性,2.1.2 “插入”工具栏,插入栏用来插入各种常用和布局对象。根据选择的选项不同，在插入菜单中显示的内容也有所区别。选择“常用”和“布局”选项时，插入栏的显示效果如图2-4和图所示。,2.1.4 视图,文档窗口用来显示当前文档。在文档窗口中，可以使用三种方式显示文档内容：分别是“设计”视图、“代码”视图、“拆分”视图。下面分别进行介绍。 1“设计”视图,2.1.4 文档窗口,2“代码”视图,2.1.4 文档窗口,3“拆分”视图,2.1.5 属性面板,属性面板用来定义页面元素或内容的相应属性。由于选择的元素或者内容不同，属性面板中显示的属性也有所区别。下面是是选择图像内容后，属性面板的显示效果，如图所示。,面板和面板组,Dreamweaver中，面板都整合到面板组中，通过单击面板的标题可以显示和隐藏相应的面板。面板和面板组处于Dreamweaver工作界面的右侧。当面板关闭时，面板组的显示效果如图所示，打开某个面板后的显示效果如图所示。,2.1.6 管理站点,一般在制作网页之前，都要在本地的计算机中创建本地的测试站点。当测试完成之后，再传到Internet服务器上。在Dreamweaver中，可以方便地构建和管理站点。下面讲解具体的操作方法。,1 新建站点,在新建站点之前，首先要在磁盘中新建一个站点文件。新建文件时可以直接在磁盘中建立，也可以在文件面板中建立。,1 新建站点,选择“站点” “新建站点”，在弹出的对话框中进入站点的创建，点击“高级”选项卡，可以进行站点内容的设置。,2 管理和编辑站点,执行“站点”|“管理站点”命令，打开“管理站点”对话框，如图所示，在对话框中可以管理站点的相关信息。,2 管理和编辑站点,执行“窗口”|“文件”命令，可以实现对站点文件的管理。,2.2 插入文本,Dreamweaver提供了多种插入文本的方法供读者选择。标题、栏目名称等少量文本，可以选择直接在文档窗口中键入；段落文本，可以选择从其它文档中复制粘贴；整篇文章或表格，可以选择导入Word、Excel文档。,2.2.1 将文本添加到文档,在Dreamweaver中输入文本与Word略有不同，下面通过实例来说明。要注意不换行空格，换行符的插入，文本添加效果如图2.1所示。,2.2.2 插入日期,在网页中经常需要插入日期，比如网页的更新日期，文章的上传日期等。Dreamweaver提供了日期对象，可以方便地插入当前日期。选择“插入”“日期”命令。,2.2.3 插入特殊字符,Dreamweaver还提供了丰富的特殊字符插入功能，可以插入如注册商标、版权、货币符号等特殊符号。选择 “插入”“HTML”“特殊字符”命令。,2.2.4 导入数据文档,除了直接键入文本和复制粘贴文本以外，Dreamweaver还可以直接将表格式文档、Word文档、Excel文档导入到当前文档，省去了复制粘贴的麻烦。选择 “文件”“导入”命令。,2.3 设置文本格式,2.1节介绍了在网页中插入文本的几种方法，由于插入的文本大小、字体格式不一致，需要对文本属性进行设置，使其风格保持统一。,2.3.1 关于设置文本格式,设置文本格式有两种方法：使用HTML标签格式化文本，使用层叠样式表（CSS）。 使用HTML标签和CSS都可以控制文本属性，包括特定字体和字大小；粗体、斜体、下划线；文本颜色等。两者区别在于，使用HTML标签仅仅对当前应用的文本有效，当改变设置时，无法实现文本自动更新。而CSS则不同，通过CSS事先定义好文本样式，当改变CSS样式表时，所有应用该样式的文本将自动更新。此外，使用 CSS 能更精确地定义字体的大小，还可以确保字体在多个浏览器中的一致性。 默认情况下，Dreamweaver 使用 CSS 而不是HTML标签指定页面属性。CSS功能强大，除控制文本外，CSS还可以