网页设计第二章 网页基本内容设计

更新时间:2023-05-21 18:33:01 阅读量: 实用文档 文档下载

说明:文章内容仅供预览,部分内容可能不全。下载后的文档,内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的,是否完整无缺。

西南财经大学天府学院Tianfu College of Southwestern University of

Finance and Economics

Logo

操作系统及网络应用技术信息技术中心 郭进

西南财经大学天府学院—计算机应用基础

第一章 第二章 第三章 第四章 第五章 第六章 第七章 第八章 第九章

网站构建入门 网页基本内容设计 页面元素定位技术 样式应用 表单设计 流媒体及行为的应用 模板和库 服务器技术 网站的发布管理

西南财经大学天府学院—计算机应用基础

主要内容

12 3 4

HTML入门知识 网页中文本操作 网页中图像操作 网页中链接操作

西南财经大学天府学院—计算机应用基础

HTML入门知识 HTML(HyperText Mark-up Language)即超文 本标记语言或超文本链接标示语言,是目前网络 上应用最为广泛的语言,也是构成网页文档的主 要语言。 HTML文本是由HTML命令组成的描述性文本, HTML命令可以说明文字、图形、动画、声音、 表格、链接等。 HTML的结构包括头部(Head)、主体(Body) 两大部分,其中头部描述浏览器所需的信息,而 主体则包含所要说明的具体内容。

西南财经大学天府学院—计算机应用基础

HTML文档结构

HTML标记

文档内容

蓝色代码:决定文档内容显示方式 黑色代码:决定用户在浏览器中文本

西南财经大学天府学院—计算机应用基础

常用HTML标记

(1)<html>….</html>文档类型标记 (2)<head>….</head>文档头部标记 (3)<title>….</title>文档标题标记 (4)<body>….</body>文档主体标记

西南财经大学天府学院—计算机应用基础

网页中文本操作改变字体设置文本格式

输入文本

设置文字属性插入特殊字符 插入水平线插入其他文本元素

插入时间 插入注释

西南财经大学天府学院—计算机应用基础

改变字体

西南财经大学天府学院—计算机应用基础

改变文字属性

设置文字格式 设置文字字体 设置文字样式 设置文字大小 设置文字颜色

设置文字排列

西南财经大学天府学院—计算机应用基础

插入其他文本元素特殊字符:版权信息、注册商标、换行符号等 插入|HTML|水平线 插入|HTML|特殊字符|版权 插入|HTML|特殊字符|注册商标 插入|日期 插入|注释

西南财经大学天府学院—计算机应用基础

补充文字HTML标记 font 文本进行设置

size 字体大小color 字体颜色 Dir 文本方向 face 字体名称

id

在文档范围内的识别标识

Style 行内样式 Title 元素标题

西南财经大学天府学院—计算机应用基础

网页中图像操作

设置图像属性

插入图像

插入图像占位符插入其他图像元素

插入鼠标经过图像 插入导航条

西南财经大学天府学院—计算机应用基础

图像基本格式

Gif——图像

交换格式,256种颜色,支持动态图 Jpeg——图像压缩格式,百万种颜色,不支持透明图和动态图 BMP——点阵图像格式,2-16M颜色,存储空间大 Png——w3c建议使用的图像格式,16M颜色 网页中常见的图像格式:gif,jpg,jpeg

西南财经大学天府学院—计算机应用基础

插入图像

插入|图像

西南财经大学天府学院—计算机应用基础

设置图像属性

图像:设置图像名称 源文件:图像的路径 连接:图像的超链接

边距:与其他元素的距离 边框:以像素为单位的 对齐:图像的对齐方式

替换:图像不能显示时候的内容 编辑:打开其他工具编辑图像 地图:名称和热点工具

西南财经大学天府学院—计算机应用基础

插入其他图像元素——插入图像占位符 插入|图像对象|图像占位符

西南财经大学天府学院—计算机应用基础

插入其他图像元素——插入鼠标经过图像 插入|图像对象|鼠标经过图像

西南财经大学天府学院—计算机应用基础

插入其他图像元素——插入导航条 插入|图像对象|导航条

西南财经大学天府学院—计算机应用基础

补充图像HTML标记

img src width

图像进行设置 图像路径 图像宽度

height 图像高度border 图像边框宽度

西南财经大学天府学院—计算机应用基础

网页中链接操作电子邮件链接 锚点链接 脚本链接 下载文件链接 图像热点链接

创建超级链接

链接操作

管理链接

检查站点链接

西南财经大学天府学院—计算机应用基础

创建超级链接——创建电子邮件链接 插入|电子邮件链接

本文来源:https://www.bwwdw.com/article/hxm4.html

Top