یک آموزش بدرد بخور!

[eAmin]

سلام.

آیا تا به حال دلتون خواسته این عکس پایینی رو


این جوری توی صفحاتتون نشونش بدین

چند روز دندون رو جیگر بزارید آموزشش رو واستون می زارم.
منتظر باشید...

[my friend]

کار آموزش قابل تقدیر هست ، اما بهتر بود تاپیک رو موقعی ایجاد میکردید که میخواهید آموزش رو بزارید.
(این آموزش با استفاده از Css هست... درسته؟)

[eAmin]

کار آموزش قابل تقدیر هست ، اما بهتر بود تاپیک رو موقعی ایجاد میکردید که میخواهید آموزش رو بزارید.
(این آموزش با استفاده از Css هست... درسته؟)

سلام.

درسته ولی من این جوری آمدم که یکمی می خواستم تو کف بمونید . جدی نگیرید

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

فعلا...

[eAmin]

سلام.

امروز می خوام آموزش رو شروع کنم.

این عمل همون طور که قبلا اشاره شد با استفاده از CSS انجام می شه و شما باید تا حدودی با CSS آشنایی داشته باشید.

من می خوام این آموزش رو به چندین نوع مختلف توضیح بدم یعنی این که کارشون با هم یکی هست ولی در نوع نوشتن کدهای CSS تغییر ایجاد می کنیم.

خوب بریم سر اصل مطلب.

تمام کارهای ما با استفاده از دستورهای CSS زیر هست.

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

خوب حالا نوبت توضیح می رسه.

________________________________

Background-Image:;

این همون طور که از اسمش پیداست باید آدرس عکس رو در این دستور تعریف کنیم برای این که این کار رو بکنیم باید به صورت زیر عمل کنیم. پس:

Background-Image: url("Vista.png");

________________________________

Background-Repeat:;

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

no-Repeat = این عمل عکس رو تکرار نمی کنه یعنی عکس رو پشت سر هم تکرار نمی کنه.

Repeat-x = این عمل عکس رو به صورت افقی تکرار می کنه.

Repeat-y = این عمل هم عکس رو به صورت عمودی تکرار می کنه.

پس برای کار ما فعلا فقط با این دستور سر و کار داریم.

Background-Repeat: no-Repeat;

________________________________

Background-Position:;

این دستور برای تعیین موقعیت قرار گیری عکس ما هست.

این دستور به شکل های مختلفی می شه نوشت که من واستون نمونه هاش رو می زارم.

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

این نمونه های مختلفش بود که می شه نوشت البته به صورت دیگه هم می شه نوشت که این رو هم من توضیح می دم.

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

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

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

ما نمی تونیم این جوری بنویسیم مثلا

-2px رو به این صورت بنویسیم 2px

یادتون باشه علامت منفی رو بزارین ( - ) چون ما به طرف پایین می ریم نه به طرف بالا.

______________________________

Padding:;

این دستور برای تعیین این که کجا های عکس ما دیده بشه یا نشه مثل عمل Corp در Photoshop با این تفاوت که این عمل رو بر روی خود عکس ما انجام نمی ده بلکه فقط برای دید ماست.

این دستور رو هم می شه صورت مختلفی نوشت.

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

ولی به این صورت هم می شه نوشت.

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

ما می تونیم برای اینکه زیاد قاطی نشه به این صورت بنویسیم.

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

دیدید که ما bottom و left رو مقدار دهی نکردیم واسه ی این که کار ما راحت تر بشه این کار رو کردیم البته هیچ فرقی نمی کنه چه اینجوری بنویسیم چه یه جور دیگه.

___________________________

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

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

شما می تونید Span یا هر چیز دیگه ای استفاده کنید.

بعد این رو Save As کنید با فرمت htm یا html فرقی نمی کنه بعدا اجراش کنید.
خوب فعلا واسه ی امروز بسه بقیه اش رو بعدا می زارم.

فعلا.

ادامه دارد.............

[DaRiOuShJh]

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

[eAmin]

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

خواهش می کنم.

[eAmin]

سلام.

بدون مقدمه آموزش بعدی رو شروع می کنیم.

در آموزش قبل ما فقط از یک کلاس ( Class ) استفاده کردیم ولی اینبار از دو کلاس استفاده می کنیم.

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

همون طور که می بینید ما از این کلاس استفاده کردیم.

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

این عمل باعث می شه که دو کلاس با هم دیگه ادغام بشه یا یه جورایی به هم دیگه بچسبن.

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

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

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

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

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

حالا برای اینکه بتونیم ازش استفاده کنیم باید دوتا Div با کلاس های که تعریف کردیم استفاده کنیم. مثال:

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

همیشه یادتون باشه کلاسی رو که اول تعریف کردیم به عنوان کلاس مادر حساب می یاد و همیشه باید در Div اول تعریف بشه مثل کلاس Vista که اول تعریف شده.

خوب پس حالا کدهای ما این جوری تغییر می کنه:

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

خوب امیدوارم تا اینجای کار متوجه شده باشین.

بازم صبر کنید هنوز ادامه داره...

[eAmin]

سلام.

واقعا پوزش می خوام که اینقدر دیر دارم آموزش رو می زارم

خوب کجای کار بودیم.

حالا فهمیدم اینجای کار

حالا ااااااااااااا.

این آموزش هم فرق زیادی با پست قبلی نداره فقط یه خرده تغییر باید توی کد HTML ایجاد کنید.

مزیت این کار اینه که نیاز نداره دوتا DIV تعریف کنید یکی هم کافیه.

این صورت:

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

این کار هم کلاس ها رو با هم ادغام می کنه به این طریق که کلاس مادر+فاصله+کلاس بعدی ( همون بچه دیگه ).

ولی شما یک کار دیگه انجام بدید که اونم تغییر اندازه ی Padding هست که باید از قبلی یه خورده باید بزرگتر باشه ( 72 رو می کنیم 76 ).

حالا صفحه مون اینجوری تغییر می کنه.

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

آموزش آخر که مهمترین آموزش هست!!!

همونطور که گفتم پر کاربرد ترین آموزشهای این دوره هست.

توی این آموزش یک دستور دیگه اضافه می شه که تقریبا تمام کارهایی که مربوط به بک گراند ) Background ( می شه رو باخودش داره.

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

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

در این دستور زیاد لازم نیست به ترتیب تعریفشون کنید شما حتا می تونید بعضی از دستور ها رو هم نزارید.

برای کار ما همین هم کافیه زیر :

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

همون طور که می بینید ما این دستور ها رو به ترتیب درونش به کار بردیم.

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

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

پس صفحه ی ما به این شکل تغییر می کنه.

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

خوب دیدید که این چقدر بدرد بخور تره.

بالاخره آموزشمون به پایان خودش رسید.

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

راستی من نمونه ای از این آموزش ها رو واستون توی آدرس زیر گذاشتم می تونید دانلودش کنید.

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

امید وارم خوشتون آمده باشه خدا حافظ...

[lord_ashkan_z]

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

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

[eAmin]

سلام.

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