网页设计与制作代码意思-（课程）HTML+CSS+JavaScript网站设计与开发

1 课程主题

基于HTML+CSS+JavaScript的网站设计与开发

2.课程设计目的

通过本课程的设计，学生需要掌握Web前端开发技术的基本技能和专业能力，培养学生以下技能：

知识目标：复习和巩固Web前端基础知识，进一步加深对Web前端技术的理解和掌握；

能力目标：了解网站设计的四个阶段：网站前期准备、网站结构、网站效果设计和网站人机交互，并综合运用HTML、CSS、JavaScript等技术开发网站；

素养目标：课程设计为学生提供动手、动脑相结合的自主实践机会，将课本理论知识与实践有机结合，培养学生分析和解决实际问题的能力。 培养学生的团队合作精神、创新意识和项目开发能力。

三、选题依据和内容

我现在做的是一个我想做的MIUI 10官方网站。 我是根据小米原来的MIUI 10官网的设计来制作的，然后加入了自己的想法。 这个网页的制作包括了我们学过的浮动、定位、JavaScript等知识，以及一些我们没有学过的知识。 当我制作自己的网页时，它并不像我想象的那么简单或困难。 从最初的困惑到最后的完成，我在网上查了很多知识和操作，也在书本上查找资料。 那些问题的解决方案。 通过动手实践，我感觉自己有点喜欢敲代码了。 我感到一种成就感。 我巩固了所学的知识，学到了更多有趣和难的方法。

以下是我选择的四个页面，分别是MIUI 10主页、MIUI 10介绍子页面、登录注册页面和下载页面。

4 设计流程 4.1 总体设计

我认为要建立一个网站，首先要了解它的网页设计步骤：

书写步骤：

4.2 详细设计 4.2.1 MIUI官网 1、总体分析

2. 本地分析

(1)分析效果图

网页的标题是选项卡通形象，以及主页面和子页面的超链接。确定

要在表单中定义它，您需要在表单外添加一个大框。

(2)准备图片材料

根据原网页观察网页设计与制作代码意思，背景图片为黑色，因此不需要图片素材。 您只需将框的背景颜色定义为黑色，并且每个

设置单元格并插入导航栏。

(4)控制方式

设置单元格的宽度和高度。 并且 padding.Text 设置为超链接

"">;当鼠标点击单元格时，单元格的背景色变为红色，超链接的格式也被清除。

(1)分析效果图

MIUI10大海报。

(2)准备图片材料

从原始网页捕捉到其原始比例。

(3)构建结构

在html page.definition中添加结构代码

框内，将海报按照原网页的比例放入里面，并添加一个下载页面的超链接。

(4)控制方式

将盒子和海报图像设置为居中并定位在中心。

(1)分析效果图

首页的三个栏目页面分别跳转到不同的页面。

(2)准备图片材料

从原始网页中的链接下载。

(3)构建结构

将结构代码添加到 html 页面。 首先定义一个最大的盒子，里面有三个小盒子，并将它们向左浮动，使小盒子并排排列。 在每个框中放入相应的图片和内容，并添加超链接以跳转到相应的内容。

(4)控制方式

设置单元格的宽度和高度。 以及padding。文本设置为超链接； 当鼠标点击单元格时，单元格的背景颜色变暗，超链接的格式也被清除。

(1)分析效果图

包含原始网站 URL 和个人信息

(2)搭建结构

在html页面中添加结构代码。定义一对

控制框的标签。

(3)准备图片材料

没有任何

(4)控制方式

控制框的宽度和高度，以及填充和边距以将信息和版权居中

4.2.2 小米账号登录/注册

(1)分析效果图

网页的标题是选项，以及主页面和子页面的超链接。确定

要在表单中定义它，您需要在表单外添加一个大框。

(2)准备图片材料

根据原网页观察，背景图片为黑色，因此不需要图片素材。 您只需将框的背景颜色定义为黑色，并且每个

里面的字体颜色是#666（白色）。

(3)构建结构

在html页面中添加结构代码。两对定义head

标签、内联和

设置单元格并插入导航栏。

(4)控制方式

设置单元格的宽度和高度。 和填充。 文本设置为超链接“">； 当鼠标点击单元格时，单元格的背景颜色变成红色，超链接的格式也被清除。

1 分析效果图

构建一个大盒子剧集背景图像。 大盒子嵌套一个小盒子，然后小盒子里面有多个盒子，登录界面风格写成表格形式。 插入小图标和超链接。

2 准备图片材料

准备小图标图片和大背景图片

3 构建结构

在html页面中添加结构代码。两对定义head

标签、内联和

要设置单元格，请插入按钮。

4种控制风格

设置单元格的宽度和高度。 和填充。 文本全部设置为超链接； 当鼠标点击某个单元格时，该单元格的背景颜色由白色变为黑色，同时超链接的格式也被清除。 使用type和value使用手机号登录注册。

使用js语言来控制，如果鼠标离开输入字段时没有输入，则在网页上弹出相应的提醒（见上图效果）。

4.23 MIUI 10

1、总体分析

2. 本地分析

1 分析效果图

网页的标题是选项，以及主页面和子页面的超链接。确定

要在表单中定义它，您需要在表单外添加一个大框。

2 准备图片材料

根据原网页观察，背景图片为黑色，因此不需要图片素材。 您只需将框的背景颜色定义为黑色，并且每个

里面的字体颜色是#666（白色）。

3 构建结构

在html页面中添加结构代码。两对定义head

标签、内联和

设置单元格并插入导航栏。

4种控制风格

设置单元格的宽度和高度。 和填充。 文本设置为超链接“">； 当鼠标点击单元格时，单元格的背景颜色变成红色，超链接的格式也被清除。

1 分析效果图

网页上的宣传海报，带有指向MIUI 10宣传视频的超链接。

2 准备图片材料

按照原网页的比例进行剪切，并从原网页下载视频。

3 构建结构

将结构代码添加到 html 页面。 使用框来控制海报的大小和位置。

4种控制风格

设置单元格的宽度和高度。 以及内边距填充和外边距。

1 分析效果图

MIUI 10的特色之一，白噪音式介绍轮播

2 准备图片材料

按照原网页的比例进行抓取。

3 构建结构

将结构代码添加到 html 页面。 使用框来控制海报的大小和位置。

4种控制风格

设置单元格的宽度和高度。 以及内边距填充和外边距。 使轮播图片按要求显示在网页上。 使用js控制图像旋转的速度和方式。

1 分析效果图

MIUI 10各项功能介绍与分析

2 构建结构

在html页面中添加结构代码。定义一对

控制框的标签。 为框中对应的功能添加图片和文字介绍。

3 准备图片材料

通过截取并下载原始网页网页设计与制作代码意思，得到与原始网页同比例的图像。

4种控制风格

控制框的宽度和高度以及填充。 同时，注意文字与图片的和谐，通过边距、字体样式不断调整。

1 分析效果图

MIUI 10运行效率评测视频以及小米AI在现实生活中应用的便捷性介绍。

2 构建结构

在html页面中添加结构代码。定义一对

控制框的标签。 将视频和文字介绍插入框中的视频标签中。 注意：添加视频时视频标签的IE兼容性有问题。 还必须添加控制和循环控制。

3 准备图片材料

从原网页下载相应的视频。

4种控制风格

控制框的宽度和高度以及填充。 同时，注意文字与视频的和谐，通过边距、字体样式不断调整。

1 分析效果图

包含原始网站 URL 和个人信息

2 构建结构

在html页面中添加结构代码。定义一对

控制框的标签。

3 准备图片材料

没有任何

4种控制风格

控制框的宽度和高度，以及填充和边距以将信息和版权居中

4.24 MIUI 10下载页面

1. 总体介绍

2. 部分介绍

1 分析效果图

网页的标题是选项，以及主页面和子页面的超链接。确定

要在表单中定义它，您需要在表单外添加一个大框。

2 准备图片材料

根据原网页观察，背景图片为黑色吉祥物设计，因此不需要图片素材。 您只需将框的背景颜色定义为黑色，并且每个

里面的字体颜色是#666（白色）。

3 构建结构

在html页面中添加结构代码。两对定义head

标签、内联和

设置单元格并插入导航栏。

4种控制风格

设置单元格的宽度和高度。 和填充。 文本设置为超链接“">； 当鼠标点击单元格时，单元格的背景颜色变成红色，超链接的格式也被清除。

1 分析效果图

主要内容包括各个机型的MIUI 10的下载标题栏和下载跳转链接（为了和谐，最后添加了一个视频来填补空白）。

2 准备图片材料

下载从原网页源码获得的图片下载链接，视频由网易云提供。

3 构建结构

在html页面中添加结构代码。定义多个对

控制上、中、下框的标签。

4种控制风格

需要调整盒子的嵌套以及盒子的内外边距，以达到页面整体居中的样式。

1 分析效果图