رفتن به مطلب

ویژه آموزش اسکریپت نویسی (اختصاصی)


plus

پست های پیشنهاد شده

با سلام به دوستان گلم ...

نتیجه نظرسنجی رو دیدم .

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

منم طبق قولی که دادم دوره رو شروع می کنم.

 

----

حتما بخوانید ( یک توضیح کوچک درباره آموزش ها )

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

خب زیاد حرف زدم بریم سراغ آموزش

 

------------------------------------------------

 

قسمت 1 : درباره اسکریپت و ساخت صفحه نخست

 

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

 

خب در جلسه اول درباره صفحه نخست اسکریپت صحبت می کنیم و کمی روی این صفحه کار می کنیم .

 

در ابتدا برای راحتی کار و نوشتن کد برنامه های زیر را دانلود کنید . (اختیاری میباشد/به کار شما سرعت میبخشد)

 

لینک ها تنها برای اعضای سایت قابل نمایش است.

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

 

 

خب بعد از دانلود نرم افزار های زیر و نصب آن ها کار رو شروع می کنیم .

 

 

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 کنید . البته توجه داشته باشید که طبق تنظیمات عکس زیر انجام بدهید.

 

00ab-t187213.png

 

 

 

در آموزش های بعدی روی html زیاد مانور نمیدیم . و سعی می کنیم بیشتر رو کد های php کار کنیم .

 

 

با تشکر کردن از این دوره حمایت کنید تا آموزش های بعدی رو زودتر قرار بدیم روی انجمن

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

ای

ده تون واقعا عالیه،

اما در کدها شما تمامی کد های قدیمی و قابل بهبود رو جای دادید!

به جای کد:

 

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

 

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

 

<meta charset="UTF-8">

 

البته کدی که شما هم برای کارست دادید درست هست اما با نوع پرونده شما ( که به عنوان 5 اطلاع رسانی کردید ) تناقض داره.

بهتر است به تگ html، خاصیت lang اضافه شود:

 

<html lang="fa-IR">

 

همچنین بهتر است برای تبدیل صفحه به حالت واکنش گرا کد زیر را به عنوان فرزند head اضافه کنید:

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

در نتیجه کد زیر از بخش head حذف میشود:

 

<meta content="en-us" http-equiv="Content-Language">

 

بهتر است به جای تگ منقضی شده center در html4، از css استفاده کنید:

 

<link rel="stylesheet" href="https://go.20script.ir/index.php?url=style.css"><div class="center"></div>

 

و در فایل style.css اسجاد شده در مجاورت index.php:

 

@charset "utf-8";.center {text-align: center !important;}

 

همچنین کد های css درون خطی، بر سئو تاثیر منفی دارند و بهتر است خارجی سازی شوند/

استفاده از تگ های header و footer و ... به جای آی دی دهی به div ها فراموش نشود.

موفق باشید

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

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

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...