网站5_静态网页制作.pptx

第五章静态网页制作技术;第五章 静态网页制作技术;第五章 静态网页制作技术;第五章 静态网页制作技术;第五章 静态网页制作技术;5.1 网页制作概述;5.1.1 静态网页、动态网页及其区别;;5.1.2 静态网页的处理流程;;5.1.3 动态网页的处理流程;;;;;5.2 HTML;5.2.1 HTML的基本语法;HTML的基本结构;HTML的标记;单标记;双标记;标记属性;示例1：创建一个简单HTML文档;执行效果图;示例2：最基本的超文本文档运行效果图;最基本的超文本文档源代码;HTML 和/HTML双标记;HEAD 和/HEAD双标记;BODY 和/BODY双标记;;示例3：背景示例①代码 ;背景示例①代码运行效果图;示例4：背景示例②运行效果图;背景示例②源代码 html headtitle正文body标记示例/title/head body bgcolor=#000000 text=#FFFFFF link=#FFFF00 正文标记示例 p 请访问:a href=搜狐主页/a /body /html;HTML文件的创建;;;5.2.2 页面布局与文字标记;标题;示例5：标题示例代码 html head title标题示例/title /head body 这是一行标题文字P H1一级标题/H1 H2二级标题/H2 H3三级标题/H3 H4四级标题/H4 H5五级标题/H5 H6六级标题/H6 /body /html;标题示例代码运行效果图;换行;示例6：没有换行效果示例代码运行效果图;没有换行效果示例代码 html head title没有换行示例/title /head body 第一阶段： 2006年1月1日---2006年1月16日 第二阶段： 2006年1月17日---2006年2月6日 第三阶段： 2006年2月7日---2006年3月1日 第四阶段： 2006年3月2日---2006年3月11日 /body /html;示例7：换行效果示例代码运行效果图;换行效果示例代码 html head title换行示例/title /head body 第一阶段： 2006年1月1日---2006年1月16日br第二阶段??? 2006年1月17日---2006年2月6日br第三阶段： 2006年2月7日---2006年3月1日br第四阶段： 2006年3月2日---2006年3月11日 /body /html;段落标记;示例8：段落标记示例运行效果图;段落标记示例代码 html head title段落标签/title /head body P ALIGN=CENTER 活动细则　P一等奖 1 名 5000元电脑 P二等奖 5名 1100元音响 /P /body /html;示例9：段落标记与换行标记效果区分示例代码 html head title段落标记与换行标记效果区分/title /head body p这是正文部分！/p p这是正文部分！/p p这是正文部分！/p 这是正文部分！br 这是正文部分！br 这是正文部分！br /body /html;段落标记与换行标记效果区分运行效果图;水平线段;;示例10：水平线示例①运行效果图;水平线示例1代码 HTML HEAD TITLE线段粗细的设定/TITLE /HEAD BODY P此线段没有size设定，取内定值SIZE=1来显示BR HR P设置此线段的SIZE=5BR HR SIZE=5 P设置此线段的SIZE=10BR HR SIZE=10 noshade /BODY /HTML;示例11：水平线示例②代码 HTML HEAD TITLE水平线示例2代码/TITLE /HEAD BODY HR size = 1 width = 100 color = 111111 HR size = 2 width = 200 color = aaaaaa HR size = 3 width = 300 color = 888888 HR size = 4 width = 400 color = 666666 HR size = 5 width = 500 color = eeeeee HR size = 6 width = 600 color = 123456 /BODY /HTML;水平线示例②代码运行效果图;文字的大小设置;示例12：字号大小示例代码运行效果图;字号大小示例代码 html head title字号大小/title /head body font size=7这是size=7的字体/fontP font size=6这是size=6的字体/fontP font size=5这是size=5的字体/