网页设计与制作第一章 概述.ppt

《网页设计与制作第一章 概述.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:/ 或者：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”形布局。这是网页设计中用的最广泛的一种布局方式。 优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。 缺点是规矩呆板，如果细节色彩上不注意，很容易让人

14、“看之无味“。,(2)确定网站的版面设计,上一页,下一页,“口”型布局 所谓“口”结构：就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。也有将四边空出，只用中间的窗口型设计。 优点是充分利用 版面，信息量大 缺点是页面拥挤， 不够灵活。,3. 网站风格设计,(2)确定网站的版面设计,上一页,下一页,对称对比布局 所谓“对称对比”结构：顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。 优点是视觉冲击力强 缺点是将两部分有机的结合比较困难。,3. 网站风格设计,(2)确定网站的版面设计,上一页,下一页,4.POP布局（自由布局） 所谓“

15、POP布局”结构： POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点。 优点漂亮吸引人。 缺点就是速度慢。,3. 网站风格设计,(2)确定网站的版面设计,home,上一页,4. 确定网站首页的创意设计,首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页设计的“功力”了。 所以，首页的设计和制作是绝对要重视和花心思的。首页的制作风格也决定了整个网站将要延续的风格。一般首页设计和制作占整个制作时间相当大的比重。,“Cover sells

16、book”,下一页,4. 确定网站首页的创意设计,1、书籍封面式首页,有些大型网站往往有一个书籍封面式的首页，上面只有一个“进入”的链接，点击之后才可进入到网站。 这种首页设计精美、考究。,home,上一页,下一页,4. 确定网站首页的创意设计,2、期刊杂志式首页,与书刊封面式首页相似，但在首页上有网站全部内容的目录索引，图文并茂，看上去就像期刊杂志的封面。 这种首页漂亮、又使网站的主要内容一目了然，是一种值得推荐的形式。,上一页,下一页,4. 确定网站首页的创意设计,3、报纸式首页,采用报纸式的首页设计，将栏目索引、功能模块、具体内容一并显示在首页，看上去就像报纸的头版一样。 这种首页，多用

17、于电子商务网站、搜索引擎网站和新闻信息网站，速度快、操作简便。,home,上一页,网页代码与渲染,IE查看源文件，文本文档里面的文字就是网页组成部分，HTML代码，这些代码说明了标题，图片，文字，插件都安放在哪里，浏览器从远程服务器或本地磁盘读取这些代码，并根据代码上的标记，将其显示成为一个网页，这个过程，叫做渲染。 浏览器显示的所有网页都有代码 “该系统无法显示” About blank 空白页,2 Dreamweaver MX基础知识,2.1 Dreamweaver MX的新功能 2.2 Dreamweaver MX的安装、启动和卸 载 2.3 Dreamweaver MX的编辑环境,ho

18、me,2.3 Dreamweaver MX的编辑环境,1. Dreamweaver MX 工作区布局 2. Dreamweaver MX 窗口简介 (1) 标题栏 (2) 菜单栏 文件菜单 编辑菜单 查看菜单 插入菜单 修改菜单 文本菜单 命令菜单 站点菜单 窗口菜单 帮助菜单 (3) 插入栏 (4) 文档工具栏 (5) 文档窗口 (6) 状态栏 (7) 属性面板 (8) 面板组,home,3 在网页中添加对象,3.1 对站点及文档的操作 3.2 在网页中编辑文本 3.3 在网页中使用图像 3.4 在网页中使用表格 3.5 在网页中添加超链接 3.6 网页中使用框架,home,3.1 对站点及

19、文档的操作,一、新建站点 “站点”“管理站点” “新建” “站点” 按提示操作 二、使用“站点面板”管理站点 “文件面板” “文件”选项卡 “本地视图”,下一页,3.1 对站点及文档的操作,（1）新建网页 “文件”-“新建”=“创建” 注意：首页的名称一般为index.htm、index.html、default.htm、default.html （2）保存网页文件 “文件”“保存” （3）另存网页文件 “文件”“另存为” （4）关闭当前打开的网页文件 “文件”“关闭”,home,上一页,3.2 在网页中编辑文本,1、直接输入文本 2、对文字进行修饰 选中文字在属性面板中进行设置 3、注意事项

20、 如果要输入空格，请将输入法设为中文并且为全角状态 如果要自己手动换行请用Shift+回车 4、删除文本，直接删除即可 5、特效字的设置,home,3.3 在网页中使用图像,1、插入图片 “插入” “图片” 选择图片“确认” 2、给网页设置背景图像 “修改”“页面属性” 3、修改图片 选中图片在属性中面板进行设置 4、删除图片 选中图片按Delete 注意：图片如果没有在系统默认的文件夹下面系统会提示您将其放入相应的文件夹中。,home,3.4 在网页中使用表格,1、创建表格 “插入”“表格” 2、选择表格 (1) 选择整个表格 “修改”“表格”“选择表格” (2) 选择单元格 (3) 特殊方

21、法选定表格 3、修改表格 选中表格在属性面板中进行设置 4、删除表格 选中表格按Delete,home,3.5 在网页中添加超链接,一、链接的目标 1、如果是Email地址，则在“链接”的文本框中输入： mailto: 2、如果是网址，则在“链接”的文本框中直接输入网址 3、如果是自己的文档，则单击“链接”旁边的文件夹图 标，直接选择。 4、如果是文件，则单击“链接”旁边的文件夹图标，直 接选择。 5、如果输入的是#，则表示目标为本页 6、如果是锚点则先输入#然后加上锚点的名字,下一页,3.5 在网页中添加超链接,二、链接的对象 1、文本 选中文本确定目标后使用刚才所讲方法 2、图像 选中图像

22、确定目标后使用刚才所讲方法 3、图像热区 选中图像建立图像热区确定目标后使用刚才所讲方法,home,上一页,3.6 网页中使用框架,框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的 HTML 文件。 框架集是 HTML 文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的地址。 框架不是文件，在框架中的文件是构成框架的一部分，但该文件实际上并不是框架的一部分。,下一页,3.6 网页中使用框架,要确保框架集在浏览器中正确显示，执 行以下操作： (1) 创建框架集并指定要在每个框架中显示的 文档。 (2) 保存将要在框架

23、中显示的每个文件。 (3) 确保在属性面板中为所有链接设置了“目 标”属性，以便链接的内容显示在正确区域中。,上一页,下一页,3.6 网页中使用框架,1、创建框架或框架集 “文件”“新建” “常规”选项卡 “框架集” 2、编辑框架集 框架边框在文档窗口的设计视图中可见，执行以下操作： “查看”“可视化助理”“框架边框” 将一个框架拆分成几个更小的框架，执行以下操作： (1) 要拆分插入点所在的框架：从“修改”“框架集”子菜单选择拆分项。 (2) 要以垂直或水平方式拆分一个框架或一组框架，将框架边框从设计视图的边缘拖入设计视图的中间。 (3) 要使用不在设计视图边缘的框架边框拆分一个框架，在按住

24、 Alt 键的同时拖动框架边框。 (4) 要将一个框架拆分成四个框架，将框架边框从设计视图一角拖入框架的中间。 3、删除框架 将边框框架拖离页面或拖到父框架的边框上。,home,上一页,4 在网页中使用行为和层,4.1 使用行为 4.2 网页中层的应用 4.3 利用层和行为制作下拉菜单,home,4.1 使用行为,行为是事件和由该事件触发的动作的组合。 事件是在浏览器上生成的 。 动作是由预先编写的 JavaScript 代码组成的，这些代码执行特定的任务。 将行为附加到网页元素上之后，只要对该元素发生了所指定的事件，浏览器就会调用与该事件关联的动作。,下一页,4.1 使用行为,打开“行为面板

25、” “窗口”“行为” “行为面板”的选项 常用事件说明 为网页元素附加行为的方法如下： 在网页上选择一个元素 “窗口”“行为” 单击动作按钮，选择动作 设定动作的参数，单击“确定” 对该动作，选择合适的触发事件,上一页,下一页,4.1 使用行为,更改行为 打开“行为面板”，后在以下选项中选择： 编辑动作的参数 在行为列表双击该行为，在弹出的对话框中的更改参数后，单击“确定”按钮。 更改给定事件的多个动作的顺序 选择某个动作后，单击增加或降低事件值按钮。 删除某个行为 选中该行为后，单击删除按钮或按Delete键。,home,上一页,4.2 网页中层的应用,在网页中插入层 “插入面板”“常用”选

26、项卡 “描绘层”按钮在编辑窗口上拖动，即可创建一个层 。 打开“层面板” “窗口”“其他”“层” 修改层的属性 选中层在属性面板中进行设置 向层添加内容 层转换为表格,home,4.3 利用层和行为制作下拉菜单,1. 添加文字与图层 2. 将刚才建立的图层的可见属性设置为“隐藏” 3. 添加行为,home,5 在网页中使用模板,5.1 关于Dreamweaver MX 模板概述 5.2 创建新模板 5.3 模板可编辑区域的操作 5.4 模板的应用 5.5 管理模板,home,5.1 关于Dreamweaver MX 模板概述,所谓模板，是指一种特殊的文档，提供了一种建立同一类型网页基本框架的方

27、法。 更新应用的模板后，文档中不可编辑的区域就会自动更新，继续同模板保持一致。 锁定区：模板中不能编辑的区域。 可编辑区：模板中可以编辑的区域。,home,5.2 创建新模板,将现有文档存为模板 打开现有文档“文件”“另存为模板” 新建空白模板 “文件”“新建” “常规”选项“类别”列表 “模板页” “HTML模板” “创建”,home,5.3 模板可编辑区域的操作,创建可编辑区域 “插入” “常用” “模板” “可编辑区域”。 删除可编辑区域 “修改” “模板”“删除模板标记”。,home,5.4 模板的应用,利用模板创建新文件 “文件”“新建” “模板” “模板用于”列表 “创建”按钮。

28、更新基于模板的文档,home,5.5 管理模板,删除模板文件 重命名模板,home,6 网站制作实例,1. 主题：网站制作 2. 栏目：网站主题选择、网站结构设计（栏目和版块、目录结构、链接结构设计）、网站的风格设计（整体风格、首页风格设计）、优秀站点赏析、最新更新、交互栏目。,下一页,6 网站制作实例,3. 目录结构,上一页,下一页,4. 链接结构：非线性链接结构， 增加一个栏目，显示类似下面的信 “您现在的位置是：首页-网站结构设计-目录结构设计” 并在相应位置上添加链接。 5. 网站颜色：拟采用白色和桔黄色。,上一页,下一页,6 网站制作实例,6 网站制作实例,6. 网站结构：“T型结构”,上一页,下一页,6 网站制作实例,7. 首页设计：书籍封面式,上一页,下一页,6 网站制作实例,1. 制作本地站点 2. 制作首页 3. 制作模板,home,上一页,