《网页设计和制作第一章 概述ppt课件》由会员分享，可在线阅读，更多相关《网页设计和制作第一章 概述ppt课件（73页珍藏版）》请在金锄头文库上搜索。
1、第一章 网站概述,本章内容,1 网站规划与设计 2 Dreamweaver MX基础知识 3 在网页中添加对象 4 在网页中使用行为和层 5 在网页中使用模板 6 网站制作实例,8.1 网站规划与设计,1.1 概述 1.2 网站设计 1.3 内容搜集与组织,home,8.1.1 概述,1. 网站设计的基本知识 2. 网页基本构成元素 3. 网站分类与设计风格 4. 网站制作步骤,home,1. 网站设计的基本知识,WWW（World Wide Web）服务： World Wide Web（万维网），简称WWW，是Internet上最重要的信息服务之一，WWW是以Internet上众多WWW服务
2、器所发布的无数网页及它们之间的链接为基础构成的一个庞大的多媒体信息网。 WWW信息发布模式： WWW信息发布：采用客户端/服务器（Client / Server）模式。WWW服务器程序运行在WWW服务器上，用于发布存放在WWW服务器中的网页；WWW客户端程序运行在用户计算机上的网页浏览器，通过Internet与WWW服务器进行通信，将网页传送到用户计算机上并显示出来。,下一页,1. 网站设计的基本知识,HTTP协议 超文本传输协议HTTP（Hyper Text Transfer Protocol）是WWW服务所使用的信息传输协议，即访问Internet上的Web页面所用协议。 打开Intern
3、et上某一网页：HTTP:/ 如： 或者：http:/210.40.64.7/wlzx/index.htm,上一页,下一页,网页（Web Page） 通过WWW发布的包含有文本、图片、声音、动画等多媒体信息的页面，是WWW的基本单位。 网页文件就是普通的文本文件，但规定其后缀为.htm或.html。 在IE浏览器中查看网页文件的实际内容：执行菜单栏“查看”|“源文件”命令。,1. 网站设计的基本知识,上一页,下一页,超文本标记语言HTML HTML（Hyper Text Markup Language）：HTML文件是WWW中使用的主要文件类型，通常以“.html”或“.htm”为文件后缀。
4、是一种用于描述超文本内容的标签系统，是最基本的网页编写语言。 HTML文件使用一些约定的标记对WWW上的各种信息进行标记，这些被标记的信息以网页文件形式发布在Web服务器上，在用户请求的情况下，下载到用户的机器上，用户的浏览器会自动解释这些标记的含义，按照一定的格式在屏幕上显示出来，而HTML标记本身并不在浏览器中显示。,1. 网站设计的基本知识,上一页,下一页,1. 网站设计的基本知识,网站（Web Site） 是一组具有共享属性（如相关主题、类似的设计或共同目的）的链接文档。网站由众多的网页组成的，它们存储在某一个Web服务器上,上一页,下一页,1. 网站设计的基本知识,首页 网站的默认页
5、面，也称为主页。 Web服务器都有自己默认的主页名称，输入地址时仅指定WWW服务器域名或IP地址时打开的页面就是首页。 主页是一个网站最重要的网页，通常包含最新的信息及指向各分栏目的超链接。 常见的首页名称有index.htm（index.html） 或default.htm（default.html）。,home,上一页,2. 网页基本构成元素,网页基本构成元素 文本：最基本的构成元素，表现信息内容的主体。占用空间小，信息量大 超链接：相关网页及其他网络资源之间联系的纽带。 图片、动画：静态和动态的图形文件。 声音和视频：音乐，在线广播，在线影视 信息提交表单：提供网上交互功能的基本元素，用
6、来收集浏览者提供的信息并提交给Web服务器进行处理。,home,网页布局基本构成元素,标题：网页的性质与内容，显示在浏览器的标题栏中 网站标识：安放在最显眼的位置，代表形象 页眉：用来放置网站最希望浏览者观看的内容 导航：提供网站栏目的索引 内容：要具有方向性 页脚：提供网站拥有者的相关信息，证书，版权信息，联系方式,3. 网站分类与设计风格,新闻门户类,下一页,3. 网站分类与设计风格,工商企业类,上一页,下一页,3. 网站分类与设计风格,文化教育类,上一页,下一页,3. 网站分类与设计风格,运动休闲类,上一页,下一页,3. 网站分类与设计风格,游戏娱乐类,上一页,下一页,3. 网站分类与设
7、计风格,生活时尚类,上一页,下一页,3. 网站分类与设计风格,兴趣爱好类,home,上一页,4. 网站制作步骤,home,1.2 网站设计,1. 网站题材选择及内容的确定 2. 网站结构设计 3. 网站风格设计 4. 确定网站首页的创意设计,home,1.网站题材选择及内容的确定,（1）主题范围不能过大，要有特色。 （2）题材最好是自己擅长或者喜爱的内容。,home,2. 网站结构设计,(1) 确定栏目和版块 突出特点 设置最近更新、网站指南和交互栏目 (2) 确定网站的目录结构 将所有的文件都放在站点根目录下的相应目录中。 按栏目内容建立子目录。 不要使用中文作为目录或文件的名字，命名的名称
8、不能过长，应简单明了。,下一页,我们研究网站的链接结构的目的在于：用最少的链接，使得浏览最有效率。 一般的，建立网站的链接结构有三种基本方式：,(3) 确定网站的链接结构,2. 网站结构设计,home,线形链接结构：用于组织本身是线性顺序形式存在的信息，可以引导浏览者象翻阅书籍一样按顺序浏览整个网站。 优点是网络浏览具有连续性。 缺点是当网页量大时，不能灵活的访问。,上一页,下一页,2. 网站结构设计,树状链接结构：类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。 优点是条理清晰，访问者明确知道自己在
9、什么位置，不会“迷”路。 缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。,(3) 确定网站的链接结构,上一页,下一页,非线性链接结构：该类结构主体是树状链接结构，并将小的栏目交叉连接。 优点是使网站具有条理，并且可以实现某些相互交叉链接的栏目之间的快速跳转。 缺点是如果规划没有做好可能使浏览者在浏览时不知道位于何处。,home,(3) 确定网站的链接结构,2. 网站结构设计,上一页,下一页,网站链接结构设计常用方法如下： 方法一：使用线性链接结构。 方法二：在新窗口打开链接指向的网页。 方法三：在网页中增加一条关于所处网页位置的栏目，并在位置的说明中加入链接，帮助浏
10、览者明确所处的位置，并快速转向上级网页。 即经常看到许多网站页面顶部的，类似这样： “您现在的位置是：首页-网络中心-计算机基础教育-文科计算机基础课课件”,home,上一页,2. 网站结构设计,3. 网站风格设计,(1) 网页色彩的搭配 色彩是人的视觉最敏感的东西，网页中色彩的选择和搭配是树立网站形象的关键之一。 色彩总的应用原则应该是“总体协调，局部对比”。,下一页,3. 网站风格设计,home,(1) 网页色彩的搭配,上一页,下一页,3. 网站风格设计,home,(1) 网页色彩的搭配,上一页,下一页,3. 网站风格设计,红色代表热情、活泼、热闹、温暖、幸福、吉祥 橙色代表光明、华丽、兴
11、奋、甜蜜、快乐 橙色较温和,是一种很活泼、辉煌的色彩.富足的、快乐的色彩.稍加黑则较稳重.蓝橙对比时较生动. 黄色代表明朗、愉快、高贵、希望 绿色代表新鲜、平静、和平、柔和、安逸、青春 蓝色代表深远、永恒、沉静、理智、诚实、寒冷 紫色代表优雅、高贵、魅力、自傲 白色代表纯洁、纯真、朴素、神圣、明快 灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞 灰色是色彩中最被动的颜色.受有彩色影响极大,靠邻近的色彩获得自己的生命.近冷暖,近暖则冷.最有平静感（中性）,是视觉中最安静的色彩.有很强的调和对比的作用. 黑色代表崇高、坚实、严肃、刚健、粗莽 黑与白:非常对立而又有共性,是色彩最后的抽象.能够用来
12、表达富有哲理性的东西.,色彩与人的心理感觉，一般情况下，各种色彩给人的感觉是,home,上一页,下一页,3. 网站风格设计, 使用单色 尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。 使用邻近色 所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。,(1) 网页色彩的搭配,上一页,下一页, 使用对比色 对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀
13、，可以起到画龙点睛的作用。 背景色的使用 背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。,3. 网站风格设计,(1) 网页色彩的搭配,上一页,下一页,3. 网站风格设计,“T”结构布局 所谓“T”结构:就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母“T”,所以我们称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。 优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。 缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。,(2)确定
14、网站的版面设计,上一页,下一页,“口”型布局 所谓“口”结构：就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。也有将四边空出，只用中间的窗口型设计。 优点是充分利用 版面，信息量大 缺点是页面拥挤， 不够灵活。,3. 网站风格设计,(2)确定网站的版面设计,上一页,下一页,对称对比布局 所谓“对称对比”结构：顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。 优点是视觉冲击力强 缺点是将两部分有机的结合比较困难。,3. 网站风格设计,(2)确定网站的版面设计,上一页,下一页,4.POP布局（自由布局） 所谓“POP布局”结构： POP
15、引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点。 优点漂亮吸引人。 缺点就是速度慢。,3. 网站风格设计,(2)确定网站的版面设计,home,上一页,4. 确定网站首页的创意设计,首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页设计的“功力”了。 所以，首页的设计和制作是绝对要重视和花心思的。首页的制作风格也决定了整个网站将要延续的风格。一般首页设计和制作占整个制作时间相当大的比重。,“Cover sells book”,下一页,4.
16、确定网站首页的创意设计,1、书籍封面式首页,有些大型网站往往有一个书籍封面式的首页，上面只有一个“进入”的链接，点击之后才可进入到网站。 这种首页设计精美、考究。,home,上一页,下一页,4. 确定网站首页的创意设计,2、期刊杂志式首页,与书刊封面式首页相似，但在首页上有网站全部内容的目录索引，图文并茂，看上去就像期刊杂志的封面。 这种首页漂亮、又使网站的主要内容一目了然，是一种值得推荐的形式。,上一页,下一页,4. 确定网站首页的创意设计,3、报纸式首页,采用报纸式的首页设计，将栏目索引、功能模块、具体内容一并显示在首页，看上去就像报纸的头版一样。 这种首页，多用于电子商务网站、搜索引擎网站和新闻信息网站，速度快、操作简便。,home,上一页,网页代码与渲染,IE查看源文件，文本文档里面的文字就是网页组成部分，HTML代码，这些代码说明了标题，图片，文字，插件都安放在哪里，浏览器从远程服务器或本地磁盘读取这些
