当前位置：文档之家 › 【课件-计算机基础教学】_第6章 Dreamweaver CS6 网页制作_

【课件-计算机基础教学】_第6章 Dreamweaver CS6 网页制作_

  • 格式：pdf
  • 大小：3.31 MB
  • 文档页数：91

下载文档原格式

  / 91

合集下载

网页设计与制作Dreamweaver CS6标准教-ppt课件-04

网页设计与制作Dreamweaver CS6标准教-ppt课件-04


如果网页中有的图像不能正常显示（如图像 源文件路径错误或浏览器图像显示被关闭等） 就会导致浏览者看不到图像。使用图像【属 性】面板中的【替换】文本框，可以给看不 到的图像设置说明性文字。
图像占位符是指在将最终图像插入到网页中之前所使用的 替代图像，以便在不确定图像时对网页进行布局。图像占 位符可以设置不同尺寸、颜色和文字来替代图像。 插入图像占位符的步骤如下。 将光标置于要插入图像占位符的位置。 单击菜单【插入】|【图像对象】|【图像占位符】，打开 【图像占位符】对话框。 输入名称、宽度、高度、颜色等属性值，单击【确定】按 钮，插入图像占位符，通过适当调整，使其满足设计需求。 当需要插入真正的图片时，只需双击该位置的图形占位符， 在【选择图像源文件】对话框中找到并选择需要的图像，单 击【确定】按钮完成插入。



网站中的图像必须放在站点文件夹内才能在网 页中正确显示，所以在建立网站时要在站点文 件夹内建立一个专门存放该站点图像的文件夹， 通常命名为“images”，然后将网站所需的 图像都放置其中。
在Dreamweaver中，可以通过以下三种方法在网页 中插入图像。 （1）选择菜单【插入】|【图像】，在【选择图像源文 件】对话框中找到并选择所需的图像，单击【确定】按 钮完成图像插入。 （2）选择【插入】面板中【常用】选项卡，单击【图 像】按钮 上的黑色三角形，在下拉菜单中选择“图像” 选项，在【选择图像源文件】对话框中找到并选择所需 的图像，单击【确定】按钮完成图像插入。 （3）打开【文件】面板，展开显示图像文件夹中的所 有文件，在需要插入的图像名称上按住鼠标左键拖曳到 【文档】窗口的相应位置，松开鼠标，完成图像插入。




案例学习目标：学习在网页中使用插入插件方 式插入视频和背景音乐。 案例知识要点：使用【插入】面板的【媒体】| 【插件】按钮插入多媒体元素。 素材所在位置：光盘/案例素材/ch04/课堂案 例-瑜伽会所。 案例效果如图4-36所示。

计算机应用基础(等级考试版·Windows 7平台)(第三版)课件第6章Dreamweaver CS6

计算机应用基础(等级考试版·Windows 7平台)(第三版)课件第6章Dreamweaver CS6

在计算机F盘中建立文件夹website
“文件”面板
“管理站点”对话框
“站点设置对象”对话框
“选择根文件夹”对话框
6.2.2 站点基本操作
1．编辑站点 2．删除站点 3．创建和管理文件
6.2.3 网页基本操作
1．创建网页
2．修改网页属性
3．打开网页
打开网页的方法有很多，最简单的方法就是在网站“文件夹”视图中直
6.6 发 布 站 点
6.6.1 检查超链接
选择“链接”命令
6.6.2 站点的发布
“管理站点”命令
(3) 单击“确定”按钮后，页面如图6-21所示。 (4) 直接用鼠标拖动框架的边框可以调整框架的宽度和高度。 (5) 框架创建好后，即可在每个框架页面内添加内容了，编辑框架页面与编
辑普通页面类似
6.3.2 保存框架网页
选择“文件”→“保存全部”命令，会打开“另存为”对话框，如图 6-22所示，选择保存路径，输入文件名，单击“保存”按钮，该框 架网页即被保存。
还可以把网页保存为模板或预先处理的HTML文件。
6.3 框架和组件
6.3.1 创建框架网页
操作步骤如下。 (1) 在菜单栏中选择“插入”菜单，然后在HTML菜单中选择“框架”
命令，打开“框架”菜单列表，如图6-19所示。
(2) “框架”菜单列表中选择需要的框架模板，将打开“框架标签辅助功能 属性”对话框，如图6-20所示，可为框架设定一标题
接双击要打开的网页文件。例如，要编辑主页，只要双击名为index.htm的
文件，就可在Dreamweaver CS6的编辑窗口中编辑此页面了
4．预览网页
5．保存网页
Dreamweaver CS6可以把网页直接保存在本地磁盘或局域网中的某

Dreamweaver CS6入门课件

Dreamweaver CS6入门课件

时代码”视图显示浏览器用于执行该页面的实际代码，当
在“实时”视图中与该页面进行交互时，它可以动态变化。 第 3
“实时代码”视图不可编辑。
页
1 DREAMWEAVER的工作界面
精
多屏幕：借助“多屏幕预览”面板，为智能手机、平板电脑和 台式机进行设计。使用媒体查询支持,为各种不同设备设计样式 并将呈现内容可视化。（查看页面，就如同页面在不同尺寸的 屏幕中显示。）
“文件”等面板独立显示，适合对网页的调试和修改。
第 10
页
精
2 站点的搭建与管理
Dreamweaver的站点是一种管理网站中所有相关联 文件的工具。通过站点可以对网站的相关页面及各 类素材进行统一管理，还可以以使用站点管理实现 将文件上传到网页服务器，测试网站。
站点简单的说就是一个文件夹。在这个文件夹里包 含了网站中所有用到的文件。我们通过这个文件夹 （站点），对我们的网站进行管理，有次序，一目 了然。
这些面板集中了网页编辑和站点管理中常用的工具 按钮。这些面板被集中到面板组中，每个面板都可 以展开或折叠，并且可以和其他面板一起或取消停 靠。
第6 页
精
1 DREAMWEAVER的工作界面
第7 页
1 DREAMWEAVER的工作界面
文件面板：
精
没有创建站点的状态
创建站点哟后的状态
第8 页
第 11 页
2.1 创建本地站点
精
在制作页面之前，首先要在Dreamweaver中创建站点。 一开始只需制作本地站点，这个位于本地硬盘中的文件夹 被当成一个远程站点的镜像，完成本地站点的制作后，即 可将本地站点上传至远端服务器，作为远程站点。
的不同视图之间快速切换。工具栏中还包含一些与 查看文档、在本地和远程站点间传输文档有关的常 用命令和选项。

中文版DreamweaverCS6网页制作实用教程第六章使用层与Spry布局网页

中文版DreamweaverCS6网页制作实用教程第六章使用层与Spry布局网页

(2) 层效果
4. 设置对齐层
对齐层主要是对齐多个层。选中多个层后，选择【修改】|【排列顺序】命令，在子菜单中 选择对齐方式。如果选择【修改】|【排列顺序】|【设成高度相同】命令或【修改】|【排列顺 序】|【设成宽度相同】命令，将以最后一个选中的层的大小为标准，调整其他层的大小并对齐 层，如图 6-11 所示。
图 6-8 设置容器的文本
图 6-9 【设置容器的文本】对话框
3. 设置层可见性
在处理文档时，可以在【AP 元素】面板中手动设置层的可见性。以图 6-7 右图所示的 3 个层为例，单击【AP 元素】面板中的 按钮，如果显示为 图标，层为可见；当显示为 图 标，隐藏层的显示，如图 6-10 所示。
(1) 设置显示与隐藏层 图 6-10 设置层的可见性
-114-
(1) 输入层的叠堆顺序数值 图 6-7 调整层的顺序
(2) 层顺序修改效果
2. 设置层文本 在创建层的过程中，用户可以 章 使用层与 Spry 布局网页
【例 6-2】在 Dreamweaver CS6 中设置层文本。 (1) 选中要设置层文本的层，选择【窗口】|【行为】命令，打开【行为】面板。 (2) 单击【行为】面板上的 按钮，在弹出的菜单中选择【设置文本】|【设置容器的文本】 命令，如图 6-8 所示，打开【设置容器的文本】对话框。 (3) 在【设置容器的文本】对话框的【层】下拉列表中可以选择层的名称，如图 6-9 所示， 在【新建 HTML】文本框中可以输入文本内容，单击【确定】按钮即可设置层文本。
6 .2 层的基本操作
在 Dreamweaver 中选择【窗口】|【AP 元素】命令，打开【AP 元素】面板。在该面板中显 示了网页文档中所有插入的层，如图 6-3 所示，用户可以通过它管理网页文档中所有插入的层 元素。

Dreamweaver cs6入门与提高实例教程课件Dreamweaver cs6入门与提高实例教程课件第6章HTML与CSS基础

Dreamweaver cs6入门与提高实例教程课件Dreamweaver cs6入门与提高实例教程课件第6章HTML与CSS基础
8．<marquee>字幕标签
6.4 CSS样式
在网页制作过程中，可能经常需要在多个文档中应用一些相同的、复杂的段 落或字符特效，并且还要嵌入某种样式的图像效果。使用CSS样式可以轻松解决 这个问题。
CSS是一组能控制文档范围内文本外观的格式化属性集合，是一个包含了一 些CSS标签，以.css为文件名后缀的文本文件。它是一种设计网页样式的工具， 在标准的网页设计中负责网页内容(XHTML)的表现。与传统的HTML样式相比， CSS样式有以下特点： 1．将格式和结构分离 2．以前所未有的能力控制页面布局 3．制作体积更小，网页下载更快 4．轻松地同时更新多个网页 5．良好的兼容性
<noframe>…</noframe>标签用于设置当浏览器不支持框架技术时显示的文本。通常 的做法是在此标签之间放置提示用户浏览器不支持框架的信息。 4．<iframe>标签
<iframe > ... </iframe> 标签用于在网页中设置浮动帧网页。常用的主要属性有src和 name属性。其中属性src用于设置浮动帧的初始页面的URL。name属性用于设置浮动帧窗 口的标识名称。
<meta>标签是实现元数据的主要标签，它能够提供文档的关键字、作者、描述等多种 信息，在HTML的头部可以包括任意数量的<meta>标签。 4．<link>标签
<link>标签也称作外部样式表，它是把CSS写到一个扩展名为CSS的文件中，主要用 于多个页面排版风格的统一控制，避免单个页面重复地设置CSS样式。<link>是一个非封 闭性标签，只能在<head>…</head>中使用。

中文版 Dreamweaver CS6网页设计教程 第6章

中文版 Dreamweaver CS6网页设计教程 第6章

2. 选择框架集
使用下列方法之一选择框架集：在 文档窗口中，单击框架集中任意两 个框架的边界，或者在“框架”面 板中，单击框架集的外围，如图648所示。
18
6.3.3 设置框架和框架集属性
1. 设置框架属性
选择框架后，打开框架“属性”面板，如图6-49所示。
2. 设置框架集属性
选择框架集后，打开框架集“属性”面板，如图6-50 所示。
16
6.3.1 创建框架集
1. 插入预定义框架集
Dreamweaver CS6提 供了多种预定义的框架 结构，选择“插 入”| HTML |“框架” 命令，就可以看到这些 预定义的框架结构了， 如图6-42所示。
2. 自行创建框架集
17
6.3.2 选择框架和框架集
1. 选择框架
使用下列方法之一选择框架：按住 Alt键的同时，在文档窗口中单击框 架，可选定框架：或者在框架“属 性”面板中单击框架，则选中相应 的框架，如图6-47所示。
22
6.3.7 框架应用
该实例制作一本电子书，主体是“上方及左侧嵌套”框架集， 在顶部放置标题栏，左侧框架放置导航栏(即目录)，单击链接， 在右侧框架中打开链接内容。其具体操作步骤如下。
(1) 新建HTML页面。 (2) 依次选择“插入”| HTML |“框架”|“上方及左侧嵌套”命令。 (3) 选择框架集，选择“文件”|“保存框架页”命令，保存框架集。 (4) 在顶部框架内单击鼠标，选择“文件”|“保存框架”命令，将 其保存为Frame-top.htm。 (5) 使用同样的方法，将左侧框架保存为Frame-left.htm，将右侧框 架保存为Frame-main.htm。 (6) 按住Alt键的同时，单击框架，打开其“属性”面板，在“属性” 面板上设置框架名称。Dreamweaver CS6已经为预定义框架设置了名称， 例如，mainFrame、leftFrame、topFrame，这些名称在指定链接目标时 要用到，其他属性默认，如图6-54所示。

网页设计与制作Dreamweaver CS6标准教-ppt课件-07






案例练习目标：练习设置CSS文字导航条。 案例操作要点： 1. 创建样式表文件dogclub并将所有CSS样 式存放其中。 2. 在导航条单元格中插入表格：行数列数均 为1，宽度为100%，ID标识为navi。输入导 航条文字“俱乐部介绍 会员注册 服务内容 图片展示 联系我们（中间留空格）”。



根据CSS样式所控制的网页元素不同，可以将 样式分为四种形式。 当所控制的网页元素是HTML语言中的某一个 特定的标签时，为此标签设置的CSS样式，称 为标签样式。 当把网页中或网站中若干元素归为一类，作为 一个整体来看待，为此类元素设置一个CSS样 式，称为类样式。


一个标签或元素在网站中的不同网页中，或在 一个网页中的不同位置上，外观效果不同，则 需要先为该特定标签赋予一个唯一的ID号，然 后，再为具有该ID号的标签设置样式，称此样 式为ID样式。 当设置若干个内容相同而名称不同样式时，或 者设置超级链接样式时，则可以使用复合样式。


7.5.1练习案例-航空旅游 7.5.2练习案例-狗狗俱乐部 7.5.3练习案例-鲜花店


案例练习目标：练习使用各种CSS样式。 案例操作要点： 1．打开文档index1.html，在导航条单元格 中插入表格：行数列数均为1，宽度为100%， ID标识为navi，并输入导航条文字“网站首 页 旅游计划 服务中心 联系我们（中间留空 格）”。 2．设置导航条复合样式#navi a:link， #navi a:visited属性，字体大小: 12px，颜 色为#666；设置#navi a:hover属性，颜色 为#999。

1. 2. 3. 4.
ቤተ መጻሕፍቲ ባይዱ

网页设计与制作Dreamweaver CS6标准教-ppt课件-01



3. 导航条 导航条是网站设计中最重要的元素之一，即表现了网站 的站点结构和内容分类，又方便了用户对网站的浏览。 4. 图像 Gif用于画面简单、细节信息少的图像，如背景图片，可 以减少图像文件的大小；Jpeg用于画面较为复杂、细部 信息多的图像；PNG用于有透明背景的图像。 一种是独立完整的图像，二是在Firework或Photoshop 中使用切片功能获得的图像。 5. 动画 网页设计中常用的动画有Gif动画和Flash动画。 6. 背景 使用合理能够增强页面的整体创意效果。

1. 结构布局 常用的结构布局方式包括“国”字型、拐角型、 上下框架和左右框架等类型。 2. 艺术布局 常用的平面艺术设计原则有分割、对称和平衡等。 总之，根据内容和栏目编排要求以及客户审美需 求，将各种典型结构灵活运用，将艺术设计原则 融会贯通，锐意创新，创作出结构布局合理，页 面精美的网页。

网页由三部分组成：结构（Structure）、表现 （Presentation）和行为（Behavior），相应 的技术标准由三个部分组成：结构化标准语言， CSS样式表和脚本语言。

1.3.1结构化语言 1.3.2CSS样式 1.3.3脚本语言 1.3.4ASP技术



结构化语言HTML（Hyper Text Markup Language，超文本标记语言） XHTML（eXtensible Hyper Text Markup Language，可扩展的超文本标记语言）是 HTML的升级版本。 超文本标记语言HTML5是将取代HTML4.01标 准和XHTML1.0标准的HTML标准版本。




2. RGB色彩模式和网页安全色 每种色彩都可以用红(R)、绿(G)、蓝(B)3种色彩按一 定的比例调和而成，这3种色彩被称为光的3原色 将在不同操作系统和浏览器中具有一致显示效果的颜 色定义为网络安全色，网络安全色有216种。在网页 设计软件中，任何颜色都有一个六位的十六进制编号， 如#D6D6D6，任何由00、33、66、99、CC或者FF 组合而成的颜色值，都表示一个Web安全色 3. 利用图像配色

Dreamweaver CS6网页设计与制作标准教程 (6)


6.1.6 选择表格元素
先选择表格元素，然后对其进行操作。一次可以选择整个表 格、多行或多列，也可以选择一个或多个单元格。
选择整个表格
选择整个表格有以下几种方法。
将鼠标指针放到表格的四周边缘，鼠标指针右下角出现图 标 ，单击鼠标左键即可选中整个表格。 将插入点放到表格中的任意单元格中，然后在文档窗口左下角 的标签栏中选择<table>标签 令。 在任意单元格中单击鼠标右键，在弹出的菜单中选择“表格 > 选择表格”命令。 。 将插入点放到表格中，然后选择“修改 > 表格 > 选择表格”命
粘贴单元格
将光标放到网页的适当位置，选择“编辑 > 粘贴”命令，或 按 Ctrl+V 组合键，将当前剪贴板中包含格式的表格内容粘贴到光
标所在位置。
粘贴操作的几点说明 （1）只要剪贴板的内容和选定单元格的内容兼容，选定单元 格的内容就将被替换。
（2）如果在表格外粘贴，则剪贴板中的内容将作为一个新表
表格的属性 表格的“属性”面板。
“属性”面板
单元格和行或列的属性 单元格和行或列的“属性”面板。
“属性”面板
6.1.5 在表格中插入内容
建立表格后，可以在表格中添加各种网页元素，如文本、图 像和表格等。在表格中添加元素的操作非常简单，只需根据设计要
求选定单元格，然后插入网页元素即可。一般当表格中插入内容后，
效果图
6.1.2 表格的组成
表格中包含行、列、单元格、表格标题等元素。
表格的组成
6.1.3 插入表格
要将相关数据有序地组织在一起，必须先插入表格，然后才
能有效地组织数据。
插入表格的具体操作步骤如下。 （1）在“文档”窗口中，将插入点放到合适的位置。

网页设计与制作Dreamweaver CS6标准教-ppt课件-03


页中的文字样式。 案例知识要点：使用CSS样式改变文本大小、颜 色、字体等样式。 素材所在位置：光盘/案例素材/ch03/课堂案例 -百货公司。 案例效果如图3-33所示。

Dreamweaver基于层叠样式表（CSS）对网 页进行设置，即事先定义好文本的CSS样式 再应用到文本上。定义的一个CSS样式可以 应用在多处文本上，要改变文本样式属性只 需修改CSS样式属性。
网页设计与制作 Dreamweaver CS6 标准教程

1. 页面属性 2. 文本属性 3. 项目列表和编号列表

网页页面属性主要包括网页标题、网页背景图 像和颜色、网页边距、网页默认文字大小和颜 色、超链接颜色等。可以通过菜单【修改】| 【页面属性】来进行设置和修改。



网页标题设置有两种方法。 （1）利用【页面属性】对话框 选择菜单【修改】|【页面属性】或点击文本 【属性】面板中的【页面属性】按钮。 单击【页面属性】对话框中【分类】栏中的 【标题/编码】，在【标题】文本框中输入页面 标题，如图3-22所示，单击【确定】完成设置。 （2）在文档工具栏【标题】文本框中，输入 页面标题文字完成设置。

网页背景可以填充为颜色，也可以填充为图像。更改 网页背景的操作步骤如下。 选择菜单【修改】|【页面属性】。 单击【页面属性】对话框【分类】栏中的【外观 （CSS）】，在右侧设置【背景颜色】、【背景图像】、 【重复】等选项。 【重复】选项下拉列表中，各选项含义如下。 no-repeat（不重复）：背景图像不重复。 repeat（重复）：背景图像在页面中重复。 repeat-x（重复-x）：背景图像在页面中横向重复。 repeat-y（重复-y）：背景图像在页面中纵向重复。 如果【重复】空白，默认为repeat。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
● 代码视图：在代码视图中可以查看或编辑源代码 ● 拆分视图：编辑窗口分割成上下两部分，上半部分显示源
代码，下半部分显示网页设计外观，这样可以在编辑代码 的同时观看设计效果 ● 设计视图：为可视化编辑窗口，窗口中看到的网页外观和 浏览器中看到的基本是一样的，即“所见即所得”模式 ● 实时视图：显示不可编辑的、交互式的、基于浏览器的文 件视图
2020-8-11
9
7.1.1 Dreamweaver CS6工作界面
2. 面板
●比较常用的工具面板包括插入面板、文件面板、 CSS面板、历史记录面板、属性面板等
●除属性面板外，其他面板都在Dreamweaver窗口右 侧显示，统称为面板组
● 属性面板
● 属性面板可以检查和设置当前选定页面元素的属性
与蓝色搭配显得幽静
激奋的色彩，具有富丽、辉煌、轻快、温馨、
2020-8-11
7
7.1.1 Dreamweaver CS6工作界面
单击“新建”项目组中的“HTML”，进入 Dreamweaver工作界面
文件标签
菜单栏
文档工具栏
面板组
文档窗口
标签选择器 属性面板
2020-8-11
8
7.1.1 Dreamweaver CS6工作界面
1. 主菜单
●Dreamweaver CS6的菜单共有10大类，提供了全部 的Dreamweaver命令，包括“文件”、“编辑”、 “查看”、“插入”、“修改”、“格式”、“命 令”、“站点”、“窗口”和“帮助”等
2020-8-11
5
7.1 Dreamweaver CS6 概述
7.1.1 Dreamweaver CS6工作界面 7.1.2 网页与网站设计 7.1.3 创建和管理站点
2020-8-11
6
7.1.1 Dreamweaver CS6工作界面
首次启动Dreamweaver CS6打开欢迎界面
●该界面分为“打开最近的项目”、“新建”和“主 要功能”3个选项组
第6章 Dreamweaver CS6 网页制作
《计算机基础》教学组
2
本章知识点
o 熟练掌握基本网页的制作，包括插入文本、插入 图像，文本及图像的属性设置，创建超链接
o 熟练使用表格及框架进行网页的布局 o 熟练掌握插入表单的操作及表单对象的属性设置 o 掌握AP元素及CSS样式的简单应用 o 了解建设网站的基本步骤及网页布局的基本方法
2020-8-11
3
本章内容
7.1 Dreamweaver CS6概述 7.2 创建网页文档 7.3 网页布局 7.4 设计表单 7.5 使用行为和脚本制作网页特效
2020-8-11
4
7.1 Dreamweaver CS6 概述
Dreamweaver CS6，即Dreamweaver 12.0， 是Adobe公司于2012年推出的Dreamweaver最 新版本 它支持更多的行业标准（如 HTML5和CSS3）， 能够通过自适应网格版面来创建跨平台和跨浏 览器的兼容网页，因此得到了越来越广泛的应 用
黄色 灰色 黑色 绿色
橙色 蓝色
明度最高，具有快乐、智慧、希望的个性
温和、平凡、谦让、中庸、中立和高雅
万能搭配色彩，和任何色彩搭配都只反
映搭配色彩的色彩性格
消极性色彩，具有深沉、压抑、寂静、神秘、
悲哀的效果
中性色彩，给人健康、宁静、平和、自然的 和金黄、淡白搭配可以产生优雅气氛，
感受
与黄色搭配有青春、旺盛的视觉意境，
了然
2020-8-11
16
7.1.2 网页与网 标题正文型
● 上面是标题或其它类似内容，下面是正文
● 封面型
● 主要用在一些网站的首页或进入页 ● 页面通常为一张精美的静态图像结合一些小的动画，放上几
个简单的链接或者仅是一个“进入”的链接，甚至没有任何 提示，直接在首页的图片上做链接
● 正常平衡：亦称匀称，多指上下、左右对照形式，主要强 调秩序，能达到诚实、信赖的效果
● 异常平衡：即非对照形式，此种布局能达到强调性、高注 目性的效果
● 对比：包括利用色彩、色调等技巧进行表现，也包括在内 容上进行新与旧、古与今、贫与富等的对比
● 空白：在文本周围适当地留出空白以便更容易阅读 ● 尽量用图片表达：对用语言无法表达的情感特别有效，可
● 面板组
● 面板组包括“插入”、“CSS样式”、“标签检查器”、 “文件”、“历史记录”、“框架”等面板，它们可以组 合在一起使用，也可以单独使用
● “窗口”菜单打开或关闭面板
2020-8-11
10
7.1.1 Dreamweaver CS6工作界面
3. 视图
●Dreamweaver CS6提供4种编辑视图：
以传达给浏览者更多的心理因素
2020-8-11
13
7.1.2 网页与网站设计
1. 网页布局
●页面布局类型
● 拐角型：网页设计中使用广泛的一种布局方式。页面顶部 为横条网站标志、广告条等，下方左面为主菜单，右面显 示内容的布局
2020-8-11
14
7.1.2 网页与网站设计
1. 网页布局
●页面布局类型
2020-8-11
11
7.1.2 网页与网站设计
网页是网站构成的基本元素，设计网页的第一步 是设计版面、布局网页 1. 网页布局
●网页布局就是以最适合浏览的方式，合理地安排网页 各版块的位置，使网页变得赏心悦目的过程
2020-8-11
12
7.1.2 网页与网站设计
1. 网页布局
●网页布局应遵循的原则
2020-8-11
17
7.1.2 网页与网站设计
2. 网页设计中的色彩的搭配
●色彩是树立网站形象的关键之一，好的色彩搭配会给 浏览者以强烈的视觉冲击力，从而提高浏览兴趣
●各种颜色的效果
2020-8-11
颜色
效果
白色 给人以朴实、洁白、纯真、快乐的感觉
搭配 万能配色，跟任何色彩都可以搭配
红色 激奋的色彩，给人热情、冲动、活力的感觉
● “国”字型
● 一般最上方是网站的标志、广告及导航栏，其下方的左右分 别列出一些栏目，中间是网站的主要内容，最下面是网站的 一些基本信息、联系方式、版权声明等
● 大中型网站常采用此种布局方式
2020-8-11
15
7.1.2 网页与网站设计
1. 网页布局
●页面布局类型
● 左右框架型
● 左右为两页的框架结构，一般左面是导航链接，右面是正文 ● 许多大型论坛都是这种结构，这种布局结构清晰，使人一目