بهترین های آموزش با ♥کامپیوترگل♥آموزش طراحی وب و چترومطراحی و ساخت چتروم،آموزش1تا100کامپیوتر،طراحی سایت،برنامه نویسی،دانلود نرم افزارهای اندروید و کامپیوتر،هک و امنیت

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

بردرهای دو تایی:
شما می توانید برای عناصر  block از بردر دوتایی نیز استفاده کنید، مانند شکل زیر:

.highlight {
border-width: 5px;
border-style: double;
border-color: silver;
}

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

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

تشخیص عناصر inline

ساده ترین روش تشخیص یک عنصر inline   از  blockاین است که  عنصر inline درون یک عنصر دیگر قرار می گیرد. یک مـثال فیزیکی برای این مسئله این است که شما می توانید درون یک جعبه یک عکس یا چندین عکس را قرار دهید اما درون یک عکس نمی توان چندین جعبه را قرار داد.
از لحاظ فیزیکی نیز این امر امکان پذیر نیست. یک مثال خوب برای این موضوع span  است که می تواند گروهی از کلمات را به هم مربوط کند و به آنها استایل دهد:

<p><span class=”fun”>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 of accommodation and travel and to
ensure that everyone gets a trustworthy dive buddy.</p>

مثال های دیگری برای عناصر درون خطی:
•    em
•    Strong
•    Cite
•    a
به مثال بالا یکبار دیگر نگاه کنید، هر یک از عناصر inline بالا می توانند به جای تگ span در پاراگراف قرار گیرند:

<p><em>Bubble Under</em> is a group of diving enthusiasts…</p>
<p><strong>Bubble Under</strong> is a group of diving enthusiasts  </p>
<p><cite>Bubble Under</cite> is a group of diving enthusiasts…</p>
<p><a href=”http://www.bubbleunder.com/”>Bubble Under</a> is a  group of diving enthusiasts… </p>

باوجود اینکه عنصرimg یک عنصر درون خطی است، اما ما آن را مثل روش های گفته شده در بالا استفاده نمی کنیم. تصویر هیچگونه اطلاعاتی را برای مرورگر تامین نمی کند که به عنوان مثال متن خود را چگونه نمایش بدهد چون یک تصویر تنها یک عکس است و متنی برای نمایش دادن ندارد.

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

کدام یک از کدهای زیر بر روی عناصر تاثیر میگذارند؟

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

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 رنگ سفید را به این تگ نسبت می
دهد.

با  درود به همه دوستان با قسمت  دهم آموزش طراحی سایت از پایه در خدمتتون هستم و امیدوارم این مقاله هم مانند مقاله های گذشته بازخورد های خوبی داشته باشد .
در این مقاله نیز راجع به سی اس اس ( 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) بتوانند سایز فونت متناسب با آن را ببینند فونت دهی به صورت نسبی را مد نظرمان قرار می دهیم.

با قسمت نهم آموزش طراحی سایت از پایه در خدمتتون هستم و امیدوارم این
مقاله هم مانند مقاله های گذشته بازخورد های خوبی داشته باشد . در این
مقاله راجع به سی اس اس ( css) و نحوه استایل دهی به آن صحبت خواهم کرد .
برای اینکه بتوان به صفحه وب سایتمان ظاهری زیبا بدهیم می بایست با css این
کار را انجام داده و یا به عبارتی به عناصر وب سایتمان سبک بدهیم.

اولین مورد در طراحی، فونت یا typeface استفاده شده در سایت می باشد، که به
صورت پیش فرض فونت مورد استفاده برای اکثر مرورگرها Times New Roman است.
اما از نظر کاربران این فونت باعث ایجاد یکنواخت شدن سایت ها شده به همین
دلیل در طراحی یک وب سایت می توان با استفاده از خصوصیت font-family سبک
فونت استفاده شده در سایت را تغییر داد.
بهترین حالت استفاده از آن در تگ body می باشد.

Body{
Font-family: verdana;
}

فونت استفاده شده در اینجا verdana است و اگر درون تگ body قرار گیرد باعث
می شود که تمامی متن های مورد استفاده در سایت، از این فونت استفاده کنند.
حال اگر بخواهیم تگی در سایتمان با فونت دیگری نمایش یابد، به طریقی
جداگانه به آن استایل می دهیم که البته کمی جلوتر آن را توضیح خواهم داد.
در نظر بگیرید که کاربری از سایت شما دیدن کند و فونت verdana روی سیستم خود نصب نکرده باشد، حالا چه اتفاقی میافتد؟
در این حالت مرورگر خودش حدس می زند و بهترین فونتی را که به فونت انتخاب
شده شما نزدیک است انتخاب می کند. اما ما می توانیم خودمان این کار را
انجام دهیم و آن را از حیطه حدس زدن مرورگر خارج نماییم. این کار از طریق
همان font-family انجام می گیرد، به مثال زیر توجه کنید :

Body{
Font-family: verdana, Helvetica, Arial, San-serif ;
}

این خط به مرورگرها اعلام می کند که اگر فونت verdana بر روی سیستم کاربر
نصب نبود و لود شدن این فونت برای عناصر موجود در درون صفحه سایت موفقیت
آمیز نبود، از فونت Helvetica استفاده کن، اگر Helvetica نیز نصب نبود از
Arial برای لود شدن متون صفحه استفاده کن، در غیر اینصورت از یکی از فونت
های San-serif که بر روی سیستم کاربر نصب است استفاده کن.
این css را به فایل css خود اضافه کنید و سپس آن را ذخیره نمایید، صفحه وب
سایت را با مرورگر روی سیستم تان باز کنید، خواهید دید که فونت های موجود
در صفحه همگی verdana شده اند. مانند شکل زیر:

با قسمت هشتم آموزش طراحی سایت در خدمتتان هستیم . در این قسمت  برای درج استایل (css style ) به سایت 2 روش  embedded  و externalرا کاملا توضیح خواهم داد.  به یقین این قسمت آموزش می تواند تحولی در روش طراحی شما ایجاد کند . پس تا پایان با ما باشید و ما را نظرات خودتان محروم نکنید.

Embedded Style

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

<head>
<title>Bubble Under – The diving club for the south-west
UK</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
<style type=”text/css”>
p {
font-size: 12px;
}
</style>
</head>

در مثال بالا گفته شد برای همه تگ های p  سایزفونت 12px  را در نظر بگیر. دقت نمایید p  یک selector  است و اعلان ها داخل {} قرار می گیرد.
در این مثال selector  ما یک تگ  p  را هدف قرار داده است و می تواند تگ های دیگری و یا کلاس های و یا آی دی های دیگری را هدف قرار دهد. همچنین برای یک selector   میتوان چندین اعلان تعریف کرد مانند مثال زیر :

<style type=”text/css”>
p {
font-weight: bold;
color: blue;
}
</style>

شکل زیر می تواند کمک کند:

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

عنصر  blockquote:

این تگ ، یک تگ container (که در جلسات قبل توضیح داده شده) است و طبق گفته کتاب این تگ  برای نمایش یک گفته شخصی استفاده می شود.
ولی در کتاب های دیگر به تگ های  Quotes  اشارات متنوعی شده است.  Quotes به معنی نشان یا نقل قول است و کلا” این تگها برای جلب توجه بیشتر استفاده می شود در واقع یک شهادت ویا سفارش و یا کامنت است.

تگ های  Quotesبه 3 بخش زیر تقسیم می شود :

1.    <blockqoute>< /blockqoute>
2.    <q>< /q>
3.    <cite>< /cite>

q :

این تگ ، یک تگ container  و inline  است  و برای نقل و قول برای یک یا دو کلمه استفاده می شود.
یادآوری :  تگ های block  کل سطر را می پوشاند و تگ های inline  تنها دور عنصر را می گیرند .

<p>
I’m said <q>font</q>but my friend said <q> font face </q>
</p>
cite  :
این تگ ، یک تگ container  و inline  است  و برای نام نویسنده و یا نویسنده کامنت استفاده می شود
<p>
but then <cite> ali</cite>said <q> no think these font work betfer </q>
<p>

blockquote  :

این تگ ، یک تگ container  و block  است  و برای اشاره به مقاله قبلی یا اشاره به یک مرجع خاص  معمولا برای یک جمله استفاده می شود.

مدت زمان: 3 دقیقه 37 ثانیه 

برای دانلودفیلم به ادامه مطلب مراجعه نمایید