درخواست های ارتباط
جستجو تنظیمات
لیست دوستان من
صندوق پیام
همه را دیدم تنظیمات
  • در حال دریافت لیست پیام ها
صندوق پیام
  • در حال دریافت لیست رویدادها
همه رویدادهای من

طراحی وب سایت با کمک HTML و CSS - بخش هشتم :: لیست ها ، Background ها و عکس ها

0 نظرات
سلام به دوستان ITPRO
در جلسه ی قبل با Position ها کار کردیم که نسبتا مبحث سختی بود. مطالب امروز کمی سبک تر خواهند بود. همانطور که قول داده بودم امروز می خواهیم با هم لیست ها وBackground ها و عکس ها را کار کنیم.

لیست ها


لیست های عددی

ما می توانیم در صفحات وب از لیست های عددی و فهرست وار (bullet list) استفاده کنیم. برای این کار ما باید ابتدا یک تگ لیست ایجاد کنیم و سپس داخل آن تگ های هر یک از موارد را قرار دهیم. من فولدر project8 را که می سازم و درون آن فایل index.html خودم را قرار می دهم. سپس کد های اولیه ی فایل index.html را می نویسم. حالا می خواهم یک لیست عددی ایجاد کنم:
<ol>
		<li>این یک لیست است.</li>
		<li>این یک لیست است.</li>
		<li>این یک لیست است.</li> 
		<li>این یک لیست است.</li>
	</ol>
ما با نوشتن تگ ol یک لیست عددی تعریف می کنیم سپس با نوشتن تگ های li درون آن عوامل آن درون لیست را اضافه می کنیم.
خروجی:
lists

دیدیم که لیست ما ایجاد شد.

لیست های فهرست وار (Bullet Lists)

درست کردن این لیست هیچ فرقی با لیست های عددی ندارد فقط کافی است که به جای تعریف لیست با تگ ol از تگ ul استفاده کنید.
<ul>
		<li>این یک لیست است.</li>
		<li>این یک لیست است.</li>
		<li>این یک لیست است.</li>
		<li>این یک لیست است.</li>
	</ul>
خروجی:
lists

دیدیم که Bullet ها جای اعداد را گرفتند. ما با استفاده از پراپرتی List-style می توانیم تغیراتی در Bollet ایجاد کنیم.
من در li های لیستم این تغیرات را ایجاد می کنم.
ul>li{
			list-style:none;
		}
با دادن این value می توانید bullet و یا number های لیست ها را بردارید.
خروجی:
لیست ها

شما با استفاده از پراپرتی list-style-type شکل bullet یا عدد آن لیست را تغیر دهید.
list-style-type: square;
این مقدار برای پراپرتی list-style-type َشکل آن را مربع می کند.
خروجی:
لیست ها

لیست ها در آینده برای درست کردن نوار های پیمایش (Navigation Pane) استفاده ی زیادی برای شما دارند.

عکس ها


عکس ها در صفحات وب نقشی مهم را ایفا می کنند. البته استفاده ی بیش از اندازه ی آن ها باعث سنگینی صفحه می شود اما به هر حال یک طراح وبسایت باید بتواند به خوبی از آن ها در طراحی صفحات وب استفاده کند. ما با استفاده از تگ img و Attribute مخصوص آدرس دادن یعنی src می توانیم عکس های خودمان را در صفحه قرار دهیم. من ابتدا پروژه ی 9 را ایجاد و در آن فایل index.html خودم را که دارای کد های ابتدایی است در آن قرار می دهم. سپس عکسی را از اینترنت دانلود و در فولدر پروژه ام قرار می دهم.
عکس ها

حالا شروع به نوشتن کد می کنم:
<img src="tehran.jpg"/>
تگ img از تگ های self closingاست و نیازی به باز و بسته کردن آن نیست. من با SRC آدرس عکس را مشخص می کنم.
خروجی:
عکس ها

دیدیم که عکس ما درون صفحه قرار گرفت. ما با استفاده از پراپرتی های CSS می توانیم به آن انواع Style ها را از جمله Width و Height بدهیم.

Alt

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

<img src="tehran.jpg" alt="عکس تهران"/>
همیشه توجه داشته باشید که عرض عکس به اندازه ی جایی که برای آن در نظر گرفته اید باشد.

Background ها


ما استفاده از عکس ها را در صفحات وب یاد گرفتیم اما ما برای قرار دادن Background برای تگی نمی توانیم از عکس ها استفاده کنیم چون به عنوان یک المان در صفحه ظاهر می شوند و فضا می گیرند . برای همین با برای گذاشتن Background برای صفحاتمون باید از پراپرتی Background-image استفاده کنیم:
من پروژه ی 10 را مطابق با پروژه های قبل درست می کنم.سپس فایل index.html یک Div درست می کنم و عرض و طول به آن می دهم:
<!DOCTYPE html>
<html>
<head>
	<title>ITPRO</title>
	<style>
		body{
			direction:rtl;
		}
		body>div{
			width:300px;
			height:500px;
			background-color:gainsboro;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
خروجی:
عکس ها

سپس با استفاده از پراپرتی background-image به آن عکس پس زمینه می دهیم:
عکس ها

دیدیم که Background به صفحه اعمال شد ولی به علت این که ارتفاع عکس از ارتفاع Div کمتر است عکس تکرار می شود. برای جلوگیری از این اتفاق باید از پراپرتی Background-repeat استفاده کنیم. با استفاده از این پراپرتی ما می توانیم مشخص کنیم که Background در عرض تکرار شود ، در طول تکرار شود ، در هر دو تکرار شود (حالت پیشفرض) و یا اصلا تکرار نشود. که ما در اینجا می خواهیم که اصلا تکرار نشود. برای این کار من این پراپرتی را می نویسم:
background-repeat:no-repeat;
اگر مقدار این پراپرتی را برابر با no-repeat قرار دهیم Background تکرار نمی شود و قسمت هایی که Background آن را نمی پوشاند خالی می مانند.(اگر Background-color داشته باشد معلوم می شود.)
اگر می خواهید در طول یا عرض تکرار شود باید مقدار های repeat-x یا repeat-y را به آن بدهید:
خروجی کد بالا:
عکس ها

حالا می بینیم که عکس تکرار نشده.
اما این که قسمتی از آن خالی بماند زیبا نیست. برای زیبایی بیشتر شما می توانید از پراپرتی Background-size استفاده کنید و اندازه ی عکس را به مقدار Div بگذارید و یا در نرم افزار Photoshop در منوی Image و در قسمت Image Size اندازه ی عکس را تغیر دهید.
برای استفاده از background-size به شکل زیر عمل می کنیم:
background-size:100% 100%;
اندازه هایی که ما می دهیم به ترتیب عرض و طول عکس نسبت به طول و عرض Div است یعنی اگر من 200% به آن عرض دهم ، عکس دو برابر عرض Div که 300px است عرض می گیرد یعنی 600px.
خروجی:
عکس ها

دیدیم که عکس ما مقداری کشیده شد . این به دلیل این است که Div ما مستطیل است ولی عکس مربع پس وقتی ما طول و عرض عکسمان را برابر با طول و عرض یک مستطیل قرار می دهیم عکس ما هم مجبور است مستطیل شود و نسبت عرض و طولش به هم می خورد. برای جلو گیری از این اتفاق ما می توانیم عرض عکسمان را برابر با طول Div قرار دهیم تا عکس ما مربع باقی بماند ولی تنها قسمتی مستطیل شکل از آن در Div دیده شود.
background-size:150% 100%;
خروجی:
عکس ها

می بینیم که تنها قسمتی مستطیل شکل از عکس ما در Div دیده می شود و بقیه ی آن فضایی برای دیده شدن ندارد.
با استفاده از Background image ها می شود تکنیک های زیبایی پیاده کرد که می توانید نمونه ای از آن ها را دراین مطلب که در سایت ITPRO قرار دارد را ببینید.

با تشکر از همراهی شما
ITPRO باشید.
محمد پارسا صفوی
انجمن تخصصی فناوری اطلاعات ایران - ITPRO.ir

برچسب ها
ردیف عنوان قیمت
1 طراحی وب سایت با کمک HTML و CSS - بخش اول :: مقدمه رایگان
2 طراحی وب سایت با کمک HTML و CSS - بخش دوم:: Style ها و متن ها رایگان
3 طراحی وب سایت با کمک HTML و CSS - بخش سوم::لینک ها و Css property ها رایگان
4 طراحی وب سایت با کمک HTML و CSS - بخش چهارم :: تگ های ساختاری و CSS Selector های پیشرفته رایگان
5 طراحی وب سایت با کمک HTML و CSS - بخش پنجم :: Box Model رایگان
6 طراحی وب سایت با کمک HTML و CSS - بخش ششم :: Float ها رایگان
7 طراحی وب سایت با کمک HTML و CSS - بخش هفتم :: Position ها رایگان
8 طراحی وب سایت با کمک HTML و CSS - بخش هشتم :: لیست ها ، Background ها و عکس ها رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 طراحی وب سایت با کمک HTML و CSS - بخش دهم :: کد نویسی اصولی و Transition ها رایگان
11 طراحی وب سایت با کمک HTML و CSS - بخش یازدهم :: Animation ها رایگان
12 طراحی وب سایت با کمک HTML و CSS - بخش دوازدهم (پایانی) :: طراحی واکنشگرا و IFrame ها رایگان
مطالب مرتبط
نظرات
هیچ نظری ارسال نشده است

    برای ارسال نظر ابتدا به سایت وارد شوید

    arrow