Printable View
سلام.
آیا تا به حال دلتون خواسته این عکس پایینی رو
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
این جوری توی صفحاتتون نشونش بدین [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
چند روز دندون رو جیگر بزارید آموزشش رو واستون می زارم.
منتظر باشید...
کار آموزش قابل تقدیر هست ، اما بهتر بود تاپیک رو موقعی ایجاد میکردید که میخواهید آموزش رو بزارید.
(این آموزش با استفاده از Css هست... درسته؟)
سلام.نقل قول:
درسته ولی من این جوری آمدم که یکمی می خواستم تو کف بمونید . جدی نگیرید
در رابطه با سوالتون هم باید جواب بدم که بله همین طوره که شما می گید.
فعلا...
سلام.
امروز می خوام آموزش رو شروع کنم.
این عمل همون طور که قبلا اشاره شد با استفاده از CSS انجام می شه و شما باید تا حدودی با CSS آشنایی داشته باشید.
من می خوام این آموزش رو به چندین نوع مختلف توضیح بدم یعنی این که کارشون با هم یکی هست ولی در نوع نوشتن کدهای CSS تغییر ایجاد می کنیم.
خوب بریم سر اصل مطلب.
تمام کارهای ما با استفاده از دستورهای CSS زیر هست.
[HTML]Background-Image:;
Background-Repeat:;
Background-Position:;
Padding:;[/HTML]
خوب حالا نوبت توضیح می رسه.
________________________________
Background-Image:;
این همون طور که از اسمش پیداست باید آدرس عکس رو در این دستور تعریف کنیم برای این که این کار رو بکنیم باید به صورت زیر عمل کنیم. پس:
Background-Image: url("Vista.png");
________________________________
Background-Repeat:;
این دستور برای تکرار عکس هست که عمل های مختلفی داره که من تک تکشون رو توضیح می دم.
no-Repeat = این عمل عکس رو تکرار نمی کنه یعنی عکس رو پشت سر هم تکرار نمی کنه.
Repeat-x = این عمل عکس رو به صورت افقی تکرار می کنه.
Repeat-y = این عمل هم عکس رو به صورت عمودی تکرار می کنه.
پس برای کار ما فعلا فقط با این دستور سر و کار داریم.
Background-Repeat: no-Repeat;
________________________________
Background-Position:;
این دستور برای تعیین موقعیت قرار گیری عکس ما هست.
این دستور به شکل های مختلفی می شه نوشت که من واستون نمونه هاش رو می زارم.
[HTML]Background-Position-left:;
Background-Position-top:;
Background-Position-right:;
Background-Position-bottom:;[/HTML]
این نمونه های مختلفش بود که می شه نوشت البته به صورت دیگه هم می شه نوشت که این رو هم من توضیح می دم.
[HTML]Background-Position: left top right bottom; [/HTML]
حالا اگه ما بخوایم باهاش کار کنیم به ترتیب بالا عمل می کنیم.( یادتون باشه به ترتیب بالا )
[HTML]Background-Position: 0px -2px 0px 0px;[/HTML]
ما نمی تونیم این جوری بنویسیم مثلا
-2px رو به این صورت بنویسیم 2px
یادتون باشه علامت منفی رو بزارین ( - ) چون ما به طرف پایین می ریم نه به طرف بالا.
______________________________
Padding:;
این دستور برای تعیین این که کجا های عکس ما دیده بشه یا نشه مثل عمل Corp در Photoshop با این تفاوت که این عمل رو بر روی خود عکس ما انجام نمی ده بلکه فقط برای دید ماست.
این دستور رو هم می شه صورت مختلفی نوشت.
[HTML]Padding-top:;
Padding-right:;
Padding-bottom:;
Padding-left:;[/HTML]
ولی به این صورت هم می شه نوشت.
[HTML]Padding: top right bottom left; [/HTML]
ما می تونیم برای اینکه زیاد قاطی نشه به این صورت بنویسیم.
[HTML]Padding: 72px 0px;[/HTML]
دیدید که ما bottom و left رو مقدار دهی نکردیم واسه ی این که کار ما راحت تر بشه این کار رو کردیم البته هیچ فرقی نمی کنه چه اینجوری بنویسیم چه یه جور دیگه.
___________________________
خوب توضیحات تموم شد و حالا ما می ریم که کارمون رو عملی کنیم.
من این کدها رو توی Notepad ویندوز می نویسم شما هم می تونید همین کار رو بکنید.
[HTML]<HTML>
<HEAD>
<Style>
.Vista {
Background-Image: url("Vista.png");
Bacground-Repeat: no-Repeat;
Background-Position:0px -2px;
Padding: 72px 0px 0px 0px;
}
</Style>
</HEAD>
<Body>
<Div Class="Vista"></Div>
</Body>
</HTML>[/HTML]
شما می تونید Span یا هر چیز دیگه ای استفاده کنید.
بعد این رو Save As کنید با فرمت htm یا html فرقی نمی کنه بعدا اجراش کنید.
خوب فعلا واسه ی امروز بسه بقیه اش رو بعدا می زارم.
فعلا.
ادامه دارد.............
ممنون امین جان
جامع و کاربردی بود
منتظره بقیش هستیم
خواهش می کنم.نقل قول:
سلام.
بدون مقدمه آموزش بعدی رو شروع می کنیم.
در آموزش قبل ما فقط از یک کلاس ( Class ) استفاده کردیم ولی اینبار از دو کلاس استفاده می کنیم.
[HTML]
.Vista {
دستورا ها
}
.Vista, .Live {
دستورها
}
[/HTML]
همون طور که می بینید ما از این کلاس استفاده کردیم.
[HTML].Vista, .Live[/HTML]
این عمل باعث می شه که دو کلاس با هم دیگه ادغام بشه یا یه جورایی به هم دیگه بچسبن.
شما می تونید چندین کلاس رو با هم ادغام کنید.مثل این زیر:
[HTML].Vista, .Live, .New, .Fonts[/HTML]
ما با این کار می تونیم بعضی از دستورها توی یک کلاس بنویسیم بعضی از دستورها رو توی کلاس دیگه.مثل این مورد که ما می خوایم ازش استفاده کنیم.
[HTML]
.Vista {
Background-Image: url("Vista.png");
Background-Repeat: no-Reoeat;
Padding: 72px 0px 0px 0px;
}
.Vista, .Live {
Background-Position: 0px -2px;
}
[/HTML]
در دفعه ی قبل ما همه ی دستورات رو در یک کلاس تعریف کردیم ولی اینبار فرق می کنه ما یک دستور رو در کلاس Live تعریف کردیم.
حالا برای اینکه بتونیم ازش استفاده کنیم باید دوتا Div با کلاس های که تعریف کردیم استفاده کنیم. مثال:
[HTML]<Div Class="Vista">
<Div Class="Live"></Div>
</Div>[/HTML]
همیشه یادتون باشه کلاسی رو که اول تعریف کردیم به عنوان کلاس مادر حساب می یاد و همیشه باید در Div اول تعریف بشه مثل کلاس Vista که اول تعریف شده.
خوب پس حالا کدهای ما این جوری تغییر می کنه:
[HTML]<HTML>
<HEAD>
<Style>
.Vista {
Background-Image: url("Vista.png");
Bacground-Repeat: no-Repeat;
Padding: 72px 0px 0px 0px;
}
.Vista, .Live {
Background-Position: 0px -2px;
}
</Style>
</HEAD>
<Body>
<Div Class="Vista">
<Div Class="Live"></Div>
</Div>
</Body>
</HTML>[/HTML]
خوب امیدوارم تا اینجای کار متوجه شده باشین.
بازم صبر کنید هنوز ادامه داره...
سلام.
واقعا پوزش می خوام که اینقدر دیر دارم آموزش رو می زارم:19:
خوب کجای کار بودیم.
حالا فهمیدم اینجای کار:31:
حالا ااااااااااااا.
این آموزش هم فرق زیادی با پست قبلی نداره فقط یه خرده تغییر باید توی کد HTML ایجاد کنید.
مزیت این کار اینه که نیاز نداره دوتا DIV تعریف کنید یکی هم کافیه.
این صورت:
[html]<div class="Vista Live"></div>[/html]این کار هم کلاس ها رو با هم ادغام می کنه به این طریق که کلاس مادر+فاصله+کلاس بعدی ( همون بچه دیگه ).
ولی شما یک کار دیگه انجام بدید که اونم تغییر اندازه ی Padding هست که باید از قبلی یه خورده باید بزرگتر باشه ( 72 رو می کنیم 76 ).
حالا صفحه مون اینجوری تغییر می کنه.
[html]<html>
<head>
<Title>Amin eHelp --- Sample 3</Title>
<Style>
.Vista {
Border:none;
Background-Image:url("Vista.png");
Padding:76px 0px 0px 0px;
Background-Repeat: no-Repeat;
}
.Live {
Background-Position:0px -80px;
}
</Style>
</head>
<Body>
<div class="Vista Live"></div>
</Body>
</html>[/html]
آموزش آخر که مهمترین آموزش هست!!!
همونطور که گفتم پر کاربرد ترین آموزشهای این دوره هست.
توی این آموزش یک دستور دیگه اضافه می شه که تقریبا تمام کارهایی که مربوط به بک گراند ) Background ( می شه رو باخودش داره.
این نوع نوشتن دستور هست. به این شکل:
[html]Background: Transparent | Color | URL | Repeat | Scroll | Position[/html]در این دستور زیاد لازم نیست به ترتیب تعریفشون کنید شما حتا می تونید بعضی از دستور ها رو هم نزارید.
برای کار ما همین هم کافیه زیر :
[html]Background:url("Vista.png") 0px -158px no-repeat;[/html]همون طور که می بینید ما این دستور ها رو به ترتیب درونش به کار بردیم.
[html]Background-Image:url("Vista.png");
Background-Position:0px -158px;
Background-Repeat: no-Repeat;[/html]این کد علاوه بر این که کار مارو سریعتر راه می ندازه بلکه بهینه سازی هم در کدمون انجام می گیره.
پس صفحه ی ما به این شکل تغییر می کنه.
[html]<html>
<head>
<Title>Amin eHelp --- Sample 4</Title>
<Style>
.Vista {
Border:none;
Background:url("Vista.png") 0px -158px no-repeat;
Padding:76px 0px 0px 0px;
}
</Style>
</head>
<Body>
<div class="Vista"></div>
</Body>
</html>[/html]خوب دیدید که این چقدر بدرد بخور تره.
بالاخره آموزشمون به پایان خودش رسید.
دوستان هر کس از شما مشکلی داشت این جا مطرح کنید. تا در اصرع وقت جوابتون رو بگیرید.
راستی من نمونه ای از این آموزش ها رو واستون توی آدرس زیر گذاشتم می تونید دانلودش کنید.
امید وارم خوشتون آمده باشه خدا حافظ...کد:http://amin.ehelp.googlepages.com/AmineHelp---CSSSample.rar
من یک کاربر تازه کار در زمینه شبکه ام و هر چی زور می زنم که از یک نفر بپرسم چه چوری یک سایت بسازم که بازدید کنندگان بتوانند مطلبی را نوشته و ارسال کنند که بعد از تایید مدیر نمایش داده شود نمی توانم. در ضمن من می خواهم یک بخش برای عضویت بگذارم که کسانی که عضو نیستند نتواند به این بخش وارد شوند.
گفتم شما که خیلی باحالید جواب منو بدید.
جهت اطلاعات بیشتر به روزنامه های ... ببخشید به بخش در خواست کد جوا در صفحه قبل (چنذ سطر پایین تر ) مراجعه فرمایید. لطفا.
سلام.
خواهش می کنم شما هم با حالید برید به تاپیک خودتون جوابتون رو همون جا می دم.