网页设计与制作项目教程单元8 网站首页的设计与制作
网页设计与制作教学课件
通过改变DOM元素的属性或样式，实 现动态效果。
05
网页响应式设计
响应式设计概念
01 响应式网页设计是一种网页设计方法，旨在使网 页能够根据不同的设备和屏幕尺寸自适应显示， 提供更好的用户体验。
02 它通过使用媒体查询、流式布局、弹性图片和灵 活的字体等手段，使网页在不同设备上都能呈现 出良好的视觉效果和交互体验。
02 响应式设计可以提高网站的可用性和访问性，从 而增加用户满意度和网站流量。
媒体查询
媒体查询是响应式设计的核心技术之一，它允许网页根据设备的特定特 性（如屏幕宽度、高度、方向等）应用不同的CSS样式。
通过媒体查询，开发者可以针对不同的设备类型和屏幕尺寸编写特定的 CSS样式，以实现更好的布局和视觉效果。
04
网页交互与动画
网页交互设计
交互元素
包括按钮、表单、链接等， 设计时需考虑易用性和用 户体验。
导航菜单
设计清晰、直观的导航菜 单，方便用户快速找到所 需内容。
响应式设计
根据不同设备的屏幕大小 和分辨率，自动调整网页 布局和元素大小。
CSS动画
01
02
03
关键帧动画
通过定义关键帧和过渡效 果，实现元素的平滑运动。
响应性
设计适应不同设备和 屏幕尺寸的响应式网 站，以确保用户在不 同设备上都能获得良 好的浏览体验。
视觉层次
通过合理安排内容元 素的优先级和组织方 式，突出重要信息， 引导用户的注意力。
网页设计流程
需求分析
了解客户需求，明确网站目标和目标受众， 收集相关资料和竞争对手分析。
规划与草图
制定网站结构、布局和导航方案，绘制草图或 线框图，确定基本的设计风格和元素。
《网页设计与制作项目化教程》习题参考答案
(1)index.html
(2)本地站点和远程站点
(3)本地站点
(4)上传，下载
2.略
项目四 利用表格布局网站首页
任务一利用表格规划页面
1.填空题
(1)“国”字型、拐角型、标题正文型、封面型、混合型。
(2)表格布局、DIV+CSS布局、框架布局DIV+CSS布局
(3)0、0、0
(4)3
(5)固定的像素值、百分比
任务五页面元素源代码
1．单项选择题
（1）B（2）C（3）B（4）C（5）C（6）A（7）B
2．填空题
（1）<font color=’red’>文字</font>
（2）boder
（3）embed
（4）颜色代码
项目六 利用表单获取用户反馈
任务一设计表单
1．单项选择题
（1）A（2）C（3）D
2．填空题
（1）提交按钮
<td align="center">G20</td>
<td align="center">2350</td>
</tr>
<tr>
<td height="30" align="center">NO.003</td>
<td align="center">三星</td>
<td align="center">Galaxy siii</td>
(5)项目列表编号列表目录列表
3．问答题
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
Dreamweaver_8_网页设计与制作_第2章53页PPT文档
2.1.1 定义本地站点
图 2.2 选择【管理站点】命令
图 2.3 【管理站点】对话框
2.1.1 定义本地站点
图 2.4 定义站点
2.1.2 编辑站点
1. 打开站点 在创建了站点之后，还可以对站点属性进行编辑。在编辑站点时，首先
要打开站点。 要打开一个本地站点，用户可以从Dreamweaver文档窗口的站点窗口中，
2.1.2 编辑站点
图 2.7 【管理站点】对话框
图 2.8 复制站点
2.1.2 编辑站点
4. 删除站点 如果不再需要利用Dreamweaver对某个本地站点进行操作，
可以将之从站点列表框中删除，具体操作如下。 (1) 在图2.8所示对话框的列表框中选择要删除的站点
“NetBook复制”，如图2.9所示，单击【删除】按钮。 (2) 这时会出现一个提示对话框，如图2.10所示，询问是
1. 创建文件夹 在本地站点中创建文件夹的具体步骤如下。 (1) 在站点窗口的本地站点文件列表窗格中，选中要新建
文件夹的上一级文件夹。 (2) 右击文件夹，在如图2.11所示的快捷菜单中选择【新
建文件夹】命令，即可创建一个新的文件夹。
2.1.3 站点文件的操作
图 2.11 新建文件夹
我们可以把站点看作是一系列文档的组合，这些文档之间 通过各种链接关联起来，可能拥有相似的属性，如描述相 关的主体、采用相似的设计或实现相同的目的等，也可能 只是毫无意义的链接。通过浏览器，我们就可以从一个文 档跳转到另一个文档，实现对整个网站的浏览。
利用Dreamweaver，用户可以在本地计算机上创建出站点 的框架，编辑相应的文档，从整体上对站点全局进行控制。 在这一节中我们将介绍如何构建网站的本地站点。
网页设计与制作项目教程 (3)[15页]
![网页设计与制作项目教程 (3)[15页]](https://img.taocdn.com/s3/m/ebab6b6bc77da26924c5b045.png)
项 目
项目三 网站规划与设计
三
网
【项目目标】
站
能力目标：
规 划 与
学完本项目后，应能够：
(1)掌握网站规划与设计要点 (2)明确网站规划与设计的一般流程 (3)设计合适的网页版式。
设
计
知识目标：
(1)了解网站规划与设计的一般流程。
(2) 懂得网页的版式设计的基本原则。
网页设计与制作项目教程
划 以深灰色标出。整体布局简洁大方，图文匹配。
与
设
计
项 目 2、网站前台布局 三 （4）店头效果图 网 店头效果图如图3-3-5所示。 站 规 划 与 设 计
网页设计与制作项目教程
项 目
任务4 网站首页版式设计
三
【任务目标】
网
网站首页，即主页、起始页，也就是打开
站
网站后看到的第一个页面。网站的首页就好像人的
项 目
任务1 网站需求分析
三
【任务目标】
网 站 规
“MobileShop”企业的电子商务需求，既可能来自企业本 身发展的需要，也可能是迫于竞争对手的压力，或者二者 兼而有之，请从企业网站实施的背景、原因、资源和目的 四个方面来分析企业是否有开展电子商务的需求，存在哪
划
些需求，需求的迫切性以及这些需求将给企业带来什么样
索、分类等功能模块。前台系统的功能模块如图所 示图3-3-1所示。
项
目
三 网 （2）网站后台系统 站 后台系统：商品管理、分类管理、订单管理、用户管 规 理等功能模块。后台系统的功能模块如图所示图3-3-2 划 所示。
与
设
计
项 目 2、网站前台布局 三 （1）Logo 网 “MobileShop”电子网站的Logo, 如3-3-3所示。 站 图3-3-3 “MobileShop”电子网站名称及Logo 规 划 与 设 计
网页设计与制作Dreamweaver8网页设计-64页PPT精选文档
退出
3.1 Dreamweaver 8简介
3.1.3 菜单栏
第一页
“标题栏”的下面是“菜单栏”， 菜单栏中提供了
“文件”、“编辑”、“查看”、“插入”、“修改”、 上一页 “文本”、“命令”、“站点”、“窗口”和“帮助”
以存在四个状态，除了有“鼠标经过图像”的两 退出 种状态外，还有自己独有的“按下图像”和“按
下时鼠标经过图像”这两种状态。
3.3 页面设计
3.3.4 表格的使用
第一页
1．表格的组成
上一页
表格是网页制作技术的一个重要组成部分，
是用于在网页上显示表格数据以及对文本和图像
下一页 进行布局的强有力的工具。
本章内容
第一页
Dreamweaver 8简介
上一页
站点的建立与管理
下一页
页面设计
最后页
退出
3.1 Dreamweaver 8简介
本章案例的小型个人网站是利用 第一页 Dreamweaver 8设计的，在设计前首先要
对该环境作个基本的了解，下面就来简单 上一页 的介绍Dreamweaver 8。
3.1.5 网页编辑窗口
第一页
工具栏下面的区域是“网页编辑区 上一页 域”，在Dreamweaver 8启动时显示一个
“起始页”，其中包括“打开最近项目”、 下一页 “创建新项目”、“从范例创建”三个较
方便使用的项目。选中任意项，出现“网
最后页
页编辑窗口” ，则“网页编辑区域”就会 退出 出现“网页编辑窗口”，用户可以在文档
下一页
最后页
退出
3.1 Dreamweaver 8简介
电子课件-《Dreamweaver 网页设计与制作(第二版)》- 项目八 制作茶文化网站—应用 Div+CSS技术布局网页
一、Web 标准的含义
Web 标准是由 W3C 和其他标准化组织制定的一套规范，包括 XHTML、 JavaScript及 CSS 等一系列标准，其目的在于创建一个统一的用于 Web 表 现层的技术标准，以便于通过不同浏览器或终端设备（计算机、手机等）向 最终用户展示信息内容。
从狭义上讲，Web 标准就是采用 Div+CSS 代码进行网站建设，现在 Div+CSS 俨然成了标准化的代名词。
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
2. 缺点
对于 CSS 的高度依赖， 使得网页设计变得比较复杂。 CSS 文件异常将会影响整个网站的正常显示。 对于用 Div+CSS 技术制作的网站，非常容易出现浏览器兼容性问题。 Div+CSS 技术对搜索引擎的优化效果，取决于网页设计者的专业水平而 不是Div+CSS 技术本身。
任务
制作网站首页和子页——使用 Div+CSS 技术制作网页
LOGO
任务 制作网站首页和子页 ——使用 Div+CSS 技术制作网页
2
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
◆了解 Web 标准的含义、构成，认识 Div ◆熟练掌握使用 Div+CSS 技术构建网页的方法
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
网页设计与制作项目教程
03
Sketch支持多人协作设计，方便团队成员之间的沟通和合作。
Figma
实时协作
Figma支持多人实时协作设计，方便团队成员之间的沟通和合作。
矢量网格
Figma采用了独特的矢量网格系统，可以轻松地创建各种形状和 线条。
插件扩展
Figma也拥有丰富的插件生态系统，可以扩展其功能，满足各种 设计需求。
确保网站风格与企业品牌 形象一致，使用企业标志、 色彩等元素。
03 信息架构
合理规划网站的信息结构，
确保内容易于导航和查找。
02 产品展示
突出展示企业核心产品或 服务，提供详细的产品信 息。
04 联系信息
提供清晰的联系信息，如
电话、邮箱、地址等。
电商网站设计
产品分类
将商品按照类别进行分类，方便用户 浏览和筛选。
触屏优化
考虑到触屏设备的特 性，优化按钮、链接 等交互元素的大小和 位置，提高触屏操作 的便捷性。
04
网页制作工具与技术
Adobe Photoshop
01 图像处理
Photoshop提供了强大的图像处理功能，包括裁 剪、调整色彩、滤镜等，可以用于处理网页所需 的图片素材。
02 切片工具
Photoshop的切片工具可以将大图片分割成小图， 便于网页加载和优化。
CSS基础
CSS用于控制网页的样式 和布局。
CSS属性用于定义样式， 如颜色、字体、大小、边 距等。
CSS选择器用于选择要应 用样式的HTML元素。
HTML与CSS结合
01
HTML元素可以通过内联样式 、内部样式表或外部样式表来 应用CSS样式。
02
CSS可以控制HTML元素的布 局、颜色、字体等外观。
信息技术《制作网站首页》教案
（2）网页布局方法：学生可能对表格布局与层布局的适用场景和优缺点理解不深。
举例：讲解表格布局适用于较为简单的页面布局，但灵活性较差；层布局适用于复杂、灵活的页面布局，但需要掌握CSS样式。
（3）网站首页设计技巧：学生在设计网站首页时可能缺乏创新和审美能力，难以把握整体风格和布局。
举例：提供一些设计技巧，如使用统一的色彩搭配、合理的空间布局、关注用户体验等。
四、教学流程
（一）导入新课（用时5分钟）
同学们，今天我们将要学习的是《制作网站首页》这一章节。在开始之前，我想先问大家一个问题：“你们在日常生活中是否访问过各种网站，有没有注意过它们的首页是如何设计的？”这个问题与我们将要学习的内容密切相关。通过这个问题，我希望能够引起大家的兴趣和好奇心，让我们一同探索制作网站首页的奥秘。
3.成果展示：每个小组将向全班展示他们的讨论成果和实验操作的结果。
（四）学生小组讨论（用时10分钟）
1.讨论主题：学生将围绕“网站首页在实际生活中的应用”这一主题展开讨论。他们将被鼓励提出自己的观点和想法，并与其他小组成员进行交流。
2.引导与启发：在讨论过程中，我将作为一个引导者，帮助学生发现问题、分析问题并解决问题。我会提出一些开放性的问题来启发他们的思考。
五、教学反思
在本次《制作网站首页》的教学过程中，我发现学生们对网页设计充满好奇，但同时也存在一些挑战。首先，对于HTML标签和属性的使用，虽然大部分学生能够跟随课堂进度，但仍有个别学生对此感到困惑。在今后的教学中，我需要更加耐心地辅导这部分学生，可以通过更多的实际操作和案例解析来帮助他们理解和记忆。
举例：介绍如何利用表格进行网页布局，以及如何使用层布局实现网页元素的自由排列。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的标准和原则1.2 网页设计流程讲解网页设计的基本流程，包括需求分析、设计稿、切片、编码和测试等步骤1.3 网页设计工具介绍常用的网页设计工具，如Photoshop、Dreamweaver、Fireworks等第二章：HTML与CSS基础2.1 HTML概述介绍HTML的概念、作用和基本结构2.2 HTML标签讲解常用的HTML标签，如、段落、图像、、列表等2.3 CSS概述介绍CSS的概念、作用和基本语法2.4 CSS选择器讲解常用的CSS选择器，如类选择器、ID选择器、属性选择器等第三章：网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性3.2 常用的网页布局方法讲解常用的网页布局方法，如固定布局、百分比布局、弹性布局等3.3 排版与字体介绍排版和字体的概念、作用和常用属性3.4 响应式网页设计讲解响应式网页设计的概念、方法和实现方式第四章：网页特效与交互4.1 网页特效概述介绍网页特效的概念和作用4.2 JavaScript基础讲解JavaScript的概念、作用和基本语法4.3 常用的网页特效与实例讲解常用的网页特效，如鼠标悬停效果、下拉菜单、滚动动画等，并提供实例进行演示4.4 交互式网页设计讲解交互式网页设计的概念、方法和实现方式第五章：网页设计与制作实践5.1 实践项目概述介绍实践项目的需求和目标5.2 网页设计稿制作根据实践项目需求，使用设计工具制作网页设计稿5.3 网页编码与测试使用HTML和CSS编写网页代码，并进行测试和调试讲解网页发布的步骤和注意事项，以及常用的网页推广方法第六章：网页图像与多媒体6.1 图像格式与优化介绍常见的网页图像格式，如JPG、PNG、GIF等，以及图像优化方法6.2 音频与视频讲解如何在网页中嵌入音频和视频，以及常用的媒体格式6.3 Flash动画介绍Flash动画的概念、制作方法和在网页中的应用6.4 动态效果与动画讲解如何在网页中实现动态效果和动画，包括使用CSS动画和JavaScript实现第七章：网页服务器与数据库7.1 服务器概述介绍网页服务器的概念、作用和常用服务器软件7.2 数据库概述介绍数据库的概念、作用和常用数据库管理系统7.3 动态网页制作基础讲解动态网页制作的基本原理，如服务器端编程和数据库连接7.4 实践项目：搭建简易的个人博客系统讲解如何使用服务器和数据库搭建一个简易的个人博客系统，包括前端设计和后端编程第八章：网页安全与SEO介绍网页安全的概念和重要性，以及常见的网络安全威胁8.2 网页安全措施讲解如何防范网络攻击和提高网页安全性，如使用SSL证书、X-Frame-Options 等8.3 SEO概述介绍搜索引擎优化（SEO）的概念、作用和方法8.4 SEO实践技巧讲解如何优化网页内容、结构和，以提高搜索引擎排名第九章：网页设计与制作的进阶技巧9.1 响应式网页设计深入讲解响应式网页设计的原理和实践方法，包括媒体查询和弹性布局9.2 前端框架与库介绍常用的前端框架和库，如Bootstrap、jQuery、React等，以及如何使用它们提高网页制作效率9.3 网页性能优化讲解如何提高网页加载速度和性能，包括图片优化、代码压缩和缓存策略9.4 实践项目：制作一个响应式商务网站讲解如何使用响应式设计和前端框架制作一个商务网站，包括布局、样式和交互设计第十章：网页设计与制作的拓展与趋势10.1 网页设计与制作的未来趋势探讨网页设计与制作的发展方向，如虚拟现实（VR）、增强现实（AR）等技术的应用10.2 网页设计规范与最佳实践介绍网页设计规范和最佳实践，以提高网页质量和用户体验10.3 跨平台网页设计与制作讲解如何使用跨平台技术，如PWA（Progressive Web Apps）、Node.js等，实现网页在不同平台和设备的兼容性和性能10.4 实践项目：制作一个跨平台的网页应用重点和难点解析重点环节1：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。
《网站首页制作》PPT课件
.
15
商务网页设计 项目二
商务网页 设计
子任务3：设计首页主内容区
（27）在【形状选择工具】中选择圆角矩形工具，在形状属性工具栏中设置颜色 为#B1ABAB、半径为30px。
（28）新建文字图层，在【字符】面板中设置颜色为EFOE19，字体为宋体， 14px、颜色为ff0000,选中将形状图层和文字图层右击鼠标悬着“合并图层”，方 便移动。
（14）打开本书配套资源“项目资料库/素材”中的文件1.jpg（Ctrl+O）,使 用工具栏中【移动工具】或者方向键移动红色条纹，使其紧贴左边缘和水平线。
.
10
商务网页设计 项目二
商务网页 设计
子任务2：设计首页页头区
导航区最终效果图
.
11
商务网页设计 项目二
商务网页 设计
子任务3：设计首页主内容区
（29）打开本书配套资源“项目资料库/素材“.png”、“rad.png”、 “gray.png”文件。
.
16
商务网页设计 项目二
.
6
商务网页设计 项目二
商务网页 设计
子任务2：设计首页页头区
制作标志区和导航区
（3）在【图层】面板中新建组，双击默认组名重命名为“top”；
（提示：双击组名称，可在文字上双击，也可在文字旁边双击，这时会弹出图层 组属性窗口，可选择组的颜色，以便区别于其他的组。）
（4）在【图层】面板中新建组，双击默认组名重命名为“导航栏”；
.
12
商务网页设计 项目二
商务网页 设计
子任务3：设计首页主内容区
（18）单击【文件】按钮打开素材中图“pbdn.jpg”，在工具栏中 选择【磁性套索工具】,设置羽化值0.5px。 （19）按快捷键Ctrl+M,打开“曲线”面板，调节界面。 （20） 在工具栏中选择【文字工具】选择“横排文字工具”建立文 字图层，在【窗口】中打开【字符】面板设置字体为宋体，字号为 16px,并输入文字。
【2024版】网页设计与制作-站点的规划与创建ppt课件
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
站点窗口的显示
站点的创建和管理主要在站点窗口中进行。显 示站点窗口的方法有如下两种。
➢ 在窗口浮动面板组中，单击浮动面板组上的 按钮展 开“文件”面板，如图4-4所示。再单击“站点”下拉 列表，打开如图4-5所示的“站点”下拉列表。
首页 末页 向上 向下 返回 结束 调音
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
第四课 站点的规划与创建
➢课前导读 ➢课堂讲解 ➢上机实战 ➢课后练习
首页 末页 向上 向下 返回 结束 调音
《网页设计与制作》 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。
在实际的制作过程中，有两种方法保存这些内容。 一种方法是在整个站点中只建一个图像文件夹、一个 模板文件夹、一个动画文件夹……整个站点中的相应 文件都保存在相应文件夹中，如图4-1所示。另外一 种方法是在每个子栏目中分别建立各自的图像、动画、 模板等文件夹，各栏目中的图像、动画、模板分别保 存在各自栏目的文件夹中，如图4-2所示。
创建Web站点的第一步是规划。为了达到最佳 效果，在创建任何Web站点页面之前，应对站点 的结构进行设计和规划，接着配置Dreamweaver 以使可以在站点的基本结构上正常工作。如果在 Web服务器上已经建有一个站点 ，则可以使用 Dreamweaver来编辑修改该站点。
网页设计与制作项目教程单元8 网站首页的设计与制作
图8-6 “两列布局”页面结构预览效果图
三、三列布局 三列布局方式是两列布局的演变，只是将主体内容分成了左、中、 右三部分。 如图8-7所示即为一个“三列布局”页面的结构示意图。
图8-7 “三列布局”页面结构示意图
在图8-7中，内容模块被分为了左中右三部分，实现这一效果的关 键是在内容模块所在的大盒子中嵌套3个小盒子，然后对3个小盒子分 别设置浮动。
<div class="content_left">内容左部分</div> <div class="content_right">内容右部分</div> </div> <div id="footer">页面底部</div> </body> ……
由于内容模块被分为了左右两部分，所以，只需在单列布局样式 的基础上，单独控制class为content_left和content_right的两个小盒子的 样式即可，并且分别给这两个盒子设置左浮动和右浮动属性。父div限 制宽度，水平居中；子div固定宽度，浮动定位。
和两列布局对比，本案例的不同之处在于主体内容所在的盒子中 增加了class为content_middle的小盒子。
在两列布局样式的基础上，单独控制class为content_middle的小盒 子的样式即可，给它设置宽度和左浮动属性。
浏览器效果如图8-8所示。
图8-8 “三列布局”页面结构预览效果图
*+html 选择器{样式代码}
二、CSS属性Hack
CSS属性Hack是指在CSS属性名的前面加上一些只有特定浏览器才 能识别的Hack前缀，例如“_color:red;”中的Hack前缀“_”就只对IE 6生效。针对不同版本的浏览器，CSS属性Hack分为以下几类。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在上述代码中，定义了5对<div></div>标记，分别用于控制页面 的头部（top）、导航（nav）、焦点图（banner）、内容（content）和 页面底部（footer）。
接下来设置每个div的宽高。同时对盒子定义“margin:5px auto;” 样式，它表示盒子在浏览器中水平居中，且上下外边距均为5px。这 样既可以使盒子水平居中，又可以使各个盒子在垂直方向上有一定的 间距。
二、CSS布局流程 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程， 具体如下。 （1）确定页面的版心。 （2）分析页面中的行模块，以及每个行模块中的列模块。
图8-1 北京大学网站首页的版心
（3）运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模 块。
接下来以贵州交通职业技术学院网站首页为例，分析一下页面中 的各个模块，具体结构如图8-2所示。
图8-3 “单列布局”页面结构示意图
主体代码如下所示：
…… <body> <div id="top">头部</div> <div id="nav">导航栏</div> <div id="banner">焦点图</div> <div id="content">内容</div> <div id="footer">页面底部</div> </body> ……
（）设计页面的布局结构 （2）创建页面的布局样式 （3）创建美化页面元素的样式 （4）插入DIV标签对网页的页面进行布局
（1）设计页面的布局结构 （2）插入DIV标签对网页的页面进行布局
教学方法 任务驱动法、分组讨论法
8.1 CSS布局 8.1.1 版心与CSS布局流程
一、版心 “版心”是指网页中主体内容所在的区域。 如图8-1所示，框线内即为北京大学网站首页的版心。 “版心”一般在浏览器窗口中水平居中显示，常见的宽度值为960px、 980px、1000px等。
图8-2 贵州交通职业技术学院网站首页截图
8.1.2 用CSS进行网页布局
一、单列布局 “单列布局”是网页布局的基础，所有复杂的布局都是在此基础 上演变而来的。 如图8-3所示，即为一个“单列布局”页面的结构示意图。 通过上图容易看出，这个页面从上到下分别为头部、导航、焦点 图、内容和页面底部，每个模块单独占据一行，且宽度与版心相等， 经测量为980px。
<div class="content_left">内容左部分</div> <div class="content_right">内容右部分</div> </div> <div id="footer">页面底部</div> </body> ……
由于内容模块被分为了左右两部分，所以，只需在单列布局样式 的基础上，单独控制class为content_left和content_right的两个小盒子的 样式即可，并且分别给这两个盒子设置左浮动和右浮动属性。父div限 制宽度，水平居中；子div固定宽度，浮动定位。
通栏布局的关键在于在相应模块的外面添加一层div，并且将外层 div的宽度设置为100%。
图8-9 “通栏布局”页面结构示意图
接下来使用相应的HTML标记搭建页面结构，主体代码如下所示：
…… <body> <div id="top">头部</div> <div id="topbar">
<div class="nav">导航栏</div> </div> <div id="banner">焦点图</div> <div id="content">内容</div> <div id="footer">
工业和信息化“十三五”高职高专人才培养规划教材
汤智华 主编 王爱红 主审
【教学导航】
教学目标
本单元重点 本单元难点
（1）学会设计页面的布局结构 （2）学会创建页面布局样式 （3）学会创建美化页面元素的样式 （4）学会插入DIV标签对网页的页面进行布局 （5）学会创建代码片断，且在网页插入已有的代码片断 （6）学会在使用DIV＋CSS布局的网页中输入文字和插入各种页面元素
和两列布局对比，本案例的不同之处在于主体内容所在的盒子中 增加了class为content_middle的小盒子。
在两列布局样式的基础上，单独控制class为content_middle的小盒 子的样式即可，给它设置宽度和左浮动属性。
浏览器效果如图8-8所示。
图8-8 “三列布局”页面结构预览效果图
四、通栏布局 为了网站的美观，网页中的一些模块，例如，头部、导航、焦点 图或页面底部等经常需要通栏显示。
将模块设置为通栏后，无论页面放大或缩小，该模块都将横铺于 浏览器窗口中。
如图8-9所示即为一个应用“通栏布局”页面的结构示意图。
在上图中，导航栏和页面底部为通栏模块，它们将始终横铺于浏 览器窗口中。
浏览器效果如图8-6所示。
图8-6 “两列布局”页面结构预览效果图
三、三列布局 三列布局方式是两列布局的演变，只是将主体内容分成了左、中、 右三部分。 如图8-7所示即为一个“三列布局”页面的结构示意图。
图8-7 “三列布局”页面结构示意图
在图8-7中，内容模块被分为了左中右三部分，实现这一效果的关 键是在内容模块所在的大盒子中嵌套3个小盒子，然后对3个小盒子分 别设置浮动。
在图8-5中，内容模块被分为了左右两部分，实现这一效果的关键 是在内容模块所在的大盒子中嵌套两个小盒子，然后对两个小盒子分 别设置浮动。
图8-5 “两列布局”页面结构示意图
主体代码如下所示：
…… <body> <div id="top">头部</div> <div id="nav">导航栏</div> <div id="banner">焦点图</div> <div id="content">
在实际应用中，如北京大学网站的页面就属于单列布局，并具有 以下特点。 （1）顶部通栏即可。 （2）中部固定宽度，高度可随着内容扩展。 （3）底部和中部宽度一样，高度固定。
浏览器效果如图8-4所示。
图8-4 “单列布局”页面结构预览效果图
二、两列布局
两列布局的网页内容被分为了左右两部分，通过这样的分割，打 破了统一布局的呆板，让页面看起来更加活跃。如图8-5所示即为一个 “两列布局”页面的结构示意图。