[درس] تحويل ملف فوتوشوب الى CSS في اقل من 30 ثانية

**سالم العليلي** · 20-09-2007

جزاكم الله الف خير .. على هذه الردود ..
كان من المفترض من ادوبي اتضيف الخاصية في اصداراها 10 بدل قتل الايميج ريدي ...
بالنسبة للفاير فوكس .. ليس لدي علم عنه لكن اعتقد لا توجد به هذه الخاصية ... بالرغم انه يمكنك ان تصدر العمل الى اكثر من صيغة مثل اتش تي ام ال او بي اتش بي ....

**ليث الشرس** · 01-10-2007

مشكور استاذنا ..

**مهندس مصرى** · 02-10-2007

راااائع جدا
جزاك الله خيرا

**arbpsd** · 06-10-2007

مشكور علي الدرس الرائع وأظن انة سوف يفيد جدا في عمل استايلات المواقع القياسية حتي تتلائم مع جميع المتصفحات

**x_yousef_x** · 11-10-2007

المشاركة الأصلية كتبت بواسطة Zizwar مشاهدة المشاركة

ريحت الكثير بدرسك هذا، وان شاء يعتمدوه المصممين الذين يقسمون القالب بالايميج ريدي، لست أدري هل توجد هذه الخاصية في الفايرووركس؟

هلا بالغالي

معذرة للاخ ملك فوتوشب

انا حولت ملف فايروركس الى CSS في ثواني يالغالي

وهذا الكود ناتج من ملف

كود:

<!-- saved from url=(0014)about:internet -->
<html>

<head>

<title>3ata12.jpg</title>

<meta http-equiv="Content-Type" content="text/html;iso-8859-1">
<meta name="description" content="FW MX CSS Layer">

<style type="text/css">
#L3ata12r1c1 {
	position:absolute;
	left:0px;
	top:0px;
	width:68px;
	height:166px;
	z-index:1;
	visibility:visible;
}
#L3ata12r1c3 {
	position:absolute;
	left:68px;
	top:0px;
	width:131px;
	height:166px;
	z-index:2;
	visibility:visible;
}
#L3ata12r1c4 {
	position:absolute;
	left:199px;
	top:0px;
	width:386px;
	height:166px;
	z-index:3;
	visibility:visible;
}
#L3ata12r1c7 {
	position:absolute;
	left:585px;
	top:0px;
	width:94px;
	height:166px;
	z-index:4;
	visibility:visible;
}
#L3ata12r1c8 {
	position:absolute;
	left:679px;
	top:0px;
	width:74px;
	height:166px;
	z-index:5;
	visibility:visible;
}
#L3ata12r1c9 {
	position:absolute;
	left:753px;
	top:0px;
	width:24px;
	height:156px;
	z-index:6;
	visibility:visible;
}
#L3ata12r2c9 {
	position:absolute;
	left:753px;
	top:156px;
	width:24px;
	height:482px;
	z-index:7;
	visibility:visible;
}
#L3ata12r3c1 {
	position:absolute;
	left:0px;
	top:166px;
	width:67px;
	height:472px;
	z-index:8;
	visibility:visible;
}
#L3ata12r3c2 {
	position:absolute;
	left:67px;
	top:166px;
	width:1px;
	height:1px;
	z-index:9;
	visibility:visible;
}
#L3ata12r5c1 {
	position:absolute;
	left:0px;
	top:638px;
	width:67px;
	height:62px;
	z-index:10;
	visibility:visible;
}
#L3ata12r5c3 {
	position:absolute;
	left:68px;
	top:638px;
	width:169px;
	height:62px;
	z-index:11;
	visibility:visible;
}
#L3ata12r5c5 {
	position:absolute;
	left:237px;
	top:638px;
	width:303px;
	height:62px;
	z-index:12;
	visibility:visible;
}
#L3ata12r5c6 {
	position:absolute;
	left:540px;
	top:638px;
	width:213px;
	height:62px;
	z-index:13;
	visibility:visible;
}
#L3ata12r5c9 {
	position:absolute;
	left:753px;
	top:638px;
	width:24px;
	height:62px;
	z-index:14;
	visibility:visible;
}
</style>
</head>

<body bgcolor="#ffffff">

<div id="L3ata12r1c1"><img name="N3ata12_r1_c1" src="images/3ata12_r1_c1.jpg" width="68" height="166" border="0"></div>
<div id="L3ata12r1c3"><img name="N3ata12_r1_c3" src="images/3ata12_r1_c3.jpg" width="131" height="166" border="0"></div>
<div id="L3ata12r1c4"><img name="N3ata12_r1_c4" src="images/3ata12_r1_c4.jpg" width="386" height="166" border="0"></div>
<div id="L3ata12r1c7"><img name="N3ata12_r1_c7" src="images/3ata12_r1_c7.jpg" width="94" height="166" border="0"></div>
<div id="L3ata12r1c8"><img name="N3ata12_r1_c8" src="images/3ata12_r1_c8.jpg" width="74" height="166" border="0"></div>
<div id="L3ata12r1c9"><img name="N3ata12_r1_c9" src="images/3ata12_r1_c9.jpg" width="24" height="156" border="0"></div>
<div id="L3ata12r2c9"><img name="N3ata12_r2_c9" src="images/3ata12_r2_c9.jpg" width="24" height="482" border="0"></div>
<div id="L3ata12r3c1"><img name="N3ata12_r3_c1" src="images/3ata12_r3_c1.jpg" width="67" height="472" border="0"></div>
<div id="L3ata12r3c2"><img name="N3ata12_r3_c2" src="images/3ata12_r3_c2.jpg" width="1" height="1" border="0"></div>
<div id="L3ata12r5c1"><img name="N3ata12_r5_c1" src="images/3ata12_r5_c1.jpg" width="67" height="62" border="0"></div>
<div id="L3ata12r5c3"><img name="N3ata12_r5_c3" src="images/3ata12_r5_c3.jpg" width="169" height="62" border="0"></div>
<div id="L3ata12r5c5"><img name="N3ata12_r5_c5" src="images/3ata12_r5_c5.jpg" width="303" height="62" border="0"></div>
<div id="L3ata12r5c6"><img name="N3ata12_r5_c6" src="images/3ata12_r5_c6.jpg" width="213" height="62" border="0"></div>
<div id="L3ata12r5c9"><img name="N3ata12_r5_c9" src="images/3ata12_r5_c9.jpg" width="24" height="62" border="0"></div>

</body>
</html>

**Zizwar** · 11-10-2007

المشاركة الأصلية كتبت بواسطة x_yousef_x مشاهدة المشاركة

هلا بالغالي

معذرة للاخ ملك فوتوشب

انا حولت ملف فايروركس الى CSS في ثواني يالغالي

وهذا الكود ناتج من ملف

كود:

<!-- saved from url=(0014)about:internet -->
<html>

<head>

<title>3ata12.jpg</title>

<meta http-equiv="Content-Type" content="text/html;iso-8859-1">
<meta name="description" content="FW MX CSS Layer">

<style type="text/css">
#L3ata12r1c1 {
    position:absolute;
    left:0px;
    top:0px;
    width:68px;
    height:166px;
    z-index:1;
    visibility:visible;
}
#L3ata12r1c3 {
    position:absolute;
    left:68px;
    top:0px;
    width:131px;
    height:166px;
    z-index:2;
    visibility:visible;
}
#L3ata12r1c4 {
    position:absolute;
    left:199px;
    top:0px;
    width:386px;
    height:166px;
    z-index:3;
    visibility:visible;
}
#L3ata12r1c7 {
    position:absolute;
    left:585px;
    top:0px;
    width:94px;
    height:166px;
    z-index:4;
    visibility:visible;
}
#L3ata12r1c8 {
    position:absolute;
    left:679px;
    top:0px;
    width:74px;
    height:166px;
    z-index:5;
    visibility:visible;
}
#L3ata12r1c9 {
    position:absolute;
    left:753px;
    top:0px;
    width:24px;
    height:156px;
    z-index:6;
    visibility:visible;
}
#L3ata12r2c9 {
    position:absolute;
    left:753px;
    top:156px;
    width:24px;
    height:482px;
    z-index:7;
    visibility:visible;
}
#L3ata12r3c1 {
    position:absolute;
    left:0px;
    top:166px;
    width:67px;
    height:472px;
    z-index:8;
    visibility:visible;
}
#L3ata12r3c2 {
    position:absolute;
    left:67px;
    top:166px;
    width:1px;
    height:1px;
    z-index:9;
    visibility:visible;
}
#L3ata12r5c1 {
    position:absolute;
    left:0px;
    top:638px;
    width:67px;
    height:62px;
    z-index:10;
    visibility:visible;
}
#L3ata12r5c3 {
    position:absolute;
    left:68px;
    top:638px;
    width:169px;
    height:62px;
    z-index:11;
    visibility:visible;
}
#L3ata12r5c5 {
    position:absolute;
    left:237px;
    top:638px;
    width:303px;
    height:62px;
    z-index:12;
    visibility:visible;
}
#L3ata12r5c6 {
    position:absolute;
    left:540px;
    top:638px;
    width:213px;
    height:62px;
    z-index:13;
    visibility:visible;
}
#L3ata12r5c9 {
    position:absolute;
    left:753px;
    top:638px;
    width:24px;
    height:62px;
    z-index:14;
    visibility:visible;
}
</style>
</head>

<body bgcolor="#ffffff">

<div id="L3ata12r1c1"><img name="N3ata12_r1_c1" src="images/3ata12_r1_c1.jpg" width="68" height="166" border="0"></div>
<div id="L3ata12r1c3"><img name="N3ata12_r1_c3" src="images/3ata12_r1_c3.jpg" width="131" height="166" border="0"></div>
<div id="L3ata12r1c4"><img name="N3ata12_r1_c4" src="images/3ata12_r1_c4.jpg" width="386" height="166" border="0"></div>
<div id="L3ata12r1c7"><img name="N3ata12_r1_c7" src="images/3ata12_r1_c7.jpg" width="94" height="166" border="0"></div>
<div id="L3ata12r1c8"><img name="N3ata12_r1_c8" src="images/3ata12_r1_c8.jpg" width="74" height="166" border="0"></div>
<div id="L3ata12r1c9"><img name="N3ata12_r1_c9" src="images/3ata12_r1_c9.jpg" width="24" height="156" border="0"></div>
<div id="L3ata12r2c9"><img name="N3ata12_r2_c9" src="images/3ata12_r2_c9.jpg" width="24" height="482" border="0"></div>
<div id="L3ata12r3c1"><img name="N3ata12_r3_c1" src="images/3ata12_r3_c1.jpg" width="67" height="472" border="0"></div>
<div id="L3ata12r3c2"><img name="N3ata12_r3_c2" src="images/3ata12_r3_c2.jpg" width="1" height="1" border="0"></div>
<div id="L3ata12r5c1"><img name="N3ata12_r5_c1" src="images/3ata12_r5_c1.jpg" width="67" height="62" border="0"></div>
<div id="L3ata12r5c3"><img name="N3ata12_r5_c3" src="images/3ata12_r5_c3.jpg" width="169" height="62" border="0"></div>
<div id="L3ata12r5c5"><img name="N3ata12_r5_c5" src="images/3ata12_r5_c5.jpg" width="303" height="62" border="0"></div>
<div id="L3ata12r5c6"><img name="N3ata12_r5_c6" src="images/3ata12_r5_c6.jpg" width="213" height="62" border="0"></div>
<div id="L3ata12r5c9"><img name="N3ata12_r5_c9" src="images/3ata12_r5_c9.jpg" width="24" height="62" border="0"></div>

</body>
</html>

هل بالتقسيم العادي، ام هناك خصائص معينة لإستخراج صفحة نمطية؟
بارك الله فيك

**x_yousef_x** · 11-10-2007

انا سويتها بالتقسيم العادي واستخراجها بشكل الي شوفته

تحياتي

**أوراق منثورة** · 12-10-2007

السلامـ عليكمـ

يعطيك العافية يا ملك الفوتشوب .. موضوع جداً رائع ويستحق كل الثناء

اسمح لي بنشر هذا الموضوع للإستفادة ،، تحياتي لك وشكراً لأناملك

**Abderisaq** · 27-10-2007

جزاك الله خير أخوي

**خالد الحربي** · 27-10-2007

درس ابداع والفوتوشوب بحر كل يوم نكتشف شي جديد

**MGraph** · 05-11-2007

الله يعطيك ألف ألف عافية أخوي ..

فعلاً شرح أكثر من راائع ويوفر وقت كثير ..

وتم التطبيق الحمدلله بنجاح في CS3 بسهولة..

**Obai** · 12-11-2007

برنامج رائع

لكن لاحظ أنه يعتمد بشكل هائل على position:absolute; وهذه الخاصية أنا لا أحبها ولا أنصح بها لأنها تختلف من شاشة لشاشة وكذلك تختلف من browser لـ browser وتتضارب مع كثير من الكود.. انا أستخدمها في حالات نادرة لأمان اكثر.

سلامي

**qmmary** · 16-11-2007

مشكوووووووووووووووووور انا كنت شايل هم تسمية الصور والاقسام بس ريحتنا الله يجزاك خير

تحياتي ،، ألف تحية من تحياتي لك ،،،

**alaudi** · 01-05-2008

يعطيك ألف عافية وجزاك الله الجنة

**alaudi** · 01-05-2008

MGraph لو سمحت ممكن تشرح كيف تم التطبيق على CS3 لأني ما عرفت أتابع مع عدك تطابق القوائم فيه عن قوائم الإيميج ريدي

الموضوع: [درس] تحويل ملف فوتوشوب الى CSS في اقل من 30 ثانية

أدوات الموضوع

بحث في الموضوع

المواضيع المتشابهه

للخبراء ثانية

ضوابط المشاركة