آموزش طراحی و کدنویسی وب سایت (از ابتدا تا انتها)

[sepastian]

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

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

• [برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
• [برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
• [برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
• [برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
• [برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
• [برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
  

این خود آموز از چهار بخش به صورت زیر تشکیل شده است :
قسمت اول : گرافیک وب سایت ( طراحی یک طرح پیش فرض گرافیکی )
قسمت دوم : برش طرح ( برش دادن تصاویر برای استفاده در کد ها و صفحات وب )
قسمت سوم : کدهای html ( نوشتن کدهای html و تعیین ساختار صفحه وب )
قسمت چهارم : کدهای css ( شکل دهی کدهای html با استفاده از کدهای css )
قسمت اول – گرافیک وب سایت
مرحله اول – به کجا خواهیم رسد ؟
یک وب سایت ساده و معمولی برای طراحی و کد نویسی در نظر گرفته شده ولی کار کردن بر روی این وب سایت بسیار آموزنده خواهد بود. بنابراین مراحل را دنبال کنید و به صورت عملی یاد بگیرید و تجربه کنید.
در زیر نمایی نهایی صفحه وب مورد نظر را می بینید.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
مرحله دوم – آماده شدن :
به چه چیزهایی احتیاج دارید ؟
سعی شده است مراحل طراحی و کدنویسی این وب سایت به ساده ترین روش و برای افراد مبتدی توضیح داده شود ولی برای شروع احتیاج به دانش مقدماتی و آشنایی با برخی از نرم افزارها دارید:

• نرم افزار فتو شاپ Photoshop یا ویرایشگرهای تصویر مشابه
• نرم افزارهای تولید کد مانند Dreamweaver
• آشنایی مقدماتی با کدهای html
• آشنایی مقدماتی با کدهای Css
• استفاده از ویرایشگرهای استاندارد ( IE+7 , FireFox ) – در این خودآموز از FireFox استفاده شده است

در صورت نیاز می توانید به وب سایت [برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...] مراجعه نمایید و نکات آموزنده بسیاری را فرا بگیرید.
ساختار و لایه ها
برای شروع ساختار بسیار ساده و عمومی را در نظر میگیریم که بسیاری از شما دوستان با این ساختار آشنا هستید .
header, content, sidebar and footer
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
اینها هر کدام از اجزاء تشکیل دهنده وب سایت ما خواهند بود و نحوه قرارگیری و جایگاه آنها در وب سایت بسیار مهم است.
این ایده خوبی هست که قبل از شروع به کار کد نویسی نمومنه ای از وب سایت و صفحه وب را در نرم افزارهای طراحی گرافیکی مانند فتوشاپ طراحی کنیم و سپس آن را در نرم افزارهای تولید صفحات وب بسازیم.
مرحله سوم – شروع به کار :
خوب برای شروع به محیط نرم افزار فتوشاپ می رویم و یک برگه با عرض و طول ۱۰۰۰px در ۱۲۰۰px ایجاد می کنیم . در اینجا سعی شده عرض مورد نظر بیشتر از عرض واقعی وب سایت در نظر گرفته شود تا محیط باز تری برای کار وجود داشته باشد و در انتها این برگه به اندازه واقعی خود در خواهد آمد.
اگر با محیط نرم افزار فتوشاپ آشنایی کافی داشته باشید کار با این خود آموز برای شما بسیار راحت خواهد بود. برای سهولت در کار از خط کش و خط های کمکی استفاده میکنیم . مقیاس خط کش را برای Pixel تنظیم کنید (واحد اندازه گیری در طراحی وب سایت Pixel است) .
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
طبق تصویر دو خط کمکی عمودی یکی در اندازه ۱۰۰px و دیگری در ۹۰۰px ایجاد کنید . در حال حاضر عرض وب سایت ۸۰۰px در نظر گرفته شده است ( بین خط کمکی روی ۱۰۰px و خط کمکی روی ۹۰۰px ). بعد ازایجاد این دو خط کمکی یک خط دیگر در اندازه ۶۳۰px ایجاد کنید. در حال حاضر ۳ خط کمکی در این برگه ایجاد شده است. در صورت نیاز می توانید با کشیدن خط ها و Drag کردن آنها بر روی خط کش آنها را پاک کنید.
مرحله چهارم – Header :
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

پس از نشانه گذاری مرزهای وب سایت در مرحله قبل به قسمت Header وب سایت می رسیم که یکی از مهمترین اجزاء تشکیل دهنده هر وب سایت است. شعار تبلیغاتی ، لوگو و تصاویر تبلیغاتی وب سایت شما در این قسمت قرار خواهد گرفت .با استفاده از ابزارها ( کلید میانبر U ) یک مستطیل به ارتفاع ۱۷۰ px و با رنگ #۲۳b6eb ایجاد کنید . سعی کنید که از نوار ابزار فتوشاپ برای اندازه گذاری دقیق اجزاء و همچنین چینش دقیق اجزاء در صفحه استفاده کنید .
یک مستطیل دیگر مانند تصویر روی مستطیل اولیه خود ایجاد کنید به ارتفاع ۳۰px و رنگ #۵d5a5a ( مستطیل تیره رنگ در بالای header )
مرحله پنجم – Navigation Bar – نوار منوها :
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

برای ایجاد نوار منوها طبق تصویر یک مستطیل با ارتفاع ۶۰px ایجاد کنید ، در ابتدا رنگ این مستطیل مهم نیست زیرا ازگرادیانت ها برای زیباتر شدن آن استفاده خواهیم کرد. برای آشنایی با گرادیانت ها می توانید مطلب فوق را مطالعه نمایید.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
پس از ایجا د این مستطیل ، گرادیانتی با استفاده از رنگ #e2e3e4 تا #bebdbd با زاویه ۹۰ درجه ایجاد کنید.
مرحله ششم – Footer :

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

برای ایجاد footer نیز از یک مستطیل با رنگ #۵d5a5a استفاده کنید. در اینجا ارتفاع ۵۰px کافیست. یک footer خوب و استاندارد نقش بسیار ارزنده ای در بالا بردن دسترسی پذیری وب سایت و حتی زیبایی آن دارد و یکی از اجزای مهم یک وب سایت است .
مرحله هفتم – Logo – لوگو :
لوگو یکی از اجزاء مهم تشکیل دهنده یک وب سایت است که معمولا باید گویای نوع فعالیت و خدمات وب سایت شما باشد .
شما می توانید لوگوی خود را به صورت جدا گانه ایجاد نمایید و در قسمت کد نویسی به شما آموزش داده خواهد شد که چگونه آن را وارد وب سایت خود نمایید. در لینک زیر می توانید مطالب مفیدی را در مورد طراحی و استانداردهای یک لوگو بخوانید.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
برای ایجاد لوگو طبق مراحل زیر عمل شده است و البته شما نیز می توانید از لوگوی مورد نظر خودتان استفاده نمایید.
کلمه مورد نظر خود را با استفاده از مشخصات زیر بر روی طرح می نویسیم (LOGO ).

1. Font: Myriad Pro
2. Style: Bold
3. Size: 60px
4. Color: #36809a

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
مرحله هشتم – tagline :
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

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

1. Font: Arial
2. Style: Bold
3. Size: 30pt
4. Color: #e4dfdf

مرحله نهم – منو ها :
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

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

1. Font: Arial
2. Style: Bold
3. Size: 30pt
4. Color: #676666

مرحله دهم – محتویات و نوشته ها :
می توان با توجه به تصاویر و با استفاده از مشخصات زیر محتویات و نوشته ها را نیز در جای مناسب قرار داد تا طرحی کلی و پیش فرض از صفحه وب برای ادامه کار بدست آید.
این نکته در اینجا قابل ذکر است که ایجاد یک طرح گرافیکی قبل از شروع کد نویسی یک وب سایت خوبیهای فراوانی دارد که به چند نکته از اشاره می شود
ایجاد یک نقشه راه برای اینکه بدانیم به کجا خواهیم رسید.
استفاده از تصاویر طرح گرافیکی برای ساختن وب سایت.
رفع ایراد ها و نواقص قبل از شروع به کد نویسی ( مخصوصا برای کار با مشتری ها …!؟ )
کار کردن بر روی یک طرح گرافیکی بسیار راحت تر از کد نویسی آن است بنابراین می توانیم تمامی ایده ها ی خود برای یک صفحه وب را در یک طرح گرافیکی پیاده نماییم و سپس به آماده سازی آن بپردازیم.
h2 Header:

1. Font: Arial
2. Style: Bold
3. Size: 36pt
4. Color: #0e5d7a

h3 Header:

1. Font: Arial
2. Style: Bold
3. Size: 24pt
4. Color: #444444

Paragraph:

1. Font: Arial
2. Style: Normal
3. Size: 14pt
4. Color: #595858

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
مرحله یازدهم – Side Bar :
ابتدا مستطیلی با ابعاد متناسب و با رنگ #d4d6d3 همراه با یک stroke ( خط دور طرح در نرم افزار photoshop ) به اندازه ۱px و رنگ #bebdbd ایجاد نمایید.
لینکها
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

لینکها را میتوان با مشخصات زیر به راحتی ایجاد نمود.
h3 Headers:

1. Font: Arial
2. Style: Normal
3. Size: 24pt
4. Color: #044055

List items:

1. Font: Arial
2. Style: Normal
3. Size: 18/14pt
4. Color: #373737

Button
برای ساخت این button از گرادیانتی که در طراحی لوگو استفاده شد با همان ترکیب رنگ استفاده شده است و در محیط این button یک stroke به اندازه ۱px و رنگ #c7c7c7 نیز ایجاد شده است.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
مرحله دوازدهم – محتویات و نوشته هایfooter :
در انتهای این بخش به پایین ترین نقطه وب سایت یعنی footer ان می رسیم که با ایجاد یک مستطیل در مراحل قبل ایجاد شده است برای نوشتن محتویات و کامل کردن این بخش از مشخصات زیر برای font استفاده می نماییم.

1. Font: Arial
2. Style: Normal
3. Size: 14pt
4. Color: #e0e2e2

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
قسمت دوم – برش دادن طرح
در حال حاضر یک نمای کلی از وب سایت خود را طراحی کرده ایم . حال باید این طرح را در قالب یک صفحه وب ایجاد کنیم ، یکی از مهمترین نکات که باید در این کار در نظر گرفته شود حجم مناسب در کنار کیفیت مطلوب تصاویر است . به این معنی که کیفیت و حجم تصاویر نباید فدای یکدیگر شوند و یک تعادل بین این دو موضوع بر قرار باشد. لود شدن سریع تصاویر همراه با کیفیت مطلوب آنها ، جلوه خوبی را به صفحه وب ما خواهد داد. برای تبدیل این طرح به یک وب سایت نکات بسیار دیگری نیز وجود دارد که سعی می شود به صورت بسیار ساده بیان شود.
برای برش تصاویر و استفاده از آنها در صفحه وب روشهای متفاوتی وجود دارد که در اینجا سعی شده ساده ترین و در عین حال مفید ترین روش مورد استفاده قرار گیرد.
مرحله سیزدهم – ابزار برش :
در این مرحله می توان از ابزار Slice و Crop برای برش دادن تصاویر استفاده کرد و نوع برش تصاویر بسیار مهم است. برای برش طبق تصاویر زیر عمل نمایید. برای درک بهتر در این قسمت اجزاء به صورت جداگانه برش داده می شوند.
Header
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

یک نوار باریک برای استفاده در کدهای html صفحه وب از طرح جدا شده است و با تکرار آن در صفحه وب در جهت افقی می توان به شکل مورد نظر رسید.
Footer
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

برای برش تصاویر در قسمتهای Footer و button نیز از همین روش برای برش استفاده می شود. استفاده از این روش باعث کم شدن حجم تصاویر مورد استفاده در صفحه وب و در نتیجه حجم پایین صفحه وب و لود شدن سریع تر صفحه وب می شود.
Button
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

مرحله چهاردهم – ذخیره تصاویر برای وب سایت :
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

با استفاده از Save For Web برش ها را طبق تصویر ذخیره می کنیم . در اینجا از فرمت Png 24 برای ذخیره تصاویر استفاده شده است.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
پس از تنظیمات زیر و انتخاب محل ذخیره سازی تصاویر آنها را ذخیره کنید.
“images only”, “default settings”, and “selected slices only.”
آیکون ها و لوگو نیز طبق تصاویر زیر و با استفاده از روش مشابه به صورت مجزا ذخیره می شوند.برای ذخیره سازی و برش لوگو و آیکون ها بقیه اجزاء در طرح فتوشاپی غیر فعال شده اند و طبق تصاویر Background به صورت Transparent در آمده است. استفاده از فرمت png با پس زمینه Transparent مشکلات و مزایای مختلفی دارد.این تصاویر در Browser های FireFox به صورت Transparent نمایش داده می شوند و اما در IE نمایش آنها با مشکلاتی همراه است که البته با استفاده از چند Script قابل حل است .
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
مرحله پانزدهم – نامگذاری :
تصاویر اضافی حذف می شوند و نامهای مناسبی برای قطعات برش داده شده انتخاب می شوند. انتخاب نامهای مناسب در راحتی و استاندارد کار شما بسیار تاثیر گذار هستند.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
قسمت سوم – کدهای html
مرحله شانزدهم – ویرایشگر کد :
برای شروع به کار کدنویسی برای وب سایت طراحی شده احتیاج به یک ویرایشگر کد داریم که در اینجا از نرم افزار DreamWeaver برای ایجاد و ویرایش کدها استفاده شده است. استفاده از این نرم افزار برای پیاده سازی و ساخت صفحات وب زیاد سخت نیست اما این هنر ، ذوق و سلیقه و همچنین تکنیک است که طراحان را از یکدیگر متمایز میکند. شما می توانید برای ایجاد و ویرایش کدها از نرم افزارهای دیگر نیز استفاده نمایید.(notepad )
مرحله هفدهم – ساختن فولدر ها :
این نکته بسیار مهم است که شما برای تمامی قسمتهای وب سایت خود برنامه ای داشته باشید و از روی آن برنامه به پیش بروید. دسته بندی فایلهای تشکیل دهنده وب سایت و جایگیری آنها در فولدرهای مختلف بسیار مهم است.
برای شروع فولدری با نام “Mywebsite” بسازید . در داخل این فولدر فایلهای مربوط به وب سایت شما جای خواهند گرفت. فولدری با نام “images” در داخل این فولدر بسازید و تمامی تصاویر مربوط به وب سایت را در داخل آن قرار دهید. همچنین فولدرهای دیگری با نام “css” و “js” برای قرار گیری فایلهای css و همچنین JavaScript” “ بسازید . سعی کنید رویه یکسانی را برای انتخاب نام فولدر ها و حتی صفحات خود انتخاب کنید تا هر شخصی با دیدن این نامها متوجه محتویات داخل آنها شود.استفاده یکسان از حروف کوچک و بزرگ نیز در نامگذازی فولدرها و صفحات وب توصیه می شود.به طور مثال در اینجا برای انتخاب نام فولدرها از حروف کوچک استفاده شده است.
صفحات وب خود را نیز در فولدر اصلی و در کنار فولدرهای css , js , images ذخیره نمایید و در آدرس دهی ها بسیار دقت کنید.
البته در اینجا از فایلهای js یا javascript خبری نیست و این فولدر به صورت نمونه ساخته شده است و در طرح ما کاربردی ندارد.
مرحله هجدهم – ایجاد صفحه Index.html :

اولین مرحله ایجاد یک صفحه با نام index برای شروع است . بسیاری از ویرایشگرهای کد این تگ ها ی اصلی و اولیه را به صورت پیش فرض ایجاد می کنند. در زیر این تگها را ملاحظه می نمایید.

1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
2. <html xmlns=”http://www.w3.org/1999/xhtml”>
3. <head>
4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
5. <title>Untitled Document</title>
6. </head>
7. <body>
8. </body>
9. </html>

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

1. <head>
2. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
3. <title>MyWebSite</title>
4. </head>

تگهای meta کاربرد بسیار در صفحه وب شما دارند ، از جمله تعیین فرمت Text ها و زبان صفحه وب ، کلمات کلیدی ، توضیحات در مورد محتویات صفحه وب و …..
تگ body یا همان بدنه صفحه وب شامل قسمتهایی از وب سایت می باشد که برای مخاطبان قابل رویت است مانند header , content , side bar , footer و ….
استفاده مناسب از کدهای استاندارد می تواند در حجم ، زیبایی و راحتی کار شما تاثیر بسیاری داشته باشد.در این خود اموز تلاش شده از کدهای استاندارد و از روش tableless ( استفاده از تگهای div ) برای کد نویسی استفاده شود.
در بخش های ابتدایی توضیح داده شد که صفحه وب ما از چند بخش ( header, content , side bar , footer ) تشکیل شده است . در اینجا برای شروع هر یک از این قسمتها را که در بین تگ body قرار دارند به صورت تگ div در نظر میگیریم . همانطور که در کدها ملاحظه می نمایید توضیحاتی در انتهای هر تگ برای راحتی کار قرار گرفته است. div ها مزیت های بسیاری نسبت به table ها دارند از جمله این مزیت ها می توان به پایین آوردن حجم صفحات ، قدرت مانور بیشتر برای طراحان و…. اشاره کرد.

1. <body>
2. <div>
3. </div><!–end header –>
4. <div>
5. </div><!–end content–>
6. <div>
7. </div><!–end sidebar–>
8. <div>
9. </div><!–end footer–>
10. </body>

این روش خوبی برای شروع کد نویسی یک صفحه وب است اما برای ادامه راه و اینکه در میانه راه دچار سردرگمی و دوباره کاری نشویم ابتدا باید مسیر خود را تعیین نماییم .
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

مطابق تصویر صفحه وب را به دو قسمت مجزا با نامهای main و footer تقسیم می کنیم ( کادر بنفش رنگ و آبی رنگ ) در سیستم های طراحی tabelless معمولا از یک تگ div اصلی به عنوان نگه دارنده صفحه (مانند #main) استفاده می شود.

1. <body>
2. <div>
3. <div>
4. </div><!–end header –>
5. <div>
6. </div><!–end content–>
7. <div>
8. </div><!–end sidebar–>
9. </div><!–end main–>
10. <div id=”footer”>
11. </div><!–end footer–>
12. </body>

در اینجا محتویات div های #main و #footer را برای کنترل بیشتر و همچنین مجزا کردن آنها از یک دیگر داخل یک div دیگر با نام #container قرار می دهیم .

1. <div id=”main”>
2. <div class=”container”>
3. <div id=”header”>
4. </div><!–end header –>
5. <div id=”content”>
6. </div><!–end content–>
7. <div id=”sidebar”>
8. </div><!–end sidebar–>
9. </div><!–end main container–>
10. </div><!–end main–>
11. <div id=”footer”>
12. <div class=”container”>
13. </div><!–end footer container–>
14. </div><!–end footer–>

مرحله نوزدهم – تکمیل محتوا :
پس از مشخص شدن ساختار کلی صفحه وب نوبت به تکمیل این ساختار و تکمیل محتوای صفحه وب بر طبق پیش فرض های طراحی شده میرسد . ساختار کلی وب سایت پیش از این توسط نرم افزار photoshop طراحی شده است .
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

Header
این بخش اولین و یکی از مهمترین اجزاء تشکیل دهنده صفحه وب است که از Logo , Tagline , Navigation تشکیل شده است ( لوگو ، شعار تبلیغاتی و منوها ) . در ابتدا کدها در بخش header به صورت زیر خواهند بود .

1. <div id=”header”>
2. <div id=”logo”>
3. </div>
4. <div id=”tagline”>
5. </div>
6. </div><!–end header –>

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

1. <div id=”header”>
2. <div id=”logo”>
3. <h1>Logo</h1>
4. </div>
5. <div id=”tagline”>
6. <h3>And a little tagline, too.</h3>
7. </div>
8. <ul id=”menu”>
9. <li><a href=”#”>Home</a></li>
10. <li><a href=”#”>About</a></li>
11. <li><a href=”#”>Portfolio</a></li>
12. <li><a href=”#”>Contact</a></li>
13. </ul>
14. </div><!–end header –>

برای لوگو از تگ <h1> که معرف اهمیت لوگو است استفاده شده است و برای شعار تبلیغاتی از تگ <h3> که از اهمیت کمتری نسبت به تگ <h1> برخوردار است استفاده میکنیم . استفاده از Text ها به جای استفاده ار تصاویر در طراحی یک وب سایت مزیت های بسیاری دارد و از ان جمله شناخته شدن این Text ها توسط موتورهای جستجو است.
برای ساخت منوها از لیست ها و یا تگهای <ul> و <li> استفاده شده است که کاربردهای بسیار زیادی در طراحی و ساخت منوهای کار آمد و پیشرفته دارند. تگهای <a> در داخل تگهای <li> قرار گرفته اند.
مقدار ادرس تگهای <a> با # مشخص شده است این به معنی لینک شدن به بالای صفحه است وبرای خالی نبودن مقدار href از ان استفاده می شود و کاربردهای دیگری نیز دارد.( با کلیک کردن بر روی لینکهایی که مقدار href آنها با # مشخص شده به بالای صفحه می روید )
Content
در محتوای content از نوشته های متفاوت با رنگها و اندازه های متفاوتی استفاده می شود و این نکته را در نظر داشته باشید که در طراحی یک وب سایت درجه اهمیت هر نوشته با اندازه یا Size و رنگ یک نوشته تعیین می شود و برای این کار از تگهای <h1> , <h2> , <h3>, … , <p> , <small> استفاده شده است.
قبل از تکمیل محتوای بخش اصلی تشکیل دهنده صفحه وب ( #content ) کد ها به صورت زیر خواهند بود.

1. <div id=”content”>
2. </div><!–end content–>

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

1. <[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...] id=“content”>
2. <[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>Lorem ipsum, Dolor sit</[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>
3. <[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>
4. <[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.Vestibulum id nulla eu sapienpellentesque malesuada
5. pharetra ac lacus.Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempu vel. </[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>
6. <[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit,gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>
7. <[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...] id=“news”>
8. <[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>Latest Updates</[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>
9. <[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>Vestibulum id nulla eu sapien pellentesque</[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>
10. <[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>June 1, 2009</[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>
11. <[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.Etiam laoreet ante in purus laoreet id malesuada dui pretium.<[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...] href=“#”> Read More</[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]></[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>
12. <[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>Vestibulum id nulla eu sapien pellentesque</[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>
13. <[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>June 1, 2009</[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>
14. <[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.Etiam laoreet ante in purus laoreet id malesuada dui pretium.<[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...] href=“#”> Read More</[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]></[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]>
15. </[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]><!–end news–>
16. </[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]><!–end content–>

Sidebar
بعد از قسمت content به بخش sidebar خواهیم رسد . این بخش طبق پیش فرض از سه قسمت مجزا تشکیل شده است . هر یک از این سه قسمت توسط یک تگ div به وجود می آیند که عنوان آن توسط یک تگ <h3> و اجزاء آن توسط لیست ها ( تگهای <ul> , <li> ) و در داخل این تگها نیز از تگ <a> برای پیوند و لینک استفاده شده است.

1. <div id=”sidebar”>
2. <div id=”subscribe”>
3. <h3>Subscribe!</h3>
4. <ul>
5. <li><a href=”#”>Subscribe via RSS</a></li>
6. <li><a href=”#”>Get Email Updates</a></li>
7. <li><a href=”#”>Follow us on Twitter</a></li>
8. </ul>
9. </div>
10. <div id=”popular”>
11. <h3>Popular Items</h3>
12. <ul>
13. <li><a href=”#”>Lorem ipsum dolor site amet</a></li>
14. <li><a href=”#”>Ulvinar tincidunt, Mauris id</a></li>
15. <li><a href=”#”>Lorem ipsum dolor site amet</a></li>
16. <li><a href=”#”>Proin tempor erat sit tene</a></li>
17. </ul>
18. </div>
19. <div id=”contributors”>
20. <h3>Contributors</h3>
21. <ul>
22. <li><a href=”#”>John Smith, freelance writer</a></li>
23. <li><a href=”#”>Jack McCoy, designer</a></li>
24. <li><a href=”#”>Lenny Briscoe, editor</a></li>
25. <li><a href=”#”>John Smith, martketing</a></li>
26. </ul>
27. <a href=”#”>Join Our Team</a>
28. </div>
29. </div><!–end sidebar–>

Footer
قبل از اینکه کد هایی را که نوشتیم در داخل یک مرورگر بررسی کنیم آخرین قسمت ( footer ) را نیز تکمیل می نماییم . در قسمت footer معمولا نوشته هایی در مورد قوانین کپی رایت ، لینکها ، سیاست ها ، و یا اطلاعات تماس قرار می گیرند که در وب سایتهایی با طراحی های مدرن کاربردهای بسیاری پیدا کرده است.

1. <div id=”footer”>
2. <div class=”container”>
3. <p>Copyright © ۲۰۰۹ MySite <br />
4. All Rights Reserved</p>
5. </div><!–end footer container–>
6. </div><!–end footer–>

بعد از تکمیل تمامی اطلاعات پیش فرض و نوشتن کدهای مربوطه صفحه وب ما به شکل زیر به نمایش در خواهد آمد . صفحه وب ما آماده است برای نوشتن کدهای css و جان گرفتن ..!؟
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

قسمت چهارم – کدهای css

مرحله بیستم– وارد کردن فایل css :
قبل از شروع این قسمت یک فایل سی اس اس با نام “MyStyle.css” بسازید و آن را داخل فولدر مربوطه ( css ) بگذارید. فایلهای سی اس اس به چند روش در صفحات وب مورد استفاده قرار می گیرند . در اینجا از یک فایل سی اس اس خارجی ( مجزا ) استفاده شده است که به وسیله کدهای زیر به صفحه وب لینک می شود.این کد در قسمت head قرار خواهد گرفت .

1. <link href=”css/MyStyle.css” rel=”stylesheet” type=”text/css” media=”screen” />

در آدرس دهی به نام صفحات نیز دقت نمایید (MyStyle.css ) بزرگی و کوچکی کلمات گاهی دردسر ساز خواهند شد بنابراین به این نکته نیز توجه کنید.
مرحله بیست و یکم – CSS Reset :
برای اینکه سر و شکل اولیه ای به صفحه وب بدهیم ابتدا عرض محتویات صفحه وب ( #container ) و همچنین نوع font را مشخص می کنیم.

1. body { font-family: Arial, Helvetica, sans-serif; }
2. .container { width: ۸۰۰px; margin: ۰ auto;}

نوع font برای تمامی صفحه وب تعیین شده است و عرض محتویات صفحه وب نیز ) طبق پیش فرض اولیه ) ۸۰۰px تعیین شده است.
در class تعیین شده برای تگ با نام #Container ملاحظه می نمایید که پس از تعیین margin:0 از auto استفاده شده است که کاربرد آن center کردن این div در مرکز صفحه است. پس از وارد نمودن این کدهای سی اس اس صفحه وب به صورت زیر خواهد در آمد.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

Css Reset
بسیاری از نمایشگر های صفحات وب ( IE , FireFox ,Opera ,… ) به صورت پیش فرض padding و margin های متفاوتی را مورد استفاده قرار می دهند . به دلیل استاندارد سازی و یکسان سازی نمایش صفحات وب برای تمامی نمایشگرها تمامی این padding و margin ها به صورت یکسان در می آیند.

1. body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

مرحله بیست و دوم – header :
حالا همه چیز برای شروع به شکل دهی صفحه وب از بالا به پایین آماده است . برای شکل دادن به اولین قسمت این صفحه وب ( header ) از تصویر برش داده شده در بخش دوم برای تصویرپس زمینه استفاده خواهیم کرد.
این تصویر درپس زمینه #main به صورت تکرار قرار می گیرد ، به دلیل اینکه خاصیت گسترش در تمامی رزولوشن ها و نمایشگرها را داشته باشد.

1. #main {
2. background: url(images/header_slice.jpg) repeat-x;
3. }

طبق کدهای بالا ملاحظه می نمایید که تصویر header_slice.jpg به صورت افقی تکرار می شود تا تمامی عرض صفحه وب را پوشش دهد ( repeat-x ) . در صورت تغییر عرض صفحه نمایشگر و یا رزولوشن عرض #header نیز به صورت هماهنگ تغییر می کند.
( البته حداقل عرض این صفحه وب ۸۰۰px خواهد بود – #container )
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

مرحله بیست و سوم – logo :
در مرحله قبل و در قسمت لوگو از تگ <h1> در داخل div برای جایگزینی لوگو استفاده شد است . تگ های <h1> یکی از مهمترین تگها از نظر بهینه سازی وب سایت برای موتورهای جستجو هستند که در بالای صفحه و یا ابتدایی ترین خط در صفحه وب قرار میگیرند تا توضیحی هر چند کوتاه در مورد محتویات وب سایت شما باشند.عدم وجود این تگ شاید به نظر شما مشکلی را برای صفحه وب ایجاد نمی کند اما فقط در ظاهر..!؟
این نکته را در نظر داشته باشید استفاده از تکنیکهای غیر استاندارد در طراحی وب سایت و استفاده از متن های مخفی در صفحه وب برای گول زدن موتورهای جستجو از چشم عنکبوت های موتورهای جستجو نادیده نمی ماند و ممکن است وب سایت شما با تحریم از طرف این موتورهای جستجو مواجه شود . بنابر این فکر استفاده از تکنیکهای غیر استاندارد و زیرکانه را از ذهن خود خارج کنید و به محتوای وب سایت خود بپردازید.
برای قرار دادن لوگو در جای پیش فرض از تکنیک ساده زیر استفاده شده است.

1. #logo {
2. background: url(images/logo.png) no-repeat;
3. height: ۸۴px;
4. width: ۲۳۵px;
5. }

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

در صورت تعیین نکردن اندازه برای #logo تصویر پس زمینه به طور کامل نمایش داده نخواهد شد. بنابر این با در نظر گرفتن اندازه تصویر ، اندازه آن را برای #logo مشخص نموده ایم و برای پنهان کردن نوشته Logo در داخل تگ <h1> از کد زیر استفاده نموده ایم .

1. #logo h1 {
2. text-indent: -۹۹۹۹px;
3. }

در حال حاضر نمایش صفحه وب به صورت زیر خواهد بود.ملاحظه می نمایید که اثری از نوشته Logo در زیر تصویرلوگو نیست و لوگو به بالای صفحه چسبیده است. برای ایجاد فاصله در بالای صفحه وب از خاصیت Padding برای #header استفاده می نماییم . تفاوت استفاده از margin و یا padding در این است که در صورت استفاده از margin کل مرزهای تگ جابه جا خواهند شد و در صورت استفاده از padding فقط محتویات تگ جابه جا می شوند و مرزهای تگ در جای خود باقی خواهند ماند.

1. #header {
2. padding-top: ۴۰px;
3. }

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

مرحله بیست و چهارم – tagline ( شعار تبلیغاتی ):
در مرحله قبل در مورد استفاده از تگهای <h?> و همچنین مزیت های آن بحث شد. برای ایجاد شعار تبلیغاتی به صورت پیش فرض و شکل دهی به آن طبق مراحل زیر عمل می کنیم.
با نگاهی به طرح پیش فرض طراحی شده و نوع تگ های html استفاده شده باید راهی برای قرار دادن لوگو و شعار تبلیغاتی در کنار یکدیگر پیدا نمود . برای حل این مشکل از خاصیت float در تگهای div استفاده می شود. خاصیت float باعث شناور شدن تگهای div در صفحه وب , و افزایش قدرت طراحان وب برای ایجاد صفحات جذاب تر می شود.
برای قرار دادن لوگو در سمت چپ ( left ) خاصیت float را با مقدار left به #logo اضافه می کنیم .

1. #logo {
2. background: url(images/logo.png) no-repeat;
3. height: ۸۴px;
4. width: ۲۳۵px;
5. float: left;
6. }

با نگاهی به تصویر ملاحطه می نمایید که div های tagline و navigation از پایین #logo به سمت راست آن تغییر موقعیت داده اند.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

استفاده از float تگ را به اندازه واقعی خود مقید می کند . قبل از اضافه نمودن خاصیت float ملاحظه نموده اید که تگهای div مورد استفاده در header صفحه به صورت پله ای در زیر یکدیگر قرار گرفته بودند و هر یک فضای اطراف خود را نیز اشغال نموده و اجازه قرار گرفتن تگهای دیگر را در کنار خود نمی دادند.
حال برای #tagline نیز از خاصیت float:left استفاده می نماییم.

1. #tagline {
2. float: left;
3. }

پس از اضافه نمودن این خاصیت به #tagline ملاحظه می نمایید که #navigation نیز در سمت راست #tagline قرار گرفته و تغییر موقعیت داده است . برای رفع این مشکل می توان از تکنیک زیر استفاده نمود.

1. <div id=”header”>
2. <div id=”logo”>
3. <h1>Logo</h1>
4. </div>
5. <div id=”tagline”>
6. <h3>And a little tagline, too.</h3>
7. </div>
8. <div style=”clear:both”></div>

به کدهای html مرحله قبل باز گردید و یک div با یک کد سی اس اس کوچک به بخش header اضافه نمایید ( به خط هشتم در کدهای بالا دقت نمایید ).با استفاده از خاصیت ( clear:both ) برای این div تمامی تگ های چپ و راست به زیر این div تغییر موقعیت خواهند داد و مشکل بر طرف خواهد شد. این تکنیک کاربرد زیادی در طراحی صفحات وب با استفاده از div ها دارد.
سر و شکل مناسبی به رنگ و اندازه شعار تبلیغاتی خود بدهید.

1. #tagline h3 {font-size: ۳۰px; color: #e4dfdf; }

و جای آن را طبق طرح پیش فرض تصحیح کنید.

1. #tagline {
2. float: left;
3. padding-top: ۲۰px;
4. padding-left: ۲۰px;
5. width: 400px;
6. }

حال نگاهی به صفحه وب می اندازیم.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

مرحله بیست و پنجم – navigation :
منوها یکی از مهمترین اجزاء تشکیل دهنده هر وب سایت هستند که علاوه بر افزایش زیبایی باید به دسترسی پذیری وب سایت نیز کمک کنند و استفاده از آنها برای عموم مخاطبان بسیار ساده باشد.
در طراحی های امروزی از لیستها ( تگهای <ul> ،<li> ) برای طراحی منوها استفاده می شود .
با توجه به مرحله قبل و navigation طراحی شده به صورت پیش فرض از کدهای سی اس اس زیر برای طراحی ساختار navigation استفاده می نماییم.

1. ul#menu {
2. list-style: none;
3. }
4. ul#menu li a {
5. font-size: ۳۰px;
6. color: #۶۷۶۶۶۶;
7. text-decoration: none;
8. }

طبق کدهای بالا ملاحظه می نمایید که با استفاده از خصوصیت list-style : none اشکال مورد استفاده در لیست ها را از کنار اجزاء آن حذف نمودیم و اندازه ، رنگ و… را برای لینک ها تعیین کردیم.
برای شناور نمودن #menu و چینش آن در سمت چپ از خصوصیت float:left برای تگهای <li> موجود در زیر شاخه #menu استفاده می نماییم.

1. ul#menu li {
2. float: left;
3. }

اگر نگاهی دوباره به صفحه وب در مرورگر خود داشته باشیم خواهیم دید مشکل مرحله قبل در استفاده از خاصیت float ( قرار گرفتن اجزاء پایینی در کنار #menu ) تکرار شده است و برای حل آن از تکنیک مرحله قبل استفاده خواهیم کرد ، بنا براین به مرحله کد نویسی html باز می گردیم و کد ها را به صورت زیر تغییر می دهیم . ) تگ div با خصوصیت clear:both اضافه شده است )

1. <ul id=”menu”>
2. <li><a href=”#”>Home</a></li>
3. <li><a href=”#”>About</a></li>
4. <li><a href=”#”>Portfolio</a></li>
5. <li><a href=”#”>Contact</a></li>
6. </ul>
7. <div style=”clear:both”></div>
8. </div><!–end header –>

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

1. ul#menu {
2. list-style: none;
3. padding-top: ۵۰px;
4. }
5. ul#menu li {
6. float: left;
7. padding-left: 30px;
8. padding-right: 75px;
9. width: ۹۵px; }

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

مرحله بیست و ششم – content :
طبق طرح پیش فرض در این قسمت از فونت های مختلف با رنگها و اندازه های مختلف برای نشان دادن درجه اهمیت مطالب استفاده شده است. طبق کدهای html نوشته شده برای هر یک از این تگها می توان یک style خاص نوشت و آنها را به راحتی کنترل نمود.

1. #content h2 {
2. font-size: ۳۶px;
3. color: #۰۱۵۸۷۸;
4. }
5. #content h3 {
6. font-size: ۲۴px;
7. color: #۴۴۴۴۴۴;
8. }
9. #content h4 {
10. font-size: ۱۸px;
11. color: #۳۷۳۷۳۷;
12. font-weight: normal;
13. }
14. #content p {
15. font-size: ۱۴px;
16. color: #۵۹۵۸۵۸;
17. }
18. #content small {
19. font-size: ۱۲px;
20. color: #۳۷۳۷۳۷;
21. }
22. #content a {
23. color: #۰f6c8d;
24. font-weight: bold;
25. text-decoration: none;
26. }

خوب کدهای اولیه بر طبق پیش فرض به صورت بالا خواهند بود و در ادامه به اصلاح وتکمیل آنها خواهیم پرداخت.
خوانایی متون در یک صفحه وب جزئی از اصول ابتدایی است که با نگاهی به صفحه وب متوجه خواهید شد که هنوز رنگی را برای پس زمینه محتوای صفحه وب انتخاب ننموده ایم . رنگ پیش فرض سفید است و با توجه به رنگ بندی صفحه وب و طرح پیش فرض رنگ #ebe8e8 را برای تگ body انتخاب می نماییم و کدهای سی اس اس اولیه را به صورت زیر تکمیل می نماییم.

1. body {
2. font-family: Arial, Helvetica, sans-serif;
3. background: #ebe8e8;
4. }

پس از انتخاب رنگ پس زمینه مناسب به نکته ای دیگر برای هر چه بهتر شدن خوانایی و ظاهر صفحه وب خواهیم رسید . این نکته رعایت فواصل مناسب ما بین اجزاء تشکیل دهنده یک صفحه وب و در اینجا ما بین متون است. فاصله بین پاراگراف ها ، عناوین با درجه اهمیت متفاوت و …..
قبل از انجام تغییرات تکمیلی صفحه وب به شکل زیر خواهد بود.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

ایجاد فاصله مابین navigation و تگ <h2> عنوان متن content

1. #content h2 {
2. font-size: ۳۶px;
3. color: #۰۱۵۸۷۸;
4. padding-top: ۲۵px;
5. }

ایجاد فاصله مابین تگ <h2> و <h3> با درجات اهمیت متفاوت.

1. #content h3 {
2. font-size: ۲۴px;
3. color: #۴۴۴۴۴۴;
4. padding : ۲۰px ۰px;
5. }

ایجاد فاصله مابین پاراگراف <p> و <h3>

1. #content p {
2. font-size: ۱۴px;
3. color: #۵۹۵۸۵۸;
4. padding-top: ۲۰px;
5. }

بهتر است نگاهی به نتیجه کار تا اینجا داشته باشیم .
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

طبق طرح پیش فرض کدهای سی اس اس #news را نیز به صورت زیر می نویسیم .

1. #news {
2. padding-top: ۱۰px;
3. }
4. #news h3 {
5. padding-bottom: ۱۰px;
6. }
7. #news p {
8. padding-top: ۱۰px;
9. padding-bottom: ۱۴px;
10. }

و نتیجه آن به صورت زیر خواهد بود.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

مرحله بیست و هفتم – Side bar :
برای ایجاد و سر و شکل دادن به این جزء ابتدا لازم است #content را طبق طرح پیش فرض با استفاده از اندازه ها مقید کنیم و چینش آن را با استفاده از float تعیین کنیم و آن را به صورت یک div شناور در بیاوریم تا بتوانیم #sidebar را در کنار آن قرار دهیم .

1. #content {
2. width: ۵۱۰px;
3. float: left;
4. }
5. #sidebar {
6. float: left;
7. }

اگر هم اکنون نگاهی به صفحه وب خود بیاندازید متوجه مشکلی که در مراحل قبل نیز با تگ های شناور داشتیم خواهید شد ( #footer به سمت راست #sidebar تغییر مکان داده است ) و برای حل آن طبق مراحل قبل از یک div با خصوصیت clear:both در انتهای #sidebar استفاده می نماییم .
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

1. <div id=”contributors”>
2. <h3>Contributors</h3>
3. <ul>
4. <li><a href=”#”>John Smith, freelance writer</a></li>
5. <li><a href=”#”>Jack McCoy, designer</a></li>
6. <li><a href=”#”>Lenny Briscoe, editor</a></li>
7. <li><a href=”#”>John Smith, martketing</a></li>
8. </ul>
9. <a href=”#”>Join Our Team</a>
10. </div>
11. </div><!–end sidebar–>
12. <div style=”clear:both”></div>
13. </div><!–end main container–>
14. </div><!–end main–>

بخش #sidebar از سه قسمت متفاوت با اندازه ها ، فاصله ها و رنگهای مختلف تشکیل شده است ، بنابر این با استفاده از کدهای سی اس اس طبق طرح پیش فرض ( مشخصات استفاده شده برای text ها در طرح پیش فرض ) آنها را به شکل و مکان پیش فرض در خواهیم آورد و هدایت می کنیم.

1. #sidebar {
2. float: left;
3. margin-left: ۵۵px;
4. margin-top: ۳۵px;
5. background: #d4d6d3;
6. border: ۱px solid #BEBDBD;
7. padding: ۱۵px;
8. }
9. #sidebar h3 {
10. font-size: ۲۴px;
11. color: #۰۴۴۰۵۵;
12. font-weight: normal;
13. padding-bottom: ۲۰px;
14. padding-left: ۱۵px;
15. }
16. #sidebar ul {
17. list-style: none;
18. padding-bottom: ۲۵px;
19. }
20. #sidebar ul li a {
21. font-size: ۱۴px;
22. color: #۳۹۳۸۳۸;
23. }
24. ul#subscribe li {
25. padding-bottom: ۵px;
26. }
27. ul#subscribe li a {
28. font-size: ۱۸px;
29. }

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

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

1. ul#subscribe li {
2. padding-bottom: ۵px;
3. padding-left: ۳۵px;
4. }

ابتدا با استفاده از Padding یک فضای خالی برای آیکون ها در تگهای <li> زیر شاخه #subscribe ایجاد می نماییم .
سپس با اندکی تغییر در کدهای html این قسمت و دادن id های مجزا برای کنترل بیشتر بر روی اجزاء آیکون ها را با استفاده از خصوصیت background وارد می نماییم.

1. <ul id=”subscribe”>
2. <li id=”rss”><a href=”#”>Subscribe via RSS</a></li>
3. <li id=”email”><a href=”#”>Get Email Updates</a></li>
4. <li id=”twitter”><a href=”#”>Follow us on Twitter</a></li>
5. </ul>

و کدهای سی اس اس برای هر کدام از اجزاء

1. li#rss {
2. background: url(/..images/rss_icon.png) no-repeat;
3. }

1. li#email {
2. background: url(/..images/email_icon.png) no-repeat;
3. }

1. li#twitter {
2. background: url(/..images/twitter_icon.png) no-repeat;
3. }

به آدرس دهی ها در کدهای سی اس اس بسیار دقت نمایید . برای آدرس دهی ابتدا یک ریشه بالا آمده و سپس در فولدر images آدرس دهی می کنیم . توجه داشته باشید که کدهای سی اس اس درفولدر css قرار داده شده اند.
و در اینجا نگاهی به صفحه وب .
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

طبق طرح پیش فرض جای button سبز رنگ در زیر #sidbar خالی است که با مقداری تصحیح در کدهای html و چند خط کد سی اس اس آن را نیز در جای مناسب قرار خواهیم داد.

1. <a href=”#” class=”button”>Join Our Team</a>

طبق کدهای بالا ملاحظه می نمایید که با استفاده از علامت گذاری تگ <a> با استفاده از id کنترل بیشتری بر روی آن به وسیله کدهای سی اس اس انجام خواهد گرفت.

1. a.button {
2. color: #۳۹۳۸۳۸;
3. text-decoration: none;
4. background: url(/..images/button_slice.jpg) repeat-x;
5. margin-left: ۱۴px;
6. padding: ۱۳px ۲۳px;
7. }

با اندازه گذاری دقیق و استفاده از خصوصیت های margin و padding می توانید به خوبی مکان قرار گیری اجزاء را تغییر دهید و کنترل نمایید.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

با انجام تصحیحاتی در کدهای سی اس اس #sidebar مکان آن را به دقت تنظیم و تصحیح می نماییم.

1. #sidebar {
2. float: left;
3. margin-left: ۵۵px;
4. margin-top: ۳۵px;
5. background: #d4d6d3;
6. border: ۱px solid #BEBDBD;
7. padding: ۱۵px ۱۵px ۳۰px ۱۵px;
8. }

مرحله بیست و هشتم – footer :

این قسمت نیز شباهت زیادی به بخش header صفحه وب دارد و همانند گذشته و مراحل قبل به صورت زیر عمل می نماییم . تصویر footer_slice.jpg در پس زمینه #footer تکرار خواهد شد.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

1. #footer {
2. background: url/..) images/footer_slice.jpg) repeat-x;
3. padding-top: ۲۰px;
4. padding-bottom:60px;
5. margin-top: ۴۰px;
6. color: #fff;
7. }

و در انتها همه چیز آماده است برای بهره برداری.
[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]
میتوانید دموی نهایی و فایلهای سورس را از این قسمت دانلود نمایید :

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]دمو آنلاین

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

دانلود سورس فایلهای CSS و Html

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

دانلود فایل PSD قالب

[برای مشاهده لینک ها باید عضو سایت شوید ، برای عضویت اینجا کلیک کنید ...]

دانلود خودآموز بصورت PDF

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