در مورد طرح بندی صفحات وب سایت ها

تاکنون اگر یک روزنامه ی ورزشی، سیاسی و غیره را مشاهده کرده باشید و صفحات آن را ورق زده باشید، خواهید دید که در هر صفحه ستون های متفاوت و مختلفی تشکیل شده که محتوای خبرها در این ستون ها قرار می گیرند.

صفحات وب نیز همانند صفحه های روزنامه ها می باشند که به قسمت های متفاوتی تقسیم شده و محتوا در این بخش ها و قسمت ها قرار می گیرند.

 صفحات وب

طرح بندی صفحات وب

طرح بندی صفحات وب به وسیله ی تگ های معنایی semantic انجام می شود.

برای ایجاد کردن یک طرح بندی مناسب چهار روش وجود دارد که این چهار روش دارای جنبه های مثبت و منفی می باشد. این چهار روش عبارت اند از:

  • طراحی جدول دار

  • ویژگی float

  • استفاده از framework

  • استفاده از flexbox

 صفحات وب

طراحی جدول دار

طراحی جدول دار در صفحات وب به معنای استفاده از تگ < table > نیست بلکه به معنای نمایش دادن اطلاعات به صورت طبقه بندی شده و جدا از یکدیگر می باشد. اگر در کد نویسی از طراحی جدول وار استفاده شود، در انتها خواهید دید که کدهای نوشته شده بسیار شلوغ شده و بررسی و تغییرات بعدی بر روی این کدها به سختی انجام می شود.

 صفحات وب

استفاده از چارچوب ها

برای طرح بندی صفحات وب و همچنین المان های صفحات وب می توان از framework  ها و یا همان چارچوب ها استفاده کرد.

استفاده از float

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

هر کدام از المان ها با یک جریانی در صفحات وب قرار می گیرند. برای استفاده از ویژگی های float و clear باید جریان طبیعی را بر هم بزنیم چون باعث از بین رفتن انعطاف پذیری می شود.

کد به صورت زیر می باشد:

 صفحات وب

استفاده از ویژگی flexbox

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

کد به صورت زیر می باشد:

واکنش گرایی صفحات وب

امروزه اکثریت مردم به وسیله ی تلفن های هوشمند در اینترنت جست و جو می کنند و از سایت ها و صفحات وب متفاوت و مختلفی بازدید می کنند. در این صورت اگر وب سایت شما با دستگاه های مختلف از جمله تلفن همراه یا مرورگر های رایانه های شخصی و ... سازگاری نداشته باشند، بازدید کنندگان بسیار زیادی را از دست خواهید داد.

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

 صفحات وب

آشنایی با entities

زمان وارد کردن یک متن لازم است که از کاراکترها و علامت هایی استفاده کنیم که در صفحه کلید موجود نیستند یا گاهی اوقات از علائمی استفاده می کنیم که ویرایشگرها و مرورگرها را به اشتباه خواهند انداخت؛ مانند علامت بزرگتر یا کوچک تر که مرورگرها آن ها را به عنوان تگ در نظر می گیرند. روش حل این مشکل استفاده از کاراکتری هایی است که تعیین شده هستند و در زمان کار با زبان اچ تی ام ال از آن ها برای ایجاد علامت های متفاوت استفاده می کنیم. به این کاراکترهای از قبل تعیین شده،entities می گویند.

 صفحات وب

سایر تگ ها

یکی دیگر از عناصر طراحی صفحات وب استفاده از تگ div می باشد. از تگ div می توان برای ایجاد نوار منو در اچ تی ام ال استفاده کرد. تگ div از آن دسته از عنصرهایی به شمار می رود که از نوع بلاک می باشد. به عبارت دیگر block display می باشند. یعنی یک سطر را به صورت کامل در بر می گیرد.

با این وجود می توان از سایر تگ ها نیز کمک گرفت. از تگ footer نیز می توان برای درست کردن فوتر صفحات وب در html استفاده کرد.

امیدواریم که این مقاله برای مخاطبین مفید واقع شده باشد و آشنایی کافی با طراحی صفحات وب پیدا کرده باشید.