ایجاد اولین سایت در Dreamweaver و اجرای آن
با نام و یاد خدا
امروز می خواهیم با ایجاد اولین سایت در Dreamweaver شروع کنیم. در جلسات قبل در مورد زبان php و ابزاری که باید روی سیستم عامل نصب شوند توضیح دادیم. امیدواریم با ما قدم به قدم پیش آمده باشید و آماده شروع باشید.
وقتی Xampp را نصب می کنید یک پوشه به نام Xampp در درایو c ایجاد می شود که داخل آن یک پوشه به نام htdocs وجود دارد.
پوشه htdocs چه نقشی دارد؟
وقتی یک سایت طراحی می کنیم قطعا شامل صفحات(page) زیادی می باشد، پس باید یک فضا برای این سایت در نظر گرفته شود تا تمام صفحات مربوط به سایتمون در آن ذخیره شود. این فضا باید درپوشه htdocs تعریف شود (مثلا پوشه test). هنگامی که می خواهیم سایتی که طراحی کردیم را اجرا کنیم، Apache وارد پوشه htdocs می شود و سپس وارد پوشه مربوط به آن سایت (یعنی test) می شود و صفحه ای که می خواهید را نمایش می دهد.
شروع ایجاد اولین سایت در Dreamweaver
- پس ابتدا یک پوشه جدید به نام test در htdocs ایجاد می کنیم.
- خب روی آیکون Dreamweaver کلیک کنید تا اولین سایت را طراحی کنیم.
- ابتدا باید برای ایجاد اولین سایت در Dreamweaver ، در نوار بالا روی Site –> New Site کلیک کنید.
- طبق تصویر یک پنجره باز می شود.روی تب site کلیک کنید. اینجا باید نام سایت و مکان آن را وارد کنیم(مکان سایت همان پوشه است که در htdocs ایجاد کردیم) برای ما آدرس زیر می باشد:
C:\xampp\htdocs\test
- تب دوم “servers” را انتخاب کنید روی علامت + کلیک می کنیم تا یک سرور جدید اضافه کنیم.
- باید تنظیماتی مطابق تصویر زیر انجام دهید و ذخیره کنید.
نکته: connection using را روی local/Network قرار می دهیم. یعنی چی؟ یعنی نوع ارتباط ما با سرور به صورت محلی یا لوکال است. (چون ما در اصل سروری در فضای اینترنت نداریم و سیستم ما نقش سرور را بازی می کند.)
نکته: web-URL همان آدرس سایت را میخواهد که ” http://127.0.0.1/test ” وارد می کنیم. 127.0.0.1 به سیستم ما اشاره می کند که به صورت لوکال نقش سرور را دارد. test هم پوشه مربوط به سایتمون هست که در htdocs تعریف کردیم.
توجه داشته باشید :
در آموزش قبل گفتیم اگر در حین اجرای Xampp ، اگر Apache خطا داد باید پورت Apache را از 80 به 81 تغییر دهید. بنابراین اینجا باید آدرس را به صورت ” http://127.0.0.1:81/test ” وارد کنید. یعنی :81 را باید اضافه کنید.چون پورت پیش فرض 80 بوده است.
- برای کسانی که پورت 80 را تغییر داده اند به صورت زیر وارد کنند.
- حتما سرور را روی Testing قرار دهید نه Remote. چون سرور محلی کار می کنیم.
- خب بعد از ایجاد اولین سایت در Dreamweaver نوبت به ایجاد اولین صفحه این سایت می باشد. در قسمت file –> New را کلیک کنید تا اولین صفحه سایت را ایجاد کنید.
- یک پنجره مطابق تصویر باز می شود و اینجا باید زبان مورد نظرتون رو انتخاب کنید . چون ما می خواهیم سمت سرور کدنویسی کنیم پس php را انتخاب می کنیم و Create را می زنیم. همانطور که می بینید زبان های سمت کلاینت که در جلسه اول بحث کردیم، هم موجودند (Html , css , javascript)
- خب صفحه ای باز می شود شامل چندین خط کد. (لازم است اینجا ی سری مفاهیم را توضیح دهیم تا در ادامه کار راحت باشیم)
تگ چیست؟
از نظر لغوی یعنی برچسب. در زبان های برنامه نویسی مثل php، html و … تگ ها کدهای تعریف شده در این محیط هستند پس به هرکدام از عباراتی که بین دو علامت کوچکترو بزرگتر قرار گرفته است می گوییم تگ. مثال: <table>
هر تگی باید باز شود و حتما بسته شود:
<table>
</table>
و البته یک سری تگ ها هم هستند که در یک تگ هم باز می شود هم بسته مثل:
<br/>
همانطور که در پروژه جدیدی مطابق تصویر می بینید، یک صفحه ساده داریم که با تگ html شروع می شود و در بدنه آن دو تگ head و body داریم.
تگ <head></head> :
به زبان ساده اطلاعات داخل این تگ، به درد گوگل و مرورگر می خوره نه کاربر. (همچنین می توانید بحث های مربوط به سئو سایت رو اینجا پیاده کنید)
همانطور که می بینید دو تگ meta و title به صورت پیشفرض در آن تعریف شده است. تگ title مربوط به عنوانی است که در بالای صفحه مرورگر نمایش داده می شود. تگ meta هم شامل اطلاعاتی است که توسط مرورگر برای نحوه نمایش محتویات یا بارگذاری صفحه و همچنین تعیین کلمات کلیدی صفحه (مرتبط با سئو)و .. مورد استفاده قرار می گیرد.
تگ <body></body>:
مواردی که در سایت کاربر می تونه ببینه و مورد استفاده کاربر است اینجا تعریف می شه. و ما در این قسمت کدنویسی می نویسیم.
- اینجا می توانیم تنظیمات انجام دهیم که فقط محیط کدنویسی را به نمایش دهد یا فقط محیط طراحی.
- و یا همزمان که کد می زنیم سایت هم ببینیم(بدون نیاز به باز کردن در مرورگر) . برای نمایش دو وضعیت کد و طراحی ، روی view کلیک کنید و گزینه Split را انتخاب کنید. code-Design را انتخاب کنید.
- فعلا در بدنه body یک عبارت می نویسیم و title را تغییر می دهیم تا ببینید کجا استفاده می شود. این سایت ساده را اجرا می کنیم تا با نحوه اجرا سایت آشنا شوید. هر چند الان در قسمت طراحی می توانیم خروجی کد را ببینیم.(توضیح کدنویسی در جلسه بعد گفته می شود)
نحوه اجرای سایت
- قبل از اجرا باید صفحه ایجاد شده را ذخیره کنید. روی file –> save کلیک کنید و آن را در پوشه test که در htdocs تعریف کردیم ( قرار شد تمام صفحات مربوط به این سایت در آن باشد ) ذخیره کنید.
- نکته: در انتخاب نام اولین صفحه باید یک نکته ای را رعایت کنید و آن این است که به صورت پیش فرض بهتراست نام اولین صفحه index.php باشد. چرا؟
چون به Apache فهمانده اند که هر موقع خواستی سایتی را اجرا کنی. باید در پوشه مربوط به(مثلا test) که در مسیر htdocs قرار دارد به دنبال صفحه ای با نام index باشی. (باقی صفحات هم به اولین صفحه لینک می شوند) - نکته: Uincode Normalization From را در حالت None قرار دهید. در واقع اینجا مشخص می کنیم حالت جهانی سایت چی باید باشد،تا سایت درست نمایش داده شود.
- حالا نوبت به این رسیده است که Xampp را اجرا کنید.
- حالا برای اجرای اولین سایت باید مرورگر مورد نظر خود را انتخاب کنید. برای این کار ابتدا باید روی فایل php خود یعنی index.php کلیک راست کنید و گزینه open Browser را انتخاب کنیدمرورگر را انتخاب کنید مثلا مرورگر Chrome. می توانید از کلید میانبر F12 هم استفاده کنید.
- ببینید ایجاد اولین سایت در Dreamweaver. (به عبارت “آموزش php” توجه کنید کجا قرار گرفته است )
خب در این جلسه توانستیم ایجاد اولین سایت در Dreamweaver و نحوه اجرای آن را توضیح دهیم . امیدواریم لذت برده باشد. در جلسه بعد قصد داریم یک فرم ساده طراحی کنیم . با ما همراه باشید.
خدا خیرت بده مهندس چند روز بود درگیر این مطلب بودم حل نمی شد.با این راهنمایی شما کارم راه افتاد
قربونت دادا ده تومن
خیلی ممنونم از آموزش مفیدتون
سلام، خیلی خیلی ممنون بابت توضیحات خیلی مفید و خودتان.با آرزوی سلامتی
سلام آقای مهندس آموزش این بخش عالی بود.. حرف نداشت..
کمک میخام table برای من غیرفعال هست اشکال کجاست چطور میتونم فعالش کنم؟؟؟؟؟
سلام ببخشید من یه مشکلی موقع اجرا دارم که کدهای من سینک نمیشه یعنی تغییراتی که تو کد میدم با احرا اعمال نمیشه مخصوصا فایل سی اس اس و جدیدا خود کدهای php. بصورت دستی سینکرونایز رو میزنم ولی بازم درست نمیشه. یه سوال دیگه چه زمانی از پوت و گت استفاده کنم؟ . و ممنون میشم جواب رو برام ایمیل کنید.
چند وقت بود مشکل داشتم . عالی بود مرسی مشکلم حل شددددد
تااینجا که خیلی عالی بود. خسته نباشید. خدا قوت
سلام خداخیرتون بده من واقعا این قسمت ها رو مشکل داشتم کاملا متوجه شدم خداقوت
واقعا عالی کارم راه افتاد برنامه اش هم مناسبه ویندوزمه
ممنون خیلی مفید بود
سلام خدا قوت واقعا عالی
سلام یه سوالی داشتم من کد مینویسم دوساله و میدونم همه چیز رو تقریبا اما جدیدا دریم ویور خروجی نمیده نه با اکسپلور نه با کروم کلا f12 کار نمیکنه ک هیچ از طریق گزینه های دیگه ام نمیده ممنون میشم جواب بدید
شما به جای اینکه آدرس آیپی بدهید باید http://localhost بزنید همه چی اکی میشه لازم نیست برای هر پوشه ادرس دهیه کنید
سلام وقتی متن شرکت فنی مهندسی … رو مینویسم درون قسمت طراحی متن رو برعکس نشون میده به این صورت
مهندسی فنی شرکت
مشکل کجاست؟