第二章 文本格式.

Slides:



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

HyperText Markup Language
第六章 网页设计与制作基础.
第六 章数据库访问页 6.1 数据访问页视图 6.2 创建数据访问页 6.3 编辑数据访问页 6.4 查看数据访问页 退出.
第3章 文字与段落 清华大学出版社.
项目2 字符格式和段落编排 2017年3月7日6时54分.
HTML第一课 李 伟 HTML开发语言基础.
第5章 HTML 標籤介紹.
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
第2章 XHTML语言基础 标记语言简介 1 XHTML文档基础 2 文本及段落标记 3 列表标记 4 超链接 5.
动态网页制作 第1章 HTML语言1.
第一章 什么是程序 程序是怎么开发出来的 编译 连接 运行 什么是 IDE 编译和调试 HTML的基本标签.
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
网页 设计与制作.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
第五单元课1-3 层叠样式表.
第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
PRESENTED BY OfficePLUS
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
信息技术 第2讲 Computer Base Series Course 主讲人:夏耘 Copyright_2008, By USST
第二部分 HTML语言控制 本次课的主要内容: 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
HTML 語法教學 授課:彭穎聰 老師.
第6章 制作网站链接 本章内容 练习思考 实验操作.
HTML语言 制作:李贤成.
CT212 (02/03)-Network Programming and design
武汉纺织大学传媒学院 cm.wtu.edu.cn
HTML.
第8章 样式表.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
江西信息应用职业技术学院 电子商务与管理系
UI 软件 设计 网页基本元素设计(二).
网页设计 上海建桥学院信息技术系 矫桂娥
Ch01 HTML 5 資料格式 網頁程式設計.
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
武汉纺织大学传媒学院 cm.wtu.edu.cn
第2章 超文本标记语言HTML.
HTML – 文字格式 資訊教育.
HTML & CSS.
2019/1/12 GDP设计协同 超级管理员操作手册 GDP项目组.
主讲:陶建平 华中科技大学网络与计算中心
网页设计与制作 网页基本标签(三) 北京农业职业学院刘丽霞.
W3C标准网页制作 主讲教师:张 涛.
POWERPOINT TEMPLATE HI.
网页制作基础 CNIC 王桦.
图片字体页面 一、文字标签 1、标题标签(Header)
UI 软件 设计 页面布局(三).
网页设计与制作 Dreamweaver CS6 标准教程
产品推广 PRODUCT PROMOTION PRESENTED BY OfficePLUS.
第一题 填空(30分) 指向其他文件的( 1 )或图片被称为hyper text,这种作用叫超级链接Hyper link。
标准配色方案 背景 文本和线条 阴影 强调色 主色一 主色二 主色三 主色四 推荐应用顺序. 标准配色方案 背景 文本和线条 阴影 强调色 主色一 主色二 主色三 主色四 推荐应用顺序.
表格页面 表格标签 1、标题标签<Caption>用于定义表格的标题。 align属性:控制标题位置。 取值为:
姚金宇 MIT SCHEME 使用说明 姚金宇
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
项目二:HTML语言基础.
HTML大探索.
第4章 Excel电子表格制作软件 4.4 函数(一).
段磊 王慧锋 TEL: 数据库系统原理课程设计 实验环节4 段磊 王慧锋 TEL:
点击此处添加幻灯主标题 点击此处添加幻灯副标题 2019/5/8 此处添加公司信息.
第6章 使用CSS修饰常见的网页元素 主讲人:刘泰然 经济管理学院.
本节内容 文件系统 视频提供:昆山爱达人信息技术有限公司 官网地址: 联系QQ: QQ交流群 : 联系电话:
第二章 文本格式.
第6章 使用CSS修饰常见的网页元素 经济管理学院.
武汉纺织大学传媒学院 cm.wtu.edu.cn
:大宇宙 :厚物 別名 種類 菊花花色優美、姿態高雅、清新脫俗,是中國十大名花之一。
第2章 块级标签 经济管理学院.
第四章 UNIX文件系统.
点击此处添加标题 PPT背景图片: PPT图表下载:
LOGO HERE 单击此处添加 您的标题标题标题 PRESENTED BY JANE DOE
Presentation transcript:

第二章 文本格式

2.1 文本分段 段落标记符P和换行标记符BR 1.P标记符用于将文档划分为段落,包括开始标记符和结束标记符,后者可以省略 2.BR标记符用于强制断行,只有一个开始标记符<BR> 3.示例 注:空格参考字符  

2.1 文本分段 二.水平线标记符HR 只有开始标记符<HR>,它的属性有: 1.size属性(粗细程度,值是一个整数,单位是像素,默认值为2) 2.width属性(设置水平线的长度,单位(像素或百分比)) 3.noshade属性(该属性没有值) 4.color属性(定义水平线的颜色) 5.示例

2.1 文本分段 三.标题标记符Hn 用来标识网页中的标题和副标题,必须使用结束标记符(n=1-6,<H1>最大) 作用:自动改变字体大小,并设为黑体,并自动设置成一段。 示例

2.1 文本分段 四.段落对齐 1.align属性 设置段落对齐方式,取值包括:right、left、center、justify 该属性应用于多种标记符:P、HR、Hn 示例 默认值不同

2.DIV标记符与CENTER标记符 多个段落使用相同的对齐方式,使用DIV标记符将所有段落包括起来,然后在DIV属性中设置align属性即可。 示例 DIV标记符是用于文档分节的标记符,包括开始和结束标记符 SPAN标记符,用于行内特定内容的显示 二者区别: 他们主要用于CSS样式表 <DIV align=“center”>……</DIV> <CENTER>……</CENTER>

是指不同格式的设置作用于同一段内容,HTML遵循的原则如下: 3.格式的嵌套 是指不同格式的设置作用于同一段内容,HTML遵循的原则如下: 内容所设置的格式是相容的,则取格式叠加的效果。 如果所设置的格式是冲突的,则取最近样式符所修饰的效果 多数的HTML标记符都可以嵌套,嵌套的一条原则是:逻辑上范围越大的标记符位于嵌套的越外层。 嵌套时要注意层次关系 <B><I>粗斜体</B></I> <B><I>粗斜体</I> </B> <I> <B>粗斜体</B></I>

2.2 控制文本的显示效果 一.字体控制标记符 F O N T 控制字符的样式包括开始标记符和结束标记符(结束标记符不能省略) 1.size属性 设置文字的大小,它的取值可以是绝对值和相对值。使用绝对值可以是1-7(3为默认值),值越大显示的文字越大。相对值使用(+号和-号)指定相对默认值的字号,例如+1表示比默认字体大一号的字体。 示例 <BASEFONT SIZE=“4”>可以更改默认字体的大小

2.color属性 控制文字的颜色 示例 <FONT color=“red”>本行文字为红色</FONT> 3.face属性 指定字体样式,即通常所说的字体。格式:<FONT face=“楷体-gb2312,黑体,宋体”>示例文字字体</FONT> (默认:中:宋体;英文:Times New Roman) 常用中英文字体列表:

常用的中英文字体 中文字体: 宋体 楷体 黑体 隶书 幼圆 常用的英文字体 Times new roman Arial Arial black Courtier new Comic sans ms evrdana 如若要求特殊字体,可以使用相关软件,处理成图片格式

2.2 控制文本的显示效果 二.物理字符格式 是指标记符本身就说明了所修饰文字的效果的标记符 常用的物理字符样式 标记符 功能 <B></B> 粗体 <STRIKE></STRIKE> 删除线 <BIG></BIG> 大字体 <SUB></SUB> 下标 <I></I> 斜体 <SUP></SUP> 上标 <S></S> <TT><TT> 固定宽度字体 <SMALL></SMALL> 小字体 <U></U> 下划线 示例

2.2 控制文本的显示效果 三.逻辑字符格式 是指标记符本身表示了所修饰效果的逻辑含义 常用的逻辑字符样式

注:通常与CSS样式表共同使用。 标记 功能 <ADDRESS></ADDRESS> 用于指定网页创建者和维护者的信息,通常显示为斜体 <CITE></CITE> 用于表示文本属于引用,通常显示为斜体 <CODE></CODE> 用于表示程序代码,通常显示为固定宽度字体 <DFN></DFN> 用于表示定义了的术语,通常显示为黑体或斜体 <EM></EM> 用于强调某些字词,通常显示为斜体 <KBD></KBD> 用于表示用户的键盘输入,通常显示为固定宽度字体 <SAMP></SAMP> 用于表示文本样式,通常显示为固定宽度字体 <STRONG></STRONG> 用于特别强调某些字体,通常显示为粗体 <VAR></VAR> 用于表示变量,通常显示为斜体 注:通常与CSS样式表共同使用。

2.2 控制文本的显示效果 四.滚动字幕效果 一种常用的网页效果,通过<MARQUEE></MARQUEE>标记符控制滚动的方式。 MARQUEE标记符的属性如下: 1.width和height 定义了滚动字幕滚动区域的宽度和高度。默认100%宽,高当前所用字体 2.align 指定了滚动字幕如何与周围对象对齐。合法值为left,right,center(在页面中的对齐方式);top,bottom和middle(与周围内容的垂直对齐方式)。

2.2 控制文本的显示效果 3.behavior:描述滚动字幕如何滚动 scroll默认值,表示文本从一个方向向前滚动直到屏幕外,然后重复 slide,表示文本滚动到另一侧后就停下来 alternate,表示文本在定义的区域内来回交替滚动 4.bgcolor:定义滚动字幕区域的背景色 5.direct:指定文本滚动的方向 left:从右向左(默认值) right:从左向右 behavior=“alternate”情况下,第一次滚动的方向

2.2 控制文本的显示效果 示例 6.hspace和vspace,给出了滚动字幕四周水平和垂直方向上的间隙 7.loop:指定滚动重复的次数。-1和infinite表示无限重复(默认值) 8.scrollamount:指定了文本滚动间的步进象素间距。 9.scrolldelay:指定了两次文本重画之间的毫秒延时数。 示例

2.3 列表格式 示例 一、有序列表. 也称数字式列表,它是一种在各项内容前显示有数字或字母的缩排列表 2.3 列表格式 一、有序列表. 也称数字式列表,它是一种在各项内容前显示有数字或字母的缩排列表 1.创建有序列表:使用有序列表标记符OL和列表项标记符LI 基本语法:<OL> <LI>列表项1 <LI>列表项2 <LI>列表项3 </OL> 示例

2.3 列表格式 示例 OL标记符的属性:type(1- -(默认);A- -;a--; I--;i--) 2.3 列表格式 OL标记符的属性:type(1- -(默认);A- -;a--; I--;i--) LI标记符的属性:type:同上;value:指定一个新的数 字序列起始值,以获得非连续性的序列。 2.有序列表的嵌套 示例

2.3 列表格式 二、无序列表. 也称强调式列表,它是一种在各项内容前显示有特殊项目符号的缩排列表 2.3 列表格式 二、无序列表. 也称强调式列表,它是一种在各项内容前显示有特殊项目符号的缩排列表 1.创建无序列表:使用无序列表标记符UL和列表项标记符LI 基本语法:<UL> <LI>列表项1 <LI>列表项2 <LI>列表项3 </UL> 这里的UL和LI都只有一个属性:type,控制列表项前特殊符号的显示,属性的值有:disc:实心圆(默认值);circle:空心圆;square:实心或空心的方块 注:属性的值区分大小写 2.混合嵌套列表

2.4 创建超链接 就是当鼠标单击一些文字、图片或其他网页元素时,浏览器就会根据指示载入一个新的页面或调转到页面的其他位置。 2.4 创建超链接 一、超级链接定义: 就是当鼠标单击一些文字、图片或其他网页元素时,浏览器就会根据指示载入一个新的页面或调转到页面的其他位置。

2.4 创建超链接 http://www.hao123.com/cartoon.htm 二、相对地址与绝对地址 2.4 创建超链接 二、相对地址与绝对地址 1.什么是URL,统一资源定位器,资源的地址 三部分组成:协议代码;装有所需文件的计算机地址;具体的文件地址和文件名 协议表明应使用何种方式获取所需信息常用的有:超文本传输协议;文件传输协议;电子邮件协议;远程登陆协议等 http://www.hao123.com/cartoon.htm

2.4 创建超链接 2.绝对URL和相对URL 绝对URL(完整地址) 相对URL 基于根目录的路径 2.4 创建超链接 2.绝对URL和相对URL 绝对URL(完整地址) 例:http//www.nonexist.com/public/html/example.htm 协议 计算机域名 包含路径的文件名 相对URL 相对于当前页面的地址,包含从当前页面指向目的页面位置的路径 基于根目录的路径

链接路径:1:绝对路径 2.4 创建超链接 2:相对路径 3:基于根目录的路径 2.4 创建超链接 链接路径:1:绝对路径 2:相对路径 3:基于根目录的路径 1: http://www.macromedia.com/support/dreamweaver 3: /products/catalog.html

三、页面链接 是指指向其他网页的超链接 <A>和</A>标记符 注:目标文件格式:1.浏览器支持2.浏览器不支持 演示

四、锚点链接 锚点:在链接的过程中,除了可以对不同页面或文件链接外,用户也可以对同一页面的不同部分进行链接,在链接之前,首先应为页面中需要跳转到的位置命名。这样的位置被称为锚点。<A name=“top”>目录</A> 锚点链接:对同一页面的不同位置进行的链接。<A href=“#top”>返回目录</A> 锚点链接也可以指向其他页面的锚点 <A href=“maodian.htm#b”>指向另一个页面的“B”部分 演示

五、电子邮件链接 href的值指定为mailto:电子邮件地址,即可以实现 演示

2.5 网站实例

一、网站规划 确定站点目标 如何组织要展示的内容 站点的逻辑结构图 站点的文件夹设计 规划网站的导航系统(即超链接系统)

二、页面设计 首页 二级页面 三级页面

站点的逻辑图 首页 唐诗首页 李白页面 杜甫页面 宋词首页 辛弃疾页面 李清照页面

My-site(root folder) support Content.html Hours.html resources 一个目录 子级目录 不位于当前目录 support Content.html Hours.html resources Tips.html products Catalog.html Index.html(home page)

一个目录:hours.html或./hours.html 子级目录:support/hours.html 不在当前目录:“..” ../support/content.html ../../products/catalog.html