جليس الذكرى
04-28-2010, 09:22 PM
السلام عليكم ورحمة الله وبركاته ..
من المعلوم أن صفحات الويب يتم تصميمها باستخدام لغات خاصة بذلك ..
ومن ذلك لغة HTML أو XHTML ..
والتي تهتم بالشكل والتصميم بالدرجة الأولى
وكذلك لغة CSS
والتي تهتم بالــ formatt
أي ديكور وستايل الصفحات من حيث إعطاء لون موحد للخطوط وللصفحات مثلاً ، وكذلك وحجم ونوع معين للخط والخلفيات والصور..
إلى غير ذلك ..
وكذلك لغة PHP
التي تساعد على إنشاء الصفحات الديناميكية ..
وغير ذلك من لغات برمجة صفحات الويب كـ PERL
و ASP.NET
و PYTHON
والجافا وغيرها ..
هذه اللغات دعمتها أو بعضاً منها برامج تصميم صفحات الويب مثل الفرونت بيج والدريم ويفر ، وهذا يعني أن مصمم صفحة ويب ، لن يحتاج إلى تعلم أي من تلك اللغات _ رغم فائدتها لمتعلمها _ بقدر ماقد يحتاج إلى المراس على برامج التصميم ..
<span style='coloreeppink'>
نتحدث الآن عن إضافة ستايل لصفحاتك باستخدام ستايل شيت مصمم
بلغة CSS
Cascading Styl Sheet
هذه اللغة كما ذكرنا تمكن المصمم من تصميم ستايل خاص بموقعه ( لن أتحدث هنا عن استخدامها في تصميم الصفحات ) ، كما تمكن المتصفح الذي يتمكن منها، من تصميم ستايل خاص به ( نوع الخط ولونه وحجمه وكذلك الصور والخلفيات ... الخ ) ، يتمكن من خلاله من تصفح صفحات الويب جميعها بهذا الستايل ..
ولكن هل سيساعده استخدامه للستايل الذي صممه لنفسه من تصفح صفحات الويب كلها بالشكل الذي يريده ؟؟
يتمكن المتصفح من استخدام الستايل الخاص به بالشكل الذي اختاره لنفسه في حالة كان الموقع مصمماً بقياسات تختلف باختلاف دقة الشاشة للمتصفح ..
تسمى هذه القياسات
Relative-measurement
وهي القياسات التي تختلف في حجمها باختلاف دقة الشاشة screen resolution
ومنها :
em , ex & percentage
هذه القياسات هي التي يفضل استخدامها عند تصميم الموقع..
وبالمقابل توجد قياسات
Absolute-length measurement
وهي القياسات التي لاتختلف باختلاف دقة الشاشة ، وإنما قياساتها ثابتة ، من أمثلتها
Inches, cm(centimeters), mm(millimeters), pt ( points) & pc(picas)
فالمصمم الجيد يحاول استخدام القياسات التي تختلف باختلاف دقة شاشة المستخدم ، وليست القياسات التي تظل ثابتة مهما كبرت أو صغرت أو اختلفت دقة الشاشة..
وبالتالي سيتمكن المستخدم الذي يستخدم ستايل خاص به ، من تصفح الموقع ببساطه لأنه لايتعارض مع الستايل..
---------------------------------------------------------------------------------------------------------------------
مثال على ستايل مكتوب بلغة CSS
افتح المفكرة Note bad
واكتب الكود التالي :
p { color: red;
font-weight: bold;
background-color:pink
}
a { text-decoration: underline;
color:red
}
احفظ الصفحة بأي اسم بحيث يكون الاختصار كما بالاسم
Style.css
الآن عملت لي ستايل خاص بي لأتصفح به صفحات النت ..
نفتح المفكره مرة أخرى ونكتب كود html
لتكوين صفحة ويب بسيطة نجرب عليها الستايل الذي عملناه..
<html>
<head>
<title>
:: Example ::
</title>
</head>
<body>
<p>
I like to visit PCinTV web site :)
</p>
<a href="http://www.pcintv.com">click here to visit my favorite web site..</a>
</body>
ننسخ الكود السابق إلى المفكرة ، ونحفظه باختصار html ..
خلينا نسمي الصفحة مثلاً ..
web.html
كيفية استخدام الستايل لتصفح صفحات الويب ..
اذهب في متصفح انترنت اكسبلورر إلى
Tools => internet options
نأخذ التبويب general
ثم accessibility
نحدد الخيار في
user style sheet
ومن brows
نختار الستايل اللي انشأناه وسميناه style.css
ثم نوافق
ونعود لصفحة الهتمل اللي انشأناها ونحدثها ، فنجد أنها قد اتخذت طابعاً جديداً ، وكذلك كل صفحات النت التي سنتصفحها بعد الآن ستأخذ الستايل الجديد الذي عملته أنا بالكيفية التي أريدها
للإستعادة:
( عشان ماتدعون علي لو شفتم متصفحاتكم صارت تغير أشكال الصفحات ) :P
نعود بنفس الخطوات السابقة ونزيل الخيار من
User style sheet
من المعلوم أن صفحات الويب يتم تصميمها باستخدام لغات خاصة بذلك ..
ومن ذلك لغة HTML أو XHTML ..
والتي تهتم بالشكل والتصميم بالدرجة الأولى
وكذلك لغة CSS
والتي تهتم بالــ formatt
أي ديكور وستايل الصفحات من حيث إعطاء لون موحد للخطوط وللصفحات مثلاً ، وكذلك وحجم ونوع معين للخط والخلفيات والصور..
إلى غير ذلك ..
وكذلك لغة PHP
التي تساعد على إنشاء الصفحات الديناميكية ..
وغير ذلك من لغات برمجة صفحات الويب كـ PERL
و ASP.NET
و PYTHON
والجافا وغيرها ..
هذه اللغات دعمتها أو بعضاً منها برامج تصميم صفحات الويب مثل الفرونت بيج والدريم ويفر ، وهذا يعني أن مصمم صفحة ويب ، لن يحتاج إلى تعلم أي من تلك اللغات _ رغم فائدتها لمتعلمها _ بقدر ماقد يحتاج إلى المراس على برامج التصميم ..
<span style='coloreeppink'>
نتحدث الآن عن إضافة ستايل لصفحاتك باستخدام ستايل شيت مصمم
بلغة CSS
Cascading Styl Sheet
هذه اللغة كما ذكرنا تمكن المصمم من تصميم ستايل خاص بموقعه ( لن أتحدث هنا عن استخدامها في تصميم الصفحات ) ، كما تمكن المتصفح الذي يتمكن منها، من تصميم ستايل خاص به ( نوع الخط ولونه وحجمه وكذلك الصور والخلفيات ... الخ ) ، يتمكن من خلاله من تصفح صفحات الويب جميعها بهذا الستايل ..
ولكن هل سيساعده استخدامه للستايل الذي صممه لنفسه من تصفح صفحات الويب كلها بالشكل الذي يريده ؟؟
يتمكن المتصفح من استخدام الستايل الخاص به بالشكل الذي اختاره لنفسه في حالة كان الموقع مصمماً بقياسات تختلف باختلاف دقة الشاشة للمتصفح ..
تسمى هذه القياسات
Relative-measurement
وهي القياسات التي تختلف في حجمها باختلاف دقة الشاشة screen resolution
ومنها :
em , ex & percentage
هذه القياسات هي التي يفضل استخدامها عند تصميم الموقع..
وبالمقابل توجد قياسات
Absolute-length measurement
وهي القياسات التي لاتختلف باختلاف دقة الشاشة ، وإنما قياساتها ثابتة ، من أمثلتها
Inches, cm(centimeters), mm(millimeters), pt ( points) & pc(picas)
فالمصمم الجيد يحاول استخدام القياسات التي تختلف باختلاف دقة شاشة المستخدم ، وليست القياسات التي تظل ثابتة مهما كبرت أو صغرت أو اختلفت دقة الشاشة..
وبالتالي سيتمكن المستخدم الذي يستخدم ستايل خاص به ، من تصفح الموقع ببساطه لأنه لايتعارض مع الستايل..
---------------------------------------------------------------------------------------------------------------------
مثال على ستايل مكتوب بلغة CSS
افتح المفكرة Note bad
واكتب الكود التالي :
p { color: red;
font-weight: bold;
background-color:pink
}
a { text-decoration: underline;
color:red
}
احفظ الصفحة بأي اسم بحيث يكون الاختصار كما بالاسم
Style.css
الآن عملت لي ستايل خاص بي لأتصفح به صفحات النت ..
نفتح المفكره مرة أخرى ونكتب كود html
لتكوين صفحة ويب بسيطة نجرب عليها الستايل الذي عملناه..
<html>
<head>
<title>
:: Example ::
</title>
</head>
<body>
<p>
I like to visit PCinTV web site :)
</p>
<a href="http://www.pcintv.com">click here to visit my favorite web site..</a>
</body>
ننسخ الكود السابق إلى المفكرة ، ونحفظه باختصار html ..
خلينا نسمي الصفحة مثلاً ..
web.html
كيفية استخدام الستايل لتصفح صفحات الويب ..
اذهب في متصفح انترنت اكسبلورر إلى
Tools => internet options
نأخذ التبويب general
ثم accessibility
نحدد الخيار في
user style sheet
ومن brows
نختار الستايل اللي انشأناه وسميناه style.css
ثم نوافق
ونعود لصفحة الهتمل اللي انشأناها ونحدثها ، فنجد أنها قد اتخذت طابعاً جديداً ، وكذلك كل صفحات النت التي سنتصفحها بعد الآن ستأخذ الستايل الجديد الذي عملته أنا بالكيفية التي أريدها
للإستعادة:
( عشان ماتدعون علي لو شفتم متصفحاتكم صارت تغير أشكال الصفحات ) :P
نعود بنفس الخطوات السابقة ونزيل الخيار من
User style sheet