DreamWeaver网页设计1.ppt

DreamWeaver网页设计,制作：薄静仪,第一章网页设计概述,一、网页设计基础知识1、概念：1）WWW：WorldWideWeb的简称，也成为万维网。它是由分布在互联网上的成千上万个网页组成的网络信息系统。他为用户提供各种各样的信息和网络服务。2）网页：WWW服务通过网页形式的链接向用户提供信息。网页又通过超链接连接到其他资源。网页中包含文本，图像、声音和视频等多种形式的资源，因此也叫超媒体。用户通过浏览器把信息显示出来。,第一章网页设计概述,一、网页设计基础知识3）IP地址：Internet上的每台主机(Host)都有一个唯一的IP地址。IP地址的长度为32位，分为4段，每段8位，用十进制数字表示，每段数字范围为0255，段与段之间用句点隔开。IP地址有两部分组成，一部分为网络地址，另一部分为主机地址。4）URL：统一资源定位符（URL，英语Uniform/UniversalResourceLocator的缩写）也被称为网页地址，是因特网上标准的资源的地址（Address)。,第一章网页设计概述,一、网页设计基础知识2、web工作原理首先在浏览器上键入你想访问网页的统一资源定位符URL，或者通过超链接方式链接到那个网页或网络资源。接下来，URL被名为域名系统的分布于全球的因特网数据库解析，并根据解析结果决定进入哪一个IP地址。然后向在那个IP地址工作的服务器发送一个HTTP请求。在通常情况下，HTML文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。网络浏览器接下来的工作是把HTML、CSS和其他接受到的文件所描述的内容，加上图像、链接和其他必须的资源，显示给用户。这些就构成了你所看到的“网页”。,第一章网页设计概述,一、网页设计基础知识3、网页的基本要素文字与图片是构成一个网页的两个基本的元素，文字就是网页的内容，图片就是网页的外观。除此之外，网页的元素还包括动画，音乐，视频，表单等。,表单Logo动画广告,导航图片文字,第一章网页设计概述,一、网页设计基础知识1）表单表单是功能型网站中经常使用的元素，是网站交互中最重要的组成部分之一。在网页中小到搜索框，大到用户注册，这些都会使用到表单及其表单元素。网页中的表单是用来收集用户信息，帮助用户进行功能性控制的元素。表单的交互设计与视觉设计是网站设计中相当重要的环节。,第一章网页设计概述,一、网页设计基础知识2）Logo在网页设计中，Logo作为公司或者网站的标识，起着非常重要的作用。一个制作精美的Logo不仅可以树立良好的网站形象，还可以传达丰富的行业信息。,第一章网页设计概述,一、网页设计基础知识3）导航导航是网站设计中不可缺少的基础元素之一，他是网站信息结构的基础分类，也是浏览者进行信息浏览的路标。导航条应该引人注目，浏览者进入网站，首先会寻找导航条，通过导航条可以直观地了解网站的内容及信息的分类方式，以判断这个网站上是否有自己需要的资料和感兴趣的内容。,第一章网页设计概述,一、网页设计基础知识4）动画随着互联网的迅速发展，网络速度得到大幅提升。网页中越来越多地出现了各种多媒体元素，其中包括了动画、音频和视频等。大多数浏览器本身都可以显示或播放这些多媒体元素，无需任何外部程序或模块支持。网页中应用的动画元素主要有Gif和Swf两种形式。Gif动画的效果单一，所以具有良好交互效果的Flash动画技术越来越多地被应用到网页中。,第一章网页设计概述,一、网页设计基础知识5）广告网站作为一种意境被打中所熟悉并接受的媒体，正在逐步显示出其特有的、蕴藏深厚的广告价值空间。纵观网上大多数门户网站和商业网站，广告收入往往是其生存发展的支柱性收入。网站广告的形式很多，常见的就是弹出广告，浮动广告和页面广告。,第一章网页设计概述,一、网页设计基础知识6）图片图像是网站基本组成部分之一，在任何网站中，都会有图像的身影。图像的格式很多，例如：Gif，Jpg，Png等。7）文字文字是网页基本构成的另一种元素，它是向浏览者传递信息最直接、最有效的方式。对于大多数浏览器来说，文字都是可以显示的，无需任何外部程序或模块支持。由于用户的电脑配置都不尽相同，所以网页中能使用的字体只有通用的几种：宋体，黑体等。,第一章网页设计概述,一、网页设计基础知识4、静态网页和动态网页静态网页和动态网页是相对应的，网页的URL后缀是以.htm，.html，.shtml等都是静态网页常见的出现形式。而网页后缀是以.asp，.jsp，.php等形式为后缀的，就是动态网站。动态网页是指采用动态网站技术生成的网页。,第一章网页设计概述,一、网页设计基础知识5、网站制作的基本流程1）前期策划2）收集素材3）页面的版式与布局分析4）确定网页的主色调5）设计页面整体6）其他页面元素的设计7）切割和优化页面8）制作HTML页面9）测试并上传网站10）网站的更新与维护,第一章网页设计概述,一、网页设计基础知识5、网站制作的基本流程1）前期策划主要包括确定网站的用户群和定位网站的主题，还有形象策划、制作规划和后期宣传推广等方面的内容。网站策划尤为重要。2）收集素材以客户为主，考虑浏览者的情况，收集好的素材一定要整理好，归类清楚。,第一章网页设计概述,一、网页设计基础知识5、网站制作的基本流程3）页面的版式与布局分析页面尺寸整体造型页头文本页脚图片多媒体网页布局的方法：纸上布局软件布局网页布局的技术表格布局技术CSS+DIV技术,第一章网页设计概述,一、网页设计基础知识5、网站制作的基本流程4）确定网页的主色调5）设计页面整体放置确定需要的功能模块（Logo，主菜单，广告条，友情链接。）注意：突出重点，平衡协调，首先考虑主要模块的摆放6）其他页面元素的设计按钮，图标，图片边框等装饰性东西7）切割和优化页面通常使用photoshop或者Fireworks提供的切片功能,第一章网页设计概述,一、网页设计基础知识5、网站制作的基本流程8）制作HTML页面使用DreamWeaver制作网页9）测试并上传网站使用DW自带的上传功能或者使用第三方上传软件10）网站的更新与维护,第一章网页设计概述,二、DreamWeaverCS5操作界面,第一章网页设计概述,三、设计并制作一个简单的站点创建本地站点1、操作步骤：站点新建站点站点设置对象对话框站点名称：站点的名字本地站点文件夹：站点个文件所在位置输入完毕单击保存。2、查看站点窗口文件打开文件面板显示刚刚创建的本地站点3、站点管理文件面板上左侧下拉列表中选择已经创建的站点,第一章网页设计概述,三、设计并制作一个简单的站点创建本地站点4、规划与构建站点结构1）规划站点结构把站点划分为多个目录把网站中相关的并且属于同样栏目，具有同样含义的文件放在各自的目录中。不同种类的文件放在不同的文件夹中在本地站点和远端站点使用相同的目录结构,第一章网页设计概述,三、设计并制作一个简单的站点创建本地站