آموزش کامل طراحی وب سایت با adobe dreamweaver cc به طور جامع و کاربردی

درباره آموزش کامل طراحی وب سایت با adobe dreamweaver cc باید گفت که یادگیری راه اندازی و ساخت انواع سایت با این ابزار فوق العاده بسیار آسان است. به نحوی که نیازی به داشتن مهارت و دانش خاصی ندارید. بلکه تنها با رعایت اصول و مراحل کار می توانید سایتی کاربردی و مفید را طراحی و راه اندازی کنید.‌

مقدمه

در ادامه این مقاله به بررسی کامل adobe dreamweaver cc می پردازیم و تمامی مراحل را به صورت گام به گام شرح خواهیم داد. آنچه که در این مطلب مطالعه خواهید کرد:

• نکات مهم درباره آموزش کامل طراحی وب سایت با adobe dreamweaver cc

•  adobe dreamweaver cc چیست؟

• آموزش طراحی وب سایت با adobe dreamweaver cc به صورت گام به گام

•  مرحله اضافه کردن تصویر جهت آموزش کامل طراحی وب سایت با adobe dreamweaver cc

•  مرحله انجام پیش نمایش جهت آموزش کامل طراحی وب سایت با adobe dreamweaver cc

adobe dreamweaver cc چیست؟

پیش از پرداختن به آموزش کامل طراحی وب سایت adobe dreamweaver cc باید بدانید که این امکان منحصر به فرد یک نرم افزار جهت ساخت وب سایت است. عمر این نرم افزار تقریبا ۲۰ سال است و برای اولین بار به وسیله Macromedia طراحی و ساخته شد. بعد از چند سال و در سال ۲۰۰۵ میلادی توسط شرکت Adobe خریداری شد.

از آن زمان تاکنون این نرم افزار به وسیله این شرکت چندین بار مورد بازبینی و به روز رسانی قرار گرفته است. لازم به ذکر است که نرم افزار یاد شده در حال حاضر در انحصار شرکت Adobe Creative Cloud است. به طور کلی این نرم افزار نرم افزاری کاربردی و مهم است که دارای امکانات کاملی در جهت توسعه نرم‌افزار می باشد. همچنین می توان آن را بخشی از یک نرم افزار دانست که قابلیت ترکیب نرم افزار های مختلف را برای طراحی سایت دارد.

نکات مهم درباره آموزش کامل طراحی وب سایت با adobe dreamweaver cc

نکته مهم در خصوص آموزش کامل طراحی وب سایت با adobe dreamweaver cc این است که آموزش به کمک این نرم افزار یک امکان خاص و ویژه است که در فضایی مابین CMS و ویرایشگر کد واقع شده است. منظور از CMS بخشی است که از طریق رابط بصری تمام جوانب و بخش های وب سایت کنترل می شود.

آموزش کامل طراحی وب سایت با adobe dreamweaver cc به صورت گام به گام

اولین قدم در آموزش کامل طراحی وب سایت با adobe dreamweaver cc این است که برنامه خود را انتخاب و نصب کنید. برای انجام این کار باید نرم افزار Dreamweaver را خریده و سپس آن را نصب کرد. بنابراین لازم است وارد وب سایت Adobe شده و گزینه طراحی را انتخاب کنید. بعد از انتخاب کردن اشتراک خود باید نرم افزار مربوطه را بارگیری کرده سپس مراحل و دستورات ارائه شده را به صورت کامل اجرا کنید.در صورتی که پیشتر برنامه Creative Cloud را روی سیستم خود نصب کرده‌اید آن را باز کنید و بخش برنامه ها را انتخاب کنید.

در دومین مرحله از آموزش طراحی وب سایت با سایت با adobe dreamweaver cc لازم است گزینه Dreamweaver را از لیست پیش روی خود انتخاب کنید. حال جهت راه اندازی اولیه بعد از نصب Dreamweaver، به شکل خودکار فعال شده و صفحه ای پیش روی شما باز می شود. بعد از طی این مراحل گزینه نه من آن را ندارم را انتخاب کنید. با این انتخاب شما در مسیر اولیه راه اندازی سایت با Dreamweaver قدم خواهید گذاشت. در صورتی که برای اولین بار قصد استفاده از این نرم افزار را دارید گزینه “Standard Workspace” را انتخاب کنید. با این کار امکان ویرایش کردن تصویر یا کد ساخت و شخصی سازی سایت برای شما فراهم می شود.

در مرحله بعدی آموزش کامل طراحی وب سایت با adobe dreamweaver cc باید طرح رنگ را جهت استفاده در ویرایشگر خود انتخاب کنید. برای این کار باید یکی از طرح های رنگی را مطابق با سلیقه خود انتخاب کنید. حال می توانید از یک نمونه سایت یا الگوی خالی استفاده کرده و یا یک ویدیو آموزشی را تماشا کنید. در این مرحله یک پایه سایت اصلی در دسترس خواهید داشت و می توانید سایر مراحل را بر روی آن آغاز کنید. ابتدا باید سایت جدید خود را نامگذاری کنید و محل ذخیره فایل های سایت را مشخص کنید. همچنین پوشه ای را انتخاب کنید و تمامی اطلاعات و پروژه های وب سایت را در آن نگهداری کنید.

در مرحله بعدی جهت آموزش کامل طراحی وب سایت با adobe dreamweaver cc باید بر روی تنظیمات پیشرفته کلیک کنید. و در بخش فهرست کشویی گزینه‌ ها اطلاعات محلی را انتخاب کنید. سپس پوشه تصاویر ایجاد شده را انتخاب کنید و بر روی گزینه ذخیره کلیک کنید. در این مرحله شما آماده ساخت وب سایت مورد نظرتان هستید. برای شروع صفحه اول را در سایت ایجاد کنید. لازم به ذکر است که صفحه اولی که ایجاد می کنید در حقیقت همان صفحه اصلی سایت شما است. جهت انجام این مرحله گزینه File> New را انتخاب کنید و سپس بر روی گزینه HTML از میان لیست نوع سند کلیک کنید. حال نوبت به نامگذاری فایل index.html می رسد. انجام این مرحله کمک شایانی به مناسب سازی ساختار سایت شما خواهد کرد.

مرحله اضافه کردن تصویر جهت آموزش کامل طراحی وب سایت با adobe dreamweaver cc

بعد از گذراندن این مرحله از آموزش کامل طراحی وب سایت با adobe dreamweaver cc قطعا شما با یک پنجره خالی روبرو می شوید. نگران نباشید این پنجره همان سایت شما است که باید بر روی آن کار کنید. در مرحله بعدی باید هدر وب سایت خود را ایجاد کنید. برای انجام این کار باید عنوان سایت خود را ایجاد کنید و بر روی قسمت بالای صفحه کلیک کنید. سپس بر روی گزینه قرار دادن که در گوشه سمت راست بالای صفحه قرار دارد کلیک کنید. بعد از کلیک باید گزینه Header را انتخاب کنید و متن هدر را در قسمت کد ویرایشگر خود برجسته کنید.

در مرحله بعدی جعبه کشویی عنوان و H1 را انتخاب کنید. بعد از طی مسیر یاد شده طراحی هدر صفحه انجام گرفته است. بعد از طراحی هدر باید قلم خود را تغییر دهید و در صورتی که در منوی CSS Designer قرار ندارید دوباره بر روی آن کلیک کنید و “#header h1” را که جدیدا طراحی کرده اید انتخاب کنید.

در مرحله بعدی که تقریبا مرحله پایانی از آموزش کامل طراحی وب سایت با adobe dreamweaver cc است بر روی تیک کادر گزینه نمایش مجموعه کلیک کنید تا تعدادی گزینه کاربردی برای تان نمایان شوند. این گزینه ها مربوط به سفارشی سازی سایت شما هستند و شما می توانید اقداماتی مانند اندازه متن، تراز کردن، تغییر نوع و اندازه قلم، تراز و اضافه کردن مرزها و موارد دیگر را بر روی سایت خود انجام دهید.

مرحله انجام پیش نمایش جهت آموزش کامل طراحی وب سایت با adobe dreamweaver cc

بعد از بهره گیری از هدر و محتواهای دیگر باید تصویری را برای سایت خود در نظر بگیرید و آن را به سایت اضافه کنید. برای این کار باید بر روی برگ CC Libraries کلیک کرده و در بخش جستجوی تصویر تصویر مورد نظر را انتخاب و بارگذاری کنید. بعد از بارگذاری تصویر در سیستم خود باید بر روی گزینه باز کردن کلیک کنید تا تصویر به سایت شما اضافه شود.

زمانی که موفق به طراحی اولین نسخه از وب سایت خود شدید باید آن را امتحان کنید و نحوه عملکرد آن را مشاهده کنید. خوشبختانه نرم افزار Dreamweaver دارای قابلیت ایجاد پیش نمایش سایت طراحی شده را دارد. بنابراین می توانید سایت خود را در انواع مرورگرهای وب و دستگاه‌های تلفن همراه امتحان کنید. با امتحان کردن سایت می توان خطاها و کمبود ها و نقص های احتمالی در سایت را شناسایی کرده و در جهت رفع آنها اقدام کرد. جهت انجام پیش نمایش سایت کافی است بر روی گزینه پیش نمایش کلیک کنید و مرورگر مد نظر تان را جهت نمایش سایت انتخاب کنید.

سخن پایانی

در متن فوق تا حد ممکن به آموزش کامل طراحی وب سایت با adobe dreamweaver cc پرداختیم و مراحل اولیه و پیش نمایش آن را شرح دادیم. شما با فراگیری فرایند طراحی سایت به کمک این نرم افزار می توانید انواع سایت های کاربردی را طراحی کنید.