CSS/HTML网页设计

发布时间:2023-02-24 14:30


第一部分 HTML 语法

第一章 认识HTML
HTML的英文全名为HyperText Makeup Language,译为超文标记语言。

第二章 HTML的基本概念
文件注释标记
标记的使用<br> 例:<br> <title>文件标题文字

第三章 文字版面的编辑

3-1 版面控制标记

3-1-1 取消文字换行标记
在不同大小的浏览器窗口中,每行所显示的方案及段落也将有所不同。若要取消方案因窗口大小而产生的换行,就可以使用
标记。
例:

IBM Lotus教育培训是一个系统工程。主要通过LAEC即IBM Lotus 授权教育中心,CLEC即 CLE 教育中心、Notes大学等来为广大Lotus Domino/Notes (包括相关知识管理产品)用户及爱好者进行系列培训,以更好服务社会。


3-1-2 换行标记

例:
清平调

云想衣裳花想容,

春风拂槛露华浓,


3-1-3 段落标记


标记所标识的文字,代表同一个段落的文字。
例:

文字



3-1-4 保留原始排版方式标记

要将HTML文件中的文字编排方式,通过浏览器显示时,保留原始的文件排版方式,只需在该文章前加入
标记,即可使浏览显示文件原始排版方式。

清平调
云想衣裳花想容,
春风拂槛露华浓,


3-1-5 水平分隔线标记

属性 功能
size 水平线的粗细,以pixe1为单位表示。
width 水平线的宽度,以pixe1为单位表示。
Align 水平线的对齐方式
color 水平线的颜色
Noshade 不显示3D阴影

3-1-6 空格符号 

3-1-7 居中对齐标记


清平调

云想衣裳花想容,

春风拂槛露华浓,



3-2 标题文字的建立
3-2-1 标题文字标记
格式:

标题1


标题2



标题2


上标
下标

3-3-4 特殊符号的表示方法

---------------------------------
符号 HTML表示方法
---------------------------------
< <
---------------------------------
> >
---------------------------------
& &
---------------------------------
" "
---------------------------------

第五章 表格的建立

5-2-3 内框宽度----cellspacing

5-2-4 表格内方案与框距离----cellpadding

5-4-4 行的文字水平对齐方式---ALIGN

5-4-5 行的文字垂直对齐方式---VALIGN

5-5-5 水平延伸单元格---COLSPAN

5-5-6 垂直延伸单元格---ROWSPAN


第七章 建立超级链接

7-1 相对路径与绝对路径
“.” ---代表目前所在的目录
“..”---代表上一层目录
“/” ---用与链接路径中各目录名称

例:相对:./image/sea.gif = image/sea.gif
绝对:/ch7/image/sea.gif

7-3 超链接到其它位置的设置
7-3-1 通过http 协定


透过http通讯协定连结



按下
查询火车时刻
超连结後,


将连结到台湾铁路管理局。






7-3-2 通过ftp 协定


透过ftp通讯协定连结



按下
中山大学
超连结後,


将连结到中山大学的FTP站。






7-3-3 通过telnet链接


透过Telnet通讯协定连结



按下
成大资工
超连结後,


将透过telnet连结到成大资工的BBS站。






第八章 窗口框架的建立
8-1-2 窗口框架的基本结构
框架的基本结构,主要是利用标记与标记来定义。其中用于定义一个窗口框架组件,而则用于定义框架中的子窗口组件。语法如下:







*注意:不可包含在标记中,否则将无法使用。

8-2-1 窗口的水平分割---ROWS












8-2-2 窗口的垂直分割---COLS

例ch8_3.htm 数值设置








例ch8_4.htm 百分比设置








8-2-3 窗口框架的高级设计

例ch8_5.htm 建立嵌套窗口框架










8-2-5 框架的隐藏---FRAMEBORDER

0代表不显示框线,1代表显示框线, 其默认值为1.
例ch8_9.htm 建立嵌套窗口框架








8-3 子窗口的设置
8-3-1 指定子窗口显示网页---SRC


8-3-2 定义子窗口名称---NAME

例ch8_8.htm








8-3-3 控制框架流动条---SCROLLING
例ch8_10.htm








8-3-4 子窗口大小的调整---NoResize
希望用户不能随意更改子窗口大小,可设置NoResize


8-4 超链接TARGET属性与框架的应用
8-4-1 网页显示子窗口---TARGET属性
建立一个超链接,当用户单击此超链接时,将在名为main的子窗口中,显示ch8_7_1.htm,语法如下:
第一个超链接

例ch8_11.htm


建构整个窗口的框架







例ch8_11_1.htm


ch8_12.htm子窗口显示的网页


第一个超级链接


第二个超级链接


第三个超级链接





设置在上一层框架显示网页
例: ch8_13.htm 和 ch8_13_1.htm、 ch8_13_2.htm 、ch8_13_3.htm 、ch8_13_4.htm

第九章 APPLET、网页动态更新与多媒体

9-1-1 在网页中引用Applet
Applet组件



……


例ch9_1.htm


Applet组件的使用



Applet组件的使用














--------
|程序说明|
--------
------------------------------------------------------------------------------------------
| 参数名称 | 说 明 |
------------------------------------------------------------------------------------------
| message | 显示于Applet组件的信息 |
-------------------------------------------------------------------------------------------
| msecond | 指定Applet组件显示信息的延迟 |
-------------------------------------------------------------------------------------------
| bgcolor | Applet组件的背景颜色。可使用的颜色设置值有white/black/blue/cyan/darkGray|
| | gray/green/lightGray/magenta/orange/pink/red/yellow |
-------------------------------------------------------------------------------------------
| fontcolor | Applet组件中显示文字颜色。可使用的颜色设置值有white/black/blue/cyan/ |
| | darkGray/gray/green/lightGray/magenta/orange/pink/red/yellow |
-------------------------------------------------------------------------------------------
| fontsize | Applet组件的显示文字大小。 |
-------------------------------------------------------------------------------------------

9-2 网页动态更新
按指定的几秒后,自动更新所显示的网页网址。语法如下:

*注:标记必须放在标记中

9-3 多媒体网页

9-3-1 多媒体网页的制作简介

9-3-2 音乐文件的播放(.au .mid .wav)
例:ch9_4.htm


网页音乐的播放





网页音乐的播放





当您单击
甜美音乐
时,将自动打开Windows Media Player窗口并播放音乐




9-3-3 影像文件的播放(.mov .mpg .avi)
例:ch9_5.htm


网页电影的放映





网页电影的放映





当您单击
本市交通
时,将自动打开Windows Media Player窗口并播放短片




---------------
|将影像嵌入网页|
----------------
要直接将影像嵌入网页,您可以利用标记,语法如下:

例:ch9_6.htm


自动播放网页电影





自动播放网页电影






AUTOSTART=TRUE LOOP=TRUE>




9-3-4 音乐文件的播放
将音乐嵌入网页
方法同上
例:ch9_7.htm


播放网页背景音乐





播放网页背景音乐





AUTOSTART=TRUE LOOP=TRUE>(不限次数自动播放)




9-3-5 网页背景音乐的播放
利用标记,语法如下:

*Loop属性
若设为infinite时,音乐将循环播放,直到网页关闭为止。

例:ch9_8.htm


利用<BGSOUND>标签播放背景音乐





利用"BGSOUND"标签播放背景音乐





设置播放2次背景音乐后,就停止播放





第二部分 CSS样式表

第十章 认识CSS

10-1 CSS的简介

10-1-1 什么是CSS
CSS——CSS的英文全名是Cascading Style Sheet,译为层叠样式表。

10-1-2

第十一章 样式表的定义与使用

11-1 直接定义标记的STYLE属性
例:ch11_1.htm


使用时直接定义STYLE属性





此行文字将被定义为红色楷体的字体


此行文字并不会被STYLE属性所定义






11-2 定义内部样式表
11-2-1 在HTML文件内定义样式表

----------------------------------------------
程序说明
*
避免因浏览器不支持CSS语言,而导致错误。加上标记后,不支持CSS的浏览器,会自动略过此段内容。
*选择符1…选择符N
可以使用HTML标记的名称,所有HTML标记都可以作为CSS选择符。
*/*……*/
CSS注释符号

例:ch11_.htm


自定义内部样式表





此行文字为红色楷体的字体


此行文字为蓝色华文隶书的字体






组合选择符
==========

----------------------------------------------------------------------
程序说明
好处在于减少样式表的空间和重复设置的麻烦。
例:ch11_21.htm


11-2-2 利用CLASS类选择符定义样式


或者


--------------------------------------------------
程序说明
o *.A1…*.AN
A1…AN为定义的类选择符名称。其适用范围是整个HTML文件中所有由CLASS类选择符所引用的设置。*符号也可以用HTML内的标记替代(标记1…标记N),范例如:Font.A1;此外*符号,在设置时也可以省略。
o 标记1.A1…标记N.AN
标记1…标记N为HTML的标记名称,即前面提过的*符号,也可以用HTML内的标记替代。

例:ch11_3.htm


CLASS定义样式类的使用





此行文字为红色楷体的字体


此行文字为浏览器默认的字体样式


此行文字为蓝色华文隶书的字体样式






11-2-3 利用ID选择符定义样式
class与ID选择符定义样式的区别在于定义样式名称前的符号。用CLASS定义时为“*.样式名称”;若为ID定义时为“#样式名称”



或者




例:ch11_4.htm


CLASS定义样式类的使用





此行文字为红色楷体的字体


此行文字为浏览器默认的字体样式


此行文字为蓝色华文隶书的字体样式






11-3 CSS的继承概念

11-3-1 CSS的继承性质
例:ch11_6.htm


CSS的继承性质





欢迎光临位元文化欢迎光临









11-3-2 上下文选择符
根据上下文选择符之间的关系,决定在该网页上显示哪一种样式。

H1 {COLOR:RED}
EM {COLOR:GREEN}
若想将上述两浏览器的设置组合成字号为1级、斜体的蓝色字,则可写成如下的语名:

H1 EM {COLOR:BLUE}

使用:

文件内容



例:ch11_7.htm


上下文选择符的使用





此行为文字大小1级的红色字体


此行为文字为绿色的斜体字体

此行为文字大小1级的蓝色斜体字体






组合上下文选择符的使用
例:ch11_8.htm


上下文选择符的使用





此行文字为红色斜体字

此行为文字大小1级的加下划线红色字体


此行为文字大小2级的红色斜体字体






11-4 外部样式表

11-4-1 嵌入外部样式表

CSS文件内容:
CENTER.TEXT {FONT-FAMILY:楷体; COLOR:RED; FONT-SIZE:25pt}
I {COLOR:GREEN; FONT-SIZE=50pt}
IMG {HEIGHT:100; WEIGHT:160}
-------------------------------------------------------------
下面的语法,是将CSS文件嵌入HTML文件


例:ch11_9.htm


嵌入外部样式表





欢迎光临位元文化欢迎光临









--------------------
|ch11_1.css文件内容|
--------------------
CENTER.TEXT {FONT-FAMILY:楷体; COLOR:RED; FONT-SIZE:25pt}
I {COLOR:GREEN; FONT-SIZE=50pt}
IMG {HEIGHT:100; WEIGHT:160}

11-4-2 连接外部样式表
除了以嵌入外部样式表的方式达到在HTML文件中引样式表的目的外,您还可以使用连接的方式,使用外部样式表。而连接样式表简单来说,当浏览器读取到HTML文件内有设置格式的标记时,将会向所连接的外部样式表索取样式,语法如下:


例:ch11_10.htm


连接外部样式表







欢迎光临位元文化欢迎光临









--------------------
|ch11_1.CSS文件内容|
--------------------
CENTER.TEXT {FONT-FAMILY:楷体; COLOR:RED; FONT-SIZE:25pt}
I {COLOR:GREEN; FONT-SIZE=50pt}
IMG {HEIGHT:100; WEIGHT:160}

第十二章 文字与排版样式的使用

12-1 长度、百分比单位的介绍

12-2 文字样式属性的介绍

12-2-1 font-family 字体设置属性

font-family:字体一,字体二,…
上述语法定义使用好几种不同的字体,并用(,)隔开。当浏览器找不到字体一时,将使用字体二替代,以此类推。
font-family:楷体,幼园,华文细黑

例:ch12_1.htm


font-family属性的应用





font-family字体属性的应用


智者不失人,亦不失言。 —孔子






12-2-2 font-style 字体效果属性

font-style:normal|italic(斜体)|oblique(歪斜体)
(注:|表示或的意思)
例:ch12_3.htm


font-style属性的应用





font-style字体效果属性的应用


惟仁者能好人,能恶人。 -孔子






12-2-3 font-variant 文字变体属性
利用 small-caps属性值,可以将中文字字体转换为较小的中文字体;而小写的英文字体将转换为大写且字体较小的英文字。

font-variant:normal|small-caps

例:ch12_4.htm


font-variant属性的应用





font-variant文字变体属性的应用



It is never too late to mend. 亡羊补牢,犹未晚矣。


It is never too late to mend. 亡羊补牢,犹未晚矣。





12-2-4 font-weight 字体粗细属性

font-variant:normal|bold|bolder|lighter|100-900
--------------------------------------------------------
设置值 | 说明 |
--------------------------------------------------------
Normal |浏览器默认的字体为7,字体粗细约为400 |
--------------------------------------------------------
bold |粗体,字体粗细约为700 |
--------------------------------------------------------
bolder |粗体再加粗,字体粗细约为900 |
--------------------------------------------------------
lighter |比默认字体还细 |
--------------------------------------------------------
100-900 |共有九个层次(100、200…,900),数字 |
|越小字体越细,数字越大字体越粗。 |
--------------------------------------------------------

例:ch12_5.htm


font-weight属性的应用





font-weight属性的应用



















lighter normal bold bolder
字体粗细为100字体粗细为400 字体粗细为500字体粗细为800
字体粗细为200 字体粗细为600字体粗细为900
字体粗细为300 字体粗细为700




12-2-5 font-size 文字大小属性

font-size:绝对大小|相对大小

绝对大小:以pt为单位。见例:ch12_6.htm
相对大小:利用%或者em。见例:ch12_7.htm

例:ch12_6.htm


设置font-size文字大小属性以绝对方式的应用





设置font-size属性以绝对方式的应用


  • 文字大小设置为30点
  • 文字大小设置为xx-small
  • 文字大小设置为x-small
  • 文字大小设置为small
  • 文字大小设置为medium
  • 文字大小设置为large
  • 文字大小设置为x-large
  • 文字大小设置为xx-large




例:ch12_7.htm


设置font-size文字大小属性以相对方式的应用





设置font-size属性以相对方式的应用



  • font-size设为12pt,即文字大小为12点
  • font-size设为150%,即文字大小为12pt*150%=18pt
  • font-size设为2em,即文字大小为12pt*2=24pt
  • font-size设为larger,即文字大小>12pt
  • font-size设为smaller,即文字大小<12pt




12-2-7 text-decoration 文字效果属性

例:ch12_9.htm


text-decoration属性的应用





text-decoration文字效果属性的应用


  • 求学问并无捷径 "此行文字加下划线"


  • 求学问并无捷径 "此行文字上加顶线"


  • 求学问并无捷径 "此行文字中间加上删除线"




      12-2-8 text-transform 文字转换属性
      例:ch12_10.htm


      text-transform属性的应用





      text-transform文字转换属性的应用


      • there is no royal road to learing.



      • there is no royal road to learing.



      • THERE IS NO ROYAL ROAD TO LEARING.






          12-3 排版样式属性的介绍

          12-3-1 text-indent 首行缩进属性

          例:ch12_11.htm


          text-indent属性的应用





          text-indent首行缩进属性的应用

          "首行缩进25pt"。For every meal you take, should think it's not
          easy to get.Do appreciate blessings. 一粥一饭,当思来处不易,请惜福哦!


          "首行缩进5em"。For every meal you take, should think it's not
          easy to get.Do appreciate blessings. 一粥一饭,当思来处不易,请惜福哦!


          "首行缩进3cm"。For every meal you take, should think it's not
          easy to get.Do appreciate blessings. 一粥一饭,当思来处不易,请惜福哦!


          "首行缩进30%"。For every meal you take, should think it's not
          easy to get.Do appreciate blessings. 一粥一饭,当思来处不易,请惜福哦!





          首行凸出的应用

          例:ch12_12.htm


          text-indent属性的首行凸出的应用





          text-indent首行凸出属性的应用

          "首行凸出20pt,整段缩进30pt"。For every meal you take,
          should think it's not easy to get.Do appreciate blessings.
          一粥一饭,当思来处不易,请惜福哦!


          "首行凸出2em,整段缩进5em"。For every meal you take,
          should think it's not easy to get.Do appreciate blessings.
          一粥一饭,当思来处不易,请惜福哦!


          "首行凸出1cm,整段缩进3cm"。For every meal you take,
          should think it's not easy to get.Do appreciate blessings. 
          一粥一饭,当思来处不易,请惜福哦!


          "首行凸出10%,整段缩进30%"。For every meal you take,
          should think it's not easy to get.Do appreciate blessings. 
          一粥一饭,当思来处不易,请惜福哦!





          12-3-2 letter-spacing 字符间距属性

          例:ch12_13.htm


          letter-spacing属性的应用





          letter-spacing字符间距属性的应用

          "字符间距为5pt"。For every meal you take, should think it's not
          easy to get.Do appreciate blessings. 一粥一饭,当思来处不易,请惜福哦!



          "字符间距为-1pt"。For every meal you take, should think it's not
          easy to get.Do appreciate blessings. 一粥一饭,当思来处不易,请惜福哦!





          12-3-3 line-height 行距属性
          例:ch12_14.htm


          line-height属性的应用





          line-height行距属性的应用


          • "此段落字符为12pt,行距为18pt"。For every meal you take,
            should think it's not easy to get.Do appreciate blessings. 
            一粥一饭,当思来处不易,请惜福哦!


          • "此段落字符为14pt,行距为21pt"。For every meal you take,
            should think it's not easy to get.Do appreciate blessings. 
            一粥一饭,当思来处不易,请惜福哦!


          • "此段落字符为16pt,行距为24pt"。For every meal you take,
            should think it's not easy to get.Do appreciate blessings. 
            一粥一饭,当思来处不易,请惜福哦!





          行距属性应用二
          例:ch12_15.htm


          line-height属性的应用





          line-height行距属性的应用


          • "此段落字符为14pt,行距为21pt"。For every meal you take,
            should think it's not easy to get.Do appreciate blessings. 
            一粥一饭,当思来处不易,请惜福哦!


          • "此段落字符为14pt,行距为21pt"。For every meal you take,
            should think it's not easy to get.Do appreciate blessings. 
            一粥一饭,当思来处不易,请惜福哦!


          • "此段落字符为14pt,行距为21pt"。For every meal you take,
            should think it's not easy to get.Do appreciate blessings. 
            一粥一饭,当思来处不易,请惜福哦!





          12-3-4 text-align 水平对齐属性的应用
          例:ch12_16.htm


          text-align水平对齐属性的应用





          text-align水平对齐属性的应用


          • 无用之用是为大用 -庄子



          • 无用之用是为大用 -庄子



          • For every meal you take, should think it's not easy to get.
            Do appreciate blessings. 一粥一饭,当思来处不易,请惜福哦!





              12-3-5 vertical-align 垂直对齐属性

              例:ch12_17.htm


              vertical-align垂直对齐属性的应用





              vertical-align垂直对齐属性的应用








































              设置vertical-align属性显示结果 设置vertical-align属性显示结果
              vertical-align:sub C+O2-->CO2 vertical-align:super a2+b2
              =c2
              vertical-align:top vertical-align:text-top
              vertical-align:middle vertical-align:baseline
              vertical-align:bottom vertical-align:text-bottom





              第十三章 背景与颜色的使用

              13-1 设置颜色方法

              13-1-4 实例应用
              例:ch13_1.htm



              在CSS内设置颜色




              在CSS内设置颜色的方法













              在CSS内设置颜色的方法 语法显示的文字均为红色
              以十六进制数(#rrggbb)表示color:#ff0000 患难见知己
              以十六进制数(#rgb)表示color:#f00 患难见知己
              rgb函数以整数方法表示color:rgb(255,0,0) 患难见知己
              rgb函数以百分比方法表示 color:rgb(100%,0%,0%)患难见知已
              以颜色名称表示color:red 患难见知己





              13-2 背景颜色与背景图片的设置

              13-2-1 background-color 背景颜色属性
              background-color:|transparent
              ---------------------------------------------------
              设置值 | 说明
              ---------------------------------------------------
              |
              ---------------------------------------------------
              transparent |表透明的意思
              ---------------------------------------------------

              例:ch13_2.htm


              background-color背景颜色属性的应用




              background-color背景颜色属性的应用













              设置背景颜色的方法 语法
              以透明方式显示 background-color:transparent
              以十六进制数(#rrggbb)表示 background-color:#00ffff
              rgb函数以整数方法表示 background-color:rgb(0,250,0)
              rgb函数以百分比方法表示 background-color:rgb(70%,50%,0%)
              以颜色名称表示 background-color:red





              13-2-2 background-image 背景图片的应用

              background-image:|none

              ---------------------------------------------------
              设置值 | 说明
              ---------------------------------------------------
              | 图文件的位置与名称
              ---------------------------------------------------
              none |不加载图片
              ---------------------------------------------------

              语法:background-image:url(fish.gif)

              13-3 background-repear 背景

               

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号