网页及表格背景设计
DreamweaverCS5网页制作第3章 使用表格布局页面PPT课件
3.1 表格的建立和编辑
3.1.4 实战演练：网站“行星大观”页眉导航部分制作
操作步骤： 6）光标移到第2行第1个单元格，在属性面板中设单元格的“宽”为270，“高”为24。鼠标 选中该行其它所有单元格，在属性面板中设单元格设为“宽”为100，水平、垂直方向均为 居中对齐。输入对应文字，如图所示。
（3）选取行或列 从一个单元格开始，拖动鼠标选中整行和整列的单元格，单元 格所在的行或列即被选中。或将鼠标停留在一行的左边框或一列的上边框，当选择行 或列的图标出现时，单击鼠标即可选择行或列。
3.1 表格的建立和编辑
3. 设定表格和单元格属性 （1）表格属性
当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板 修改表格的行数、列数、大小等属性。表格的属性面板如下图所示。其中行、列、 宽、高、填充（即单元格边距）、间距、边框在创建表格时已经介绍过。
3.1 表格的建立和编辑
2. 选取表格元素 （1）选取整个表格 将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表
格。或光标放在表格中时，点击菜单“修改”→“表格”→“选择表格”命令。也可以 将光标放在单元格中，在文档窗口的左下角的标签选择器中选择“Table”标签，选取 整个表格。
（2）选取单元格 将鼠标指针移动到某个单元格上，按住Ctrl键不放，再单击， 就可以选中这个单元格。按住Ctrl键，再逐个单击要选取的单元格，就可以选中不连 续的多个单元格。光标移到某个单元格中，按住Shift键鼠标点击另外一个单元格，则 这两个单元格之间的所有单元格将被选中，形成一个连续矩形区域。也可以通过鼠标 拖拽的方法可以选取连续的一片单元格。
3.1 表格的建立和编辑
3.1.1 案例制作：2006世界杯E组对阵表
简单的网页制作教程-设计一个个人网站
题目：设计一个个人网站一、要求：1．使用Dreamweave网页工具制作一个个人网站；2．包含至少四个网页: 包括首页、个人简介、个人相册等（可随意设计），网页之间用超链接相连。
3．网页中要有图片和文字内容，用表格进行页面布局；4．添加至少两种行为，并为首页添加背景音乐。
5. 在网站中设计一个表单页面。
6. 首页必须包含页面标题，动态按钮导航栏。
首先新建一个文件夹，文件夹的名字不能为汉字，做网站所有的路径都必须用字母或者数字，不能用汉字，我们就用名字吧，譬如说名字张三，那文件夹名字就是zs，如图打开Dreamweaver软件，得到图做网页要新建站点，关于站点配置服务器什么的，这里不讲了，只讲建立站点。
选择站点——新建站点。
我们建的文件夹就是站点根文件夹。
新建站点后得到这样一个界面点选高级，得到界面站点名称与我们建文件夹得名字相同，zs填进去就可以了本地根文件夹就是我们新建的那个文件夹zs，http地址为http://localhost/zs接下来选择左侧栏里远程信息点击无后面的那个三角，选择本地网络，远端文件夹同样选择我们新建的那个文件夹接下来点选左面菜单里的测试服务器，点选访问后面那个三角，选择本地网络，测试服务器文件夹也为我们建好的文件夹zs，在url前缀后面加上zs然后点击确定就可以了得到这样一个界面。
下面看老师的第一条要求，是要至少四个网页，那我们就做四个单击新建，然后单击接下来，选择然后单击创建，接下单击文件——保存，保存这个文件，保存在我们一开始建好的文件夹里面，保存名字不能是汉字，只能是字母或者数字，因为我们只坐四个网页，可以简单一点，把这四个网页命名为a、b、c、d，或者1、2、3、4，当然一个网站默认的索引首页名为index，这里也用index，单击保存，这样得到第一个页面，以同样的方式建剩下的三个页面，这里我的首页默认为index.html，其他三个网页的名字分别为a.html、b.html、c.html，我们这四个网页文件已经保存在我们建的文件夹里。
利用表格制作网页
数学系09级（3）班杜强海20091022129利用表格制作网页实验目标该网页将利用设计页面的布局，制楚雄师院的页面简介。
通过该种制作，我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象，已达到自然，生动的配置构成元素的目的。
实验过程《1》在dreamweaver中执行《文件》中的《新建》命令，创建一个HTML文档。
然后在《文件》中保存该文档。
然后在《文档》工具栏的《标题》中输入“师院首页”。
然后单击《常用》工具栏的表格按钮，插入一个3行3列的表格，图1如图1所示。
<2>选中第2行表格的第2单元格。
单击属性面板中的合并所选单元格按钮，将其合并。
然后将指针置于第1行第1列单元格内在属性面板中将《宽》设为200，<高》设为30，如右图2所示。
《3》单击《常用》工具栏中的常用图像按钮，再打开的《选择图像源文件》对话框中选中一幅图片，单击《确定》按钮，为单元的插入一幅图片，如右图3所示《4》将鼠标指针移到第1行1列单元格内，在属性面板中将《宽》设为50，《高》设为30，单击《常用》工具栏中的图像按钮，打开《插入鼠标经过图像》对话框，如图4所示。
图3 《5》在打开的< 插入鼠标经过图像>对话框中，单击《原始图像》后面的《浏览》按钮.。
在打开的对话框中选中一幅图片，单击确定按钮，在单击《鼠标经过图像》后面的《浏览》按钮，用同样的方法选定一幅图片，如图5所示《6》设置完成后，单击《确定》按钮，然后同同第4,5步一样为第1行的第1,2列也分别设置鼠标经过图像。
然后将鼠标指针置于第一行第三列的单元格内，在《属性》面板中，为《宽》设为100，《高》。
设为50。
为《背景颜色》设为#333cc，如图6所示《7》将鼠标指针置于表格的第3行，按前面的方法，为第3行单元格也插入一幅图片。
然后将鼠标指针置图4 图2于表格的下一行，单击《常用》工具栏表格图标按钮，为文档在插入一个3行3列的表格，如图7所示。
表格布局网页课程设计
表格布局网页课程设计一、课程目标知识目标：1. 让学生掌握网页设计中的表格布局基础知识，理解表格布局的原理和用途；2. 学会运用HTML标签创建表格，设置表格的行、列和单元格属性；3. 掌握CSS样式表中与表格布局相关的属性，如边框、间距、填充等。
技能目标：1. 培养学生运用表格布局设计网页的能力，能独立完成简单的网页布局；2. 提高学生在网页设计中的问题解决能力，能够调整表格布局以适应不同设备和屏幕尺寸；3. 培养学生团队协作和沟通能力，能在小组合作中共同完成网页设计任务。
情感态度价值观目标：1. 培养学生对网页设计的兴趣和热情，激发学生的创造力和创新精神；2. 培养学生关注用户体验，注重网页布局的美观性和易用性；3. 增强学生的信息素养，使学生认识到网络技术在信息传播中的重要作用。
课程性质：本课程为信息技术课程，以实践操作为主，结合理论知识，培养学生的实际操作能力和创新思维。
学生特点：学生处于初中阶段，对新鲜事物充满好奇，具备一定的计算机操作基础，喜欢动手实践。
教学要求：教师应注重理论与实践相结合，以学生为主体，引导学生主动探究，培养其独立思考和解决问题的能力。
同时，关注学生个体差异，因材施教，确保每个学生都能在课程中取得进步。
通过课程学习，使学生能够达到上述具体的学习成果，为后续的网页设计学习打下坚实基础。
二、教学内容1. 理解表格布局的概念与作用- 表格布局的定义与分类- 表格布局在网页设计中的应用场景2. HTML表格标签的使用- <table>、<tr>、<td>、<th>等基本标签的用法- 表格行、列、单元格的属性设置3. CSS样式表中与表格布局相关的属性- 边框样式：border、border-collapse、border-spacing等- 单元格样式：padding、margin、text-align、vertical-align等- 表格背景与颜色：background-color、background-image等4. 表格布局实例分析与操作- 分析经典表格布局案例，了解其设计思路和实现方法- 学生实践操作，完成一个简单的表格布局网页5. 响应式表格布局- 介绍响应式网页设计的基本概念- 学习使用CSS媒体查询调整表格布局以适应不同屏幕尺寸6. 表格布局在实际项目中的应用- 分析实际项目需求，确定表格布局设计方案- 学生团队合作，完成一个具有实际意义的网页设计项目教学内容安排与进度：第1课时：理解表格布局的概念与作用，学习HTML表格标签的使用第2课时：CSS样式表中与表格布局相关的属性，分析表格布局实例第3课时：实践操作，完成一个简单的表格布局网页第4课时：学习响应式表格布局，调整表格布局以适应不同屏幕尺寸第5课时：团队合作，完成实际项目中的表格布局设计教学内容与教材关联性：本教学内容与教材中关于网页设计、HTML和CSS的知识点紧密相关，涵盖了表格布局的基本概念、用法和实际应用，确保了教学内容的科学性和系统性。
网页设计与制作项目四 布局表格
3.在“分类”列表框中选择“标题\编码”选项，在其右侧的“标题” 文本框中输入“幽幽博客”。
单击“属性”面板中“背景图像”选择右侧的“浏览文件”按钮，弹出 “选择图像选文件”对话框，找到要插入的图片，单击“确定”按钮 4.选择“跟踪图像”分类，在其右侧的“跟踪图像”文本框中输入 “yyou.png”，在“透明度”栏中调整透明度为“41%”，单击“确定按 钮”，如图所示。
5.选择【查看】\【表格模式】\【布局模式】命令或按“A1t+F6”组合键 切换到表格布局模式。
6.在“插入”栏的“布局”选项卡中单击“绘制布局单元格” 按钮。 7.将鼠标光标移动到如图所示的图像的左上角，按住鼠标左键 不放并向右下角拖动。
8.拖动到图像右下角时释放鼠标右键，完成布局单元格的绘制， 鼠标光标自动定位在该布局单元格中。
返回
（二）项目分析
项目活动目标：学会设置跟踪图像的方法和布局表格的 方法。
重点：在网页中设置跟踪图像的方法。 难点：布局表格的方法。
返回
（三）任务实施
为幽幽博客设置跟踪图像
【操作步骤】 1.新建网页文档并保存为“yyou.html”，按“Ctrl+j”组合键打开“页面属 性”对话框。，如下图
2.选择“外观”分类，在其右侧的“大小”下拉列表框中选择 “像素”选项，在“背景图像”文本框中输入“12”，在其后的下 拉列表框中选择“像素”选项，在“背景图像”文本框中输入 “3.jpg”， ，如图 所示
3） 再在图像透明度中设定跟踪图像的透明度。如图所示：
知识大串联：
4）在当前网页中定位各个网页元素的位置。
使用了跟踪图像的网页在用Dreamweaver编辑时不 会再显示背景图案，但当使用浏览器浏览时正好相反，跟 踪图像不见了，所见的就是经过编辑的网页（当然能够显 示背景图案）。
网页设计第9章Dreamweaver的表格和网页版面设计PPT课件
9.1 网页中的表格
9.1.4.5 调整表格大小和外观 ▪ 调整表格宽度或高度：选择表格，拖动选择框右边
或底边的控制点。 ▪ 同时调整表格的高度和宽度：选择表格拖动选择框
右下角的控制点。 ▪ 若要精确指定表格大小：选定表格，在属性检查器
的“宽”和“高”文本框输入数值，在其后的下拉 列表框选择值的单位。 ▪ 在表格的属性检查器中可以设置表格的背景颜色、 背景图像、边框颜色等等属性。
进入布局模式。如图。 ▪ 在布局模式里，“插入”栏的“布局”中有两个可
用的按钮,它们是“布局表格”按钮和“绘制布局单 元格”按钮。此时，标准模式下的“表格”按钮和 “绘制层”按钮均呈不可用状态。（在标准模式下， “布局表格”按钮和“绘制布局单元格”按钮是不 可用的）。
16
9.2 用表格布局网页
17
9.2.3 绘制布局表格 ▪ 在布局模式下单击“插入”工具栏“布局”类别中的“布局
表格”按钮，然后将十字形指针移至工作区，按住鼠标左键 拖动，即可绘制出一个布局表格。按住Ctrl键可连续绘制出 多个布局表格。
18
9.2 用表格布局网页
9.2.4 更改布局表格和布局单元格的属性 设置布局表格的属性——使用布局表格的属性检查器。 如图:
dreamweaverdreamweaver的表格和网页版面设计的表格和网页版面设计表格在网页中的作用表格在网页中的作用表格的创建与编辑表格的创建与编辑利用表格对页面进行布局利用表格对页面进行布局利用布局试图对页面进行布局利用布局试图对页面进行布局dreamweaverdreamweaver中框架的创建方法中框架的创建方法超链接框架目标的指定超链接框架目标的指定框架和框架页的基本操作框架和框架页的基本操作9191网页中的表格网页中的表格表格是现代网页制作的一个重要组成部分
电子教案-《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>”标签，该表格便处于选中状态。
网页设计基本操作
网页设计基本操作________________________________________ 1.把文件夹转换成站点：点击【文件】菜单——打开网站——选择需要转换的文件夹并打开——点击【打开】按钮——确认2.插入表格：点击【表格】菜单——插入——表格3.设置表格属性：在表格内右击鼠标，选择【表格属性】，进行表格属性设置（包括表格边框粗细、颜色、背景等）4.插入图片：点击【插入】菜单——图片——来自文件……——选择相应的文件（插入图片后，双击图片可以进行图片属性设置）5.设置单元格背景：在单元格内右击鼠标，在菜单内选择【单元格属性】——选择【使用背景图片】——浏览选择相应图片文件6.修改网页标题：点击【文件】菜单——属性——选择【常规】选项卡——标题（修改或设置网页标题）/背景音乐——浏览选择相应的声音文件7.插入滚动字幕：点击【插入】菜单——web组件……——动态效果——字幕——进行字幕属性设置8.插入水平线：点击【插入】菜单——水平线——双击水平线进行属性设置9.插入层：点击【插入】菜单——层——在层内进行相关操作10.插入flash动画：点击【插入】菜单——图片——flash影片——选择SWF格式的文件11.插入视频：点击【插入】菜单——图片——视频——选择A VI、MPG等格式的文件12.设置导航栏：点击【视图】菜单——导航——添加相应的导航页面——定位光标——点击【插入】菜单——导航——链接栏——基于导航结构的链接栏——选择一种导航样式——选择导航栏的方向——完成。
13.插入交互式按钮：点击【插入】菜单——交互式按钮——进行交互式按钮样式选择和按钮文本设置14.设置超链接：选择需要设置超链接的对象——点击【插入】菜单——超链接……——选择相应的链接位置。
DW网页局(表格、布局表格)
6. 固定宽度列 ： 具有特定的宽度值。7. 自动伸展列 ： 就是表格可以按照屏幕比例来自动调整 宽度 ， 相当于将表格的宽度定义为百分比； 如果布局中包 括自动伸展列 ， 则该布局会始终填充访问者浏览器窗口的 整个宽度 。常见的布局是让页上包含主要内容的列自动伸 展 ， 这会将所有其它列自动设置为固定宽度 。例如 ， 假设 您的布局在页的左边有一个较宽的图像 ， 在右边有一列文 本 。您可能将左边的列设置为固定宽度 ， 让侧栏区域自动 伸展。8.设置“布局 ”模式的首选参数 ， 打开对话框首选参数， 然后从左侧的类别列表中选择“布局模式 ”。在其中可以设置自动插入间隔图像 、单元格外框、单元 格高亮、表格外框、表格背景 。
第4章 构建网页布局
• 使使用用表表格格• 使使用用布布局局表表格格
4. 1 使用表格所谓表格就是由一个或多个单元格构成的集合 ， 表格中横向的多个单元格称为行 ， 垂直的多个单 元格称为列 。行与列的交叉区域称为单元格 ， 网 页中的元素通常都被放置在这些单元格中 ， 以使
其“各安其位 ”。
4.2.3绘制布局单元格：按住ctrl键拖动可以连续绘制多个布局单元格。注意要点：■ 如果页面已包含内容 ， 则只能在现有内容的下方空白 区绘制新的布局表格。■ 在一个布局表格中可创建多个布局单元格 ;布局单元 格不能存在于布局表格之外 ;更不能在一个布局单元 格中创建布局表格 。 也可以仅在准备添加内容时绘 制每一个单元格。■ 当绘制的布局单元格不在布局表格中 ， 则自动创建一 个布局表格作为该单元格的容器 ， 这时表格与页边距 相差8个像素。■ 表格不能互相重叠 ， 可以嵌套 。一个表格可以完全包 含在另一个表格当中 。将插入点放置到一个布局表格 中 ， 即可绘制嵌套布局表格 。嵌套布局表格的大小 不能超过包含它的表格。
《WEB前端设计》表格样式
教学目标
Teaching Goal
1
• 理解表格样式包含的属性
• 学会设置表格样式
2
教学内容
Teaching Content
表格样式
TABLE STYLE
表格样式：
表格样式一般包括为表格添加背景色和添加边框等，具体属性
如下表所示：
属性
bgcolor background-imar-color
border-width
描述
值
表格背景颜色 表格背景图像
预定义颜色值、十六进制#RGB、rgb url地址
表示边框线的类型 如点划线dotted、虚线dashed、双线double等
表示边框颜色 表示边框宽度
如颜色值或透明度的百分比值
如像素值或细（thin）、中等（medium）、粗 （thick）等
属性名 border-style border-color
用途 边框线的类型
边框颜色
border-width
边框宽度
属性值 如点划线dotted、虚线dashed、双线double等
如颜色值或透明度的百分比值 如像素值或medium、thin、thick等，不可为负
表格样式
TABLE STYLE
为表格添加某个方向的边框样式：
表格样式
TABLE STYLE
为表格添加背景色：
为表格添加背景色分为添加背景颜色和背景图片两种，为 表格添加背景颜色可通过background-color或bgcolor来设置， 为表格添加背景图片可通过background或background-image来设 置。
表格样式
TABLE STYLE
1.如果只设置一个参数，则该参数将作用于四个边，即四个边的样式风格一 样； 2.如果每个属性的后面设置两个参数，则第一个参数作用于上下边框，第二 个参数作用于左右边框； 3.如果每个属性的后面设置三个参数，则第一个参数作用于上边框，第二个 参数作用于左右边框，第三个参数作用于下边框； 4.如果每个属性的后面设置四个参数，则第一个参数作用于上边框，第二个 参数作用于右边框，第三个参数作用于下边框，第四个参数作用于左边框， 即上右下左。
《设置网页背景》教学设计
《设置网页背景》教学设计银川唐徕回民中学宝湖校区马伏华一、教学设计部分本课的主要内容与地位教材：电子工业出版社义务教育教科书《信息技术》九年级（上）主要教学内容：设置网页的背景（1.为网页设置颜色背景 2.为网页设置图片背景）。
拓展内容：设置表格（单元格）的背景（颜色背景，图片背景）网页是否美观大方，除了要规划好版面结构外，还要综合考虑页面中各元素的合理搭配和美化，尤其在很大程度上取决于各元素的色彩搭配是否和谐得当、色调是否与网站主题相吻合，以及网站中元素是否能满足网站要表达的感情等。
对网页进行美化是每一个网站建设者的不懈追求。
本课与前后内容的关系在第5课时，学生已经学习了给主页添加内容，包括文字和图片，但整体网页色彩还是显得很单一。
本节网页美化是对前期所做的网页的修饰，是提升网站可观赏性的一个非常重知识目标/技能目标知识目标了解对网页进行美化的常用方法。
理解美化网页对网站质量的提高作用。
技能目标掌握设置网页及表格的背景的一般方法。
情感态度与价值观目标1.提高审美意识，发现美、认识美，美化生活从自身做起。
2. 体会与老师、同学之间沟通和交流，虚心听取别人的意见，取人之长，补己之短。
本课的重难点重点：设置网页背景、设置表格（单元格）背景难点：网页的色彩调配及图片背景的设置本课的课时分配建议教法建议教学过程中，教师应引导学生参考借鉴优秀网站在色彩、布局上的做法，自主地学习有关版面设计和色彩搭配方面的知识，并应用到自己的网站设计中。
本节涉及多个任务，教师应布置合理的分组，由学生通过实践操作，完成任务体会背景设置。
教学方法：任务驱动自主学习小组交流学法建议：美化效果在很大程度上取决于对美的鉴赏能力，学生在平时应多注意电视广告、杂志封面、街头广告牌等的设计的方法，并将它们应用到自己的网页设计中。
教学评价建议：自评、互评、师评要注意的问题，侧重对学生探究新知识的态度是否积极向上进行评价。
本课教学资源索引1．设置网页背景站点下的的半成品网页：Index.html、001.html 002.html 003.html，网页模板mb.dwt\mb1.dwt.2.学生完成任务所需背景图片。
网页配色方案大全
⽹页配⾊⽅案⼤全配⾊⽅案⼤全配⾊⽅案⼀ (粉绿⾊):浏览器边框颜⾊ #e8ffe8顶部菜单表格背景(深背景) #e8ffe8顶部菜单表格背景(浅背景) #f7fff7表格边框颜⾊⼀ #00b700表格边框颜⾊⼆ #b0ffb0标题表格颜⾊⼀（深背景） #e8ffe8标题表格颜⾊⼆（浅背景） #f7fff7表格体颜⾊⼀ #f7fff7表格体颜⾊⼆(1和2颜⾊在⾸页显⽰中穿插) #e8ffe8表格标题栏字体颜⾊ #006a00表格内容栏字体颜⾊ #006a00警告提醒语句的颜⾊ #000000配⾊⽅案⼆ (⽔橘红⾊):浏览器边框颜⾊ #ffe9e1顶部菜单表格背景(深背景) #ffe9e1顶部菜单表格背景(浅背景) #fff9f7表格边框颜⾊⼀ #ff8e68表格边框颜⾊⼆ #ffa98c标题表格颜⾊⼀（深背景） #ffe9e1标题表格颜⾊⼆（浅背景） #fff9f7表格体颜⾊⼀ #fff9f7表格体颜⾊⼆(1和2颜⾊在⾸页显⽰中穿插) #ffe9e1表格标题栏字体颜⾊ #9b2700表格内容栏字体颜⾊ #9b2700警告提醒语句的颜⾊ #000000配⾊⽅案三 (西⽠红⾊):浏览器边框颜⾊ #ffe1f0顶部菜单表格背景(深背景) #ffe1f0顶部菜单表格背景(浅背景) #fff4fa表格边框颜⾊⼀ #ff51b0表格边框颜⾊⼆ #ff8cc6标题表格颜⾊⼀（深背景） #ffe1f0标题表格颜⾊⼆（浅背景） #fff4fa配⾊⽅案四 (宝⽯蓝⾊):浏览器边框颜⾊ #d0dcff顶部菜单表格背景(深背景) #d0dcff顶部菜单表格背景(浅背景) #eef2ff表格边框颜⾊⼀ #002cae表格边框颜⾊⼆ #7d9aff标题表格颜⾊⼀（深背景） #d0dcff标题表格颜⾊⼆（浅背景） #eef2ff表格体颜⾊⼀ #eef2ff表格体颜⾊⼆(1和2颜⾊在⾸页显⽰中穿插) #d0dcff 表格标题栏字体颜⾊ #001c7b表格内容栏字体颜⾊ #001c7b警告提醒语句的颜⾊ #000000配⾊⽅案五 (湖蓝⾊):浏览器边框颜⾊ #cef3ff顶部菜单表格背景(深背景) #cef3ff顶部菜单表格背景(浅背景) #ecfbff表格边框颜⾊⼀ #007ca6表格边框颜⾊⼆ #15b9ff标题表格颜⾊⼀（深背景） #cef3ff标题表格颜⾊⼆（浅背景） #ecfbff表格体颜⾊⼀ #ecfbff表格体颜⾊⼆(1和2颜⾊在⾸页显⽰中穿插) #cef3ff 表格标题栏字体颜⾊ #00637b表格内容栏字体颜⾊ #00637b警告提醒语句的颜⾊ #007a99配⾊⽅案六 (⾦黄⾊):浏览器边框颜⾊ #ffeed0顶部菜单表格背景(深背景) #ffeed0顶部菜单表格背景(浅背景) #Fffaf0表格边框颜⾊⼀ #co7800表格边框颜⾊⼆ #ffc562标题表格颜⾊⼀（深背景） #ffeed0配⾊⽅案七 (深绿⾊):浏览器边框颜⾊ #e0f4e8顶部菜单表格背景(深背景) #e0f4e8顶部菜单表格背景(浅背景) #f0f8f0表格边框颜⾊⼀ #288058表格边框颜⾊⼆ #88d8b0标题表格颜⾊⼀（深背景） #e0f4e8标题表格颜⾊⼆（浅背景） #f0f8f0表格体颜⾊⼀ #f0f8f0表格体颜⾊⼆(1和2颜⾊在⾸页显⽰中穿插) #e0f4e8表格标题栏字体颜⾊ #205838表格内容栏字体颜⾊ #205838警告提醒语句的颜⾊ #287048配⾊⽅案⼋ (果绿⾊):浏览器边框颜⾊ #e8f8d0顶部菜单表格背景(深背景) #e8f8d0顶部菜单表格背景(浅背景) #f8fcf0表格边框颜⾊⼀ #507010表格边框颜⾊⼆ #a0dc40标题表格颜⾊⼀（深背景） #e8f8d0标题表格颜⾊⼆（浅背景） #f8fcf0表格体颜⾊⼀ #f8fcf0表格体颜⾊⼆(1和2颜⾊在⾸页显⽰中穿插) #e8f8d0表格标题栏字体颜⾊ #003300表格内容栏字体颜⾊ #003300警告提醒语句的颜⾊ #309478配⾊⽅案九 (粉⾊):浏览器边框颜⾊ #ffe8f0顶部菜单表格背景(深背景) #ffe8f0顶部菜单表格背景(浅背景) #fff6fc表格边框颜⾊⼀ #f00078表格边框颜⾊⼆ #ff98do标题表格颜⾊⼀（深背景） #ffe8f0配⾊⽅案⼗ (紫⾊):浏览器边框颜⾊ #f8dcf8顶部菜单表格背景(深背景) #f8dcf8顶部菜单表格背景(浅背景) #fff0ff表格边框颜⾊⼀ #983498表格边框颜⾊⼆ #d890d8标题表格颜⾊⼀（深背景） #f8dcf8标题表格颜⾊⼆（浅背景） #fff0ff表格体颜⾊⼀ #fff0ff表格体颜⾊⼆(1和2颜⾊在⾸页显⽰中穿插) #f8dcf8表格标题栏字体颜⾊ #602060表格内容栏字体颜⾊ #602060警告提醒语句的颜⾊ #602060配⾊⽅案⼗⼀ (蓝紫⾊):浏览器边框颜⾊ #dedefa顶部菜单表格背景(深背景) #dedefa顶部菜单表格背景(浅背景) #f5f5fe表格边框颜⾊⼀ #4040e3表格边框颜⾊⼆ #9b9bf0标题表格颜⾊⼀（深背景） #dedefa标题表格颜⾊⼆（浅背景） #f5f5fe表格体颜⾊⼀ #f5f5fe表格体颜⾊⼆(1和2颜⾊在⾸页显⽰中穿插) #dedefa 表格标题栏字体颜⾊ #151595表格内容栏字体颜⾊ #151595警告提醒语句的颜⾊ #602060配⾊⽅案⼗⼆（淡蓝⾊）：浏览器边框颜⾊ #e8f0ff顶部菜单表格背景(深背景) #e8f0ff顶部菜单表格背景(浅背景) #f4f9ff表格边框颜⾊⼀ #0053ec表格边框颜⾊⼆ #a2c2ff标题表格颜⾊⼀（深背景） #e8f0ff配⾊⽅案⼗三（雪青⾊）：浏览器边框颜⾊ #f9e6ff顶部菜单表格背景(深背景) #f9e6ff顶部菜单表格背景(浅背景) #Fdf4ff表格边框颜⾊⼀ #cd37ff表格边框颜⾊⼆ #ebacff标题表格颜⾊⼀（深背景） #f9e6ff标题表格颜⾊⼆（浅背景） #Fdf4ff表格体颜⾊⼀ #Fdf4ff表格体颜⾊⼆(1和2颜⾊在⾸页显⽰中穿插) #f9e6ff 表格标题栏字体颜⾊ #205838表格内容栏字体颜⾊ #205838警告提醒语句的颜⾊ #287048配⾊⽅案⼗四（青绿⾊：中等，缺⾊时再使⽤）：浏览器边框颜⾊ #dffff3顶部菜单表格背景(深背景) #dffff3顶部菜单表格背景(浅背景) #F7FFFc表格边框颜⾊⼀ #00935b表格边框颜⾊⼆ #00ce81标题表格颜⾊⼀（深背景） #dffff3标题表格颜⾊⼆（浅背景） #F7FFFc表格体颜⾊⼀ #F7FFFc表格体颜⾊⼆(1和2颜⾊在⾸页显⽰中穿插) #dffff3表格标题栏字体颜⾊ #005b39表格内容栏字体颜⾊ #005b39警告提醒语句的颜⾊ #005b39配⾊⽅案⼗五（酱红⾊）：浏览器边框颜⾊ #ffd2c4顶部菜单表格背景(深背景) #ffd2c4顶部菜单表格背景(浅背景) #ffede8表格边框颜⾊⼀ #db3700表格边框颜⾊⼆ #ff8c6a标题表格颜⾊⼀（深背景） #ffd2c4。
网站规划与网页设计
段落标记放在一个段落的头尾，用于定义一个段落。 <p>...</p>标记不但能使后面的文字换到下一行，还可 以使两段之间多一空行，相当于两个<br /><br />标记。 段落标记的格式为： <p align="left|center|right|justify"> 文字 </p> 其中属性align用来设置段落文字在网页上的对齐方式： left（左对齐）、center（居中） 、 right（右对齐）和 justify(两端对齐)。缺省时默认为left。
– 4.所有的属性必须用引号""括起来 – <height=80>必须修改为： – <height="80"> – <input name=guitar type=checkbox value=guitar> × – <input name="guitar" type="checkbox" value="guitar" /> √
– 7.不要在注释内容中使用“--” – “--”只能发生在注释的开头和结束，也就是说， 在内容中它们不再有效。 • <!--这里是注释-----------这里是注释--> × • 用等号或者空格替换内部的虚线。 • <!--这里是注释============这里是注释-> √
段落标记
1 段落标记<p>...</p>
段落标记
2 换行标记<br> /<nobr>
强制换行标记<br> 格式： 文字<br /> 由于xhtml中Enterprise键产生的换行符会被忽略掉， 要换行就必须使用这个标记。 不换行标记<nobr> 格式：<nobr>文字</nobr> 对于输入公式、数字等信息时，会用到。
网站设计的50种经典元素
网站设计的50种经典元素在网络时代，网站设计的重要性不言而喻。
一款好的网站不仅能提高用户体验，还能增加品牌价值和销售额。
而一个好的网站设计不仅要有美观的界面和流畅的交互，还需要有一系列经典的设计元素。
下面就为大家介绍网站设计的50种经典元素。
1. 标题栏：标题栏是网站的重要组成部分，它通常位于网页的最顶部，展示网站名称和一些重要的菜单信息。
2. 导航栏：导航栏是网站的核心元素之一，它可以帮助用户快速浏览网站的内容和功能。
3. Banner：Banner是网页中用于展示广告、图片、视频等信息的区域，通常位于页面的顶部或顶部以下。
4. 滚动条：滚动条可以让用户方便地在网页中进行上下滚动。
5. 面包屑导航：面包屑导航可以帮助用户快速了解自己所处的位置和网站的结构。
6. 搜索框：搜索框是用户查找网站信息的重要工具，它可以大大提高用户体验。
7. 图片库：图片库是网站中用于存储和管理图片的区域，让用户可以方便地浏览和下载。
8. 视频库：视频库是网站中用于存储和管理视频的区域，让用户可以方便地浏览和播放。
9. 表格：表格是网站中常用的用于展示数据的元素，可以帮助用户快速了解信息。
10. 表单：表单可以让用户方便地提交和保存数据，一般用于注册、登录、评论等功能。
11. 分页器：分页器可以帮助用户浏览长页面内容，提高用户体验。
12. 标签：标签可以帮助用户快速了解和过滤网站内容，提高用户体验。
13. 按钮：按钮是网站中常用的交互元素，可以帮助用户进行各种操作。
14. 弹出式窗口：弹出式窗口可以在不离开当前页面的情况下展示更多的信息或功能。
15. 鼠标悬浮提示：鼠标悬浮提示可以在用户鼠标悬停于某个元素上时展示更多的信息。
16. 图片轮播：图片轮播可以让用户浏览多张图片，提高用户体验。
17. 列表：列表是网站中常用的展示数据的元素，可以帮助用户快速了解信息。
18. 进度条：进度条可以帮助用户了解任务的进度和完成情况。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页及表格背景设计
一、网页背景设计技巧
1.颜色背景
颜色背景的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对于图片背景来说，它有无与伦比的显示速度上的优势。
在网页文件中，一般通过标签来指定页面的颜色背景，其HTML（超文本标记语言）语法为:其中的"color"表示不同的颜色，可以用各种不同的颜色表示方法，比较常用的有直接用颜色的英文名称，如blue、yellow、black等等，还可以用颜色的十六进制表示方法，如#0000FF、#FFFF00、#000000等等，此外还可以用百分比值法和整数法，其效果都是一样的。
颜色背景虽然比较简单，但也有不少地方需要注意，如要根据不同的页面内容设计背景颜色的冷暖状态，要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。
2.沙纹背景
沙纹背景其实属于图片背景的范畴，它的主要特点是整个页面的背景可以看作是局部背景的反复重排，在这类背景中以沙纹状的背景是为常见，所以我们将其统称为沙纹背景。
初学主页制作者都有这样的经历，当试图把自己的照片作为页面的背景是，却发现浏览器上显示出来的不仅仅是一个照片，而是同一照片在水平和竖直方向上的反复排列。
这就是浏览器处理图片背景时的规律方法，利用这一规律我们可以用一小块图片作为页面背景，让它自动在页面上重复排列，铺满整个页面，从而使网页的体积大大减小。
沙纹背景的原理和实现方法，就是找一个小的图片，越小越好，但注意要使最后的背景看起来要像一个整体，而不是若干图片的堆砌。
其实现的HTML语法如下:其中的"picture"表示背景图片的URL（统一资源定位符）路径。
3.条状背景
条状背景与沙纹背景是比较相似的，它适用于页面背景在水平或竖直方向上看是重复排列的，而在另一方向上看则是没有规律的。
它也是利用浏览器对图片背景的自动重复排列，与沙纹背景所不同的是它只让图片在一个方向上重复排列。
以在竖直方向上排列为例，首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片，其长度与页面的宽度相当。
也通过将其设为页面背景，经浏览器显示后，就成为整个页面从左到右蓝白渐变的分栏颜色背景。
当然，也可以用类似的方法实现条状背景在水平方向上的重复排列。
4.照片背景
把自己或朋友的照片作为页面的背景让大家看到，是有点令人激动的事情，但浏览器对图片的自动重复排列却使这一愿望难以实现。
怎么办呢?只有想不到的，没有做不到的，这里我们用上一点简单的CSS（层叠样式表)。
在网页文件的……之间加入下面的CSS语句:这样，在网页页面中，就可以看到你的照片位于页面的正中间，而且在拉动浏览器窗口的滚动条时，照片仍然位于页面的正中间而不随页面内容一起滚动。
如果你觉得照片位于页面的正中间不满意，你也可以随意地调整它在页面中的位置，只需要调整"background-position"（属性设置背景图像的起始位置）的值就可以了。
5.复合背景
如果你在练习上面的“照片背景”时“不小心”也设置了标签里的颜色背景，那么你看到了什么?颜色背景还起作用吗?对，你能看到你的照片浮于你设的颜色背景之上，二者能够同时正常地显示出来。
这就是复合背景的魅力，更为吸引人的是，当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候，浏览器能够自动用你所设置的颜色背景取而代之。
它的设计方法，就不用我再多说了吧!
6.局部背景
前面我们所说的背景都是整个页面的背景，能不能在页面上为某个局部的内
容设置属于它自己的背景呢?回答是肯定的。
最为常见的是在表格的设计当中，我们可以为表格设置一个不同于页面的背景，甚至在不同的表格单元中，我们也可以设置各个表格单元自己的背景。
在浏览器中的显示效果,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。
除此之外，我们还可以单独为某个文字段落设置背景，甚至为这个文字段落中的某几个文字设置自己的背景，这也需要用上一些CSS。
二、表格添加背景
在表格之外套个div，给div加个背景;
<table style="background-image:url(img/background.jpg); background-repeat:repeat" >
控制背景图是否重复和如何重复属性如下:
repeat 默认。
背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
路径一定要弄对了,如果都是根目录，直接写img/background.jpg。