شروع :
در این قسمت از آموزش که آخرین قسمت هم هست فرا خواهید گرفت که چگونه طرح گرافیکی که در جلسه قبل ایجاد کردیم را به کمک کدنویسی HTML و CSS بصورت یک صفحه وب اجرا کنیم.
از آنجا که احتمالاً حجم این مطلب اندکی بیشتر شود سعی می کنم که تا حد ممکن توضیحات زائد رو حذف کنم.
مرحله اول : برای شروع به کار نیاز به یک نرم افزار ویرایشگر متنی داریم. ساده ترین و در دسترس ترین نرم افزار برای اینکار Notepad ویندوز می باشد.نرم افزار Notepad را باز کنید و کدهای زیر را در آن بنویسید تا اونها رو توضیح بدم :
با فرض اینکه با ساختار کدنویسی HTML آشنایی دارم توضیح این کدها را به عنوان یادآوری خدمتتون عرض می کنم:
یک سند HTML استاندارد از چند تگ با نام های html,head,title,body تشکیل شده است.
همانگونه که می بینیم تگ html کل سند را در برمی گیرد و تمام تگ های دیگر درون آن قرار میگیرند.
تگ head از مهمترین تگ هایی است که وجود آن در یک سند الزامی است.در این تگ اطلاعات صفحه،کلمات کلیدی برای موتورهای جستجو،عنوان صفحه،کدهای جاوا اسکریپت و کدهای css و لینک تمام فایلهایی که لازم است به سند ضمیمه شوند (مانند لینک فایل style.css که حاوی کدهای سبک دهی صفحه می باشد.) قرار می گیرند.اگر بعضی از این موارد را متوجه نشدید نگران نباشید، کم کم با تک تک آنها شنا خواهید شد.
تگ title واقع در تگ head عنوان صفحه را نمایش می دهد.
تگ body محتوای قابل نمایش در صفحه را در خود جای میدهد.منظور از محتوای صفحه متنها ،عکسها ،لینکها و هر چیزی که قرار است کاربر ببیند می باشد.
نکته : از نرم افزار Microsoft Office نمی توانید برای کد نویسی استفاده کنید.(فکر می کنید چرا ؟)
مرحله دوم : حال با نوشتن تگهای اصلی در notepad میتوانیم سند HTMLمان را ایجاد کنیم.باری این کار فایل باز شده notepad را save as کنید و نام آنرا index.html بگذارید.
توجه : .html فرمت فایل را نشان میدهد و در صورتی که آنرا به پایان نام صفحه اضافه نکنید چیزی جز یک فایل notepad نخواهید داشت.(می توانید از .htm هم استفاده کنید.)
نکته : encoding را هنگام ذخیره کردن فایل حتماً روی UTF-8 قرار دهید تا در صورت نوشتن متن فارسی به درستی در مرورگر نمایش داده شود.
مرحله سوم : حال که فایل index.html را ایجاد کردیم باید اجزایی که در طرح گرافیکی وبسایت طراحی کرده ایم را از طریق کدهای HTML ایجاد کنیم و از طریق دستورات CSS به آنها سبک دهیم تا کاملاً شبیه طرح گرافیکی شوند.
از مهمترین تگ هایی که در HTML مورد استفاده قرار میگیرد تگ div هست. نام این تگ از اول کلمه division به معنای بخش یا جزء گرفته شده است.پس وظیفه این تگ برایمان مشخص شد.به کمک این تگ اجزاء اصلی صفحه را ایجاد میکنیم،از این به بعد به هر کدام از این اجزا بلوک می گوییم.
در طرح گرافیکی که زدیم ۵ بلوک اصلی وجود دارد.
- سربرگ (header)
- منوی سربرگ (navigation)
- ستون کناری (sidebar)
- محتوای اصلی (main)
- پانوشت (footer)
شاید فکر کنید با ۵ عدد تگ div راه خواهد افتاد.اینچنین نیست. ما به ۵ تگ div برای ۵ بلوک اصلی نیاز داریم،ولی یک بلوک هم باید در نظر بگیریم که کل این ۵ بلوک را در بر بگیرید.نام آنرا container گذاشته ام،البته این بلوک نمایش داده نمی شود.
حتما ًبا CSS آشنایی دارید،برای هر div یک id در نظر می گیریم:
<html> <head> <title>Yas</title> </head> <body> <div id="container"> <div id="header">header</div><!--header--> <div id="navigation"></div><!--navigation--> <div id="sidebar"></div><!--sidebar--> <div id="main"></div><!--main--> <div id="footer"></div><!--footer--> </div><!---container---> </body> </html>
نکته : حتماً پایان هر بلوک یک کامنت بگذارید تا به این کار عادت کنید.در پروژه های بزرگتر این کار خیلی به شما کمک خواهد کرد.
فک کنم کد های بالا نیازی به توضیح نداشته باشه، از ۶ عدد تگ div استفاده کردیم که ۵ تای آنها درون تگ div با شناسه container قرار گرفتند.
از همین جا شروع به استایل نویسی پرژمون میکنیم و کم کم کاملش می کنیم.ابتدا باید یک فایل style.css ایجاد کنیم.این کار به کمک نرم افزار notepad میتوانید انجام دهیم.دقیقاً مانند فایل index.html،ولی این بار به جای .html باید بنویسیم .css
فایل ایجاد شده را در کنار index.html قرار دهید.هر دو باید در یک فولدر باشند.حالا بایدفایل style.css را به فایل index.html متصل (لینک) کنیم.پیش تر گفتم که برای لینک کردن فایلهای جانبی مورد نیاز به یک صفحه وب آنها را درون تگ head باید قرار دهیم.این فایل را بصورت زیر میتوانیم به صفحه وبسایتمان لینک کنیم:
<link href="style.css" rel="stylesheet">
- تنظیمات کلی صفحه،مانند رنگ پس زمینه ، رنگ ،فونت و اندازه متنها
- مشخص کردن عرض (width) کلی وبسایت (عرض بلوک container ) و تنظیم ارتفاع (height) آن بصورت اتوماتیک
- تنظیم بلوک اصلی (container) در وسط صفحه
- تنظیم عرض و ارتفاع تک تک بلوک های اصلی
- شناور کردن بلوک های اصلی (float) و تنظیم فاصله ی آنها از همدیگر (margin)
- اعمال ویژگی ها گرافیکی هر بلوک به آن مانند رنگ و یا عکس پس زمینه (background) ،تنظیم رنگبندی مرز هر بلوک(border)،تنظیم رنگ متنها و لینکهای هر بلوک(color)
ابتدا تنظیمات کلی صفحه را انجام میدهیم.کد هگز رنگ پس زمینه ما ۰۰۶۴۸۵ بود،پس :
body{ background:#006485; font-family:tahoma; font-size:10pt; direction:rtl; text-align:right } حتماً با سلکتور های css آشنایی دارید.body یک سلکتور تگ body که بدنه ی صفحه ی html را تشکیل می دهد می باشد،پس می توانیم تنظیمات کلی صفحه را به آن اعمال کنیم تا بقیه ی بلوکها از آن به ارث ببرند.
همانگونه که می بینید رنگ پس زمینه را با کد هگز آن که از نرم افزار فتوشاپ بدست آوردم تنظیم کردم.در خط بعد فونت متن های موجود در صفحه را انتخاب کردم.برای صفحاتی با محتوای فارسی فونت Tahoma بهترین نمایش را خواهد داشت.معمولاً سایز متون با این فونت را ۸،۹ و یا ۱۰ پوینت(pt) انتخاب می کنند.اگر خواستید از پیکسل برای تعیین اندازه متن استفاده کنید می توانید آنرا حدود ۱۲ یا ۱۳ پیکسل انتخاب کنید.
در صفحات با محتوای فارسی به خاطر رسم الخط آن از direction راست به چپ استفاده می شود و معمولاً چینش متن را بصورت راست چین (right) یا منظم (justify) انتخاب می کنند (دو خط آخر). استفاده از راست چین کار شما را راحت تر خواهد کرد.
صفحه index.html را باز کنید و با هر تغییری که در کدها ایجاد کردید یکبار آنرا refresh کنید تا مطمئن شوید که کدها را درست نوشتید و چیزی را فراموش نکرده اید.
بلوک container
عرض بلوک container طبق طرح گرافیکی که قبلاً ایجاد کردیم ۸۰۰ پیکسل می باشد.برای تنظیم ارتفاع بصورت اتوماتیک هم آنرا برابر auto قرار می دهیم.(عرض را برابر ۸۰۲ پیکسل قرار خواهیم داد.در مراحل بعدی دلیل این کار را متوجه خواهید شد.)
در مرحله سوم به تنظیم بلوک اصلی در وسط صفحه اشاره شد.در صورتی که شما حاشیه ی خارجی طرفین (margin-right & margin-left) این بلوک را برابر اتوماتیک (auto) قرار دهید این بلوک دقیقاً در وسط صفحه قرار میگیرد و نسبت به تغییر رزولیشن موقعیت آن تغییر نمی کند.حاشیه بالا و پایین را هر چقدر می خواهید بگذارید.پس استایلی که برای این بلوک باید بنویسیم تا کنون به این صورت شده :
#container{ width:802px; height:auto; margin:100px auto; border:1px solid red }
بلوک header
عرض این بلوک را طبق طرح دقیقاً ۸۰۰ پیکسل و ارتفاع آن را ۱۵۰ پیکسل در نظر میگیریم.سعی کنید خودتان در فتوشاپ این اندازه گیری ها را انجام دهید تا کم کم با پیکسل آشنا شوید.این آشنایی باید به حدی برسد که براحتی بتوانید ۵ پیکسل را از ۶ پیکسل در یک صفحه تشخیص دهید.
رنگ پس زمینه ۵c4949 و رنگ border این بلوک سفید است.
نکته : روشهای زیادی برای تعیین موقعیت چند بلوک در صفحه وجود دارد.ولی طبق تجربه بهترین روش برای تنظیم چندین بلوک در کنار هم این است که همه ی آنها را به یک سمت شناور کنیم .به نظر من مهمترین نکته در طراحی یک وبسایت همین چینش درست بلوکها در کنار هم است. این روش یک قاعده ی کلی است که به کمک آن هر چینشی در صفحه می توانید ایجاد کنید.(سایتهای چند ستونه)
طبق این قاعده تمام بلوک ها و عناصری که به یک سمت شناور شده باشند پشت سر هم قرار می گیرند و به همدیگر می چسبند.با تنظیم عرض و ارتفاع در بلوک و تنظیم حاشیه خارجی آنها می توان یک چینش منظم ایجاد کرد.این قسمت را فقط با تمرین و انجام پروژه های مختلف فرا خواهید گرفت.به کدهای استایل header دقت کنید:
#header{ background:#5c4949; border:1px solid #fff; width:800px; height:150px; float:right; margin:0; } در این پروژه همه ی بلوک ها را به سمت راست شناور خواهیم کرد (float:right).
حاشیه خارجی بلوک header را برابر صفر قرار می دهیم(margin=0).چرا؟
در جوار بلوک header فقط یک بلوک navigation قرار دارد که به آنه هم چسبیده پس حاشیه خارجی آن باید صفر باشد.
بلوک navigation
این بلوک هم دقیقاً مانند بلوک header است با دو تفاوت :
- ارتفاع آن ۳۰ پیکسل است.(height:30px)
- حاشیه ی خارجی آن از سمت پایین ۱۵ پیکسل می باشد و از جهات دیگر صفر است.(margin=0 0 15px 0)
- رنگ پس زمینه آن d2c0c0 می باشد.
پس استایل آنرا اینگونه مینویسیم :
#navigation{ background:#d2c0c0; border:1px solid #fff; width:800px; height:30px; float:right; margin:0 0 15px 0; }
بلوک sidebar
عرض این بلوک را برابر ۲۲۵ پیکسل و ارتفاع آنرا اتوماتیک قرار می دهیم(width:225px;height:auto).به سمت راست شناور می کنیم (float:right). حاشیه خارجی آن را در همه ی جهات صفر در نظر میگیریم(margin:0) . رنگ بندی آن (background&border) کاملاً شبیه به بلوک navigation می باشد.
#sidebar{ background:#d2c0c0; border:1px solid #fff; width:225px; height:auto; float:right; margin:0; }
بلوک main
برای این بلوک اندکی به حساب کتاب نیازمندیم.باید عرض بلوک را به گونه ای انتخاب کنیم که دقیقاً تراز با بلوک های بالای آن شود.به نظرتان باید چه عرضی انتخاب کنیم؟
عرض ستون کناری ۲۲۵+ مرز ستون کناری(border) 2 + حاشیه سمت راست main ،۱۵ پیکسل+مرز main ،۲پیکسل=۲۴۴پیکسل
*منظور از مرز همان border می باشد،اگر یادتان باشد ضخامت همه ی borderها را ۱ پیکسل انتخاب کردیم.۱ پیکسل سمت راست و ۱ پیکسل سمت چپ = ۲ پیکسل مرز بلوک
عرض کل ۸۰۰ پیکسل می باشد،۲۲۴ تا از آن کم میکنیم پس عرض main دقیقاً باید برابر ۵۵۶ پیکسل باشد.
#main{ background:#d2c0c0; border:1px solid #fff; width:556px; height:auto; float:left; margin:0 15px 0 0; }
بلوک footer
رنگ بندی این بلوک مانند header می باشد،ارتفاع آن ۲۵ پیکسل و حاشیه خارجی آن از سمت بالا ۱۵ پیکسل.این استایل رو نمی نویسم تا خودتون دست بکار شوید.
خوب بلوکها را ایجاد کردیم،حال باید محتوای هر بلوک را درون آن قرار دهیم.از header شروع میکنیم.
لوگو را باید بصورت یک عکس ذخیره کنیم تا بتوانیم در header ذخیره کنیم.برای اینکار سه لایه که مربوط به نام سایت،توضیح و رنگ پس زمینه آن می باشد را در فتوشاپ با هم ادغام می کنیم (روی سه لایه ی انتخاب شده راست کلیک می کنیم و گزینه Convert to Smart Object را انتخاب میکنیم.) و سپس در اندازه مناسب برش می دهیم (به کمک ابزار Crop) و درقالب یک عکس با فرمت png در فولدری که فایل index.html قرار دارد،ذخیره میکنیم.
تگ img رو بصورت زیر تو header قرار میدیم.
<img src="logo.png" /> صفحه را refresh کنید و نتیجه را ببینید.
حال نوبت به فرم جستجو می رسد.کد HTML فرم جستجوی ما بصورت زیر می باشد:
<form id="search"> <input id="search_field" type="text" /> <input id="search_btn" type="submit" value="بگرد"/> </form> استایل این فرم را بصورت زیر بنویسید:
#search{ float:left; margin:100px 0 0 20px; } #search_field{ width:100px; border:1px solid #ffe200; background:#f6efb8; float:right; } #search_btn{ border:1px solid #ffe200; background:#c6c19b; color:#623e10; float:right; margin:0 5px 0 0 } همانگونه که میبینید برای چینش درست فرم متن و کلید جستجو هر دو را به یک سمت شناور کرده و با حاشیه ی خارجی آنها را تنظیم کرده ایم.
منوی سربرگ (Navigation menu)
این منو از یک لیست تشکیل شده است. لیست های نامنظم رو یادتون هست(UL)!
<ul id="navi"> <li><a href="#">خانه</a></li> <li><a href="#">درباره</a></li> <li><a href="#">بایگانی</a></li> <li><a href="#">تماس</a></li> </ul> استایل این منو را بصورت زیر بنویسید تا اندکی درباره آن توضیح دهم:
#navi{ list-style:none; float:right; margin:0; padding:0 } #navi li{ float:right; margin:5px 10px 0 0; } اگر توجه کرده باشید لیست ها در حالت عادی بصورت عمودی هستند.برای اینکه یک لیست افقی بسازیم کافی است که آیتم های لیست (li)ها را به یک سمت شناور کنیم.(در این مثال به سمت راست شناور شده اند.)
همانگونه که در استایل های بالا می بینید برای li ها هیچ کلاسی تعریف نکردیم،چون تمام خصیه های آنها مانند هم است از سلکتور parent استفاده کردیم.
برای ایجاد لیست های سایدبار هم به همین ترتیب عمل میکنیم ولی چون منوها عمودی است نیازی نیست که آیتمهای لیست را شناور کنیم.برای هر لیست یک عنوان در نظر میگیرم و اونو داخل یه تگ h3 قرار میدیم.از هر تگ دیگه هم میشه برای اینکار استفاده کرد ولی معمولا برای این قسمت همین تگ مناسبترین انتخاب هست.
مثال:لیست موضوعات
<h3>موضوعات</h3> <ul> <li><a href="#">موضوع اول</a></li> <li><a href="#">موضوع دوم</a></li> <li><a href="#">موضوع سوم</a></li> <li><a href="#">موضوع چهارم</a></li> </ul> استایل را بصورت parent تعریف کردم که هر لیست دیگه هم خواستیم بتونیم با همین ترکیب براحتی در سایدبار ایجاد کنیم.با این روش دیگر لازم نیست مثلاً برای لیست بایگانی یه استایل جداگانه بنویسید:
#sidebar h3{ font-style:italic; font-size:10pt; width:80%; color:#fff; border-bottom:1px solid #fff; padding:0 5px 5px 0; margin:14px 15px 10px 0; } در طراحی بلوک Main و بلوک footer چیز جدیدی وجود ندارد. از تگ های h و پاراگراف برای اینکار استفاده شده است که با توجه به استایل های آنها حتماً متوجه خواهید شد.
هدف این آموزش یک استارت برای شروع کار و آشنایی با مراحل کاری بود که امیدوارم به نتیجه رسیده باشد.پیشاپیش از اینکه شاید جایی را کامل توضیح نداده باشم یا نامفهوم باشد عذرخواهی میکنم.آماده سازی یک مطلب آموزش واقعاً زمان بر است و متاسفانه وقت من اندک.امیدوارم حداکثر استفاده را برده باشید.
مطمئن باشید که بهترین راه برای شروع کار همین آموزش های ساده است.اولین آموزشی که من با آن شروع کردم بسیار پیچیده تر با توضیحاتی نامفهوم بود که از یک متن لاتین ترجمه شده بود،لذا من سعی کردم آموزش را کاملاً خودم بنویسم و نکاتی را که از آن زمان یادم بود که شاید ایجاد ابهام کند برای دوستان تازه کار حتماً بیشتر تاکید کنم.
یاعلی مدد.
تشکر نشانه رضایت است