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

واضح آرشیو وب فارسی:سایت ریسک: Amin eHelp01-11-2007, 09:51 AMسلام. آیا تا به حال دلتون خواسته این عکس پایینی رو http://amin.ehelp.googlepages.com/Vista.png این جوری توی صفحاتتون نشونش بدینhttp://amin.ehelp.googlepages.com/Vista 2.png چند روز دندون رو جیگر بزارید آموزشش رو واستون می زارم. منتظر باشید... my friend01-11-2007, 01:57 PMکار آموزش قابل تقدیر هست ، اما بهتر بود تاپیک رو موقعی ایجاد میکردید که میخواهید آموزش رو بزارید. (این آموزش با استفاده از Css هست... درسته؟) Amin eHelp01-11-2007, 05:34 PMکار آموزش قابل تقدیر هست ، اما بهتر بود تاپیک رو موقعی ایجاد میکردید که میخواهید آموزش رو بزارید. (این آموزش با استفاده از Css هست... درسته؟) سلام. درسته ولی من این جوری آمدم که یکمی می خواستم تو کف بمونید . جدی نگیرید در رابطه با سوالتون هم باید جواب بدم که بله همین طوره که شما می گید. فعلا... Amin eHelp04-11-2007, 11:26 AMسلام. امروز می خوام آموزش رو شروع کنم. این عمل همون طور که قبلا اشاره شد با استفاده از CSS انجام می شه و شما باید تا حدودی با CSS آشنایی داشته باشید. من می خوام این آموزش رو به چندین نوع مختلف توضیح بدم یعنی این که کارشون با هم یکی هست ولی در نوع نوشتن کدهای CSS تغییر ایجاد می کنیم. خوب بریم سر اصل مطلب. تمام کارهای ما با استفاده از دستورهای CSS زیر هست. Background-Image:; Background-Repeat:; Background-Position:; Padding:; خوب حالا نوبت توضیح می رسه. ________________________________ Background-Image:; این همون طور که از اسمش پیداست باید آدرس عکس رو در این دستور تعریف کنیم برای این که این کار رو بکنیم باید به صورت زیر عمل کنیم. پس: Background-Image: url("Vista.png"); ________________________________ Background-Repeat:; این دستور برای تکرار عکس هست که عمل های مختلفی داره که من تک تکشون رو توضیح می دم. no-Repeat = این عمل عکس رو تکرار نمی کنه یعنی عکس رو پشت سر هم تکرار نمی کنه. Repeat-x = این عمل عکس رو به صورت افقی تکرار می کنه. Repeat-y = این عمل هم عکس رو به صورت عمودی تکرار می کنه. پس برای کار ما فعلا فقط با این دستور سر و کار داریم. Background-Repeat: no-Repeat; ________________________________ Background-Position:; این دستور برای تعیین موقعیت قرار گیری عکس ما هست. این دستور به شکل های مختلفی می شه نوشت که من واستون نمونه هاش رو می زارم. Background-Position-left:; Background-Position-top:; Background-Position-right:; Background-Position-bottom:; این نمونه های مختلفش بود که می شه نوشت البته به صورت دیگه هم می شه نوشت که این رو هم من توضیح می دم. Background-Position: left top right bottom; حالا اگه ما بخوایم باهاش کار کنیم به ترتیب بالا عمل می کنیم.( یادتون باشه به ترتیب بالا ) Background-Position: 0px -2px 0px 0px; ما نمی تونیم این جوری بنویسیم مثلا -2px رو به این صورت بنویسیم 2px یادتون باشه علامت منفی رو بزارین ( - ) چون ما به طرف پایین می ریم نه به طرف بالا. ______________________________ Padding:; این دستور برای تعیین این که کجا های عکس ما دیده بشه یا نشه مثل عمل Corp در Photoshop با این تفاوت که این عمل رو بر روی خود عکس ما انجام نمی ده بلکه فقط برای دید ماست. این دستور رو هم می شه صورت مختلفی نوشت. Padding-top:; Padding-right:; Padding-bottom:; Padding-left:; ولی به این صورت هم می شه نوشت. Padding: top right bottom left; ما می تونیم برای اینکه زیاد قاطی نشه به این صورت بنویسیم. Padding: 72px 0px; دیدید که ما bottom و left رو مقدار دهی نکردیم واسه ی این که کار ما راحت تر بشه این کار رو کردیم البته هیچ فرقی نمی کنه چه اینجوری بنویسیم چه یه جور دیگه. ___________________________ خوب توضیحات تموم شد و حالا ما می ریم که کارمون رو عملی کنیم. من این کدها رو توی Notepad ویندوز می نویسم شما هم می تونید همین کار رو بکنید. <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> شما می تونید Span یا هر چیز دیگه ای استفاده کنید. بعد این رو Save As کنید با فرمت htm یا html فرقی نمی کنه بعدا اجراش کنید. خوب فعلا واسه ی امروز بسه بقیه اش رو بعدا می زارم. فعلا. ادامه دارد............. DaRiOuShJh04-11-2007, 02:44 PMممنون امین جان جامع و کاربردی بود منتظره بقیش هستیم Amin eHelp05-11-2007, 04:58 PMممنون امین جان جامع و کاربردی بود منتظره بقیش هستیم خواهش می کنم. Amin eHelp05-11-2007, 05:52 PMسلام. بدون مقدمه آموزش بعدی رو شروع می کنیم. در آموزش قبل ما فقط از یک کلاس ( Class ) استفاده کردیم ولی اینبار از دو کلاس استفاده می کنیم. .Vista { دستورا ها } .Vista, .Live { دستورها } همون طور که می بینید ما از این کلاس استفاده کردیم. .Vista, .Live این عمل باعث می شه که دو کلاس با هم دیگه ادغام بشه یا یه جورایی به هم دیگه بچسبن. شما می تونید چندین کلاس رو با هم ادغام کنید.مثل این زیر: .Vista, .Live, .New, .Fonts ما با این کار می تونیم بعضی از دستورها توی یک کلاس بنویسیم بعضی از دستورها رو توی کلاس دیگه.مثل این مورد که ما می خوایم ازش استفاده کنیم. .Vista { Background-Image: url("Vista.png"); Background-Repeat: no-Reoeat; Padding: 72px 0px 0px 0px; } .Vista, .Live { Background-Position: 0px -2px; } در دفعه ی قبل ما همه ی دستورات رو در یک کلاس تعریف کردیم ولی اینبار فرق می کنه ما یک دستور رو در کلاس Live تعریف کردیم. حالا برای اینکه بتونیم ازش استفاده کنیم باید دوتا Div با کلاس های که تعریف کردیم استفاده کنیم. مثال: <Div Class="Vista"> <Div Class="Live"></Div> </Div> همیشه یادتون باشه کلاسی رو که اول تعریف کردیم به عنوان کلاس مادر حساب می یاد و همیشه باید در Div اول تعریف بشه مثل کلاس Vista که اول تعریف شده. خوب پس حالا کدهای ما این جوری تغییر می کنه: <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> خوب امیدوارم تا اینجای کار متوجه شده باشین. بازم صبر کنید هنوز ادامه داره... Amin eHelp10-11-2007, 04:28 PMسلام. واقعا پوزش می خوام که اینقدر دیر دارم آموزش رو می زارم:19: خوب کجای کار بودیم. حالا فهمیدم اینجای کار:31: حالا ااااااااااااا. این آموزش هم فرق زیادی با پست قبلی نداره فقط یه خرده تغییر باید توی کد HTML ایجاد کنید. مزیت این کار اینه که نیاز نداره دوتا DIV تعریف کنید یکی هم کافیه. این صورت: <div class="Vista Live"></div>این کار هم کلاس ها رو با هم ادغام می کنه به این طریق که کلاس مادر+فاصله+کلاس بعدی ( همون بچه دیگه ). ولی شما یک کار دیگه انجام بدید که اونم تغییر اندازه ی Padding هست که باید از قبلی یه خورده باید بزرگتر باشه ( 72 رو می کنیم 76 ). حالا صفحه مون اینجوری تغییر می کنه. <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> آموزش آخر که مهمترین آموزش هست!!! همونطور که گفتم پر کاربرد ترین آموزشهای این دوره هست. توی این آموزش یک دستور دیگه اضافه می شه که تقریبا تمام کارهایی که مربوط به بک گراند ) Background ( می شه رو باخودش داره. این نوع نوشتن دستور هست. به این شکل: Background: Transparent | Color | URL | Repeat | Scroll | Positionدر این دستور زیاد لازم نیست به ترتیب تعریفشون کنید شما حتا می تونید بعضی از دستور ها رو هم نزارید. برای کار ما همین هم کافیه زیر : Background:url("Vista.png") 0px -158px no-repeat;همون طور که می بینید ما این دستور ها رو به ترتیب درونش به کار بردیم. Background-Image:url("Vista.png"); Background-Position:0px -158px; Background-Repeat: no-Repeat;این کد علاوه بر این که کار مارو سریعتر راه می ندازه بلکه بهینه سازی هم در کدمون انجام می گیره. پس صفحه ی ما به این شکل تغییر می کنه. <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>خوب دیدید که این چقدر بدرد بخور تره. بالاخره آموزشمون به پایان خودش رسید. دوستان هر کس از شما مشکلی داشت این جا مطرح کنید. تا در اصرع وقت جوابتون رو بگیرید. راستی من نمونه ای از این آموزش ها رو واستون توی آدرس زیر گذاشتم می تونید دانلودش کنید. !!!! برای مشاهده محتوا ، لطفا ثبت نام کنید / وارد شوید !!!!امید وارم خوشتون آمده باشه خدا حافظ... lord_ashkan_z10-11-2007, 05:46 PMمن یک کاربر تازه کار در زمینه شبکه ام و هر چی زور می زنم که از یک نفر بپرسم چه چوری یک سایت بسازم که بازدید کنندگان بتوانند مطلبی را نوشته و ارسال کنند که بعد از تایید مدیر نمایش داده شود نمی توانم. در ضمن من می خواهم یک بخش برای عضویت بگذارم که کسانی که عضو نیستند نتواند به این بخش وارد شوند. گفتم شما که خیلی باحالید جواب منو بدید. جهت اطلاعات بیشتر به روزنامه های ... ببخشید به بخش در خواست کد جوا در صفحه قبل (چنذ سطر پایین تر ) مراجعه فرمایید. لطفا. Amin eHelp10-11-2007, 07:06 PMسلام. خواهش می کنم شما هم با حالید برید به تاپیک خودتون جوابتون رو همون جا می دم. سایت ما را در گوگل محبوب کنید با کلیک روی دکمه ای که در سمت چپ این منو با عنوان +1 قرار داده شده شما به این سایت مهر تأیید میزنید و به دوستانتان در صفحه جستجوی گوگل دیدن این سایت را پیشنهاد میکنید که این امر خود باعث افزایش رتبه سایت در گوگل میشود

این صفحه را در گوگل محبوب کنید

[ارسال شده از: سایت ریسک]

[مشاهده در: www.ri3k.eu]

[تعداد بازديد از اين مطلب: 406]