实训1 VSCODE的安装与环境配置（必做，权重10%）
实训2 HTML 多媒体网页实践（选做）
实训3 HTML表单登录与验证实践（必做，权重10%）
实训4 用CSS制作新闻列表（选做）
实训5 用CSS美化个人简历（必做，权重10%）
实训6 在个人简历中插入视频播放器（必做，权重10%）
实训7 制作轮播图定时器（必做，权重10%）
实训8 个人网页UI设计（必做，权重10%）
实训9 响应式网页设计（必做，权重10%）
实训10 HTML网页上传和测试实训（必做，权重10%）
实训11 完成个人网站制作（选做）
平时学习行为（权重10%）
实训12 利用AI生成个人网站（必做，权重10%）
下载以后，上传文件到对应任务即可
下方为题目演示，上方支付后即可获取答案下载链接
实训1 VSCode的安装与环境配置
1. 实训目的
掌握Visual Studio Code（VSCode）的安装步骤与前端开发环境配置。
2. 实训内容
Visual Studio Code简称VSCode，2015年由微软公司发布。可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如 C++，C＃，Java，Python，PHP，Go），内置功能非常丰富、插件全且安装简单、轻量。在本实训中，需要掌握VSCode的下载、安装步骤，以及学习如何正确安装Web开发所需的相关插件。
3. 实训要求
实训前认真复习本章内容，特别是第1.4节Web编程的工具与环境。按照实训步骤完成VSCode的下载、安装与配置，同时记录实训过程中遇到的问题和所采取的解决办法。
4. 实训条件
（1）实验设备：计算机一台。
（2）工具：VisualStudio Code。
（3）其他：笔，实训报告纸。
5. 实训步骤
（1）准备工作。检查实训所需计算机是否能够正常运行，是否能够接入互联网。
（2）Windows版本VSCode的下载与安装。
（3）VSCode的开发插件安装
实训2 HTML 多媒体网页实践
1. 实训目的
本实训的目的是让学生学会如何使用HTML标记嵌入多媒体内容，如图片、音频和视频等，进一步掌握网页制作的技巧和能力。
2. 实训内容
本实训的内容主要包括以下几个方面：
嵌入图片：使用<img>标记嵌入图片，并设置图片的属性，如宽度、高度、边框等。
嵌入音频：使用<audio>标记嵌入音频，并设置音频的属性，如音频文件地址、自动播放等。
嵌入视频：使用<video>标记嵌入视频，并设置视频的属性，如视频文件地址、自动播放、控制条等。
使用多媒体标记实现网页设计：通过以上的操作，制作一个包含图片、音频和视频的多媒体网页。
3. 实训要求
学生需要掌握HTML基本语法和多媒体标记的使用方法，熟悉常见的属性设置和标记组合方式。同时，学生需要注意网页的结构和语义化标记的使用，以提高网页的可读性和搜索引擎优化效果。最终实现一个多媒体网页，并提交相关代码和文档。
4. 实训条件
（1）实验设备：计算机一台。
（2）开发工具：VisualStudio Code。
（3）其他：笔，实训报告纸。
5. 实训步骤
（1）规划网页结构和内容
（2）创建HTML文档
（3）添加多媒体内容
（4）进行测试和调试
6. 大模型辅助实现
使用大模型来辅助生成代码可以极大地提高编码的效率，本教材采用ModelScope平台的CodeLlama34B大语言模型生成代码（网址为
https://modelscope。cn/studios/codefuse-ai/CodeFuse-CodeLlama34B-MFT-Demo/summary）。
构造prompt是使用大模型生成代码最重要的环节。Prompt 是一个输入文本，用于指导模型生成相关的输出。当构造 Prompt 时，关键是清晰地表达你期望模型完成的任务或生成的内容。需要定义明确的任务或需求，以便模型了解你需要什么样的代码。此外，还应该尽可能提供上下文信息，例如已有的代码段、变量名称、函数名称、注释等。以本实训为例，可以构造如下的prompt:
请通过HTML标记嵌入多媒体内容，如图片、音频和视频等。代码的具体要求如下：
（1）编写HTML代码，包括DOCTYPE声明、<html>标签、<head>标签和<body>标签等基本元素。
（2）在<body>标签中，添加多媒体内容，包括图片、音频和视频等。使用<img>标签插入图片，使用<audio>标签插入音频，使用<video>标签插入视频。
（3）为每个多媒体元素添加合适的属性和值，如src、alt、controls等。
（4）使用HTML，设计合适的网页布局。使用<div>标签创建容器。
Prompt输入输出页面如图2-10所示，在位置1设置输出结果的长度设置，位置2输入相关提示内容，位置3是发送按钮。输出结果参见位置4。
image.png
Prompt输入输出页面
实训3 HTML表单登录与验证实践
1. 实训目的
本实训旨在让学员掌握HTML表单的基本知识，了解表单元素的常见属性和验证方法，掌握如何使用表单实现用户登录和数据验证的功能。
2. 实训内容
本实训包括以下内容：
● HTML表单基础知识
● 表单元素的常见属性和用法
● 数据验证方法和实例
● 用户登录表单实现
● 数据验证表单实现
3. 实训要求
学员需要具备HTML基础知识，包括HTML基本结构和常用标记，能够独立编写简单的HTML网页。此外，还要求学员能够熟练掌握表单元素的基本使用方法，了解数据验证的实现原理，并能够自主完成一个基本的登录表单和数据验证表单。
4. 实训条件
（1）实验设备：计算机一台。
（2）开发工具：VisualStudio Code。
（3）其他：笔，实训报告纸。
5. 实训步骤
（1）创建HTML文档和基本页面结构
（2）添加登录表单
（3）验证表单
（4）测试表单
6. 大模型辅助实现
使用大模型来辅助生成代码可以极大地提高编码的效率，本教材采用ModelScope平台的CodeLlama34B大语言模型生成代码（网址参见实训2）。
实训4 用CSS制作新闻列表
1. 实训目的
通过实践用CSS制作新闻列表，培养学生的CSS布局和样式化能力，提升他们对Web页面设计的理解和实践经验。
2. 实训内容
学生将使用CSS来设计和样式化一个新闻列表页面，包括新闻标题、摘要、发布日期等。使用CSS选择器选择和定位新闻列表中的各个元素。调整文本样式、背景颜色、边框等来增强页面的可读性和美观性。
3. 实训要求
学生具备基本的CSS选择器、优先级知识。
学生具备调整文本样式、背景颜色、边框等的基本能力。
4. 实训条件
学员需要有一台安装了文本编辑器的计算机，例如Windows上的Notepad或Mac上的TextEdit。同时，学员还需要有一个支持HTML网页运行的浏览器，例如Chrome、Firefox或Safari等。
5. 实训步骤
（1）创建HTML文件：学生需要创建一个基本的HTML文件，包含所需的新闻列表结构。
（2）连接CSS文件：在HTML文件中添加CSS样式表的链接。
（3）设计新闻列表结构：使用HTML标签（如<ul>、<li>等）构建新闻列表的基本结构，如新闻类型、新闻标题、新闻内容等。
（4）应用CSS样式：使用CSS选择器为新闻列表中的各个元素应用样式，包括文本样式、背景颜色、边框等。
6. 大模型辅助实现
本实训仍然采用 ModelScope_平台的CodeLlama34B 大语言模型生成代码，具体步骤可参考实训2。
使用大模型来辅助生成代码可以极大地提高编码的效率和质量，减少了编写初始代码的时间。对于教育和学习目的，大模型生成的代码可以帮助新手开发者学习最佳实践和编程范式，但是由于大模型的理解能力有限，因此需要人为对输出结果进行优化：
（1）仔细审查生成的CSS代码，查找潜在的错误或不完善之处。
（2）考虑代码的简洁性和可读性，合并重复的样式，去除不必要的样式。
（3）在最终提交之前测试生成的CSS代码，确保它在不同浏览器下都能正常工作，并且没有显示问题。
实训5 用CSS美化个人简历
1. 实训目的
通过实践用CSS美化个人简历，培养学生的CSS样式化能力，使其能够设计出具有吸引力和专业性的个人简历页面，提升他们的Web设计和前端开发技能。
2. 实训内容
学生将使用CSS来美化个人简历页面，包括设计布局、选择合适的颜色和字体、调整文本样式、添加动画效果等。实训内容涵盖以下方面：
（1）使用CSS选择器选择和定位简历中的各个元素。
（2）设计简历布局，包括头部、个人信息、工作经历、教育背景、技能等部分。
（3）调整字体、颜色、行距等来提升简历的可读性和美观性。
（4）添加适当的边框、阴影和背景颜色来突出重点内容。
3. 实训要求
学生具备基本的CSS选择器、优先级知识。
学生具备调整文本样式、背景颜色、边框等的基本能力。
4. 实训条件
（1）实验设备：计算机一台。
（2）开发工具：VisualStudio Code。
（3）其他：笔，实训报告纸。
5. 实训步骤
（1）创建HTML文件：学生需要创建一个基本的HTML文件，包含个人简历的基本结构和内容。
（2）连接CSS文件：在HTML文件中添加CSS样式表的链接。
（3）设计简历布局：使用HTML标签和CSS样式来设计简历的整体布局和结构。
（4）应用CSS样式：使用CSS选择器为简历中的各个部分和元素应用样式，包括字体、颜色、行距、背景等。
添加样式细节：为简历添加适当的边框、阴影和背景颜色来增强视觉效果。
实训6 在个人简历中插入视频播放器
1. 实训目的
（1） 掌握在网页中插入视频，并通过JavaScript进行视频播放控制的基本方法。
（2） 提升个人简历网页的吸引力和动态效果，展示关于个人综合实力的视频内容，突出个人技能和经验。
2. 实训内容
能在网页中实现完整的视频播放，显示视频时长，显示播放进度条，能实现视频的暂停和进度条的拖拽。
3. 实训要求
（1）学生需要具备HTML基础知识和JavaScript基础知识，并具有使用相关开发工具的能力，如文本编辑器、浏览器、调试工具等
（2）使用JavaScript编写代码，实现在个人简历网页中嵌入视频播放器的功能。
（3）视频播放器应具备良好的用户体验，易于操作和浏览。
（4）通过实训，掌握JS的基本使用方法和基本语法，掌握JS中对事件的应用。
4. 实训条件
（1）实验设备：计算机一台。
（2）工具：VisualStudio Code。
（3）其他：笔，实训报告纸。
5. 实训步骤
（1）在个人简历网页的适当位置（例如技能部分、项目经验部分等）选择一个合适的位置插入视频播放器的容器元素。可以使用HTML标签，例如<div>来创建一个容器。
（2）在网页的合适位置添加一段JavaScript代码，用于创建和控制视频播放器。
（3）准备您想要展示的视频内容。确保视频内容与实训相关，并且展示您的技能和经验。
（4）根据需要，调整视频播放器的样式和布局，以适应个人简历网页的设计和美观性。可以使用CSS来定制播放器的外观，例如使用style.width和style.height属性设置播放器容器的大小；使用style.backgroundColor属性来更改视频容器的背景颜色。
实训7 制作轮播图定时器
1. 实训目的
通过使用JavaScript制作轮播图定时器，实现在网页中展示多张图片，并自动切换图片的效果，增加网页的动态性和吸引力。
2. 实训内容
制作轮播图定时器，每隔一秒钟切换一张图片，在图片切换的同时，切换图片下方的文字，当最后一张图片播放完成后，重新播放。
3. 实训要求
通过实训，掌握DOM元素操作的基本方法，掌握定时器的使用方法。
4. 实训条件
（1）实验设备：计算机一台。
（2）工具：VisualStudio Code。
（3）其他：笔，实训报告纸。
5. 实训步骤
（1）在HTML文件中创建一个容器元素，用于显示轮播图。可以使用<div>标签，并为其设置一个唯一的ID属性，例如<div id="slideshow">。
（2）在CSS文件中定义轮播图容器的样式，包括宽度、高度、背景颜色等。您可以使用CSS选择器和属性来实现样式定义。
（3）在JavaScript文件中，使用document.getElementById方法获取轮播图容器的引用，并将其保存在一个变量中。
（4）创建一个包含多张图片链接的数组。每个链接都代表一个要展示的图片。
（5）使用setInterval函数创建一个定时器，设置图片自动切换的时间间隔。
（6）创建一个nextImage函数，用于切换到下一张图片。在nextImage函数中，将获取到的图片链接设置为轮播图容器的背景图。
（7）在网页加载完成后，调用nextImage函数一次，以显示初始的第一张图片。
（8）为轮播图容器添加鼠标事件监听器，以实现鼠标悬停时暂停播放，鼠标离开时重新开始播放的功能。
6. 大模型辅助实现
本实训仍然采用 ModelScope_平台的CodeLlama34B 大语言模型生成代码，具体步骤可参考实训2。
实训8 个人网页UI设计
1. 实训目的
本实训的目的是加深学生对HTML结构的理解、帮助学生更好地理解网页布局的原理和实现方法。使学生学习网页布局的常用技巧，培养学生良好的布局思维。
2. 实训内容
本实训的内容主要包括以下几个方面：
（1）使用HTML语言构建网页的结构，包括标题、导航栏、内容区域等。
（2）使用CSS样式设置网页的布局，包括网格布局、弹性布局等。
（3）使用CSS样式设置网页的外观，包括颜色、字体、背景等。
3. 实训要求
（1）学生需要具备HTML的基础知识和使用CSS样式表来进行网页布局的能力。
（2）学生需要熟练掌握常用的网页布局技巧，如网格布局、弹性布局等。
（3）设计过程中注重用户体验和界面美观，合理选择颜色、字体和布局风格。
4. 实训条件
（1）实验设备：计算机一台。
（2）工具：VisualStudio Code。
（3）其他：笔，实训报告纸。
5. 实训步骤
（1）分析和规划网页的整体结构和布局
（2）使用HTML构建网页的骨架
（3）使用CSS样式表设置网页的布局和外观
（4）检查和测试网页的兼容性和响应式布局
6. 大模型辅助实现
本实训仍然采用 ModelScope_平台的CodeLlama34B大语言模型生成代码，具体步骤可参考实训2。
实训9 响应式网页设计
1. 实训目的
本实训的目的是让学生学会借助第三方的前端框架Bootstrap，优化页面的设计及实现一些高级功能。需要掌握Bootstrap环境安装、基本元素的使用，了解高级插件的使用，从而实现响应式网页的设计。
2. 实训内容
本实训的主要内容包括以下几个方面：
登录页面的设计：使用Bootstrap框架的按钮、标签及文本框设计一个登录界面。
页面的跳转：可以通过登录界面，填写用户名、密码点击登录按钮，可通过超链接等方式跳转到另一个界面。
个人介绍页的设计：通过使用Bootstrap框架中的基本元素、导航栏及轮播等设计一个尽可能多的使用框架中技术的个人介绍页的界面。
3. 实训要求
要求学生掌握Bootstrap框架和VSCode的结合，即在VSCode工具中引入Bootstrap框架，并熟练使用框架的基本元素及一些基本插件，了解高级插件的使用。最后通过使用此框架设计一个带有登录界面的个人介绍的前端网站。
4. 实训条件
（1）实验设备：计算机一台。
（2）工具：Visual Studio Code。
（3）其他：笔，实训报告纸。
5. 实训步骤
(1) 设计一个登录页面
使用Bootstrap中的label、input、超链接及button等标签，设计一个可以跳转的登录界面。
(2) 设计个人介绍页
此页面的设计主要涉及导航栏（可以设计多个模块），使用轮播插件可以展示自己的照片等。尽可能多的使用Bootstrap框架中的功能，学生可以自由发挥，设计出富有个性的个人介绍页。
实训10 HTML网页上传和测试实训
1. 实训目的
本实训旨在帮助学生掌握 HTML 网页的上传和测试技能。通过实践操作，学生将学习如何将自己设计的网页上传到服务器上。
2. 实训内容
（1）通过实际操作学习如何使用Git 工具或托管平台的 Web 界面，将设计好的HTML 网页文件上传到托管服务的仓库。
（2）配置托管服务仓库的相关设置，包括默认分支和自定义域名。
（3）学习等待托管服务进行构建和部署网站的过程，了解构建所需的时间和流程。
(4) 在不同浏览器和设备上进行网站测试，确保页面正常显示且各功能正常工作。
3. 实训要求
（1）应具备HTML网页设计的基础知识和技能。
（2）应具备基本的网页测试和维护意识。
4. 实训条件
（1）实验设备：计算机一台。
（2）开发工具：VisualStudio Code。
（3）其他：笔，实训报告纸。
5. 实训步骤
（1）准备工作
在开始实训之前，确保已经设计好了一个基本的 HTML 网页，并且选择一个合适的托管服务，例如 GitHub Pages 或其他在线托管平台。
（2）文件上传
将设计好的 HTML 网页文件上传到托管服务的仓库中。使用 Git 工具或托管平台提供的 Web 界面进行上传。确保上传的文件包括 HTML、CSS、JavaScript 等所有相关文件。
（3）设置托管服务
针对选择的托管服务，配置仓库的相关设置，包括默认分支、自定义域名等。如果使用 GitHub Pages，可以在仓库的 "Settings" 中找到"Pages" 选项进行配置。
（4）等待构建和部署
托管服务将开始构建和部署你的网站。这可能需要一些时间，具体取决于网站的大小和复杂性。
（5）访问你的网站
一旦构建完成，你可以在托管服务提供的链接中找到你的网站。默认情况下，GitHubPages 提供一个链接，类似于 https://username.github.io。
（6）进行测试
在不同的浏览器和设备上测试你的网站，确保页面在各种情况下正常显示。测试网站的链接是否能够正确打开，检查所有链接、图像和交互元素是否正常工作。
实训11 制作个人网站
1. 实训内容
通过学习HTML5知识、CSS知识、静态网页设计、网页上传和测试、网页维护等知识，完成个人网站的整体规划、设计和制作，并完成网站的发布。
2. 实训要求
参考综合案例，做好需求分析，明确网站设计整体流程，完成个人网站制作。
实训12 利用AI生成个人网站
1. 实训内容
使用AI自动生成工具如科大讯飞星火或GhatGPT生成与实训11类似的个人网站，比较两者异同。
2. 实训要求
做好需求分析，明确网站设计整体流程，完成个人网站制作。
评论0