طراحی وب سایت

اولين زبان نشانه گذاري رسمي وب، HTML (Hyper text markup language) بود که در سال 1989 ميلادي توسط Tim Beers-Lee ابداع شد. تقريبا  طراحی  تمام وبسايت هاي دنيا به نحوي از زبان HTML براي نمايش هم زمان متن، تصوير، انيميشن، فيلم و صدا بهره ميگيرند. اين زبان تحت نظارت و قيوميت کنسرسيوم جهاني وب (با عنوان w3c يا world wide web consortium) قرار دارد 

 

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

زبان HTML زباني مانند پاسکال، بيسيک و يا C نيست بلکه روشي است که به واسطه ي آن مي توان متون خالص و معمولي را صفحه آرايي کرده و عواملي مثل صدا، تصوير، فهرست هاي انتخاب و عناصر ورود اطلاعات را به يک سند اضافه کرد.

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

 

به عنوان مثال متن ساده Hello Tebyan را در نظر بگيريد. با برچسب هاي <I><B>Hello Tebyan</B></I> مي توان مرورگر را وادار کرد تا متن را به صورت پر رنگ و ايتاليک به صورت Hello Tebyan نمايش دهد. 

در واقع برچسب <B> ميگويد که متني که ميان <B>…</B> قرار گرفته را Bold يا پررنگ بکن و متني که درون <I>…</I> قرار گرفته را به شکل ايتاليک در بيار. حال چون متن Hello Tebyan در بين هر دو تگ قرار دارد هر دو تگ بر متن اعمال مي شود و متن به صورت نهايي گفته شده تبديل مي شود.

 

براي نوشتن يک فايل  نياز به هيچ برنامه خاصي نداريد. مي توانيد به سادگي متن مورد نظر را با تگ هايي که ميخواهيد در يک ويرايشگر متني ساده مثل Notepad با پسوند .html ذخيره کنيد.

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

 

زبان نشانه گذاري DHTML در حقيقت نسخه مبتني بر شي (object) از HTML است.. به عنوان مثال بتوان بر روي حرکان ماوس نظارت کرد و بر اساس موقعيت ماوس جلوه هاي خاصي را ايجاد کرد.

 

 

گوگل که کمتر از ده سال پيش تنها براي جستجوي اينترنتي استفاده مي شد ،  امروزه با گسترش قابليت ها و سرويس هايش به يک غول بزرگ اينترنتي تبديل شده است.حالا اين شرکت با معرفي APIهاي تبديلي وارد دنياي آفلاين نيز مي شود. 

APIهاي تبديلي، پروژه تبليغاتي جديدي است که به مشاغل در توليد يک پروفايل براي هر فرد کمک مي کند.گوگل مدتي است تمرکز خود را روي ذخيره سازي اطلاعات جستجوي کاربران قرار داده است و مي تواند تبليغات خاصي را به افراد خاص هدايت کند. مثلا اگر کسي به موسيقي کلاسيک علاقه دارد، تبليغ سي دي هاي جيمي هندريکس را بيشتر از بقيه تبليغات در اينترنت خواهد ديد.

اما API هاي تبديلي اين اقدام را يک مرحله جلوتر خواهد برد ، اين پروفايل ها نه تنها بر اساس جستجوهاي کاربران، بلکه براساس خريدهاي طراحی  آفلاين آنها نيز شکل مي گيرد.گوگل اين پروژه جديد را در وبلاگش رونمايي کرد.محتواي اين وبلاگ اين مي باشد:

«تبليغات آنلاين به تبادلات آفلاين نياز دارد. براي به دست آوردن اين فاصله خالي و حساب صحيح آن در تبليغات آنلاين، نسخه بتاي APIهاي تبديلي را براي ارسال خودکار خريدهاي آفلاين ايجاد کرده ايم.»

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

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

سمت او در گوگل مدير مهندسي است.اين که کورزويل دقيقا چه مسئوليت هايي دارد، فعلا مشخص نشده اما به نظر مي رسد نخستين تصميمات وي در آزمايشگاه Google X تاثيرگذار باشد.

کورزويل که اين اطلاعيه را در وب سايت شخصي خود منتشر مي کرد، نوشته است:

سال ???? گفتم حدود يک دهه بعد، فناوري هايي چون ماشين هاي خودکار و تلفن هاي همراهي را خواهيم ديد که قابليت پاسخ دهي به سوالات مان را دارند.يک دهه به جلوتر برويم ، گوگل ماشين هاي خودکار را معرفي کرده است و امروزه افراد زيادي سوالات خود را از گوشي هاي اندرويدي شان مي پرسند.از اين که به گوگل پيوسته ام، خوشحالم و اميدوارم روي سخت ترين مشکلات علم رايانه کار کنيم تا ديدگاه غيرواقعي دهه آينده فناوري را به واقعيت تبديل کنيم.

انتخاب کورزويل از سوي گوگل زماني جالب توجه مي شود که سخنان اريک اشميت، رئيس هيات مديره فعلي گوگل و مديرعامل اسبق اين شرکت را به ياد بياوريم:

اين که اجازه بدهيم آدم ها سوارخودرو شوند، کار اشتباهي است.

او همچنين در مصاحبه اي پيش تر گفته بود:

به نظر من، مردم نمي خواهند گوگل جواب سوالات شان را بدهد، مردم   طراحی  مي خواهند گوگل به آنها بگويد چه کاري را الان انجام دهند.

بسياري معتقدند کورزويل که نظريه Singularity را مطرح کرده است يک طراح علمي ـ تخيلي است ، اما گوگل اعتقاد دارد با کمک ديدگاه هاي او مي تواند علمي ـ تخيلي را به واقعيت نزديک تر کند.

 

 

رآمد شغل طراحي وب سايت چقدر است، و ويژگيهاي اين شغل چيست؟

يکي از سوالاتي که از طرف افرادي که تصميم دارند وارد حرفه طراحي وب بشوند زياد پرسيده مي شود اين است که آيا مي توان به طراحي وب به عنوان يک شغل با درآمد مناسب نگاه کرد؟ آيا ارزش دارد ماهها وقت بگذاريم و کدنويسي و برنامه نويسي و فتوشاپ و تکنيکهاي مختلف طراحي را ياد بگيريم؟ اصولا درآمد يک طراح وب در ايران چقدر است؟

 

طبعا يکي از راحتترين پاسخها نيز اين است که بستگي به خودتان و پشتکارتان دارد! اما اگر بخواهيم دقيقتر شويم، شغل طراحي وب ويژگيهايي دارد که آنرا از بسياري شغلهاي ديگر متمايز مي کند. اينجا به چند مورد به صورت خلاصه اشاره مي کنيم:

 

 

 

1. درآمد طراح سايت:

 

بستگي دارد شما براي يک شرکت به عنوان کارمند کار کنيد يا به صورت مستقل و انفرادي. در حالت اول حقوق ميانگين براي طراح وب به شکل تمام وقت (در سال 91 - تهران) معمولا بين 600 هزار تومان تا 1.5 ميليون تومان است که ميزان دقيق آن بستگي به سطح مهارتهاي شما، سختي کار خواسته شده، بزرگي شرکتي که براي آن کار مي کنيد و... دارد. اما در حالت دوم، يعني اگر به صورت مستقل کار کنيد، بستگي به اينکه چند پروژه در ماه بگيريد مي توانيد قيمتهايتان را بالا و پايين کنيد. براي اينکه حدود درآمد دستتان بيايد، بابت طراحي اختصاصي يک وبسايت دايناميک با امکانات معمول سايتهاي شرکتي، معمولا بين 400 تا 600 تومان مي توانيد دريافت کنيد. حالا اگر فرض کنيد ماهانه فقط دو پروژه بگيريد، حدود يک ميليون در ماه درآمد خواهيد داشت که گرچه بالا نيست، اما براي شروع بد هم نيست. اين البته براي طراحان وب در سطح متوسط و در ايران است و اگر شما يک طراح وب حرفه اي باشيد به نسبت بزرگي پروژه ها و قيمتها بسيار بالاتر از اين خواهد بود. ضمن آنکه تعرفه طراحي وب در کشورهاي اروپايي و امريکا جزء شغلهاي پردرآمد است و اصلا قابل مقايسه با درآمدهاي ايران نيست.

اما شغل طراحي وب ويژگيهاي منحصر به فرد ديگري نيز دارد که اينها بازدهي و سود اين حرفه را بيشتر مي کنند.

 

 

2. عدم وابستگي به موقعيت جغرافيايي:

 

در واقع يک طراح وب مي تواند در کلبه اي در يک روستاي دور افتاده هم مشغول به حرفه خود باشد! کافي است يک خط تلفن و برق باشد تا بتواند تقريبا از همه جاي دنيا سفارش بگيرد. در واقع يک طراح وب (چه به عنوان طراح مستقل و فريلنسر، و چه به عنوان کارمند دورکار يک شرکت) تمام کارهاي خود را در بستر وب انجام مي دهد و لزوما نيازي به حضور نيست. در خانه خود مي توانيد بنشينيد و با ده ها مشتري از شهرهاي مختلف سر و کله بزنيد. کمتر شغلي چنين ويژگي‌اي دارد.

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

 

3. عدم نياز به سرمايه‌ي اوليه، به جز زمان:

 

زمان: بزرگترين سرمايه براي طراحي وبسايت

براي اينکه شغل طراحي سايت را شروع کنيد مي توانيد با يک کامپيوتر قديمي که فقط نوت‌پد دارد شروع کنيد! اگر مصرف برق و پول اينترنت را روي حساب مصارف خانگي بگذاريم، هيچ خرج ديگري نخواهيد داشت. در واقع بزرگترين سرمايه اي که بايد بگذاريد تا به شما سود برساند، زمان است. شما بايد زمان قابل توجهي بگذاريد تمام تکنيکهاي به روز مورد نياز براي طراحي وب را ياد بگيريد، و اين يادگيري  طراحی  بايد هميشه استمرار داشته باشد. از طرف ديگر طراحي و برنامه نويسي شما (اگر بخواهيد حرفه اي کار کنيد) وقت قابل توجهي خواهد گرفت. از طرفي اين حرفه، جزء دسته خدمات قرار مي گيرد، و بنابراين احتمالا بيشتر از نود درصد پولي که از مشتري مي گيريد سود خالص است. پس در مقايسه با شغلهايي که با فروش محصول به سود مي رسند، واقعا شغل پر سودي به حساب مي رسد!

 

4. بازاريابي پويا:

 

 

 

 

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

 

 

طراحي وب سايت

                 

 

آموزش هاي طراحي وب و برنامه نويسي, php , javascript , html , ajax

 

    خانه

    انجمن ها

    دانلود

    HTML

    CSS

    JavaScript

    PHP

    ASP.net

    SQL

    مقالات

    آخرين مطالب

 

آموزش php - قسمت نهم - فرم ها

 

Donbaleh داغ کن - کلوب دات کام

 

 

پس از يادگيري قواعد و دستورات اوليه زبان برنامه نويسي php ، اکنون وقت اين رسيده که اطلاعات خود را در دنياي واقعي تري به کار بگيريم. يکي از رايج ترين شيوه هاي استفاده از php استفاده از آن همراه با html ، براي جمع آوري و پردازش اطلاعاتي است که کاربر براي ما ارسال ميکند. در اين بخش آموزشي يک نمونه خيلي خيلي ساده شده از دنياي واقعي مورد بررسي قرار خواهد گرفت که در آن از php براي پردازش اطلاعات استفاده مي کنيم.

مرحله اول ايجاد فرم دريافت اطلاعات از کاربر

 

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

 

CODE 9-1:

<h3>محصول مورد نظر خود را انتخاب نماييد</h3>

<form>

<b>نام محصول:</b>

<select>

    <option>بسته آموزشي php</option>

    <option>نرم افزار xampp</option>

    <option>جزوه هاي برنامه نويسي وب</option>

</select>

&nbsp;

<b>تعداد:</b>

<input type="text" />

&nbsp;

<input type="submit" value="ثبت سفارش" />

</form>

 

نتيجه قابل نمايش:

 

اگر همه کارها را درست و بادقت انجام داده باشيد بايد نتيجه به شکل زير براي شما نمايش داده شود:

محصول مورد نظر خود را انتخاب نماييد

نام محصول:      تعداد:     

 

 

 

و اگر کد بالا کمي پيچيده به نظر ميرسد براي ادامه کار مجبوريم کمي کد html بيشتر نيز به دست پخت خود اضافه کنيم:

 

CODE 9-2:

<html>

<head></head>

<body dir="rtl">

<h3>محصول مورد نظر خود را انتخاب نماييد</h3>

<form method="get" action="process.php">

<b>نام محصول:</b>

<select name="cItem">

    <option>بسته آموزشي php</option>

    <option>نرم افزار xampp</option>

    <option>جزوه هاي برنامه نويسي وب</option>

</select>

&nbsp;

<b>تعداد:</b>

<input type="text" name="cQtty" />

&nbsp;

<input type="submit" value="ثبت سفارش" />

</form>

</body>

</html>

 

در کد بالا خاصيت method روش ارسال اطلاعات و خاصيت action پردازشگر اين فرم را تعيين ميکند. در اين مثال روش ارسال را get انتخاب کرديم و تصميم گرفتيم که اطلاعات اين فرم براي فايل process.php ارسال شود. به زبان ساده قرار است فايل process.php که در ادامه آن را ايجاد ميکنيم وظيفه پردازش اطلاعات ارسال شده توسط کاربر را بر عهده بگيرد.

مرحله دوم ساخت فايل process.php

 

حال بايد سراغ کد php برويم که قرار است کار پردازش اطلاعات فرم را انجام دهد. در اينجا فقط هدف نمايش اطلاعات دريافتي از کاربر است چرا که قرار بود مثال را خيلي خيلي ساده طرح کنيم.

 

براي شروع اين مرحله فايل processForm.php را ايجاد مي کنيم

 

CODE 9-3:

1   <html>

2   <body dir="rtl">

3   <?php

4      echo 'سفارش شما ثبت شد <br />';

5      echo 'سبد خريد شما شامل  <b>' . $_GET['cQtty'] . '  ' . $_GET['cItem'] . '</b> مي باشد';

6   ?>

7   </body>

8   </html>

 

در اين مثال قرار است کد php ي که نوشتيم نوع و تعداد کالاي انتخابي را براي کاربر سايت نمايش دهد. با دستور echo در قسمت قبلي آموزش php آشنا شديم ولي اگر خوب به خط 5 از کد 3-9 دقت کنيم دستور جديدي به نام $_GET مي بينيم و اگر بيشتر دقت کنيم cItem و cQtty هم آشنا به نظر ميرسند. $_GET در حقيقت آرايه اي است که مقادير ورودي فرم html ي که به سمت سرور submit شده است را در خود نگه مي دارد. براي دسترسي به مقادير اين آرايه نياز به کليد داريم. در اينجا کليد دسترسي نامي است که به عناصر فرم html خود داديم. مثلا دستور $_GET['cQtty '] در اين مثال تعداد سفارش کاربر را در اختيار ما قرار مي دهد.

 

    براي آشنايي بيشتر با آرايه ها در php به مطالعه بخش آموزش آرايه ها در php مراجعه کنيد!

 

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

       1 . وقتي که در ويرايشگر متن کدها را نوشتيم نوع enconding صفحه را UTF8 انتخاب کنيم. براي مثال در notepad++ از منوي Encoding گزينه Encode in UTF8 without BOM را انتخاب مي کنيم و بعد فايل را ذخيره ميکنيم.

 

       2 . در تگ Body از خاصيت dir="rtl" استفاده مي کنيم.

 

تا اينجا ياد گرفتيم چطور مقادير ارسال شده از سمت کلاينت (کد html) را در کد php خود استفاده کنيم. در بخش هاي بعدي با ابعاد کاربردي تري از php آشنا خواهيم شد.

 

بازگشت « آموزش php - قسمت هشتم - توابع

 

 

تگ ها : php

مطالب مرتبط

آموزش php - قسمت نهم - فرم ها

 

آموزش php - قسمت هشتم - توابع

 

PHP 5.3.0 منتشر شد

 

عملگرهاي PHP

?-ارديبهشت-????

رشته ها در PHP

 

متغيرها در PHP

 

دستور زبان PHP

 

نظر بدهيد!

 

نام:

ايميل:

نظر:

 

 

نظرات شما!

نام: ماني

 

خوبه خيلي خووبه فقط ادامه بديد بهتر هم ميشه!

نام: نادر

 

عالي بود

نام: mehrdad

 

aaaaaaaaaaali edame bedid

نام: مسعود

 

واقعا عالي بود خوشم اومد مرسي ولي مطالب بيشتر و کاربردي تري بزارين ممنون ميشم

نام: يونس

تاريخ ارسال: ?? فروردين ???? ?:??:??

خيلي خوب بود. يه شبه تا اينجا اومدم. جان فلاني دامه بده.

نام: erwin

 

خيلي عالي بود . اگر مقدور بود قسمت هاي آخر را بيشتر توضيح دهيد .

نام: Ali

 

Damet Garm DaDa Kheylu Khob ToZzih Midi:x

نام: محمود

نام: sh

 

عالي

نام: shaghayegh

 

vai merc kheili kheili kheili kheili mamnon

نام: samira

 

واقعا از لطفت ممنونم دست گلت درد نکنه جيگررررررررررررررررررررر

نام: tyuj

 

نام: HappyMoon

تاريخ ارسال: ? خرداد

شما ميتونين سشن رو توضيح بدين؟ و کارايي سشن و يکي دوتا نمونه ي مختلف؟ ممنون ميشم.

نام: shadowاد 

خيلي عالي بود و خيلي خيلي ممنون يه پروژه ي کوچيک با phpداشتم که برام کابوس شده بود ولي شما مشکلم رو حل کردين. اميدوارم هميشه موفق باشيد وادامه بديد

نام: majid

بد نبود

نام: مسعود

نام: پدرام

 

اگه در مورد هک مطالبي بزارين ممنون ميشم

نام: محمد

 

خيلي عالي بود در عين سادگي متن مطلب خوب درک شد. قدا قوت

نام: ehsan

 

خدا خيرتون بده

نام: ALi

تاريخ ارسال: ?? خرداد ???? ??:??:??

Salam mer C kheili khoob bood e nemikhayd edame bedid 

نام: ميلاد

تاريخ ارسال: 

سلام آقا آموزش ها واقعا عالي هستند ، لطفا ادامه بدين

نام: عسل

 

اگه ميشه کل برنامه نويسي وب به ايميلم بفرستين

 

 

کليه حقوق براي وب فوکاس محفوظ است. هرگونه کپي برداري يا انتشار مطالب تنها با ذکر نام و آدرس کامل سايت امکان پذير مي باشد

©Copyright 2007 - 2012 Webfocus.ir | All rights reserved.

 

 

Tags: educational templates, educational trends in design, Educational Website Design, Educational website style, educational website templates, Educational websites

Posted in Showcases, Uncategorized, Useful Tips, WordPress Themes

 

 

Let us make it clear: what makes educational sites successful?

 

Call-to-action. The goal of your site is to involve more clients to your school, kindergarten, etc. Make them want to visit your institution. Show the advantages of it, use more photo and video materials.

Well-built structure. Education services tend to have a lot of content including schedules, documentation for each program, reports and so on. Make sure your content is easy to search around and features clear navigation that makes sense to your visitors.

Make it look smart. The visitors associate your website with what your school does. The better it is presented online, the better opinion the visitors will have about your work.

 

When it comes to educational templates which can fit the general view of your educational organization, it shouldn’t be a platform to show off performance – everything has to be wisely balanced.

 

 

  Vivid And Eye-Catchy Design

 

Bright design better suits educational sites for kids. There is nothing more friendly than colorful and jolly childish site design like this. Childhood is the happiest time for your children and they have to spend it in a friendly atmosphere.

 

 

در سلسله آموزشهاي طراحي سايت آنلاينر به بخش چهارم Event attribute در html پرداختيم.

 

در اين مقاله قصد بررسي embed کردن : video – sound – flash  را داريم , و ميخواهيم اين فايل ها را در صفحه وب خود وارد کنيم.

 

وارد کردن يک فايل فلش

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

 

 

?- پوشه اي در آدرس ريشه سايت خود با نامي دلخواه ايجاد کنيد. اين پوشه چون بايد حاوي فايل هاي فلش باشد پس بهتر است نام آن پوشه را flash انتخاب کنيد تا فايل هاي سايت شما مرتب و سازماندهي شوند. ميتوانيد حتي اين پوشه را در کنار صفحه وب خود (لوکال) قرار دهيد و پس از گرفتن نتيجه درست آن را توسط FTP به هاست خود منتقل نماييد.

 

?- فايل فلش خود را در پوشه ايجاد شده قرار دهيد. نام فايل فلش را به ياد داشته باشيد تا در کد نويسي مجبور به ارجاع دوباره به فايل فلش نشويد در. اين مثال ما نام فايل را flashhtml.swf قرار ميدهيم.نکته ديگر اينکه سعي کنيد تا حد امکان حجم فايل فلشي که در صفحه وب استفاده ميکنيد کم باشد تا در سرعت لود صفحه وب سايت شما تاثير کمتري داشته باشد. پيشنهاد ما براي اندازه فايل فلش عرض ??? پيکسل و ارتفاع ??? پيکسل است.

 

?- فايل html صفحه وب خود را باز کرده و مکاني را براي درج فايل فلش خود انتخاب نماييد.در صورت تمايل تگ DIV براي نگهداري اين ويديو در جاي مناسب خود ايجاد نماييد.

 

?- کدهاي زير را  در مکان انتخاب شده در صفحه وب خود قرار دهيد.

 

1

2

3

4

5

<object width="500" height="500">

<param name="movie" value="flash/flashhtml.swf">

<embed src="flash/flashhtml.swf" width="500" height="500">

</embed>

</object>

5- فايل خود را ذخيره کرده و اجرا نماييد تا نتيجه تمرين خود را مشاهده نماييد.

 

وارد کردن يک فايل صوتي در صفحه HTML

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

 

به مثال زير دقت کنيد:

 

<HTML>

<HEAD>

<TITLE> testing  </TITLE>

</HEAD>

<BODY>

<EMBED SRC="aladdin.mid" HIDDEN="true" AUTOSTART="true"

STARTTIME="00:10" ENDTIME="00:30">

</BODY>

</HTML>

در مثال بالا آدرس فايل صوتي توسط صفت SRC مشخص ميشود.

 

صفت HIDDEN اگر با مقدار true مقدار دهي شود شيء مورد نظر مخفي خواهد شد و کاربر نميتواند آن را مشاهده نمايد ولي کليپ صوتي پخش خواهد شد.

 

صفت autostart اگر مقدار true داشته باشد با لود شدن کامل صفحه کليپ صوتي شروع به پخش شدن ميکند.

 

صفت starttime نيز مکان شروع به پخش کليپ صوتي را تعيين ميکند . دراين مثال مقدار آن برابر ??:?? قرار داده شده است، اين بدين معني است که فايل صوتي از ثانيه ?? شروع به پخش ميکند.

 

مسلما صفت endtime  نيز مکان اتمام کليپ صوتي را تعيين ميکند. مقدار ??:?? در اين مثال بدين معني است که کليپ صوتي در ثانيه ?? ام به پايان برسد.

 

صفات ديگري نيز وجود دارد که در اين مثال استفاده نشده است. در زير اين صفات توضيح داده شده اند.

 

VOLUME = اين صفت ميزان صدا را تعيين ميکند.

LOOP=”true”|”false”  همانطور که مشاهده ميکنيد صفت loop با دو مقدار true و false تعيين ميشود. اگر مقدار آن true  تعيين شود با اتمام کليپ صوتي اشاره گر آن به  اول کليپ برگشته و دوباره شروع به پخش خواهد کرد. اين عمليات تا بستن صفحه وب ادامه ميابد.

PLAYCOUNT =  و اين صفت نيز تعداد دفعات پخش کليپ صوتي را تعيين ميکند. اگر مقدار اين صفت را برابر ? قرار دهيم با پخش ? دفعه کليپ صوتي عمليات پخش اتمام ميابد.

 

 

<!DOCTYPE html>

<html>

<body>

 

<video width="320" height="240" controls autoplay>

<source src="movie.ogg" type="video/ogg">

<source src="movie.mp4" type="video/mp4">

<source src="movie.webm" type="video/webm">

<object data="movie.mp4" width="320" height="240">

<embed width="320" height="240" src="movie.swf">

</object>

</video>

 

</body>

</html>

روش ديگر براي نمايش يک کليپ ويدئويي اين است که از همان روشي که فايل هاي فلش را در صفحه وب نمايش ميدهيم نيز براي نمايش کليپ ويدئويي نيز استفاده کنيم. از معايب اين روش اين است که کليپ تصويري بايد به فايل فلش تبديل شود. ودومين عيب آن اين است که مرور گر هايي که فايل هاي فلش را پشتيباني نکنند نميتوانند کليپ تصويري شما را نمايش دهند.

 

يک مقايسه و يک آناليز ساده بين کد شما و ظاهري که در مرورگر مي بينيد ، مي تواند در يادگيري شما کمک شاياني کند:

 

 

 

design-web-17.gif 

زمان مناسبي است که در مورد 2 تگ p  و h1 و البته عناصر ديگر صحبت کنيم.

 

 

تيترها و سلسله مراتب آن (H)

 

 

 

تيترها عناصر بلاک و بسته شونده (container)هستند و سلسله مراتب مخصوص به خود را دارند و از h1  تا h6  وجود دارند.

از h1  براي مهم ترين تيتر از h2 براي تيتر کم  ارزش تر و از h3 براي تيتر کم ارزش تر از h2 و به همين ترتيب تا  h6

 

 

پاراگراف (p)

 

 

 

يک تگ بلاک و بسته شونده (container) است و براي يک بلوک متني استفاده مي شود اين بدان معني است که متن هاي خوتان را بايد داخل اين تگ قرار دهيد.

 

 

ليست (list)

 

 

 

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

اينجا:

 

 

 

design-web-18.jpgو اما ليست ها دو گونه اند:

 

 

Ol-order list : براي ليست هاي ترتيبي

 

 

Ul-unorder list: براي ليستهاي غير ترتيبي

 

به مثال زير دقت کنيد:

 

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Lists - an introduction</title>

    <meta http-equiv="Content-Type"

    content="text/html; charset=utf-8"/>

    </head>

    <body>

    <h1>Lists - an introduction </h1>

    <p>Here's a paragraph. A lovely, concise little paragraph.</p>

    <p>Here comes another one, followed by a subheading.</p>

    <h2>A subheading here</h2>

    <p>And now for a list or two:</p>

    <ul>

    <li>This is a bulleted list</li>

    <li>No order applied</li>

    <li>Just a bunch of points we want to make</li>

    </ul>

    <p>And here's an ordered list:</p>

    <ol>

    <li>This is the first item</li>

    <li>Followed by this one</li>

    <li>And one more for luck</li>

    </ol>

    </body>

    </html>

 

و حالا خروجي کار رو در مرورگر ببينيد تا تفاوت هاي دو نوع ليست را ببينيد

 

design-web-19.gif

 

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

نظرات (0)

 

عنصر  blockquote:

 

اين تگ ، يک تگ container (که در جلسات قبل توضيح داده شده) است و طبق گفته کتاب اين تگ  براي نمايش يک گفته شخصي استفاده مي شود.

 ولي در کتاب هاي ديگر به تگ هاي  Quotes  اشارات متنوعي شده است.  Quotes به معني نشان يا نقل قول است و کلا" اين تگها براي جلب توجه بيشتر استفاده مي شود در واقع يک شهادت ويا سفارش و يا کامنت است.

 

تگ هاي  Quotesبه 3 بخش زير تقسيم مي شود :

 

 

    1.    <blockqoute>< /blockqoute>

    2.    <q>< /q>

    3.    <cite>< /cite>

 

 

q :

 

اين تگ ، يک تگ container  و inline  است  و براي نقل و قول براي يک يا دو کلمه استفاده مي شود.

يادآوري :  تگ هاي block  کل سطر را مي پوشاند و تگ هاي inline  تنها دور عنصر را مي گيرند .

 

    <p>

    I'm said <q>font</q>but my friend said <q> font face </q>

    </p>

    cite  :

    اين تگ ، يک تگ container  و inline  است  و براي نام نويسنده و يا نويسنده کامنت استفاده مي شود

    <p>

     but then <cite> ali</cite>said <q> no think these font work betfer </q>

    <p>

 

blockquote  :

 

اين تگ ، يک تگ container  و block  است  و براي اشاره به مقاله قبلي يا اشاره به يک مرجع خاص  معمولا براي يک جمله استفاده مي شود.

 

تگ هاي   strong و  em :

 

اين تگ ها ، تگ هاي container  و inline  هستند و براي برجسته سازي و اهميت کلمات استفاده مي شوند. و اما در ظاهر ، تگ strong کلمه را bold  و  تگem   کلمه را italic مي کند.

 

اين نکته را اضافه کنم که  اين تگ ها براي موتورهاي جستجو از اهميت خاصي برخوردار است .

 

        <p>

            this is a <strong>bold text</strong> this is a <em>italic text</em>

        </p>

 

خط فاصله بين متون p :

 

فرض کنيد مي خواهيم در يک پاراگراف به خط جديدي برويم . براي اين کار از تگ <br /> استفاده مي کنيم.

اين تگ ، يک تگ empty  است  و در ساختار xhtml  به صورت <br />  نوشته مي شود .

نکته مهم : از br اضافي پرهيز کنيد 

 

    <p>

            this is a test

            <br />

            this line show after break

    </p>

 

 

تعريف تگ هاي خاص:

 

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

 

<abbr>

 

براي توصيف يک عبارت اختصار به کار مي رود

 

    <p>

    The<abbr titile="search engine optimization">seo</abbr> is good for your site 

    <p>  

 

 

<acronym>  

 

براي توصيف نامها ي محاوره اي اختصار

 

    <p>

        Can I get this <acronym title="as soon as possible">AsAp </acronym>

    <p>

 

 

<address>

 

 براي نوشتن اطلاعات تماس

 

    <address>

    Behzad alibeigi

    <br/>

    <a href =contact.. >email</a><br/>

    Phone :...

    </address>

 

 

 

<dfn>

 

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

 

    <p>

    The <dfn title="microsaft web browser">Inteet explorer </dfn> is the most popular browser used undermater.

    <p>

 

 

همانطوري که از مثال هاي بالا مشخص است اين 4 تگ container  و  inline  هستند.

براي ديدن يک مثال ديگر بهتر است به وب سايت وبسکالا برويم و سورس آن را ببينيم :

 

design-web-50.jpg

 در اين مثال مي توانيد نحوه ي استفاده از اين تگ ها را در عمل ببينيد.

 

تگ هاي  ناشناخته تري هم وجود دارند مانند kdb , samp , var  که بهتراست در اينترنت کمي راجع به آنها تحقيق کنيد و اگر سوالي در اين مورد داشتيد با من مطرح کنيد .

 

فصل سوم

 

Adding some style

 

همان طوري که قبلا اشاره کرديم لايه دوم وب  ، لايه ظاهر آن است که با  CSS اعمال مي شود.

در گذشته  براي اضافه کردن ظاهر به سايت  از ترکيب دستورات CSS وHtml استفاده مي شد ولي امروزه براي اين کار مي بايست فقط از css استفاده کرد تا وب سايتي استاندارد داشته باشيم.

CSS يا همان (Cascading style sheets) زباني است که براي تغيير ظاهر عناصر صفحات استفاده مي شود.  که مي تواند شامل رنگ ، سايز ويا موقعيت عناصر باشد .

 

براي اعمال css 3 روش وجود دارد:

 

    •    Inline

    •    Embedded

    •    Exteal

 

 

: inline

 

در اين روش از خصوصيت  style  داخل  تگ هاي html  استفاده مي کنيم بدين صورت :

 

       <p style="color:Red;font-weight: bold;">

        this is a test

       </p>

 

خصوصيت  style  مي تواند شامل چندين اعلان باشد . اعلان ها با ; از اعلان کناري جدا مي شود. به مثال بالا دقت کنيد :  اعلان رنگ و نوع فونت با ; از هم جدا شده اند

هر اعلان شامل يک property و يک value است .

 

design-web-51.jpg 

عنصر span :

 

يک تگ inline است و تگ جادويي دوم بعد از div براي من به حساب مي آيد span موارد استفاده زيادي دارد که يک نمونه از آن  که مربوط به همين  بحث  inline style است  در مثال زير آورده شده است:

 

 

 

 

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

 

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

 

مشاوره  طراحی وب سایت  در اين قسمت بسيار مهم است زيرا انتخاب هاي اشتباه و پياپي انرژي وقت و سرمايه شما را از بين خواهد برد . بخش طراحي وب سايت کمک وب با

 

اطلاعات بروز و همگام با تکنولوژي روز طراحي وب سايت مشاوره رايگان به شما خواهد داد .

 

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

 

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

 

طراحي وب سايت، طراحي پورتال و طراحي سايت هاي تجارت الکترونيک با گارانتي رضايت شما

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

 

تيم طراحي وب سايت کمک وب بر اين باور است که مهمترين معيار سنجيدن کيفيت وب سايت طراحي شده ميزان رضايت مشتري ميباشد، از اين رو رضايت شما را گارانتي ميکنيم.

 

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

 

طراحي وب سايت با رعايت اصول بهينه سازي وب سايت (موتورهاي جستجو و آناليز کلمات کليدي و رقباي شما) تاثير بسزايي در شناساندن نام تجاري، محصولات و خدمات شما دارد.