آموزش گام به گام ساده Dreamweaver – 2020

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


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

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

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

Dreamweaver چیست؟

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

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

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

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

میزبانی وب توصیه می شود

Cloudways یا Bluehost بهترین شرط بندی شما برای میزبانی وب برای سایتهای ساخته شده html است.

یا بررسی دقیق Cloudways ما را بخوانید >>

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

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

در اینجا ویژگی های اصلی این ویژگی برجسته است:

1. آسان برای استفاده و رابط بصری

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

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

2. ویرایشگر کد داخلی

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

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

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

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

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

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

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

جوانب مثبت و منفی Adobe Dreamweaver

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

Dreamweaver جوانب مثبت

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

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

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

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

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

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

Dreamweaver Cons

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

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

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

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

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

سایت شما فقط به اندازه مهارت های شما مناسب است

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

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

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

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

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

شما نه تنها باید در هزینه خود نرم افزار فاکتور بگیرید بلکه هزینه ماهیانه ای که برای هاست پرداخت می کنید و سالانه هزینه ای که برای نام دامنه پرداخت خواهید کرد.

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

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

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

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

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

اولین کاری که باید انجام دهید خرید و نصب نرم افزار Dreamweaver است. بنابراین ، به وب سایت Adobe بروید ، و طرحی را انتخاب کنید که برای شما مفید باشد.

برنامه Dreamweaver خود را انتخاب کنید

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

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

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

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

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

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

صفحه مقدمه

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

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

این به شما امکان می دهد تا از ویرایشگر تصویری یا کد برای ساخت و شخصی سازی سایت خود استفاده کنید.

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

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

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

ممکن است برخی از افراد بخواهند با یک الگوی اصلی شروع کنند ، زیرا این امر باعث ترساندن کمتر آن می شود. اما برای کسانی که می خواهند ساخت سایت های خود را از ابتدا و یادگیری ins و outs این ابزار ادامه دهند ، این بخش از این آموزش برای شما است.

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

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

برای شروع ساختن سایت جدید خود از ابتدا حرکت کنید تا سایت>سایت جدید. باید مانند صفحه زیر باشد:

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

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

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

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

اولین صفحه ای که می خواهیم ایجاد کنیم صفحه اصلی شما خواهد بود.

برای انجام این کار File را انتخاب کنید>جدید ، سپس HTML را از لیست “نوع سند” انتخاب کنید. سپس فایل index.html را نامگذاری کنید. این به ساختار مناسب سایت شما کمک می کند.

حال باید مانند تصویر زیر یک پنجره خالی داشته باشید. این همان چیزی است که سایت شما در حال حاضر به نظر می رسد! همچنین خواهید دید که Dreamweaver HTML مقدماتی نیز ایجاد کرده است.

5. ایجاد هدر وب سایت خود را

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

برای انجام این کار بر روی قسمت بالای صفحه کلیک کنید (همچنین عنصر برجسته در بخش کد را در پایین مشاهده خواهید کرد).

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

با این کار یک بلاک هدر در صفحه شما وارد می شود ، بنابراین می توانید آن را به دلخواه خود تنظیم کنید.

در مرحله بعد ، ما می خواهیم یک برچسب H1 را به این عنصر هدر اضافه کنیم. این برای اهداف سئو مهم است و به موتورهای جستجو این امکان را می دهد تا سایت شما را بدانند.

برای این کار متن هدر را در بخش کد ویرایشگر خود برجسته کنید. سپس ، جعبه کشویی “عنوانها” و H1 را انتخاب کنید.

6. هدر صفحه خود را سبک کنید

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

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

اولین کاری که با پرونده CSS انجام می دهیم تغییر در ظاهر عنوان شما است. اما ابتدا باید یک پرونده CSS ایجاد کنیم.

برای این کار بر روی هدر کلیک کنید و بخش هدر را به رنگ آبی برجسته خواهید دید. بر روی نماد ‘+ کلیک کنید و # header را در جعبه تایپ کنید (این یک شناسه به عنوان شما می دهد که به شما امکان می دهد ظاهر آن را شخصی سازی کنید).

سپس گزینه “ایجاد پرونده جدید CSS” را انتخاب کنید. در کادر ظاهر شده “مرور” ، پوشه ای را که قبلاً ایجاد کرده اید انتخاب کنید تا تمام پرونده های سایت شما در آن ذخیره شود و سپس پرونده “style.css” را نامگذاری کرده و روی “خوب” کلیک کنید..

این پرونده جایی است که شما می توانید تمام تغییرات طراحی خود را تغییر دهید.

اکنون با ایجاد پرونده CSS شما یک انتخاب کننده ایجاد خواهیم کرد. این به شما امکان می دهد بدون تغییر کل هدر ، متن متن را تغییر دهید.

برای این کار به ویرایشگر DOM (گوشه سمت راست پایین) بروید و برچسب H1 را که ایجاد کرده اید انتخاب کنید. سپس در گوشه سمت راست بالا “CSS Designer” را انتخاب کنید.

بعد ، روی گزینه “Selectors” کلیک کنید و کادر به طور خودکار باید با “#header h1” پر شود. “Enter” را فشار دهید و همه تنظیم شده اید.

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

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

هنگامی که شما از نحوه حرکت عنوان شما به مرحله بعدی رضایت دارید ، راضی هستید.

همچنین می توانید بر روی پرونده “style.css” در بالای صفحه کلیک کنید تا ببینید کد چگونه به نظر می رسد.

7. اضافه کردن مطالب بیشتر

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

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

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

    برچسب ها در بخش کد. و در آخر ، “فهرست مورد” را انتخاب کنید و بین این دو برچسب آن را اضافه کنید.

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

    برای انجام این کار ، بخش کدی را که به پایان می رسد پیدا کنید ، سپس Enter را فشار داده و یک فضا ایجاد کنید. بعد ، از فهرست سمت راست و “عنوان” را انتخاب کرده و از کادر کشویی H2 را انتخاب کنید.

    سپس می توانید متن هدر خود را متناسب با آن تنظیم کنید.

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

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

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

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

    در اینجا می توانید تصویر را در رایانه خود پیدا کنید ، سپس “باز کردن” را فشار دهید.

    اکنون این نرم افزار به طور خودکار تصویر را در صفحه شما وارد کرده و کد مناسبی را اضافه می کند.

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

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

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

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

    همچنین می توانید با گرفتن تصویر از کد QR ، سایت خود را بر روی تلفن همراه خود چگونه ببینید.

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

    هنگامی که از نحوه ظاهر سایت خود راضی شدید ، به مرحله آخر بروید.

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

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

    ما Bluehost یا Cloudways را توصیه می کنیم.

    پس از ثبت نام در یک میزبان ، اطلاعات FTP خود را پیدا کنید ، زیرا در مرحله بعدی به این کار احتیاج دارید.

    با توجه به این مسئله ، می توانید به مرحله بعدی آپلود سایت در سرور خود بروید.

    برای انجام این حرکت به سایت>مدیریت سایتها در پنجره ای که آمد سایت خود را انتخاب کنید ، سپس بر روی آیکون مداد در گوشه پایین سمت چپ کلیک کنید.

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

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

    هنگامی که اطلاعات سرور خود را تنظیم کردید روی “ذخیره” کلیک کنید ، سپس دوباره روی “ذخیره” کلیک کنید.

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

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

    خودشه! شما با موفقیت اولین سایت Dreamweaver خود را با موفقیت ایجاد و بارگذاری کرده اید.

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

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

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

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

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

    خواهید دید که این الگوی به شما می دهد کار زیادی با بیرون از دروازه داشته باشید.

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

    برای تغییر قلم ، گزینه را انتخاب کنید

    بخش کد شما سپس در سمت راست بر روی دکمه “+” کنار “خصوصیات” کلیک کنید. در اینجا می توانید با انتخاب گزینه متنی که به نظر می رسد یک سرمایه ‘T باشد ، قلم خود را تغییر دهید..

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

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

    برای تنظیم رنگ می توانید از گزینه ‘CSS Designer استفاده کنید. یا می توانید مستقیماً وارد پرونده CSS شوید.

    برای این کار کلاس div را برای این عنصر که “basic_header” است توجه کنید. در مرحله بعدی ، روی پرونده “multiColumnTemplate.css” در بالای صفحه کلیک کنید.

    در اینجا می توانیم عنصر “.primary_header” را پیدا کنیم ، رنگ پس زمینه هدر را تغییر دهیم.

    البته کارهای دیگری وجود دارد که می توانید در هنگام کار با یک الگوی انجام دهید ، اما امیدوارم تغییراتی که در بالا ایجاد شده اید به شما ایده ای بدهد که می توانید انجام دهید.

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

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

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

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

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

    اما ، اگر تصمیم دارید وب سایت خود را با استفاده از Dreamweaver بسازید امیدوارم که بهتر بتوانید در کوتاهترین زمان ممکن سایت خود را به کار بگیرید و راه اندازی کنید.

    اکنون به شما رسیده است. آیا از Dreamweaver برای ساختن وب سایت خود استفاده کرده اید؟ راهنمایی یا هک جالب شما می توانید اضافه کنید؟ لطفا در نظرات زیر به اشتراک بگذارید.

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

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Adblock
      detector