          azita 
            بازدید : 18
          دوشنبه 25 شهریور 1392
           نظرات (1)
        

HTML5 - قابليت هاي جديد

HTML5از زمانيکه HTML 4.01 در سال 1999 به عنوان يک استاندارد معرفي شد خيلي چيزها در اينترنت و حتي در مورد کاربران و نيازهاي آنها تغيير کرده است. امروزه بسياري از قابليت هاي HTML 4.01 منسوخ شده يا مورد استفاده قرار نميگيرد. بيشتر ويژگيهايي منسوخ و بي استفاده از HTML5 حذف شده اند يا در مورد بعضي از آنها بازنگريهايي صورت گرفته است.

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

تگتوضيحات

<canvas>از اين تگ براي ترسيم گرافيک هاي دو بعدي از طريق کدنويسي (معمولا جاوا اسکريپت) استفاده ميشود

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

تگتوضيحات

<audio>تعريف محتواي صوتي

<video>

تعريف محتواي تصويري - فيلم و کليپ

<source>تعريف منابع مختلف براي صدا و تصوير

<track>تعريف متن براي <audio> و <video>

المان هاي فرم

تگتوضيحات

<datalist>يک فهرست از حالت هاي پيش فرض براي کنترل هاي ورودي

<keygen>تعريف يک توليد کننده جفت کليد براي فرم ها

<output>تعريف نتيجه يک خروجي

المان هاي معنايي و ساختاري

HTML5 المان هايي جديدي را براي ساختار دادن به متون وب به شرح زير در بر گرفته است:

تگتوضيحات

<article>تعريف يک مقاله

<aside>تعريف يک محتواي در کنار متن اصلي

<bdi>جهت تعريف متن در جهتي غير از جهت اصلي که خارج از آن در نظر گرفته شده

<command>تعريف يک دکمه دستوري که کاربر مي تواند آن را فعال نمايد

<details>تعريف جزييات بيشتر

<dialog>تعريف يک پنجره dialog

<summary>تعريف بخش قابل مشاهده از يک تگ <details>

<figure>تعريف محتواي خود شامل مانند عکس ، نمودار و ...

<figcaption>تعريف يک عنوان براي تگ <figure>

<footer>تعريف يک بخش پاييني براي يک صفحه يا بخش

<header>تعريف يک بخش بالايي براي يک صفحه يا بخش

<mark>جهت برجسته کردن متن

<meter>تعريف يک واحد اندازه گيري

<nav>لينک هاي پيمايش صفحات

<progress>نمايش پيشرفت يک وظيفه

<section>تعريف يک بخش از متن

<time>تعريف تاريخ و زمان

<wbr>تعريف يک خط جديد

HTML5 چيست؟

HTML5 جديدترين استاندارد براي HTML است.

همانطور که مي دانيد نسخه قبلي از HTML يعني HTML 4.01 در سال 1999 معرفي شد. از آن زمان تا به حال خيلي چيزها در وب دچار دگرگوني و تغيير شده است.

در حال حاضر HTML5 همچنان در حال توسعه است طراحی سایت و W3C احتمالا تا انتهاي سال 2014 يک نسخه پايدار از آن را معرفي خواهد کرد ، البته امروزه بيشتر مرورگرهاي پيشرفته مانند Firefox ، Chrome و ... تا حدودي آن را پشتيباني مي کنند.

پروژه HTML5 چطور آغاز شد؟

HTML5 دست پخت مشترک W3C و WHATWG است. WHATWG روي وب فرم ها و برنامه هاي کاربردي و W3C روي XHTML 2.0 کار مي کرد. در سال 2006 تصميم براين شد که هردو سازمان روي نسخه جديدي از HTML کار کنند که نتيجه آن HTML5 شد.

مجموعه اي قراردادها و قوانين به شرح زير براي شروع کار در نظر گرفته شد:

تعريف ويژگي هاي جديد بر مبناي HTML ، CSS ، JAVASCRIPT و DOM

کاهش نياز به پلاگين هاي خارجي مانند FLASH

بهبود مديريت خطا

استفاده از دستورات بيشتر به جاي کدنويسي - scripting

HTML5 نبايد به دستگاه خاصي وابسته باشد

پروسه توسعه بايد عمومي باشد

HTML5 <!DOCTYPE>

در HTML5 فقط يک تعريف <!DOCTYPE> داريم و آن به سادگي کد زير است:

<!DOCTYPE html>

کد زير حداقل کدي است که براي ساختن يک صفحه HTML5 به آن نياز داريد:

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

The content of the document......

</body>

</html>

ويژگيهاي جديد HTML5

بعضي از مهمترين ويژگيهاي جديد در HTML5 به شرح زير است:

المان <canvas> براي ترسيم دو بعدي

تگ هاي <video> و <audio> براي پخش چند رسانه اي - صدا و فيلم

پشتيباني از ذخيره سازي محلي

تگ هاي جديد وابسته به محتوا مانند <article> ، <footer> ، <header> و ...

کنترل هاي جديد براي فرم ها مانند تقويم ، تاريخ ، جستجو ، ايميل و ...

پشتيباني مرورگرها از HTML5

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

نصب همزمان XAMPP و IIS

توسط: ميثم کريمي | ??-خرداد-???? | PHP

يکي از سوالات هميشگي برنامه نويسان وب در مورد نصب همزمان IIS(سرويس دهنده وب مايکروسافت) و APACHE است. اگر شما هم از آن دسته برنامه نويسان و طراحان وب هستيد که دوست داريد برنامه نويسي به زبان php يا زبان هاي ديگر مثل ASP.net را به صورت همزمان تجربه کنيد اين مطلب احتمالا به کارتان مي آيد. قبلا در مورد روش نصب XAMPP براي برنامه نويسي به زبان php مطلبي در وب فوکاس داشتيم. در اين راهنما با نحوه انجام تنظيمات APACHE يا IIS براي استفاده همزمان از اين دو سرويس دهنده وب آشنا خواهيد شد.

سرويس دهنده هاي وب معمولا به صورت پيش فرض از پورت 80 براي گوش دادن به درخواست هاي صفحات وب استفاده مي کنند. وقتي نياز به استفاده همزمان از دو سرويس وب است مجبوريم يکي از آن دو را طوري تنظيم کنيم که به پورت ديگري به غير از پورت 80 گوش کند. مثلا اگر عموما به زبان ASP.net برنامه مي نويسيد مي توانيد APACHE را طوري تنظيم کنيد که از پورت 8080 براي پاسخ به درخواست ها استفاده کند.

روش اول تغيير پورت APACHE به 8080 (يا هر پورت آزاد ديگر):

براي تغيير پورت سرويس دهنده APACHE با فرض اينکه از XAMPP استفاده مي کنيد بايد شماره پورت در نقطه از فايل httpd.conf تغيير کند. فايل httpd.conf يک فايل متني حاوي بعضي تنظيمات پيکربندي APACHE است. اگر xampp را در درايو C کامپيوتر خود نصب کرده باشيد ، بنابراين فايل httpd.conf در مسير c:\xampp\apache\conf قرار دارد. بعد از طراحی سایت پيدا کردن اين فايل حتما يک کپي از آن البته به يک نام ديگر مثلا httpd.conf.bak براي خود نگه داريد که درصوتيکه مشکلي ايجاد شد دوباره بتوانيد آن را جايگزين نماييد. حال فايل اصلي و نه فايل کپي شده را با يک ويرايشگر متن مثل Notepad++ باز کنيد. به دنبال دستور Listen بگرديد و شماره پورت را به 8080 تغيير دهيد:

# Listen: Allows you to bind Apache to specific IP addresses and/or

# ports, instead of the default. See also the <VirtualHost>

# directive.

# Change this to Listen on specific IP addresses as shown below to

# prevent Apache from glomming onto all bound IP addresses (0.0.0.0)

#Listen 12.34.56.78:80

Listen 8080

سپس خطي که دستور ServerName را بيابيد و اينجا نيز شماره پورت جديد را وارد نماييد:

# ServerName gives the name and port that the server uses to identify itself.

# This can often be determined automatically, but we recommend you specify

# it explicitly to prevent problems during startup.

# If your host doesn't have a registered DNS name, enter its IP address here.

ServerName localhost:8080

سپس XAMPP Control Panel را باز کنيد و يک بار APACHE را STOP و دوباره START کنيد تا تغييرات جديد اعمال شود. از اين پس براي مشاهده صفحات از طريق APACHE بايد آدرس localhost:8080 را وارد کنيد و با پيروي از آن آدرس phpmyadmin نيز به localhost:8080/phpmyadmin تغيير پيدا مي کند. صفحات روي سرويس دهنده وب IIS نيز از آدرس localhost بدون شماره پورت قابل دسترسي اند. فقط يک نکته مهم را دقت کنيد که اگر TOMCAT را نيز نصب کرده ايد به جاي پورت 8080 از پورت ديگري استفاده کنيد.

روش دوم تغيير پورت IIS:

در روش دوم به جاي تغيير پورت APACHE به سراغ IIS مي رويم. براي انجام تغييرات IIS در ويندوز 7 بايد وارد کنترل پنل شويد و مسير زير را دنبال کنيد:

Control Panel> System and Security> Administrative Tools> Internet Information Services

حال در سمت چپ پنجره باز شده مطابق شکل روي گزينه Default Web Site راست کليک کنيد و گزينه Edit Bindings را انتخاب نماييد. در پنجره Site Bindings روي دريف http کليک کنيد و دکمه Edit را بزنيد:

نصب همزمان iis و xampp

در پنجره جديد IP Address را به All Unassigned تغيير دهيد و شماره پورت دلخواه مثلا 8080 يا 85 را وارد نماييد و روي دکمه OK کليک کنيد. حال بايد يک بار سرور را ريستارت کنيد تا تغييرات اعمال شود.

تغيير پورت IIS

تنظيم Microsoft Expression Web با پورت جديد:

اگر از MS Expression Web براي توسعه سايت ها استفاده مي کنيد هر وقت که پيش نمايش سايت خود را بخواهيد ببينيد Expression Web سعي مي کند تا همچنان از پورت 80 براي نمايش اطلاعات استفاده نمايد براي رفع اين مشکل سايت خود را در Expression Web باز کنيد و سپس روي منوي site در بالاي نرم افزار کليک کنيد و گزينه Site Settings را انتخاب نماييد. در تب preview گزينه Preview using custom url for this website را انتخاب نماييد و آدرس درست را همراه با شماره پورت وارد نماييد.

          azita 
            بازدید : 7
          یکشنبه 17 شهریور 1392
           نظرات (0)
        

آموزش توابع GD (قسمت دوم)

php_gd

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

imagefttext($image, $size, $angle, $x, $y, $color, $fontfile, $text);

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

حالا ميخوام يه تايع ديگه رو معرفي کنم که با کمک اين تابع ميتونيد روي تصوير واترمارک بزنيد.

imagecopymerge ($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h, $pct);

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

توضيح خط به خط:

?-بارگيري تصويري که ميخوايم روش واترمارک بزنيم.

? و ? و ?-ساخت تصوير واترمارک.

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

?-درج واترمارک روي تصوير.

?-چاپ و يا ذخيره تصوير استامپ خورده.

عبارت با قاعده (قسمت اول)

Posted on ??/??/?? | PHP

در علم رايانه، عبارت باقاعده (regular expressions)، که تحت عنوان regex يا regexp نيز نام مي‌برند به معني تطبيق رشته در متن است، که از قبيل نويسه‌هاي خاص و يا الگوهايي از نويسه‌ها مي‌باشد.

براي مثال:

دنباله‌اي از نويسه‌هاي «car» در هر متن، از قبيل «car»، «cartoon» يا «bicarbonate»

يک نويسه? «$» که پس از آن يک يا چند رقم بيايد و پس از آن به صورت اختياري يک مميز بيايد و پس از مميز دقيقاً دو رقم اضافه قرار داشته باشد (مانند ‎«$??»‎ يا ‎«$??????»‎)

…

تو PHP دو نوع متفاوت از عبارت باقاعده وجود داره:

POSIX Extended

Perl Compatible

که بيشتر ار دومي استفاده ميشه (به دليل سرعت و تکامل بيشتر از POSIX) و من هم قصد دارم همينو آموزش بدم.

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

مثلاً براي اعتبارسنجي يه نام کاربري که بايد شامل اعداد و حروف بين ? تا ?? کاراکتر باشه ميشه از اين الگو استفاده کرد:

/^[a-z0-9]{6,10}$/

البته به اين صورت:

<?php

if( preg_match('/^[a-z0-9]{6,10}$/', 'myuser'))

{

echo 'Matched! <br>';

} else {

echo 'Not matched! <br>';

}

و توضيح الگويي که استفاده شد:

هر الگويي که نوشته ميشه بايد بين دو علامت “/” قرار بگيره.

کاراکتر “^”: اين کاراکتر به معني آغار خط هست. براي مثال اگه بخوايم ببينيم يه نويسه با a شروع ميشه يا نه اونوقت به اين الگو نياز داريم

/^a/

کاراکتر “$”: اين کاراکتر به معني پايان خط هست. دقيقاً عکس “^” عمل ميکنه.

کاراکتر “|”: اين کاراکتر به معني “يا” هست. مثلا براي بررسي مطابقت يا عدم مطابقت يه نويسه با يکي از کلمات red يا bed اين الگو رو ميخوايم:

/^bed|red$/

پرانتز “()”: براي ايجاد زير الگوها در يک الگو ازش استفاده ميکنيم. مثلا اگه بخوايم نويسه اي با يکي از کلمات bed يا red مطابقت کنه به الگوي زير نياز داريم:

/^(r|b)ed$/

براکت “[]“: اينا وقتي کاربرد داره که بخوايم يه گروه خاص از کاراکترها رو با يه نويسه مقايسه کنيم. مثلا واسه اينکه ببينيم يه نويسه از a و b و h تشکيل شده يا نه اين الگو رو مينويسيم:

/^[abh]+$/

کاراکتر “+” و “*”: “+” يکي يا بيشتر و “*” هيچي يا بيشتر. مثلا براي بررسي اينکه يه نويسه از نوع عدديه يا نه اين الگو لازمه:

/^[?-?]+$/

”{n,m}”: يعني هر الگويي که قبلش قرار داره بايد بين n تا m بار تکرار شده باشه.

و تابع preg_match که به ترتيب الگو و نويسه رو دريافت ميکنه و اگر نويسه با الگو مطابقت کنه true رو برمي گردونه.

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

بهترين کتابخانه هاي کار با نرم افزارهاي آفيس Word , Excel , Power Point

Posted on ??/??/?? | PHP کدهاي آماده

15205298

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

?- PHP PowerPoint

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

دانلود و آموزش : http://phppowerpoint.codeplex.com/

2- PHP Word

PHP Word يکي ديگه از کتابخانه هايي هست که براي ساخت فايلهاي word نوشته شده. اين کتابخانه فايلهايي با پسوند docx به کاربرا ميده.

اضافه کردن متنهاي قالب بندي شده ، اضافه کردن عکس ، اضافه کردن header و footer , … از قابليتهاي اين کتابخانه هستند.

دانلود و آموزش : http://phpword.codeplex.com/

3- PHP Excel Reader

کتابخانه اي فقط براي خواندن فايلهاي excel .

دانلود و آموزش : http://code.google.com/p/php-excel-reader/

4 – Excel Writer (XML) For PHP

اين کتابخانه براي ساخت صفحات اکسل به وسيله php کاربرد داره.

دانلود و آموزش :http://sourceforge.net/projects/excelwriterxml/

5 -PHP Export Data

يک کتابخانه براي خروجي گرفتن از اطلاهات به صورت xml , CSV , TSV

دانلود و آموزش : https://github.com/elidickinson/php-export-data

6. PHP Excel

با استفاده از اين کتابخانه ميتونيم آرايه هاي ذو بعدي در php رو به فايلهاي اکسل تبديل کنيم.

دانلود و آموزش : http://code.google.com/p/php-excel/

7. SimpleExcel PHP

کتابخانه ساده اما قدرتمندي که براي نوشتن و خواندن فايلهاي اکسل به وسيله php کاربرد داره.

          azita 
            بازدید : 9
          پنجشنبه 07 شهریور 1392
           نظرات (0)
        

در مرحله بعد بايد براي هر پاراگرافي که مي خواهيم به رنگ مشکي باشد از شناسه “class=”black در تگ <p> استفاده کنيم و براي پاراگراف قرمز از شناسه “class=”red. البته نام کلاسها اختياري است ولي بهتر است آنها را طوري انتخاب کنيد که مفهوم داشته باشند تا وقتي که حجم استايل شما بيشتر شد به گنگ نباشد. در مثال زير مي توانيد کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنيد :

<p>اين متني است که به رنگ مشکي نمايش داده مي شود</p>

<p>اين متن به رنگ قرمز نمايش داده مي شود.</p>

نکته : شما مي توانيد بيش از يک کلاس براي يک تگ HTML تعريف کنيد اما براي اين طراحی وب سایت کار نبايد دو بار از شناسه class استفاده کرد. بلکه بايد در يک شناسه class نام دو کلاس مورد نظر را با يک فاصله بين آنها وارد کرد. براي مثال در پاراگراف زير از دو کلاس فرضي red و center استفاده شده است :

<p>اين متن پاراگرافي است که تحت تأثير دو کلاس red و center قرار دارد</p>

در نوشتن استايل مي توان از نوشتن نام تگ در سلکتور کلاس چشم پوشي کرد. در اين صورت ويژگيهاي تعريف شده در آن کلاس بر هر تگ HTML که از کلاس مربوطه در شناسه class آن استفاده شده باشد اثر مي گذارد. براي مثال در کلاس زير ويژگي وسط چين را تعريف مي کنيم و از نام تگ در سلکتور کلاس استفاده نمي کنيم :

.center {text-align: center}

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

<p>متن اين پاراگراف به صورت وسط چين نمايش داده مي شود</p>

<div>متن اين قسمت به صورت وسط چين نمايش داده مي شود</div>

<h2>متن اين سرفصل به صورت وسط چين نمايش داده مي شود</h2>

تذکر : هيچ وقت نام کلاس را با يک عدد شروع نکنيد چون در اين صورت مرورگرهاي Mozilla و Firefox نمي توانند از آن کلاس استفاده کنند.

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

در اين مثال از استايل زير در استفاده مي کنيم:

.test { border: #F00 1px double }

.test a { color: green }

.test a:hover { border: yellow 2px solid }

کد HTML زير براي اين مثال مورد استفاده قرار مي گيرد:

<div>

<a href=”#”>لينک آزمايشي شماره ?</a>

</div>

<a href=”#”>لينک آزمايشي شماره ?</a>

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

همانطور که مي دانيد با وجود اينکه برخي از عناصر در صفحه با هم طراحی وب سایت تفاوت دارند، از يک تگ HTML براي ايجاد آنها استفاده مي شود.براي مثال برخي از اين عناصر را که از تگ <input> در به وجود آوردن آنها استفاده مي شود مي توانيد در زير مشاهده کنيد:

<"input type="text>

کادرهاي متني که در فرمها استفاده مي شود.

<"input type="checkbox>

چک باکس هم با استفاده از تگ <input> به وجود مي آيد.

<"input type="radio>

در ساختن دکمه هاي راديو هم از همان تگ استفاده مي شود.

<"input type="button>

اين تگ در ساختن هم استفاده مي شود.

<"input type="submit>

براي ساختن دکمه ارسال فرم هم از تگ <input> استفاده مي شود.

حالا فرض کنيد ما در يک صفحه از چند نمونه از عناصر بالا استفاده کرده ايم ولي فقط مي خواهيم ويژگيهاي يکي از آنها را تغيير دهيم. دو روش براي اين کار وجود دارد: يکي استفاده از کلاس است که در اين روش اگر تعداد زيادي از عنصر مورد نظر در صفحه وجود داشته باشد بايد به همان تعداد از شناسه class در تگهاي آنها استفاده کنيم و ممکن است اين کار باعث افزايش حجم صفحه يا موجب سختي در نوشتن کد شود. روش دوم تعريف کردن سلکتور input براي عناصر مورد نظر است که به صورت زير انجام مي گيرد:

فرض کنيد مي خواهيم فقط عرض کادرهاي متني را در صفحه تغيير دهيم. در صورتي که در استايل از سلکتور input به تنهايي استفاده کنيم عرض همه چک باکسها ، دکمه ارسال، دکمه هاي راديو و ساير عناصري که از تگ <input> استفاده کرده اند نيز تغيير مي کند. براي انجام اين کار مي توانيد سلکتور را به صورت زير تعريف کنيم:

input[type="text"] {

width: 200px

}

کد استايلي که در بالا نوشتيم فقط بر روي کادر هاي متني که در آنها از شناسه “type=”text استفاده شده است اثر مي گذارد.

البته اين روش ممکن است در مرورگر Internet Explorer پشتيباني نشود اما مرورگرهاي Firefox و Opera از آن پشتيباني مي کنند.

سلکتور id

روش ديگري که براي تعريف استايل وجود دارد استفاده از ID است. شناسه ID احتمالاً در آينده جايگزين شناسه name در تگهاي HTML مي شود, بنا بر اين در هرصفحه نبايد بيش از يک بار از هر ID استفاده شود. اگر بيش از يک بار از يک id استفاده شود کارايي صفحه تغييري نمي کند ولي صفحه اعتبار خود را از دست مي دهد. سلکتور id با علامت # مشخص مي شود. با استايل زير همه عناصر که شناسه “id=”border دارند با کادري سبز رنگ نمايش داده مي شوند

          azita 
            بازدید : 18
          دوشنبه 28 مرداد 1392
           نظرات (0)
        

A few tags are called non-container tags, because they don't contain any content - they stand alone. Examples are images and line breaks. XHTML requires that all open tags must be closed, even if they're not container tags. Therefore, non-container tags end in />. For example, the tag for a line break is <br />.

Tags in HTML are not case sensitive, but in XHTML all tags must be in lower case. Even طراحی وب سایت when coding in HTML, you should get in the habit of writing tags in lower case.

White space is ignored by web browsers. So, if you hit the space bar multiple times within a document, only one of those spaces will actually be displayed by the browser.

Tags can be nested. For example, <em> <strong>this text is italicized and bold</strong> </em>. Note that the order of nested tags is important: The container tags surrounding any content should be symmetrical.

Understanding the following tables:

Common HTML tags are presented below, organized into four tables based on their purpose. The first table includes tags that control the overall structure of the web page. The second and third tables include tags that mark up the majority of web page content. Container tags (those that contain content) are presented in the second table, and non-container tags (those that stand alone) are presented in the third table. The final table contains tags that are used in markup of HTML tables, which are covered in Module 5 of this unit.

Document Structure

Opening Tag

Closing Tag

Description

<html></html>Identifies the document as HTML.

<head></head>Identifies the header section of your document, which is used to provide information about the document for use primarily by search engines and browsers.

<title></title>The title of document. This element must be nested within the head elements.

<body></body>Contains all the visible content of a web page.

Content (Container) Tags

Opening Tag

Closing Tag

Description

<h1> to <h6></h1>to</h6>Headings. H1 is the main heading, H2 is secondary, etc.

<p></p>New paragraph.

<div> or <span></div> or </span>Serve as a container for content.

<em></em>Gives the contained text emphasis (usually as italics).

<strong></strong>Makes the طراحی وب سایت contained text bold.

<a href = "document location"></a>Link to another document.

<a name = "label"></a>Link to another section of the same page.

<ol></ol>Makes ordered lists.

<ul></ul>Makes unordered (or bulleted) lists.

<li></li>Marks items in either the ordered or unordered list.

Empty (Non-Container) Tags

Tag

Description

<br />Causes a line break. It may be repeated for multiple line breaks.

<hr />Horizontal rule. It creates a line to separate content.

<img src ="image location" />Inserts an image into a web page.

<p />The paragraph tag used in this manner serves as a double line break. It does not contain text. Unlike the <br /> tag it cannot be used multiple times to generate more white space.

آغاز فعاليت

          azita 
            بازدید : 8
          چهارشنبه 23 مرداد 1392
           نظرات (0)
        

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

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

پنج بحران براي آزادکاران - webtarget.ir

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

بياييد باهم ? مشکل از اين دست را بر رسي کنيم:

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

بحران شماره يک – عقب ماندن از پيشرفت تکنولوژي

پنج بحران براي آزادکاران - webtarget.ir

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

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

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

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

بحران شماره دو – بيماري و عدم توانايي براي کار

پنج بحران براي آزادکاران - webtarget.ir

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

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

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

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

بحران شماره سه – کارکردن فقط براي پول و فراموش کردن دانش و توانايي هاي فعلي

پنج بحران براي آزادکاران - webtarget.ir

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

همين قدرت انتخاب ميتواند در يک بازه زماني‌ نه چندان بلند بصورت پنهاني براي شما يک بحران ايجاد کند.به گوش باشيد، اگر خود را در گير پروژهاي مختلف و متفاوت نکنيد بزودي آنچه را که مي‌دانيد فراموش مي‌کنيد.

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

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

بحران شماره چهار – درگيري با مسائل شخصي‌ و خانواد‌گي

پنج بحران براي آزادکاران - webtarget.ir

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

توصيه : بهترين راه حل براي جلوگيري از اين بحران تمرين گفتن کلمه نه مي‌باشد. بايد ياد بگيريد به اطرافيانتان به راحتي‌ نه بگوئيد. به نزديکان و اعضائ خانواده توضيح دهيد اگر چه شما در خانه و با لباس راحتي‌ نشسته ايد ولي‌ مشغول کار بوده و نياز به تمرکز و آرامش داريد .

بحران شماره پنج – اتخاذ تصميم‌هاي مالي و تجاري اشتباه

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

تصميم‌هاي که اگر درست نباشند به سادگي‌ شمارا از مسير کسب کارتان منحرف ميکنند.بطور مثال براي يک آزاد کار هيچ چيز بدتر از درگيري براي تسويه حساب کامل يک پروژه نيست.اگر از ابتدا برنامه ريزي مناسب براي تقسيم بندي پولي‌ که از مشتري مي‌گيريد داشته باشيد هيچ وقت درگير اين مشکل به ظاهر کوچک ولي‌ بسيار بزرگ نمي گرديد. ( پيشنهاد من اين است که دريافت پول از مشتري را تقسيم کرده تا جلوي ضرر و زيان احتمالي‌ را بگيريد من معمولا ??% از قرار داد را به عنوان پيش پرداخت ، ??% پس از بار گذاري سايت ، ??% پس از انجام تغييرات و ?? % در مرحله اتمام و آموزش دريافت مي‌کنم )

رنگ ها در طراحی

          azita 
            بازدید : 5
          سه شنبه 15 مرداد 1392
           نظرات (0)
        

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

رنگ ها و احساس ها - webtarget.ir

شما حتما در مورد انتخاب رنگ هاي سرد و گرم براي رنگ ديوار اتاق يا هنگام استفاده از تن سايه هاي سرد و گرم در هنگام گريم چهره، شنيده ايد.

آيا مي دانيد که رنگ ها معناي بيشتريبه همراه دارند؟

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

رنگ هاي گرم و سرد

رنگ ها و احساس ها - webtarget.ir

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

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

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

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

رنگ هاي گرم شادابي و راحتي را القا مي کنند.اين رنگ ها باعث مي شوند فضا کوچکتر به نظر برسدزيرا تن رنگ هاي گرم باعث ايجاد حس راحتي در افراد مي شود. رنگ هاي گرم باعث فعال شدن عکس العمل هاي مغز مي شود و احساس هيجان ، عشق و در بعضي مواقع عصبانيت را القا ميکند.

در فضا هاي خيلي بزرگ استفاده زياد از رنگ هاي گرم باعث ابهت فضا طراحی سایت مي شود و با رنگ هاي خنثي هم تطابق دارد.

رنگ هاي سرد باعث ايجاد اثرات منفعل( غير فعال) در مغز مي شود که باعث ايجاد احساس رضايت، آرامش و عدم فعاليت مي شود.

قرمز

رنگ ها و احساس ها - webtarget.ir

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

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

رنگ ها و احساس ها - webtarget.ir

چکيده خصوصيات رنگ قرمز:

رنگ قرمز روشن براي بيان عشق و لذت.

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

صورتي براي ايجاد فضاي رمانتيک و قابليت هاي زنانه.

قرمز- قهوه اي تغيير و سقوط را القا مي کند.

سبز

رنگ ها و احساس ها - webtarget.ir

رنگ سبز يکي ديگر از رنگ هاي اوليه است .اين رنگ يکي از آرامش بخش ترين رنگ ها است که داراي سايه هاي خنثي است.

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

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

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

چکيده خصوصيات رنگ سبز:

زرد- سبز بيماري و اختلاف را القا مي کند.

سبز تيره جاه طلبي، کاميابيرا القا مي کند.

سبز متمايل به آبي سلامتي و ثبات را القا مي کند.

سبز زيتوني نماد صلح و هارمونيرا القا مي کند.

آبي

رنگ ها و احساس ها - webtarget.ir

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

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

از رنگ هاي تيره تر در چرخه رنگ بيشتر براي وب سايت هاي شرکتي استفاده مي شود

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

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

چکيده خصوصيات رنگ بنفش

بنفش روشن حس لطافت، حس نوستالژي و رومانتيک را القا مي کند.

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

زرد

رنگ ها و احساس ها - webtarget.ir

زرد به راحتي، شادي را القا مي کند. اين رنگ با احساس انرژِي زائي و تشويق در ارتباط است. اين رنگ بسيار مهيج است و به همه چيز حس روشنائي و خورشيدي مي دهد. يکي از معايب استفاده از رنگ زرد انتقال حس خطر است.

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

چکيده خصوصيات رنگ زرد:

رنگ زرد روشن براي القاي حس خطر و ترس است.

رنگ زرد تيره تر براي القاي شادي ، لذت و تازگي است.

نارنجي

رنگ ها و احساس ها - webtarget.ir

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

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

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

زرد- نارنجي يا نارنجي طلايي حس پرستيژ و خرد را القا مي کند.

قرمز – نارنجي حس لذت، انرژي و سلامتي و آرزو را القا مي کند.

نارنجي تيره به معني تغيير و عدم اطمينان است.

قهوه اي و رنگ هاي خنثي

رنگ ها و احساس ها - webtarget.ir

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

رنگ ها و احساس ها - webtarget.ir

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

چکيده خصوصيت رنگ قهوه اي

قهوه اي خيلي کمرنگ براي القاي آرامش، پاکي، ظرافت است.

قهوه اي کمرنگ ( ميانه) خستگي، کسلي و حفاظت را القا مي کند

قهوه اي تيره استحکام، راحتي و تجربه را القا مي کنند.

سياه و سفيد

رنگ ها و احساس ها - webtarget.ir

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

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

رنگ ها و احساس ها - webtarget.ir

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

تبليغات آنلاين

          azita 
            بازدید : 7
          دوشنبه 31 تیر 1392
           نظرات (0)
        

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

طراحی وب سایت

          azita 
            بازدید : 9
          شنبه 22 تیر 1392
           نظرات (0)
        

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

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

design-web-00.jpg

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

طراحی وب سایت

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

نمايش ساختار:

زمانيکه از css براي استايل دهي به سايت هاي خود استفاده مي کنيد براي هر قسمت از سايت خود يک Border در نظر بگيريد به اين ترتيب به خودتان کمک مي کنيد تا به راحتي براي آن قسمت خاص استايل هاي مد نظرتان را بيافزايد وتاثير آن را مشاهده نماييد، تنها بايد به خاطر داشته باشيد که پس از اينکه کارتان با آن قسمت تمام شد(css موقتي)border اي را که افزوده ايد حذف نماييد. بياييد براي خود قسمتي از سايت را ياد آوري کنيم:

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

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

<head>

<title>Contact Us at Bubble Under</title>

</head>

<body>

<h1>BubbleUnder.com</h1>

</div>

<p>Diving club for the south-west UK - let's make a splash!</p>

</div>

</div>

<ul>

<li><a href="http://sana29.rozblog.com/about.html">About Us</a></li>

<li><a href="http://sana29.rozblog.com/contact.html">Contact Us </a></li>

</ul>

</div>

<h2>Contact Us</h2>

<p>To find out more, contact Club Secretary Bob Dobalina on 01793 641207 or email <a

href="http://sana29.rozblog.com/bob@bubbleunder.com">bob@bubbleunder.com</a>.</p>

</div>

</body>

</html>

حالا بياييد به فايل css خود يک borderبه هر يک از عناصر خود در صفحه اضافه کنيم. اين استايل را در انتهاي فايل css خود درج نماييد، بنابراين باعث مي شود تا براي تمامي عناصر سايت خود بردر را بکار ببريد و عنصري از قلم نيفتد و چنانچه عنصري داراي بردر است اين خصيصه برايش تکرار خواهد شد.

#header, #sitebranding, #tagline, #navigation, #bodycontent {

border: 1px solid red;

padding: 2px;

margin-bottom: 2px;

}

design-web-141.jpg

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

موقعيت دهي مطلق( absolute) :

طراحی وب سایت

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

استفاده کردن از موقعيت دهي مطلق به سادگي انجام مي شود تنها کافيست که جهت هاي مد نظر خود را (موقعيت آن عنصر از بالا و چپ) در کنار موقعيت مطلق داده شده به عنصر در فايل css آن اضافه نماييد. در مثال زير، ما موقعيت هاي top و left را براي يک div با عرض 90px در نظر گرفته ايم تا هم از بالا و هم از سمت چپ پنجره مرورگرمان به ميزان px200 فاصله ايجاد کرده ايم.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Absolute Positioning</title>

#redblock {

position: absolute;

top: 200px;

left: 200px;

color: white;

background-color: red;

width: 90px;

height: 90px;

padding: 5px;

}

</style>

</head>

<body>

<h1>Absolute Positioning</h1>

<div id="redblock">This is the red block.</div>

<p>The red block is positioned 200 pixels from the top and 200 pixels from the left.</p>

</body>

</html>

design-web-142.jpg

آماده شدن براي جابجايي عنصر با استفاده از موقعيت دهي:

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

- فايل style. css را باز کردهو پدينگ و بردر داده شده به عناصر Body را پاک کنيد.

- در عوض به جاي آن، دو خصيصه padding و margin را نوشته و مقادير آنها را برابر با صفر قرار دهيد.

استايل هاي بکار برده شده براي عناصر body شما در فايل css مي بايست مانند زير باشد:

body {

background-color: #e2edff;

font-family: Verdana, Helvetica, Arial, sans-serif;

line-height: 125%;

padding: 0;

margin: 0;

}

design-web-143.jpg

تگ هاي سر تيتر درون صفحه يعني BubbleUnder.com و About Us به وسيله مارجين احاطه شده اند. که اين مارجين توسط مرورگر به آنها داده شده حتي اگر ما خودمان به آنها مارجين ندهيم. ايده خوبي است که بياييم و اين مارجين ها را از بين ببريم وسعي کنيم تا تيترها تا آنجايي که امکان دارد به گوشه بالا و سمت چپ div دربرگيرنده آن نزديک شوند. اين امر باعث مي شود تا موقعيت دهي به تيتر ها براي ما راحتتر شده و همچنين مطمئن مي شويم که صفحه وب ما درون تمامي مرورگر ها به صورت يکسان نمايش مي يابد.

- در فايل style.css تگ h1 را بيابيد.

- خصوصيت جديدي به آن اضافه نماييد و مقدار مارجين آن را برابر با صفر قرار دهيد.

h1 {

font-size: x-large;

background-color: navy;

color: white;

padding-top: 2em;

padding-bottom: .2em;

padding-left: .4em;

margin: 0;

}

- tagline p# را نيز درون فايلcss يافته و مقدار مارجين آن را حذف نماييد:

#tagline p {

font-style: italic;

font-family: Georgia, Times, serif;

background-color: #bed8f3;

border-top: 3px solid #7da5d8;

border-bottom: 3px solid #7da5d8;

padding-top: .2em;

padding-bottom: .2em;

padding-left: .8em;

margin: 0;

}

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

design-web-144.jpg

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

#navigation, #bodycontent, #header {

position: absolute;

}

حالا فايل css را ذخيره کرده و مجددا صفحه سايت را refresh نماييد.

• به هيچ وجه از به هم ريختگي سايت خود نگران نشويد !

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

design-web-145.jpg

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

پس بياييد با جابجا کردن محتواي اصلي سايت و منوي راهبري به سمت پايين محتواي تگ Header را ببينيد. در فايل css خود دستور زير را اضافه کنيد:

#navigation, #bodycontent {

top: 120px;

}

اين دستور باعث مي شود تا دو عنصر , #navigation #bodycontent به سمت پايين شيفت يابند. اين تغيير را مي توانيد در تصوير زير ببينيد. حالا موقعيت از top را براي اين دو عنصر تعيين کرديم اما همانطور که در شکل مي بينيد، منوي راهبري و متن درباره ما بر روي هم ديگر افتاده اند پس از سمت چپ به آنها موقعيت (فاصله) مي دهيم تا در کنار يکديگر قرار گيرند. به همين دليل به عنصر bodycontent به اندازه px200 از سمت چپ فاصله مي دهيم تا از منوي راهبري که پهنايي برابر با 180px دارد فاصله گرفته و در کنار آن قرار گيرد.

#header {

position: absolute;

}

#navigation, #bodycontent {

top: 120px;

}

#bodycontent {

left: 200px;

}

design-web-147.jpg

براي اينکه طراحي صفحه سايت ما تمام شود همچنان کمي کار لازم است تا انجام شود:

- محدوده header و tagline تا انتهاي سطر ادامه ندارند.

- بين tagline و h1 فاصله بيهوده اي وجود دارد.

- پدينگ و بردر هاي قرمز داده شده به عناصر را مي بايست حذف کنيم.

- يک يا دو کامنت مي بايست به css مان اضافه کنيم تا توضيح بدهيم که در اين قسمت چه کاري انجام داده ايم.

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

- تگ body و منوي راهبري را از بالا به جاي px120 به ميزان 107px فاصله دهيد . اين کار باعث مي شود تا پس از حذف کردن بردر هاي قرمز فاصله ميان تگ ها مناسب باشد.

- سپس به مرورگر ، تگ headerو tagline بگوييد تا سطر را به طور کامل اشغال کنند.(اين کار با اجراي دستور width براربر با 100% عملي خواهد شد.)

- بردرهاي قرمز رنگي را که پيش تر ايجاد کرده بوديم را حذف مي کنيم.

- در نهايت فکر خوبيست تا براي تمامي عناصري که موقعيت مطلق داده ايم کامنتي براي توضيح بنويسيم تا بدانيد که چکاري انجام داده ايد.

به اين ترتيب آنچه که با توضيحات بالا براي ايجاد تغيير در فايل css خود ايجاد کرده ايم، به صورت زير خواهد بود:

This section deals with the position of items on the screen.

It uses absolute positioning - fixed x and y coordinates measured

from the top-left corner of the browser's content display.

#navigation, #bodycontent, #header {

position: absolute;

}

#navigation, #bodycontent {

top: 107px;

}

#bodycontent

left: 200px;

}

#header {

width: 100%;

}

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

تقريبا مي توان گفت که ظاهر سايت عالي شده است اما يک کار کوچک ديگر نيز مي توان انجام داد تا ديگر طراحي سايت ما عالي به نظر برسد. به تگ Header يک بردر از بالا با ضخامت 3px بدهيد. براي منوي راهبري از همان رنگ آبي اي که براي tagline استفاده کرده ايد و بياييد تا بردر نقطه چين دور منوي راهبري را حذف کنيم. دستورات تغييرات گفته شده نيز بدين صورت خواهد بود:

#navigation {

width: 180px;

background-color: #7da5d8;

}