طراحی صفحات و سایتهای اینترنتی با استفاده از HTML و CSS

توضیحات

منتشر شده در جمعه, 13 ارديبهشت 1392 13:44

نوشته شده توسط محمد کریمی داینی

بازدید: 1266

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

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

از یک سایت اینترنتی می توان برای ایجاد ارتباط مؤثر میان اعضای یک سازمان هم استفاده کرد به صورتی که هر یک از اعضا در هر جا که باشند بتوانند به اطلاعات مورد نیاز خود از طریق سایت سازمان دسترسی پیدا کنند، از آخرین اخبار مطلع شوند و آخرین تغییرات را مشاهده کنند.

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

یک وب سایت راهی مناسب برای ارائه اطلاعات مختلف در مورد کالا هم و خدماتی است که شرکت به مشتریان ارائه می دهد. بدون اینکه مشتری مجبور باشد در زمان خاصی به شرکت مراجعه کند و یا اینکه با شرکت تماس بگیرد می تواند در هر کجا که باشد به سایت شرکت مراجعه کند و اطلاعات مورد نظر خود را کسب کند.

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

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

با استفاده از زبانهای برنامه نویسی طرف سرور نظیر PHP و با استفاده از پایگاههای داده ها و بانکهای اطلاعاتی نظیر MySQL می و تکنیکهایی مثل Ajax و JavaScript امکان طراحی سایتها با انواع کاربری مختلف وجود دارد. اما در طراحی سایت ها باید از این امکانات در جای مناسب استفاده شود تا نیازهای کاربران نهایی برآورده شود.

طراحی صفحات وب با استفاده از HTML

HTML مخفف "HyperText Markup Language" است. HTML زبانی است که از آن برای نوشتن صفحات وب ایستا (استاتیک) استفاده می شود. این زبان برای مشخص کردن عناصر مختلف صفحه از یک سری تگ (برچسب) استفاده می شود. برای مثال برای اینکه یک تصویر را وارد صفحه کنیم از برچسب <img> استفاده می کنیم و برای مشخص کردن یک پاراگراف متن مورد نظر خود را بین تگ <p> و <p/> قرار می دهیم. بدین وسیله مرورگر اینترنت می تواند عناصر مختلف صفحه را شناسایی کند و آنها را نمایش دهد. مرورگرهای اینترنت کدهای HTML را دریافت می کنند و پس از تفسیر آنها را به صورت یک صفحه وب به نمایش در می آورند.

نوشتن صفحات HTML لزوماً به برنامه خاصی احتیاج ندارد. حتی با استفاده از NotePad در ویندوز هم می توانید صفحات مورد نظر خود را طراحی کنید. صرف نظر از برنامه ای که از آن برای طراحی صفحات خود کمک می گیرید آشنایی شما با HTML می تواند تا حد بسیار زیادی در کیفیت صفحات تأثیر بگذارد.

استفاده از CSS برای قالب بندی عناصر HTML

HTML اصولاً برای مشخص کردن هویت عناصر صفحه به وجود آمد. یعنی برای اینکه مشخص شود کدام بخش صفحه یک پاراگراف است یا کدام قسمت سرفصل است و کدام بخش یک جدول است و... برای این منظور هم از یک سری تگ استاندارد نظیر <p> ، <h1> و <table> استفاده می شد. وظیفه ای که برای HTML در نظر گرفته شده بود فقط همین بود و نحوه نمایش این عناصر بر عهده مرورگرهای وب بود. برای مثال مشخصاتی نظیر فونت متن، رنگ و مشخصاتی از این قبیل را مرورگر انتخاب می کرد و HTML در قالب بندی عناصر صفحه نقشی نداشت.

به تدریج مرورگرهای بزرگ مثل اینترنت اکسپلورر و Netscape از تگهای HTML جدیدی برای قالب بندی و تعیین ظاهر صفحات وب استفاده کردند مانند تگ <font> که برای تعیین فونت متن مورد استفاده قرار می گیرد و شناسه color که رنگ متن را مشخص می کند.

صفحاتی که با HTML 3.2 نوشته شده اند به دلیل استفاده از این تگها برای قالب بندی صفحه به کد نویسی بیشتری احتیاج و در نتیجه صفحه ای که با این روش به وجود می آید مملو از تگهای HTML می شود و در نتیجه حجم صفحات افزایش می یابد و سرعت لود شدن آنها کاهش پیدا می کند. علاوه بر این اصل جدایی محتویات صفحه از قالب آن هم رعایت نمی شود.

استفاده از استایل و شیوه نامه ها (CSS) با HTML 4.0 آغاز شد. از CSS برای قلب بندی عناصر صفحه استفاده می شود. برای مثال با آن می توان برای قسمتهای مختلف در صفحه تصویر زمینه تعیین کرد، فونت آنها را تغییر داد، رنگ متن ها را تغییر داد و بسیاری از قابلیتهای دیگر که قبلاً در HTML وجود نداشت با CSS در دسترس طراحان قرار می گیرد.

نوشتن صفحات پویای طرف کاربر با جاوا اسکرپت

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

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

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

نويسنده : محمد کریمی داینی

این کاربر 2 مطلب منتشر شده دارد.