طراحی یک وبسایت ساده(برای تازه کار ها)

وضعیت
موضوع بسته شده است.

amirsport

Member
لطفا اسپم ندید و سوالات یا مشکلات خود را با پ خ مطرح کنید.
[email protected]

برای تشکر کردن از دکمه
attachment.php
استفاده کنید.

لینک منبع :
طراحی یک وبسایت ساده (قسمت اول)
طراحی یک وبسایت ساده (قسمت دوم)
طراحی یک وبسایت ساده (قسمت سوم)
 
آخرین ویرایش:

amirsport

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

  • طراحی ظاهر وبسایت توسط یک نرم افزار طراحی گرافیک مانند فتوشاپ
  • اجرای طرح گرافیکی ایجاد شده توسط کدنویسی HTML و CSS بصورت یک صفحه وب
این دو مرحله در آموزش های بعدی ارائه می شود و فعلاً به بررسی ساختار کلی یک وبسایت اکتفا میکنیم.
اجزاء یک صفحه وب
در شکل زیر طرح کلی یک صفحه وب رو برای شما آوردم.البته حتما میدونید که طراحی چیز منحصر بفردی نیست،یعنی شما هر طرحی رو که بخواهید میتونید اجرا کنید ولی برای شروع بهتره با یک طرح استاندارد ساده شروع کنیم.
غالب سایت های موجود از ۵ قسمت اصلی تشکیل شده اند.من برای این قسمتها نامهایی قرار دادم.این نامها مرسوم ترین نامها هستند که معمولا طراحان استفاده میکنن و باز مثل خود طرح منحصر بفرد نیستند.
سربرگ (Header) :
قسمت بالای وبسایت رو تشکیل میده و از مهمترین قسمتهای و.بسایت هست،چون معمولا اولین نگاه کاربران به این قسمت میافته.
در این قسمت معمولا نام سایت به همراه لوگوی سایت قرار میگیره و گاهاً از یک طرح گرافیکی خاص (بنر) تشکیل شده که در نگاه اول هدف و کاربری وبسایت رو مشخص میکنه.
منوی سایت (Navigation) :
معنای navigation میشه ناوبری یا هدایت کردن. معمولا در این قسمت منویی قرار میگیره که کاربران رو به قسمتهای مختلف سایت هدایت میکنه.
ستون کناری (Sidebar) :
یکی از اجزاء جدایی ناپذیر وبسایتها همین ستون کناری اونهاست که در بعضی بیش از یکی قرار داده میشه. معمولا محتواهای جانبی وبسایت مثلاً پیوندها ، فرمهای ورود ، فرم جستجو ، شبکه های اجتماعی ، لیست آخرین و محبوب ترین مطالب و کلاً هر چیزی غیر از محتوای اصلی در ستون های کناری قرار میگیره.
محتوای اصلی (Main) :
محتوای اصلی سایت یا وبلاگ معمولاً شامل تعداد معینی از جدیدترین مطالب می باشد.(مثلاً در وبلاگها چند پست آخر در این قسمت قرار میگیره.)
پانوشت (Footer) :
مهمترین چیزی که معمولاً در این قسمت قرار میگیره جمله ای کوتاه درباره حق بازنشر محتوای سایت هست که به کپی رایت معروفه.(copy left هم داریم که بعداً دربارش توضیحی خواهم داد.
icon_wink.gif
)
نکته : این ساختار معمولا به نام ساختار دو ستونه شناخته میشه.علاوه بر این ساختار دو ساختار دیگه هم در تصویر بالا نشون داده شده که کاملاً شبیه طراحی قبلی است فقط تعداد و مکان سایدبارها تغییر کرده که با نام ساختار سه ستونه شناخته میشه.
حال که اجزاء کلی یک وبسایت رو شناختیم میتونیم یک طرح در ذهنمون پرورش بدیم تا جلسه آینده یاد بگیریم چطور یک ایده رو میشه تبدیل به یک فایل گرافیکی کرد.
برای هفته آینده به فتوشاپ نیاز داریم،ترجیحاً آخرین ورژنش (cs5)رو نصب کنید.

 
آخرین ویرایش:

amirsport

Member
(قسمت دوم)
هدف : طراحی گرافیکی یک وبسایت در فتوشاپ
پیش نیاز :
قسمت اول

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

  1. پرورش ایده در ذهن،مطابق با نیازها و امکانات مورد نیاز در وبسایت.
  2. آوردن ایده روی کاغذ و تهیه یک پیش نمایش اولیه،معمولاً به این قسمت sketch گفته میشه.
  3. اجرای یک طرح گرافیکی مطابق با sketch طراحی شده.
DesignSketchpad_01.jpg
این سه قسمت تقریباً اجزاء جدایی ناپذیر یک طراحی خوب هستند. اگر سعی کنید هر کدومشون رو حذف کنید به احتمال زیاد در مرحله بعدی به مشکل برمی خورید.
البته طراحانی هم هستند که مرحله sketch رو اجرا نمیکنند که میتونه دو دلیل داشته باشه؛

  • اول اینکه طرح رو برای خودشون میزنن،یعنی نیازی نیست طرح اولیه و ساختار کلی سایت رو به مشتری نشون بدن،
  • دوم اینکه در حقیقت طرح اولیه رو قبلاً در ذهنشون ایجاد کردن و تمام جزییات در ذهنشون هست.
برای شروع به شما پیشنهاد میدم این سه مرحله رو حتماً همراه با من انجام بدین.
اول ) پرورش ایده
ایده ای که من در ذهنم دارم یک طرح ساده و شکیل برای استفاده در یک وبلاگ هستش.میخواهم عرض سایتم رو نسبتاً کم بگیرم و توش از رنگهایی استفاده کنم که تو مایه های رنگ کاغذ های قدیمی باشه(تو مایه های قهوه ای).
ارتفاع سربرگ (header) رو کم در نظر میگیرم و از یک رنگ نسبتاً بسته تر برای اون استفاده میکنم. و تنها چیزی که توش قرار میدم نام سایت بهمراه یک توضیح کوچک زیر اون هستش.
میخوام سایتم دو ستونه (۲ column layout) باشه و ستون کناری (sidebar) سمت راست قرار بگیره و عرضش نسبت به عرض محتوای اصلی سایتم (main) خیلی کمتر باشه.دوست دارم پس زمینه قسمت محتوای اصلی رو بصورتی طراحی کنم که شبیه خطهای دفترچه یادداشت باشه.
یک پانوشت (footer) هم قرار میدم و توش کپی رایت کارم رو قرار خواهم داد.راستی یه منوی سربرگ (navigation) شیک هم باید زیر سربرگ بزارم.
نکته : کلماتی که در این قسمت بصورت پررنگ نشان دادم از مهمترین چیزهایی هست که توی پرورش ایده باید به اونها توجه بشه.
دوم ) آورد ایده روی کاغذ (sketch)
من طرح مورد نظرم رو خیلی ساده روی یک کاغذ آوردم تا راحت تر بتونم تو فتوشاپ طرحش رو بزنم.اگر این مرحله رو انجام ندم موقع کار با فتوشاپ خیلی اذیت میشم چون ممکنه کل ایده تو ذهنم نباشه و قسمتی رو فراموش کرده باشم و باید فکر کنم ببینم چی تو ذهنم بوده.کلاً اعصاب رو بهم میریزه.بعداً میتونید یکبار امتحان کنید.
icon_wink.gif

sketch2.jpg
نکته : بهتره توی طرح روی کاغذ اندازه ها رو هم بنویسید.حدودی هم باشه خوبه.ضمناً بهتره یک کادر هم به عنوان مرورگر در نظر بگیرید تا بتونید یه مقیاس خوب از اندازه طرحتون به نسبتاً رزولیشن مرورگرتون داشته باشید.
* در مورد رزولیشن ها و سازگاری وبسایتها در رزولیشنهای مختلف بعداً توضیح خواهم داد.
سوم ) اجرای طرح گرافیکی در فتوشاپ
* چون اولین طرح رو میخواهیم کار کنیم ، طرح گرافیکی رو نسبتاً ساده تر اجرا میکنیم و اینشاالله در آموزشهای بعدی تو این قسمت دقیق تر میشیم و نکات جزیی تر رو هم بیان خواهیم کرد.
یک فایل جدید با عرض ۹۰۰ پیکسل و ارتفاع ۷۰۰ پیکسل ایجاد کنید و نامی دلخواه براش برگزینید.
1.png
رنگ پس زمینه اصلی کار رو بصورت زیر انتخاب کنید:
3.png
از ابزار Slice استفاده میکنیم و ابعاد اجزاء وبسایتمون رو در صفحه مشخص میکنیم. این کار رو با خطوط راهنما یا Guides هم میتونیم انجام بدیم.​
2.png
حال میتونیم با استفاده از ابزار Rectangle اجزاء وبسایتمون رو ایجاد کنیم و رنگها و خطوط حاشیه مورد نظر رو برای اونها ایجاد کنیم.
4.png
5.png
روی لایه ی جدید اجاد شده در قسمت layers کلیک راست کنید و گزینه Blending Option را انتخاب کنید:
6.png
در پنجره باز شده stroke را انتخاب کنید تا یک حاشیه ی روشن با ضخامت ۱ پیکسل برای این لایه ایجاد کنیم.
7.png
بقیه اجزاء که شامل منوی سربرگ ، ستون کناری ، محتوای اصلی و پانوشت هستند را هم میتونید به همین صورت طراحی کنید.
من فایل لایه باز رو برای دانلود قرار دادم تا از این مرحله زودتر بگذریم.چون کار کردن روی این مرحله مستلزم آشنایی نسبتاً زیاد با فتوشاپ است و مناسب سطح این آموزش نیست. در این آموزش بیشتر هدف آشنایی با روند طراحی یک سایت هست.اینشالله در آموزش های بعدی به این قسمت توجه بیشتری خواهیم نمود.
برای جلسه بعد بهتره یک نرم افزار مناسب برای کدنویسی HTML و CSS فراهم کنید.اگر در این باره اطلاعاتی ندارید نگران نباشید و تا جلسه بعد صبر کنید.
 

amirsport

Member
(قسمت سوم)
شروع :
در این قسمت از آموزش که آخرین قسمت هم هست فرا خواهید گرفت که چگونه طرح گرافیکی که در جلسه قبل ایجاد کردیم را به کمک کدنویسی HTML و CSS بصورت یک صفحه وب اجرا کنیم.
از آنجا که احتمالاً حجم این مطلب اندکی بیشتر شود سعی می کنم که تا حد ممکن توضیحات زائد رو حذف کنم.
مرحله اول : برای شروع به کار نیاز به یک نرم افزار ویرایشگر متنی داریم. ساده ترین و در دسترس ترین نرم افزار برای اینکار Notepad ویندوز می باشد.نرم افزار Notepad را باز کنید و کدهای زیر را در آن بنویسید تا اونها رو توضیح بدم :
11.png
با فرض اینکه با ساختار کدنویسی 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 هم استفاده کنید.)
21.png
نکته : encoding را هنگام ذخیره کردن فایل حتماً روی UTF-8 قرار دهید تا در صورت نوشتن متن فارسی به درستی در مرورگر نمایش داده شود.
مرحله سوم : حال که فایل index.html را ایجاد کردیم باید اجزایی که در طرح گرافیکی وبسایت طراحی کرده ایم را از طریق کدهای HTML ایجاد کنیم و از طریق دستورات CSS به آنها سبک دهیم تا کاملاً شبیه طرح گرافیکی شوند.
از مهمترین تگ هایی که در HTML مورد استفاده قرار میگیرد تگ div هست. نام این تگ از اول کلمه division به معنای بخش یا جزء گرفته شده است.پس وظیفه این تگ برایمان مشخص شد.به کمک این تگ اجزاء اصلی صفحه را ایجاد میکنیم،از این به بعد به هر کدام از این اجزا بلوک می گوییم.
در طرح گرافیکی که زدیم ۵ بلوک اصلی وجود دارد.

  1. سربرگ (header)
  2. منوی سربرگ (navigation)
  3. ستون کناری (sidebar)
  4. محتوای اصلی (main)
  5. پانوشت (footer)
شاید فکر کنید با ۵ عدد تگ div راه خواهد افتاد.اینچنین نیست. ما به ۵ تگ div برای ۵ بلوک اصلی نیاز داریم،ولی یک بلوک هم باید در نظر بگیریم که کل این ۵ بلوک را در بر بگیرید.نام آنرا container گذاشته ام،البته این بلوک نمایش داده نمی شود.
31.png
حتما ًبا 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 است با دو تفاوت :

  1. ارتفاع آن ۳۰ پیکسل است.(height:30px)
  2. حاشیه ی خارجی آن از سمت پایین ۱۵ پیکسل می باشد و از جهات دیگر صفر است.(margin=0 0 15px 0)
  3. رنگ پس زمینه آن 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 قرار دارد،ذخیره میکنیم.
41.png
51.png
تگ 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 و پاراگراف برای اینکار استفاده شده است که با توجه به استایل های آنها حتماً متوجه خواهید شد.
هدف این آموزش یک استارت برای شروع کار و آشنایی با مراحل کاری بود که امیدوارم به نتیجه رسیده باشد.پیشاپیش از اینکه شاید جایی را کامل توضیح نداده باشم یا نامفهوم باشد عذرخواهی میکنم.آماده سازی یک مطلب آموزش واقعاً زمان بر است و متاسفانه وقت من اندک.امیدوارم حداکثر استفاده را برده باشید.
مطمئن باشید که بهترین راه برای شروع کار همین آموزش های ساده است.اولین آموزشی که من با آن شروع کردم بسیار پیچیده تر با توضیحاتی نامفهوم بود که از یک متن لاتین ترجمه شده بود،لذا من سعی کردم آموزش را کاملاً خودم بنویسم و نکاتی را که از آن زمان یادم بود که شاید ایجاد ابهام کند برای دوستان تازه کار حتماً بیشتر تاکید کنم.
یاعلی مدد.


تشکر نشانه رضایت است:green:

 
آخرین ویرایش:

vooroojak889

New Member
این مطالب برای یادگیری html5 و css3 خیلی مفید هستش ، پیشنهاد میکنم 4 تاش رو دانلود کنید حجمش هم کمه:

http://www.sapoco.com/uploads/pdf/HTML5_And_CSS3_Training_In_Project.zip
http://www.sapoco.com/uploads/pdf/Learning_Html_Css_JavaScript.zip
http://www.sapoco.com/uploads/pdf/HTML5 Cheat Sheet.zip
http://www.sapoco.com/uploads/pdf/CSS3 Cheat Sheet.zip

توضیحاتش هم که این ها چه مقالاتی هستند:

http://www.sapoco.com/fa/طراحی-وب-سایت
 

mamerz

New Member
خوب بود فقط اگر آموزش طراحی سایت به صورت جلسه به جلسه و مرحله به مرحله همراه با رفع اشکال جلو میرفت برای تازه کارها راحتر بود
 

zm213

New Member
با سلام
من مدتیه طراحی سایت یادگرفتم با php
اینم میدونم به تنهایی نمیتونم کارکنم
کسی نمیدونه چطور باید کارکنم
من یه خانم متاهلم و نمیخام وارد شرکت بشم
میخام از توخونه واینترنتی کارکنم
اما گروهی نمیشناسم
که بتونم باهاشون همکاری کنم
میشه راهنمایی کنید
 
وضعیت
موضوع بسته شده است.

جدیدترین ارسال ها

بالا