در این جلسه از دانلود فیلم CSS نحوه استفاده از Image Sprites را آموزش داده ایم . Sprites یعنی تعدادی از تصاویر را در یک تصویر قرار دهیم و از آن در طراحی سایت استاده کنیم .
Image Sprites چیست ؟
همان طور که در پاراگراف اول توضیح دادم یعنی به جای این که برای هر قسمت از قالب سایت ، از یک تصویر استفاده کنیم میایم آن تصاویر را با استفاده از فتوشاپ در یک تصویر قرار می دهیم و از آن استفاده می کنیم .
حالا شاید براتون سوال باشه مگه مریضیم که تصاویر را در کنار هم قرار بدیم ؟؟؟
در جوابتون باید بگم برای این که حجم تصاویر را پایین بیاریم و همین طور سرعت لود صفحه را بالا ببریم از این روش استفاده می کنیم و در سئو سایت هم خیلی تاثیر داره.
حالا به تصویر زیر توجه کنید :
دانلود فیلم CSS – اسپرایت تصویر
می خوایم اون دایره آبی رنگی که توی عکس هستش رو توی صفحه وب نمایش بدیم برای این کار از کد های زیر استفاده می کنیم :
کد HTML :
<!doctype html> <html> <head> <title>Web30ty</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="sprite"> </div> </body> </html>
کد CSS :
#sprite{
width: 130px;
height: 123px;
background: url(sprites.png) -67px -126px no-repeat;
}
اول با استفاده از HTML یک تگ Div تعریف می کنیم و به آن یک آی دی با مقدار Sprite می دهیم و در CSS از این آی دی استفاده می کنیم و برای آن با استفاده ویژگی Background یک تصویر در نظر می گیریم .
مهم ترین نکته در این جا استفاده از background-position است همان اعداد 67px- و 126px- هستند که اولین مقدار عرض تصویر را مشخص می کند یعنی تصویر رو از کدوم عرض نمایش بدیم و مقدار اولیش صفر هست و هرچه به سمت راست میریم عدد رو باید به صورت منفی بنویسیم و دومین مقدار هم ارتفاع عکس را نمایش می دهد ، یعنی ار کدام ارتفاع عکس را نمایش بدیم و هر چقدر به سمت پایین میریم باید بهش یه عدد منفی بدیم .
در فیلم آموزشی همه این هارو به طور کامل آموزش دادم . اگر سوالی داشتین میتونین در قسمت نظرات بنویسید .
ممنون از سایت خوبتون . بسیار مفید و کاربردی بود.
سلام این لینک زیر کار نمیکنه :
https://dl.web30ty.com/Films/Reza/web_design/design_menu_top_2.mp4
من میزنم مشکلی نداره این لینک فیلم هستش
میخواهیم تمام موارد در یک خط افقی قرار گیرد کدی که شما گفتید رو گذاشتم در یک خط عمودی قرار میگیره
لطفا نحوه نوشتن کد html اش رو هم بگید
ممنون
با سلام
این قسمت از اموزش طراحی سایت رو مشاهده کنید کامل اون چیزی که شما میخواید توضیح داده شده ، اگر بازم نتونستید بگید تا کدش رو براتون بفرستم :
https://dl.web30ty.com/Films/Reza/web_design/design_menu_top_2.mp4
سلام مجدد
مهندس جان دوباره میگم درخواستم رو ترتیب قرار گیری در یک خط به شکل زیر باشه ؟
تصویر (یک عدد فاصله) تیتر h1 دوباره (یک عدد فاصله) تصویر بعدی
کد html رو چطوری بنویسیم که تمامش در یک خط قرار بگیره ؟ بدون اینکه روی هم بیافته ؟
هوالرزاق
سلام و احترام
فرض کنید بخواهیم چیدمان در یک خط قرار بگیره که موارد روی هم نیافتند بصورت زیر بخواهیم چطوری باید html و css رو بنویسیم ؟ (بترتیب میگم)
عکس خونه فاصله که داخلش یه تیتره بعد فاصله بعد عکس فلش
چطوری بنوسیم ؟ مشکل اون h1
سلام
برای اینکه عناصر رو توی یک خط نمایش بدید راه های زیادی دارید : 1- می تونید از مقدار float:right برای همه عناصر استفاده بکنید تا در کنار هم قرار بگیرن .
2- میتونید از display: inline-block هم برای عناصر استفاده بکنید .
سلام
آموزش هاتون بسیار خوب و کاربردیه . خیلی ممنون از لطفتون