Max-widthو Max-heigth در طراحی سایت نونگار

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

 

div.ex1 {
    width: 500px;
    margin: auto;
    border: 3px solid #8AC007;
}

در کد بالا به div پهنای ثابت 500 را تعیین نموده است که در بخش معین شده در سایز و پهنای ثابت می باشد. حال در صورتی که بخواهیم این بخش را در پهنای ثابت پیاده سازی نماییم و در عین حال پهنا از حدی بیشتر نباشد کد زیر را درج می نماییم.

div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #8AC007;
}

 

در کد بالا div تعیین شده پهنا ثابتی ندارد اما در عین حال پهنای بخش مورد نظر از 500 پیکسل ببیشتر نخواهد شد.

 

 

Max-heigth در طراحی سایت

 

Max-heigth نیز مشابه Max-width خواهد بود اما این تغییر اندازه را در ارتفاع دارد. در این صورت صفحه طراحی سایت شما در بخش تعیین شده ارتفاعش از حدی بیشتر نخواهد شد. متغییر بودن div در ارتفاع و پهنا می تواند موجب نمایش حرفه ای تر از طراحی سایت شما شود که خود موجب جلب توجه و نظر کاربر خواهد شد که در نتیجه سئو سایت و بهینه سازی سایت را مورد تاثیر خود قرار می دهد.

 

div.ex2 {
    max-height: 500px;
    margin: auto;
    border: 3px solid #8AC007;
}

 

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

 

 

Max-widthو Max-heigth در طراحی سایت

کامنت گذاشتن در طراحی سایت نونگار

 

 

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

<!-- Write your comments here -->

همانطور که مشاهده می نمایید کامنت comments با این علامت <!-- آغاز شده است و در انتها نیز --> را دررج می نمایید و در این میان پیام خود را منظور می گردانیم تا کدنویسی صفحه طراحی سایت ما برای افرادی که قصد ادیت در کدنویسی را داشته باشند به راحتی این امر را به انجام رسانند.

 

کامنت شرطی در طراحی سایت

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

<!--[if IE 8]>
.... some HTML here ....
<![endif]-->

در کد بالا اگر مرورگر ما اینترنت اکسپلرر با ورژن 8 باشد کدهای موجود را می خواند.اغلب برای تنظیم نمودن نحوه نمایش صفحه طراحی سایت در مرورگرهای IE از کامنت گذاری در صفحه طراحی وب سایت استفاده می نمایند تا نحوه نمایش را با مرورگر تطبیق نمایند. نمایش مناسب صفحات طراحی سایت در مرورگرهای مختلف موجب رضایتمندی کاربران خواهد شد که در نتیجه تاثیرگذاری خود را در سئو سایت و بهینه سازی سایت خواهد داشت.

کامنت گذاشتن در طراحی سایت

SQLدر طراحی سایت

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

 

کد update در SQL

 

کد update موجب اضافه شدن رشته کاراکتر دیگر به داده ها می شود. مثال زیر این امر را نشان می دهد.

UPDATE Customers
SET ContactName='Alfred Schmidt', City='Hamburg'
WHERE CustomerName='Alfreds Futterkiste';

 

در کد بالا داده ها به واسط متغییرهای تعیین شده در customer  قرار می گیرند و در کد where محل این تغییرات را مشخص نموده است. اتصال دیتابیس برای برخی طراحی وب سایت ها امری ضروی تلقی می شود و جزیی از پروسه عملکردی آن می باشد. طراحی سایت هایی که با دایرکتوری عظیمی از کاربران رو به رو می شوند به منظور نگه داری این داده ها به پایگاه داده نظام مندی نیازمند می باشند که SQL زبان برنامه نویسی پایگاه داده می باشد و تعامل طراحی سایت شما را با پایگاه داده برقرار می نماید. دستور select نیز در SQL موجب انتخاب داده خاص از دیتا بیس طراحی وب سایت شما می باشد.

 

SELECT column_name,column_name
FROM table_name;

در کد بالا ستون name را از جدول table_name انتخاب نموده است تا اعمال تغییرات را در داده های ستون انتخابی انجام دهد.

 

 SQLدر طراحی سایت

کد فونت در طراحی سایت

فونتfont صفحه طراحی سایت یکی از المان های مهم در خوانا بودن هرچه بهتر خواهد بود. حتی در برخی نقاط شاید درنظر داشته باشید فونت font متفاوتی را به نمایش بگذارد که در صورت عدم تمایل به استفاده از عکس می بایست فونت انتخابی خود را در کدهای css در صفحه طراحی سایت خود بگنجانید. انتخاب فنوت مناسب در فرمت و نمایش زیبا موجب جلب نظر کاربر می شود که در سئو سایت و بهینه سازی سایت تاثیر مثبتی دارد. در ادامه نکاتی که در خصوص استفاده از کد فونت font در صفحه طراحی وب سایت شما وجود دارد بیان خواهیم نمود.

 

کد font family در طراحی سایت

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

p {
font-family: "Times New Roman", Times, serif;
}

 

در کد بالا سه نوع فونت را برای پاراگراف های موجود در صفحه طراحی سایت تعیین شده است که ابتدا فونت اولی بکار گرفته می شود و در صورت عدم وجود فونت Times New Roman در سیستم کاربر دیگر فونت ها به ترتیب استفاده می شوند. به واسط کد font-family می توانید هر نوع فونت انتخابی خود را در صفحه طراحی سایت خود درج نمایید.البته می بایست در نظر داشته باشید که فونت هایی که اغلب در سیستم کاربران موجود نمی باشند را در می بایست به صورت font face درج نمایید بطوریکه که پس ار بارگذاری صفحه طراحی وب سایت شما فونت در سیستم کاربر نصب گردد.با زیباتر نمودن صفحه طراحی سایت خود در سئو وب سایت و بهینه سازی وب سایت خود اثرگذار باشید.

 

Font style در طراحی سایت

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

 

p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

 

font size در طراحی وب سایت

Font size می تواند اندازه فونت را در صفحه طراحی سایت شما تعیین نماید. کد زیر این امر را به نمایش می گذارد.

h1 {
font-size: 40px;
}

 

 

کد فونت در طراحی سایت

متحرک سازی در طراحی سایت با jquery

 

متحرک سازی بخشی از صفحه طراحی سایت شما به واسط کدهای جی کوئری jquery از آیتم های پرکاربرد در طراحی وب سایت شما می باشد. شخصی سازی تحرک به واسط متد animate() امکان پذیر می باشد که می توانید به اجزا صفحه سرعت مورد نظر خود را اعمال نمایید. متغییرهای "slow", "fast" و milliseconds مواردی است که در جهت تنظیم سرعت متحرک سازی بکار گرفته می شوند.

 

$("button").click(function(){
    $("div").animate({left: '250px'});
});

متغییر left موقعیت و جهت تحرک را نمایش می دهد.

 

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
}); 

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

$("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
}); 

 

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

 

متحرک سازی در طراحی سایت با jquery

تنظیمات باکس در طراحی سایت

باکس به عنوان فضای مشخصی در صفحه طراحی سایت شما می باشد که در عرض و ارتفاع تعیین شده قرار می گیرد. این باکس ها و div ها به عنوان بخش بندی قسمت های مختلف صفحه طراحی وب سایتاعمال می شوند. محتوا ، فاصله باکس با فضای اطراف ، فاصله محتوای درون باکس ، حاشیه تمامی مواردی است که میان به واسط کدهای css  می توان تعیین نمود.

 

 

Padding در طراحی سایت

 

کد Padding که به معنای فاصله میان محتوای درون باکس با حاشیه اطراف خود باکس می باشد نیز در تنظیم ظاهری صفحه طراحی سایت کاربرد می یابد. در زیر مثالی از نحوه اعمال کد Padding  را درج نموده ایم. نمایش ظاهری زییای طراحی سایت شما موجب جلب توجه کاربر خواهد شد که در سئو سایت و بهینه سازی سایت اثرگذار خواهد بود.

 

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

 

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

 

border: 5px solid gray;

کد بالا تنظیماتی را برای border در نظر گرفته است. به واسط 5px شما ضخامت border را تعیین نموده اید. Solid نوع و فرمت حاشیه را مشخص می نماید. gray رنگ حاشیه باکس را تعیین می نماید که به رنگ خاکستری در صفحه طراحی وب سایت شما به نمایش گذاشته می شود.

 

 

Margain در طراحی سایت

 

Margain به معنای فاصله باکس از فضای اطراف می باشد. margain-top margain-bottom margain-left margain-right آیتم هایی است که حاشیه را در جهت مشخص تعیین می نماید و به واسط درج هریک از آها می توانید فاصله را در جهت خاص تعیین نمایید. توجه به ظاهر طراحی وب سایت را مورد توجه قرار دهید زیرا که در المان های سئو وب سایت و بهینه سازی وب سایت اثرگذار می باشد.

 

 

تنظیمات باکس در طراحی سایت

AJAX در طراحی وب سایت

 

 

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

 

<!DOCTYPE html>

<html>

<head>

<script>

function loadXMLDoc()

{

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.on-readystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  }

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

}

</script>

</head>

<body>

 

<div id="myDiv"><h2>Let AJAX change this text</h2></div>

<button type="button" on-click="loadXMLDoc()">Change Content</button>

 

</body>

</html>

 

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

 

 

AJAX در طراحی وب سایت

فرم در طراحی سایت

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

 

<form>

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

</form

در نمونه  form فرم بالا از دو نوع female و  male  از نوع type=”radio” می باشد که در صورت بین دو گزینه می بایست تنها یکی را انتخاب نماید. Type=”submit”موجب نمایش گزینه ای برای ارسال اطلاعات دورن فرم خواهد شد. در فرم متد می تواند نوع ارسال را تعیین نماید که از دو فرمت get  و post می تواند باشد.

 

<form action="action_page.php" method="GET">

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

action_page.php?firstname=Mickey&lastname=Mouse

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

<form action="action_page.php">

First name:<br>

<input type="text" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form

در کد بالا کاربر نام و نام خانوادگی خود را در فرم درج می نماید و سپس به واسط submit ارسال می نماید. type="text" امکان نوشتن نام و نام خانودگی را برای کاربر طراحی سایت شما فراهم می آورد. فرم ها در واقع ارسال کننده داده و اطلاعات از کاربر به سمت صاحب طراحی سایت خواهد شد.

 

 

فرم در طراحی سایت

Max-widthو Max-heigth در طراحی سایت

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

 

div.ex1 {
    width: 500px;
    margin: auto;
    border: 3px solid #8AC007;
}

در کد بالا به div پهنای ثابت 500 را تعیین نموده است که در بخش معین شده در سایز و پهنای ثابت می باشد. حال در صورتی که بخواهیم این بخش را در پهنای ثابت پیاده سازی نماییم و در عین حال پهنا از حدی بیشتر نباشد کد زیر را درج می نماییم.

div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #8AC007;
}

 

در کد بالا div تعیین شده پهنا ثابتی ندارد اما در عین حال پهنای بخش مورد نظر از 500 پیکسل ببیشتر نخواهد شد.

 

 

Max-heigth در طراحی سایت

 

Max-heigth نیز مشابه Max-width خواهد بود اما این تغییر اندازه را در ارتفاع دارد. در این صورت صفحه طراحی سایت شما در بخش تعیین شده ارتفاعش از حدی بیشتر نخواهد شد. متغییر بودن div در ارتفاع و پهنا می تواند موجب نمایش حرفه ای تر از طراحی سایت شما شود که خود موجب جلب توجه و نظر کاربر خواهد شد که در نتیجه سئو سایت و بهینه سازی سایت را مورد تاثیر خود قرار می دهد.

 

div.ex2 {
    max-height: 500px;
    margin: auto;
    border: 3px solid #8AC007;
}

 

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

 

 

Max-widthو Max-heigth در طراحی سایت

کامنت گذاشتن در طراحی سایت

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

<!-- Write your comments here -->

همانطور که مشاهده می نمایید کامنت comments با این علامت <!-- آغاز شده است و در انتها نیز --> را دررج می نمایید و در این میان پیام خود را منظور می گردانیم تا کدنویسی صفحه طراحی سایت ما برای افرادی که قصد ادیت در کدنویسی را داشته باشند به راحتی این امر را به انجام رسانند.

 

کامنت شرطی در طراحی سایت

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

<!--[if IE 8]>
.... some HTML here ....
<![endif]-->

در کد بالا اگر مرورگر ما اینترنت اکسپلرر با ورژن 8 باشد کدهای موجود را می خواند.اغلب برای تنظیم نمودن نحوه نمایش صفحه طراحی سایت در مرورگرهای IE از کامنت گذاری در صفحه طراحی وب سایت استفاده می نمایند تا نحوه نمایش را با مرورگر تطبیق نمایند. نمایش مناسب صفحات طراحی سایت در مرورگرهای مختلف موجب رضایتمندی کاربران خواهد شد که در نتیجه تاثیرگذاری خود را در سئو سایت و بهینه سازی سایت خواهد داشت.

 

 

کامنت گذاشتن در طراحی سایت