学堂在线部分网课笔记---Web设计与应用

最新推荐文章于 2022-02-14 21:36:15 发布

子曰礼

最新推荐文章于 2022-02-14 21:36:15 发布

阅读量1.2k

点赞数

分类专栏：杂乱的笔记文章标签：前端 bootstrap html

本文链接：https://blog.csdn.net/weixin_45792414/article/details/122644088

版权

杂乱的笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学堂在线部分网课笔记

Web设计与应用

Web设计与应用

第六章敏捷的前端框架

6.2.1 bootstrap响应式布局（一）

Sublime Text是一个代码编辑器。

容器

在页面中添加布局容器是使用bootstrap栅格系统的的基本前提。

非固定宽度

.container-fluid：全屏（100%宽度），占据全部viewport的容器

<div class="container-fluid">...</div>

固定宽度

.container：用于固定宽度并支持响应式布局的容器，元素居中显示

<div class="container">...</div>

Viewport

viewport是用户网页的可视区域，翻译为中文可以叫做“视区”。通俗的讲，移动设备上的viewport就是设备屏幕上用来显示我们网页的那一块区域。

viewport的作用是什么？

这个标签的主要作用是使网页的显示效果针对移动设备进行优化。

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes, initial-scale=1.0, maxium-scale=5.0, minimun-scale=1.0">

width:

控制viewport的大小，可以指定一个值，如600，或者特殊的值，如device-width（代表设备的宽度，单位是缩放为100%时的css像素）。
device-width：屏幕宽度，表示视区宽度与屏幕实际宽度相同。

height：

和width相对应，指定高度。

user-scalable：

用户是否可以手动缩放。

initial-scale：

初始缩放比例，即当页面第一次load时缩放的比例。

maxium-scale：

允许用户缩放到的最大比例。

minimun-scale：

允许用户缩放到的最小比例。（0.25-10.0）

栅格布局

Bootstrap提供了一套响应式、移动设备优先的流式栅格布局，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

行（row）必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过行（row）在水平方向上创建一组列（column）。

你的内容应当放置于列（column）内，并且，只有列（column）可以作为行（row）的直接子元素。

栅格系统中的列十通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-lg-4来创建。
请添加图片描述

6.2.2 bootstrap响应式布局（二）

使用.col-md-offset-类可以将列向右侧偏移

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm- 元素到已经存在的 .col-sm-* 元素内
请添加图片描述

6.3 bootstrap常用样式—表单

from-group（表单组）

表单中的逻辑结构单元
在使用响应式布局时，表单组会发挥类似于网格系统中“row”的作用

from-control（作用于input、textarea、select）

宽度变成了100%
设置了一个浅灰色的圆角边框
为控件设置了设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
设置了placeholder的颜色

水平显示：

表单默认显示风格为垂直显示

在< form>元素是使用类名“form-horizontal”。
配合Bootstrap框架的栅格系统。

基本按钮和默认按钮的实现方式：

<button class="btn" type="button">我是一个基本按钮</button>
<button class="btn btn-default" type="button">默认按钮</button>

<Input>标签
<button>标签
<a>标签
<span>标签
<div>标签

强烈建议尽可能使用< button>元素来获得在各个浏览器上相匹配的绘制效果。

在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现，在使用过程中，开发者只需要选择不同的类名即可。

6.4 Bootstrap常用样式—导航栏

Bootstrap框架中制作导航条主要通过“.nav”样式。“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。
请添加图片描述

标签形导航：

请添加图片描述
标签形导航，也称选项卡导航。

标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名。

.active：默认选中。

.disable：禁用导航的某些部分。

胶囊式（pills）导航：

外形看起来像胶囊。
请添加图片描述
实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”。

制作垂直堆导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可。

自适应导航：

自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元一样自适应宽度。
请添加图片描述
在制作自适应导航时更换了另一个类名“nav-justified”。当然需要和“nav-tabs”或者“nav-pills”配合在一起使用。

面包屑导航：

面包屑（Breadcrumb）一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。
请添加图片描述

6.5 bookstrap常用样式—轮播插件

在bookstrap中我们使用Carousel组件来实现轮播效果，一个标准的轮播插件由三部分来构成。
请添加图片描述

容器元素：

请添加图片描述

幻灯片：

请添加图片描述

轮播指标：

请添加图片描述

轮播控件：

请添加图片描述

第七章动态网站开发利器—Spring MVC

7.1 欲善其事—MVC之Java语言简介

java是一种面向对象的编程语言

面向对象：一种把数据和操作汇集于对象的编程范式。

java也是一个平台

源程序编译成字节码文件后，在JVM（Java虚拟机）上运行
宣称跨平台特性：一次编写，到处运行。

java平台=JVM + API

java平台有多个版本： Java SE，Java EE，Java ME等。

请添加图片描述

程序中定义类（Class）

类用来描述同类事物共同的属性和行为。类是对象的模板，对象是类的实例。

定义类中的成员变量和成员方法等。

成员变量：保存对象的状态数据。

成员方法：实现对象行为。

在成员方法中根据程序的需要书写各种语句。

main()方法是程序的入口，包含该方法的类称为主类。

请添加图片描述

方法体内可以有变量声明语句、表达式、返回语句、……等多种语句。

表达式是由操作数和运算符构成的式子，具有特定计算的意义。

.eg. 1+2 、Math.PI 、new Circle() 、c1.area()

方法体内的语句默认是顺序执行的——顺序结构，使用if或for语句能够带来选择结构和循环结构。

请添加图片描述

包（package）：

包是用于组织类型的容器，类型属于一个包。类似于目录中可以包括子目录和文件，包中可以有子包和类型。

包名通常用逆序点分域名的形式，例如com.abc

创建一个包：用package语句作为源代码的第一条语句，例如“package com.abc;”

类型的简单名称和完成限定名（FQN）

System和java.lang.System

除java.lang外的外部包中的类型，用FQN，或者用import语句后使用简单名称。

.eg. import java.util.List;

import java.util.*;

注解

注解提供“元数据”支持

metadata：data that provides information about other data

注解能够给类、方法、参数等增加描述性的属性

注解能在编译或运行时被提取和使用

例如，下面的注解在编译时会使用：

@Deprecated：类或方法具有该注释则表示已经过时建议不要使用。

@Override：用在方法上，编译器会检查该方法是否真的是覆盖父类的方法或者实现接口的方法，如果不是，则会报告编译错误。

7.2 Web开发环境介绍

基于Spring MVC的动态网站开发：

JDK—提供Java编译语言/平台
eclipse—开发动态网站项目的IDE
Maven—项目管理
Spring MVC，Spring Boot，……

Maven：

项目管理工具，可以简化项目管理

最重要特性：项目依赖，项目构造。

项目依赖：直接或间接地使用其他组件。

项目构建：构建绝不仅仅是编译。

7.3 动态网站的原理和开发技术

请添加图片描述

服务器端动态页面：

通常是由服务器端运行的脚本语言所创建的动态页面。

客户端动态页面：

通常是在客户端运行的脚本语言对页面内容的修改。

HTTP：

HTTP（Hypertext Transfer Protocol），超文本传输协议——浏览器和服务器间无状态的请求/响应协议

请添加图片描述

URL：

URL：Uniform Resource Locator 统一资源定位符

URL：Uniform Resource Identifier 统一资源描述符

请添加图片描述

多个查询参数用&间隔

例如：a=123&b=456

7.4 Spring MVC编程模型

http：Web的奠基石，规范Web的应用层协议

Servlet：生成动态内容的Java Web组件，使用Java语言面向Web编程，HttpServlet抽象类，doGet/doPost等方法。

Spring Web MVC：一个Java Web开发框架，以DispatcgerServlet为核心，将请求分发（dispatch）到处理器（Handler），根据处理器的返回结果解析视图、渲染视图并得到回复。

请求处理流程：

请添加图片描述

Spring Boot启动

Mapped “{{/hi}}” onto public String DynamicWeb.sayHi(…)
使用浏览器访问

http://localhost:8080/hi?username=Jack
DispatcherServlet通过HandlerMapping得知调用sayHi()方法

username参数值为Jack，model参数值为一个隐含的模型对象。
sayHi()方法向模型中加入数据

model.addAttribute()加入username属性，值为Jack
sayHi()方法返回逻辑视图名称sayHi
ViewResolver在template目录中定位sayHi.ftl文件，返回视图
视图渲染，把$(username)替换为Jack，渲染结果为HTML
渲染的HTML文档作为回复返回浏览器