داشتن وب سایت

 

آموزش css, آموزش html, آموزش طراحي سايتديدگاه ها

در آنلاينر، شما سرفصل هاي آموزش html و آموزش css را به عنوان دو بخش اساسي در سلسله مقاله هاي آموزشي طراحي سايت، مشاهده خواهيد کرد.

نقش html در طراحي سايت؛ مشخص کردن اجزاي صفحات وب

اين يک اشتباه رايج است که گفته مي شود با html، صفحات سايت طراحي مي شوند! اما چرا اين جمله اشتباه است؟ به خاطر اينکه استفاده از html به تنهايي نمي توان صفحه اي را ايجاد نمود که در نظر کاربر، يک صفحه ي سايت مناسب باشد. بلکه تا هنگامي که کدهاي ايجاد شده به وسيله ي html، حداقل با css سبک دهي نشوند، نمي توان صفحات وب با کيفيت و کارآيي مناسب را ايجاد کرد. در حقيقت html به طراحي صفحات وب کمک مي کند.

 

نقش کليدي html، نشانه گذاري (mark up)، عناصر مختلف صفحات وب مي باشد. مانند تعيين بخش هدر (header)، تيترها، منوها، نظرات، ديدگاه ها، سايدبار (sidebar)، فوتر (footer) و …

 

نکته:

 

html با محتواي صفحات وب سروکار دارد.

 

css با ظاهر و چيدمان صفحات وب سروکار دارد.

 

استفاده از html، به صورت معناگرا

يکي از اصولي که در طراحي حرفه اي صفحات وب به طور جدي بايد مورد توجه قرار بگيرد، استفاده ي مفهومي از اچ تي ام ال است. يعني بايد هر عنصر را طوري ايجاد کرد که:

 

نحوه ي نشانه گذاري هر عنصر، نشان دهنده ي محتواي آن باشد.

نحوه ي نشانه گذاري هر عنصر، بر اساس سبک دهي آن نباشد (نشانه گذاري ها، presentational نباشند.)

براي درک دقيق آنچه گفته شد، به مثال زير توجه کنيد:

 

1

2

3

4

<div id="header"></div>

 <div id="content"></div>

 <div id="sidebar"></div>

 <div id="footer"></div>

در مثال فوق، با استفاده از صفت هاي id، نام هر بخش به صورت معناگرا مشخص شده است: header, sidebar, footer, content بنابر اين کاربرد کدهاي html بصورت معناگرا کاملا در مثال فوق مشاهده مي شود.

 

حالا به مثال زير توجه کنيد:

<div id="ali-logo"></div>

<div id="left"></div>

<div id="right"></div>

<div id="red-box"></div>

در کدهاي بالا، اسامي انتخاب شده به دلايل زير اشتباه و نامناسب هستند:

 

نام ali-logo به اين دليل مناسب نيست که اسم يک شخص است و بر اساس محتواي آن (که قرار است هدر باشد) نامگذاري نشده است.

نام هاي right و left بهيچ وجه مناسب نيستند. چرا که چپ و يا راست بودن عناصر با css تنظيم مي شوند. حالا 

نام red-box هم مناسب نيست؛ چرا که مانند نام هاي right و left بر اساس سبکدهي (presentational) نامگذاري شده است. در حالي که ممکن است بخواهيم بعدا  طراحی وب سایت  رنگ آن را به آبي، زرد و يا … تغيير بدهيم. واضح است که جالب نيست نام قسمتي قرمز باشد، در حالي که رنگ آن سبز است!

بنابراين هميشه توجه داشته باشيد که هنگام استفاده از کدهاي html، نامگذاري ها را به صورت معناگرا انجام بدهيد.

 

برچسب ها :