شرکت طراحی سایت نونگار پردازش

طراحی سایت و نمایش عکس از لیست Drop Down

۳۰ خرداد۹۴

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

بدین منظور قطعه کد زیر را در تگ <head> صفحه وب سایت درج نمایید.

function showimage()

{

if (!document.images)

return

document.images.pictures.src=

document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value

}

//-->

</script>

حال قطعه کد زیر را در تگ <body> صفحه درج نمایید.

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p>
<select name="picture" size="1" on-Change="showimage()">
<option selected value="me.gif">Picture of me</option>
<option value="myaunt.gif">Picture of my aunt</option>
<option value="brother.gif">Picture of my brother</option>
</select>
</p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><img src="/demo/me.gif" name="pictures" width="99" height="100"></td>
</tr>
</table>

می توانید آدرس تصویر مورد نظر خود را در کد زیر تغییر دهید.

<option selected value="me.gif">Picture of me</option>

و همچنین در کد زیر می توانید سایز عکس را مطابق میل خود وارد نمایید.

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

طراحی سایت و نمایش عکس از لیست Drop Down

۰ نظر

elham naderi

طراحی سایت و متحرک سازی متن با جاوا

۳۰ خرداد۹۴

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

</form>

var newsText = new Array();

newsText[0] = "Typing Text JScript v1\nDeveloped on Sunday, April 15th, 2001...";

newsText[1] = "This is a text-typing DHTML demo. \nScript featured on http://j-avascriptkit.com";

newsText[2] = "Make sure you read the comments before you configure the script...";

newsText[3] = "Programmed by: Haitham Al-Beik...\n\nCopyright (c) Haitham M. Al-Beik, 2001";

newsText[4] = "http://www.prosheet.com/DHTML/typetext.htm"

var ttloop = 1; // Repeat forever? (1 = True; 0 = False)

var tspeed = 50; // Typing speed in milliseconds (larger number = slower)

var tdelay = 1000; // Time delay between newsTexts in milliseconds

var dwAText, cnews=0, eline=0, cchar=0, mxText;

function doNews() {

mxText = newsText.length - 1;

dwAText = newsText[cnews];

setTimeout("addChar()",1000)

}

function addNews() {

cnews += 1;

if (cnews <= mxText) {

dwAText = newsText[cnews];

if (dwAText.length != 0) {

document.news.news2.value = "";

eline = 0;

setTimeout("addChar()",tspeed)

}

function addChar() {

if (eline!=1) {

if (cchar != dwAText.length) {

nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);

document.news.news2.value = nmttxt;

cchar += 1;

if (cchar != dwAText.length) document.news.news2.value += "_";

} else {

cchar = 0;

eline = 1;

}

if (mxText==cnews && eline!=0 && ttloop!=0) {

cnews = 0; setTimeout("addNews()",tdelay);

} else setTimeout("addChar()",tspeed);

} else {

setTimeout("addNews()",tdelay)

}

doNews()

</script>

<p><font face="arial" size="1">This free script provided by</font><br>
<a href="http://j-avascriptkit.com"><font face="arial,helvetica" size="1">JavaScript Kit</font></a></p>

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

طراحی سایت و متحرک سازی متن با جاوا

۰ نظر

elham naderi

طراحی سایت و تغییر رنگ متن با اسکریپ نونگار

۳۰ خرداد۹۴

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

<h2>

var message="Welcome to Dynamic Drive!"

var neonbasecolor="gray"

var neontextcolor="yellow"

var flashspeed=100 //in milliseconds

var n=0

if (document.all||document.getElementById){

document.write('<font color="'+neonbasecolor+'">')

for (m=0;m<message.length;m++)

document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')

document.write('</font>')

}

else

document.write(message)

function crossref(number){

var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)

return crossobj

}

function neon(){

//Change all letters to base color

if (n==0){

for (m=0;m<message.length;m++)

//eval("document.all.neonlight"+m).style.color=neonbasecolor

crossref(m).style.color=neonbasecolor

}

//cycle through and change individual letters to neon color

crossref(n).style.color=neontextcolor

if (n<message.length-1)

n++

else{

n=0

clearInterval(flashing)

setTimeout("beginneon()",1500)

return

}

function beginneon(){

if (document.all||document.getElementById)

flashing=setInterval("neon()",flashspeed)

}

beginneon()

</script>

</h2>

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

طراحی سایت و تغییر رنگ متن با اسکریپ

۰ نظر

elham naderi

طراحی سایت و تغییر رنگ متن با اسکریپ

۳۰ خرداد۹۴

<h2>

var message="Welcome to Dynamic Drive!"

var neonbasecolor="gray"

var neontextcolor="yellow"

var flashspeed=100 //in milliseconds

var n=0

if (document.all||document.getElementById){

document.write('<font color="'+neonbasecolor+'">')

for (m=0;m<message.length;m++)

document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')

document.write('</font>')

}

else

document.write(message)

function crossref(number){

var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)

return crossobj

}

function neon(){

//Change all letters to base color

if (n==0){

for (m=0;m<message.length;m++)

//eval("document.all.neonlight"+m).style.color=neonbasecolor

crossref(m).style.color=neonbasecolor

}

//cycle through and change individual letters to neon color

crossref(n).style.color=neontextcolor

if (n<message.length-1)

n++

else{

n=0

clearInterval(flashing)

setTimeout("beginneon()",1500)

return

}

function beginneon(){

if (document.all||document.getElementById)

flashing=setInterval("neon()",flashspeed)

}

beginneon()

</script>

</h2>

طراحی سایت و تغییر رنگ متن با اسکریپ

۰ نظر

elham naderi

طراحی سایت و محو نمودن تصاویر

۳۰ خرداد۹۴

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

که در کد بالا می توانید آدرس تصویر مورد نظر خود را بگذارید و.به آسانی طراحی سایت و محو نمودن تصاویر را در صفحه سایت خود درج نمایید.

طراحی سایت و محو نمودن تصاویر

۰ نظر

elham naderi

طراحی سایت و ایفکت چرخش عکس

۲۷ خرداد۹۴

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

.container:hover .bild

{

-webkit-transform: rotateY(180deg);

-webkit-transform-style: preserve-3d;

transform: rotateY(180deg);

transform-style: preserve-3d;

}

.container .bild, .container:hover .bild

{

-webkit-transition: all 0.7s ease;

transition: all 0.7s ease;

}

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

طراحی سایت و ایفکت چرخش عکس

۰ نظر

elham naderi

طراحی سایت و ایفکت زیبای عکس ها

۲۷ خرداد۹۴

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

.bild:hover {

border-top-left-radius: 30px 120px;

border-bottom-right-radius: 30px 120px;

border-bottom-left-radius: 15px;

border-top-right-radius: 15px;

} .bild {

border-top-left-radius: 15px;

border-top-right-radius: 120px 30px;

border-bottom-left-radius: 120px 30px;

border-bottom-right-radius: 15px; -webkit-transition: all 0.7s ease;

transition: all 0.7s ease;

}

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

۰ نظر

elham naderi

طراحی سایت و راحتی کاربر

۲۷ خرداد۹۴

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

طراحی سایت و ساختار لینک ها

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

طراحی سایت و Pagination

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

طراحی سایت و عنوان صفحه

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

طراحی سایت و قابلیت کپی نمودن محتوا

در نظر داشته باشید که کاربران سایت شما به منظور دسترسی به مطالب و محتوا شما از سایت شما بازدید می نمایند. قابلیت کپی شدن محتوا مسئله مهمی برای کاربران خواهد بود. در نظر گرفتن این مسئله در طراحی سایت شما بسیار حائز اهمیت می باشد.

طراحی سایت و راحتی کاربر

۰ نظر

elham naderi

طراحی سایت و skem عکس

۲۷ خرداد۹۴

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

-webkit-transform: matrix(1.001,-0.017,-0.061,1,-51.867,52);

-moz-transform: matrix(1.001,-0.017,-0.061,1,-51.867px,52px);

-ms-transform: matrix(1.001,-0.017,-0.061,1,-51.867,52);

-o-transform: matrix(1.001,-0.017,-0.061,1,-51.867,52);

transform: matrix(1.001,-0.017,-0.061,1,-51.867,52);

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

طراحی سایت و skem عکس

۰ نظر

elham naderi

طراحی سایت وbox shadow

۲۷ خرداد۹۴

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

-webkit-box-shadow: 5px 10px 10px 1px #FF47AF;
box-shadow: 5px 10px 10px 1px #FF47AF;

با خصیصه Horizontal length فاصله افقی از باکس را با واحد پیکسل تعیین نماییم.با Vertical length نیز فاصله عمودی را از باکس مشخص می نماییم. متغییر blur radius مقدار محو بودن shadow را مشخص می نماید که با پیکسل مشخص می شود. متغییر spread حجم پخش بودن shadow را مشخص می نماید. color type رنگ shadow را مشخص می نماید. تمامی این متغیرها برای ایجاد box shadow می باشد که در طراحی سایت خود می توانیم ایفا نمایید و زیبایی را به طراحی وب سایت خود ببخشیم. در نظر گرفتن ایفکت های زیبا برای تصویر و نیز فراهم نمودن عکس های گرافیکی زیبا از فاکتورهای مهم در طراحی سایت می باشد.

طراحی سایت وbox shadow

۰ نظر

elham naderi

قدیمی ترین مطالب مطالب قدیمی تر

جدیدترین مطالب مطالب جدید تر