طراحی وب سایت

ساخت وبلاگ

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

Background-color و گزينش گر متني و سبک دهي گروهي صحبت خواهم کرد .
 
تا اينجاي کار به چند مثال ساده اما کاربردي  با CSS  براي استفاده در وب سايت نگاهي انداختيم. براي استايل دهي خصوصيات بسيار زيادي وجود دارد که البته طراحی وب سایت  من قصد دارم آنها را اينجا ليست کنم
 
Color
همانطور که قبلا هم ديديد براي رنگ دادن به عناصر استفاده مي شود.
 
Background-color
به دو صورت مقدار دهي مي شود يا نام رنگ (blue, red, green,..)  يا با اعداد دسيمال،  مانند: #3acbef
 
Font-family
با اين خصيصه هر فونتي را که بخواهيد مي توانيد به متون سايت خود اعمال کنيد، 
Font-size
مقدار دهي آن مي تواند مثل يکي از گزينه هاي زير باشد:
1-    نام هاي آماده براي سايز دادن به فونت ؛
 
•    X-small   
•    Small       
•    Large       
•    Xx-large  
 
2-    فونت دهي به صورت نسبي؛
 
•    به صورت درصدي : %120
•     به صورت  1.2em     : em
 
3-    فونت دهي به صورت مطلق؛
 
•    به صورت pixel  ، مانند:  px12
•    به صورت  point، مانند:  pt12
 
 
قطعاً زمانيکه بخواهيم اين امکان را به خوانندگان مطالب وب سايتمان بدهيم که با تغيير سايز صفحه مرورگر خود ( مثلا سايز %150 به جاي %100) بتوانند سايز فونت متناسب با آن را ببينند فونت دهي به صورت نسبي را مد نظرمان قرار مي دهيم.
 براي مطالعه بيشتر، اين مقاله را مطالعه نماييد.
 
Font-weight
ضخامت فونت است که به دو صورت normal  يا  bold مقدار دهي مي شود.
 
Font-style
سبک فونت است که به دو صورت normal   يا  italic مقدار دهي مي شود.
 
Text-decoration
مدل دهي به متن به صورت: none, underline, overline  و يا line-through  است.
 
 سپس با استايل هاي مختلفي که در بالا ياد گرفتيد استايل هاي مختلفي را بسازيد.
تمامي موارد بالا را مي بايست در مرورگر خود تست کنيد تا با آنها آشنا شويد ولي حالا بيائيد استايل دهي بيشتري برروي عناصر موجود در سايتمان اعمال کنيم.
 
-    ابتدا فايل about.html  را باز کنيد (در تمرين هاي قبلي ساخته شده است)
 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>About Bubble Under: who we are, what this site is
    for</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
    <div id="header">
    <div id="sitebranding">
    <h1>BubbleUnder.com</h1>
    </div>
    splash!</p>
    </div>
    </div> <!-- end of header div -->
    <div id="bodycontent">
    <h2>About Us</h2>
    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
    <p>Although we're based in the south-west, we don't stay on
    our own turf: past diving weekends away have included
    trips up to Scapa Flow in Scotland and to Malta's
    numerous wreck sites.</p>
    <p>When we're not diving, we often meet up in a local pub
    to talk about our recent adventures (any excuse,
    eh?).</p>
    </div> <!-- end of bodycontent div -->
 
  پاراگراف زير را پيدا کرده و تگ  em را که جهت نمايش بيشتر يا به عبارتي تاکيد بهتر بر روي آن کلمه بکار رفته است را اضافه کنيد.
 
    <p>And when we're not diving, we often meet up in a local pub
    to talk about our recent adventures (<em>any</em> excuse,
    eh?).</p>
 
design-web-101.jpg
-    حالا فايل css خود را باز کرده و استايل زير را به آن اضافه نماييد.
 
    em {
                     Font-style: normal;
            Text-transform:uppercase;  
    {
 
 
حالا فايل css را ذخيره کرده، سپس صفحه نمايش خود را refresh  نماييد، تصويري که مشاهده مي کنيد مي بايست مشابه عکس زير باشد.
 
design-web-102.jpg
 
مشابه اين مثال را مي توانيد در منوي سمت راست  خدمات طراحي سايت وبسکالا مشاهده کنيد. اگر از تگ em  در متون انگليسي استفاده نماييم استايل آن به صورت پيش فرض italic خواهد بود، (مانند مثال زير) که اگر بخواهيد استايل آم متن هم مانند ساير متون در آم پاراگراف باشد به آن استايل normal  مي دهيم و اگر بخواهيم با حروف بزرگ ( به جز زبان فارسي )نمايش يابد از uppercase  استفاده مي کنيم.
 
     
نکته :
برخي از تگ هاي و عناصر HTML هستند که به مرور زمان با تگهاي ديگري جايگزين مي شوند و از استفاده از آنها صرف نظر مي گردد، به عنوان مثال تا چند وقت پيش تگي که براي bold کردن يا ضخيم کردن متون يه کار مي رفت <b>  بود که به جاي آن هم اکنون از تگ strong  استفاده مي شود. اهميت اين موضوع زماني است که افراد نابينا براي کار با وب سايت ها از نرم افزارهايي استفاده ميکنند که بجاي نمايش صفحات وب آن را براي کاربر خود مي خوانند که به اصطلاح به آن ها screen reader  مي گويند.در اينجاست که آنها در هنگام خوانندن مطلب متني را که با تگ em  مشخص شده است را مهمتر ميدانند  تا متني را که درون تگ i قرار گرفته همچنين موتورهاي جستجو در گوگل به متني که با تگ strong  ضخيم شده است بيشتر توجه ميکنند و به عنوان متن مهمي که در يک متن استفاده شده است مي نگرند تا به متني که با تگ b ضخيم شده باشد.
 
    Body{
         Font-family:  verdana, Helvetica, Arial, San-serif;
    }
    P{
        Font-size: small;
    Color: navy;
    }
 
 
خط بالا به ما ميگه که هر تگ p  که در صفحه بود استايل بالا را بگيرد.
اما دليل ما از به کاربردن اين مثال براي اين است که مي خواهيم پاراگرافي را متمايز از ساير متون وب سايتمان کنيم و آن اولين پاراگراف متن ما است. حالا براي متمايز کردن اين پاراگراف براي آن به صورت زير عمل مي کنيم:
 
    <div id="tagline">
    <p>Diving club for the south-west UK - let's make a splash! </p>
    < /div>
 
 
متن درون اين تگ از خصوصيات گرفته شده ساير متون پيروي نمي کند و در عوض خصوصيت مربوط به div خود را مي گيرد که شامل خصيصه خاصي است که با id اي به نام tagline تعريف شده است که اين خصوصيت تنها به براي همين تگ خواهد بود. حالا براي تعريف درون فايل css براي آن خصوصيات زير را تعريف مي کنيم:
 
    #tagline p {
                 Font-style:  italic;
    Font-family:  Georgia, Times, Serif;
    }
 
 
فايل css  را ذخيره کرده و سپس پنجره مرورگرتان را refresh  کنيد . صفحه شما نيز مي بايست مانند عکس زير باشد.
 
design-web-103.jpg
 
براي هر متني که درون تگ p  قرار گرفته باشد و id  آن tagline  باشد، نوع فونت آن italic  و از نوع Georgia  يا Times و يا Serif خواهد بود.
يعني هر تگ p   که داخل آي دي tagline  قرار گرفته است  و نه p هاي ديگر .
علامت # در CSS به عنصري اشاره مي کند که  طراحی وب سایت  شامل يک  Id خاص با خصوصيات مربوط به خود است. در مورد  Id در قسمت هاي جلوتر به طور کامل خواهيم پرداخت.
 
گزينشگر متني
#tagline p يک گزينشگر متني است، در اينجا چند مثال ديگر برايتان مطرح مي کنم.
 
    Navigation a{#
        Text-decoration: none;    
    }
 
 
براي هر تگ a اي که درون تگي با  navigation  =id است، آن لينک فاقد زير خط در هنگام کليک کردن آن لينک خواهد بود.
 
درون تگي که id  footer  دارد، تمامي متون داراي %150 فاصله ميان خطوط خواهند بود.
 
    h1  strong {
    color: red;
    }
 
 
هر  تگ strong  ي که درون تگ  h1 قرار گيرد رنگ آن قرمز خواهد بود.
 
سبک دهي گروهي
گاهي اوقات مي بينيد که در هنگام استايل دهي يکسري از تگ ها هستند که خصوصيات يکساني دارند اما در فايل CSS براي هر يک از آنها کلاس و يا تگ جداگانه اي در نظر گرفته شده مثلا:
 
    h1 {
     color: yellow;
     background-color: black;
    }
    h2 {
     color: yellow;
     background-color: black;
    }
    h3 {
     color: yellow;
     background-color: black;
    }
 
    h1, h2, h3 {
     color: yellow;
     background-color: black;
    }
 
 
توجه داشته باشيد که براي جداکردن تگ ها از همديگر از کاراکتر ( ,)    کاما ، استفاده کرديم که اين علامت را مي توانيد به معناي يا تعبير کنيد.
حالا بياييد تا در پروژه مان دسته بندي کردن عناصر را انجام دهيم. ما در پروژه مان هنوز از تگ h3 استفاده نکرده ايم اما به زودي اين کار را خواهيم کرد.
فايل css تان را با اضافه کردن css زير به انتهاي آن ويرايش کنيد.
 
    h1, h2, h3 {
     font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
     color: white;
    }
 
 
حالا فايل css را ذخيره کرده و پنجره مرورگر خود را ويرايش نماييد تا تصويري چون عکس زير را ببينيد.
 
design-web-104.jpg
 
يک سوال ؟
به مثال زير دقت کنيد
 
    h1, h2, h3 {
     font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
     background-color: navy;
     color: white;
    }
    h3 {
    color: red;
    }
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت, طراحی سایت, طراحی وب, نویسنده : zahra webdesign23 بازدید : 302 تاريخ : دوشنبه 21 مرداد 1392 ساعت: 16:52

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

 
 
براي اضافه کردن يک صفحه به برگه هاي سايت وردپرس، دو راه پيش رو داريد. اول اين که از صفحه مديريت هم? برگه ها، روي دکمه “افزودن برگه” کليک کنيد. يا اينکه از هر جاي پيشخوان وردپرس که باشيد از فهرست سمت راست به اين مسير برويد: برگه ها > افزودن برگه
 
صفحه افزودن برگه جديد در وردپرس
افزودن برگه جديد در وردپرس
عمده کاري که بايد انجام دهيد اين است که يک عنوان براي صفحه و همچنين محتويات آن را وارد کنيد. مثلاً اگر يک صفحه براي توضيحات در مورد خودتان مي خواهيد بسازيد، بهتر است نام صفحه را “درباره ما” و در بخش ويرايش، توضيحات خود را بنويسيد و عکس و ديگر محتويات صفحه را وارد کنيد، و در آخر بروي دکمه “انتشار” کليک کنيد. البته گزينه هاي ديگري در اين صفحه براي پر کردن وجود دارد که به آنها هم اشاره خواهم کرد. در مورد نحوه ويرايش نوشته ها و دکمه هاي افزودن پرونده چندرسانه اي در نوشته “ويرايش متن نوشته وردپرس” توضيحات کامل داده شده است.
 
علاوه بر انتشار يک برگه، مي توانيد آن را به صورت پيش نويس درآوريد. براي اينکار در عوض اينکه بروي انتشار کليک کنيد، بايد بروي “ذخيره پيش نويس” کليک کنيد. و از طريق همين جعبه انتشار مي توان، تاريخ انتشار نوشته را براي زمان آينده تنظيم نمود، تا سر موعد مقرر برگه شما منتشر شود. حتي مي توانيد بروي برگه رمز بگذاريد که فقط بازديدکنندگاني که داراي رمزعبور هستند بتوانند برگه را روءيت کنند.
 
در جعبه صفات برگه دو ويژگي را مي توانيد براي برگه خود تعيين کنيد. برگه ها را مي توانيد به صورت سلسله مراتبي بسازيد. يعني يک برگه زير مجموعه يک برگه ديگر باشد. درست مثل دسته بندي نوشته هاي سايت. براي اينکار از فهرست پايين افتادني مادر، برگه مادر يا والد را انتخاب کنيد. در جعبه چيدمان هم شما بايد ترتيب برگه ها را با استفاده از شماره تعيين کنيد، که کدام يک اول و کداميک آخرين برگه باشد.
 
 
تا اينجا تقريباً به تمام نکاتي که بايد در هنگام ساخت يک صفحه مد نظر قرار دهيد اشاره کرديم. ولي خود صفحه افزودن برگه وردپرس، داراي تنظيماتي است که از بالا سمت چپ از زبانه تنظيمات قابل دسترس است. بروي اين زبانه کليک کنيد تا يک بخش براي شما باز شود. از اين بخش شما قادريد جعبه هايي از صفحه را ظاهر يا پنهان کنيد، که معمولاً چهار گزينه آخري غير فعال است. مثلاً براي وارد کردن يک زمينه دلخواه اول بايد از اينجا آن را فعال کنيد و سپس در جعبه اي که به همين نام برايتان باز مي شود، زمينه دلخواه خود را تنظيم کنيد. يا براي گفتگو، نامک و نام نويسنده هم همين کار را انجام دهيد.
 
در افزودن برگه دقت کنيد که برگه هاي واجب را به وردپرس اضافه کنيد و از زياده روي در اين کار بپرهيزيد.
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت, طراحی سایت, طراحی وب, نویسنده : zahra webdesign23 بازدید : 222 تاريخ : چهارشنبه 16 مرداد 1392 ساعت: 13:57

 پيدايش اينترنت و زبان کدنويسي HTML

اگر به چند دهه قبل بازگرديم تقريبا هيچ کس نميدانست که اينترنت و کدنويسي وب چيست ولي امروزه به يکي از مهمترين بخش هاي زندگي بشر تبديل شده است.
اينترنت ديگر تنها مکاني براي يافتن يک رستوران خوب يا لوله کش نيست، بلکه به فضايي گسترده و مناسب جهت کار و کسب درآمد تبديل گشته است. با طراحي و کدنويسي يک سايت زيبا و ارائه مطالب بروز و مفيد ميتوانيد به سرعت افراد را به سايت خود طراحی جذب کرده و درآمد مناسبي از طريق تبليغات کسب کنيد.
با اين حال شرايط هميشه به همين شکل نبوده و در ابتداي مسير محدوديت هاي فراواني در کدنويسي وب و ارائه اطلاعات وجود داشت. در ابتدا برخلاف امروز تنها زبان کدنويسي  HTML بوده و اولين سايت در سال ???? راه اندازي شد. ار آنروز تا به حال تغييرات زيادي را در کدنويسي به زبان کدنويسي HTML مشاهده کرديم که به بررسي آن خواهيم پرداخت.
اولين نسل از زبان HTML
در دهه ?? ميلادي و بهمراه افزايش ارتباط کاربران با اينترنت، امکان خواندن مطالب در فضاي اينترنت با استفاده از کدنويسي HTML مهيا شد. در آن زمان صفحات وب از متن هايي محدود و در يک ستون تشکيل ميشدند و مودم هاي ديال آپ سرعت بسيار پاييني داشتند به همين دليل طراحان وب هرگز به فکر استفاده از تصوير و فيلم در صفحات سايت نبودند.
Mosaic نام اولين مرورگر براي ارتباط و درک صفحات وب بود که بر روي سيستم عامل Unix راه اندازي شد. براي غلبه بر اين مشکلات و محدوديت ها تلاش هاي فراواني صورت گرفت تا دنياي وب به شکل امروزي آن رسيده است.
نسل دو زبان کدنويسي HTML
مدت زماني طول کشيد تا طراحان وب خود را با تکنولوژي هاي رو به پيشرفت همگام و هماهنگ کنند. به همين دليل با ايجاد هماهنگي و با ايده فعال و زيبا کردن صفحات وب به ناگهان صفحات زيادي با ظاهر هاي بهم ريخته و شلوغ که تنها به استفاده از تصاوير و رنگ هاي مختلف توجه کرده بودند ايجاد شد. دستورات کدنويسي HTML به سرعت افزايش يافت تا جاييکه براي ايجاد يک هماهنگي عمومي نسخه دوم يعني HTML2 رونمايي شد.
پيچيدگي در کدنويسي وب از همين مرحله آغاز شد و بزرگترين مانع سرعت پايين اينترنت در ديافت عکس و گرافيک براي کاربران عمومي بود.
کنسرسيوم جهاني وب
کدنويسي HTML
کنسرسيوم جهاني وب ناظر مستقيم بر استانداردهاي کدنويسي HTML
با گسترده تر شدن امکانات و کاربران اينترنت، کنسرسيوم جهاني وب يا همان W3C که با WWW شناخته ميشود با يک ايده مشخص تشکيل شد. هدف اين کنسرسيوم جلوگيري از انحصار اينترنت در چنگال يک يا چند شرکت بزرگ و استفاده از آن در جهان بوده است. به اين ترتيب سياست هاي کلي و زبان کدنويسي در همه جه يکسان بوده و مرورگرهاي اينترنت براساس همين پروتکل ها عمل خواهند کرد، در نتيجه تفاوت آنها تنها در ظاهر، سرعت و امکاناتشان خواهد بود. همين امر موجب پيشرفت سريعتر و هدفمند اينترنت شد.
W3C با مشخص کردن استاندارهاي کدنويسي  طراحی   براي طراحان وب و نظارت بر رعايت آن يک سامان دهي و هماهنگي جهاني ايجاد کرده و هرگونه تغيير و بروزرساني در آن به سادگي در اختيار همگان خواهد بود.
نسل سوم زبان HTML
نسل سوم يا همان کدنويسي HTML3 با ورود انيميشن، فلش، افکت هاي صوتي و تصاوير سه بعدي به صفحات وب همراه بوده و در همين فاصله شرکت مايکروسافت مرورگر خود را با نام اينترنت اکسپلورر به جهان معرفي کرد.
نشل سوم تجربه بهتري براي کاربران اينترنتي بهمراه داشت زيرا طراحان و متخصصان کدنويسي وب توجه بيشتري به نظم در صفحات و نحوه ارائه مطالب نشان ميدادند. در اين مقطع قدرت و پتانسيل بالاي اينترنت بر همگان آشکار شد.
 
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : zahra webdesign23 بازدید : 197 تاريخ : يکشنبه 30 تير 1392 ساعت: 15:30

 

 
 آيا اينترنت همان وب است؟ 
اکثر کاربران فکر مي‌کنند که وب همان اينترنت است اما اينترنت در سال ???? وقتي که آرپانت که همان پدر اينترنت ناميده مي‌شود شروع به استفاده از پروتکل TCP/IP کرد شکل گرفت. وب توسط تيم برنرز لي انگليسي در سال ???? ساخته شده. شبکه جهاني وب از سرورها که صفحات را دربر دارند و مرورگرهاي بسياري همانند فايرفاکس ، اينترنت اکسپلورر ، سافاري و… ساخته شده است. درواقع اينترنت مجموعه‌اي از فناوري‌ست که موجوديت وب را رقم زده است. اگر اينترنت نبود وب هم نبود و اگر وب نبود اينترنت همچنان در اثر هجر باقي مي‌ماند. بايد به اين نکته توجه داشت که بسياري از برنامه‌هاي تحت شبکه بدون نياز به وب کار مي‌کنند مانند ايميل، FTP ، IRC يا چت مبتني بر اينترنت ، نرم‌افزارهاي پيام رسان ، تل‌نت، تورنت...
اينترنت يک دا?ن تو در تو است از تلفن‏ها، خطوط کابلى، ماهواره‏ها، سيم‏هاى شبکه و کامپيوترهاى به هم پيوسته که در سرتاسر جهان پراکنده شده‏اند. توصيه مي کنم مقاله اينترنت چيست را در همين سايت ايران کالا مطالعه کنيد. وب به نامى گفته مي شود که به هر چيز در اينترنت تعلق گرفته است. ما ميتوانيم با استفاده از Uniform Resource Locator يا URL به آن چيز دسترسى داشته باشيم. اين روش آدرس‏دهى (مثل  در دهه 60 اينترنت را تبديل به شاهراه اطلاعاتى کرد. به خصوص اينكه باعث حذف اعلان‏ها و فرمان‏هايى شد که سابقاً کاربران مجبور بودند تا براى رسيدن به اطلاعات تايپ کنند. بخش اعظمى از محتوياتى که شما از طريق URL به دست مي آوريد، فايلهايى هستند که با يک کد خاص موسوم به HyperText Makup Language يا به اختصار HTML نوشته شده‏اند. ما فايلهاى HTML را به عنوان صفحات وب ميشناسيم.
به خاطر هوشمندى كه در مرورگرها و اغلب وب سرورها قرار داده شده است، معمو?ً نيازى به وارد کردن ".www" قبل از يک آدرس وب وجود ندارد. وقتى يک URL را وارد ميکنيد، مرورگر يک درخواست به يک سرور براى پيداکردن سايت ميفرستد. سرور اغلب سايت را حتى بدون پيشوند تشخيص مي دهد. اما اگر نتوانست، .
يان ياکوبس از کنسرسيوم وب جهان گستر واقع در MIT مى گويد « در جهان ايده آل، URL ها نه ديده مي شوند و نه شنيده ». در حال حاضر کاربران، سايتها را به وسيله موتورهاى جستجويى چون Google پيدا مي کنند و براى رسيدن به هر چيزى روى لينک‏ها کليک مي کنند. کنسرسيوم در جستجوى راهبردهاى جهانى براى تغيير معمارى وب است تا گردش در آن را آسان تر کند؛ به خصوص براى افرادى که دچار نوعى معلوليت جسمى نيز هستند .
 
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : zahra webdesign23 بازدید : 228 تاريخ : يکشنبه 23 تير 1392 ساعت: 14:01

 

 
 
کدام يک از کدهاي زير بر روي عناصر تاثير ميگذارند؟
 
وقتي به يک عنصر يکسري خصوصيات نسبت مي دهيم، و در يک استايل دهي گروهي يا در جاي ديگري يکسري خصوصيات ديگر براي آن مي نويسيم، از بين خصوصيات يکسان تمامي آنها به ارث برده ميشود و از بين ساير خصوصيات آن ويژگي هايي به ارث مي روند که نسبت به ساير دستورات ديرتر و يا به عبارتي بعد تر نوشته شده اند و در صفحه استايل دهي پايين تر قرار گرفته اند. با هم به بررسي مثال زير مي پردازيم :
  
h2 
{
color: blue;
 font-size: medium;
 font-weight: normal;
h1, h2, h3 
{
 font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
 background-color: navy;
color: white;
}
 
در دستورات ابتدايي رنگ نسبت داده شده به تگ h2 آبي است، اما در استايل دهي گروهي رنگ نسبت داده شده به آن سفيد است، به همين دليل رنگ فونت انتخابي براي آن سفيد خواهد بود. مهم نيست که در دستورات قبلي  100 بار رنگ آبي به h2 نسبت داده شود پرا که آخرين دستور  css رنگ سفيد را به اين تگ نسبت مي دهد. 
 
استايل دهي به لينک ها:
 
لينک ها در سراسر دنياي وب وجود دارند، اگر به لينک هاي اوليه با استايل پيش فرض نگاهي بيندازيم مي بينيم که لينک ها داراي يک خط در زير نوشته لينک (underline)  هستند. به صورت پيش فرض مرورگرها از رنگ هاي زير براي لينک ها استفاده مي کنند:
آبي :    لينکي که مشاهده نشده باشد.
بنفش :  لينکي که شما آن را قبلا مشاهده کرده ايد.
قرمز:   لينکي که فعال است و شما در حال کليک کردن بر روي آن هستيد.
در بيشتر مواقع استايل دهي به لينک ها ممکن است به شکل زير باشد:
 
A
 {
 font-weight: bold;
 color: black;
}
 
با اين دستور به جاي اينکه لينک هاي آبي رنگ با سايز فونت نرمال داشته باشيم، لينک هاي شما به رنگ آبي و ضخيم خواهد بود. 
 
 
 
همانطور که قبلا اشاره کرديم تا کنون يک نوع حالت براي لينک ها معرفي کرديم، لينک هاي مشاهده شده، لينک هاي فعال و لينک هايي که هنوز بر روي آنها کليک نشده است، اما نوع چهارمي وجود دارد که hover ناميده مي شود، اين حالت براي وقتي است که نشانه گر موس بر روي لينک مي آيد که با استايل دهي در css نيز ميتوان خصوصيات اين لينک را نيز تغيير داد.
در اينجا به برخي از استايل هايي که مي توان به لينک ها داد نگاهي مي اندازيم:
 
a {
 font-weight: bold;
 }
 a:link {
 color: black;
}
a:visited {
 color: gray;
}
a:hover {
 text-decoration: none;
 color: white;
 background-color: navy;
}
a:active {
 color: aqua;
 background-color: navy;
}
 
 
 
  عکس بالا کليه حالت هاي مختلف لينک ها را نشان مي دهد و حالت hover آن لينک تماس با ما  (contact us) است. تمامي رنگ هاي پيش زمينه و ساير رنگ هاي ديگر را مي توانيد با css  ايجاد کنيد و مي توانيد افکت هاي بسيار جذابي مانند آن چيزي که در بخش فوتر سايت وب اسکالا مشاهده نماييد ايجاد کنيد.
 
پاک کردن پيشينه مرورگر:
 
مرورگرها به صورت پيش فرض مقداري از پيشينه صفحات وب سايت را در خود ذخيره مي کنند و از اين اطلاعات استفاده مي کنند که بدانند آيا لينکي بازديد شده است يا نه، اما اين کار براي زمانيکه طراح وب سايت در حال تست کردن صفحه سايتي است کمي مشکل ساز مي شود به خصوص وقتي که طراح مي خواهد لينکي که بازديد نشده است را استايل بدهد، اما چون صفحه سايت را چندين بار refresh  کرده مرورگر وي به اصطلاح cache  کرده و به همين دليل لينک هاي بازديد نشده را بازديد شده مي پندارد که به همين دليل مي بايست cache يا اطلاعات ذخيده شده را پاک کرد. براي اين منظور به اين صورت عمل مي کنيم:
در مرورگر اينترنت اکسپلورر : تب  tools راانتخاب کرده، inteet option  را کليک مي کنيد، زير browser history دکمه delete  را بزنيد، در پنجره باز شده check box مربوط به history  را فعال کنيد، انتخاب ساير گرينه ها با توجه به نظر خودتان مي تواند صورت گيرد. در نهايت دکمه delete  را زده و پنجره inteet option را ok ميکنيم تا بسته شود و cache مرورگرمان پاک شود.
 
 
 
ساير مرورگرها نيز روشي مشابه دارند که آدرس دسترسي به history  آنها نيز به صورت زير است:
 
Tools > Options يا   Preferences > Privacy
 
 
کلاس هاي انتخابگر  :
 
تا اينجا ياد گرفتيم که چگونه در يک فايل CSS خصوصيات مختلفي براي تگها بنويسيم و آموختيم که ميتوان خصوصيات يک کلاس را براي تگهاي مختلفي اعمال کرد يعني ميتوان کلاس را چندين بار استفاده کرد. به عنوان مثال بياييد کلاس زير را دريک پاراگراف اعمال کنيم :
 
.fun {
color: #339
 
به اين ترتيب 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>
 
اما همانطور که مي بينيد تکرار نام کلاس در تگها ي بالا زياد صورت گرفته ، پس به جاي استفاده از روش بالا ميتوان روش بهتري را به کار برد   :u 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 {
font-family: Georgia, Times, serif;
color: #339999;
letter-spacing: 0.05em;
}
 
اما براي يکي از تگ ها علاوه بر خصوصيات فوق يک يا چند خصيصه ديگر نيز اضافه کنيد، به اين روش اين کار را انجام مي دهيم:
 
blockquote.fun {
font-style: 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  را پشتيباني کنند. اما با گذشت زمان اين امر ميسر شد و مرورگر ها پيشرفت کردند.
 
تغيير پس زمينه و کناره هاي اشکال
موقعيت عناصر در هر جاي صفحه وب سايت
 
قبل از شروع کار، ابتدا براي ايجاد تغيير در ظاهر و اندازه عناصر در وب سايت مي بايست با مفهوم 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  قرار مي گيرد از ابتداي سطر بعد شروع مي شود.
 
 
و خروجي آن را بدين صورت خواهيم داشت:
 
 
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : zahra webdesign23 بازدید : 269 تاريخ : چهارشنبه 19 تير 1392 ساعت: 14:18

 

نرم افزار 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 را کليک کنيد.
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : zahra webdesign23 بازدید : 175 تاريخ : پنجشنبه 6 تير 1392 ساعت: 15:13

 

آیا تا به حال موقعیتی پیش آمده که بخواهید بین دو کلمه فاصله بیشتری در طراحی وبب سایت وجود داشته باشد. یا بخواهید علامت کپی رایت را نشان دهید. این کاراکتر های ویژه با استفاده از کدهای ویژه در صفحه شما قرار می گیرند. این کدهای ویژه با علامت & (امپرسند) شروع می شوند و با تعدادی حرف یا عدد ادامه پیدا می کنند و با ; (نقطه ویرگول) پایان می یابند. برای مثل زمانی که شما می خواهید بین دو کلمه فضای خالی طراحی وبب سایت  اضافی بگذارید باید از کد ;nbsp& استفاده کنید که فضای خالی اضافه می کند. مطابق مثال زیر:

 

کلمه اول &nbsp; کلمه دوم

نتیجه به این صورت خواهد بود:

 

کلمه اول   کلمه دوم

فاصله اول بین کلمات با فشار دادن دکمه Space ایجاد می شود. مرورگر فاصله اول را تشخیص می دهد اما بعد از آن هر تعداد فاصله که باشد تفاوتی نمی کند و شما فقط یک فاصله را در مرورگر می بینید. افزودن کد ;nbsp& مرورگر را مجبور می کند تا بین دو کلمه فاصله اضافی بگذارد. شما با تکرار این کد می توانید به هر تعداد که بخواهید فاصله خالی ایجاد کنید.مانند زیر:

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

کلمه اول &nbsp;&nbsp;&nbsp;&nbsp;کلمه دوم

نتیجه:

 

کلمه اول     کلمه دوم

 

 

this page Copyright &copy; 2007 by me

متن نتیجه:

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

this page Copyright © 2007 by me

 

روش کار برای تمامی کاراکترهای ویژه به همین صورت است فقط کد آنها را در متن HTML قرار دهید.

 

در جدول زیر می توانید تعدادی از این کاراکترهای ویژه را به همراه کد سازنده طراحی وبب سایت  آنها ببینید:

 

نام کاراکتر            شکل ظاهری کاراکتر          کد سازنده کاراکتر

امپرسند  &          &amp;

علامت کپی رایت   ©         &copy;

علامت ثبت شده   ®         &reg;

علامت تجاری                &trade;

علامت کوچکتر از    <          &lt;

علامت بزرگتر از     >          &gt;

علامت خنجر                   &dagger;

--------------------    »          &raquo;

--------------------    «          &laquo;

خط فاصله ام                 &#151;

علامت درجه         °           &deg;

یک چهارم            ¼         &frac14;

یک دوم   ½         &frac12;

سه چهارم           ¾         &frac34;

نقطه میانی          ·           &middot;

علامت تعجب وارونه            ¡           &iexcl;

علامت یورو                     &euro;

علامت پوند انگلیس            £          &pound;

علامت تقسیم      ÷          &divide;

علامت رادیکال                &radic;

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

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

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : zahra webdesign23 بازدید : 369 تاريخ : چهارشنبه 29 خرداد 1392 ساعت: 14:21

 آموزش طراحی وب سایت و وبلاگ

 

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

 

دانلود قالب فارسی برای طراحی  css

 

فایلی را که دانلود کرده اید یک فایل zip. است که بعد از extract شدن (خارج شدن از حالت zip ) فولدری را در اختیارتان قرار میدهد که حاوی سه فایل میباشد:

 

2-column.htm

 

reset.css

 

styles.css

 

فایل اول با پسوند htm. همان صفحه اصلی است که در وب به نمایش در می آید. فایل دوم فایل reset.css است لطفا برای دریافت اطلاعات در این مورد به این اینجا مراجعه کنید. فایل سوم طراحی وب سایت فایل style.css است که به صفحه htm. دستور میدهد که چگونه محتویاتش را نمایش دهد.

 

صفحه htm. و styles.css را که دانلود کرده اید در یک ویرایشگر صفحه وب مانند frontpage باز کنید. در حال حاضر صفحه ای مانند تصویر زیر را در اختیار دارید که برای سهولت در ارائه توضیحات، ستونها را با خطوط (border) کاملا واضح مشخص کرده ام.

 

 

 

تصویر قالب دو ستونه برای طراحی طراحی وب سایت  css :

 

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

 

اکنون به فایل styles.css نگاهی می اندازیم. برای این که به اهمیت این فایل بیشتر پی ببرید ابتدا فایل htm. را در مروگر مشاهده کنید سپس فایل styles.css را از درون فولدر، delete کرده و مجددا فایل htm. را مشاهده کنید (اگر صفحه شما در مرورگر باز است آن را refresh کنید تا تغیرات را ببینید). برای اطلاعات بیشتر در مورد محتویات styles.css اجزای آن را بررسی میکنیم:

 

شما در این فایل نوشته هایی را مشاهده میکنید که هر کدام مربوط به یک ستون می باشد در ابتدا باید بدانید که اسامی ستونها در فایل styles.css با علامت # مشخص میشوند. مثلا: wrapper# در فایل styles.css که در اختیار دارید چگونگی نمایش ستون wrapper را در صفحه htm. مشخص میکند. کدهای HTML صفحه htm. را در ویرایشگر خود مرور کنید و نام wrapper را بیابید. این ستون، ظرف یا قالب اصلی کار طراحی وب سایت شماست که در صفحه htm. آن را برای شما با border قرمز مشخص کرده ام و بقیه ستونها مانند قطعات پازل در آن جای میگیرند.

 

#wrapper {

margin: auto;

direction: rtl;

width: 922px;

border: 1px solid #FF0000;

}

 

نوشته هایی که در میان دو علامت { } قرار دارند و زیر نام یک ستون قرار میگیرند دستوارتی هستند که نحوه نمایش آن ستون را اعمال میکنند. همان طور که در دستور بالا که قسمتی از فایل styles.css شماست و متعلق به ستون wrapper میباشد مشاهده میکنید به این ستون دستور داده شده تا به حالت اتوماتیک (خودکار) در صفحه جای بگیرد ( ;margin: auto )،

 

نوشته های درون آن از حالت نوشتاری راست به چپ پیروی کنند که برای نوشتار و تایپ فارسی مناسب است ( ;direction: rtl ) منظور از مقدار rtl که در مقابل کلمه direction نوشته شده همان right to left یا چپ به راست است،

 

عرض آن 922 پیکسل باشد ( ;width: 922px ) و

 

اطراف آن را یک خط ممتد با ضخامت 1 پیکسل و رنگ قرمز احاطه کند ( ;border: 1px solid #FF0000 ).

 

اکنون دستورات ستون دیگری را مرور میکنیم تا کدهای جدیدتر طراحی وب سایت را پیدا کنیم. در فایل styles.css به دنبال ستون leftcolumn بگردید دستورات این ستون را در قسمت پایین مشاهده میکنید:

 

#leftcolumn {

border: 1px solid #000000;

background:#FFFFFF;

margin: 0px 0px 5px 0px;

padding: 10px;

height: 350px;

width: 204px;

float: right;

}

 

 

این کدها به ستون leftcolumn  دستور میدهند که:

 

رنگ پس زمینه اش سفید باشد ( ;background:#FFFFFF )،

 

فاصله محتویات درونش مانند تصاویر عکسها و ... از اطراف 10 پیکسل باشد ( ;padding: 10px )،

 

ارتفاع آن 350 پیکسل باشد ( ;height: 350px ) و

 

جایگاه قرار گرفتنش در صفحه سمت راست باشد ( ;float: right ).

 

شما میتوانید با تغییر اندازه width (عرض) ستون wrapper و ستونهای داخل آن شکل قالب را کاملا تغییر دهید. قصد دارم چند طرح را مشخص کنم تا افرادی که این سری آموزشی را دنبال میکنند برای تمرین از آن طرح ها به عنوان الگو استفاده کنند.

 

 

 

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

برچسب : طراحی وب سایت,طراحی سایت,طراحی وب, نویسنده : zahra webdesign23 بازدید : 163 تاريخ : چهارشنبه 22 خرداد 1392 ساعت: 16:23