2022年Web程序设计大作业与课程论文

写这个主要是我们，那个Web前段开发设计的课采用的是大作业的方式，正好今天我期末结束，任务基本完工，整理下今年做的一些东西。

绿动出行企业门户的设计与实现

[TOC]

1.网站相关知识

1.1目录结构规范、各种标识符命名规范

建立一个好的前端应该具有一个好的目录结构，每个前端项目总是包含库、jQuery插件和大量的JavaScript脚本与CSS文件，以达到不同的目的和目标。我们需要将所有东西通过遵循一种模式或公约置入文件夹中，以此来保持清晰、整洁。这对我们而言是非常重要的

1. 整洁的结构：
   • CSS（主文件夹）这个文件夹包含了所有CSS文件。例如index.css可以对应控制index.html文件
   • image/img 存放所有的图片文件：.png、.jpg、.jpeg、壁纸等。
   • JS (主文件夹) 存放.js文件
   • media 存放多媒体文件 一般指视频与音频文件，在部分情况下可以分为多个媒体文件夹。

1.2文件名命名规范

文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。

引文件统一使用index.htm index.html index.asp文件名（小写） 各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称例如本系统中已经完成的login.html（登录页面）,about.html(关于我们)

1.3 HTML结构

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

一、常见HTML元素

1. 盒子模型
   • 块级标签：<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>
   • 内联标签：<a>/<input/>/<img/>/<sub>/<sup>/<textarea>/<span>
2. 特殊字符：<> ש
3. 图像标签：<img src="" width="" height=""/>
4. 表格：<table><tr><td></td></tr></table>
5. 表单：<form><lable for="A"></lable><input type=””placeholder=”” name=”A” id=”A” pattern=””/></form>
6. 列表：<ul><li></li></ul><ol><li></li></ol><dl><dt><dt></dd></dd></dl>
7. 音频：<audio></audio>
8. 视频：<video></video>
9. 浮动框架：<iframe></iframe>

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。在2012年已经形成稳定版本。

• 全新结构元素：
  • 头部标签：<header></header>
  • 导航栏标签：<nav></nav>
  • 底部标签：<footer></footer>

1.4 CSS层叠样式表

层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

一、CSS3

CSS3是CSS层叠样式表技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块

使用方式：包括内联方式，嵌入方式，链接方式，导入方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得代码难以维护。

嵌入方式的 CSS 只对当前的网页有效，当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

链接方式这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

在本次的项目中，由于导师所做要求，暨整个网站有一外部CSS文件控制所有页面的统一样式，每个页面的个别样式采用内部CSS。所以同时采用了以上三种使用方式。

• CSS选择器：
  • 标签选择器（全局）、类选择器（最多）、id选择器（锚点）
  • 通配符选择器
  • 并集选择器、交集选择器、后代选择器
  • 伪类选择器 :first-child,:last-child,nth-of-type(n)
  • 伪元素选择器 :link :hover :visited
• 字体样式：
  • 字体大小：font-size
  • 字体：font-family
  • 字体粗细：font-weight
• 文本外观
  • 文本颜色：color
  • 文本行间距：line-height
  • 文本对齐方式：text-align
  • 首行缩进：text-indent:2em;
  • 标识文本溢出：text-overflow:ellipsis;
  • 文本格式：text-decoration: underline;
• 背景：
  • 背景颜色：background-color
  • 背景图片：background-image
  • 背景图像平铺：background-repeat:no-repeat;
  • 背景图像位置：background-position:center center;
  • 背景图像固定：background-attachment:fixed;
  • 背景图像大小：background-size:cover/ % %;
• 表单：
  • 接收并处理表单数据的服务器程序的地址：action=”#”
  • 提交方式：method=”post”
  • 表单名称：name=””
  • 表单控件form、select控件、textarea控件
• 视频/音频：
  • 自动播放：autoplay:autoplay;
  • 结束重新开始：loop:loop;
  • 缓冲不足连接一个图像：poster:url();
  • 静音播放：muted
  • 显示按键：controls:controls;
• CSS媒体查询
  • 媒体查询旨在为不同的设备（显示器、平板电脑、手机等）定义不同的样式规则，使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。

1.5 JavaScript和JQuery动态

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

jQuery 是一个 JavaScript 库，也是一个JS文件。 JQ中封装实现了很多方法，让使用变得更加简单不再像js那样需要使用大量的方法调用。但JQ也只是实现了一些方法，还有些没有实现，因此能够使用JQ是实现的，JS都能做，但是能够用JS做的，JQ不一定能够实现。

2.网站的设计与实现

2.1 index.html

• 头部和导航栏：

  在整个项目中Header及footer的内容都是一致的，增加了代码的复用性，又增强了整个网页格式的统一。

  在index页面中，存在整个项目唯一的nav元素，主要原因在于在实现过程中，我将Header元素用作链接整体，就淡化了<nav>标签的作用。

  可以注意到在第二行右侧，出现了几个圆形图标，在这里是引入iconfont.ttf图标文字库代替图标图片。因为目前为止项目后端并没有完成，班列定制，APP下载等功能并没有进行开发。

• banner块布局

  在这一块引入了内嵌的JS代码做了一个简单地JS动态窗口，具体体现就是在banner块的中央位置插入了我一句比较喜欢的名言，也是我博客上所展示的"从来没有真正的绝境, 只有心灵的迷途",“Never really desperate, only the lost of the soul”。

  Banner块的底部通过CSS修饰，通过button按钮，页内超连接，与img图片属性制作出一个向下开启绿色生活的跳转样式。

  2.1 绿动出行主业

• 主体DIV块布局

  该页面主题我采用了三列的弹性盒，在左右两栏通过CSS的:hover 选择器设置，鼠标悬停效果和动画，在鼠标选中时，通过css动画将原本置于页面左右两侧，背景和字体颜色都通过RGBA设为透明的两个块，通过transition: all 0.5s ease-in 0s;以及改变透明度的方式呈现出动画效果

  中间列，通过JS与JQ实现了一个多图轮播机制，通过index.js代码进行控制实现页面的展示效果的增强。

  2.2 多图轮播页面

• Footer页面设置

  在footer页面展示稍微少一些，这边我实际上只是采用了表格和图片进行了样式修饰，没有太多的其他效果。

• 全页效果

  页面采用了css3媒体查询的方式，在窗口大小过小时整体会呈现出一个单列布局（图2.1-3 在手机端单列布局的展示），采用<source>标签进行背景音频的播放。

  

  2.3 媒体查询下效果

2.2 project.html

2.4 project.html 这个页面因为一些对老师要求的理解失误，这个页面便采用的是外部链接样式+内部CSS样式上，通过cards和card标签为下方图片增加卡片效果，同时也采用了一些简单的媒体查询，会在屏幕大小较小是将其改为单列图片。

2.3 about.html

这一个页面也是整体多是CSS做的显示内容，通过背景和容器两层标签的使用，在container块中依次通过居中，设置内边距与外边距完成整体的样式设计。使背景正好覆盖整个页面的上半部分，文字和视频部分居中。

图2.5 关于我们页面 #### 2.4 login.html

这一个登录和注册页面其实并没有采用表单，只是通过修饰的两列输入栏，通过内置的js代码进行匹配，当鼠标点击对应位置时js代码段对content标签进行验证，将其改为对应的显示。

图2.6 登录页面 #### 2.5 information_acquisition.html

这个页面实际上是最初没有的，到现在也跟整个项目有些格格不入，在这个页面内，通过表格和表单嵌套使用做出整体美观的显示，之后通过HTML代码和JS代码进行输入验证。

• HTML验证:

  由于HTML5有很多全新的表单控件，比如input type=“email” ，在这些控件在进行HTML代码会自动对其进行合法性验证，同时在不具备自动验证的块，通过设置正则表达式完成对块数据的验证如：pattern="^[\u4e00-\u9fa5]{0,}$"这就是一个判断是否为中文的验证。

• JS输入验证：

  因为是临时赶工做出来的页面，我对其要求也有所降低，JS验证是通过在每个需要进行验证的输入栏后面设置一个空的块，块里不赋值，在点击注册后表单通过onsubmit="return validateForm()"将数据传递给页面内的js validateForm()函数对其进行空值验证。

2.6 user.html

这个页面也是在最后跟老师的实验要求进行对比后再补充的一个页面，具体采用了列表加浮动框架的方式进行设计，在列表左侧为链接栏目，通过在链接栏中选择页面，会加载到右侧的浮动框架中。

3 总结

这个站点实际上是我大一初学web前段的目的，当时我和其他几位同学一起参加挑战杯，这个站点和其相应功能是当时没有完成制作出来，虽然现在为止，比如班列定制等功能也没有写出来，至少在前段展示上比当时好了很多。

另一方面在这一次我其实参考了不少的企业页面，因为这个是一个正经的参加挑战杯和大创的项目介绍，不能做到类似于博客，很多花式的前段效果在这个页面上其实不是很合适。也有很多不够圆满的地方，比如project页面，那四个cord块实际应该链接到项目提供的四项功能，但是两年过去，这些地方还没写完…

最后呢，是对老师要求的一些理解失误，比如说那个使用以个外部CSS文件，在后面与老师交流时，刘老师表示是至少一个外部CSS文件而我理解成了只能使用一个外部CSS文件，这是不符合正常的程序设计原则的…所以导致我采用了一种外部CSS样式存储如header，footer，body等标签样式，每个页面中的具体采用的则交给内部CSS样式进行控制。

写在最后，这个大作业还是费了很多力气的，主要是因为老师那些神奇的要求，这边也把本次老师要求附上…

1、网站内容丰富（包括各种类型的内容：文本、图像、音频、视频等）、功能完备（至少有五个栏目）。（20分）
2、HTML代码结构清晰、规范（至少主页包括HTML5新增的结构元素）。（16分）
3、整个网站有一外部CSS文件控制所有页面的统一样式，每个页面的个别样式采用内部CSS。（CSS代码书写规范，选择器使用及代码书写顺序合理）（16分）
4、网站整体采用HTML+CSS方式布局页面（至少在一个页面采用浮动框架、至少在一个页面采用多列弹性盒、至少在一个页面使用CSS表格），页面布局合理。（18分）
5、网站至少包含一个表单页面，表单页面中至少有一个输入栏位采用JS进行合法性验证，并采用pattern。（16）
6、至少包含一个动画（CSS）或动态窗口（JS）或CSS响应式设计，至少在一页页面上设置动态样式。（8分）
7、目录结构规范、文件名命名规范、各种标识符命名规范。（6分）

这玩意因为我一开始也没怎么考虑这些内容，然后…看见这个之后大改…