心雨家园 关于【网站开发流程前端】，今天小编给您分享一下，如果对您有所帮助别忘了关注本站哦。
- 内容导航：
- 1、网站开发流程前端：WEB前端开发学习流程
- 2、网站开发流程前端，作为前端这些事情你需要知道
1、网站开发流程前端：WEB前端开发学习流程
相对web后端开发来说,web前端开发对大部分初学编程者比较友好，而且入门门槛低，就业范围广。是大部分转行学IT的一个首选方向。web前端开发工程师，主要进行网站浏览器的开发、优化、布局的工作。在了解web前端之前需要先了解下web服务。
通俗来讲的话web服务是一种为用户提供一种在网上浏览信息的服务，具有动态的，可交互的，跨平台和图形化等特点，web前端就是用户能看到的部分，例如web服务中的浏览器客户端。web 服务也是一个应用程序，它向外界暴露出一个能够通过web进行调用的API。你能够用编程的方法通过web来调用这个应用程序。我们把调用这个web 服务的应用程序叫做客户。
怎么进行前端开发的学习？
第一，基本的Web前端开发技术。
包括 HTML，CSS，JavaScript，DOM，Ajax、SEO等，在掌握这些技术的同时(PC端网站布局项HTML5+CSS3基础、WebApp页面布局)，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。
第二，JavaScript高级课程、PC端全栈项目开发。
主要内容为原生JavaScript、面向对象进阶与ES5/ES6应用、JavaScript工具库自主研发、JQuery经典交互特效开发、HTTP协议、Ajax进阶与后端开发、前端工程化与模块化应用以及AngularJS等。在学习前端知识中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。
学习目标是可以通过原生JavaScript开发交互功能，实现网站上的交互效果，以及模块化应用等，实现完整的前端工程。
第三，Web开发框架。
例如Bootstrap，Vue，Angular等等。Web前端框架、大数据可视化，主要内容为Node.js后端开发、Vue.js前端框架、React前端框架、混合开发(Hybrid，RN)、Angular前端框架、大数据可视化等。
学习目标是可以独立完成相应的项目，如微信小程序项目开发，以及各类混合应用项目开发等。
第四，理论层面的知识。
包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等等。
前端开发的入门门槛其实相对较低，与后端服务器语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于想从事IT工作的人来说，前端开发是个不错的学习切入点。也是近年来IT行业的一个热门岗位。
2、网站开发流程前端，作为前端这些事情你需要知道
在为网站编写代码之前必须进行规划和设计工作，包括“网站提供什么信息？”、“想要什么字体和颜色？”、“网站是做什么的？”
开发网站之前需要做什么第一步：计划在做任何事情之前都需要一些想法。网站要达到哪种目的？一个网站基本上可以做任何事情，但对于第一次尝试，应该保持简单。我们将从创建一个包含一个标题、一张图片和几个段落的简单网页开始。
首先，请考虑以下问题：
- 网站的主题是什么？你喜欢狗、上海、还是吃豆人？
- 基于所选主题要展示哪些信息？写下标题和几段文字，构思一个用于展示的图像。
- 网站采用什么样的外观？用高阶术语来说，背景颜色是什么？使用哪种字体比较合适：正式的、卡通的、粗体、瘦体？
备注： 复杂项目需要更详细的指引，深入到颜色、字体、页面上项目之间的间距、适当的书写风格等所有细节。这有时被称为设计指南、设计系统或品牌手册。参见：Firefox Photon Design System。
绘制草图接下来，拿起笔和纸，大致勾勒出你所希望的网站的样子。虽然第一个简单的网页没有太多的草图，但你现在应该养成这样做的习惯。画草图很有用——并且不需要梵高的手法！
备注： 即使在实际的复杂网站中，设计团队通常也是从粗略的草图开始设计的，再使用图形编辑器或 Web 技术建立数字模拟图。
Web 团队通常包括一个平面设计师和一个用户体验(UX) 设计师。平面设计师把网站的视觉效果放在一起。用户体验设计师则以一种更抽象的模式来解决用户如何体验以及与网站交互方面的问题。
选定内容此时可以开始组织网页上的内容了。
文本准备好刚才撰写的标题和文字。
主题颜色使用色彩选择器挑选心仪的颜色。当选中某种颜色时，会显示一个六位神秘代码，类似于#660066。它是一个十六进制数，用于表示颜色。将其复制并暂存。
图像
访问 Google 图像搜索 来搜索合适的图片。
- 当找到你想要的图像时，点击该图像以获得其放大的视图。
- 右键单击图像（Mac上为 Ctrl 单击），选择将图像另存为...，并选择一个安全的地方来保存你的图像。或者，从浏览器地址栏中复制图片的网址，以便以后使用。
请注意，网络上的大多数图片，包括谷歌图片中的图片，都是有版权的。为了减少侵权的可能性，可以使用谷歌的许可证过滤器。点击工具按钮，然后点击下面出现的使用权限选项。你应该选择知识共享许可这个选项。
字体
要选择一种字体：
如何创建文件
- 访问 Google Fonts 选择一种自己喜欢的字体。
- 将谷歌给你的代码复制至文本编辑器中，以保存备用。
一个网站包含许多文件：文本内容、代码、样式表、媒体内容，等等。当你建立一个网站时，你需要在计算机上将这些文件以合理的结构组织起来，确保文件之间交互畅通，并在你最终将它们上传到服务器之前使你的所有内容看起来正确。处理文件讨论了一些你应该注意的问题，以便你能为你的网站建立一个合理的文件结构。
网站应该保存在何处？对于本地网站，应将所有相关文件放在一个单独文件夹中，可以映射出服务器端站点文件结构。这个文件夹可以放在任何你喜欢的地方，但你应该把它放在你能轻易找到的地方，也许是在你的桌面上，在你的主页文件夹里，或者在你的硬盘根目录下。
1、选择一个地方来存储你的网站项目。在你选择的地方，创建一个名为web-projects（或类似）的新文件夹。这是你所有的网站项目的存放地。
2、在这个文件夹中，创建另一个文件夹来存放你的第一个网站。称之为test-site（或更有想象力的东西）。
关于大小写和空格的提示你会注意到，在这篇文章中，我们要求你完全用小写字母命名文件夹和文件，没有空格. 这是因为：
- 许多计算机，特别是网络服务器，是区分大小写的。因此，假如你把一张图片放在你的网站上 test-site/MyImage.jpg，然后在一个不同的文件中，你试图以 test-site/myimage.jpg 来调用该图片，它可能无法工作。
- 浏览器、网络服务器和编程语言对空格的处理并不一致。例如，如果你在文件名中使用空格，一些系统可能会将其视为两个文件名。一些服务器会用“ ”（URL 中空格的字符代码）替换文件名中的区域，导致所有链接被破坏。最好用连字符而不是下划线来分隔单词。对比 my-file.HTML 与 my_file.html。
简言之，文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符，但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线来分隔。这可以避免许多问题。
网站应该使用什么结构？接下来，让我们看看我们的测试网站应该是什么结构。在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。现在让我们来创建这些：
1、index.html： 这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器，创建一个名为index.html的新文件，并将其保存在test-site文件夹内。
2、images 文件夹： 这个文件夹包含网站上使用的所有图片。在 test-site 文件夹内创建一个名为 images 的文件夹。
3、styles 文件夹： 这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 test-site 文件夹内创建一个名为 styles 的文件夹。
4、scripts 文件夹： 这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 test-site 文件夹内创建一个名为 scripts 的文件夹。
备注： 在 Windows 上你可能看不到文件扩展名，因为 Windows 有一个默认开启的隐藏已知文件类型的扩展名的选项。一般来说，你可以通过 Windows 资源管理器，选择文件夹选项选项，取消勾选隐藏已知文件类型的扩展名复选框，然后点击确认将其关闭。对于涉及你的 Windows 版本的更多具体信息，你可以在网上搜索。
文件路径为使文件间正常交互，应为每个文件提供访问路径，所以一个文件知道另一个文件的位置。为作为演示，我们将在 index.html 中插入一小段 HTML，并使其显示你在“你的网站会是什么样？“一文中选择的图片。或者，你可以在你的电脑上或从网上选择一个现有的图片，并在下面的步骤中使用它：
1、将你之前选择的图片复制到你的 images 文件夹。打开你的
brindex.html2、文件，并准确地将以下代码插入该文件中。当下不要对其感到困惑——我们将在本系列的后面更详细地研究这些结构。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <img src=http://www.029ztxx.com/tg/"" alt="My test image">