طراحی سایت

  • CSS Display

    آرایش CSS - مشخصه نمایش

    مشخصه نمایش (display) مهمترین مشخصه در CSS برای کنترل ظاهر میباشد.

    Display:

    این مشخصه تعیین می نماید که یک المان چگونه نمایش داده شود.

    هر تگ یا المان html بسته به نوع آن دارای شکل ظاهری پیشفرض می باشد. مقدار پیشفرض display برای اکثر تگ ها inline یا block می باشد.

    تگ های دارای مقدار بلاک(block):

    اینگونه تگ ها همیشه روی یک سطر جدید قرار میگیرند و کل پهنای موجود در دسترس صفحه را اِشغال می نمایند.(یعنی تا حد امکان به سمت چپ و راست کش می آید).

    برخی از المان های دارای مقدار پیشفرض block :
    • <div>
    • <h1> - <h6>
    • <p>
    • <form>
    • <header>
    • <footer>
    • <section>

    المانهای دارای inline:

    یک تگ دارای inline از سطر بعدی یا جدید استفاده نمیکند و فقط به اندازه ای که فضا نیاز دارد فضا را اشغال می نماید.

    برخی از تگ های دارای مقدار inline:
    • <span>
    • <a>
    • <img>

    مقدار display:none

    Display:none با کمک جاوااسکریپت برای پنهان و نشان دادن تگ ها بدون پاک کردن و یا ایجاد دوباره انها بکار میرود.

    تگ <script> بصورت پیشفرض از display:none  استفاده میکند.

    نادیده گرفتن یا تغییر مقدار پیشفرض display:

    شما میتوانید مقدار پیشفرض display مربوط به المان ها را تغییر دهید.

    مثال زیر تگ <li> را برای کاربرد در منوهای افقی مقدار inline میدهد.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    li {

       display: inline;

    }

    </style>

    </head>

    <body>

    <p>لیستی از لینکها بعنوان منوی افقی</p>

    <ul>

    <li><a href="http://www.parscreative.com" target="_blank">ParsCreative</a></li>

    <li><a href="http://www.parscreative.com/درباره-ما" target="_blank">About us</a></li>

    <li><a href="http://www.parscreative.com/مشتریان-ما" target="_blank">Our works</a></li>

    </ul>

    </body>

    </html>

    توجه: تنظیم ویژگی display مربوط به هر تگ تنها چگونگی نمایش آن تگ را تعیین میکند و نوع آن را تغییر نمیدهد.

    بنابراین یک تگ inline دارای ویژگی display:block اجازه داشتن تگ های block را درون خود ندارد.

    مثال زیر تگ های <span> را بصورت تگ block نشان میدهد.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    span {

       display: block;

    }

    </style>

    </head>

    <body>

    <span>display:block</span> <span>سطر بعدی برای تگ دوم</span>

    </body>

    </html>

    شما میتوانید تگ مورد نظر خود را بکمک display:none مخفی کنید.

    استفاده از display:none مانند این است که آن المان در صفحه وجود نداشته است.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    h1.hidden {

       display: none;

    }

    </style>

    </head>

    <body>

    <h1>این یک سرفصل قابل مشاهده است</h1>

    <h1 class="hidden">این یک سرفصل پنهان است</h1>

    <p>توجه کنید که هیچ فضایی برای متن دوم اشغال نشده است</p>

    </body>

    </html>

    ویژگی visibility:hidden نیز برای پنهان کردن المان بکار میرود با این تفاوت که فضای اشغال شده توسط آن المان را آزاد نمی کند و همچنان آن فضا در اختیار آن المان می باشد.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    h1.hidden {

       visibility: hidden;

    }

    </style>

    </head>

    <body>

    <h1>یک سرفصل قابل مشاهده</h1>

    <h1 class="hidden">یک سرفصل پنهان</h1>

    <p>توجه داشته باشید که متن پنهان شده همچنان فضای خود را اشغال نموده است</p>

    </body>

    </html>

     

  • CSS Icons

    آیکن در css:

    چگونه آیکن درج کنیم؟

    ساده ترین راه برای درج آیکن در صفحه htmlتان استفاده از کتابخانه آیکن می باشد. مانند: کتابخانه Font Awsome.

    نام کلاس آیکن مورد نظر را در درون المان های html قرار دهید.(مانند: <i> یا <span>)

    تمامی آیکن های موجود در کتابخانه های آیکن، دارای ویژگی هایی هستند که از طریق css تعریف میشود(مانند: size,color,shadow,… )

    آیکن های Font Awsome:

    برای استفاده از آیکن های font awesome دستور زیر را درون تگ <head> مربوط به صفحه htmlتان وارد کنید:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    توجه کنید که در اینجا نیاز به دانلود و یا نصب هیچگونه فایلی نخواهید داشت.

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <title>Font Awesome آیکن های</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    </head>

    <body>

    <p>font awsome برخی از آیکن های</p>

    <i class="fa fa-cloud"></i>

    <i class="fa fa-heart"></i>

    <i class="fa fa-car"></i>

    <i class="fa fa-file"></i>

    <i class="fa fa-bars"></i>

    <p><br>اندازه و رنگ آیکن ها</p>

    <i class="fa fa-cloud" style="font-size:24px;"></i>

    <i class="fa fa-cloud" style="font-size:36px;"></i>

    <i class="fa fa-cloud" style="font-size:48px;color:red;"></i>

    <i class="fa fa-cloud" style="font-size:60px;color:lightblue;"></i>

    </body>

    </html>

    آیکن های bootstrap:

    برای استفاده از آیکن های bootstrapglyphicons دستور زیر را در تگ <head> مربوط به صفحه htmlتان بنویسید:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    در اینجا نیز نیاز به دانلود و یا نصب ندارید.

    <!DOCTYPE html>

    <html>

    <head>

    <title>Bootstrap آیکن های</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    </head>

    <body class="container">

    <p>Bootstrap برخی از آیکن های</p>

    <i class="glyphicon glyphicon-cloud"></i>

    <i class="glyphicon glyphicon-remove"></i>

    <i class="glyphicon glyphicon-user"></i>

    <i class="glyphicon glyphicon-envelope"></i>

    <i class="glyphicon glyphicon-thumbs-up"></i>

    <br><br>

    <p>اندازه و رنگ آیکن ها</p>

    <i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>

    <i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>

    <i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>

    <i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>

    </body>

    </html>

    آیکن های Google:

    برای استفاده از آیکن های گوگل دستور زیر را در تگ <head> مربوط به صفحه htmlتان بنویسید.

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    در اینجا نیز نیاز به نصب و یا دانلود هیچ فایلی ندارید.

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <title>Google آیکن های</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    </head>

    <body>

    <p>برخی از آیکن های گوگل</p>

    <i class="material-icons">cloud</i>

    <i class="material-icons">favorite</i>

    <i class="material-icons">attachment</i>

    <i class="material-icons">computer</i>

    <i class="material-icons">traffic</i>

    <br><br>

    <p>اندازه و رنگ آیکن ها</p>

    <i class="material-icons" style="font-size:24px;">cloud</i>

    <i class="material-icons" style="font-size:36px;">cloud</i>

    <i class="material-icons" style="font-size:48px;color:red;">cloud</i>

    <i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>

    </body>

    </html>

    برای مشاهده آیکن های مربوط به کلاس های font awesome,google,bootstrap به سایت های مربوط به هریک مراجعه نمایید.

    fontawesome.io/icon

    getbootstrap.com/components/#glyphicons

    materializecss.com/icons.html

     

  • CSS Links

    لینک در CSS:

    لینک ها در CSS بصورت های مختلفی نمایش داده میشوند

    لینک ها میتوانند تمامی ویژگی های CSS را داشته باشند(مانند: color, font-family, background,…)

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    a {

       color: hotpink;

    }

    </style>

    </head>

    <body>

    <p><b><a href="/default.asp" target="_blank">این یک لینک است</a></b></p>

    </body>

    </html>

    اضافه میکنیمکه لینک ها را میتوان بسته به وضعیتی که در آن قرار دارند به شکلهای مختلف نمایش داد.

    چهار وضعیت لینک ها بصورت زیر میباشد:

    a:link: یک لینک معمولی که دیده نشده است.

    a:visited : لینکی که کاربر آنرا مشاهده کرده.

    a:hover : لینکی که کاربر موشواره(موس) را بر روی آن قرار داده است.

    a:active : لحظه ای که روی لینک کلیک شده است.

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    /* لینک دیده نشده */

    a:link {

       color: red;

    }

    /* لینک دیده شده */

    a:visited {

       color: green;

    }

    /* اشاره گر موس روی لینک */

    a:hover {

       color: hotpink;

    }

    /* لینک انتخاب شده */

    a:active {

       color: blue;

    }

    </style>

    </head>

    <body>

    <p><b><a href="/default.asp" target="_blank">این یک لینک است</a></b></p>

    </body>

    </html>

    *** تذکر:در CSS باید a:hover بعد از a:link و a:visited تعریف شود تا بتواند اجرا شود.

    *** تذکر: در CSS باید a:active بعد از a:hover تعریف شود تا بتواند اجرا شود.

    Text-decoration:

    ویژگی text-decoration اصولا برای برداشتن خط زیر لینک بکار میرود.

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    a:link {

       text-decoration: none;

    }

    a:visited {

       text-decoration: none;

    }

    a:hover {

       text-decoration: underline;

    }

    a:active {

       text-decoration: underline;

    }

    </style>

    </head>

    <body>

    <p><b><a href="/default.asp" target="_blank">این یک لینک است</a></b></p>

    </body>

    </html>

    Background-color:

    ویژگی background-color میتواند برای تعریف کردن پسزمینه برای لینک بکار رود.

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    a:link {

       background-color: yellow;

    }

    a:visited {

       background-color: lightblue;

    }

    a:hover {

       background-color: lightgreen;

    }

    a:active {

       background-color: hotpink;

    }

    </style>

    </head>

    <body>

    <p><b><a href="/default.asp" target="_blank">این یک لینک است</a></b></p>

    </body>

    </html>

    مثال زیر ترکیب چند ویژگی CSS را برای نشان دادن لینک بشکل دکمه یا جعبه متنی نشان میدهد:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    a:link, a:visited {

       background-color: #d137d1;

       color: white;

       padding: 14px 25px;

       text-align: center;

       text-decoration: none;

       display: inline-block;

    }

    a:hover, a:active {

       background-color: purple;

    }

    </style>

    </head>

    <body>

    <a href="/default.asp" target="_blank">این یک لینک است</a>

    </body>

    </html>

  • CSS Lists

    لیست در CSS:

    ویژگی های لیست css و لیست های html:

    در html دونوع لیست اصلی وجود دارد:

    لیست های نامرتب (<ul>): مطالب موجود در این لیست ها به کمک گلوله یا دایره علامت گذاری میشوند.

    لیست های مرتب (<ol>): مطالب موجود در این لیست ها به کمک اعداد یا حروف الفبایی علامت گذاری میشوند.

    ویژگی های لیست css به شما اجازه میدهد تا:

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

    علامت گذارهای مختلف لیست ها:

    1. مشخصه list-style-type نوع علامت گذار مطالب یک لیست را مشخص مینماید.

    مثال زیر تعدادی از علامت گذارهای لیستی موجود را نشان میدهد:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    ul.a {

       list-style-type: circle;

    }

    ul.b {

       list-style-type: square;

    }

    ol.c {

       list-style-type: upper-roman;

    }

    ol.d {

       list-style-type: lower-alpha;

    }

    </style>

    </head>

    <body>

    <p>Example of unordered lists:</p>

    <ul class="a">

    <li>apple</li>

    <li>orange</li>

    <li>peach</li>

    </ul>

    <ul class="b">

    <li>apple</li>

    <li>orange</li>

    <li>peach</li>

    </ul>

    <p>Example of ordered lists:</p>

    <ol class="c">

    <li>apple</li>

    <li>orange</li>

    <li>peach</li>

    </ol>

    <ol class="d">

    <li>apple</li>

    <li>orange</li>

    <li>peach</li>

    </ol>

    </body>

    </html>

    توجه داشته باشید که برخی از مقادیر بالا برای لیست های مرتب و برخی برای لیست های نامرتب میباشند.

    1. یک تصویر بعنوان علامتگذار مطالب لیست:

    مشخصه list-style-image یک تصویر برای علامتگذاری مطالب یک لیست تعریف مینماید.

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    ul {

       list-style-image: url('http://www.parscreative.com/images/ArticlePictures/fruit.png');

    }

    </style>

    </head>

    <body>

    <ul>

    <li>orange</li>

    <li>apple</li>

    <li>peach</li>

    </ul>

    </body>

    </html>

    موقعیت و مکان علامتگذارهای مطالب یک لیست:

    مشخصه list-style-position تعیین میکند که علامتگذار مطالب یک لیست کجا قرار گیرد: درون یا بیرون متن موجود.

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    ul.a {list-style-position:inside;}

    ul.b {list-style-position:outside;}

    </style>

    </head>

    <body>

    <p>The following list has list-style-position: inside:</p>

    <ul class="a">

    <li>apple</li>

    <li>orange</li>

    <li>peach</li>

    </ul>

    <p>The following list has list-style-position: outside:</p>

    <ul class="b">

    <li>apple</li>

    <li>orange</li>

    <li>peach</li>

    </ul>

    </body>

    </html>

    توجه کنید که مقدار outside بصورت پیشفرض در نظر گرفته میشود.

    حذف تنظیمات پیشفرض:

    مشخصه و مقدار list-style-type:none برای حذف علامت گذارها یا گلوله ها بکار میرود. توجه داشته باشید که لیست دارای margin و padding نیز میباشد و برای حزف آنها میتوانید از margin:0 و padding:0 در تگ های <ul> و یا <ol> استفاده نمایید.

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    ul.demo {

       list-style-type: none;

       margin: 0;

       padding: 0;

    }

    </style>

    </head>

    <body>

    <p>Default list:</p>

    <ul>

    <li>apple</li>

    <li>orange</li>

    <li>peach</li>

    </ul>

    <p> margin و padding حذف گلوله ها و</p>

    <ul class="demo">

    <li>apple</li>

    <li>orange</li>

    <li>peach</li>

    </ul>

    </body>

    </html>

    خلاصه نویسی مشخصه list:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    ul {

       list-style: square inside url('http://www.parscreative.com/images/ArticlePictures/fruit.png');

    }

    </style>

    </head>

    <body>

    <ul>

    <li>apple</li>

    <li>orange</li>

    <li>peach</li>

    </ul>

    </body>

    </html>

    هنگامی که از خلاصه نویسی استفاده میکنید ترتیب مقادیر مشخصه بصورت زیر میباشد:

    List-style-type: هنگامی که list-style-image تعریف شده باشد، مقدار list-style-type درصورتی نشان داده خواهد شد که به دلیلی تصویر علامت نشان داده نشود.

    list-style-position

    list-style-image

    ظاهر دادن به لیست توسط رنگ ها:

    ما میتوانیم به لیست خود با استفاده از رنگ ها شکل دیگری ببخشیم تا آنها را جذاب تر جلوه دهیم.

    هر مشخصه ای که به تگ های <ol> یا <ul> داده شود روی کل لیست اعمال میشود اما اگر این مشخصه به تگ <li> داده شود فقط مطلب درون آن را در برمیگیرد.

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    ol {

       background: #ff9999;

       padding: 20px;

    }

    ul {

       background: #3399ff;

       padding: 20px;

    }

    ol li {

       background: #ffe5e5;

       padding: 5px;

       margin-left: 35px;

    }

    ul li {

       background: #cce5ff;

       margin: 5px;

    }

    </style>

    </head>

    <body>

    <h1>رنگ دادن به لیست ها</h1>

    <ol>

    <li>apple</li>

    <li>orange</li>

    <li>peach</li>

    </ol>

    <ul>

    <li>apple</li>

    <li>orange</li>

    <li>peach</li>

    </ul>

    </body>

    </html>

    مثال های بیشتر:

    قرار دادن یک خط بنفش سمت چپ لیست:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    ul {

       border-left: 5px solid purple;

       background-color: #f1f1f1;

       list-style-type: none;

       padding: 10px 20px;

    }

    </style>

    </head>

    <body>

    <p>List with a purple left border:</p>

    <ul>

    <li>apple</li>

    <li>orange</li>

    <li>peach</li>

    </ul>

    </body>

    </html>

    یک لیست خط کشی شده بدون علامتگذار گلوله ای:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    ul {

       list-style-type: none;

       padding: 0;

       border: 1px solid #ddd;

    }

    ul li {

       padding: 8px 16px;

       border-bottom: 1px solid #ddd;

    }

    ul li:last-child {

       border-bottom: none

    }

    </style>

    </head>

    <body>

    <p>Full-width bordered list:</p>

    <ul>

    <li>apple</li>

    <li>orange</li>

    <li>peach</li>

    </ul>

    </body>

    </html>

    تمامی علامتگذارها لیست ها:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    ul.a {list-style-type: circle;}

    ul.b {list-style-type: disc;}

    ul.c {list-style-type: square;}

    ol.d {list-style-type: armenian;}

    ol.e {list-style-type: cjk-ideographic;}

    ol.f {list-style-type: decimal;}

    ol.g {list-style-type: decimal-leading-zero;}

    ol.h {list-style-type: georgian;}

    ol.i {list-style-type: hebrew;}

    ol.j {list-style-type: hiragana;}

    ol.k {list-style-type: hiragana-iroha;}

    ol.l {list-style-type: katakana;}

    ol.m {list-style-type: katakana-iroha;}

    ol.n {list-style-type: lower-alpha;}

    ol.o {list-style-type: lower-greek;}

    ol.p {list-style-type: lower-latin;}

    ol.q {list-style-type: lower-roman;}

    ol.r {list-style-type: upper-alpha;}

    ol.s {list-style-type: upper-latin;}

    ol.t {list-style-type: upper-roman;}

    ol.u {list-style-type: none;}

    ol.v {list-style-type: inherit;}

    </style>

    </head>

    <body>

    <ul class="a">

    <li>Circle type</li>

    <li>apple</li>

    <li>peach</li>

    </ul>

    <ul class="b">

    <li>Disc type</li>

    <li>apple</li>

    <li>peach</li>

    </ul>

    <ul class="c">

    <li>Square type</li>

    <li>apple</li>

    <li>peach</li>

    </ul>

    <ol class="d">

    <li>Armenian type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="e">

    <li>Cjk-ideographic type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="f">

    <li>Decimal type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="g">

    <li>Decimal-leading-zero type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="h">

    <li>Georgian type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="i">

    <li>Hebrew type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="j">

    <li>Hiragana type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="k">

    <li>Hiragana-iroha type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="l">

    <li>Katakana type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="m">

    <li>Katakana-iroha type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="n">

    <li>Lower-alpha type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="o">

    <li>Lower-greek type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="p">

    <li>Lower-latin type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="q">

    <li>Lower-roman type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="r">

    <li>Upper-alpha type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="s">

    <li>Upper-latin type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="t">

    <li>Upper-roman type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="u">

    <li>None type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    <ol class="v">

    <li>inherit type</li>

    <li>apple</li>

    <li>peach</li>

    </ol>

    </body>

    </html>

  • CSS Position

    ویژگی position:

    روش قرار گرفتن یک تگ را مشخص میکند.(static, fixed, absolute, relative)

    این ویژگی میتواند یکی از چهار مقدار زیر را داشته باشد:

    Static

    Relative

    Fixed

    Absolute

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

    هریک از ویژگی های top,bottom,left,right با توجه به مقدار تعریف شده برای position متفاوت میباشند.

    مقدار static برای position:

    Static مقدار پیشفرض المانهای html برای position ، می باشد.

    المان دارای مقدار static از ویژگیهای top,bottom,left,right تاثیر نمی پذیرد.

    المان دارای مقدار static با توجه به حالت صفحه بصورت معمولی و عادی در صفحه قرار میگیرد.

    به مثال زیر توجه کنید:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    div.static {

       position: static;

       border: 3px solid #660066;

    }

    </style>

    </head>

    <body>

    <h2>position: static;</h2>

    <p>المان دارای این مقدار هیچ موقعیت خاصی را نمیگیرد</p>

    <div class="static">

    This div element has position: static;

    </div>

    </body>

    </html>

    مقدار position:relative:

    یک المان دارای مقدار relative نسبت به موقعیت عادی خود قرار میگیرد.

    ویژگیهای top,bottom,right,left برای المان دارای position:relative ، موقعیتی که المان در حالت عادی میگیرد را تغییر میدهند.

    مثال زیر را در نظر بگیرید:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    div.relative {

       position: relative;

       left: 20px;

       border: 3px solid #660066;

    }

    </style>

    </head>

    <body>

    <h2>position: relative;</h2>

    <div class="relative">

    This div element has position: relative;

    </div>

    </body>

    </html>

    مقدار position:fixed :

    المان دارای positin:fixed با توجه به نمایشگر قرار میگیرد. به این معنی که حتی اگر صفحه اسکرول خورد این المان در همان مکان میماند و تکان نمی خورد.

    ویژگی های top,bottom,left,right برای قرار دادن المان در جای خاص بکار می روند.

    یک المان fixed صفحه ای که در آن قرار دارد را ترک نخواهد کرد.

    مثال زیر قرار گرفتن یک div در پایین سمت راست صفحه را نشان میدهد:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    div.fixed {

       position: fixed;

       bottom: 0;

       right: 0;

       width: 200px;

       border: 3px solid #660066;

    }

    </style>

    </head>

    <body>

    <h2>position: fixed;</h2>

    <div class="fixed">

    position: fixed;

    </div>

    </body>

    </html>

    مقدار position:absolute

    المان دارای position:absolute نسبت به نزدیکترین والد موقعیتی موقعیت دارد (به جای موقعیت نسبت به نمایشگر مانند position:fixed)

    درصورتی که یک المان دارای مقدار absolute هیچ والد position داری نداشته باشد، از body استفاده نموده و با اسکرول خوردن صفحه جابجا می شود.

    توجه داشته باشید که منظور از position دار هر مقداری بجز static است.

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    div.relative {

       position: relative;

       width: 400px;

       height: 200px;

       border: 3px solid #660066;

    }

    div.absolute {

       position: absolute;

       top: 80px;

       right: 0;

       width: 200px;

       height: 100px;

       border: 3px solid #990066;

    }

    </style>

    </head>

    <body>

    <h2>position: absolute;</h2>

    <div class="relative">This div element has position: relative;

    <div class="absolute">This div element has position: absolute;</div>

    </div>

    </body>

    </html>

    المان های همپوشانی:

    هنگامی که المان ها position میگیرند میتوانند با سایر المان ها همپوشانی داشته باشند.

    مشخصه z-index ترتیب قرار گرفتن عناصر را مشخص میکند(اینکه کدام عنصر باید جلوتر و کدام باید عقب تر قرار گیرد)

    این مقدار میتواند منفی یا مثبت باشد.

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    img {

       position: absolute;

       left: 0px;

       top: 0px;

       z-index: -1;

    }

    </style>

    </head>

    <body>

    <h1>This is a heading</h1>

    <img src="/images/photo.jpg" width="100" height="140">

    <p>چون تصویر دارای مقدار منفی میباشد در پشت متن قرار میگیرد</p>

    </body>

    </html>

    المان دارای مقدار z-index بزرگتر همیشه جلو یا روی المان دارای مقدار کوچکتر قرار میگیرد.

    زمانیکه دو المان position دار بدون z-index در یکجا تعریف شوند المانی که در کد html پایین تر تعریف شده است در بالای المان دیگر نشان داده میشود.

    قرار دادن متن روی تصویر:

    مثال زیر قرار دادن یک متن در بالای سمت چپ تصویر را نشان میدهد:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    .container {

       position: relative;

    }

    .topleft {

       position: absolute;

       top: 8px;

       left: 16px;

       font-size: 18px;

    }

    img {

       width: 100%;

       height: auto;

       opacity: 0.3;

    }

    </style>

    </head>

    <body>

    <h2>متن تصویر</h2>

    <p>متن در بالای سمت چپ یک تصویر</p>

    <div class="container">

    <img src="/images/parscreative-template.jpg" alt="Norway" width="1000" height="300">

    <div class="topleft">بالا چپ</div>

    </div>

    </body>

    </html>

     

  • CSS Tables

    جدول در CSS

    شکل ظاهری یک جدول html را میتوان با کمک css بهتر نمود.

    خطوط جدول:

    برای تعریف خطوط دور جدول از ویژگی border در css استفاده کنید.

    مثال زیر یک خط مرزی سیاه برای تگ های <table> و <th> و <td> تعریف میکند.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    table, th, td {

       border: 1px solid black;

    }

    </style>

    </head>

    <body>

    <h2>قرار دادن مرز برای جدول</h2>

    <table>

    <tr>

       <th>Firstname</th>

       <th>Lastname</th>

    </tr>

    <tr>

       <td>Peter</td>

       <td>Griffin</td>

    </tr>

    <tr>

       <td>Lois</td>

       <td>Griffin</td>

    </tr>

    </table>

    </body>

    </html>

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

    جمع مرزهای جدول:

    ویژگی border-collapse مشخص میکند که مرزهای جدول یکی شوند.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    table {

       border-collapse: collapse;

    }

    table, td, th {

       border: 1px solid black;

    }

    </style>

    </head>

    <body>

    <h2>یکی کردن مرزها</h2>

    <table>

    <tr>

       <th>Firstname</th>

       <th>Lastname</th>

    </tr>

    <tr>

       <td>Peter</td>

       <td>Griffin</td>

    </tr>

    <tr>

       <td>Lois</td>

       <td>Griffin</td>

    </tr>

    </table>

    </body>

    </html>

    در صورتی که میخواهید فقط دور جدولتان مرز بگذارید کافیست border را تنها برای <table> بکار ببرید.

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    table {

       border-collapse: collapse;

       border: 1px solid black;

    }

    </style>

    </head>

    <body>

    <h2>مرز دور جدول</h2>

    <table>

    <tr>

       <th>Firstname</th>

       <th>Lastname</th>

    </tr>

    <tr>

       <td>Peter</td>

       <td>Griffin</td>

    </tr>

    <tr>

       <td>Lois</td>

       <td>Griffin</td>

    </tr>

    </table>

    </body>

    </html>

    پهنا و ارتفاع جدول:

    پهنا و ارتفاع جدول توسط دو ویژگی width  و heightتعریف میشود.

    مثال زیر پهنای جدول را 100% و ارتفاع سرفصل ها <th> را 50 پیکسل تعریف میکند.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    table, td, th {

       border: 1px solid black;

    }

    table {

       border-collapse: collapse;

       width: 100%;

    }

    th {

       height: 50px;

    }

    </style>

    </head>

    <body>

    <h2>ویژگی های پهنا و ارتفاع</h2>

    <p>تعریف پهنا و ارتفاع سطر سرفصل</p>

    <table>

    <tr>

       <th>Firstname</th>

       <th>Lastname</th>

       <th>Savings</th>

    </tr>

    <tr>

       <td>Peter</td>

       <td>Griffin</td>

       <td>$100</td>

    </tr>

    <tr>

       <td>Lois</td>

       <td>Griffin</td>

       <td>$150</td>

    </tr>

    <tr>

       <td>Joe</td>

       <td>Swanson</td>

       <td>$300</td>

    </tr>

    <tr>

       <td>Cleveland</td>

       <td>Brown</td>

       <td>$250</td>

    </tr>

    </table>

    </body>

    </html>

    آرایش افقی:

    ویژگی text-align آرایش افقی (مانند چپ، راست یا وسط بودن) متن درون <th> یا <td> را مشخص مینماید.

    بصورت پیشفرض متن درون <th> وسط چین و درون <td> چپ چین میباشد.

    مثال زیر چیدمان متن درون <th> را چپ چین تعریف میکند.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    table, td, th {

       border: 1px solid black;

    }

    table {

       border-collapse: collapse;

       width: 100%;

    }

    th {

       text-align: left;

    }

    </style>

    </head>

    <body>

    <h2>The text-align Property</h2>

    <p>این ویژگی چیدمان افقی متن را مشخص میکند</p>

    <table>

    <tr>

       <th>Firstname</th>

       <th>Lastname</th>

       <th>Savings</th>

    </tr>

    <tr>

       <td>Peter</td>

       <td>Griffin</td>

       <td>$100</td>

    </tr>

    <tr>

       <td>Lois</td>

       <td>Griffin</td>

       <td>$150</td>

    </tr>

    <tr>

       <td>Joe</td>

       <td>Swanson</td>

       <td>$300</td>

    </tr>

    <tr>

       <td>Cleveland</td>

       <td>Brown</td>

       <td>$250</td>

    </tr>

    </table>

    </body>

    </html>

    آرایش عمودی:

    ویژگی vertical-align چیدمان عمودی (مانند: بالا ، پایین یا وسط) را در <th> و <td> مشخص میکند.

    بصورت پیشفرض چیدمان عمودی محتوای جدول برای <td> و <th> وسط چین میباشد.

    مثال زیر چیدمان عمودی متن را در پایین <td> قرار میدهد.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    table, td, th {

       border: 1px solid black;

    }

    table {

       border-collapse: collapse;

       width: 100%;

    }

    td {

       height: 50px;

       vertical-align: bottom;

    }

    </style>

    </head>

    <body>

    <h2>The vertical-align Property</h2>

    <table>

    <tr>

       <th>Firstname</th>

       <th>Lastname</th>

       <th>Savings</th>

    </tr>

    <tr>

       <td>Peter</td>

       <td>Griffin</td>

       <td>$100</td>

    </tr>

    <tr>

       <td>Lois</td>

       <td>Griffin</td>

       <td>$150</td>

    </tr>

    <tr>

       <td>Joe</td>

       <td>Swanson</td>

       <td>$300</td>

    </tr>

    <tr>

       <td>Cleveland</td>

       <td>Brown</td>

       <td>$250</td>

    </tr>

    </table>

    </body>

    </html>

    Padding در جدول:

    برای کنترل فضای بین مرز و متن در یک جدول، از ویژگی padding روی <td> و <th> استفاده کنید.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    table, td, th {  

       border: 1px solid #ddd;

       text-align: left;

    }

    table {

       border-collapse: collapse;

       width: 100%;

    }

    th, td {

       padding: 15px;

    }

    </style>

    </head>

    <body>

    <h2>padding ویژگی</h2>

    <table>

    <tr>

       <th>Firstname</th>

       <th>Lastname</th>

       <th>Savings</th>

    </tr>

    <tr>

       <td>Peter</td>

       <td>Griffin</td>

       <td>$100</td>

    </tr>

    <tr>

       <td>Lois</td>

       <td>Griffin</td>

       <td>$150</td>

    </tr>

    <tr>

       <td>Joe</td>

       <td>Swanson</td>

       <td>$300</td>

    </tr>

    <tr>

       <td>Cleveland</td>

       <td>Brown</td>

       <td>$250</td>

    </tr>

    </table>

    </body>

    </html>

    تقسیم کننده های افقی:

    ویژگی border-bottom را در <th> و <td> برای تقسیم بندی افقی بکار ببرید.

    مثال:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    table {

       border-collapse: collapse;

       width: 100%;

    }

    th, td {

       padding: 8px;

       text-align: left;

       border-bottom: 1px solid #ddd;

    }

    </style>

    </head>

    <body>

    <table>

    <tr>

       <th>Firstname</th>

       <th>Lastname</th>

       <th>Savings</th>

    </tr>

    <tr>

       <td>Peter</td>

       <td>Griffin</td>

       <td>$100</td>

    </tr>

    <tr>

       <td>Lois</td>

       <td>Griffin</td>

       <td>$150</td>

    </tr>

    <tr>

       <td>Joe</td>

       <td>Swanson</td>

       <td>$300</td>

    </tr>

    <tr>

       <td>Cleveland</td>

       <td>Brown</td>

       <td>$250</td>

    </tr>

    </table>

    </body>

    </html>

    Hover در جدول:

    از سلکتور :hover روی <tr> برای برجسته تر نشان دادن سطرهای جدول یا حرکت موس استفاده نمایید.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    table {

       border-collapse: collapse;

       width: 100%;

    }

    th, td {

       padding: 8px;

       text-align: left;

       border-bottom: 1px solid #ddd;

    }

    tr:hover{background-color:#666633}

    </style>

    </head>

    <body>

    <p>موس را بر روی سطرهای جدول حرکت دهید تا نتیجه را ببینید</p>

    <table>

    <tr>

       <th>First Name</th>

       <th>Last Name</th>

       <th>Points</th>

    </tr>

    <tr>

       <td>Peter</td>

       <td>Griffin</td>

       <td>$100</td>

    </tr>

    <tr>

       <td>Lois</td>

       <td>Griffin</td>

       <td>$150</td>

    </tr>

    <tr>

       <td>Joe</td>

       <td>Swanson</td>

       <td>$300</td>

    </tr>

    <tr>

       <td>Cleveland</td>

       <td>Brown</td>

       <td>$250</td>

    </tr>

    </table>

    </body>

    </html>

    جداول راه راه:

    برای راه راه کردن جدول ها از سلکتور nth-child() استفاده کرده و به سطرهای زوج(یا سطرهای فرد) یک رنگ پسزمینه بکار برید.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    table {

       border-collapse: collapse;

       width: 100%;

    }

    th, td {

       text-align: left;

       padding: 8px;

    }

    tr:nth-child(even){background-color: #d9d9d9}

    </style>

    </head>

    <body>

    <h2>جدول راه راه</h2>

    <table>

    <tr>

       <th>First Name</th>

       <th>Last Name</th>

       <th>Points</th>

    </tr>

    <tr>

       <td>Peter</td>

       <td>Griffin</td>

       <td>$100</td>

    </tr>

    <tr>

       <td>Lois</td>

       <td>Griffin</td>

       <td>$150</td>

    </tr>

    <tr>

       <td>Joe</td>

       <td>Swanson</td>

       <td>$300</td>

    </tr>

    <tr>

       <td>Cleveland</td>

       <td>Brown</td>

       <td>$250</td>

    </tr>

    </table>

    </body>

    </html>

    رنگ متن جدول:

    مثال زیر رنگ پسزمینه و رنگ متن جدول را تعیین میکند.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    table {

       border-collapse: collapse;

       width: 100%;

    }

    th, td {

       text-align: left;

       padding: 8px;

    }

    tr:nth-child(even){background-color: #d9d9d9}

    th {

       background-color: #4CAF50;

       color: white;

    }

    </style>

    </head>

    <body>

    <table>

    <tr>

       <th>Firstname</th>

       <th>Lastname</th>

       <th>Savings</th>

    </tr>

    <tr>

       <td>Peter</td>

       <td>Griffin</td>

       <td>$100</td>

    </tr>

    <tr>

       <td>Lois</td>

       <td>Griffin</td>

       <td>$150</td>

    </tr>

    <tr>

       <td>Joe</td>

       <td>Swanson</td>

       <td>$300</td>

    </tr>

    <tr>

       <td>Cleveland</td>

       <td>Brown</td>

       <td>$250</td>

    </tr>

    </table>

    </body>

    </html>

    جدول توسعه یافته و responsive :

    هنگامی که صفحه نمایش از محتمای موجود در جدول کوچکتر باشد یک جدول responsive یک نوار اسکرول افقی برای نمایش تمامی محتویاتش نمایش میدهد.برای این کار از overflow-x:auto درون تگ <div>استفاده میکنیم.

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    table {

       border-collapse: collapse;

       width: 100%;

    }

    th, td {

       text-align: left;

       padding: 8px;

    }

    tr:nth-child(even){background-color: #f2f2f2}

    </style>

    </head>

    <body>

    <h2>Responsive جدول</h2>

    <p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto</strong> around the table element:</p>

    <div style="overflow-x:auto;">

    <table>

       <tr>

         <th>First Name</th>

         <th>Last Name</th>

         <th>Points</th>

         <th>Points</th>

         <th>Points</th>

         <th>Points</th>

         <th>Points</th>

         <th>Points</th>

         <th>Points</th>

         <th>Points</th>

         <th>Points</th>

         <th>Points</th>

       </tr>

       <tr>

         <td>Jill</td>

         <td>Smith</td>

         <td>50</td>

         <td>50</td>

         <td>50</td>

         <td>50</td>

         <td>50</td>

         <td>50</td>

         <td>50</td>

         <td>50</td>

         <td>50</td>

         <td>50</td>

       </tr>

       <tr>

         <td>Eve</td>

         <td>Jackson</td>

         <td>94</td>

         <td>94</td>

         <td>94</td>

         <td>94</td>

         <td>94</td>

         <td>94</td>

         <td>94</td>

         <td>94</td>

         <td>94</td>

         <td>94</td>

       </tr>

       <tr>

         <td>Adam</td>

         <td>Johnson</td>

         <td>67</td>

         <td>67</td>

         <td>67</td>

         <td>67</td>

         <td>67</td>

         <td>67</td>

         <td>67</td>

         <td>67</td>

         <td>67</td>

         <td>67</td>

       </tr>

    </table>

    </div>

    </body>

    </html>

     

  • CSS width

    عرض(پهنا) و ماکزیمم پهنا (with,max-width):

    استفاده ازwidth, max-width وmargin:auto

    یک المان یا تگ دارای مقدار پیشفرضblock همیشه تمامی عرض و پهنای فضای موجود و در دسترس را میگیرد(تا جایی که فضا موجود باشد به سمت چپ و راست کش می آید.)

    تنظیمwidth یا عرض یک تگ دارای سطح بلاک از کشیده شدن لبه های متن آن جلوگیری مینماید سپس میتوانید از قرار دادن مقدارauto برایmargin استفاده نمایید تا تگ مورد نظر از دید افقی در وسط صفحه قرار گیرد.

    توجه داشته باشید درصورتی که پهنای تعریف شده بیش از پهنای صفحه بروزر باشد در این صورت یک اسکرول افقی بر روی صفحه ایجاد خواهد شد.در این صورت استفاده ازmax-width به جایwidth باعث میشود که بروزر بتواند بهتر صفحه های کوچک را مدیریت نماید. گفته میشود که این کار برای وسایل دارای صفحات کوچکتر لازم است.

    به مثال زیر توجه کنید:

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    div.ex1 {

       width:500px;

       margin: auto;

       border: 3px solid #73AD21;

    }

    div.ex2 {

       max-width:500px;

       margin: auto;

       border: 3px solid #73AD21;

    }

    </style>

    </head>

    <body>

    <div class="ex1">این تگ دارای پهنای 500 پیکسل میباشد</div>

    <br>

    <div class="ex2">این تگ دارای ماکزیمم پهنای 500 پیکسل میباشد</div>

    <p>برای مشاهده تفاوت بین دو تگ صفحه بروزر خود را کوچکتر از 500 پیکسل نمایید</p>

    </body>

    </html>

  • margin در CSS

    خصوصیت margin برای ایجاد فضا در اطراف عناصر بکار میرود.

    خصوصیت margin اندازه فضای خالی بیرون از مرز را تعیین مینماید.

    در CSS شما میتوانید در تمامی جهت ها فضای خالی(margin) بدهید.بالا،راست،پایین،چپ(top,right,bottom,left).

    جهت های جداگانه در margin:

    در CSS برای هر جهت شما میتوانید بصورت جداگانه margin (فضا) بزنید.

    Margin-top                ایجاد فضا در بالای مرز 

    Margin-right      ایجاد فضا در سمت راست مرز

    Margin-bottom           ایجاد فضا در پایین مرز

    Margin-left            ایجاد فضا در سمت چپ مرز

    تمامی توابع margin میتوانند دارای ارزشهای زیر باشند:

    Autoدر اینجا بروزر میزان فضا را محاسبه مینماید.

    Lengthدر اینجا میتوانید خود اندازه فضا را تعیین نمایید(در اندازه های پیکسل،سانتی مترو...)

    %دراینجا فضایی براساس مقدار درصد پهنای عنصر دربردارنده تعریف میکنید.

    Inheritدر اینجا مشخص میکنید که عنصر شما باید فضای خودرا از عنصر والد به ارث ببرد .

    توجه:در margin شما میتوانید از مقدارهای منفی نیز استفاده کنید.

    مثال:

    p {
    margin-top: -100px;
    margin-bottom: - 10px;
    margin-right: 150px;
    margin-left: 80px;
    }

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

    مثال بالا را در نظر بگیرید:

    p {
    margin: -100px 150px -10px 80px;
    }

    کد کوتاه شده margin بصورت زیر تعریف میشود:

    Margin:top right bottom left;

    اگر کد را بشکل زیر بنویسید:

    p {
    margin: -100px 150px -10px;
    }

    آنگاه معنی زیر را میدهد:

    Margin: top left & right bottom;

    بدین معنی که از بالا -100px و از راست و چپ 150px و از پایین -10px فضا خواهیم داشت.

    و اگر کد را بشکل زیر بنویسید:

    p {
      margin: -100px 150px ;
    }

    آنگاه معنی زیر را میدهد:

    Margin: top & bottom left & right;

    بدین معنی که از بالا و پایین -100px و از راست و چپ 150px فضا خواهیم داشت.

    اگر کد را بشکل زیر بنویسید:

    p {
      margin: -100px ;
    }

    آنگاه معنی زیر را میدهد:

    Margin:top& left & right & bottom  ;

    بدین معنی که از تمامی جهات -100px فضا خواهیم داشت.

    - اگر از مقدار auto برای margin استفاده نمایید، بصورت افقی عنصر را در وسط مکان دربردارنده اش قرار میدهد.

    -مقدار inherit :

    در مثال زیر margin چپ از والد به ارث برده میشود:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div.container {
    border: 1px solid red;
    margin-left: 100px;
    }
    p.one {
    margin-left: inherit;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <p class="one">( div از عنصر) به چپ به اندازه 100 پیکسل از والد ارث بری شده است margin </p>
    </div>
    </body>
    </html>

    توجه: اگر در یک مکان دو عنصر زیر هم وجود داشته باشند و یکی دارای margin-top و دیگری دارای margin-bottom باشد و این دو دارای مقدارهای نامساوی باشند،بر خلاف تصور browser این دو مقدار را باهم جمع نمیکند بلکه مقدار بزرگتر را اعمال میکند

    مثال زیر را در نظر بگیرید:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {
    margin: 0 0 50px 0;
    }
    h2 {
    margin: 70px 0 0 0;
    }
    </style>
    </head>
    <body>
    <p>در اینجا مقدارهای 70 و 50 باهم جمع نشده اند(70+50 ) بلکه تنها مقدار 70 اعمال شده است</p>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    </body>
    </html>

    اجرای مثال بالا:

    margin top bottom

  • افزایش صفحات وب مربوط به بازدید کنندگان

    بهینه سازی نرخ تبدیل

    check mark inside a black box1 بهینه سازی نرخ تبدیل ، علم و هنر ایجاد تجربه برای بازدید کننده وب سایت با هدف تبدیل بازدید کننده به مشتری است.”صفحات وب مربوط به بازدید کنندگان خود را بیشتر کنید"

     arrowheads of thin outline to the left افزایش اعتماد مشتری با استفاده از برخی عناصر در صفحات وب و بهبود پاسخگویی به نیازها، برای ترغیب بازدیدکننده ها به مشتریان آینده

    arrowheads of thin outline to the left ما با نگاه به اینکه چه نوعی از ترافیک در صفحات وب سایت شما وجود دارد، یک فرآیند را آغاز می کنیم.مهم، اطمینان حاصل کردن از این است  که هر صفحه ، منبع درستی ترافیک دریافت می کند . به عنوان مثال صفحه اصلی خود را نباید با ترافیک جستجوی همه خدمات محصولات خود ، شلوغ کنید. در عوض، هر نوع خدمات و یا محصول باید صفحه فرود مخصوص به خود را داشته باشد. به این ترتیب، کاربران شما ، بلافاصله آنچه را که به دنبالش هستند را می یابند و به احتمال زیاد ، یک عمل مانند خرید محصول و یا درخواست خدمات را انجام می دهند.

    arrowheads of thin outline to the left ما تعداد کارهایی که بازدیدکننده باید برای رسیدن به هدفش انجام دهد را کاهش می دهیم.

    arrowheads of thin outline to the left ما تعداد المانهای بصری که باعث پرت شدن حواس بازدید کننده می شود را کاهش می دهیم و تمرکز چشم کاربر را به سمتی معطوف می کنیم که باعث شود بازدید کننده تبدیل به مشتری شما شود.

    arrowheads of thin outline to the left در هر صفحه فرود، ما نگاهی می اندازیم تا اطمینان حاصل شود که پیام ما در صفحه برای کاربر واضح هست و با انواعی از جستجو که کاربران را به سمت صفحه مورد نظر سوق دهد مطابقت داشته باشد.

    arrowheads of thin outline to the left ما به کمک ساده سازی روند منجر به خرید و درخواست خدمات ،هر گونه درخواست غیر ضروری برای کسب اطلاعات راازبین می بریم.

    arrowheads of thin outline to the left تیم ما برای القای اعتماد به کاربران ، المان هایی را به صفحه فرود شما اضافه می کند .

  • تعامل با مخاطب از طریق ایده‌ها و تبلیغات خلاقانه

    responsive design fisherman

     

    check mark inside a black box1 ما به کمپین تبلیغاتی شما مسیری خلاقانه، برای انسجام و بهبود کارها و تلاشهای آنلاین و آفلاین شما ارائه میدهیم:

    arrowheads of thin outline to the left بوسیله تبلیغاتی خلاقانه با مخاطبان خود تعامل برقرار نمایید.

    arrowheads of thin outline to the left درباره فعالیت های برند خود یک کمپین بسازید.

    arrowheads of thin outline to the left تجارت خود را با ایده‌های خلاقانه عرضه کنید.

  • تگ های HTML

    تمامی اسناد html باید با تعریف نوعی زیر آغاز شوند:

    <!DOCTYPE html>

    کدهای html با تگ <html> آغاز و با تگ <html/> پایان میابد.

    قسمت دیداری کدهای html درون تگهای <body> و <body/> تعریف میشود.

     عناصر html بصورت یک تگ شروع و یک تگ پایان و محتوا در وسط نوشته میشوند:

    </نام تگ>content<نام تگ>

    عنوان ها (Heading)

     عنوان ها در HTML به وسیله تگ های <h1> تا <h6> تعریف می شوند.

    پاراگراف (Paragraph)

    پارگراف ها در HTML به وسیله تگ <p> تعریف می شوند.

    لینک ها (Link)

    لینک ها در HTML به وسیله تگ <a> تعریف می شود.

    توجه: آدرس لینک، در خصوصیت href مشخص می شود.

    (در فصل های بعدی این خودآموز راجع به خصوصیت های عناصر، بیشتر خواهید آموخت.)

    تصاویر (Image)

    تصاویر در HTML به وسیله تگ <img> تعریف می شود.

    توجه: نام و سایز عکس به وسیله خصوصیت ها مشخص می شود.

  • خلاقیت پارسی متخصص در طراحی دیجیتالی زیبا و خلاقانه

    bg services design

    check mark inside a black box1 تیم متخصص ما ایده دیجیتالی برای زندگی با زیبایی اجرا و طراحی خلاق به ارمغان می آورد .

    arrowheads of thin outline to the left طیف گسترده ای از راه حل های طراحی تجارت شما را ارتقا می دهد.
    arrowheads of thin outline to the left طراحی وب سایت خوب باعث اعتبار کار شما می شود.
    arrowheads of thin outline to the left فراخوان به عمل کلیدی و "عوامل جذابیت" باعث حفظ بازدید کنندگان سایت شما برای آینده می شود

  • خلاقیت، وفاداری و پیشرو در صنعت

    bg consult

    check mark inside a black box1 سرویسهای استراتژی ما به ارائه راه حل های سفارشی و دیجیتالی می پردازد تا همیشه در صنعت پیشرو باشید.

    arrowheads of thin outline to the left استراتژی دیجیتالی ما یک راه برای موفقیت آنلاین فراهم می کند.

    arrowheads of thin outline to the left ما برندهای جالب و گیرا را تصور می کنیم ، خلق می کنیم سپس به راه اندازی آن می پردازیم.
    arrowheads of thin outline to the left کمپین ما یک سناریو را خلق می کند و باعث  بالا رفتن طول عمر وفاداری می شود.

  • راه‌های درج CSS

    هنگامی که یک مرورگر یک استایل شیت(style sheet) را میخواند ، باتوجه به اطلاعات آن استایل شیت، کدها و اطلاعات HTML را فرمت میکند.

    سه راه برای وارد کردن یک شیوه یا سبک CSSوجود دارد:

    • style sheet خارجی

    • style sheet داخلی

    • style sheet درون خطی

    • طراحی و پیاده سازی سایت با جوملا

      bg joomla

      check mark inside a black box1 رسانه خلاقیت پارسی، با استفاده از جوملا به توسعه وب سایتی، قوی می پردازد که می تواند نام تجاری شما را تکمیل کند و کسب و کار خود را از طریق راه حل های دیجیتالی، آنلاین بسازید.

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

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

      جوملا توسط شرکت ها و مجموعه های بسیار معتبری مورد استفاده قرار می گیرد که برخی از سایت های معتبر طراحی شده توسط جوملا را می توانید درhttp://community.joomla.org/showcase رویت نمایید.


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

      جوملا برای برنامه نویسان مناسب می باشد به طوری که در صورتی که در امکانات پایه جوملا، موردی که نیاز برنامه نویس بود وجود نداشت می تواند امکان مورد نظر را به سایت جوملا از طریق برنامه نویسی اضافه نماید.

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

      check mark inside a black box1 مزایای استفاده از جوملا

      از آخرین تکنولوژی های روز دنیا در سایت استفاده می گردد.
      با توجه به استفاده کنندگان بسیار آن در دنیا (در حدود 50 میلیون دانلود تا کنون) مطالب آموزشی بسیاری موجود می باشد.
      بخش پشتیبانی بسیار قوی به آدرس http://forum.joomla.org که در صورت وجود مشکل صریعا راه های رفع مشکل را ارائه می نمایند.
      تیم توسعه جوملا دائم در حال بررسی و به روز رسانی امکانات نرم افزار می باشند و در صورت وجود مشکل سریعا به روز رسانی جدید ارائه می شود و شما می توانید جوملا را از کنترل پانل خود به روز رسانی نمایید.
      بخش پلاگین های جوملا نیز توسط تیم توسعه جوملا به صورت کامل بررسی می گردد و در صورت وجود پلاگین های مشکل دار از بخش پلاگین های جوملا حذف می گردد
      در این سیستم مدیریت محتوا قابلیت های پیشرفته وب سایت نظیر سازگاری با موبایل دارد..
      جوملا به صورت پیش فرض برای موتورهای جستجو بهینه سازی گردیده و آدرس دهی صفحات آن به صورت SEF می باشد.

       

       

       

    • طراحی و پیاده سازی سایت با وردپرس

      bg wp

      check mark inside a black box1 توسعه وردپرس

      arrowheads of thin outline to the left ما با وردپرس ، سیستم عامل های گوناگون ارائه می دهیم. که به شما اجازه ی مدیریت محتوا و تغییر وب سایت را می دهد تا بتوانید رشد کسب و کار خود را منعکس کنید.
      arrowheads of thin outline to the left با توسعه دهندگان ما همکاری کنید تا وب سایتی برای شما ایجاد کنند که نشان دهنده هر دو جوهر نام تجاری و شخصیت پشت پرده این کسب و کار باشد.

      arrowheads of thin outline to the left وبلاگ و وب سایت خود را دریک پلت فرم منسجم کنید تا مخاطبان بتوانند به تمام محتوای آنلاین شما به سرعت دسترسی پیدا کنند.
      arrowheads of thin outline to the left با یک طرح واضح، شما می توانید از صفحات خود برای اشاره مستقیم به موضوعات مهم در صنعت خود استفاده کنید، در حالی که یک تجربه منحصر به فرد برای بازدید کنندگان خود ایجاد می نمایید.

    • طراحی و پیاده سازی سایت حرفه ای با asp.net

      asp

      check mark inside a black box1 تخصص ما طراحی و پیاده‌سازی سایت حرفه‌ای، سایت داینامیک، سایت استاتیک، سایت فلش، صفحات وب، سئو حرفه‌ای، پورتال، فروشگاه اینترنتی، تبلیغات گوگل و بهینه‌سازی سایت است

      .


      arrowheads of thin outline to the left ASP.NET یکی از تکنولوژی های تولید صفحات داینامیک وب سمت سرویس دهنده است . ASP.NET ترکیبی از ASP ( زبان برنامه نویسی کلاسیک تحت وب مایکروسافت ) با تکنولوژی NET. (چارچوب جدید معرفی شده توسط مایکروسافت برای تولید نسل جدیدی از نرم افزارها ) می باشد .
      برنامه نویسی در ASP.NET بسیار ساده تر، امن تر، سریع تر و پرقدرت تر از ASP کلاسیک است. کدهای ASP به صورت مختلط با کدهای HTML نوشته می شد و همین موضوع کار را برای برنامه نویسان مشکل می کرد. در ASP.NET این مشکل برطرف شده و کدهای نوشته شده از HTML می تواند جدا باشد ( استفاده از متد Behind Code ) این ویژگی این امکان را می دهد که در پروژه های تیمی که کار برنامه نویسی و گرافیک تقسیم شده است راحتر باشد و هر شخص با تمرکر بر روی کار خود کار خود را به بهترین شکل انجام دهد بدون اینکه در کار دیگری تداخلی ایجاد کند.
      همچنین استفاده از ابزارهای شی گرایی باعث شده که تولید پورتال های عظیم، خدمات پردازش تصویر و انواع سرویس های تحت وب ساده گردد.
      اگر شما میخواهید وب سایتی به زبان ASP.net داشته باشید تیم ما با بکارگیری بهترین متدها این کار را برای شما انجام میدهد.

    • طراحی و پیاده سازی سایت و اپلیکیشن با PHP

      php

      check mark inside a black box1 با تیم مجرب ما همراه شوید تا برند شما را به بهترین نحو به مخاطبانتان معرفی نماییم.

      زبان PHP یک زبان اسکریپتی اوپن سورس است که برای طراحی برنامه های تحت وب سرور به کار می رود. سمت سرور بودن به این معناست که صفحات PHP ابتدا توسط سرور (که می تواند از نوع Apache یا IIS) باشد، پردازش شده و سپس خروجی به صورت کدهای HTML و جاوا اسکریپت برای مرورگر کاربر ارسال می شود. به عبارت دیگر وظیفه اجرای صفحات PHP به عهده سرور وب هاست سایت می باشد برخلاف HTML یا جاوا اسکریپت.
      PHP مخفف عبارت Hypertext PreProcessor به معنای پیش پردازند فرامتن می باشد. از مشهورترین نرم افزارهای ساخته شده با PHP می توان به جوملا، وردپرس ، دروپال و... اشاره نمود. سایت های فراوانی در جهان براساس زبان PHP نوشته شده اند و هر روز نیز بر تعداد آنها افزوده می شود. بر طبق آمار منتشر شده بیش از 60% از سایت های موجود در سرورها با زبان PHP نوشته و بارگذاری شده است که از مهمترین آنها می توان به ویکی پدیا . فیسبوک اشاره کرد.
      مزیت های زبان PHP:
      arrowheads of thin outline to the left PHP یک ابزار اوپن سورس و رایگان است به همین دلیل هاست هایی که میزبانی آن را انجام می دهند بسیار ارزان تر از هاست های NET. هستند.
      arrowheads of thin outline to the left  پی اچ پی بر روی تمامی پلتفورم های معروف مثل ویندوز،لینوکس و مکینتاش قابل اجراست.
      arrowheads of thin outline to the left PHP یک ابزار ساخت یافته بوده و یادگیری آن بسیار ساده است ابزار کار با PHP همگی اوپن سورس بوده و استفاده از آن رایگان هستند.
      arrowheads of thin outline to the left سرعت بالا؛ اجرای یک اسکریپت PHP به طور متوسط تا سه برابر یک اسکریپت ASP است
       

    • طراحی و پیاده‌سازی سایت

       
       
      website design1

      check mark inside a black box1 وب‌سایت شما :

      arrowheads of thin outline to the left نمای کلی تجارت شما است.

      arrowheads of thin outline to the left تبلیغات شماست.

      arrowheads of thin outline to the left ستاره فروش شماست.

      arrowheads of thin outline to the left و نماینده نام تجاری شماست.

      طراحی و پیاده‌سازی سایت خود را به خلاقیت پارسی بسپارید تا ببینید که چگونه برایتان وب‌سایتی خیره‌کننده و کاربرپسند میسازیم.

    • معرفی css3

      CSS توضیح می دهد چگونه عناصر HTMLبه بر روی صفحه نمایش، کاغذ و یا در رسانه های دیگر نمایش داده می شود.

      Css3جدیدترین استاندارد برای CSSاست و با نسخه‌های قدیمیCss کاملا سازگار است.

      در اینجا به معرفی ویژگی‌های جدید درCss3 میپردازیم.

    • معرفی HTML5

      به کمکhtml شما میتوانید وب سایت طراحی کنید.

      Html5 یک استاندارد جدید برایhtml است که در آن ویژگی‌های جدیدی اضافه شده است با این هدف که مرورگرهای اصلی بهتر بتوانندعناصر و APIهایhtml را پشتیبانی کنند.

    • معرفی برند تجاری بصورت منحصربفرد

      brand strategy

      check mark inside a black box1 ما با ارائه استراتژیهای جدید و مرسوم ویک سناریوی قوی و سفارشی به معرفی برند تجاری شما بصورت منحصر به فرد کمک مینماییم.

      arrowheads of thin outline to the left با معرفی برند تجاری منحصر به فرد از رقبای خود پیشی بگیرید.

      arrowheads of thin outline to the left با نامگذاری و شعارها و موقعیت دادن عالی.

      arrowheads of thin outline to the left استفاده از اهرم تصویر نام تجاری(لوگو) برای به دست آوردن مشتریان جدید.

    • نحوه نوشتاری CSS

      نحوه نوشتاری CSS) CSS Syntax):

      قانون تنظیم یک CSS متشکل از یک انتخاب ویک بلوک اعلان میباشد