Need help? Chat now!

Hostwinds مدونة

نتائج البحث عن:


دروس Hostwinds: كيفية بناء موقع تدوين أساسي بدون تطبيق بناء موقع Pt. 3 صورة مميزة

دروس Hostwinds: كيفية بناء موقع تدوين أساسي بدون تطبيق بناء موقع Pt. 3

بواسطة: Hostwinds Team  /  ديسمبر 28, 2018


الجزء 3 من سلسلة بلوق الترميز HostWinds هنا، الناس!في الأجزاء 1 و 2، بنينا صفحة رئيسية لموقع التدوين الخاص بنا مع HTML وثلاث صفحات ويب لثلاث منشورات بلوق افتراضية باستخدام HTML.على CSS!CSS هي لغة برمجة تعمل جنبا إلى جنب مع رمز HTML الخاص بك لجعل موقع الويب الخاص بك تبدو أجمل وأكثر تخصيصا.لدينا الكثير لتغطية هنا، لذلك شنق ضيق!قبل أن نبدأ إنشاء أول مستند CSS لدينا، سنذهب إلى كيفية ربط وثيقة CSS الخاصة بنا إلى مستندات HTML الخاصة بنا.إنها سهلة!

أوه ، و قبل أن نبدأ ربط وثيقة CSS الخاصة بنا إلى مستندات HTML الخاصة بنا، تحقق من هذه الروابط أدناه إلى الجزء 1 من سلسلة المدونة هذه، الجزء 2 من سلسلة المدونة هذه، وأوراق الغش لدينا في شكل منشورات المدونة السابقة بعنوان "HostWinds HTML Hype الجزء 2: Tagتحدث "و" HostWinds CSS Chat. "

دروس Hostwinds: كيفية إنشاء موقع تدوين أساسي بدون تطبيق بناء موقع Pt.1

دروس Hostwinds: كيفية بناء موقع تدوين أساسي بدون تطبيق بناء موقع Pt. 2

Hostwinds HTML Hype الجزء 2: Tag Talk

Hostwinds CSS دردشة

ملاحظة.لتكرار هذا، موقع التدوين الذي نقوم بإنشاءه أساسي.الأمل هو أننا سنكون قادرين على التوسع باستمرار على موقعنا على شبكة الإنترنت وببطء جعلها أكثر جمالا / ديناميكية مدونة مدونة / المدونة السحرية من قبل بلوق وظيفة.لجميع النوايا والأغراض، تم تصميم هذه السلسلة المدونة هذه لتزويدك بأساسيات بناء موقع الويب.حسنا، الآن دعونا الغوص في!

أول شيء أولا: ربط مستند CSS الخاص بك إلى مستند HTML

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

تذكر أن تدفع حفظ!لمراجعة، تبدو وثائق HTML الأربع لدينا في هذه اللحظة:

1. الصفحة الرئيسية لموقع الويب:

موقع التدوين الخاص بي

موقع التدوين الخاص بي

عنوان منشور المدونة 1

هنا يمكنك وضع ملخص قصير لمنشور مدونتك إذا أردت

عنوان منشور المدونة 2

هنا يمكنك وضع ملخص قصير لمنشور مدونتك إذا أردت

عنوان منشور المدونة 3

هنا يمكنك وضع ملخص قصير لمنشور مدونتك إذا أردت

شكرا لكم لزيارة موقع التدوين هذا!

2. صفحة ويب المنشور الأول للمدونة:

موقع التدوين الخاص بي | المدونة 1

موقع التدوين الخاص بي

عنوان منشور المدونة 1

هنا هو المكان الذي يمكنك فيه وضع كل النص الذي تريد إضافته إلى منشور مدونتك لهذا اليوم.

شكرا لكم لزيارة موقع التدوين هذا!

3. صفحة ويب المنشور الثاني للمدونة:

موقع التدوين الخاص بي | المدونة 2

عنوان منشور المدونة 2

هنا هو المكان الذي يمكنك فيه وضع كل النص الذي تريد إضافته إلى منشور مدونتك لهذا اليوم.

شكرا لكم لزيارة موقع التدوين هذا!

4. صفحة ويب المنشور الثالث للمدونة:

موقع التدوين الخاص بي | مدونة 3

عنوان منشور المدونة 3

هنا هو المكان الذي يمكنك فيه وضع كل النص الذي تريد إضافته إلى منشور مدونتك لهذا اليوم.

شكرا لكم لزيارة موقع التدوين هذا!

إشعار هام: عندما تكون مجموعة الكود التي أدرجها في منشورات المدونة هذه طويلة جدًا بحيث لا تتناسب مع النافذة ، سيظهر شريط تمرير صغير في الجزء السفلي من هذا الرمز عند تحريك الماوس فوق تلك المنطقة. يمكنك تحريك شريط التمرير إلى اليمين لعرض الجزء الكامل من التعليمات البرمجية.

الآن، سوف نأخذ موقف CSS بأكمله خطوة بخطوة.

كيفية إعداد مستند CSS مبدئيًا

الخطوة 1: قم بإنشاء مجلد جديد في نفس المجلد ومحرر النصوص، فأنت في الوقت الحالي (نفس المجلد ومحرر النص الذي تضع فيه Index.html في الجزء 1).اسم المجلد "CSS".بعد ذلك، قم بإنشاء ملف جديد داخل هذا المجلد واسم الملف "Style.css" Style.css الخاص بك سيتم تعديل جميع مستندات HTML الخاصة بك.

الخطوة 2: الآن يمكننا الرجوع (أو "الهدف") جميع العلامات التي نود تعديلها مثل ذلك:

Body {} NAV {} n4 {}} {}} {} p {} button {} button

مجرد تذكير: قبل الانتقال إلى الخطوة 3، يرجى مراجعة منشور المدونة فيما يتعلق بمعدل CSS، الخصائص، قيم الخاصية، وبناء جملة عام إذا لم تكن ضمنا بعد في هذه الساحة.

الخطوه 3: نريد أن تكون خلفية صفحاتنا الرئيسية وصفحات الويب هي صورة تأخذ الصفحة بأكملها.يمكنك اختيار أي صورة لترضيك لتكون الخلفية الخاصة بك، لكننا سنسمم صورة الخلفية الخاصة بنا "your_background_image.png" لهذا البرنامج التعليمي.علاوة على ذلك، سنقوم بإجراء صورة جميلة من السحب في خلفيتنا.لجعل هذه الصورة خلفيات صفحات الويب الخاصة بنا وجعلها تضطلع بالصفحة بأكملها في كل صفحات الويب الخاصة بنا، سنقوم بإدخال خصائص "صورة الخلفية" و "حجم الخلفية" داخل محدد "الجسم" فيأعلى المستند.

ملاحظة: يجب أن يكون CSS (و HTML ، لهذه المسألة) بالترتيب من أي عنصر يظهر في الصفحة أولاً ، ثم ثانيًا ، وهكذا.

ملاحظة أخرى: قد تسأل نفسك، "لماذا هناك فترتين أمام" /images/your_background_image.jpg؟ "الصيد الجيد! قد تتذكر النقاش الذي كان لدينا بخصوص مسارات الملفات النسبية في الجزء 1 من سلسلة التدوين هذه.استخدمنا فترة واحدة فقط أمام مرجعنا "/css/style.css" فقط عندما استخدمنا مسار الملفات النسبي للاتصال ب CSS لدينا في بداية منشور المدونة هذه. هذا لأن مجلد "CSS" هو في نفس الشيءالمجلد الذي ملف index.html لدينا. هناك فترتان أمام "/Images/your_background_image.jpg" لأننا نقول المتصفح أن يبدأ في مجلد "CSS" الخاص بنا حيث وثيقة النمط .css، ثم الخروج من ذلكمجلد "CSS"، ثم انتقل إلى مجلد مختلف باسم "الصور"، ثم الاستيلاء على ملف الصورة باسم "your_background_image.jpg."

بعد ذلك، نريد تغيير خط نص الارتباط ("BLOG HOME") في شريط التنقل لدينا وجعل النص الرابط الأحرف الكبيرة.لذلك، يجب أن تظهر الوثيقة حتى الآن مثل ذلك:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;}

الخطوة الرابعة: نريد تغيير خطوط جميع عناويننا ، وجعل نصوصها كلها كبيرة ، وتوسيط نص العنوان ، وتغيير لون النص إلى اللون الأزرق الداكن.

بعد ذلك، سنضمن تصور الصور جميعها، وتغيير عرضها، ووضع حدود من حولها، وجعل حدودها مدورة على الجانبين.مع وجود هذه الإضافات، يبدو الوثيقة مثل هذا:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;}

الخطوة الخامسة: تتحرك الحق على طول!دعنا نغير الخط ولون فقراتنا مع مركز فقرات النص أيضا.

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

display: block;margin-left: auto;margin-right: auto;

لتغيير لون الخلفية، لجعل النص الأحرف الكبيرة، لتغيير عائلة الخط وحجم الخط، لمركز النص داخل الأزرار، لإضافة مساحة بين جوانب الأزرار والنص داخل الأزرار، لإعطاء الأزرارالحدود السوداء الصلبة، وإعادة جولة زوايا الأزرار، سنقوم بإنشاء التعليمات البرمجية التالية:

background-color: #bee5eb;text-transform: uppercase;font: 27px 'Cinzel', serif;text-align: center;padding: 20px 30px;border: 3px solid black;border-radius: 25px;

يجب أن يظهر المستند الآن على النحو التالي:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;}

الخطوة السادسة: هذا الجزء بارد!لتغيير ألوان أزرار الصفحة الرئيسية وجعلها تبدو تقريبا انظر قليلا عندما يحوم شخص ما به مع الماوس، سنكون كتب التعليمات البرمجية التالية:

button:hover { background-color: #00a1f5; opacity: .5;}

الآن دعونا تعديل تذييلنا وعلامة div النهائية.سنقوم بتغيير نص تذييل الصفحة (AKA، تغيير عائلة الخط وحجم الخط وحجم الخط ومحاذاة النص)، ولون خلفية التذييل، وإضافة بعض المسافات بين تذييل الصفحة والمنطقة أعلاه عن طريق الكتابة في رمز CSS هذا:

footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;}

سنقوم أيضا بتعديل علامة واحدة التي أنشأناها في الجزء 1 لفهم أفضل كيف تعمل العلامات.سنجعل خلفية المحتوى بين علامات الافتتاح والإغلاق في صفحة Index.html الخاصة بنا تدرج ثلاثة ألوان.هذا سيسمح لنا أن نرى ما يعشش جزءا من الكود بين العلامات الافتتاحية والإغلاق.تحمل معي هنا، الناس، لأن هذا لن يبدو فعليا سوبر إرضاء جماليا على صفحتنا الرئيسية.سنقوم بإضافة رمز CSS التالي إلى أسفل مستند Style.css لدينا حتى نتمكن من إنشاء خلفية التدرج هذه:

div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

الخطوة السابعة: ألقِ نظرة على مستند CSS بالكامل وتأكد من أنه يبدو جميلًا:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

الخطوة الثامنة: قد تتذكر هذا من الجزء 2 من سلسلة المدونة هذه، ولكن الفرق الوحيد (باستثناء العناوين والجزء من النص بين علامات الافتتاح والإغلاق القول "مدونة بوست 1" بدلا من "مدونة بوست 2" أو "مدونات وظيفة3 ") بين مدونة نشر صفحة ويب واحدة وصفحات الويب لكل من مدونات البريد 2 و 3 هي أن صفحات الويب الأخيرة تحتوي على رابط يسمح للمستخدمين بعرض وظيفة المدونة التالية (صفحة الويب الخاصة ب PLOG POND ONE لا تحتاجهذا الرابط، كما هو أكثر منشور المدونات الحالية).في الجزء 2، أضفنا فئة "README" إلى العلامة داخل تذييل منشورات مدونتنا 2 و 3 مستندات HTML.سنهدف الآن إلى هذا الفصل في وثيقة CSS هذه لجعل النصوص النصية النصية، إضافة مساحة بين الحروف الرابط "قراءة منشور المدونة التالي"، وجعل "شكرا لزيارة موقع التدوين هذا!"تعويم بجانب رابط "قراءة منشور بلوق التالي" بدلا من تحتها (افتراضيا).

لتحقيق هذه التعديلات، سنضيف الجزء التالي من التعليمات البرمجية إلى أسفل وثيقة CSS:

#ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;}

الخطوة 9: تذكر عندما أضفنا هذا المعرف إلى العلامة المتداخلة بين علامات الفتح والإغلاق لدينا في وثيقة Index.html في الجزء 1؟فعلنا هذا حتى نتمكن من فهم أفضل كيف تعمل معرفات وكيفية استهدافهم في CSS.ها نحن ذا!أولا، دعونا اكتب التعليمات البرمجية التالية في أسفل مستند Style.css الخاص بنا:

#ThankYou { text-transform: uppercase; color: #0b053f;}

الآن، سوف أشرح.بادئ ذي بدء، فإن علامة التجزئة أمام "الشكر" تحكي المتصفح هذا هو معرف.عن طريق إعطاء فقط

العلامة في Index.html معرف "Thankyou" واستهداف ذلك المعرف في CSS لجعل نص الفقرة المحددة، كل الأحرف الكبيرة والأزرق الداكن، نضمن أن يتم تغيير الفقرة فقط في تذييل الصفحة الرئيسية بهذه الطريقة.نفس الفقرات في تذييلات صفحات الويب الخاصة بوظائف المدونة 1، 2، و 3 لن تكون كبيرة ولن يكون ذلك اللون الأزرق الداكن.المضي قدما وتحقق من صفحات الويب الخاصة بك لمعرفة هذا التمييز بنفسك بعد إضافة التعليمات البرمجية أعلاه إلى صفحة أسلوبك .css.

سيبدو مستند CSS الخاص بنا الآن كما يلي:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);} .ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;} #ThankYou { text-transform: uppercase; color: #0b053f;}

في الخطوة 10!

اه انتظر!أولا، "P.S."

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

حسنًا ، الآن في الخطوة 10!

الخطوة 10: اختبار موقع الويب المحدث وصفحات الويب!انتقل إلى Explorer الخاص بك، انقر بزر الماوس الأيمن فوق ملف "index.html"، وانقر فوق "فتح مع".بعد ذلك، يرجى تحديد متصفح الإنترنت المفضل لديك (أوصي Google Chrome).انقر فوق أزرار "قراءة مدونة منشور" وإشعار التغييرات التي أجريناها على صفحات الويب الخاصة بنا مع CSS.

الصفحة الرئيسية

صفحة ويب Post 1 Blog

بلوق وظيفة 2 صفحة ويب

مدونة 3 صفحة ويب

قماش ملون CSS

في الختام، تقدم CSS مواقع إرضاء جماليا ديناميكية. نأمل أن تكون قادرا على الاستفادة من سلسلة المدونة التعليمية هذه حتى الآن، ونأمل أن نستمر في تطوير هذا الموقع في مشاركات المدونات المستقبلية. الخطة هي جعل موقعنا أكثر تفاعلية وأكثر أناقة مظهرا كما نتحرك إلى الأمام. تنبيه المفسد: قد نرمي جافا سكريبت قليلا في المزيج في مرحلة ما. نأمل أن تستمتع ببقية أسبوعك.

كتب بواسطة Hostwinds Team  /  ديسمبر 28, 2018