طراحی سایت با دریم ویور

طراحی سایت با دریم ویور

طراحی سایت با دریم ویور

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

 

طراحی سایت با دریم ویور
طراحی سایت با دریم ویور

Adobe DreamWeaver 

اگر تا به حال نام Dreamweaver را نشنیده اید ، این برنامه ای از Adobe است که به شما امکان طراحی ، ساخت
و استقرار وب سایت ها را می دهد. حتی اگر قبلاً در زندگی خود هیچ کدی را لمس نکرده اید ، می توانید
طراحی سایت با دریم ویور Dreamweaver را از طریق رابط بصری کار کنید.

نحوه کار با دریم ویور

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

Dreamweaver چیست؟

Dreamweaver یک نرم افزار ایجاد وب سایت است که بیش از 20 سال است که وجود دارد. این نرم افزار ابتدا
توسط Macromedia توسعه داده شد و سپس در سال 2005 توسط Adobe خریداری شد. این نرم افزار چندین بار
تکرار شده است و اکنون بخشی از مجموعه Adobe Creative Cloud است. این بدان معناست که برای استفاده
طراحی سایت با دریم ویور از نرم افزار باید یک اشتراک ماهانه خریداری کنید.

نرم افزار دریم ویور

به بیان ساده ، Dreamweaver نرم افزاری است که به شما امکان می دهد وب سایت ها را بسازید ، طراحی
و منتشر کنید. این یک برنامه بومی است وقتی که بدان معنی است که آن را روی رایانه شخصی یا Mac خود
طراحی سایت با دریم ویور نصب کنید.

اصول برنامه نویسی

این یک برنامه انعطاف پذیر است به این دلیل که می توانید وب سایت خود را کاملاً از طریق ویرایشگر بصری یا
فقط از طریق کد ایجاد کنید. همچنین می توانید از این دو در کنار هم استفاده کنید (به شرطی که اصول برنامه
نویسی را بدانید) ، تا ببینید چگونه هر کدام بر دیگری تأثیر می گذارد.

اصول برنامه نویسی
اصول برنامه نویسی

پشتیبانی از زبان های مختلف

همچنین از طیف گسترده ای از زبان های مورد نیاز برای ایجاد هر نوع وب سایت مانند HTML، HTML5 ، CSS ،
PHP ، Javascript و jQuery پشتیبانی می کند. می توانید از فایل هایی که به زبان های دیگر هستند استفاده
کرده و ویرایش کنید ، اما ویژگی های پشتیبانی کد در دسترس نخواهد بود.Cloudways یا Bluehost بهترین گزینه
طراحی سایت با دریم ویورر برای میزبانی وب برای سایتهای ساخته شده با html است.

پشتیبانی از زبان های مختلف
پشتیبانی از زبان های مختلف

ویژگی های اصلی Dreamweaver

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

ویژگی های دریم ویور

 آسان برای استفاده از رابط بصری

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

ایجاد خودکار کد برای طراحی سایت

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

 ساخته شده در ویرایشگر کد

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

ویژگی تکمیل کد

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

بخشی از مجموعه ابر خلاق

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

مزایا و معایب Adobe Dreamweaver

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

مزایای Dreamweaver

Dreamweaver یک ابزار بصری و انعطاف پذیر است که بسیاری از کارها را به درستی انجام می دهد. در اینجا برخی
طراحی سایت با دریم ویور از بزرگترین مزایای این نرم افزار می تواند به شما ارائه شود:

تست دستگاه

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

تست خطای کد آسان

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

شامل انتخاب قلم است

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

مجموعه عکسهای سهام

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

رابط شخصی سازی

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

Dreamweaver منفی

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

منحنی یادگیری تندتر

راه حل های دیگر سازندگان سایت مانند Squarespace ، Wix و WordPress وجود دارد که ایجاد اولین وب سایت
شما را به طرز فوق العاده ای آسان می کند. ایجاد یک سایت اصلی و آنلاین شدن آن با Dreamweaver کار چندان
دشواری نیست ، اما ایجاد سایتی که بتواند دقیقاً همان کاری را که شما می خواهید انجام دهد ، کمی طول
طراحی سایت با دریم ویور می کشد.

خلاقیت و مهارت

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

آموزش آنلاین دریم ویور

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

نحوه ایجاد سایت با دریم ویور

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

عیب یابی

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

هزینه اشتراک مکرر (بالای میزبانی)

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

نحوه استفاده از Dreamweaver برای ایجاد یک وب سایت از طریق Scratch

قبل از شروع به کار ، ذکر این نکته ضروری است که اگر نمی خواهید همه جنبه های طراحی سایت خود را مدیریت کنید ، توصیه می شود از CMS مناسب مبتدیان مانند وردپرس یا سازنده سایت دیگر استفاده کنید.با این اوصاف ، وقت آن است که طراحی سایت با دریم ویور وارد شوید! برای ایجاد و انتشار اولین وب سایت Dreamweaver مراحل زیر را دنبال کنید:

1. برنامه خود را انتخاب کرده و نصب کنید

اولین کاری که باید انجام دهید خرید و نصب نرم افزار Dreamweaver است. بنابراین ، به وب سایت Adobe بروید و
برنامه ای را که برای شما مناسب است انتخاب کنید.فقط یک برنامه مجزا در حال حاضر 20،99 دلار برای شما هزینه
دارد. در حالی که ، اگر می خواهید به کل مجموعه Creative Cloud دسترسی داشته باشید ، ماهانه 52.99 دلار
طراحی سایت با دریم ویور پرداخت خواهید کرد. تخفیف هایی نیز برای مشاغل ، معلمان و دانش آموزان وجود دارد.

دریم ویور برای شما مناسب است؟

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

استفاده از نسخه آموزشی

اگر قبلاً Creative Cloud را در رایانه خود نصب کرده اید ، آن را باز کنید ، “Apps” را انتخاب کنید و Dreamweaver CC
طراحی سایت با دریم ویور را از لیست انتخاب کنید. شما می توانید آزمایشی رایگان داشته باشید یا فوراً نرم افزار را
خریداری کنید.

2. راه اندازی اولیه و Walkthrough

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

استفاده از ویرایشگر بصری

در صفحه بعد ، می توانید گزینه ای را انتخاب کنید که مناسب گردش کار شما باشد. از آنجا که این اولین بار است که از Dreamweaver استفاده می کنید ، گزینه ‘Standard Workspace’ را انتخاب کنید.این به شما امکان می دهد از ویرایشگر
طراحی سایت با دریم ویور بصری یا کد برای ایجاد و سفارشی سازی سایت خود استفاده کنید.

انتخاب رنگ

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

شروع با یک فایل نمونه

برای این بخش از آموزش ما از “شروع با پوشه جدید یا موجود” استفاده می کنیم ، اما اگر گزینه “شروع با یک فایل
نمونه” را انتخاب کنید ، یک پایه اولیه سایت برای کار خواهید داشت ،برخی از افراد ممکن است بخواهند با یک الگوی
اصلی شروع کنند ، زیرا کمتر ترسناک است. اما برای کسانی که می خواهند به ساختن سایت های خود از ابتدا ادامه
طراحی سایت با دریم ویور دهند و نکات زیر را یاد بگیرند ، این بخش از این آموزش برای شما مناسب است.

3. ایجاد یک سایت جدید

برای شروع ساختن سایت جدید خود از ابتدا به سایت> سایت جدید بروید. باید شبیه صفحه زیر باشد:در اینجا شما
می خواهید به سایت خود نامی بدهید و مکانی را که فایل های سایت شما در آن ذخیره می شود ، مشخص کنید.
اطمینان حاصل کنید که پوشه ای را که همه پروژه های وب خود را در آن داشته باشید مشخص کرده اید ، زیرا این امر
طراحی سایت با دریم ویور  طراحی سازماندهی (و بارگذاری بعداً روی سرور شما) را بسیار ساده تر می کند.

ایجاد پوشه تصاویر

در مرحله بعد ، شما می خواهید یک پوشه تصاویر ایجاد کنید که همه تصاویر سایت شما در آن قرار می گیرد. این
پوشه تصویر باید در پوشه سایت شما قرار داشته باشد.روی “تنظیمات پیشرفته” کلیک کنید و در لیست کشویی گزینه
ها “Local Info” را انتخاب کنید. در اینجا پوشه تصاویری را که چند لحظه پیش ایجاد کرده اید انتخاب می کنید. سپس
، روی “ذخیره” کلیک کنید و آماده شروع ساختن سایت خود هستید.

4. اولین صفحه خود را ایجاد کنید

اولین صفحه ای که قصد ایجاد آن را داریم صفحه اصلی شما خواهد بود.برای انجام این کار پرونده> جدید را انتخاب کنید
، سپس HTML را از لیست “نوع سند” انتخاب کنید. سپس نام فایل را index.html بگذارید. این به ایجاد ساختار مناسب
در سایت شما کمک می کند.حالا شما باید یک پنجره خالی مانند تصویر زیر داشته باشید. این چیزی است که سایت شما
طراحی سایت با دریم ویورر در حال حاضر به نظر می رسد! همچنین خواهید دید که Dreamweaver مقداری HTML اولیه نیز ایجاد کرده است.

5. سربرگ وب سایت خود را ایجاد کنید

اولین کاری که ما انجام می دهیم ایجاد سرصفحه سایت شما است. این قسمت بالایی از سایت شما است که
معمولاً شامل لوگو یا نام سایت شما است.برای انجام این کار ، روی قسمت بالای صفحه کلیک کنید (همچنین
طراحی سایت با دریم ویور عنصر <body> برجسته شده در قسمت کد را در پایین مشاهده خواهید کرد).

ایجاد سربرگ

سپس ، روی “Insert” در گوشه بالا سمت راست کلیک کرده و گزینه “Header” را انتخاب کنید. برای پیدا کردن گزینه
، ممکن است مجبور شوید کمی پایین بروید. همه گزینه ها در اینجا عناصر مختلف HTML هستند که می توانید به
سایت خود اضافه کنید.این یک بلاک هدر را در صفحه شما قرار می دهد ، بنابراین می توانید آن را به دلخواه سفارشی
طراحی سایت با دریم ویور  کنید.

اهداف سئو

در مرحله بعد ، ما برچسب H1 را به این عنصر سرصفحه اضافه می کنیم. این امر برای اهداف SEO مهم است و به
موتورهای جستجو اجازه می دهد تا بدانند سایت شما درباره چیست.برای انجام این کار ، متن هدر را در قسمت کد
طراحی سایت با دریم ویور  ویرایشگر خود برجسته کنید. سپس ، “Headings” و H1 را در کادر کشویی انتخاب کنید.

6. هدر صفحه خود را استایل دهید

با ایجاد سرصفحه ، زمان آن است که کمی به آن استایل بدهید. به احتمال زیاد شما نمی خواهید از سبک اصلی
استفاده کنید ، زیرا باعث می شود وب سایت شما قدیمی به نظر برسد.ما این تغییرات را با CSS انجام خواهیم داد.
به طور معمول ، همه سبک و عناصر نمایش سایت شما با این فایل کنترل می شود. این به شما امکان می دهد
طراحی سایت با دریم ویور کارهایی مانند تغییر اندازه فونت ، ایجاد عرض و ابعاد برای عناصر سایت خاص و یک تن
دیگر انجام دهید.

تغییر ظاهر هدر

اولین کاری که ما با فایل CSS شما انجام می دهیم تغییر ظاهر هدر شما است. اما ابتدا ، ما باید یک فایل CSS ایجاد
کنیم.برای انجام این کار ، روی سرصفحه کلیک کنید و قسمت هدر را با رنگ آبی مشاهده خواهید کرد. روی نماد “+”
کلیک کنید و #header را در کادر تایپ کنید (این به هدر شما شناسه می دهد که به شما امکان می دهد ظاهر آن را
طراحی سایت با دریم ویور سفارشی کنید).

تغییرات طراحی

در مرحله بعد ، گزینه ‘Create new CSS file’ را انتخاب کنید. در کادر ظاهر شده “مرور” را انتخاب کنید ، پوشه ای را که
قبلاً ایجاد کرده اید و همه فایل های سایت شما در آن ذخیره شده است ، انتخاب کنید و سپس نام فایل را “style.css”
طراحی سایت با دریم ویور  بگذارید و روی “تأیید” کلیک کنید.این فایل جایی است که می توانید تمام تغییرات طراحی
خود را انجام دهید.

تغییرات متن سرصفحه

اکنون با ایجاد فایل CSS شما یک انتخاب کننده ایجاد می کنیم. این به شما امکان می دهد بدون تغییر کل سرصفحه
خود ، تغییراتی در متن سرصفحه ایجاد کنید.برای انجام این کار به ویرایشگر DOM (گوشه سمت راست پایین) بروید و
طراحی سایت با دریم ویور  تگ H1 را که ایجاد کرده اید انتخاب کنید. سپس “CSS Designer” را در گوشه بالا سمت راست انتخاب کنید.

گزینه های سفارشی سازی

بعد ، روی گزینه ‘Selectors’ کلیک کنید و کادر باید به طور خودکار با ‘#header h1’ پر شود. “Enter” را فشار دهید و
همه چیز آماده است.اکنون زمان تغییر فونت است. اگر هنوز در منوی CSS Designer نیستید ، دوباره روی آن برگه کلیک
کنید و “#header h1” را که ایجاد کرده اید انتخاب کنید. سپس یک جعبه کوچک وجود دارد که می گوید “نمایش مجموعه”.
طراحی سایت با دریم ویور  این کادر را بردارید و برخی از گزینه های سفارشی سازی جالب را باز کنید.

تغییرات فونت

با خیال راحت با این گزینه ها تا جایی که می خواهید بازی کنید. شما می توانید کارهایی مانند تغییر فونت ، سبک فونت ، اندازه متن ، تراز ، افزودن حاشیه و موارد دیگر را انجام دهید.هنگامی که از نحوه ظاهر هدر خود راضی شدید ، به مرحله
طراحی سایت با دریم ویور  بعدی بروید.همچنین می توانید روی فایل “style.css” در بالای صفحه کلیک کنید تا ببینید کد
چگونه به نظر می رسد.

7. افزودن مطالب بیشتر

به احتمال زیاد می خواهید سایت شما بسیار بیشتر از یک هدر بزرگ باشد. در اینجا نحوه افزودن و ایجاد عناصر متنی
مختلف در صفحه اصلی خود آورده شده است.برای افزودن متن به صفحه خود ، روی برگه «درج» در گوشه بالا سمت
راست کلیک کنید ، سپس «پاراگراف» را انتخاب کنید. اگر می خواهید بین هر پاراگراف یک خط فاصله داشته باشید ،
طراحی سایت با دریم ویور می خواهید چند پاراگراف اضافه کنید.

اضافه کردن لیست

همانطور که در تصویر زیر متوجه می شوید پاراگراف های متعددی وجود دارد ، به همراه یک لیست نامرتب ، نام دیگر
نقاط گلوله. اگر می خواهید یک لیست مرتب یا نامرتب در صفحه خود وارد کنید ، گزینه ‘Unordered List’ را انتخاب کنید
، سپس بر روی برچسب های <ul> </ul> در قسمت کد کلیک کنید. و در نهایت ، بخش “لیست مورد” را انتخاب کرده
طراحی سایت با دریم ویور و آن را بین دو برچسب اضافه کنید.

سفارشی کردن متن هدر

در نهایت ، ما می رویم و یک عنوان به بالای صفحه ، درست در زیر سربرگ اضافه می کنیم.برای انجام این کار ، قسمتی
از کد را که به <header> ختم می شود پیدا کنید ، سپس Enter را فشار دهید و فاصله ایجاد کنید. سپس ، “Heading”
را از منوی بالا سمت راست انتخاب کرده و H2 را از کادر کشویی انتخاب کنید.سپس ، می توانید متن هدر خود را هرطور
طراحی سایت با دریم ویور که مناسب می دانید سفارشی کنید.

8. اضافه کردن یک تصویر

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

وارد کردن تصویر در صفحه

برای این آموزش ، ما گزینه بعدی را انتخاب کردیم. اگر از تصویری از اینترنت یا مجموعه خود استفاده می کنید ، مطمئن
شوید که آن را به پوشه تصویری که قبلاً ایجاد کرده اید اضافه کنید. سپس ، برگه “Insert” را انتخاب کرده و “Image” را
انتخاب کنید.در اینجا می توانید تصویر را در رایانه خود پیدا کنید ، سپس “باز” را فشار دهید.اکنون نرم افزار به طور خودکار
طراحی سایت با دریم ویور تصویر را در صفحه شما وارد کرده و کد مناسب را اضافه می کند.

9. پیش نمایش سایت خود

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

نشان دادن خودکار تغییرات

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

پیش نمایش سایت

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

10.سایت خود را بصورت آنلاین منتشر کنید

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

اطلاعات FTP

پس از ثبت نام در میزبان ، اطلاعات FTP خود را پیدا کنید ، زیرا در مرحله بعد به این مورد نیاز خواهید داشت.با رعایت
این موارد می توانید به مرحله بعدی واقعاً بارگذاری سایت خود در سرور خود بروید.برای انجام این کار به سایت مدیریت
سایت ها بروید. در پنجره ای که ظاهر می شود ، سایت خود را انتخاب کنید ، سپس روی نماد مداد در گوشه سمت
طراحی سایت با دریم ویور چپ پایین کلیک کنید.

اضافه کردن اطلاعات سرور

در مرحله بعد ، گزینه “سرورها” را در سمت چپ انتخاب کرده و روی نماد “+” کلیک کنید ، که به شما امکان می دهد
اطلاعات سرور خود را اضافه کنید.تمام اطلاعات این پنجره توسط میزبان شما ارائه می شود ، به جز قسمت “نام سرور”
، که به شما بستگی دارد. همچنین ، مطمئن شوید که دایرکتوری ریشه سرور و آدرس اینترنتی خود را نیز درج کرده اید.
طراحی سایت با دریم ویور این باعث می شود که بتوانید پیوندهای سایت در داخل Dreamweaver را که واقعاً کار می کنند ، قرار دهید.

بارگذاری فایل

پس از تنظیم اطلاعات سرور ، روی “ذخیره” کلیک کنید ، سپس دوباره روی “ذخیره” کلیک کنید.اکنون ، تنها کاری که باید
انجام دهید این است که فایل هایی را که می خواهید بارگذاری کنید از منوی سمت چپ انتخاب کرده و روی نماد شبیه
پلاگین در گوشه سمت راست بالا کلیک کنید.اگر اطلاعات سرور خود را به درستی وارد کرده اید ، Dreamweaver به
طراحی سایت با دریم ویور سرور شما متصل شده و فایل های سایت شما را در محل مشخص شده بارگذاری می کند.

ساده سازی روند ساخت وب

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

نحوه استفاده از الگوی Dreamweaver برای ساخت وب سایت شما

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

الگوی Dreamweaver

برای انجام این کار File> New ، سپس ‘Starter Templates’ ، ‘Basic Layouts’ را انتخاب کنید و در نهایت سبک سایتی
را که می خواهید بسازید انتخاب کنید. در اینجا ما با طرح “Basic – Multi Column” پیش رفتیم.خواهید دید که این الگو
طراحی سایت با دریم ویور به شما فرصت زیادی می دهد تا درست بیرون از دروازه کار کنید.

تغییر نام سایت

ما برخی کارهای اساسی مانند تغییر نام سایت و متن هدر را انجام می دهیم. برای انجام این کار ما فرآیندی مشابه
روش بالا را دنبال می کنیم. برای تغییر متن سرصفحه فقط روی عنصر سرصفحه کلیک کنید و متن جدید خود را تایپ
کنید.برای تغییر فونت ، قسمت <h1 class = “title> کد خود را انتخاب کنید. سپس در سمت راست روی دکمه “+”
در کنار “Properties” کلیک کنید. در اینجا شما می توانید با انتخاب گزینه متنی که شبیه “T” بزرگ است ، فونت خود
طراحی سایت با دریم ویور را تغییر دهید.

نوع و اندازه فونت ها

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

تنظیم رنگ ها

برای تنظیم رنگ با استفاده از گزینه “CSS Designer” می توانید از روش فوق استفاده کنید. یا می توانید مستقیماً وارد
فایل CSS شوید.برای انجام این کار ، کلاس div را برای این عنصر ، که “Primary_header” است ، توجه کنید. در مرحله
طراحی سایت با دریم ویور بعد ، روی فایل “multiColumnTemplate.css” در بالای صفحه کلیک کنید.

رنگ پس زمینه

در اینجا می توانیم پس از یافتن عنصر “.primary_header” رنگ پس زمینه سرصفحه را تغییر دهیم.البته ، هنگام کار
با الگو کارهای بیشتری می توانید انجام دهید ، اما امیدوارم تغییرات فوق به شما ایده ای در مورد کارهایی که می
طراحی سایت با دریم ویور توانید انجام دهید بدهد.هنگامی که تغییرات لازم را در قالب سایت خود ایجاد کردید ، وقت
آن است که سایت را به سرور خود منتقل کنید.

در آستانه نزدیک شدن

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

کتابخانه آموزشی Adobe

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