第5章 网页布局
几种常见的网页布局形式
几种罕有的网页计划形式之五兆芳芳创作网页罕有的计划结构有“国”字形计划、“匡”字形计划、“三”字形计划、“川”字形计划、封面型计划、Flash计划、题目文本型计划、框架型计划和变更型计划等.1.“国”字形计划也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的题目以及横幅告白条，接下来就是网站的主要内容，左右排列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些根本信息、联系方法、版权声明等.这种结构是我们在网上见到的差未几最多的一种结构类型.2.“匡”字形计划这种结构与上一种其实只是形式上的区别，它去掉了“国”字形计划的最右边的部分，给主内容区释放了更多空间.这种计划上面是题目及告白横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的帮助信息.3.“三”字形计划这是一种简练明快的网页计划，在国外用的比较多，国际比较少见.这种计划的特点是在页面上由横向两条色块将网页整体联系为3部分，色块中大多放置告白条与更新和版权提示.如图所示便是一种三字形计划的网页.4.“川”字形计划整个页面在垂直标的目的分为三列，网站的内容按栏目散布在这三列中，最大限度地突出主页的索引功效.如图1-19所示的“Beijing 2008”网站就是一种川字形的计划.这种类型根本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个复杂的链接或仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示.这种类型大部分出现在企业网站和团体主页，如果说处理的好，会给人带来赏心悦目的感到.6.Flash计划这种计划是指整个网页就是一个Flash动画，它自己就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的计划方法.其实这种计划与封面型结构是类似的，不合的是由于Flash强大的功效，页面所表达的信息更丰厚.其视觉效果及听觉效果如果处理得当，会是一种很是有魅力的计划.题目文本型计划是指页面内容以文本为主，这种类型页面最上面往往是题目或类似的一些东西，下面是正文，比方一些文章页面或注册页面等就是这一类.采取框架计划结构，罕有的有左右框架型、上下框架型和综合框架型.由于兼容性和美不雅等因素，这种计划目前专业设计人员采取的已未几，不过在一些大型论坛上仍是比较受青睐的，有些企业网站也有应用.即上述几种类型的结合与变更.第5章_网页计划。
《HTML+CSS网页设计与布局》教案
《HTML+CSS网页设计与布局》教案第一章：HTML基础1.1 教学目标了解HTML的基本概念和作用掌握HTML的基本语法和结构学会使用HTML编写简单的网页1.2 教学内容HTML简介HTML基本语法HTML标签及其属性常用的HTML标签1.3 教学过程讲解HTML的基本概念和作用演示HTML的基本语法和结构示例：编写一个简单的HTML网页学生练习：编写自己的HTML网页1.4 课后作业复习HTML的基本语法和结构练习使用HTML编写简单的网页第二章：CSS基础2.1 教学目标了解CSS的基本概念和作用掌握CSS的基本语法和选择器学会使用CSS样式化网页元素2.2 教学内容CSS简介CSS基本语法CSS选择器常用的CSS属性2.3 教学过程讲解CSS的基本概念和作用演示CSS的基本语法和选择器示例：使用CSS样式化网页元素学生练习：使用CSS样式化自己的HTML网页2.4 课后作业复习CSS的基本语法和选择器练习使用CSS样式化网页元素第三章：网页布局基础3.1 教学目标了解网页布局的基本概念和原则掌握使用HTML和CSS进行网页布局的方法学会使用浮动和定位实现网页布局3.2 教学内容网页布局概述使用HTML进行网页布局使用CSS进行网页布局浮动和定位3.3 教学过程讲解网页布局的基本概念和原则演示使用HTML和CSS进行网页布局的方法示例：使用浮动和定位实现网页布局学生练习：使用浮动和定位实现自己的网页布局3.4 课后作业复习网页布局的基本概念和原则练习使用HTML和CSS进行网页布局第四章：响应式网页设计4.1 教学目标了解响应式网页设计的基本概念和原则掌握使用CSS媒体查询实现响应式网页设计的方法学会使用Bootstrap框架进行响应式网页设计4.2 教学内容响应式网页设计概述使用CSS媒体查询实现响应式网页设计使用Bootstrap框架进行响应式网页设计4.3 教学过程讲解响应式网页设计的基本概念和原则演示使用CSS媒体查询实现响应式网页设计的方法示例：使用Bootstrap框架进行响应式网页设计学生练习：使用Bootstrap框架进行自己的响应式网页设计4.4 课后作业复习响应式网页设计的基本概念和原则练习使用CSS媒体查询实现响应式网页设计第五章：网页设计与布局实践5.1 教学目标综合运用HTML、CSS和网页布局技术，设计和实现一个完整的网页掌握网页设计和布局的流程和技巧学会使用网页设计和布局工具，如Sublime T ext、Visual Studio Code等5.2 教学内容网页设计与布局流程使用网页设计和布局工具实践项目：设计和实现一个完整的网页5.3 教学过程讲解网页设计与布局的流程和技巧演示使用网页设计和布局工具示例：设计和实现一个完整的网页学生练习：设计和实现自己的网页5.4 课后作业复习网页设计与布局的流程和技巧练习使用网页设计和布局工具完成实践项目：设计和实现一个完整的网页第六章：HTML高级应用6.1 教学目标理解HTML5的新特性掌握使用HTML5新增的语义标签学会使用Canvas和SVG进行图形绘制掌握多媒体的使用和音频视频控制6.2 教学内容HTML5简介新增的语义标签Canvas和SVG的使用多媒体标签：audio和video6.3 教学过程讲解HTML5的新特性和意义演示新增语义标签的使用示例：使用Canvas绘制图形示例：使用SVG绘制图形学生练习：结合audio和video标签制作多媒体网页6.4 课后作业复习HTML5的新特性和语义标签练习使用Canvas和SVG绘制图形尝试制作一个包含音频视频的HTML5网页第七章：CSS3高级应用7.1 教学目标理解CSS3的重要性掌握CSS3的新特性学会使用伪元素和伪类掌握过渡动画和转换效果7.2 教学内容CSS3简介CSS3新特性伪元素和伪类的使用过渡和动画7.3 教学过程讲解CSS3的重要性和新特性演示伪元素和伪类的应用示例：制作简单的过渡动画示例：使用keyframes制作复杂的动画学生练习：设计并实现一个带有动画效果的CSS3样式7.4 课后作业复习CSS3的新特性和伪元素练习使用CSS3制作过渡动画尝试设计一个创意的动画效果并实现第八章：网页设计规范与最佳实践8.1 教学目标理解网页设计规范的重要性掌握Web标准和安全性的原则学会遵循最佳实践进行网页设计了解网站无障碍性（Accessibility）8.2 教学内容网页设计规范概述Web标准和无障碍性最佳实践案例分析网站性能优化8.3 教学过程讲解网页设计规范的意义和重要性演示遵循Web标准的设计案例讨论最佳实践在网页设计中的应用示例：进行网站性能优化的基本操作学生练习：根据设计规范和最佳实践，对一个网页进行优化8.4 课后作业复习网页设计规范和Web标准学习并实践网站无障碍性的基本原则尝试对一个网页进行性能优化第九章：前端框架与库9.1 教学目标理解前端框架和库的作用掌握流行的前端框架和库学会使用框架和库提高网页开发效率了解框架和库的原理和适用场景9.2 教学内容前端框架和库的介绍Bootstrap、jQuery和React的基本使用框架和库的选择依据框架和库的优缺点比较9.3 教学过程讲解前端框架和库的概念和优势演示Bootstrap、jQuery和React的基本用法讨论在不同项目中选择框架和库的策略学生练习：选择一个前端框架或库，完成一个简单的项目9.4 课后作业复习前端框架和库的基本概念学习至少一个新框架或库的基本用法尝试使用前端框架或库完成一个个人项目第十章：网页设计与布局项目实战10.1 教学目标综合运用所学知识和技能掌握项目开发的流程和方法学会团队协作和版本控制培养解决实际问题的能力10.2 教学内容项目开发流程概述团队协作与版本控制工具实战项目介绍与分析项目实战与展示10.3 教学过程讲解项目开发的基本流程和方法演示使用Git等版本控制工具进行团队协作分析并介绍实战项目的需求和设计学生分组实践，完成实战项目项目展示与点评10.4 课后作业复习项目开发流程和团队协作工具参与实战项目，完成分配的任务准备项目展示的PPT和演讲稿重点和难点解析重点环节一：HTML基本语法和结构理解HTML的基本概念和作用掌握HTML的基本语法和结构学会使用HTML编写简单的网页重点环节二：CSS基本语法和选择器理解CSS的基本概念和作用掌握CSS的基本语法和选择器学会使用CSS样式化网页元素重点环节三：网页布局基础了解网页布局的基本概念和原则掌握使用HTML和CSS进行网页布局的方法学会使用浮动和定位实现网页布局重点环节四：响应式网页设计了解响应式网页设计的基本概念和原则掌握使用CSS媒体查询实现响应式网页设计的方法学会使用Bootstrap框架进行响应式网页设计重点环节五：HTML高级应用理解HTML5的新特性掌握使用HTML5新增的语义标签学会使用Canvas和SVG进行图形绘制掌握多媒体的使用和音频视频控制重点环节六：CSS3高级应用理解CSS3的重要性掌握CSS3的新特性学会使用伪元素和伪类掌握过渡动画和转换效果重点环节七：网页设计规范与最佳实践理解网页设计规范的重要性掌握Web标准和安全性的原则学会遵循最佳实践进行网页设计了解网站无障碍性（Accessibility）重点环节八：前端框架与库理解前端框架和库的作用掌握流行的前端框架和库学会使用框架和库提高网页开发效率了解框架和库的原理和适用场景重点环节九：网页设计与布局项目实战综合运用所学知识和技能掌握项目开发的流程和方法学会团队协作和版本控制培养解决实际问题的能力本教案涵盖了HTML、CSS和网页布局的基础知识，从HTML的基本语法和结构，到CSS的基本语法和选择器，再到网页布局的基础知识和实践，接着是响应式网页设计和高级应用，是前端框架与库的使用以及项目实战。
HTML+CSS+JavaScript网站开发实用技术第5章
5.1 CSS盒模型
盒模型由内到外依次分为内容(content)，填充 (padding)，边框(border)和边界(margin) 四部分。
5.1 CSS盒模型
5.1.1 内容(content) 内容是盒模型中必须有的部分。 内容的大小由属性宽度和高度定义，格式： width: auto | length; height: auto | length; 示例： demo0501.html demo0502.html
5.2.2 浮动属性(float) float属性可以控制盒子左右浮动，直到边界碰到 父对象或另一个浮动对象。 float:none|left|right; none：默认值，元素不浮动； left：元素向父对象的左侧浮动； right：元素向父对象的右侧浮动；
第5章 使用DIV+CSS 实现精美布局
1
2 3 4
CSS盒模型 CSS布局常用属性
DIV+CSS网页布局S盒模型
盒模型是CSS控制页面的一个非常重要的概念. 页面上的所有元素，包括文本、图像、超级链接 、DIV块等，都可以被看作盒子。 盒子将页面中的元素包含在一个矩形区域内，这 个矩形区域则称为“盒模型”。 网页页面布局的过程，可以看作在页面空间中摆 放盒子的过程。
5.1 CSS盒模型
2．边框宽度 边框宽度用border-width属性描述，值可以是 关键字medium、thin、thick或长度值或百分比 。 3．边框颜色 边框颜色用border-color属性描述，值同 color属性，可以是RGB值，颜色名等。 demo0505.html demo0506.html
5.2 CSS布局常用属性
4．层叠定位属性(z-index) 可以通过层叠定位属性(z-index)定义页面元素 的层叠次序。z-index的取值为可以为负的数， 表示各元素间层次关系，值大者在上，当为负 数时表示该元素位于页面之下。 示例 demo0510.html
第5章 制作表格、表单
• • • • • • • 本章要点 · 创建表格、表单与框架的方法 · 设置表格以及单元格的属性 · 编辑表单以及处理表单 · 设置框架属性并制作框架网页 本章主要介绍了网页页面布局工具――表格和框架，以及作为收集信息使用的表单。 表格是网页中一种用途非常广泛的工具，它不仅可以有序地排列数据，还表现在它可以精确 地定位文本、图像及其他网页中的元素是网页布局排版不可缺少的工具。 表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，被广泛用于各种信息的 搜集和反馈。 框架网页是一种网页，当在浏览器中显示时，每个框架都可以显示不同的网页。框架网页本 身并不包括可见内容，它只是一个容器，用于指定要在框架中显示的其他网页以及显示方式。 5.1 表格 表格是网页中一种用途非常广泛的工具，它不仅可以有序地排列数据，还表现在它可以精确 地定位文本、图像及其他网页中的元素，这在网页版面布局方面是很重要的，所以表格是网 页布局排版不可缺少的工具。作为一个网页设计人员，表格运用得熟练与否直接影响作品外 观的好坏，这也是划分专业制作人士与业余爱好者的一种客观标准。 5.1.1表格的新建和编辑 1.创建新表格 将光标移到要插入表格的位置，然后可以通过下列四种方式中的任意一种，均可以弹出插入 表格对话框如图5-1所示：
• •
(3）如果想在现有的表格中添加多行或多列，操作是： 首先将光标移到要插入行或列附近的单元格中，单击鼠标右键，在弹出的下拉菜单中选择 “表格→插入行或列”命令，弹出 “插入行或列”对话框。在图5-5所示对话框中进行相关的 设置。
• • • • • • • •
• 图5-5插入行或列对话框 (4）删除整行／整列，可以采用下列办法之一： • 先选择欲删除的整行或整列，直接按Del键，即可删除。 • 先将光标移到要删除的行或列中，选择“修改→表格→删除行”或“删除列”命令。 • 将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择“表格→删除行” 或“删除列”命令。 5.1.3设置表格和单元格属性 1.编辑表格 (1）设置表格高度 在创建表格时，可以通过表格对话框来设置表格的宽度，但无法设置表格的高度，如果要设 置表格的高度，则必须通过表格属性面板来确定。
第5章 网页制作软件 Dreamweaver CS5(实验教程)
5.2 Dreamweaver CS5站点管理
5.2.3 站点的发布（Windows 7旗舰版平台 ）
1. 安装Internet信息服务
单击“开始”菜单 “控制面板”命令，在窗体中选择“卸载程 2. Web服务器设置 序”，再单击窗体左侧“打开或关闭Windows功能”。 在弹出的“Windows 功能”对话框中，若“Internet信息服务”复 单击“开始”菜单 |“控制面板”命令，在窗体中选择“系统和安 3. IE浏览 选框已勾选，说明本机已安装该组件，否则选中此复选框，单击 全”，再单击窗体右侧“管理工具”，然后启动“ Internet信息服务 启动本机（ Web服务器）IE浏览器，在地址栏输入本机IP地址或 “确定”按钮，等待安装完成。 (IIS) 管理器”应用程序 localhost，进入网站的首页“index.html”
微视频5-2 演示
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
滚动字幕是用来显示滚动文本的，如网站的最新通知等。字幕 可以水平滚动，也可以上下滚动。 在Dreamweaver CS5中利用<marquee>标签插入字幕 。
选中要做字幕的 文本 ，单击菜单 栏“插入”|“标 签”命令，打开 “标签选择器” 对话框
• 网站与网页的创建与管理
• 网页制作的基本操作
• CSS样式表的创建与使用 • 网页的各种布局方式 • 行为的应用
5.1 Dreamweaver CS5概述
5.1.1 Dreamweaver的发展
Dreamweaver 1.0 Dreamweaver CS3
Dreamweaver 2.0
Dreamweaver 2.01 Dreamweaver 3 Macromedia Dreamweaver 4 时代 Dreamweaver 5 Dreamweaver MX Dreamweaver MX 2004 Dreamweaver 8.0 Adobe 时代
web课程设计作业代码
web课程设计作业代码一、课程目标知识目标：1. 理解Web开发的基本概念，掌握HTML、CSS和JavaScript的基础知识；2. 学会使用网页开发工具，如Visual Studio Code、Sublime Text等；3. 掌握网页布局、样式设计和基本交互功能实现的方法；4. 了解Web前端框架和库的使用，如Bootstrap、jQuery等；5. 学习基本的网站优化和调试技巧。
技能目标：1. 能够独立编写结构清晰、符合W3C标准的HTML和CSS代码；2. 能够运用JavaScript实现简单的前端交互功能；3. 能够使用Web前端框架和库快速开发网页；4. 能够对网页进行基本的优化和调试，提高页面性能；5. 培养良好的编程习惯，注重代码的可读性和可维护性。
情感态度价值观目标：1. 培养学生的创新意识和团队协作精神，激发学习兴趣；2. 增强学生的自信心，敢于面对编程挑战，勇于解决问题；3. 培养学生的责任感，使其关注网站安全、用户体验等方面；4. 引导学生树立正确的价值观，遵循道德规范，尊重他人劳动成果；5. 激发学生关注互联网行业动态，提高职业素养，为未来职业发展打下基础。
本课程针对高年级学生，结合学科特点和教学要求，将知识目标和技能目标分解为具体的学习成果，以便教师进行教学设计和评估。
通过本课程的学习，学生将掌握Web前端开发的基本技能，为今后从事相关工作奠定基础。
同时，课程注重培养学生的情感态度价值观，使其成为具有创新意识、团队协作能力和职业素养的互联网人才。
二、教学内容本章节教学内容主要包括以下几部分：1. Web前端基础知识：- HTML：标签、属性、文档结构；- CSS：选择器、盒模型、布局、样式优先级；- JavaScript：基本语法、函数、事件处理、DOM操作。
2. 网页开发工具的使用：- Visual Studio Code、Sublime Text等编辑器的安装与配置；- 代码高亮、代码提示、自动完成等功能的介绍。
《网页设计与制作》课程教案
《网页设计与制作》课程教案第一章：网页设计与制作概述1.1 课程介绍网页设计与制作的基本概念网页设计与制作的目的与意义网页设计与制作的应用领域1.2 网页设计原则网页设计的基本原则用户体验设计原则响应式网页设计原则1.3 网页制作工具与技术网页设计软件的选择与使用HTML与CSS的基本语法与使用方法JavaScript的基础知识与应用第二章：网页布局与排版2.1 网页布局的基本概念网页布局的定义与作用常见的网页布局方式布局元素的分类与使用2.2 排版的原则与方法排版的基本原则文本的格式化与排版图片与多媒体元素的排版2.3 响应式网页布局与排版响应式网页布局的概念与意义媒体查询的使用方法布局与排版在不同设备上的应用第三章：网页色彩与字体3.1 色彩的基本概念与应用色彩的视觉效应与心理作用色彩的搭配原则与技巧色彩在网页设计中的应用案例3.2 字体的选择与使用字体的分类与特点字体的搭配原则与技巧字体在网页设计中的应用案例3.3 网页色彩与字体的综合应用色彩与字体的协调与平衡字体大小与行距的设置与调整色彩与字体的个性化应用与创新第四章：网页图片与多媒体元素4.1 网页图片的选择与处理图片的格式与特点图片的选择标准与技巧图片的处理与优化方法4.2 多媒体元素的应用音频与视频元素的应用动画与GIF图片的应用交互式多媒体元素的应用4.3 网页图片与多媒体元素的优化图片与多媒体元素的加载优化图片与多媒体元素的响应式应用图片与多媒体元素的视觉效果与用户体验第五章：网页交互与动画5.1 网页交互的基本概念与原理交互的定义与作用交互的实现方式与技术交互的设计原则与技巧5.2 JavaScript基础与应用JavaScript的基本语法与功能事件处理与DOM操作JavaScript库与框架的选择与使用5.3 网页动画的实现与优化CSS动画的制作方法与技巧JavaScript动画的制作方法与技巧动画的加载优化与性能考虑第六章：HTML与CSS高级应用6.1 表单设计与验证表单的基本结构与属性表单元素的使用与布局表单验证的实现方法6.2 网页组件设计与实现导航栏与面包屑的制作折叠面板与标签页的制作轮播图与幻灯片的设计与实现6.3 网页动画与过渡效果CSS过渡与动画的实现JavaScript动画的实现方法动画的性能优化与调试第七章：前端框架与库7.1 前端框架的基本概念前端框架的作用与优势常见的前端框架介绍框架的选择与使用7.2 Bootstrap框架的应用Bootstrap的基本结构与组件栅格系统与布局设计Bootstrap表单与样式定制7.3 React与Vue框架的选择与应用React框架的基本概念与使用方法Vue框架的基本概念与使用方法框架项目结构与组件化开发第八章：网页兼容性与优化8.1 网页兼容性基本概念浏览器兼容性的原因与挑战兼容性测试的方法与工具兼容性解决方案与最佳实践8.2 网页性能优化网页加载速度的影响因素图片与多媒体元素的优化代码压缩与合并技巧8.3 搜索引擎优化（SEO）SEO的基本概念与原则关键词研究与内容优化代码优化与站点结构调整第九章：网页安全与维护9.1 网页安全基本概念网页安全的威胁与挑战跨站脚本攻击（XSS）的预防跨站请求伪造（CSRF）的预防9.2 数据备份与恢复数据备份的重要性与方法数据库备份与文件备份恢复策略与流程9.3 网站维护与更新网站维护的内容与流程网站更新的方法与技巧网站监控与性能调优第十章：项目实践与案例分析10.1 项目实践流程项目需求分析与规划设计阶段与实现阶段项目测试与上线流程10.2 项目案例分析案例一：个人博客网站设计与制作案例二：电子商务网站设计与制作案例三：响应式企业官网设计与制作项目过程中的问题与解决方法网页设计与制作的趋势与展望重点和难点解析1. 第一章：网页设计与制作概述难点解析：网页设计原则的理解与应用、网页制作工具与技术的熟练运用2. 第二章：网页布局与排版难点解析：响应式网页布局与排版的设计与实现3. 第三章：网页色彩与字体难点解析：色彩与字体的协调与平衡、字体大小与行距的设置与调整4. 第四章：网页图片与多媒体元素难点解析：网页图片与多媒体元素的优化方法、响应式应用5. 第五章：网页交互与动画难点解析：JavaScript事件的处理与DOM操作、动画的实现与优化6. 第六章：HTML与CSS高级应用难点解析：表单验证的实现方法、网页组件的布局与样式设计7. 第七章：前端框架与库难点解析：框架的选择与使用、React与Vue框架的选择与应用8. 第八章：网页兼容性与优化难点解析：兼容性解决方案与最佳实践、网页性能优化的实施方法9. 第九章：网页安全与维护难点解析：预防跨站脚本攻击（XSS）与跨站请求伪造（CSRF）的策略、网站维护与更新的方法10. 第十章：项目实践与案例分析难点解析：项目需求的分析与规划、项目测试与上线流程的控制本教案《网页设计与制作》涵盖了网页设计与制作的基本概念、技术应用、项目实践等各个方面。
网页设计课后复习题
《网页设计课后复习题》第一章网页设计概述一、填空题。
1.HTML是超文本标记语言的英文缩写，全称是Hyper Text Markup Language。
2.现在网络上使用的绝大多数图片和图像是gif格式、jpeg格式和png文件格式。
3.通过超链接可以从一个网页转到另一个网页，也可以从一个网页转到另一个网页。
超链接的载体包括文本、图像和热区三种。
4.网页能够把信息以多媒体的方式表现出来，同时把世界各地的信息链接在一起。
网页的基本功能有媒体的作用、互动的作用和传输的作用三方面。
5.PNG格式是Fireworks默认的格式。
它结合了jpeg和gif的优点，也支持透明和交错，是无损压缩的。
二、选择题。
1.网页中最基本的元素是（D）。
D.文字。
2.浏览网页时，当鼠标指针指向超链接时，通常鼠标指针的形状会变成（A）。
A.手形。
3.下列（D）不是用于制作网页的软件。
D.ORC。
4.以下图像格式具有动画效果的是（B）。
B.GIF。
5.网页编制完成以后，一般是以(C)为扩展名存盘的。
C.html。
第二章HTML语言基础一、填空题。
1.在HTML语言中文本文档标签是必须的。
2.在HTML语言中<P>标记的作用是表示一个文本段落的开始。
3.在插入图像或者使用超链接时，路径有相对路径和绝对路径两种。
4.HTML的英文全称是Hypertext Markup Language。
5.HTML列表常用的包括有序列表和无序列表，有序列表的标记是<OL>，无序列表的标记是<UL>。
二、选择题。
1.为同段落中的文本换行时，HTML标记为（B）。
B.<br>。
2.HTML代码<img src=url>表示（A）。
A.添加一个图像。
3.在HTML文档中创建最大的标题的文本标签是（B）。
B.<hL></hL>。
4.在HTML文档中网页的主体内容将写在（A）标记内。
Web程序设计(第三版)_第5章页面设计
Alt 指定图像的提示标签。若设置了该属性值，则当鼠标移至该图像区域时，将以一个小标签显示该属性的 值。
返回
④
超链接标记
超链接标记的格式如下： <a href="URL信息">超链接文本或图像</a>
<ol>列表项</ol> 有序列表（Ordered list） <dl>列表项</dl> 定义列表（Definition list）
预定格式（Preformatted）标记可以使信息完全按照HTML文件中编排的格式原样显示于浏览器中， 该标记的格式如下：
<pre>预定格式的信息</pre>
返回
【例5-3】 下列程序采用3种列表标记显示如图4-2所示的页面
✓ 通常超链接总是指向目标HTML文件的头部，但超链接的目标也可以是某个文件的特定位置（称为“锚 点”，anchor）
其格式如下： <a name="锚名">文本或图像等页面元素</a>
返回
⑤
列表标记和预定格式标记
列表标记是HTML的一个基本结构。有以下3种类型的列表：
<ul>列表项</ul>
无序列表（Unordered list）
文档属性
2.
体部标记
① <body>，</body>标记
返回
属性 bgcolor text link alink vlink background topmargin leftmargin
Web习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述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等各种特效。
中文版DreamweaverCS6网页制作实用教程第五章使用表格布局网页
(1) 单击【表格】按钮
(2)【表格】对话框
图 5-4 打开【表格】对话框
【表格】对话框中比较重要的选项功能如下。
-93-
中文版 Dreamweaver CS6 网页制作实用教程
【行数】文本框：可以在文本框中输入表格的行数。 【列数】文本框：可以在文本框中输入表格的列数。 【表格宽度】文本框：可以在文本框中输入表格的宽度，在右边的下拉列表中可以选 择度量单位，包括【百分比】和【像素】两个选项。 【边框粗细】文本框：可以在文本框中输入表格边框的粗细。 【单元格边距】文本框：可以在文本框中输入单元格中的内容与单元格边框之间的距 离值。 【单元格间距】文本框：可以在文本框中输入单元格与单元格之间的距离值。
5 .2 在 Dreamweaver 中使用表格
在 Dreamweaver 中，表格可以用于制作简单的图表，使用表格来显示数据，可以更加方便 地进行查看、修改或分析。表格不仅可以为网页页面进行宏观布局，还能够使页面中的文本、 图像等元素更有条理。在网页中插入表格后，还可以在表格中插入嵌套表格。
5 .2.1 在网页文档中插入表格
(1) 打开表格
图 5-5 插入嵌套表格
(2) 嵌套表格
5 .2.2 选择表格与单元格
选择表格是对表格进行编辑操作的前提。在 Dreamweaver 中，用户可以一次选择整个表、 行或列，也可以选择连续的单元格。
1. 选择整个表格 在 Dreamweaver 中，要选择整个表格对象，用户可以使用以下几种方法：
5 .1.1 表格简介
表格是用于在 HTML 页面上显示表格式数据以及对文本和图形进行布局的工具。表格由一 行或多行组成，每行又由一个或多个单元格组成。
当选定栏表格或表格中有插入点时，Dreamweaver 将显示表格宽度和每个表格列的列宽，
《网页设计与制作》课程标准
广西玉林高级技工学校《网页制作与设计》课程标准一、课程基本信息二、课程性质本课程是中职计算机术专业的一门主干专业课程。
通过本课程的学习，要求学生掌握网页设计的基本概念，学会使用常用的网页设计工具和常用脚本语言，能够设计制作常见的静态和动态网页，具备网站的建立和维护能力。
同时通过本课程的学习，培养学生的综合职业能力、创新精神和良好的职业道德。
三、设计思路本课程标准的总体设计思路：以计算机专业学生的就业为导向，根据行业专家对计算机网络技术专业所涵盖的岗位群进行的任务和职业能力分析，紧紧围绕完成工作任务的需要来选择课程内容，设定职业能力培养目标；以“工作项目”为主线，创设工作情景；以书本知识的传授变为动手能力的培养为重点，强化学生实践动手能力的培养，以实现职业能力的培养目标。
四、课程目标1.职业知识目标1．熟悉HTML 语言的作用和开发环境，能够编写HTML 代码；2．掌握常用的HTML 标签，能够实现基本的图文信息显示；3．理解HTML 页面框架的作用，能够针对需求进行框架的设计；4．掌握各类HTML 表单元素标签，能够进行表单设计；5．掌握各类HTML 多媒体元素标签，能够进行多媒体页面设计；6．掌握CSS 样式的基本使用方法，能够应用CSS 样式表美化页面；7．掌握CSS 网页布局的方法，能够结合DIV 标签进行页面布局；8．掌握JavaScript 的语法基础，能够编写简单的JavaScript 应用程序；9．掌握JavaScript 的函数、内置对象、事件等，能够实现表单的验证；10．掌握DOM 树形结构及其操作方法，能够控制DOM 对象。
2.职业技能目标1．能独立进行资料收集与整理、具备用户需求的理解能力；2．能根据项目需求，具备项目页面的设计与实现能力；3．能根据静态页面设计原则与CSS 技术规范，实现页面美化与布局；4．具有使用JavaScript 技术进行页面事件处理与表单验证的能力；5．能根据DOM 树形结构，进行页面DOM 的控制；6．具有综合应用HTML 语言、CSS 样式、JavaScript 脚本进行页面的设计、编码、调试、维护能力。
网页设计课后复习题
《网页设计课后复习题》第一章网页设计概述一、填空题。
1.HTML是超文本标记语言的英文缩写，全称是Hyper Text Markup Language。
2.现在网络上使用的绝大多数图片和图像是gif格式、jpeg格式和png文件格式。
3.通过超链接可以从一个网页转到另一个网页，也可以从一个网页转到另一个网页。
超链接的载体包括文本、图像和热区三种。
4.网页能够把信息以多媒体的方式表现出来，同时把世界各地的信息链接在一起。
网页的基本功能有媒体的作用、互动的作用和传输的作用三方面。
5.PNG格式是Fireworks默认的格式。
它结合了jpeg和gif的优点，也支持透明和交错，是无损压缩的。
二、选择题。
1.网页中最基本的元素是（D）。
D.文字。
2.浏览网页时，当鼠标指针指向超链接时，通常鼠标指针的形状会变成（A）。
A.手形。
3.下列（D）不是用于制作网页的软件。
D.ORC。
4.以下图像格式具有动画效果的是（B）。
B.GIF。
5.网页编制完成以后，一般是以(C)为扩展名存盘的。
C.html。
第二章HTML语言基础一、填空题。
1.在HTML语言中文本文档标签是必须的。
2.在HTML语言中<P>标记的作用是表示一个文本段落的开始。
3.在插入图像或者使用超链接时，路径有相对路径和绝对路径两种。
4.HTML的英文全称是Hypertext Markup Language。
5.HTML列表常用的包括有序列表和无序列表，有序列表的标记是<OL>，无序列表的标记是<UL>。
二、选择题。
1.为同段落中的文本换行时，HTML标记为（B）。
B.<br>。
2.HTML代码<img src=url>表示（A）。
A.添加一个图像。
3.在HTML文档中创建最大的标题的文本标签是（B）。
B.<hL></hL>。
4.在HTML文档中网页的主体内容将写在（A）标记内。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础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：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。
毕设网站课程设计
毕设网站课程设计一、课程目标知识目标：1. 让学生掌握网站设计的基本概念、原理和技术框架，理解毕设网站的开发流程和需求分析。
2. 使学生了解并运用HTML、CSS、JavaScript等网页编程语言，实现毕设网站的前端设计。
3. 帮助学生掌握网站后端技术，如数据库操作、服务器端编程等，为毕设网站提供数据支持和交互功能。
技能目标：1. 培养学生独立进行毕设网站需求分析、设计、开发和测试的能力。
2. 提高学生运用网页编程语言进行前端设计的能力，实现网站的界面美观、响应式布局和用户友好性。
3. 培养学生运用后端技术进行数据处理和服务器端编程的能力，实现网站的数据存储、管理和交互功能。
情感态度价值观目标：1. 培养学生具备良好的团队合作意识和沟通能力，能够在项目开发过程中与团队成员协同工作，共同解决问题。
2. 培养学生具备创新思维和审美意识，注重网站设计的美感和用户体验。
3. 增强学生的责任感和自信心，使他们认识到自己在毕设网站开发过程中的价值和作用，激发他们继续深入学习的兴趣。
课程性质：本课程为实践性较强的课程，注重培养学生的实际操作能力和项目开发经验。
学生特点：学生具备一定的编程基础，对网站设计有浓厚兴趣，具有较强的自学能力和动手能力。
教学要求：教师应采用案例教学、项目驱动等方法，引导学生主动参与课堂讨论和实践活动，提高他们的实际操作能力。
同时，注重个别辅导，帮助学生解决实际问题，确保课程目标的达成。
在教学过程中，关注学生的学习进度和情感态度，及时调整教学策略，以提高课程效果。
二、教学内容1. 网站设计基本概念：网站结构、网页组成、前端与后端技术等。
- 教材章节：第一章 网站设计概述2. 网页编程语言：HTML、CSS、JavaScript。
- 教材章节：第二章 HTML与CSS；第三章 JavaScript基础3. 网站开发流程与需求分析：项目规划、需求分析、原型设计等。
- 教材章节：第四章 网站开发流程4. 前端设计：响应式布局、界面设计、用户交互等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图5-11 单元格间距为8
返回本节
第5章 网页布局
5.2.1 在页面中插入表格
5．页眉设置 页眉设置其实就是为表格选择一个加粗文字的标题栏，这样对于 要求标题以默认粗体显示的表格，省去了每次手工执行加粗动作，提 高了工作效率。可将页眉设置为无、左部、顶部，或者左部和顶部同 时设置。如图5-12和图5-13就是分别将页眉设置在左部和顶部时的效 果。
5.2.3 表格标签
第5章 网页布局
5.2.4 在普通模式下用表格布局网页
表格是最常用的网页布局实现方式。在表格中，很容易实现表格行和 列的大小操作，从而方便地实现网页布局。本节通过实例介绍利用表格进 行网页布局的方法。 网页布局实例效果如图5-20。这个页面是由4个表格组成的，某些单 元格中又嵌套有表格。布局示意图如图5-21示。表1为网页的顶部，包括 网站的Logo及Banner；表2是网站导航条；表3是页面的主体区，包括左侧 的文章列表，右侧的其他链接和下部的搜索条，其中分别嵌套有小表格； 表4是网站的底部，是网站的版权栏。
第5章 网页布局
第5章 网页布局
网站的设计，不仅体现在具体内容与细节的设计制作上， 也需要对框架进行整体的把握。在进行网站设计时，需要对网 站的版面与布局进行一个整体性的规划。
本章主要内容：
网页布局类型 用表格进行网页布局
框架
用CSS进行网页布局
开 始
第5章 网页布局
5.1
网页布局类型述
5.2.2 设置表格属性
在页面中插入表格以后，可以在“属性”面板中对表格进行设置，除 了某些属性和“表格”对话框中的设置一样外，还可以设置表格的背景 颜色、边框颜色和对齐方式等属性。
图5-14 表格属性面板
下面分别对表格中的属性进行说明。 （1）表格Id：指的是表格名称，可以在这个选项栏里输入一个名称来为 表格命名。 （2）行和列：可以重新设置表格中行和列的数量。 （3）宽：设定表格的宽度。宽度可以在“表格”对话框中进行设置；单 位都有“百分比”和“像素”两种。一般情况下，不需要设置表格高度。 （4）填充：设置单元格内容与单元格边框之间的像素数。 （5）间距：设置相邻的表格单元格之间的像素数。 （6）对齐：可以设定表格的对齐方式。表格有3种对齐方式，分别为“左 对齐”、“居中对齐”和“右对齐”。单击下拉菜单按钮，可以在下拉菜单中 选择对齐方式。如果保持默认的话，表格会居左对齐。
5.3.1 用框架布局页面
5.3.2 创建框架和框架集 5.3.3 设置框架及框架集属性
5.3.4 保存框架和框架集
5.3.5 控制带有链接的框架内容
返回本章首页
第5章 网页布局
5.3.1 用框架布局页面
要制作框架网页，就要建立框架集。框架集是组织页面内容的 常见方法，通过框架集可以将网页的内容组织到相互独立的HTML页面
5.2.4 在普通模式下用表格布局网页
5.2.5 在布局模式下用表格布局网页
返回本章首页
第5章 网页布局
5.2.1 在页面中插入表格
新建一个HTML文档。执行【插入记录】|【表格】命令，弹出【表格】对 话框，如图5-5所示。这里插入一个4行3列的表格，表格宽度为500像素，边 框粗细为1像素，单元格边距和间距也都为0，在“标题”文本框中输入文字 “一个简单的表格”。单击【确定】按钮，页面中出现一个表格。
图5-4 “封面”型布局
返回本节
第5章 网页布局
5.2 用表格进行网页布局
表格可以用来控制页面布局，通过在表格里放置内容，用户能够把对 象放置到页面的指定位置，创建更复杂的视觉结构。表格是一种可以让设 计人员初步控制站点布局的HTML元素。
5.2.1 在页面中插入表格
5.2.2 设置表格属性 5.2.3 表格标签
制作步骤: 1．切换到表格布局模式 2．布局顶部部分 3．布局主体部分 4．布局网页底部 图5-27布局表格布局的网页 返回本节
第5章 网页布局
5.3 框架
框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别 显示不同的网页。访问者浏览站点时，可以使某个区域的文档永远不更改 ，通过导航条的链接更改主要内容框架的内容，从而达到网页布局的相对 统一。一般情况下，可以用框架来保持网页中固定的几个部分，如网页大 标题、链接按钮等，剩下的框架用来展现所选择的网页内容。
返回本节
第5章 网页布局
表格的相关标签有<table>、<tr>、<td>等，分别表示表格、行、列。 1．<table>标签 <table>标签表示一个表格的开始。每一个<table>标签需要一个</table>标签关闭。 相关的属性如下所述。 width：表格的宽度。 height：表格的高度。 border：表格边框的线宽。 cellpaddinf：表格边框之间的填充宽度。 cellspacing：表格边框之间的间距。 bordercolor：边框的颜色。 background：表格背景的图片。 bgcolor：表格背景的颜色。 align：表格的对齐方式，可以是left、center、right等值。 例如，下面是一个表格的代码： <table width="500" height="200" border="2" cellspacing="1" cellpadding="2" bordercolor="##CC0000" bgcolor="#0033FF" align="center"> 这些代码表示开始一个表格，宽高像素为500×200像素，边框宽度为2像素，边框 之间的填充为1像素，外边框和内边框的间距为2像素，边框颜色为红色，背景颜色为蓝 色，居中对齐。 专家点拨：表格的宽度值和高度值如果是一个数字，比如<table width="500">， 则尺寸单位为像素。如果是一个百分比，比如<table width="50%">，则尺寸单位为百分 比，表示宽度或高度占上一级元素的百分比。 返回本节
在网页布局设计上，根据用户的使用习惯与设计经验，已 经形成了一些常见的布局方式。网页布局方式主要从用户使用 的方便性、界面大方美观、网页特色等方面考虑。
5.1.1
5.1.2
“国”字型
“厂”字型
5.1.3
5.1.4
“框架”型
“封面”型
返回本章首页
第5章 网页布局
5.1.1 “国”字型
图5-7 边框大小为0
图5-8 边框大小为5 返回本节
第5章 网页布局
5.2.1 在页面中插入表格
3．单元格边距 单元格边距是表示单元格中的内容与边框距离的大小，如果单元格 边距为默认值，其单元格中的内容与边框的距离很近，如图5-9所示。 如果把单元格的边距设为8，在单元格中内容与边框之间就存在了一定 的距离，如图5-10所示。 图5-9 单元格边距为默认值 图5-10 单元格边距为8 4．单元格间距 单元格边距和单元格间距是两个不同的概念，单元格间距是指 单元格与单元格、单元格与表格边框的距离。两者的单位都是像素， 在默认情况下，边距的值为1，间距的值为2。在如图5-11所示中，就 是把单元格间距设置为8后的表格外观。
图5-20格布局实例效果
返回本节
第5章 网页布局
5.2.4 在普通模式下用表格布局网页
表1
表2
表3
表4
图5-21布局示意图 制作步骤： 1．创建第一个表格 2．创建第二个表格 3．创建第三个表格 4．创建第四个表格 返回本节
第5章 网页布局
5.2.5 在布局模式下用表格布局网页
为了简化使用表格进行页面布局的过程，Dreamweaver提供了“布局”模 式。“布局”模式的工作方式是，用户可以在页面上绘制表格，然后把文本或 图形放置在表格里。在布局模式下创建表格具有更大的灵活性。可以根据实现 规划好的网页排版方式，画出需要的表格和单元格。然后再根据具体内容进行 适当的编辑和调整，这样大大提高了网页布局的效率。 下面通过一个网页布局实例介绍在“布局”模式下布局网页的方法。实例 效果如图5-27示。网页分成3部分来完成布局，第一部分是上面的顶部信息， 包括搜索条、Banner、导航栏等；第二部分是网页的主体部分；第三部分是底 部信息。
返回本节
第5章 网页布局
5.2.2 设置表格属性
（7）边框：指定表格边框的宽度，和在“表格”对话框中的设置一样，它的 单位为像素。如果没有明确指定边框的数值，则大多数浏览器按边框设置为1像素显 示表格。如果要浏览器不显示表格边框，可以将“边框”数值设置为0。 （8）清除列宽和清除行高：这两个按钮可以将表格中所有明确指定的行高或 列宽删除。 （9）将表格宽度转换成像素和将表格宽度转换成百分比：将表格中每列的宽 度设置为以像素为单位的当前宽度，还将整个表格的宽度设置为以像素为单位的当 前宽度。将表格中每列的宽度或高度设置为按占“文档”窗口宽度百分比表示的当 前宽度，还将整个表格的宽度设置为按占“文档”窗口宽度百分比表示的当前宽度。 （10）背景颜色：此选项可以设置表格的背景颜色，单击背景颜色后的按钮， 可以打开调色板，使用吸管工具直接选择颜色即可，也可以直接在文本框中输入颜 色代码值。 （11）边框颜色：用来设定表格边框的颜色。选中表格以后单击颜色按钮， 就可以和设置背景颜色一样选择颜色了。当设定边框颜色以后，在表格内所有单元 格的边框都会变为所设定的颜色。 （12）背景图像：设置表格背景图像，可以将一张图片平铺到表格中。单击 “背景图像”栏后边的黄色文件夹图标，在弹出的“选择图像源文件”窗口中找到 图片即可。
“厂”字型布局是在网页的上部放置Logo和Banner，在网页的左边放置导 航条与其他链接，在网页的右下方放置网页的主要内容。这种布局的好处是 网页的各个部分布局非常集中，可以在一个区域突出网页的重要内容。网页 中的内容主次分明，很有层次感。“厂”字型布局效果如图5-2所示。