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

مرحله یازدهم – 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. <div id=“content”>
2. <h2>Lorem ipsum, Dolor sit</h2>
3. <h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
4. <p>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. </p>
6. <p>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. </p>
7. <div id=“news”>
8. <h3>Latest Updates</h3>
9. <h4>Vestibulum id nulla eu sapien pellentesque</h4>
10. <small>June 1, 2009</small>
11. <p>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.<a href=“#”> Read More</a></p>
12. <h4>Vestibulum id nulla eu sapien pellentesque</h4>
13. <small>June 1, 2009</small>
14. <p>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.<a href=“#”> Read More</a></p>
15. </div><!–end news–>
16. </div><!–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  در مرکز صفحه است. پس از وارد نمودن این کدهای سی اس اس صفحه وب به صورت زیر خواهد در آمد.