第17课 制作网页展活动 课件（内嵌视频） 2025-2026学年人教版初中信息科技七年级全一册_第1页
第17课 制作网页展活动 课件（内嵌视频） 2025-2026学年人教版初中信息科技七年级全一册_第2页
第17课 制作网页展活动 课件（内嵌视频） 2025-2026学年人教版初中信息科技七年级全一册_第3页
第17课 制作网页展活动 课件（内嵌视频） 2025-2026学年人教版初中信息科技七年级全一册_第4页
第17课 制作网页展活动 课件（内嵌视频） 2025-2026学年人教版初中信息科技七年级全一册_第5页
已阅读5页，还剩17页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

制作网页展示活动——设计个人数字名片目录01情境导入：什么是个人数字名片？02温故知新：常用HTML标签03核心实践：制作个人数字名片05总结作业：课堂小结常见HTML标签<html>HTML文档的根标签，所有其他标签都嵌套在其中，定义了整个HTML文档。<head>包含文档的元数据，如网页标题、字符编码等，这些信息不会直接显示在网页的正文区域。<title>定义网页的标题，显示在浏览器的标题栏或标签页上，也用于搜索引擎优化。<body>包含网页的所有可见内容，如文本、图片、链接等，是网页的主体部分。根标签标题标签头部标签主体标签常见HTML标签<h1>HTML中最大的标题标签，通常用于显示最重要的内容，如姓名或主标题。<p>用于定义段落的标签，适合展示详细的文本信息，如个人简介或经历描述。<img>用于在网页中嵌入图片的标签，必不可少的元素，常用于展示头像或作品展示。<br>单标签，用于在文本中强制换行，让排版更加清晰易读。标题标签图片标签段落标签换行标签什么是个人数字名片？在线展示个人信息集成姓名、头像、职位等核心身份标识，打造专业形象。多维信息呈现不仅限于联系方式，更可展示个人简介、兴趣爱好与作品集。高效社交连接打破传统交换方式，通过数字链接快速分享，促进深度交流。制作数字名片网站需要哪些步骤？数字名片网站制作流程01确定主题明确核心信息，如个人简介、爱好、联系方式等，确立名片定位。02搜集素材准备个人高清头像、姓名、个人简介、爱好描述等图文素材。03确定结构规划页面布局，确定标题、头像位置及文字排列方式。04制作网页使用HTML标签编写代码，搭建数字名片的基本框架结构。05美化网页使用CSS样式调整背景、字体、图片样式，提升视觉美观度。06发布网站将制作好的网页文件上传至服务器，让更多人访问你的数字名片。活动1：数字名片核心信息头脑风暴明确核心信息，学会筛选与互评活动目标明确个人数字名片的核心信息，学会筛选有价值的展示内容，为后续设计打下基础。活动步骤个人思考：列出基础身份、个人标签、联系方式同桌互评：互相标注推荐/无需/可精简，最终确定8-10条核心信息。活动小结数字名片的信息要简洁、有特色、贴合个人定位。通过互评，我们能发现自己忽略的亮点或冗余的信息。制作个人数字名片（1）代码实现(HTML)<html><head><title>简单的个人介绍</title></head><body><imgsrc="/tos-cn-i-a9rns2rl98/07072b76a317459ba02e5f775d022311.png~tplv-a9rns2rl98-image.png?lk3s=8e244e95&rcl=202603101104444BB7915C9208251DF27A&rrcfp=dafada99&x-expires=2089335885&x-signature=dcHipRTQFvDZEh2NYL3PJ5lIceA%3D"width="150"><h1>张三</h1><!--普通文字介绍--><p>大家好，我是张三，很高兴认识大家！</p></body></html>制作个人数字名片（1）——效果预览活动2：数字名片纸面布局设计掌握页面布局，为代码编写打基础活动目标掌握数字名片的页面布局思路，确定各元素位置关系，将抽象代码转化为直观设计。个人创作在方格纸绘制纸面原型，标注HTML标签和美化思路。设计草图示例✅技巧1：让文字/图片居中——align="center"核心原理只需在已掌握的标签（如h1,p,img）中添加align="center"属性即可实现居中效果。设计标注小技巧在设计稿上标注“居中”时，直接写上align="center"，方便后续编码对照。手写代码范例<h1align="center">李四</h1><palign="center">我的爱好：书法</p><imgsrc="头像链接"align="center">✅技巧2：加横线分隔内容——<hr/>核心原理：分隔模块•<hr/>是“水平线标签”，属于单标签，无需闭合。•常用于分隔名片的不同模块（如姓名与简介），让结构更清晰。基础写法：姓名下方加横线<h1align="center">李四</h1><hr/><!--姓名下方加横线--><palign="center">我的爱好：书法</p>进阶优化：自定义宽度与居中代码：<hrwidth="220"align="center">效果：生成一条220px宽、居中显示的横线，视觉更精致。纸面标注小提示在设计稿“要加横线的位置”画横线，并写上<hr/>，方便后续对照开发。技巧3：给内容加边框——style="border:...;"核心原理：3个关键属性border(边框样式)border:2pxsolid#999;(宽度、样式、颜色)padding(内边距)padding:20px;(让内容不紧贴边框，呼吸感)margin(外边距)margin:0auto;(配合宽度让模块居中显示)常用范例：给名片加外框<!--给头像加边框--><imgsrc="头像链接"style="border:3pxsolid#999;"><!--给整个名片加外框（核心！）--><divstyle="border:2pxsolid#333;width:350px;padding:20px;margin:0auto;"><!--这里放所有名片内容--></div>设计小提示：在设计稿“要加边框的区域”画框，标注样式代码。✍️动手实践：制作你的专属数字名片步骤1：纸面设计布局规划：在练习本上画出名片草图标注居中：确定位置并写下align="center"标注线条：画出横线并标注<hr/>标注边框：画出框线并标注style="border..."步骤2：手写代码内容替换：填写姓名、班级、爱好等个人信息代码实现：正确书写居中、横线、边框代码添加注释：用<!--注释-->标注每部分含义📝完整范例：带居中/横线/边框的数字名片index.html<html><head><title>我的个人数字名片</title></head><body><divstyle="border:2pxsolid#333;width:350px;padding:20px;margin:0auto;"><imgsrc="头像链接"width="150"align="center"style="border:3pxsolid#999;"><h1align="center">李四</h1><hrwidth="220"align="center"><palign="center">大家好，我是李四</p></div></body></html>AI辅助制作个人数字名片智能描述生成向AI模型描述您的设计需求，无需复杂代码基础，即可快速生成原型。效率显著提升自动化生成代码，减少繁琐的手动编写工作，让创意快速落地

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论