网页制作课件 钟华 牛哥.ppt

网页设计1 网页设计教程 张月玲等清华大学出版社2 网站建设与管理 陈长顺中国铁道出版社 四 Dreamwaver介绍 工作界面选择合适自己的工作模式文档窗口进行文字 图像等的编辑场所 可以同时打开多个文档窗口进行编辑浮动面板显示与隐藏面板和菜单调整面板形状 大小使用快捷方式使用标尺与网格使用草稿 四 Dreamwaver介绍 Dreamweaver的特点1 所见即所得可以将编辑窗口中编辑的文本与图片自动转化成HTML语言2 自定窗口环境三种工作区 代码 设计 代码与设计 多功能选项卡等3 动态网页效果的支持结合了JavaScript在行为面板中 设计者不需要编程就可以完成部分动态网页的制作4 网站的管理丰富的站点管理功能 四 Dreamwaver介绍 设置站点存储位置设立Dreamweaver站点建立站点文件夹建立网页新文件打开站点窗口版面设定与文字编辑页面属性的设定属性面板文字编辑普通文本的输入方法空格的输入方法换行符的输入方法插入特殊字符 网页设计1 网页设计教程 张月玲等清华大学出版社2 网站建设与管理 陈长顺中国铁道出版社 第二章HTML语言 一 HTML文件的构成二 HTML的常用标记三 HTML标记的事件和属性四 HTML表单五 HTML布局六 HTML链接七 HTML框架八 HTML样式单九 其它 一 HTML文件的构成 1 HTML语言HTML是HyperTextMarkupLanguage 超文本标记语言 的缩写 是一种用于编写超文本文档的标记语言 它是目前网页编辑的基础语言 只要有浏览器软件即可以运行HTML文档 一个网页 也称为Web页 对应于一个HTML文件 通常以 htm或 html为扩展名 而HTML文件就是用HTML编写的文本文件 主要由标签和元素体组成 HTML利用不同类型标签标记不同的元素体 确定和解释网页各种内容的显示格式 由浏览器来显示网页 一 HTML文件的构成 2 HTML语法 元素名 元素体 元素名 元素名属性名 属性值 元素体 元素名 元素名 HTML中 所有标签都用尖括号括起来 分成两类 成对标签和单独标签 如 和 成对标签中的首标签和尾标签标记一个元素体的开始和结尾 元素体可以是标题 文字 图像 表格 超文本或文件等 一般 改变元素在HTML文件中的次序会改变HTML文件的输出形式 一 HTML文件的构成 3 HTML文件HTML文件由一个 HTML 元素构成 以开始 以结尾 HTML文件的结构 HTML文件开始文件头开始 文件头文件头结束文件体开始HTML文件的正文 文件体文件体结束HTML文件结束 一 HTML文件的构成 包含文档相关的信息 但不显示 包括 以及定义文档的主体 它包含文档的所有内容 比如文本 图像 颜色和图形等等 二 HTML的常用标记 插入一个水平分隔线 可以在视觉上将文档分隔成各个部分 标签可定义标题 定义最大的标题 定义最小的标题 插入一个强制换行符 规定文本的字体 字体尺寸 字体颜色 定义一副图像 定义输入域的开始 在其中用户可输入数据 创建单选或多选菜单 定义滚动字幕 定义滚动字幕 三 HTML标记的属性和事件 1 属性HTML标签拥有属性 属性为HTML元素提供附加信息 属性总是以名称 值对的形式出现 比如 name value 属性总是在HTML元素的开始标签中规定 属性值应该始终被包括在引号内 双引号是最常用的 使用单引号也没有问题 三 HTML标记的属性和事件 2 事件HTML标签拥有事件 事件使网页对用户的行为作出响应 窗口事件 WindowEvents 表单元素事件 FormElementEvents 键盘事件 KeyboardEvents 鼠标事件 KeyboardEvents HTML表单 表单用于搜集不同类型的用户输入 表单是一个包含表单元素的区域 表单元素是允许用户在表单中 比如 文本域 下拉列表 单选框 复选框等等 输入信息的元素 表单使用表单标签 定义 表单标签 FORM的属性 enctype取值 1 application x www form urlencoded Allcharactersareencodedbeforesent thisisdefault 2 multipart form data Nocharactersareencoded Thisvalueisrequiredwhenyouareusingformsthathaveafileuploadcontrol3 text plain Spacesareconvertedto symbols butnospecialcharactersareencoded例子 HTML布局 在网页中加入表格 能有效地组织数据 控制页面布局 方便对网页上众多元素的编辑 目前大多数网站的网页都是利用表格来进行布局 使用 table 标签或frameset完成整个页面的布局例子 实际表格示例 table tr td HTML框架 框架是一种特殊的网页 是网页设计中一种非常有用的工具 它可以将浏览器窗口分割成几个独立的小窗口 各个窗口包含不同的网页 并且各窗口中的网页内容可以不受其他窗口的影响 通常使用框架来实现网站导航功能 元素可定义一个框架集 它被用来组织多个窗口 框架 每个框架存有独立的文档 一般于cols或rows属性一起使用 定义一个框架 创建一个内联框架 以包含另外一个文档 frameset属性 frame属性 iframe属性 HTML列表 无序列表是一个项目的列表 此列项目使用粗体圆点 典型的小黑圆圈 进行标记 CoffeeMilk浏览器显示如下 Coffee Milk列表项内部可以使用段落 换行符 图片 链接以及其他列表等等 HTML列表 有序列表是一个项目的列表 此列项目使用数字等进行标记 CoffeeMilk浏览器显示如下 1 Coffee2 Milk列表项内部可以使用段落 换行符 图片 链接以及其他列表等等 HTML列表 自定义列表自定义列表不仅仅是一列项目 而是项目及其注释的组合 CoffeeBlackhotdrinkMilkWhitecolddrink浏览器显示 CoffeeBlackhotdrinkMilkWhitecolddrink列表项内部可以使用段落 换行符 图片 链接以及其他列表等等 HTML链接 网页中的超级链接可分为文本超链接和图像超链接 为文本和图像增加超链接后 当单击这些链接时 会自动转移到超链接所指向的目标文件上 例子 内部文字外部图像 HTML链接 a 标签定义锚 HTML样式单 CSS CascadingStyleSheet 技术是一种格式化网页的标准方式 它是HTML功能的扩展 能够以更有效的方式设计出具有表现力的网页效果 CSS特点 1 简化网页格式设计 增强网页的可维护性 2 加强网页的表现力 3 增强网站的一致性 1 CSS样式定义 样式规则 样式符 属性1 属性值1 属性2 属性值2 样式符 要定义样式的类型属性 由CSS标准定义的样式属性属性值 样式属性的值 1 HTML标记格式符为一个或几个HTML标记符应用样式表定义 H1 font size x large color red H2 font size large color blue 为了减少样式表的重复声明 可采用组合 样式符 H1 H2 H3 H4 H5 color green 2 用户自定义类格式符使用类 class 为一个HTML标记指定多个样式样式符 类名 属性1 属性值1 也可不针对具体的标记 而定义一个通用类 类名 属性1 属性值1 引用通用类的方法 标记内容 3 用户自定义ID格式符作用与类相同 定义的格式 ID 属性1 属性值1 red color red 引用方法 标记内容 网页中应用CSS样式1 HTML标记中嵌入样式信息2 HTML文档头部定义样式信息样式1样式2 样式n3 链接外部样式单文件 CSS属性属性的单位1 长度单位 CSS属性属性的单位2 百分比单位一个百分比值中有可选的 号 后跟一个数字 最后为 正号可省略 整个单位中不可以有空格 3 颜色的表示方法 1 颜色名称如 green red 2 十六进制数如 rrggbb 3 十进制数如 RGB x y z 0 255的整数 4 百分比如 RGB x y z 0 100整数 字体属性1 font family 设置HTML元素的字体列表 浏览器由前向后依次选择字体 font family 值1 值2 值3 值n 值为具体的字体 2 font style 设置指定元素的显示字形样式 font style 值 值为normal 默认 italic oblique 字体属性3 font variant 用于在正常和小型大写字母间切换 font variant 值 值为normal或small caps 4 font weight 设置字体的粗细 font weight 值 值为normal 默认 bold bolder light lighter 100 200 900 字体属性5 font size 设置字体显示的大小 font size 值 值为xx small x small small median large x large xx large smaller larger 长度值 百分比值 6 font 一次性设置各种字体属性 属性间以空格分隔 font font weightfont variantfont stylefont sizefont family 文本属性1 letter spacing 设置字符间的间隔大小 letter spacing 值 值为具体长度值 2 word spacing 设置单词间的距离 word spacing 值 值为具体长度值 3 line height 控制标记符中文本的行高 line height 值 值为数字 长度或百分比 文本属性4 text decoration 设置文本的修饰效果 text decoration 值 值为underline overline line througn blink none 默认 5 text align 设置文本的对齐方式 text align 值 值为left 默认 right center justify 文本属性6 vertical align 设置文本的纵向对其方式 vertical align 值 值为baseline 默认 sub super top text top middle bottom text bottom 百分比 7 text transform 设置文本格式转化 text transform 值 值为none 默认 capitalize uppercase lowercase 文本属性7 text indent 设置首行缩进 text indent 值 值为长度值 百分比 0为默认值 背景属性1 background color 设置元素的背景颜色 background color 值 值为一个颜色值 2 background image 设置元素的背景图案 background image 值 值为none url http host a gif 背景属性3 background repeat 设置背景图案如何显示 background repeat 值 值为repeat 默认 repeat x repeat y no repeat 4 background attachment 指定背景图案是否随内容一起滚动 background attachment 值 值为scroll 默认 fixed 背景属性5 background position 设置指定背景图案的初始位置 background position 值 值为left right center top bottom 6 background 一次性设置上述的背景属性 background 值 值为上述的各有效值 边框属性1 边界属性margin left margin right margin top margin bottom 分别设置页面元素四周边界的宽度 margin left 值 值为长度值 百分比或auto 边框属性2 1边框宽度属性border left width border right width border top width border bottom width 分别设置页面元素四周边框的宽度 border left width 值 值为thin medium 默认 thick length 边框属性2 2边框颜色属性border left color border right color border top color border bottom color 分别设置页面元素四周边框的颜色 border left color 值 值为一个颜色值 边框属性2 3边框样式属性border left style border right style border top style border bottom style 分别设置页面元素四周边框的样式 border left style 值 值为none 默认 dotted dashedm solid double groove ridge inset outset 边框属性2 4边框属性border left border right border top border bottom 分别设置页面元素四周边框的宽度 边框和颜色 border left 宽度值边框值颜色值 边框属性3 填充属性padding left padding right padding top padding bottom 分别设置页面元素四周填充区的宽度 padding left 值 值为长度值 百分比 浮动属性1 float属性 将元素的内容浮动到页面的左边缘或右边缘 float 值 值为none 默认 left right 2 clear属性 指定一个元素是否允许有元素漂浮在它的旁边 clear 值 值为none 默认 left right 定位属性1 position属性 规定元素在web页上的定位方式 position 值 值为static 元素按照HTML格式规则正常定位relative 元素将定位在相对于前一个元素的末端位置absolute 元素将定位在框架或浏览器窗口本身左上角的绝对位置 定位属性2 top left属性 规定元素在web页上的位置 值为整数 单位是像素 3 width height属性 规定元素的宽度和高度 值为长度值或百分比 定位属性4 z index属性 规定元素在web页上的层次关系 z index 值 值为 1的自然数 1 在页面默认文本的后面值越大的元素越位于上面 列表属性1 list style type 设置项目符号或编号的样式 list style type 值 列表属性2 list style image 设置图片为列表项目的符号 list style image 值 值为none url 列表属性3 list style position 设置列表元素标记相对于列表中其它文本的位置 list style position 值 值为inside outside 默认 列表属性4 list style 用于不限顺序的一次性设置列表属性 list style 值 鼠标属性cursor属性 设置鼠标的不同形状 cursor 值 CSS滤镜filter 滤镜名称 参数 1 alpha滤镜 把一个目标元素与背景混合alpha