طراحي سايت در مشهد

جاوا اسكرپت يك زبان اسكرپت نويسي تحت وب است كه براي افزايش پويايي صفحات HTML استفاده مي شود. از اين زبان مي توان براي ارزيابي اعتبار فرمهاي HTML قبل از ارسال به سرور، شناسايي مرورگر كاربران، ايجاد انواع منو ها و بسياري كارهاي ديگر استفاده كرد.

نكته : بايد توجه داشت كه جاوا اسكرپت يك زبان طرف كاربر (Client Side) است توسط كامپيوتر شخصي كاربر تفسير مي شود. كدهاي مربوط به جاوا اسكرپت توسط كاربر نهايي قابل مشاهده هستند پس توصيه مي شود از آن براي مقاصد مهم نظير اتصال به ديتابيس استفاده نشود.

مي توان كدهاي جاوا اسكرپت را به صورت تعبيه شده در صفحات HTML استفاده كرد و يا كدهاي جاوا اسكرپت را در يك فايل جداگانه با پسوند js. ذخيره كرد ولي در هر صورت يان فايلها هم بايد توسط يك صفحه HTML فراخواني شده و نتيجه آنها در صفحات HTML نمايان خواهد شد.

بهتر است قبل از شروع به يادگيري جاوا اسكرپت با HTML و CSS آشنايي داشته باشد تا بتوانيد به خوبي از قابليتهاي جاوا اسكرپت استفاده كنيد. براي يادگيري زبانهاي ذكر شده مي توانيد از پيوندهاي زير استفاده كنيد :

آموزش HTML به زبان فارسي
آموزش سي اس اس (CSS)
براي آزمايش كردن اسكرپتهايي كه مي نويسيد بايد از مرورگري استفاده كنيد كه از جاوا اسكرپت پشتيباني مي كند. قابل ذكر است كه تقريباً همه مرورگرهاي جديد از جاوا اسكرپت پشتيباني مي كنند از جمله اين مرورگرها مي توان به اينترنت اكسپلورر (IE) كه در ويندوز به صورت پيش فرض نصب مي شود، فاير فوكس (Firefox) و اپرا (Opera) اشاره كرد. به خاطر داشته باشيد كه نسخه هاي قبل از نسخه 4.0 اينترنت اكسپلورر و Netscape از جاوا اسكرپت پشتيباني نمي كنند.

طراحي سايت در مشهد با آنفايو

طراحي وب به مهارت ساخت و راه‌اندازي صفحات وب گفته مي‌شود.

تيم برنرز لي، مخترع وب، با برپايي يك سايت وب در اوت ۱۹۹۱، نام خود را به عنوان نخستين سازندهٔ وب در تاريخ نگاشت. او در نخستين وب سايتش، از اَبَرمتن و پيوندي براي ايميل (پست الكترونيك) استفاده كرده بود.

در آغاز، وب سايت‌ها با كُدهاي ساده HTML نوشته مي‌شدند، گونه‌اي از زبان نشانه‌گذاري كه ساختار ساده‌اي به وب گاه‌ها مي‌داد، شامل سرتيتر و پاراگراف، و توانايي پيوند دادن به آدرس‌هاي ديگر از طريق ابرپيوند. در مقايسه با روش‌هاي ديگر، اين راه تازه و متفاوتي بود كه كاربران به سادگي مي‌توانستند با يك مرورگر، صفحه‌هاي پيوند خورده را باز كنند.

با پيشرفت وب و هنر طراحي آن، زبان كُد نويسي اش، اَبَرمتن يا اچ تي ام ال، پيچيده‌تر و پرانعطاف تر شد. ابزاري مانند جدول‌ها كه بيشتر براي نمايش نمودارهاي داده‌اي بودند، بزودي مورد استفاده نادرست، براي چيدمان‌هاي پنهان در صفحه‌هاي وب قرار گرفتند. با پيدايش الگوهاي آبشاري وب يا «CSS»، روش نادرست طراحي با جدول‌هاي پنهان در صفحه از گردونه خارج، و بجاي آن استفاده مناسب از زبان كمكي «CSS» جايگزين شد.

فناوري‌هاي يكپارچه سازي پايگاه داده (Database)، مانند زبان‌هاي كُدنويسي سمت سرور (Server-Side Scripting) مانند CGI، PHP، ASP. NET، ASP، JSP و ColdFusion، و استانداردهاي طراحي مدرن با الگوها (CSS)، ساختار وب سايت‌ها را باز هم تغيير داده و آنرا پيشرفته تر كرده‌اند. سايت واكنش گرا يا سايت ريسپانسيو (responsive) سايتي است كه با ابعاد و رزولوشن دستگاه‌هاي مختلف سازگاري دارد و كاربران بدون توجه به اينكه صفحه نمايش دستگاهشان كوچك باشد.

همچنين با آمدن نگاره‌هاي جاندار و فناوري‌هاي پويانمايي به صفحه‌ها، مانند فلَش (Flash)، چهره وب بيشتر از پيش تغيير كرد و توانمندي‌هاي تازه به سازندگان رسانه و طراح‌هاي وب داده شد.

براي طراحي سايت در مشهد به سايت آنفايو برويد

وقتي به يك عنصر
يكسري خصوصيات نسبت مي دهيم، و در يك استايل دهي گروهي يا در جاي ديگري
يكسري خصوصيات ديگر براي آن مي نويسيم، از بين خصوصيات يكسان تمامي آنها به
ارث برده ميشود و از بين ساير خصوصيات آن ويژگي هايي به ارث مي روند كه
نسبت به ساير دستورات ديرتر و يا به عبارتي بعد تر نوشته شده اند و در صفحه
استايل دهي پايين تر قرار گرفته اند. با هم به بررسي مثال زير مي پردازيم :

H2
{
COLOR: BLUE;
FONT-SIZE: MEDIUM;
FONT-WEIGHT: NORMAL;
}
H1, H2, H3
{
FONT-FAMILY: “TREBUCHET MS”, HELVETICA, ARIAL, SANS-SERIF;
BACKGROUND-COLOR: NAVY;
COLOR: WHITE;
}

در
دستورات ابتدايي رنگ نسبت داده شده به تگ h2 آبي است، اما در استايل دهي
گروهي رنگ نسبت داده شده به آن سفيد است، به همين دليل رنگ فونت انتخابي
براي آن سفيد خواهد بود. مهم نيست كه در دستورات قبلي  100 بار رنگ آبي به
h2 نسبت داده شود پرا كه آخرين دستور  css رنگ سفيد را به اين تگ نسبت مي
دهد.

استايل دهي به لينك ها:

لينك ها در سراسر دنياي وب وجود
دارند، اگر به لينك هاي اوليه با استايل پيش فرض نگاهي بيندازيم مي بينيم
كه لينك ها داراي يك خط در زير نوشته لينك (underline)  هستند. به صورت پيش
فرض مرورگرها از رنگ هاي زير براي لينك ها استفاده مي كنند:
آبي :    لينكي كه مشاهده نشده باشد.
بنفش :  لينكي كه شما آن را قبلا مشاهده كرده ايد.
قرمز:   لينكي كه فعال است و شما در حال كليك كردن بر روي آن هستيد.
در بيشتر مواقع استايل دهي به لينك ها ممكن است به شكل زير باشد:

A
{
FONT-WEIGHT: BOLD;
COLOR: BLACK;
}

با اين دستور به جاي اينكه لينك هاي آبي رنگ با سايز فونت نرمال داشته باشيم، لينك هاي شما به رنگ آبي و ضخيم خواهد بود.

همانطور
كه قبلا اشاره كرديم تا كنون يك نوع حالت براي لينك ها معرفي كرديم، لينك
هاي مشاهده شده، لينك هاي فعال و لينك هايي كه هنوز بر روي آنها كليك نشده
است، اما نوع چهارمي وجود دارد كه hover ناميده مي شود، اين حالت براي وقتي
است كه نشانه گر موس بر روي لينك مي آيد كه با استايل دهي در css نيز
ميتوان خصوصيات اين لينك را نيز تغيير داد.
در اينجا به برخي از استايل هايي كه مي توان به لينك ها داد نگاهي مي اندازيم:

A {
FONT-WEIGHT: BOLD;
}
A:LINK {
COLOR: BLACK;
}
A:VISITED {
COLOR: GRAY;
}
A:HOVER {
TEXT-DECORATION: NONE;
COLOR: WHITE;
BACKGROUND-COLOR: NAVY;
}
A:ACTIVE {
COLOR: AQUA;
BACKGROUND-COLOR: NAVY;
}

عكس بالا كليه حالت هاي مختلف لينك ها را نشان مي دهد و حالت hover آن
لينك تماس با ما  (contact us) است. تمامي رنگ هاي پيش زمينه و ساير رنگ
هاي ديگر را مي توانيد با css  ايجاد كنيد و مي توانيد افكت هاي بسيار
جذابي مانند آن چيزي كه در بخش فوتر سايت وب اسكالا مشاهده نماييد ايجاد
كنيد.

پاك كردن پيشينه مرورگر:

مرورگرها به صورت پيش فرض مقداري
از پيشينه صفحات وب سايت را در خود ذخيره مي كنند و از اين اطلاعات استفاده
مي كنند كه بدانند آيا لينكي بازديد شده است يا نه، اما اين كار براي
زمانيكه طراح وب سايت در حال تست كردن صفحه سايتي است كمي مشكل ساز مي شود
به خصوص وقتي كه طراح مي خواهد لينكي كه بازديد نشده است را استايل بدهد،
اما چون صفحه سايت را چندين بار refresh  كرده مرورگر وي به اصطلاح cache
كرده و به همين دليل لينك هاي بازديد نشده را بازديد شده مي پندارد كه به
همين دليل مي بايست cache يا اطلاعات ذخيده شده را پاك كرد. براي اين منظور
به اين صورت عمل مي كنيم:
در مرورگر اينترنت اكسپلورر : تب  tools
راانتخاب كرده، internet option  را كليك مي كنيد، زير browser history
دكمه delete  را بزنيد، در پنجره باز شده check box مربوط به history  را
فعال كنيد، انتخاب ساير گرينه ها با توجه به نظر خودتان مي تواند صورت
گيرد. در نهايت دكمه delete  را زده و پنجره internet option را ok ميكنيم
تا بسته شود و cache مرورگرمان پاك شود.

ساير مرورگرها نيز روشي مشابه دارند كه آدرس دسترسي به history  آنها نيز به صورت زير است:

TOOLS > OPTIONS يا   PREFERENCES > PRIVACY

كلاس هاي انتخابگر  :

تا
اينجا ياد گرفتيم كه چگونه در يك فايل CSS خصوصيات مختلفي براي تگها
بنويسيم و آموختيم كه ميتوان خصوصيات يك كلاس را براي تگهاي مختلفي اعمال
كرد يعني ميتوان كلاس را چندين بار استفاده كرد. به عنوان مثال بياييد كلاس
زير را دريك پاراگراف اعمال كنيم :

.FUN {
COLOR: #339999;
FONT-FAMILY: GEORGIA, TIMES, SERIF;
LETTER-SPACING: 0.05EM;
}

به
اين ترتيب 3 خصوصيت براي پاراگرافمان تعريف كرده ايم،كه خصوصيت سوم
letter-spacing  به معناي اينست كه فاصله بين كلمات موجود درمتن 0.05em
باشد. (اگرارتفاع حرف M رابرابربا em1 درنظربگيريد 5% اين مقدار برابر با
0.05em خواهد بود).
حال براي اين كه اين خصوصيات كه در css نوشتيم
برروي پاراگراف مدنظر اعمال شود كافيست كه نام كلاس موجود در css رابه تگ
مورد نظ مان درصفحه html نسبت دهيم:

A MAN WALKS INTO A BAR; YOU WOULD’VE THOUGHT HE’D SEE IT COMING!

حال
در نظربگيريد تگ 

درون صفحه html تان وجود دارد و درون
اين تگ ميخواهيد يك پاراگراف قرار دهيد كه كلاس fun داشته باشد ، همانند كد
زير:

HAPPINESS IS A DIP IN THE OCEAN FOLLOWED BY A
INT OR TWO OF OLD SPECKLED HEN. YOU CAN QUOTE ME ON THAT!”

به نظر شما اگر بخواهيد چند پاراگراف درون اين تگ قراردهيد چه كارميتوان كرد؟ ميتوان راه حل زير را اعمال كرد:

CLASS=”FUN”>”HAPPINESS IS A DIP IN THE OCEAN FOLLOWED BY A PINT OR
TWO OF OLD SPECKLED HEN. YOU CAN QUOTE ME ON THAT!

CLASS=”FUN”>”JOIN US FOR A WEEKEND AWAY AT SOME OF OUR FAVORITE DIVE
SPOTS AND YOU’LL SOON BE MAKING NEW FRIENDS.

”ANYWAY, ABOUT TIME I GOT ON WITH SOME PROPER WORK!”

اما
همانطور كه مي بينيد تكرار نام كلاس در تگها ي بالا زياد صورت گرفته ، پس
به جاي استفاده از روش بالا ميتوان روش بهتري را به كار برد   :

”JOIN US FOR A WEEKEND AWAY AT SOME OF OUR FAVORITE DIVE SPOTS AND YOU’LL SOON BE MAKING NEW FRIENDS.

”ANYWAY, ABOUT TIME I GOT ON WITH SOME PROPER WORK!”

ID & CLASS

ياد
گرفتيد كه چگونه ميتوان از ID  و كلاس براي تگهاي موجود در HTML خود
استفاده نماييد ، به عنوان مثال براي كلاس از نماد “.” قبل از نام كلاس در
نظر گرفته شده در فايل سي اس اس استفاده مي كنيم و براي ID از نماد “#” .
نكته
از مترجم : دقت نماييد براي استايل دهي هم از كلاس استفاه ميشود و هم از
ID. اما تفاوت هايي هم در استفاده دارد وآن اينكه از ID  براي استايل دهي و
مشخص كردن عناصر اصلي صفحه مانند هدر  فوتر و منو و غيره استفاده ميكنيم و
يا براي استفاده در موارد برنامه نويسي .
تنها نكته در اين باره اين
است كه در يك صفحه HTML از نام يك ID  فقط مي شود يكبار استفاده نمود اما
از نام يك كلاس مي توان به هر تعداد استفاده كرد.

در نظر بگيريد براي چند تگ درون صفحه تان از يك كلاس يكسان استفاده كرده ايد، مثلا:

.FUN {
FONT-FAMILY: GEORGIA, TIMES, SERIF;
COLOR: #339999;
LETTER-SPACING: 0.05EM;
}

اما براي يكي از تگ ها علاوه بر خصوصيات فوق يك يا چند خصيصه ديگر نيز اضافه كنيد، به اين روش اين كار را انجام مي دهيم:

BLOCKQUOTE.FUN {
FONT-STYLE: ITALIC;
}

بدين
ترتيب چنانچه كلاس fun درون تگ  blockquote قرار گيرد خصوصيت italic  را
نيز مي خواند ، اما اگر به ساير تگ هايي كه مي خواهيم تنها كلاس fun را
بخوانند تگ blockquote را قرار ندهيم خصيصه italic  شدن فونت اعمال نمي
شود.

براي روشن تر شدن اين موضوع مثال ديگري مي زنم:
فرض كنيد مي خواهيم تمامي متون قرار گرفته درون تگ  p صفحه مان به رنگ آبي نفتي درآيند بنابراين كافيست كه در CSS بنويسيم :

P {
COLOR: NAVY;
}

اما
حالا اگر بخواهيم يكي از متون قرار گرفته درون تگ p مان به رنگ ديگري
درآيد كافيست ، به اين تگ p يه كلاس بدهيم و سپس به آن كلاس رنگ مورد
نظرمان را نسبت دهيم:

.P.GRE {
COLOR: GREEN;
}

استايل دهي قسمتي از متن با استفاده از span  :

فرض كنيد كه چنين متني داريد:

BUBBLE
UNDERIS A GROUP OF DIVING ENTHUSIASTS BASED IN THE SOUTH-WEST UK WHO
MEET UP FOR DIVING TRIPS IN THE SUMMER MONTHS WHEN THE WEATHER IS GOOD
AND THE BACON ROLLS ARE FLOWING. WE ARRANGE WEEKENDS AWAY AS SMALL
GROUPS TO CUT THE COSTS OFACCOMMODATION AND TRAVEL AND TO ENSURE THAT
EVERYONE GETS A TRUSTWORTHY DIVE BUDDY.

و مي خواهيد دو كلمه
اول اين متن يعني Bubble Underis  به صورت bold  (پر رنگ) نمايش داده شود.

براي طراحي سايت در مشهد به آنفايو مراجعه كنيد