网页设计制做图文教程

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
返回
本章要点
设置网页属性
页面布局
5
使用框架布局
层的使用 使用CSS
CSS属性
返回
6
网页标题
如果文档工具栏没有显示,使用菜单“查看”→“工 具”→“文档”可打开其显示。
返回
页面设置
• • • • • 1.外观 2.链接 3.标题 4.标题/编码 5.跟踪图像
7
返回
文件头设置
1.META
返回
CSS的作用
54
(1)将格式和结构分离
(2)更容易控制页面的布局 (3)可以制作出体积更小下载更快的网页 (4)可以更快更容易地维护及更新大量的网页
(5)良好的浏览器兼容性
返回
• • • • • • • • •
编辑——首选参数——常规——使用CSS 实例1 第一段文字大小24,颜色红色。 第2段文字设置为大小12,颜色绿色,加 粗。 选中第3段文字,大小style1 选中第4段文字,大小style2 对style1进行重命名,名称为redbig 试删除一个样式 选中一个样式,将其加上背景。
现有层的嵌套层,如果不按住[Alt]键绘制的是连个
重叠的层。 在层面板中按住[Ctrl]键将一个层拖动到层列表的
另一个层上,可将其变为后者的子层。
返回
层与表格的互相转换
1. 将层转换成表格
选中要转换的层,使用菜单“修改”→“转
换”→“层到表格”打开转换层为表格对话框。
50
2.将表格转换成层
选中要转换为层的表格,使用菜单“修
返回
框架与框架集的概念
• 用来自百度文库架布局网页时有如下的技巧和规则:
• • 创建好框架或框架集后可对其属性进行设置。 每个框架就是不同的HTML网页,我们需要
26
分别保存每个框架文件和框架集文件。
• 确保文件中的每个链接都正确。
返回
使用框架布局
框架集网页
1.创建一个新的框架集网页
创建框架网页前先要让框架边框显示。在“文档” 工具栏的最右边单击视图选项按钮 在弹出的菜单中选择“可视化助理”→“框架边 框”,使得框架边框被选中。
32
框架“属性”面板中的基本相同,不同的
是在“行”或“列”文本框中可设置框架 的行或列的宽度,在“单位”下拉列表框 中选择单位后即可输入所需数值。
返回
框架链接的目标
1.设置网页元素的链接目标
_blank:打开一个新窗口显示目标网页。 _parent:目标网页的内容在父框架窗口中显示。 _self:目标网页的内容在当前所在框架窗口中显示。
返回
52
使用CSS
CSS基础
1.什么是CSS
CSS(Cascading Style sheet)是1996年出现的有关 网页制作的技术,中文叫做级联风格页或层叠样式表。 使用CSS定义的网页风格可以控制HTML语言标志的一 些诸如字体、边框、颜色与背景等属性,也可以通过定
53
义外部风格文件实现整个网站页面风格的统一。
改”→“转换”→“表格到层”打开转换表格为层 对话框。
返回
使用层实现图文混排1
使光标出现在编辑区中,移动鼠标指针到“ 插入”面板的“常用”选项卡中,单击描绘层 按钮。在网页编辑区中拖动鼠标,画出一个区 域,该区域即为插入层的大小。
注意,每插 入一个新层,在 网页顶端就会增 加一个层标记,
51
返回
使用层实现图文混排2
返回
55
56
• • • •
CSS代码 将试图切换到代码状态。 认识“CSS样式”面板 选择“窗口/CSS样式”命令可在浮动面板 组打开“CSS样式”面板
返回
新建样式
1.新建样式
(1)在属性面板样式的样式菜单中选择“管理样式”,
57
在打开的编辑样式表对话框中单击“新建”按钮。
(2)使用菜单“文本”“CSS样式”“新建”。 (3)使用菜单“文本”“CSS样式”“管理样式”,在 打开的编辑样式表对话框中单击“新建”按钮。 (4)使用菜单“窗口”“CSS样式”打开“设计”面板组 中的“CSS样式”面板,单击下面的新建CSS样式按钮 (5)在编辑窗口中单击右键,在弹出的菜单中选择 “CSS样式”下的“管理样式”或“新建”。
41
返回
2.多个层的选择
• 选择多个层可按住Shift键后依次在层中或 层边框上单击,也可按住Shift键后依次在 “层”面板中单击层的名称。
42
返回
层的拖动
• 选择需移动的层,将光标移到层边框上, 按住鼠标左键将其拖动到需要的位置后释 放鼠标即可。
43
返回
层的对齐
• 在设计网页过程中经常需要将层对齐。对 齐层的操作比较简单,选择需对齐的层, 选择“修改/对齐”菜单中的相应子命令即 可。层的对齐有左对齐、右对齐、对齐上 缘、对齐下缘几种方式。
设置框架属性
设置框架集属性
30
返回
设置框架属性
“框架名称”文本框
“源文件”文本框
31
“滚动”下拉列表框
复选框 “边框”下拉列表框 “边框颜色”下拉列表框 “边界宽度”文本框 “边界高度”文本框
返回
设置框架集属性
选择需设置属性的框架集。
框架集“属性”面板中各设置参数含义和
META设置自定义的一组网页属性的描述。
8
2.关键字
关键字设置网页网站的一组关键字,许多搜索引擎和网站关 联性统计是通过关键字搜索网页的。
3.描述
设置对网页的一些描述,一般是网页内容的概述,供其它 开发者参考。 返回
文件头设置
4.刷新
刷新定义网也调入后延迟一段时间的动作
9
5.基础
设置网页的基准地址
返回
58
重定义标签的外观 新建样式——选择器类型——标签 使用类定义样式 新建CSS样式——选择器类型——类 使用伪类定义超级链接的样式 新建CSS样式——选择器类型——高级 a:link、a:visited、a:hover、a:active
34
返回
35
返回
层的使用
在网页中插入层
1.新建一个层
(1)打开要创建层的网页。 (2)将“插入”工具栏切换到“布局”模式。 (3)单击描绘层按钮 鼠标移动到编辑窗口时变成十字形状,可以在 网页中的任意位置拖动绘制一个层的边框。 (4)在层的边框中可以插入各种网页元素,如文 字、图片、表格等。
返回
返回
使用扩展模式布局
在工具栏上单击扩展表格模式按钮,既可切换到 “扩展表格模式” 。
扩展模式下并不是所见即所得的效果,最好不要在 单元格中添加内容,只进行页面设计操作。
21
返回
使用布局模式布局
用表格布局的页面,往往给人一种过于整齐的排列 效果,而使用“布局模式”,则可以是网页中的元素快 速、灵活地定位。 在“插入”工具栏单击“布局”按钮,进入布局模 式。
39
返回
层的选择
• 要对层进行操作和设置需先将其选择,单 个层和多个层的选择方法不同。
40
返回
1.单个层的选择
• 选择单个层有如下几种方法:
• • • • 单击所需层的边框。 在“层”面板中单击所需层的名称。 按住Shift+Ctrl键在所需层中单击。 选择层后,在“层”面板中会以反白方式显示该 层名称。
1.确定显示分辨率
(1)T型结构布局
2.版面布局的模式
(2)口型布局
(3)三型布局
(4)对称对比布局 (5)POP布局 返回
画出网页布局草图
标题 图片栏
17
链接文 字区
主要内容区
网站版权信息区
返回
表格布局
1个实例
使用表格对课本74页的网页进行布局。
18
返回
操作步骤
• (1) 插入一个3行1列的表格a。a 760×420 边框为0,填充、间距为0,对 齐方式居中。 • (2) 在表格a的第3行插入1条水平线, 宽度为70%。居中。文字 • (3) 在表格a的第1行中插入1个2行1列 的表格b。宽度100%。其余0 • (4) 在表格b的第1行插入一个1行2列 的表格c。宽度100%。
22
返回
使用布局模式布局
绘制布局表格
绘制布局单元格
23
返回
使用框架布局
一个实例:
24
返回
框架与框架集的概念
25
• 单个框架是指在网页上定义的一个区域, 而框架集则记录了同一网页上多个框架的 布局、链接和属性信息。 • 利用框架可以把浏览器窗口划分为多个区 域,每个区域可以添加任意网页元素,也 可分别显示不同的网页。 • 框架集与框架之间的关系是包含与被包含 的关系,多个框架就组成了框架集,框架 集包含了框架1、框架2和框架3共3个框架。
44
返回
层的大小调整
• 在网页制作过程中,通常创建的层大小都 不符合要求,需对其进行大小的调整。单 个层和多个层调整大小的方法不相同。
45
返回
单个层的大小调整
46
• 调整单个层大小只需进行如下任一操作即可: • 选择层,在“属性”面板的“宽”、“高”文本 框中输入所需的宽度和高度值,再按Enter键。 • 将光标移至层的边缘,将其拖动到所需大小后释 放鼠标。 • 按住Ctrl键再按键盘上的方向键,可以移动层的 右边框和下边框,每次调整1个像素的大小;按 住Shift+Ctrl键的同时再按键盘上的方向键可每次 调整10个像素的大小。
设置层的属性
在网页中的层的边框上单击可选中这个层,设
48
置其属性。
拖动边框上的8个控制点可改变层的大小。将鼠标 放在层边框上除控制点的其他位置,此时鼠标变成十 字箭头形状,拖动鼠标可移动层的位置。
返回
层的叠加和嵌套
1.层的叠加
使用菜单“窗口”→“层”打开层面板组 。
49
2.层的嵌套
在一个已有的层中描绘新层时按住[Alt]键可绘制
27
返回
28
创建一个新的框架集网页的方法
保存设置框架集 编辑框架结构
返回
父框架和子框架
该图的框架就是先分成上下框架,再把下框架分成左右 框架。一般把下框架称为左右框架的父框架,则左右框架 是下框架的子框架。
29
右下框架占最大的区域,用来显示主要的网页内容,称 为主框架。
返回
设置框架与框架集的属性
返回
19
20
• (5) 在表格b的第2行插入一个1行5列的表格d。 宽度100%。 • (6) 在表格a的第2行插入一个1行2列的表格e。 宽度100%。 • (7) 在表格e的第1列插入一个2行1列的表格f。 宽度100%。 • (8) 在表格e的第2列插入一个2行1列的表格g。 宽度100%。 • (9)在表格g的第2行插入一个1行3列的表格h。 宽度100%。
重复上述操作,再次插入两个新层。这样 在该单元格中共插入三个层,我们将图片移到 在左上方的层中,文字移到右上方和下面的层 中。 单击该标记可以选中其所对应的层。单击层 的外围框线,选中层。将鼠标指针移动到框线 上,拖动鼠标,更改层的大小为图像大小。 调整文字的字 号和字体 ,以 及层的位置, 实现图文混排 。
36
层的基本操作
• 对层可进行选择、移动、调整大小和对齐 等操作,这些操作大多数都可在“层”面 板中进行。
37
返回
层的基本操作
• • • • • • 显示“层”面板 层的选择 层的拖动 层的对齐 层的大小调整 应用举例——利用层布局页面
38
返回
显示“层”面板
• 选择“窗口/层”命令或按F2键显示“层” 面板,“层”面板用于对层进行管理和操 作。 • 当前网页中的层都会显示在“层”面板的 列表中,嵌套层以树状结构显示。
33
_top:目标网页的内容在最顶层框架窗口中显示。
2.设置网页的缺省显示区域 使用菜单“插入”“HTML”“文件头标签”“基
础”,打开“基础”对话框,在目标中可选择此网页 中超链接的默认显示窗口。Href中设置默认查找的网 络路径。
返回
一个实例
利用框架为“书香盈袖”网页布局页面,
并为其添加网页元素。
返回
多个层的大小调整
47
• 选择需调整大小的多个层,然后选择“修 改/对齐”菜单中的“设成宽度相同”或 “设成高度相同”命令,则所有选择的层 将设置为最后选择层的宽度或高度,也可 在“属性”面板的“宽”、“高”文本框 中输入所需的宽度和高度值,再按Enter键, 选择的所有层将调整为设定的大小。
返回
页面设计
南海学院计算机系制作
网页的风格1
2
“搜狐”的主页的内容很丰富,色彩鲜艳并有 许多大幅广告和浮动广告栏。
返回
网页的风格2
3
微软中国的主页,内容比较专一,内容非 常有条理,栏目突出,没有凌乱的感觉。
返回
网页的风格3
4
“黑白音乐” 是一个个人主页,它看起来 更简单,色彩也不够丰富,但感觉非常清新。
6.链接
链接用于设置需要链接的CSS等外部文件的地址和类型。
返回
网页布局实例1
10
返回
网页布局实例2
11
返回
网页布局实例3
12
标题正文型结构的顶端是网站标识和标题 ,下面是网页正文。内容非常简单。
返回
网页布局实例4
13
返回
网页布局实例5
14
返回
网页布局实例6
15
返回
16
网页的版面布局
相关文档
最新文档