إرشيف التصنيف: ‘تصميم’

كيف أصنع ملف css للطباعة؟

July 20, 2008 - الأحد 18 رجب 1429

السلام عليكم،

مازال هناك أناس يحبذون طباعة المستندات الطويلة لقراءتها أو لاصطحباها معهم. قبل ثورة ال css :D كان على مطور الموقع أن يصنع مقابل كل صفحة، صفحة آخرى للطباعة. بحيث تكون خالية من الألوان والتنسيقات الزائدة.

أما الأن فبكل بساطة يمكنك كتابة ملف css صغير يقوم بالمهمة كلها ولكل صفحاتك.

إذاً ماهي الخطوات اللازمة لعمله؟

1- ربط الملف الخاص بالطباعة مع الصفحة:

لاحظ استخدام media وتحديدها ب print حيث يقوم المتصفح تلقائياً عند طباعة الصفحة بأخذ التنسيقات من هذا الملف.

2- تحديد مجال ملف css الرئيسي:
بفرض أن ملف ال css الرئيسي لدينا اسمه style.css يجب أن نحدد مجاله بالشاشة حتى لايتعارض مع ملف الطباعة السابق

لاحظ أننا حددنا مجالها بإعطاء ال media قيمة screen أي الشاشة المرئية فقط.

3- إخفاء بعض العناصر:
بعض العناصر الموجودة في الصفحة لايجب أن تظهر وقت الطباعة مثل منطقة الهيدر (الموجود به شعار مدونتي) والروابط الجانبية … أي عند طباعة الملف نريد فقط المحتوى الرئيسي الموجود في الصفحة لبطاعته ولانريد طباعة روابط وتصنيفات !


#navigation, #blogroll {
display: none;
}

4- تكبير الخط:
يجب أن تكبر الخط قليلاً ليظهر واضحاً عند الطباعة فالحجم عند قراءته على الشاشة مناسب ولكن عند طباعته يظهر صغيراً للقارىء


body {
font-size: 120%;
line-height: 130%;
}

5- استخدم الإنش والنقاط كوحدات للقياس:
في ملف الطباعة اتخدم الإنش والنقاط بدل البكسل كوحدة للقياس لأنهم أكثر قابلية للتحكم بأحجام الخطوط.


body {
font-size: 12pt;
line-height: 18pt;
}
body #container {
margin: 1in 1.2in .5in 1.2in;
}

ملاحظة: لن أكتب ملف طباعة خاص بالمدونة وسأخبركم عن السبب في وقت لاحق ;-)

تشكيلة مواقع للقوالب المجانية

July 15, 2008 - الثلاثاء 13 رجب 1429

تشكيلة كبيرة من المواقع التي تقدم قوالب مجانية وأغلبها متوافق مع الويب 2.0

1- StyleHoust

StyleHoust

2- CssTemps

CssTemps

3- Open Source Templates

Open Source Templates

4- Free CSS Templates

Free CSS Templates

5- Open Designs

Open Designs

6- OSWD

OSWD

7- Open Web Design

Open Web Design

8- Studio 7 Designs

Studio 7 Designs

9- Template Yes

Template Yes

10- TriStar Webdesign

TriStar Webdesign

11- Free Layouts

Free Layouts

12- Free Css Templates

Free CSS Templates

13- Free Templates Online

Free Templates Online

14- Theme Base

Theme Base

مقدمة في CSS

July 11, 2008 - الجمعة 09 رجب 1429

ملاحظة: يجب أن يكون مستواك بالـ HTML جيداً قبل البدء.
1- ما هي الـ CSS؟
هي اختصار لـ Cascading Style Sheets وليس لها تعريب على حد علمي :D

2- ما هي وظيفتها؟
مسؤولة عن شكل صفحات الويب أي الإظهار فكل ما تراه في هذه المدونة من ألوان وأحجام خطوط هي من أفعال الـ CSS.

3- ما هي مكوناته؟
لقاعدة الـ CSS ثلاثة مكونات وهي على الشكل:

selector {property: value}

حيث:
selector هو العنصر الذي ستطبق عليه التأثيرات.
property هي خاصية من خواص هذا العنصر سنعطيها قيمة ما.
value القيمة الجديدة لهذا العنصر.

وبالمثال يتوضح الأمر:

div {color: blue;}

في البداية اخترنا العنصر الذي ستطبق علي خصائصه القيم الجديدة وهو حاوية الـ div، ثم اخترنا خاصية color لهذا العنصر أي لون النص داخله وأعطيناها لون ازرق.

4- كيف نربط ملف css مع الصفحة؟

نضعه في وسم head وتأكد من مسار href أنه صحيح، هنا وضعته داخل مجلد اسمه css واسم الملف هو style.css

5- ما أنواع الـ selector؟
له ثلاثة أنواع:
- وسم HTML: أي نضع وسماً من وسوم الـ HTML المعروفة (مثلاً div, p, span, a).
مثال:

div {color: blue;}

هنا سيطبق هذا التأثير (لون الخط الأزرق) على كل div اكتبها في صفحة HTML بعد ربطه بالتأكيد كما في الخطوة 4.

- المعرف (id): هنا نضع selector ليس من وسوم الـ HTML نعطيه اسماً من عندنا ونضع قبله # بحيث يصبح:
مثال:

#id-selector {color: red;}

هنا سيطبق على كل وسم له معرف id-selector مثال:

سيظهر النص هنا باللون الأحمر

- الصنف (class): أيضاً نضع selector اسمه من اختيارنا ولكن نضع قبله نقطة . أي:

.class-selector {color: black;}

كيف نحصل على تأثيره داخل صفحة الـ HTML … نقوم بإعطاء وسم الـ HTML قيمة لصنفه:

سيظهر هذا النص باللون الأسود

6- ما الفرق بين “المعرف” و “الصنف” أي متى استخدم هذا ومتى استخدم ذاك؟
استخدم المعرف عندما تريد تأثيراً لعنصر واحد … أي المعرف لا يجب أن يوضع لأكثر من وسم، لماذا؟ لأنه من خصائص وسوم HTML أن كل واحداً منها له معرفه الخاص لذلك لايجب تكرير المعرف لوسمين أو أكثر.
أما الصنف فاستخدمه لعدة وسوم أياً كان عددهم وهذا هو الفرق بينهم بكل اختصار وبدون تعقيدات.

7- إذا هل لك أن تشرح باختصار كل ماذكرت؟
طبعاً، الـ CSS تستخدم لإعطاء صفحة HTML التأثيرات المرئية أي الإظهارات، يتم ربط الملف كما في الخطوة 4 بالمناسبة ملف الـ CSS هو ملف عادي ولكن حولت لاحقته لـ css بدلاً من txt. ولدينا ثلاثة أنواع من selector (راجع الخطوة 5) واحد لوسم HTML موجود والأخر هو المعرف لإعطائه لوسم HTML واحد والأخير هو الصنف حيث يعطى لأكثر من وسم.

أسئلة للمستوى المتقدم:

8- كيف أعطي وسم يحتوي على خاصية محددة تأثيراً ما، مثلاً لدي الوسمان:


نص


نص آخر

أريد أن أعطي الوسم الذي يحتوي على خاصية الـ title تأثيراً أي الوسم الأول فكيف أحصل على ذلك؟

لا مشكلة، تستطيع ذلك بكتابة التالي في ملف css:

h1[title] {color: blue;}

هكذا سيحصل وسم h1 الذي يحتوي على خاصية title تأثيراً خاصاً به.

9- شيء جميل لكن هل يوجد تطبيق آخر له؟
نعم، أستطيع إعطاء وسم a الخاص بالإيميل تأثيراً معيناً، لاحظ معي:

a[href^="mailto"] { color: blue; }

هنا أخبرته أنه سيجد في بداية خاصية href كلمة mailto الخاصة بالبريد والـ (^) تعني بالبداية.

والسلام عليكم.