عضویت در سایت

ورود

فراموشی رمز عبور

رمز عبور خود را فراموش کرده اید؟ ایمیل خود را وارد کنید

ورود

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

در بین 1170 آموزش و 2024 پرسش به دنبال چه هستید؟

ویندوز
نصب آنلاین ویندوز

ویندوز 7,8,10,11
مشاوره
مشاوره خرید لپ تاپ و کامپیوتر

مشاوره حرفه ای دریافت کن
بلاگ
مقالات آموزشی

1k+
پشتیبانی آنلاین

سخت افزار/نرم افزار

آموزش HTML – قسمت شانزدهم(طراحی صفحه)

سلام

با شانزدهمین قسمت از آموزش HTML در خدمتتون هستیم، در این قسمت دیگه کارمون عملی میشه و میخوایم با همدیگه یک صفحه HTML طراحی کنیم(پس هر چیزی که از اولین جلسه به صورت تئوری گفتیم در این جسله به صورت عملی کار میکنیم)، بعضی از مواردی که که جدید باشه اونا رو هم در حین آموزش توضیح میدم.

در این قسمت میخوایم همچین صفحه ای را با هم طراحی کنیم:

designe

اولین کاری که باید در طراحی هامون انجام بدیم اینه که مشخص کنیم صفحه ای که میخوایم طراحی کنیم چند بخش داره، بعد از مشخص کردن تعداد بخش ها به ازای هر بخش یک div بزاریم، یعنی در واقع صفحه را با div تقسیم کنیم.

صفحه ای که ما میخوایم طراحی کنیم از ۴ بخش تشکیل شد: هدر،منوی سمت راست،محتوا،فوتر.

  • پس نخستین کار تقسیم صفحه است:

و برای هر بخش نام متناسبی میزاریم.

  • حالا باید به چهارتا div که در صفحه قرار دادیم مانند تصویر، رنگ و اندازه هاشون را تعیین کنیم، که میشه:

مطلب پیشنهادی:  تبدیل فرمت exFAT به FAT32 در ویندوز و مک تنها با یک کلیک

کدهای بالا را میان دو تگ head قرار بدید.

تا به این جای کار صفحه ما به شکل زیر شده است:

designe2

حالا باید مانند تصویر اولی شروع کنیم به نوشتن متن.

  • در header برای عنوان از تگ <h1> استفاده کردم.
  • در sidebar گزینه های مربوط به سایدبار را نوشتم و با تگ <br> از هم جدا کردم.(کار تگ <br> رفتن به خط بعدی می باشد)
  • در section از یک تگ <h2>  و تگ <p> استفاده کردم.
  • در فوتر هم که از تگی استفاده نشده فقط متن مربوط به کپی رایت را نوشتم.

پس کدها ما تا این لحظه شده:

مطلب پیشنهادی:  OTG چیست؟ 10 راه جذاب برای استفاده از آن در اندروید

نگران نباشید، هر قسمت از کدها را که متوجه نشدید در سایت بپرسید.

پس اگر تا الان درست اومده باشید، صفحه شما به شکل زیر است:

designe

نکته: ممکنه وقتی کدها را ذخیره میکنید در خروجی حروف فارسی ناخوانا باشد، برای رفع این مشکل کد زیر را بین تگ <head> قرار دهید.

ولی مشکلی در صفحه ای که طراحی کردیم وجود دارد و اون مشکل چپ به راست بودن صفحه است، در صورتی که باید متن ها راست چین باشن و از سمت راست صفحه شروع شوند، برای راست چین کردن نیاز داریم تا کدهای Css را تغییر دهیم.

  • برای راست چین کردن بخش section کدهای css زیر را اضافه کنید:

direction دو مقدار rtl و ltr میگیره، که rtl برای راست به چپ و ltr برای چپ به راست بودن است و text-align هم که قبلا توضیح داده شده.

  • برای اینکه سایدبار در بخش راست صفحه قرار بگیره، باید float:left را به float:right تغییر دهید و همچنین برای اینکه گزینه های سایدبار سمت راست قرار بگیره و از سمت راست شروع باید text-align:right را به کدها اضافه کنید.

پس در واقع کدها میشود:

که میشود:

designe-rtl

پس به صورت پیشفرض تمام عناصری که در صفحه قرار دارد چپ چین هستند و برای راست چین شدن باید مقادیر موجود در Css را تغییر بدیم.

سوال داشتید در سایت بپرسید ، پاسخگوی سوالات شما هستیم.

همراه با باشید تا آموزش های بعدی …

موفق باشید.

 

درباره احمد آخوندیمدیر سایت

همیشه در تلاش برای یادگیری :) ارتباط با من: 09159352892

دنبال کردن

ارسال نظر

رفتن به بالا

سامانه آموزشی و خدماتی بپرسم

اولین وب سایت آموزشی و پرسش و پاسخ در ایران

بپرسم را میتوان به عنوان مرجعی برای آموزش و حل مشکلات دانست، در بپرسم سعی کرده ایم آموزش های برنامه نویسی، طراحی سایت، کار با نرم افزارها ها و… را آموزش دهیم. همچنین محیطی فراهم کرده ایم تا کاربران بتوانند در این محیط سوالات خود را بپرسند و مشکل خود را حل کنند.