Dreamweaver-CS5网页设计与制作教程课件

第一章网站概述1．1网站与网页的概述1．2认识网页与网站1．3站点的建立1.1网站与网页的概述网络最大的特点是共享资源。浏览者登录网站后，可轻松利用网络资源。浏览者只需要打开电脑，点击浏览器，输入网站网址，网站的信息将呈现在眼前，只要浏览者在相关信息点击鼠标就可以获取有用信息，如查看新闻，查看天气，娱乐休闲等等。标题网站LOGO页眉页脚1.1网站与网页的概述

--网页的基本元素1.1网站与网页的概述-网页的基本元素主体内容功能区导航栏广告区1.1网站与网页的概述-网页布局布局类型布局方式“国”字型网站的上面是标题及横幅广告，然后是网站的主体部分，在主体部分的左右分别列一些小条，中间是主要内容，下面是一些网站的信息，如版权信息。举例：人民网、网易等。拐角型它是“国”字型的变型，网站上面是标题广告，左侧是导航栏，右侧是主体部分，下面是网站的信息。举例：中国化工网等。标题正文型上面是标题，下面是主体部分。如一些文章页面或注册页面等。左右框型左边是导航栏，右边是正文。有时最上方会有一个小标题。如：大型论坛、企业网站等。上下框型与上面类似，区别仅在于上面是导航栏，下面是正文。综合框架型左右、上下两种框架结构的结合。封面型（Flash型）精美的平面或动画作为首页。如百度等。1.1网站与网页的概述-网页布局页面布局构思草图细化后的布局方案图1.1网站与网页的概述-色彩搭配

网站的整体视觉效果在网站布局方案确定之后就形成了雏形，因为网站的信息已经做了合理的安排。接下来要考虑如何吸引浏览者对网站的注意，而让浏览者能花更多的时间停留在网站上，是网站的整体视觉效果应该考虑的另一个因素——网页的色彩搭配。它决定了浏览者对该网站的第一印象。1.1网站与网页的概述-色彩搭配色彩红、黄、蓝三种色彩可以调和其他的色彩，因此把它们称为三原色。网页中的色彩表达即是用这三种颜色的数值表示，例如：红色是RGB(255,0,0)，色调暖色调——可使主页呈现温馨、和煦、热情的氛围。该色调代表：红色、橙色、黄色等色彩的搭配。冷色调——可使主页呈现宁静、清凉、高雅的氛围。该色调代表：青色、绿色、紫色等色彩的搭配。对比色调——把色调完全相反的色彩搭配在一空间里。如：红与绿、橙与蓝可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。色彩的心理感觉不同的颜色会给浏览者不同的心理感受，每种色彩在饱和度，透明度上略微变化就会产生不同的感觉1.1网站与网页的概述-色彩搭配色彩积极的含义消极的含义红色热情、亢奋、激烈、喜庆、革命、吉利、兴隆、爱情、火热、活力危险、痛苦、紧张、屠杀、残酷、事故、战争、爆炸、亏空橙色成熟、生命、永恒、华贵、热情、富丽、活跃、辉煌、兴奋、温暖暴躁、不安、欺诈、嫉妒黄色光明、兴奋、明朗、活泼、丰收、愉悦、轻快、财富、权力病痛、胆怯、骄傲、下流绿色自然、和平、生命、青春、畅通、安全、宁静、平稳、希望生酸、失控蓝色久远、平静、安宁、沉着、纯洁、透明、独立、遐想寒冷、伤感、孤漠、冷酷紫色高贵、久远、神秘、豪华、生命、温柔、爱情、端庄、俏丽、娇艳悲哀、忧郁、痛苦、毒害、荒淫黑色庄重、深沉、高级、幽静、深刻、厚实、稳定、成熟悲哀、肮脏、恐怖、沉重白色纯洁、干净、明亮、轻松、朴素、卫生、凉爽、淡雅恐怖、冷峻、单薄、孤独灰色高雅、沉着、平和、平衡、连贯、联系、过渡凄凉、空虚、抑郁、暧昧、乏味、沉闷1.1网站与网页的概述-色彩搭配网页采用的色彩除了要考虑颜色给人带来的感观效果，还要考虑网页中的色彩搭配，可从以下几个方面考虑：色彩的鲜明性。网页的色彩要鲜艳，这样更容易引人注目。色彩的独特性。要有与众不同的色彩，使得浏览者对网站的印象强烈。色彩的合适性。色彩与网站所表达的内容相匹配。色彩的联想性。不同色彩可能会有不同的联想，选择色彩要和网页的内涵有一定的关联。1.2认识网页与网站任务与目的1．任务打开任一网站，如，观察整个网站的组成元素及网页的布局等。2．目的了解网站所涉及的基本知识，如网页与网站的关系，IP地址等。1.2认识网页与网站-相关概念介绍1．网页网页（WebPage）是网站的某一个页面。它是一个纯文本文件，以超文本和超媒体为技术，采用HTML、CSS、XML等语言来描述组成页面的各种元素，通过浏览器向浏览者呈现网页的各种内容。网页则存放在Internet中的某台计算机中，通常的扩展名有.htm、.html、.jsp、.asp、.aspx等2．网站网站（WebSite）是指在互联网上，根据一定规则，组织了一组具有共同内容的网页文件集合。访问某个网站（或站点）实际上访问的是提供这种服务的一台或多台计算机，以文件夹的形式存储在服务器中，图1-8为某个网站对应的文件夹，文件夹中可能包括各种网站所需文件。1.2认识网页与网站-相关概念介绍3．HTML与XHTMLHTML（HyperTextMark-upLanguage）也称超文本标记语言，它是构成网页文档的主要语言。通过HTML标签，将文字、图形、动画、声音、表格、链接等组织在网页。点击浏览器的“查看”菜单的“查看源文件”命令可查看该页面的HTML代码，如图1-9所示，左边窗口是页面的最终效果，右边是利用记事本显示页面对应的HTML代码。4．浏览器的作用浏览器是Web服务的客户端程序，常用的浏览器有IE、Firefox、Opera、360浏览器、腾讯TT等。浏览器主要通过HTTP协议与网页服务器交互并获取网页，浏览器负责解释网页中HTML代码等，然后将内容显示给浏览者。1.2认识网页与网站-相关概念介绍5．IP、域名及DNS、URLIP:尽管互联网上连接了无数的服务器和电脑，但每一个主机都有唯一的地址，作为该主机在互联网上的唯一标志，通常称之为IP地址。域名及DNS:域名（Domain）的作用是为了摆脱IP数字的单调和难记的缺点，通过形象的文字来代表该主机，这些形象的文字就是主机的域名。域名用“.”将各级域名分隔，如百度的域名，其中com是其顶级域名，baidu是其二级域名，www是其三级域名。URL:Internet上所有的资源都有一个唯一的URL地址，一般将URL地址称为网址。URL的完整格式如下：协议://主机名（或IP地址）：端口号/路径名/文件名，如/i/198484445。6．网站分类目前，常见的网页分别静态网页、动态网页。静态网页指基本上全部使用HTML语言制作的网页，通常以.htm、.html、.shtml、.xml等形式为后缀。门户网站,个人网站,专业网站,职能网站1.3站点的建立任务与目的1．任务

打开网页编辑工具DreamweaverCS5；创建本地站点，通过“站点向导”进行站点定义，并向站点添加文件和文件夹等操作；关闭DreamweaverCS5。2．目的

了解网页编辑工具DreamweaverCS5，掌握其工作界面；掌握站点的创建和管理方法1.3站点的建立-相关概念及操作1．认识Dreamweaver1．DreamweaverCS5的启动 Dreamweaver是建立Web站点和应用程序的专业工具，它与Fireworks，Flash并称“网页三剑客”。设计师利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 Dreamweaver经过了若干个版本，2010年全球最大的图像编辑软件供应商Adobe发布了DreamweaverCS5，它最突出的亮点有三处：第一、对CMS的支持功能；第二、对CSS的校验；第三、对PHP更好的支持。1.3站点的建立-相关概念及操