اصول طراحی وب سایت

آشنایی با اصول , قوانین و پیش نیازهای طراحی وب سایت


Background – خلاصه نویسی دستورات CSS

امیر سروری ۲ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت شنبه, ۲۱ام خرداد , ۱۳۹۰ 8021 بازدید

خلاصه نویسی دستورات CSS – Background


background properties – خصوصیات پس زمینه

element { 

  background-color: color || #hex || (rgb / % || 0-255);

  background-image:url(URI);

  background-repeat: repeat || repeat-x || repeat-y || no-repeat;

  background-position: X Y || (top||bottom||center) (left||right||center);

  background-attachment: scroll || fixed;

}

Background – خلاصه نویسی دستورات CSS

Font – خلاصه نویسی دستورات CSS

امیر سروری ۲ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت چهارشنبه, ۱۸ام خرداد , ۱۳۹۰ 7962 بازدید

CSS Shorthand چیست ؟

CSS Shorthand یک مجموعه از تکنیک و دستورات است که به منظور خلاصه نویسی دستورات CSS مورد استفاده قرا میگیرد .

خلاصه نویسی دستورات CSS میتواند به ما کمک کند تا :

  • کنترل بیشتری بر روی اجزاء یک صفحه وب سایت داشته باشیم
  • یک فایل CSS تمیز و قابل خواندن داشته باشیم
  • حجم فایل CSS وب سایت کاهش یابد

این مطالب به صورت یک مجموعه ارائه خواهد شد و در مطالب بعدی با خلاصه نویسی دستورات برای خصوصیات دیگر ( Background , Border , Margin and Padding , Outline , List-style ) آشنا خواهیم شد .

Font – خلاصه نویسی دستورات CSS

آشنایی با CSS Positioning

امیر سروری ۲۴ دیدگاه CSS , اصول طراحی وب سایت چهارشنبه, ۴ام خرداد , ۱۳۹۰ 23047 بازدید

CSS position چیست؟

Positioning این امکان را به شما خواهد داد تا موقعیت یک عنصر را در چینش صفحه وب سایت انتخاب کنید . این خصوصیت به شما امکان خواهد داد یک عنصر را بر روی عناصر دیگر قرار دهید و یا تعیین کنید چه اتفاقی رخ دهد وقتی محتوای یک عنصر بسیار بزرگ باشد .
با تعیین عناصر top , right , bottom , left میتوانید موقعیت یک عنصر در صفحه را تعیین کنید . تعیین این مقادیر به تنهایی کار ساز نخواهند بود و باید نوع این تعیین موقعیت نیز مشخص شود .

تعیین موقعیت عناصر در صفحه ( CSS Positioning ) دارای چهار مقدار و روش ( static , absolute , relative , fixed ) متفاوت است که در زیر به توضیح این روشها و نحوه استفاده از آنها خواهیم پرداخت .

آشنایی با CSS Positioning

آشنایی با CSS Float

امیر سروری ۱۲ دیدگاه CSS , اصول طراحی وب سایت پنج شنبه, ۲۹ام اردیبهشت , ۱۳۹۰ 16827 بازدید

CSS float چیست ؟

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

آشنایی با CSS Float

آشنایی با Display , Visibility در CSS

امیر سروری ۱۲ دیدگاه CSS , HTML , اصول طراحی وب سایت جمعه, ۱۶ام اردیبهشت , ۱۳۹۰ 17721 بازدید

توانایی Display مشخص کننده نحوه نمایش یک عنصر در صفحه است و توانایی Visibility مشخص کننده قابل مشاهده بودن یا مخفی بودن یک عنصر است .

مخفی نمودن عناصر به وسیله CSS با استفاده از display:none , visibility:hidden

برای مخفی نمودن یک عنصر با استفاده از CSS میتوانید از دو توانایی display , visibility استفاده نمائید که هر یک دارای خصوصیات متفاوتی هستند.
با تعیین خصوصیت و توانایی display:none و یا visibility:hidden شما میتوانید یک عنصر را مخفی کنید اما نتایج متفاوت خواهند بود .

آشنایی با Display , Visibility در CSS

گزینشگرهای تو در تو , گزینشگرهای گروهی در CSS

امیر سروری ۵ دیدگاه CSS , اصول طراحی وب سایت جمعه, ۹ام اردیبهشت , ۱۳۹۰ 9394 بازدید

گزینشگرهای گروهی ( CSS Grouping Selectors )

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

برای بهینه نمودن کدهای CSS از تکنیک گزینشگرهای گروهی ( CSS Grouping Selectors ) برای افزایش کنترل ، کاهش حجم کدها و سند CSS استفاده میشود .

گزینشگرهای تو در تو , گزینشگرهای گروهی در CSS

آشنایی با مفهوم Margin , Padding , Border در CSS

امیر سروری ۱۷ دیدگاه CSS , اصول طراحی وب سایت شنبه, ۲۷ام فروردین , ۱۳۹۰ 24760 بازدید

تمامی عناصر HTML را میتوان به صورت یک چهار ضلعی یا جعبه ( Box ) در نظر گرفت . برای ایجاد ساختار مناسب در طراحی یک وب سایت این Box ها در کنار یکدیگر قرار خواهند گرفت . مفهوم Box Model در CSS به بررسی خصوصیات و توانایی های این اجزاء ( Box ) می پردازد .

مفهوم یک Box در CSS نشان دهنده محیط اطراف یک عنصر HTML است که دارای خصوصیات Margin , Padding ,Border و محتوا یا Content است .
مفهوم Box Model این توانایی را به ما میدهد تا فاصله محتویات ( Content ) تا خط محیطی ( Border ) را تعیین کنیم ( Padding ) ، ضخامت خط مرز ( Border ) را تعیین کنیم و یا فاصله خارجی یک عنصر HTML را با دیگر عناصر تعیین کنیم ( Margin ) میتوانید در طرح زیر این مفهوم را دقیقتر درک کنید .

آشنایی با مفهوم Margin , Padding , Border در CSS

۱۰ تگ HTML که باید بیشتر در مورد آنها بدانید

امیر سروری ۶ دیدگاه HTML , استاندارد وب سایت , اصول طراحی وب سایت سه شنبه, ۱۲ام بهمن , ۱۳۸۹ 16887 بازدید

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

۱۰ تگ HTML که باید بیشتر در مورد آنها بدانید

افزایش سرعت , کاهش مصرف پهنای باند – CSS Sprite

امیر سروری ۲۷ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت , بهینه سازی وب سایت شنبه, ۲ام بهمن , ۱۳۸۹ 26395 بازدید

کاربران یک وب سایت مهمترین هدف از ایجاد و راه اندازی یک وب سایت هستند ،بنابر این طراحی وب سایت با این هدف که تمامی کاربران بتوانند به راحتی از وب سایت استفاده کنند همیشه باید مدنظر یک طراح وب سایت قرار گیرد.سرعت بارگذاری صفحات وب یکی از مهمترین نکاتی است که باید برای راحتی یک بازدید کننده در نظر گرفته شود ، به خصوص در کشورهایی که تعداد بسیار زیادی از مشترکان اینترنت هنوز از سیستم Dial Up برای اتصال به اینترنت استفاده می کنند و دارای محدودیت سرعت هستند.

تصاویر مورد استفاده در طراحی وب سایت ، نحوه استفاده از آنها و فرمت تصاویر می توانند نقش تعیین کننده ای در زمان بارگزاری صفحات وب سایت داشته باشند ، بنابراین بهینه سازی تصاویر و استفاده از تکنیکهای CSS برای کاهش استفاده از تصاویر در صفحات وب می تواند به سریعتر شدن وب سایت کمک کند.در این رابطه می توانید مطلب زیر را نیز مطالعه کنید .
افزایش سرعت , کاهش مصرف پهنای باند – CSS Sprite

استفاده از شبکه – Grid – و مفهوم چینش – Align

امیر سروری ۱۳ دیدگاه استاندارد وب سایت , اصول طراحی وب سایت یکشنبه, ۲۶ام دی , ۱۳۸۹ 23042 بازدید

در این نوشته سعی خواهیم کرد با مفهوم Grid یا شبکه در طراحی وب سایت آشنا شویم و به اهمیت آن در چینش محتوای وب سایت ( Web Design Alignment ) بپردازیم .

تعادل ( Balance )

یکی از مهم ترین اصول در طراحی ، وجود تعادل ( Balance ) است . بالانس ، تعادل ، توزیع متناسب اجزاء سنگین و سبک در یک صفحه است . منظور از سنگینی و سبکی در اینجا ماهیت سنگین و سبک اجزاء هستند به طوری که اجزاء بزرگتر و تیره تر بسیار سنگین تر و اجزاء کوچکتر و روشن تر سبکتر به نظر می رسند. قانون تعادل به ما نشان میدهد چگونه یک صفحه همراه با تعادل را داشته باشیم .

یکی از ساده ترین و اصولی ترین روشها برای ایجاد تعادل در طراحی استفاده از شبکه ( Grid ) برای ایجاد یک تعادل و چینش متوازن و متناسب (alignment ) در طراحی است .

مخاطبان و بازدید کنندگان صفحات وب می توانند این خطوط را درک کنند و با چشم خود امتداد این خطوط را در صفحات وب سایت دنبال می کنند ، البته بدون اینکه خطوط قابل رویتی در صفحات وب سایت شما موجود باشد.

استفاده از شبکه – Grid – و مفهوم چینش – Align

نمایش یکسان وب سایت در مرورگرهای متفاوت – CSS Reset

امیر سروری ۳۷ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت دوشنبه, ۲۰ام دی , ۱۳۸۹ 54421 بازدید

نمایش پیش فرض یکسان وب سایت در مرورگرهای متفاوت با استفاده از تکنیک CSS Reset

cross browser compatibility

سازگاری یک صفحه وب و کدهای آن با مرورگرهای گوناگون و متعددی که وجود دارند ( IE , FireFox , Opera , Chrome ) ، یکی از مشکلات و چالش های جدی برای طراحان وب سایت بوده است. یک طراح وب سایت گاهی مجبور به افزودن کدهای بسیار پیچیده در لابلای فایلهای CSS – سی اس اس خود است تا این ناسازگاری و تفاوت در نمایش صفحات در مرورگرهای متفاوت را به این نحو سازگار جلوه دهد.

این چالش تا به ابنجا پیش رفته است که ، توانایی در طراحی وب سایت ، به طوری که در تمامی مرورگرها به طور یکسان نمایش داده شود ( Cross Browser ) ، یک امتیاز بسیار خوب برای یک طراح وب است. بسیاری از گروه ها و طراحان وب سایت برای راحتی در استفاده از کدهای CSS – سی اس اس به این منظور راه حل ها و تکنیکهای گوناگونی را بررسی کرده اند ، و به نظر میرسد استفاده از تکنیک CSS Reset به این منظور از محبوبیت بیشتری برای طراحان وب سایت بر خوردار است .

نمایش یکسان وب سایت در مرورگرهای متفاوت – CSS Reset

اندازه فونت متغیر و ثابت

امیر سروری ۱۶ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت جمعه, ۱۷ام دی , ۱۳۸۹ 26362 بازدید

CSS یک ابزار بسیار مناسب ، اساسی و قدرتمند برای طراحی وب سایت و شکل بخشیدن به صفحات وب سایت است که با ارائه ورژن جدید آن ( CSS3 ) قدرت بیشتری نیز گرفته است . دراین مجموعه تلاش خواهد شد ، تعدادی از تکنیک های کاربردی ، فوق العاده و ساده از CSS را با یکدیگر مرور کنیم .

اندازه متغیر فونت ها

با استفاده از روش اندازه گذاری متغیر برای فونت ها ( em ) ، اندازه فونت ها با توجه به محیط اطراف و اجزاء تشکیل دهنده وب سایت تعیین می شود ، و کاربران نیز می توانند به راحتی با استفاده از تنظیمات مرورگر خود اندازه فونت ها را به دلخواه خود تغییر دهند.

اندازه فونت متغیر و ثابت

تصاویر مورد استفاده در طراحی وب سایت – GIF , PNG , JPG

امیر سروری ۱۹ دیدگاه استاندارد وب سایت , اصول طراحی وب سایت شنبه, ۱۱ام دی , ۱۳۸۹ 31477 بازدید

تصاویر بخش بسیار مهمی از قسمت قابل نمایش از هر وب سایت را تشکیل می دهند و میزان حجم , کیفیت , و نوع آنها تاثیر قابل ملاحظه ای در استاندارد بودن و جذابیت هر چه بیشتر یک وب سایت دارد.
در اینجا سه فرمت اصلی تصاویر مورد استقاده در وب و نحوه و زمان استفاده از هر کدام را بررسی می کنیم.

تصاویر مورد استفاده در طراحی وب سایت – GIF , PNG , JPG

مشکلات یک طراح وب سایت آزاد و راهکارهای حل آن

امیر سروری ۱۰ دیدگاه اصول طراحی وب سایت , کار و زندگی یکشنبه, ۱۴ام آذر , ۱۳۸۹ 13698 بازدید

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

مشکلات یک طراح وب سایت آزاد و راهکارهای حل آن

هشت مرحله مهم در طراحی وب سایت

امیر سروری ۱۰ دیدگاه اصول طراحی وب سایت چهارشنبه, ۱۰ام آذر , ۱۳۸۹ 14501 بازدید

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

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

هشت مرحله مهم در طراحی وب سایت



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.