معرفي مطالب جالب با لينك منبع
معرفي مطالب جالب با لينك منبع

 

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

درين گرد هم آيي به معرفي خصوصيتي مي‌پردازيم كه از روش آن مي‌توانيد موادتشكيل دهنده برگه را در هر جايي كه مي‌خواهيد قرار دهيد

انتخاب وضعيت عنصرها در هر جايي از برگه كه شما دوست داريد :

همواره

سواي هيچ نوع مداخله اي از سمت يك مرورگر اينترنت , همگي عناصري كه باطن يك

كاغذ وبسايت قرار دارا‌هستند به به عبارتي ترتيب نمايش داده ميگردند , به اين ترتيب درصورتي كه در

تگ هدر , منوي راهبري قرار داشته باشد و در راز عنوان دوم , سه پاراگراف قرار

دهيم در حين نمايش در مرورگر خواهيد روئت كرد كه طريق نمايش آن‌ها به به عبارتي

ترتيبي است كه داخل سورس جاي‌دارد و تا اينجاي فعاليت طريق تارنما زدن ما به

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

خواهم شمارا با بعضي از اقتدار هاي حقيقي css و تاثيراتي كه ميتواند بر روي

سورس مان داشته باشد آشنا كنم . درين نصيب شما ياد خواهيد گرفت كه چطور مي

توانيد براي عنصرخاصي در ورقه معلوم فرمائيد كه به طور واضح در كدام نصيب از

محتواي وب سايت نمايش يابد بي آنكه به ترتيب قرار به چنگ آوردن موادتشكيل دهنده داخل ورقه اعتنا

نماييد .

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

زمانيكه از css براي استايل دهي به تارنما

هاي خويش استفاده ميكنيد براي هر بخش از تارنما خويش يك Border در حيث بگيريد

براين اساس به خودتان ياري ميكنيد تا به راحتي براي آن نصيب خاص استايل

هاي مد نظرتان را بيافزايد وتاثير آن را مشاهده فرماييد , صرفا مي بايست به خاطر

داشته باشيد كه بعداز اين‌كه كارتان با آن نصيب به انتها رسيد ( css فعلا ) border اي

را كه افزوده ايد حذف فرمائيد . بياييد براي خويش بخشي از وبسايت را تذكر

كنيم :

 

“ - //W3C//DTD XHTML 1 . 0 Strict//EN ”

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

” http : //www . w3 . org/1999/xhtml ” >

 

” Content - Type ” content= ” text/html; charset=utf - 8″/>

” style1 . css ” rel= ” stylesheet ” type= ” text/css ” />

 

” header ” >

” sitebranding ” >

BubbleUnder . com

 

” tagline ” >

Diving club for the south - west UK – let ’ s make a splash!

 

” navigation ” >

 

” index . html ” >Home

” about . html ” >About Us

” contact . html ” >Contact Us

 

” bodycontent ” >

Contact Us

To find out more , contact Club Secretary Bob Dobalina on 01793 641207 or email

href= ” bob@bubbleunder . com ” >bob@bubbleunder . com .

 

 

هم اكنون

بياييد به پوشه 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 مسافت توليد كرده ايم .

 

“ - //W3C//DTD XHTML 1 . 0 Strict//EN ” “ http : //www . w3 . org/TR/xhtml1/DTD/xhtml1 - strict . dtd ” >

” http : //www . w3 . org/1999/xhtml ” >

 

” Content - Type ” content= ” text/html; charset=utf - 8″/>

 

Absolute Positioning

” redblock ” >This is the red block .

The red block is positioned 200 pixels from the top and 200 pixels from the left .

 

 

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;

}

 

حال مرورگر خويش را refresh فرماييد آنچه كه مراعات مي‌نماييد بايستي همانند تصوير زير باشد :

 

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 فرماييد .

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

حتما

حال حاضر از به نيز ريختگي تارنما خويش غمگين ميباشيد

 

امتیاز:
بازدید:
برچسب: ،
موضوع:
[ ۳۰ آذر ۱۳۹۶ ] [ ۱۱:۵۹:۰۸ ] [ امين طيراني ] [ نظرات (0) ]
[ ]
.: Weblog Themes By tibablog :.

درباره وبلاگ

نويسندگان
لینک دوستان
لينكي ثبت نشده است
نظرسنجی
لینک های تبادلی
فاقد لینک
تبادل لینک اتوماتیک
لینک :
خبرنامه
عضویت لغو عضویت
پيوندهای روزانه
لينكي ثبت نشده است
پنل کاربری
نام کاربری :
پسورد :
عضویت
نام کاربری :
پسورد :
تکرار پسورد:
ایمیل :
نام اصلی :
آمار
امروز : 0
دیروز : 0
افراد آنلاین : 1
همه : 604
موضوعات وب
موضوعي ثبت نشده است
امکانات وب