第6节 网站设计（课件） 2024—2025学年北师大版初中信息技术八年级上册

HTML基础 1.1 课程介绍 课程信息 课程时长： 课程名称：基本的课程介绍 课程详情 1、万丈高楼平地起，基础不牢地动山摇 2、千万不要掉以轻心，知识点都很重要学好基础才能学好后面就业班的内容 3、养成良好的习惯，逐渐适应学习强度，进入学习状态 1.2 打字要求 课程信息 课程时长：5分钟 课程名称：打字要求 课程详情 1、练习英文打字 100字/min 2、安装金山打字通后记得多练习使用 3、每人安装一个有道词典（不管多好的英语都建议安装） 1.3 文件、文件夹的一些设置 课程信息 课程时长：10分钟 课程名称：文件夹基本设置 课程详情 1、win7与win8打开显示后缀名的方式不同； 2、图片有.jpg，安装软件有.exe为例； 3、使用文件夹查看，任务栏设置； 4、每天课前做好相关准备， 上课前建立好每天课程资料代码的文件夹， 做一个有条理的人 1.4 计算机常用快捷键 课程信息 课程时长：15分钟 课程名称：计算机常用的快捷方式 问答与练习 计算机的常用快捷键有很多，大家要多尝试和使用 Top 课程内容 1、常见的浏览器 2、Web标准（重点） 3、html基本认识：骨架格式、标签分类、标签关系（重点） 4、常用的开发工具 5、html常用的基本标签：标题标签、段落标签、图像标签、链接标签（重点） 6、路径（重点、难点） 7.几种列表 2.1 认识网页 课程信息 课程时长：6分钟 课程名称：认识网页.avi 问答与练习 我们是通过什么把网页上的这些丰富多彩的东西展示给大家的？ 2.2 常见的浏览器 课程信息 课程时长：6分钟 课程名称：常见的浏览器.avi 问答与练习 1、主流的浏览器都有哪些？ 2、我们主要用的浏览器又是什么？ 2.3 浏览器的内核 课程信息 课程时长：7分钟 课程名称：浏览器的内核.avi 问答与练习 1、常见的浏览器是哪些？用的都是什么内核？ 2、用途是什么？ 2.4 WEB标准 课程信息 课程时长：6分钟 课程名称：WEB标准.avi 问答与练习 1、WEB标准的三大构成？（每人需熟记） 2.4 HTML初识 课程信息 课程时长：6分钟 课程名称：HTML初识.html 问答与练习 1、html标签必须要用<>括起来！就是用来标识网页上的文字、图片等等的。 2、什么是Html？ 2.5 HTML骨架 课程信息 课程时长：5分钟 课程名称：HTML骨架.avi 问答与练习 <html> <head> <title>页面标题</title> </head> <body> 页面主体 </body> </html> 2.6 我的第一个页面及及其标签简介 课程信息 课程时长：6分钟 课程名称：我的第一个页面及其标签简介.avi 问答与练习 1 html标签： 根节点。 2 head标签： 作用：用于存放： title,meta,base,style,script,link 注意在head标签中我们必须要设置的标签是title 3.title标签： 作用：让页面拥有一个属于自己的标题。 4.body标签： 作用：页面在的主体部分 3.1 八戒记忆法 课程信息 课程时长：4分钟 课程名称：八戒记忆法.avi 问答与练习 3.2 什么是标签及其分类 课程信息 课程时长：7分钟 课程名称：什么是标签及其分类.avi 问答与练习 Html类型分为两种，哪两种 换行标签：<br /> 段落标签：<p></p> 图片标签：<img src=“”width=“”height=“”alt=“”title=“”> 3.3 标签嵌套和并列关系 课程信息 课程时长：4分钟 课程名称：标签嵌套和并列关系.avi 问答与练习 标签的关系分为两种，哪两种？<head> <title></title></head><body></body> 3.4 简单小测验 课程信息 课程时长：2分钟 课程名称：简单小测验.avi 问答与练习 请问下列哪个标签是错误的？ A <head></head><body></body> B <strong><div></div></strong> C <head><title></head></title> D <body><div></div></body> 4.1 开发工具 课程信息 课程时长：6分钟 课程名称：开发工具.avi 问答与练习 1、基础班我们用Sublime 2、就业班我们用WebStorm 4.1 sublime生成html骨架 课程信息 课程时长：3分钟 课程名称：sublime生成html骨架.avi 问答与练习 1、html：5 快速生成 2.！快速生成 4.2 doctype文档类型 课程信息 课程时长：3分钟 课程名称：doctype文档类型.avi 问答与练习 1、什么是doctype？ 2.doctype具体的作用？ 4.3 字符集 课程信息 课程时长：5分钟 课程名称：字符集.avi 问答与练习 1、UTF-8和GBK的不同点？ a、Utf-8:收录是全世界所有的语言中的文字。 b、Gb2313:收录了汉字，片假名。 c、大小：Utf-8>gbk 性能：Uft-8<gbk 2、只需要记住一点！！我们以后统统使用UTF-8 4.4 标签语义化及其标题标签 课程信息 课程时长：6分钟 课程名称：标签语义化及其标题标签.avi 问答与练习 什么是标签语义化： 就是合适的地方给个最合理的标签。 标题标签： <h></h> h1-h6 称为标题标签。 5.1 段落标签及水平线标签 课程信息 课程时长：5分钟 课程名称：段落标签及水平线标签.avi 问答与练习 段落标签：<p></p> 水平线标签：单标签 <hr /> 5.2 课堂练习-新闻页面 课程信息 课程时长：4分钟 课程名称：课堂联系-新闻页面.avi 问答与练习 要求记住每个标签的含义自己独立完成案例 5.3 换行和div以及span标签 课程信息 课程时长：6分钟 课程名称：换行和div以及span标签.avi 问答与练习 <br /> 换行标签 <div></div> 称为盒子标签 <span></span> 文字标签 5.4 文本格式化标签 课程信息 课程时长：9分钟 课程名称：文本格式化标签.avi 问答与练习 <b></b><strong></strong>文字以加粗的方式显示 <i></i><em></em>文字以倾斜的方式显示 <s></s><del></del>文字以加删除线的方式显示 <u><u><ins></ins>文字加下划线的方式显示 6.1 标签的属性 课程信息 课程时长：7分钟 课程名称：标签的属性.avi 问答与练习 1、标签可以拥有多个属性必须写在开始标签中位于标签名之后。 2.属性和属性之间部分先后顺序属性和属性之间用空格分开。 3.任何标签的属性都有默认值省略该属性则取默认值。 6.2 图像标签 课程信息 课程时长：9分钟 课程名称：图像标签.avi 问答与练习 <img src=“”alt=“” title=“”width=“”height=“”border=“”/> Src设置图片路径 alt当图像不能正常显示替换的文本 title鼠标悬停时显示的内容 width 图像宽度 height：图像高度 border图像边框。 属性我们通常通过css来设置，所以大家简单的了解下就可以辣！！ 6.3 链接标签 课程信息 课程时长：9分钟 课程名称：链接标签.avi 问答与练习 1、链接标签：<a href =“地址”target=“”></a> 外部链接需要添加类似http://www.baidu.com完整的地址 内部链接直接链接内部页面。 空链接以#代替 不仅可以创建文本图片 表格 音频 视频等都可以创建链接 Targer打开页面窗口方式 _blank 打开新窗口 _self 在原来窗口之上 6.4 锚点定位 课程信息 课程时长：6分钟 课程名称：锚点定位.avi 问答与练习 1、跳转本页面锚点（href=“#id名”） 6.5 base标签 课程信息 课程时长：4分钟 课程名称：base标签.avi 问答与练习 1、base标签设置统一打开方式 6.6 特殊字符 课程信息 课程时长：5分钟 课程名称：特殊字符.avi 问答与练习 特殊字符大家不要去记住每一个，用到时候查一下就可以了！！ 7.1 注释标签 课程信息 课程时长：4分钟 课程名称：注释标签.avi 问答与练习 1、<!-- --> 2.快捷键：ctrl+/ 7.2 相对路径（一） 课程信息 课程时长：6分钟 课程名称：相对路径.avi 问答与练习 1、图像文件和html文件在一个文件夹下直接输入文件名即可。 2.图像文件位于html文件的下一级在文件夹之间用“/”隔开即可 3.图像文件位于html文件上一级在文件夹之间“../”即可 7.3 相对路径（二） 课程信息 课程时长：5分钟 课程名称：相对路径（二）.avi 问答与练习 相对路径的三种写法 a、如果页面与图片在同一目录下面 直接src='2.jpg' b、如果页面在图片一上级目录 <img src=”image/2.jpg” /> 7.4 无序列表的使用 课程信息 课程时长：5分钟 课程名称：无序列表的使用,avi 问答与练习 无序列表的使用 1、<ul> <li></li> </ul> 7.5 无序列表注意事项 课程信息 课程时长：2分钟 课程名称：无序列表注意事项.avi 问答与练习 1、ul下的直接子元素就是li不能放其他元素。 无序列表会有默认属性。都是通过css来设置样式的。 7.5 有序列表 课程信息 课程时长：3分钟 课程名称：有序列表.avi 问答与练习 有序列表的使用： <ol> <li></li> </ol> 7.5 四大名著案例 课程信息 课程时长：7分钟 课程名称：四大名著案例.avi 问答与练习 学会每个列表的特点。 然后独立完成案例！！ 7.5 自定义列表 课程信息 课程时长：6分钟 课程名称：自定义列表.avi 问答与练习 学会每个列表的特点。 然后独立完成案例！！ 7.5 总结 课程信息 课程时长：3分钟 课程名称：总结.avi 问答与练习 今天的内容就这么多，没有掌握的童鞋晚自习好好复习哦！！ $$