《Dreamweaver CS5网页设计与制作教程 教学课件 ppt 作者 文琦 詹增荣 第一章》由会员分享，可在线阅读，更多相关《Dreamweaver CS5网页设计与制作教程 教学课件 ppt 作者 文琦 詹增荣 第一章（18页珍藏版）》请在金锄头文库上搜索。
1、第一章 网站概述,11 网站与网页的概述 12 认识网页与网站 13 站点的建立,1.1 网站与网页的概述,网络最大的特点是共享资源。浏览者登录网站后，可轻松利用网络资源。浏览者只需要打开电脑，点击浏览器，输入网站网址，网站的信息将呈现在眼前，只要浏览者在相关信息点击鼠标就可以获取有用信息，如查看新闻，查看天气，娱乐休闲等等。,标题 网站LOGO 页眉 页脚,1.1 网站与网页的概述 -网页的基本元素,1.1 网站与网页的概述-网页的基本元素,主体内容 功能区 导航栏 广告区,1.1 网站与网页的概述-网页布局,1.1 网站与网页的概述-网页布局,页面布局构思草图,细化后的布局方案图,1.1
2、网站与网页的概述-色彩搭配,网站的整体视觉效果在网站布局方案确定之后就形成了雏形，因为网站的信息已经做了合理的安排。接下来要考虑如何吸引浏览者对网站的注意，而让浏览者能花更多的时间停留在网站上，是网站的整体视觉效果应该考虑的另一个因素网页的色彩搭配。它决定了浏览者对该网站的第一印象。,1.1 网站与网页的概述-色彩搭配,色彩 红、黄、蓝三种色彩可以调和其他的色彩，因此把它们称为三原色。网页中的色彩表达即是用这三种颜色的数值表示，例如：红色是RGB(255,0,0)， 色调 暖色调可使主页呈现温馨、和煦、热情的氛围。该色调代表：红色、橙色、黄色等色彩的搭配。 冷色调可使主页呈现宁静、清凉、高雅的
3、氛围。该色调代表：青色、绿色、紫色等色彩的搭配。 对比色调把色调完全相反的色彩搭配在一空间里。如：红与绿、橙与蓝可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。 色彩的心理感觉 不同的颜色会给浏览者不同的心理感受，每种色彩在饱和度，透明度上略微变化就会产生不同的感觉,1.1 网站与网页的概述-色彩搭配,1.1 网站与网页的概述-色彩搭配,网页采用的色彩除了要考虑颜色给人带来的感观效果，还要考虑网页中的色彩搭配，可从以下几个方面考虑： 色彩的鲜明性。网页的色彩要鲜艳，这样更容易引人注目。 色彩的独特性。要有与众不同的色彩，使得浏览者对网站的印象强烈。 色彩的合适性。色彩与网站所表达的内容相匹
4、配。 色彩的联想性。不同色彩可能会有不同的联想，选择色彩要和网页的内涵有一定的关联。,1.2 认识网页与网站,任务与目的 1任务 打开任一网站，如，观察整个网站的组成元素及网页的布局等。 2目的 了解网站所涉及的基本知识，如网页与网站的关系，IP地址等。,1.2 认识网页与网站-相关概念介绍,1网页 网页（Web Page）是网站的某一个页面。它是一个纯文本文件，以超文本和超媒体为技术，采用HTML、CSS、XML等语言来描述组成页面的各种元素，通过浏览器向浏览者呈现网页的各种内容。网页则存放在Internet中的某台计算机中，通常的扩展名有.htm、.html、.jsp、.asp、.aspx
5、等 2网站 网站（WebSite）是指在互联网上，根据一定规则，组织了一组具有共同内容的网页文件集合。访问某个网站（或站点）实际上访问的是提供这种服务的一台或多台计算机，以文件夹的形式存储在服务器中，图1-8为某个网站对应的文件夹，文件夹中可能包括各种网站所需文件。,1.2 认识网页与网站-相关概念介绍,3HTML与XHTML HTML（HyperText Mark-up Language）也称超文本标记语言，它是构成网页文档的主要语言。通过HTML标签，将文字、图形、动画、声音、表格、链接等组织在网页。点击浏览器的“查看”菜单的“查看源文件”命令可查看该页面的HTML代码，如图1-9所示，左
6、边窗口是页面的最终效果，右边是利用记事本显示页面对应的HTML代码。 4浏览器的作用 浏览器是Web服务的客户端程序，常用的浏览器有IE、Firefox、Opera、360浏览器、腾讯TT等。浏览器主要通过HTTP协议与网页服务器交互并获取网页，浏览器负责解释网页中HTML代码等，然后将内容显示给浏览者。,1.2 认识网页与网站-相关概念介绍,5IP、域名及DNS、URL IP:尽管互联网上连接了无数的服务器和电脑，但每一个主机都有唯一的地址，作为该主机在互联网上的唯一标志，通常称之为IP地址。 域名及DNS:域名（Domain）的作用是为了摆脱IP数字的单调和难记的缺点，通过形象的文字来代表
7、该主机，这些形象的文字就是主机的域名。域名用“.”将各级域名分隔，如百度的域名，其中com是其顶级域名，baidu是其二级域名，www是其三级域名。 URL:Internet上所有的资源都有一个唯一的URL地址，一般将URL地址称为网址。URL的完整格式如下：协议:/主机名（或IP地址）：端口号/路径名/文件名，如http:/ 6网站分类 目前，常见的网页分别静态网页、动态网页。静态网页指基本上全部使用HTML语言制作的网页，通常以.htm、.html、.shtml、.xml等形式为后缀。 门户网站,个人网站,专业网站,职能网站,1.3 站点的建立,任务与目的 1任务 打开网页编辑工具Drea
8、mweaver CS5；创建本地站点，通过“站点向导”进行站点定义，并向站点添加文件和文件夹等操作；关闭Dreamweaver CS5。 2目的 了解网页编辑工具Dreamweaver CS5，掌握其工作界面；掌握站点的创建和管理方法,1.3站点的建立-相关概念及操作,1认识Dreamweaver 1Dreamweaver CS5的启动 Dreamweaver是建立Web站点和应用程序的专业工具，它与Fireworks，Flash并称“网页三剑客”。设计师利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 Dreamweaver经过了若干个版本，2010年全球最大的图像编辑软件供应商Adobe发布了Dreamweaver CS5，它最突出的亮点有三处：第一、对CMS的支持功能；第二、对CSS的校验；第三、对PHP更好的支持。,1.3站点的建立-相关概念及操作,1认识Dreamweaver 2Dreamweaver的工作界面,1.3站点的建立-相关概念及操作,1认识Dreamweaver 3站点 一个站点（Site）对应磁盘上的一个文件夹，它存储了一个网站包含的所有文件。DW的使用是以站点为基础的，必须为每一个要处理的网站建立一个本地站点。,
