个人应聘网站的设计与实现
时间：2023-10-13 10:42:01 | 来源：网站运营
时间：2023-10-13 10:42:01 来源：网站运营
个人应聘网站的设计与实现：
摘 要 随着“互联网+”模式的不断推广与普及，Web已经成为一种服务和开发的平台，从最初简单的信息发布逐渐演变成为系统，其中Web前端技术已经是互联网行业每个从业人员必须掌握的入门技术。
Web前端主流技术日新月异，HTML、CSS、JavaScript、jQuery等技术是制作网页必须的Web前端主流技术。全面掌握这些技术，可以提高自身对Web前端开发的效率，制作处更炫酷的网页，降低开发复杂度和开发成本。
经过分析，我们使用Visual Studio Code作为开发技术软件，利用HTML等技术，以CSS为主的网站架构，在短时间内建立一个个人应聘网站。
关键词 ：HTML，CSS，Web前段主流技术
目录
第一章 引言
第二章 概述
2.1网页开发概述
2.2HTML语言的产生
第三章 前端开发工具和相关技术
3.1HTML5前端开发工具选择
3.2Visual Studio Code的简介
3.3Visual Studio Code主要功能介绍
3.4HTML的基本结构 4
3.5css简介 4
第四章 个人应聘网页设计分析 5
4.1个人应聘网页设计总体思路 5
4.2分层开发 5
4.3代码编写 5
4.3内部测试与后续优化 5
第五章 网页设计模块和源代码 8
5.1页面设计及展示模块 8
5.1部分源代码展示及效果 8
1.快捷导航源代码展示和效果 8
2.网页头部源代码展示和效果 8
3.网页侧导航及中间部源代码展示和效果 9
结论 13
参考文献 14
致谢 15
第一章 引言
随着Internet的高速发展，越来越多的人开始习惯从互联网获取各种各样的信息,享受着网络带来的便利和办公的高效。例如：近期火热的抖音、快手、B站等平台提供了很多供个人使用的个人原创专区，这令到很多有着音乐梦想、短视频制作梦想的人，有了一个展示自己的舞台，而也正有不少人由于这样成就了自己的明星梦，有人用草根明星或者草根英雄这些字眼来形容这些人，不管草根明星还是草根英雄，都是以前未尝出现过的词语，平凡确实很难和英雄、明星联上关系，但真是这种平凡给人的亲切和真实感，才是他们巨大魅力的来源。说到这里我也来，在这虚拟的世界里找一下自己的梦想，建立一个自己的天地：一个属于自己应聘时可以使用的个人应聘网站。
第二章
概述
2.1网页开发概述
网站（Web Site）是按照一定的规则，使用HTML超文本标记语言等工具制作的、用于展示特定内容的相关网页（Web Page）的集合。网页是指在浏览器上登录一个网站后，看到的浏览器的网页由文字、图片、声音等多媒体通过超链接的方式有机组合起来的，也就是说网站是由很多网页组成的。
2.2 HTML语言的产生
HTML的全称是超文本标记语言，是用于描述网页文档的标记语言。现在我们常常习惯于用数字来描述HTML的版本例如：HTML5，但是最初的时候我们并没有HTML1，而是1993年IETF团队的一个草案，并不是成型的标准。两年之后，在1995年HTML有了第二版，即是HTML2.0，当时是作为RFC1866发布的。有了以上的两个历史版本，HTML的发展可谓突飞猛进。1996年HTML3.2成为W3C推荐标准。之后在1997年和1999年，作为升级版本的4.0和4.01也相继成为W3C的推荐标准。而在2000年基于HTML4.01的ISO，HTML成为了国际标准化组织和国际电工委员会的标准。于是被沿用至今，这期间虽然有点小的改动但大方向上终归没有什么变化。从1993-2000之间短的7年时间，HTML语言有着很大的发展，基于诸多人的努力，终于产生了我们现在用的HTML语言。
第三章 前端开发相关技术
3.1HTML5前端开发工具选择
HTML5网页前端开发，实际也是HTML网页开发。HTML5只是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改的第五次，其中增添很多新的API功能。网页前端主要是由用户交互设计，视觉体验设计等配合，根据设计图合理的规划和布局页面，合理编写页面代码，编写易于管理具有一定的层次代码，挖掘用户深层次的体验效果，进一步去优化体验。一般都是由有网页三剑客之称的：HTML，css，js来作为基本构建项目语言，但我将以最简单HTML、css来构建一个建议的个人应聘网页。而在此次设计中将采用到的软件叫：Visual Studio Code。
3.2Visual Studio Code的简介
Visual Studio Code（简称“VS Code”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。
3.3Visual Studio Code主要功能介绍
该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括语法高亮，可定制的热键绑定，括号匹配以及代码片段收集。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。
Visual Studio Code 提供了丰富的快捷键 。用户可通过快捷键调出各类快捷键面板，查看全部的快捷键定义。也可在面板中双击任一快捷键，为某项功能指定新的快捷键。
而该编辑器在程序员中可以称之为万能编辑器，因为它具有对JavaScript，TypeScript和Node。js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如 NET和Unity）扩展的生态系统。
3.4HTML的基本结构
按照系统开发的基本观点对网站进行分解：HTML就是英文Hyper Text Markup Language的缩写，翻译成中文就是“超文本标识语言”。
HTML 文件结构(Document Structures)
<!DOCTYPE html> <!--文档声明：告诉浏览器一下文件用HTML5版本解析--!>
<html lang="en"> <!--告诉浏览器HTML文件开始--!>
<head> <!--表示HTML文件的头部--!>
<meta charset="UTF-8"> <!--网页的编码格式为UTF-8，即国际通用编码格式--!>
<title>个人应聘网页</title> <!--网页的标题是什么--!>
</head> <!--表示HTML文件的头部结束--!>
<body> <!--HTML文件的主要部分开始--!>
HTML文件的正文写在这里 <!--在网页中显示的信息内容都放在body标签里--!>
</body> <!--HTML文件的主体部分结束--!>
</html> <!--HTML文件结束--!>
3.5css简介
层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。是用来进行网页风格修饰的，可以有效地对各个标签的样式进行统一的修改。
CSS的全名中，Cascading有“层叠”的意思，也就是说在同一个web页面中可以同时存在多个样式表，但这些样式表中的样式，会根据他们所在的位置，拥有不同的优先级，优先级越高的，就会在最终显示出来。样式表插入方法分为3种：(1） 内联式样式表；(2)嵌入式样式表；(3）外部式样式表；
CSS某种程度上来说是扩展了HTML，但不能用来替换HTML，也就是说CSS不能脱离HTML，它只是一种辅助修饰页面的“工具”，除了可以扩展HTML默认的样式设定外，CSS让网站的设计样式维护更加方便搞笑，主要体现是为:减少图片的使用率，方便管理样式表样式，设置公用样式，样式分类设置调用。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
示例图
第四章 个人应聘网页设计分析
4.1个人应聘网页设计总体思路
Web前端开发与其他平台开发不一样，它是一个先易后难的学习曲线，主要包括三个基本技能要素：HTML，CSS，和Javascript，所以前端工程师不仅要掌握这些基本技能外，还要去学习网站的性能优化，SEO和与后台服务器端交互的基础知识，而且还要善于利用各种测试辅助工具辅助开发，例如IEtext，google的bug，还要具有一定的沟通能力，协调美工设计与后台开发人员，还要掌握如何封装代码组件，增加代码维护性，代码的易用性，浏览器兼容与适配，面向对象的编程思想，等等。而本来个人应聘网页设计，我仅采用了简单的HTML，CSS技能进行开发设计，简便的为大家呈现一个让初学者也能看的懂简易网页内的代码，
4.2分层开发
在个人应聘网站的具体概要确定之后，就要着手进行分层开发的划分，根据项目内容的不同，划分出不同的功能模块，分步完成，以便合理地安排开发时间，在有限的时间内，有条理地完成模块和需要功能，减少时间的浪费，降低开发成本，提高开发效率。整个分层开发大致分为总体结构搭建，模块制作，页面设置制作，内部测试，bug修复，代码优化。
4.3代码编写
当总规划和设计图初稿完成后，就可以进入代码编写阶段，进行前期的前端开发，大致流程如下：搭建大致的HTML结构，然后等设计图完成后再对页面进行细节调整布局，并添加页面样式修改完善。
在整个过程中，先划分好各模块的开发顺序，先编写大概的HTML布局，设计图完成后在利用CSS对页面进行优化。
4.4内部测试与后续优化
前端内部测试，主要是观察页面与设计图的差异,优化页面细节样式，及时发现问题并且进行修改.并且利用Google Chrome查看页面的兼容性,当所有细节与兼容问题修改完毕后，就要对制作文件进行代码优化。
该页面设计是按照个人思路开发制定出来的，尽管虽然不是很完美，但是很适合我个人现在开发这个项目的需求，优点也是很明显的，能更好的应对高强度，高质量的开发需求，代码更加容易控制和修改优化，充分利用时间，提高了开发需求。
第五章 网页设计模块和源代码
5.1页面设计及展示模块
个人应聘网站主要实现个人信息展示等功能。其中展示的模块如下：
（一）快捷导航（个人中心、帮助中心、手机版）
（二）网页头部（首页、爱好、特长、各类日常、所学专业、目前职业、求职意向、学历证书、职业技能）
（三）网页侧导航及中间部（用于展示各类图片）
（四）网页尾部（用于展现个人生格言）
5.2部分源代码展示及效果
1.快捷导航源代码展示和效果
<div class="shortcut">
<div class="wrapper">
<ul>
<li><a href="#">个人中心</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#"><span></span>手机版</a></li>
</ul>
</div>
</div>
2.网页头部源代码展示和效果
<div class="header wrapper">
<div class="logo">
<h1><a href="#">个人简历</a></h1>
</div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">爱好</a></li>
<li><a href="#">特长</a></li>
<li><a href="#">各类日常</a></li>
<li><a href="#">所学专业</a></li>
<li><a href="#">目前职业</a></li>
<li><a href="#">求职意向</a></li>
<li><a href="#">学历证书</a></li>
<li><a href="#">职业技能</a></li>
</ul>
</div>
</div>
3.网页侧导航及中间部源代码展示和效果
div class="aside">
<ul>
<li><a href="#">爱好<span>篮球</span></a></li>
<li><a href="#">特长<span>编写代码</span></a></li>
<li><a href="#">各类日常<span>旅游</span></a></li>
<li><a href="#">各类日常<span>玩游戏</span></a></li>
<li><a href="#">各类日常<span>看电影</span></a></li>
<li><a href="#">各类日常<span></span></a></li>
<li><a href="#">各类日常<span>看电视剧</span></a></li>
<li><a href="#">所学专业<span>技术及与科学</span></a></li>
<li><a href="#">日常<span></span></a></li>
<li><a href="#">日常<span></span></a></li>
</ul>
</div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<ol>
<li></li>
<li></li>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<div class="goods wrapper">
<div class="hd">
<h2>大学日常<span>认真上课</span></h2>
<a href="#">查看全部</a>
</div>
<div class="bd clearfix">
<ul>
<li>
<a href="#">
<img src="./images/学校.jpg" alt="">
<h3>集体活动</h3>
<div></div>
<b>学习</b>
</a>
</li>
<li>
<a href="#">
<img src="./images/学校1.jpg" alt="">
<h3>培训课</h3>
<div></div>
<b>学习</b>
</a>
</li>
<li>
<a href="#">
<img src="./images/认真参观.jpg" alt="">
<h3>参观企业</h3>
<div></div>
<b>学习</b>
</a>
</li>
<li>
<a href="#">
<img src="./images/学校2.jpg" alt="">
<h3>认真上课</h3>
<div></div>
<b>学习</b>
</a>
</li>
</ul>
</div>
结 论
个人应聘网站前端涉及最基本的两个技能:HTML，CSS。在网页的布局时， 用HTML将元素进行定义；css对展示的HTML元素布局进行定位渲染。本网站的建立的作用是本人自主学习的初步成果，仅用于后续，寻找岗位做铺垫。
本文中介绍了HTML,CSS的制作做法，详细的说明了个人应聘网页的制作部分流程，以及网站中的主要功能。
网站中还存在一些不足之处，如网站可能存在部分bug没完善修复等等.这些问题和功能有待于进一步学习和添加。
参考文献
[1]刘兵．Web前端开发人民与实践：HTML5+CSS3+JavaScript+Vue.js+jQuery．杭州：中国水利出版社，2020.08
[2]Aditya Ravi Shankar著,谢光磊译《HTML5游戏开发进阶指南》，出版社:电子工业出版社出版时间:2013年9月
[3]作者:Chris Mills 著，林雪玉，韦剑宾 等译 CSS3实战:开发与设计
[4]温谦.CSS网页设计标准教程.杭州：人民邮电出版社，2009年5月
致 谢
三年的大学生活转眼之间匆匆的就快要过去了，回顾这三年，有上课时的认真听讲，有老师们辛苦的讲解，有课间同学们的欢声笑语，有课下同学们的相伴郊游，有考试前的闷头复习，最后有导师论文的细心教导和帮助。三年的生活不可谓短，但是因为充实、因为怀念、因为不舍，仿佛踏入校门的那一刹那尤在昨日。所以感谢杭州理工学院继续教育学院这所院校以及所有的老师，教会了我许多书面上的知识和生活中做人的道理。也感谢互相帮助的同学们一起相伴走过了这三年的大学生涯。更感谢我论文的导师指出了我文论中的不足与缺点，最后的完成离不开导师的谆谆教导，在此由衷的感谢。
感谢公司各员工的支持和帮助，不仅提供了很多参考资料，更用自己的业余时间回答我在论文中出现过的各种疑惑及问题，最终可以使论文完稿。
最后，祝愿所有的老师和同学们，在今后的日子里，生活蒸蒸日上，事业有成。
在线咨询
