راهنمایی و آموزش مرجع و آسان در مورده طراحی وبسایت از پایه!

[DaRiOuShJh]

دوستان با توجه به تقاضا های شما دوستان این آموزشه کوچیک و ساده رو نوشتم اگر طرفدار داشت کاملترش هم میکنم
سوالاتتون رو همینجا بپرسید

1.

قالب چیست؟

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

قالب از کجا بیاری؟

سایت به این منظوره زیاده تو نت!
تنها کافیه که این عبارت رو کامل و به همین صورت جستجو کنی در گوگل (شامله دو ")

"free website template"

2.

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

2.1 یک سند html به نامه index.htm
2.2 یک directory یا folder به نامه images
2.3 عکس های یه کار رفته در قالب در فولدره images و در موارده لزوم فایل های js و ...
2.4 style.css
2.5 در بعضی موارد فایل های سورس یا استفاده یه شده شامله:
psd
swf
fla
swi
txt
font
و...

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

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

2.1 این سند فایله اصلیه قالب حساب میشه و باید تمامه تغییرات در اون داده بشه
تمامی کدها و ... در این سند قرار دارند
معمولا شامله لینک های خالی ای هم به about, home, contact us و ... میشه که شما بعد از انجامه تغییراتی که دوست داشتید و ایجاده صفحاته این قسمت ها میتونید این قسمت ها رو به صفحات مذکور link کنید

2.2 و 2.3 شامله object ها و عکس های استفاده شده در سنده index.htm میشه
تمامیه این موراد باید با همین نام و در همین فولدر آپود بشن تا مشکلی پیش نیاد
اگر هم خواستید در عکس ها تغییری بدید یا باید با همون اسم و همون سایز (دقیقا مشابه) save کنید یا اینکه به برنامه نویسی و زبان های html و css اشناییه لازم رو داشته باشید

2.4 شامله کدهای style و طرزه قرارگیریه object ها در سنده index.htm میشه
در مواردی کدهای اضافی ای هم برایه قسمت هایی که هنوز استفاده نشدند و ممکنه در آینده اضافه بشن هم هست
اگر به css آشنایی ندارید دست کاری ممنوع!

2.5 این فایل ها در بعضی قالب ها پیدا میشن
در این موارد از این برنامه ها استفاده کنید

psd --> photoshop
fla --> Marcomedia Flash
swi --> Swish

و ...

3.

در ویرایشه سند html یا هر سنده دیگری یادتون باشه که حتما قبل از اعماله تغییرات و در مواقعی خراب کاری!!! یک copy از فایله مذکور گرفته باشید

فونت های استاندارد و تعریف شده و شامله ساپورته فارسی از این قرارند:

tahoma
times new roman
arial
comic sans MS

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

تذکر: اگر تمایل به استفاده از فونت های دیگری در صفحات دارید به شما پیشنهاد میکنم که آنها را به گرافیک ویا عکس تبدیل کنید
مثلا به فایلهای فلش .swf یا عکس هایی با پسوند .jpg و .gif

4.

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

contactus.htm
aboutus.htm
links.htm
products.htm
و...

اگر هم عکسی یا مطالبی برایه این قسمت ها و صفحات در نظر دارید تو یه هر قسمت قرار میدید

و در انتها کلیه فایل ها رو آپلود میکنید

به همین سادگی میتونید صاحبه یک وبسایت بشید

DARIOUSHJH

[DaRiOuShJh]

با عرض سلام و خسته نباشید خدمته شما دوسته عزیز

میخوایم با هم به زبونه خیلی ساده و راحت با کدهای پایه و ترکیبیه زبونه HTML و مقداری هم زبون های CSS و JavaScript آشنا بشیم

.: مقدمه:

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

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

تذکر: من اینجا به طور خلاصه هر قسمت رو توضیح میدم، پیدا کردنه اطلاعات کاملتر و جامع تر و همینطور آنایی کامل با کدها و متغیرهای هر کدوم بر عهده یه خودتون هست

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

.: توضیحاته قسمتها:

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

<html dir="rtl" lang="fa">

2. دستوراتی هستند که به صورته comment و فقط در source یا همون منبعه صفحات به نمایش در میان، در مرورگر نشون داده نمیشند

3. هر سنده HTML از دوقسمته اصلی تشکیل میشه

HEAD که شامله اطلاعاته معرفی سند به مرورگر و نوعه محتوا و ... میشه (در محتوایه صفحات نقشه چندانی نداره)

BODY که بدنه یه سند هست؛ یعنی کلیه مطالبی که قراره در صفحه نشون داده بشه در این قسمت قرار میگیرن؛ در آینده بیشتر آشنا میشیم با این قسمت...

4. META TAG ها تقریبا اولین پله ارتباطی بینه مرورگر یا همون browser و سنده شما هستند، علاوه بر این نقشه مهمی رو در index شدنه صفحات شما در موتورهای جستجو و همینطور Rnking صفحه و زیر شاخه بندی و ... سایت دارن پس به اونها خیلی توجه داشته باشید و کامل پر کنیدشون

4.1 خطه 8: در این قسمت شما کلماته کلیدیتون رو با توجه به محتوایه سایت و صفحتون میزارید به جایه عبارته keywords!!!

معمولا شامله چند مورد میشه که هر مورد رو با ویرگول و فاصله جدا میکنید

4.2 خطه 9: توضیحی مختصر و کوتاه از سایتتون و محتواش به جایه عبارته Description!!!

4.3 خطه 10: به مرورگر میگه که باید کدها و نوشته ها چون فارسی هستند یونیکد بشه تا عجق مجق نشون نده

4.4 خطه 11: ماننده خطه 14 میگه که مطالب و زبونه سایت فارسی هست

4.5 خطه 12 و خطه 15: سایته شما رو در شاخه یه عمومی دسته بندی میکنه، اگه خواستید تغییر بدید

4.6 خطه 13: موضوعه سایته شما

4.7 خطه 16: به مرورگر میگه که برایه عکس های صفحه image toolbar رو نیاره

5. کده الصاقه فایله CSS خارجی external در صفحه (در سایت هایه پر صفحه و انجمن ها خیلی میتونه در حجم و سرعته بالا اومدنه load صفحه تاثیر گزار باشه)

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

7. ماننده مورد 5 یک کده CSS ولی ایندفه به صورته inline

با این کد عکسه شما در پشته صفحه در وسط و به صورت چفت شده fix نشون داده میشه

8. در این قسمت هم متنی رو که در بالایه پنجره یه مرورگر نشون داده میشه میدید (میتوه نامه سایت، نامه صفحه و ... باشه)

9. </head> یعنی به پایانه قسمته HEAD سند رسیدیم

10. از اینجا به بعد با کدی که گزاشته شده وارده قسمته بدنه یا BODY سند میشیم

11. این کد همون کده <body> هست ولی چند تا متغیر هم بهش اضافه کردیم

11.1 ثابت شدنه بک گراند در صورته وجوده عکس

11.2 فاصله از بالا و سمته چپه صفحه صفر پیکسل باشه

11.3 رنگه زمینه یه صفحه مشکی باشه (000000 در کدهای RGB یعنی red green blue به معنیه کم رنگ بودن و عدمه رنگ داشتنه هر 3 رنگه قرمز، سبز، و آبی هست که معادله مشکی هست، در نقطه یه مقابل FFFFFF نشانگره پر رنگ بودنه هر سه رنگ در نتیجه سفید بودنه رنگ میشه، به همین تریب با مقادیره مختلف میشه رنگ هایه مختلف رو به درست آورد)

12. کده الصاقه سنده جاوا اسکریپته خارجی (ماننده مورد 5)

13. نمونه ای از استفاده از کدهای div, table,td,tr و همنطور کده IFRAME که امکانه لود شدنه صفحه ای دیگر در صفحه یه شما رو میده و متغیرهای یه هر کدوم (برایه مشاهده یه کده کامل به فایله ضمیمه مراجعه کنید)

14. نمونه ای از EMBED کردن آبجکت ها

در این مورد فایله مورده نظر یک فایله فلش هست که تنظیماته خودش رو داره (سادن نیازی به توضیح نمیبین

15. این هم کده img که مخصوصه وارد کردنه فایل های عکس image به سند و نمایشه اونهاس border به معنیه حاشیه، لبه ای برایه عکسه شما درست میکنه که با 0 گزاشتنه مقدار نمایش داده نمیشه

16. در این قسمت قسمته بدنه هم به پایان رسیده

17. پایانه سنده HTML و والسلام!!!


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

امیدوارم این آموزش به کاره شما اومده باشه

موفق و موید باشید...

.: DaRiOuShJh :.

اینم لینکه دانلوده آموزش + عکس + فایله نمونه (106 کیلوبایت)

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

[eAmin]

سلام داریوش جان.

مرسی دستت درد نکنه.

آره حتما لازم می شه.

[DaRiOuShJh]

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

[tabriz-info]

موافقم بهتره لینکشو همیشه داشته باشی تا وقتی اینجور سوالا پیش میاد برای بار 100 توضیح داده نشه

[DaRiOuShJh]

در پسته دو آموزشه کامل + عکس رو گزاشتم
لطفا یکی از دوستانه رهگزر که از اینورا رد شد!!! این تاپیک رو استیکی کنه نره پایین!!!

[Oracle_Eldorado]

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

[majid-ar]

ایول داریوش جون.

کارت خیلی خوبه.

[DaRiOuShJh]

خواهش میکنم دوستان

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

[DaRiOuShJh]

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