网页设计与制作项目五 层的布局
网页设计与制作实用教程单元5 布局与美化网页
【教学导航】
（1）学会使用表格布局页面 （2）学会使用AP Div布局页面 （3）学会使用使用Div+CSS结构布局页面 （4）学会创建样式文件、设计页面的布局结构、定义页面的布 教学目标 局样式 （5）学会利用CSS样式美化页面元素 （6）学会插入Div标签对网页的页面进行布局 （7）学会插入或绘制AP Div，并合理地设置AP Div的属性 教学方法 任务驱动法、分组讨论法、理论实践一体化、讲练结合 课时建议 8课时（包含考核评价）
【任务5-3】使用Div+CSS布局 与美化网页 【任务描述】
（1）创建外部样式文件0503global.css，在该样 式文件中定义必要的CSS样式。 （2）创建外部样式文件0503pages.css，在该样 式文件中定义必要的CSS样式。 （3）创建网页文档0503.html，该网页主体结构 主要应用Div+CSS进行布局，局部结构应用了 定义列表、项目列表和段落结构进行布局。网 页0503.html还应用了CSS样式对文字、图片、 超链接和表单控件进行美化。 网页0503.html的浏览效果如图5-8所示。
3．创建网页文档0502.html
创建网页文档0502.html，保存在文件夹“5-2” 中，该网页主体结构主要应用AP Div、绝对定位和 相对定位进行布局，局部结构应用了Div+CSS和定 义列表、项目列表进行布局。 还应用了CSS样式对文字、图片、超链接和列 表进行美化。 该网页为左右结构，通过绝对定位方式实现左 右布局。
（1）插入Div标签page_wrapper （2）插入Div标签pages_nav （3）插入AP元素l_sidebar （4）插入AP元素r_content （5）插入多个Div标签和AP元素
《网页设计与制作》课程标准
《网页设计与制作》课程标准【课程名称】《网页设计与制作》【适用专业】中等职业学校计算机应用专业办公自动化技术1.前言1.1课程性质本课程是中等职业学校计算机应用专业的一门专业核心课程。
通过本课程的学习, 要求学生掌握网页设计的基本概念, 学会使用常用的网页设计工具和常用脚本语言, 能够设计制作常见的静态和动态网页, 具备网站的建立和维护能力。
同时通过本课程的学习, 培养学生的综合职业能力、创新精神和良好的职业道德。
1.2设计思路本课程的设计“以能力为本位、以职业实践为主线、以项目课程为主体”, 整个《网页设计与制作》课程共分为四大模块, 它们分别是: 网页基础知识、DreamWeaver的使用、HTML语言、ASP动态网页设计。
教学时各模块既有独立性, 又有关联性。
独立性是指各模块设计案例、组织教学、突出重点时应该相互独立, 学生应该一个模块一个模块地掌握其知识点；关联性是指各模块间存在相互关系, 在重难点设计上应该加以配合, 如HTML语言模块着重基本代码的熟记和编写, 对于较难编写代码的“框架”、“层”、“数据链接”等内容则放到DreamWeaver的使用模块中重点介绍。
《网页设计与制作》课程与计算机基础、Flash动画、PhotoShop图像处理、计算机网络技术、数据库等课程互相联系、互相补充。
本课程作为计算机专业的一门主干专业课程, 一般在2.3年级开设, 此时学生已经具备一定的计算机基础知识和动手能力, 能较快地掌握网页设计的各种知识, 并运用所学知识做出具有特色的网站, 使学生能够得到全面的培养, 成为社会所需专用人才。
2. 课程目标总目标：使学生掌握常用的网页设计工具, 熟练运用多种网页设计技术, 具备Web网页设计、制作及站点管理的基本知识和基本技能, 学生能够独立制作中小型的网站。
1.了解WWW、HTTP、HTML、CSS的定义、概念和作用；2.理解服务器、客户端、浏览器的概念和作用； 3.理解HTML语言中的各种文本格式、字符格式、段落设置、列表、标记的作用；4.熟练操作DreamWeaver；5.理解CSS样式表的作用和意义；6.深入理解HTML语言的各种功能和应用；7.深入理解表格、框架、表单的作用；8.深入理解层的作用；9.初步了解面向对象程序设计思想。
网页设计与制作教程第4章网页布局设计
第4章 网页布局设计
通过CSS样式表一般可以实现如下功能 ：
更加灵活地控制网页中文字的字体、颜色、大小、间 距、风格及位置。 灵活地设置一个文本块的行高、缩进，并可以为其加 入三维效果的边框。 可以方便地为网页中任何元素设置不同的背景颜色和 背景图片。 可以精确地控制网页中各元素的位置。
第4章 网页布局设计
网页设计与制作教程
第4章 网页布局设计
主
讲：
第4章 网页布局设计
网页布局涉及到网站内各网页的风格，网页上各种元 素的显示排列方式。如何方便地调整网页的布局，统 一网页的风格是网页设计者非常关心的问题 。本章将 详细讲解如何利用CSS样式表来控制网页布局。
第4章 网页布局设计
4.1 控制网页布局
版面指的是浏览器看到的一个完整的页面。因为每台 计算机显示器的分辨率不同，所以同一个页面的大小 可能出现640*480像素,800*600像素,1024*768像素等 不同尺寸。所谓布局，就是以最适合浏览的方式将图 片和文字排放在页面的不同位置。
可以为网页中的元素设置各种滤镜，从而产生诸如阴 影、辉光、模糊和透明等只有在一些图像处理软件中 才能实现的效果。 与脚本语言结合，可以使网页中的元素产生各种动态 效果。 它是采用直接格式的HTML代码书写，网页打开的速 度非常快。
第4章 网页布局设计
在HTML语言中，假如要在一段文字中把一部分文字 变成红色，需要这样书写代码： <p><font color=red>红色字体<＞font><＞p>, 而在CSS样式表中则可以简化成下面的形式： <p style=“color:red”>红色字体<＞p>。
4.2.2 应用CSS样式 在Dreamweaver中通过样式面板来应用CSS样式，主 要有新建样式、编辑已有样式、删除已有样式。是否 保存新建样式取决于样式的应用范围。CSS样式的主 要属性包括类型、背景、区块、方框、列表、定位、 扩展等。在Dreamweaver中可以很方便地设置样式的 各种属性。
网页设计与制作：使用层和框架布局页面
4. 创建嵌套层 单击对象面板上的层图标，直接拖动到父层中。 ●单击对象面板上的层图标，直接拖动到父层中。 ●层控制面板里ctrl+拖动 层控制面板里ctrl+层和框架布局页面
5. 对齐层（shift选定） 对齐层（ 选定） 选定 修改/ ●修改/对齐 6. 用标尺和栅格来对齐层 ①找到标尺 查看/标尺 标尺/显示 ● 查看 标尺 显示 ②修改标尺单位 ●右击标尺 ③弹出栅格 查看/网格 网格/显示网格 ●查看 网格 显示网格 ④栅格设置 查看/网格 网格/网格设置 ●查看 网格 网格设置
网页设计与制作
第一章 第二章 第三章 第四章 第五章 第六章 第七章 第八章 第九章 第十章 HTML语言基础 语言基础 初识Dreamweaver 初识 创建与应用表格 使用层和框架布局页面 CSS样式与模板的使用 样式与模板的使用 行为、 行为、库和资源管理 建立动态网站 Flash动画基础知识 动画基础知识 创建动画 使用Fireworks编辑网页图像 使用 编辑网页图像 2 4 3 3 3 3 3 3 3 3
1
第四章 使用层和框架布局页面
一、分层 1. 层的概念 ●层是可将网页分割成“一个个能包含任何元 层是可将网页分割成“ 素的逻辑块” 素的逻辑块”。 层的内容可重叠，位置可移动， ●层的内容可重叠，位置可移动，在不同浏览 器中由不同的标识符产生分层的特点。 器中由不同的标识符产生分层的特点。 2. 建立一个新层 对象面板/ ●对象面板/布局 3. 修改层 ①选择一个层
第四章 使用层和框架布局页面
4. 典型案例 用时间轴在网页中制作幻灯片（ ①用时间轴在网页中制作幻灯片（P112） ） ②制作框架网页（P114） 制作框架网页（ ）
第四章 使用层和框架布局页面
电子教案-《Dreamweaver网页设计与制作(第二版)》-A06-3954(示例)项目五
课程教案项目效果【任务一】布局主页 index.html——表格的基本应用所谓表格（Table）就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在XHTML语言中以<tr>标签开始，</tr>标签结束），垂直的多个单元格称为列（以<td>标签开始，</td>标签结束），如图5—1所示。
行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。
（一）插入表格Dreamweaver CS3提供了非常完善的表格编辑功能，首先介绍如何在网页文档中插入表格。
步骤 1 首先在文档页面上要插入表格的位置单击，以确定插入点位置。
步骤 2 单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格，如图所示。
下面简单介绍一下“表格”对话框中几个重要选项的意义。
●表格宽度（Width）：设置表格宽度值，否则，其宽度将随其中的内容而改变。
●在Dreamweaver中，最常使用的单位是像素和百分比。
像素使用0或大于0的整数表示；百分比是相对于浏览器而言的，使用 0 或百分比表示。
●边框粗细（Border）：是指整个表格边框的粗细，标准单位是像素。
整个表格外部的边框叫外边框，表格内部单元格周围的边框叫内边框。
●单元格边距（Cell padding）：也叫单元格填充，是指单元格内部的文本或图像与单元格边框之间的距离，标准单位是像素。
●单元格间距（Cell spacing）：是指相邻单元格之间的距离，标准单位是像素。
（二）选择表格和单元格在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。
当表格外框显示为黑色粗实线时，就表示该表格被选中，另外，还可以通过“标签选择器”选择表格。
具体做法是：在表格内部任意处单击鼠标，然后在“标签选择器”中单击对应的“<table>”标签，该表格便处于选中状态。
网页设计与制作5 网站规划和方案设计
第五单元：图层在图像设计中的应用
5.1.1 图层窗体
图层窗体可以完成大部分的图层操作任务，图层窗体如图所示。若默
认状态下没有展开图层窗体可点击菜单【窗体】|【图层】来显示窗体。
第五单元：图层在图像设计中的应用
5.1.2 图层菜单 图层菜单包括了图层的几乎所有功能，图层菜单功能可以等价为图
层窗体及在图层窗体鼠标右击出现的上下文菜单功能之和，系统图层菜单
如图所示。图层窗体选中某图层后，鼠标右击的上下文菜单如图所示。
第五单元：图层在图像设计中的应用
5.1.3 常用术语
在介绍如何使用图层之前，有一些常用的专业术语必须要掌握
1、通道：通道的概念比较复杂，实际上通道可以理解为图层中各种 单色分量的分布状态。换句话说，通道就好像从彩色图片中抽取出的单
色图片，如果抽取的是图片的红色成分，就称之为图片的“红色通道”
用菜单【图层】|【图层样式】| 【拷贝/粘贴图层样式】可以实 现同样的效果，不过后面这种方法只能用于拷贝图层的所有样式，
而不能用来拷贝某一个样式。如果你只需要复制一个样式，应该使
用拖动的方式。同样，要删除样式可以将其直接拖放到层面板下边 的垃圾桶图标上。 方法 4 ： 将样式面板中 Photoshop 预定义的样式，直接应用到 层面板中的当前图层上。 层面板左侧的 图标可以用来设置样式为可见或者不可见，如果 设置为“不可见”，样式的效果将不会显示在图片中，但是你可以 随时使其重新显示出来。
第五单元：图层在图像设计中的应用
5.2 图层样式的设置 图层样式是Photoshop中制作图片效果的重要手段之一，图层 样式可以运用于一幅图片中除背景层以外的任意一个层。如果要对背 景层使用层样式，可以在背景层上双击鼠标并为其另外命名。
网站开发的五层构架模块化设计
（ Ｈ ａ ｉ ｎ ａ ｎ Ｃ ｏ ｌ ｌ ｅ ｇ ｅ ｏ ｆ Ｖ ｏ ｃ ａ ｔ ｉ ｏ ｎ ａ ｎ ｄ Ｔ ｅ ｃ ｈ ｎ ｉ ｑ ｕ ｅ ， Ｈ ａ ｉ ｋ ｏ ｕ ， Ｈ ａ ｉ ｎ ａ ｎ ５ ７ ０ ２ １ ６ ，Ｃ ｈ ｉ ｎ ａ ）
计 算机 时代 ２ ０ １ ３ 年 第８ 期
・ １ ９ ・
网站开发 的五层构 架模块化设计★
钟 志 东 。孟 清
（ 海 南职业技 术 学 院 ，海南 海 口 ５ ７ ０ ２ １ ６ ）
摘 要 ：网站 项 目设计一般根据 项 目规模 、 安 全要 求和 团队工作 方式等分别采 用不同层 次的设 计构架 ， 常用的构架有二 层模 型和三层模 型 。文章通过 ＡＳ Ｐ ． ＮＥ Ｔ ４ ． ０ （ Ｃ ≠ ｝ ） 介绍 五层构 架模 块化 网站设 计方法 。从 系统的安全性 和技术层 面把 系 统横 向分 解为五层构 架模式 ， 再从业务 功能考虑把 系统纵 向分 块 ， 使得技 术层 次更加分 明， 模 块耦 合度更低 ， 模 块可重用
ｒｃ ａ ｈ ｉ ｔ ｅ ｃ ｔ ｕ ｒ ｅ ｆ ｏ ｒ ｗｅ ｂ ｓ ｉ ｔ ｅ ｄ ｅ ｖ ｅ ｌ ｏ ｐｍｅ ｎ ｔ ．
Ｋｅ ｙ ｗｏ ｒ ｄ ｓ ：ｗｅ ｂ ｓ ｉ ｔ ｅ ｐ ｒ ｏ ｊ ｅ ｃ ｔ ｄ ｅ ｓ ｉ ｇ ｎ ；ｆ ｉ ｖ ｅ － ｌ ａ ｙ ｅ ｒ ｒａ ｆ ｍｅ ｗｏ ｒ ｋ；ｃ ｏ ｕ ｐ ｌ ｉ ｎ ｇ ｍｏ ｄ ｕ ｌ ｅ ；ｒ ｅ ｕ ｓ ａ ｂ ｉ ｌ ｉ ｔ ｙ；ｓ ｙ ｓ ｔ ｅ ｍ ｓ ｅ ｃ ｕ ｒ ｉ ｔ ｙ
ａ ｒ ｃ ｈ ｉ ｔ ｅ ｃ ｔ ｕ ｒ ｅ ｉ ｓ ｉ ｎ ｔ ｒ ｏ ｄ ｕ ｃ ｅ ｄ ｔ ｒｏ ｈ ｕ ｇ ｈ ｔ ｈ ｅ ＡＳ ＲＮＥ Ｔ ４ ． Ｏ （ Ｃ ） ．Ｔ ｈ ｅ ｍｅ ｈｏ ｔ ｄ ｄ ｅ ｃ ｏ ｍｐ ｏ ｓ ｅ ｓ ｈｅ ｔ ｓ ｙ ｓ ｔ ｅ ｍ ｉ ｎ ｔ ｏ ｉ ｆ ｖ ｅ — ｌ ａ ｙ ｅ ｒ ｒｃ ａ ｈ ｉ ｔ ｅ ｃ ｔ ｕ ｒ ｅ ｍｏ ｄ ｅ ｌ ｆ ｒ ｏ ｍ
浅谈网页设计与制作中的页面布局
浅谈网页设计与制作中的页面布局作者：代娟娟来源：《职业·下旬》2017年第01期当今社会，互联网的发展日新月异，网页设计已经成为热门领域，理所当然网页设计与制作成为大中专院校计算机专业的一门必修课。
网页设计中，页面布局是第一步，也是非常重要的内容之一，是制作网页的最基本的技能，因此学会网页的页面布局是重中之重。
下面简单介绍两种常用的网页页面布局的方法及两种方法的优缺点的比较。
一、利用表格布局网页表格是网页设计与制作的一个重要的组成部分，是最常见的网页布局元素之一。
在表格布局方面，通过设置表格及单元格的属性，对页面中的元素进行准确定位。
下面以笔者所在学校学生上课时做的网页“学院网站”为例来说明表格布局网页的步骤。
第一，选择[插入]菜单栏中[表格]命令来插入需要的表格。
并对表格的参数进行设置。
这里需要设置参数为“5行1列”，并在[属性]面板中设置对齐方式为“居中对齐”。
第二，用和第一步相同的方法在第一行嵌入一个l行2列的表格，在第二行嵌入一个l行8列的表格。
第三，在第一行的嵌入表格中插入站点文件夹“images”中的图片。
然后分别在第二行、第三行表格中插入图片。
第四，在第四行嵌入一个1行6列的表格，在嵌入表格中分别插入图片。
第五，在第五行插入文字：关于我们l联系我们I常见问题I站点地图I隐私策略I用户协议I法律声明l诚聘英才I友情链接。
并设置颜色为：#C C C C C C。
第六，最后设置所有表格的边框粗细为“0”。
第七，按下F12键，保存网页文件，同时打开浏览器查看网页内容。
利用表格进行网页页面布局，可以对网页元素进行准确定位，可以使布局更加合理。
灵活地使用表格的背景、框线等属性可以使网页更加美观。
二、利用框架布局页面1.框架的概念框架是把浏览器窗口分成若干个区域，每个区域可以显示不同的网页文件。
每个框架都是浏览器窗口中的一个独立区域，在这个区域中可以显示一个单独的网页而不影响其他区域中的显示内容。
网页设计作业
邵阳学院课程实验报告课程名称：网页设计系别：专业：班级：学号：姓名：目录一网页设计与制作的版面布局 .................................1网页的布局结构 ...................................................................2网页的布局设计 ................................................................... 二网页的风格的设计与制作................................... 三网页的图像的制作方法 ....................................... 四个人网页的设计与制作方法 ................................. 五心得体会.........................................................个人网页设计一、网页设计与制作的版面布局在考虑个人网页的主要版面，我们选择的是“三层式”布局：页面上部是网站的标题和导航栏，中间是图片，下面是友情连接1、网页的布局结构从上图中可以看出，网页的整体布局结构划分为四行（从上到下），第一行来制作logo,第二行制作导航，第三行制作内容，第四行制作版权信息。
在这个基础上，可以对网页布局进行更细致的拆分，如果说前面的拆分是用来制作网页的大框架，那么接下来拆分的就是内容区域了，这里分析的方法和前面是完全一样的。
2、网页的布局设计网页的布局设计，就是指网页中图像和文字之间的位置关系，简单来说也可以称之为网页排版。
网页布局设计最重要的目的就是传达信息。
一个并不能阅读的网页只能变成一个无用的链接。
分割、组织和传达信息并且使网页易于阅读、界面具有亲和力和可用性是网页设计师应有的职责，只有这样，浏览者才有更好的机会找出吸引他的东西。
web网站界面设计规范的五大层次
Web网站界面设计规范的五大层次最近由于有很多的新网站要去策划设计，所以看了大量的关于网站策划、交互设计和用户体验的书籍。
使我也系统地了解一些产品设计的相关理论及方法，深受启发。
这里我将结合WEB设计的精华，再加上自己以往积累的经验，总结一下Web网站的设计流程。
今天我给大家分享的是以用户为中心的WEB设计的五个层次，即：战略层、范围层、结构层、框架层和表现层。
关于这五个层面，马海祥的个人理解是：这五个层面适合大部分的软件开发项目。
做任何一个产品，产品的战略，产品规格，范围，优先级，需求分析也就是交互设计缺一不可。
对没有界面的产品来说，把这么多工作认真的做完，产品的设计工作也就基本完工了。
如果是有界面的产品，再需要做的工作就是界面设计和视觉设计了。
这五个层间也恰恰就是管理中的对核心职能的定义。
在这里也强调了各个层级的先后顺序以及层级之间的重叠性。
一、战略层战略层主要是明确公司与用户对于网站的期望和目标。
1、工作目标（1）、确定网站目标：我们要从这个网站得到什么？（2）、确定用户需求：我们的用户要从这个网站得到什么？2、工作内容（1）、确定网站目标a、商业目标：替公司赚钱还是替公司省钱？要赚多少钱？b、品牌识别：将品牌形象具体而明确地写进目标，将会提高呈现出积极的品牌形象的机会；c、成功标准：将战略或商业目标进行量化。
如通过衡量每一个注册用户单月的访问次数表明了该网站对核心用户的价值。
（2）、确定用户需求a、用户细分：可以按照人口统计学标准，价值观标准和用户对技术及网站本身观点划分用户；b、用户研究：使用问卷调查、用户访谈、焦点小组等方法收集、分析用户观点和需求。
并可通过创建虚拟人物角色来将分散的资料关联起来。
帮助你确保在整个设计过程期间把用户始终放在心里。
3、输出物市场需求文档（MRD）、用户研究报告、竞争对手分析报告等。
关于这点我也曾在马海祥博客的《如何利用SEO的思维模式来分析竞争对手》一文中做过详细的介绍，有兴趣的博友可以查看一下。
《网页设计与制作》模块5图文模板
模块5：HTML+CSS网页样式
学习导 入 学习目 标
任任 务任1 务任2 务任3 务任4 务任5 务任6 务任7 务任8 务任9 务任 务 1务0 11 12
○任务实施 一、必备知识 常用的标签 H1~H6标题标签（H1最大，H6最小） <p> </p> 段落标签 <br> 回车换行标签，单独出现 <title> </title> 网页标题标签 <hr > 水平线，单独出现 <img> 图像标签 <a> </a> 超链接标签
模块5：HTML+CSS网页样式
任务1
学习导 入 学习目 标
任任 务任1 务任2 务任3 务任4 务任5 务任6 务任7 务任8 务任9 务任 务 1务0 11 12
任务实施
一、必备知识
1.网页与网站
浏览网页时在浏览器中看到的一个个页面就是网页，而多个相 关的网页的集合就构成了一个网站。网址：用于定位某个网站某 个页面的一串字符，如： /nba.shtml
○任务描述 小花学习了一段时间的HTML语言，发现代码很难记，希望
能够学习一种可视化的网页开发工具减少她学习的难度。 ○任务目标
了解Dreamweaver CS5界面的构成，能在Dreamweaver CS5中 输入一些简单的代码效果如图5-10所示。
图510
模块5：HTML+CSS网页样式
任务3
标签：是HTML语言的基本部分。标签总是成对出现，每一 对标签一般都有一个开始的标记（如<body>），也有一个结束 的标记（如</body>）。标签的标记要用一对尖括号括起来，并 且结束的标记总是在开始的标记前加一个斜杠。 <html>标签：每一个html文档都是从<html>开始，结束于 <./html>。
网页美工-网页设计与制作
度考虑页面的全面性，避免头重脚轻。设计者往往容易忽视页脚，但页脚放置的 基本都是联系信息、链接网站、版权声明等重要内容，所以简洁、明了又富有创 意性是整个页面完整、美观的重要因素。
第一章
设计时应注意以下几点：
1.有良好的视觉层次： 访客阅读文章时需要的不是一屏到底，而是段落分明的层次感，先是标题，然后正文、
国际广告局的“标准与管理委员会”联合广告支持信息和娱乐联合会等国际 组织，推出了一系列网络广告宣传物的标准尺寸，被称作“IAC/CASIE”标准， 共包括7种标准的Banner尺寸。
在众多商业网站中，通常都会遵循以上标准定义Banner的尺寸，方便用户设 计统一的Banner，应用在所有网站上。然而，在一些不依靠广告位出租赢利的网 站中，Banner的大小则比较自由。网页设计者完全可以根据网站内容以及页面美 观的需要随时调整Ban设计的手法有很多，其中之一就是将导航菜单设计成纵向的。垂直
的导航设计并不是简单的将横向变为纵向，而是需要结合内容重新思考整个网站 的布局和空间的使用。
这种排版最流行的有两种，一种是隐藏式导航菜单，另外一种使用的是固定 的侧边栏来承载菜单 。它在色彩运用上一般使用与网页色调相柔和、协调的颜色， 既能起到很好的交互作用，又不喧宾夺主。第二种菜单的有趣之处在于，它为网站 设计提供了一种新的视觉设计可能性。同时，这种导航在小屏幕上可以做成悬停隐 藏式菜单栏（图悬停隐藏式菜单栏），需要的时候点击显示，它在色彩的运用上没 有太多的限制，使用鲜明或柔和的色彩均可，但在设计时注意导航栏的色彩设计必 须与网页整体色彩相协调。
1.1.1 网站LOGO 网站Logo是整个网站对外唯一的标识和标志，是网站商标和
网页设计与制作（基本步骤）
⽹页设计与制作（基本步骤） ⽹页设计与制作 ⼀、确定⽹站主题 ⽹站主题便是你树⽴的⽹站所要bai包含的主要内容，⼀个⽹站有必要要有⼀个清晰的主题。
特别是对于个⼈⽹站，你不可能像归纳⽹站那样做得内容⼤⽽全，⼀应俱全。
你没有这个才⼲，也没这个精⼒，所以有必要要找准⼀个⾃⼰最感兴趣内容，做深、做透，办出⾃⼰的特征，这样才⼲给⽤户留下深刻的印象。
⽹站的主题⽆定则，只要是你感兴趣的，任何内容都能够，但主题要明显，在你的主题范围内内容做到⼤⽽全、精⽽深。
⼆、收集资料 清晰了⽹站的主题今后，你就要环绕主题开始收集资料了。
常⾔道：“巧妇难为⽆⽶之炊”。
要想让⾃⼰的⽹站有⾎有⾁，能够吸引住⽤户，你就要尽量收集资料，收集得资料越多，今后制造⽹站就越容易。
资料既能够从图书、报纸、光盘、多媒体上得来，也能够从互联⽹上收集，然后把收集的资料沙⾥淘⾦，去伪存真，作为⾃⼰制造⽹页的素材。
⽹页设计 三、规划⽹站 ⼀个⽹站规划得成功与否，很⼤程度上决定于规划者的规划⽔平，规划⽹站就像规划师规划⼤楼相同，图纸规划好了，才⼲建成⼀座漂亮的楼房。
⽹站规划包含的内容许多，如⽹站的结构、栏⽬的设置、⽹站的风格、颜⾊搭配、版⾯布局、⽂字图⽚的运⽤等，你只要在制造⽹页之前把这些⽅⾯都考虑到了，才⼲在制造时驾轻就熟，胸中有数。
也只要如此制造出来的⽹页才⼲有特性、有特征，具有吸引⼒。
如何规划⽹站的每⼀项具体内容，我们在下⾯会有具体介绍。
四、挑选适宜的制造东西 尽管挑选什么样的东西并不会影响你规划⽹页的好坏，可是⼀款功⽤强⼤、使⽤简略的软件往往能够起到事半功倍的效果。
⽹页制造触及的东西⽐较多，⾸先便是⽹页制造东西了，现在⼤多数⽹民选⽤的都是所见即所得的修正东西，这其间的优异者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是⾸选。
除此之外，还有图⽚修正东西，如Photoshop、Photoimpact等；动画制造东西，如Flash、Cool3d、GifAnimator等；还有⽹页特效东西，如有声有⾊等，⽹上有许多这⽅⾯的软件，你能够根据需要灵活运⽤。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
知识大串联：
6. 剪辑(设置层的可视区域)
层
1
可视区
2
左 上 右 下
: : : :
点1至层左边框的距离 点1至层上边框的距离 点2至层左边框的距离 点3至层上边框的距离 下-上=可视区高
3
右-左=可视区宽
返回
（四）任务拓展
【代码解析】： 有时候在做dw 的时候，其中在里面加了层，但是在浏览的时候，加的那个层就 会跑到一边了。那个位置并不理想，有什么办法能让层不乱“跑”呢？ 方法： 手动建立div。也就是说不要用dw自带的插入层，那会生成很多无用代码。用 css控制要固定的div的外层元素的position为relative;(相对定位)，然后设置要固 定div的自身的position为absolute;(绝对定位) 。这样就实现了 这个div在外层元 素里的绝对位置。只要外层位置不变，里面的div层位置也不会变。 举例说明： 1.在背景图所在的div中加入属性position:relative(相对定位) 2.logo所在div的style中加入属性position:absolute;(绝对定位) 就可以实现logo相 对于背景绝对定位，然后设置left 和 top 属性就可以控制相对于背景的位置。 例如：下面两个div实现了 logo白色div永远在背景黑色div的left:20px;top:20px; 位置。 <div style="position:relative; background-color:#000000; width:500px; height:500px;"> <div id="logo" style="position:absolute; left:20px; top:20px; background-color:#FFFFFF; width:120px; height:120px;"> </div></div> 返回
1 主 要 教 学 环 节 2 3 4 5
项目背景）评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
（一）项目背景
如果用户想在网页上实现多个元素重叠的效果，可 以使用层。层是网页中的一个区域，并且游离在文档之 上。利用层可精确定位和重叠网页元素。通过设置不同 层的显示或隐藏，实现特殊的效果。因此，在掌握层技 术之后，就可以给网页制作提供强大的页面控制能力。 本项目将层的建立，层的应用以及时间轴动画逐一 得进行了讲解和练习，通过本项目的学习，将会使您做 的网页更加完美。
返回
（二）项目分析
项目活动目标：学会在网页中插入层，对层进行基 本的操作；对层的属性进行设置；对层在布局网页中进 行充分的利用。
重点：在网页中插入层，对层进行基本操作； 难点：对层的属性进行设置，利用层布局网页。
返回
（三）任务实施
为红玫瑰化妆品网页添加文字
【操作步骤】： 1.选择“文件>打开”命令，在弹出的对话框中选择图片，如图所示：
2. 单击“插入”面板中“布局”选项卡中的“绘制AP Div” 按钮， 在页面中拖曳鼠标指针绘制出一个矩形层，如图所示。
3.将光标置入层中，输入红色文字，并在“属性”面板中设置字体和 大小，效果如图所示。选择“窗口>AP元素”命令，弹出“AP元素” 面板，在面板中选中“apDiv1”，如图左下图所示：选择“编辑>拷贝” 命令，拷贝选中的层，在页面的空白处单击鼠标，选择“编辑>粘贴” 命令，粘贴拷贝的层，面板中如右下图所示。
项目背景） 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
4. 在面板中选中第一个层，按方向键的向右键，个按3次，移动层的位 置，是文字产生阴影效果，如图所示。
使用相同的方法制作其他文字，效果如图所示。
5. 保存文档，按<F12>键预览效果。如图所示：
知识大串联：
1.层的创建 1）图层标签 <div>
<span>
<layer>
<ilayer>
IE和Navigator支持 Navigator支持 2）建立新层 方法一：插入/层 方法二：单击插入工具栏/常用/描绘层按钮,在编辑区中拖拉(按 下Ctrl键可连续画层) 方法三：直接拖动描绘层按钮到编辑区
知识大串联：
2、属性的设置： 1） 层的定位
绝对:浏览器左上角为坐标原点 相对:相对于其它网页元素定位 2）层的命名(英文字母开头,且不能使用特殊字符和空格) 3）Z轴(Z值越大,位置越靠上.可以是任意整数) 4）显示 visible 可见 hidden 隐藏 inherit 继承(继承父层的可视性) 注意: 配合层面板使用(F2) 5） 溢出(当层中内容超过层的大小) visible : 溢出的内容可见 hidden :溢出的内容不可见 scroll : 层周围出现滚动条 auto : 当有溢出时层周围出现滚动条
项目活动五 层的布局
复习提问：
一、选择题： 1．以下代码代表整个表格的是 。 A．table B．td C．tr D.body 2.以下代码代表单元格的是 。 A．Row B．Column C．Cell D．Border 二、简答题： 1、一般来说首页设计的过程是怎样的？ 2、常见的网页布局类型有哪些？
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局
1 主 要 教 学 环 节 2 3 4 5
项目背景 项目分析
任务实施
任务拓展 作品展评 项目小结 布置作业 反思感悟
6
7 8
项目活动五 层的布局