《网页设计实用教程》第07章
合集下载
HTML5网页设计与制作教学课件第七章使用表格
第7章
使用表格
第7章 使用表格
在生活中表格随处可见，如账表、明细表、成绩表 、数据表等，在网页中也是一样。制作网页的时候， <table>表格标签是最常用的，也是最必不可少的工具 。表格拥有特殊的结构和布局模型，能够比较醒目地 描述数据间的关系，如果借助 CSS设计表格样式，可 以帮助用户在阅读数据时更便捷、更轻松。
【拓展练习】
使用border-spacing属性分离单元格时，应该注意三个问题。
第一，早期版本的IE浏 览器不支持该属性，要定义 相同效果的样式，就需要同 时结合 HTML的cellspacing属性来设置。
第二，当使用border-spacing
属性时，应确保数据单元格之间的相
互独立性，不能再使用border-
【拓展练习】
利用CSS的padding属性可以更灵活地定制单元格补白区域的大小，也可以根据需要定义不同边 上的补白。使用padding属性还可以为表格定义补白，此时可以增加表格外框与单元格的距离。以上 面的示例为基础，重新定义内部样式表，在<head>标签内的<style type="text/css">标签中清除 其他表格样式，添加如下样式。
新建一个网页，保存为 test.html，在 <body>内使用 <table>、<tr>、<th>和<td>标签
设计一个简单的表格，然后使用HTML的colspan、rowspan属性合并相邻单元格中的相同项目，
代码如下所示。
7.1 设计表格结构
7.1.2 设计表格附加结构
【随堂练习 】
在IE浏览器中预览演示效果，如图7-4所示。
使用表格
第7章 使用表格
在生活中表格随处可见，如账表、明细表、成绩表 、数据表等，在网页中也是一样。制作网页的时候， <table>表格标签是最常用的，也是最必不可少的工具 。表格拥有特殊的结构和布局模型，能够比较醒目地 描述数据间的关系，如果借助 CSS设计表格样式，可 以帮助用户在阅读数据时更便捷、更轻松。
【拓展练习】
使用border-spacing属性分离单元格时，应该注意三个问题。
第一，早期版本的IE浏 览器不支持该属性，要定义 相同效果的样式，就需要同 时结合 HTML的cellspacing属性来设置。
第二，当使用border-spacing
属性时，应确保数据单元格之间的相
互独立性，不能再使用border-
【拓展练习】
利用CSS的padding属性可以更灵活地定制单元格补白区域的大小，也可以根据需要定义不同边 上的补白。使用padding属性还可以为表格定义补白，此时可以增加表格外框与单元格的距离。以上 面的示例为基础，重新定义内部样式表，在<head>标签内的<style type="text/css">标签中清除 其他表格样式，添加如下样式。
新建一个网页，保存为 test.html，在 <body>内使用 <table>、<tr>、<th>和<td>标签
设计一个简单的表格，然后使用HTML的colspan、rowspan属性合并相邻单元格中的相同项目，
代码如下所示。
7.1 设计表格结构
7.1.2 设计表格附加结构
【随堂练习 】
在IE浏览器中预览演示效果，如图7-4所示。
网页设计与制作案例教程(HTML5+CSS3)第7章使用CSS设置表格样式
但因为布局繁琐且后期维护成本高，现在已经不
常采用，而是多用于显示数据。
WEB
5
7.2.1 表格的HTML标签></table>标签对分别表示表格的开始和结束。表格 的其他组成元素，如行、单元格等都包含在<table></table>标
签对之中。
<table>可选的属性及含义 属性 width border cellspacing cellpaddin g pixels pixels、% pixels、% 值 %、pixels 描述 规定表格的宽度。 规定表格边框的宽度。 规定单元格之间的空白。 规定单元边框与其内容之间的空白。
23
7.5 提高项目：制作“NBA常规赛得分表”页面
24
7.6 拓展项目：制作“热门景点排行榜”页面
25
WEB
在设置表格边框时如果只给<table>标签设置边框属性， 效果是给整个表格设置外边框，而各个单元格不受影响。 如果希望每个单元格都显示边框，则要给<td>标签也设置 边框属性。
只给table标签设置了边框
只给td标签设置了边框
16
7.2.2 表格的常用CSS样式
设置表格边框双线合一
语法格式：border-collapse: separate|collapse|inherit;
属性 colspan number 值 描述 规定单元格可横跨的列数。
rowspan
align valign
number
规定单元格可横跨的行数。
left 、 right 、 center 、 justify 、 规定单元格内容的水平对齐方式。 char top 、 middle 、 bottom 、 规定单元格内容的垂直对齐方式。 baseline
网页设计与制作第7章
7.1 认识CSS
7.1.4 CSS的优势
1. 避免使用不必要的HTML元素 2. 缩短更新和维护的时间 3. 减少服务器和带宽的费用，以节约资金
7.1 认识CSS
7.1.5 CSS规则
选择符（selector）：所谓选择符就是规则中用于选择文档中要应用样式的那 些元素。该元素可以是（X）HTML的某个标签（如本例中<h2>标签被选中）， 也可以是页面中指定的class（类）或者id属性限定的标记。 声明：声明包含在一对大括号“{}”内，用于告诉浏览器如何渲染页面中与选 择符相匹配的对象。声明内部由属性及其属性值组成，并用冒号隔开，以分号 结束，声明的形式可以是一个或者多个属性的组合。 属性（property）：属性是由官方CSS规范约定的，而不是自定义的，除个别 浏览器私有属性以外。 属性值（value）：属性值放置在属性名和冒号后面，具体内容跟随属性的类 别而呈现不同形式，一般包括数值、单位以及关键字。
7.2 如何在网页中插入CSS
7.2.2 内部样式
内部样式位于页面标签的<head>与</head>之间，且使用<style>标 签进行包裹。
7.2 如何在网页中插入CSS
7.2.3 外部样式
外部样式是目前在实际工作中使用最为广泛的一种形式。它将CSS 样式代码保存为一个样式文件，然后在页面中使用<link>标签链接到这 个样式文件，以便实现多个页面调用同一个外部样式文件的目的。
7.4 伪类与伪元素
7.4.1 伪类
伪类可以让用户在使用页面的过程中增加更多的互交效果，例如应 用最为广泛锚点标签<a>的几种状态（未访问链接状态、已访问链接状 态、鼠标指针悬停在链接上的状态以及被激活的链接状态），具体代码 如下所示。
多媒体网页设计教程ch07
【案例7.1】
7.1.2 设置文字属性
1. 2. 3. 4. 更改字体 更改字号 更改字体颜色 更改字体样式 （粗体、斜体、下划线等）
7.1.3 设置段落属性
1. 2. 3. 4. 对齐文本 缩进文本 设置段落格式 添加水平线和时间
【案例7.2】对案例7.1所创建的网页，设置文本属性。
7.2 图像
7.6.5 创建图像热点链接
可以为图像的局部区域设置链接，可以设置 多个区域链接，区域的形状也可自己选择。
7.6.2 创建锚记链接
锚记链接是在同一文档的不同位置之间的链 接，或不同文档相关位置之间的链接。 锚点链接的建立分为两步。首先，建立锚点， 然后创建到该锚点的链接。
【案例7.9】为网页添加锚记链接。
– 打开“CH07/web/huahuiweijv.html” 。 – “解决方案” 前添加锚记。 – 选择一个对象链接到该锚记。
第7章 网页基本元素
本章要点
• • • • 文本和图像的插入和编辑 插入flash动画、音频和视频 创建超级链接 创建表单
目录
7.1 7.2 7.3 7.4 7.5 7.6 7.7 文本 图像 Flash动画 插入导航条 音频与视频 创建超链接 表单
7.1 文本
7.1.1 插入文本 7.1.2 设置文字属性 7.1.3 设置段落属性
选中已经插入的图像，可以对图像进行移动、 复制和删除操作，也可拖动周围锚点调整图 像大小。 还可以在图像“属性”面板中，对图像进行 编辑。
图像“属性”面板
【案例7.3】在网页中添加图像并设置属性。
7.2.3 插入鼠标经过图像
鼠标经过图像是一种在浏览器中查看并使用 鼠标指针移过它时发生变化的图像。 【案例7.4】插入鼠标经过图像。
网页艺术设计课件(第七章)
【思考与练习】 运用前面所学到的知识，设计一个完整的个人网站。 【学习方法提示】 实例学习是学习各类软件的最佳方法。要善于总结学过的知识， 学会使用软件自带的帮助教程和利用好相关网络学习资源。 【学习链接】 中国站长站： 该网站有大量的建站知识内容，此外还有源代码及工具下载。
二、网站的推广 网站的推广是网站建设过程中不可或缺的一个环节，推广的成 功与否直接反映在网站的点击率上。网站推广的形式多样，根据具 体需要选择。使用较多的有：搜索引擎、广告、邮件、链接等。
三、网站的维护 网站维护不仅是网页内容的更新，包括新资源的上传、留言板 的管理、网站的定期推广服务等；还有技术上的维护，包括对网站 运行状况进行监控，发现运行问题及时解决等。
一、页面设计 首先我们用Photoshop设计好各个页面界面图，保存图像格式为 PSD格式或TIFF格式，宽度为980个像素。界面效果图如下：
《设计色彩》课程首页
《设计色彩》课程简介
《设计色彩》网络课堂
《设计色彩》思考练习
《设计色彩》作品欣赏
《设计色彩》资源库
《设计色彩》答疑讨论
第四节
二、Dreamweaver 8.0软件窗口布局介绍 首次启动 Dreamweaver 时，会出现一个工作区设置对话框， 作为网页设计人员，我们一般选择“设计器”布局。
进入Dreamweaver软件操作界面，该软件工作区分布如图：
1.“插入”栏 “插入”栏包含用于将各种类型的“对象”（如图像、表格和层） 插入到文档中的按钮。每个对象都是一段HTML代码，允许您在 插入它时设置不同的属性。例如，我们可以通过单击“插入”栏 中的“表格”按钮插入一个表格。另外，也可以不使用“插入” 栏而使用“插入”菜单插入对象。
六、收集、整理和制作网站的内容素材
网页制作第七章
（4）在【站点定义】对话框的【测试服务器】
中进行如图所示
ASP应用基础
ASP全称Active Server Pages，是 Microsoft公司开发的服务器端脚本语言， 可以通过ASP建立具有动态功能且高效的 Web服务器应用程序。它可以与数据库和
其他程序进行交互，是一种简单、方便的
编程工具。
ASP提供了一些可在脚本中使用的内置对 象，使用户更容易收集通过浏览器请求发 送的信息、响应浏览器以及存储用户信息， 从而使对象开发者摆脱了很多烦琐的工作
Response对象
Response对象的作用是将服务器端的信息发送到客户端， 它可动态地响应客户端的请求，并将在服务器端动态生成 的响应结果返回给客户端浏览器。例: 使用服务器端的内置对象response循环输出10个数字
创建数据库连接
ASP网页应用程序必须通过ADO（ActiveX Data Objects）组件来调用OLEDB接口或 者ODBC来访问不同的数据库来源
ASP动态站点的建立
使用Dreamweaver CS3来创建动态网页的
站点，并且把当前站点设置为与服务器程 序【主目录】位置相同
（1）启动Dreamweaver，选择【站点】/【新建站
点】命令。
（2）在弹出的【站点定义】对话框中选择【高级】
选项卡。 （3）在【站点定义】对话框的【本地信息】中设 置本地站点信息。设置【本地根文件夹】和服务 器程序中的【主目录】位置相同
新建一个空白的写字本文件，输入下面的代码：
<HTML> <head>
<title>最简单的ASP程序</title>
</head> <body>
最新第7、8、9章《动态网页设计与制作实用教程》(梁)课件PPT
矢量图像 特点
矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像 文件包含独立的分离图像，可以自由无限制的重新组合。
放大后图像不会失真，和分辨率无关，文件占用空间较小，适用于图形 设计、文字设计和一些标志设计、版式设计等。
矢量图的优点和缺点归纳如下：
优点 （1）文件小； （2）图像元素对象可编辑； （3）图像放大或缩小不影响图像的分辨率； （4）图像的分辨率不依赖于输出设备；
常见图像文件格式对比3
图像文件格式 使用兼容软件
一般用途
EPS (*.eps/*.epsf)
Illustrator Photoshop等
印刷或打印输出
PDF (*.pdf)
Adobe Acrobat Photoshop可打开
电子文档
RAW
Filmstrip (*.flm)
Photoshop cs
7.2.2 Fireworks MX 的工作界面
进入Fireworks MX工作状态之前，我们先要来熟悉Fireworks MX的工作界面。Fireworks MX 的 界面大致可以分为文档窗口、工具栏、工具箱、面板和菜单等几项。 1. 菜单栏
Fireworks MX的主菜单共有文件、编辑 、视图、选择、修改、文本、命令、滤镜、窗口、帮助 等十个主菜单项，每个主菜单项又有多个子菜单。在后面的应用中我们将具体讲解他们的功能和用 法。 2. 文档窗口
5. 文本增强功能。针对文本与字体的特性，Fireworks MX对文本作了相当 多的增强功能，可以控制文本的方向为水平或垂直及文本的具体走向等。
6. 历史面板。历史面板提供撤消和恢复的灵活机制，以列表的形式记录和 显示编辑图像时进行的所有操作步骤，拖动历史面板的滑块，可以对已经操作的 步骤进行相关的操作。
《网页设计基础教程与上机指导(第2版)》第7章创建框架网页.
在另一个框架集之内的框架集称作嵌套的框架网页，一个框架 集文件可以包含多个嵌套的框架集，大多数使用框架的网页实 际上都使用嵌套的框架，并且在Dreamweaver中大多数预定 义的框架集也使用嵌套。如果在一组框架中，不同行或不同列 中有不同数目的框架，则使用嵌套的框架集，具体操作步骤如 下。
– (1) 打开如图7.17所示的框架网页文档。 – (2) 将鼠标指针置于右侧框架中，选择【修改】|【框架页】|【拆分 下框架】命令，如图7.18所示。 – (3) 选择后，可以看到嵌套框架效果。
在对框架进行设置的时候，首先要选取所要进行属性设置的框架集，选中 框架后，在【属性】面板中将显示框架的相关参数。 在框架【属性】面板中的可以进行如下设置。 – 【框架名称】：指定框架名称用来作为链接指向的目标。 – 【源文件】：确定框架的源文档，可以直接输入名字，或单击文本框 右侧的按钮，查找并选取文件。也可以通过将鼠标指针置于框架内， 选择【文件】|【在框架中打开】命令打开文件。 – 【滚动】：设置框架内的内容溢出的时候是否出现滚动条。 – 【不能调整大小】：限定框架尺寸，防止用户拖动框架边框。 – 【边框】：用来控制当前框架边框。有【是】、【否】、和【默认】 三个选项。 – 【边框颜色】：设置与当前框架相邻的所有框架的边框颜色。 – 【边界宽度】：设置以像素为单位的框架边框和内容之间左右边距。 – 【边界高度】：设置以像素为单位的框架边框和内容之间上下边距。http://www.we源自7.3.1 创建自定义框架集
创建自定义框架集的具体操作步骤如下。 – (1) 选择【修改】|【框架页】|【拆分上框架】命令，如 图7.15所示。 – (2) 选择该命令后，效果如图7.16所示。
7.3.2 嵌套框架集
网页设计与制作第7章表单精品PPT课件
属性
值
描述
action
URL 规定当提交表单时，表单域数据的接收地址。
method
get post
规定如何发送表单域数据。
name
文本 规定表单域的名称。
2010网页设计与制作
第7章
4
7.3 输入标签
基本格式：<input /> 作用：标签用于搜集用户信息。 根据不同的 type 属性值，输入字段拥有很多种形
基本格式：
<form>
<label for="male">Male</label> <input type="radio" name="sex" id="male" />
</form>
作用：label不会向用户呈现任何特殊效果。不过，当用户 选择该标签时，浏览器就会自动将焦点转到和标签绑定的表 单元素上。
表单域标签中必须设置enctype="multipart/formdata"来保证文件被正确编码。另外，表单的传送方式必须 设置为post。
属性
值
描述
accept
文件类型值 规定提交的文件类型。
2010网页设计与制作
第7章
10
7.3.6 隐藏域
基本格式：
<input type="hidden" />
作用： 定义隐藏字段。隐藏字段对于用户 是不可见的。隐藏字段通常会存储一个默认 值。
2010网页设计与制作
第7章
11
7.4.1 表单元素分组
基本格式：
<form> <fieldset>
网页制作基础教程第七章
Grid布局
一种二维的布局方式，可以实现复杂的网页布局。
04
网页交互效果
JavaScript是一种脚本语言，用于实现网页的交互效果和动态功能。
JavaScript可以直接嵌入HTML代码中，也可以通过外部文件引入。
JavaScript可以用于控制网页元素的样式、响应用户事件、动态更新网页内容等。
DOM操作主要包括获取元素、修改元素属性、添加或删除元素等。
DOM操作是实现网页交互效果的重要手段之一，可以大大提高网页的互动性和用户体验。
01
02
03
04
DOM操作
AJAX（Asynchronous JavaScript and XML）是一种使用异步请求获取数据的技术，可以实现不刷新页面就能更新数据的效果。
可用性
良好的视觉效果可以吸引用户，提高网站吸引力。
美观性
适应不同设备和屏幕尺寸，提供良好的用户体验。
响应性
02
01
03
04
05
网页设计原则
对比色搭配
使用色轮上相对的颜色进行搭配，产生强烈的视觉冲击。
单色搭配
使用单一颜色系的不同色调进行搭配。
邻近色搭配
使用色轮上相邻的颜色进行搭配。
冷暖色搭配
使用冷暖色对比，营造不同的情感氛围。
03
关键词密度控制
在内容中合理分布关键词，避免过度堆砌。
04
元数据优化
提供丰富、准确的元数据信息，帮助搜索引擎理解网页内容。
05
标题标签优化
设置简洁、有吸引力的标题，反映页面主题。
06
描述标签优化
提供准确、有吸引力的描述，吸引用户点击。
网站SEO优化
将网站部署到互联网上，供用户访问。
一种二维的布局方式，可以实现复杂的网页布局。
04
网页交互效果
JavaScript是一种脚本语言，用于实现网页的交互效果和动态功能。
JavaScript可以直接嵌入HTML代码中，也可以通过外部文件引入。
JavaScript可以用于控制网页元素的样式、响应用户事件、动态更新网页内容等。
DOM操作主要包括获取元素、修改元素属性、添加或删除元素等。
DOM操作是实现网页交互效果的重要手段之一，可以大大提高网页的互动性和用户体验。
01
02
03
04
DOM操作
AJAX（Asynchronous JavaScript and XML）是一种使用异步请求获取数据的技术，可以实现不刷新页面就能更新数据的效果。
可用性
良好的视觉效果可以吸引用户，提高网站吸引力。
美观性
适应不同设备和屏幕尺寸，提供良好的用户体验。
响应性
02
01
03
04
05
网页设计原则
对比色搭配
使用色轮上相对的颜色进行搭配，产生强烈的视觉冲击。
单色搭配
使用单一颜色系的不同色调进行搭配。
邻近色搭配
使用色轮上相邻的颜色进行搭配。
冷暖色搭配
使用冷暖色对比，营造不同的情感氛围。
03
关键词密度控制
在内容中合理分布关键词，避免过度堆砌。
04
元数据优化
提供丰富、准确的元数据信息，帮助搜索引擎理解网页内容。
05
标题标签优化
设置简洁、有吸引力的标题，反映页面主题。
06
描述标签优化
提供准确、有吸引力的描述，吸引用户点击。
网站SEO优化
将网站部署到互联网上，供用户访问。
HTML5+CSS3网页设计与制作实用教程单元7 网页特效与制作商品详情页面
CSS代码
height: 24px; } #page_wrapper { width: 990px; margin: 5px auto; } #page_wrapper .pages_nav {
【任务7-1-1】规划与设计商品详情页面的布局结构
表7-2 商品详情页面0701.html 主体布局结构对应的CSS 样式代码 行号
19 20 21 22 23 24 25 26 27 28 29 30 31 32
CSS代码
margin-bottom: 10px; margin-left:20px; } #product_focus { width: 990px; margin-bottom: 10px; padding-bottom: 2px; border-bottom: 2px solid #D50050; } #product_focus .product_title { border-top: 1px solid #CCC; border-bottom: 2px solid #D50050;
行号
01 02 03 04 05 06 07 08 09
CSS代码
#header { width: 990px; margin: 0 auto; } .topmenu { background: url(../images/top_bar.png) no-repeat;
行号
10 11 12 13 14 15 16 17 18
【任务7-1-1】规划与设计商品详情页面的布局结构
表7-2 商品详情页面0701.html 主体布局结构对应的CSS 样式代码 行号
75 76 77 78 79 80
CSS代码
#product_main .r_column .sidebar { margin-bottom: 12px; border: 1px solid #eeca9f; } #footer {