第一篇：表格基础和DIV+CSS网页布局基础教案（模版）
本部分任务
制作“宝贝分类”页面 制作“公告栏”页面
为什么使用表格
表格应用场合 具体内容见ppt 表格的基本结构
具体内容见ppt
表格的基本语法
Table标签 Tr标签 Td标签 具体内容见ppt 注：表格标签中没有列标签。
如何创建表格
具体内容见ppt
跨行跨列的表格
什么是跨行跨列的表格 跨多行的表格
跨多列的表格 具体内容见ppt
表格的美化修饰
什么是表格的美化修饰 如何设置表格的尺寸和边框 width用来设置表格的宽度 height用来设置表格的高度
border用来设置表格边框尺寸大小 bordercolor用来设置表格边框颜色 如何设置背景
background属性用来设置表格的背景图片
bgcolor属性用来设置表格、行、列的背景色。HTML中颜色的表示方式：“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝。
如何设置对其方式
align属性用来设置表格、行、列的对齐方式 为什么要使用填充属性 具体内容见ppt 什么是填充属性和间距属性
border(边框的厚度)cellpadding(单元格填充)cellspacing(单元格间距)如何使用填充、间距属性 border(边框的厚度)cellpadding(单元格填充)cellspacing(单元格间距)
表格的布局
什么是表格布局 使用表格进行布局
用表格对网页的内容进行整体控制
DIV+CSS规划页面
什么是CSS？
为什么要使用CSS？ 如何使用CSS？
DIV+CSS如何规划页面？
什么是CSS？
CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。
为什么要使用CSS？
CSS的特点
便于页面的修改。便于页面风格的统一。减少网页的体积。为什么要使用CSS？ 使用CSS布局的优点 表现和内容相分离 提高页面浏览速度 易于维护和改版
CSS样式表极大地提高了工作效率
样式通常保存在外部的.css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。内联定义
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。
如何使用CSS？
只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。 定义内部样式块对象
你可以在你的HTML文档的和
标记之间插入一个块对象。定义方式请参阅样式表语法。这样的样式表只能针对本页有效。不能作用于其它页面。 导入样式——Style导入
与链入外部样式的功能基本相同，只是语法和实现方式上有差别。
它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url(“/css/global.css”)的形式链接全局样式，这样就使代码达到很好的重用性。 导入样式——Link标签导入
使用Link标签代替Style标签来导入CSS文件。
它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。
除了内联定义是直接作用于标签本身以外，其他CSS使用方式都需要建立标签和样式之间的映射关系。主要的映射关系有： id映射 class映射 标签映射 混合映射 CSS样式和页面标签元素的对应方式
几种样式的优先级
id优先级高于class 后面的样式覆盖前面的 指定的高于继承 行内样式高于内部或外部样式
总结原则：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的。
DIV+CSS如何规划页面？
请关注上机实验3
By---QQ69848627
第二篇：DIV+CSS网页布局中最常见的十个小错误
即使是CSS高手，也难免在书写CSS代码的时候出一些小错误，或者说，任何一种代码都是如此。小错误却往往造成大问题，浪费很多无辜的时间来调试和排错。查看下面这份CSS网页布局中易犯的10个小错误，努力的修正你可能会犯的错误，加速你的前端开发效率。
1.检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错DIV的嵌套关系，可以用Dreamweaver的验证功能检查一下有无错误。
2.检查CSS是否书写正确
检查一下有无拼写错误、是否忘记结尾的 } 等，可以利用Clean CSS来检查 CSS的拼写错误。Clean CSS本是为CSS减肥的工具，但也能检查出拼写错误。
3.用删除法确定错误发生的位置
如果错误影响了整体布局，则可以逐个删除DIV块，直到删除某个DIV块后显示恢复正常，即可确定错误发生的位置。
4.利用Border属性确定出错元素的布局特性
使用Float属性布局一不小心就会出错。这时为元素添加Border属性确定元素边界，错误原因即水落石出。
5.Float元素的父元素不能指定Clear属性
MacIE下如果对Float的元素的父元素使用Clear属性，周围的Float元素布局就会混乱。这是MacIE的着名的Bug，倘若不知道就会走弯路。
6.Float元素务必指定Width属性
很多浏览器在显示未指定Width的Float元素时会有bug。所以不管Float元素的内容如何，一定要为其指定Width属性。
另外指定元素时尽量使用em而不是px做单位。
7.Float元素不能指定Margin和Padding等属性
IE在显示指定了Margin和Padding的Float元素时有Bug。因此不要对Float元素指定Margin和Padding属性（可以在Float元素内部嵌套一个DIV来设置Margin和Padding）。也可以使用Hack方法为IE指定特别的值。
8.Float元素的宽度之和要小于100%
如果Float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
9.是否重设了默认的样式？
某些属性如Margin、Padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的Margin、Padding设置为0、列表样式设置为None等。
10.是否忘记了写DTD？
如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。
第三篇：网页制作基础
第8章网页制作基础
• 8.1 概述
• 8.1.1 基本概念
• 网页（Web Page）
– 网页是一种可以在）进行编辑，它能够对网页的内容、显示效果及超链接进行描述，形成HTML文档。
8.1.2 常用网页制作工具
• 文本编辑器：Notepad、UltraEdit
• 可视化网页编辑软件：Dreamweaver、FrontPage
• 图像处理软件：Photoshop、Fireworks
• 音频处理软件：Adobe Audition、GoldWave
• 视频处理软件：Adobe Premiere、会声会影
• 动画制作软件：Flash
8.1.3 Dreamweaver介绍
• Dreamweaver是Adobe公司的集网页制作和网站管理于一身的可视化网页编辑器。
8.1.4 案例介绍
• 案例是一个关于现代诗“再别康桥”欣赏的网站，网站名称为“zbkq”。
8.2 创建和管理站点
8.2.1 创建本地站点
• 站点就是放置网站文件的一个文件夹，每一个网站都要有一个自己的站点，以便方
便有效地管理站点中的各种资源。
• 本地站点：在本地开发时使用的文件夹。
• 创建演示案例的本地站点，操作步骤如下：
① 选择菜单命令【站点】→【新建站点】，弹出“站点定义向导”对话框，输入站点名称“zbkq”。② 单击【下一步】按钮。选择“否，我不想使用服务器技术”。
③ 单击【下一步】按钮。选择第一个选项，然后指定文件存储在本地硬盘的位置为“D:zbkq”。④ 单击【下一步】按钮。从下拉列表框中选择【无】。
⑤ 单击【下一步】按钮。
⑥ 单击【完成】按钮，站点创建完成，站点zbkq将显示在“文件”面板中。
8.2.2 向站点中添加内容
• 向站点中添加网页文件index.html和zzjs.html
① 打开站点zbkq，在面板中单击鼠标右键，从弹出菜单中选择【新建文件】命令，新建一个网页文件。
② 新建网页的默认名称是untitled.html，将untitled.html命名为index.html。
③ 使用同样的方法添加网页zzjs.html。
④ 在index.html上单击鼠标右键，从弹出菜单中选择【设成首页】命令，将其设置成主页。
• 添加文件夹的方法与添加网页的方法类似，在站点zbkq中添加两个文件夹images
和media。
8.2.3 管理本地站点
• Dreamweaver 8提供了强大的站点编辑和管理功能。
• 选择菜单命令【站点】→【管理站点】，弹出“管理站点”对话框
8.3 使用表格布局网页
8.3.1 插入表格
• 向index.html中插入一个表格，操作步骤如下：
① 打开index.html。
② 选择菜单命令【插入】→【表格】，或者在“插入”工具栏的“常用”选项卡中，单击“表格”按钮，弹弹出“表格”对话框。
③ 在“表格”对话框设置行数为2，列数为1，表格宽度为300像素，边框粗细、单元格边距和单元格间距均为0。
• 向index.html的表格中嵌入两个表格，操作如下：
① 将光标定位到表格的第一个单元格，插入一个表格，表格属性为：行数1，列数2，表格宽度100%，边框粗细1，单元格边距0，单元格间距1。
② 将光标定位到表格的第二个单元格，插入一个表格，表格属性为：行数4，列数2，表格宽度100%，边框粗细1，单元格边距0，单元格间距1。
8.3.2 选择表格元素
1.选择表格
– 单击表格中任一单元格，然后在“标签选择器”中选择“”标签。
– 单击表格中任一单元格，然后选择菜单命令【修改】→【表格】→【选择表
格】。
2.选择行或列
– 将鼠标指针移动到行的左边缘或列的上边缘。
– 当鼠标指针变为选择箭头或时，单击以选择当前行或列。
– 按住鼠标左键进行上下或左右拖动，可以选择相邻的多个行或列。
– 选择不相邻的行或列，可以在按住Ctrl键的同时选择行或列。
3.选择单元格
– 选择单个单元格，执行下列操作之一：
• 单击单元格，然后在“标签选择器”中选择“
• 按住Ctrl键，然后单击单元格。
– 选择一行或矩形的单元格块，执行下列操作之一：
• 从一个单元格拖到另一个单元格。
• 单击一个单元格，然后按住Shift键单击另一个单元格。这两个单元
格定义的直线或矩形区域中的所有单元格都将被选中。
– 选择不相邻的单元格，可以在按住Ctrl键的同时单击要选择的单元格。
8.3.3 设置表格属性
• 表格和单元格分别有各自的属性面板，可以分别进行参数设置。
• 选择index.html中第一个插入的表格。指定表格ID为table0，宽为777像素，对齐
为居中对齐，背景图像为images/table_bg.gif。
• 选择table0的第一行后。设置垂直对齐方式为顶端，高度为162像素。
• 选择第一个嵌套表格，指定ID为table1，高为156像素，边框颜色为#0099CC。选
择table1的第一个单元格，指定宽度为568像素。
• 选择第二个嵌套表格，指定表格ID为table2，边框颜色#0099CC。选择table2的第一行的两个单元格和第三行的两个单元格，指定高度为28像素，背景图像为images/table_title.gif。选择table2的第二行，指定高度为240像素，第一列宽度468像素。选择table2的第四行，指定高度为80像素。
8.3.4 添加及删除行和列
• 在index.html中table2的最后添加一个新行，操作步骤如下：
① 单击table2的最后一个单元格。
② 选择菜单命令【修改】→【表格】→【插入行或列】，弹出“插入行或列”对话框。
③ 选择“行”，设置“行数”为1，位置为“所选之下”，单击【确定】按钮，新的一行出现在表格中。
④ 选择新添加的行，指定高度为36像素。
• 删除某行或列，执行下列操作之一：
– 单击要删除的行或列中的一个单元格，然后选择菜单命令【修改】→【表格】
→【删除行】或【修改】→【表格】→【删除列】。
– 选择完整的一行或列，然后选择菜单命令【编辑】→【清除】或按Delete
键。
8.3.5 拆分和合并单元格
• 合并index.html中table2中的单元格，操作步骤如下：
① 选定table2的最后一行的两个单元格。
② 在“属性”面板中单击“合并单元格”按钮，或者选择菜单命令【修改】→【表格】→【合并单元格】，完成单元格合并。
• 至此，index.html的结构布局已设计完成。
8.4 编辑网页
8.4.1 新建网页
• Dreamweaver 8还提供了一种使用菜单命令创建网页文件的方法。
① 选择菜单命令【文件】→【新建】，弹出“新建文档”对话框中。在“新建文档”对话框中选择“基本页”类别，从“基本页”列表中选择“HTML”，点击【创建】按钮，创建一个网页文件。
② 选择菜单命令【文件】→【保存】，将网页文件保存到站点zbkq下，文件名xzbj.html。
8.4.2 设置网页属性
• 网页的基本属性包括网页中的默认字体、网页的背景颜色或背景图像、页边距、网
页的标题、网页编码等。
• 可以使用“页面属性”对话框设置网页的属性。
① 打开index.html，选择菜单命令【修改】→【页面属性】，或者单击属性面板中的【页面属性】按钮均可打开“页面属性”对话框。
② 选择“分类”中的“外观”类别，在外观选项中指定页面字体为“宋体”，大小为12，背景图像为images/bg.gif。
③ 按F12键在IE浏览器中打开网页。
• 再次打开“页面属性”对话框，设置背景颜色为#DEEBF3，重复为“横向重复”，上边
距0像素。
• 再次在IE浏览器中打开index.html网页。
• 使用同样的方法设置zzjs.html和xzbj.html的背景图片为images/bg.gif，重复为“横向
重复”，背景颜色为#DEEBF3，字体为“宋体”，大小为12。
8.4.3 添加文本
• 文本是网页设计最常用的元素，是网站内容的集中体现。
• 添加文字
– 在Dreamweaver中有两种换行方式：“分段换行”和“段内换行”。
• 添加特殊字符
– 如版权符号、注册商标符号，以及一些特殊的数学符号等。
• 添加空格
– Dreamweaver默认不支持连续输入多个空格，可以将输入法切换到全角状态
输入。
• 添加水平线
– 水平线有利于组织信息，可以使用一条或多条水平线以分隔文本和对象。
• 设置文本属性
– 选择zzjs.html中的“徐志摩介绍”，设置格式为“标题1”，字体颜色为#FFFFFF，居中对齐。
– 选择xzbj.html中的“再别康桥写作背景”，设置格式为“标题1”，字体颜色为
#FFFFFF，居中对齐。
– 设置index.html中表格标题文字为“粗体”，颜色为#FFFFFF，版权符号©为
Arial字体，版权文字居中对齐，设置table2第二行第一个单元格中的“再别
康桥”为“标题1”格式。
• 为实现index.html中“再别康桥”诗词内容的自下向上滚动效果，可进行如下操作： ① 选中table2的第二行的第一个单元格，将文档窗口切换到“拆分”视图。
② 在代码窗口当前选中的内容中找到“
8.4.4 添加超链接
1.超链接分类
– 内部链接：同一站点内资源之间的链接。
– 外部链接：不同站点资源之间的链接。
– 锚记链接：同一网页或不同网页指定位置的链接。
– Email链接：发送电子邮件的链接。
2.绝对路径和相对路径
（1）绝对路径
“”是一个绝对路径，它表示所链接文档的完整URL。
（2）文档相对路径
“gaoji/preferences.html”是一个文档相对路径，它省略了当前文档和所链接文档URL的相同部分。（3）站点根目录相对路径
“/gaoji/preferences.html”是一个站点根目录相对路径，它表示网页“preferences.html”位于站点根目录（/）下的“gaoji”子文件夹中。
3.网页超链接
– 网页超链接就是指向其他网页或资源的超链接，访问者单击这样的超链接时
将跳转到相应的网页或资源。
4.锚记链接
– 锚记链接常用于包含大量文字的网页，通过点击锚记链接，能够快速跳转到
网页的特定位置，便于访问者查看网页内容。
5.电子邮件链接
– 在网页上创建电子邮件链接，当访问者单击该链接时，可打开浏览器默认的电子邮件处理程序。
8.4.5 添加图像
• 图像是一种重要的网页素材，网页中常用的图像格式是GIF、JPEG和PNG。
• 在index.htm中table1的第二个单元格中插kangqiao.jpg，设置图像的宽为200像素，高为150像素。
8.4.6 添加音频和视频
• 常用的音频文件有WAV、MIDI和MP3，常用的视频文件有MPEG、WMV、RM／
RMVB、ASF等。
1.嵌入视频文件
– 在index.html的table2的第二行的第二个单元格中嵌入“男声朗诵.wmv”。
2.链接到音频文件
– 在index.html的table2的第四行的第三个单元格中链接“林宥嘉-再别康
桥.mp3”。
8.4.7 添加Flash动画
• 添加Flash动画就是将Flash动画直接嵌入到网页中，要求访问者安装有相应浏览器的Flash播放插件，才能播放Flash文件。
• 在index.html中的table1的第一个单元格中插入head.swf。
•在“属性”面板中设置Flash插件的宽度为568像素，高度为150像素。
8.5 发布站点
• Dreamweaver的站点测试功能可以检查站点中是否存在孤立文件，是否有断掉的链
接，以及存在的外部链接等。
• 测试站点zbkq，操作方法如下：
① 在“文件”面板中打开站点zbkq，在站点文件夹上单击鼠标右键。
② 从弹出快捷菜单中选择【检查链接】→【整个本地站点】命令，打开“结果”面板。③修复错误的链接，删除孤立文件。
8.5.2 设置远程信息
• 将站点发布到Internet上，供人们浏览观看，就必须有可访问的域名和主机空间。• 完成站点的测试之后，还需要设置站点的远程信息，之后才可以上传站点
8.5.3 上传站点
• 上传站点可以利用Dreamweaver 8自带的上传功能，也可以用相应的FTP工具。
8.5.4 浏览网页
• 站点上传完毕后，打开IE浏览器，在地址栏中输入站点远程主机的域名或IP地址，浏览器将自动打开站点的主页。
8.6 动态网页技术介绍
• 表单是实现动态网页的一种主要网页元素，是HTML网页与浏览器实现交互的重要
手段。
• 表单在网页中供访问者输入信息，然后将信息提交服务器处理，实现网页交互功能。• Dreamweaver 8提供了大量的表单元素，如按钮、文本框、下拉列表框、单选按钮、复选框。
• 可以使用“插入”工具栏的“表单”选项卡，或者选择菜单命令【插入】→【表单】插
入表单元素。
8.6.1 表单
• 表单是实现动态网页的一种主要网页元素，是HTML网页与浏览器实现交互的重要
手段。
• 表单在网页中供访问者输入信息，然后将信息提交服务器处理，实现网页交互功能。• Dreamweaver 8提供了大量的表单元素，如按钮、文本框、下拉列表框、单选按钮、复选框。
• 可以使用“插入”工具栏的“表单”选项卡，或者选择菜单命令【插入】→【表单】插
入表单元素。
8.6.2 脚本语言
• 脚本语言是一种描述性语言，用于编写嵌入到网页中的脚本程序，既可以用于静态
网页，也可以用于动态网页。
• 脚本程序由浏览器负责解释和执行，可以在网页上产生动态的显示效果和实现与用
户交互的功能。
• 脚本程序代码放置在HTML文档的标记之间。
• 最常用的两种脚本语言是VBScript和JavaScript，8.6.3 服务器端处理程序
• 服务器端处理程序就是在服务器端执行数据处理的脚本程序，在形式上与客户端脚
本程序没有太大的差别，常用的服务器端处理语言有PHP、ASP和JSP。
• PHP（PHP: Hypertext Preprocessor）具有开源、跨平台、简单易学、性能优越等特点，是目前十分流行的服务器端编程语言之一。
• ASP（Active Server Pages）是微软的开发的一种动态网页技术，它没有提供自己的编程语言，默认使用VBScript脚本语言，也可以使用JavaScript语言。
• JSP（Java Server Pages）是Sun公司推出的一种动态网页技术。JSP技术以Java语
言作为脚本语言，普遍认为JSP的执行效率比PHP和ASP都高。
第四篇：网页美工基础
网页美工基础
【教学内容】
网页配色 素材获取 网页布局
【教学目的】
掌握网页配色和布局的常用方法。
【教学重、难点】
重点：网页配色原则、网页布局的类型 难点：实际的运用
【教学方式】
采取讲授和演示相结合的方式。
一、网页配色 1.色彩基础
在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。因此，在网页设计中，色彩的合理运用，能直接影响整个网页的风格，下面我们来了解色彩的基础知识：
1)色彩的三要素
自然界的色彩虽然各不相同，但任何色彩都具有色相、明度、饱和度这三个基本属性。
色相：色相是指色彩的相貌，是指各种颜色之间的区别，是色彩最显著的特征，是不同波长的色光被感觉的结果。光谱中有红、橙、黄、绿、蓝、紫六种基本色光，人的眼睛可以分辨出约180种不同色相的颜色。如图3-1-1就是一个色相环。
图3-1-1 色环
饱和度：饱和度是指色彩的鲜艳程度，也称色彩的纯度。饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大，饱和度越大；消色成分越大，饱和度越小。
明度：明度是指色彩的深浅、明暗，它决定于反射光的强度，任何色彩都存在明暗变化。其中黄色明度最高，紫色明度最低，绿、红、蓝、橙的明度相近，为中间明度。另外在同一色相的明度中还存在深浅的变化。如绿色中由浅到深有粉绿、淡绿、翠绿等明度变化。
2)色彩模式 RGB：人们把红(Red)、绿(Green)、蓝(Blue)这三种色光称之为“三原色光”，RGB色彩体系就是以这三种颜色为基本色的一种体系。目前这种体系普遍应用于数码影像中，如：电视、计算机屏幕、数码相机、扫描仪等。RGB值是从0至255之间的一个整数，不同数值叠加会产生不同的色彩。对于单独的R或G或B而言，当数值为0时，代表这种颜色不发光；如果为255，则该颜色为最高亮度。因此当RGB三种色光都发到最强的亮度，纯白的RGB值就为255,255,255。屏幕上黑的RGB值是0,0,0。R，意味着只有红色存在，且亮度最强，G和B都不发光。因此最红色的数值是255,0,0。同理，最绿色就是0,255,0；而最蓝色就是0,0,255。黄色较特殊，是由红色加绿色而得就是255，255，0。RGB模式是显示器的物理色彩模式。当然，在设计网页的时候用到的素材图片也一般都是RGB模式。
CMYK：CMYK分别代表青(Cyan)、品红(Magenta)、黄(Yellow)、黑(Black)，这是一种基于反光的色彩体系，常用于彩色印刷中。CMYK值是以浓度0-100%来表示，不同浓度叠加会产生不同的色彩。理论上相同浓度的CMY叠加，则会变成黑色，但实际混合色料后并不会呈现黑色而是暗灰色，所以将黑色独立出来，增加印刷时颜色的范围。
HSB:HSB是颜色分为色相、饱和度、明度三个因素，英文为H(Hue)、S（Saturation）B（Brightnes。饱和度高色彩较艳丽，饱和度低色彩就接近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。一般浅色的饱和度较低，亮度较高，而深色的饱和度高而亮度低。
2.网页色彩
1)色彩的心里感觉
红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。
在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。
黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。
在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。
蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。
橙色是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。 如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。 在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。
绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。
在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。
紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
在紫色中红的成份较多时，其知觉具有压抑感、威胁感。 在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。
在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。
白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。
在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。 在白色中混入少量的蓝，给人感觉清冷、洁净。 在白色中混入少量的橙，有一种干燥的气氛。
在白色中混入少量的绿，给人一种稚嫩、柔和的感觉。 在白色中混入少量的紫，可诱导人联想到淡淡的芳香。 黑色具有深沉，神秘，寂静，悲哀，压抑的感受。
灰色具有中庸，平凡，温和，谦让，中立和高雅的感觉。
2)网页色彩搭配的原理
色彩的鲜明性：网页的色彩要鲜艳，容易引人注目。
色彩的独特性：要有与众不同的色彩，使得大家对你的印象强烈。
色彩的合适性：就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。
色彩的联想性：不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。
3)网页色彩搭配的技巧
用一种色彩：这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。
用两种色彩：先选定一种色彩，然后选择它的对比色。
用一个色系：简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。
用黑色和一种彩色：比如大红的字体配黑色的边框感觉很“跳”。
图3-1-2 一般情况下网站色调选择要注意以下几点： 忌讳使用强烈对比的颜色搭配做主色； 配色简洁，主色要尽量控制在三种以内； 背景和内容的对比要明显，少用花纹复杂的背景图片，以便突出显示文字内容。
如果你对颜色的搭配没有经验，可以使用Dreamweaver的配色方案来学习简单的配色，开启Dreamweaver，执行“命令→设定配色方案”进入配色选择窗口，这里提供了多种背景、文本和链接的颜色，可以根据你的需要来选择搭配。当然，你也可以使用一些专门的网页配色软件如“ColorImpact”、“三生有幸”等来辅助你搭配好网站的色彩。
3.实例分析
1)这是个大型的NBA网站。通常我们经常看到的此类网站以白色为背景，但是这个网站却用灰黑色RGB为（48，48，48/#333333）（以下颜色都用RGB表示），文章标题用色为RGB为（203，201，153/#CCCC99），菜单使用的RGB为（112，119，112/#707770）。这样的配色可以显示独特的个性，又不失大型网站的风采。如图3-1-3。
图3-1-3
2)下面是一个娱乐类的综合性网站UGO，他的配色方案是背景色为黑色RGB为（0，0，0）中嵌套RGB（0，0，82），字体白色RGB（255,255,255）,菜单为RGB（77,114,159）。这样的虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。如图3-1-4。
图3-1-4 3)下面的这个网站是大名鼎鼎的微软公司网站，微软不仅软件做的好，连网页制作也是世界一流。他的每一个网页都是制作的样板。从网页我们就可以看出微软公司的风格、作风，以及雄厚的实力。背景颜色使用蓝色RGB为（0，151，254），菜单为黑色RGB（0，0，11），菜单为灰色RGB（200，200，200），字体为黑色RGB（0，0，0），如图3-1-5。
图3-1-5 4)现在介绍的网站相对简单，但是她的用色也别具匠心，现在我们来看一看，整体上使用的是白色RGB（255，255，255），辅助色为RGB（79，88，95），菜单色为RGB（48，64，64）和RGB（0，81，111）字体使用的是RGB（83，86，91）。虽然简单，但颜色搭配非常的科学合理。如图3-1-6。
图3-1-6 5)下面的网站采用黄色调为主，很体现公司的个性，现在我们就来看一看她的颜色搭配。主色调为黄色RGB为（255，199，48/#FFC730），辅助色调为RGB（49，102，46）字体为棕色RGB（153，103，0），中间再配以抽象的图片，显得个性十足但又不单调。如图3-1-7。
图3-1-7 6)橘红色如果运用得当的话是一种非常使用于网页上的颜色。下面的这个网站就是一个非常著名的例子。他的主色调为RGB（255，151，0）辅助色调为RGB（255，103，4），菜单RGB为（252，200，0）。字体使用黑色RGB为（0，0，0）。此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。如图3-1-8。
图3-1-8 7)鲜红色也是一种震撼感很强的颜色，如果搭配不当，也可能使网站没有风格和特点。下面的这个网站就是使用红色比较好的网站。我们来看看他的颜色搭配。他使用的主色调是RGB（200，9，0），配以抽象的图形，文字使用的是RGB（213，229，167）显得美观而不失独特，大气而不逼人。如图3-1-9。
图3-1-9 8)下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色，如果使用到你的网页中，肯定会给人耳目一新的感觉。他的主色调为RGB（144，151，97）辅助色调为RGB（173，168，112）边饰为黑色RGB（0，0，0）字体为黑色RGB（0，0，0）。这样的搭配显得风格独特，颜色和谐而庄重。如图3-1-10。
图3-1-10 9）下面的设计更加的简单化，但是颜色的使用使网页并不呆板，反而让人感觉到一股浓浓的生活和家庭气氛，使人置身于美丽和爱中。他的主体是由两种颜色构成，分别是RGB（239，200，161）和RGB（201，254，200）。如此简单，但是却栩栩如生，跃然网上。如图3-1-11。
图3-1-12 10)下面举出这个例子是想证明一个道理——只要你有足够的想象力，你就能够设计出漂亮的网页。目前在网上非常流行一句话就是网页的搭配不要超过四种主要颜色，否则就有杂乱之感。下面的这个网站远远的超过了三种颜色，但是她并不失美丽。因此重要的还是色彩的驾驭能力。下面这个例子的菜单就使用了7种颜色，但是我们看到的网页并不杂乱，相反感觉作者很有创意。如图3-1-13。
图3-1-13 二.素材图像的获取
获取素材图像的方法很多，常用的有3种：
1．从Internet下载，网络上的素材资源很多，大家可以充分利用。2．通过数码设备或者扫描现成的印刷品或照片。3．通过利用绘图软件制作获得（比如Photoshop）。三.网页布局
网页布局设计往往是很难的，因为网页布局直接影响到页面的美观程度，网页的内容多少也影响着布局的设计。大多数网站页面结构都会包括网页标题、网站LOGO、导航栏、功能列表区、主内容区和状态栏等。在进行网页布局设计时不要把所有内容都放在页面里。还需要我们把网页内容进行合理的排版布局，以给浏览者赏心悦目的感觉，增强网站的吸引力。在设计布局的时候我们要注意把文字、图片在网页空间上均匀分布并且不同形状、色彩的网页元素要相互对比，以形成鲜明的视觉效果。
我们先来说说构成，“构成是将造型按视觉效应、视觉力学和精神力学等原则组成的，具备美好形态的造型”。构成形式里，有空间构成（平面构成和立体构成）和时间构成（静和动）。我们的创作，就是要协调这里面的种种关系，顺应视觉感受，才能够打动观看者的视觉，得到我们想要的效果。在这些形形式式里，都有着如下的部件：
点：我们一般认为，点是指圆形的，但这是不正确的。只要在空间里有非常少量的 面积，无法形成一个视觉上感觉的图形，都是一个点。无论什么形状都可以。
线：点集合在一起就形成线。
面：一个平面。
体：一个物体。一般是指物体占据的空间，有三维形状。
那么，当点、线、面与体集结在一个页面上时，它们的关系要怎么协调呢？它们之间都有什么作用呢？ 点有集中视线、紧缩空间、引起注意的功能。两个点相距不远而且形状不等时，一般由小向大看。近距离的点引起面的感觉。灵活运用点，可使你的页面有一些本质上的变化。当点占据不同的空间时，它所引起的感觉是不同的： 居中引起视觉集中注意。 上引起下跌落感。
在上左或上右引起不安定感。 下方中点，产生踏实感。 左下右下，增加了动感。
线，又分为直线和曲线。直线给人以速度，明确而锐利的感觉，具男性感。曲线则优美轻快，富于旋律。曲线的用法各异，需结合自己的需要。而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔，具踏实感。垂直线则有强烈的上升及下落趋势，可增加动感。斜线，一般我没有怎么使用，因为它造成视觉的一种不安定。
面，指的是二度空间里的形。面又分为几何形和任意形，任意形具人情味。几何形使人有一些机械感，但是，每一个图形里都会要用到几何形，请看它们各代表什么：
圆形：运动及和谐美。
矩形：单纯而明确，稳定。
平行四边形：有向一方运动的感觉。 梯形：最稳定，令人联想到山。 正方形：稳定的扩张。 正三角形：平稳的扩张。
倒三角形：不安定，动态及扩张、幻想。
我们在日常生活中所看到的东西，都是由于形与形、图与底的相互关 系。图形之间，图底之间，正由于对比产生差异而被我们所感知所接 受。图与底的视差越大，图形越清晰，对视觉的冲击力越大。那么，平面上有那么多的东西，我怎么才能够确定它是否是最主要的呢？ 居于画面中心。
垂直或水平的比倾斜更易成为中心。 被包围。
相对于其它图形较大的。 色感要素强烈。
熟悉的图案，如果这件东西我们很熟，则一定会以它为焦点。
可以把自己认为最主要的东西做大一点，突出一点，色彩鲜艳一点，其它的东西小 而且色调不要那么鲜明，以免抢了主题的“风头”。注意：图与底之间的关系是很重要的。如果我们确定了背景，再确定主题，在做页面时不注意而将图与底的关系设置为 1：1，那么，我们也许发现，底与图的力场争夺非常激烈，即有时底被我们认为是 图。它们之间的关系只是相对，而非绝对。一般来说，底要大于图，而图要鲜于底。
事实上，通过上述的一些方法，我们主要是为了创造秩序，使相互的东西能够在没有互相干扰的系统中起作用。混乱与秩序之间的对照唤起了我们的视知觉，我们于是通过平衡、比例、节奏、协调，在迷乱中建立秩序，形成我们自己的风格。形成自己作品的独特气质。而如果注意自己作品的律动性，即旋律性，可通过重要一个基调实现，对于整个页面应该有画龙点晴之效。但要清楚的认识到，并非所有的节奏都产生律动性，有时候，听到一些音乐时觉 得它是垃圾，原理是一样的。
旋律要有情感因素，富于变化而又统一的节奏和总体的和谐。流动的旋律，活泼、明快、自由、变化、生机勃勃。也要注意到，反复、周而 复、单纯或渐变重复虽给人以视觉印象，但过于单调会使人疲劳并产生厌烦。必须 在反复中寻找动与静的完美结合，寻求单纯与复杂、细腻与奔放、定向与不定向之 间的对比，在构成方式上多探索，多借鉴，求新求变。
下面我们给出几种常见的布局结构，供大家参考。常见的布局结构有“同”、“厂”、“国”、“匡”、“三”、“川”等字型布局。
图3-1-14 “同”字型布局
图3-1-15 “厂”字型布局 图3-1-16 “国”字型布局
图3-1-17 “匡”字型布局
图3-1-18 “三”字型布局
图3-1-19 “川”字型布局
1）“同”字型布局：所谓“同”字型结构，就是整个页面布局类似“同”字，页面顶部是主导航栏，下面左右两侧是二级导航条、登录区、搜索区等，中间是主内容区，如图3-1-14所示。
2）“厂”字型布局：整个页面布局类似“厂”字，页面顶部和左部都可以是主导航栏，右下面是主内容区，如图3-1-15所示。3）“国”字型布局：它是在“同”字形布局上演化而来的，它在保留“同”字形的同时，在页面的下方增加一横条状的菜单或广告，如图3-1-16所示。4）“匡”字型布局：这种布局结构去掉了“国”字形布局的右边的边框部分，给主内容区释放了更多空间，内容虽看起来比较多，但布局整齐又不过于拥挤，适合一些下载类和贺卡类站点使用，如图3-1-17所示。
5）“三”字型布局：一般应用在简洁明快的艺术性网页布局，这种布局一般采用简单的图片和线条代替拥挤的文字，给浏览者以强烈的视觉冲击，如图3-1-18。
6）“川”字型布局：整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能，一般适用在栏目较多的网站里，如图3-1-19所示。
在实际设计中我们也不要局限于以上几种布局格式，有时候稍作适当的变化会收到意想不到的效果，另外，平时在浏览网页时要多留心别人的布局方式，遇到好的布局就可以保存下来作为我们设计布局的参考。
第五篇：教学设计(利用表格布局网页)[推荐]
利用表格布局网页
教学设计
授课教师：刘春霞
授课班级：计算机应用1202班
一、课题名称：利用表格布局网页
二、授课课时：1个课时
三、教学内容分析
本节课以利用表格制作一个简单主页为例，要求学生掌握并灵活运用表格及单元格的一些基本属性设置，从而设计出一个“匡”字型的主页。本次课要求学生具有创建站点的知识，以及Dreamweaver CS3的一些基本操作。
四、学生特征分析
授课对象是职高高二学生，学生已具有熟练操作一些常用软件的能力，已掌握Dreamweaver CS3的一些基本操作。
五、教学目标（知识与技能、过程与方法、情感态度与价值观）
1、知识与技能目标
掌握插入表格、表格基本属性的理解与设置、单元格或行的基本属性的理解与设置，掌握利用表格布局网页的方法。
2、过程与方法目标
引导学生分析项目，自主独立思考及操作，指导与修正，掌握插入表格、表格基本属性的理解与设置、单元格或行的基本属性的理解与设置，掌握利用表格布局网页的方法。
3、情感态度与价值观目标
提高学生的观察能力及分析能力，调动学生自主能动性，培养学生较浓的学习兴趣，使学生建立正确的人生观与价值观。
六、教学重点难点
掌握插入表格的方法 掌握表格属性设置的基本方法 掌握单元格或行属性设置的基本方法 掌握使用表格进行页面布局的基本方法
七、教学方法
1、讲授法
2、演示法
3、任务驱动法
八、教学环境与资源
教师机，教学广播软件，学生机（60台）
九、教学过程
1、创设情境，导入新课
欣赏网页，分析网页结构，引入本次课学习的项目：利用表格制作一个简单的“匡”字型网页。
2、讲解知识，演示操作 讲解插入表格的方法，表格属性设置的基本方法及单元格属性设置的基本方法，（1）插入表格的方法
将光标置于页面中，然后在主菜单中选择【插入记录】／【表格】命令或在【插入】／【常用】面板中单击（表格）按钮打开【表格】对话框进行参数设置，最后单击【确定】按钮插入表格。（2）表格属性设置
首先选中表格，然后通过表格【属性】面板设置表格的行数、列数、宽度、高度、填充、间距、边框、对齐方式、背景颜色、背景图像、边框颜色等属性。
▲宽度中的百分比单位一般在制作表格嵌套的时候用。（3）设置单元格或行【属性】的方法
首先选择单元格或行，然后通过单元格或行【属性】面板可以设置单元格的宽度和高度、水平和垂直对齐方式、背景颜色和背景图像以及边框颜色等。
（4）展示网页的最终结果并引导学生分析其结构，提示并演示操作的关键步骤，让学生独立思考完成，培养学生知识的迁移能力，效果图如下：
主要操作步骤：
a、新建一个站点，站点根目录为自己的文件夹（含有素材），在站点里新建一个文件index,html。
b、在页面属性里设置字体为“12像素”，页边距为“0”
c、制作页眉部分，插入一个1行1列的表格，宽度为770像素，其它属性参考效果图设置，然后插入Logo图片，d、制作主体部分，I、插入一个1行2列，宽度为770像素的表格，左侧单元格为200像素，设置间距为2，其它属性参考效果图设置。II、III、在左侧单元格中插入一个5行1列，宽度为70%的表格，设置间距为5，其它属性参考效果图设置。（表格嵌套）
在右侧单元格中插入一个4行2列，宽度为96%的表格，设置间距为5，表格标题为“参考咨询”，第一列单元格宽度为160像素，其它属性参考效果图设置。（表格嵌套）
e、制作页脚部分，插入一个1行1列，宽度为770像素的表格，插入图像“foot,.jpg”。
3、学生练习，巡堂指导
（1）、学生参考最终效果图，根据教师提示的主要步骤，独立思考分析，完成主页。（2）、教师巡堂指导，留意学生在操作时出现的细节问题，做好作业点评。
4、上交作业，点评作业
（1）、要求学生把主页及素材（自己的文件夹）一起交到教师机“1202班”文件夹中。（2）、抽出两个学生的作业点评，修正错误，完善主页。
5、课堂小结，宣布下课
本次课主要学习插入表格、表格基本属性的设置、单元格或行的基本属性的设置，利用表格布局网页的方法。
十、教学反思（欢迎名位听课老师提出您宝贵的教学建议）
鲁公网安备37028302000876号