با سلام به دوستان گلم ...
نتیجه نظرسنجی رو دیدم .
خوشحالم که حمایت کردید برای شروع این دوره ، و خوشحالم که قراره همون دوتا چیز کمی هم که بلدم بین دوستانم نشر بدم.
منم طبق قولی که دادم دوره رو شروع می کنم.
----
حتما بخوانید ( یک توضیح کوچک درباره آموزش ها )
می خوایم این دوره رو متفاوت برگزار کنیم . مثل سایت های آموزشی همینطور مطلب نذاریم بریم جلو بلکه مشکل مطرح کنیم و حلش کنیم . با هم تبادل نظر کنیم و کارو پیش ببریم . اینجور پیشرفت کاری زیاد میشه . برای همین من یه موضوع دیگه باز می کنم که بتونیم تبادل نظر کنیم و مشکلاتو مطرح کنیم .در ضمن دوستان گل می تونن منو سعید صدا کنن .
خب زیاد حرف زدم بریم سراغ آموزش
------------------------------------------------
قسمت 1 : درباره اسکریپت و ساخت صفحه نخست
تصمیم گرفتم که تو این دوره روی یک اسکریپت مدیریت کاربر خوب و تقریبا حرفه ای کار کنیم اما امکانات و کارایی در این اسکریپت انجام میدیم که در خیلی از اسکریپت های دیگر کاربرد دارد . پس نگران نوع اسکریپت نباشید و تا پایان با ما همراه باشید .
خب در جلسه اول درباره صفحه نخست اسکریپت صحبت می کنیم و کمی روی این صفحه کار می کنیم .
در ابتدا برای راحتی کار و نوشتن کد برنامه های زیر را دانلود کنید . (اختیاری میباشد/به کار شما سرعت میبخشد)
notepad++Microsoft.Expression.Web
خب بعد از دانلود نرم افزار های زیر و نصب آن ها کار رو شروع می کنیم .
notepad کامپیوتر را باز می کنیم و کد های اصلی یک صفحه html را می نویسیم که کد های زیر هستند . نام صفحه مورد نظر را به صفحه نخست تغییر می دهیم .
<html>[/right]
<head><title>صفحه نخست</title></head><body></body></html>
اکنون کد زیر را دربین تگ <head> قرار می دهیم تا صفحه ما با زبان فارسی نیز درست کار کند.
<html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>صفحه نخست</title></head><body></body></html>
خب حالا سعی می کنیم طرحی که برای صفحه اول در نظر داریم را روی کاغذ پیاده کنیم . تا از همون ابتدا بدونیم که می خوایم صفحه مورد نظرمون چطور باشه .
من یه طرح ساده درست کردم که می خوایم طبق این پیش بریم . اگه خودتون می تونید یه صفحه زیباتر بسازید برای اسکریپتتون
طرح صفحه نخست :
خب میریم سراغ ساخت صفحه ای که طرحشو کشیدیم.
همونطور که در طرح میبینید صفحه یک فوتر و یک هدر دارد که قاعدتا باید در تمام صفحات باشند . ما ابتدا صفحه اصلی را کامل ساخته و سپس سه قسمت هدر ، فوتر و قسمت اصلی صفحه را جدا می کنیم .
خب برای ساخت قسمت هدر به روش زیر عمل می کنیم .
در تگ body تگ center را قرار می دهیم .
<html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>صفحه نخست</title></head><body><center></center></body></html>
حالا با استفاده از تگ div یک قسمت با عرض 700 پیکسل و ارتفاع 400 پیکسل می سازیم . و فاصله را از بالای صفحه 50 پیکسل در نظر می گیریم. این div اصلی می باشد .
<html><head><meta content="en-us" http-equiv="Content-Language"><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>صفحه نخست</title></head><body><center><div class="bodyclass" style="width:700px;height:400px;position:relative;top:50px;text-align:center"> </div></center></body></html>
حالا درون این div اصلی بخش هدر رو به وسیله یک div دیگر اضافه می کنیم.
خاصیت های div هدر : عرض : 700px ، ارتفاع : 100px ، بگراند : نارنجی
<html><head><meta content="en-us" http-equiv="Content-Language"><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>صفحه نخست</title></head><body><center><div class="bodyclass" style="width:700px;height:400px;position:relative;top:50px;text-align:center">// کد بخش هدر<div class="header" style="background-color:orange;width:700px;height:100px;position:relative"></div> </div></center></body></html>
اکنون با دو div دیگر باید بخش ورود و توضیحات را اضافه کنیم . در اینجا خاصیت float مشخص می کند که div کجا قرار گیرد .
<html><head><meta content="en-us" http-equiv="Content-Language"><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>صفحه نخست</title></head><body><center><div class="bodyclass" style="width:700px;height:400px;position:relative;top:50px;text-align:center">// کد بخش هدر<div class="header" style="background-color:orange;width:700px;height:100px;position:relative"></div>// کد بخش ورود<div class="loginbox" style="background-color:orange;width:245px;height:300px;position:relative;top:10px;float:right;margin-left:5px"></div>// کد بخش توضیحات<div class="morebox" style="background-color:orange;width:445px;height:300px;position:relative;top:10px;float:left;margin-right:5px"></div> </div></center></body></html>
خب حالا نوبت میرسد به فوتر ...
با یک div دیگر فوتر را درست می کنیم . توجه داشته باشید که این div بیرون از div اصلی باشد. یعنی قبل از </body>
<html><head><meta content="en-us" http-equiv="Content-Language"><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>صفحه نخست</title></head><body><center><div class="bodyclass" style="width:700px;height:400px;position:relative;top:50px;text-align:center">// کد بخش هدر<div class="header" style="background-color:orange;width:700px;height:100px;position:relative"></div>// کد بخش ورود<div class="loginbox" style="background-color:orange;width:245px;height:300px;position:relative;top:10px;float:right;margin-left:5px"></div>// کد بخش توضیحات<div class="morebox" style="background-color:orange;width:445px;height:300px;position:relative;top:10px;float:left;margin-right:5px"></div> </div></center><div class="footer" style="background:orange;position:fixed;width:100%;height:40px;bottom:0px;left:0px;text-align:center"></div></body></html>
خب کار ابتدایی با صفحه نخست تموم شد و می تونید نتیجه رو ببینید .
خب حالا فایل رو save کنید . البته توجه داشته باشید که طبق تنظیمات عکس زیر انجام بدهید.
در آموزش های بعدی روی html زیاد مانور نمیدیم . و سعی می کنیم بیشتر رو کد های php کار کنیم .
با تشکر کردن از این دوره حمایت کنید تا آموزش های بعدی رو زودتر قرار بدیم روی انجمن
