آخرین مطالب
امکانات وب
همه طراحان بزرگ به طور مداوم در حال بهبود مهارت ها و کسب تجربه هاي جديدتر هستند. هرگز يک طراح موفق و يا هر کس ديگري که به صورت حرفه اي روي کاري خاص فعاليت مي کند ، نگفته است که ” تا همين جا کافي است “.
خوشبختانه موفق ترين افراد در جامعه طراحان هميشه طراحی وبسایت راهي براي يادگيري فنون و چيزهاي جديد مي يابند و هميشه مبتکر و خلاق بودن را در خود حفظ مي کنند.
مطالعه بيشتر : ” 14 نکته براي تبديل شدن به يک طراح وب موفق “
1- بررسي الگوهاي طراحي UI
چک کردن وب سايت هايي مانند UI-Pattes يا Patte Tap مي تواند وسيله خوبي براي کشف بهترين طرح ها و الگوهاي رابط کاربري وب باشد. تقريبا در اينگونه سايت ها مي توان دسته بندي هاي مختلفي را مشاهده کرده و ايده هاي خوبي از طرح هاي نمونه به دست آورد .
آيا تمايل داريد که در همه کارهايتان از يک طرح استفاده کنيد ؟ آيا از واسط کاربري متفاوتي براي پروژه هاي مختلف خود استفاده مي کنيد؟
مطمئنا سر زدن به وب سايت هايي که مجموعه طرح هاي ديگر طراحان برتر را به نمايش گذاشته اند مي تواند ابزاري براي ياگيري و به دست آوردن ايده هاي جديد در شما باشد.
ui design
2- توجه به جزئيات
نگاه و توجه به جزئيات در اشياء پيرامون خود و همکاري و فعاليت مداوم در وب سايت هاي مرجع و مشاهده نمونه کارهاي ديگر طراحان وب مي تواند تمرين خوبي براي ايده گرفتن در پروژه هاي شما باشد. يک طراح بزرگ توجه بخصوصي روي بافت ها ، پترن ها ، سايه ها ، اشکال و تصاوير دارد و به نظر من همين جزئيات هستند که طرح سايت را زيبا و کاربرپسند مي نمايد.
3- تکنيک هاي سئو
بسياري از مشتريان از يک طراح وب انتظار دارند تا علاوه بر کار طراحي به تکنيک هاي SEO نيز تسلط داشته باشد.البته اگر طراح وب در کنار تخصص هاي خوب خود از اصول اوليه و کاربردي سئو نيز کمک بگيرد و آن را به عنوان تخصص خود در رزومه کاريش ذکر کند ، مي تواند شانس بيشتري براي قبول اينگونه پروژه ها نيز داشته باشد.
هر چند از ديد بسياري از متخصصان سئو ، شايد يک طراح وب بتواند اصول اوليه و مبتديانه SEO را در طراحي وب خود پياده کند، اما از نقطه نظر آنها بحث سئو مدام در حال تغيير است و چه بهتر که اين بخش را به اهل و متخصص اين حيطه سپرد.
4- روند آموزش طراحي وب
همان طور که در اول مطلب به آن اشاره شد ، يک طراح وب هرگز نبايد بر روي داشته هاي کنوني خود تکيه کند و بايد هميشه در حال آپديت و بروزرساني دانسته ها و تجربيات جديد خود باشد و اين روش جزء با مطالعه و صرف زمان مداوم امکان پذير نخواهد بود. اين روند هميشه طراح را در يک حالت بروز و به يک طراح متخصص تبديل نموده و يک راه عالي براي همسو شدن با فن آوري هاي جديد در اين حيطه است.
البته شايد مشتريان از طراح خود انتظار داشته باشند که پروژه اش مانند فلان سايت باشد ، اما کسب آموخته ها و تکنيک هاي جديد به نفع خود طراح است و مي تواند در آينده روند شغلي او را متحول نمايد.
5- دانستن تايپوگرافي
به خاطر داشته باشيد که آنچه در طراحي يک وب سايت در وهله اول خودنمايي مي کند ، متن و تايپوگرافي زيبا است. داشتن درک مناسب از بکارگيري تايپوگرافي مي تواند کمک قابل ملاحظه اي را در چگونگي استفاده از آن به شما نمايد.
دانستن اطلاعاتي مثل مبنا و ريتم فونت ها ، مسائل مربوط به خوانايي فونت ها ، اندازه متن و اثرات آنها و خيلي چيزهاي ديگر مي تواند پيش زمينه مناسبي براي خلق يک متن با تايپوگرافي متفاوت در طرح هاي شما باشد.
6- تمرين با رنگ ها
آيا تا به حال به وب سايت هايي مثل ColourLovers سر زده ايد ؟ آيا مطالبي در مورد اثرات و ترکيب رنگ ها خوانده ايد ؟ اگر چنين نيست ، ممکن است در حين کار طراحي خود دچار مشکلات اساسي در بکارگيري رنگ ها داشته باشيد. دانستن تئوري و روانشناسي رنگ و به کار بردن پالت رنگ مخصوص به خود مي تواند وسيله مناسب براي خلق اثري متمايز براي شما و مشتريانتان باشد.
color theory
7- دانستن جاوا اسکريپت
بسياري از طراحان وب به اين موضوع مي انديشند که آيا بايد براي يادگيري اضافي به سراغ زبان هاي برنامه نويسي و توسعه وب بروند يا خير ؟ يکي از بهترين چيزهايي که يک طراح وب مي تواند براي تکميل تجربه هاي خود مورد فراگيري قرار دهد ، جاوا اسکريپت است که امروزه به بخش جداناپذيري از طراحي وب تبديل شده است.
اگر مي خواهيد در زمينه طراحي وب به يک حرفه اي تبديل شويد ، به هيچ وجه خود را محدود به HTML يا CSS نکنيد و برنامه نويسي هاي ديگري مثل جاوا اسکريپت را حتي با آموختن ابتدايي ترين چيزهاي آن مورد کاوش قرار دهيد.
8- ارتباط بهتر
به عنوان يک طراح وب سايت بايد اصول پايه برقراري ارتباط موثر و حل مشکلات مشتريان خود را به خوبي بدانيد. با برقراري بهترين ارتباط مي تواند مشکلات مشتري را سريع تر ، موثرتر و بهتر حل و فصل کنيد. دانستن برخي از قوانين ارتباط موثر مي تواند به شما کمک کند تا بالاترين سطح تماس را با مشتريان خود داشته باشيد.
همچنين مهم است که در طول فرآيند و بعد از اتمام طراحي پروژه به هيچ وجه ارتباط خود را با مشتري قطع نکرده و با مهرباني ، بي درنگ و با صبوري خواسته ها و مشکلات او را شنيده و در جهت رفع آنها بکوشيد.
9- يادگيري از اشتباهات
توجه به اشتباهات بهترين شيوه براي يادگيري است. به زمان هايي که برخي از اشتباهات را مرتکب شده ايد فکر کنيد و يک تکه کاغذ برداشته و شروع به نوشتن آنها کنيد و هميشه آن را در جلوي ديد خود قرار داده وسعي کنيد تا در پروژه هاي آينده خود آنها را رفع کنيد.
برخي از همين اشتباهات گاها در برقراري ارتباط با مشتري رخ مي دهد مثل عصبي شدن در مورد تماس هاي پي در پي مشتري ، حضور نيافتن سر قرارهاي کاري يا چيزهاي ديگر. اشتباهات ديگر مربوط به مهارت ها است و اينکه آيا به اندازه کافي تجربه و تخصص داريد تا تمام تقاضاهاي مشتري را به نحو احسنت رفع کنيد؟
بزرگترين اشتباه براي يک طراح اينست که نتواند از مشکلات و اشتباهات گذشته خود براي يادگيري و رفع آنها استفاده نمايد.
10- استفاده از Sketchbook
بسياري از طراحان برتر براي زمان هايي که در طوفان فکري هستند براي اينکه ايده هايشان به دست فراموشي سپرده نشود ، از قلم و کاغذ استفاده کرده و به نوعي يک کتابچه ايده ها ايجاد مي کنند. در اين کتابچه مي توان اسکچ ها ، طرح هاي اوليه ، نوشتن ايده ها ، wireframe ها و ديگر چيزهايي که به ذهن طراح خطور مي کند را يادداشت کند.
ياد گرفتن اين مهارت که در هر مرحله اي از طراحي و يا در ابتداي آغاز هر پروژه بتوان ايده ها و ذهينت کل طرح را روي کاغذ آورد مي تواند کمک شاياني به نتيجه آخر کار داشته باشد.
11- بيرون رفتن از فضاي کاري
به عبارت ساده يک طراح هم مانند قشرها و ديگر افراد عادي نياز به استراحت و تفريح و گردش دارند. پس از کامپيوتر خود فاصله گرفته و به بيرون محل کارتان برويد و يا تلويزيون تماشا کنيد و يا اينکه کتاب بخوانيد. کلا در روز زماني براي استراحت خود در نظر بگيريد تا ذهنتان از خستگي به آرامش رسيده و استرس و اضطراب کاريتان کاهش يابد و همين موضوع باعث بهبود توانايي براي ادامه کارتان خواهد بود.
workspace
12- همکاري با ديگران
يک طراح موفق کسي است که بتواند ارتباطات خود را با ديگر همکاران به صورت مستمر داشته باشد. اين ارتباطات مي تواند در مورد بحث هاي مختلفي مثل بحث هاي کاري ، خانوادگي يا دريافت نظرات آنها و اشتراک گذاري ايده ها باشد که بهترين مکان براي اين طور محافل شبکه هاي اجتماعي هستند.
نه تنها اين کار شما را دقيقه هايي از خستگي بدور مي کند ، بلکه تکنيک ها و آموخته هاي جديد را از اين راه و تعامل با ديگران به دست مي آوريد و حتي مي توانيد واکنش و نظرات همکاران خود را در ارتباط با پروژه خود جويا شويد.
13- دانستن شبکه بندي
يکي از وسايل و ابزارهاي بسيار مهم براي طرح بندي و شبکه بندي طراحي وب سايت ، استفاده از Grid است. اين کار باعث ايجاد يک نوع نظم و انضباط بر طبق الگوهاي از پيش تعيين شده مي شود مانند سيستم 960gs که مقالات مختلفي در سطح وب در مورد گرايدهاي مختلف وجود دارد که مي توانيد دو پست در اين ارتباط را در خود وب هاب مطالعه کنيد.
14- خريد کتاب هاي جديد
استفاده از کتاب ها و منابع مختلف مي تواند تجربه شما را در جهت بهبود دانش تان افزايش دهد. از قديم و ايام رسم بر اين بوده است که براي يادگيري فنون جديد به سراغ کتاب مي روند و امروزه هم با رونق دنياي تکنولوژي تا حدودي اين اصل پا برجا مانده است . خوشبختانه کتاب هاي خوبي در مورد طراحي در سطح بازار يافت مي شود که طراحان وب مي توانند با توجه به نيازشان به خريد آنها اقدام کنند.
book web design
15- شرکت در کنفرانس ها و همايش ها
بسياري از طراحان وب اهميت شرکت در همايش ها و رويدادهاي مرتبط را ناديده مي گيرند. اين مکان ها بهترين نقاط براي يادگيري چيزهاي جديد هستند و گهگاهي شايد هزينه اوليه اين همايش ها طراحان را به عقب هل دهد ، اما بايد براي هر چيزي هزينه اي کرد و چه بهتر که اين هزينه ها در جهت بهبود تجربيات شما باشد.
نتيجه
هر طراح مي تواند با توجه به سليقه ، وقت و زمان خود در طول روز ساعاتي را به کسب تجربيات و مهارت هاي جديد بگذراند. آنچه که يک طراح را به طراحي موفق با مهارت هاي بالا تبديل مي کند : سعي و کوشش ، پشتکار ، صبر و تحمل ، اشتياق به يادگيري ، استعداد و خلاقيت و خيلي چيزهاي ديگر است.
شما چگونه سطح مهارت هاي خود را افزايش مي دهيد ؟ چه ترفندهايي را براي يادگيري اصول طراحي وب رعايت مي کنيد ؟
تگ ها:
طراحي وب سايت31
ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت, طراحی سایت, طراحی وب, نویسنده : maryam webdesign25 بازدید : 155
زماني که تيم برنرز لي، مخترع وب در آگوست سال ???? در حال طراحي اولين وب سايت جهان بود، فکرش را نمي کرد که طي کمتر از دو دهه اين کار به يک هنر و تخصص مهم تبديل شود و کاربران اينترنت با استفاده از تکنيک هاي بديع شاهد طراحي وب سايت هاي کاملا هنرمندانه و خلاقانه گرافيکي باشند.
در آن زمان، سايت هاي اينترنتي با کدهاي ساده «HTML» نوشته مي شدند. HTML يک زبان کدنويسي بود که ساختار ساده اي به وب سايت ها طراحی مي داد. با استفاده از اين زبان برنامه نويسي طراحي سرتيتر و پاراگراف و پيوند دادن به صفحه هاي وب ديگر ممکن مي شد. اين روش در مقايسه با روش هاي ديگر، راه تازه و متفاوتي بود که کاربران با استفاده از آن به سادگي مي توانستند با به کارگيري يک مرورگر، صفحه هاي پيوند شده را باز کنند.
با پيشرفت وب زمينه اي ايجاد شد تا انعطاف بيشتري به امکانات وب سايت ها داده شود و کم کم واژه و اصطلاح "هنر طراحي وب سايت" بر سر زبان ها افتاد. اهميت بهره مندي همزمان از مهارت هاي مختلف موجب شد تا يک طراح وب سايت امروزي مجبور به آموزش بيش از ?? مهارت باشد تا بتواند در اين حوزه به فعاليت بپردازد.
در زمينه طراحي وب سايت مسائل و جنبه هاي گوناگوني بايد در نظر گرفته شود و به سبب پيشرفت روزافزون اينترنت و خلاقيت هاي فزاينده طراحان وب سايت ها، همواره بر اين موارد افزوده مي شود. اين امر موجب مي شود هر روز شاهد پديد آمدن وب سايت هايي با شکل و ايده جديد باشيم. اهميت و ظرافت در اين کار به جايي رسيده است که در حوزه روانشناسي نيز گرايشي در اين زمينه ايجاد شده و توجه گرافيست ها و هنرمندان به اثرات روانشناختي رنگ ها، وب سايت هاي مدرن و تاثيرگذاري را خلق کرده است.
يک طراح وب با در نظر گرفتن هدف سايت و مخاطبان آن و با استفـاده از المان هاي متناسب با رويکرد سايت و به کمک ذهن خلاق و ذوق هنري خود، طرحي خلق مي کند که ضمن ايجـاد يکپارچگي در تمامي صفحات وب سايت، نماهاي تکرار شونده و خسته کننده اي را در معرض ديد مخاطب قرار ندهد.
يکي از هنرمندانه ترين انواع طراحي هاي وب سايت که به خصوص در عصر وب ? مورد توجه قرار گرفته، "وب سايت هايي با پس زمينه بزرگ" است. اين ايده نو که به علت ارتقا سرعت اينترنت و افزايش دقت و رزولوشن نمايشگرها مورد توجه قرار گرفته، بيشتر در وب سايت هاي شخصي، گالري تصاوير، وب سايت هاي تخصصي و داراي موضوع خاص، سايت هاي تبليغاتي، سايت هاي معرفي کننده هتل ها و اماکن توريستي و... قابل مشاهده است. هدف اصلي در طراحي اين وب سايت ها ايجاد يک تاثير خيره کننده و مفهومي بر مخاطب است.
يکي از عواملي که موجب محبوبيت اين نوع طراحي در چند سال اخير شده، دميدن روح به وب سايت هاي خشک و کسل کننده نسل قديم بود به طوري که با ورود به اين وب سايت ها يک احساس خوشايند به بيننده دست مي دهد. اين سايت ها در بيشتر موارد با استفاده از هنر انيميشن سازي جذاب تر طراحی و پوياتر مي شوند که اوج آن را در وب سايت هاي مجهز به Full Flash Template نيز مي توان مشاهده کرد. ترکيب گرافيک مناسب و فايل هاي متحرک زيبايي سايت هاي ياد شده را دو چندان کرده است.
پيش از آنکه به چنين نکاتي بپردازيد بد نيست که به چند مسئله مهم و اساسي در زمان طراحي يک وب سايت مدرن و پيشرفته توجه کنيد.
نکته اول آنکه چه نوع وب سايتي مدنظر شماست؟ وب سايت شما مي تواند به صورت يک بروشور طراحي شود که حاوي اطلاعات مختصري از نوع خدمات و توليدات شماست. همچنين يک وب سايت مي تواند تفريحي باشد که بينندگان خاص خود را در بخش سرگرمي دارد و معرف شما نيز است يا يک وب سايت تجارت الکترونيکي که هدف آن ايجاد بازاري در دنياي مجازي به همراه يک معرفي کامل از شرکت شماست.
ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : maryam webdesign25 بازدید : 121
تفاوت اينترنت و شبکه جهاني وب چيست؟
از زماني که اينترنت در حد نيروي برق همه گير شده، عبارات « اينترنت » و « شبکه جهاني وب » متدوالا و به اشتباه به جاي يکديگر استفاده شده اند. اين روزها بارها عبارات « جست و جوي اينترنت » و « جست و جوي وب » را به کار مي بريم و يا اين عبارات را از افراد پيرامون خود مي شنويم. در حالي که اين دو مساله کاملا با هم متفاوت هستند.
در اين مقاله از ديفوراف، تلاش ما اين است که اين اشتباه را يک بار و براي هميشه رفع کنيم. از يک سو، اينترنت را مي توان سخت افزار نت دانست – زيربنايي که از پروتوکلي خاص استفاده مي کند و باعث مي شود همه چيز در کنار هم با هماهنگي کامل کار کنند. اما از سويي ديگر شبکه جهاني وب همان نرم افزار وب است – شبکه اي عظيم از نرم افزار ها و پروتوکل ها که ارتباط دهنده همه اجزا با يکديگر است.
در واقع وب همانطور که از اسمش پيداست مثل يک تار عنکبوت عظيم است که اجزاي تشکيل دهنده آن، ميليارد ها ميليارد کاربر در سراسر جهان هستند که از اين شبکه جهاني استفاده مي کنند.
اينترنت در برابر شبکه جهاني وب:
بنابراين شبکه اي که ما آن را با عنوان اينترنت مي شناسيم را متشکل از دو لايه تصور کنيد. لايه اي مستحکم را متصور شويد که از سيم ها، سرور ها، روتر ها، سوييچ ها، کامپيوتر ها و هر آنچه که به صورت فيزيکي شبکه اي در سر تا سر جهان ايجاد کرده تشکيل شده است. اين همان چيزي است که به آن « اينترنت » مي گوييم.
اينترنت چگونه طراحي شده:
در يک توضيح مختصر و کوتاه، اينترنت در ابتدا زيرساختي بود که پايه هاي آن از سال ???? و در نتيجه تلاش هاي آژانس پروژه هاي تحقيقاتي پيشرفته وزارت دفاع آمريکا براي ايجاد يک شبکه ارتباطي قوي در رابطه با جنگ ايجاد شد که اين شبکه ARPAnet نام گرفت که مخفف Advanced Research Projects Agency Network بود.
اين شبکه فيزيکي، مراکز تحقيقاتي که بر روي پروژه هاي امنيتي تمرکز داشتند را با بخش هاي دولتي و نظامي مرتبط ساخت. در واقع اين آرپانت بود که در طول سالها تغيير و تحول به چيزي تبديل شد که ما امروز آن را « اينترنت » مي خوانيم.
اما شبکه جهاني وب، در واقع مغز همه چيز است که همه سخت افزار و زيربناي اينترنت را به شکل نرم افزار ها وارد سرور ها و کامپيوتر ها مي کند. اين مجموعه شامل مرورگر هاي اينترنت و نرم افزار هايي مي شود که از طريق پروتوکل TCP/IP ( يکي از مهم ترين پروتوکل هاي استفاده شده در شبکه هاي کامپيوتري ) با هم در ارتباط هستند.
امروزه ديگر فقط صحبت از کامپيوتر ها و مرورگر هاي وب در ميان نيست. مردم ديگر به صورت فيزيکي و با استفاده از دستگاه هايي چون تبلت ها، اسمارت فون ها، موزيک ديوايس ها، کنسول هاي بازي، تلويزيون ها و حتي وسايلي مثل قاب عکس ها و دوربين هاي ديجيتال به اينترنت متصل مي شوند. تقريبا تمام دستگاه ها به اينترنت وصل مي شوند و به کاربران خود اين امکان را مي دهند تا به راحتي به سازه عظيم اينترنت دسترسي يابند.
اما همه اين موراد چطور کار مي کنند؟ فرض کنيد شما در اتاق خود نشسته ايد و با لپ تاپ يا تبلت خود به اينترنت متصل مي شويد. اولين کاري که مي کنيد اين است که در مرورگر، آدرس www.d4fteam.com را تايپ مي کنيد و سپس Enter را مي زنيد ( اولين کارتان همين است… مگر نه؟ :) ) همين که اينتر را مي زنيد، اطلاعات مربوطه را از شبکه جهاني وب – که همان بخش نرم افزاري شبکه اطلاعات و ارتباطات است – درخواست مي کنيد. پس از فشار دادن کليد اينتر، مسير ترافيک به اين شکل خواهد بود:
درخواست شما از کامپيوترتان به روتر و به ISP شما فرستاده مي شود. ترافيک اين URL بر اساس پيکربندي سرور هاي DNS منطقه شما هدايت مي شود. هر دامين ثبت شده اي در سرور هاي DNS سراسر دنيا ليست شده است – تمام هدف اين سرورها فراهم آوردن IP آدرس هايي است که اطلاعات ( صفحات وب ) در آن ذخيره شده اند. سرور DNS در پاسخ، اطلاعات IP را ارسال مي کند. بنابراين حالا ISP مي داند که به کجا رجوع کند تا صفحات وب مورد نظر شما را پيدا کند.
ترافيک در ادامه مسير به شبکه هاي Network Service Provider يا همان NSP مي رسد. NSP در واقع شامل شبکه هايي مثل SprintNet، IBM، PSINet و… مي شود. اين شبکه ها، ستون فقرات شبکه هاي اينترنتي هستند. اگر مي توانستيد اطلاعات مورد نظرتان که در مسير اينترنت در جريان است را ببينيد، آنگاه مي ديديد که ترافيک ابتدا به نزديکترين NSP مي رسد و سپس از درگاه هاي Network Access Point يا NAP عبور مي کند که به ترافيک امکان مي دهد تا از يک NSP به NSP ديگر برود.
در نهايت درخواست شما به يک ريموت کامپيوتر – در اينجا وب سرور – مي رسد که وب سرور با ارسال صفحات وب مورد نظر به درخواست شما پاسخ مي دهد. سپس ترافيک از همان مسير بازمي گردد تا به کامپيوتر شما برسد. همه اين اتفاقات بسيار سريع و در يک چشم به هم زدن رخ مي دهند.
شبکه جهاني وب چگونه طراحي شده:
هر صفحه وبي که روي يک سرور ذخيره شده را يک « گره » تصور کنيد که مي تواند شامل اتصالاتي به گره هاي فراوان ديگر در اين شبکه بزرگ باشد. هر گره مي تواند يک بخش از هر نوع اطلاعاتي باشد – متن، تصوير و يا هر نوع اطلاعات ديگر – که به اينترنت متصل است. اين اتصلات داخلي بين گره ها است که شبکه جهاني وب را تشکيل مي دهد. در واقع اين شبکه اي از اتصالات است که مارپيچ مجازي اطلاعات را مي سازد – شبکه اي که با سرعتي بسيار فراتر از سرعت گسترش فيزيکي خود اينترنت، به گسترش و توسعه ادامه مي دهد.
نتيجه:
اين دو در کنار هم شبکه عظيمي را تشکيل مي دهند که دنياي ما را در بر گرفته و همه ما را طوري با هم مرتبط کرده که بدون اين شبکه مي توان گفت امکان اين ارتباط وجود نداشت. با اينکه دو بخش اساسي اين شبکه يکسان نيستند، اما هر کدام از اين دو نقش بسيار مهمي در تشکيل شبکه جهاني و عظيم فضاي مجازي بازي مي کنند.
ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : maryam webdesign25 بازدید : 139
اين کتاب براي کساني مفيد است که از طراحي سايت اطلاعي ندارند و مي خواهند تازه به جمع طراحان سايت ملحق شوند پس مسلما از ساده ترين نکات آغاز مي شود .
اين کتاب شما را با HTML و CSS آشنا ميکند و راه را براي ساخت يک وب سايت استاندارد به شما نشان مي دهد. ذکر اين نکته لازم است که ترجمه خط به خط کتاب ارائه نمي شود و چيزي که به عنوان
برداشت شخصي من يک طراح سايت (بهزاد علي بيگي) از کتاب مي باشد در قالب مقالات آموزشي براي شما بيان خواهد شد.
سعي مي کنم در هر مقاله حداکثر يک فصل از کتاب را آموزش دهم و مسلما با بازخوردي که از خوانندگان خواهم گرفت کيفيت کار و هم چنين وسعت کار را افزايش خواهم داد.
فصل اول:
Setting up Shop
اين فصل در واقع آماده کردن کامپيوتر براي کار، قبل از زدن اولين طرح شماست.
قبل از اين که وب سايت خودتان را بسازيد، مي بايست کامپيوتر خود را براي کار آماده نماييد که شامل برنامه هايي است که يا در سيستم شما موجود مي باشد و يا اين که مي بايست آن ها را نصب نماييد.
برنامه هاي زيادي در بازار موجود مي باشد ولي در ابتدا از برنامه هاي رايگان و قابل دسترس استفاده مي کنيم.
وسايل و برنامه هاي اصلي که شما نياز داريد:
چون اکثر کاربران ما درايران از ويندوز استفاده مي کنند پس ابزارهاي موجود در ويندوز را بررسي خواهيم کرد.
ابزارهاي اوليه در ويندوز:
1- اديت کردن متن : براي اديت کردن متن در ويندوز مي توانيد از Notepad استفاده نماييد. اين متن، همان صفح? وب است .
براي دسترسي به اين برنامه در محيط ويندوز مسير زير را طي کنيد:
Start > All Programs > Accessories > Notepad
2- ديدن خروجي فايل : براي ديدن کار خروجي مي بايست از مرورگر و يا browser استفاده کنيم. مرورگرهاي متفاوتي وجود دارد که بحث آنها بسيار مفصل است ولي در محيط ويندوز مرورگر
Inteet Explorer در دسترس است.
شما مي توانيد آن را در دسکتاپ خود و يا Quick Launch ويا فولدر برنامه ها و يا در منوي start پيدا کنيد.
3- براي فرستادن صفحه به محيط وب از دستور ftp استفاده خواهيم کرد که در ادامه به آن اشاره ميکنم.
ابزارهاي ديگر:
براي اديت کردن صفحات خود مي توانيد از برنامه NoteTab استفاده کرد .مزيت استفاده از آن اينست که مي توانيد تب هاي مختلفي را براي صفحات مختلف باز کنيد و بعد از بستن هم در حافظه ش مي ماند
همچنين مرورگرهاي گوناگوني وجود دارد که استفاده از آن ها را در کنار Inteet Explorer توصيه مي کنم. اما در اينجا از يکي از بهترين آنها را نام مي برم : firefox
اما همه عناصر که متن نيستند شما براي ويرايش عکس هم به برنامه هايي نياز داريد که مي توانيد از برنامه هاي زير استفاده کنيد:
Adobe photoshop
Adobe fireworks
Picasa
توصيه من استفاده از فتوشاپ است ، نگران نباشيد يادگيري آن براي کاربرد وب آسان است.
مرحله آخر - درست کردن مکاني است براي فايل هاي ساخته شده :
بعد از ساختن فايل هاي خود مديريت آنها بسيار مهم است و اين که در کجا فايل اصلي و در کجا تصاوير قرار گيرد و به همين ترتيب تمام عناصر وب سايت.
شما بايد يک فولدر بسازيد و تمام عناصر وب سايت خود را در آن قرار دهيد. فرض کنيد در دسکتاپ خود مي خواهيد يک وب سايت بسازيد.
سپس نام وب سايت را انتخاب نماييد .حالا يک فولدر داريد که فايل اصلي به همراه تصاوير و css ,html ,..... را داخل آن قرار مي دهيد.
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : maryam webdesign25 بازدید : 129
با قسمت نهم آموزش طراحي سايت از پايه در خدمتتون هستم و اميدوارم اين مقاله هم مانند مقاله هاي گذشته بازخورد هاي خوبي داشته باشد . در اين مقاله راجع به سي اس اس ( css) و نحوه استايل دهي به آن صحبت خواهم کرد .
براي اينکه بتوان به صفحه وب سايتمان ظاهري زيبا بدهيم مي بايست با css اين کار را انجام داده و يا به عبارتي به عناصر وب سايتمان سبک بدهيم.
Body{
Font-family: verdana;
}
فونت استفاده شده در اينجا verdana است و اگر درون تگ body قرار گيرد باعث مي شود که تمامي متن هاي مورد استفاده در سايت، از اين فونت استفاده کنند. حال اگر بخواهيم تگي در سايتمان با فونت ديگري نمايش يابد، به طريقي جداگانه به آن استايل مي دهيم که البته کمي جلوتر آن را توضيح خواهم داد.
در نظر بگيريد که کاربري از سايت شما ديدن کند و فونت verdana روي سيستم خود نصب نکرده باشد، حالا چه اتفاقي ميافتد؟
در اين حالت مرورگر خودش حدس مي زند و بهترين فونتي را که به فونت انتخاب شده شما نزديک است انتخاب مي کند. اما ما مي توانيم خودمان اين کار را انجام دهيم و آن را از حيطه حدس زدن مرورگر خارج نماييم. اين کار از طريق همان font-family انجام مي گيرد، به مثال زير توجه کنيد :
Body{
Font-family: verdana, Helvetica, Arial, San-serif ;
}
اين خط به مرورگرها اعلام مي کند که اگر فونت verdana بر روي سيستم کاربر نصب نبود و لود شدن اين فونت براي عناصر موجود در درون صفحه سايت موفقيت آميز نبود، از فونت Helvetica استفاده کن، اگر Helvetica نيز نصب نبود از Arial براي لود شدن متون صفحه استفاده کن، در غير اينصورت از يکي از فونت هاي San-serif که بر روي سيستم کاربر نصب است استفاده کن.
اين css را به فايل css خود اضافه کنيد و سپس آن را ذخيره نماييد، صفحه وب سايت را با مرورگر روي سيستم تان باز کنيد، خواهيد ديد که فونت هاي موجود در صفحه همگي verdana شده اند. مانند شکل زير:
design-web-91.jpg
فونت San-serif :
اين فونت از جمله فونت هايي است که براي مطالعه کردن و پرينت گرفتن بسيار مناسب مي باشد و خوانايي آن به دليل آنکه فونت آن( بدون لبه) ساده است و کلمات را با حداقل شکستگي در فونت نمايش مي دهد بسيار آسان است.
فونت serif يا لبه دار در پايين نمايش داده شده است :
design-web-93.jpg
اگرچه استفاده از اين فونت براي پرينت گرفتن بسيار مناسب است اما توجه داشته باشيد که گاهي اوقات براي وب سايت ها اين فونت پيشنهاد نمي شود چرا که اگر سايز فونت کوچک باشد نمي توان در سايز کوچک ظرافت فونت را به خوبي نمايش داد، پس اين فونت براي سايت هايي که سايز فونت آنها کوچک است توصيه نمي گردد.
مطلب آخر اينکه توجه کنيد که حتما بين دو کلمه san و serif حتما " - " را قرار دهيد.
سبک دهي به عناوين :
اولين عنصري که در سايت به آن استايل مي دهيم تيتر موجود در صفحه است که آن را با تگ h1 مشخص مي کنيم، حالا بياييد چند استايل به اين تگ مان اضافه کنيم.
h1 {
Font-family: " Trebuchet MS ", Arial, Helvetica, San-serif;
}
اين خط css بيان مي کند که تمامي عناوين صفحه Trebuchet MS مي شوند در حاليکه ساير متون صفحه verdana خواهند بود.
h2 {
Font-family: byekan, Arial, Sans-Serif;
}
تمامي تيتر هاي سايت و عناوين از خط فوق استايل خود را مي گيرند در حالي که ساير متون سايت فونت تگ body يعني tahoma را مي خوانند.
body {
Font-family: Tahoma,Serif,Sans-Serif;
}
همانطور که مي بينيد براي فونت Trebuchet MS از دبل کتيشن استفاده شد، اما براي ساير فونت ها استفاده نکرديم، به طور کلي اگر اسم فونت انتخابي مان تک کلمه اي باشد نيازي به استفاده از کتيشن نيست در غير اينصورت براي نام فونت هايي که دو يا سه کلمه اي هستند(مثل: "Times New Roman") حتما از کتيشن استفاده مي کنيم.
design-web-92.jpg
جهت مشخص شدن موضوع مثال ديگري نيز براي شما مي زنم، به عنوان مثال در سايت شرکت وب اسکالا تيتر هاي صفحه byekan است و سايز متون صفحه Tahoma .
توضيح : يکي از مشکلاتي که در وب فارسي با آن مواجه هستيم، محدوديت فونت است که معمولا به 3 نوع فونت ختم مي شود اما اخيرا" امکان درج انواع فونت ها در صفحه وجود دارد .
چند نکته :
اگر مرورگر خود را refresh کردين و تغييرات را مشاهده نکردين، ابتدا بررسي کنيد و ببينيد که آيا پس از اعمال تغييرات CSS خود را ذخيره کرده ايد يا نه. اگر اين مورد درست بود بررسي کنيد و ببينيد که آيا لينک CSS خود را درست داده ايد و اسم آن را درست تايپ کرده ايد، آخرين مورد نيز ممکن است به دليل cache کردن مرورگرتان باشد، که در اين صورت براي مرورگر IE از دکمه R + Ctrl استفاده مي نماييد و براي مرورگر فاير فاکس Ctrl + F5 کمک مي گيريد، تا cache مرورگر خود را پاک نماييد.
حالا بياييد کمي ظاهر سايت را عوض کنيم، در اين قسمت ويژگي هاي بيشتري به تگ body مان مي افزاييم و ظاهر منو را نيز تغيير مي دهيم، CSS زير را به فايل CSS خود اضافه کنيد.
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
h1{
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
li{
font-size: small;
}
h2{
color: blue;
font-size: medium;
font-weight: normal;
}
p{
font-size: small;
color: navy;
}
حالا پس از ذخيره کردن فايل css تان مرورگر خود را يکبار ديگر refresh نماييد و تصويري مشابه با تصوير زير ملاحظه نماييد.
design-web-94.jpg
حالا توضيح خصوصيات اضافه شده در بالا:
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
خصوصيت بعدي line-height است که با افزايش دادن مقدار آن مي توان فواصل بين خطوط متن را بيشتر کرد و خصوصيت padding نيز براي ايحاد فاصله ميان تگ مورد نظر و عنصر خارجي آن که درون تگ body قرار دارد مي باشد. اين فاصله را مي توان براي هر چهار جهت بالا، پايين، چپ و راست و با يک يا دو و يا تنها سه جهت آن قرار داد. انشالله در فصل بعدي در مورد padding به طور کامل توضيح خواهم داد.
تنها نکته باقي مانده مقدار دهي به padding است که به صورت عددي در مبناي پيکسل استفاده مي کنيم، مانند px15 و اين مقدار باعث ايجاد فاصله براي body مي شود که مطالب سايت از هر چهار جهت به اندازه px15 فاصله يابد. همانطور که قبلا نيز اشاره کرديم، واحد پيکسل براي سايز دهي به تصاوير نيز به کار مي رود، اصولا پيکسل کوچکترين واحد موجود در صفحه نمايش است.
همانطور که گفتيم به متون سايت نيز مي توان هم رنگ و هم سايز داد، همانطور که در تصوير فوق ديديد رنگ استفاده شده در اينجا ، آبي است.
p{
font-size: small;
color: navy;
}
براي منو نيز سايز فونت را small در نظر گرفتيم که با توجه به نوع مرورگر سايز پيش فرض small آن ، در مرورگرهاي مختلف تفاوت دارد، محدوده مقدار دهي آن small, medium, large, x-large و xx-large است.
براي تگ h1 نيز سبک جديدي از استايل دهي را قرار مي دهيم، چون اين تگ براي تيتر اصلي صفحه استفاده مي شود، سايز آن را بسيار بزرگ يا همان x-large انتخاب کرديم.
h1{
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
و براي تگ h2 سايز فونت را متوسط برگزيديم.
و تگ p تنها سايز و رنگ گرفته است .
با اين مثال ها سبک دهي به عناصر را آغاز کرديم ولي تازه شروع کار است .
ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : maryam webdesign25 بازدید : 220
آموزش قرار دادن يک تصوير در زمينه صفحه
براي قرار دادن يک تصوير به عنوان زمينه صفحه بايد از تگ BODY استفاده کرد.وقتي که تگ BODY را پيدا کرديد ممکن است به صورت ساده باشد يا با فرمانهايي که به آن اضافه شده است. مانند زير:
<body bgcolor="#66ccff" text="#000000">
کاري که شما بايد انجام دهيد، اضافه کردن يک شناسه به تگ BODY است. بنابراين يک فاصله بعد از آخرين فرمان بگذاريد و سپس اين فرمان را وارد کنيد:
background=" "
اکنون تگ BODY شما بايد به اين صورت باشد (اگر فرمانهاي ديگري به آن اضافه نکرده باشيد):
<body background=" ">
حالا بايد آدرس عکس را بين دو دابل کوت قرار دهيم. براي اين کار دو راه وجود دارد:
براي اين کار اگر صفحه و عکس در يک مسير هستند مي توانيم فقط نام کامل عکس با پسوند آنرا بنويسيم. مثلاً:
<body background="image.gif">
اگر از قرار داشتن صفحه و عکس در يک مسير مطمئن نيستيد يا عکس و صفحه در يک مسير نيستند مي توانيد از آدرس کامل عکس استفاده کنيد.
<body background="http://www.example.com/image.gif">
تصاوير براي زمينه بايد با يکي از دو فرمت GIF يا JPG باشند. اگر عکس به اين صورت نبود بايد آن را با برنامه اي مثل Paint Shop Pro يا Photoshop به يکي از اين فرمتها تبديل کرد.
براي مثال فرض کنيد يک عکس با نام background.jpg داريم که در اين مسير قرار دارد: http://www.mysite.com/img . حال اگر بخواهيم صفحه اي را در پوشه اي به غير از پوشه img در اين سايت طراحي کنيم بايد از آدرس کامل عکس يعني http:www.mysite.com/img/background.jpg استفاده کنيم. و تگ BODY ما به اين صورت در مي آيد:
<body background="http:www.mysite.com/img/background.jpg">
ما براي تعيين تصوير زمينه اين صفحه قبلاً از اين تگ استفاده مي کرده ايم:
<body background="http://www.neopersia.org/images/index.jpg">
اما اگر بخواهيم صفحه را به پوشه img منتقل کرده يا صفحه جديدي را در پوشه img طراحي کنيم مي توانيم از نام عکس يعني: background.jpg استفاده کنيم و تگ BODY ما به اين صورت در مي آيد:
<body background="background.jpg">
طراحی وب سایت...ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : maryam webdesign25 بازدید : 169
به کار گیری html و css در طراحی وب سایت
در آنلاینر، شما سرفصل های آموزش طراحی وب سایت html و آموزش css را به عنوان دو بخش اساسی در سلسله مقاله های آموزشی طراحی سایت، مشاهده خواهید کرد.
در این مقاله ی آموزشی نقش html و css را در طراحی صفحات وب توضیح خواهیم داد.
نقش html در طراحی سایت؛ مشخص کردن اجزای صفحات وب
این یک اشتباه رایج است که گفته می شود با html، صفحات سایت طراحی می شوند! اما چرا این جمله اشتباه است؟ به خاطر اینکه استفاده از html به تنهایی نمی توان صفحه ای را ایجاد نمود که در نظر کاربر، یک صفحه ی سایت مناسب باشد. بلکه تا هنگامی که کدهای ایجاد شده به وسیله ی طراحی وب سایت html، حداقل با css سبک دهی نشوند، نمی توان صفحات وب با کیفیت و کارآیی مناسب را ایجاد کرد. در حقیقت html به طراحی وب سایت کمک می کند.
نقش کلیدی html، نشانه گذاری (mark up)، عناصر مختلف صفحات وب می باشد. مانند تعیین بخش هدر (header)، تیترها، منوها، نظرات، دیدگاه ها، سایدبار (sidebar)، فوتر (footer) و …
:
نقش css در طراحی وب سایت ؛ سبک دهی و استایل دهی به اجزای صفحات وب
بخش های مختلف که توسط html، نشانه گذاری شده اند، توسط css سبک دهی می شوند. مثلا برای هر کدام از عناصر نشانه گذاری شده توسط اچ تی ام ال، css تعیین می کند: چه رنگی داشته باشد، تصویر پس زمینه و یا رنگ پس زمینه ی آن چه باشد، چه عرضی داشته باشد، چه ارتفاعی داشته باشد، در چه موقعیتی قرار بگیرد و …
:
css با ظاهر و چیدمان صفحات وب سروکار دارد.
استفاده از html، به صورت معناگرا
یکی از اصولی که در طراحی وب سایت به طور جدی باید مورد توجه قرار بگیرد، استفاده ی مفهومی از اچ تی ام ال است. یعنی باید هر عنصر را طوری ایجاد کرد که:
نحوه ی نشانه گذاری هر عنصر، نشان دهنده ی محتوای آن باشد.
نحوه ی نشانه گذاری هر عنصر، بر اساس سبک دهی آن نباشد (نشانه گذاری ها، presentational نباشند.)
برای درک دقیق آنچه گفته شد، به مثال زیر توجه کننید
در مثال فوق، با استفاده از صفت های id، نام هر بخش به صورت معناگرا مشخص شده است: header, sidebar, footer, content بنابر این کاربرد کدهای html بصورت معناگرا کاملا در مثال فوق مشاهده می شود.
در کدهای بالا، اسامی انتخاب شده به دلایل زیر اشتباه و نامناسب هستند:.
نام های right و left بهیچ وجه مناسب نیستند. چرا که چپ و یا راست بودن عناصر با css تنظیم می شوند. حالا فرض کنید پس از گذشت مدتی بخواهیم جای عناصری که با نام های right و left مشخص کرده ایم را جابجا کنیم. چه اتفاقی می افتد؟ عنصری که نام آن left است، در سمت راست قرار میگیرد و عنصری که نام آن right است در سمت چپ قرار میگیرد!
نام red-box هم مناسب نیست؛ چرا که مانند نام های right و left بر اساس سبکدهی (presentational) نامگذاری شده است. در حالی که ممکن است بخواهیم بعدا رنگ آن را به آبی، زرد و یا … تغییر بدهیم. واضح است که جالب نیست نام قسمتی قرمز باشد، در حالی که رنگ آن سبز است!
بنابراین همیشه توجه داشته باشید که هنگام استفاده از کدهای طراحی وب سایت html، نامگذاری ها را به صورت معناگرا انجام بدهید.
ما را در سایت طراحی وب سایت دنبال می کنید
برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : maryam webdesign25 بازدید : 165