版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
网站的制作与美化打造非遗文化视觉盛宴课堂小测1.下列关于网站制作的步骤，按正确顺序排列的是哪一项？（
）
A.设计网站结构
→
素材准备→编写HTML代码
→
测试网站
→
发布网站
→
网站维护B.素材准备→编写HTML代码
→
设计网站结构
→
测试网站
→
发布网站
→
网站维护C.设计网站结构
→
编写HTML代码
→
素材准备→发布网站
→
测试网站
→
网站维护D.素材准备→编写HTML代码
→
测试网站
→
设计网站结构
→
发布网站
→
网站维护2.以下关于引用数据合法性的说法，正确的是（
）A.只要数据看起来真实，就可以直接引用，无需考虑来源B.引用数据时，必须确保数据来源可靠，并且经过合法授权C.从网络上随意复制粘贴的数据可以直接用于网站，无需注明引用来源D.只要数据是公开的，就可以随意引用，无需考虑版权问题课堂小测3.在制作非遗文化网站时，需要收集大量的图片、文字、音频和视频素材。以下关于素材管理的说法中，哪一项最合理？（
）A.收集到的所有素材可以直接存放在一个文件夹中，便于快速查找。B.不同类型或不同主题的素材分别存放在不同的文件夹中，便于管理和查找。C.素材的命名和存放方式无关紧要，只要素材内容完整即可。D.所有素材都应该存放在一个公共云盘中，方便团队成员随时访问，无需分类。4.以下工具中，哪一种最适合用于网页代码的编辑？（
）A.AdobePhotoshopB.WPSC.VSCodeD.AdobePremierePro5.以下文件格式中，哪一种是网页文件的标准格式？（
）
A.PDFB.HTMLC.DOCXD.JPEG
网页编辑制作不仅是一项技术，更是一种将数据融入传播工具的艺术。在完成顶层规划和前期准备后，如何制作并美化非遗文化网站呢?本节我们将一起创建、编辑和美化网页，打造非遗文化视觉盛宴!学习目标1.能够列举HTML语言常见标签并描述其作用。2.能够利用在线网页编辑工具和HTML语言创建和编辑网页。3.能够对网页进行美化。壹
创建网页一、创建网页HTML是一种用于创建和设计网页的标准标记语言。浏览网页时，人们看到的文字、图片、音频、视频等内容都是通过HTML语言来设计和组织的。HTML语言通过一系列标签来定义网页的结构和内容。一、创建网页网站内容需求描述<html></html>表示整个HTML文档的开始和结束<head></head>表示HTMI文档头部的开始和结束<title></uide>定义文档的标题，显示在浏览器的标题栏或标签页上<h1></h1>定义页面的最高级别标题<p></p>定义页面的最高级别标题<body></body>表示文档的主体内容的开始和结束一、创建网页HTML标签分为单标签和双标签两类。单标签由一个标签构成，独立完成特定功能，格式为<标签名>，如换行标签<br>和图片标签<img>。双标签由开始标签和结束标签组成，格式为<标签名>内容<标签名>，例如标题标签<title>标题名称</title>。HTML代码<html><title>科技节——人工智能绘画</title><body><h1>飞驰的火车</h1><imgsrc='AI-001.png'><ahref='https://***'>更多AI绘画作品</a></body></html>一、创建网页多个双标签之间存在包含关系和并列关系。HTML代码<html><title>科技节——人工智能绘画</title><body><h1>飞驰的火车</h1><imgsrc='AI-001.png'><ahref='https://***'>更多AI绘画作品</a></body></html>一、创建网页HTML代码<html><title>科技节——人工智能绘画</title><body><h1>飞驰的火车</h1><imgsrc='AI-001.png'><ahref='https://***'>更多AI绘画作品</a></body></html>浏览器获得网页代码后，就会按照这些代码的要求，显示相应的文字、图像等，进而呈现出完整的网页效果。活动一：代码探秘任务:利用在线网页编辑器创建网页1.布局网页版面(1)按照图中的操作步骤，通过插入表格进行页面排版，便于固定图片和文字的位置。任务:利用在线网页编辑器创建网页(2)采用相同的方法，在正文部分插入一个1行2列的表格，用于放置图片和文字。任务:利用在线网页编辑器创建网页2.填充内容:在表格的对应位置添加文字和图片。任务:利用在线网页编辑器创建网页3.保存网页:将在线网页编辑工具生成的网页保存为HTML文件，使用VSCode代码编辑器打开，查看HTML代码及标签，尝试理解各标签的作用。小贴士HTML表格的基本结构由<table>、<tr>、<th>和<td>标签组成。<table></table>:定义表格的开始和结束。<tr></tr>:定义表格的一行。<th></th>:定义表格的表头单元格，通常显示在表格的第一行或第一列，文字默认加粗且居中。<td></td>:定义表格的普通单元格，用于存放数据。属性border用于设置表格的边框宽度，如<tableborder="1">表示设置边框宽度为1像素。贰
编辑网页二、编辑网页
在HTML中，插入图片常用的标签是<img>，它是一个空标签(即没有结束标签)。图片标签属性作用src指定图片的路径或URL，告诉测览器从哪里加载图片alt提供图片的替代文本，当图片无法显示时，浏览器会显示这个文本width设置图片的宽度height设置图片的高度<imgsrc="image.jpg"alt="示例图片width="500"height="300">二、编辑网页
使用VSCode网页编辑器打开HTML文件，找到<img>标签的语句，将sre的源目标改为图片的地址，可以修改图片的尺寸。二、编辑网页
在HTML中，<img>标签的src属性用于指定图片的地址，可以使用相对地址或绝对地址。
相对地址是指图片相对于当前HTML文件的路径。例如，src="./pic/lq1.ipg"表示图片位于当前HTML文件所在目录下的pic文件夹中。
绝对地址则是完整的网络路径，例如src="/image.jpg"。二、编辑网页
超链接是网页的重要功能，有助于互联网资源相互连接。HTML中的超链接由<a>标签实现，<a>标签用于创建页面间或页面内位置的跳转。其基本语法为:<ahref="链接目标">链接文本</a>，其中href属性指定链接的目标URL,或页面中的具体位置。HTML代码<html><title>科技节——人工智能绘画</title><body><h1>飞驰的火车</h1><imgsrc='AI-001.png'><ahref='https://***'>更多AI绘画作品</a></body></html>任务:为非遗文化网站的页面导航设置超链接1.了解非遗文化网站的文件组织结构，获取文件的路径，如果homepage是网站的根目录，那么首页文件的超链接代码为<ahref="index.html">首页</a>。任务:为非遗文化网站的页面导航设置超链接2.在网页中创建导航栏(如图3-3-7所示)，使用HTML的<a>标签为导航文字添加超链接。例如，“首页”链接到index.html,“传统民俗”链接到festival.html。代码示例如图所示。确保所有页面的导航栏都包含正确的超链接，实现页面间的互联，构建完整的网站结构。任务:为非遗文化网站的页面导航设置超链接3.完成超链接设置后，使用浏览器打开网页，检查导航栏中的链接是否能正常跳转至目标页面。叁
美化网页三、美化网页
合理的配色方案能够提升网页的吸引力。那么，如何美化非遗文化网页?三、美化网页
可以通过为网页设置背景颜色、透明度和背景图片等方式美化网页。网页中的颜色可用十六进制颜色代码(如#080)、RGB值(如rgb(240,248,255))或预定义的颜色名称(如lighiblue)表示。如果不知道颜色对应的值，可以利用在线颜色配色器进行查找。三、网页编辑的工具
在HTML中，可以在<body>标签的<style>样式中使用background-color属性设置背景颜色，background-image属性设置背景图片，opacity属性设置透明度。opacily取值范围为0.0到1.0，0.0表示完全透明，1
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026年采购经理招聘笔试题集与答案解析
- 2026年安徽江淮汽车集团股份有限公司公开招聘工作人员4名笔试备考题库及答案解析
- 2026浙江舟山岱山县岱东镇公开招聘从事公益性岗位人员考试备考试题及答案解析
- 2026浙江宁波海发渔业科技有限公司招聘1人考试备考试题及答案解析
- 2026上半年云南事业单位联考曲靖市马龙区遴选3人 （含遴选计划）笔试备考题库及答案解析
- 2026南光集团校园招聘考试备考试题及答案解析
- 2026年嘉兴市南湖区人民医院招聘事业单位工作人员94人考试备考题库及答案解析
- 2026上半年贵州事业单位联考贵州中医药大学招聘2人笔试参考题库及答案解析
- 2026湖南长沙市雨花区长塘里第三小学春季合同制教师招聘考试备考题库及答案解析
- 2026济南能源集团资源开发有限公司招聘（15人）笔试模拟试题及答案解析
- 2025至2030中国超高镍正极材料市场经营格局与未来销售前景预测报告
- 2025至2030中国立体定向仪行业产业运行态势及投资规划深度研究报告
- 代办烟花爆竹经营许可证协议合同
- 中考语文文言文150个实词及虚词默写表（含答案）
- 国企员工总额管理办法
- 企业级AI大模型平台落地框架
- 常见传染病的预防与护理
- 苏教版六年级数学上册全册知识点归纳（全梳理）
- 2025年版个人与公司居间合同范例
- 中铁物资采购投标
- 泄漏管理培训课件
评论
0/150
提交评论