ایجاد اولین سایت در Dreamweaver و اجرای آن

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

وقتی Xampp را نصب می کنید یک پوشه به نام Xampp در درایو c ایجاد می شود که داخل آن یک پوشه به نام  htdocs وجود دارد.

پوشه htdocs چه نقشی دارد؟

وقتی یک سایت طراحی می کنیم قطعا شامل صفحات(page) زیادی می باشد، پس باید یک فضا برای این سایت در نظر گرفته شود تا تمام صفحات مربوط به سایتمون در آن ذخیره شود. این فضا باید درپوشه htdocs تعریف شود (مثلا پوشه test). هنگامی که می خواهیم سایتی که طراحی کردیم را اجرا کنیم، Apache وارد پوشه htdocs می شود و سپس وارد پوشه مربوط به آن سایت (یعنی test) می شود و صفحه ای که می خواهید را نمایش می دهد.

شروع ایجاد اولین سایت در Dreamweaver

  • پس ابتدا یک پوشه جدید به نام test در htdocs ایجاد می کنیم.

ایجاد اولین سایت در Dreamweaver

  • خب روی آیکون Dreamweaver  کلیک کنید تا اولین سایت را طراحی کنیم.

ایجاد اولین سایت در Dreamweaver

 

  • ابتدا باید برای ایجاد اولین سایت در Dreamweaver ، در نوار بالا روی Site –> New Site کلیک کنید.

ایجاد اولین سایت در Dreamweaver

  • طبق تصویر یک پنجره باز می شود.روی تب site کلیک کنید. اینجا باید نام سایت و مکان آن را وارد کنیم(مکان سایت همان پوشه است که در htdocs ایجاد کردیم) برای ما آدرس زیر می باشد:

C:\xampp\htdocs\test

ایجاد اولین سایت در Dreamweaver

  • تب دوم “servers” را انتخاب کنید روی علامت + کلیک می کنیم تا یک سرور جدید اضافه کنیم.

ایجاد اولین سایت در Dreamweaver

  • باید تنظیماتی مطابق تصویر زیر انجام دهید و ذخیره کنید.

نکته: connection using را روی local/Network قرار می دهیم. یعنی چی؟ یعنی نوع ارتباط ما با سرور به صورت محلی یا لوکال است. (چون ما در اصل سروری در فضای اینترنت نداریم و سیستم ما نقش سرور را بازی می کند.)

نکته: web-URL همان آدرس سایت را میخواهد که ” http://127.0.0.1/test ”  وارد می کنیم. ۱۲۷٫۰٫۰٫۱ به سیستم ما اشاره می کند که به صورت لوکال نقش سرور را دارد. test هم پوشه مربوط به سایتمون هست که در htdocs تعریف کردیم.

توجه داشته باشید :

در آموزش قبل گفتیم اگر در حین اجرای Xampp ، اگر Apache خطا داد باید پورت Apache را از ۸۰ به ۸۱ تغییر دهید. بنابراین اینجا باید آدرس را به صورت ”  http://127.0.0.1:81/test ” وارد کنید. یعنی :۸۱ را باید اضافه کنید.چون پورت پیش فرض ۸۰ بوده است.

ایجاد اولین سایت در Dreamweaver

  • برای کسانی که پورت ۸۰ را تغییر داده اند به صورت زیر وارد کنند.

ایجاد اولین سایت در Dreamweaver

  • حتما سرور را روی Testing قرار دهید نه Remote. چون سرور محلی کار می کنیم.

ایجاد اولین سایت در Dreamweaver

 

  • خب بعد از ایجاد اولین سایت در Dreamweaver نوبت به ایجاد اولین صفحه این سایت می باشد. در قسمت file –> New را کلیک کنید تا اولین صفحه سایت را ایجاد کنید.

ایجاد اولین سایت در Dreamweaver

  • یک پنجره مطابق تصویر باز می شود و اینجا باید زبان مورد نظرتون رو انتخاب کنید . چون ما می خواهیم سمت سرور کدنویسی کنیم پس php را انتخاب می کنیم و Create را می زنیم. همانطور که می بینید زبان های سمت کلاینت که در جلسه اول بحث کردیم، هم موجودند (Html , css , javascript)

ایجاد اولین سایت در Dreamweaver

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

ایجاد اولین سایت در Dreamweaver

تگ چیست؟

از نظر لغوی یعنی برچسب. در زبان های برنامه نویسی مثل php، html و … تگ ها کدهای تعریف شده در این محیط هستند پس به هرکدام از عباراتی که بین دو علامت کوچکترو بزرگتر قرار گرفته است می گوییم تگ. مثال: <table>
هر تگی باید باز شود و حتما بسته شود:

<table>
</table>

و البته یک سری تگ ها هم هستند که در یک تگ هم باز می شود هم بسته مثل:

<br/>

همانطور که در پروژه جدیدی مطابق تصویر می بینید، یک صفحه ساده داریم که با تگ html  شروع می شود و در بدنه آن دو تگ head و body داریم.

تگ <head></head> :

به زبان ساده اطلاعات داخل این تگ، به درد گوگل و مرورگر می خوره نه کاربر. (همچنین می توانید بحث های مربوط به سئو سایت رو اینجا پیاده کنید)

همانطور که می بینید دو تگ meta و title به صورت پیشفرض در آن تعریف شده است. تگ title مربوط به عنوانی است که در بالای صفحه مرورگر نمایش داده می شود. تگ meta هم شامل اطلاعاتی است که توسط مرورگر برای نحوه نمایش محتویات یا بارگذاری صفحه و همچنین تعیین کلمات کلیدی صفحه (مرتبط با سئو)و .. مورد استفاده قرار می گیرد.

تگ <body></body>:

مواردی که در سایت کاربر می تونه ببینه و مورد استفاده کاربر است اینجا تعریف می شه. و ما در این قسمت کدنویسی می نویسیم.

ایجاد اولین سایت در Dreamweaver

  • اینجا می توانیم تنظیمات انجام دهیم که فقط محیط کدنویسی را به نمایش دهد یا فقط محیط طراحی.

ایجاد اولین سایت در Dreamweaver

  • و یا همزمان که کد می زنیم سایت هم ببینیم(بدون نیاز به باز کردن در مرورگر) . برای نمایش دو وضعیت کد و طراحی ، روی view کلیک کنید و گزینه Split را انتخاب کنید. code-Design را انتخاب کنید.

ایجاد اولین سایت در Dreamweaver

  • فعلا در بدنه body یک عبارت می نویسیم و title را تغییر می دهیم تا ببینید کجا استفاده می شود. این سایت ساده را اجرا می کنیم تا با نحوه اجرا سایت آشنا شوید. هر چند الان در قسمت طراحی می توانیم خروجی کد را ببینیم.(توضیح کدنویسی در جلسه بعد گفته می شود)

ایجاد اولین سایت در Dreamweaver

 

نحوه اجرای سایت

  • قبل از اجرا باید صفحه ایجاد شده را ذخیره کنید. روی file –> save کلیک کنید و آن را در پوشه test که در htdocs تعریف کردیم ( قرار شد تمام صفحات مربوط به این سایت در آن باشد ) ذخیره کنید.
  • نکته: در انتخاب نام اولین صفحه باید یک نکته ای را رعایت کنید و آن این است که به صورت پیش فرض بهتراست نام اولین صفحه index.php باشد. چرا؟
    چون به Apache فهمانده اند که هر موقع خواستی سایتی را اجرا کنی. باید در پوشه مربوط به(مثلا test) که در مسیر htdocs قرار دارد به دنبال صفحه ای با نام index باشی. (باقی صفحات هم به اولین صفحه لینک می شوند)
  • نکتهUincode Normalization From را در حالت None قرار دهید. در واقع اینجا مشخص می کنیم حالت جهانی سایت چی باید باشد،تا سایت درست نمایش داده شود.

ایجاد اولین سایت در Dreamweaver

  • حالا نوبت به این رسیده است که Xampp را اجرا کنید.

  • حالا برای اجرای اولین سایت باید مرورگر مورد نظر خود را انتخاب کنید. برای این کار ابتدا باید روی فایل php خود یعنی index.php کلیک راست کنید و گزینه open Browser را انتخاب کنیدمرورگر را انتخاب کنید مثلا مرورگر Chrome. می توانید از کلید میانبر F12 هم استفاده کنید.

ایجاد اولین سایت در Dreamweaver

  • ببینید ایجاد اولین سایت در Dreamweaver. (به عبارت “آموزش php” توجه کنید کجا قرار گرفته است )

ایجاد اولین سایت در Dreamweaver

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

مدرس: مهندس مهدی نیکخواه

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 4 امتیاز: 4]