طراحی وب یکی از مشاغل پر در آمد به شمار می آید که این روز ها با توجه به همه گیر شدن استفاده از اینترنت به ویژه در دنیای تجارت، جایگاه بسیار مناسبی یافته است. برای طراحی و برنامه نویسی وب سایت ها باید با زبان های برنامه نویسی مختلف آشنایی داشته باشید تا بتوانید زبان مورد نظر خود را بر اساس ویژگی های آن انتخاب کرده و فرایند طراحی وب را آغاز نمایید.
htmlو css در طراحی وب نقشی مهم دارند این دو زبان کد نویسی از جمله زبان های بسیار مهمی هستند که برای طراحی قالب سایت باید با آن ها آشنا شوید. نکته ای که در خصوص html و css باید به آن توجه شود این است که اگرچه از آن ها به عنوان زبان برنامه نویسی نام برده می شود اما در واقعیت این زبان ها با عنوان Markup Language یا زبان نشانه گذاری شناخته می شوند و در واقع می توان گفت با زبان برنامه نویسی متفاوت هستند. آشنایی با html و css برای طراحان وب سایت امری ضروری تلقی می گردد.
html و css
کاربردهای html و css
در واقع هنگامی که طرح گرافیکی یک وب سایت تهیه می شود با استفاده از html ساختار آن مانند محل قرار گیری اجزای مختلف مشخص شده و با استفاده از css می توانید به آن شکل و استایل ببخشید. برای نوشتن کد های html و css برنامه ها و نرم افزار های زیادی توسط توسعه دهندگان تهیه شده که هر یک دارای امکانات و ویژگی هایی هستند و می تواند بر اساس نیاز از آن ها استفاده نمایید. برنامه هایی نظیر Mictosoft Web Matrix، Adobe Dreamweaver، Sublime text، Web Storm و حتی برنامه ساده و در دسترس Notepad نیز می تواند برای این کار مورد استفاده قرار گیرد.
معمولا افرادی که قصد یادگیری html و css را دارند با نرم افزار ساده Notepad کار را آغاز می کنند ولی سایر نرم افزار ها با توجه به قابلیت های فراوانی که در اختیار کاربران قرار می دهند می توانند روند انجام کار را برای طراحان و برنامه نویسان تسهیل نمایند. به همین دلیل پس از یاد گیری کد نویسی html و css حتما باید با برنامه هایی که برای نوشتن این کد ها در ارتباط هستند آشنا شده و آن ها را فرا بگیرید.
معرفی html و نقش آن در طراحی وب
برای انجام طراحی وب آشنایی با زبان html ضروری به شمار می آید. Html مخفف Hyper Text Markup Language است. در واقع شما با استفاده از کد نویسی هایی که توسط html انجام می دهید می توانید قالب اصلی صفحات وب را طراحی کرده و به نمایش بگذارید. تا امروز ۵ نسخه از html روانه بازار شده که در هر نسخه مشکلات قبلی بر طرف شده و کار کردن برای طراحان آسان تر شده است.
هنگامی که برای طراحی وب از کد html استفاده می شود این کد ها توسط مرورگر ها شناسایی شده و پس از تبدیل شده به متن های قابل نمایش برای مخاطبان نشان داده می شود. با استفاده از کد های html در طراحی وب ساختار اصلی سایت، محل های قرار دادن متون، امکان قرار دادن جدول، عکس و تصاویر و … برای طراحان فراهم می شود. یک صفحه html از تگ هایی تشکیل شده است که این تگ ها در داخل <> قرار داده می شوند. در زمانی که مرور گر ها به کد های html می رسند این تگ ها را نمایش نمی دهند بلکه محتوای داخل آن ها را به نمایش می گذارند
معرفی css و نقش آن در طراحی وب
علاوه بر آشنایی با html برای طراحی وب و اعمال ویژگی های گرافیکی که مد نظر دارید باید از css استفاده نمایید. به معنای دیگر css با استفاده از کد نویسی های ویژه به صفحات سایت شما استایل می بخشد. این کلمه مخفف عبارات Cascading Style Sheets می باشد.
ساختار css به گونه ای طراحی شده که دو بخش اصلی دارد. یک بخش انتخاب گر یا همان Selector و یک بخش اعلان یا declaration که عملکرد این دو در کنار هم می تواند نمای اصلی سایت را با جزئیات به نمایش بگذارد. شما هنگامی که یک تگ متنی در html داشته باشید می توانید خصوصیات ظاهری آن از قبیل فونت، اندازه، رنگ و حتی نحوه نمایش آن را با استفاده از کد های css تعیین نمایید.
چگونه می توان از html و css در طراحی وب استفاده نمود؟
برای استفاده از html و css در طراحی وب روش های مختلفی پیش روی طراحان قرار دارد. برخی از روش ها اگر چه نوشتن آن ها ساده است اما ممکن است تاثیرات منفی بر روی سرعت بار گزاری سایت داشته باشند.
روش خطی
یکی از روش هایی که از گذشته برای این کار استفاده می شود روش خطی است. روش خطی یا inline stylesheets روشی است مه در آن استایل مورد نظر برای هر تگی در بخش Style قرار داده می شود. در این حالت برای هر تگ باید به صورت جداگانه استایلی نوشته شود که این موضوع موجب می شود حجم کد نویسی های انجام شده بسیار زیاد شود. به همین دلیل امروزه کمتر از این روش استفاده می شود.
روش درونی
یکی دیگر از روش های استفاده از html و css در طراحی وب روش درونی است. روش درونی یا Internal Stylesheet تا حدی مشابه روش خطی است با این تفاوت که کلیه کد های css در داخل دو تگ به نام Style قرار می گیرد. تگ style در بخش head در میان تگ های html قرار گرفته است. این روش اگر چه ساده از روش خطی است اما باز هم به دلیل حجم بالای کد ها ممکن است موجب تاخیر در بالا آمدن صفحات گردد.
روش css خارجی
روش دیگری که برای این امر می تواند مورد استفاده قرار بگیرد روش css خارجی یا external stylesheets است. با توجه به اهمیت سرعت بار گزاری صفحات سایت و نقش آن در موفقیت عملکرد سایت این روش به عنوان پر کاربرد ترین روش برای طراحی وب با استفاده از html و css شناخته می شود. در این روش کلیه کد نویسی های مربوط به css در داخل یک فایل جداگانه قرار داده می شود و از طریق لینکی به صفحات مورد نظر متصل می گردد.
