طراحی وب سایت

ساخت وبلاگ

آخرین مطالب

امکانات وب

جگونه بازديدکنندگان سايت را ترغيب به ارسال نظر بکنیم؟

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

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

برچسب : طراحی وب سایت, طراحی سایت, طراحی وب, نویسنده : nazanin webdesign22 بازدید : 98 تاريخ : چهارشنبه 16 مرداد 1392 ساعت: 13:53

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

 

 
تاريخچه وب و اينترنت در جهان
1958- آيزنهاور رئيس جمهور وقت آمريکا دستور اختصاص رديفي در بودجه نيروي هوايي آمريکا جهت تاسيس ARPA (آژانس تحقيقاتي پيشرفته) را صادر نمود.
1961 - کلينراک پروفسور علوم کامپيوتر در دانشگاه  UCLA، اولين مقاله را تحت عنوان "جريان اطلاعات در شبکه هاي بزرگ ارتباطي"  نوشت.
1962- اولين مقاله در مورد مفهوم اينترنت تحت عنوان ?ارتباط کامپـيوترهاي روي شبـکه? تـوسـط کلارک و ليکلايدر نوشه شد.
1964- باران اولين مقاله را تحت عنوان ?شبکه هاي ارتباطي توزيع شده? نوشت.
1965- آزمايش اولين شبکه ساخته شده بوسيله Larry Roberts در آزمايشگاه ايالتي MIT: دو کامپيوتر با استفاده از تکنولوژي Packet switching با يکديگر ارتباط برقرار کردند.
1966- پروژه ARPA به سرپرستي لاري رابرتز آغاز شد.
1972- اولين برنامه هاي استفاده از e-mail بوسيله راي تاميلسون براي ARPA نوشته شد و علامت @ (at) به معناي ?در?  انتخاب شد.
1974- اولين طراحي هاي پروتکل TCP توسط کرف و کان منتشر گرديد.
1976- ملکه اليزابت دوم يک e-mail فرستاد.
1978-  به TCP و TCP/ IP تقسيم شد.
1979- کميته کنترل پيکره بندي اينترنت (ICCB) را تاسيس نمود.
1980- سيستم هاي ARPANET به دليل وجود يک ويروس در پيام هاي الکترونيکي از کار افتاد.
1982- پروتکل TCP/IP، بعنوان استاندارد مورد استفاده وزارت دفاع آمريکا تعيين شد.
1983- Domain Name System) DNS ) ابداع گريد و پسوندهاي net,.org,.mil,.com,.gov .edu,.int بوجود آمدند.
1985- "Symbolic.com"بعنوان اولين Domain ثبت شد.
1986- 50000 ميزبان در اينترنت حضور دارند. ارتباط e-mail بين آلمان و چين برقرار شد.
1988- گفتگوي مبتني بر اينترنت (IRC ) تعريف و تدوين گرديد.
1989- در اين سال 000 /100 ميزبان در اينترنت قرار دارند.
1990- اولين سرويس تجاري اينترنت از طريق خطوط تلفن راه اندازي شد. شبکه ARPAnet به کار خود خاتمه داد- ?تيم برنرزلي ? سيستم جهاني web) www) را ابداع نمود. سيستم Gopher ارايه شد.

طراحی وب سایت 

1996- نام "TV.com" به مبلغ 000 /15 دلار به CNET فروخته شد. ميکروسافت و نت اسکيپ دو رقيب اصلي در عرصه توليد مرورگر شدند- تلفن اينترنتي جهاني شد- نخست وزير مالزي، ماهاتير محمد به مدت 10 دقيقه از طريق اينترنت با ياسر عرفات و رئيس جمهور فيليپين گفتگو کرد- کليه Domain هايي که بدون پرداخت هزينه قبلا ثبت گرديده بودند، حذف شدند.
1997- نام "business.com" به مبلغ 000 /150 دلار فروخته شد. تعداد نام سايت ها در پايگاه جستجوي whois از مرز 000 /100 گذشت.
1998- 2ميليون نام در Network Soloutions ثبت گرديد- وزارت اقتصاد آمريکا پيشنهاد داد DNS از مالکيت دولتي خـارج شـده و بـه بـخـش خصوصي واگذار شود.
1999- شرکت American On Line) AOL)، نت اسکيپ را خريد- مايکروسافت و نت اسکيپ تقريبا 100% بازار مرورگرها را در اختيار گرفتند- Napster بوجود آمد- بدين ترتيب و با ايجاد امکان Share کردن فايلها، جنگ کپي رايت در جهان موسيقي بالا گرفت- در اين سال برخي شرکتهاي سرويس دهنده اينترنت به کاربري که قرارداد اشتراک طولاني مدت امضا مي کرد، کامپيوتر مجاني هديه مي کردند.
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : nazanin webdesign22 بازدید : 98 تاريخ : يکشنبه 23 تير 1392 ساعت: 13:57

طراحی وب سایت

 

 
با سلام
امروزه بحث وب و صفحات وب شايد بحث روز در علم كامپيوتر باشد با جدي تر شدن مباحث الكترونيكي مانند بانكداري الكترونيكي دانشگاه
الكترونيكي و حتي دولت الكترونيكي اين مبحث روز بروز پيچيده تر مي شود.
در اين ميان مبحث طراحي صفحات وب نيز هر روز گسترده تر مي شود .و شركتهاي گوناگون هم
نرم افزارهاي گوناگوني را براي اين منظور به بازار عرضه كرده اند
طراحان وب باز كرده است
دفاع مي كنند البته بنده قصد نفي Front Page از برنامه Dreamweaver مقايسه اين دو برنامه سر سختانه و بدون تسلط كامل بر جنبه هاي
اين برنامه خوش دست را ندارم منتها عرض ميكنم امكاناتي كه در دريم ويور در اختيار شماست به هيچ وجه قابل مقايسه با برنامه فرونت پيج
نيست حال بنده يك چشم اندازي را پيش روي شما قرار مي دهم تا بهتر بتوانيد قضاوت كنيد و در جوا ب اين دوستان كه علتهاي برتري دريم
ويور را از شما سوال مي كنند دلائل قابل قبولي ارائه كنيد
سالهاست فضاي كد نويسي راحت را فراهم كرده كدهاي توليد شده بر حسب شماره سطر دسته بندي شده اند و به Dreamweaver - ?
از ورژن Front page محض سلكت كردن بخشي در كادر اصلي كدهاي آن بخش هم در قسمت كد به حالت انتخاب در مي آيد ولي برنامه
???? اين امكان را در برنامه گنجانده است
خارجي توليد مي شوند css را داريد اين گونه كدها هم بصورت فايلهايي با پسوند CSS براحتي امكان ايجاد كدهاي Dreamweaver ? – در
و هم بصورت داخلي اما فرونت پيج اين امكان را هنوز ندارد
منطبق بر دو مرورگر اينترنت اكسپلرر و نت اسكيپ توليد مي شود اما فرونت پيج كدها HTML كدهاي توليد شده Dreamweaver ? – در
را منحصرا براي مرورگر خود مايكروسافت توليد ميكند و غالب صفحات توليدي فرونت پيج در مرورگر نت اسكيپ با مشكل نمايش داد ه
ميشود
? – دريم ويور مي تواند در جاهايي كه لازم است كدهاي جاوا اسكريپ را خودكار توليد كند تا پويايي را بين صفحه و كاربر ايجاد كند ( اين
مطلب در قسمتهاي بعدي آموزش عنوان مي شود ) اما فرونت پيج اين امكان را ندارد
? – دريم ويور فضاي بسيار راحتي را براي طراحي لايه هاي گوناگون تدارك ديده اين لايه ها طوري توليد مي شود كه در هردو مرورگر نام
برده براحتي نمايش داده شوند
? – دريم ويور مي تواند دكمه هاي فلش را در خود توليد كند كه جهت زيبايي كار بسيار مفيد هستند اما فرونت پيج اين امكان را ندارد
را عرضه كرده كه مقداري از امكانات اين برنامه در دريم ويور هم گنجانده شده است Flash البته ماكرومديا براي اين كار برنامه پر قدرت
? – مديريت سايت با دريم ويور بسيار راحتتر و ساده تر از فرونت پيج است
توليد كنيد ( البته با محدوديت ) اما فرونت پيج اين امكان را ندارد php را تحت يك فايل PHP ?? - در دريم ويور مي توانيد كدهاي
گنجانده و نه در Visual Studio . NET را داريد اما مايكروسافت اين امكان را در بسته ASP ?? - در دريم ويور امكان توليد كدهاي
فرونت پيج
را داريد اما در فرونت پيج خير Java Script وVB script ?? – در دريم ويور امكان توليد كدهاي
است البته ماكرومديا Online ?? – اما بهترين و شايد مهمتر ين مزيت اين برنامه امكان متصل ساختن صفحات وب توليدي با بانكهاي اطلاعاتي
را عرضه كرده كه مقداري از امكانات آن در اين جا هم گنجانده شده به نظر UltraDev براي اين منظور هم برنامه فوق العاده بي نظير
مي رسد هدف ماكرومديا از گنجاندن مق داري از امكانات ساير برنامه ها يش در اين برنامه ترغيب استفاده كنندگان از استفاده و خريد ساير
هم در همين راستاست اما براي ما كه كپي رايت نداريم ميتوانيم Fireworks محصولات اين شركت است كه استفاده از انيميشن هاي توليدي
از ساير برنامه هاي اين شركت استفاده كرده و كارهاي زيباتري را خلق كنيم
?? – مزيت بعدي اين برنامه استفاده از جدول رنگ مخصوصي كه طراحان در اين برنامه گنجانده اند است بطوري كه اگر شما از رنگهاي
استاندارد برنامه استفاده كنيد مطمئن باشيد صفحه توليدي شما در تمامي سيستم عامل ها و مرورگرها به همين شكلي د يده ميشود كه آن را
طراحي كرده ايد اما فرونت پيج اين طور نيست ممكن است رنگها در سايت شما در مرورگرهاي سيستم عامل ويندوز خوب باشد اما كاربران
سيستم عامل مكينتاش آن را با رنگي متفاوت ببينند
اما يك سري مزيتهاي فرونت پيج نسبت به دريم ويور
كار با صفحات فارسي در فرونت پيج بسيار راحتتر از دريم ويور است
يك سري امكانات ميتوانيد در سايتتان تعبيه كنيد مانند ( Frontpage Exchange ) در فرونت پيج اگر هاستتان آن را پشتيباني كند
شمارشگر بازديد كننده هاي سايت كه در دريم ويور به آن صورت نمي توانيد
خب حالا كه با مزيتهاي اين برنامه آشنا شديد وقت آن رسيده كه به آموزش اين برنامه بپردازيم
اما شيوه آموزش ما به چه صورت است ما آموزشها را برمبناي سطح كاري تعريف كرديم در ابتدا سطح مقدماتي كه در اين سطح شما با شيوه
اصلي طراحي سايت و توليد صفحات وب درون اين سايت آشنا مي شويد در اين سطح شما ميتوانيد يه صفحه ساده طراحي كنيد يعني حاوي
متنها و جدولها و تصاوير گرافيكي باشد
سطح بعدي سطح متوسطه است در اين سطح شما كار با لايه ها و فريم ها و نيز افزورن صدا و فايلهاي مالتي مديا را به همراه تعدادي گزينه
ديگر فرا ميگيريد
 
در شكل ابتدايي آن Java Script و ASP و PHP سطح بعدي سطح حرفه اي است كه شامل كار با ساير گزينه هاي كد بندي برنامه از قبيل
مي شود در اين سطح ما به آموزش اين زبانها نمي پردازيم بلكه روش توليد و كار بر روي گزينه هايي كه برنامه در اختيارمان قرار داده است
متمركز مي شويم شايد در آينده آموزش اين زبانها را هم داشتيم البته اگر درخواست و استقبال باشد
 
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : nazanin webdesign22 بازدید : 84 تاريخ : چهارشنبه 19 تير 1392 ساعت: 14:16

طراحی وب سایت

 

 
کدام يک از کدهاي زير بر روي عناصر تاثير ميگذارند؟
 
وقتي به يک عنصر يکسري خصوصيات نسبت مي دهيم، و در يک استايل دهي گروهي يا در جاي ديگري يکسري خصوصيات ديگر براي آن مي نويسيم، از بين خصوصيات يکسان تمامي آنها به ارث برده ميشود و از بين ساير خصوصيات آن ويژگي هايي به ارث مي روند که نسبت به ساير دستورات ديرتر و يا به عبارتي بعد تر نوشته شده اند و در صفحه استايل دهي پايين تر قرار گرفته اند. با هم به بررسي مثال زير مي پردازيم :
 
 
    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;
    }
 
 
design-web-114.jpg
 
  عکس بالا کليه حالت هاي مختلف لينک ها را نشان مي دهد و حالت hover آن لينک تماس با ما  (contact us) است. تمامي رنگ هاي پيش زمينه و ساير رنگ هاي ديگر را مي توانيد با css  ايجاد کنيد و مي توانيد افکت هاي بسيار جذابي مانند آن چيزي که در بخش فوتر سايت وب اسکالا مشاهده نماييد ايجاد کنيد.
 
پاک کردن پيشينه مرورگر:
 
مرورگرها به صورت پيش فرض مقداري از پيشينه صفحات وب سايت را در خود ذخيره مي کنند و از اين اطلاعات استفاده مي کنند که بدانند آيا لينکي بازديد شده است يا نه، اما اين کار براي زمانيکه طراح وب سايت در حال تست کردن صفحه سايتي است کمي مشکل ساز مي شود به خصوص وقتي که طراح مي خواهد لينکي که بازديد نشده است را استايل بدهد، اما چون صفحه سايت را چندين بار refresh  کرده مرورگر وي به اصطلاح cache  کرده و به همين دليل لينک هاي بازديد نشده را بازديد شده مي پندارد که به همين دليل مي بايست cache يا اطلاعات ذخيده شده را پاک کرد. براي اين منظور به اين صورت عمل مي کنيم:
در مرورگر اينترنت اکسپلورر : تب  tools راانتخاب کرده، inteet option  را کليک مي کنيد، زير browser history دکمه delete  را بزنيد، در پنجره باز شده check box مربوط به history  را فعال کنيد، انتخاب ساير گرينه ها با توجه به نظر خودتان مي تواند صورت گيرد. در نهايت دکمه delete  را زده و پنجره inteet option را ok ميکنيم تا بسته شود و cache مرورگرمان پاک شود.
 
design-web-113.jpg
 
ساير مرورگرها نيز روشي مشابه دارند که آدرس دسترسي به 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 نسبت دهيم:
 
    <p class="fun">
    A man walks into a bar; you would've thought he'd see it coming!
    </p>
 
 
حال در نظربگيريد تگ  <blockquote>درون صفحه html تان وجود دارد و درون اين تگ ميخواهيد يک پاراگراف قرار دهيد که کلاس fun داشته باشد ، همانند کد زير:
 
    <blockquote>
    <p class="fun">
        Happiness is a dip in the ocean followed by a
        int or two of Old Speckled Hen. You can quote me on that!"
    </p>
    </blockquote>
 
 
به نظر شما اگر بخواهيد چند پاراگراف درون اين تگ قراردهيد چه کارميتوان کرد؟ ميتوان راه حل زير را اعمال کرد:
 
    <blockquote>
    <p 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! </p>
    <p class="fun">"Join us for a weekend away at some of our favorite dive spots and you'll soon be making new friends. </p>
    <p class="fun">"Anyway, about time I got on with some <em>proper</em> work!" </p>
    </blockquote>
 
 
اما همانطور که مي بينيد تکرار نام کلاس در تگها ي بالا زياد صورت گرفته ، پس به جاي استفاده از روش بالا ميتوان روش بهتري را به کار برد   :
 
    <blockquote class="fun">
    <p Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that! </p>
    <p>"Join us for a weekend away at some of our favorite dive spots and you'll soon be making new friends. </p>
    <p>"Anyway, about time I got on with some <em>proper</em> work!" </p>
    </blockquote>
 
 
ID & CLASS
 
ياد گرفتيد که چگونه ميتوان از ID  و کلاس براي تگهاي موجود در HTML خود استفاده نماييد ، به عنوان مثال براي کلاس از نماد "." قبل از نام کلاس در نظر گرفته شده در فايل سي اس اس استفاده مي کنيم و براي ID از نماد "#" .
نکته از مترجم : دقت نماييد براي استايل دهي هم از کلاس استفاه ميشود و هم از ID. اما تفاوت هايي هم در استفاده دارد وآن اينکه از ID  براي استايل دهي و مشخص کردن عناصر اصلي صفحه مانند هدر  فوتر و منو و غيره استفاده ميکنيم و يا براي استفاده در موارد برنامه نويسي .
تنها نکته در اين باره اين است که در يک صفحه HTML از نام يک ID  فقط مي شود يکبار استفاده نمود اما از نام يک کلاس مي توان به هر تعداد استفاده کرد.
 
بدين ترتيب چنانچه کلاس fun درون تگ  blockquote قرار گيرد خصوصيت italic  را نيز مي خواند ، اما اگر به ساير تگ هايي که مي خواهيم تنها کلاس fun را بخوانند تگ blockquote را قرار ندهيم خصيصه italic  شدن فونت اعمال نمي شود.
 
براي روشن تر شدن اين موضوع مثال ديگري مي زنم:
فرض کنيد مي خواهيم تمامي متون قرار گرفته درون تگ  p صفحه مان به رنگ آبي نفتي درآيند بنابراين کافيست که در CSS بنويسيم :
 
    p {
    color: navy;
    }
 
 
اما حالا اگر بخواهيم يکي از متون قرار گرفته درون تگ p مان به رنگ ديگري درآيد کافيست ، به اين تگ p يه کلاس بدهيم و سپس به آن کلاس رنگ مورد نظرمان را نسبت دهيم:
 
    .p.gre {
    color: green;
    }
 
 
استايل دهي قسمتي از متن با استفاده از span  :
 
فرض کنيد که چنين متني داريد:
 
    <p>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.</p>
 
 
و مي خواهيد دو کلمه اول اين متن يعني Bubble Underis  به صورت bold  (پر رنگ) نمايش داده شود. براي اين کار براي اين کلمات يک تگ span به کار مي بريم و سپس به اين span استايل ديگري را اعمال مي کنيم و آن را آبي رنگ مي کنيم:
 
    <p><span class=" blue ">Bubble Under</span> is 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.</p>
    .blue
    {
    Color: # a3c2fa;
    }
 
 
استايل دهي عناصر با استفاده از css
 
 طي سالهاي گذشته توسعه دهندگان وب سايت با استفاده  از css تنها مي توانستند به متون موجود در سايت استايل بدهند و در پاره اي از مواقع رنگي را به متني اختصاص مي دادند، اين تنها کاري بود که مي شد با استفاده ازcss انجام داد چون در آن زمان مرورگر ها بسيار ضعيف بود و نمي توانستند خصوصيات بيشتري از css  را پشتيباني کنند. اما با گذشت زمان اين امر ميسر شد و مرورگر ها پيشرفت کردند.
در اين فصل به بررسي زواياي ديگري از css مي پردازيم و امکانات بيشتري از آن را معرفي مي کنيم. از جمله:
تغيير ظاهر و اندازه فضاي مشخصي از وب سايت
تغيير پس زمينه و کناره هاي اشکال
موقعيت عناصر در هر جاي صفحه وب سايت
 
قبل از شروع کار، ابتدا براي ايجاد تغيير در ظاهر و اندازه عناصر در وب سايت مي بايست با مفهوم block-level elements  و inline elements آشنا شويد.
 
block-level elements  و inline elements
 
block-level elements:  به عناصر يا تگ هايي مي گوييم که توسط آن مي توان کل سطر يا فضايي که آن عنصر در اختيار خود دارد را  مسدود يا به اصطلاح block کرد، هر عنصر block  مي تواند درون خود عنصر و يا عناصر inline و يا block  را جاي دهد.
 
inline elements : به عناصر يا تگ هايي مي گويند که آنها تنها مي توانند به اندازه متني که درون آن جاي گرفته قسمتي از سطر را اشغال نمايند، اين عناصر خطي يا به اصطلاح inline ناميده مي شوند، توجه داشته باشيد که درون تگ هاي inline تنها عنصر Inline جاي ميگيرد.
نحوه تشخيص عناصر  inline  بدين صورت است که اگر عنصري دوم در کنار عنصر اول در امتداد يک خط قرار گيرند عنصر اول قطعا inline است، اما اگر عنصر اول  block باشد عنصر دوم در بالا يا پايين عنصر اول قرار خواهد گرفت و نه در امتداد عنصر اول.
 
در اينجا چند عنصر block را معرفي مي کنيم:
 
تگ هاي h1, h2,...و h6
P
div
Blockquote
Ul  و  ol
Form
 
وقتي که شما يک پاراگراف ايجاد مي کنيد، نيازي نيست که بعد از پايان پاراگراف اول با استفاده از <br /> به خط بعد برويد تنها کافيست يک تگ<p> را باز کرده متن خود را بنويسيد و سپس آن تگ را ببنديد.</p>
بذين ترتيب چون تگ p بلاک است خود به خود متني که در تگ دوم P  قرار مي گيرد از ابتداي سطر بعد شروع مي شود.
 
design-web-111.jpg
و خروجي آن را بدين صورت خواهيم داشت:
 
 design-web-116.jpg
 
ادامه دارد اگر مورد استقبال قرار گيرد!
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : nazanin webdesign22 بازدید : 88 تاريخ : يکشنبه 16 تير 1392 ساعت: 12:24

قرار دادن تصویر در زمینه صفحه

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

برای قرار دادن یک تصویر به عنوان زمینه صفحه باید از تگ BODY استفاده کرد.وقتی که تگ BODY را پیدا کردید ممکن است به صورت ساده باشد یا با فرمانهایی که به آن اضافه شده است. مانند زیر:

 

<body bgcolor="#66ccff" text="#000000">

کاری که شما باید انجام دهید، اضافه کردن یک شناسه به تگ BODY است. بنابراین یک فاصله بعد از آخرین فرمان بگذارید و سپس این فرمان را وارد کنید:

  طراحی وب سایت

background=" "

اکنون تگ BODY شما باید به این صورت باشد (اگر فرمانهای دیگری به آن اضافه نکرده باشید):

 

<body background=" ">

حالا باید آدرس عکس را بین دو دابل کوت قرار دهیم. برای این کار دو راه وجود دارد:

 

برای این کار اگر صفحه و عکس در یک مسیر هستند می توانیم فقط نام کامل عکس با پسوند آنرا بنویسیم. مثلاً:

<body background="image.gif">

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

<body background="http://www.example.com/image.gif">

تصاویر برای زمینه باید با یکی از دو فرمت GIF یا JPG باشند. اگر عکس به این صورت نبود باید آن را با برنامه ای مثل Paint Shop Pro یا Photoshop به یکی از این فرمتها تبدیل کرد.

 

  طراحی وب سایت

برای مثال فرض کنید یک عکس با نام background.jpg داریم که در این مسیر قرار دارد: http://www.mysite.com/img . حال اگر بخواهیم صفحه ای را در پوشه ای به غیر از پوشه img در این سایت طراحی کنیم باید از آدرس کامل عکس یعنی http:www.mysite.com/img/background.jpg استفاده کنیم. و تگ BODY ما به این صورت در می آید:

 

<body background="http:www.mysite.com/img/background.jpg">

ما برای تعیین تصویر زمینه این صفحه قبلاً از این تگ استفاده می کرده ایم:

 

<body background="http://www.neopersia.org/images/index.jpg">

اما اگر بخواهیم صفحه را به پوشه img منتقل کرده یا صفحه جدیدی را در پوشه img طراحی وب سایت کنیم می توانیم از نام عکس یعنی: background.jpg استفاده کنیم و تگ BODY ما به این صورت در می آید:

 

<body background="background.jpg">

 

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

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : nazanin webdesign22 بازدید : 109 تاريخ : چهارشنبه 29 خرداد 1392 ساعت: 14:17

آنچه که قبل از یادگیری HTML لازم است بدانید

 

شما به یک ویرایشگر متن نیاز دارید. در ویندوز شما می توانید از برنامه Notepad استفاده کنید. از هر نرم افزار ویرایش متن دیگری استفاده کنید اما این نکته را در نظر داشته باشید که نرم افزار WordPad که در ویندوز وجود دارد و نرم افزارهایی مانند Microsoft Office Word و امثال آن برای نوشتن کدهای HTML مناسب نیستند چون در هنگام ذخیره کردن متن این نرم افزارها کدهایی طراحی وب سایت را به آن اضافه می کنند.

نرم افزار Notepad را می توانید از طریق منوی استارت در قسمت Accessories پیدا کنید یا از طریق فرمان Run با تایپ notepad در کادر Open و فشار دادن دکمه Enter.

شما به یک مرورگر طراحی وب سایت به انتخاب خود نیاز دارید. می توانید از Microsoft Inteet Explorer استفاده کنید که با ویندوز نصب می شود یا از Opera, Mozilla Firefox و نرم افزارهای مشابه که اغلب به صورت رایگان برای دانلود در اینترنت وجود دارند.

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

شما به جایی برای ذخیره کردن متن خود دارید که می تواند جایی روی هارد دیسک شما، یک فلاپی دیسک یا یک سرور باشد. البته شما برای استفاده از HTML نیاز ندارید حتماً به اینترنت متصل باشید، شما می توانید با استفاده از یک مرورگر وب در کامپیوتر خود از HTML استفاده کنید.

طراحی وب سایت

برای ذخیره کردن فایلی که با Notepad نوشته اید کافی است از منوی File گزینه Save As را انتخاب کرده و مسیری را برای ذخیره فایل انتخاب کنید و در کادر File Name در پایین پنجره Save As نام فایل را با پسوند html بنویسید. در آخر هم دکمه Save را کلیک کنید.

 

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

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : nazanin webdesign22 بازدید : 92 تاريخ : چهارشنبه 29 خرداد 1392 ساعت: 14:13

اساس آموزش طراحي وب سايت

مقدمه

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

نيازمنديها

1- نرم افزار و محيط طراحي وب سايت : پياده سازي و اجراي وب سايت با برنامه ساده notepad قابل انجام است. برخي نرم افزارهاي ديگر مانند مايکروسافت FrontPage نيز وجود دارند که اصلاً توصيه نمي شود. من به شما برنامه ماکرومديا DreamWeaver را پيشنهاد مي کنم که مي توانيد آنرا از اين لينک دانلود کنيد. البته اکنون شرکت ماکرومديا توسط شرکت Adobe خريداري شده و ممکن است لينک مربوط تغيير کرده باشد.

 

2- آشنائي کار با گرافيک: درک صحيح از فايلهاي صوتي، تصويري و عکس در طراحي بنرها و انواع افزونه هاي تصويري يا صوتي بسيار الزامي است. برنامه Adobe Photoshop و Xara 3d پيشنهاد من هستند. در ضمن حتما" در بخش آشنائي با فرمت فايلهاي صوتي، تصويري و عکس را مطالعه کنيد.

 

3- مرورگر يا Browser :  نرم افزاري است که توسط آن صفحات وب به اجرا در مي آيند. Inteet Explorer  و mozilla firefox از مهمترين مرورگرها هستند. در سيستم عامل هاي Apple mackintosh از مرورگر Netscape استفاده مي شود که در ايران کاربردي ندارد. همچنين Google croom, Safari  و Opera نيز از ديگر مرورگرهاي موجود هستند.

 

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

 

 

 

اين پوشه که با حذف آن صفحه اينترنتي نيز حذف خواهد شد ما را به مفهوم url مطلق و نسبي مي رساند. ما به عنوان يک کاربر به هنگام بازديد از يک سايت به url آن سايت رجوع مي کنيم. url يعني Uniform Resource Locator که يک آدرس منحصر به فرد است. براي نمونه شما وقتي به وب سايت من سر مي زنيد به url من يعني http://www.parsmodir.com رجوع مي کنيد اما من به آدرس فايلهاي خودم با استفاده از پرتکل ftp به جاي http مي کنم. پس شما هنگاميکه يک طراحي وب سايت هستيد با آدرس فايلها سر و کار داريد نه آدرس هاي اينترنتي.

 

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

 

براي شروع يک پوشه درست کنيد. اين پوشه فضاي اينترنت است و با بيرون آن هيچ کاري نداريد. صفحه اصلي يا home Page سايت خود را با نامي مانند index.htm در اين پوشه ايجاد خواهيد کرد. در اين پوشه ساير پوشه هاي اصلي سايت خود را ايجاد کنيد. براي مثال يک پوشه براي عکس، يک پوشه براي فايلهاي css و يک پوشه براي صفحات فرعي سايت. به نمونه زير توجه کنيد:

 

طراحي وب سايت

براي نمونه تصاويري که مي خواهيد در سايت خود استفاده کنيد را در پوشه img ذخيره کنيد. حال فرض کنيد يک عکس با نام Rose.gif در پوشه img ذخيره کرده ام. شما اين فايل را با آدرس www.parsmodir.com/img/rose.gif خواهيد ديد ولي من آنرا به صورت "img/rose.gif" مي شناسم. طراحي وب سايت از آدرس مختصر نسبي استفاده مي کند. بنابراين حالا فايلها و پوشه هاي لازم را ايجاد کنيد و سپس با يکديگر نحوه طراحي صفحه index.htm را آغاز خواهيم کرد.

 

شروع طراحي وب سايت

آشنائي با برچسب ها

 

1. برچسب html : زبان HTML زبان برچسب ها يا Tag ها است. هميشه يک سايت با برچسب html به صورت زير شروع و تمام مي شود.

 

< html > کدهاي طراحي سايت </ html >

 

2. برچسب head : اين برچسب بعد از < html >  مي آيد. کدهاي اين قسمت توسط مرورگر مشاهده شده اما از ديد کاربر پنهان هستند. بيشتر موتورهاي جستجو مانند گوگل ابتدا اين کدها را بررسي مي کنند.

 

3. بر چسب body : اين برچسب پس از پايان کدهاي head قرار گرفته و بدنه سايت را مي سازد. کدهاي قابل رويت در اين بخش قرار مي گيرند.

 

تمرين اول:  در برنامه notepad  کدهاي زير را بنويسيد:

 

<html > <head> </head> <body> My simple sample </body> </html>

 

صفحه را با نام index.htm ذخيره کنيد. دقت کنيد در برنامه notepad حتما در قسمت save as type گزينه all files را انتخاب کنيد تا پسوند txt خوبخود به انتهاي نام فايل شما اضافه نشود. حال برنامه ذخيره شده را که آيکوني مانند زير دارد را باز کنيد. اين اولين تجربه شما در طراحي وب سايت را تبريک مي گويم. اگر از اينترنت اکسپلورر استفاده کنيد يا از فايرفکس با يکي از دو آيکون زير مواجه خواهيد شد.

 

inteetfirefox

 

4. برچسب title : اين برچسب در بخش head  قرار مي گيرد و عنوان صفحه روي مروگر يا نوار ابزار را مشخص مي سازد.

 

<title> Parsmodir </title>

 

با قرار دادن کدهاي زير در بين برچسب هاي head و نمايش صفحه با مرورگر در نوار ابزار ويندوز و نوار عنوان خود صفحه نام Parsmodir را خواهيد ديد.

 

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

 

ويژگيها و ارزش ها

 

هر برچسب يک سري ويژگي يا attribute دارد که براساس مقداري که به آن داده مي شود قابل دستکاري است. براي نمونه کد زير باعث مي شود پس زمينه به رنگ آبي تغيير کند:

 

<body bgcolor="#0000FF">

 

ارزش ها هميشه درون يک زوج گيومه قرار مي گيرند.

 

فارسي کردن صفحه

 

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

 

<meta http-equiv=Content-Type content="text/html; charset=utf-8">

 

- اگر براي کدنويسي از notepad استفاده مي کنيد به هنگام ذخيره يک صفحه فارسي در منوي encoding يکي از گزينه هاي UTF-8 يا Unicode را انتخاب کنيد. مشاهده تصوير

 

- در برنامه Dreamweaver نيز از منوي modify گزينه page properties را انتخاب کنيد. در کادر ظاهر شده از قسمت encoding يکي از گزينه هاي UTF-8 يا Unicode را انتخاب کنيد. مشاهده تصوير

 

در يک صفحه فارسي اگر از عبارتهاي لاتين نيز استفاده کنيد همه چيز بهم خواهد ريخت. براي رفع اين مشکل از ويژگي dir به صورت زير استفاده کنيد:

 

<body dir="rtl">

 

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

 

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

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : nazanin webdesign22 بازدید : 81 تاريخ : چهارشنبه 22 خرداد 1392 ساعت: 16:15

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه