dreamwaver网页制作第1章

网页设计与制作课程知识识与就业业分析在互联网网发展的的今天，，网页已已经成为为人们日日常生活活中不可可缺少的的一部分分，而几几乎所有有的企业业都想要要建立一一个网站站。网页设计计与网站站建设也也已成为为当今社社会上一一种非常常热门的的技术。。课程知识识与就业业分析在最近两两年我们们对IT市场进进行调查查后发现现，随着着整个社社会进入入信息化化高速发发展的时时期，各各行各业业的企事事业单位位提供了了大量的的相关岗岗位，针针对有网页设计计师、网络维护护员、网络管理理员、软件工程程师、网站运营营经理等岗位群群。课程介绍绍《网页设设计与网网站建设设》是我我院计算算机专业业的集理理论与实实践为一一体的综综合应用用课程，，主要培培养学生生的网页页设计与与网站建建设的综综合技能能与素质质，提高高学生的的职业行行为能力力。课程现状状传统网页页设计教教学往往往将80％的教教学时间间都放在在工具软软件的使使用方法法上，结结果是虽虽然学生生都会操操作设计计工具，，而且用用得很熟熟练，但但是就是是不能独独立地进进行网站站规划和和页面设设计。即即使是完完成的作作品也达达不到应应有的功功能效果果和视觉觉效果。。课程内容容上重““技术””轻“设设计”，，这样导导致学生生不会从从全局的的角度开开发设计计，创新新意识得得不到培培养。课程目标标通过本课程的学习，使学生生了解网网页设计计的基本本概念和和基础知知识，了了解网页页设计与与网站建建设流程，熟练应用用网页制制作常用用软件，，掌握网页设计计与制作作技术，，全面掌握握网站建建设、管管理和维维护技术术。课程目标标学生通过过本课程程的学习习，培养养两个意意识，提提高两种种能力，，即培养养了创新意识识和职业意识识，提高学学生的分析问题题和解决决问题的的能力及团队精神神和合作作能力；并了解解网站技技术和其其他学科科领域的的相互联联系和相相互促进进的关系系，为后后续课程程的学习习和工作作奠定理理论和实实践基础础。课程内容容课程内容容考核方式式《网页设设计与制制作》这这门课面面向培养养学生实实践动手手能力，，因此我我们的考考核是面面向培养养学生能能力的考考核方式式，期末末综合成成绩由以以下几个个部分组组成：最终成绩绩=平时成绩绩+实验成绩绩+课程设计计成绩+课程报告告成绩按时上课课，注意意课堂纪纪律独立完成成作业和实实验报告告上机课不不得做聊聊天、看电影、上网、、打游戏等与学习习无关的的事情课程要求求第一章网网页页与网站站基础知知识网页与网网站的概概念网页的设设计网站的规规划网站的开开发流程程1.1网网页页与网站站的概念念1.1..1Internet的的概述Internet是由由成千上上万个网网络、上上亿台计计算机通通过特定定的网络络协议相相互连接接而成的的全球计计算机网网络，是是提供信信息资源源查询和和信息资资源共享享的全球球最大的的信息资资源平台台。Internet最初初并不是是为商业业性和广广泛使用用而设计计的。它它起源于于1969年美美国国防防部高级级研究计计划署协协助开发发的ARPANET。。最初是是只允许许国防部部人员进进入的封封闭式网网络。到到1987年，，在美国国国家科科学基金金会的推推动下，，将之主主要从军军事用途途转向科科学研究究和民事事用途，，形成了了今天的的Internet主主干网雏雏形NSFNET。全全球网络络的发展展是空前前且出人人意料的的。今天天，检查查电子邮邮件、访访问喜爱爱的网站站这些活活动已融融入我们们的日常常生活。。从国内Internet的发发展现状状来看，，1994年4月，中中科院计计算机网网络信息息中心正正式接入入Internet，，在10多年的的时间里里，中国国Internet发发生了飞飞速的发发展，截截至2011年年07月月20日日，我国国网民人人数达到到了4..85亿亿。据新华社社电,国国家互联联网信息息办公室室日前披披露的数数据表明明，2012年年，中国国将正式式迈入““5亿网网民”时时代。据国家互互联网信信息办公公室统计计数据，，中国手手机上网网用户约约3.5亿人，，微博注注册用户户已超3亿人。。而行业业机构易易观国际际的分析析报告则则指出，，去年中中国移动动互联网网用户规规模已达达4.3亿，环环比增长长近50%；今今年，移移动互联联网用户户数将有有可能突突破6亿亿，超过过互联网网用户数数量;网网购用户户近2亿亿。WWW((WorldWideWeb))简称为为Web或万维维网，客客户端只只要通过过“浏览览器”（（Browser）就就可以非非常方便便地访问问Internet上上的服务务器端，，迅速地地获得所所需的信信息。如如图所示示。Internet浏览器WEB服务器HTTP网络协议万维网之之父伯纳斯--李于1989年在欧欧洲粒子子物理研研究所提提出了建建立一个个全球超超文本项项目———万维网网，以此此使人们们都能顺顺利地从从网上获获取并共共享信息息。1.1..3网网页与与网站浏览器是是如何访访问某个个网页或或网站的的呢？1.1..4域名与IP地地址在Internet上上的每台台网络设设备都要要有一个个唯一的的地址才才能被访访问到，，这个地地址就是是IP地址址。IP地址址是由32bits的的二进制制数值构构成，分分成4组组，转化化为十进进制用点点分隔。。比如：202..207.209.200IP地址知识识为了识别别通信系系统上的的计算机机，需要要建立一一种普通通接受的的标识方方法。这这就如同同通过邮邮局寄信信，信封封上必须须有收件件人的地地址，包包括国家家、城市市、街道道、门牌牌号以及及邮政编编码。在在Internet上上定义了了两种方方法来标标识网上上的计算算机，分分别是Internet的IP地址址和域名。Internet上的的数据能能够发送送到目的的端的原原因是：：任何一一个连接接到Internet上的计计算机都都有一个个惟一的的网络地地址。为了确保保Internet上上的每一一个网络络地址始始终是惟惟一的，，国际网网络信息息中心组组织（InterNIC）根根据公司司网络的的大小给给他们分分配了一一系列IP地址址（又称称为Internet地址））。IPv6简介当前在Internet上使使用的IP地址址是在1978年确定定的协议议，它由由4段8位二进进制数构构成。由由于Internet协议的的当时版版本号为为4，因因而称为为“IPv4””。IPv4的的地址长长度是32位（（bit），理理论上可可以支持持多达1600万个网网络，容容纳四十十多亿台台主机（（232=4,294,,967,296），，但由于于IP对对地址进进行了分分类，分分成A、、B、C等类地地址，实实际可用用的网络络数和主主机数远远小于上上述数目目。但采用A、B、、C三类类编址方式后，，可用的的网络地址址和主机地址址的数目大大打折扣扣，以至至目前的的IP地地址已于于2011年2月3日日分配完完毕。其其中北美占有3//4，约约30亿亿个，而而人口最最多的亚亚洲只有有不到4亿个，，中国截截止2010年年6月IPv4地址数数量达到到2.5亿，落落后于4.2亿亿网民的的需求。。地址不不足，严严重地制制约了中中国及其其他国家家互联网的应用和和发展。。IPv6的格式式：地址长度度是128位（bit），8段的16位十十六进制制数表示示，中间用““：”来隔开开。比如：60A7:9BA5::FFF0:87B5:FFFF::FFF3:BAFF:88A2山西大学学商务学学院的IP地址是202..207.209.130，，表示成IPv6地址格式式是怎样样的呢？？0：0：：0：0：0：：0：202..207.209.130202..207.209.200200..136.154.36146..153.13.35202..207.208.8202..207.208.130202..207.208.6为了方便便大家记记住这些些IP地址，就就出现了了DNS..Internet的域名管管理DNS域域名系统统是一种种帮助人人们在Internet上用用字符来来惟一识识别自己己的计算算机，并并保证主主机名（（域名））和IP地址一一一对应应的网络络服务。。DNS简介域名空间间Internet域名名具有层层次结构构。整个个Internet网网被划分分成几个个顶级域域。InterNIC采用两两种方法法进行分分类：一一种方法法是按组组织模式式进行划划分；另另一种方方法是按按地理模模式进行行划分。。按组织模模式进行行划分顶级域名名域域名类类型com商商业机构构edu教教育机机构gov政政府内内容int国国际际组织mil军军事部部门net网网络支持持中心org各各种非赢赢利性组组织国家代码码各各个国国家比如：cn代表表中国,,us代代表美国国，ca代表表加拿大大，jp代表日日本按地理模模式进行行划分主机域名名的一般般格式为为：四级域名名.三级级域名..二级域域名.顶顶级域名名比如：jwc..hbuas..这个域域名代表表我们学学校的一台jwc服服务器，，它和惟惟一的IP地址址对应--------202..207.209.130；；jwc是一台台主机名名，hbuas表示我我们学校中中国国教育领领域edu中中国cn的一部部分为了适应应Internet的的迅速发发展，我我国成立立了“中中国互联联网络信信息中心心”，并并颁布了了中国互互联网络络域名规规定。中国互联联网的域域名规定定我国二级域名名分配（组织模式式）二级域名名分分配情情况com商商业机构构edu教教育机机构gov政政府内内容net网网络支持持中心org各各种非赢赢利性组组织net网网络支持持中心ac科科研研机构我国二级域名名分配（地理模式式）二级域名名分分配情情况bj北北京sh上上海tj天天津津jx江江西gd广广东sx山山西tw台台湾...视觉元素素文字色色彩彩图图形图图像像动画音音乐视视频频装装饰物网页设计计———网页认认知网页设计计——网网页认知知架构元素素（功能能模块））网站名称称（Logo）广告条（（Banner)导航条((Menu)新新闻闻(News)搜索((Search)友友情情链接((Links)邮件列表表(Maillist)计计数器器(Count)版权((Copyright)1.2网网页页的设计计网页主题题网页的文文字网页的色色彩网页版式式和布局局网页导航航设计1.2..1网页主题题网页的主主题指网网页所要要表现的的最主要要的思想想内涵，，可以说说是网页页的灵魂魂。主题的概概念是很很模糊的的，它是是一种约约束，是是同一站站点中各各个页面面于五彩彩缤纷中中体现出出统一风风格的约约束；它它也是一一种力量量，是将将各个设设计者的的作品有有机结合合起来的的力量。。主题必须须与Web页面面主要推推销或展展示的产产品或服服务紧密密相关，，同时它它又必须须有相当当的吸引引力。1.2..2网网页的文文字文字是网网页最主主要的表表达形式式，尽管管图形使使得网页页变得五五彩缤纷纷，但大大多数浏浏览者大大部分时时间仍将将注意力力集中在在页面中中的文字字上面，，他们总总是首先先浏览文文字内容容，而甚甚少关心心其他页页面元素素，甚至至对导航航系统也也是如此此。所以以，给浏浏览者一一个亲和和的文字字界面是是必要的的。文字艺术术与文字字应用同一页面面采用三三种字体体以内字型大小小变化在在3-6个层次次以内大标题﹑﹑小内文文﹑粗标标题﹑细细内文应用闪烁烁字效应应控制得得当特殊字体体应用时时应使用用图片格格式色彩与背背景应拉拉开层次次文字艺术术与文字字应用同一页面面采用三三种字体体以内字型大小小变化在在3-6个层次次以内大标题﹑﹑小内文文﹑粗标标题﹑细细内文应用闪烁烁字效应应控制得得当特殊字体体应用时时应使用用图片格格式色彩与背背景应拉拉开层次次案例例案例例如何来评评价一个个网页的的好坏？？视觉效果果色彩搭配配整体布局局色彩搭配配1.2..３网页页的色彩彩在制作网网站的时时候，色色彩的选选择和搭搭配十分分重要，，因为一一个网站站格调的的确定，，往往取取决于色色彩的选选择与搭搭配是否否适当，，一般的的情况下下，从以以下几个个方面来来考虑色色彩的选选择：色彩的鲜鲜明性网站色彩彩的选择择与搭配配要鲜艳艳，这样比比较容易易吸引访访问者的的注意，，而且在在访问者者的记忆忆中驻留留的时间间也比较较长。色彩的独独特性网站色彩彩的选择择与搭配配要与众众不同，这样就就可以使使得访问问者留下下深刻的的印象。。色彩的合合适性网站色彩彩的选择择与搭配配要与网网站的内内容气氛氛相适合合。色彩的联联想性不同的色色彩会产产生不同同的联想想，在网网站的设设计中多多运用具具有美好好联想的的色彩，，可以使使你的网网站流露露出另外外一种气气息。页面中各各处用色色的选择择首先确定定主色。。主色是指指页面中中相对来来说较大大面积使使用的色色彩。主主色可以以反映出出整个网网页的风风格，亦亦可使页页面内容容以色彩彩语言表表达出来来。接下来是是确定辅辅助色。。辅助色可可以有多多种，其其应用范范围包括括输入框的的颜色，表格边框框颜色、表格的底底色、小图标用用色、文字颜色色以及链接色等等。橙色具有轻快快、欢欣欣、收获获、温馨馨、时尚尚的效果果，是快快乐、喜喜悦、能能量的色色彩。在整个色色谱里，，橙色具具有兴奋奋度，是是最耀眼眼的色彩彩。给人人以华贵贵而温暖暖，兴奋奋而热烈烈的感觉觉，也是是令人振振奋的颜颜色。具具有健康康、富有有活力、、勇敢自自由等象象征意义义，能给给人有庄庄严、尊尊贵、神神秘等感感觉。橙色在空气中中的穿透透力仅次次于红色色，也是是容易造造成视觉觉疲劳的的颜色。。在网页颜颜色里，，橙色适适用于视视觉要求求较高的的时尚网网站，属属于注目目、芳香香的颜色色，也常常被用于于味觉较较高的食食品网站站，是容容易引起起食欲的的颜色。。橙色EIXTEIXTEIXT黑色是暗色，，是纯度度、色相相、明度度最低的的非彩色色。象征征着力量量，有时时感觉沉沉默、虚虚空，有有时感觉觉庄严肃肃穆，有有时又意意味着不不吉祥和和罪恶。。自古以以来，世世界各族族都公认认黑色代代表死亡亡、悲哀哀黑色具具有能吸吸收光线线的特性性，别有有一种变变幻无常常的感觉觉。黑色能和许多多色彩构构成良好好的对比比调和关关系，运运用范围围很广。。黑色给人深沉沉、神秘秘、寂静静、悲哀哀、压抑抑的感受受。黑色是最有力力的搭配配色。黑色也常用来来表示英英俊的男男人。下面我们们根据黑黑色系搭搭配不同同的颜色色所表现现出的特特性做不不同的举例分析析。黑色EIXTEIXT黑白灰非非色彩色色调所构构成的页页面较具具特色EIXT红色的色感温温暖，性性格刚烈烈而外向向，是一一种对人人刺激性性很强的的颜色。。红色容容易引起起人的注注意，也也容易使使人兴奋奋、激动动、紧张张、冲动动、还是是一种容容易造成成人视觉觉疲劳的的颜色。。在众多颜颜色里，，红色是是最鲜明明生动的的、最热热烈的颜颜色。因因此红色色也是代代表热情情的情感感之色。。鲜明红红色极容容易吸引引人们的的目光。。红色在不同的的明度、、纯度的的状态（（粉红、、鲜红、、深红））里，给给人表达达的情感感是不一一样的。。在网页颜颜色的应应用机率率中，根根据网页页主题内内容的需需求，纯纯粹使用用红色为为主色调调的网站站相对较较少，多多用于辅辅助色、、点睛色色，达到到陪衬、、醒目的的效果。。通常都都配以其其他颜色色调和。。红色相对于其其他颜色色，视觉觉传递速速度最快快。由于于以上的的这些红红色传达达出的特特性，因因此人们们喜欢用用红色作作为警示示符号的的颜色，，例如：：消防、、惊叹号号、错误误提示等等等。为了让大大家对红红色的理理解做更更好的区区别，下下面我们们分别对对红色系系根据邻邻近色、、同类色色、对比比色的搭搭配做不不同的举例分析析。红色EIXTEIXT红色和黑黑色的搭搭配被誉誉为商业业的成功功色。一是因因为红色色是一种种对人刺刺激性很很强的颜颜色，是是最鲜明明生动的的、最热热烈的颜颜色。在在黑色的的反衬下下鲜明红红色极容容易吸引引人们的的目光。。红色相相对于其其他颜色色，视觉觉传递速速度最快快。红黑黑这两种种配色也也被广泛泛的运用用于较能能体现个个性的时时尚类网网站，让让人印象象强烈的的深刻。。EIXT比较容易易制造深深邃、幽幽怨的故故事气氛氛。传达达的是稳稳重、成成熟、高高贵、消消极的心心理感受受。黄色是阳光的的色彩，，具有活活泼与轻轻快的特特点，给给人十分分年轻的的感觉。。象征光光明、希希望、高高贵、愉愉快。浅浅黄色表表示柔弱弱，灰黄黄色表示示病态。。它的亮亮度最高高，和其其他颜色色配合很很活泼，，有温暧暧感，具具有快乐乐、希望望、智慧慧和轻快快的个性性，有希希望与功功名等象象征意义义。黄色色也代表表着土地地、象征征着权力力，并且且还具有有神秘的的宗教色色彩。黄色的性格冷冷漠、高高傲、敏敏感、具具有扩张张和不安安宁的视视觉印象象。浅黄色系明朗、、愉快、、希望、、发展，，它的雅雅致，清清爽属性性，较适适合用于于女性及及化妆品品类网站站。中黄色有崇高，，尊贵，，辉煌、、注意、、扩张的的心理感感受。深黄色给人高贵贵、温和和、内敛敛、稳重重的心理理感受。。下面我们们根据黄黄色系不不同属性性邻近色色、同类类色的高高纯度低低纯度色色彩搭配配做不同同的举例分析析。黄色EIXT大面积显显眼的正正黄色有有黑色的的线条压压制，黄黄色顿时时显得沉沉稳，页页面增添添内容感感。EIXT整个页面面配色单单纯，却却也不简简单，形形成另一一种设计计风格EIXT蓝色是色彩中中比较沉沉静的颜颜色。象象征着永永恒与深深邃、高高远与博博大、壮壮阔与浩浩渺，是是令人心心境畅快快的颜色色。蓝色的朴实、、稳重、、内向性性格，衬衬托那些些性格活活跃、具具有较强强扩张力力的色彩彩，运用用对比手手法，同同时也活活跃页面面。另一一方面又又有消极极、冷淡淡、保守守等意味味。蓝色色与红、、黄等色色运用得得当，能能构成和和谐的对对比调和和关系。。蓝色是冷色调调最典型型的代表表色，是是网站设设计中运运用得最最多的颜颜色，也也是许多多人钟爱爱的颜色色。蓝色表达着深深远、永永恒、沉沉静、无无限、理理智、诚诚实、寒寒冷的多多种感觉觉。蓝色色会给人人很强烈烈的安稳稳感，同同时蓝色色还能够够表现出出和平、、淡雅、、洁净、、可靠等等。下面我们们根据蓝蓝色系不不同属性性的同类类色、邻邻近色、、高纯度度对比、、相对对对比色等等色彩搭搭配做不不同的举例分析析。蓝色EIXT浅蓝色有淡雅、清新、浪漫、高级的特质EIXT深蓝色给人稳重、冷静、严谨、冷漠、深沉、成熟的心理感受EIXT绿色在黄色和和蓝色（（冷暖））之间，，属于较较中庸的的颜色，，这样使使得绿色色的性格格最为平平和、安安稳、大大度、宽宽容。是是一种柔柔顺、恬恬静、满满足、优优美、受受欢迎之之色。也也是网页页中使用用最为广广泛的颜颜色之一一。绿色与人类息息息相关关，是永永恒的欣欣欣向荣荣是的自自然之色色，代表表了生命命与希望望，也充充满了青青春活力力，绿色色象征着着和平与与安全、、发展与与生机、、舒适与与安宁、、松弛与与休息，，有缓解解眼部疲疲劳的作作用。它本身具具有一定定的与自自然、健健康相关关的感觉觉，所以以也经常常用于与与自然、、健康相相关的站站点。绿绿色还经经常用于于一些公公司的公公关站点点或教育育站点。。绿色能使我们们的心情情变得格格外明朗朗。黄绿绿色代表表清新、、平静、、安逸、、和平、、柔和、、春天、、青春、、升级的的心理感感受。下面我们们根据绿绿色系不不同属性性邻近色色、同类类色的高高纯度低低纯度、、对比色色等色彩彩搭配做做不同的的举例分析析。绿色EIXT给人茂盛、健康、成熟、稳重、生命、开阔的心理感受白色块面面使得绿绿色的特特性发挥挥到最好好的状态态并增强强了视觉觉节奏感感EIXT该页面配配色较协协调、缓缓和主色调是是相对比比较鲜亮亮的颜色色，而辅辅助色和和点睛色色是属于于比较沉沉稳的颜颜色，页页面通过过大小色色块的对对比提高高视觉的的反差力力度，增增强页面面的感染染力。EIXT紫色是一种在在自然界界中比较较少见的的颜色。。象征着着女性化化，代表表着高贵贵和奢华华、优雅雅与魅力力，也象象征着神神秘与庄庄重、神神圣和浪浪漫。另另一方面面又有孤孤独等意意味。紫紫色在西西方宗教教世界中中是一种种代表尊尊贵的颜颜色，大大主教身身穿的教教袍便采采用了紫紫色。紫色的明度在在有彩色色的色度度中是最最低的。。紫色的的低明度度给人一一种沉闷闷、神秘秘的感觉觉。在紫紫色中红红的成份份较多时时，显得得华丽和和谐。紫紫色中加加入少量量的黑，，沉重、、伤感、、恐怖、、庄严的的感觉。。紫色中中加入白白，变得得优雅、、娇气，，并充满满女性的的魅力。。紫色通常用于于以女性性为对象象或以艺艺术作品品介绍为为主的站站点，但但很多大大公司的的站点中中也喜欢欢使用包包含神秘秘色彩的的紫色，，但都很很少做大大面积使使用。不同色调调的紫色色可以营营造非常常浓郁的的女性化化气息，，在白色色的背景景色和灰灰色的突突出颜色色的衬托托下，紫紫色可以以显示出出更大的的魅力。。下面我们们根据紫紫色系不不同属性性的邻近近色、高高纯度低低纯度配配色、相相对对比比色等色色彩搭配配做不同同的举例分析析。紫色EIXT紫色配色：紫色＋绿色绿色被誉为紫色的绝配色,背景色紫色由于色彩特质明度较低的缘故，与明度较高的辅助色草绿色形成较明快的效果EIXT深紫色给人华贵、深远、神秘、孤寂、珍贵的心理感受EIXT灰色介于灰色色和白色色之间，，中性色色、中等等明度、、无色彩彩、极低低色彩的的颜色。。灰色能能够吸收收其他色色彩的活活力，削削弱色彩彩的对立立面，而而制造出出融合的的作用。。灰色是一种中中立色，，具有中中庸、平平凡、温温和、谦谦让、中中立和高高雅的心心理感受受，也被被称为高高级灰，，是经久久不衰、、最经看看的颜色色。任何色彩彩加入灰灰色都能能显得含含蓄而柔柔和。但但是灰色色在给人人高品味味、含蓄蓄、精致致、雅致致耐人寻寻味的同同时，也也容易给给人颓废废、苍凉凉、消极极、沮丧丧、沉闷闷的感受受，如果果搭配不不好页面面容易显显得灰暗暗、脏。。从色彩学学上来说说，灰色色调又泛泛指所有有含灰色色度的复复合色，，而复合合色又是是三种以以上颜色色的调和和色。色色彩可以以有红灰灰、黄灰灰、蓝灰灰等上万万种彩色色灰，这这都是灰灰色调，，而并不不单指纯纯正的灰灰色。下面我们们根据灰灰色搭配配不同的的颜色所所表现出出的视觉觉特性，，做一些些不同的的举例分析析。灰色EIXTEIXT同类灰色色＋多种颜色色EIXTEIXT草绿加橙深蓝色+黑=神秘+稳重高雅的红橙色的神神秘和悠悠远让人人觉得品品味如何来评评价一个个网页的的好坏？？视觉效果果色彩搭配配整体布局局整体布局局一、布局设计计理念页面尺寸寸显示器分分辨率的的高低决决定页面的显显示尺寸寸。1.2..4网页版面面与布局设计计一、布局设计计理念页面尺寸寸显示器分分辨率的的高低决决定页面的显显示尺寸寸。一般分辨辨率在800x600的情况况下，页页面的显显示尺寸寸为：780x428个像素素；分辨辨率在1024x768的情情况下，，页面的的显示尺尺寸为：：1007x600个个像素。。宽度：760px左右右宽度：960px左右右一、布局设计计理念页面尺寸寸页面版式式显示器分分辨率的的高低决决定显示页面面的尺寸寸。T型结构构、同字字型结构构、川字字型结构构、三三字型结结构、封封面型结结构、Flash型型结构。。T型结构构同字结结构构川字结结构构三字结结构构单一结结构构单一结结构构二、布局设计计的方法法纸上布局局在纸上画画出页面面的布局局草图。。软件布局局手绘布局草图手绘布局草图手绘布局草图手绘布局草图二、布局设计计的方法法纸上布局局软件布局局在纸上画画出页面面的布局局草图。。利用软件件来完成成页面的的布局。。软件布局图WordPhotoshopCS常用软件件三、布局局设计的的技术表格布局局CSS布布局框架布局局表格布局技术它能对不不同对象象加以处处理，而而又不用用担心各各对象之之间的影影响。优点表格布局技术页面结构构与表现现混杂在在一起，，不利于于后期的的维护。。缺点源代码存存在大量量的冗余余代码,,页面下下载速度度受到影影响。CSS布局技术CSS布局技术表现形式式和内容容结构相相分离，，网页结结构清晰晰，便于于更好的的控制页页面布局局。优点大大缩减减页面代代码，提提高页面面浏览速速度,缩缩减了带带宽成本本。易于修改改和维护护。框架布局技术优点访问者的的浏览器器不需为为每个页页面重新新加载导导航条；；每个框框架都具具有自己己的滚动动条，因因此访问问者可以以独立滚滚动这些些框架进进行浏览览。框架布局技术缺点并不是所所有浏览览器都提提供良好好的框架架支持。。难以实现现在不同同框架中中精确的的对齐各各个页面面元素。。网页版面面设计的的步骤（1）画画出页面面的结构构草图：：只需需画出页页面的大大体结构构，注意意分辨率率，设定定页面显显示尺寸寸。（2）布布局细化化和调整整：将需需要放置置的功能能模块安安排在页页面上，，注意突突出重点点和平衡衡协调。。（3）定定格：确确定出完完美的布布局方案案，定格格为最后后的版式式。导航种类类：图形导航航文字字导航按按钮导导航图图形+文文字导航航动画导航航设计原则则：引导导性明明了性性视视觉性趣趣味味性位位置性性应用原则则：通过过页面设设计处理理主从导导航关系系。导航与网网站风格格统一。。动态导航航链接关关系流畅畅。

1.2..5网网页导航航设计文字导航航网页设计计——导航设计计图形导航航

网页设计计——导航设计计动态导航航（Flash)

网页设计计——导航设计计导航与网网站风格格统一

网页设计计——导航设计计1.3网网站站的规划划定位网站站主题和和名称网站的风风格网站的CI形象象确定网站站的栏目目和版块块确定网站站的目录录结构和和链接结结构1.3..1定定位网网站主题题和名称称网站名称称的选择择也是非非常重要要的。和和现实生生活中一一样，网网站名称称是否正正气，响响亮，易易记，对对网站的的形象和和宣传推推广也有有很大影影响。一般的建建议是：：（1）名称要正正。也就是是要合法法，和理理，和情情。不能能用反动动的，色色情的，，迷信的的，危害害社会安安全的名名词语句句。（2）名称要易易记。根据中中文网站站浏览者者的特点点，除非非特定需需要，网网站名称称最好用用中文名名称，不不要使用用英文或或者中英英文混合合型名称称。（3）名称要有有特色。名称平平实就可可以接受受，如果果能体现现一定的的内涵，，给浏览览者更多多的视觉觉冲击和和空间想想象力，，则为上上品。这这里举几几个例子子：音乐乐前卫，，网页陶陶吧，天天籁绝音音。在体体现出网网站主题题的同时时，能点点出特色色之处。。1.3..2网网站的风风格风格(style)是是抽象的的。是指站点点的整体体形象给给浏览者者的综合合感受。。这个“整整体形象象”包括括站点的的CI（（标志，，色彩，，字体，，标语）），版面面布局，，浏览方方式，交交互性，，语气，，内容价价值，存存在意义义，站点点荣誉等等等诸多多因素。。风格创意意（艺）），不仅仅仅是依依靠色彩彩，图片片，架构构和文字字等视觉觉元素自自身的独独具创新新。重点点是视觉觉元素在在页面中中达到协协调统一一，保持持一致的的识别体体系。网网站的特特有风格格还包括括信息内内容的规规划管理理，互动动程序的的建构和和使用方方法等其其他非视视觉方面面。风格类型型：金属风格格像素风格格报纸风格格三维风格格大字报风风格网页设计计——网站风格格创意((艺)金属风格格

网页设计计——网站风格格创意((艺)像素风格格

网页设计计——网站风格格创意((艺)报纸风格格

网页设计计——网站风格格创意((艺)三维风格格

网页设计计——网站风格格创意((艺)大字报风风格

网页设计计——网站风格格创意((艺)风格是独独特的，，是站点点不同与与其他网网站的地地方。或或者色彩彩，或者者技术，，或者是是交互方方式，能能让浏览览者明确确分辨出出这是你你的网站站独有的的。如何树立立网站风风格呢？？我们可可以分这这样几个个步骤：：第一，确信风格格是建立立在有价价值内容容之上的的。一个网站站有风格格而没有有内容，，就好比比绣花枕枕头一包包草，好好比一个个性格傲傲慢但却却目不识识丁的人人。你首首先必须须保证内内容的质质量和价价值性。。这是最最基本的的，无须须置疑。。第二，你需要彻彻底搞清清楚自己己希望站站点给人人的印象象是什么么。第三，在明确自自己的网网站印象象后，开开始努力力建立和和加强这这种印象象。对于确定定风格，，这里提提供一些些参考：：1.将你你的标志logo,尽可能能的出现现在每个个页面上上。或者者页眉，，或者页页脚，或或则背景景。2.突出你的的标准色色彩。文字的的链接色色彩，图图片的主主色彩，，背景色色，边框框等色彩彩尽量使使用与标标准色彩彩一致的的色彩。。3.突出你的的标准字字体。在关键键的标题题，菜单单，图片片里使用用统一的的标准字字体。4.想一一条朗朗朗上口宣传标语语。把它做做在你的的banner里，或或者放在在醒目的的位置，，告诉大大家你的的网站的的特色。。5.使用用统一的的语气和和人称。。即使是是多个人人合作维维护，也也要让读读者觉得得是同一一个人写写的。6.使用用统一的的图片处处理效果果。比如如，阴影影效果的的方向，，厚度，，模糊度度都必须须一样。。7.创造造一个你你的站点点特有的的符号或或图标。。比如在在一句链链接前的的一个点点，可以以使用..。☆※※○

□□△→等等等。虽虽然很简简单的一一个变化化，却给给人与众众不同的的感觉。。8.用自自己设计计的花边边，线条条，点。。1.3..3网网站的CI形象象所谓CI，是借借用的广广告术语语。(CI是英英文corporateidentity的缩缩写)，，意思是是通过视视觉来统统一企业业的形象象。标志，色彩，字体，标语是一个网网站树立立CI形形象的关关键，确确切的说说是网站站的表面面文章，，设计并并完成这这几步，，你的网网站将脱脱胎换骨骨，整体体形象就就会有一一个提高高。在您的网网站主题题和名称称定下来来之后，，需要思思考的就就是网站站的CI形象。。设计网站站的标志志(logo))如同商标标一样，，logo是你你站点特特色和内内涵的集集中体现现，看见见logo就让让大家联联想起你你的站点点。标志可以以是中文文，英文文字母，，可以是是符号，，图案，，可以是是动物或或者人物物等等。。比如：：新浪用用字母sina+眼睛睛作为标标志。标标志的设设计创意意来自你你网站的的名称和和内容。。比如：(1)..网站有有代表性性的人物物，动物物，花草草，可以以用它们们作为设设计的蓝蓝本，加加以卡通通化和艺艺术化，，例如迪迪斯尼的的米老鼠鼠，搜狐狐的卡通通狐狸，，鲨威体体坛的篮篮球鲨鱼鱼。(2)..网站有有专业性性的，可可以以本本专业有有代表的的物品作作为标志志。比如如中国银银行的铜铜板标志志，奔驰驰汽车的的方向盘盘标志。。新浪用字字母sina++眼睛作作为标志志。北京亿恒恒伟业房房地产开开发有限限公司的的标志是是以“亿亿恒伟业业”四个个汉字的的变形为为主体。。“亿””字左半半部变形形为数字字“1””，预示示着公司司将成为为行业的的龙头老老大，也也预示者者公司全全体员工工永争第第一的拼拼搏精神神和“信信誉第一一、质量量第一””的经营营理念，，同时也也寓意着着公司的的发展一一帆风顺顺。北京爱永永恒影楼楼的标志志是以英英文字母母“LOVE""和一颗颗红心为为主体，，红心中中间是抽抽象的一一男一女女携手前前进的图图形，寓寓意着两两个人一一颗心，，从而寓寓意着爱爱永恒。。北京市昌昌平区第第一届机机关运动动会的会会徽是以以“昌平平”的汉汉拼“CHANGPING””的第一一个字母母“C””和“机机关”的的汉拼““JIGUAN”的第第一个字字母“J”变形形组合的的绿色跑跑道和运运动员为为主题。。整个标标志充满满活力和和激情，，寓意着着昌平区区各机关关人员在在区政府府的正确确领导下下，各项项事业蓬蓬勃发展展，充满满生机！！设计网站站的宣传传标语网站的宣宣传标语语可以说说是网站站的精神神，网站站的目标标。用一一句话甚甚至一个个词来高高度概括括。类似似实际生生活中的的广告金金句。例例如：鹊鹊巢的““味道好好极了””；麦斯斯威尔的的“好东东西和好好朋友一一起分享享”；Intel的““给你一一个奔腾腾的心””。1.3..4确确定网站站的栏目目和版块块在动手制制作网页页前，一一定要考考虑好以以下三方方面：(1)确确定栏栏目和版版块(2)确确定网网站的目目录结构构和链接接结构(3)确确定网网站的整整体风格格创意设设计(1)确确定栏栏目和版版块栏目的实实质是一一个网站站的大纲纲索引，，索引应应该将网网站的主主体明确确显示出出来。在在制定栏栏目的时时候，要要仔细考考虑，合合理安排排。一般般的网站站栏目安安排要注注意以下下几方面面：①一定记住住要紧扣扣你的主主题！一般的做做法是：：将你的的主题按按一定的的方法分分类并将将它们作作为网站站的主栏栏目。主主题栏目目个数在在总栏目目中要占占绝对优优势，这这样的网网站显的的专业，，主题突突出，容容易给人人留下深深刻印象象。②设一个最最近更新新或网站站指南栏栏目如果你的的首页没没有安排排版面放放置最近近更新内内容信息息，就有有必要设设立一个个“最近近更新””的栏目目。这样样做是为为了照顾顾常来的的访客，，让你的的主页更更有人性性化。③设定一个个可以双双向交流流的栏目目不需要很很多，但但一定要要有。比比如论坛坛，留言言本，邮邮件列表表等，可可以让浏浏览者留留下他们们的信息息。有调调查表明明，提供供双向交交流的站站点比简简单的留留一个““Emailme””的站点点更具有有亲和力力。④设定定一个下下载或常常见问题题回答栏栏目网络的特特点是信信息共享享。如果你看看到一个个站点有有大量的的优秀的的有价值值的资料料，你肯肯定希望望能一次次性下载载，而不不是一页页一页浏浏览存盘盘。“将将心比心心”在你你自己的的主页上上设置一一个资料料下载栏栏目，会会得到大大家的喜喜欢。另另外，如如果您的的站点经经常收到到网友关关于某方方面的问问题来信信，你最最好设立立一个常常见问题题回答的的栏目，，既方便便了网友友，也可可以节约约自己更更多时间间用以学学习。总结以上上几点，，我们得得出划分分栏目需需要注意意的是：：●尽可能能删除与与主题无无关的栏栏目●尽可能能将网站站最有价价值的内内容列在在栏目上上●尽可能能方便访访问者的的浏览和和查询上面说的的是栏目目，我们们再看看看版块设设置。版块比栏栏目的概概念要大大一些，，每个版版块都有有自己的的栏目。。举个例例子：网网易的站站点分新新闻，体体育，财财经，娱娱乐，教教育等版版块，每每个版块块下面有有各有自自己的主主栏目。。一般的个个人站点点内容少少，只有有主栏目目(主菜菜单)就就够了，，不需要要设置版版块。⑴在网站根根目录中中开设images、common、temp三个子目目录，根根据需要要再开设设media子目录..images目目录中放放不同栏栏目的页页面都要要用到的的公共图图片，例例如公司司的标志志logo、banner条条、菜菜单、按按钮等等等；common子子目录录中放css、、include等等公共文文件；temp

子目目录放客客户提供供的各种种文字图图片等等等原始资资料；media子子目录中中放flash,avi,,

quick

time等等多媒媒体文件件

。(2)网网站的的目录结结构在根目录录中按照照首页的的栏目结结构，给每一个个栏目开开设一个个目录，根据需需要在每每一个栏栏目的目目录中开开设一个个images

和media的的子目录录用以放放置此栏栏目专有有的图片片和多媒媒体文件件，如果果这个栏栏目的内内容特别别多，又又分出很很多下级级栏目