当前课程知识点：软件开发实训--动态网站开发 > 1 前端需求分析 > 1.3网站首页分析 > 1.3.1网站首页分析

返回《软件开发实训--动态网站开发》慕课在线视频课程列表

1.3.1网站首页分析在线视频

下一节:1.3.2首页分析PPT

返回《软件开发实训--动态网站开发》慕课在线视频列表

1.3.1网站首页分析课程教案、知识点、字幕

同学

你好

欢迎回到软件开发实训课堂

上节课咱们对做网站的需求分析

或者叫软件的需求分析

做了一个简单的介绍

那么这节课咱们就来看一看

对于网站前端首页

我们如何来进行分析

首页往往是一个网站的门脸

网站能不能吸引客户

首页非常的重要

它起着关键的作用

那么首页也能够让客户去完整地了解

你这个网站具体都有哪些内容

能够给客户留下的第一个印象就是首页

那么首页该怎么去分析呢

根据前面我们对整体的网站分析

把网页以行和列的形式进行布局

那么首页也不例外

我们用行和列对它进行分析

首先我们要找出首页要放哪些内容

在我们的参考网站里

首页它包括了导航菜单

还有幻灯片

产品的介绍

关于公司以及公司的公告

那么还有一些logo

滚动的内容

解决的方案

搜索引擎的入口

最下面就是版权

这是首页所涵盖的所有的内容

你要把这些内容全部放到网页上去

那么如何放

那么在这里需要你担任设计师

那么设计美工

通常情况下会把这些各界面的

美观宽高等等属性交给你

当然了内容布局的位置也会教给你

当你拿到了设计师给你的原始的图形时

你需要分析每一个区域的各个属性

从而去实现它

那么实现它就要用到我们的H5

CSS

JavaScript等等这些技术

所以针对于每一个内容该如何去实现

该如何去布局

css用到了哪些

你都要去想一想

把它都要分析一下

有一个清晰的认识

根据我们对参考网站的分析

可以看出来参考网站

它有三行

但中间一行它分了四列

通过这四个列

来展示出网站的主要内容

而导航放在了顶部

可以看到顶部

设计师给出的高度

是85个px

而菜单的高度

25个px

这些数据都是由设计图来的

网站的logo

60px

它放的位置

你都要把它一个一个的找出来

这样就决定了你实现网页时

CSS该如何去写

幻灯片的区域也给出了高度

但这里要注意没有给出宽度来

就是说内容根据高度来进行布局

宽度用总宽来决定

间隔也给出了一个五个像素的间隔

这包括顶部区域和幻灯片之间的间隔

以及我们在内容区域列之间的间隔

所以这样分析以后

你对CSS的编写就有了基本的概念

有了这些基本的框架以后

你就可以继续细化中间的内容了

这里边对滚动区域

也就是我们最左边的内容区

它有搜索

有滚动

再滚动区给出了宽和高

以及背景色

这样你再写CSS的时候就很明确了

背景色是什么

宽是什么

高是什么

只要把它写出来

定义出来就可以了

还有搜索引擎的位置

给出了高度没给出宽度

通常情况下

就是完整的宽度就可以了

区域的间隔

也就是说

我们的滚动区域

搜索区域

公告区域

它们之间可以有一些间隔

而这些间隔的距离就是十个像素的

在看网站的

具体的内容区域和图片区域

它图片区有一个高度

85

注意这三个图片它是一样的高度

还有图片下边的标题是30个高

最后确定

标题区前景色和背景色

让整个界面看起来更加漂亮一些

有了这些个数据

你的整个首页

就可以通过CSS html来实现了

那么具体每一个的实现

我们会在实现的时候讲解

最后我们再来看看

底部内容和区域内容

区域内容

它有一个宽度

这个宽是相等的

三个区域一样

也就是我们标题区下面的

再一个间隔中

线

间隔两边都有线

你要注意

只有一个像素的线宽

用的是实线

而且颜色是这个颜色

最后底部有高度为69

内容要居中

还有它的背景是一张图片

而不是颜色

也就是给你提供了一个裁剪图片的任务

你要拿设计师设计好的这些图片

把你需要的都给它裁剪出来

这个就是我们有关首页的一个简单的分析

从这里我们找出了

html标签需要哪些

CSS需要写哪些属性

从而给我们实现我们的首页

提供了一些基本的信息

当然要完整地实现我们这些功能

还需要我们后续的内容

好

这节课就讲到这里

我们下节课再见

软件开发实训--动态网站开发课程列表：

1 前端需求分析

-1.1课程介绍

--1.1.1课程介绍

--1.1.2课程介绍PPT

--1.1.3随堂测试

-1.2网站需求分析

--1.2.2网站需求分析

--1.2.3需求PPT

--1.2.4随堂测试

-1.3网站首页分析

--1.3.1网站首页分析

--1.3.2首页分析PPT

--1.3.3随堂测试

-1.4导航菜单分析

--1.4.1导航菜单分析

--1.4.2课程PPT

--1.4.3随堂测试

-1.5内容区域分析

--1.5.1内容区域分析

--1.5.2课程PPT

--1.5.3随堂测试

-1.6内容副页面分析

--1.6.1副页面分析

--1.6.2课程PPT

--1.6.3软件系统需求分析

-1.7编写需求文档

-1.8需求分析理解

2 后端分析

-2.1后端页面总体分析

--2.1.1后端页面总体设计

--2.1.2课程PPT

--2.1.3随堂测试

-2.2用户管理功能设计

--2.2.1用户管理功能分析

--2.2.2课程PPT

--2.2.3随堂测试

-2.3内容与分类功能分析

--2.3.1内容与分类功能分析

--2.3.2课程PPT

--2.3.3随堂测试

-2.4网站配置功能设计

--2.4.1网站配置功能设计

--2.4.2课程PPT

--2.4.3软件系统设计

--2.4.4随堂测试

-2.5数据库及表结构分析

--2.5.1数据库及表结构分析

--2.5.2课程PPT

--2.5.3数据库设计

-总体设计文档

3 接口设计

-3.1前台模板约定

--3.1.1前台模板约定

--3.1.2课程PPT

--3.1.3随堂测试

-3.2网站配置接口设计

--3.2.1网站配置接口设计

--3.2.2课程PPT

--3.2.3随堂测试

-3.3菜单接口设计

--3.3.1菜单接口设计

--3.3.2课程PPT

--3.3.3随堂测试

-3.4内容接口设计

--3.4.1内容接口设计

--3.4.2课程PPT

--3.4.3随堂测试

-3.5幻灯片接口设计

--3.5.1幻灯片接口设计

--3.5.2课程PPT

--3.5.3随堂测试

-补充设计文档

-3.7接口设计

4 功能设计

-4.1用户管理功能设计

--4.1.1用户管理功能设计

--4.1.2课程PPT

--4.1.3随堂测试

-4.2菜单管理功能设计

--4.2.1菜单管理功能设计

--4.2.2课程PPT

--4.2.3随堂测试

-4.3内容管理功能设计

--4.3.1内容管理功能设计

--4.3.2课程PPT

--4.3.3随堂测试

-4.4网站配置信息设计

--4.4.1网站配置信息设计

--4.4.2课程PPT

--4.4.3随堂测试

-完成设计文档

-4.6随堂测试

5 环境搭建与开发

-5.1开发环境搭建

--5.1.1环境搭建

--5.1.2随堂测试

-5.2Web前端环境搭建

--5.2.1Web前端环境

-5.3创建用户实体

--5.3.1用户实体创建

--5.3.2随堂测试

-5.4用户实体表创建与初始化

--5.4.1用户实体表创建与初始化

--5.4.2随堂测试

-5.5用户数据访问接口实现

--5.5.1用户数据访问接口实现

--5.5.2随堂测试

-5.6环境搭建问题

-5.7环境搭建问题

6 用户管理功能实现

-6.1用户服务层接口实现

--6.1.1用户服务层接口实现

--6.1.2随堂测试

-6.2用户列表和编辑控制器实现

--6.2.1用户列表和编辑控制器实现

--6.2.2随堂测试

-6.3用户存储和删除控制器实现

--6.3.1用户存储和删除控制器实现

-6.4用户添加、编辑界面实现

--6.4.1用户添加、编辑界面实现

-6.5用户管理添加用户调试

--6.5.1用户管理添加用户调试

7 用户管理功能实现二

-7.1用户查询模板实现

--7.1.1用户查询模板实现

--7.1.2随堂测试

-7.2用户信息编辑的实现

--7.2.1用户信息编辑的实现

-7.3单个用户删除实现

--7.3.2单个用户删除实现

-7.4多个用户删除实现

--7.4.1多个用户删除实现

8 用户管理功能实现三

-8.1用户列表分页基本实现

--8.1.1用户列表分页基本实现

-8.2用户列表查询结果分页实现

--8.2.1用户列表查询结果分页实现

-8.3通用日期处理

--8.3.1通用日期处理

-8.4整型日期处理

--8.4.1整型日期处理

--8.4.2随堂测试

-8.5枚举数据的应用

--8.5.1枚举数据的应用

--8.5.2Spring Boot开发

9 后台主界面实现

-9.1登录逻辑实现

--9.1.1登录逻辑实现

--9.1.2随堂测试

-9.2登录界面及流程调试

--9.2.1登录界面及流程调试

--9.2.2随堂测试

-9.3管理主界面实现

--9.3.1管理主界面实现

--9.3.2随堂测试

-9.4授权验证拦截器实现

--9.4.1授权验证拦截器实现

--9.4.2随堂测试

-9.5拦截器调试

--9.5.1拦截器调试

10 分类管理实现

-10.1分类接口实现

--10.1.1分类接口实现

-10.2分类添加、编辑实现

--10.2.1分类添加、编辑实现

-10.3分类树结构实现

--10.3.1分类树结构实现

-10.4分类删除实现

--10.4.1分类删除实现

--10.4.2随堂测试

11 内容管理实现

-11.1内容实体定义

--11.1.1内容实体定义

-11.2相关接口定义

--11.2.1相关接口定义

-11.3服务接口实现

--11.3.1服务接口实现

-11.4内容添加、编辑模板实现

--11.4.1内容添加、编辑模板实现

-11.5内容添加、编辑控制器实现

--11.5.1内容添加、编辑控制器实现

-11.6内容检索页面实现

--11.6.1内容检索页面实现

-11.7内容分类树实现

--11.7.1内容分类树实现

12 UEditor富文本编辑器

-12.1修改UEditor相关问题

--12.1.1修改UEditor相关问题

-12.2整合UEditor到内容编辑界面

--12.2.1整合UEditor到内容编辑界面

-12.3UEditor图片对话框应用

--12.3.1UEditor图片对话框应用

-12.4文件上传问题处理

--12.4.1文件上传问题处理

13 网站配置管理实现

-13.1网站配置相关类实现

--13.1.1网站配置相关类实现

-13.2网站配置界面模板实现

--13.2.1网站配置界面模板实现

-13.3网站配置调试

--13.3.1网站配置调试

14 网站前端组件实现

-14.1网站首页布局实现

--14.1.1网站首页布局实现

-14.2菜单Vue组件实现

--14.2.1菜单Vue组件实现

--14.2.2随堂测试

-14.3幻灯片Vue组件实现

--14.3.1幻灯片Vue组件实现

-14.4滚动Vue组件实现

--14.4.1滚动Vue组件实现

--14.4.2随堂测试

-14.5滚动接口实现

--14.5.1滚动接口实现

-14.6滚动接口调试

--14.6.1滚动接口调试

-14.7幻灯片接口实现

--14.7.1幻灯片接口实现

15 网站前端页面实现

-15.1首页区域实现

--15.1.1首页区域实现

-15.2首页内容脚本实现

--15.2.1首页内容脚本实现

-15.3首页完善

--15.3.1首页完善

-15.4Vue组件放入单文件

--15.4.1Vue组件放入单文件

-15.5详细页面实现

--15.5.1详细页面实现

-15.6前端问题

16 测试与发布

-16.1网站测试介绍

--16.1.1网站测试介绍

--16.1.2课程PPT

-16.2功能测试

--16.2.1功能测试

--16.2.2课程PPT

-16.3打包发布

--16.3.1打包发布

-16.4部署运行

--16.4.1部署运行

--16.4.2随堂测试

1.3.1网站首页分析笔记与讨论

也许你还感兴趣的课程:

© 柠檬大学-慕课导航课程版权归原始院校所有，
本网站仅通过互联网进行慕课课程索引，不提供在线课程学习和视频，请同学们点击报名到课程提供网站进行学习。