ساخت اولین صفحه وب سایت شما در آموزش طراحی سایتدر هر جای کامپیوتر که دوست دارید فلدری به نام my-first-webpage بسازید. textEditor خودتان را باز کنید کد زیر را در آن کپی کنید. <!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>THE MOST BASIC WEB PAGE IN THE WORLD</TITLE> <META HTTP-EQUIV=”CONTENT-TYPE” CONTENT=”TEXT/HTML; CHARSET=UTF-8″/> </HEAD> <BODY> <H1>THE MOST BASIC WEB PAGE IN THE WORLD</H1> <P>THIS IS A VERY SIMPLE WEB PAGE TO GET YOU STARTED. HOPEFULLY YOU WILL GET TO SEE HOW THE MARKUP THAT DRIVES THE PAGE RELATES TO THE END RESULT THAT YOU CAN SEE ON SCREEN.</P> <P>THIS IS ANOTHER PARAGRAPH, BY THE WAY. JUST TO SHOW HOW IT WORKS.</P> </BODY> </HTML> از textEditor گزینه file>save as را بزنید پنجره ای مانند زیر نمایش می یابد: مسیر فلدر قبل را بدهید تا در آنجا ذخیره شود. نام فایل را انتخاب نمایید البته با پسوند html مانند: از منوی کشویی save as type گزینه all files را انتخاب نمایید. از منوی کشویی Encoding گزینه UTF-8 را انتخاب نمایید و حالا دکمه save را بزنید. حالا در فلدر مورد نظر فایلتان را با مرورگر باز نمایید . تبریک شما اولین صفحه وب خودتان را ساختید! اهمیت UTF-8این کاراکتر ست (Character Set) اجازه می دهد زبان های دیگر هم بتوانند به درستی صفحه شما را ببینند. فرض کنید یک کاربر کره ای که زبان انگلیسی ندارد بخواهد صفحه شما را ببیند ، این کاراکتر ست است که اجازه میدهد شما با مشکلی مواجه نشوید. اولین آنالیز شمایک مقایسه و یک آنالیز ساده بین کد شما و ظاهری که در مرورگر می بینید ، می تواند در یادگیری شما کمک شایانی کند: زمان مناسبی است که در مورد 2 تگ p و h1 و البته عناصر دیگر صحبت کنیم. تیترها و سلسله مراتب آن (H)تیترها عناصر بلاک و بسته شونده (container)هستند و سلسله مراتب مخصوص به خود را دارند و از h1 تا h6 وجود دارند. از h1 برای مهم ترین تیتر از h2 برای تیتر کم ارزش تر و از h3 برای تیتر کم ارزش تر از h2 و به همین ترتیب تا h6 پاراگراف ( (pیک تگ بلاک و بسته شونده (container) است و برای یک بلوک متنی استفاده می شود این بدان معنی است که متن های خوتان را باید داخل این تگ قرار دهید. لیست (list)فرض کنید می خواهید لیست وب سایت های طراحی شده خودتان را نمایش دهید ، به لیستی که من در یک مجله خبری مشاهده کرده ام یک سری بزنید. و اما لیست ها دو گونه اند: Ol-order list: برای لیست های ترتیبی Ul-unorder list : برای لیستهای غیر ترتیبی به مثال زیر دقت کنید: <!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>LISTS – AN INTRODUCTION</TITLE> <META HTTP-EQUIV=”CONTENT-TYPE” CONTENT=”TEXT/HTML; CHARSET=UTF-8″/> </HEAD> <BODY> <H1>LISTS – AN INTRODUCTION </H1> <P>HERE’S A PARAGRAPH. A LOVELY, CONCISE LITTLE PARAGRAPH.</P> <P>HERE COMES ANOTHER ONE, FOLLOWED BY A SUBHEADING.</P> <H2>A SUBHEADING HERE</H2> <P>AND NOW FOR A LIST OR TWO:</P> <UL> <LI>THIS IS A BULLETED LIST</LI> <LI>NO ORDER APPLIED</LI> <LI>JUST A BUNCH OF POINTS WE WANT TO MAKE</LI> </UL> <P>AND HERE’S AN ORDERED LIST:</P> <OL> <LI>THIS IS THE FIRST ITEM</LI> <LI>FOLLOWED BY THIS ONE</LI> <LI>AND ONE MORE FOR LUCK</LI> </OL> </BODY> </HTML> و حالا خروجی کار رو در مرورگر ببینید تا تفاوت های دو نوع لیست را ببینید. ظاهر همه لیست ها به همین سادگی نیستند و امروزه در طراحی سایت حرفه ای استفاده زیادی دارد. برای نمونه می توانید به فوتر وب سایت یک شرکت طراحی سایت تهران نگاهی بیاندازید تا دیدتان نسبت به استفاده از این عنصر بازتر شود. مفهوم کامنت و لزوم استفاده از آندر یادگیری و آموزش طراحی سایت این مطلب را مدنظر داشته باشید که نظم در برنامه نویسی ارزش بالایی دارد به طوری که می بایست برنامه نوشته شده توسط شما قابل دنبال کردن توسط برنامه نویس دیگری باشد. یکی از ابزارهایی که در این زمینه به ما کمک می کند گذاشتن کامنت است. کامنت در واقع نوشته هایی است که در سورس برنامه وجود دارند ولی در نمایش خروجی ظاهر نمی شوند . کامنت گذاری در 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 [email protected]</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 های زیر است :
فقط دقت نمایید که آدرس از جایی که صفحه شما قرار دارد حساب میشود یعنی اگر تصویر در همان فولدری باشد که صفحه شما قرار دارد به طریق بالا آدرس می گیرد. Alt هم متنی است که عکس را توصیف می کند و در مرورگرهای متنی و یا زمانی که مرورگر تصاویر را نشان نمیدهد به جای نمایش عکس این متن نمایش می یابد و اما فایده دیگر اهمیتش برای موتورهای جستجو است. این نکته را هم در پایان اضافه کنم که برای Valid شدن در XHTML صفحه وجود alt الزامی است .
0 Comments
این بخش شامل آموزش مرحله به مرحله آموزش طراحی وب سایت می باشد که سعی می شود هر هفته مقاله ای در این زمینه به شما عزیزان ارائه کنیم. در اولین قسمت از این سری آموزش طراحی سایت با ما باشید. این دوره آموزش طراحی سایت بر اساس کتاب Build Your Own Website The Right Way Using HTML & CSS از انتشارات Sitepoint می باشد. چه کسانی باید این کتاب را بخوانند؟ این کتاب برای کسانی مفید است که از آموزش طراحی سایت اطلاعی ندارند و می خواهند تازه به جمع طراحان سایت ملحق شوند پس مسلما از ساده ترین نکات آغاز می شود. این کتاب شما را با HTML و CSS آشنا میکند و راه را برای ساخت یک وب سایت استاندارد به شما نشان می دهد. Setting up Shop این قسمت آموزش طراحی سایت در واقع آماده کردن کامپیوتر برای کار، قبل از زدن اولین طرح شماست. قبل از این که وب سایت خودتان را بسازید، می بایست کامپیوتر خود را برای کار آماده نمایید که شامل برنامه هایی است که یا در سیستم شما موجود می باشد و یا این که می بایست آن ها را نصب نمایید. برنامه های زیادی در بازار موجود می باشد ولی در ابتدا از برنامه های رایگان و قابل دسترس استفاده می کنیم. وسایل و برنامه های اصلی که شما نیاز دارید:
ابزارهای اولیه در ویندوز برای آموزش طراحی وب سایت: 1- ادیت کردن متن : برای ادیت کردن متن در ویندوز می توانید از Notepad استفاده نمایید. این متن، همان صفحۀ وب است . برای دسترسی به این برنامه در محیط ویندوز مسیر زیر را طی کنید: START > ALL PROGRAMS > ACCESSORIES > NOTEPAD 2- دیدن خروجی فایل : برای دیدن کار خروجی می بایست از مرورگر و یا browser استفاده کنیم. مرورگرهای متفاوتی وجود دارد که بحث آنها بسیار مفصل است ولی در محیط ویندوز مرورگر Internet Explorer در دسترس است. شما می توانید آن را در دسکتاپ خود و یا Quick Launch ویا فولدر برنامه ها و یا در منوی start پیدا کنید. 3- فرستادن صفحه به محیط وب : برای فرستادن صفحه به محیط وب از دستور ftp استفاده خواهیم کرد که در ادامه به آن اشاره میکنم. ابزارهای دیگر آموزش طراحی سایت: برای ادیت کردن صفحات خود می توانید از برنامه Notepad++ استفاده کرد .مزیت استفاده از آن اینست که می توانید تب های مختلفی را برای صفحات مختلف باز کنید و بعد از بستن هم در حافظه ش می ماند و برای دفعه بعد هم باز می ماند. همچنین مرورگرهای گوناگونی وجود دارد که استفاده از آن ها را در کنار Internet Explorer توصیه می کنم. اما در اینجا از یکی از بهترین آنها را نام می برم : firefox اما همه عناصر که متن نیستند شما برای ویرایش عکس هم به برنامه هایی نیاز دارید که می توانید از برنامه های زیر استفاده کنید: Adobe photoshop Adobe fireworks Picasa توصیه من استفاده از فتوشاپ است ، نگران نباشید یادگیری آن برای کاربرد وب آسان است. مرحله آخر – درست کردن مکانی است برای فایل های ساخته شده : بعد از ساختن فایل های خود مدیریت آنها بسیار مهم است و این که در کجا فایل اصلی و در کجا تصاویر قرار گیرد و به همین ترتیب تمام عناصر وب سایت. در این مرحله از آموزش طراحی سایت شما باید یک فولدر بسازید و تمام عناصر وب سایت خود را در آن قرار دهید. فرض کنید در دسکتاپ خود می خواهید یک وب سایت بسازید. RIGHT CLICK > NEW > FOLDER سپس نام وب سایت را انتخاب نمایید .حالا یک فولدر دارید که فایل اصلی به همراه تصاویر و css ,html ,….. را داخل آن قرار می دهید. Your First Web Pages بگذارید دقیق شویم ! طراحی سایت ای که شما می بینید به سه لایه اصلی تقسیم می شود: یادگیری این سه لایه شما را به یک طراح سایت تبدیل میکند! لایه اول لایه محتوی است که مانند شاسی ماشین است و شامل تگهای متفاوتی می باشد .لایه دوم لایه نمایش است که به عناصر HTML شکل و ظاهر می دهد و لایه سوم لایه رفتار است که حرکت و پویایی صفحات را شامل می شود. چیزی که در این کتاب درباره ی آموزش طراحی سایت گفته می شود مربوط به 2 لایه HTML و CSS است. دیدن Sourceبرنامه: دیدن کد برنامه می تواند در آموزش طراحی سایت و یادگیری شما سرعت ببخشد البته باید در انتخاب وب سایت خود دقت نمایید تا اشتباه آنها مسیر یادگیری طراحی سایت توسط شما را تغییر ندهد. روش کار بدین صورت است که ماوس را درروی صفحه جایی غیر از تصاویر ببرید و کلیک راست کنید و view page source یا view source را بزنید. باید صفحه ای مانند زیر در فایرفاکس ببینید: یا در IE عناصر اصلی یک صفحهHTML : یک DOCTYPE یک<HTML> TAG یک<HEAD> TAG یک<TITLE> TAG یک<BODY> TAG تو سورس پیداشون کنید. و حالا یک نمونه کد فقط شامل عناصری اصلی : <!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>UNTITLED DOCUMENT</TITLE> <META HTTP-EQUIV=”CONTENT-TYPE CONTENT=”TEXT/HTML; CHARSET=UTF-8″/> </HEAD> <BODY> </BODY> </HTML> حالا می خواهیم با تک تک این عناصر آشنا شویم : داک تایپ DocType : Document Type Definition اولین آیتم صفحه است بدون فاصله. این یک قانون است. همانطوری که فایل word 2007 در نمایش در 2000 دچار مشکل می شود HTML ها با داک تایپ های متفاوت هم نمایش متفاوت در مرورگرها خواهند داشت. در واقع این داک تایپ است که به مرورگر می گوید این سند از چه نوعی است و باید به چه ترتیب Render شود . نحوه رندر شدن و تفاوت های آنها باید در سطح حرفه ای تری مطرح شود. داک تایپ ها هم در طول زمان به وجود می آیند یعنی مانند word نوع های جدیدی روی قبلی ها عرضه می شوند مانند HTML5 که به تازگی مطرح شده است. برای دیدن داک تایپ های موجود به این آدرس برید. <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 STRICT//EN” “HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD“> به کدهای داک تایپ دقت نمایید: ما در این خط می گوییم نوع سند چیست و آدرسی که باید به این نوع سند در وب سایت کنسرسیوم جهانی وب World Wide Web Consortium یا W3C ، اشاره کند کدام است. در حال حاضر دو نوع داکتایپ هستند که استفاده بیشتری دارند Transitional و Strict همانطوری که گفتم فعلا دنبال تفاوت این داک تایپ ها نباشید به آن هم خواهیم رسید . تاکید میکنم : اولین آیتم صفحه است بدون فاصله. این یک قانون است. عناصر HTML : قبل از این که عناصرHTML را شرح دهم باید با مفهوم تگ (tag) آشناشوید. تگ یعنی اسمی که میان این دو <> قرار گیرد و نام تگ همان متنی است که بین این دو <> قرار می گیرد تگ HTML <HTML> تگ HEAD <HEAD> تگ ها می توانند شامل چند attribute (ویژگی) باشند: <HTML XMLNS=”HTTP://WWW.W3.ORG/1999/XHTML ” DIR=”RTL” > dir یک نام attribute است و value ، rtl (مقدار) آن است که بین ” ” قرار گرفته است. تگ ها به دودسته container و empty تقسیم می شوند.تگ های container شامل یک تگ بازشونده و یک تگ بسته شونده هستند به مثال بالا دقت نمایید HTML باز شده و بسته شده است. تگهای empty متفاوت هستند مانند مثال زیر <IMG SRC=”IMAGES/TEST.JPG” ALT=”TEST” /> <BR/> تگ های empty را می توان به صورت container استفاده کرد ولی در داک تایپ های xhtml توصیه شده است که تگ های empty را به همان شکل empty بنویسیم. در استفاده از تگ ها باید بدانید که از چه نوعی هستند تا سند شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty بنویسیم دچار error می شویم. نگران نباشید کم کم همه آنها را خواهید آموخت . بیایید همین الان تو اینترنت عبارت روبرو را جستجو کنیم : EMPTY TAG IN HTML بسیار عالی شما هم این نتایج را پیدا کردید :
این را گفتم که هیچ وقت دنیای وب و جستجو را به ویژه هنگام طراحی سایت فراموش نکنید. غیر از داک تایپ ها تمامی عناصر صفحه داخل تگ HTML است که شامل 2 بخش می شود head و body عنصر HAED این یک تگ container است و در بالای سند قبل از body قرار می گیرد و شامل اطلاعاتی در باره صفحه است مانند title, meta, css و ….. <HEAD> <TITLE>UNTITLED DOCUMENT</TITLE> <META HTTP-EQUIV=”CONTENT-TYPE” CONTENT=”TEXT/HTML; CHARSET=UTF-8″/> </HEAD> عنصر title : یک تگ container است که متن وسط آن در عنوان Title) ) بالای صفحه قرار میگیرد : به تایتل یکی از سایت ها توجه کنید : موارد استفاده دیگر:
متا تگ یک تگ empty است و برای دلایل متفاوتی استفاده می شوند اطلاعات اضافی که در مرورگر نمایش پیدا نمی کند . به طور مثال برای نام نویسنده ویا حق کپی رایت و یا نوع کاراکتر و …. Css و javascript هم در head قرار میگیرند که بنا به نیاز استفاده میشوند البته برای جاوااسکریپت میتوان یک تفاوتهایی در طراحی های حرفه ای قائل شد. به طور مثال سورسی که در طراحی سایت فوق استفاده شده است را مشاهده نمایید. جاوا اسکریپت در پایین صفحه درج شده است. عناصر body : هرآنچه در body قرار می گیرد را می توان در خروجی دید: تیترها، پاراگراف ها, تصاویر و ……. |
Details
Author
من ساناز همتی هستم. از سال 87 به طراحی وب علافه مند شدم و از سال 90 به صورت حرفه ای به فعالیت های مربوط به طراحی سایت مشغول هستم Archives
October 2019
Categories |