بخش چهارم با قسمت چهارم آموزش طراحی سایت از پایه در خدمتتون هستم و امیدوارم این مقاله هم مانند مقاله های گذشته بازخوردهای خوبی داشته باشد. در این مقاله ابتدا تگ های خاص و تگ هایی که طراحان سایت کمتر از آن ها استفاده می کنند را ذکر کرده و سپس کمی راجع به سی اس اس (css) صحبت می کنیم. عنصر blockquote: این تگ ، یک تگ container (که در جلسات قبل توضیح داده شده) است و طبق گفته کتاب این تگ برای نمایش یک گفته شخصی استفاده می شود. ولی در کتاب های دیگر به تگ های Quotes اشارات متنوعی شده است. Quotes به معنی نشان یا نقل قول است و کلا” این تگها برای جلب توجه بیشتر استفاده می شود در واقع یک شهادت ویا سفارش و یا کامنت است. تگ های Quotesبه 3 بخش زیر تقسیم می شود : 1. <BLOCKQOUTE>< /BLOCKQOUTE> 2. <Q>< /Q> 3. <CITE>< /CITE> q : این تگ ، یک تگ container و inline است و برای نقل و قول برای یک یا دو کلمه استفاده می شود. یادآوری : تگ های block کل سطر را می پوشاند و تگ های inline تنها دور عنصر را می گیرند . <P> I’M SAID <Q>FONT</Q>BUT MY FRIEND SAID <Q> FONT FACE </Q> </P> CITE : این تگ ، یک تگ CONTAINER و INLINE است و برای نام نویسنده و یا نویسنده کامنت استفاده می شود <P> BUT THEN <CITE> ALI</CITE>SAID <Q> NO THINK THESE FONT WORK BETFER </Q> <P> blockquote : این تگ ، یک تگ container و block است و برای اشاره به مقاله قبلی یا اشاره به یک مرجع خاص معمولا برای یک جمله استفاده می شود. تگ های strong و em : این تگ ها ، تگ های container و inline هستند و برای برجسته سازی و اهمیت کلمات استفاده می شوند. و اما در ظاهر ، تگ strong کلمه را bold و تگem کلمه را italic می کند. این نکته را اضافه کنم که این تگ ها برای موتورهای جستجو از اهمیت خاصی برخوردار است . <P> THIS IS A <STRONG>BOLD TEXT</STRONG> THIS IS A <EM>ITALIC TEXT</EM> </P> خط فاصله بین متون p : فرض کنید می خواهیم در یک پاراگراف به خط جدیدی برویم . برای این کار از تگ <br /> استفاده می کنیم. این تگ ، یک تگ empty است و در ساختار xhtml به صورت <br /> نوشته می شود . نکته مهم : از br اضافی پرهیز کنید <P> THIS IS A TEST <BR /> THIS LINE SHOW AFTER BREAK </P> تعریف تگ های خاص: این قسمت از آموزش در کتاب نیست ولی با توجه به تجربه شخصی بنده در طراحی وب سایت های مختلف( چند نمونه کار های طراحی سایت یک طراح وب سایت را چک کنید) ، ترجیح می دهم این تگ ها در این قسمت بیان شود . این قسمت نیز شامل تگ هایی است که کمتر استفاده می شود ولی میتوانند کاربردی باشند : <abbr> برای توصیف یک عبارت اختصار به کار می رود <P> THE<ABBR TITILE=”SEARCH ENGINE OPTIMIZATION”>SEO</ABBR> IS GOOD FOR YOUR SITE <P> <acronym> برای توصیف نامها ی محاوره ای اختصار <P> CAN I GET THIS <ACRONYM TITLE=”AS SOON AS POSSIBLE”>ASAP </ACRONYM> <P> <address> برای نوشتن اطلاعات تماس <ADDRESS> SHAZINCO <BR/> <A HREF =MAILTO:.. >EMAIL</A><BR/> PHONE :… </ADDRESS> <dfn> برای معنای کلمات استفاده می شود و یا توصیف یک کلمه و یا مثلا جایی که می خواهیم اطلاعات بیشتری در اختیار کاربر قرار دهیم . <P> THE <DFN TITLE=”MICROSAFT WEB BROWSER”>INTERNET EXPLORER </DFN> IS THE MOST POPULAR BROWSER USED UNDERMATER. <P> همانطوری که از مثال های بالا مشخص است این 4 تگ container و inline هستند. در این مثال می توانید نحوه ی استفاده از این تگ ها را در عمل ببینید. تگ های ناشناخته تری هم وجود دارند مانند kdb , samp , var که بهتراست در اینترنت کمی راجع به آنها تحقیق کنید و اگر سوالی در این مورد داشتید با من مطرح کنید . فصل سوم Adding some style همان طوری که قبلا اشاره کردیم لایه دوم وب ، لایه ظاهر آن است که با CSS اعمال می شود. در گذشته برای اضافه کردن ظاهر به سایت از ترکیب دستورات CSS وHtml استفاده می شد ولی امروزه برای این کار می بایست فقط از css استفاده کرد تا وب سایتی استاندارد داشته باشیم. CSS یا همان (Cascading style sheets) زبانی است که برای تغییر ظاهر عناصر صفحات استفاده می شود. که می تواند شامل رنگ ، سایز ویا موقعیت عناصر باشد . برای اعمال css 3 روش وجود دارد: • INLINE • EMBEDDED • EXTERNAL : inline در این روش از خصوصیت style داخل تگ های html استفاده می کنیم بدین صورت : <P STYLE=”COLOR:RED;FONT-WEIGHT: BOLD;”> THIS IS A TEST </P> خصوصیت style می تواند شامل چندین اعلان باشد . اعلان ها با ; از اعلان کناری جدا می شود. به مثال بالا دقت کنید : اعلان رنگ و نوع فونت با ; از هم جدا شده اند هر اعلان شامل یک property و یک value است . عنصر span : یک تگ inline است و تگ جادویی دوم بعد از div برای من به حساب می آید span موارد استفاده زیادی دارد که یک نمونه از آن که مربوط به همین بحث inline style است در مثال زیر آورده شده است: همان طوری که در مثال مشاهده می نمایید برای استایل متفاوت یک و یا چند کلمه و پاراگراف از این تگ استفاده می کنیم. مورد استفاده دیگر span مربوط به طراحی های پیچیده با تعداد تگ div زیاد است که در ادامه بیشتر در مورد آن توضیح خواهیم داد. در این قسمت برای درج استایل (css style ) به سایت 2 روش embedded و externalرا کاملا توضیح خواهم داد. به یقین این قسمت آموزش می تواند تحولی در روش طراحی شما ایجاد کند . پس تا پایان با ما باشید و ما را از نظرات خودتان محروم نکنید. Embedded Style در جلسه قبل با استایل inline آشنا شدید. اما این، روش مناسبی برای دادن ظاهر به سایت نیست و میبایست از روش دیگری استفاده کرد. به طور مثال می بایست استایل را در جایی نوشت و به همه تگ ها گفت از آن استایل خاص برای ظاهر خودشان استفاده کنند. برای این کار کافی است داخل تگ head در بالای صفحه عنصر style را اضافه کنیم: <HEAD> <TITLE>BUBBLE UNDER – THE DIVING CLUB FOR THE SOUTH-WEST UK</TITLE> <META HTTP-EQUIV=”CONTENT-TYPE” CONTENT=”TEXT/HTML; CHARSET=UTF-8″/> <STYLE TYPE=”TEXT/CSS”> P { FONT-SIZE: 12PX; } </STYLE> </HEAD> در مثال بالا گفته شد برای همه تگ های p سایزفونت 12px را در نظر بگیر. دقت نمایید p یک selector است و اعلان ها داخل {} قرار می گیرد. در این مثال selector ما یک تگ p را هدف قرار داده است و می تواند تگ های دیگری و یا کلاس های و یا آی دی های دیگری را هدف قرار دهد. همچنین برای یک selector میتوان چندین اعلان تعریف کرد مانند مثال زیر : <STYLE TYPE=”TEXT/CSS”> P { FONT-WEIGHT: BOLD; COLOR: BLUE; } </STYLE> شکل زیر می تواند کمک کند: چرا embedded style از inline style بهتر است؟ فرض کنید در صفحه 10 تگ p دارید که می خواهید به آن رنگ قرمز بدهید. در صورتی که از inline style استفاده نمایید می بایست 10 مرتبه این کار را انجام دهید و اما اگر از embedded استفاده نمایید تنها کافی است یک بار آن را بالای صفحه اضافه نمایید تا همه ی تگ های p ازآن تبعیت کنند. اهمیت این انتخاب در زمان تغییرات استایل نمایان تر است زیرا در صورت استفاده از inline مجبور خواهید بود تمامی 10 مورد را تغییر دهید اما در embedded تنها تغییرات در یک مکان صورت می گیرد . <STYLE TYPE=”TEXT/CSS”> P { FONT-WEIGHT: BOLD; COLOR: RED; } </STYLE> پس تا اینجا embedded برنده شده است! حالا فرض کنید صفحات بسیار زیادی دارید و می خواهید در تمامی صفحات رنگ همه ی p ها را قرمز کنید . آیا استفاده از embedded مقرون به صرفه است ؟ Extended Style این همان جواب سوال بالاست . با external می توانید یک استایل را برای تمام صفحات داشته باشید و فقط کافی است این فایل را به صفحه مورد نظر وصل کنید . البته دلایل بیشتری هم برای انتخاب external وجود دارد که در دوره پیشرفته خواهم گفت . نحوه ساخت یک External CSS: ادیتور خود را باز نمایید و متن css خود را در آن بنویسید /* CSS FOR BUBBLE UNDER SITE */ P { FONT-WEIGHT: BOLD; COLOR: BLUE; } سپس فایل را با نام style1.css ذخیره کنید همان طوری که فایل html را ذخیره نمودید . حالا می بایست فایل ساخته شده را به صفحه متصل نمایید. نکته : فواید استفاده از کامنت در css همانند html می باشد و برای تفکیک کد های css در پروژه های بزرگ و گروهی استفاده می شود. برای این منظور از عبارت زیر استفاده می کنیم : /* COMMENT HEAR */ اضافه کردن external css به صفحات html: برای این کار از عنصر link داخل تگhead استفاده می کنیم بدین ترتیب: <HEAD> <TITLE>BUBBLE UNDER – THE DIVING CLUB FOR THE SOUTH-WEST UK</TITLE> <META HTTP-EQUIV=”CONTENT-TYPE” CONTENT=”TEXT/HTML; CHARSET=UTF-8″/> <LINK HREF=”STYLE1.CSS” REL=”STYLESHEET” TYPE=”TEXT/CSS”/> </HEAD> Href به فایل css شما اشاره می کند . عناصر rel , type به مرورگر بیان می کند نوع لینک شما چیست تا مرورگر محتوای صفحه را طبق آن تنظیم کند . نکته : عنصر لینک یک تگ empty است و نمی توان آن را در Xhtml به صورت container نوشت . پس نتیجه می گیریم که external css در طراحی سایت ها از همه مناسب تر است و تنها در مواردی مجبوریم که از inline و یا embedded استفاده کنیم . برای این که درک این مطلب برای شما ساده تر باشد به سایت خودم یک سری بزنید و سورس 2 و یا 3 صفحه آن را مشاهده نمایید(برای دیدن تصویر بزرگ روی هر نصویر کلیک کنید) : صفحه اول : صفحه دوم: میتوانید ببینید که همه صفحات به یک css وصل شده اند.
اگر به 2 تصویر بالا دقت کنید و یا سورس وب سایت را ببینید ، متوجه عنصری به نام media خواهید شد. به طور خلاصه این عنصر برای هدف قراردادن سی اس اس برای مدیای خاص مثل screen و یا موبایل و یا مثلا ظاهر صفحه در زمان پرینت است. مثل همیشه توصیه میکنم در این مورد بیشتر تحقیق کنید. نکته : آدرسی که در مثال بالا برای css مشاهده می فرمایید یک آدرس دهی مطلق است که استفاده از آن بری شما ضرورتی ندارد . یعنی اگر فایل css شما کنار فایل html شماست باید از روش زیر استفاده نمایید : <LINK HREF=”STYLE1.CSS” REL=”STYLESHEET” TYPE=”TEXT/CSS”/> در جلسه آینده وارد بحث css می شویم و نحوه نوشتن استایل برای عناصر مختلف صفحه را مرور می کنیم. ادامه دارد ... آموزش طراحی سایت - بخش اول آموزش طراحی سایت - بخش دوم آموزش طراحی سایت بخش سوم آموزش طراحی سایت بخش چهارم آموزش طراحی سایت بخش پنجم
0 Comments
سایت های وردپرسی مشهور
همان طور که می دانید وردپرس یکی از محبوبترین سیستم های مدیریت محتوای سایت (CMS) می باشد که کاملا متن باز و رایگان بوده و به دلیل امنیت بالا از محبوبیت بسیاری برخوردار است. سایت های وردپرسی مشهور زیادی در سراسر دنیا وجود دارد که در این مقاله شما را با ۲۰ نمونه از معروف ترین سایت های طراحی شده با وردپرس آشنا می کنیم. نگاه به این سایت ها و دستاوردهای آنها میتواند گواهی خوبی برای انتخاب طراحی سایت با وردپرس باشد. ۱. وب سایت خبری رویترز رویترز (Reuters) یک خبرگزاری بینالمللی واقع در بریتانیا است که از زیر مجموعه های شرکت تامسون رویترز محسوب شده و دفتر مرکزی آن در لندن قرار دارد. این خبرگزاری در سال ۱۸۵۱ تاسیس شد و اکنون جز معتبرترین خبرگزاری های دنیا محسوب می شود. در طراحی وب سایت این خبرگزاری از وردپرس استفاده شده است که نشانه قدرت مندی این سیستم مدیریت محتوا می باشد. ۲. وب سایت شرکتی پلی استیشن پلی استیشن (Playstation) همان کنسول های بازی رایانه ای کمپانی سونی است که اولین نسخه آن در دسامبر ۱۹۹۴ روانه بازار شد و آخرین نسخه آن پلی استیشن ۴ است که در کنفرانسی در ۲۰ فوریه سال ۲۰۱۳ معرفی شد. در جولای ۲۰۱۳ شبکه پلی استیشن به بیش از ۱۱۰ میلیون کاربر در سراسر جهان دست یافت. طراحی سایت شرکتی پلی استیشن نیز با وردپرس انجام شده و جز سایت های وردپرسی مشهور به حساب می آید. ۳. وب سایت خبری نیویورک تایمز یکی از نمونه سایت های وردپرسی مشهور، وب سایت خبری نیویورک تایمز (New York Times) روزنامه معروف آمریکایی است که دفتر مرکزی آن واقع در نیویورک بوده و اخبار کل دنیا را پوشش می دهد. استفاده از وردپرس در طراحی سایت نیویورک تایمز نشان دهنده امنیت سیستم مدیریت محتوا وردپرس است. ۴. وب سایت رسمی کشور سوئد وب سایت sweden.se سایت رسمی کشور سوئد است که اطلاعاتی درباره فضای فرهنگی و دنیای کسب و کار و وقایع مختلف کشور سوئد به مخاطبان ارائه می دهد. ادارات دولتی سوئد، موسسه سوئد (SI)، کسب و کار سوئد و … از جمله سازمان ها و موسسات حامی این وبسایت هستند. سایت رسمی کشور سوئد نیز جز سایت های وردپرسی مشهور است. ۵. وب سایت خبری تایم یکی از نمونه سایت های وردپرسی مشهور مربوط به هفته نامه آمریکایی تایم (Time) است. مجله تایم در سال ۱۹۲۳ شروع به کار کرد و هم اکنون به عنوان پر مخاطب ترین هفته نامه خبری سراسر دنیا شناخته می شود. ۶. وبلاگ شرکت موزیلا موزیلا (Mozilla) یک بنیاد غیرانتفاعی در حوزه نرم افزار است که در سال ۱۹۹۸ توسط اعضای نت اسکیپ راه اندازی شد. این کمپانی هم محصولات موزیلا را توسعه می دهد و هم پروژه های متن باز رایگان انجام می دهد. وبلاگ موزیلا به کمک وردپرس طراحی شده است. ۷. وب سایت خبری بلومبرگ وب سایت خبری بلومبرگ (Bloomberg) نیز یکی دیگر از سایت های وردپرسی مشهور است. بلومبرگ یک آژانس خبری معتبر واقع در نیویورک است که در سال ۱۹۹۰ تاسیس شده و خدماتی مانند پلت فرم های معاملاتی سهام، آنالیز و سرویس های دیتا به شرکت های مالی ارائه می دهد. ۸. وب سایت خبری مجله ورایتی مجله ورایتی (Variety) یک هفته نامه سرگرمی- تجاری می باشد که اولین بار در سال ۱۹۰۵ در نیویورک آغاز به کار کرد. سایت این مجله که با موضوعات اخبار هنرمندان، پرفروش ترین فیلم های باکس آفیس و … فعالیت می کند هم از جمله معروف ترین سایت های طراحی شده با وردپرس است. ۹. وب سایت شخصی جی زی جی-زی (Jay Z) خواننده مشهور و برنده ۱۷ جایزه گرمی است که در سال ۱۹۶۹ متولد شده است. تا کنون بیش از۵۰ میلیون نسخه از آلبوم های او به فروش رفته و وی جز پرفروش ترین خواننده های سبک موسیقی رپ محسوب می شود. وب سایت شخصی این خواننده معروف هم جز سایت های وردپرسی مشهور بوده و استفاده از وردپرس حاکی از کیفیت بسیار بالای این سیستم مدیریت محتوا می باشد. ۱۰. وب سایت شخصی کیتی پری یکی از نمونه سایت های وردپرسی مشهور، وب سایت شخصی کیتی پری (Katy Perry) خواننده، ترانسه سرا و بازیگر مشهور اهل کالیفرنیا است. نام او در سال ۲۰۱۵ جز لیست “ثروتمند ترین زنان در صنعت موسیقی” مجله فورچون قرار گرفت. ۱۱. وب سایت خبری بی بی سی آمریکا یکی از معروف ترین سایت های طراحی شده با وردپرس مربوط به وب سایت خبری بی بی سی آمریکا است. خبرگزاری تلویزیونی بی بی سی آمریکا در سال ۱۹۹۸ راه اندازی شد و با شبکه اصلی آن تفاوت داشته و منبع درآمد اصلی آن تبلیغات تلویزیونی می باشد. این شبکه دارای بیش از ۷۸ میلیون تماشاگر در آمریکا است. ۱۲. وب سایت خبری مجله فورچون مجله فورچون (Fortune) برای اولین بار در سال ۱۹۲۹ منتشر شد. شهرت این مجله بیشتر به خاطر انتشار لیست سالیانه فورچون ۵۰۰ است که در آن به رتبه بندی پردرآمد ترین شرکت های آمریکا می پردازد. سایت مجله فورچون نیز بر پایه وردپرس طراحی شده است. تا اینجا معلوم شد که یکی از مدل های محبوب طراحی با وردپرس طراحی سایت خبری است. ۱۳. وبلاگ شرکت بلکبری بلک بری (BlackBerry) یکی از کمپانی های معتبر تولید تلفن های همراه هوشمند می باشد که در کشور کانادا واقع شده است. گوشی های این کمپانی سابقا از نظر امنیت بالای آن ها شهرت فراوانی داشتند. وبلاگ کمپانی بلک بری هم جز مشهورترین سایت های طراحی شده با وردپرس است. ۱۴. وب سایت شرکت مرسدس بنز مرسدس بنز یک کمپانی خودروسازی مشهور واقع در شهر اشتوتگارت آلمان است که انواع خودروها را طراحی و تولید می کند. شعار این شرکت «یا بهترین یا هیچ» است و رقیبان اصلی آن در آلمان، کمپانی های آئودی و بی ام و محسوب می شوند. سایت شرکت مرسدس بنز جز مشهورترین سایت های طراحی شده با وردپرس می باشد، فراموش نکنید که شعار این شرکت «یا بهترین یا هیچ» است. ۱۵. وبلاگ فلیکر فلیکر (Flickr) یکی از معروف ترین سایت های اشتراک گذاری عکس و فیلم در اینترنت است که برای اولین بار در سال ۲۰۰۴ ایجاد شد. این سایت به دلیل تعداد بازدیدکنندگان بالای خود جز ۵۰۰ سایت برتر الکسا در جهان محسوب می شود. وبلاگ این سایت معروف نیز با وردپرس طراحی شده است. ۱۶. وب سایت بازی پرندگان خشمگین پرندگان خشمگین (Angry Birds) یک بازی محبوب است که برای اولین بار در سال ۲۰۰۹ توسط کمپانی سرگرمی روویو ساخته شد. این بازی به طور تخمینی بیش از ۱ میلیارد بار دانلود شده و تا کنون نسخه های متنوعی از آن وارد بازار گردیده است. وبسایت پرندگان خشمگین نیز جز مشهورترین سایت های وردپرسی است. ۱۷. وب سایت شرکت والت دیزنی والت دیزنی که بزرگ ترین شرکت رسانه ای سرگرمی دنیا است و اکثرا آن را بخاطر کارتون ها و انیمیشن های جذابش می شناسند، برای اولین بار در سال ۱۹۲۳ تاسیس گردید. سایت شرکت والت دیزنی نیز جز معروف ترین سایت های طراحی شده با وردپرس است. ۱۸. وب سایت شرکت سونی موزیک شرکت سونی موزیک اولین بار در سال ۱۹۲۹ به عنوان یک کمپانی ضبظ موسیقی شروع به کار کرد. این شرکت پس از فراز و نشیب های بسیار نام “سرگرمی موزیک سونی” را اختیار کرد. این شرکت دومین کمپانی بزرگ دنیا در صنعت موسیقی محسوب شده و از کمپانی وارنر جلوتر و از کمپانی یونیورسال عقب تر می باشد. وب سایت این شرکت هم جز مشهورترین سایت های وردپرسی است. ۱۹. وب سایت اتاق اخبار فیسبوک امروزه کسی نیست که شبکه اجتماعی فیسبوک را نشناسد! فیسبوک که در سال ۲۰۰۴ توسط مارک زاکربرگ و دوستانش طراحی و ساخته شد به مرور به بزرگ ترین شبکه اجتماعی تبدیل شد. فیسبوک در خارج از ایران همچنان شبکه اجتماعی فعالی محسوب شده و به دلیل امکانات خوب برای بازاریابی در آینده نیز پر مخاطب باقی خواهد ماند. وب سایت اتاق اخبار فیسبوک نیز بر پایه وردپرس طراحی شده است. ۲۰. وب سایت فیلم007 جیمز باند نام شخصیت داستانی است که در سال ۱۹۵۳ توسط فلمینگ خلق شده و همچنین در صنعت سینما طولانیترین و پولسازترین شخصیت به زبان انگلیسی است. وبسایت فیلم 007 نیز بر پایه وردپرس طراحی شده است. منبع: وبسیما عرفی یک ساختار کلیدی برای تهیه وب سایت های مدرن
اضافه کردن یک ساختار به نام 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 more paragraph.</p> <div>This is a div.</div> <div>The content of each div appears on a new line.</div> <div>But unlike paragraphs, there is no additional padding.</div> <div>A div is a generic block-level container.</div> و خروجی: در واقع این تگ برای مدیریت گروهی از عناصر استفاده می شود و یا به عبارتی با div می توانید صفحه را به قسمت های مختلفی تقسیم نمایید . نکته : بر خلاف تمامی آموزش های دیگر در این جا ابتدا تگ div تدریس می شود و سپس سراغ تگ table یا همان جدول می رویم . به شکل زیر دقت کنید : در این مثال ما صفحه را به قسمت های متفاوتی تقسیم کردیم بالا برای بنر و سمت راست برای منو های سایت و سمت چپ برای قسمت اصلی سایت. دقت کنید که شما داخل تگ div می توانید تمامی عناصر مانند p , h1 , ul , a , img را قرار دهید ولی به طور مثال نمی توانید تگ div را داخل p قرار دهید . با بررسی مثال زیر و نکات آن می توانید تجربه خوبی کسب کنید : در این مثال ما صفحه را به 2 قسمت header و content body تقسیم کرده ایم . در قسمت header از 2 تگ h1 و p استفاده کرده ایم و در قسمت body content از تگ های بسیار زیادی استفاده کرده ایم . در زیر کد هدر نمایش داده شده است : <div id=”header”> <h1>BubbleUnder.com</h1> <p>Diving club for the south-west UK – let’s make a splash!</p> </div> در این مثال علاوه بر توضیح تقسیم بندی سایت با تگ div ، استفاده از attribute بسیار مهم id هم توضیح داده می شود . Id و قوانین آن: • معمولا از id برای تفکیک گروه های بزرگ مانند 2 مثال قبل استفاده می شود • یک نام id فقط یک بار در صفحه قابل استفاده است • Id یک attribute است و header یک value برای آن طبق این قانون : attribute=”value” • نام attribute باید با حروف کوچک باشد مانند id , class و غیره و value آن داخل “” تگ های تو در تو (nesting tag) : در مطالب گذشته گفتیم که در تگ div می تواند تگ های دیگری همچون p , ul و غیره قرار گیرد در حالی که خود تگ div میتواند در داخل تگ div دیگری قرار گیرد که به این نوع تگ های تو در تو گفته می شود . در بسیاری موارد در طراحی های حرفه ای مجبوریم که از تگ های تو در تو استفاده کنیم و این روش نظم خاصی به کار طراحی شما می بخشد . کد زیر می تواند شما را بیشتر با تگ های تو در تو آشنا کند : <div id=”outer”> <div id=”nested1″> <p>A paragraph inside the first nested div.</p> </div> <div id=”nested2″> <p>A paragraph inside the second nested div.</p> </div> </div> در استفاده از تگ های تو در تو باید به قانونی به نام Indenting Markup توجه کرد که شرح می دهد تگ های داخلی را کمی جلوتر از سمت چپ نسبت به والد خود باز کرده و در همان راستا ببندید . همان طوری که می بینید تگ div با id مشخص nested1 کمی با فاصله بیشتر از چپ نسبت به والد خود یعنی تگ div با id مشخص outer باز شده است. نکته دیگری که می بایست برای خوانایی بیشتر در استفاده از تگ های تو در تو دقت نمایید استفاده از کامنت گذاری است که در قسمت های قبل توضیح داده شد . </div> <!– end of inner div –> </div> <!– end of nested div –> </div> <!– end of outer div –> نکته خیلی مهم : استفاده از تگ های تو در توی بی مورد می تواند از ارزش و استاندارد صفحات شما بکاهد و هم چنین هر تگی برای منظوری ساخته شده است مثلا p برای متون بلند و پاراگراف ها .پس در استفاده از تگ ها در طراحی وب خود دقت نمایید . برای تمرین این قسمت از آموزش، شمای تگ های صفحه نمونه کار های طراحی سایت این سایت را برای من ارسال نمایید. در ادامه آموزش در این قسمت یاد خواهید گرفت که چگونه چند صفحه را در کنار هم قرار دهیم و بین آن ها حرکت کنیم. آیا ساختن یک صفحه کافی است؟در قسمت های گذشته ساخت یک صفحه از وب سایت را آموختیم و حالا می خواهیم چند صفحه را در کنار هم داشته باشیم و بین آن ها با لینک دهی حرکت کنیم . در واقع این یک 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 , توضیحات بیشتری ارائه خواهم داد و سپس نوبت اضافه کردن استایل(ظاهر) به صفحه است . برای تمرین این جلسه شما چندین منو را در سایت های مختلف مرور کنید به طور مثال برای امروز به طراحی سایت شازین رجوع نمایید و طرز لینک دهی در این سایت را ببینید. سپس توضیح دهید که چرا صفحاتی که لینک شده است پسوند ندارند؟ پاسخ های خود را به ایمیل بنده ارسال نمایید . بدیهی است که با انجام تمرین ها یک گام از سایرین جلوتر خواهید بود . ادامه دارد وردپرس را می توان بهترین سیستم مدیریت محتوای رایگان دنیا دانست. با اضافه شدن افزونه ها به وردپرس، می توان قابلیت های آن را به شکل قابل توجهی افزایش داد. به دلیل وجود همین افزونه های گسترده طراحی سایت با وردپرس در حوزه های بسیار گسترده ای قابلیت استفاده داشته و این نیز یکی دیگر از دلایل محبوبیت زیاد این cms می باشد. در این مطلب مجموعه افزونه هایی که بیشترین کاربرد را داشته و در واقع بهترین افزونه های وردپرس هستند را به شما معرفی خواهیم کرد. از شما دعوت می کنیم تا انتهای این مطلب، با ما همراه باشید.
تعریف افزونه های وردپرس افزونه یا پلاگین ها در وردپرس، کمک بسیاری به بهبود عملکرد آن دارند. در حال حاضر بیش از 50 هزار افزونه در مخزن وردپرس ثبت شده است که برخی از آنها بسیار خوب و کاربردی می باشد. تمامی این افزونه ها در بخش WordPress Plugins وجود داشته و می توان از آنها استفاده کرد. افزونه های موجود در سایت وردپرس، همگی رایگان هستند و افزونه های پولی با روشهای دیگری در اختیار کاربران قرار داده می شوند. در ادامه به موضوع افزونه های رایگان وردپرس خواهیم پرداخت. افزونه های رایگان وردپرس بسیاری از افزونه های رایگان وردپرس با وجود رایگان بودن، عملکرد بسیار خوبی دارند و می توانید در جهت بهبود عملکرد و گسترش امکانات کاربری و زیرساختی از آنها استفاده نمایید. برخی افزونه ها به دو حالت رایگان و پولی عرضه می شوند که به نسخه رایگان آن می توانید از بخش افزونه های وردپرس ، دسترسی داشته باشید. در صورت نیاز به نسخه پولی نیز، می توانید پس از نصب اقدام به تغییر پلن نموده و آن را پولی کنید. همچنین این امکان وجود دارد که در ابتدا، اقدام به نصب و فعال سازی افزونه پولی نمایید. معرفی بهترین افزونه های وردپرسدر ادامه قصد داریم بهترین افزونه های وردپرس را به شما معرفی کنیم. موارد به شرح زیر می باشد: • افزونه Akismet با قابلیت مقابله با هرزنامه ها – بصورت پیشفرض در وردپرس وجود دارد. • افزونه Contact Form 7 برای ایجاد فرم در سایت • افزونه Yoast SEO برای مدیریت سئوی داخلی سایت • افزونه kk Star Ratings برای ستاره دار کردن مطلب در گوگل • افزونه AMP برای اضافه کردن استاندارد amp به صفحات سایت • افزونه Google Analytics MonsterInsights برای اتصال گوگل آنالیتیکس به وردپرس • افزونه Jetpack که یک افزونه چند کاربردی محسوب می شود. نظیر بکاپ، امنیت، اشتراک گذاری، بهبود ساختار و … • افزونه Classic Editor که ویرایشگر کلاسیک وردپرس است. قبل از نسخه 5 بصورت پیشفرض در وردپرس قرار داشت. • افزونه bbPress برای ایجاد انجمن در وردپرس • افزونه Gutenberg که ویرایشگر پیشفرض وردپرس از نسخه 5 می باشد. • افزونه Woocommerce که مخصوص ایجاد فروشگاه اینترنتی در وردپرس می باشد. • افزونه Wordfence Security که مخصوص تامین امنیت وردپرس می باشد. • افزونه TinyMCE Advanced برای اضافه شدن امکانات بیشتر در ویرایشگر – مناسب نسخه قبل از 5 • افزونه All in One SEO Pack که یک افزونه سئوی داخلی محسوب می شود. • افزونه Elementor که یک برگه ساز نسبتا پیشرفته برای وردپرس می باشد. • افزونه Google XML Sitemaps که توسط آن می توان نقشه سایت برای وردپرس ایجاد نمود. • افزونه WP Super Cache که کش را برای سایت فعال کرده و موجب افزایش سرعت لود سایت می شود. • افزونه Page Builder by SiteOrigin که یک برگه ساز نسبتا پیشرفته برای وردپرس می باشد. • افزونه TablePress برای قراردادن جداول زیبا با ویژگی های غنی در پست ها و برگه ها • افزونه UpdraftPlus WordPress Backup Plugin برای بکاپ گیری و ریستور اطلاعات • افزونه Autoptimize برای فعال سازی کش و بهینه سازی نسبی سایت به لحاظ سرعت لود • افزونه Redirection برای مدیریت صفحات خطا، همچنین امکان ریدایرکت صفحات بصورت 301 و … افزونه های پیشنهادی توجه داشته باشید که نیاز نیست همه افزونه های فوق را نصب نمایید. تنها باید توجه داشته باشید که کدامیک از آنها برای شما لازم است که بسته به نوع و مدل فعالیت، متفاوت می باشد. اما مجموعه افزونه هایی به شما پیشنهاد می شود بصورت زیر می باشد: • افزونه اکیسمت – صفحه مخصوص افزونه در مخزن افزونه های وردپرس : Akismet Anti-Spam • افزونه فرم تماس 7 – صفحه مخصوص افزونه در مخزن افزونه های وردپرس : Contact Form 7 • افزونه یواست سئو – صفحه مخصوص افزونه در مخزن افزونه های وردپرس : Yoast SEO • افزونه صفحات سریع موبایل – صفحه مخصوص افزونه در مخزن افزونه های وردپرس : AMP نتیجه گیری و جمع بندیبرخی از وبمسترها به این موضوع عادت کرده اند که برای همه چیز از افزونه استفاده کنند. در صورتی که باید توجه داشته باشید هر افزونه بسته به ساختار، بار پردازشی به هاست تحمیل می کند که می تواند موجب مصرف بیش از حد منابع شود. بر همین اساس، قبل از انجام موضوعی تحقیق کنید که آیا بدون افزونه نیز اینکار امکانپذیر است یا خیر؟ برای مثال اگر نیاز به فعال سازی کش یا ریدایرکت دارید این موارد بدون افزونه نیز قابل انجام است. منبع: میزبانفا در ابتدا این را می دانیم که در این دوران برای هر کسب و کار و شغلی داشتن یک وب سایت واجب می باشد و تقریبا همه شما از ضرورت طراحی سایت برای کسب و کار تان با خبرید. مهمترین نکاتی که باید جهت انتخاب بهترین شرکت طراحی سایت بدانید را در این مقاله به طور کامل و مفصل توضیح دادیم. اگر میخواهید جواب سئوالات خود را مثل طراحی سایت برای شرکت را به چه کسی بسپاریم؟ آیا برای طراحی سایت می توانیم به شخص یا فری لنسر اعتماد کنیم یا اینکه باید حتما با یک شرکت طراحی سایت رسمی قرارداد ببندیم؟ در کل برای انتخاب یک شرکت طراحی سایت حرفه ای باید به چه نکاتی توجه داشته باشیم؟ و…. بدانید این مقاله را از دست ندهید. انتخاب یک شرکت طراحی سایت بسیار مهم است زیرا طراحی سایت شما در ذهن مخاطب تاثیر غیر مستقیم می گذارد و اگر سایت شما توسط یک طراح سایت حرفه ای انجام شده باشد به طور خودکار عوامل مهم و امکانات ضروری در طراحی سایت را رعایت می کند و دیگر نیازی نیست خود شما وسواس زیادی در کار بخرج دهید چون طراح سایت حرفه ای حواسش به همه اصول طراحی سایت خواهد بود. توصیه می کنیم هنگام انتخاب شرکت طراحی سایت، به جای چانه زنی برای قیمت طراحی سایت، بیشتر به کیفیت و امکانات سایت فوکوس کنید نه صرفا تخفیف گرفتن از طراح سایت. برای مثال یکی از مواردی که اهمیت بالایی دارد ریسپانسیو بودن وب سایت شماست که در طراحی سایت باید توجه کافی شود. اگر درباره ریسپانسیو بودن وب سایت می خواهید بدانید توصیه می کنم حتما مقاله طراحی سایت ریسپانسیو یا واکنش گرا را بخوانید چون بسیار واجب است که قبل از طراحی سایت به نکته ریسپانسیو بودن توجه داشته باشید.
از دیگر مواردی که باید در طراحی سایت مورد توجه قرار دهید بحث تجربه کاربری یا UX می باشد. نکته دیگری که از موارد موثر در وب سایت است و باید به آن نیز توجه شود نکات کلیدی که برای نمایش عکس محصول خود باید رعایت کنیم می باشد. برنامه نویسی اختصاصی با کد دستنویس بهتر است یا سیستم مدیریت محتوا مثل wordpress یکی از فاکتورهایی که باید در زمان انتخاب شرکت طراحی سایت مورد توجه قرار دهید. زبان برنامه نویسی و یا استفاده از سیستمهای مدیریت محتوا مانند وردپرس، جوملا و … است. به سادگی بخواهیم این موضوع را بگوییم، اگر سایت شما طراحی سایت دستنویس و کدنویسی اختصاصی شود قادرید هر زمانی هر امکانی به آن اضافه و کم نمایید ولی در سیستم وردپرس و جوملا اینطور نیست مگر زمانی که یک برنامه نویس php حرفه ای سایت شما را طراحی کند که هزینه آن به صرفه نخواهد بود. چرا طراحی سایت اختصاصی و دستنویس در مقایسه با سیستم های مدیریت محتوا مثل ورد پرس و جوملا ارجحیت دارد هسته وردپرس برای راه اندازی سایت شخصی و وبلاگ طراحی شده است و اصولا وردپرس یک سیستم وبلاگ است، با این وجود وردپرس هیچ محدودیتی در اجرای خواسته های مخاطبان و مشتریان خود ندارد. هر کاری که یک سایت بتواند انجام دهد با وردپرس هم قابل انجام است. اما مسئله هزینه انجام این درخواست ها است. هنگامیکه صحبت از یک سایت تخصصی مانند سایت یک فروشگاه یا سایت یک آموزشگاه و یا یک سایت با رتبه برتر در گوگل می شود شما در وردپرس باید دست به دامان پلاگین ها شوید. پلاگین های زیادی امروزه در دنیای وب وجود دارد اما همه ی آنها مناسب نیستند و قبل از استفاده حتما سعی کنید پلاگین های مناسب برای کارتان را پیدا کنید. پلاگین ها بصورت ماژولار به کدهای شما اضافه شده و به سادگی باعث می شوند که سایت شما کند شود. درحالیکه هنگام نوشتن یک نرم افزار تخصصی برای مشتریان، سفارشی سازی صورت می گیرد یعنی آنکه شما در سایت خود تنها کدهایی را خواهید داشت که سایت شما به آنها احتیاج دارد. این موضوع به افزایش سرعت نرم افزارهای مدیریت محتوای تخصصی می انجامد. به طور کلی طراحی سایت با وردپرس زمانی مشکل پیدا میکند که شما بخواهید یک کار خاص انجام دهید و حجم بازدید یا محتوای شما زیاد باشد. به عنوان مثال سایت های خبری که بازدید بالایی دارند و حجم مطالب آنها زیاد است از نظر مصرف منابع به مشکل برمیخورند و همچنین برای کارها خاص مانند فروشگاه های اینترنتی قطعا شما نمی توانید یک فروشگاه پربازدید با حجم مخاطب بالا داشته باشید و به سادگی به آنها خدمات بدهید. در واقع سیستم های وردپرس مقیاس پذیر نیستند. مشکل امنیت، در صورتی که وردپرس را بروزرسانی نکنید و از افزونه های اصلی استفاده نکنید، سایت شما می تواند به سادگی هک شود. بنابراین افرادی که اطلاعات فنی خیلی پایینی دارند و سایت وردپرس خود را بروزرسانی نمی کنند در این زمینه با مشکلات زیادی ممکن است روبرو شوند. همچنین برخی از افزونه ها و قالب های رایگان وردپرس موجود نیز باید حتما از مارکت های معتبر تهیه شوند تا مشکلی از جهت سو استفاده از سایت در آنها بوجود نیاید. بسیاری از شرکت ها هنگام راه اندازی کسب و کار خود تلاش میکنند نمونههای موفق را بررسی کرده و از عملکرد آنها الگوبرداری کنند. از همین رو تصمیم میگیرند که سایت آنها به زبان php باشد یا asp و یا حتی تصمیم میگیرند که سایت باید با سیستمهای مدیریت محتوای رایج مانند وردپرس طراحی شود یا از یک CMS اختصاصی بهره بگیرد. زبان برنامه نویسی یا سیستم مدیریت محتوا به تنهایی نمیتواند دلیل بر حرفه ای بودن شرکت طراحی سایت باشد و چیزی که مهم است تسلط آن برنامه نویس یا شرکت طراحی سایت برآن زبان برنامه نویسی است حالا یا با php و یا با asp.net با شد. این نکته ایست که باید در انتخاب بهترین شرکت طراحی وب سایت به آن توجه داشته باشید. از کجا بفهمیم که آن برنامه نویس یا شرکت طراحی سایت تسلط دارد یا خیر؟ جواب این سوال را میتوانید از روی سایت ها و نمونه کارهای آن شرکت بررسی کنید. به طور کلی میتوان گفت هر زبان برنامه نویسی یا سیستم مدیریت محتوایی که توسط یک فرد خبره و توانمند به کار گرفته شود میتواند شما را به هدفنهایی یعنی طراحی سایت و سامانه های تحت وب (وب سایت) ارزشمند برساند و شما به جای انتخاب زبان باید به دنبال انتخاب یک متخصص باشید و سپس در پیاده سازی امکانات مورد نظر خود به او کاملا اعتماد کنید. در ادامه فاکتورهای مهم در انتخاب طراح سایت و شرکت طراحی سایت را با هم مرور میکنیم. طراحی سایت فروشگاهی، طراحی وب سایت شرکتی هدف هر مجموعه یا کسب و کار از راه اندازی یک سایت اینترنتی متفاوت است. برای هر نوع سایت اینترنتی میتوان متخصصین بسیاری در فضای رقابتی طراحی سایت پیدا کرد. بعنوان مثال شرکت هایی هستند که به طور تخصصی بر سایت های آژانس مسافرتی، وب سایت املاک، سایت شرکتی و یا وب سایت فروشگاهی رو یک کدام تسلط ویژه ای دارند و بیشترین تمرکزشان روی طراحی سایت مورد نظرشان است. البته تخصص در یکی از زمینههای طراحی سایت مانند طراحی سایت فروشگاهی، طراحی سایت شرکتی و طراحی سایت های خلاقانه به معنی ضعف آن مجموعه در انجام سایر پروژهها نیست ولی هنگامیکه بین دو یا چند مجموعه حق انتخاب دارید میتوانید تصمیم گیری خود را براساس نمونه کارهای موفق و حوزه های تخصصی هرکدام از آنها انجام دهید. میتوان گفت به طور معمول اکثر شرکتها در زمینه طراحی وب سایت با سابقه و دارای نمونه کار هستند ولی فروشگاههای اینترنتی و سایتهای خلاقانه نیازمند تجربه و تخصص بیشتری خواهند بود. میزان رضایت مشتریان نمونه کارهای قرار گرفته در سایت یک شرکت معمولا تجربیات موفق و پروژه های عالی آنها هستند در حالیکه ممکن است تنها ۲۰ درصد از مشتریان آن مجموعه را پوشش داده باشد. اگر میتوانید با جستجوی اینترنت سایر نمونه کارها و نظرات کاربران در شبکههای اجتماعی را آنالیز کنید. هرچقدر کیفیت و عملکرد یک شرکت طراحی سایت خوب و با کیفیت ارزیابی شود نمیتوانیم از فاکتور قیمت بگذریم، از چیزی که می تواند تاثیر زیادی بر تصمیم گیری ما و انتخاب آن شرکت طراحی سایت داشته باشد. قیمت طراحی سایت با مراجعه به شرکتهای طراحی سایت و تعریف پروژه خود ممکن است قیمتهای کاملا متفاوت و با اختلاف زیاد دریافت کنید. این اختلاف قیمت تا حدی به بزرگ بودن شرکت طراح سایت و کیفیت کاری او مرتبط است ولی بخشی از تعیین هزینه مرتبط با سختی پروژه و امکانات موجود در سایت خواهد بود. همانطور که قبلا در مقاله ی تفاوت طراحی سایت شرکتی ارزان و حرفه ای گفته شد، در روند تعیین قیمت طراحی سایت باید توجه کنید که شرکت مورد نظر تا چه حد در مورد امکانات سایت و درخواستهای شما دقیق میشود. به عبارت دیگر مجری طرح برای تعیین قیمت ابتدا باید درک درستی از ابعاد پروژه و تخمینی از زمان انجام آن داشته باشد. اگر هزینه طراحی سایت شما بدون در نظر گرفتن امکانات و یا زمان انجام اعلام گردد دو خطر جدی را برای شما خواهد داشت: ممکن است شرکت طراح ابعاد پروژه را به درستی درک نکرده باشد و در ادامه هزینه های جانبی زیادی را برای انجام درخواستها به شما تحمیل کند و یا حتی از ادامه اجرای آن خودداری کند. ممکن است این هزینه برای انجام پروژه شما زیاد باشد و عملا چیزی که مورد نظر شماست با هزینهای به مراتب کمتر قابل انجام بوده باشد. به طور کلی میتوان گفت هرچقدر جزئیات بیشتری در مورد طراحی سایت خود و امکانات آن به طراح سایت ارایه دهید قیمتی که به شما اعلام میشود به واقعیت نزدیک تر خواهد بود. در نظر داشته باشید که هزینه طراحی سایت فروشگاهی به مراتب بالاتر از هزینه طراحی سایتهای شرکتی یا لندینگهای خلاقانه است. هزینه طراحی سایت اختصاصی و سیستم مدیریت محتوا مثل وردپرس wordpressو جوملا از آنجا که یک سایت وردپرسی می تواند بدون هیچ گونه هزینه ای بارگذاری شود طبعاً هزینه های آن از یک سایت سفارشی کمتر است. اما هنگامیکه در دنیای واقعی و تجارت حرفه ای بخواهید مقایسه کنید. طراحی یک سایت با وردپرس در نهایت هزینه ای بیشتر از یک سایت طراحی شده با CMS اختصاصی دارد. به خاطر داشته باشید که بیشتر پلاگین ها و ماژول های وردپرس خارجی بوده و ما در ایران برای خرید کالا از خارج با مشکلاتی مانند تحریم و کمبود ارز مواجه هستیم. بنابراین یک سایت وردپرسی شاید به تنهایی گزینه مناسبی برای شما باشد ولی عملاً استفاده از آن بعنوان یک فروشگاه آنلاین یا یکی آموزشگاه آنلاین و یا یک دفتر خدمات مشتریان آنلاین با مشکلاتی روبرو خواهد شد. زیرا که تهیه تمام این امکانات به صورت حرفه ای نیاز به صرف هزینه به دلار و پرداخت آن به شرکت های آمریکایی است. بنابراین شما عملاً با انتخاب وردپرس برای طراحی سایت های حرفه ای برای سایت خود محدودیت های فراوانی را از قبل تعیین خواهید کرد. طراحی سایت حرفه ای، سرعت سایت، قیمت طراحی سایت در طراحی وب سایت و به طور کلی در کد نویسی سه عامل شامل ۱- کیفیت ۲- سرعت ۳- قیمت از اهمیت بالایی برخوردار است البته هر سه عامل در کنار هم را نمی توان داشت علت آن این است که اگر یک وبسایت با کیفیت را در زمان کوتاهی بخواهید طراحی شود پس قطعا هزینه انجام پروژه و قیمت آن افزایش می یابد و همینطور اگر بخواهید سرعت بیشتر شود و قیمت طراحی سایت کم باشد قطعاً تاثیر منفی بر کیفیت طراحی وب سایت خواهد داشت و در آخر اگر یک سایت حرفه ای با کیفیت بالا بخواهید و انتظار کمترین هزینه را داشته باشید عملا برای شرکت طراحی سایت ارزش مادی نداشته و از اولویت کاری او کمتر خواهد شد و در نتیجه زمان انجام پروژه بالا خواهد رفت پس زمانی که پیشنهاد قیمت یک شرکت طراحی سایت را بررسی میکنید حتما به زمان انجام کار و ارتباط مستقیم آن با کیفیت دقت کنید. این را بدانید که شرکتی ادعای طراحی سایت با هزینه پایین و در کوتاهترین زمان را داشت مطمئن باشید این یعنی یک وب سایت با کیفیت پایین و جز این با این شرایط طراحی سایت حرفه ای و باکیفیت یک دروغ بزرگ خواهد بود. می توانید براساس نوع پروژه و سایتی که میخواهید طراحی شود بین هزینه طراحی سایت و زمان انجام طراحی وب سایت یکی را انتخاب کنید ولی هیچ گاه کیفیت وب سایت خود را فدای دو فاکتور دیگر در طراحی سایت نکنید. سابقه شرکت طراحی سایت و انتخاب یک شرکت طراحی وب سایت با تجربه تجربه در هر کاری میتواند چراغی برای کارها و فعالیت های آتی باشد. داشتن سابقه به معنای تجارب بیشتر است. به همین دلیل زمانی که شرکت طراحی سایت سابقه فعالیت بیشتری داشته باشد، تجربه و میزان مهارت آن نیز در ارائه خدمات بیشتری است لذا در انتخاب بهترین شرکت طراحی سایت این عامل را نیز در نظر داشته باشید. دیدن چارت سازمانی و نحوه تقسیم امور در شرکت طراحی سایت شرکت های طراحی سایت متشکل از افراد متخصص و خبره است که هر یک در یک بعد فعالیت دارند. بهترین شرکت های طراحی سایت آنهایی هستند که تقسیم بندی بیشتری برای کارها و امورات دارند. به هر میزان که امورات شرکت تخصصی تر انجام شوند، کارکنان با مهارت بیشتری آن را بر عهده میگیرند و احساس مسئولیت بیشتری نیز خواهند داشت. موقعیت مکانی و آدرس شرکت طراحی سایت اطمینان حاصل کنید که شرکت انتخابی شما دارای موقعیتی است که در صورت لزوم می توانید با آنها ملاقات کنید. دانستن این که شرکت طراحی سایت مدنظر شما کجاست، می تواند از هر گونه تقلب و حقه جلوگیری نماید. مثلا شخصی می تواند در داخل خانه خود را صاحب یک شرکت طراحی سایت معرفی نماید. پس بهتر است حتی موقعیت مکانی شرکت خود را در وب سایت قرار داده و تمامی نکاتی که مشتریان برای ارتباط با شما نیاز دارند را هم قرار دهید. هاست ارائه شده برای وب سایت شما در مورد وضعیت هاست شرکت طراحی سایت مورد نظر حتما از آنها سوال کنید و اینکه این هاست و یا سرور آنها کجاست و توسط چه شرکتی پشتیبانی می شود. پایداری و کیفیت بالای هاستینگ ها تاثیر زیادی در موفقیت و توسعه وب سایت شما دارد. در ضمن هاست انتخابی شما تاثیر زیادی بر سئو سایت شما نیز دارد . منبع: https://paydarsamane.com/blog/ ساخت اولین صفحه وب سایت شما در آموزش طراحی سایتدر هر جای کامپیوتر که دوست دارید فلدری به نام 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 الزامی است . این بخش شامل آموزش مرحله به مرحله آموزش طراحی وب سایت می باشد که سعی می شود هر هفته مقاله ای در این زمینه به شما عزیزان ارائه کنیم. در اولین قسمت از این سری آموزش طراحی سایت با ما باشید. این دوره آموزش طراحی سایت بر اساس کتاب 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 |