4.《网页设计与制作》：页面设计
《网页设计与制作》习题及答案
第1章网页设计基础1.网页文件不包括 ( D )A HTML文件 B多媒体文件 C图像文件 D Dos文件2.网页构成元素按照元素划分为（ABCD ）A 文本B 图像 C超链接 D音频和视频3. HTML文档结构中表示头部信息的（ B）A < body > < /body > B<head></head> c <html></html> D<title></title>4.在HTML文档中，使文本内容强制换行的标签是（B）A<hr> B<br> C<pre> D<hn>5.以下哪个标签语言符合HTML的语法规范（D）A<img src=pic.jpg width=150 height=200/>B<p><div>文字加粗</p></div>C<p align=center>D<hr width=”400” color=”#000000”>6．不属于HTML标记的是（ C ）A.<html>B.<head>C.<color>D.<body>7．为了标记一个HTML文件，应该使用的HTML标记是（ C ）A.<p></p>B.<body></body>C.<html></html >D.<title></ title>二填空1.网页分为（静态网页）和（动态网页）两种类型。
2.HTML中的所有标签都是有一对（<>）围住。
3.HTML网页的标题是通过（<title></title>）标签显示的。
4.（<hr>）是水平线标签，可以在页面生成一条水平线。
《网页设计与制作》课程标准
营销型网站建设实训课程标准课程编号：适用专业：电子商务课程类别：专业基础课程修课方式：必修教学时数：64学时总学分数：4学分一、课程定位1.课程性质《网页设计与制作》是以计算机专业为主体，辐射计算机网络技术专业、计算机应用技术专业、电子商务专业、多媒体设计与制作专业等计算机类专业的理论实践一体化课程，是计算机专业的专业基础课程，也是电子商务的一门核心技能课程。
围绕电子商务专业的培养目标，该课程的定位为：.懂专业：掌握Web国际标准基础知识；基于W3C网页设计标准，熟悉和掌握静态网页设计与制作及小型网站建设与维护的基本知识。
.精技能：掌握综合运用网页编辑软件、图像处理软件(fireworks)设计和制作网页的技能，熟练掌握DIV+CSS网页布局设计方法，能熟练运用XHTML、CSS(及后续课程JavaScript)进行网站客户端开发，熟悉Web国际标准，掌握小型网站策划、分析、设计、布局、测试的职业能力；坚持手写代码，形成良好的代码规范编写习惯。
.高素质：在课程学习中培养学习和工作的方法能力，培养与人协作和做人的社会能力。
2.课程作用《网页设计与制作》是面向“网站美工、网站维护”职业岗位的领域课程，也是满足职业岗位任职要求的基本能力课程。
通过该课程的学习，实现以下专业知识、职业能力、职业素质目标，为今后职业生涯发展打好基础。
知识目标：•熟悉和掌握静态网页设计与制作的基本知识；•掌握Web国际标准基础知识；•了解和熟悉HTML语言；•掌握静态网页设计与制作的知识；•掌握网页中DIV+CSS网页布局方法；•掌握网页中图片设计和处理、动画导入的知识；•掌握网站检查与发布的知识；•坚持手写代码，形成良好的代码规范编写习惯。
能力目标：•具备信息收集、处理、准备、加工的能力；•具备网页设计及网页中图形设计、动画导入的基本能力，能独立设计并制作一个内容完整、图文并茂、技术运用得当的小型静态网站；•具备初步的网站开发、维护和管理能力；具备独立撰写网站制作说明等技术文档的基本能力。
《网页设计与制作》习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。
2）WWW是建立在客户机／服务器模型之上的。
3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。
4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。
5）WWW浏览提供界面友好的信息查询接口。
(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。
它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。
图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。
动画：动画是动态的图形，添加动画可以使网页更加生动。
常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。
网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。
表格：在网页中使用表格可以控制网页中信息的结构布局。
超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。
表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。
其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。
《网页设计与制作》课程教案
《网页设计与制作》课程教案一、教学目标1. 了解网页设计与制作的基本概念和流程。
2. 掌握HTML、CSS和JavaScript的基本语法和应用。
3. 能够独立设计并制作一个简单的网页。
二、教学内容1. 网页设计与制作的基本概念和流程。
讲解网页设计与制作的基本概念，如网页、网页设计、网页制作等。
介绍网页设计与制作的流程，包括需求分析、页面布局、页面设计、编码实现等。
2. HTML的基本语法和应用。
讲解HTML的基本语法，如标签、属性、注释等。
通过实例演示HTML在网页中的应用，如、段落、图片、等。
3. CSS的基本语法和应用。
讲解CSS的基本语法，如选择器、属性、注释等。
通过实例演示CSS在网页中的应用，如字体样式、颜色、布局等。
4. JavaScript的基本语法和应用。
讲解JavaScript的基本语法，如变量、运算符、注释等。
通过实例演示JavaScript 在网页中的应用，如动态修改内容、响应用户事件等。
5. 设计并制作一个简单的网页。
根据所学知识，设计并制作一个简单的网页，包括页面布局、页面设计、编码实现等。
三、教学方法1. 讲授法：讲解基本概念、语法和应用。
2. 演示法：通过实例演示HTML、CSS和JavaScript在网页中的应用。
3. 实践法：学生动手实践，设计并制作一个简单的网页。
四、教学环境1. 教室环境：多媒体教学设备、网络连接。
2. 软件环境：文本编辑器、浏览器、网页设计软件。
五、教学评价1. 课堂参与度：学生参与课堂讨论、提问和回答问题的情况。
2. 课后作业：学生完成课后作业的情况，包括网页设计作品的质量和完成时间。
3. 期末考试：考查学生对网页设计与制作的基本概念、语法和应用的掌握情况。
六、教学资源1. 教材：《网页设计与制作教程》2. 辅助材料：PPT课件、实例代码、教学视频3. 网络资源：在线教程、相关论坛、网页设计素材库七、教学安排1. 课时：共计32课时，每课时45分钟2. 课程安排：第1-4课时：网页设计与制作的基本概念和流程第5-8课时：HTML的基本语法和应用第9-12课时：CSS的基本语法和应用第13-16课时：JavaScript的基本语法和应用第17-20课时：设计并制作一个简单的网页3. 课后作业：每课时布置相应的课后作业，巩固所学内容八、教学策略1. 针对不同学生的学习基础，调整教学进度和难度，确保学生能够跟上课程节奏。
网页设计与制作
第1章网站规划在建立网站之前，需了解网站的开发流程，按照项目管理模式对网站进行必要的规划、开发、测试和发布使用。
一般流程如下：1.建设网站前进行必要的市场分析。
2.明确建设网站的目的及功能定位。
3.制定网站技术解决方案。
4.根据网站的目的确定网站内容、网站结构和网站功能。
5.进行网页设计，并根据技术方案实施网站建设。
6.做出经费预算。
7.网站测试。
8.网站发布及推广。
9.网站维护。
第2章网站基础知识网站（Website），是指在因特网上根据一定的规定，使用HTML等工具制作的用于展示特定内容的相关网页的集合。
网站的组成●域名（Domain Name），是由一串用点分隔的字母组成的Internet上某一台计算机或计算机组的名称。
●空间，常见网站空间有虚拟主机、虚拟空间、独立服务器、VPS。
●程序，即建设与修改网站所使用的编程语言，换成源码就是一堆按一定格式书写的文字和符号。
●网页网页（Web page），是网站中的任意一个页面，通常是HTML格式，文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等。
●基本构成元素：文字、图像、超级链接。
●阅读方式：浏览器。
●类型：以不同的后缀代表不同类型的网页文件。
通常分为静态页面、动态页面。
动态网页（active web page）：指网页内容可根据用户的不同请求从而返回其对应的数据，一般情况下动态网页通过数据库进行架构，一般文件名均以开发语言做后缀，如php、asp等。
也可以说凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。
静态网页：指全部由HTML标记页面，页面的内容和显示效果基本不发生变化，所有的内容包含在网页文件中。
一般文件名均以htm、html、shtml等为后缀。
术语WWW（World Wide Web），亦称作“Web”、“WWW”、“'W3'”，中文名字为“万维网”，"环球网"等，常简称为Web。
网页设计与制作课程教学大纲
《网页设计与制作》课程教学大纲1000字一、课程名称：网页设计与制作二、课程性质：专业选修三、先修课程：计算机基础、HTML语言基础、CSS样式基础、JavaScript基础四、课程目的：本课程旨在培养学生熟练掌握网页设计和制作所需的技能和知识，包括从网站设计和规划到页面布局和导航、从图像和多媒体素材的处理到网页代码开发的全过程。
五、教学内容：1.网站设计和规划（1）需求分析与目标设定（2）信息架构设计（3）网站页面设计2.页面布局与导航（1）CSS样式技术（2）网页布局设计（3）导航设计3.视觉设计（1）颜色与图像设计（2）多媒体素材处理（3）响应式设计技术4.网页代码开发（1）HTML语言与标签（2）CSS样式（3）JavaScript脚本5.网页制作（1）网页编辑器使用（2）网页调试与测试（3）网页发布和维护六、教学方法：课堂讲授、案例分析、实践操作、课程论文七、成绩评定方式：平时成绩占30%，包括参与度、作业完成度等；考试成绩占70%。
八、教材：1.《Web页面设计基础》2.《HTML5与CSS3基础教程》3.《JavaScript权威指南》九、参考资料：1.《Web标准设计》2.《响应式Web设计》3.《图解CSS3》4.《实战Bootstrap》十、实验操作：实践操作是课程的重要组成部分。
通过实验操作，学生将掌握网页设计和制作的实际技能和经验。
实验操作包括：1.网站规划和设计2.网页布局与导航3.视觉设计和处理4.网页代码开发和调试5.网页发布和维护十一、教学进度安排：第一周：课程介绍和网站设计和规划第二周：网页布局与导航第三周：视觉设计和处理第四周：HTML语言与标签第五周：CSS样式第六周：JavaScript脚本第七周：网页编辑器使用第八周：网页调试与测试第九周：网页发布和维护第十周：课程总结和复习，期末考试。
《网页设计与制作》实验一 经典页面赏析+实验报告
实验一经典页面赏析
实训任务：
通过经典页面的赏析，对网页的构成形成初步印象。
1、任务目标
通过学习，你应当能够
①赏析各种经典网页，了解各种类型网页的布局结构、色彩搭配；
②对网页的布局结构、色彩搭配形成初步印象。
2、引导问题
①色系：网页的底色、文字字型、图片的色系、颜色等等。
②排版：表格、框架的应用、文字缩排、段落等等。
3、任务指导
请分析如右图所示网页的布局结构及其配色。
完成任务的步骤：
第一步，分析页面的布局；第二步，分析页面的配色。
学生实验报告XXX学院学生实验报告。
《网页设计与制作》笔记_学习笔记
《网页设计与制作》笔记第一章：网页设计基础1.1网页设计的定义与重要性1.2网页设计的历史与发展1.3设计原则与最佳实践1.4用户体验的基本概念第二章：网页设计工具与技术2.1设计软件介绍（如Photoshop、Sketch）2.2前端开发工具（如HTML、CSS、JavaScript）2.3响应式设计与框架（如Bootstrap、Foundation）2.4版本控制与协作工具（如Git、GitHub）第三章：网页布局与结构3.1网页布局的基本概念3.2网格系统与布局设计3.3导航设计与信息架构3.4模块化设计与组件化开发第四章：色彩与字体选择4.1色彩理论与配色技巧4.2字体的选择与排版4.3色彩与品牌形象4.4可访问性与色彩使用第五章：网页内容与互动5.1内容策略与信息呈现5.2图像与多媒体的使用5.3互动设计与用户反馈5.4SEO基础与内容优化第六章：网页测试与上线6.1测试类型与测试工具6.2性能优化与加载速度6.3上线流程与维护建议6.4数据分析与用户行为追踪第1章：网页设计基础网页设计的定义与重要性网页设计是指为网站创建和布局视觉内容的过程。
这包括网页的整体外观、结构和交互功能。
网页设计不仅涉及视觉元素的排版和配色，还包括用户如何与网页互动。
一个好的网页设计能够提升用户的体验，增加网站的访问量和转化率。
重要性：1.吸引用户：优秀的网页设计能够第一时间吸引用户的注意，提高用户的留存率。
2.增加可用性：良好的设计帮助用户更容易找到他们所需的信息，减少用户的挫败感。
3.提升品牌形象：专业的网页设计能够增强品牌的可信度和专业形象。
4.搜索引擎优化：设计良好的网页更容易被搜索引擎抓取，从而提升网站在搜索结果中的排名。
考试要点：网页设计的定义及其组成部分网页设计对用户体验和品牌形象的影响网页设计在市场营销中的作用网页设计的历史与发展网页设计的起源可以追溯到20世纪90年代初。
当时网页主要是以文本为主，简单的超链接连接不同的信息。
《网页设计与制作》页面设计免费学技术改变生活
框架与框架集的概念
• 用框架布局网页时有如下的技巧和规则：
• • 创建好框架或框架集后可对其属性进行设置。 每个框架就是不同的HTML网页，我们需要
26
分别保存每个框架文件和框架集文件。
• 确保文件中的每个链接都正确。
使用框架布局
框架集网页
1.创建一个新的框架集网页
创建框架网页前先要让框架边框显示。在“文档” 工具栏的最右边单击视图选项按钮 在弹出的菜单中选择“可视化助理”→“框架边 框”，使得框架边框被选中。
多个层的大小调整
47
• 选择需调整大小的多个层，然后选择“修 改/对齐”菜单中的“设成宽度相同”或 “设成高度相同”命令，则所有选择的层 将设置为最后选择层的宽度或高度，也可 在“属性”面板的“宽”、“高”文本框 中输入所需的宽度和高度值，再按Enter键， 选择的所有层将调整为设定的大小。
设置层的属性
44
层的大小调整
• 在网页制作过程中，通常创建的层大小都 不符合要求，需对其进行大小的调整。单 个层和多个层调整大小的方法不相同。
45
单个层的大小调整
46
• 调整单个层大小只需进行如下任一操作即可： • 选择层，在“属性”面板的“宽”、“高”文本 框中输入所需的宽度和高度值，再按Enter键。 • 将光标移至层的边缘，将其拖动到所需大小后释 放鼠标。 • 按住Ctrl键再按键盘上的方向键，可以移动层的 右边框和下边框，每次调整1个像素的大小；按 住Shift+Ctrl键的同时再按键盘上的方向键可每次 调整10个像素的大小。
58
重定义标签的外观 新建样式——选择器类型——标签 使用类定义样式 新建CSS样式——选择器类型——类 使用伪类定义超级链接的样式 新建CSS样式——选择器类型——高级 a:link、a:visited、a:hover、a:active
DreamweaverMX网页设计与制作第4章有声有色的页面效果课件
如果想在浏览器中访问更多类型的媒体对 象，就必须借助于插件，前面所介绍的 Shockwave就是插件中的一员。插件的类 型主要有对象类、命令类、行为类、组件 类4种，我们常使用的是对象类插件。
生活家饮食保健孕期选择食用油的学 问邢台 市第四 病院罕 见护理 应急预 案猪气 喘病综 合防制 技术动 物营养 系列理 想蛋白 与氨基 酸模式 的研究 进展皮 肤病的 诊断包 括病史 体格检 查和必 要的实 验室检 查我国 有关食 物添加 剂营养 强化剂 食物新 资本的 治理律 例与标 准
Dreamweaver MX自带 网络下载 从素材库导入 自己制作
生活家饮食保健孕期选择食用油的学 问邢台 市第四 病院罕 见护理 应急预 案猪气 喘病综 合防制 技术动 物营养 系列理 想蛋白 与氨基 酸模式 的研究 进展皮 肤病的 诊断包 括病史 体格检 查和必 要的实 验室检 查我国 有关食 物添加 剂营养 强化剂 食物新 资本的 治理律 例与标 准
插入Shockwave影片 插入Applet 插入ActiveX控件
生活家饮食保健孕期选择食用油的学 问邢台 市第四 病院罕 见护理 应急预 案猪气 喘病综 合防制 技术动 物营养 系列理 想蛋白 与氨基 酸模式 的研究 进展皮 肤病的 诊断包 括病史 体格检 查和必 要的实 验室检 查我国 有关食 物添加 剂营养 强化剂 食物新 资本的 治理律 例与标 准
生活家饮食保健孕期选择食用油的学 问邢台 市第四 病院罕 见护理 应急预 案猪气 喘病综 合防制 技术动 物营养 系列理 想蛋白 与氨基 酸模式 的研究 进展皮 肤病的 诊断包 括病史 体格检 查和必 要的实 验室检 查我国 有关食 物添加 剂营养 强化剂 食物新 资本的 治理律 例与标 准
《网页设计与制作》
1.3 网站建设流程
设计 开发
规划
要建设一个优秀的网站，通常应
该遵循以下工作流程：确定站点的核
心－网站的规划－网站外观的设计－
网页具体制作－网站性能测试－网站
发布－网站更新与维护。
发布
维护
网站规划 一个网站的成功与否与建站前的网站规划有着极为重要
的关系。在建立网站前应明确建设网站的目的，确定网站 的功能，确定网站规模、投入费用，进行必要的市场分析 等。只有详细的规划，才能防止在网站建设中出现的很多 问题，使网站建设能顺利进行。
域名 Com Edu Gov Int Mil Net Org
域名机构 商业机构 教育机构 政府部门 国际性机构
军队 网络机构 非盈利机构
附注：全称 Commercial organization
Educational institution government
International organization military
常用的协议名如下： HTTP：超文本传输协议，用于转换网页。 FTP：文件传输协议，主要用于传输文件，许多提供软件下载
的网站使用“FTP〞作为下载的网址。 MAILTO：传送E-mail协议，主要用于传输电子邮件。 例如：
网页与网站 构建WWW的根本单位是网页。网页中包含所谓的“超链
接〞，通过已经定义好的关键字和图形，只要用鼠标轻轻一 点，就可以自动跳转到相应的其它文件，获得相应的信息， 从而实现网页之间的链接，从而构成了WWW的纵横交织 的网状结构。
通过超链接连接起来的一系列逻辑上可以视为一个整体的 页面，那么叫做网站。
网站的概念是相对的，大能分布于多台效劳器上；小的如一些个人网 站，可能只有几个页面，仅在某台WEB效劳器的占据很小 的空间。
网页美工-网页设计与制作
度考虑页面的全面性，避免头重脚轻。设计者往往容易忽视页脚，但页脚放置的 基本都是联系信息、链接网站、版权声明等重要内容，所以简洁、明了又富有创 意性是整个页面完整、美观的重要因素。
第一章
设计时应注意以下几点：
1.有良好的视觉层次： 访客阅读文章时需要的不是一屏到底，而是段落分明的层次感，先是标题，然后正文、
国际广告局的“标准与管理委员会”联合广告支持信息和娱乐联合会等国际 组织，推出了一系列网络广告宣传物的标准尺寸，被称作“IAC/CASIE”标准， 共包括7种标准的Banner尺寸。
在众多商业网站中，通常都会遵循以上标准定义Banner的尺寸，方便用户设 计统一的Banner，应用在所有网站上。然而，在一些不依靠广告位出租赢利的网 站中，Banner的大小则比较自由。网页设计者完全可以根据网站内容以及页面美 观的需要随时调整Ban设计的手法有很多，其中之一就是将导航菜单设计成纵向的。垂直
的导航设计并不是简单的将横向变为纵向，而是需要结合内容重新思考整个网站 的布局和空间的使用。
这种排版最流行的有两种，一种是隐藏式导航菜单，另外一种使用的是固定 的侧边栏来承载菜单 。它在色彩运用上一般使用与网页色调相柔和、协调的颜色， 既能起到很好的交互作用，又不喧宾夺主。第二种菜单的有趣之处在于，它为网站 设计提供了一种新的视觉设计可能性。同时，这种导航在小屏幕上可以做成悬停隐 藏式菜单栏（图悬停隐藏式菜单栏），需要的时候点击显示，它在色彩的运用上没 有太多的限制，使用鲜明或柔和的色彩均可，但在设计时注意导航栏的色彩设计必 须与网页整体色彩相协调。
1.1.1 网站LOGO 网站Logo是整个网站对外唯一的标识和标志，是网站商标和
网页设计与制作项目教程项目4“青春树儿童摄影网”首页制作
下面，将对盒子模型的相关属性进行详细讲解。
【任务4-2】 盒子模型相关属性
1.
边框属性
为了分割页面中不同的盒子，常常需要给元素设置边框效果。
设置内容 边框样式 样式属性 border-style:上边 [右边 下边 左边]; 常用属性值 none无（默认）、solid单实线、dashed虚线、 dotted点线、double双实线 像素值 颜色值、#十六进制、rgb(r,g,b)、 rgb(r%,g%,b%)
border-left:左边框宽度 样式 颜色;
border:四边宽度 样式 颜色;
注意：宽度、样式、颜色顺序任意，不分先后
border:宽度,样式,颜色
【任务4-2】 盒子模型相关属性
2.
内边距属性
内边距 外边距
CSS的边距属性包括“内边距”和“外边距”两种
内边距（内填充） padding-top:上边距;
含义 沿水平和竖直两个方向平铺（默认值） 不平铺（图像位于元素的左上角，只显示一次） 只沿水平方向平铺 只沿竖直方向平铺
repeat no-repeat repeat-x repeat-y
【任务4-2】 盒子模型相关属性
4.
背景属性
background-position图像位置属性
位置属性取值
单位数值 预定义的关键字
margin-top:上外边距; margin-right:右外边距; margin-bottom:下外边
距;
margin:5px 3px /*上下外边距为5 像素，左右外边距为3像素*/
margin:5px 3px 4px /*外边距： 上为5像素，左右为3像素，下为4像 素*/
margin-left:左外边距; margin:四边外边距;
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
6.链接
链接用于设置需要链接的CSS等外部文件的地址和类型。
返回
网页布局实例1
10
返回
网页布局实例2
11
返回
网页布局实例3
12
标题正文型结构的顶端是网站标识和标题 ，下面是网页正文。内容非常简单。
返回
网页布局实例4
13
返回
网页布局实例5
14
返回
网页布局实例6
15
返回
16
网页的版面布局
返回
多个层的大小调整
47
• 选择需调整大小的多个层，然后选择“修 改/对齐”菜单中的“设成宽度相同”或 “设成高度相同”命令，则所有选择的层 将设置为最后选择层的宽度或高度，也可 在“属性”面板的“宽”、“高”文本框 中输入所需的宽度和高度值，再按Enter键， 选择的所有层将调整为设定的大小。
返回
重复上述操作，再次插入两个新层。这样 在该单元格中共插入三个层，我们将图片移到 在左上方的层中，文字移到右上方和下面的层 中。 单击该标记可以选中其所对应的层。单击层 的外围框线，选中层。将鼠标指针移动到框线 上，拖动鼠标，更改层的大小为图像大小。 调整文字的字 号和字体 ，以 及层的位置， 实现图文混排 。
41
返回
2．多个层的选择
• 选择多个层可按住Shift键后依次在层中或 层边框上单击，也可按住Shift键后依次在 “层”面板中单击层的名称。
42
返回
层的拖动
• 选择需移动的层，将光标移到层边框上， 按住鼠标左键将其拖动到需要的位置后释 放鼠标即可。
43
返回
层的对齐
• 在设计网页过程中经常需要将层对齐。对 齐层的操作比较简单，选择需对齐的层， 选择“修改/对齐”菜单中的相应子命令即 可。层的对齐有左对齐、右对齐、对齐上 缘、对齐下缘几种方式。
返回
本章要点
设置网页属性
页面布局
5
使用框架布局
层的使用 使用CSS
CSS属性
返回
6
网页标题
如果文档工具栏没有显示，使用菜单“查看”→“工 具”→“文档”可打开其显示。
返回
页面设置
• • • • • 1．外观 2．链接 3．标题 4．标题/编码 5．跟踪图像
7
返回
文件头设置
1.META
页面设计
南海学院计算机系制作
网页的风格1
2
“搜狐”的主页的内容很丰富，色彩鲜艳并有 许多大幅广告和浮动广告栏。
返回
网页的风格2
3
微软中国的主页，内容比较专一，内容非 常有条理，栏目突出，没有凌乱的感觉。
返回
网页的风格3
4
“黑白音乐” 是一个个人主页，它看起来 更简单，色彩也不够丰富，但感觉非常清新。
返回
CSS的作用
54
（1）将格式和结构分离
（2）更容易控制页面的布局 （3）可以制作出体积更小下载更快的网页 （4）可以更快更容易地维护及更新大量的网页
（5）良好的浏览器兼容性
返回
• • • • • • • • •
编辑——首选参数——常规——使用CSS 实例1 第一段文字大小24，颜色红色。 第2段文字设置为大小12，颜色绿色，加 粗。 选中第3段文字，大小style1 选中第4段文字，大小style2 对style1进行重命名，名称为redbig 试删除一个样式 选中一个样式，将其加上背景。
设置层的属性
在网页中的层的边框上单击可选中这个层，设
48
置其属性。
拖动边框上的8个控制点可改变层的大小。将鼠标 放在层边框上除控制点的其他位置，此时鼠标变成十 字箭头形状，拖动鼠标可移动层的位置。
返回
层的叠加和嵌套
1.层的叠加
使用菜单“窗口”→“层”打开层面板组 。
49
2.层的嵌套
在一个已有的层中描绘新层时按住[Alt]键可绘制
返回
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％。
返回
使用扩展模式布局
在工具栏上单击扩展表格模式按钮，既可切换到 “扩展表格模式” 。
扩展模式下并不是所见即所得的效果，最好不要在 单元格中添加内容，只进行页面设计操作。
21
返回
使用布局模式布局
用表格布局的页面，往往给人一种过于整齐的排列 效果，而使用“布局模式”，则可以是网页中的元素快 速、灵活地定位。 在“插入”工具栏单击“布局”按钮，进入布局模 式。
34
返回
35
返回
层的使用
在网页中插入层
1.新建一个层
（1）打开要创建层的网页。 （2）将“插入”工具栏切换到“布局”模式。 （3）单击描绘层按钮 鼠标移动到编辑窗口时变成十字形状，可以在 网页中的任意位置拖动绘制一个层的边框。 （4）在层的边框中可以插入各种网页元素，如文 字、图片、表格等。
返回
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％。
36
层的基本操作
• 对层可进行选择、移动、调整大小和对齐 等操作，这些操作大多数都可在“层”面 板中进行。
37
返回
层的基本操作
• • • • • • 显示“层”面板 层的选择 层的拖动 层的对齐 层的大小调整 应用举例——利用层布局页面
38
返回
显示“层”面板
• 选择“窗口/层”命令或按F2键显示“层” 面板，“层”面板用于对层进行管理和操 作。 • 当前网页中的层都会显示在“层”面板的 列表中，嵌套层以树状结构显示。
现有层的嵌套层，如果不按住[Alt]键绘制的是连个
重叠的层。 在层面板中按住[Ctrl]键将一个层拖动到层列表的
另一个层上，可将其变为后者的子层。
返回
层与表格的互相转换
1. 将层转换成表格
选中要转换的层，使用菜单“修改”→“转
换”→“层到表格”打开转换层为表格对话框。
50
2.将表格转换成层
选中要转换为层的表格，使用菜单“修
改”→“转换”→“表格到层”打开转换表格为层 对话框。
返回
使用层实现图文混排1
使光标出现在编辑区中，移动鼠标指针到“ 插入”面板的“常用”选项卡中，单击描绘层 按钮。在网页编辑区中拖动鼠标，画出一个区 域，该区域即为插入层的大小。
注意，每插 入一个新层，在 网页顶端就会增 加一个层标记，
51
返回
使用层实现图文混排2
返回
框架与框架集的概念
• 用框架布局网页时有如下的技巧和规则：
• • 创建好框架或框架集后可对其属性进行设置。 每个框架就是不同的HTML网页，我们需要
26
分别保存每个框架文件和框架集文件。
• 确保文件中的每个链接都正确。
返回
使用框架布局
框架集网页
1.创建一个新的框架集网页
创建框架网页前先要让框架边框显示。在“文档” 工具栏的最右边单击视图选项按钮 在弹出的菜单中选择“可视化助理”→“框架边 框”，使得框架边框被选中。
META设置自定义的一组网页属性的描述。
8
2.关键字
关键字设置网页网站的一组关键字，许多搜索引擎和网站关 联性统计是通过关键字搜索网页的。
3.描述
设置对网页的一些描述，一般是网页内容的概述，供其它 开发者参考。 返回
文件头设置
4.刷新
刷新定义网也调入后延迟一段时间的动作
9
5.基础
设置网页的基准地址
27
返回
28
创建一个新的框架集网页的方法
保存设置框架集 编辑框架结构
返回
父框架和子框架
该图的框架就是先分成上下框架，再把下框架分成左右 框架。一般把下框架称为左右框架的父框架，则左右框架 是下框架的子框架。
29
右下框架占最大的区域，用来显示主要的网页内容，称 为主框架。
返回
设置框架与框架集的属性
44
返回
层的大小调整
• 在网页制作过程中，通常创建的层大小都 不符合要求，需对其进行大小的调整。单 个层和多个层调整大小的方法不相同。
45
返回
单个层的大小调整
46
• 调整单个层大小只需进行如下任一操作即可： • 选择层，在“属性”面板的“宽”、“高”文本 框中输入所需的宽度和高度值，再按Enter键。 • 将光标移至层的边缘，将其拖动到所需大小后释 放鼠标。 • 按住Ctrl键再按键盘上的方向键，可以移动层的 右边框和下边框，每次调整1个像素的大小；按 住Shift+Ctrl键的同时再按键盘上的方向键可每次 调整10个像素的大小。
返回
55
56
• • • •
CSS代码 将试图切换到代码状态。 认识“CSS样式”面板 选择“窗口/CSS样式”命令可在浮动面板 组打开“CSS样式”面板