چه طوری میشه مثل این سایت طراحی کرد؟

[Blue_Cube]

چه طوری میشه مثل این سایت طراحی کرد؟
خانه آبشار

منظورم قرار گرفتن صندلی، مبل و ویترین در صفحه سایت می باشد واقعاً قشنگه.

 

[taft]

خوب تو فتوشاپ طراحی میشه و بعد تبدیل میشه به اچ تی ام ال

 

[webs]

1- ابتدا توسط فتوشاپ طرح رو طراحی می کنند.
2- سپس درصورت نیاز توسط فتوشاپ (بوسیله ابزار اسلایس) اونو به قسمت های مشخصی تقسیم کرده و ذخیره می کنند.
3- توسط CSS تصاویر تیکه شده رو در کنار هم قرار می دهند.
4- بازهم توسط CSS یه باکس ایجاد کرده و متن رو در اون می نویسند.

مثلاً در مورد سایتی که نوشتید:

الف) تصاویر تیکه شده:

http://demo.zabet.ir/portfolio/khaneabshar/index_files/WebPersiaAbshar01.jpg
http://demo.zabet.ir/portfolio/khaneabshar/index_files/WebPersiaAbshar02.jpg
http://demo.zabet.ir/portfolio/khaneabshar/index_files/WebPersiaAbshar03.jpg
http://demo.zabet.ir/portfolio/khaneabshar/index_files/WebPersiaAbshar04.jpg

ب) تعربف تگ div در Html و اختصاص کلاس مربوطه به آنها:

<div class="WebPersiaAbshar01"></div>
<div class="WebPersiaAbshar02"></div>
<div class="WebPersiaAbshar03"></div>
<div class="WebPersiaAbshar04"></div>

پ) تعریف CSS:

.WebPersiaAbshar01, .WebPersiaAbshar02, .WebPersiaAbshar03, .WebPersiaAbshar04
{
	background-color: Transparent;
	width: 200px;
	height: 555px;
	background-repeat: no-repeat;
	float: left;
}
.WebPersiaAbshar01{background-image: url(WebPersiaAbshar01.jpg);}
.WebPersiaAbshar02 {background-image: url(WebPersiaAbshar02.jpg);}
.WebPersiaAbshar03 {background-image: url(WebPersiaAbshar03.jpg);}
.WebPersiaAbshar04 {background-image: url(WebPersiaAbshar04.jpg);}
.Content {overflow: auto;}

 

[Blue_Cube]

1- ابتدا توسط فتوشاپ طرح رو طراحی می کنند.
2- سپس درصورت نیاز توسط فتوشاپ (بوسیله ابزار اسلایس) اونو به قسمت های مشخصی تقسیم کرده و ذخیره می کنند.
3- توسط CSS تصاویر تیکه شده رو در کنار هم قرار می دهند.
4- بازهم توسط CSS یه باکس ایجاد کرده و متن رو در اون می نویسند.

مثلاً در مورد سایتی که نوشتید:

الف) تصاویر تیکه شده:

http://demo.zabet.ir/portfolio/khaneabshar/index_files/WebPersiaAbshar01.jpg
http://demo.zabet.ir/portfolio/khaneabshar/index_files/WebPersiaAbshar02.jpg
http://demo.zabet.ir/portfolio/khaneabshar/index_files/WebPersiaAbshar03.jpg
http://demo.zabet.ir/portfolio/khaneabshar/index_files/WebPersiaAbshar04.jpg

ب) تعربف تگ div در Html و اختصاص کلاس مربوطه به آنها:

<div class="WebPersiaAbshar01"></div>
<div class="WebPersiaAbshar02"></div>
<div class="WebPersiaAbshar03"></div>
<div class="WebPersiaAbshar04"></div>

پ) تعریف CSS:

.WebPersiaAbshar01, .WebPersiaAbshar02, .WebPersiaAbshar03, .WebPersiaAbshar04
{
	background-color: Transparent;
	width: 200px;
	height: 555px;
	background-repeat: no-repeat;
	float: left;
}
.WebPersiaAbshar01{background-image: url(WebPersiaAbshar01.jpg);}
.WebPersiaAbshar02 {background-image: url(WebPersiaAbshar02.jpg);}
.WebPersiaAbshar03 {background-image: url(WebPersiaAbshar03.jpg);}
.WebPersiaAbshar04 {background-image: url(WebPersiaAbshar04.jpg);}
.Content {overflow: auto;}

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

 

[navidweb]

دوست عزيز اگه طرح گرافيكي خوبي داشتي حاضرم برات اچ تي ام الش كنم.. و حتي به جوملا تبديلش كنم...

موفق باشي..