网页设计基础课.ppt

网页设计基础课 主讲 桑明明Email ming 1990 2020 1 5 主要内容 1 网页设计的基本知识html以及css的简介 网站欣赏网页设计的重要元素2 网页设计工具3 html的详细讲解4 实例讲解5 回答问题 2020 1 5 怎样学好网页设计 一 基础学习html和css的基础知识 是必须的 html和css都是很简单的东西 不涉及算法 不涉及数据库 只要搞清楚含义就可以 有了基础 其实很多问题都会迎刃而解 真的遇到了不明白的 再问也不迟 二 善于使用搜索引擎 善于使用网上资源三 做一些网页四 学习javascript五 学习动态网站语言 php asp jsp等 2020 1 5 html简介 HTML HyperTextMark upLanguage 即超文本标记语言或超文本链接标示语言 是目前网络上应用最为广泛的语言 也是构成网页文档的主要语言 HTML文本是由HTML命令组成的描述性文本 HTML命令可以说明文字 图形 动画 声音 表格 链接等 HTML的结构包括头部 Head 主体 Body 两大部分 其中头部描述浏览器所需的信息 而主体则包含所要说明的具体内容 xhtml 2020 1 5 html的特点 1简易性 HTML版本升级采用超集方式 从而更加灵活方便 2可扩展性 HTML语言的广泛应用带来了加强功能 增加标识符等要求 HTML采取子类元素的方式 为系统扩展带来保证 3平台无关性 虽然PC机大行其道 但使用MAC等其他机器的大有人在 HTML可以使用在广泛的平台上 这也是WWW盛行的另一个原因 2020 1 5 网页欣赏 简洁型 2020 1 5 艺术性 2020 1 5 创意型 2020 1 5 怎样编辑html 1基本编辑软件 使用WINDOWS自带的记事本或写字版都可以编写 当然 如果你用WPS来编写 也可以 不过存盘时请使用 htm或 html作为扩展名 这样浏览器就可以解释执行了 2半所见即所得软件 这种软件能大大提高开发效率 它可以使你在很短的时间内做出Homepage 且可以学习HTML 这种类型的软件主要有HOTDOG 还有国产的软件网页作坊 3所见即所得软件 使用最广泛的编辑器 完全可以一点不懂HTML的知识就可以做出网页 这类软件主要有Frontpage DREAMWEAVER 2020 1 5 hello html hello html hello html 2020 1 5 网页基本框架讲解 yourtitle 2020 1 5 html标签讲解 基本标签 创建一个HTML文档设置文档标题以及其他不在WEB网页上显示的信息设置文档的可见部分标题标签将文档的题目放在标题栏中 2020 1 5 html标签讲解 文档整体属性 设置背景颜色 使用名字或十六进制值设置文本文字颜色 使用名字或十六进制值设置链接颜色 使用名字或十六进制值设置已使用的链接的颜色 使用名字或十六进制值设置正在被击中的链接的颜色 使用名字或十六进制值 不建议使用这种方法 现在都是使用css 2020 1 5 html标签讲解 文本标签 创建预格式化文本创建最大的标题创建最小的标题创建黑体字创建斜体字创建打字机风格的字体创建一个引用 通常是斜体加重一个单词 通常是斜体加黑体 加重一个单词 通常是斜体加黑体 设置字体大小 从1到7设置字体的颜色 使用名字或十六进制值 2020 1 5 html标签讲解 超链接 创建一个超链接创建一个自动发送电子邮件的链接 2020 1 5 html标签讲解 格式排版 创建一个新的段落将段落按左 中 右对齐插入一个回车换行符从两边缩进文本创建一个定义列表放在每个定义术语词之前放在每个定义之前创建一个标有数字的列表放在每个数字列表项之前 并加上一个数字创建一个标有圆点的列表放在每个圆点列表项之前 并加上一个圆点一个用来排版大块HTML段落的标签 也用于格式化表 2020 1 5 html标签讲解 图形元素 添加一个图像排列对齐一个图像 左中右或上中下设置围绕一个图像的边框的大小加入一条水平线设置水平线的大小 高度 设置水平线的宽度 百分比或绝对像素点 创建一个没有阴影的水平线 2020 1 5 html标签讲解 表格 创建一个表格开始表格中的每一行开始一行中的每一个格子设置表格头 一个通常使用黑体居中文字的格子 2020 1 5 html标签讲解 表单 创建所有表单创建一个滚动菜单 size设置在需要滚动前可以看到的表单项数目设置每个表单项的内容创建一个下拉菜单设置每个菜单项的内容创建一个文本框区域 列的数目设置宽度 行的数目设置高度创建一个复选框 文字在标签后面创建一个单选框 文字在标签后面创建一个单行文本输入区域 size设置以字符计的宽度创建一个submit 提交 按钮创建一个使用图象的submit 提交 按钮创建一个reset 重置 按钮 双击添加标题文字 html讲解实战 1 做一个简单的网页2 做一个表格页3 做一个表单页 2020 1 5 css简介 CSS CascadingStyleSheet 可译为 层叠样式表 或 级联样式表 是一组格式设置规则 用于控制Web页面的外观 通过使用CSS样式设置页面的格式 可将页面的内容与表现形式分离 页面内容存放在HTML文档中 而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分 通常为文件头部分 将内容与表现形式分离 不仅可使维护站点的外观更加容易 而且还可以使HTML文档代码更加简练 缩短浏览器的加载时间 2020 1 5 css的特点 1 便于页面的修改 2 便于页面风格的统一 3 减少网页的体积 层叠样式表极大地提高了工作效率 2020 1 5 怎样在网页中使用css 定义内部样式块对象可以在HTML文档的和标记之间插入一个 块对象 定义方式请参阅样式表语法 示例如下 文档标题请注意 这里将style对象的type属性设置为 text css 是允许不支持这类型的浏览器忽略样式表单 内联定义 InlineStyles 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性 示例如下 Thisisaparagraph导入样式 ImportStyles 与链入外部样式的功能基本相同 只是语法和实现方式上有差别文档标题 importurl css css importurl csss css 单引号也可以 importcss css import css css 单引号也可以以上几种形式都可以 链接样式几种方式的优先级内联样式优先级最高 其次是链接样式 再次是内嵌式 最后是导入样式 2020 1 5 css的语法 CSS的定义是由三个部分构成 选择符 selector 属性 properties 和属性的取值 value 语法 selector property value 选择符 属性 值 说明 选择符是可以是多种形式 一般是你要定义样式的HTML标记 例如BODY P TABLE 你可以通过此方法定义它的属性和值 属性和值要用冒号隔开 例子 body color black 此例的效果是使页面中的文字为黑色 2020 1 5 css选择器 基本选择器标记选择器类别选择器id选择器复合选择器交集选择器h3 class并集选择器h3 class选择符组后代选择器h3 class 2020 1 5 css控制文字样式 font family 字体列表 font size 文字大小 px em line height 行高 color 000 rgb 0 0 0 rgb 0 0 0 black字体颜色background 背景颜色font weight normalbold加粗font style normalitalic意大利体oblique倾斜font decoration underlineoverlineline through删除线blink闪烁text align 水平对齐text indent 段首缩进文字布局 2020 1 5 css盒子模型 margin border padding