طراحی وب سایت در کرج
026-34204893
09101013858

بایگانی برچسب‌ها : سی اس اس

HTML در CSS

HTML در CSS

متن بیش از حد متناسب با زبان کلاسیک به سبک، دوم، قطعا به نظر می رسد بسیار با شکوه. اما کدام یک باید به شما کمک کند وب سایت خود را ایجاد کنید؟ همانطور که مرورگرهای وب توسعه داده اند، HTML در داخل وب سایت ها سخت تر شده است تا از کد استفاده شده توسط مرورگر خود جدا شود.

این است که چگونه CSS به عنوان یک پاسخ به یک مشکل ناشی از پیشرفت فن آوری متولد شد. هرکسی که دارای سطح صلاحیت منطقی در یک رایانه است، می تواند به راحتی اصول اولیه HTML را تدریس کند اما CSS آسان است که انتخاب شود؟

اگر فکر میکنید می توانید از HTML کنار بگذارید و بدانید که چگونه از CSS استفاده کنید، اشتباه می کنید. فکر می کنید از این به نظر می رسد، شما می خواهید یک پاراگراف بنویسید.

HTML کلمات است، در حالی که CSS نقطه گذاری است. به عبارت دیگر، به شما کمک می کند که آنچه را که در حال حاضر وجود دارد فرمت کنید تا بتوانید خواندن، نگاه کردن و سازماندهی آن را آسان تر کنید.

همانطور که از نوع جدیدی از زبان کامپیوتری انتظار می رود، CSS به شما گزینه های بیشتری و فرصت های پیشرفته تر برای طراحی طرح سایت شما می دهد. در حالی که شما می توانید به طور کامل به درستی با HTML تنها عملکرد، شما انتخاب بیشتر از مزایای پیدا کردن با تلاش برای یادگیری CSS نیز هست.

اگر میخواهید شروع به کاوش در دنیای CSS کنید، لازم است دانش خود را از برچسب ها و ویژگی ها گسترش دهید، مزیت واقعی در استفاده از صفحات سبک است. اینها از هر سندی که در فرمت HTML کار می کنند مرتبط هستند.

هنگامی که با چگونگی کار آمدن صفحات سبک cascaded آشنا خواهید شد، شما تعجب خواهید کرد که چطور بدون اینکه آنها را داشته باشید. اساسا، آنها وب سایت شما را برطرف می کنند و تغییرات لازم را به مراتب ساده تر می کنند.

هر یك از ابزارهای مبتنی بر وب زمان لازم است تا بدانند، اما این یكی است كه باید قطعا وقت آن را داشته باشید.

Tagged
css | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا

چرا شما باید از CSS استفاده کنید

چرا شما باید از CSS استفاده کنید

به نظر می رسد وب مسترها بیشتر و بیشتر از CSS برای طراحی و طرح سایت خود استفاده می کنند، نه بسته به جداول و علامت گذاری به عنوان HTML. همچنین با توجه به اندازه صفحه و استفاده مجدد از قالب های CSS، کارآیی بسیاری از وبسایت ها بر این باورند که این امر نیز به سودمندی موتورهای جستجو کمک می کند.

یکی از کاربران در وبلاگنویسی طرفدار مقاله ای را بر اساس تجارب شخصی خود نوشته است و از آنچه که معتقد است به یک سایت دوستانه بهتر موتور جستجوی بهتر اشاره می کند

برای مدت طولانی من همیشه دوست داشتم با استفاده از جداول برای طرح بندی سایت، اما توافق عمومی در حال حاضر که جداول بد برای طرح است. من قبول میکنم وقتی که شروع به تجمع میزها میکنید همه چیز شروع به پیچیده شدن و پیچیدگی میکند.

تمام این HTML اضافی در صفحه شما به عنوان محتوایی واقعی که موتورهای جستجو پس از آن هستند، می شود. اگر طراحی را از محتوا جدا کنید موتورهای جستجو می توانند محتوای را خالی کنند و طراحی را نادیده بگیرند.

جدا کردن محتوا از طراحی همچنین به این معنی است که صفحات بسیار ساده تر برای به روز رسانی، به جای نیاز به بازنویسی هر صفحه همه شما باید انجام دهید تغییر سبک است.

این موجب صرفه جویی در وقت شما و پایان دادن به پهنای باند موجب صرفه جویی می شود، مرورگر فقط باید یک بار سبک را به پایین بکشد اگر شما از آن برای تمام صفحات خود استفاده کنید

نه تنها هزینه های پهنای باند را ذخیره کرده اید، بلکه سرعت بارگیری صفحه را نیز افزایش داده اید، این برای بازدیدکنندگان شما و بسیاری از ربات هایی که سایت شما را خالی می کند، مفید است.

من شروع به استفاده از CSS در بیشتر سایت های خود کردم و قصد دارم از CSS صرفا در سایت بعدی من استفاده کنم که به معنی یادگیری در مورد نحوه استفاده از CSS برای طرح بندی است.

یکی از سایت هایی که مفید واقع شده است، گروه طراحی وب است که در آنها راهنمای کشیدن صفحات سبک است. این سایت همچنین دارای تعداد زیادی لینک به منابع CSS دیگر است.

اگر از CSS استفاده نکنید، به خوبی می توانید به یادگیری تگ های CSS و خواص آنها بپردازید. آن را به عنوان یک سرمایه گذاری آینده فکر کنید، زمان صرف شده برای خود در رتبه بندی موتور جستجوی بهتر، پهنای باند ذخیره شده پرداخت می شود و شما در زمان نگهداری و توسعه سایت های جدید خود، کاهش می یابد.

Tagged
سی اس اس | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا

مزایای SEO از CSS

مزایای SEO از CSS

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

از آنجا که مرورگر پشتیبانی از سی اس اس  بهتر از آن است که مورد استفاده قرار گرفته است، و جداول باعث مشکلات، سی اس اس به شما ارائه می دهد سود شما ممکن است در مورد قبل فکر نکنید، سود SEO بهتر است.

 

من می خواهم بلافاصله بگویم که محتوای با کیفیت باید بالاترین اولویت شما باشد، نه کلاهبرداری های SEO. توصیه های ارائه شده در اینجا به شما کمک خواهد کرد که نتایج موتور جستجوی بهتر را بدست آورید، زیرا کلید واقعی SEO با ساختن صفحه خوب و سازماندهی محتوای شما آغاز می شود.

با درک اینکه چگونه موتورهای جستجو “صفحات” شما را ببینند، می توانید ساختار صفحه بهتر را ایجاد کنید.

 

موتورهای جستجو با استفاده از منطق “بالا به پایین” در جستجوی صفحات وب استفاده می کنند. آنها به کد شما نگاه می کنند، نه نمایشگر بصری که کاربران می بینند. چشمان انسان به سرعت به محتوای صفحه کشیده می شود، حتی زمانی که چیزهای دیگری در صفحه وجود دارد.

ربات های موتور جستجو چیزهایی را به همان شیوه نمی بینند، اما هنگامی که آنها را درک می کنید، منطقی و قابل پیش بینی هستند.

 

شما به احتمال زیاد نتایج موتور جستجو را مشاهده کرده اید که منطقی نیست زیرا برخی از محتوای مبهم به جای محتوای واقعی صفحه نمایش داده می شود. من منطق بالا را نشان می دهم تا بتوانید نحوه کار سی اس اس را برای شما بفهمید.

 

در ذهن یک موتور جستجو، ابتدا بر اساس محتوای بالای صفحه تعیین می شود. اگر با کلمات خاصی شروع می کنید، اغلب در تمام صفحه ظاهر می شوند و سپس در پایین باز می شوند، بنابراین اساسا نقطه بسته شدن شما هستند، که در مغزهای اتوماتیک یک موتور جستجو همان چیزی است که صفحه شما در آن قرار دارد.

 

چشم شما به خوبی آموزش دیده احتمالا به دنبال یک عنوان خواهد بود، سپس محتوای را بخوانید؛ بنابراین برای شما، این منطق بالا به پایین صفحه است. کد HTML خود را از بالا به پایین بخوانید.

شما ممکن است شگفت زده شوید که تا چه اندازه شما باید قبل از رسیدن به محتوای واقعی، حرکت کنید، و اینکه چقدر دیگر “محتوا” یک موتور جستجو اول را ببینید. اگر از جداول برای طرح استفاده می کنید، منطق بالا به پایین از کد شما به نظر می رسد مثل اینکه پاهای قطع شده است و تنظیمات روی زمین است.

 

با استفاده از سی اس اس، شما می توانید کد خود را سازماندهی کنید تا موتورهای جستجو برای اولین بار محتوای واقعی خود را بدون توجه به جایی که در صفحه ظاهر می شوند، ببینند.

 

بیایید از یک مثال ساده HTML استفاده کنیم:

 

<!–Insert all your head info, including a CSS link like below–><link rel=”stylesheet” type=”text/css” href=”file.css”>

<div id=”content”> <!–I will explain this div later–>

<h1>Heading With Your Important Keywords</h1>

<h2>Subheading With Important Keywords</h2>

<p>Your important content will be here, with keywords. Notice

how this is right at the top of your code. No matter where this

is on the page, you want it here at the top of your code.</p>

</div> <!–This would be the end content div–>

<div id=”nav”> <!–This div represents a navigation example–>

<p>This could have image buttons, text, or both. If using images,

make sure to include alt text which should contain keywords. With

tables for layout, this would most likely be above the content,

now it is below where it should be. The div id above will help you

control this.</p>

</div>

<div id=”banner”>

<p>As the name can imply, this can be at the top of the page, but

notice how it is way down in your code because it has no strong SEO

elements. It might be your logo or additional navigation. Even though

it shows at the top of the page to the user, it is not the first thing

you want the search engine to read or display in search results.</p>

</div>

<div id=”summary”>

<!–This div can be anything, used here as example–>

<p>This example of another div is used to illustrate another SEO principle.

Use keywords in it so it is like your closing point. By appearing at the

bottom of the code, it makes stronger SEO.</p>

</div>

 

بعد، من یک مثال ساده از نحوه ایجاد file.css برای کنترل طرح نشان می دهم. برای دیدن اثرات می توانید از این کد در یک ویرایشگر متن استفاده کنید. برای سادگی، من فقط روی کد طرح تمرکز خواهم کرد، ما فونت ها، اندازه ها، لینک ها و غیره را اعلام نخواهیم کرد.

 

در مثال HTML، ما ۴ بخش (divs) داریم. شما می توانید با پیکسل یا درصد (یا حتی هر دو) تقسیم کنید. ما برای استفاده ساده از این اصل از پیکسل استفاده خواهیم کرد.

 

/*Begin CSS*/

 /*Just for the record, this is a comment in CSS*/

#nav {position: absolute;

top: 0px;

 left: 0px;

width: 200px;

height: 500px;

 padding: 20px 10px 10px 20px; }

 /*

برای توضیح کد بالا، من divs را در دستورالعمل متفاوت از HTML قرار دادم. این سفارش جریان جریان شیوه انجام طرح صفحه را دنبال می کند. همچنین اگر بخواهید یک ساختار جدول در HTML ایجاد کنید، جریان را دنبال می کنید.

بخش نوشیدنی در برابر گوشه سمت چپ بالای صفحه (در بالا و سمت چپ هر دو ۰px) قرار دارد. علامت # مشخص “id” div را به دنبال نام می دهد. من عرض را به ۲۰۰px تنظیم کردم که مانند ساخت یک سلول جدول که عرض است.

من از ارتفاع ۵۰۰px فقط به عنوان مثال استفاده کردم، خلاصه در زیر شروع خواهد شد که نهایی به پایان می رسد. شما می خواهید مطمئن شوید که همه چیز با اندازه های مشخص شده شما مناسب خواهد بود.

شما همچنین می توانید از پد استفاده کنید، اما بر خلاف یک سلول جدول در HTML، می توانید هر یک از طرفین را به طور جداگانه تنظیم کنید. در مثال بالا، ۲۰px اولین بار بالا است، سپس هر طرف را در جهت عقربه های ساعت اعلام می کند، بنابراین سمت چپ نیز ۲۰px است. * /

#summary {position: absolute;

 top: 00px;

 left: 0px;

width: 200px;

 padding: 20px 10px 10px 20px; }

/ * خلاصه بالا بالا می آید که در آن نهایی به پایان می رسد، در ۵۰۰ پیکسل از بالا. تنظیمات دیگر برای هم ترازی مطابقت دارند. من ارتفاع را تنظیم نکردم، زیرا هنگامی که محتوای شما را وارد می کنید، درست مثل یک سلول جدول کشش می شود. * /

 

 #banner {position: absolute;

 top: 0px;

 left: 200px;

 width: 550px;

 height: 150px;

padding: 20px 0px 10px 20px; }

 /*

بنر در بالای صفحه قرار خواهد گرفت، اما از ۲۰۰ مگا پیکسل از سمت چپ، جایی که نهایی به پایان می رسد، شروع خواهد شد. اعلام ارتفاع یک اختیاری است، اما برای حس کردن در مواردی که محتوای زیر شروع می شود، کمک می کند.

من فقط به عنوان مثال ۱۵۰px استفاده کردم. دلیل لود کردن ۰px در سمت راست این است که باقی مانده از صفحه نمایش در این طرح خالی است، بدون نیاز به پد کردن آن طرف. عرض را محدود میکنم تا صفحه نمایش به اندازه ۸۰۰×۶۰۰ رزولیشن نمایش داده شود (عرض کل اینجا ۷۵۰ پیکسل است).

 */

 #content {position: absolute;

 top: 150px;

 left: 200px;

width: 550px;

 padding: 10px 0px 10px 20px; }

/ * در حال حاضر محتوای شروع می شود و جایی که بنر از بین می رود، ۲۰۰px به سمت چپ و ۱۵۰px از بالا. توجه کن آخرین اگر از جداول برای ایجاد یک طرح استفاده کردید، این امر در کد شما نیز آخرین خواهد بود. موتورهای جستجو قبل از رسیدن به گوشت صفحه خود همه چیز را بخوانند. در HTML مورد استفاده در اینجا، آن را در بالای کد خود قرار می دهد تا موتورهای جستجو برای اولین بار آن را ببینند. * /

/*End CSS*/

این نمونه های ساده هستند، اما اگر شما می توانید از نظر منطق بالا فکر کنید، می توانید صفحات دوستانه موتور جستجو را ایجاد کنید. آنها همچنین سریعتر بار می کنند، زیرا ساختارهای جدول های پیچیده طول می کشد تا از چیدمان سی اس اس بارگیری کنند، که یکی دیگر از مزایای سی اس اس است.

 

 

 

 

 

Tagged
css | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا

CSS چیست و چگونه می توان از آن استفاده کرد

CSS چیست و چگونه می توان از آن استفاده کرد؟

CSS یک مخفف است که برای Cascading Style Sheets است. این استفاده زبان برای تعریف اشیاء سبک از اسناد نوشته شده در زبان نشانه گذاری است.

البته، HTML و یا زبان مشابه، همچنین دارای برچسب های سبک، تعریف رنگ، فونت، طرح، حاشیه و غیره، اما سی اس اس ارائه می دهد انعطاف پذیری و امکانات بیشتر به وب مستر.

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

امروزه، زبان سی اس اس توسط همه مرورگرهای به روز پشتیبانی می شود. اما تفسیر آنها در برخی از برچسب ها هنوز هم می تواند متفاوت باشد.

CSS به شما این مشکل را نیز کمک می کند، زیرا این امکان به شما می دهد که ظاهر و طرح سند خود را بسته به مرورگر و نوع رسانه (مانند صفحه نمایش، چاپ، تلفن همراه، و غیره) تغییر دهید. علاوه بر این، دستگاه ها و مرورگرها که از CSS پشتیبانی نمی کنند، هنوز هم قادر به نمایش محتویات خواهند بود.

علاوه بر این، معمولا فایل های سی اس اس معمولا در حافظه پنهان مرورگر ذخیره می شوند که به شما کمک می کند پهنای باند را ذخیره کنید و زمان لازم برای بارگذاری یک صفحه را کاهش دهید.

بنابراین، چگونه CSS را در سند HTML خود ترکیب می کنید؟

سه راه برای انجام این کار وجود دارد.

  1. Inline (سبک ویژگی):

<body sty le = “background-color: # FF0000؛”>

  1. داخلی (سبک برچسب):

<sty le type = “text / css”> body {background-color: #FF0000؛} </ style>

  1. خارجی (پیوند به یک فایل جدول سبک در بخش هدر):

<link rel = “stylesheet” type = “text / css” href = “style.css” />

– کد در بخش هدر

body {background-color: # FF0000؛} – کد در فایل style.css.

توجه داشته باشید که روش سوم ترجیح داده می شود، زیرا به شما اجازه می دهد تا محتوای و طرح بندی صفحات وب خود را کاملا جدا کرده و از تمامی امکانات سی اس اس استفاده کنید.

 

Tagged
پلاگین | طراحی سایت در کرج | طراحی وب سایت در کرج | کیان تجارت فاوا

راهنمایی های پلاگین جی کوئری

راهنمایی های پلاگین جی کوئری

حتما نام پلاگین شما منحصر به فرد است – همه قراردادهای نامگذاری در پلاگین خود، از جمله نام، کلاس و شناسه آن باید به همان اندازه منحصر به فرد باشد تا از درگیری با دیگر کد های CSS و جاوا اسکریپت و سایر توابع جی کوئری مهم تر جلوگیری شود.

نگه داشتن کد شما جدا شده – اجتناب از حداکثر ممکن ترکیب CSS و کد جاوا اسکریپت. شما هرگز نمی دانید که یک توسعه دهنده ممکن است بخواهد تغییر کند، بنابراین بهتر است این چیزها را در فایل های مربوطه نگه داریم.

لطفا NO Coding سخت – این چیزی که بیشتر ناامید کننده است در هر پلاگین که شما استفاده می کنید. یک مسیر سخت افزاری فایل کد در کد جاوا اسکریپت که فرض می کند شما از مسیر ریشه یا چیزی استفاده می کنید. مسیرهای تصویر همه را می توان در CSS با استفاده از تصاویر پس زمینه تنظیم کرد، و مسیرها در کد باید همه نسبت به آغاز با یکدیگر نوشته شوند.

پلاگین جی کوئری شما باید از جعبه کار کند – هر زمان که یک توسعه دهنده از پلاگین های شما استفاده کند باید حداقل یک حالت پیش فرض باشد که فقط از جعبه کار می کند.

وقتی که آنها پلاگین خود را تماس می دهند، باید چیزی بگذرد، اگر شما حداقل این کار را نداشته باشید، احتمالا افراد پلاگین خود را منتقل می کنند و دیگران را دنبال می کنند.

این باعث می شود که توسعه دهندگان واقعا آسان و در حال حاضر به آنها اجازه می دهد تا گزینه ها را به صورت ضروری تنظیم کنند.

ارائه گزینه های پلاگین – این از نقطه ای که در بالا ذکر شده است، زمانی که افزونه شما در حال کار است، هر گونه تغییر در آن باید از طریق برخی از گزینه ها ارائه شود. از طراحان بخواهید که ساختار خاصی با div داشته باشند.

اگر چه این پرونده را می توان شکسته به عنوان یک افزونه جی کوئری Slideshow که در آن کاربر ممکن است بخواهد چندین عکس را مشخص کند، در بیشتر موارد این را در کد نگه دارید و آن را به عنوان یک گزینه برای روشن یا خاموش کردن تنظیم کنید.

به طور کامل کد خود را در همه مرورگرها تست کنید – این مرحله آسان است و تنها وقت و تلاش کمی را طول می کشد. این نیز احتمالا مهمترین گام است که پلاگین شما را ایجاد خواهد کرد.

در بسیاری از موارد یک توسعه دهنده ممکن است در کد شما یک اشکال پیدا کند، اما کاربر قطعا دیر یا زود خواهد شد. اگر کاربران اشکالات را گزارش می کنند و به نظر می رسد که به طور مداوم پلاگین جی کوئری شما باشد، شانس خوبی است که آن را کاهش داده و جایگزین کنید.

اطمینان حاصل کنید که یک تست سریع را در تمام مرورگرها اجرا کنید و هر گونه مسائل جزئی قبل از انتشار را مرتب کنید.

سند کد پلاگین خود را – قبل از انتشار پلاگین خود اطمینان حاصل کنید که آن را مستند کنید. کد شما برای شما حساس است، زیرا شما آن را نوشتید، اما ممکن است برای دیگران یا حتی برای سه ماه قبل از زمان حساس نباشد.

 

Tagged