آموزش طراحی وب Adobe Dreamweaver CC از Adobe Illustrator Mockups
Adobe Dreamweaver CC Web Design from Adobe Illustrator Mockups
نمای کلی
سلام، اسم من دن است و با هم می خواهیم با استفاده از Adobe Dreamweaver یک وب سایت نمونه کار بسازیم.
ما از ابزارهای قالب‌سازی مفید Dreamweaver برای به‌روزرسانی سایت خود بسیار آسان استفاده خواهیم کرد. ما «منوی همبرگر» تلفن همراه خود را از ابتدا با یادگیری برخی از jQuery جاوا اسکریپت اولیه ایجاد خواهیم کرد.
من یک مربی دارای گواهینامه Adobe هستم و بهتر است از نزدیک با خود Adobe همکاری کنم تا ویدیوهای کمک آنلاین خود را توسعه دهم. من همچنین یک سخنران Dreamweaver در کنفرانس عظیم Adobe Max در لاس وگاس 2017 هستم. من حتی در حال حاضر در نسخه Dreamweaver شما هستم... ادامه دهید آن را امتحان کنید... آموزش سریع Dreamweaver را باز کنید برو به راهنما - حق با من است آنجا!
این دوره برای مبتدیان است. شما نیازی به دانش قبلی در Dreamweaver یا تجربه طراحی وب ندارید. ما از Dreamweaver 'split' view استفاده خواهیم کرد تا بتوانیم از همه ابزارهای بصری خوب و همچنین انجام برخی اصلاحات ساده در اینجا در کد استفاده کنیم.
اکنون طراحی وب گاهی اوقات می تواند مشکل باشد، بنابراین من اینجا هستم تا کمک کنم - اگر گیر کردید فقط به من پیام دهید. فایل های تمرینی نیز وجود دارد که می توانید آن را دنبال کنید. من حتی یک نسخه کامل از وب‌سایت را در انتهای هر ویدیو ذخیره می‌کنم تا اگر درست کار نمی‌کنید، بتوانید دوباره وب‌سایت خود را بررسی کنید.
برای سایتی که با هم می سازیم، این پیوند را اینجا بررسی کنید. بیایید هیجان زده شویم که بالاخره می توانیم مانند یک طراح وب حرفه ای یک وب سایت بسازیم. شما را در کلاس می بینیم.
الزامات چیست؟
- شما به یک کپی از Adobe Dreamweaver CC 2017 یا بالاتر نیاز دارید. یک نسخه آزمایشی رایگان را می توان از Adobe دانلود کرد.
- هیچ مهارت قبلی در طراحی وب مورد نیاز نیست.
- هیچ مهارت قبلی Dreamweaver لازم نیست.
قرار است از این دوره چه چیزی به دست بیاورم؟
- 39 سخنرانی بیش از 3 ساعت محتوای با ساختار مناسب!
- شما یاد خواهید گرفت که از ابتدا یک وب سایت نمونه کارها پاسخگو بسازید.
- بیاموزید که چگونه از Illustrator یک طراحی بگیرید و یک وب سایت حرفه ای ایجاد کنید.
- نحوه استفاده از قالب ها در Dreamweaver.
- نسخه دسکتاپ موبایل، تبلت وب سایت را ایجاد کنید.
- ناوبری پاسخگو سفارشی خود را با منوی همبرگر بسازید.
- مقدمه ای بر JavaScript jQuery.
- چگونه وب سایت خود را در اینترنت منتشر کنید.
- راه‌هایی برای پیش‌نمایش طرح‌هایتان مستقیماً در دستگاه همراهتان.
- چگونه از تصاویر نمونه کارها بیشترین بهره را ببرید.
- چگونه از فونت های وب زیبا در طراحی های خود استفاده کنید.
- شما فایل های تمام شده را دریافت خواهید کرد تا هرگز عقب نمانید.
- برگه تقلب فایل های تمرینی قابل دانلود.
- پشتیبانی انجمن از طرف من و بقیه خدمه BYOL.
- تمام تکنیک های مورد استفاده توسط طراحان وب سایت حرفه ای.
مخاطب هدف چیست؟
- بله: این دوره برای مبتدیان است. برای افرادی که تازه وارد دنیای طراحی وب شده اند. هیچ تجربه قبلی Dreamweaver لازم نیست.
- خیر: این دوره برای افراد با تجربه در استفاده از HTML CSS مناسب نیست.
______________
به دنبال الهام بیشتر هستید؟ برای کشف کلاس های بیشتر در Adobe Illustrator بروید.
در این مجموعه ما این طرح ثابت را از ایلاستریتور یا فتوشاپ می گیریم و با هم، گام به گام، همه چیز را در HTML، CSS جاوا اسکریپت می سازیم. ما ناوبری خود را انجام خواهیم داد. ما تنظیماتی را انجام خواهیم داد تا همه چیز در دستگاه های مختلف تلفن همراه عالی به نظر برسد.
ما با رنگ فونت های زیبا کار خواهیم کرد حتی Google Analytics را به سایت خود اضافه می کنیم تا اطلاعات شگفت انگیزی در مورد اینکه دقیقا چه کسی از سایت شما بازدید می کند به دست آوریم.
درس ها Lessons
-
برنامه ریزی برای قالب Dreamweaver ما Planning for our Dreamweaver template
-
چگونه تصاویر خود را در Dreamweaver پاسخگو کنیم تا با اندازه صفحه مطابقت داشته باشند How to make your images responsive in Dreamweaver to match the page size
-
نحوه ایجاد و پیوند صفحات جدید در Dreamweaver با استفاده از الگوها How to create & link new pages in Dreamweaver using templates
-
نحوه ایجاد صفحات جدید بر اساس قالب Dreamweaver How to create new pages based on a Dreamweaver template
-
منوی همبرگر ما را در کنار هم قرار می دهیم Styling our hamburger menu getting our ul menu to stack side by side
-
نحوه اضافه کردن تگ فوتر HTML5 به وب سایت با استفاده از Adobe Dreamweaver How to add the HTML5 footer tag to a website using Adobe Dreamweaver
-
نحوه اضافه کردن فونت های مختلف به وب سایت در Dreamweaver How to add different fonts to a website in Dreamweaver
-
چگونه یک جعبه قهرمان واکنشگرا برای وب سایت خود در Dreameaver ایجاد کنیم How to create a responsive hero box for our website in Dreameaver
-
چگونه یک صفحه HTML جدید در Dreamweaver ایجاد کنیم How to create a new HTML page in Dreamweaver
-
نحوه اضافه کردن تگ فوتر HTML5 به وب سایت با استفاده از Adobe Dreamweaver How to add the HTML5 footer tag to a website using Adobe Dreamweaver
-
چگونه وب سایت خود را با استفاده از کانتینر در Dreamweaver مرکز کنید How to center your website in Dreamweaver using a container
-
نحوه استفاده از تگ اصلی HTML5 در Dreamweaver How to use the HTML5 main tag in Dreamweaver
-
نحوه ایجاد یک شبکه تصویر واکنشگرا در Dreamweaver How to create a responsive image grid in Dreamweaver
-
مقدمه Introduction
-
نحوه استفاده از تگ اصلی HTML5 در Dreamweaver How to use the HTML5 main tag in Dreamweaver
-
نحوه ایجاد منوی کشویی موبایل همبرگر در Dreamweaver Part1 How to create a hamburger mobile drop down menu in Dreamweaver Part1
-
چگونه وب سایت خود را از طریق Dreamweaver در هاست اینترنتی آپلود کنیم How to upload your website to the internet hosting via Dreamweaver
-
راه اندازی وب سایت ها Setting up Websites
-
نحوه اضافه کردن و تغییر استایل یک قانون افقی HR در Dreamweaver How to add and change the styling of a horizontal rule HR in Dreamweaver
-
نحوه اضافه کردن فونت های مختلف به وب سایت در Dreamweaver How to add different fonts to a website in Dreamweaver
-
نحوه ایجاد منوی کشویی موبایل همبرگر در Dreamweaver Part1 How to create a hamburger mobile drop down menu in Dreamweaver Part1
-
چگونه در Adobe Dreamweaver یک قالب بسازم How do I make a template in Adobe Dreamweaver
-
نحوه تغییر یا تنظیم سبک های CSS در وب سایت Dreamweaver How to change or adjust the CSS styles in your Dreamweaver website
-
استفاده از جاوا اسکریپت جی کوئری برای ایجاد منوی برگر کشویی موبایل در Dreamweaver Using Javascript jQuery to make a mobile dropdown burger menu in Dreamweaver
-
اصلاح سبک منوی کشویی برگر موبایل در Dreamweaver Fixing the style of the mobile burger drop down menu in Dreamweaver
-
چگونه یک جعبه قهرمان واکنشگرا برای وب سایت خود در Dreameaver ایجاد کنیم How to create a responsive hero box for our website in Dreameaver
-
استفاده از جاوا اسکریپت جی کوئری برای ایجاد منوی برگر کشویی موبایل در Dreamweaver Using Javascript jQuery to make a mobile dropdown burger menu in Dreamweaver
-
چگونه وب سایت Dreamweaver خود را بر روی تلفن همراه یا تبلت تست کنید How to test your Dreamweaver website on a mobile phone or tablet
-
چگونه قسمت هایی از یک وب سایت را در نماهای مختلف مانند موبایل یا دسکتاپ خاموش کنیم How to turn off parts of a website in different views like mobile or desktop
-
فایل های تمرینی Exercise files
-
جابجایی برچسب ها در Dreamweaver Moving tags around in Dreamweaver
-
تمرین کلاس Dreamweaver Dreamweaver class exercise
-
چگونه تصاویر خود را در Dreamweaver پاسخگو کنیم تا با اندازه صفحه مطابقت داشته باشند How to make your images responsive in Dreamweaver to match the page size
-
چگونه وب سایت خود را با استفاده از کانتینر در Dreamweaver مرکز کنید How to center your website in Dreamweaver using a container
-
یک تصویر پس زمینه که خارج از ظرف اصلی ما در Dreamweaver است اضافه کنید Add a background image that is outside our main container in Dreamweaver
-
چگونه قسمت هایی از یک وب سایت را در نماهای مختلف مانند موبایل یا دسکتاپ خاموش کنیم How to turn off parts of a website in different views like mobile or desktop
-
نحوه ایجاد یک وب سایت که برای تبلت های تلفن همراه با استفاده از Dreamweaver تغییر می کند How to a website that changes for mobile cell phones tablets using Dreamweaver
-
چگونه Google Analytics را به وب سایت Dreamweaver خود اضافه کنید How to adding Google Analytics to your Dreamweaver website
-
مقدمه Introduction
-
بهترین روش برای پیش نمایش وب سایت خود در Adobe Dreamweaver How best to preview your website in Adobe Dreamweaver
-
تمرین کلاس Dreamweaver Dreamweaver class exercise
-
چگونه با استفاده از Dreamweaver اولین برگه سبک CSS خود را ویرایش کنید How to create edit style your first CSS style sheet in using Dreamweaver
-
چگونه یک صفحه HTML جدید در Dreamweaver ایجاد کنیم How to create a new HTML page in Dreamweaver
-
چگونه وب سایت Dreamweaver خود را بر روی تلفن همراه یا تبلت تست کنید How to test your Dreamweaver website on a mobile phone or tablet
-
با استفاده از Dreamweaver فاصله فونت های یک وب سایت را برای اندازه های تبلت موبایل تغییر دهید Change fonts spacing of a website for Tablet Mobile sizes using Dreamweaver
-
اصلاح سبک منوی کشویی برگر موبایل در Dreamweaver Fixing the style of the mobile burger drop down menu in Dreamweaver
-
نحوه ایجاد یک شبه clearfix بعد از کلاس در Adobe Dreamweaver How to create a clearfix pseudo after class in Adobe Dreamweaver
-
چگونه Google Analytics را به وب سایت Dreamweaver خود اضافه کنید How to adding Google Analytics to your Dreamweaver website
-
فایل های تمرینی Exercise files
-
چگونه با استفاده از Dreamweaver اولین برگه سبک CSS خود را ویرایش کنید How to create edit style your first CSS style sheet in using Dreamweaver
-
نحوه اضافه کردن و تغییر استایل یک قانون افقی HR در Dreamweaver How to add and change the styling of a horizontal rule HR in Dreamweaver
-
بهترین روش برای پیش نمایش وب سایت خود در Adobe Dreamweaver How best to preview your website in Adobe Dreamweaver
-
هنگامی که در Dreamweaver به سمت چپ شناور می شوید، مشکلات مربوط به تگ های div را برطرف کنید Fix problems with div tags when you float left in Dreamweaver aka clearing the float
-
برنامه ریزی برای قالب Dreamweaver ما Planning for our Dreamweaver template
-
چگونه وب سایت خود را از طریق Dreamweaver در هاست اینترنتی آپلود کنیم How to upload your website to the internet hosting via Dreamweaver
-
نحوه ایجاد و پیوند صفحات جدید در Dreamweaver با استفاده از الگوها How to create & link new pages in Dreamweaver using templates
-
نحوه ایجاد یک دکمه در Adobe Dreamweaver CC How to create a button in Adobe Dreamweaver CC
-
نحوه ایجاد ستون های مختلف برای وب سایت های تبلت دسکتاپ موبایل در Dreamweaver How to make different columns for desktop tablet mobile websites in Dreamweaver
-
یک تصویر پس زمینه که خارج از ظرف اصلی ما در Dreamweaver است اضافه کنید Add a background image that is outside our main container in Dreamweaver
-
منوی همبرگر ما را در کنار هم قرار می دهیم Styling our hamburger menu getting our ul menu to stack side by side
-
نحوه تغییر یا تنظیم سبک های CSS در وب سایت Dreamweaver How to change or adjust the CSS styles in your Dreamweaver website
-
هنگامی که در Dreamweaver به سمت چپ شناور می شوید، مشکلات مربوط به تگ های div را برطرف کنید Fix problems with div tags when you float left in Dreamweaver aka clearing the float
-
جابجایی برچسب ها در Dreamweaver Moving tags around in Dreamweaver
-
نحوه ایجاد یک دکمه در Adobe Dreamweaver CC How to create a button in Adobe Dreamweaver CC
-
چگونه در Adobe Dreamweaver یک قالب بسازم How do I make a template in Adobe Dreamweaver
-
نحوه ایجاد ستون های مختلف برای وب سایت های تبلت دسکتاپ موبایل در Dreamweaver How to make different columns for desktop tablet mobile websites in Dreamweaver
-
نحوه ایجاد صفحات جدید بر اساس قالب Dreamweaver How to create new pages based on a Dreamweaver template
-
راه اندازی وب سایت ها Setting up Websites
-
نحوه ایجاد یک وب سایت جدید در Dreamweaver How to create a new website in Dreamweaver
-
با استفاده از Dreamweaver فاصله فونت های یک وب سایت را برای اندازه های تبلت موبایل تغییر دهید Change fonts spacing of a website for Tablet Mobile sizes using Dreamweaver
-
نحوه ایجاد یک وب سایت جدید در Dreamweaver How to create a new website in Dreamweaver
-
نحوه ایجاد یک شبکه تصویر واکنشگرا در Dreamweaver How to create a responsive image grid in Dreamweaver
-
نحوه ایجاد یک شبه clearfix بعد از کلاس در Adobe Dreamweaver How to create a clearfix pseudo after class in Adobe Dreamweaver
-
نحوه ایجاد یک وب سایت که برای تبلت های تلفن همراه با استفاده از Dreamweaver تغییر می کند How to a website that changes for mobile cell phones tablets using Dreamweaver
https://donyad.com/d/fa95
Daniel Scott
مربی معتبر Adobe
من معلم طراح دیجیتال در BYOL International هستم. به اشتراک گذاشتن چیزی است که من هستم، و تدریس جایی است که در بهترین حالتم هستم، زیرا من در هر دو طرف این معادله بوده ام، و دریافت آموزش های مفید راه معنادار من برای عضویت در جامعه خلاق است.
من مدت زیادی را صرف تماشای یادگیری و آموزش دیگران کرده ام تا نحوه کارم با شما را اصلاح کنم تا کارآمد، مفید و مهمتر از همه به یاد ماندنی باشم. من می خواهم آنچه را که به شما نشان داده ام به آینده ای روشن منتقل کنید.
من یک همسر (یک دختر دوست داشتنی ایرلندی) و بچه دارم. من در بسیاری از مکان‌ها زندگی و کار کرده‌ام (همانطور که کیوی‌ها تمایل دارند) - اما بیشتر 14 سال خلق و تدریس من یک موضوع مهم داشته است: همراهی دیگران برای سوار شدن در حالی که همه ما سعی می‌کنیم دنیا را با داستان‌هایمان تغییر دهیم. ، کار عشق و هنر ما.
من یک مربی معتبر Adobe (ACI) در ایرلند هستم. من همچنین یک متخصص Adobe Certified (ACE) هستم و دوره آموزشی Adobe Certified Associate (ACA) را گذرانده ام. و من فقط Adobe کار نمی کنم. به یاد داشته باشید، رسانه یک اصطلاح بسیار گسترده است - دیجیتال مرزها را شکست، بنابراین همه ما دائماً در حال یادگیری هستیم.
من بیش از 14 سال است که تدریس می کنم. من از یک طراح رسانه و تولید کننده محتوا آمده ام - بنابراین می دانم که شما در حال حاضر دقیقا در کجا هستید. من اونجا بودم. من عاشق این چیزها هستم چاپ، نشر دیجیتال، وب و ویدئو. من می توانم ببینم که چگونه همه چیز به هم وصل می شود. و من می‌توانم ببینم چگونه می‌توانیم آن اتصالات را به اشتراک بگذاریم.
من لپ تاپ Bring Your Own را در نیوزیلند آنلاین ساختم. من یک تیم عالی دارم که با من کار می کند تا BYOL را در راس آموزش Adobe و رسانه های دیجیتال نگه دارم. من کسب و کار را درک می کنم، من یکی از آن ها را دارم - بنابراین می دانم که چقدر مهم است که آن را به درستی انجام دهم و کاری کنم که برای شما کار کند.
دنیل والتر اسکات
نمایش نظرات