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