الموضوع: تطوير التصميم وأسلوب جديد في الكتابة

سلام عليكم

قمت اليوم بتجديد موقعي، من ناحية التصميم فقد طورت التصميم ليكون مرناً من ناحية العرض، وسيظهر الموقع ليغطي كامل نافذة المتصفح، والسلبية الوحيدة لهذا الأسلوب أن الكتابة ستظهر عريضة جداً في الشاشات ذات الدقة العالية أما كيف قمت بذلك فقد تعلمت من موقع Simplebits فكونت مساحتين أو صندوقين (تذكروا دروس CSS ) الصندوق الأول وهو الرئيسي (الأيمن):

كود:

#main {
position: relative;
margin: 40px 40px 0 270px;
font: 11px Tahoma, sans-serif;
}

والصندوق الأيسر:

كود:

#side {
font: 11px Tahoma, sans-serif;
width: 200px;
position: absolute;
right: auto;
left: 15px;
top: 100px;
}

وهناك بعض التغييرات البسيطة هنا وهناك، أما أسلوب الكتابة فقد بدأ من اليوم الكتابة بشكل متكرر في اليوم، ففي السابق كنت أكتب مرة واحدة أو مرتين في اليوم، لكن مع هذا الأسلوب قد أكتب أكثر من مرتين في اليوم.

من الأخطاء التي ارتكبتها في التصميم السابق:
1) اعتماد html لإنشاء مسافات بين الروابط (الروابط الرئيسية في أعلى الصفحة) وهذا ما اضطرني إلى فتح ملفات html كلها وتعديلها، وحذف المسافات، فظهرت الروابط متلاصقة غير مفهومة، فقمت بتعديل ذلك من خلال CSS، والآن أستطيع التحكم بشكل تام بتصميم الروابط ومكانها، لذلك تنجب أن تستخدم html في التصميم في حال كنت تعتمد على CSS فإذا فعلت فستفقد أهم خاصية لتقنية CSS وهي التحكم بالتصميم من خلال ملف واحد.

2) في السابق كنت اعتمد في عناوين المقالات على الأمر span، ومنظمة W3C تنصح بأن يستخدم الأمر h1 وh2 و h3 ... إلخ للعناوين، ومحركات البحث تبحث عن مثل هذه العناوين التي تستخدم الأمر h1، وهذا ما لا يحدث مع span (انظر في ملفات الأرشيف القديمة التي أبقيتها على حالها وقارنها مع الصفحة الرئيسية لتعرف الفرق).

3) استخدام <br> للفصل بين السطور بدلاً من استخدام أمر ul وli، عندما تقوم بإنشاء قوائم، تحوي روابط أو معلومات ما، فلا تستخدم <br> للفصل بين سطور القائمة، هناك أمري ul و li وكذلك هناك أوامر مثل dd وdt وdl لإنشاء القوائم، ومن خلال css تستطيع التحكم بتنسيق القوائم بشكل كامل، وهذا ما قمت بعمله في كل قوائم الموقع (انظر صفحة مواقع وانظر في العمود الأيسر في الصفحة الرئيسية).

أتمنى أن تعطوني رأيكم في التصميم وأنا جاهز لأي استفسار، وأنصح من أراد تعلم CSS أن يقوم بإنزال ملفات css من موقعي ودراستها، ولا بأس في أخذ بعض الأفكار منها، فقد أخذت أنا هذه الأفكار من آخرين

الله يوفقك أخوي سردال .....

حاولت أني أطبق دروس CSS لكن واجهتني بعض الصعوبة ... الذي أريده وأستفيد منك فيه هو :

كيف أنشيء 5 ملفات هتمل يتحكم بها ملف CSS واحد خارجي .. يعني لو عدلت على الـ CSS يتغير شكل هذه الصفحات من روابط وألوان وجداول ..

ارجو أن ترسل لي 5 صفحات هتمل مع ملف CSS جاهز فقط أعدل عليه من حيث اللون والروابط والجداول .

رد مقتبس من aboans20
الله يوفقك أخوي سردال .....

حاولت أني أطبق دروس CSS لكن واجهتني بعض الصعوبة ... الذي أريده وأستفيد منك فيه هو :

كيف أنشيء 5 ملفات هتمل يتحكم بها ملف CSS واحد خارجي .. يعني لو عدلت على الـ CSS يتغير شكل هذه الصفحات من روابط وألوان وجداول ..

ارجو أن ترسل لي 5 صفحات هتمل مع ملف CSS جاهز فقط أعدل عليه من حيث اللون والروابط والجداول .

ولا يهمك، بس عطني وقت وأنا بحط ملف مضغوط في هذا الموضوع

قمت بعمل ملف html وcss فارغين، فقط قمت بربط ملف css بملف index، وإذا أردت إنشاء عدة صفحات فقم بعمل نسخ من ملف index وستكون كلها مرتبطة بملف css، لاحظ أن الملفين فارغين، بمعنى آخر يجب أن تنشأ التصميم في css وتطبقه في html.

إذا لم يكن هذا ما تريده وتريد تصميماً وخمس صفحات فأعطني بعض الوقت أيضاً

ارفقت الملفات التي أريد أن تربطها بملف css خارجي ...

أرجو أن تعدل عليها وترفقها

اتمىن لك التوفيق لك اخوي

وبالنسبه للغه CSS

هذي ما اعرف له خير شر

يعطيك العافيه

دائما مميز بمواضيعك الجميله.

aboans20: الملف جاهز
لاحظ أن بعض ملفات html تحوي:

كود:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

بينما يجب عليك أن تضع:

كود:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">

Dr.Gix: تعلمها صدقني راح تستفيد كثير، وهي سهلة جداً وبسيطة، وهذا قسم CSS في موقعي، أقرأ الدروس وأسأل وراح تتعلم إن شاء الله، إذا كنت تعرف PHP فراح تتعلم CSS بسرعة .


all-the-vb: بارك الله فيك