|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/kurs-photoshop-do-html-i-css/
课程评论:没有评论
**课程总结:从 Photoshop 到 HTML/CSS:全栈网页设计实战** 本课程是一门全面的网页设计实战课程,旨在教授学员如何从零开始,使用 Photoshop 进行界面设计,再通过 HTML5 和 CSS3 进行编码,最终实现复杂的网页动画效果,甚至整合 jQuery 和 Google Maps API 等功能。 **核心学习内容:** * **Photoshop 布局设计:** * 学习 Photoshop 的基础配置、插件安装和网络项目优化。 * 收集和整理制作网站所需的字体、图片和图标资源。 * 通过实例,一步步指导完成首页和子页面的设计。 * 分享实用的网络设计技巧,如分辨率适配、网格系统应用以及智能对象的运用。 * **网页资源切图与优化:** * 将设计好的 Photoshop 布局进行高效的切图处理,为后续编码做准备。 * 课程专注于通用技术,但也会涉及针对 WordPress 的设计建议。 * **HTML5 和 CSS3 编码:** * 使用最新的 HTML5 和 CSS3 标准实现网页布局。 * 重点在于教授实用的编码方法,而非实验性的、浏览器兼容性差的技术,以简化跨浏览器测试。 * **jQuery 动画与交互:** * 使用 jQuery 创建具有吸引力的网页动画效果。 * 课程会创建一个类似移动应用的独立视图,并为其添加 jQuery 动画。 * 提供 Adobe Edge Animate 的奖赏课程,展示无代码动画制作方法。 * **实用插件与功能实现:** * 集成 jQuery 插件,例如 CarouFredSel,用于创建图片轮播和最新文章滑块。 * 提供完整的源代码文件,辅助学员完成剩余的子页面编码。 * **地理位置与 Google Maps API:** * 利用 Google Maps API 实现地理位置功能,动态展示地图和标记点,并根据餐厅数量等数据调整标记点大小。 **课程特点:** * **实战导向:** 课程注重实践操作,通过具体案例教授知识,省略了对基础概念的深入讲解。 * **专家视角:** 课程内容源于经验丰富的实践者,分享其在日常工作中总结的精华技巧和效率方法。 * **高效学习:** 通过视频形式,以生动有趣的方式学习,确保学员全程保持兴趣和参与度,并从中获得成就感。 * **知识体系:** 涵盖了从设计到前端实现的完整流程,包括使用 Photoshop、HTML/CSS、jQuery,以及集成第三方 API。 **适合人群:** * 已掌握 CSS 和 HTML 基础,以及 Photoshop 基础的学习者。 * 建议初学者先完成“HTML 和 CSS 从零开始”以及“Photoshop CC 从零开始”课程。 * 对 Web 设计、前端开发、网页动画以及集成地图服务感兴趣的学习者。 **补充学习材料(非强制):** * HTML5 课程 * JavaScript 课程 * jQuery 课程 * Photoshop for Designers 课程 总而言之,本课程是通往全栈网页设计的实用指南,能够帮助您在短时间内掌握从设计到编码再到动画实现的各项关键技能。
WprowadzenieZobacz kompletny kurs projektowania stron WWW od czystej kartki w Photoshopie, przez kodowanie w najnowszych standardach HTML5 oraz CSS3 aż do tworzenia animacji z pomocą jQuery! Zobacz, jak pracuje ekspert tak, jakbyś przyglądał mu się przez ramię słuchając precyzyjnych wskazówek. Kurs, który masz przed sobą to esencja praktycznej pracy!Proces projektowania layoutu w Adobe PhotoshopCięcie grafiki na potrzeby strony WWWKodowanie do HTML5 oraz CSS3Pracę z jQuery oraz dodatkowymi bibliotekami oraz Tworzenie animacji w jQuery i Edge AnimateWykorzystanie geolokalizacji i API Google MapsCiekawe porady, tipsy i trikiProjektowanie od czystej kartki w PhotoshopZaczniemy od podstaw konfiguracji środowiska pracy w Photoshop. Doinstalujemy potrzebne dodatki i zoptymalizujemy ustawienia Photoshopa pod kątem projektów na potrzeby sieci. Następnie skoncentrujemy się na zgromadzeniu zasobów, które posłużą do stworzenia naszej strony, takich jak fonty, zdjęcia oraz ikony tworząc z nich repozytorium dla naszej witryny. Następnie zajmiemy się praktyką projektowania i krok po kroku przeprowadzę Cię przez proces tworzenia strony głównej i podstrony dla naszego serwisu.Dobre techniki projektowaniaNa przestrzeni kursu starałem się przekazać Ci jak najwięcej wskazówek dotyczących projektowania na potrzeby sieci. Znajdziesz w nim informacje o tym, jak dopasować stronę do optymalnej rozdzielczości, jak pracować wygodnie z gridem, które elementy najlepiej zaimportować z Illustratora jako obiekty inteligentne.Zobacz lekcję kursu - Skrót do artykułów promowanych >>Przygotowanie layoutu i cięcie grafikiChociaż techniki, które zobaczysz w kursie są uniwersalne i mogą posłużyć do stworzenia zarówno statycznych jak i dynamicznych stron WWW, postaram się także udzielić Ci kilku wskazówek dotyczących tworzenia projektów na potrzeby WordPress, ponieważ w kolejnym kursie strona, którą zakodujemy, będzie wdrażana właśnie do tego CMSa. Po zaprojektowaniu gotowego layoutu potniemy stworzoną grafikę po to, abyśmy mogli zakodować ją do działającej strony WWW.Zobacz lekcję kursu - Kodujemy karuzelę w jQuery >>Kodowanie w HTML5 i CSS3Mając już przygotowane i pocięte elementy graficzne, będziemy wdrażać je jako gotową stronę, do zaprojektowania której wykorzystamy najnowsze standardy HTML5 i CSS3. Nie będziemy jednak korzystać z eksperymentalnych technik, których działanie jest zależne od przeglądarek. Postaram się pokazać Ci pewne metody, które wykorzystuję w codziennej pracy po to, abyśmy nie musieli przejmować się mozolnym testowaniem strony pod różnymi przeglądarkami.Animacja z jQuery w widoku PojedynkówW kursie stworzymy także osobny widok, który będzie nawiązywał do aplikacji, którą moglibyśmy stworzyć na potrzeby urządzeń mobilnych. Będzie to odrębny layout, który zakodujemy w HTML i CSS a następnie dopiszemy do niego atrakcyjną animację z pomocą jQuery. W lekcji bonusowej do tego kursu pokażę Ci, jak można stworzyć podobną animację bez kodowania z pomocą programu Adobe Edge Animate.Zobacz gotową animację >>Najciekawsze elementy podstronOmówimy również tworzenie ciekawych elementów podstron, pobierzemy i zainstalujemy na naszą stronę dodatki takie jak CarouFredSel, z pomocą którego zakodujemy działający slider do zdjęć oraz najnowszych artykułów. Zgodnie z etapami pracy, które wykonamy w kursie, będziesz mógł sam zakodować pozostałe podstrony naszej witryny, a gdybyś nie mógł sobie z czymś poradzić - dołączyliśmy kompletne pliki źródłowe działającej witryny, które okażą się pomocne.Geolokalizacja w przeglądarce i Google Maps APIJedną z ciekawych funkcjonalności, które zakodujemy na naszej stronie będzie wykorzystanie położenia użytkownika do tego, aby z pomocą Google Maps API dla JavaScript wyświetlić mapkę, na którą dynamicznie naniesiemy markery, które będą zmieniały swoją wielkość w zależności od ilości restauracji zrecenzowanych na naszej stronie.Podsumowując, kurs zawiera między innymi:Proces projektowania layoutu w Adobe PhotoshopPraktyczne wskazówki pracy z grafiką projektów webowychWykorzystanie typografii na stronachProjektowanie na potrzeby WordPressCięcie grafiki na potrzeby strony WWWKodowanie do HTML5 oraz CSS3Pracę z jQuery oraz dodatkowymi bibliotekamiTworzenie animacji w jQuery i Edge AnimateWykorzystanie geolokalizacji i API Google MapsCiekawe porady, tipsy i trikiI wiele, wiele więcej!Dla kogo jest ten kurs?Kurs Photoshop do HTML przeznaczony jest dla osób, które mają już opanowane podstawy CSS oraz HTML, jak również podstawy Photoshop. Osobom początkującym polecamy zapoznanie się w pierwszej kolejności z kursem HTML i CSS od Podstaw, jak również kursem Photoshop CC od Podstaw. W kursie skoncentrowaliśmy się na praktycznej pracy pomijając omówienie podstawowych mechanizmów działania tego języka. Dodatkowe materiały, których przerobienie nie jest konieczne, ale może pomóc przy nauce z kursem Photoshop do HTML to Kurs HTML5, Kurs JavaScript i Kurs jQuery. Doskonałym uzupełnieniem wiedzy o Photoshop jest natomiast Kurs Photoshop dla Designerów.Dlaczego wybrać właśnie ten kurs?Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję z tworzonych projektów.Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i przygotować ciekawe projekty w Photoshop, HMTL i CSS.Uczysz się na praktycznych przykładach. Zebrane techniki wynikają z praktyki a same dodatki które stworzymy są omówione kompleksowo. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także skrótów, które oszczędzą Ci godziny pracy i poszukiwań.