X
تبلیغات
صفحه اول تماس با ما RSS قالب وبلاگ
معرفی مطالب جالب با لینک منبع
معرفی مطالب جالب با لینک منبع
امین طیرانی سه شنبه ۱۴ فروردين ۱۳۹۷

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

با سلام به کلیه عزیزان با نصیب دهم یادگرفتن

از مبنا در خدمتتون هستم و امیدوارم این مقاله نیز نظیر مقاله های پیشین برخورد های خیر داشته باشد .

در‌این مقاله هم راجع به سی اس اس ( css ) و روش استایل دهی ( Font - size , … . color , Background - color , ) و انتخاب گر متنی و سبک دهی گروهی کلام خواهم کرد .



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


نکته : اعتنا داشته باشید که‌این استایل ها کل css نیست و در فصل های آتی به‌این مقادیر بیش تر خواهد شد .


Color

همان طور که پیش از این نیز دیدید برای رنگ دادن به عنصرها استفاده می‌شود .


Background - color

به دو صورت اندازه دهی میگردد یا این که اسم رنگ ( blue , red , green , . . ) یا این که با اعداد دسیمال , نظیر : #3acbef


Font - family

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


Font - size

میزان دهی آن میتواند نظیر یکی آیتم های زیر باشد :

1 - اسم های مهیا برای سایز دادن به فونت ;


• XX - small

• X - small

• Small

• Medium

• Large

• X - 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 است .


نکته : گذشته از استارت به عمل و استفاده از css های متنوع , ابتدا از css ای که تا کنون آن را ساخته اید یک back up بگیرید و آن گاه با استایل های مختلفی که در صدر یاد گرفتید استایل های مختلفی را بسازید .

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


– ابتدا فولدر about . html را گشوده فرمائید ( در تمرین های قبل تاسیس شده است )


“ - //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″/>



” header ” >

” sitebranding ” >

BubbleUnder . com



” tagline ” >


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

splash!




” bodycontent ” >

About Us


Bubble Under 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 of accommodation and travel and

to ensure that everyone gets a trustworthy dive

buddy .


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 .


When we ’ re not diving , we often meet up in a local pub

to talk about our recent adventures ( any excuse ,

eh ? ) .






– پاراگراف زیر را پیدا کرده و تگ em را که جهت نمایش بیشتر یا این که همان تاکید خوب تر بر روی آن واژه بکار رفته است را بیشتر نمائید .


And when we ’ re not diving , we often meet up in a local pub

to talk about our recent adventures ( any excuse ,

eh ? ) .



– پوشه را ذخیره کرده و در مرورگر خویش به طور local ببینید , چهره ای که مشاهده میکنید می بایست شبیه عکس زیر نمایش یابد .


design - web - 101 . jpg

– هم اکنون فولدر css خویش را گشوده کرده و استایل زیر را به آن طولانی تر نمائید .


em {

Font - style : normal;

Text - transform : uppercase;

{


هم اکنون پوشه css را ذخیره کرده , آن‌گاه مانیتور خویش را refresh فرمایید , چهره ای که مشاهده میکنید باید شبیه عکس زیر باشد .


design - web - 102 . jpg


شبیه این نمونه را میتوانید در منوی سمت راست سرویس ها پباده سازی وبسایت وبسکالا ببینید . درصورتی که از تگ em در متن‌ها انگلیسی استفاده نماییم استایل آن به طور پیش فرض italic خواهد بود , ( نظیر نمونه زیر ) که در حالتی‌که بخواهید استایل آم نوشته نیز نظیر بقیه متن ها در آم پاراگراف باشدبه آن استایل normal میدهیم و درصورتی که بخواهیم با حروف بزرگ ( به غیر از لهجه پارسی ) نمایش یابد از uppercase استفاده می‌کنیم .


نکته :

بعضا از تگ های و موادسازنده HTML می‌باشند که به مرور زمان با تگهای دیگری جایگزین میگردند و از استفاده از آنان صرف حیث می گردد , برای مثال تا یک‌سری وقت پیش تگی که برای bold کردن یا این که کلفت کردن متن ها یه فعالیت میرفت بود که به جای آن اکنون از تگ strong استفاده می گردد . اهمیت این زمینه هنگامی است که اشخاص روشن دل برای عمل با وبسایت ها از قابل انعطاف افزارهایی استفاده می نمایند که بجای نمایش صفحه های اینترنت آن را برای استفاده کننده خویش می‌خوانند که به اصطلاح به آن‌ها screen reader می‌گویند . در اینجاست که آن ها در هنگام خوانندن مقاله متنی را که با تگ em معلوم شده‌است را مهمتر می‌دانند تا متنی را که داخل تگ i قرار گرفته همینطور موتورهای کاوش در گوگل به متنی که با تگ strong قطور شده‌است بیشتر اعتنا مینمایند و تحت عنوان نوشته مهمی که در یک نوشته مصرف شده شده‌است می‌نگرند تا به متنی که با تگ b قطور شده باشد .


نگاهی به عنصرها داخل ورقه :

در پاراگراف زیر همان گونه که مراعات می‌کنید , برای استایل دهی به پاراگراف ها استایل زیر تعریف شده‌است , که به وسیله تگ body جور فونت این متن‌ها معین شده است .


Body{

Font - family : verdana , Helvetica , Arial , San - serif;

}

P{

Font - size : small;

Color : navy;

}


خط بالا به ما میگه که هر تگ p که در ورقه بود استایل بالا را بگیرد .

ولی برهان ما از به کاربردن این نمونه برای این است که می‌خواهیم پاراگرافی را متمایز از دیگر متن ها اینترنت سایتمان کنیم و آن اولی پاراگراف نوشته ما است . درحال حاضر برای متمایز کردن این پاراگراف برای آن به طور زیر کار میکنیم :


” tagline ” >


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


< /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 است , آن پیوند فاقد زیر خط در هنگام کلیک کردن آن پیوند خواهد بود .


#footer {

line - height : 150 % ;

}


داخل تگی که id footer دارااست , همگی متن‌ها دارنده % 150 مسافت بین خطوط خواهند بود .



ارسال نظر
نام شما :
آدرس وب سایت :
پست الکترونیک :
پیام شما :
کد امنیتی :