Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.

Slides:



Advertisements
Similar presentations
商管群科科主任 盧錦春 年 3 月份初階建置、 4 月份進階建置、 5 月份試賣與對外營業。
Advertisements

第5章 表格的设计与 制作. 内容提要 表格的创建、编辑 表格的属性设置 特效表格的制作 布局表格的基本操作 表格和布局表格的应用.
LOGO 《静态网页设计》课程整体设计 电子信息工程系 计算机专业 李超燕. LOGO 2 课程在专业课程体系中的定位 3 岗位分析 目 录 1 课程的基本信息 6 本课程的特色和效果 4 教学整体设计 5 教学基本条件.
HyperText Markup Language
第六章 网页设计与制作基础.
ASP.NET 網頁製作教本 -- 從基本語法學起
第5章 HTML 標籤介紹.
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
第8讲 HTML与PHP基础 静态网页 vs. 动态网页.
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
第7章 表 格 清华大学出版社.
六. 布局.
教学内容 1、演示并讲解用表格布局制作的网页 2、用表格制作网页.
Web图片搜索引擎设计 ——基于文本的图片信息提取.
网页 设计与制作.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
“深入推进依法行政加快建设法治政府” -《法治政府建设实施纲要》解读
XML 第05讲 使用CSS显示XML.
第五单元课1-3 层叠样式表.
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
第六节 可降阶的二阶微分方程 一、 型的微分方程 二、 型的微分方程 三、 型的微分方程.
A級無障礙網頁製作 主講人:劉威良 臺南大學資訊教育所
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
第二部分 HTML语言控制 本次课的主要内容: 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
HTML 語法教學 授課:彭穎聰 老師.
第6章 网页图像处理 通过本章学习,应该掌握以下内容: 能够选择合适的网页颜色 了解网页图像的基本格式 掌握使用网页图像的要点
網際網路的應用服務 – Web 概念與網頁語言
第二章 網際網路網頁的設計.
HTML.
第四章 样式表CSS CSS技术是一种格式化网页的标准方式,它通过设置CSS属性债周页元素获得各种不同效果。本章共分9个实例,主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。
CSS简介 WEB前端三剑客之二.
网页设计 上海建桥学院信息技术系 矫桂娥
湖北职院计科系.
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
Web前端开发技术与实践 第12章 布局 阮晓龙 /
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
行政院研究發展考核委員會 【網頁無障礙設計】說明會
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
第 13 章 用CSS 設定 文字顏色與背景.
網路概念 APACHE PHP MYSQL HTML BY 董仔 08/01/14.
Ch.13 HTML網頁實作.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
8 网页制作基础知识 赵国庆 博士 北京师范大学教育技术学院
Ch03 HTML5 + CSS 表格與多媒體 網頁程式設計.
Css全教程 边框背景轮廓 群号: 韬略课堂:何韬.
Web前端开发技术与实践 第10章:盒子模型 阮晓龙 /
HTML5全栈开发序列课程 《前端入门》之CSS3新特性 余鹏作品.
Web前端开发技术与实践 第11章:背景与边框 阮晓龙 /
授课教师:姬广永 QQ: TEL: 学习交流网站:
4.5 网页制作 本节概述 本节的学习目标 主要内容.
HTML & CSS.
CSS樣式 靜宜大學 資管系 楊子青.
基礎程式設計範例 -網頁名片.
武汉纺织大学传媒学院 cm.wtu.edu.cn
W3C标准网页制作 主讲教师:张 涛.
网页设计与制作 Dreamweaver CS6 标准教程
網路程式設計期末project 指導教授:馬尚彬 學生:楊依林 學號:B
布局大师——表格.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
網路商店裝修之二 CSS樣式編輯.
表格 (Table).
CSS基礎 靜宜大學 資管系 楊子青.
第5章 Div+CSS布局技术 经济管理学院.
分頁.
故事創作與應用教學經驗分享 周梅雀 崑山科大幼兒保育系.
第2章 块级标签 经济管理学院.
使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師
教师:李金双 网页制作 教师:李金双
Presentation transcript:

Web 开发基础 第二章 表格与页面布局

回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径

本章目标 网页设计注意事项 什么是表格? 为什么需要表格? 如何创建表格? 表格如何使用?

网页设计注意事项 多浏览器支持 样式与风格统一 网站结构、文件命名 页面尺寸与屏幕分辨率 图片文件命名、大小尺寸限制 相对路径的应用 页面内容( title 、 meta 、 alt 、 tbody 等属性的应用)

什么是表格? 表格是 html 高级构件之一,它表示数据之间的关系,使对 比分析更容易理解。表格由特定数目的行和列组成 球员得分篮板 姚明 278 麦克格雷迪 312 海耶斯 815 巴蒂尔 75 阿尔斯通 23

表格应用示例

什么是表格? 表格的作用:  用于显示数据,便于理解、分析  组织网页版面信息

什么是表格? 行 列 列标题 在 HTML 文档中,广泛使用表格来存放网页上的文本和图像 单元格 表格标题

如何创建表格 ? 表格用 表示 一个表格可以有很多行,用 表示 每行可以分为多个单元格,用 表示  演示: 一行一列 一行三列 两行三列

标签及其属性 border 属性 表格边框  演示:不显示边框的表格  演示:显示边框的表格 align 表格对齐  演示:居左,居中,居右对齐  排版:新浪 表格背景 bgcolor background  颜色表示的 3 种方法 注: align 、 bgcolor 属性不赞成使用,应使用 css 控制

标签及其属性 表格宽度 width 高度 height  单位设置 像素 (px) 百分比 ( %)  演示 设置宽度,高度 避免出现水平滚动条 一般不设置高度 ( 自适应 ) cellspacing , cellpadding 属性  cellspacing 设置单元格间距  cellpadding 设置单元格边沿和其内容之间的距离

table 的常用属性

标签及其属性 align 属性  属性值: “left” 、 “center” 、 “right”  注意区别 的 align 属性 valign 属性  属性值: “top” 、 “middle” 、 “bottom” bgcolor 属性  背景颜色设置  考虑设置优先级的问题

标签及其属性 align 属性  属性值: ”left” “center” “right”  注意区别 的 align 属性 valign 属性  属性值: ”top” “middle” “bottom” bgcolor 属性 background 属性  bgcolor 背景颜色设置  background 背景图片设置  考虑设置优先级的问题

标签及其属性 width 属性 height 属性  注意:同行或者同列单元格将受影响 rowspan 属性 colspan 属性  rowspan 属性 将一个表格单元格扩展为几行。  colspan 属性 将一个表格单元格扩展为几列  演示 项目实战 利用 rowspan 和 colspan 属性合并单元格

其它表格标签 标签  作用:用来说明表格内容的标题  属性: align , valign 标签  作用:同 标签  不同点 : 用粗体样式标记的文本表头,对齐方式也不一样 标签

用表格进行页面排版 表格进行页面排版  简单,便捷  结构清晰  表格嵌套使用 演示

表格排版注意事项: 表格嵌套层次不要太多 整个页面的排版不要用一个 table ,影响浏览器对页面的显 示效率 表格的行列排版要整齐 td 中没有内容时,以空白( )填充  Div+CSS 布局(了解)

总结 表格可以格式化数据、管理文件布局 表格的基本结构 标签 及其基本属性 合并单元格 其它表格标签

课后练习作业 2-1 创建一个如下样式的表格 要求: 1. 表格宽度 760px ,边框宽度为 1px ,表格水平居中 2. 单元格之间没有间距,内容与单元格边框之间距离为 2 3. 在单元格 1 和 2 分别插入图片 a1.gif 和 a2.jpg, 并且图片内容垂直居中 4. 其他文字依照下表输入 5. 要求按照完整的网页规范编码 单元格 1 单元格 2 设为首页 联系站长 加入收藏 首页 | 基础知识 | 高级编程

课后练习作业 2-2 根据提供的图片实现以下界面效果(界面宽度 760px )