این بخش شامل آموزش مرحله به مرحله آموزش طراحی وب سایت می باشد که سعی می شود هر هفته مقاله ای در این زمینه به شما عزیزان ارائه کنیم. در اولین قسمت از این سری آموزش طراحی سایت با ما باشید.
این دوره آموزش طراحی سایت بر اساس کتاب Build Your Own Website The Right Way Using HTML & CSS از انتشارات Sitepoint می باشد.
چه کسانی باید این کتاب را بخوانند؟
این کتاب برای کسانی مفید است که از آموزش طراحی سایت اطلاعی ندارند و می خواهند تازه به جمع طراحان سایت ملحق شوند پس مسلما از ساده ترین نکات آغاز می شود.
این کتاب شما را با HTML و CSS آشنا میکند و راه را برای ساخت یک وب سایت استاندارد به شما نشان می دهد.
ادامه مطلبریسپانسیو بودن سایت به معنی سازگاری آن با انواع صفحه های نمایش است.امروزه طراحی سایت ریسپانسیو (Responsive) به امری حیاتی برای وب سایت ها تبدیل شده است.هرچند ریسپانسیو بودن و سازگاری یک وب سایت با صفحه های موبایل و تبلت و حتی تلوزیون های خانگی نیاز به تلاش و حتی کمی هزینه بیشتر دارد اما نتیجه و فواید آن کاملا ارزش این تلاش ها را دارد.
ادامه مطلبشاید نوع مرورگرهایی که کدهای HTML را ترجمه می کنند عموما" تاثیری را در طراحی وب سایت شما خواهند گذاشت. در سال 2007 سیستم آمارگیری W3Schools نشان داد که محبوب ترین مرورگرهای وب سایت ، اینترنت اکسپلورر58% و فایرفاکس 31% از بازار را تصرف کرده اند.
مرورگرهای دیگر که دارای قابلیت های برجسته ای هستند شامل اپرا، سافاری و موزیلا می باشند. در حالی که کنسرسیوم شبکه جهانی وب استانداردها و معیارهای رسمی Html را منتشر کرده است اما فضای قابل توجهی برای تفسیر این قوانین وجود دارد.
ادامه مطلبشاید بسیاری از کاربران وب سایت های اینترنتی ندانند که از نرم افزارهایی مانند فتوشاپ هم در طراحی وب سایت استفاده می شود. در واقع طراحان وب امروزه سعی می کنند بسیاری از کارهایی که مربوط به طراحی front-end یک وب سایت است را با کمک این نرم افزار انجام دهند تا ظاهر وب سایت زیباتر و کاربر پسند تر شود. شاید در مورد کار با فتوشاپ در جاهایی مثل عکاسی یا گالری های هنری شنیده باشید ولی از شنیدن کاربرد فتوشاپ در طراحی سایت، تعجب کنید. من در این مقاله در بلاگ وردپرس 88 سعی کرده ام تا حدودی این مطلب را برای شما باز کنم و اگر فرصتی باقی بود تک به تک مراحل طراحی سایت با فوتوشاپ را برای شما شرح خواهم داد.
از Edit عکس ها تا طراحی wall paper و یا تصاویر پیش زمینه (background) و یا آی ها و نمادهای مختلفی که در گوشه و کنار وب سایت ها به کار می روند از فتوشاپ کمک گرفته می شود. در حال حاضر کسانی که می خواهند طراحی وب به صورت حرفه ای انجام دهند، بهتر است جهت کار و یادگیری با این نرم افزار هم اقدام کنند. در واقع فتوشاپ یکی از بهترین نرم افزارهای گرافیکی دنیاست که می توان با کمک ابزارها و امکانات مختلفی گرافیکی گسترده و متنوع آن حتی اقدام به طراحی قالب یک سایت کنید.
ادامه مطلبطراحی وب سایت با ویژوال استودیو یکی از کاربردهای مهم و اصلی این نرم افزار شرکت مایکروسافت است. همانطور که می دانید نرم افزار ویژوال استودیو (Visual Studio) نوعی محیط یکپارچه جهت توسعه نرم افزار (IDE) است که جهت برنامه نویسی و توسعه نرم افزارهای تحت ویندوز، وب سایت و یا برنامه های تحت وب بکار می رود.
یکی از کاربردهای مهم این محیط برنامه نویسی که سالهاست مورد توجه بسیاری از برنامه نویسان و طراحان وب سایت قرار گرفته، طراحی وب سایت است. بطوری که گفته می شود اکنون ویژوال استودیو یکی از برترین نرم افزارهای طراحی سایت به شمار می رود.
ادامه مطلبتایپوگرافی در طراحی وب سایت کاربردهای زیادی دارد. تایپوگرافی (Typography) نوعی هنر و مجموعه تکنیک هایی است که جهت خوانا و زیباتر شدن نوشته ها و متن های وب سایت های اینترنتی بکار می رود. تایپوگرافی به ما کمک می کند که سایت هایی زیبا و جذاب داشته باشیم که کاربران هنگام بازدید از وب سایت و خواندن متن ها و نوشته ها، تشویق به ادامه خواندن آنها شوند و مطالب کاملا خوانا و زیبا بنظر بیایند.
خوشبختانه امروزه ابزارها، اپلیکیشن ها و نرم افزارهای متعددی (مانند: Google Fonts، Font Awesome،Adobe Typeface، Apple Typeface و.) در اختیار طراحان سایت قرار گرفته که موجب شده قواعد تایپوگرافی هر چه بهتر در سایت های اینترنتی پیاده سازی شده و جذابیت بصری آنها برای کاربران بیشتر شود.
ادامه مطلبطراحی سایت تخصصی و حرفه ای در عمل وظیفه ی شرکت هایی است که نیروی های متخصصی در امر برنامه نویسی دراختیار دارد و قادر به برنامه نویسی و طراحی backend و frontend سایت هستند. طراحی سایت تخصصی فقط شامل طراحی یک سایت زیبا و دارای نمهای ظاهری مطابق با سلیق ما نیست، هرچند که این موضوع خود کم حائز اهمیت نیست. اما طراحی سایت حرفه ای و تخصصی باید براساس نیازها ، اهداف از پیش تعیین شده برای موفقیت باشد و علاوه بر ظاهر جذاب، کار خود را به درستی انجام دهد، روی مخاطب تاثیر لازم را بگذارد و رسیدن به اهداف مهم را تسهیل نماید.
معمولا افرادی که می خواهند برای طراحی وب سایت و یا اپلیکیشن برنامه نویسی وب را یاد بگیرند، این دغدغه را دارند که برای شروع باید از کجا آغاز کنند؟ چه زبان هایی را فرابگیرند؟ چه نکات خاصی را باید یاد داشته باشند؟
برای شروع لازم است این نکته را بدانید که به طور کلی دو نوع وب سایت وجود دارد که استاتیک و داینامیک نامیده می شوند. وب سایت استاتیک، ایستا و وب سایت داینامیک، پویا نیز نامیده می شود. با ما همراه باشید.
آیا میدانستید میتوانید در وردپرس انجمن راه اندازی کنید؟ بله ، با افزونه های انجمن سازی که امروز به شما معرفی خواهیم کرد میتوانید تالار گفتگو در وردپرس راه اندازی کنید.
همانطور که شما به عنوان یک وبمستر و مدیر سایت می دانید داشتن انجمن مزایای بسیار زیادی دارد برای مثال در یک سایت برای گفت و گو و تبادل نظر بین کاربران بسیار دارای اهمیت است. انجمن ها میتوانند به اطلاع رسانی ها کمک کنند و مشارکت‌های کاربران انجمن باعث میشود وبسایت شما در نتایج موتورهای جستجو در رتبه بالاتری قرار بگیرد و هنگامی که آنها شرکت می کنند، احتمال بیشتری میرود که محصولات شما را خریداری کرده و آنها را به دوستان و خانواده خود توصیه کنند و فروش محصولات شما بالا رود ، همین امر رتبه شما را در نتایج جست‌وجو افزایش خواهد داد و موجب موفقیت بیشتر شما در کسب و کارتان خواهد شد.
ادامه مطلبWireframing یا وایرفریمینگ را میتوانیم اولین و مهمترین قدم در طراحی سایت عنوان کنیم. قدمی که کارهای شمارا پیش می‌برد. چون هم جالب هست و هم دوست‌داشتنی و راحت.
اگر به‌شخصه نظر من را درباره طراحی سایت شرکتی و یا فروشگاهی برای راه اندازی کسب و کار اینترنتی بپرسید، می‌گویم: فقط شروع کنید و هیچ نیازی به وایرفریمینگ و این داستان‌ها نیست. چون معتقدم که نباید کمال طلب بود. کارتان را استارت بزنید و حتی شده با یک طرح ساده شروع کنید. بعداً فرصت برای تکمیل سایت خواهید داشت.
ادامه مطلبCSS sprite یک تکنیک بهینه سازی عملکرد طراحی سایت است که تصاویر چندگانه را به یک تصویر منفرد به نام یک صفحه ی sprite یا مجموعه کاشی ترکیب می کند. Sprites با کاهش تعداد بارگیری های لازم برای رندر یک صفحه وب، تراکم شبکه را کاهش می دهد.
شما با استفاده از تکنیک CSS Sprite میتوانید سرعت سایت خود را تا حد زیادی افزایش دهید. تا همین چند وقت پیش همه طراحان سایت عکس ها را به تصاویر کوچکتر تقسیم میکردند تا صفحات سریعتر بارگزاری شوند ولی این تکنیک با فریب چشم انسان و نشان دادن تصاویر در هر گوشه از صفحه این حس را میدهد که سرعت بارگزاری افزایش یافته است ولی در واقع هرکدام از این تصاویر یک فراخوان از HTTP را بهمراه دارد و بازدهی صفحه شما را به شدت کاهش میدهد.
ادامه مطلب
در مورد طراحی سایت املاک باید گفت که امروزه حتی کاربرانی که از اینترنت سررشته ای ندارند و یا اهل وب سایت و به اصطلاح وب گردی نمی باشند از اطرافیان خود می خواهند تا در اینترنت یک جستجویی را انجام داده تا شاید ملک و زمین مورد نظرشان را پیدا نموده و یا حتی مشتری خوبی را پیدا نموده و آن را بفروشند. چرا که باید قبول داشته باشیم تبلیغات از نوع سنتی امروزه چندان جایگاه مطمئن و مستحکمی نسبت به گذشته ندارند. بنابراین وجود یک سایت املاک حتی اگر جزء این صنف هم نیستید میتواند آینده شغلی شما را دگرگون نماید.
همه وب سایت ها به روش خاص خود منحصر به فرد هستند. ما روند ایجاد سایت فروشگاهی مانند انیمیشن ، پیش نمایش محصول به صورت 360 درجه ، فیلتر پیشرفته و جستجوی محصول پویا را مشاهده کرده ایم.
با این حال ، این روند نرخ تبدیل یا تجربه کاربر قوی را تضمین نمی کند. عناصر خاصی وجود دارد که هر سات فروشگاهی باید از این نظر مرتبط و واجد شرایط برای رقابت با رقبا باشد.
در اینجا لیستی از 15 ویژگی ضروری وجود دارد که خریداران آنلاین را به خود جلب می کند.
این مورد از اصل سادگی ناشی می شود که در آن اشاره می شود به اینکه سادگی باید یک هدف اصلی در طراحی سایت باشد و باید از پیچیدگی های غیر ضرور اجتناب شود.
البته سادگی هدفی است برای انجام یک طراحی خوب که نباید ظرافت را فدای آن کنید.
در واقع ، مطالعات نشان می دهد که 76٪ از مصرف کنندگان می گویند مهمترین ویژگی یک وب سایت سهولت استفاده از آن است.
هدف این است که به خریداران کمک کنیم تا سریعتر و بدون اینکه به پیچیدگی های غیر ضروری برسند و راه را برای خرید مسدود کنند، به آنچه می خواهند برسند. فروشندگان آنلاین ، فقط چند دقیقه و یا حتی می توان گفت چند ثانیه برای فروش محصولاتشان زمان دارند. با ارائه دسته بندی های خرید ، فیلترها و قابلیت مقایسه ، بر تجربه کاربر متمرکز شوید.
آیا شما قصد انجام طراحی سایت حرفه ای برای خودتان دارید؟ آیا به دنبال یک نرم افزار مناسب برای انجام این کار هستید؟در این بخش از مقالات شرکت نوپرداز من لیستی از بهترین نرم افزارهای طراحی سایت را که می توانید از آن ها استفاده کنید، قرار داده ام.
نرم افزار طراحی سایت Dreamweaver
Adobe Dreamweaver یک نرم افزار طراحی سایت حرفه ای محبوب است که به طور گسترده ای توسط توسعه دهندگان وب و طراحان استفاده می شود.
ادامه مطلبمی خواهید طراحی وب سایت انجام دهید! محتوا نوشته شده است ، بستر انتخاب شده و وایرهای فریم نیز تأیید شده اند. تنها چیزی که باقی مانده اینست که بنشینید جلوی کامپیوتر و یک طراحی زیبا که هم خودتان و هم مشتری راضی باشد را انجام دهید. اما وای به روزی که ذهنتان قفل کند و هرچقدر سعی کنید هیچ ایده ای به ذهنتان نرسد، در این لحظات من این احساس را دارم که در یک اتاق محبوس شده ام و ایده ها در حال فرار از من هستند :). در این حالت برای رهایی از مشکل من شخصا سعی می کنم به چند منبع نگاه کنم تا دوباره خلاقیتم جاری شود. در این پست سعی کرده ام لیستی از وب سایت های که من معمولا برای ایده گرفتن در طراحی وب سایت از آنها استفاده می کنم و به عنوان بهترین منابع در این حوزه به شمار می روند را برای شما بیاورم.
شماره 1 www.webdesign-inspiration.com/
ریسپانسیو بودن سایت به معنی سازگاری آن با انواع صفحه های نمایش است.امروزه طراحی سایت ریسپانسیو (Responsive) به امری حیاتی برای وب سایت ها تبدیل شده است.هرچند ریسپانسیو بودن و سازگاری یک وب سایت با صفحه های موبایل و تبلت و حتی تلوزیون های خانگی نیاز به تلاش و حتی کمی هزینه بیشتر دارد اما نتیجه و فواید آن کاملا ارزش این تلاش ها را دارد.
ادامه مطلبطراحی سایت خبری یا طراحی یک وب سایت به قصد قراردادن محتوا به عنوان وبلاگ مرتبط با یک سایت با هدف جذب کاربر و یا مشتری بیشتر برای سایت این روزها بسیار فراگیر شده است. گاهی طراحی سایت خبری به صورت اختصاصی انجام شده و گاهی نیز از روش طراحی سایت با وردپرس و استفاده از قالب های بیشمار وردپرس در این حوزه استفاده می شود. وردپرس به عنوان یک پلتفرم بسیار قوی، قالب های بسیار حرفه ای و زیبایی در حوزه مجله خبری دارد که بسیاری از آنها نیز به صورت رایگان ارائه می شوند. در این پست من سعی کرده ام تعدادی از قالب های رایگانی که میان مشتریان ما در شرکت شازین محبوبیت بالایی دارند و از لحاظ کارایی و کیفیت طراحی مناسب هستند را به شما معرفی کنم.
Magbook یک تم WordPress است که منحصراً برای طراحی وب سایت های خبری ، رومه ، مجله یا وبلاگ ساخته شده است. کدنویسی این قالب بسیار تمیز است، طراحی فوق العاده انعطاف پذیری دارد ، ریسپانسیو بوده و ویژگی های جدید فوق العاده ای در طراحی آن به کار برده شده است. در ضمن آپدیت آن همیشه رایگان می باشد. قالب Magbook می تواند برای هر نوع وب سایتی مورد استفاده قرار گیرد.
نسخه ی نمایشی 1 نسخه ی نمایشی 2 نسخه ی نمایشی 3 نسخه ی نمایشی 4 دانلود
قالبی زیبا و مینیمالیستی که عمدتاً برای یک پورتال و مجله خبری و با تحقیق گسترده در مورد رومه های آنلاین معاصر طراحی شده است. با کمک گزینه های سفارشی سازی و ابزارک های موجود ، می توانید طرح بندی ها را به عنوان یک ژورنال های خبری روزمره ، مجله مد مدرن ، وبلاگ نویسی و مجله گردشگری، سایتهای خبری و حداقل ، سایت وبلاگ نویسی و حتی بیشتر پیاده سازی کنید.
توصیه می کنم اگر به دنبال یک طراحی سایت اختصاصی زیبا نیز در زمینه طراحی یک مجله خبری زیباد هستید به سایت شرکت شازین مراجه فرمایید.
قالب Hueman دارای طراحی متنوعی است. به همین دلیل در وب سایتهای بسیار متنوعی مانند وبلاگ ، مجله ، مشاغل کوچک ، مدارس ، یا وب سایت های شخصی استفاده می شود. این قالب با بارگیری سریع و استفاده بسیار آسان تجربه ای فوق العاده ای را در دستگاه های تلفن همراه برای کاربران شما فراهم خواهد کرد.
مجله ماد تم منحصر به فرد و کاملا واکنشگرایی دارد و برای مجله ، رومه ها یا وبلاگ های حرفه ای مناسب می باشد. این قالب با اسلایدر ریسپانسیو خود بسیار مناسب برای نمایش عکس و ویدئو در صفحه اصلی است.
Semicolon یک تم مجله ساده و تمیز برای وردپرس است. طراحی ریسپانسیو، تایپوگرافی تمیز و آسان برای خواندن ، یک طرح شبکه منحصر به فرد با پشتیبانی از پست های برجسته ، چند منطقه ویجت ، یک منوی ویژه برای پروفایل های اجتماعی شما و موارد دیگر از ویژگی های برجسته ی این قالب است.
VMagazine یک قالب وردپرسی برای مجله خبری به صورت چند لایه و ریسپانسیو است. قالبی مناسب برای همه رومه ها ، مجلات و وبلاگ وب سایت ها است. در حقیقت ، این یکی از سریعترین و ساده ترین قالب ها است که به شما امکان می دهد در هر لحظه اقدام به طراحی سایت خبری خود کنید.
HitMag قالبی شیک و قدرتمند است که برای مجلات ، رومه ها یا وبلاگ های شخصی ساخته شده است. HitMag با تعداد انگشت شماری از گزینه ها برای سفارشی کردن سایت خود به روشی که می خواهید ارائه می شود.
Newsmag یک قالب وردپرسی تمیز و مدرن است که مناسب برای طراحی سایت خبری، وبلاگ و غیره می باشد. این قالب 4 سبک متفاوت برای صفخات وبلاگ دارد که برای نمایش درست در هر گونه دستگاه نمایشی به درستی تنظیم شده است.
Poseidon یک قالب وردپرسی با طراحی زیبا است که دارای نمایش پرده ای با نمایشگر تمام صفحه با شکوه است. تایپوگرافی تمیز و چیدمان بزرگ و سفید باعث می شود داستان های شما به اشتراک گذاشته شود.
News Portal قالب وردپرسی با طراحی خلاقانه و ویژگی های قدرتمندی است که به شما امکان می دهد به سرعت و به راحتی سایتی را متناسب با نیاز خود ایجاد کنید. این قالب کاملاً روی سفارشی سازی ساخته شده است که به شما امکان می دهد تا اکثر تنظیمات قالب را به راحتی با پیش نمایش های زنده سفارشی کنید.
ColorMag بین همه تم های رایگان وردپرسی ما محبوب تر است. یک قالب وردپرسی مناسب برای مجله خبری که به صورت کاملا ریسپانسیو طراحی شده است. قالب ColorMag با پلاگین پیج بیلدر کاملا سازگار است و هنگام طراحی سایت خبری در هر موضوعی به شما کمک می کند تا انواع مختلفی از صفحه نمایشی طراحی شود. این قالب نیز کاملا مناسب برای طراحی سایت خبری، رومه ، مجله و انواع وبلاگ نویسی است.
Rubine Lite یک تم مجله تمیز و آماده شبکیه است که با قابلیت استفاده و سادگی در ذهن ایجاد شده است. طراحی واکشنگرا باعث می شود محتوای شما در هر دستگاه قابل خواندن باشد.
یادگیری اصول کدنویسی کار بسیار پیچیده ای نیست اما آشنایی و تسلط بر این قوانین و رعایت اصول استاندارد و صحیح در کدنویسی نیاز به تجربه و کار فراوان دارد . در این مجموعه به بررسی ده اشتباه بزرگ در نوشتن کدهای HTML میپردازیم که رعایت آنها می تواند در استاندارد سازی کدهای HTML شما تاثیر بسیاری داشته باشد . شاید بتوان گفت تفاوت یک طراح وب سایت حرفه ای و آماتور در رعایت همین اصول و قوانین است که در زیر به ده مورد از آنها اشاره میشود .
قرار دادن تگهای Block در بین تگ های Inline
عناصر HTML به دو گروه inline و block تقسیم بندی می شوند . هر تگ به صورت پیش فرض دارای خصوصیت inline و یا block است . عناصر block تگهایی مانند div , p و مواردی دیگر را شامل میشند که بیشتر در ایجاد ساختار صفحات مورد استفاده قرار میگیرند . عناصر Inline با توجه به نوع و خصوصیت شان باید در درون عناصر block قرار بگیرند تا بتوانند با استفاده از این نوع از تگها در جریان صفحه قرار بگیرند .
استفاده از عناصر block در بین تگهای inline کار اشتباهیست که هرگز نباید انجام دهید . اما عناصر inline به راحتی درون عناصر block قرار خواهند گرفت .
1 <a nolink="https://shazinco.com/service/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA/" > <h1> طراحی وب سایت</h1> </a>
2 <h1><a nolink="https://shazinco.com/service/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA/" > طراحی وب سایت</a></h1>
اضافه نکردن خصوصیت alt به تصاویر
استفاده از خصوصیت alt برای تصاویر یک قانون است . برای استاندارد بودن کدهای HTML خود حتما این نکته را رعایت کنید .استفاده از alt برای تصاویر به بازدیدکنندگان صفحات وب سایت شما و همچنین موتورهای جستجو کمک میکند تا موضوع تصویر منتشر شده در وب سایت شما را تشخیص دهند . این نکته زمانی پر رنگ تر و مهم تر میشود که مخاطبان شما از سرعت اینترنت پایین و یا مرورگرهای متنی ( مانند موتورهای جستجو ) استفاده میکنند و یا به هر دلیلی این تصویر در مرورگر بازدیدکننده وب سایت شما نمایش داده نشده است . از این خصوصیت حتی در هنگامی که توضیحی برای تصویر خود ندارید نیز استفاده نمائید و مقدار آن را خالی بگزارید .
استفاه نکردن از خصوصیت alt برای تصاویر یک اشتباه بزرگ است .
1 <img src="logo.png" />
2 <img src="logo.png" alt="shazinco.com logo" />
3 <img src="logo.png" alt=""/>
استفاده نکردن از لیست ها – ul , ol – در جای لازم
تگهای ul,ol,li برای لیست کردن مطالب ساخته شده اند و کار با آنها بسیار ساده و راحت است و توانایی های بسیاری را برای کنترل لیست به وسیله css ایجاد خواهد نمود . استفاده از تگهای p , br و هر نوع دیگر از کدهای HTML به غیر از تگهای تعریف شده لیست ها ، برای شکل دهی یک لیست کار اشتباهیست که هرگز نباید انجام شود .
1 <p>
2 طراحی وب سایت <br/>
3 بهینه سازی وب سایت <br/>
4 آموزش طراحی سایت </br>
5 </p>
1 <ul>
2 <li>طراحی وب سایت </li>
3 <li>بهینه سازی وب سایت </li>
4 <li>آموزش طراحی سایت </li>
5 </ul>
استفاده از تگهای b,I,strong,em برای bold و italic کردن متن بدون در نظر گرفتن موتورهای جستجو
تگهای b و i میتوانند یک متن و یا کلمه را به حالت bold و Italic تغییر دهند . شاید با وجود CSS و توانائیهای فوق العاده در کنترل متن ها به ذهن شما برسد که از این ابزار برای راحتی کار خود استفاده نمائید . توانائیهای font-weight و font-style میتوانند جایگزین خوبی برای b و i باشند اما مشکلاتی را نیز خواهد داشت . در مواردی مخاطبان شما از مرورگرهای متنی بدون استفاده از style ها استفاده خواهند کرد که در اینصورت تفاوتی مابین کلمات bold و italic شده توسط CSS با سایر کلمات نخواهند دید و این مشکل باعث کاهش خوانایی مطالب شما می شود و کلمات با درجه اهمیت بیشتر مورد توجه مخاطب قرار نخواهد گرفت .
اگر شما به بهینه سازی وب سایت خود برای موتورهای جستجو اهمیت می دهید بهتر است از تگهای strong و em به صورت مستقیم در کد HTML به جای تگهای b و i و همچنین style ها استفاده نمائید . به این نکته بسیار مهم توجه داشته باشید که تگ های b و i تگهای نمایشی هستند و تگهای strong و em تگهای مفهومی و نمایشی هستند .
مفهوم این جمله این خواهد بود که متن ها به وسیله b و i فقط یک تغییر حالت ظاهری پیدا کرده اند و به همین دلیل مورد توجه موتورهای جستجو قرار نخواهند گرفت . اما با استفاده از تگهای strong و em شما به همراه تغییرات ظاهری یک شخصیت نیز به متن خود خواهید بخشید و اعلام خواهید کر که این متن در داخل این نوع از تگها از اهمیت بیشتری برخوردار خواهد بود .
بنابراین سعی کنید از این نوع از تگها در جای مناسب خود استفاده نمائید .از b و i در زمانی که نیازی به پر اهمیت کردن متن داخل این تگها نیست و فقط می خواهید شکل ظاهری را تغییر دهید و از strong و em در مواردی که علاوه بر شکل ظاهری می خواهید درجه اهمیت متن داخل آن را نیز نسبت به سایر کلمات افزایش دهید استفاده نمائید .
1 <b>webtarget.ir</b>
2 <i>webtarget.ir</i>
3 <span style="font-weight:bold"> shazinco.com </span>
4 <span style="font-style:italic"> shazinco.com </span>
5 <strong> shazinco.com </strong>
6 <em> shazinco.com</em>
استفاده بیش از حد از تگ br
تگ br برای ایجاد فاصله و شکست تنها یک خط در متن مورد استفاده قرار می گیرد . استفاده از تگ br برای ایجاد فاصله هایی بیشتر از یک خط در بین خطوط و یا عناصر دیگر اشتباه است . برای ایجاد فاصله بیشتر از یک خط در بین خطوط می توانید به راحتی از تگهای p و یا خصویت padding و margin و حتی line-height استفاده نمائید .
1 <p>
2 shazinco.com <br/><br/>
3 طراحی هدفمند وب سایت
4 </p>
1 <p>shazinco.com</p>
2 <p>طراحی هدفمند وب سایت </p>
استفاده از تگهای s , strike برای نمایش متن های حذف شده
در نسخه های قدیمی تری از HTML از این دو نوع تگ برای نشان دادن کلمات حذف شده ( Strikethrough ) – با ایجاد یک خط بر روی آنها – استفاده می شده است . این نوع از تگ ها با ورود نسخه های جدیدی از HTML دگرگون شده اند و تگهای strike و s که قبلا برای این منظور استفاده می شده اند دیگر کاربردی نخواهند داشت و استفاده از آنها غیر استاندارد خواهد بود .
در نسخه های جدید از تگهای del – برای نشان دادن متن حذف شده – و از تگ ins – برای نشان دادن متن وارد شده به جای متن حذف شده – به همراه هم استفاده می شود .
بنابراین دچار اشتباه نشوید و از strike و s استفاده نکنید .
1 <s>کلمه حذف شده</s>
2 <stricke> کلمه حذف شده</stricke>
1 <del>کلمه حذف شده</del><ins>کلمه جایگزین شده</ins>
استفاده از inline style
هر چند که از style ها می توان به سه روش متفاوت استفاده نمود و یکی از این سه روش استفاده از style های inline در داخل هر تگ است . اما توصیه میشود که از inline style استفاده کمتری نمائید . استفاده از style های inline یک کار غیر استاندارد نیست اما دارای مشکلات و معایبی است که میتواند ما را برای استفاده از این نوع از style منصرف کند .
ویرایش این نوع از style با توجه به خطی بودن آنها بسیار مشکل است و با افزایش تعداد سندهای HTML گاهی به کار غیر ممکنی تبدیل می شود .
این نوع از style حجم صفحات را به شدت افزایش می دهد و این نکته ای بسیار منفی است .
کدها را به هم ریخته و ناخوانا خواهند کرد و ویرایش کد ها را – از نظر خوانایی – بسیار سخت خواهد نمود . گاهی کدهای CSS خارجی را دچار مشکل می کنند – کدهای inline بر کدهای CSS خارجی تقدم دارند – با همه این مشکلات در موارد بسیار خاصی استفاده از این تگها می تواند مشکلات شما را برطرف نماید . اما به صورت عمومی استفاده از inline style توصیه نمی شود .
1 <h2 style="color:red;">shazinco.com</h2>
اضافه و حذف کردن border در تگ HTML
Border ها یکی دیگر از خصوصیات تعدادی از عناصر HTML هستند که شما می توانید با استفاده از این خصوصیت به صورت مستقیم در تعدادی از تگهای HTML آنها را حذف ، اضافه و ویرایش نمائید .
در استاندارد های امروزی استفاده از این نوع خصوصیت به صورت مستقیم در تگهای HTML توصیه نمی شود و بهتر است به جای استفاده از این خصوصیت در تگهای HTML چشم پوشی نمائید و تغییرات مورد نظر خود را با استفاده از خصوصیت border در CSS انجام دهید . شما با استفاده از CSS توانایی بیشتری در کنترل این خصوصیت خواهید داشت .
1 <img src="logo.png" border="0" alt="" />
1 <img src="logo.png" alt="" />
2 Img { border:none; }
استفاده نکردن از تگهای Heading
حتما از اهمیت تگ های heading – h1,h2,h3,h4,h5,h6 – با خبر هستید . قبلا مطالبی در مورد اهمیت این تگها در چینش صفحات و همچنین اهمیت آنها برای موتورهای جستجو صحبت کردیم.
از این تگها برای مشخص نمودن سر فصل ها و تیتر ها برای مطالب منتشر شده در وب سایت با توجه به درجه اهمیت آنها استفاده می شود .
استفاده از انواع تگهای دیگر و استفاده از CSS برای تغییر ظاهری عناصری غیر از تگهای heading ، برای ایجاد سرفصل اشتباه بزرگی خواهد بود . سر فصل هایی که با تگهایی غیر از تگهای Heading ایجاد شده اند در مرورگرهای متنی قابل تشخیص نخواهند بود و همچنین از نظر موتورهای جستجو اهمیتی نخواهند داشت .
1 <p><strong>یک متن برای سر فصل</strong></p>
1 <h3>یک متن برای سر فصل</h3>
استفاده از تگهای blink و marquee
جدای از غیر استاندارد اعلام شدن این تگ ها توسط سازمان جهانی استانداردهای وب wc3 ، استفاده از این نوع از تگها در طراحی شما میتواند فاجعه ساز شود !!
برای ایجاد حس توجه و نشان دادن اهمیت یک موضوع و جلب توجه مخاطبان خود بهتر است از روشهای دیگری استفاده نمائید . این گونه از تگها بر خلاف تصور شما ممکن است موجب عدم توجه به وب سایت شما شود . میتوانید مطالب بیشتری را در مورد این دو نوع از تگ در دانشنامه ویکی پدیا مطالعه نمائید
1 <blink> به من نگاه کنید </blink>
2 <marquee width="100%" behavior="alternate" bgcolor="yellow" >This is an example</ marquee >
منبع : وب تارگت
سایت های وردپرسی مشهور
همان طور که می دانید وردپرس یکی از محبوب‌ترین سیستم های مدیریت محتوای سایت (CMS) می باشد که کاملا متن باز و رایگان بوده و به دلیل امنیت بالا از محبوبیت بسیاری برخوردار است. سایت های وردپرسی مشهور زیادی در سراسر دنیا وجود دارد که در این مقاله شما را با ۲۰ نمونه از معروف ترین سایت های طراحی شده با وردپرس آشنا می کنیم. نگاه به این سایت ها و دستاوردهای آنها میتواند گواهی خوبی برای انتخاب طراحی سایت با وردپرس باشد.
۱. وب سایت خبری رویترز
رویترز (Reuters) یک خبرگزاری بین‌المللی واقع در بریتانیا است که از زیر مجموعه های شرکت تامسون رویترز محسوب شده و دفتر مرکزی آن در لندن قرار دارد. این خبرگزاری در سال ۱۸۵۱ تاسیس شد و اکنون جز معتبرترین خبرگزاری های دنیا محسوب می شود. در طراحی وب سایت این خبرگزاری از وردپرس استفاده شده است که نشانه قدرت مندی این سیستم مدیریت محتوا می باشد.
۲. وب سایت شرکتی پلی استیشن
پلی استیشن (Playstation) همان کنسول های بازی رایانه ای کمپانی سونی است که اولین نسخه آن در دسامبر ۱۹۹۴ روانه بازار شد و آخرین نسخه آن پلی استیشن ۴ است که در کنفرانسی در ۲۰ فوریه سال ۲۰۱۳ معرفی شد. در جولای ۲۰۱۳ شبکه پلی استیشن به بیش از ۱۱۰ میلیون کاربر در سراسر جهان دست یافت. طراحی سایت شرکتی پلی استیشن نیز با وردپرس انجام شده و جز سایت های وردپرسی مشهور به حساب می آید.
۳. وب سایت خبری نیویورک تایمز
یکی از نمونه سایت های وردپرسی مشهور، وب سایت خبری نیویورک تایمز (New York Times) رومه معروف آمریکایی است که دفتر مرکزی آن واقع در نیویورک بوده و اخبار کل دنیا را پوشش می دهد. استفاده از وردپرس در طراحی سایت نیویورک تایمز نشان دهنده امنیت سیستم مدیریت محتوا وردپرس است.
۴. وب سایت رسمی کشور سوئد
وب سایت sweden.se سایت رسمی کشور سوئد است که اطلاعاتی درباره فضای فرهنگی و دنیای کسب و کار و وقایع مختلف کشور سوئد به مخاطبان ارائه می دهد. ادارات دولتی سوئد، موسسه سوئد (SI)، کسب و کار سوئد و … از جمله سازمان ها و موسسات حامی این وبسایت هستند. سایت رسمی کشور سوئد نیز جز سایت های وردپرسی مشهور است.
۵. وب سایت خبری تایم
یکی از نمونه سایت های وردپرسی مشهور مربوط به هفته نامه آمریکایی تایم (Time) است. مجله تایم در سال ۱۹۲۳ شروع به کار کرد و هم اکنون به عنوان پر مخاطب ترین هفته نامه خبری سراسر دنیا شناخته می شود.
۶. وبلاگ شرکت موزیلا
موزیلا (Mozilla) یک بنیاد غیرانتفاعی در حوزه نرم افزار است که در سال ۱۹۹۸ توسط اعضای نت اسکیپ راه اندازی شد. این کمپانی هم محصولات موزیلا را توسعه می دهد و هم پروژه های متن باز رایگان انجام می دهد. وبلاگ موزیلا به کمک وردپرس طراحی شده است.
۷. وب سایت خبری بلومبرگ
وب سایت خبری بلومبرگ (Bloomberg) نیز یکی دیگر از سایت های وردپرسی مشهور است. بلومبرگ یک آژانس خبری معتبر واقع در نیویورک است که در سال ۱۹۹۰ تاسیس شده و خدماتی مانند پلت فرم های معاملاتی سهام، آنالیز و سرویس های دیتا به شرکت های مالی ارائه می دهد.
۸. وب سایت خبری مجله ورایتی
مجله ورایتی (Variety) یک هفته نامه سرگرمی- تجاری می باشد که اولین بار در سال ۱۹۰۵ در نیویورک آغاز به کار کرد. سایت این مجله که با موضوعات اخبار هنرمندان، پرفروش ترین فیلم های باکس آفیس و … فعالیت می کند هم از جمله معروف ترین سایت های طراحی شده با وردپرس است.
۹. وب سایت شخصی جی زی
جی-زی (Jay Z) خواننده مشهور و برنده ۱۷ جایزه گرمی است که در سال ۱۹۶۹ متولد شده است. تا کنون بیش از۵۰ میلیون نسخه از آلبوم های او به فروش رفته و وی جز پرفروش ترین خواننده های سبک موسیقی رپ محسوب می شود. وب سایت شخصی این خواننده معروف هم جز سایت های وردپرسی مشهور بوده و استفاده از وردپرس حاکی از کیفیت بسیار بالای این سیستم مدیریت محتوا می باشد.
۱۰. وب سایت شخصی کیتی پری
یکی از نمونه سایت های وردپرسی مشهور، وب سایت شخصی کیتی پری (Katy Perry) خواننده، ترانسه سرا و بازیگر مشهور اهل کالیفرنیا است. نام او در سال ۲۰۱۵ جز لیست ثروتمند ترین ن در صنعت موسیقی” مجله فورچون قرار گرفت.
۱۱. وب سایت خبری بی بی سی آمریکا
یکی از معروف ترین سایت های طراحی شده با وردپرس مربوط به وب سایت خبری بی بی سی آمریکا است. خبرگزاری تلویزیونی بی بی سی آمریکا در سال ۱۹۹۸ راه اندازی شد و با شبکه اصلی آن تفاوت داشته و منبع درآمد اصلی آن تبلیغات تلویزیونی می باشد. این شبکه دارای بیش از ۷۸ میلیون تماشاگر در آمریکا است.
۱۲. وب سایت خبری مجله فورچون
مجله فورچون (Fortune) برای اولین بار در سال ۱۹۲۹ منتشر شد. شهرت این مجله بیشتر به خاطر انتشار لیست سالیانه فورچون ۵۰۰ است که در آن به رتبه بندی پردرآمد ترین شرکت های آمریکا می پردازد. سایت مجله فورچون نیز بر پایه وردپرس طراحی شده است. تا اینجا معلوم شد که یکی از مدل های محبوب طراحی با وردپرس طراحی سایت خبری است.
۱۳. وبلاگ شرکت بلک‌بری
بلک بری (BlackBerry) یکی از کمپانی های معتبر تولید تلفن های همراه هوشمند می باشد که در کشور کانادا واقع شده است. گوشی های این کمپانی سابقا از نظر امنیت بالای آن ها شهرت فراوانی داشتند. وبلاگ کمپانی بلک بری هم جز مشهورترین سایت های طراحی شده با وردپرس است.
۱۴. وب سایت شرکت مرسدس بنز
مرسدس بنز یک کمپانی خودروسازی مشهور واقع در شهر اشتوتگارت آلمان است که انواع خودروها را طراحی و تولید می کند. شعار این شرکت «یا بهترین یا هیچ» است و رقیبان اصلی آن در آلمان، کمپانی های آئودی و بی ام و محسوب می شوند. سایت شرکت مرسدس بنز جز مشهورترین سایت های طراحی شده با وردپرس می باشد، فراموش نکنید که شعار این شرکت «یا بهترین یا هیچ» است.
۱۵. وبلاگ فلیکر
فلیکر (Flickr) یکی از معروف ترین سایت های اشتراک گذاری عکس و فیلم در اینترنت است که برای اولین بار در سال ۲۰۰۴ ایجاد شد. این سایت به دلیل تعداد بازدیدکنندگان بالای خود جز ۵۰۰ سایت برتر الکسا در جهان محسوب می شود. وبلاگ این سایت معروف نیز با وردپرس طراحی شده است.
۱۶. وب سایت بازی پرندگان خشمگین
پرندگان خشمگین (Angry Birds) یک بازی محبوب است که برای اولین بار در سال ۲۰۰۹ توسط کمپانی سرگرمی روویو ساخته شد. این بازی به طور تخمینی بیش از ۱ میلیارد بار دانلود شده و تا کنون نسخه های متنوعی از آن وارد بازار گردیده است. وبسایت پرندگان خشمگین نیز جز مشهورترین سایت های وردپرسی است.
۱۷. وب سایت شرکت والت دیزنی
والت دیزنی که بزرگ ترین شرکت رسانه ای سرگرمی دنیا است و اکثرا آن را بخاطر کارتون ها و انیمیشن های جذابش می شناسند، برای اولین بار در سال ۱۹۲۳ تاسیس گردید. سایت شرکت والت دیزنی نیز جز معروف ترین سایت های طراحی شده با وردپرس است.
۱۸. وب سایت شرکت سونی موزیک
شرکت سونی موزیک اولین بار در سال ۱۹۲۹ به عنوان یک کمپانی ضبظ موسیقی شروع به کار کرد. این شرکت پس از فراز و نشیب های بسیار نام سرگرمی موزیک سونی” را اختیار کرد. این شرکت دومین کمپانی بزرگ دنیا در صنعت موسیقی محسوب شده و از کمپانی وارنر جلوتر و از کمپانی یونیورسال عقب تر می باشد. وب سایت این شرکت هم جز مشهورترین سایت های وردپرسی است.
۱۹. وب سایت اتاق اخبار فیسبوک
امروزه کسی نیست که شبکه اجتماعی فیسبوک را نشناسد! فیسبوک که در سال ۲۰۰۴ توسط مارک زاکربرگ و دوستانش طراحی و ساخته شد به مرور به بزرگ ترین شبکه اجتماعی تبدیل شد. فیسبوک در خارج از ایران همچنان شبکه اجتماعی فعالی محسوب شده و به دلیل امکانات خوب برای بازاریابی در آینده نیز پر مخاطب باقی خواهد ماند. وب سایت اتاق اخبار فیسبوک نیز بر پایه وردپرس طراحی شده است.
۲۰. وب سایت فیلم007
جیمز باند نام شخصیت داستانی است که در سال ۱۹۵۳ توسط فلمینگ خلق شده و همچنین در صنعت سینما طولانی‌ترین و پولسازترین شخصیت به زبان انگلیسی است. وبسایت فیلم 007 نیز بر پایه وردپرس طراحی شده است.
منبع: وبسیما
درباره این سایت