آموزش طراحی وب سایت شیرین عسل(بخش دوم) با Html و CSS

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

header

دیروز پوسته یا قالب سایت شیرین عسل را به طور کامل در فتوشاپ برای شما طراحی کرده ام . امروز می خواهم قالب طراحی شده را بوسیله CSS و Html تبدیل به یک وب سایت کامل کنم . بازدید کنندگان عزیز توجه داشته باشند که این آموزش در 4 بخش به طور کامل شرح داده می شود . قسمت اول طراحی هدر  . قسمت دوم طراحی منوی سمت راست همراه متن وسط صفحه یا Content .مرحله سوم طراحی فوتر و صفحات دیگر . مرحله چهارم آپلود سایت طراحی شده بر روی سرور .

1. برای شروع یک فولدر بر روی دسکتاپ یا هر کجای Computer خودتان ایجاد کنید و درون پوشه مورد نظر 2 فولدر به نام های Css و Images ایجاد کنید . پوشه CSS برای فایل های CSS و پوشه images برای ذخیره تصاویر . در صورتیکه خواستیم صفحات دیگر را هم بسازیم یک پوشه هم به نام Pege ایجاد میکنیم .

psd-to-html1

2. برای طراحی ، نیاز به یک ویرایشگر متن داریم تا بتوانیم کدهای HTML .CSS را درون آن تایپ کنیم . من از نرم افزار DreamWeaver استفاده میکنم بدلیل اینکه خیلی راحت تر و دارای محیط گرافیکی بهتری هست نسبت به ویرایشگرهای دیگر . در صورتیکه دسترسی به این نرم افزار ندارید می توانید از نرم افزار notepad خود ویندوز استفاده کنید .

 

آموزش ساخت صفحه Index.html

1. بعد از اینکه پوشه مربوط به ذخیره سایت را بر روی دسکتاپ ساختم باید فایل Index.html را که صفحه اصلی سایت نیز هست را در پوشه اصلی ایجاد کنم . برای ساخت صفحه Index.html نوت پد را باز کرده و صفحه را با پسوند html.ذخیره میکنم .(نیاز نیست برای شروع متنی را تایپ کنم)

psd-to-html2

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


{code brush:php}
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
{/code}

 

خوب  ، خط اول کدهای DOCTYPE می باشد .
DOCTYPE چیست ؟ DOCTYPE مشخص کننده نوع سند می باشد و مشخص می کند که چه نوعی از X)HTML) استفاده می کنید، همچنین به مرورگر می فهماند که این صفحه چگونه باید رندر شود. (باید در بالای صفحه و قبل از تگ <html> نوشته شود)
اگر این تگ را به همراه یک URL در بالای صفحه وب خود اعلان کنید ، سبب میشود که برنامه های مرورگر فعلی ، هنگام باز کردن صفحه شما در مد standards اجرا شوند .  بدین صورت میتوانید کدهای خود را مطابق استاندارد نوشته و کنترل بیشتری بر چگونگی نمایش این صفحه در برنامه های مرورگر مختلف داشته باشید.
در صورت نگذاشتن این کد ، مرورگر از روش های قدیمی تر برای نمایش صفحه شما استفاده می کند . یک مثال عملی :در هنگام تعیین رنگ با شماره های هگزادسیمال ، یک علامت شارپ (#) در ابتدای شماره رنگ قرار میگیرد که حذف آن باعث نادیده گرفتن این رنگ در زمان نمایش صفحه میشود . اما اگر کد DOCTYPE را از ابتدای صفحه پاک کنید ،مرورگرتان از این مورد ایراد نمی گیرد و آن رنگ را نشان میدهد . برای تست این مثال از مرورگر فایرفاکس استفاده کنید . چون مرورگر Internet Explorer بطور معمولی هم از حذف علامت # ایراد نمی گیرد و ممکن است شما فکر کنید علامت # اختیاری است ! بسیار مهم است که سند شما دارای DOCTYPE باشد چون validate می شود و در همه مرورگر ها به درستی رندر می شود.

 

معرفی تگ <html xmlns='http://www.w3.org/1999/xhtml'>
تعیین کننده ساختار html صفحه بر اساس استاندارد w3c می باشد.

هر برنامه HTML با دستور <HTML> و به </HTML> ختم می شود . علاوه بر این هر برنامه HTML دارای دو بخش عنوان و بدنه است. بخش عنوان شامل اطلاعات در مورد سند HTML است (شامل عنوانی که درمرورگر ظاهر می شود )این بخش با دستور <head> شروع و به <head/> ختم می شود .عنوان صفحه با <title> شروع و با <title/> ختم می شود .بخش بدنه که دستورات یا تگها در آن قرار می گیرد با <body> شروع و با <body/> ختم می شود پس ساختار کلی یک صفحه HYML به شکل کدهای بالا می باشد  .

بسیار خوب صفحه پیش فرض index.html ساخته شد . صفحه را ذخیره کرده و یکبار خروجی صفحه را در مرورگر مشاهده کنید . چیزی در صفحه نمایش داده نمی شود چون هنوز بین تگهای body کدی اضافه نشده است .

من کدهای اصلی مربوط به Position قالب را در فایل index.html اضافه میکنم(مثل right.left.footer,....)و تغییراتی که مربوط به ظاهر قالب میشه را در فایل  template.css .

فایل css چیست ؟
CSS روشی است برای تغییر ظاهری اسناد HTML یا صفحات وب . به این صورت که شما به راحتی می توانید با استفاده از دستوراتی که در آموزش CSS به طور کامل شرح داده ام ظاهر یک قالب را تغییر بدهید .
به عنوان مثال رنگ فونت ، خط دور تصاویر ، رنگ پس زمینه ، رنگ لینکها و ... را می توانید با استفاده از دستورات CSS تغییر بدهید . دستوراتی که در فایل CSS استفاده می شود می تواند به طور مستقیم در خود کدهای Html هم تایپ شوند اما به چند دلیل این روش پیشنهاد نمی شود :
1. تکرار و دوباره نویسی دستورهای CSS
2. کند شدن سرعت بارگذاری صفحه
3. مشکل شدن کد نویسی و خوانایی کدها

 

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

{code brush:php}
<link rel='stylesheet' type='text/css' href='css/template.css'>
{/code}

شکل کلی کد به صورت زیر می باشد .

{code brush:php}
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' type='text/css' href='css/template.css'>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
{/code}

 

بسیار خوب عنوان صفحه را با تغییر کد بین تگ <title>سایت شرکت شیرین عسل</title> تغییر میدهم .
من یک فایل css. دیگر با نام ie.css در فولدر css میسازم تا کدهای مربوط به اینترنت اکسپلورر را در این فایل وارد کنم .
کد را بین تگ head اضافه میکنم

{code brush:php}
<!--[if IE ]>
<link rel='stylesheet' type='text/css' href='css/ie.css'/>
<![endif]-->
{/code}

 

ساختار کلی کد

{code brush:php}
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' type='text/css' href='css/template.css'>
<!--[if IE ]>
<link rel='stylesheet' type='text/css' href='css/ie.css'/>
<![endif]-->
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
{/code}

 

خوب کدهای اولیه که همیشه باید برای همه قالبها ایجاد شود را من در فایل index.html وارد کردم .
حالا باید شروع کنیم به کدنویسی قالب .
روش کار به این صورت هست که من در فایل index.html میام و Position قالب را (موقعیت های مثل راست . چپ . بالا .پایین) بین تگ div که یک تگ جداکننده هست وارد کرده و بعد تگ مورد نظر را بوسیله فایل css فراخوانی کرده و تغییرات لازم را اعمال میکنم . خوب ممکنه سوال کنید چرا من اینکار را انجام میدهم . وقتی شما یک فایل css.برای قالب خودتان ایجاد کنید باید به یک وسیله ای موقعیت های قالب را در css فراخوانی کنید که بتوانید شکل ظاهری آن را تغییر بدهید درست هست ؟ من بوسیله تگ Div و سلکتورهای id , class هر موقعیت را در فایل index.html نشانه گذاری میکنم و بعد بوسیله این نشانه گذاری سلکتورهای مورد نظر را در فایل css فراخوانی میکنم تا راحت تر بتوانم شکل ظاهری آن را تغییر بدهم . برای درک بهتر کمی صبور باشید تا آموزش شروع شود .

قسمت هایی که فقط می خواهم یکبار کد آن مورد استفاده قرار بگیره  را با سلکتور ID نشانه گذاری میکنم و قسمت هایی که می خواهم در بیشتر صفحه مثل لینکها دارای یک مشخص ظاهری باشد را با سلکتور class نشانه گذاری میکنم تا در فایل css از آن استفاده کنم .

قسمت اول کد را بین تگهای body اضافه میکنم چون فقط می خواهم امروز بخش هدر و منوی سمت راست را آموزش بدهم .
من 3 تگ div بین تگ body برای شروع اضافه کردم . اولین div=header هست که قسمت منوی بالای صفحه همراه با لوگو و تصاویر هدر در این قسمت قرار می گیرد . بعد داخل div=header چند قسمت دیگر با نام های

{code brush:php}
div id='top-menu' / id='logo' / div id='banner1'
{/code}

وجود دارد . (به تصویر زیر دقت کنید )

psd-to-html3

حالا منوی بالای صفحه را بین تگ tom-menu بوسیله تگهای ul . li اضافه میکنم . دقت داشته باشید که این تگها بوسیله سلکتور Class نشانه گذاری شده است .

psd-to-html4

خروجی صفحه در مرورگر به شکل زیر می باشد .

 

psd-to-html5

فایل template.css را باز میکنم تا کدهای اولیه برای عرض و ارتفاع و یک سری از مشخصات دیگر که در ادامه به طور کامل آموزش میدهم را در این فایل اضافه کنم

همیشه در ابتدای کدهای CSS من  همه تگهای html را تایپ میکنم و ویژگیهای padding . margin را برابر با صفر قرار میدهم بدلیل اینکه در مرورگرهای مختلف این دو ویژگی یکسان نیستند و ممکن است در مرورگرهای مختلف عناصر صفحه کمی جابجا شوند .

psd-to-html6

دومین قسمت مربوط می شود به تگ body که باید تنظیمات آن را در فایل template.css مشخص کنم .
من در تگ body تنظیمات مربوط به راست چین کردن قالب . اندازه فونت صفحه . نوع فونت و ارتفاع یا فاصله دو خط از هم را مشخص کرده ام

psd-to-html7

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

psd-to-html8

قسنت انتخاب شده را با نام header-img.jpg در پوشه images ذخیره میکنم .

psd-to-html9

حالا وارد فایل css میشم و عکس ذخیره شده را با ابعاد مشخص شده فراخوانی می کنم .عکس باید به صورت سرتاسری و با ارتفاع 361 پیکسل بالای صفحه را پر کنه .

psd-to-html10

psd-to-html11

اجازه بدید تنظیمات منو را در فایل css تغییر بدهم . این قسمت کمی زمان بر می باشد پس صبور باشید . سلکتورهایی که با id مشخص شده است وقتی می خواهیم در فایل CSS آنها را فراخوانی کنیم قبل از اسم سلکتور علامت # قرار میدهیم و سلکتورهایی که با class مشخص کرده ایم قبل از اسم . (نقطه) می گذاریم .

اول top-menu را در فایل css فراخوانی کرده و عرض و طول آن را بوسیله کدهای مشخص شده تعیین میکنم

psd-to-html12

حالا می خواهم کدها را از سمت راست و در یک خط با فاصله 95 پیکسل از هم جدا کنم . چرا 95 پیکسل ؟ چون شکل هایی که کشیده ام عرضش 95 پیکسل هست

psd-to-html13

در این مرحله می خواهم متن مخفی بشه .ارتفاع لینکها برابر با 36 پیکسل و فاصله لینکها از بالای صفحه برابر باشه با 35 پیکسل

psd-to-html14

خوب اگر دقت کرده باشید من برای هر تگ li یک کلاس مشخص کرده ام . چرا چون می خواهم از مربع های کشیده شده در فتوشاپ اینجا استفاده کنم . اینکار را میشه با تگ borderدر css انجام داد ولی توسط اکسپلور پشتیبانی نمیشه و ظاهر قالب را بهم میریزه پس به این قسمت خوب دقت کنید . وارد فتوشاپ میشم و هر 5 آیکون منو را با ابزار Slice Tool بریده و به نام های مشخص شده در زیر ذخیره میکنم . باید همه کادرها به یک اندازه باشد در صورتیکه فکر می کنید اندازه ها تغییر کند یک فایل را برش داده و بعد از ذخیره کردن متن آن را تغییر بدهید و یکبار دیگر ذخیره کنید . مثلا صفحه نخست را با Slice Tool انتخاب کنید و ذخیره نمایید بعد از ذخیره کردن متن آن را با لینک دوم مثلا درباره ما یکبار دیگر ذخیره کنید تا هر 5 کادر یک اندازه داشته باشد .

اسم منوها : home / news / link/about-us/contact-us

بعد از ذخیره کردن کادرها فایل css را باز کرده و هر کدام از آیکون منوها را فراخوانی میکنم  .

psd-to-html15

psd-to-html16

خروجی قالب در مرورگر

psd-to-html17

مرحله 15 . 16 را برای مابقی آیکون منوها تکرار میکنم .

psd-to-html18

psd-to-html19

تا اینجا که مشکلی نبود. من می خواهم وقتی ماوس روی یک لینک میره رنگ آن تغییر بکنه باید چکار کنم ؟ باید رنگ 5 آیکون را با درصد رنگی e98515 تغییر داده و همه آیکون ها را یکبار دیگر ذخیره کنم فقط روبروی نام آیکون های منو اینبار یک خط فاصله همراه با حرف h اضافه میکنم . news می شود news-h

psd-to-html20

حالا نوبت میره به تغییرات در فایل css من کدهای زیر را به ترتیب به فایل template.css اضافه میکنم .

psd-to-html21

psd-to-html22

اضافه کردن لوگو به بالای صفحه

لوگو هم مثل منو ها باید با ابزار Slice Tool از پس زمینه فایل فتوشاپ جدا و با نام logo در پوشه image ذخیره شود سپس id='logo' را در فایل css فراخوانی کرده و تغییرات لازم را اعمال میکنم

psd-to-html23

psd-to-html24

psd-to-html25

اضافه کردن تصاویر هدر سایت

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

psd-to-html26

فایل index.html را باز کرده و کد <div id='img-banner1'></div> را اضافه میکنم .

psd-to-html27

فایل css را باز کرده و id='banner1' را فراخوانی و تغییرات لازم را اعمال میکنم .

psd-to-html28

خروجی صفحه بعد از تغییرات

psd-to-html29

اضافه کردن متن هدر سایت

من یک قسمت دیگر با نام id='txt-banner1 به فایل index.html اضافه میکنم سپس متن مورد نظر را بین تگ <div> متن مورد نظر<div/> تایپ میکنم . برای تغییر ظاهر و تنظیمات قرار گیری آن در هدر هم از css استفاده میکنم . به تصاویر زیر دقت کنید .

psd-to-html30

متن خودم را اضافه میکنم(متن وارد شده فقط برای نمایش بهتر موقعیت قالب می باشد )

psd-to-html31

تنظیمات فایل css

psd-to-html32

خروجی صفحه

psd-to-html33

اضافه کردن لینک ادامه مطلب

در مرحله آخر هم باید لینک ادامه مطلب را پایین نوشته اضافه کنم . اول تگ آن را در index.html اضافه کرده سپس بوسیله css تغییرات لازم را اعمال میکنم

psd-to-html34

همان مراحلی که برای لینکهای بالای صفحه انجام دادم برای لینک ادامه مطلب هم تکرار میکنم .

psd-to-html35

دموی مرحله اول را مشاهده کنید . (مابقی آموزش در قسمت بعدی توضیح داده می شود )

 

آخرین بروز رسانیسه شنبه, 12 شهریور 1392 16:15

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا