آموزش dreamweaver

راهنمای گام به گام برای ایجاد وب سایت با استفاده از Dreamweaver

آموزش Dreamweaver

راهنمای گام به گام برای ایجاد وب سایت با استفاده از Dreamweaver

Dreamweaver یک برنامه کاربردی است که به شما امکان طراحی، کد گذاری و مدیریت وب سایت ها را می دهد. آنچه در مورد Dreamweaver جالب است، این است که هر دو امکان نوشتن کد و ایجاد یک وب سایت با استفاده از رابط بصری را ارائه می دهد.

در این آموزش Dreamweaver، شما همه چیز را که باید برای ایجاد وب سایت با دریم ویور بدانید را یاد خواهید گرفت. شما می دانید که برنامه و آنچه که می تواند انجام دهد، ویژگی های برجسته و نحوه تنظیم آن است. پس از آن، شما یک راهنمای گام به گام در مورد چگونگی ایجاد یک وب سایت ساده با دریم ویور و سپس انتقال آن به سرور را خواهید داشت.

Dreamweaver چیست و چگونه کار می کند؟

Dreamweaver یک IDE (محیط توسعه یکپارچه) است. به این معناست که این یک تکه از نرم افزار است که ابزارهای مختلفی را برای طراحی وب و توسعه آسان تر می کند.

چه چیزی این را خاص می کند که آن را در جایی بین یک سیستم مدیریت محتوا (که در آن شما کنترل همه چیز در مورد وب سایت خود را از طریق یک رابط بصری) و یک ویرایشگر کد خالص دارید. در اینجا این که چگونه بخش های مختلف کار می کنند را توضیح خواهیم داد.

ایجاد وب سایت ها از طریق یک رابط طراحی بصری

جعبه ابزار بصری اساسا به شما اجازه می دهد که وب سایت های خود را با ماوس بسازید. این به شما اجازه می دهد که عناصر وب سایت را به نحوی که یک طرح را در Word ایجاد می کنید، قرار دهید. اساسا شما وب سایت خود را می بینید همانطور که در مرورگر مشاهده می کنید اما همچنین می توانید آن را دستکاری کنید.

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

از سوی دیگر، اگر شما قادر به برنامه نویسی هستید، Dreamweaver دارای ابزارهای لازم برای آن است.

عمل کردن به عنوان یک ویرایشگر کد Full-fledged

بخش دوم Dreamweaver یک ویرایشگر کد کامل است. که مجهز به تمام توابع استاندارد است، از جمله:

Syntax highlighting – به این معنا است که Dreamweaver از عناصر مختلف (مانند اپراتورها، متغیرها، و غیره) در رنگ های مختلف برجسته می شود تا کد را برای خواندن و اصلاح آسان تر کند.

تکمیل کد – تکمیل کد به نحوی مشابه به عنوان تکمیل خودکار بر روی گوشی شما کار می کند. شروع به تایپ کنید و ویرایشگر پیشنهاداتی را برای آنچه که میخواهید بنویسید خواهد داد. به این ترتیب، لازم نیست همه چیز را به طور کامل تایپ کنید.

Code collapsing – یکی دیگر از ویژگی ها برای ایجاد کد ساده تر برای خواندن است. که اجازه می دهد تا شما به صورت بصری، جزئی از کد خود را زمانی که شما به آنها نیاز ندارید، بشکنید. به این ترتیب، شما مجبور نیستید از طریق کل فایل حرکت کنید اما می توانید تنها با قطعاتی که نیاز دارید کار کنید.

Dreamweaver از مهم ترین زبان های طراحی وب (HTML5، CSS، JavaScript، PHP) و بسیاری دیگر پشتیبانی می کند.

بهترین قسمت: اگر هر چیزی را در کد خود تغییر دهید، دریم ویور به طور خودکار آن را در سمت بصری نیز نمایش می دهد. به این ترتیب، شما می توانید بدون نیاز به آپلود فایل های خود را به یک سرور در مرورگر ببینید.

ویژگی های بسیار بیشتری وجود دارد و شما بسیاری از آنها را در عمل در آموزش Dreamweaver خواهید دید.

بیشتر بخوانید»»» راهنمای گام به گام فریمورک Foundation

راه اندازی Dreamweaver

دانلود و نصب دریم ویور

هنگامی که این برنامه را از وب سایت رسمی دریافت می کنید، فقط فایل نصب را دانلود کنید، آن را اجرا کنید و دستورالعمل ها را دنبال کنید.

اولین راه اندازی

هنگامی که شما Dreamweaver را شروع می کنید، این صفحه را خواهید دید.

dreamweaver-first-startup
dreamweaver-first-startup

اگر قبلا هرگز از این برنامه استفاده نمیکردید، نه، من جدید هستم را انتخاب کنید. دریم ویور شما را از طریق  wizard setup هدایت می کند. اولین گام این است که انتخاب کنید که آیا از فضای کاری برای توسعه دهندگان یا یک فضای کاری استاندارد استفاده خواهید کرد.

آموزش dreamweaver
آموزش dreamweaver

از آنجا که این یک آموزش مبتدی Dreamweaver است، نسخه استاندارد را انتخاب کنید. پس از آن، شما می توانید یک تم رنگی برای فضای کاری خود از چهار گزینه مختلف انتخاب کنید.

آموزش dreamweaver
آموزش dreamweaver

گام نهایی این است که از یک فایل نمونه، پروژه جدید یا موجود یا آموزش ویدیویی، کدام را می خواهید.

آموزش dreamweaver
آموزش dreamweaver

انتخاب کنید تا با یک پوشه جدید یا موجود شروع کنید و فرآیند راه اندازی انجام شود.

حالا شروع کنید به یک پروژه و یاد بگیرید چگونه یک وب سایت با Dreamweaver ایجاد کنید.

بیشتر بخوانید»»» تاریخچه وردپرس از سال 2003 تا 2018

نحوه طراحی وب سایت با استفاده از Dreamweaver

1. یک سایت جدید ایجاد کنید.

اولین قدم این است که یک سایت جدید ایجاد کنید. برای آن، به site -> new site بروید این شما را به این صفحه می برد:

آموزش dreamweaver
آموزش dreamweaver

اولین قدم این است که یک نام برای سایت خود انتخاب کنید. سپس شما باید مکان ذخیره آن را انتخاب کنید. اما معمولا برای سادگی، تمام پروژه ها را در یک مکان ذخیره کنید.

اطلاعات محلی در تنظیمات پیشرفته خیلی مهم است.

آموزش dreamweaver
آموزش dreamweaver

مطمئن شوید که بر روی آیکون پوشه در سمت راست کلیک کنید که در آن پوشه Default Images قرار دارد. سپس به دایرکتوری تازه ایجاد شده خود بروید، آن را باز کنید، یک پوشه جدید به نام تصاویر ایجاد کنید و آن را به عنوان پوشه پیش فرض خود انتخاب کنید. به این ترتیب Dreamweaver تصاویر مرتبط با سایت شما را به طور خودکار در آنجا ذخیره خواهد کرد.

برای این کار، اکنون برای ذخیره کردن مجدد به فضای کاری خود کلیک کنید.

2. ایجاد فایل HomePage

اکنون که شما یک پروژه برای سایت ایجاد کرده اید، ما با صفحه اصلی شروع خواهیم کرد.

اگر Dreamweaver این گزینه را به شما ارائه نمی کند، به File> New بروید. شما می توانید یک فایل کاملا جدید ایجاد کنید یا از یک قالب موجود استفاده کنید.

یک فایل جدید در Dreamweaver ایجاد کنید.

HTML به طور پیش فرض تنظیم شده است و می توانید آن را همانطور که هست مشاهده کنید. برای عنوان سند، ورودی index.html و Create را انتخاب کنید. که به صفحه زیر می روید.

آموزش dreamweaver
آموزش dreamweaver

این همان چیزی است که ما در ابتدا ذکر کردیم: یک نمایش زنده از آنچه سایت شما به نظر می رسد (در حال حاضر خالی است) و کد پشت آن است. شما همچنین متوجه خواهید شد که Dreamweaver به صورت خودکار برخی از آنها را ایجاد کرده است.

Source

دیگر مقالات مفید سایت: