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

مرحله اول – به کجا خواهيم رسيد ؟
 

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

مرحله دوم – آماده شدن :
 

به چه چيزهايي احتياج داريد ؟
سعي شده است مراحل طراحي و کدنويسي اين وب سايت به ساده ترين روش و براي افراد مبتدي توضيح داده شود ولي براي شروع احتياج به دانش مقدماتي و آشنايي با برخي از نرم افزارها داريد:
نرم افزار فتو شاپ Photoshop يا ويرايشگرهاي تصوير مشابه
نرم افزارهاي توليد کد مانند Dreamweaver
آشنايي مقدماتي با کدهاي html
آشنايي مقدماتي با کدهاي Css
استفاده از ويرايشگرهاي استاندارد ( IE+7 , FireFox ) – در اين خودآموز از FireFox استفاده شده است
در صورت نياز مي توانيد به وب سايت W3Schools مراجعه نماييد و نکات آموزنده بسياري را فرا بگيريد.
ساختار و لايه ها
براي شروع ساختار بسيار ساده و عمومي را در نظر ميگيريم که بسياري از شما دوستان با اين ساختار آشنا هستيد .
header, content, sidebar and footer

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

مرحله سوم – شروع به کار :
 

خوب براي شروع به محيط نرم افزار فتوشاپ مي رويم و يک برگه با عرض و طول 1000px در 1200px ايجاد مي کنيم . در اينجا سعي شده عرض مورد نظر بيشتر از عرض واقعي وب سايت در نظر گرفته شود تا محيط باز تري براي کار وجود داشته باشد و در انتها اين برگه به اندازه واقعي خود در خواهد آمد.
اگر با محيط نرم افزار فتوشاپ آشنايي کافي داشته باشيد کار با اين خود آموز براي شما بسيار راحت خواهد بود. براي سهولت در کار از خط کش و خط هاي کمکي استفاده ميکنيم . مقياس خط کش را براي Pixel تنظيم کنيد (واحد اندازه گيري در طراحي وب سايت Pixel است) .

طبق تصوير دو خط کمکي عمودي يکي در اندازه 100px و ديگري در 900px ايجاد کنيد . در حال حاضر عرض وب سايت 800px در نظر گرفته شده است ( بين خط کمکي روي 100px و خط کمکي روي 900px ). بعد ازايجاد اين دو خط کمکي يک خط ديگر در اندازه 630px ايجاد کنيد. در حال حاضر 3 خط کمکي در اين برگه ايجاد شده است. در صورت نياز مي توانيد با کشيدن خط ها و Drag کردن آنها بر روي خط کش آنها را پاک کنيد.

مرحله چهارم – Header :
 

پس از نشانه گذاري مرزهاي وب سايت در مرحله قبل به قسمت Header وب سايت مي رسيم که يکي از مهمترين اجزاء تشکيل دهنده هر وب سايت است. شعار تبليغاتي ، لوگو و تصاوير تبليغاتي وب سايت شما در اين قسمت قرار خواهد گرفت .با استفاده از ابزارها ( کليد ميانبر U ) يک مستطيل به ارتفاع 170 px و با رنگ #23b6eb ايجاد کنيد . سعي کنيد که از نوار ابزار فتوشاپ براي اندازه گذاري دقيق اجزاء و همچنين چينش دقيق اجزاء در صفحه استفاده کنيد .
يک مستطيل ديگر مانند تصوير روي مستطيل اوليه خود ايجاد کنيد به ارتفاع 30px و رنگ #5d5a5a ( مستطيل تيره رنگ در بالاي header )

مرحله پنجم – Navigation Bar – نوار منوها :
 

براي ايجاد نوار منوها طبق تصوير يک مستطيل با ارتفاع 60px ايجاد کنيد ، در ابتدا رنگ اين مستطيل مهم نيست زيرا ازگراديانت ها براي زيباتر شدن آن استفاده خواهيم کرد. براي آشنايي با گراديانت ها مي توانيد مطلب فوق را مطالعه نماييد.
استفاده از گراديانت در طراحي
پس از ايجا د اين مستطيل ، گراديانتي با استفاده از رنگ #e2e3e4 تا #bebdbd با زاويه 90 درجه ايجاد کنيد.

مرحله ششم – Footer :
 

براي ايجاد footer نيز از يک مستطيل با رنگ #5d5a5a استفاده کنيد. در اينجا ارتفاع 50px کافيست. يک footer خوب و استاندارد نقش بسيار ارزنده اي در بالا بردن دسترسي پذيري وب سايت و حتي زيبايي آن دارد و يکي از اجزاي مهم يک وب سايت است .

مرحله هفتم – Logo – لوگو :
 

لوگو يکي از اجزاء مهم تشکيل دهنده يک وب سايت است که معمولا بايد گوياي نوع فعاليت و خدمات وب سايت شما باشد .شما مي توانيد لوگوي خود را به صورت جدا گانه ايجاد نماييد و در قسمت کد نويسي به شما آموزش داده خواهد شد که چگونه آن را وارد وب سايت خود نماييد. در لينک زير مي توانيد مطالب مفيدي را در مورد طراحي و استانداردهاي يک لوگو بخوانيد.
چگونه ميتوان يک لوگوي حرفه اي و تاثير گذار ساخت؟

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

Font: Myriad Pro
Style: Bold
Size:60px
Color:#36809a
 

مرحله هشتم – tagline:
 

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

Font: Arial
Style: Bold
Size:30pt
Color:#e4dfdf
 

مرحله نهم – منو ها :
 

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

Font: Arial
Style: Bold
Size: 30pt
Color: #676666
 

مرحله دهم – محتويات و نوشته ها :
 

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

h2 Header:
Font: Arial
Style: Bold
Size: 36pt
Color: #0e5d7a
h3 Header:
Font: Arial
Style: Bold
Size: 24pt
Color: #444444
Paragraph:
Font: Arial
Style: Normal
Size: 14pt
Color: #595858
 

مرحله يازدهم – Side Bar:
 

ابتدا مستطيلي با ابعاد متناسب و با رنگ #d4d6d3 همراه با يک stroke ( خط دور طرح در نرم افزار photoshop ) به اندازه 1px و رنگ #bebdbd ايجاد نماييد.
لينکها

لينکها را ميتوان با مشخصات زير به راحتي ايجاد نمود.

h3 Headers:
Font: Arial
Style: Normal
Size: 24pt
Color: #044055
List items:
Font: Arial
Style: Normal
Size: 18/14pt
Color: #373737
Button
 

براي ساخت اين button از گراديانتي که در طراحي لوگو استفاده شد با همان ترکيب رنگ استفاده شده است و در محيط اين button يک stroke به اندازه 1px و رنگ #c7c7c7 نيز ايجاد شده است.

مرحله دوازدهم – محتويات و نوشته هاي footer :
 

در انتهاي اين بخش به پايين ترين نقطه وب سايت يعني footer ان مي رسيم که با ايجاد يک مستطيل در مراحل قبل ايجاد شده است براي نوشتن محتويات و کامل کردن اين بخش از مشخصات زير براي font استفاده مي نماييم.

Font: Arial
Style: Normal
Size: 14pt
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 قابل حل است .

مرحله پانزدهم – نامگذاري :
 

تصاوير اضافي حذف مي شوند و نامهاي مناسبي براي قطعات برش داده شده انتخاب مي شوند. انتخاب نامهاي مناسب در راحتي و استاندارد کار شما بسيار تاثير گذار هستند.

منبع:http://www.ittutorial.ir
ارسال توسط کاربر محترم سايت : meysamr
ادامه دارد...