1. 前端画面都是自己画吗
要有一定的绘画基础,可以自己画,也可以请别人。要用到ps。
引用资料:分享一个移动端页面的制作流程,以及注意事项
一、设计图分析
1、看到设计图首先分析该前端页面包含几部分,大致怎样布局?
该页面包含6部分:标题、机构简介、课程介绍、师资介绍、联系我们、详情页面;采用常规布局方式,自上而下,从左到右;
2、考虑采用哪种方法制作手机端前端页面?
目前常用的方法有:
(1)字体缩放或rem(固定宽度640px或750px,具体根据情况js动态计算font-size的值);
(2)直接写或aui框架(宽度按320px);
备注:在不同的移动终端设备中,实现UI设计稿的等比例适配。但使用rem、字体缩放在大屏设备上并没有展示更多的内容,而且大屏手机看到的字也比较大。因为每个浏览器对最小font-size的支持,不尽相同。js动态计算的font-size值太小时,会导致超小屏上UI显示效果比预想中的偏大。比如,font-size计算是10px,但是chrome只支持到12px,他就按照12px去渲染了,这就会导致UI偏大了。
3、切图
根据布局方式、前端页面的写法考虑该怎样切图,使前端页面制作跟设计图更符合。
(1)能用css实现的效果尽量不要切成图片;
(2)对于有规律的图片可以只切一部分,然后根据情况平铺;
二、页面制作:
1、第一部分:标题
这里使用背景图片,然后将标题整体右浮动,背景图片需要写高度,防止标题过长时将背景图片撑开,使图片变形;也可以使用img标签,用position定位来写。
2、第二部分:机构简介
(1)机构简介整体背景可以用css实现: background-color:#76ab5d; border-radius:18px; box-shadow:3px 3px 3px 0 #333;
(2)border-radius圆角
border-radius:10px 10px 10px 10px
左上 右上 右下 左下 (顺时针)
border-radius:10px 10px 左上右下 右上左下
border-radius:10px 四角
(注意:当圆角的值大于元素的宽就会变成圆形)
(3)box-shadow阴影
box-shadow:0 0 1px #000 inset;
水平 垂直 模糊 颜色 ;
[1] inset代表框内阴影,不加inset代表框外阴影
[2]第1个值为0时,代表左右边框阴影为1px范围
第1个值为正整数 代表左边框阴影
第1个值为负整数 代表右边框阴影
同理
第2个值为0 代表上下边框阴影
第2个值为正整数 代表1px阴影距离上边框多少
第1个值为负整数 代表下边框阴影设置
(注意:box-shadow:0 0 10px 颜色 ;四周发光;)
3、第三部分:课程介绍
布局同上,css样式标题p添加背景图片,写margin-top:-48px使标题高于外层div,且覆盖在上面;注意当外层div不写padding值时,此时写margin-top:-48px,外层div和标题会一同向上移动48px;不能实现标题高于外层div的效果。
2. 怎样设计一个关于节日的前端页面
首先你要确定好是什么节日,比如春节,她是喜庆的,我们会根据节日来确定主色调,比如红色,然后要规划好你的页面展现的内容,节日只是一个主题,你的页面是做什么用的,比如电商的广告,那么卖的商品就是主体,比如游戏的广告,那么游戏活动就是主体,所以你要规划好,最好用纸笔先打个草稿来确定每个模块大概的位置,用ps来做一个psd的整体页面,然后分层,裁切,把素材导出来再做到页面里
3. 求解网页前端设计与后端设计需要先什么
Web前端:顾名思义是来做Web的前端的。这里所说的前端泛指Web前端,也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。Web后端:后端的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。
4. 零基础开始学 Web 前端开发,有什么建议吗
web前端作为互联网相关的重要岗位,许多互联网大厂(如阿里腾讯等)在招聘时会作出要求。学好web前端对于将来掌握前端后端开发、成为全栈架构师的学习很有帮助。
想学习web前端需要掌握的内容也是不少的,对于自学的同学来说会有一些难度,不推荐自学能力差的人。我们在学习的时候需要分阶段进行,做到有计划的学习与训练,具体的学习顺序如下:
web前端学习顺序:
①计算机基础以及PS基础
②前端开发基础(HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架)
③移动开发
④前端高级开发(ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等)
⑤小程序开发
⑥全栈开发(MySQL数据库、Python编程语言、Django框架等)
⑦就业拓展(网站SEO与前端安全技术)
想要系统学习,你可以考察对比一下开设有IT专业的热门学校,好的学校拥有根据当下企业需求自主研发课程的能力,建议实地考察对比一下。
祝你学有所成,望采纳。
5. 网页设计新手如何开始
新手做网页设计,首先要学习一些软件,例如ps、FW之类的绘图软件。之后在接触网页设计会好一点。
首先自我介绍一下,我就是网页设计与制作专业毕业的;
其次,网页设计涉及到许多东西以及明细的分类:例如分前台和后台,前台有设计师,还有前端工程师,后台有程序员等
设计师负责做出网页的效果图,还要考虑一些交互的细节;
前端工程师就是负责把页面实现成html页,还有css以及js,优化等等,学无止尽;
不断的实践,光说不练,假把式,有freelance的机会,有有趣的project多参与,多接触不同的人,拓宽自己的思维。
6. 前端开发者可以自己做网页设计吗
可以,很多网页设计后来都转到前端去了,前端挣得多。而且网页和前端中间有H5和CS6过渡,比较平滑,门槛没那么高
7. 网页前端必须会设计么
现行的标准:HTML 4、CSS 2、Javascript
JS类库:jQuery、node……
新的还有:响应式布局、HTML 5、CSS 3……
8. 自学WEB设计应该先学前端还是后端的技术啊
首先我觉得可以看看你自己的需求或者说兴趣吧。
前后端技术并不是完全独立的两个技术,他们是互相协助的关系。
按照你目前的情况来说,应该还是属于学习阶段。
我觉得如果你能独立的做出一个页面展示不太丑的留言板网站,你就能清楚你喜欢前端还是后端了。
因为留言板站并不需要很多的前端技术,也不需要太多的后端技术。
9. 零基础可以学web前端吗
可以,当然可以,不过坚持下来的没几个,自制力不行,学习计划不正确,没人指导等等,都是自学失败的原因。
所以,想自学,就要克服张以上的问题。
亲爱的小伙伴,你对前端技术感兴趣吗?想了解一个绚丽多彩网站和小程序是如何被制作出来的吗?欢迎加入我们的前端技术大家庭:https://sourl.cn/7jnzJp。在这里,不仅有志同道合的朋友,指导人生的老师,更有看不完的技术教程随你挑!心动吗?想学吗?那就动动你的小手手,加入我们吧!
荐一个自学前端的路线,你可以参考一下:
第1阶段:前端页面重构(4周)
内容包含了:(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)
第2阶段:JavaScript高级程序设计(5周)
内容包含:(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)
第3阶段:PC端全栈项目开发(3周)
内容包含:(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)
第4阶段:移动端项目开发(6周)
内容包含:(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)
第5阶段:混合(Hybrid,ReactNative)开发(1周)
内容包含:(微信小程序开发、ReactNative、各类混合应用开发)
第6阶段:NodeJS全栈开发(1周)
内容包括:(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)