网页设计制做图文教程
合集下载
第2章 HTML入门(网页制作案例教程课件)
2020/7/26
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
图2-2 2020/7/26 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
属性值，这里是颜色值(粉红色)
bgcolor就是<body>标记的属性，用于设置背景色
2020/7/26
2.1.2 标记及其属性
• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
</head>
<body> <font size=1>1号字体</font><p> <font size=2>2号字体</font><p> <font size=3 color=red>3号字色红体</font><p> <font size=4 color=blue>4号蓝色字体</font><p> <font size=5 color=orange>5号橙色字体</font><p> <font size=6 color=yellow face="黑体">6号黄色黑体字体</font><p> <font size=7 color=green face="隶书">7号绿色隶书字体</font><p> <font size=+2 color=purple face="宋体">+2号紫色宋体字体</font><p
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
图2-2 2020/7/26 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
属性值，这里是颜色值(粉红色)
bgcolor就是<body>标记的属性，用于设置背景色
2020/7/26
2.1.2 标记及其属性
• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
</head>
<body> <font size=1>1号字体</font><p> <font size=2>2号字体</font><p> <font size=3 color=red>3号字色红体</font><p> <font size=4 color=blue>4号蓝色字体</font><p> <font size=5 color=orange>5号橙色字体</font><p> <font size=6 color=yellow face="黑体">6号黄色黑体字体</font><p> <font size=7 color=green face="隶书">7号绿色隶书字体</font><p> <font size=+2 color=purple face="宋体">+2号紫色宋体字体</font><p
网页设计与制作案例教程-电子教案第21单元
HTML源代码中的换行、回车符和多个连续空格在浏览时都是无效的，浏览网页时，会自动忽略文档中的换行符、回车符、空格，所以在文档中输入的回车符，并不意味着在浏览器中将看到不同的段落。
网页中所有的显示内容都应该受限于一个或多个标记，不能存在游离于标记之外的文字或图像等，以免产生错误。
对于浏览器不能分辨的标记可以忽略，不显示其中的对象。
HTML文档以纯文本形式存放，扩展名为“.html”或“.htm”。
HTML文档中标记采用“<”与“>”作为分割字符。
HTML标记及属性不区分大小写，例如<HTML>和<html>是相同的标记。
大多数HTML标记可以嵌套，但不能交叉，各层标记是全包容关系。
HTML文档一行可以书写多个标记，一个标记也可以分多行书写，不用任何续行符号，显示效果相同。
在查看HTML源代码或编写网页时，经常会遇到三种格式的HTML标记。 不带属性的双标记：<标记名称>内容</标记名称> 带有属性的双标记：<标记名称 属性名称=对应的属性值 ……>网页对象</标记名称> 单标记：<标记名称 />
HTML标记的类型
2 Dreamweaver 8的HTML源代码编辑功能
在代码窗口中<body>与</body>之间输入文字“长沙世界之窗实现总经理领导下的部门经理负责制，管理上采用垂直领导、分层管理、逐级负责。”，接着输入“<br />”
回车换行，然后输入“<img src="image/bumen1.jpg" width="690" height="303" />”。
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
【任务3-1】制作图文混排网页
20 《网页设计与制作项目驱动教程（第3版）》
（2）设置网页的背景图像
单击【属性】面板上的【页面属性】按钮， 打开【页面属性】对话框，在【页面属性】对话 框中“外观（CSS）”属性组中单击背景图像文 本框右侧的【浏览】按钮，弹出【选择图像源文 件】对话框，在该对话框中搜索到所要设置的背 景图像文件“bg-gray.png”。
（3）插入第2幅图像
在Dreamweaver CC的主窗体【文档】工具栏 中单击【设计】按钮，切换到“设计”窗口，将 光标置于文本之后，按【Enter】键换行，然后按 照类似的方法插入4幅图像，即文件夹images中图 像t02.jpg、t03.jpg、t04.jpg和t05.jpg。
36 《网页设计与制作项目驱动教程（第3版）》
教学导航 教学重点难点
教学重点： 1、设置网页背景图像 2、在网页中插入图像 3、设置图像属性
教学难点： 1、设置页面背景图像 2、实现图文混排网页
7
教学导航 教学方法
信息化教学
课前布置在学习通 APP中学习本节微 课，课后提升练习
01
案例教学
制作介绍九寨沟景 区景点的图文混排 网页
02
操作准备
32 《网页设计与制作项目驱动教程（第3版）》
【任务实施】
（1）插入第1幅图像
将光标置于标题“诺日朗群海”右侧，按 【Enter】键换行，然后选择命令【插入】→【图 像】，在弹出的【选择图像源文件】对话框中选 择images文件夹中的图像文件“t01.jpg”。
在【选择图像源文件】对话框中单击【确定】 按钮，即可在网页0301.html中插入一幅图像。
（2）打开【导入 Word 文档】对话框
将 光 标 置 于 网 页 “ 0301.html ” 中 需 要 添 加 文
（2）设置网页的背景图像
单击【属性】面板上的【页面属性】按钮， 打开【页面属性】对话框，在【页面属性】对话 框中“外观（CSS）”属性组中单击背景图像文 本框右侧的【浏览】按钮，弹出【选择图像源文 件】对话框，在该对话框中搜索到所要设置的背 景图像文件“bg-gray.png”。
（3）插入第2幅图像
在Dreamweaver CC的主窗体【文档】工具栏 中单击【设计】按钮，切换到“设计”窗口，将 光标置于文本之后，按【Enter】键换行，然后按 照类似的方法插入4幅图像，即文件夹images中图 像t02.jpg、t03.jpg、t04.jpg和t05.jpg。
36 《网页设计与制作项目驱动教程（第3版）》
教学导航 教学重点难点
教学重点： 1、设置网页背景图像 2、在网页中插入图像 3、设置图像属性
教学难点： 1、设置页面背景图像 2、实现图文混排网页
7
教学导航 教学方法
信息化教学
课前布置在学习通 APP中学习本节微 课，课后提升练习
01
案例教学
制作介绍九寨沟景 区景点的图文混排 网页
02
操作准备
32 《网页设计与制作项目驱动教程（第3版）》
【任务实施】
（1）插入第1幅图像
将光标置于标题“诺日朗群海”右侧，按 【Enter】键换行，然后选择命令【插入】→【图 像】，在弹出的【选择图像源文件】对话框中选 择images文件夹中的图像文件“t01.jpg”。
在【选择图像源文件】对话框中单击【确定】 按钮，即可在网页0301.html中插入一幅图像。
（2）打开【导入 Word 文档】对话框
将 光 标 置 于 网 页 “ 0301.html ” 中 需 要 添 加 文
网页设计与制作案例教程电子教案课件
网页设计与制作案例教程-电子教案课件第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讲解网页设计的基本原则和设计流程1.2 网页布局与排版介绍网页布局的概念和重要性讲解常用的网页布局方法和技术演示实例：制作一个简单的网页布局第二章：HTML与CSS基础2.1 HTML基础介绍HTML的概念和作用讲解HTML的基本结构和常用标签演示实例：制作一个简单的网页2.2 CSS基础介绍CSS的概念和作用讲解CSS的基本语法和常用选择器演示实例：为网页添加样式和布局第三章：图像与多媒体处理3.1 图像处理介绍图像在网页设计中的作用和重要性讲解图像的基本格式和处理方法演示实例：制作一个简单的图像轮播效果3.2 多媒体处理介绍多媒体在网页设计中的应用讲解音频和视频的嵌入方法演示实例：在网页中添加音频和视频第四章：网页交互与动画4.1 交互设计基础介绍交互设计在网页设计中的作用和重要性讲解常用的交互设计技术和方法演示实例：制作一个简单的交互式导航菜单4.2 动画与过渡效果介绍动画在网页设计中的应用和重要性讲解CSS动画和过渡效果的语法和用法演示实例：制作一个简单的CSS动画效果第五章：响应式网页设计5.1 响应式网页设计概述介绍响应式网页设计的概念和重要性讲解响应式网页设计的基本原则和方法5.2 媒体查询与网格系统讲解媒体查询的语法和用法讲解网格系统的概念和应用演示实例：制作一个响应式网页布局第六章：网页前端编程技术6.1 JavaScript基础介绍JavaScript的概念和作用讲解JavaScript的基本语法和常用语法演示实例：制作一个简单的网页交互效果6.2 jQuery库的使用介绍jQuery的概念和作用讲解jQuery的基本语法和常用方法演示实例：使用jQuery实现网页元素的动态效果第七章：网页后端技术7.1 PHP基础介绍PHP的概念和作用讲解PHP的基本语法和常用语法演示实例：制作一个简单的PHP网页7.2 MySQL数据库的使用介绍MySQL的概念和作用讲解MySQL的基本操作和常用SQL语句演示实例：使用MySQL存储和管理网页数据第八章：网页优化与性能提升8.1 网页优化概述介绍网页优化的重要性讲解网页优化的基本原则和方法8.2 提高网页性能讲解提高网页加载速度的方法讲解代码压缩和合并的技术演示实例：优化网页性能第九章：搜索引擎优化（SEO）9.1 SEO基础介绍SEO的概念和作用讲解SEO的基本原则和方法9.2 关键词研究和内容优化讲解关键词研究的方法和技巧讲解内容优化的重要性和方法演示实例：为一个网页进行SEO优化第十章：网页设计与制作的实战项目10.1 项目概述和需求分析介绍项目背景和目标分析项目需求和功能10.2 网页设计与制作流程讲解网页设计与制作的详细流程演示实例：完成一个实战项目的网页设计与制作第十一章：网页设计与制作工具11.1 网页编辑器与IDE介绍常用的网页编辑器和集成开发环境（IDE）讲解如何使用这些工具进行网页设计与制作11.2 图形设计软件介绍常用的图形设计软件及其在网页设计中的应用讲解如何使用这些工具进行网页图形设计第十二章：网页设计与制作实战技巧12.1 网页动画与特效讲解如何制作网页动画和特效演示实例：制作一个动态轮播图12.2 网页响应式设计讲解如何实现网页的响应式设计演示实例：制作一个响应式网页布局第十三章：网页安全性与维护13.1 网页安全性基础介绍网页安全性的重要性和常见安全问题讲解如何提高网页安全性13.2 网页维护与更新讲解如何进行网页的维护和更新演示实例：对一个网页进行维护和更新第十四章：网页设计与制作的案例分析14.1 案例一：企业官方网站设计分析企业官方网站的设计要求和特点讲解如何设计和制作企业官方网站14.2 案例二：电子商务网站设计分析电子商务网站的设计要求和特点讲解如何设计和制作电子商务网站第十五章：网页设计与制作的未来发展15.1 网页设计趋势与创新分析当前网页设计的趋势和创新方向讲解如何跟上网页设计的未来发展15.2 网页设计与制作的未来技术介绍未来可能影响网页设计与制作的技术讲解如何应对这些技术挑战和机遇重点和难点解析重点：1. 网页设计基础：理解网页设计原则、设计流程以及布局与排版的方法。
机工社网页设计与制作教程(HTML+CSS+JavaScript)第3版教学课件第1章 网页设计与
</head> <body>
网页内容 </body> </html>
1.3.3 HTML5编码规范
页面的HTML代码书写必须符合HTML规范。 1．HTML书写规范 2．标签的规范 3．属性的规范 4．元素的嵌套 5．代码的缩进
1.4 编辑HTML文件
1.4.1 常见的网页编辑工具 1.4.2 HTML文件的创建
1.2 Web前端开发技术简介
1.2.1 HTML5简介 1.2.2 CSS3简介 1.2.3 JavaScript简介
1.2.1 HTML5简介
HTML是HyperText Markup Language（超文本标记语言）的缩 写，是构成Web页面、表示Web页面的符号标签语言。通过HTML， 将所需表达的信息按某种规则写成HTML文件，再通过专用的浏览 器来识别，并将这些HTML文件翻译成可以识别的信息，这就是网 页。
JavaScript的开发环境很简单，不需要Java编译器，而是直接 运行在浏览器中，JavaScript通过嵌入或调入到HTML文件中实现其 功能。
1.3 HTML5的基本结构和编码规范
1.3.1 HTML5语法结构 1.3.2 HTML5文档结构 1.3.3 HTML5编码规范
1.3.1 HTML5语法结构
1.1 网页与网站的概念
1.1 网页与网站的概念
网页（Web Page）是存放在Web服务器上供客户端用户浏览 的文件，可以在Internet上传输。
根据侧重点的不同，网站（Web Site，也称站点）被定义为已 注册的域名、主页或Web服务器。网站由域名（也就是网站地址） 和网站空间构成。网站是一系列网页的组合，这些网页拥有相同或 相似的属性并通过各种链接相关联。所谓相同或相似的属性，就是 拥有相同的实现目的、相似的设计或共同描述相关的主导体。通过 浏览器，可以实现网页的跳转，从而浏览整个网站。
网页内容 </body> </html>
1.3.3 HTML5编码规范
页面的HTML代码书写必须符合HTML规范。 1．HTML书写规范 2．标签的规范 3．属性的规范 4．元素的嵌套 5．代码的缩进
1.4 编辑HTML文件
1.4.1 常见的网页编辑工具 1.4.2 HTML文件的创建
1.2 Web前端开发技术简介
1.2.1 HTML5简介 1.2.2 CSS3简介 1.2.3 JavaScript简介
1.2.1 HTML5简介
HTML是HyperText Markup Language（超文本标记语言）的缩 写，是构成Web页面、表示Web页面的符号标签语言。通过HTML， 将所需表达的信息按某种规则写成HTML文件，再通过专用的浏览 器来识别，并将这些HTML文件翻译成可以识别的信息，这就是网 页。
JavaScript的开发环境很简单，不需要Java编译器，而是直接 运行在浏览器中，JavaScript通过嵌入或调入到HTML文件中实现其 功能。
1.3 HTML5的基本结构和编码规范
1.3.1 HTML5语法结构 1.3.2 HTML5文档结构 1.3.3 HTML5编码规范
1.3.1 HTML5语法结构
1.1 网页与网站的概念
1.1 网页与网站的概念
网页（Web Page）是存放在Web服务器上供客户端用户浏览 的文件，可以在Internet上传输。
根据侧重点的不同，网站（Web Site，也称站点）被定义为已 注册的域名、主页或Web服务器。网站由域名（也就是网站地址） 和网站空间构成。网站是一系列网页的组合，这些网页拥有相同或 相似的属性并通过各种链接相关联。所谓相同或相似的属性，就是 拥有相同的实现目的、相似的设计或共同描述相关的主导体。通过 浏览器，可以实现网页的跳转，从而浏览整个网站。
网页制作教程课件4
7.2.2 链接伪类
超链接标记<a>的伪类有4种：
a:link{ CSS样式规则; }
未访问时超链接的状态；
a:visited{ CSS样式规则; } 访问后超链接的状态；
a:hover{ CSS样式规则; } 鼠标经过、悬停时超链接的状态；
a: active{ CSS样式规则; } 鼠标点击不动时超链接的状态。
7.1.2 列表的分类
列表分为无序列表、有序列表和定义列表。接下来我们就一起来学习一下这三类列表在页面中的用法。
7.1.2.1 无序列表
无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别 之分。
定义无序列表的基本语法格式如下：
每对<ul></ul>中至少应包含一对<li></li>。
7.1.2.2 有序列表
有序列表就是其各个列表项会按照一定的顺序排列的列表，例如网页中常见的新闻排行榜、游戏排行榜等都可以通过有序列表来定 义。定义有序列表的基本语法格式如下：
7.1.2.2 有序列表
在有序列表中，除了type属性之外，还可以为<ol>定义start属性、为<li>定义value属性，它们决定有序列表的项目符号，其取值 和含义如下表7-2所示。
7.2.1 超链接标记
注意:
暂时没有确定链接目标时，通常将<a>标记的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
7.2.1 超链接标记
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。 创建图像超链接时，在某些浏览器中，图像会添加边框效果，影响页面的美观。 为了不影响页面的美观，通常需要去掉图像的边框效果，使图像正常显示。去掉链接图像的边框很简单， 只需将图像的边框定义为0即可，代码如下所示：
第2章 网页版设设计与色彩搭配[101页]
![第2章 网页版设设计与色彩搭配[101页]](https://img.taocdn.com/s3/m/ce6257985fbfc77da269b1e9.png)
2.2 学习任务：网页版式设计
9．三角型 网页各视觉元素呈三角形排列。正三角形（金字塔
型）最具稳定性，倒三角形则产生动感。侧三角形构 成一种均衡版式，既安定又有动感。
《网页设计与制作案例教程》（第3版）
2.2 学习任务：网页版式设计
《网页设计与制作案例教程》（第3版）
2.2 学习任务：网页版式设计
《网页设计与制作案例教程》（第3版）
2.1 案例分析：不同风格网页作品欣赏与解析
网页作品欣赏之四：苹果公司网站首页
《网页设计与制作案例教程》（第3版）
2.1 案例分析：不同风格网页作品欣赏与解析
网页采用四横的骨骼式设计，整体色彩采用黑白灰 色调。从色彩及版式看，网站秉承了苹果创始人乔布 斯的极简风格，苹果在网页设计上并没有花费太大笔 墨。骨骼式架构是公司网站通用的架构，容易被浏览 者接受，黑白灰是永恒的时尚色。中间大块区域被主 打商品占据，产品宣传意图明显。可见，无论从版式 还是配色，无处不透露着苹果公司的文化氛围和价值 理念，很容易被苹果的粉丝所认可。
《网页设计与制作案例教程》（第3版）
2.2 学习任务：网页版式设计
2.2.3 网页的版式设计风格
1．骨骼型
是一种规范的、理性的分割方法，类似报刊的版式。 骨骼型又称为分栏式。常见的骨骼有竖向通栏、双栏、 三栏、四栏和横向的通栏、双栏、三栏和四栏等。一 般以竖向分栏为多。这种版式给人以和谐、理性的美。 几种分栏方式结合使用，既理性、条理，又活泼而富 有弹性。
《网页设计与制作案例教程》（第3版）
2.2 学习任务：网页版式设计
2.2.1 版式设计概述 网页的版式设计，是指在有限的屏幕空间内，根据
网页主题诉求，将网页元素按照一定的艺术规律进行 组织和布局，使其形成整体视觉印象，最终达到有效 传达信息的视觉设计。它以有效传达信息为目标，利 用视觉艺术规律，将网页的文字、图像、动画、音频 、视频等元素组织起来，充分体现了网页整体风格。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
返回
多个层的大小调整
47
• 选择需调整大小的多个层，然后选择“修 改/对齐”菜单中的“设成宽度相同”或 “设成高度相同”命令，则所有选择的层 将设置为最后选择层的宽度或高度，也可 在“属性”面板的“宽”、“高”文本框 中输入所需的宽度和高度值，再按Enter键， 选择的所有层将调整为设定的大小。
返回
27
返回
28
创建一个新的框架集网页的方法
保存设置框架集 编辑框架结构
返回
父框架和子框架
该图的框架就是先分成上下框架，再把下框架分成左右 框架。一般把下框架称为左右框架的父框架，则左右框架 是下框架的子框架。
29
右下框架占最大的区域，用来显示主要的网页内容，称 为主框架。
返回
设置框架与框架集的属性
36
层的基本操作
• 对层可进行选择、移动、调整大小和对齐 等操作，这些操作大多数都可在“层”面 板中进行。
37
返回
层的基本操作
• • • • • • 显示“层”面板 层的选择 层的拖动 层的对齐 层的大小调整 应用举例——利用层布局页面
38
返回
显示“层”面板
• 选择“窗口/层”命令或按F2键显示“层” 面板，“层”面板用于对层进行管理和操 作。 • 当前网页中的层都会显示在“层”面板的 列表中，嵌套层以树状结构显示。
返回
55
56
• • • •
CSS代码 将试图切换到代码状态。 认识“CSS样式”面板 选择“窗口/CSS样式”命令可在浮动面板 组打开“CSS样式”面板
返回
新建样式
1.新建样式
（1）在属性面板样式的样式菜单中选择“管理样式”，
57
在打开的编辑样式表对话框中单击“新建”按钮。
（2）使用菜单“文本”“CSS样式”“新建”。 （3）使用菜单“文本”“CSS样式”“管理样式”，在 打开的编辑样式表对话框中单击“新建”按钮。 （4）使用菜单“窗口”“CSS样式”打开“设计”面板组 中的“CSS样式”面板，单击下面的新建CSS样式按钮 （5）在编辑窗口中单击右键，在弹出的菜单中选择 “CSS样式”下的“管理样式”或“新建”。
返回
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％。
34
返回
35
返回
层的使用
在网页中插入层
1.新建一个层
（1）打开要创建层的网页。 （2）将“插入”工具栏切换到“布局”模式。 （3）单击描绘层按钮 鼠标移动到编辑窗口时变成十字形状，可以在 网页中的任意位置拖动绘制一个层的边框。 （4）在层的边框中可以插入各种网页元素，如文 字、图片、表格等。
返回
39
返回
层的选择
• 要对层进行操作和设置需先将其选择，单 个层和多个层的选择方法不同。
40
返回
1．单个层的选择
• 选择单个层有如下几种方法：
• • • • 单击所需层的边框。 在“层”面板中单击所需层的名称。 按住Shift+Ctrl键在所需层中单击。 选择层后，在“层”面板中会以反白方式显示该 层名称。
返回
52
使用CSS
CSS基础
1.什么是CSS
CSS（Cascading Style sheet）是1996年出现的有关 网页制作的技术，中文叫做级联风格页或层叠样式表。 使用CSS定义的网页风格可以控制HTML语言标志的一 些诸如字体、边框、颜色与背景等属性，也可以通过定
53
义外部风格文件实现整个网站页面风格的统一。
设置层的属性
在网页中的层的边框上单击可选中这个层，设
48
置其属性。
拖动边框上的8个控制点可改变层的大小。将鼠标 放在层边框上除控制点的其他位置，此时鼠标变成十 字箭头形状，拖动鼠标可移动层的位置。
返回
层的叠加和嵌套
1.层的叠加
使用菜单“窗口”→“层”打开层面板组 。
49
2.层的嵌套
在一个已有的层中描绘新层时按住[Alt]键可绘制
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％。
41
返回
2．多个层的选择
• 选择多个层可按住Shift键后依次在层中或 层边框上单击，也可按住Shift键后依次在 “层”面板中单击层的名称。
42
返回
层的拖动
• 选择需移动的层，将光标移到层边框上， 按住鼠标左键将其拖动到需要的位置后释 放鼠标即可。
43
返回
层的对齐
• 在设计网页过程中经常需要将层对齐。对 齐层的操作比较简单，选择需对齐的层， 选择“修改/对齐”菜单中的相应子命令即 可。层的对齐有左对齐、右对齐、对齐上 缘、对齐下缘几种方式。
现有层的嵌套层，如果不按住[Alt]键绘制的是连个
重叠的层。 在层面板中按住[Ctrl]键将一个层拖动到层列表的
另一个层上，可将其变为后者的子层。
返回
层与表格的互相转换
1. 将层转换成表格
选中要转换的层，使用菜单“修改”→“转
换”→“层到表格”打开转换层为表格对话框。
50
2.将表格转换成层
选中要转换为层的表格，使用菜单“修
32
框架“属性”面板中的基本相同，不同的
是在“行”或“列”文本框中可设置框架 的行或列的宽度，在“单位”下拉列表框 中选择单位后即可输入所需数值。
返回
框架链接的目标
1.设置网页元素的链接目标
_blank：打开一个新窗口显示目标网页。 _parent：目标网页的内容在父框架窗口中显示。 _self：目标网页的内容在当前所在框架窗口中显示。
返回
使用扩展模式布局
在工具栏上单击扩展表格模式按钮，既可切换到 “扩展表格模式” 。
扩展模式下并不是所见即所得的效果，最好不要在 单元格中添加内容，只进行页面设计操作。
21
返回
使用布局模式布局
用表格布局的页面，往往给人一种过于整齐的排列 效果，而使用“布局模式”，则可以是网页中的元素快 速、灵活地定位。 在“插入”工具栏单击“布局”按钮，进入布局模 式。
33
_top：目标网页的内容在最顶层框架窗口中显示。
2.设置网页的缺省显示区域 使用菜单“插入”“HTML”“文件头标签”“基
础”，打开“基础”对话框，在目标中可选择此网页 中超链接的默认显示窗口。Href中设置默认查找的网 络路径。
返回
一个实例
利用框架为“书香盈袖”网页布局页面，
并为其添加网页元素。
44
返回
层的大小调整
• 在网页制作过程中，通常创建的层大小都 不符合要求，需对其进行大小的调整。单 个层和多个层调整大小的方法不相同。
45
返回
单个层的大小调整
46
• 调整单个层大小只需进行如下任一操作即可： • 选择层，在“属性”面板的“宽”、“高”文本 框中输入所需的宽度和高度值，再按Enter键。 • 将光标移至层的边缘，将其拖动到所需大小后释 放鼠标。 • 按住Ctrl键再按键盘上的方向键，可以移动层的 右边框和下边框，每次调整1个像素的大小；按 住Shift+Ctrl键的同时再按键盘上的方向键可每次 调整10个像素的大小。
设置框架属性
设置框架集属性
30
返回
设置框架属性
“框架名称”文本框
“源文件”文本框
31
“滚动”下拉列表框
复选框 “边框”下拉列表框 “边框颜色”下拉列表框 “边界宽度”文本框 “边界高度”文本框
返回
设置框架集属性
选择需设置属性的框架集。
框架集“属性”面板中各设置参数含义和
META设置自定义的一组网页属性的描述。
8
2.关键字
关键字设置网页网站的一组关键字，许多搜索引擎和网站关 联性统计是通过关键字搜索网页的。
3.描述
设置对网页的一些描述，一般是网页内容的概述，供其它 开发者参考。 返回
文件头设置
4.刷新
刷新定义网也调入后延迟一段时间的动作
9
5.基础
设置网页的基准地址
页面设计
南海学院计算机系制作
网页的风格1
2
“搜狐”的主页的内容很丰富，色彩鲜艳并有 许多大幅广告和浮动广告栏。
返回
网页的风格2
3
微软中国的主页，内容比较专一，内容非 常有条理，栏目突出，没有凌乱的感觉。
返回
网页的风格3
4
“黑白音乐” 是一个个人主页，它看起来 更简单，色彩也不够丰富，但感觉非常清新。
6.链接
链接用于设置需要链接的CSS等外部文件的地址和类型。
返回
网页布局实例1
10
返回
网页布局实例2
多个层的大小调整
47
• 选择需调整大小的多个层，然后选择“修 改/对齐”菜单中的“设成宽度相同”或 “设成高度相同”命令，则所有选择的层 将设置为最后选择层的宽度或高度，也可 在“属性”面板的“宽”、“高”文本框 中输入所需的宽度和高度值，再按Enter键， 选择的所有层将调整为设定的大小。
返回
27
返回
28
创建一个新的框架集网页的方法
保存设置框架集 编辑框架结构
返回
父框架和子框架
该图的框架就是先分成上下框架，再把下框架分成左右 框架。一般把下框架称为左右框架的父框架，则左右框架 是下框架的子框架。
29
右下框架占最大的区域，用来显示主要的网页内容，称 为主框架。
返回
设置框架与框架集的属性
36
层的基本操作
• 对层可进行选择、移动、调整大小和对齐 等操作，这些操作大多数都可在“层”面 板中进行。
37
返回
层的基本操作
• • • • • • 显示“层”面板 层的选择 层的拖动 层的对齐 层的大小调整 应用举例——利用层布局页面
38
返回
显示“层”面板
• 选择“窗口/层”命令或按F2键显示“层” 面板，“层”面板用于对层进行管理和操 作。 • 当前网页中的层都会显示在“层”面板的 列表中，嵌套层以树状结构显示。
返回
55
56
• • • •
CSS代码 将试图切换到代码状态。 认识“CSS样式”面板 选择“窗口/CSS样式”命令可在浮动面板 组打开“CSS样式”面板
返回
新建样式
1.新建样式
（1）在属性面板样式的样式菜单中选择“管理样式”，
57
在打开的编辑样式表对话框中单击“新建”按钮。
（2）使用菜单“文本”“CSS样式”“新建”。 （3）使用菜单“文本”“CSS样式”“管理样式”，在 打开的编辑样式表对话框中单击“新建”按钮。 （4）使用菜单“窗口”“CSS样式”打开“设计”面板组 中的“CSS样式”面板，单击下面的新建CSS样式按钮 （5）在编辑窗口中单击右键，在弹出的菜单中选择 “CSS样式”下的“管理样式”或“新建”。
返回
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％。
34
返回
35
返回
层的使用
在网页中插入层
1.新建一个层
（1）打开要创建层的网页。 （2）将“插入”工具栏切换到“布局”模式。 （3）单击描绘层按钮 鼠标移动到编辑窗口时变成十字形状，可以在 网页中的任意位置拖动绘制一个层的边框。 （4）在层的边框中可以插入各种网页元素，如文 字、图片、表格等。
返回
39
返回
层的选择
• 要对层进行操作和设置需先将其选择，单 个层和多个层的选择方法不同。
40
返回
1．单个层的选择
• 选择单个层有如下几种方法：
• • • • 单击所需层的边框。 在“层”面板中单击所需层的名称。 按住Shift+Ctrl键在所需层中单击。 选择层后，在“层”面板中会以反白方式显示该 层名称。
返回
52
使用CSS
CSS基础
1.什么是CSS
CSS（Cascading Style sheet）是1996年出现的有关 网页制作的技术，中文叫做级联风格页或层叠样式表。 使用CSS定义的网页风格可以控制HTML语言标志的一 些诸如字体、边框、颜色与背景等属性，也可以通过定
53
义外部风格文件实现整个网站页面风格的统一。
设置层的属性
在网页中的层的边框上单击可选中这个层，设
48
置其属性。
拖动边框上的8个控制点可改变层的大小。将鼠标 放在层边框上除控制点的其他位置，此时鼠标变成十 字箭头形状，拖动鼠标可移动层的位置。
返回
层的叠加和嵌套
1.层的叠加
使用菜单“窗口”→“层”打开层面板组 。
49
2.层的嵌套
在一个已有的层中描绘新层时按住[Alt]键可绘制
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％。
41
返回
2．多个层的选择
• 选择多个层可按住Shift键后依次在层中或 层边框上单击，也可按住Shift键后依次在 “层”面板中单击层的名称。
42
返回
层的拖动
• 选择需移动的层，将光标移到层边框上， 按住鼠标左键将其拖动到需要的位置后释 放鼠标即可。
43
返回
层的对齐
• 在设计网页过程中经常需要将层对齐。对 齐层的操作比较简单，选择需对齐的层， 选择“修改/对齐”菜单中的相应子命令即 可。层的对齐有左对齐、右对齐、对齐上 缘、对齐下缘几种方式。
现有层的嵌套层，如果不按住[Alt]键绘制的是连个
重叠的层。 在层面板中按住[Ctrl]键将一个层拖动到层列表的
另一个层上，可将其变为后者的子层。
返回
层与表格的互相转换
1. 将层转换成表格
选中要转换的层，使用菜单“修改”→“转
换”→“层到表格”打开转换层为表格对话框。
50
2.将表格转换成层
选中要转换为层的表格，使用菜单“修
32
框架“属性”面板中的基本相同，不同的
是在“行”或“列”文本框中可设置框架 的行或列的宽度，在“单位”下拉列表框 中选择单位后即可输入所需数值。
返回
框架链接的目标
1.设置网页元素的链接目标
_blank：打开一个新窗口显示目标网页。 _parent：目标网页的内容在父框架窗口中显示。 _self：目标网页的内容在当前所在框架窗口中显示。
返回
使用扩展模式布局
在工具栏上单击扩展表格模式按钮，既可切换到 “扩展表格模式” 。
扩展模式下并不是所见即所得的效果，最好不要在 单元格中添加内容，只进行页面设计操作。
21
返回
使用布局模式布局
用表格布局的页面，往往给人一种过于整齐的排列 效果，而使用“布局模式”，则可以是网页中的元素快 速、灵活地定位。 在“插入”工具栏单击“布局”按钮，进入布局模 式。
33
_top：目标网页的内容在最顶层框架窗口中显示。
2.设置网页的缺省显示区域 使用菜单“插入”“HTML”“文件头标签”“基
础”，打开“基础”对话框，在目标中可选择此网页 中超链接的默认显示窗口。Href中设置默认查找的网 络路径。
返回
一个实例
利用框架为“书香盈袖”网页布局页面，
并为其添加网页元素。
44
返回
层的大小调整
• 在网页制作过程中，通常创建的层大小都 不符合要求，需对其进行大小的调整。单 个层和多个层调整大小的方法不相同。
45
返回
单个层的大小调整
46
• 调整单个层大小只需进行如下任一操作即可： • 选择层，在“属性”面板的“宽”、“高”文本 框中输入所需的宽度和高度值，再按Enter键。 • 将光标移至层的边缘，将其拖动到所需大小后释 放鼠标。 • 按住Ctrl键再按键盘上的方向键，可以移动层的 右边框和下边框，每次调整1个像素的大小；按 住Shift+Ctrl键的同时再按键盘上的方向键可每次 调整10个像素的大小。
设置框架属性
设置框架集属性
30
返回
设置框架属性
“框架名称”文本框
“源文件”文本框
31
“滚动”下拉列表框
复选框 “边框”下拉列表框 “边框颜色”下拉列表框 “边界宽度”文本框 “边界高度”文本框
返回
设置框架集属性
选择需设置属性的框架集。
框架集“属性”面板中各设置参数含义和
META设置自定义的一组网页属性的描述。
8
2.关键字
关键字设置网页网站的一组关键字，许多搜索引擎和网站关 联性统计是通过关键字搜索网页的。
3.描述
设置对网页的一些描述，一般是网页内容的概述，供其它 开发者参考。 返回
文件头设置
4.刷新
刷新定义网也调入后延迟一段时间的动作
9
5.基础
设置网页的基准地址
页面设计
南海学院计算机系制作
网页的风格1
2
“搜狐”的主页的内容很丰富，色彩鲜艳并有 许多大幅广告和浮动广告栏。
返回
网页的风格2
3
微软中国的主页，内容比较专一，内容非 常有条理，栏目突出，没有凌乱的感觉。
返回
网页的风格3
4
“黑白音乐” 是一个个人主页，它看起来 更简单，色彩也不够丰富，但感觉非常清新。
6.链接
链接用于设置需要链接的CSS等外部文件的地址和类型。
返回
网页布局实例1
10
返回
网页布局实例2