全部
搜索
稻壳儿首页 >

PPT模板

 >当前作品

大学网页设计前端设计培训带内容

收藏
  • 大学网页设计前端设计培训带内容-PPT模板网页设计内容课件授课班级：视觉/电商专业78班《世纪的全民必备技能》,前言本课件为尤巍设计原创真实课件，主要针对大学视觉与电商专业的网页设计前端学习入门课程，本门课程的教学过程中，主要还是以实操演示为主，但主要的规则与规范，以及入门理论，还是需要本课件信息来辅助，提高教学质量与效率，有效提高课堂互动性，增强学生学习兴趣，本课件教学思路。本PPT主要是将真实商业案例引入课堂，并以此为例，从用户分析开始到--视觉风格--草图绘制--PS原型设计--AXURE交互设计---HTML+CSS静态页面建设一系列流程进行分析讲解，比较全面，但也需要配合实操演示来进行教学，不属于照本宣科型的课件。其中由于AXURE作为一个移动端产品原型交互设计工具，信息量比较大，篇幅太多，所以在本课件中没有具体讲解，尤巍设计会在近期单独再出一份PPT。,课程须知尤巍课堂,学好前端需要哪些基本能力这取决于你的职业方向或希望做的事平面设计基础审美基础,学习不是盲目的，首先要确定好自己的学习目标，你的学习是为了找一份什么样的工作？又或者是更好的辅助自己的事业，那么为了达成这样的目标，你需要学习哪些内容，又或者是说重点学习哪些内容，这些在一开始就要做好规划。但总体来说，我们的学习不能脱离实际，更不能是盲目的学院派，并且无论是为了找工作还是创业而学习，其实对同学们学习程度的层次都是要求比较高的，没有高低之分，只有方向之分。在这里我们先列举出几个大型招聘站点对网页前端设计师的要求，根据这些社会对人才的实际需求情况，来制定我们的学习计划与教学目标。学习的定位与目标社会需求能力要求工资待遇都能干啥,搜索关键词：网页设计师、Web前端设计师等。了解人才招聘企业需求现场向同学们在线演示搜索过程有助于课堂互动及情绪调动通过搜索结果，我们初步得知该职业的社会人才需求量比较大，我们通过搜索得出近期55条招聘信息，并初步了解了基本待遇情况，当然这个待遇主要与个人能力相关，仅做参考。,当然，也不能完全看现在，更要看趋势,首先，网页设计并不是一门单独学科，而是一门综合设计类课程，它不仅涉及到视觉设计中的综合应用，同时也需要同学们对前端代码，例如HTML（5）+CSS（）进行一定程度的学习，除此之外，如果我们要做出既能看也能用的设计，我们还需要将我们做好的设计进行互联网部署联系，让我们的作品能够真正的在互联网中被访问到，这才是我们本门课程的目的。,本课程要学习的具体内容设计规则AXURE原型DreamweaverAI高级图形PHOTOSHOP扩展内容AE/C4D动画,视觉风格永远服务于内容，不要太少也不能太过，要做到平衡与适合。,简洁干净的设计风格，使得网站主体内容聚焦且突出，没有其他内容干涉到视觉，这样的风格搭配上线条明快的产品或色彩，显得干净整洁，用户接受程度高,从而提高用户转化率。难点：对图片质量及产品摄影构图要求高，这样的简洁设计并不简单。案例分析：简洁风格,案例分析(二)：破碎编排风格打破常规错位中寻求平衡活跃积极不沉闷,案例分析(三)：单图风格把最想表现的产品或内容图片设置为网站首页的背景，有助于用户第一时间接收到网站的主体内容，触发用户继续浏览的兴趣,案例分析(三)：单图风格把最想表现的产品或内容图片设置为网站首页的背景，有助于用户第一时间接收到网站的主体内容，触发用户继续浏览的兴趣,避免一上来就用软件，先把设计策划做好，把更多的想法体现在草图中,网页设计课堂练习（草图）：现有建站需求：《阔云户外》官方网站设计需求网站简介：《阔云户外》为专门经营户外旅游的一家俱乐部，经营范围涉及到旅游咨询、导游服务、旅游户外产品销售等业务。甲方具体要求：,根据《阔云户外》网站设计需求，进行需求分析，请同学们讨论分析以下两个问题，并将答案以设计草图+文字的形式汇总上交至教师处。,草图绘制示例草图不仅仅是布局与功能位示意，同时也是设计思维的展现，请每一位同学将详细的文字思路写在草图关键位置的附近，例如：居中的位置应该展示企业最重要的业务图片内容，所以结合甲方对交互与展示创意的需求，我希望用下滑出现的幻灯形式来展现这部分内容。、绘制工具不限，但不要用尺，尽量快速表现更多的想法。、可使用马克笔进行必要的阴影绘制或简单的色块区分。,其实000px是一个折中的方案，根据用户终端显示器分辨率的多样性而采取的一种“大众尺寸”，目的就是使得你所设计的网页能够在绝大部分的显示器中能够全尺寸显示，有一个良好的浏览体验。当然随着现代显示器分辨率越来越大，我们有时候也会将设计分辨率定位在000-400PX之间，都是可行的。初学阶段，请使用000px宽度进行WEB设计为什么是000px?什么是自适应宽度（响应式网站）响应式网站能够根据用户不同的终端物理像素尺寸自动调节自身的显示方式与宽度，这里我们在视觉阶段可通过AXURE来完成原型设计，但在一开始学习的时候，我们先使用固定宽度来进行网页设计。,不同的网站设计需求，使用不同的软件进行设计，其中PS是使用最多的方式,在开始利用软件进行设计之前，同学们有必要对设计规范进行充分的了解WEB设计中的字体使用不同与一般的平面设计，它只能使用常规系统中默认自带的字体，这样做的目的就是希望在用户终端中浏览的网页与你的设计稿是一致的。,宋体/微软雅黑/Arial/Georgia字体种类要求常用中英文字体：问题提出:是否能使用其他气体，比如书法、艺术类等字体？WEB设计中的字体使用不同与一般的平面设计，它只能使用常规系统中默认自带的字体，这样做的目的就是希望在用户终端中浏览的网页与你的设计稿是一致的。如果你在设计时使用了一些非默认字体，那么当用户浏览你的网页时，极有可能因为缺少字体而影响用户体验，使得视觉体验变差。,字号选择常用习惯重点规范WEB设计中所有字体的字号必须是偶数，这一点主要是针对不同浏览器的兼容性以及后期UI开发中的一些适配设计必须遵守的规范。（补充：所有元素尺寸同样应为偶数，比如任何元素的宽与高）,衬线体与非衬线体这两种字形的区别我们可以从图示中发现，在WEB设计中，并没有非常严格的规范，比如标题必须用衬线体或者非衬线体，又或者正文必须用哪一种，这里我们认为衬线体识别性更高，非衬线体在商业风格的案例中使用更多，详细用法我们通过之后的案例来举例说明。但总之这两者的使用不属于规范，只属于编排技巧，提高用户体验的一种方法。,什么是WEB兼容性？简单来讲，就是保证你的设计在什么终端上看都是一致的，而不会出现同一款WEB设计方案在浏览器A中显示的是正常的，在浏览器B中则会出现字号不同、字体不同、版面错位、不对齐不整齐、图片显示不正确等情况的出现。这是设计师的要处理的事，还是写前端代码的人要处理的事？一般来讲，写HTML+CSS的人会根根根据你的视觉设计稿件来进行制作，如果你的设计稿中出现大量的类似、5、7、9这样的尺寸或者长、款、字号，那么如果执行设计的话，后期工作量大不说，可能兼容性也无法保证，最后的网页做好后，在视觉上也会和你的设计稿大不相同，严重影响工作效率。在WEB设计中，没有移动端UI设计的规范那么复杂，通常我们只需要使用偶数原则就可以了，后续我们要出的移动UI产品设计课件中，还是出现4的倍数尺寸规范，后续详解。图片尺寸字体字号边框尺寸间距行距宽度长度,软件阶段设计流程--PS平面视觉---切片至AXURE制作交互演示--高保真原型提案,BANNER/导航/主体/底部信息首页设计我们先将首页划分为几个主要的区块WEB设计中的BANNER/导航/主体/底部信息，通常这四项都是需要的，只是我们在进行创意前期的时候，这四个区块的具体呈现形式或视觉设计呈现可以有所不同，严格来说，这四项属于功能划分，各自承载着不同的主要作用，而不是从上至下的一种排序设计，这一点很重要，如果依次设计，很可能创意这种东西已经在不知不觉中消失了。所以我们只要搞清楚他们的功能与意义，至于最后的表现，只要能够满足用户的良好体验及不失功能性即可，当然，如果又有创意又好用，那就再好不过了。TOPBANNER导航主体内容底部信息,BANNER设计单图形式多图幻灯动画演示视频片头手绘插画摄影图片更多案例,课堂练习(一)使用任意软件进行一个TOPBANNER设计，要求原创性高，如果是摄影图，请自行完成摄影构图，并搭配字体设计进行原创设计。（实例效果如右图）请切合教师拟定的的主题需求进行设计设计尺寸不限，创意形式不限设计时请考虑到整站风格的沿用!,课堂练习(二)请结合BANNER设计以及草图定稿，对整站进行风格定位设计。每位请提供至少三套设计方案作为作业提交。三套方案必须搭配不同的标准色、布局、图标风格。标准色选定图标风格设计功能与内容布局,首页风格活动展示页产品购物页热点资讯页联系我们活动资讯团购页网站地图购物车结算博主秀博主秀在做整站设计之前，我们首先要制作一张交互逻辑地图，方便后续设计，这样的网站地图，可以使用很多软件制作，比如思维导图软件等等，不做限制，能够达到目的即可。招聘页地址页PAGES!,BANNER/导航/主体/底部信息请根据右侧甲方网页设计需求进行整站视觉设计，要求页面完整，所有内容均需要原创，包括且不限与图标、LOGO、BANNER等内容，网站中涉及到的所有产品展示类图片素材均可使用相关图片暂时替代。,不同的网站设计需求，使用不同的软件进行设计，其中PS是使用最多的方式,交互稿由于AXURE主要用于制作HTML5动态交互效果演示，所以为了避免文件过大或者导致文本错位等问题，我们可以将做好的设计稿切片存为JPG文件导入至AXURE配合透明按钮进行交互与动画设置。具体切片方法请教师现场演示,网页设计作为新媒体课程之一，在现代教学中主要用于为之后的移动UI课程打下一个扎实的理论与软件基础，所以，关于AXURE的教学课件，尤巍设计将会单独整理成一套教案，在这里由于上传与篇幅限制，暂时不做关于AXURE的教学资源整理，还请多关注尤巍设计的店铺，教案为本人自用教案，百分之百原创，包括教学思路、文字、排版、均为原创，同时也是本人出版教材的部分内容。AXURE课件会单独再出一份,AXURE/Dreamweaver/AI/CD将设计稿件制作为HTML网页文件第五讲：HTML+CSS静态页面DREAMWEAVER不是唯一的文件，HTMLCSS代码非常简单，记事本也足够,<div>Hello,world</div>在HTML代码中，这是一个标准的层表达,<div></div>像一个盒子，我们需要把大部分内容，包括文字、段落、图片等元素放置在这个标签之中，才能被网页读取，这就是超文本标记语言。在对应位置输入代码后，用浏览器查看一下效果,利用层标签建立网页框架首先我们看右侧的这个网页设计的框架，实际上我们可以先从大体上先将它划分成几个区块，至于里面的内容，我们再慢慢的去完善它，就好像画画一样，我们先勾勒一个大体的轮廓出来，然后再去完善它的细节。要建立这样一个简单的网页框架，我们还要使用到CSS代码才能完成,通过这个案例的学习，能够让我们对HTML+CSS代码有一个初步的认识。45,<divstyle="width:000px;height:00px;margin-left:auto;margin-right:auto;background-color:#CCC;"></div>网页规格：宽000px；高500px；我们先来建立左图大框架<divstyle="width:000px;height:00px;margin-left:auto;margin-right:auto;background-color:#CCC;"></div>高：500px宽：000px在这里我们使用了部分常用的CSS代码，逐一解释一下他们的意义：width:000px;height:00px;设置该div层的高与宽；margin-left:auto;margin-right:auto;设置网页居中margin-left:auto;margin-right:auto;设置网页居中style="在html文件中，我们需要将CSS代码写在此间"background-color:#CCC;为了好区分框架，暂定一个颜色,<divstyle="width:000px;height:00px;margin-left:auto;margin-right:auto;background-color:#CCC;"></div>高：500px宽：000px高：600px高：600px高：00px分别建立左侧，，框架这里我们其实可以用.class的方式建立CSS链接来完成框架建立，方便快捷的同时，也有效的减少了代码量，加快运行速度，养成好的编写习惯。建立CSS文件，并写入以下代码编写HTML文件，写入个div层，类为box在HTML文件中外链CSS文件即可（这里讲一下相对地址与绝对地址的概念）,<divstyle="width:000px;height:00px;margin-left:auto;margin-right:auto;background-color:#CCC;"></div>高：500px宽：000px中图是我们已经建立的框架现在我们要把、、分别再次细分以达到右图的效果。其实方法我们会了，就是如何去运用的问题。细分第个区块，贴入背景图background-image:url(pic.jpg);background-repeat:no-repeat;no-repeat;意思是当图片尺寸与div层的尺寸不相同时，不进行重复平铺，这样我们就给区块贴好了背景图。,<divstyle="width:000px;height:00px;margin-left:auto;margin-right:auto;background-color:#CCC;"></div>高：500px宽：000px--,<divstyle="width:000px;height:00px;margin-left:auto;margin-right:auto;background-color:#CCC;"></div>要完成这样的一个区块建设，难度最大的点就是TEXT文字部分，因为上下都有“间距空白”，稍微处理不好，会造成比较大的兼容性问题，特别是初学者喜欢用CSS代码margin-top之类的来控制文字上方的留白，这样就会产生后续问题，需要用CSSHACK去调整它的兼容性，既麻烦又容易出错，所以要想做出比较完善、且兼容性较好的静态网页，我们最好把这些“间距空白”的地方用DIV独立的划分出来，并给定绝对尺寸，如上图红色区块所示。继续划分，兼容性会更好<astyle="font-size:0px;color:#FFF;">TEXT</a><astyle="font-size:4px;color:#FFF;">内容</a>,HTML+CSS语言的基本用法我们已经做了讲解，当然语言内容还有很多，希望同学们在这个入门的基础上，自学完成建立完整的网页框架，在制作过程中一定会遇到非常多的问题，作为大学生，自学是非常重要的工作，下面给出常用的CSS代码供大家参考学习。marginfloatdisplaycursorz-indexcolorfontlistline-heightpadding彻底掌握这些CSS代码，那么常规的静态页面建设就算是入门了；具体意义，请同学们自行查询，养成主动学习的习惯。,课程结束，谢谢聆听尤巍原创内容课件课件只是辅助，对于本门课程而言，实操演示的过程可能需要更多。,www.docer.com+86-00-897898989感谢下载，稻壳尤巍设计原创尤巍设计稻壳店铺地址：http://chn.docer.com/works?userid=646#!/work_time稻壳尤巍设计的所有作品均为百分百原创，并且都不错，欢迎进店看看，你对我的支持是我最大的前进动力，共勉，并真心感谢。近期作品复制黏贴至浏览器查看更多作品
  • 大学网页设计前端设计培训带内容-PPT模板
  • 大学网页设计前端设计培训带内容-PPT模板
  • 大学网页设计前端设计培训带内容-PPT模板
  • 大学网页设计前端设计培训带内容-PPT模板
  • 大学网页设计前端设计培训带内容-PPT模板
  • 大学网页设计前端设计培训带内容-PPT模板
  • 大学网页设计前端设计培训带内容-PPT模板
  • 大学网页设计前端设计培训带内容-PPT模板
  • 大学网页设计前端设计培训带内容-PPT模板
模板介绍：

  • 这是一套白黑色的，具有动态风格的PPT模板，共49张；

  • PPT演示模板封面，标题文字“网页设计内容课件”。

  • PPT模板内容页，由47页白黑色宽屏幻灯片图表制作。幻灯片带有动态特效。

  • 本模板适合用于制作有关培训的演示文稿，例如：培训课程PPT和教育培训PPT。.PPTX格式

  • 转载请注明出处！本文地址：https://www.docer.com/preview/19993779

关注稻壳领福利

相关推荐 查看更多
企业年会誓师大会背景封面PPT.pptx
企业年会誓师大会背景封面PPT.pptx

企业年会誓师大会背景封面PPT

彩色可爱卡通小星球计划总结通用PPT.pptx
彩色可爱卡通小星球计划总结通用PPT.pptx

彩色可爱卡通小星球计划总结通用PPT

喜庆企业年会展示通用PPT背景.pptx
喜庆企业年会展示通用PPT背景.pptx

喜庆企业年会展示通用PPT背景

绿色商务风企业项目管理培训PPT.pptx
绿色商务风企业项目管理培训PPT.pptx

绿色商务风企业项目管理培训PPT

白色学习研思成长教育工作汇报PPT模板.pptx
白色学习研思成长教育工作汇报PPT模板.pptx

白色学习研思成长教育工作汇报PPT模板

呼吸衰竭护理查房.pptx
呼吸衰竭护理查房.pptx

呼吸衰竭护理查房

校园霸凌欺凌暴力演讲安全教育.pptx
校园霸凌欺凌暴力演讲安全教育.pptx

校园霸凌欺凌暴力演讲安全教育

红色大气年终工作总结计划PPT.pptx
红色大气年终工作总结计划PPT.pptx

红色大气年终工作总结计划PPT

可爱宝宝满月百日宴动态音乐相册.pptx
可爱宝宝满月百日宴动态音乐相册.pptx

可爱宝宝满月百日宴动态音乐相册

文明礼仪从我做起主题教育PPT.pptx
文明礼仪从我做起主题教育PPT.pptx

文明礼仪从我做起主题教育PPT

科技风公司年会总结暨颁奖盛典.pptx
科技风公司年会总结暨颁奖盛典.pptx

科技风公司年会总结暨颁奖盛典

小清新教育教学设计教案教师说课.pptx
小清新教育教学设计教案教师说课.pptx

小清新教育教学设计教案教师说课

模板单价：￥19.99
开通会员可免费下载任意模板与19项权益包
登录后使用
以19.99元购买此模板
  • 页数：47页
  • 时间：2019-08-07
  • 编号：19993779
  • 类型：VIP模板
  • 格式：wpp
  • 提示：数字产品不支持退货
    数字产品本身（包括但不限于文字模板、表格模板、演示模板等）及其包含的全部素材 （包括但不限于字体、图片、图标、文本框、艺术字等）均不支持商用，仅能为个人学习、研究或欣赏目的使用。

尤巍设计

设计作品160 独家高品质原创文档

举报

猜你在找

    我的

    关注稻壳领福利

    福利

    反馈

    微信咨询在线客服

    客服