طراحی سایت

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

با  درود به همه دوستان با قسمت  دهم آموزش طراحی سایت از پایه در خدمتتون هستم و امیدوارم این مقاله هم مانند مقاله های گذشته بازخورد های خوبی داشته باشد .در این مقاله نیز راجع به سی اس اس ( css) و نحوه استایل دهی (Font-size  ,…. color, Background-color,) و گزینش گر متنی و سبک دهی گروهی صحبت خواهم کرد .تا اینجای کار به چند مثال ساده اما کاربردی  با CSS  برای استفاده در وب سایت نگاهی انداختیم. برای استایل دهی خصوصیات بسیار زیادی وجود دارد که البته من قصد دارم آنها را اینجا لیست کنم، هرچند ممکن است شما تا به حال بعضی از این استایل ها و مقدار دهی آنها را تجربه کرده باشید. نکته :  توجه داشته باشید که این استایل ها کل css نیست و در فصل های آینده به این مقادیر اضافه خواهد شد. Color همانطور که قبلا هم دیدید برای رنگ دادن به عناصر استفاده می شود. Background-colorبه دو صورت مقدار دهی می شود یا نام رنگ (blue, red, green,..)  یا با اعداد دسیمال،  مانند: #3acbef Font-familyبا این خصیصه هر فونتی را که بخواهید می توانید به متون سایت خود اعمال کنید، تن طراحی سایت...ادامه مطلب

امروز و در این ساعت می خواهم در مورد مطلبی صحبت کنم که کمتر کسی به آن دقت می کند! و ان زمان ماندگاری کاربر در سایت شماست. این بحث بسیار مهم است ! البته نه فقط از دید گوگل بلکه به لحاظ برند سازی ماندن کاربر در سایت شما تاثیرات مهم و مفیدی در پی خواهد داشت که شاید از هیچ طریق دیگری رخ ندهد.    شما در سایت خود باید شرایطی ایجاد کنید که باعث شود کاربر پس از ورود زمان بیشتری را در آن سپری کند.همانطور که می دانید الکسا به سایت ها رتبه ای می دهد به نام “Daily Time on Site” که نشان دهنده میزان حدودی حضور کاربران در سایت شما برای یک روز است. اینطور نیست که زمان ماندگاری کاربران در یک سایت خبری با یک سایت نمایش فیلم و یک سایت دانلود یکی باشد .قطعا این طور نیست!! اما من در ذیل به شما نکاتی را گوشزد می کنم که هم برای سئو سایت مفید باشد و هم برای بحث برندسازی …   – بروز رسانی مداوم سایت آپدیت کردن مطالب سایت و بروز رسانی محتوا ،همواره یکی از مواردی است که کاربر را بیشتر جذب سایت شما می کند و در واقع به این صورت کاربر با هر ب طراحی سایت...ادامه مطلب

آموزش طراحی وب سایت از امروز  بخش جدیدی  را برای شما عزیزان در نظر گرفته ایم. این بخش شامل آموزش  مرحله به مرحله آموزش طراحی وب سایت می باشد که سعی می شود هر هفته مقاله ای در این زمینه به شما عزیزان ارائه کنیم. در اولین قسمت از این سری آموزشها با ما باشید.   این دوره آموزسی بر اساس کتاب Build Your Own Website The Right Way Using HTML & CSS از انتشارات Sitepoint  می باشد. چه کسانی باید این کتاب را بخوانند؟ این کتاب برای کسانی مفید است که از آموزش طراحی وب سایت اطلاعی ندارند و می خواهند تازه به جمع طراحان سایت ملحق شوند پس مسلما از ساده ترین نکات آغاز می شود .این کتاب شما را با HTML  و CSS آشنا میکند و راه را برای ساخت یک وب سایت استاندارد به شما نشان می دهد. ذکر این نکته لازم است که ترجمه خط به خط کتاب ارائه نمی شود و چیزی که به عنوان برداشت شخصی من یک طراح سایت از کتاب می باشد در قالب مقالات آموزش طراحی وب سایت برای شما بیان خواهد شد.سعی می کنم در هر مقاله حداکثر یک فصل از کتاب را آموزش دهم و مسلما با بازخوردی که از خوانندگان خواهم گرف طراحی سایت...ادامه مطلب

فصل دوم Your First Web Pages در این فصل شما می توانید اولین صفحه وب خودتان را خلق نمایید و با XHTM آشنا خواهید شد و مرحله به مرحله کارهای خود را در مرورگر تست میکنید .بگذارید دقیق شویم ! طراحی وب سایتی که شما می بینید به سه لایه اصلی تقسیم می شود:یادگیری این سه لایه شما را به یک طراح تبدیل میکند!لایه اول لایه محتوی است که مانند شاسی ماشین است و شامل تگهای متفاوتی می باشد .لایه دوم لایه نمایش است که به عناصر HTML شکل و ظاهر می دهد و لایه سوم لایه رفتار است که حرکت و پویایی صفحات را شامل می شود.چیزی که در این کتاب آموزش داده می شود مربوط به 2 لایه  HTML و  CSS است. دیدن Source برنامه: دیدن کد برنامه می تواند به یادگیری شما سرعت ببخشد البته باید در انتخاب وب سایت خود دقت نمایید تا اشتباه آنها مسیر یادگیری شما را تغییر ندهد. روش کار بدین صورت است که ماوس را درروی صفحه جایی غیر از تصاویر ببرید و کلیک راست کنید و view page source  یا view source را بزنید. عناصر اصلی یک صفحهHTML :  یک DOCTYPEیک<HTML> TAGیک<HEAD>  TAGیک<TITLE>   T طراحی سایت...ادامه مطلب

با سلام خدمت همه علاقه مندان به یادگیری طراحی سایت. با قسمت سوم آموزش طراحی وب سایت از پایه در خدمت شما هستیم. در این قسمت شما نحوه سازمان دادن وب سایت و ساخت اولین صفحه وب خودتان را تجربه خواهید کرد . امیدوارم همانند مقاله های گذشته نظر خودتان را برای ما ارسال نمایید.ساخت اولین صفحه وب سایت شما در هر جای کامپیوتر که دوست دارید فلدری به نام my-first-webpage  بسازید. textEditor خودتان را که در جلسات قبل توضیح دادیم باز کنید کد زیر را در آن کپی کنید “HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD”>THE MOST BASIC WEB PAGE IN THE WORLDCONTENT=”TEXT/HTML; CHARSET=UTF-8″/> THE MOST BASIC WEB PAGE IN THE WORLD   THIS IS A VERY SIMPLE WEB PAGE TO GET YOU STARTED. HOPEFULLY YOU WILL GET TO SEE HOW THE MARKUP THAT DRIVESTHE PAGE RELATES TO THE END RESULT THAT YOU CAN SEE ONSCREEN.   THIS IS ANOTHER PARAGRAPH, BY THE WAY. JUST TO SHOW HOW IT WORKS.   از textEditor گزینه file>save as را بزنید. مسیر فلدر قبل را بدهید تا در آنجا ذخیره شود.نام ف طراحی سایت...ادامه مطلب

در این قسمت مطالب زیر را با هم بررسی خواهیم کرد:مفهوم کامنت و لزوم استفاده از آنکاراکترها وسمبل ها و نحوه استفاده در  XHTMLنقطه شروع برای هر وب سایتیلینک برای ارسال ایمیلدرج تصاویر در سندمفهوم کامنت و لزوم استفاده از آن نظم در برنامه نویسی ارزش بالایی دارد به طوری که می بایست برنامه نوشته شده توسط شما قابل دنبال کردن توسط برنامه نویس دیگری باشد. یکی از ابزارهایی که در این زمینه به ما کمک می کند گذاشتن کامنت است.کامنت در واقع نوشته هایی است که در سورس برنامه وجود دارند ولی در نمایش خروجی ظاهر نمی شوند . کامنت گذاری در HTML  و CSS و JavaScript  کاربرد زیادی دارند. به مثال زیر دقت کنید: <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 STRICT//EN”“HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD”><HTML XMLNS=”HTTP://WWW.W3.ORG/1999/XHTML”><HEAD><TITLE>COMMENT EXAMPLE</TITLE><META HTTP-EQUIV=”CONTENT-TYPE”CONTENT=”TEXT/HTML; CHARSET=UTF-8″/></HEAD><BODY><P>I REALLY, طراحی سایت...ادامه مطلب

قسمت پنجم در این قسمت، برای تهیه یک سایت ساختاری را تعریف می کنیم که یک ساختار کلیدی در تهیه وب سایت های مدرن می باشد و با شناخت این ساختار می توانید در تهیه  تمامی وب سایت ها توانا باشید.  اضافه کردن یک ساختار به نام div:تا این لحظه ساختار پایه ای وب سایت و تگ های html  و  body  و p  برای پاراگراف وh برای هدر ها  را شناختیم و با آن ها کار کردیم و در این قسمت یک ساختار طلائی به نام div را معرفی می نماییم. div یک تگ بلاک است و به همراه تگ span  بیشترین استفاده در صفحات استاندارد وب سایت را دارد .این تگ معمولا برای قرار دادن گروهی از عناصر داخل آن مورد استفاده قرار می گیرد و داخل آن می توان از عناصر دیگر مانند h1 , img , a , p  و غیره استفاده کرد.این تگ هیچ استایلی از جمله margin  و padding ندارد و برای شکل دادن به ظاهر آن از دستورات css استفاده می کنیم. به مثال زیر دقت نمایید : <P>THIS IS A PARAGRAPH.</P><P>THIS IS ANOTHER PARAGRAPH.</P><P>THIS IS YET ANOTHER PARAGRAPH.</P><P>AND JUST ONE MOR طراحی سایت...ادامه مطلب

با سلام مجدد خدمت همه علاقه مندان به یادگیری علم طراحی سایت و با پوزش از تاخیر در ارائه مطلب ، امیدوارم بتوانیم منظم تر از گذشته این سری آموزشی را ادامه دهیم .با قسمت ششم آموزش طراحی وب سایت از پایه در خدمت شما هستیم . در این قسمت یاد خواهید گرفت که چگونه چند صفحه را در کنار هم قرار دهیم و بین آن ها حرکت کنیم.آیا ساختن یک صفحه کافی است؟در قسمت های گذشته ساخت یک صفحه از وب سایت را آموختیم و حالا می خواهیم چند صفحه را در کنار هم داشته باشیم و بین آن ها با لینک دهی حرکت کنیم . در واقع این یک workshop برای جمع آوری اندوخته های شماست .در ابتدا صفحه ای با نام index.html  می سازیم: <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 STRICT//EN”“HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD”><HTML XMLNS=”HTTP://WWW.W3.ORG/1999/XHTML”><HEAD><TITLE>BUBBLE UNDER – THE DIVING CLUB FOR THE SOUTH-WESTUK</TITLE><META HTTP-EQUIV=”CONTENT-TYPE”CONTENT=”TEXT/HTML; CHARSET=UTF-8″/></HEAD><BOD طراحی سایت...ادامه مطلب

با قسمت هفتم آموزش طراحی سایت از پایه در خدمتتون هستم و امیدوارم این مقاله هم مانند مقاله های گذشته بازخوردهای خوبی داشته باشد. در این مقاله ابتدا تگ های خاص و تگ هایی که طراحان سایت کمتر از آن ها استفاده می کنند را ذکر کرده و سپس کمی راجع به سی اس اس (css) صحبت می کنیم.عنصر  blockquote: این تگ ، یک تگ container (که در جلسات قبل توضیح داده شده) است و طبق گفته کتاب این تگ  برای نمایش یک گفته شخصی استفاده می شود.ولی در کتاب های دیگر به تگ های  Quotes  اشارات متنوعی شده است.  Quotes به معنی نشان یا نقل قول است و کلا” این تگها برای جلب توجه بیشتر استفاده می شود در واقع یک شهادت ویا سفارش و یا کامنت است. تگ های  Quotesبه 3 بخش زیر تقسیم می شود : 1.    <BLOCKQOUTE>< /BLOCKQOUTE>2.    <Q>< /Q>3.    <CITE>< /CITE> q : این تگ ، یک تگ container  و inline  است  و برای نقل و قول برای یک یا دو کلمه استفاده می شود.یادآوری :  تگ های block  کل س طراحی سایت...ادامه مطلب