طراحی وب سایت

 به هر تعداد که خواسته باشيد مي توانيد دسته اضافه کرده و داخل هر دسته پيوندهاي مختلفي را قرار دهيد. در ادامه با دسته بندي پيوندهاي وردپرس با توضيحات تکميلي بيشتر آشنا خواهيد شد.

 اصول نوشتن صفحات HTML

 امروز تصميم به طراحی وب سايت گرفتم ولي نه به عنوان نمونه کار بلکه براي آموزش ، من اين کار رو از الف شروع مي کنم و همراه طراحي به توضيحات در مورد نکات مهم که تو اين تالار مشکل عمده افراد هست مي پردازم ، اين آموزش براي افرادي مفيد خواهد بودکه دوست دارند طراحی وب سايت با استفاده از استانداردهاي جهاني انجام بدهند ، به دليل کمي وقت اضافه من سعي دارم اين وب سايت رو در پروسه زماني 1 هفته اي براي دوستان عزيز کامل کنم ودر اين اين هروز يک قسمت از اين طرح رو طراحي و کد نويسي مي کنيم ، پيشنهادم براي کساني که تمايل دارند به خوبي ياد بگيرند هر روز همراه با من شروع به طراحي مجدد اين سايت کنند در اين آموزش فرض بر آن است که کاربران عزيز مختصر در مورد html,css آشنايي دارند کد نويسي در اين آموزش بسيار ساده و قابل درک خواهد بود.

    شروع کار:
    بهتره قبل از شروع کردن به کد نويسي با استفاده از چشم خود به طرح هاي مختلف به کارهاي هم موضوع با کار ما چه خارج و چه داخل ايران توجه کنيم ، رنگ بندي ها رو ببينيم ، نحوه جايگذاري المنت ها ، جزئيات اضافه شده و هرآن چه که به ذهنمان خطور مي کند.
    خوب فکر کنم بعد از اين کار يک ذهنيتي از چيزي که مي خواهيم تو ذهنمون پديدار شده خوب توسط فتوشاپ و يا هر نرم افزار گرافيکي که به آن مسلط هستيد شروع به ترسيم ذهنيت خودتان بکنيد.
    من طراحی وب سايت رو که فايلش رو در پايين ضميمه کردم با استفاده از خلاقيت ذهني خودم طراحي کردم و برش هاي لازم نيز داده شده لازم به ذکر هست که من توانايي طراحي با فتوشاپ رو دارم اين طرح رو با فتوشاپ به صورت لايه لايه پياده سازي کردم شايد بعضي از دوستان به برنامه هاي ديگري مسلط باشند.
    خوب پس اولين کار طراحي در محيط گرافيکي و دومين کار برش تصاوير..
    ما بايد طوري برش دهيم که ميزان استفاده عکس رو در صفحه وب کاهش دهيم و بيشتر از رنگ در صفحه وب استفاده کنيم.فايل psd زير را دانلود کنيد و به برش ها و نحوه مرتب کردن لايه ها دقت کنيد.ما براي طراحی وب سايت  فقط به قسمت هاي برش داده شده نياز خواهيم داشت.
    نکات ضروري :
    1- تکه هاي برش داده شده را با پسوند png 24 ذخيره مي کنيم.
    2- اندازه اي که من در فتوشاپ در نظر گرفتم 1000px در عرض و براي طول هم کمي بيشتر چون در دفرم شدن تاثيري ندارد 1500px در نظر گرفته ام.
    3- در زمان طراحي شايد ايده هاي جديدي داشته باشيم که در پست هاي آينده آن ها را پياده سازي مي کنيم.
    4- ابزار برش در فتوشاپ Slice Tool هست.
    5- براي ذخيره قسمت برش داده نيز مي توانيد از کليد ميانبر alt+ctrl+shift+S استفاده کنيد.


    لينک اصلاح شده براي 4shared
    لينک اصلاح شده دوم

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

امروزه شرکت هايي در فعاليت هاي تجاري خود موفق ترند که تبليغات آنها به حد کافي

بين مردم شناخته شده تر باشند.

 يک وب سايت با طراحی وب سايت مناسب ، مي تواند نقش چشمگيري در تبليغات يک شرکت داشته باشد و فعاليت هاي آن را به جهانيان نمايش دهد.

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

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

 ما به شما راه بهتري پيشنهاد ميکنيم ، سايت شما را  با متدهاي روز دنيا طراحی وب سايت خواهيم کرد که با بهينه سازي موتور هاي جستجو  (سئو)  , گوگل و ياهو  به طور رايگان براي سايت شما بازاريابي کرده و بازديد کنندگان  مربوط به حرفه  خود را به سايتتان سرازير کنند.

امروزه داشتن وب سايت براي شرکتها، سازمان ها، موسسات و ... ديگر يک نياز نيست بلکه ضرورت است در عصر ارتباطات، اينترنت و صفحات وب از جمله مهمترين ابزار ارتباطي انسان در هزاره سوم به شمار مي آيند. گستردگي و سرعت دسترسي به اطلاعات يک وب سايت، هزينه مناسب در مقايسه با امکانات و خدماتي که در اختيار کاربران خود قرار مي دهد و همچنين قابليت به روزرساني و مديريت آن از جمله مهمترين ويژگيهاي يک وب سايت ميباشد که امروزه وب را به يکي از مهمترين و موثرترين ابزار ارتباطي و اطلاع رساني تبديل ساخته است.
طراحی وب سايت ، طراحي قالب گرافيکي (اسکين) سايت، طراحي انواع اوراق اداري و تبليغاتي از جمله فعاليت ها و خدمات سايت وب کاران مي باشد.

براي شما سايتي طراحي خواهيم کرد که در نتايج موتورهاي جستجو ، رتبه هاي بالايي بدست آورد.

 طراحی وب سایت با CSS

طراحی وب سایت  با CSS به واقع جداسازی محتوا و سبک است. محتوا باید در نسخهء متنی HTML و CSS باید مراقب باشد که HTML در صفحه چگونه متن را به نمایش می گذارد. با این حال، اکثر طراحی وب سایت وب سایت به صورت مناسب اقدام به جدا کردن محتوا و سبک نمی کنند. HTML و CSS از یکدیگر جدا هستند. اما اگر شما تغییراتی در نسخهء متنی HTML ایجاد نمایید، یک ظاهر طراحی شدهء از هم جدا ایجاد می شود. زیرا CSS برای انجام کار متکی بر عناصر موجود در متن HTML می باشد.

در حال حاضر این موضوع برای کسی مهم نیست که ترکیب مطالب چند صفحهء ثابت کنار هم قرار نیست خیلی تغییری در  طراحی وب سایت  ایجاد کند؛ که با استفاده از CSSدر طراحی وب سایت از منافع آن بهره مند شده و از وجود دسترسی های ساده اطمینان حاصل نمایید.
اما اگر با یک سایتی که به درستی مدیریت شده و به طور مرتب مطالب آن به روز می شود و با وجود تعداد زیادی محتوای دینامیک(پویا)، بسیار مهم است که بتوان بدون نیاز به ویرایش HTML در هر صفحه و بدون پخش شدن مطالبی که تا به حال جمع آوری شده، کار انجام داد.پاسخ این کار CSS می باشد. اما تنها در صورتی می توان در طراحی سایت از CSS بهره مند شد که مطالب و محتوا به طور کامل از سبک جدا شده باشد.
برای داشتن  طراحی وب سایت  که به طور کامل قابل تغییر با CSS باشد، بسیار ضروری است که بدانیم که در هر نسخه متنی HTML در واقع 2 عنصر جداگانه وجود دارد. یکی محتوا است – که شامل متن و تصاویری است که افراد در وب سایت آنها را دیده و مطالعه می کنند؛ و دیگری ساختار صفحه است – DIVs ویا Table که عناصر و ویژگی های مختلف در صفحه را تعریف می کند.
برای ایجاد موفقیت در طراحی وب سایت با CSS، عناصر ساختاری صفحات HTML نیاز به برنامه ریزی و اجرا و پذیرش CSS برای ایجاد تغییرات در صفحه صرف نظر از محتوای ان دارد. به عنوان مثال اکثر صفحات در طراحی سایت باید دارای Header و یا عنوان، ستون سمت چپ، فضای اصلی و ستون سمت راست و همچنین پاورقی باشد.
اینها عناصر ساختاری صفحه در طراحی سایت می باشد. در هر یک از این عناصر ساختاری باید محتوای صفحه قرار گیرد. به طور مثال لوگو(آرم تجاری شرکت) در عنوان صفحه، منو در ستون سمت چپ صفحه و متن اصلی در محوطهء اصلی صفحه قرار می گیرد.
در این روش با در نظر گرفتن ساختار در هر صفحه، CSS پس از آن می تواند بدون نگرانی در مورد محتوا و مطالب بخشها و محل های هدفمندی برای هر صفحه ایجاد نماید. اگر فضای متن در ستون سمت چپ صفحه 10 پیکسل باشد و فضای اصلی صفحه 12 باشد، در CSS می توانید مطالب و چیزهایی که تمایل به انجام آن دارید را در این فضا قرار دهید. سمت چپ سایز فونت 10 و فضای اصلی سایز فونت می تواند 12 باشد.
این بدان معنی است که تا زمانی که   طراحی وب سایت  با همان پایهء عناصر ساختاری باشد می توان کاملاً با CSS تبدیل کرد – برای مثال ستون سمت چپ را ساخته و تصویر پیش زمینه عنوان و یا صفحهء اصلی را اضافه نموده و ادامه دهید. اما شناخت نسخهء متنی  که شامل ساختار و محتوا هستند مرحلهء اول طراحی سایت با CSS در این کار می باشد.
برای تعمیم بیشتر، نیاز به یک ساختار صفحه ای است که تقریباً به اندازهء کافی انعطاف پذیر بوده به طوری که CSS بتواند عملیاتی که لازم و ضروری و موثر است را انجام داده و این عمل بدون هیچ گونه نگرانی در مورد محتوا در هر بخش از طراحی سایت و صفحات برگزار شود.
برای انجام این کار در مرحلهء بعدی ساختار بنیادی باید یک تقسیم بندی دیگر داشته باشید.table عنوان برای مثال باید به سه table داخلی تقسیم شود: table سمت چپ – table سمت راست و table اصلی؛ تقریباً تمام ترکیبات ممکن که شما نیاز دارید تا با CSS هر سبکی که در طراحی سایت می خواهید به نمایش بگذارید. تنها کاری که باید انجام دهید این است که محتوا و مطالب را در منطقهء  طراحی وب سایت  مربوطه قرار دهید.

بهره گیری از منافع جداسازی این سه بخش که تمامی استاندارد ها مانند تبدیل پس زمینهء محو به رنگهای جامد، تصویر پس زمینه برای اضافه کردن لبه های گرد(rounded coers)، تغییرات در داخل و خارج تصاویر فقط با CSS انجام می شود. Table داخلی می تواند شناور بوده و می تواند یک تصویر را بر روی دیگری قرار دهد.
اگر این روش در ساختار مناطق دیگر در html استفاده شود، صفحه ای را خواهید داشت که صفحه بندی آن به طور کامل توسط CSS  طراحی وب سایت  شده و به طور کامل از محتوای صفحه مستقل و غیر وابسته خواهد بود.