09月22日, 2014 74次
前端开发工程师是Web前端开发工程师的简称，是近五年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素:HTML、CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
原生html+css+js，还有框架jquery+bootstrap+angular+node+vue等，还有ajax+php，ps切图等 本回答由网友推荐
（1）先学习HTML, 一定要学精通HTML （2）CSS与div （3）JavaScript 追问 我要做的是PPT。不是要学习。而是去介绍这个职业。 本回答由网友推荐
下面这个分析得很透彻，可以参考，ppt就自己根据需要做吧：在我们实际的开发过程中，我们当前这样定位前端、后端开发人员。1）前端开发人员：精通JS，能熟练应用JQuery，懂CSS，能熟练运用这些知识，进行交互效果的开发。 2）后端开发人员：会写Java代码，会写SQL语句，能做简单的数据库设计，会Spring和iBatis，懂一些设计模式等。 现在来看，我们对前后端的要求还是蛮低的，尤其是后端，新员工经过培训之后都是可以参与到后端开发的，没有太高的技术门槛，唯一需要做的就是先变成熟练工种，这个阶段没有涉及到设计模式、架构、效率等一些列问题。还是先google一下，看看网上对Web前端开发、Web后端开发分别是什么？ Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。 Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。我们再来看看大公司对前后端人员招聘的要求，通过这个角度看看前端、后端的技术要求： Web前端： 1）精通HTML，能够书写语义合理，结构清晰，易维护的HTML结构。 2）精通CSS，能够还原视觉设计，并兼容业界承认的主流浏览器。 3）熟悉JavaScript，了解ECMAScript基础内容，掌握1~2种js框架，如JQuery 4）对常见的浏览器兼容问题有清晰的理解，并有可靠的解决方案。 5）对性能有一定的要求，了解yahoo的性能优化建议，并可以在项目中有效实施。 6）...... Web后端： 1）精通jsp，servlet，java bean，JMS，EJB，Jdbc，Flex开发，或者对相关的工具、类库以及框架非常熟悉，如Velocity，Spring，Hibernate，iBatis，OSGI等，对Web开发的模式有较深的理解 2）练使用oracle、sqlserver、mysql等常用的数据库系统，对数据库有较强的设计能力 3）熟悉maven项目配置管理工具，熟悉tomcat、jboss等应用服务器，同时对在高并发处理情况下的负载调优有相关经验者优先考虑 4）精通面向对象分析和设计技术，包括设计模式、UML建模等 5）熟悉网络编程，具有设计和开发对外API接口经验和能力，同时具备跨平台的API规范设计以及API高效调用设计能力 6）...... 从几个公司的招聘要求可以看到，做Web开发，对前端和后端的要求是各自所不同的。而我们目前的实际情况，也和这个差不多，但是，我们无论在知识的掌握程度上，还是知识掌握的宽度上，都是不够的。首先，我们在前端缺乏积累，没有沉淀，专业的前端技术的积累是从去年才开始的，同时，在前端也缺乏支撑与高手，所以，走起来比较困难。同时，前端人员培养的较少，一个原因是对前端了解太少，另外一个原因就是对前端与后端的工作比例估计不足。所幸，我们在这一年也在前端有了很快的进步，培养了几个优秀的开发人员，有意识的解决了前端的用户体验，这都是可喜的。今年，需要更进一步，专业化。其次，我们在后端发展的不够宽，后端的知识体系已经比较完善，但是，很多应用点都没有涉及到。同时，对现有技术框架的理解都不够深入，太浮躁。我们目前的设计团队在解决互联网高并发、大数据量的存取上经验与能力都还不足，需要正视这些问题。后端技术的发展需要更加的精进，以解决实际存在的问题为主。 最后，我们在前端、后端都缺乏熟练工，这会影响到开发的速度，同时，也不利于后期技术的研究。 更多追问追答 追问 不用看这个了 你就说一下自己的理解吧 从前端到后端的过程分析 追答 前后端是工作需要来定的，为了分工协作的人为的一种分割。确定了分工之后，过程就很简单了。如果是像下面这样分的：我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。 Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。那过程就是，前把后端提供的内容展示出来，后端把前端送来的东西处理好。 追问 是呀 他是怎么做到的呢 前把后端提供的内容展示出来，后端把前端送来的东西处理好。 理论 我也懂 但是要怎么说出来呢 追答 已经说得很清楚了么，不是理论，实际也是这样的。你想要怎么说？如果说是工作过程，就需要结合你们的具体情况了，怎么样设置岗位，每个岗位都做什么，这样列出来就好了。具体的，要发送什么样的数据，以什么样的形式发送，发送的具体要求是什么，会随着具体的项目有变化，不过可以总结一下你们实际是怎么做的，提炼出来，就可以了。 本回答由网友推荐
一般来说b/s开发从前端到后端要集代码生成器+权限管理+快速开发+动态接口+通用组件+动态UI于一体的B/S软件开发架构及工具详解B/S(Brouser/Server)架构也可以理解为web架构，是一种基于浏览器载体的框架，包含前端、后端和数据库三个大的方向，各个方向的工具技术都不一样。现在主流的工具技术包含.NET、SqlServer、Bootstrap等，开发工具也会不一样。B/S(Brouser/Server)前端开发技术工具包括三个要素：HTML、CSS和JavaScript，当然还有很多高级的前端框架，比如bootstrap、Jquery等。B/S(Brouser/Server)后端技术工具也有很多，比如.Net、JAVA、PHP等，各大语言都有其开发架构和工具，像.NET的MVC架构和Visual Studio工具，JAVA的J2EE架构和Eclipse工具。数据库现在有三种主流的关系型数据库：Mysql\SQLserver\Oracle，还有Nosql非关系型数据库：Redis、Mogodb等。开发工具有SQL Server Management Studio、Navicat等。
<!doctype html><html> <head> <style> img { display: none; width: 100px; height: 100px; } input:checked + img { display: block; } input { position: absolute; left: -9999px; } label { cursor: pointer; } </style> </head> <body> <div id="cont"> <input id="img1" name="img" type="radio" checked="checked"> <img src="a.png"> <input id="img2" name="img" type="radio"> <img src="b.png"> </div> <div id="nav"> <label for="img1">第一张</label> <label for="img2">第二张</label> </div> </body></html>可以这样写，但是不能支持所有浏览器。如果想支持所有浏览器，就需要使用js了。 更多追问追答 追问 可以耶~请问你还知道其他的方法吗！？ 追答 还有用hash的方法。就是利用地址后面的#abc。 追问 可以写出来看看吗！？ 追答 <!DOCTYPE HTML><html> <head> <style> #cont { position: relative; height: 100px; }img { position: absolute; width: 100px; height: 100px; z-index: 1; }img:first-child,img:target { z-index: 2; } </style> </head> <body> <div id="cont"> <img id="img1" src="a.jpg"> <img id="img2" src="b.jpg"> </div> <div> <a href="#img1">one</a> <a href="#img2">two</a> </div> </body></html>
还可以用FLASH来做，不过那样的话图片就是固定不可换的
做网站需要用到一下几款软件： 一、Photoshop photoshop，即“PS”，是Adobe公司旗下的图形图像处理软件，它不仅有者市场上最强大的位图处理功能，同时对矢量图的处理比起其他软件来说也貌不逊色。主要将它用于网站界面设计。 二、Fireworks Fireworks， 传说中的网页三剑客之一，其主要功能仍然是网站的界面设计，不过随着PS的功能越来越强大，Fireworks的使用者也越来越少了。Fireworks 因为是专门的网页设计软件，对比起PS来说，优点就在于很多功能非常适合用于网页设计，但在图形图像处理，特效制作等方面却比起PS来说要逊色很多。 三、Dreamweaver Dreamweaver，同样是网页三剑客之一，也是现在做网站的静态页面必用的软件，没有之一。做静态页面俗称切片，学名可以叫做“前端开发”，即使用xhtml语言加css样式构建网页的经验页面。 四、Flash Flash应该算是网页三剑客中最出名的软件吧，不过随着做网站的技术不断革新、苹果的移动设备不支持FLASH、FLASH不利于搜索引擎优化等因素，现在Flash在网站中出现的频率也越来越低了。包括以前特别流行、特别绚丽的全Flash站也越来越少见了。 本回答由电脑网络分类达人 吕明推荐
一、菜鸟级网页制作软件 如果你是一个网页制作初学者，那么让下面几种软件带你走进那绚丽多彩的网页制作世界吧！ ①Microsoft FrontPage 如果你曾对Word很熟悉，那么相信你用FrontPage进行网页设计一定会非常顺手。使用FrontPage制作网页，你能真正体会到“功能强大，简单易用”的含义。页面制作由FrontPage中的Editor完成，其工作窗口由3个标签页组成，分别是“所见即所得”的编辑页，HTML代码编辑页和预览页。FrontPage带有图形和GIF动画编辑器，支持CGI和CSS。向导和模板都能使初学者在编辑网页时感到更加方便。 FrontPage最强大之处是其站点管理功能。在更新服务器上的站点时，不需要创建更改文件的目录。FrontPage会为你跟踪文件并拷贝那些新版本文件。FrontPage是现有网页制作软件中惟一既能在本地计算机上工作，又能通过Internet直接对远程服务器上的文件进行工作的软件。 ②Netscape编辑器 Netscape Communicator和Netscape Navigator Gold3.0版本都带有网页编辑器。如果你喜欢用Netscape浏览器上网，使用Netscape编辑器真是简单方便！当你用Netscape浏览器显示网页时，单击编辑按钮，Netscape就会把网页存储在硬盘中，然后就可以开始编辑了。你也可以像使用Word那样编辑文字、字体、颜色，改变主页作者、标题、背景颜色或图像，定义描点，插入链接，定义文档编码，插入图像，创建表格等，是不是与FrontPage 2000还有些像?但是，Netscape编辑器对复杂的网页设计就显得功能有限了，它连表单创建、多框架创建都不支持。 Netscape编辑器是网页制作初学者很好的入门工具。如果你的网页主要是由文本和图片组成的，Netscape编辑器将是一个轻松的选择。如果你对HTML语言有所了解的话，能够使用Notepad或Ultra Edit等文本编辑器来编写少量的HTML语句，也可以弥补Netscape编辑器的一些不足。 ③Adobe Pagemill Pagemill功能不算强大，但使用起来很方便，适合初学者制作较为美观、而不是非常复杂的主页。如果你的主页需要很多框架、表单和Image Map图像，那么Adobe Pagemill的确是你的首选。 Pagemill另一大特色是有一个剪贴板，可以将任意多的文本、图形、表格拖放到里面，需要时再打开，很方便。 ④Claris Home Page 如果使用Claris Home Page软件，你可以在几分钟之内创建一个动态网页。这是因为它有一个很好的创建和编辑Frame(框架)的工具，你不必花费太多的力气就可以增加新的Frame(框架)。而且Claris Home Page 3.0集成了FileMaker数据库，增强的站点管理特性还允许你检测页面的合法连接。不过界面设计过于粗糙，对Image Map图像的处理也不完全。 二、中级网页制作软件 如果你对网页设计已经有了一定的基础，对HTML语言又有一定的了解，那么你可以选择下面的几种软件来设计你的网页，他们一定会为你的网页添色不少。 ①DreamWeaver 自制动态HTML动画的网页 DreamWeaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML(Dynamic HTML)的设计，使得页面没有plug-in也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。 DreamWeaver还采用了Roundtrip HTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。 ②Fireworks 第一款彻底为Web制作者们设计的软件 Fireworks的来头实在不小，它的出现使Web作图发生了革命性的变化。Fireworks是专为网络图像设计而开发，内建丰富的支持网络出版功能，比如Fireworks能够自动切图、生成鼠标动态感应的javascript。而且Fireworks具有十分强大的动画功能和一个几乎完美的网络图像生成器(Export功能)。它增强了与dreamweaver的联系，可以直接生成dreamweaver的Libaray甚至能够导出为配合CSS式样的网页及图片！ ③Flash 让你的网页动起来 Flash是用在互联网上动态的、可互动的shockwave。它的优点是体积小，可边下载边播放，这样就避免了用户长时间的等待。#{6FLASH6}#可以用其生成动画，还可在网页中加入声音。这样你就能生成多媒体的图形和界面，而使文件的体积却很小。FLASH虽然不可以像一门语言一样进行编程，但用其内置的语句并结合JavaScripe，您也可做出互动性很强的主页来。有人曾经说过：下个世纪的网络设计人不会用FLASH，必将被淘汰出局！我相信这句话没错！ ④HotDog Professional 制作要加入多种复杂技术的网页 HotDog是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助设计者制作页面中的复杂部分。HotDog的高级HTML支持插入marquee，并能在预览模式中以正常速度观看。这点非常难得，因为即使首创这种标签的Microsoft在FrontPage中也未提供这样的功能。HotDog对plug-in的支持也远远超过其他产品，它提供的对话框允许你以手动方式为不同格式的文件选择不同的选项。但对中文的处理不很方便。 HotDog是个功能强大的软件，对于那些希望在网页中加入CSS、Java、RealVideo等复杂技术的高级设计者，是个很好的选择。 ⑤HomeSite 制作可完全控制页面进程的网页 Allaire的HomeSite是一个小巧而全能的HTML代码编辑器，有丰富的帮助功能，支持CGI和CSS等等，并且可以直接编辑perl程序。HomeSite工作界面繁简由人，根据习惯，可以将其设置成像Notepad那样简单的编辑窗口，也可以在复杂的界面下工作。 HomeSite更适合那些比较复杂和精彩页面的设计。如果你希望能完全控制你制作的页面的进程，HomeSite是你最佳选择。不过对于生手过于复杂。 ⑥HotMetal Pro 制作具有强大数据嵌入能力的网页 HotMetal既提供“所见即所得”图形制作方式，又提供代码编辑方式，是个令各层次设计者都不至于失望的软件。但是初学者需要熟知HTML，才能得心应手地使用这个软件。HotMetal具有强大的数据嵌入能力，利用它的数据插入向导，可以把外部的Access、Word、Excel以及其他ODBC数据提出来，放入页面中。而且HotMetal能够把它们自动转换为HTML格式，是不是很棒?此外它还能转换很多老格式的文档(如WordStar等)，并能在转换过程中把这些文档里的图片自动转换为GIF格式。 HotMetal为用户提供了“太多”的工具，而且它还可以用网状图或树状图表现整个站点文档的链接状况。 三、高级网页制作软件 ①Microsoft Visual Studio 该系列的版本有：2003、2005、2008和未来的版本； 适合开发动态的aspx网页，同时，还能制作无刷新网站、webservice功能等，仅适合高级用户。 ②Jbuilder 不论是各种版本，均适合使用其开发出JSP网页，仅适合高级用户。 ③记事本 别以为记事本功能非常少，软件很简单；但是，如何想使用它来制作网页，也仅适合高级用户；因为在其内容，没有任何可视化的操作可直接制作网页，而只能编写各种HTML代码、CSS代码、JS代码和各种动态脚本，方能制作出网页来。 本回答被提问者采纳