网页设计基础设置文本ppt课件.ppt

授课教师 黄彩霞E MAIL 课时安排 答疑及成绩构成 课时安排授课 24学时上机 24学时答疑方式答疑采用上机 现场答疑和网上答疑相结合 教学网站网址 考试方式上机考试成绩构成平时考勤作业 30 期末上机考试 70 第1章网页设计理论 1 1网页的来源与本质 上网演示 1 1网页的来源与本质 最早的网页theproject html 1 1网页的来源与本质 网页 WebPage 顾名思义就是网站中的页面 网页的本质就是用HTML 超文本标记语言 语言来表述的文档 与传统的记事本文本或Word文本相比 网页文本最大的区别在于加入了超链接的应用 同时阅读网页还需要浏览器支持 互联网上传输和通信需要相应的协议支持 网页文本传输和通信所遵守的协议是超文本传输协议 即HTTP协议 1 2网页的组成元素 网页元素有 文字 图片 动画 声音 视频等元素 一个网页实际上不是由单独文件组成 往往有多个文件组成 网页中显示的图片 动画 声音等文件都是单独存放的 网页通常成组出现 并且这组网页之间通过超链接相互组织成为反映某个主题的网站 1 3网页的尺寸 像素 Pixel 简写为px 是一种用来计算图形尺寸的单位 当图片的尺寸以像素为单位时 需要指定其固定的分辨率 才能将图片尺寸与现实中的实际尺寸相转换 大多数网页在制作时 图片分辨率常为72px 即每英寸像素为72个 1英寸等于2 54厘米 1厘米等于28px 比如15cm 15cm的图片 相当于420 420px 像素也是网页设计中的标准长度单位 1 3网页的尺寸 对于IPAD移动设备 网页宽度一般设置为768px 页面高度视版面和内容决定 对于手机 网页宽度一般设置为480px 页面高度视版面和内容决定 对于电脑 网页宽度一般设置在1002px以内 这样就不会出现水平滚动条 高度同样视版面和内容决定 1 4网页的布局 网页布局的方式有两种 一种是自适应布局又叫流动性布局 另外一种是固定布局 网页布局的技术实现有两种常用的方法 表格布局和DIV CSS布局 1 5网页的色彩 网页中的色彩分为无彩色系和有彩色系 一般把黑 白以及黑白相间的灰阶色称为无彩色系 除此之外的颜色称之为彩色系 网页色彩中有一个非常重要的概念就是色环 将色彩分为三大色系 依次为红 Red 绿 Green 蓝 Blue 也称三原色 计算机采用 符号加上6位十六进制代码来表示不同颜色 例如 02d234 1 5网页的色彩 网页安全色是各种浏览器各种机器都可以无损失无偏差输出的色彩集合 00 33 66 99 CC或FF RGB值分别为0 51 102 153 204和255 十六进制值组合的颜色都代表网页安全色 在设计网络作品的时候尽量使用网页安全色 这样不会让观看的人看到的效果与你制作时相差太多 否则一旦你的色彩文件与观看者不同可能会出现偏色很严重的情况 1 5网页的色彩 常用的色彩搭配方法有单色搭配 类比色搭配 补色搭配 分离补色搭配 原色搭配 二次色搭配 全色相搭配等 1 5网页的色彩 色彩和风格 1 5网页的色彩 在色彩上二种颜色的衔接有些生硬 所以需要使用灰色进行中和 这样颜色过渡得更自然 使整个画面和谐统一 1 6网页设计与开发过程 简单来说 网站开发的全过程大致可为策划与定义 设计 开发 测试和发布5个阶段 网站建设与网页设计流程中的人员角色 1 6网页设计与开发过程 网站开发的工作流程 网页的基本概念 www WorldWideWeb 万维网 是一种建立在Internet上的 全球的 交互的 多平台的 分布式的信息资源系统 什么是 服务器 与 浏览器 服务器与浏览器的关系示意图 网页的基本概念 做好的网站需要上传到远程服务器上 用FTP工具文件传输 并申请对应的域名 才能被浏览器浏览 第2章HTML语言 2 1网页与HTML 网页的HTML源文件 2 1网页与HTML 网页文件是用一种被称为HTML的标记语言书写的文本文件 HTML HypertextMarkupLanguage 超文本标记语言是一种专门用于网页制作的描述性的标记语言 HTML的发展经历了如下很多版本 1 HTML2 0 1995年11月发布 于2000年6月之后被淘汰 2 HTML3 2 1996年1月14日发布 W3C推荐标准 3 HTML4 0 1997年12月18日发布 W3C推荐标准 4 XHTML1 0 2000年1月26日发布 W3C推荐标准 2002年8月1日修订后发布 5 XHTML2 0 W3C工作草案 因为改动过大 学习这个新技术的成本过高 现在最常用的还是XHTML1 0的标准 6 HTML5 2008年 W3C取消了对XHTML的开发 将HTML5规范纳入W3C的框架中 2 1网页与HTML 使用HTML语言来描述文本 图片 动画等内容的排版 就是网页 网页文件也经常被称为HTML文件 静态网页的扩展名 html或 htm 动态网页的扩展名 asp jsp php aspx浏览器解释网页文件中的代码 将网页内容呈现给用户 产生网页文件有两种方式 自己手工编写 借助辅助软件编写 Dreamweaver 在浏览器单击 查看 源文件 命令 可以自动打开记事本程序查看网页的源文件代码 2 2HTML语法 超文本 Hypertext 是用超链接的方法 将各种不同空间的文字信息组织在一起的网状文本 HTML HypertextMarkupLanguage 超文本标记语言 不是一种编程语言 而是一种描述性的标记语言 用于描述超文本中内容的显示方式 例如 如何在网页中定义一个标题 一段文本或者一个表格等 这些都是利用一个个HTML标记完成的 这是一级标题这是二级标题这是一个段落 2 2HTML语法 HTML标记分为以下两类 双标记 其基本语法 控制的内容这是斜体字另外 起始标记中还可以附加一些属性 用来完成某些特殊效果或功能 例如 受控制内容这是段落 2 2HTML语法 HTML标记分为以下两类 单标记 其基本语法 例如 标记等同样 单标记也可以附加一些属性 用来完成某些特殊效果或功能 例如 在具体使用时 标记之间可以相互成对的嵌套 例如 受控制内容但是不能交叉嵌套 例如 受控制内容 2 2HTML语法 注释标记注释是网页设计者对页面代码进行的解释 不会在浏览器中显示 注释标记的语法格式如下 标记通常都是成对使用的 有一个开头标记就对应有一个结束标记 结束标记只是在开头标记的前面加一个斜杠 大家尽量养成用小写的习惯 当浏览器从服务器接收到HTML文件后 就会解释里面的标记符 然后把标记符相对应的功能表达出来 创建第一个HTML文件 我的个人主页互联网 我来了 2 3HTML文件结构 网页的标题网页的内容 标记标记标记标记 标记HTML文档中的第一个标记 该标记用于表示该文档是HTML文档 当浏览器遇到标记时 就会按HTML的标准来解释文本 结束标记出现在HTML文档的尾部 DOCTYPE文档声明DOCTYPE是documenttype 文档类型 的简写 是指示Web浏览器关于页面使用的XHTML或者HTML是什么版本 以下是三种版本的HTML文档声明示例 1 2 3 2 3HTML文件结构 标记该标记出现在标记内起始的部分 此标记称为头部标记 头部标记用于提供与Web页面有关的各种信息 在头部标记中 可以使用标记用于鉴别作者 标注内容提要和关键字 设定页面字符集 刷新页面等 在HTML头部可以包括任意数量的标记 在头部标记中使用 标记来指定网页的标题 使用 标记来定义CSS样式表 使用 标记来插入脚本语言等 一般来说 位于头部标记中的内容都不会在网页上直接显示 2 3HTML文件结构 标记该标记通过设置其属性以及属性值来定义相关的功能 1 http equiv属性 2 content属性 表示信息的内容 3 name属性 主要用于描述网页 4 charset属性 定义字符集 文档的字符编码 2 3HTML文件结构 说明网页的关键词为网页设计和网页教程 此标记称为主体标记 在其中放置的是页面中的所有内容 如文字 图片 超链接 表格 表单等 在头部标记之后 此标记有很多的内置属性 这些属性用于设定网页的总体风格 例如 定义页面的背景图像 背景颜色 文字颜色以及超文本链接颜色等 2 3HTML文件结构 2 4HTML常用标记 一个网页通常由文本 超链接 图像 表格和列表等元素组成 而在HTML文档中 这些页面元素是通过HTML标记来定义的 网页中主体标记之间的标记根据其状态 默认分为两大类 一类是可以自动换行的标记 称之为 块级元素标记 其特点是另起一行开始 高度 行高以及顶部 底部边距都可控制 例如 标记都是块级元素标记 块级元素标记一般用于网页布局 另一类是不能自动换行的标记 称之为 行内元素标记 其特点是所有元素都在一行 高度 行高以及顶部 底部边距不可改变 例如 等标记 行内元素标记不可用于网页布局 2 4HTML常用标记 2 4 1文本标记 标题标记 标题标记练习以下为标题样式 H1标题大小H2标题大小H3标题大小H4标题大小H5标题大小H6标题大小 标题标记 n从1到6取值 用来设计标题文字 以加粗的方式显示在网页中 数字越小字号越大 align属性控制标题的对齐方式 段落标记 换行标记 段落标记练习文字段落一文字段落二文字段落三 2 4 1文本标记 align属性控制段落的对齐方式 标记强制换行 文字的修饰标记 设置文字颜色 字体 字号 设置文字颜色这是蓝色文字 规定文本的字体 字体尺寸 字体颜色等 face size color为font标记的属性 用用于设置标记的某些附属性质 设置文本的字体 尺寸 颜色 2 4 1文本标记 2 4 1文本标记 文字的修饰标记 设置文字加粗 倾斜 蓝色粗斜字体这是蓝色粗斜字体 标记使其文字加粗 标记使其文字倾斜 2 4 1文本标记 文字的修饰标记 拼音注释标记 标记定义注释 标记定义注释的解释 标记定义浏览器不支持ruby元素显示的内容 你好nihao 2 4 1文本标记 插入特殊字符 蓝色粗斜字体这是一个段落 注释标记 注释标记这是正文文本 是注释标记 其间的内容不会显示在浏览器中 它的作用是网页设计者或用户了解该文件的内容 2