طراحی سایت | بهینه سازی سایت | طراحی وب سایت
طراحی سایت,طراحی وب سایت,بهینه سازی سایت ,طراحی وبسایت,طراحی وبطراحی سایت | بهینه سازی سایت | طراحی وب سایت
طراحی سایت,طراحی وب سایت,بهینه سازی سایت ,طراحی وبسایت,طراحی وب3 روش آموزش طراحی سایت
طراحی وب سایت به صورت حرفه ای نیاز به تخصص و تجربه فراوان دارد. یک طراح وب سایت حرفه ای لازم است در مورد طراحی گرافیک، کد نویسی HTML و CSS، زبان برنامه نویسی سمت سرور نظیر PHP، ایمن سازی وب سایت، تنظیمات سرور و هاستینگ، سئو و بهینه سازی وب سایت اطلاعات کافی داشته باشد. البته می توانید در یکی از این شاخه ها متخصص باشید و به سایر موارد نپردازید. اما برای آنکه بتوانید به تنهایی یک وب سایت حرفه ای را مدیریت نمایید دانستن کلیه موارد ذیل الزامی می باشد
دارکوب همچنین در سایت های خود مطالب آموزشی در زمینه طراحی وب سایت، سئو و بهینه سازی ارائه می نماید که دائما در حال به روز رسانی هستند. همچنین اخبار روز این رشته را در این وبلاگ ها می توانید پیگیری نمایید. برای رویت مقالات می توانید به لینک های زیر مراجعه نمایید:
مقالات آموزشی sitedar.com
اخبار و تازه های sitedar.com
مقالات joomir.com
وبلاگ دارکوب
آموزش سئو و بهینه سازی سایت
طراحی سایت را از روش های مختلفی می توانید آموزش ببینید. بسته به روحیه شما و سطح دانش شما در زمینه وب راه مناسب برای یادگیری شما متفاوت است. قبل از هر چیز به شما یادآور می شوم که طراحی وب فیلدهای مختلفی دارد که قبل از هر کار بهتر است فیلد مناسب خود را انتخاب نمایید. طراحی وب شامل فیلدهای کاری طراح گرافیک سایت، طراح انیمیشن های سایت، طراح صفحه html ، برنامه نویس وب و متخصص سئو می باشد. ابتدا در مورد کار مورد نظر تحقیق نموده سپس فیلد کاری مناسب به خود را انتخاب نمایید. بسته به انتخاب شما دوره های مختلفی را می بایست بگذرانید. هر یک از فیلدهای کاری طراحی وب را که انتخاب کرده باشید می توانید از منابع زیر جهت یادگیری طراحی استفاده نمایید.
آموزش طراحی سایت از طریق سایت های آموزش طراحی وب سایت
از نظر بنده که از سال 1381 تا کنون در زمینه طراحی وب مشغول فعالیت هستم بهترین روش همین روش می باشد زیرا مطالب سایت ها معمولا بروز می باشند و در سایت ها می توانید آخرین تکنولوژی ها را در زمینه وب بیابید و همچنین دسترسی آن ساده و رایگان است. برای این کار باید سایت های آموزشی طراحی وب سایت را بیابید که لازم نیست این کار را انجام دهید زیرا بنده در پایین سایت های معتبر آموزش طراحی سایت به زبان فارسی را برای شما لیست نموده ام. البته پیشنهاد می کنم از سایت های انگلیسی آموزش طراحی سایت استفاده نمایید زیرا آن سایت ها معمولا بروزتر از سایت های فارسی هستند و مطالب مفید تر و کامل تری را در آنها یافت خواهید نمود.
لیست سایت های رایگان آموزش طراحی سایت
آموزش طراحی وب سایت از پایه - قسمت اول
آموزش طراحی سایت
آموزش طراحی سایت | webtarget
آموزش طراحی وب سایت|آموزش طراحی سایت - آموزش برنامه نویسی
ITTutorial.ir | آموزش طراحی وب سایت ,فتوشاپ
طراحی وب - آموزش طراحی صفحات وب
آموزش طراحی سایت | ساخت وب سایت رایگان - سایت ساز
آموزش و طراحی سایت
Webnology | پایگاه اختصاصی آموزش طراحی سایت
آموزش طراحی وبسایت: ایران سرزمین
وبسایتها | آموزش جامع و تخصصی طراحی سایت
آموزش طراحی سایت از طریق کلاس های آموزشی
این مورد را زیاد توصیه نمی نمایم زیرا باعث می شود شما در یادگیری های آتی خود وابسته به استاد خود باشید ولی اگر به هر جهت با توجه به روحیه خود تشخیص می دهید می توانید در کلاس های آموزشی معتبر شرکت نمایید. این کار را با پرس و جو از دوستان و آشنایان انجام دهید. معتبر ترین موسسه آموزشی که اینجانب توصیه می کنم کلاس های طراحی وب مجتمع فنی تهران می باشد.
آموزش طراحی وب از طریق کتاب
بنده کار طراحی وب را با یک کتاب آموزشی فرونت پیج در 24 ساعت شروع کردم. یادگیری طراحی وب از طریق کتاب باعث می شود شما برای یادگیری های موارد به استاد خود متکی نباشید و موارد را از کتاب به راحتی آموزش ببینید. کتاب های مختلفی در زمینه های مختلف آموزش طراحی سایت وجود دارند در هر موردی بهترین کتاب را از طریق پرس و جو از آشنایان و گشت و گذار در اینترنت تهیه نموده و کار یادگیری طراحی سایت را شروع نمایید.
در ایران یادگیری موارد مورد زیر برای طراحان وب مورد نیاز است، در صورتی که بخواهید یک طراح وب کامل باشید می بایست تمام موارد زیر را به همراه زیر شاخه های آن آموزش دیده باشید:
photoshop , flash , frontpage , dreamweaver , expression web, css , html , javascript , php , asp.net , asp
آموزش طراحی وب سایت از پایه – قسمت ششم
آیا ساختن یک صفحه کافی است؟در قسمت های گذشته ساخت یک صفحه از وب سایت را آموختیم و حالا می خواهیم چند صفحه را در کنار هم داشته باشیم و بین آن ها با لینک دهی حرکت کنیم . در واقع این یک 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-WEST
UK</TITLE>
<META HTTP-EQUIV=”CONTENT-TYPE”
CONTENT=”TEXT/HTML; CHARSET=UTF-8″/>
</HEAD>
<BODY>
<DIV ID=”HEADER”>
<DIV ID=”SITEBRANDING”>
<H1>BUBBLEUNDER.COM</H1>
</DIV>
<DIV ID=”TAGLINE”>
<P>DIVING CLUB FOR THE SOUTH-WEST UK – LET’S MAKE A
SPLASH!</P>
</DIV>
</DIV> <!– END OF HEADER DIV –>
<DIV ID=”BODYCONTENT”>
<H2>WELCOME TO OUR SUPER-DOOPER SCUBA SITE</H2>
<P><IMG SRC=”DIVERS-CIRCLE.JPG”
ALT=”A CIRCLE OF DIVERS PRACTICE THEIR SKILLS”
WIDTH=”200″ HEIGHT=”162″/></P>
<P>GLAD YOU COULD DROP IN AND SHARE SOME AIR WITH US! YOU’VE
PASSED YOUR UNDERWATER NAVIGATION SKILLS AND
SUCCESSFULLY FOUND YOUR WAY TO THE START POINT – OR IN
THIS CASE, OUR HOME PAGE.</P>
</DIV> <!– END OF BODYCONTENT DIV –>
</BODY>
</HTML>
نحوه ساخت و تگهای استفاده شده در مثال فوق قبلا توضیح داده شده است . (سورس تگ img را با تصویری در کامپیتر خود پر کنید)
حالا در فلدری که صفحه شما وجود دارد از فایل index.html می بایست 2 بار کپی بگیرید . بدین ترتیب:
بعد از انتخاب فایل
EDIT > COPY
و سپس 2 بار
EDIT > PASTE
را می زنید حالا 3 فایل مشابه دارید که می بایست 2 تای کپی شده را تغییر نام دهیم برای همین روی آنها کلیک راست ماوس را فشار می دهیم و گزینه یrename را می زنیم تا بتوانیم نام دلخواه را به آن ها بدهیم. یکی را contact.html و دیگری را about.html نام گذاری می کنیم .
محتوای 3 صفحه فوق یکسان است و می بایست محتوای صفحات را ویرایش کنید تا با هم یکی نباشد برای این کار صفحات دوم وسوم را با ابزار هایی که توضیح داده شده است مثل NotePad باز کنید و تایتل و محتوای هر صفحه را نسبت به نام آن تغییر دهید . به طور مثال عبارت contact us را برای تگ تایتل در صفحه contact.html انتخب نمایید.
بعد از تغییرات در 2 صفحه موجود آن ها را save کنید . ( روش save کردن در جلسات گذشته توضیح داده شده است)
لینک کردن صفحات به هم:
صفحه اول یا همان index را باز کنید و سعی کنید از آن به صفحه contact بروید!
بله این امکان در حال حاضر وجود ندارد و برای حرکت بین صفحات مختلف شما می بایست از link و یا anchor استفاده نمایید.
<A HREF=”FILENAME.HTML”>LINK TEXT HERE</A>
href : یک attribute است و بیان کننده آدرسی است که قرار است به آنجا لینک شود
filename.html: نام صفحه ایست که قرار است به آنجا لینک شود
Link text here: چیزی که در صفحه html دیده می شود و نام لینک مورد نظر است
این نکته را هرگز فراموش نکنید که از کلمات با معنی برای لینک دهی استفاده نمایید و از کلماتی مانند “اینجا را کلیک نمایید” پرهیز کنید.
حالا باید برای لینک دهی بین صفحات یک منو و یا navigation سایت را بسازیم . دقت نمایید نحوه ساخت navigation سایت بسیار مهم است و ساختاری که در ادامه توضیح داده می شود ساختاری مناسب و استاندارد برای منوی سایت می باشد و بهتر است الان نگران ظاهر آن نباشید در ادامه مقالات ظاهر آن را زیبا می کنیم!
ساخت یک منویnavigation
<DIV ID=”NAVIGATION”>
<UL>
<LI><A HREF=”INDEX.HTML”>HOME</A></LI>
<LI><A HREF=”ABOUT.HTML”>ABOUT US</A></LI>
<LI><A HREF=”CONTACT.HTML”>CONTACT US</A></LI>
</UL>
</DIV> <!– END OF NAVIGATION DIV –>
حالا کد زیر را در بالای همه صفحات بعد از تگ div با آی دی header اضافه نمایید . به طور مثال برای صفحه index
<!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-WEST
UK</TITLE>
<META HTTP-EQUIV=”CONTENT-TYPE” CONTENT=”TEXT/HTML;
CHARSET=UTF-8″/>
</HEAD>
<BODY>
<DIV ID=”HEADER”>
<DIV ID=”SITEBRANDING”>
<H1>BUBBLEUNDER.COM</H1>
</DIV>
<DIV ID=”TAGLINE”>
<P>DIVING CLUB FOR THE SOUTH-WEST UK – LET’S MAKE A
SPLASH!</P>
</DIV>
</DIV> <!– END OF HEADER DIV –>
<DIV ID=”NAVIGATION”>
<UL>
<LI><A HREF=”INDEX.HTML”>HOME</A></LI>
<LI><A HREF=”ABOUT.HTML”>ABOUT US</A></LI>
<LI><A HREF=”CONTACT.HTML”>CONTACT US</A></LI>
</UL>
</DIV> <!– END OF NAVIGATION DIV –>
<DIV ID=”BODYCONTENT”>
<H2>WELCOME TO OUR SUPER-DOOPER SCUBA SITE</H2>
<P><IMG SRC=”DIVERS-CIRCLE.JPG” WIDTH=”200″ HEIGHT=”162″
ALT=”A CIRCLE OF DIVERS PRACTICE THEIR SKILLS”/></P>
<P>GLAD YOU COULD DROP IN AND SHARE SOME AIR WITH US!
YOU’VE PASSED YOUR UNDERWATER NAVIGATION SKILLS AND
SUCCESSFULLY FOUND YOUR WAY TO THE START POINT – OR IN
THIS CASE, OUR HOME PAGE.</P>
</DIV> <!– END OF BODYCONTENT DIV –>
</BODY>
</HTML>
حالا به راحتی می توانید بین 3 صفحه حرکت نمایید.
نکته نویسنده: بهترین مکان برای قرارگیری منوی سایت هم از لحاظ ظاهر و هم در ساختار html بالاترین نقطه صفحه است. مطمئن باشید این به نفع شماست!
و در آخر 3 صفحه خواهید داشت که به راحتی قابلیت حرکت بین یکدیگر را دارند.
در جلسه بعد در باره تگ های blockquote strong , em , توضیحات بیشتری ارائه خواهم داد و سپس نوبت اضافه کردن استایل(ظاهر) به صفحه است .
برای تمرین این جلسه شما چندین منو را در سایت های مختلف مرور کنید به طور مثال برای امروز به طراحی سایت وب اسکالا رجوع نمایید و طرز لینک دهی در این سایت را ببینید. سپس توضیح دهید که چرا صفحاتی که لینک شده است پسوند ندارند؟
آموزش طراحی وب سایت از پایه – قسمت چهارم
با قسمت چهارم آموزش طراحی وب سایت از پایه در خدمت شما هستیم. در این قسمت مطالب زیر را با هم بررسی خواهیم کرد:مفهوم کامنت و لزوم استفاده از آن
کاراکترها وسمبل ها و نحوه استفاده در 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, <EM>REALLY</EM> LIKE THIS XHTML STUFF.</P>
<!– ADDED EMPHASIS USING THE EM ELEMENT. HANDY ONE, THAT. –>
</BODY>
</HTML>
و خروجی بدین صورت است:
در واقع با کامنت توضیح داده است که چرا از تگ em استفاده کرده است. کامنت گذاری در HTML بیشتر برای جدا کردن قسمت های مختلف وب سایت می باشد به طور مثال قسمت منو را با کامنت مشخص می کنیم و می گویم مثلا این قسمت از HTML برای منو است.
نحوه نوشن کامنت در HTML بدین صورت است:
<!– BEGINN NAVIGATION –>
در جاوا اسکریپت به 2 صورت زیر صورت :
/* COMMENT */
// COMMENT
و در CSS :
/* COMMENT */
بگذارید یک ذره جلوتر برویم و یک استفاده حرفه ای تر کامنت را هم براتون توضیح بدهم :
استفاده دیگر کامنت زمانی است که می خواهید قسمتی از کد خودتونو نمایش ندید و یا برای مدتی پنهان کنید در آن زمان است که قسمت مربوطه را کامنت می کنید که بعدا هم قابل برگشت است .
<!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>COMMENTING OUT XHTML</TITLE>
<META HTTP-EQUIV=”CONTENT-TYPE” CONTENT=”TEXT/HTML; CHARSET=UTF-8″/>
</HEAD>
<BODY>
<H1>CURRENT STOCK</H1>
<P>THE FOLLOWING ITEMS ARE AVAILABLE FOR ORDER:</P>
<UL>
<LI>DARK SMOKE WINDOW TINTING</LI>
<LI>BRONZE WINDOW TINTING</LI>
<!– <LI>SPRAY MOUNT</LI>
<LI>CRAFT KNIFE</LI> –>
</UL>
</BODY>
</HTML>
و حالا خروجی برنامه
دقت کنید که 2 آیتم li نمایش نمی یابد ولی حذف نشده تا شاید در آینده دوباره فعال شوند.
اگر سوالی در این قسمت دارید در بخش کامنت ها پاسخ خواهم داد و یا از طریق فرم تماس وب سایتم با من در تماس باشید .
کاراکترها وسمبل ها و نحوه استفاده در XHTML
بسیاری موارد پیش می آید که می خواهید در متن خود مانند نوشتن همین مقاله از کاراکترهایی مثل > ویا & و یا هر کاراکتر خاص دیگری استفاده کنید. در XHTML ما به جای درج مستقیم این کاراکترها از کد خاصی که برای آنها تعریف شده استفاده می کنیم. مثلا به جای & از & استفاده می کنیم و این یکی از تفاوت های HTML با XHTML است ، یعنی اگر بدین صورت عمل نکنیم سند ما Valid نخواهد شد.
برای آگاهی از این کد ها میتوانید به این آدرس رجوع کنید.
صفحه اول ، نقطه شروع هر وب سایت
نقطه شروع هر وب سایت صفحه اول آن است که با نام index ویا default شناخته خواهد شد. ما در یک مثال کاربردی تگ هایی که تا به حال آموختیم به اضافه دو خصوصیت جدید اضافه کردن تصویر و ارسال ایمیل را خواهیم آموخت.
مثال زیر را در ادیتور خود بنویسید و با نام index.html ذخیره نمایید
<META HTTP-EQUIV=”CONTENT-TYPE” CONTENT=”TEXT/HTML; CHARSET=UTF-8″/>
</HEAD>
<BODY>
<H1>BUBBLEUNDER.COM</H1>
<P>DIVING CLUB FOR THE SOUTH-WEST UK – LET’S MAKE A SPLASH!</P>
<H2>WELCOME TO OUR SUPER-DOOPER SCUBA SITE</H2>
<P>GLAD YOU COULD DROP IN AND SHARE SOME AIR WITH US! YOU’VE
PASSED YOUR UNDERWATER NAVIGATION SKILLS AND SUCCESSFULLY
FOUND YOUR WAY TO THE START POINT – OR IN THIS CASE, OUR HOME
PAGE.</P>
<H3>ABOUT US</H3>
<P><IMG SRC=”DIVERS-CIRCLE.JPG” WIDTH=”200″ HEIGHT=”162″
ALT=”A CIRCLE OF DIVERS PRACTICE THEIR SKILLS”/></P><P>WHEN WE’RE NOT DIVING, WE OFTEN MEET UP IN A LOCAL PUB
TO TALK ABOUT OUR RECENT ADVENTURES (ANY EXCUSE, EH?).</P>
<H3>CONTACT US</H3>
<P>TO FIND OUT MORE, CONTACT CLUB SECRETARY BOB DOBALINA
ON 01793 641207 OR <A
HREF=”MAILTO:TEST@TEST,COM”>EMAIL
BOB@BUBBLEUNDER.COM</A>.</P> </BODY>
</HTML>
حالا خروجی را ببینیم :
در مورد تگ های p و h قبلا صحبت کرده ایم ولی اینجا در قسمت contact متن آبی رنگی را می بینید که لینک است یعنی تگ a ولی یک لینک معمولی نیست .این یک لینک برای ارسال ایمیل است و اگر در ویندوز خود برنامه مدیریت ایمیل داشته باشید مانند outlook با آن می توانید به شخص مورد نظر ایمیل ارسال نمایید.
صفحاتی که تا به حال درست کرده ایم به صورت متنی و بسیار کسل کننده است و برای جذابیت بیشتر می بایست از عکس ها استفاده کرد . با استفاده از تگ img می توان تصاویر را به صفحه اضافه کرد. بدین ترتیب :
<IMG SRC=”DIVERS-CIRCLE.JPG” WIDTH=”200″ HEIGHT=”162″ ALT=”A CIRCLE OF DIVERS PRACTICE THEIR SKILLS” />
این تگ یک تگ empty است و دارای attribute های زیر است :
src برای آدرس عکس
alt برای توضیح تصویر
width عرض تصویر به پیکسل
height ارتفاع تصویر به پیکسل
فقط دقت نمایید که آدرس از جایی که صفحه شما قرار دارد حساب میشود یعنی اگر تصویر در همان فولدری باشد که صفحه شما قرار دارد به طریق بالا آدرس می گیرد.
Alt هم متنی است که عکس را توصیف می کند و در مرورگرهای متنی و یا زمانی که مرورگر تصاویر را نشان نمیدهد به جای نمایش عکس این متن نمایش می یابد و اما فایده دیگر اهمیتش برای موتورهای جستجو است.
این نکته را هم در پایان اضافه کنم که برای Valid شدن در XHTML صفحه وجود alt الزامی است .