(中职中专)网页设计与制作完整版课件汇总全书电子教案(最新)

1、商务网页设计与制作商务网页设计导引第一章了解网页的基本构成及主要元素了解常见的商务网站类型掌握客户需求分析的途径和方法能合理规划设计网站栏目。学习目标 第一节 商务网站概述 第二节 客户需求分析第三节 网站栏目规划学习内容 第一章商务网站概述客户需求分析网站栏目规划第一节 商务网站概述商务网站，是经营性组织为实现其商业目标而建立的网站。准确表达和有效传递企业组织的商务诉求,是这类网站网页设计时要考虑的重点和难点。 第一章商务网站概述客户需求分析网站栏目规划一、商务网站类型依据商务诉求侧重点的不同，可分为以下几类： 第一章商务网站概述客户需求分析网站栏目规划企业网站行业网站网上商城资讯网站1、展

2、示型企业网站 第一章商务网站概述客户需求分析网站栏目规划2、功能型企业网站 第一章商务网站概述客户需求分析网站栏目规划3、综合型行业网站 第一章商务网站概述客户需求分析网站栏目规划4、垂直型行业网站 第一章商务网站概述客户需求分析网站栏目规划5、综合型网上商城 第一章商务网站概述客户需求分析网站栏目规划6、垂直型网上商城 第一章商务网站概述客户需求分析网站栏目规划7、品牌型网上商城 第一章商务网站概述客户需求分析网站栏目规划8、门户类资讯网站 第一章商务网站概述客户需求分析网站栏目规划9、垂直资讯类网站 第一章商务网站概述客户需求分析网站栏目规划10、分类信息网站 第一章商务网站概述客户需求分

3、析网站栏目规划二、网页构成1、网页的空间结构（1）网站LOGO（2）网站名称（3）导航条（4）Banner（5）网页正文区（6）网页底部 第一章商务网站概述客户需求分析网站栏目规划2、网页的逻辑结构网页的基础 网页的条理 网页的显示 网页的互动 第一章商务网站概述客户需求分析网站栏目规划3、网页组成元素文字图片动画背景音乐视频表单脚本程序 第一章商务网站概述客户需求分析网站栏目规划三、网页风格要点： 网页风格就相当于网页的外衣，是指网页设计时使用的文字、颜色、布局等的组合搭配给人带来的视觉印象。 商务网页并不是纯粹的艺术设计作品，应围绕准确表达商务诉求、能被大多数浏览者接受和理解来确定页面风格

4、。 第一章商务网站概述客户需求分析网站栏目规划1、韩版风格特点： 大幅用图，且画面精美，颜色鲜艳，文字样式及图片排版活泼、优美。 第一章商务网站概述客户需求分析网站栏目规划2、欧版风格特点： 页面内容部分结构比较清晰，板快分明，页面颜色的使用主次分明，有较强的平面感。 第一章商务网站概述客户需求分析网站栏目规划3、中式风格特点： 气势磅礴、高贵典雅、独具韵味，页面具有平衡、和谐、庄重之美。 第一章商务网站概述客户需求分析网站栏目规划4、其它风格（1）Web2.0风格 ： 版块之间划分非常清晰，界限非常分明，页面简洁规整，以非彩色搭配彩色为主。网页的logo、banner、导航区界线分明。 第一

5、章商务网站概述客户需求分析网站栏目规划4、其它风格（2）印刷体风格 ： 采用衬线字体、大标题、多列式布局、大幅配图，页面具有强烈的平面媒体效果。 第一章商务网站概述客户需求分析网站栏目规划4、其它风格（3）简约风格： 大量留白，仅保留最基本的内容元素，从而让展示出来的元素具有最大的视觉冲击力 第一章商务网站概述客户需求分析网站栏目规划 第一节 商务网站概述 第二节 客户需求分析第三节 网站栏目规划学习内容 第一章商务网站概述客户需求分析网站栏目规划第二节 客户需求分析客户需求分析，即分析客户建立网站想要解决的问题或要达到的目标，以及相关的条件和要求。作为网页设计人员，在分析客户的需求时，关键是

6、要明确客户要建立的网站类型，并了解客户想要通过网站展示的信息。 第一章商务网站概述客户需求分析网站栏目规划一、行业背景分析 -PEST方法 第一章商务网站概述客户需求分析网站栏目规划-波特五力模型分析 第一章商务网站概述客户需求分析网站栏目规划二、（竞争对手）典型网页分析 第一章商务网站概述客户需求分析网站栏目规划1、典型网页的选择参考标准：用户体验度 第一章商务网站概述客户需求分析网站栏目规划信任体验良好的网站，一般具有以下四个方面的特征： 1产品信息专业 2互动性能良好 3服务承诺明确 4推广力度较大 第一章商务网站概述客户需求分析网站栏目规划根据访问逻辑顺序，把可访问性分为四个层次：1站

7、点可访问性2服务可访问性3功能可访问性4内容可访问性 第一章商务网站概述客户需求分析网站栏目规划信任体验良好的网站，一般具有以下四个方面的特征： 1产品信息专业 2互动性能良好 3服务承诺明确 4推广力度较大 第一章商务网站概述客户需求分析网站栏目规划2、网页表现形式分析 客户所在企业与竞争对手在目标受众群体、产品或服务特性、业务模式等方面存在着一定的相似性，甚至一致性。其典型竞争对手网页的风格是设计师可以认真考察和借鉴的对象。 重点分析考察两个方面：网页配色网页布局 第一章商务网站概述客户需求分析网站栏目规划3、网站内容分析 典型的竞争对手网站，可以说就是客户想要建立的网站内容结构的蓝本。通

8、过分析其内容结构及页面内容组织，可以为与客户进行进一步沟通、明确需求、给出资料搜集清单等工作给出明确的线索。 重点分析考察两个方面：网站内容结构网页内容组织 第一章商务网站概述客户需求分析网站栏目规划 网站内容结构是指网站频道、栏目、子栏目、专题等组成结构。 中小型商务网站往往去掉频道的概念，统称为栏目结构。 网站内容结构 第一章商务网站概述客户需求分析网站栏目规划 网页的内容组织是指对网页需要呈现的内容进行信息序化和优化，最终确定在合适的位置放置合适的内容，准确地向浏览者传递要表达的商务诉求。网页内容组织三、网页原型分析 第一章商务网站概述客户需求分析网站栏目规划网页原型是网页设计最终作品的

9、模拟图，可以有以下形式： 使用笔和纸直接绘制简单的示意蓝图 在word、Excel中创建简单的框架图 基于竞争对手网页制作的网页原型 使用专业工具制作的网页原型 通过网页原型，重点要与客户进行深入的探讨几个问题： 1、网站建设的目的 ？2、网站服务对象？ 3、网站产品和服务定位？ 第一节 商务网站概述 第二节 客户需求分析第三节 网站栏目规划学习内容 第一章商务网站概述客户需求分析网站栏目规划第三节 网站栏目规划网站栏目的规划，其实也是对网站内容的高度提炼。在明确了网站的商务诉求后，要对网站的定位形成一个清晰的认识，在此基础上，对网站的内容进行分类，用最简练的语言提炼出网站每一个部分内容，以形

10、成清晰的栏目结构。 第一章商务网站概述客户需求分析网站栏目规划一、栏目设置的基本原则1、突出网站主题 2、开门见义3、层次分明 第一章商务网站概述客户需求分析网站栏目规划4、设置互动交流类栏目 5、提供下载类栏目示例： 第一章商务网站概述客户需求分析网站栏目规划一级栏目二级栏目内 容公司概况公司介绍介绍企业的一些基本情况、公司的历史等信息。组织机构公司组织机构拓扑图资质荣誉公司的证书领导致辞领导致辞及领导照片发展规划公司发展目标及发展计划企业文化企业理念及员工风采等新闻中心公司要闻公司最新动态、活动行业信息行业相关资讯产品展示主营产品与其它竞争对手相比，最具竞争力的产品最新产品公司最新开发研制

11、的产品产品系列完整的产品系列展示客服中心常见问答用户常见的各类问题在线问答售后服务各地营销中心及售后服务中心联系方式下载中心支持word、excel、pdf、zip等产品说明或相关文件下载人才招聘人才战略公司的人才战略，人才发展计划等内容的发布招聘职位具体的招聘信息，能以表格形式在线填写并提交应聘信息联系我们联系方式公司联系电话和联系地址介绍二、网站栏目的策划 第一章商务网站概述客户需求分析网站栏目规划 网站栏目的策划，首先要考虑网站的定位、网站的方向是什么。当确定了一个方向后，就可以围绕这个方向去搜集相关资料、寻找相关文章，并整理为相应的栏目。 在确定网站栏目结构时，既要考虑网站栏目的层次结

12、构，还应设计好网站栏目的链接结构。1、网站内容定位 第一章商务网站概述客户需求分析网站栏目规划 网站内容定位，要考虑清楚的三个问题：网站最重要的信息是什么？哪些信息可以提升浏览者的信任度？目标受众群体可能还想了解的信息有哪些？ 第一章商务网站概述客户需求分析网站栏目规划强调理性诉求的网站，以事实为依据，以产品或技术为核心，强化产品或技术内容的视觉冲击力和吸引力，网站栏目的设置也以此线索组织。 第一章商务网站概述客户需求分析网站栏目规划强调感性诉求的网站，大多以服务为导向、以树立企业形象为主。这一类型的网站，一定要注重网站的风格设计和创意，以感性诉求为主。网站栏目的设置要着意渲染或营造一种特有的

13、企业文化或团队氛围，来突出产品或服务的价值感。2、网站栏目结构 第一章商务网站概述客户需求分析网站栏目规划三级栏目层次结构 ：2、网站栏目结构 第一章商务网站概述客户需求分析网站栏目规划网站栏目的链接结构 ：星形链接结构树形链接结构三、网站栏目设计方法 第一章商务网站概述客户需求分析网站栏目规划1、归纳和演绎法2、借鉴引用法3、关键词选择法谢 谢 ！商务网页设计与制作商务网页布局与设计第二章理解并掌握网页风格设计要点能针对商务诉求组织网页内容能绘制网页布局草图学习目标 项 目 概 述 任务1：网页风格设计 任务2：草图绘制学习内容 第二章项 目 概 述网页风格设计草图绘制项 目 概 述长沙市碧

14、雅园花卉苗木基地成立于2008年，位于美丽的湘江河畔，是长沙市著名的花卉苗木公司。近三年来，苗木基地面积一直稳居同行首位，荣获全国优秀苗木基地提名单位等多项荣誉称号。公司经营的苗木品种有乔灌木、移栽大树、扦插小苗、树桩盆景、竹类植物、藤本植物、草本花卉、草皮草种、造林苗、新优果苗、种籽种苗等，其中红花紫薇、罗汉杉、红梅、广玉兰、海棠、樱花、香樟、桂花为其经营的特色苗木。公司希望通过企业网站的建设，提高网络知名度，开拓网络销售渠道。小王所在的智越网络公司承接了基地的网站建设项目。网站建设部经理安排小王负责该项目，并要求小王在五天内提交网站首页草图。 第二章项 目 概 述网页风格设计草图绘制项 目

15、 分 析 第二章项 目 概 述网页风格设计草图绘制网站建设业务流程图 1、网页草图是进一步挖掘客户需求的网页原型之一，也是制作效果图的蓝本。 2、具体工作包括页面布局、色彩搭配、文字图片编排、页面内容组织等。 任 务 分 解 第二章项 目 概 述网页风格设计草图绘制本项目可分解为以下两个任务：任务1：网页风格设计任务2：网页草图绘制 项 目 概 述 任务1：网页风格设计 任务2：草图绘制学习内容 第二章项 目 概 述网页风格设计草图绘制任务一、网页风格设计 第二章项 目 概 述网页风格设计草图绘制 风格设计的重点是版面布局、颜色的使用和搭配、文字和图片的编排等。要完成这一任务，可以从分析比较同

16、类网站入手，以快速形成初步的设计方案。【任务说明】 第二章项 目 概 述网页风格设计草图绘制【任务步骤-1、竞争对手网站对比分析】竞争对手网站获取途径关键词搜索行业网站会员相关统计报告竞争对手网站筛选用户体验度百度权重、PR值分析要点网页配色 页面布局 文字、图像的编排内容组织栏目结构 第二章项 目 概 述网页风格设计草图绘制【任务步骤-2、网页配色】主色调 在主色调的选择上，首先应该明确网站的主题、服务对象、所要传达的信息，还有利用色彩想要达到的视觉和心理效果，以确保所选用的色彩与网站形象相吻合。 主色调选取要点： 1）、色彩分为无彩色和有彩色两大类，无彩色是指黑、白、灰，其它的为有彩色。

17、2）、有彩色又可分为暖色调和冷色调两大类，它们分别给人以不同的感觉。 第二章项 目 概 述网页风格设计草图绘制冷暖色对比 第二章项 目 概 述网页风格设计草图绘制辅助用色 在确定了网页的主色调后，可以适当地辅以其它几种辅助色，但一般不超过三种（背景色和主体文字颜色不计入其中），这样可以对整个页面的色彩起着调和的作用，让页面生动活泼、富有生气，并使主色调更加流畅地贯穿整体。辅助用色分类： 1）、辅助用色包括辅色调、点睛色、背景色三种。 2）、仅次于主色调的视觉面积的辅色调，能起到烘托主色调、支持主色调、融合主色调的作用；点睛色是在小范围内“点”上强烈的颜色来突出主题效果，使页面更加鲜明生动；背景

18、色是衬托整体的色调，起到协调的作用。 第二章项 目 概 述网页风格设计草图绘制示例： 第二章项 目 概 述网页风格设计草图绘制 辅助用色要点： 1）、可以考虑跟主色调相邻近的颜色，也可以用主色调的对比色。 2）、相邻色给人的感觉是稳定、和谐、内向；而对比色给人的感觉是冲突，强的对比色运用可以使画面的开放性增强，整体印象变得轻松舒畅。 3）、在具体应用的时候用把握整体和谐、局部对比的原则。 第二章项 目 概 述网页风格设计草图绘制辅助用色基准 -色环图： 第二章项 目 概 述网页风格设计草图绘制本项目拟建网站配色参考：主色调：白色；辅色调：绿色；点睛色：红色。 第二章项 目 概 述网页风格设计草

19、图绘制【任务步骤-3、网页版式设计】 在网页布局，即设计网页内容及各元素空间分布时，因充分考虑“F”型的阅读习惯，确保最重要的信息能有效展示在浏览者面前。 F型热点图 第二章项 目 概 述网页风格设计草图绘制国字型网页布局 第二章项 目 概 述网页风格设计草图绘制拐角型网页布局 第二章项 目 概 述网页风格设计草图绘制框架型网页布局 第二章项 目 概 述网页风格设计草图绘制“回”字型网页布局 第二章项 目 概 述网页风格设计草图绘制自由式结构布局 第二章项 目 概 述网页风格设计草图绘制“另类”结构 结构布局 第二章项 目 概 述网页风格设计草图绘制本项目拟建网站布局： 在展示型企业网站中，产

20、品往往是展示的重点。在产品线较长、产品品种较多的情况下，一般需要在页面中给出相应的列表，并将该列表置于页面的左侧，以符合“F型热点图”规律。在该项目中，“拐角型”布局可以作为首选。 第二章项 目 概 述网页风格设计草图绘制【任务步骤-4、文字和图像编排】文字的编排 在网页中通过设置其字体、字号、行距，以及采用不同的排列和表现形式，还可以表达出特别的视觉效果，从而强化要传递的商业诉求。 第二章项 目 概 述网页风格设计草图绘制示例：通过文字大小及疏密的处理，可突出重点，给人层次分明 的感觉。 第二章项 目 概 述网页风格设计草图绘制图像的编排 图像在页面中的位置、排列方式及其大小、数量、外形等，

21、对页面的均衡、视觉流程、文字的强调均能产生较大的影响。 第二章项 目 概 述网页风格设计草图绘制示例：图像的大小不仅决定着主从关系，也控制着页面的均衡与 运动。大小对比强烈，给人跳跃感，使主角更突出；大小 对比减弱，则页面稳定、安静。 第二章项 目 概 述网页风格设计草图绘制示例：不同的图像自由叠置或分类叠置，构成的块状组合，具有轻快、活泼的特性，却不失整体感。在图像较多时，会无法突出重点，这时可改变图像的面积，有效地区分层次。 第二章项 目 概 述网页风格设计草图绘制本项目拟建网站文字与图像编排要点：首页中需要展示的文字量不是很大，正文使用默认字体字号，即宋体、12磅字即可。在颜色的使用上，

22、可考虑使用此前确定的辅助用色红色，来处理其中需要强化表达的部分文字。 本项目中的苗木基地在同行业中具有一定的影响力，为强化企业品牌形象及主营产品，可使用较大尺寸的图片作为Banner的背景图片，展示基地实景、特色苗木等。内容区的产品图片，可采用块状形式排列。为了与Banner图片匹配，产品图片尺寸可适当小一些，具体到每行图片的数量及大小，在制作效果图时，应根据视觉效果适当调整。 项 目 概 述 任务1：网页风格设计 任务2：草图绘制学习内容 第二章项 目 概 述网页风格设计草图绘制任务二、草图绘制 网页风格的设计一旦确定，就可以开始确定网站的栏目及页面中要展示的内容，在此基础上，再绘制出网页的

23、草图。 特别注意，在这一阶段中，保持与客户的及时联系和充分沟通非常重要。因为，客户对网页内容的把握，肯定比设计师更专业。【任务说明】 第二章项 目 概 述网页风格设计草图绘制【任务步骤-1、网站栏目设计】 第二章项 目 概 述网页风格设计草图绘制 根据网站栏目设置的原则及设计方法，参照竞争对手网站栏目结构，给出本项目网站的栏目结构： 【任务步骤-2、首页内容组织】 第二章项 目 概 述网页风格设计草图绘制 本项目网站首页内容组织： 【任务步骤-3、结构参数设定】 第二章项 目 概 述网页风格设计草图绘制 以屏幕分辨率1024*768为基础，设定本项目网站首页各部分结构参数： 谢 谢 ！第三章

24、网页效果图的制作学习目标 熟悉使用PhotoShop制作网页效果图的流程；掌握PhotoShop中图层组的设置； 掌握利用PhotoShop制作网页效果图的方法；掌握PhotoShop中对效果图进行切片处理的方法。项目概述小王所在的网络公司承接了长沙市碧雅园花卉苗木基地网站建设业务。通过前期需求分析，已经明确客户需要制作的网站为典型的展示型企业网站，并确定了网站的栏目，绘制了网站首页的草图。经理要求小王依据以上栏目结构图和草图，为该苗木基地设计制作网站首页效果图。另外，因客户不能提供企业标志图，网站LOGO也需一并设计和制作。网站首页基地介绍苗木品种特色苗木售后服务工程案例苗木养护联系我们基地

25、简介基地实景业务范围荣誉资质乔灌木移栽大树扦插小苗树桩盆景竹类植物藤本植物草本花卉草皮草种造林苗新优果苗种籽种苗红花紫薇罗汉杉红梅广玉兰海棠樱花香樟桂花服务承诺苗木配送技术支持病虫害防治苗木移植苗木修剪道路绿化小区绿化园林绿化网站栏目结构图网站首页草图将本项目的实施分解为以下几个子任务： 任务1：网页素材的选取任务2：图层组的管理任务3：网页元素的编辑任务4：效果图切片最终网站首页效果图任务1：网页素材的选取1、图片素材获取图片的格式有很多种。常见的图片格式有：jpg、gif、png、bmp，如下表所示。2、图片格式转换网上有很多图片转换工具，例如ACDSee、美图秀秀等，能自动识别图片的真实

26、格式，可以实现JPG、GIF、BMP、PNG等格式的互转。 任务1：网页素材的选取步骤1：下载字体步骤2：添加所下载字体到系统字体库3、特效字体选取 任务1：网页素材的选取任务2：图层组的管理1、图层组结构规划PHOTOSHOP中有不同类型的图层，如下表所示。图层面板详细说明图任务2：图层组的管理制作效果图时，需要创建和使用很多图层。为了方便管理和使用，需建立图层组。图层组就像一个文件夹，可以把所有相关的层一并放置到这个层文件夹里面去。根据首页草图，可将效果图的图层组划分为如下结构： 任务2：图层组的管理新建标志 、Banner 、导航 、内容 、底部 五个图层组 任务2：图层组的管理内容区部

27、分包括苗木分类、联系我们、基地简介、资质荣誉、基地展示、经典工程六个部分，因此在“内容”图层组中分别新建对应的六个内部图层组。 任务2：图层组的管理任务3：网页元素的编辑1、网站Logo制作 常用的网站LOGO的设计手法有以下几种：1、标识性手法：是用标志、文字、头字母的表音符号来设计LOGO；2、卡通化手法：通过夸张、幽默的卡通图像来设计LOGO；3、几何图形构成法：用点、线、面、方、圆、多边形或三维空间等几何图形来设计LOGO。此外，部分公司喜欢使用变形的公司名称作为他们的标志，这是一种很好的视觉识别符号。 任务3：网页元素的编辑Logo的设计技巧很多，概括起来，要注意以下几点：保持视觉平

28、衡、讲究线条的流畅，使整体形状美观； 用反差、对比或边框等强调主题； 选择恰当的字体； 注意留白，给人想象空间； 运用色彩。因为人们对色彩的反应比对形状的反映更为敏锐和直接，更能激发 情感。 任务3：网页元素的编辑网站Logo的一般尺寸：88*31 这是互联网上最普遍的Logo规格。 120*60 这种规格用于一般大小的Logo。 120*90 这种规格用于大型Logo。 任务3：网页元素的编辑AAAlogo是一款Logo设计软件，它操作简单、功能强大，几分钟之内可以设计出专业的Logo，可用于网页或者打印出来。AAAlogo内置有60个模板，可允许自己定制模板。它还附带2000多个Logo对

29、象和剪贴画的图库。所有内置Logo对象都是基于矢量的，可以轻易地缩放和旋转。在AAAlogo中，还可以对任意单独对象应用不同的样式，从而可以得到几乎无限的对象和效果组合。运行界面如图所示。 任务3：网页元素的编辑2、BNNER制作 网页Banner的设计原则 ：具有鲜明的色彩文字的字体清晰语言具有号召力图形的位置合适广告条文字方向正确 按钮一般要放在右边 避开广告条的边缘文字的数量不宜太多控制文件大小任务3：网页元素的编辑3、导航制作 4、主体内容制作 5、生成JPG格式效果图6、图片修整任务3：网页元素的编辑任务4：效果图切片 切片注意事项:保持视觉平衡、讲究线条的流畅，使整体形状美观； 切

30、片是生成表格的依据，切片的过程要先总体后局部，即先把网页整体切分成几个 大部分，再细切其中的小部分。 对于渐变的效果或圆角等图片特殊效果，需要在页面中表现出来的，要单独切出来。 标志LOGO等主要部分尽量切在一个切片内，防止显示遇到特殊情况时显示一部分。 不是主要部分的区域，不要大块切片。切得越小，可以加快网页下载图片的速度，让 多个图片同时下载而不是只下载一个大图片。所以，切片大小要根据需要来切。 网页切片导出时，颜色单一过渡少的，应该导出为GIF；颜色过渡比较多、颜色丰富的， 应该导出为JPG；有动画的部分，应该导出为GIF动画。 保留源文件。即使页面做好了，也要保留带切片层的源文件，当某

31、天需要修改某一个部 分时，例如小图标等，直接修改单独导出所用的切片即可。 在DW中进行编辑时，少用图片。如果能用背景颜色代替的，尽量使用背景颜色； 能用图 案的，也尽可能使用图案平铺来形成背景 谢 谢 ！第四章 静态页面制作学习目标 熟悉Dreamweaver站点的设置方法 掌握Dreamweaver的使用掌握使用表格工具布局网页的方法掌握常见网页元素中基本样式的设定掌握子页面链接的创建掌握常见的HTML标记语言的使用项目概述小张所在的网络公司承接长沙市碧雅园花卉苗木基地网站建设项目后，通过前期需求分析，网页美工小王已经绘制出网站首页效果图。经理要求网页设计师小张依据效果图，为该苗木基地制作网

32、站静态首页，以便于网站代码编写人员编写脚本代码，从而制作出一个完整的动态网站。最终网站首页效果图将本项目的实施分解为以下几个子任务： 任务1：本地站点配置任务2：使用表格布局制作网页任务1：本地站点配置 1、Dreamweaver安装 Dreamweaver是Macromedia公司早期推出的“网页三剑客”之一。“网页三剑客”指Dreamweaver、Flash、Fireworks这三个软件，它们集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器。它是集网页制作、网站管理功能于一体、提供所见即所得界面的网页编辑器，也是第一套为专业网页设计师特别开发的可视化网页开发工具。2010年

33、前后，Macromedia公司被Adobe公司收购，Dreamweaver CS5是目前最新的版本。启动Dreamweaver CS5，新建一个HTML网页，工作界面如下图所示。 左边窗口中的代码是HTML，即超文本标记语言，是一种用来制作超文本文档的简单标记语言，也是制作网页最基础的语言，它可以直接由浏览器执行。任务1：本地站点配置 空白页面的代码如下： 文档主体,正文部分 任务1：本地站点配置 网站的首页文档一般命名为index.html或者index.htm，也可以是default.html或default.htm。在不特别指定的情况下，打开一个网站时，看到的第一个页面就是该文档对应的页

34、面。网页文件的命名规则： 所有的文件名一律使用英文小写，这样就不会因为服务器系统不同而混淆。不可以使用中文。任务1：本地站点配置 2、Dreamweaver站点的设置 本地站点创建完成后，在【文件】面板的【本地文件】窗格中，会显示该站点的根目录，如下图所示。新建站点可以有效解决绝对路径与相对路径的问题。任务1：本地站点配置 HTML指超文本标记语言。超文本是指一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。它是超级文本的简称。 Web服务器(Web Server) Web服务器可以解析(handles)HTTP协议。当Web服务器接收到一个HTTP请求(

35、request)，会返回一个HTTP响应(response)，例如送回一个HTML页面。 在Internet上，每台计算机都有一个唯一的IP地址，计算机之间也只能通过IP地址来通讯，IP地址通常是由4个字节来表示，例如：94，用户不可能记住这么长的IP地址。为了方便人们的记忆，Internet采用域名来标识计算机，通过DNS（域名系统）将域名翻译成IP地址，每一级的域名都有对应的DNS域名服务器。文件路径就是文件在电脑中的位置，表示文件路径的方式有两种，相对路径和绝对路径。在网页设计中通过路径可以表示链接，插入图像、Flash、CSS文件的位置。绝对路径：即物理路径，就是硬盘上文件的路径，比如

36、下面的文件：d:dreamduexe1.html相对路径：是从当前路径开始的路径，假如当前路径为d:dreamduexe要描述上述路径，只需输入1.html3、网站文件夹管理按栏目内容分别建立子文件夹。资源按类存放在不同的文件夹中。文件夹的层次不要太深,以免系统维护时查找麻烦。避免用中文命名文件或文件夹。 避免使用过长的文件名。命名应尽量有明确的意义。任务1：本地站点配置 任务2：使用表格布局配置网页1、网页表格的规划 通过分析，网页可以分成几个大的区域，如下图所示：整个网页分成五个大表格 任务2：使用表格布局配置网页 绝大部分标记都有开始标记和结束标记；左、右尖括号为标记之间的分界符；属性值

37、放置在始标记中，如 ，结束标记为“”， 有些结束标记可以省略。标记不区分大小写。html标记具有以下特点：任务2：使用表格布局配置网页 有些网页设计人员习惯将整个页面作为一个大表格，这种做法将影响网页的浏览速度。当浏览器发现页面中有一个TABLE标记，在接收到对应的结束标记之前，它不会显示这个表格。因此，如果整个页面都放入到一个大表格中，在浏览器下载这个大表格的标记之前，整个页面都不会显示。当显示内容庞大的页面时（例如，搜索结果或者电子商务网站上的产品目录），表格的延迟显示，会导致整个页面显示的停顿。 为了避免出现这种情况，应该把页面划分成多个较小且独立的表格区域。这样，每个表格的HTML代码

38、下载之后浏览器就可以立即显示它。对于浏览者来说，页面在屏幕上一部分、一部分地逐渐显示出来。更为重要的是，这种页面在屏幕上开始显示的速度，要比之前等待整个页面下载完才显示的方式要快得多。任务2：使用表格布局配置网页2、网页元素的填充 任务2：使用表格布局配置网页何为CSS（Cascading Style Sheet）？ CSS中文译为层叠样式表。是用于控制网页样式并允许 将样式信息与网页内容分离的一种标记性语言。制作表单页面，头部、导航、Banner与首页一致，体部如下图：第五章 DIV+css网页布局 学习目标 掌握DIV+CSS方法布局网页熟练运用CSS 美化网页项目概述小小李所在的项目团队

39、承接了长沙市碧雅园花卉苗木基地网站建设业务，通过前期需求分析，网页美工小王已绘制了网站首页的效果图。经理让小李在两天时间内根据效果图，为该苗木基地网站制作静态的前台页面。为方便与网站后台系统集成，要求小李使用DIV+CSS技术制作网站的前台页面。最终网站首页效果图将本项目的实施分解为以下几个子任务： 任务1：首页DIV框架制作任务2：内容制作任务3：CSS特效导航栏制作CSS：层叠样式表(Cascading Style Sheet ),定义了如何显示HTML元素，用来控制网页的样式和布局。导入DIV+CSS已成为网站标准（或称“WEB标准”）中常用术语之一，其中DIV是一个标签，称为块元素（或

40、层元素）。DIV元素是用来为html文档内大块（block-level）的内容提供结构和背景的元素，类似于表格技术中的标签。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的。块的大小和位置由其属性来控制，或者是通过使用样式表（即CSS）格式化这个块来进行控制。 例如在某个页面中输入如下代码：在设计模式下，产生的效果如下图所示。Div示意图在中插入以下代码，用来定义一个名为zw的样式：This is a testThis is a test产生的效果如下图所示。CSS控制div外观示意图由此可见，应用了CSS的Div外观和字体大小都与默认的样式不同。因此，人们常用不同的CSS来区分D

41、IV。（在这里#ZW为一个ID样式，其细节说明参考后续内容）任务1：首页DIV框架制作1、网页DIV层次规划 通过分析，网页可以分成几个大的区域，将页面用DIV分块。DIV是HTML的标签，表示部分的意思。页面分块如下图所示： 实际的页面布局及嵌套关系如下图所示。 任务1：首页DIV框架制作body /*HTML元素，具体不做说明*/#Container /*页面层容器*/#Header /*页面头部*/ #Nav /*页面导航*/ #Banner /*页面广告*/ #Content /*主体内容*/ #Footer /*页面底部*/ 根据上图的分析，本页面DIV结构如下（此处用样式来区分不同

42、的DIV）任务1：首页DIV框架制作表示文档的语言编码，类似平时说的汉语、英语。“gb2312”是告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF- 8编码，它是国际通用的编码。不管采用哪种编码，本文档中包含的css样式表或包含的其它文件中的代码必须和本文档的代码编码一致，否则会出现乱码。任务1：首页DIV框架制作在标签对中写入DIV的基本结构，代码如下： 表示注释，为了使以后阅读代码更简易，应该添加相关注释。任务1：首页DIV框架制作新建CSS命名为css1.css。接下来打开css1.css文件，点击CSS浮动面板右下侧的【新建样式】按钮，弹出【新建CSS规则】面板，如下图所

43、示。任务1：首页DIV框架制作选择ID样式，输入container.弹出【#container的CSS规则定义】面板。选择方框选项，设置宽为100%，如下图所示。任务1：首页DIV框架制作 Css1.css文件中同时出现代码如下。 #container width:100%;这里将#container的宽度定义为100%，是为了让所对应的DIV能随着页面大小的不同进行缩放，自动为满屏。当整个网页需要背景颜色时，这样定义非常有效。任务1：首页DIV框架制作【新建CSS规则】面板中，有类样式、ID 样式、标签样式、复合内容样式。 在上图中，类是指定义一个class样式，可以多个对象引用，样式名称为

44、用户定义，在生成后，前面会自动生成一个小圆点；标签是指对默认的已有 html标签进行重新定义，如可以定义bodymargin:0，意思是将body的外边距设置为0，Pcolor:#f00是将所有P标签的文字颜色设置为红色；高级样式即ID样式，是以#开始，id样式只能作用于一个对象，不能作用于多个对象，优先级高于class样式，这是id样式和class样式的区别。复合内容将在后述内容中详细讲解。任务1：首页DIV框架制作点击新【建样式按钮】，新建#Header高级样式。输入值如下图所示。Css1.css文件中同时出现代码如下。#Header background-image: url(images/index_02.gif);margin: 0px;hei