بفرمایید کمی Css!(طراحی قالب بر پایه ی سی اس اس)

[Webber]

با عرض سلام خدمت همه ی دوستان
همانطور که می دونید طراحی صفحات وب با استفاده از جدول(Table Basesd) کم کم جایش را به طراحی بر پایه ی css یا CSS Based می دهد.احتمالا بسیاری از دوستان مایلند با این روش کار کنند یا آشنایی نسبی با آن را بدست آورند.بسیاری هم فکر می کنند که این روش خیلی(شاید هم خیلی خیلی ) سخت باشد.چند وقت پیش یکی از دوستان همینجا مشکل با جدول داشتند ولی با استفاده از چند خط CSS به جای جدول مشکلشان به راحتی حل شد.پس اصلا نگران سختی CSS نباشید،چون خیلی زود باهاش دوست خواهید شد.در ضمن این روزها CSS تبدیل شده به آش خاله یا چیزی تو مایه های شتر که در خونه ی هر طراح وبی می خوابه.به هر حال این مبحث یک آموزش قدم به قدم، نه مرحله ای،جالب است با موضوع:

طراحی یک قالب بر اساس CSS
​

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

طراحی یک قالب صفحه ی وب بر اساس CSS - قدم اول

همانطور که قبلا هم اشاره شد این شروع یک مقاله ی قدم به قدم در مورد ساخت قالب بر پایه ی CSS می باشد.این مقاله از چند بخش مختلف تشکیل شده است.

بخش اول چگونگی ساخت دکمه های ناوبری(Navigation Buttons) در *Photoshop CS را شامل می شود.دومین بخش هم چگونگی ساخت پس زمینه(Background)،بعد بحث روی سرصفحه(Header) و شکل بندی(Layout) صفحه ی وب و در آخر هم که اجرا روی CSS و XHTML می باشد.

حالا شاید این سوال برای شما پیش بیاید که چرا ما در اول بسم الله،با ساخت دکمه های ناوبری شروع کردیم.اما منظور ما ابتدا این بود که با این کار یک آموزش کوچولو در مورد ساخت این دکمه ها بدهیم.ولی یک مرتبه فکری به سرم زد و آن اینکه چرا این مبحث را کاملتر نکنیم.

ساختن یک دکمه ی ناوبری با بخش شیشه ای انحنا دار

یک صفحه ی RGB باز کنید.با سایز 172 * 22px و پس زمینه ی سفید.یک لایه ی جدید ایجاد کنید و نامش را button بگذارید،سپس آن را با رنگ ececec# پر کنید.حالا یک لایه ی جدید با نام highlight بسازید.یک خط سفید با پهنای 1px در طرف بالا و چپ بکشید(با استفاده از ابزار pencil و طول 1px).یک محو شدگی تدریجی در گوشه ی چپ پایین با استفاده از ابزار Erase ایجاد کنید.(brush,20px,50% opacity).

حالا یک لایه ی جدید بسازید(با نام bullet).با استفاده از ابزار Pencil چند مربع کوچک 1px ی رسم کنید(1px, #727272).البته می توانید با خلاقیت خود یک شکل زیباتری به آن بخشید.

حالا با کشیدن یک مسیر(d6d6d6#)بویسله ی ابزار Pen ،یک افکت شیشه ای اریب(Glassy Bevel Effect) ایجاد نمایید.

تبریک می گم.شما دکمه ی خود را ساختید!

ساختن افکتی که جایگزین دکمه ی اصلی هنگام نشانه روی توسط موس شود(Creating the rollover effect)

برای ایجاد این افکت از صفحه ی بالا یک کپی(Duplicate) ایجاد کنید(برای این کار روی نوار عنوان صفحه راست کلیک کنید و Duplicate... را انتخاب نمایید).روی لایه ها راست کلیک کنید و مقدار Color Overlay را برای هر کدام به صورت زیر تغییر دهید:

• پس زمــینه ی دکـــــمه:#bfe3ff
• افکت شیشه ای اریب:#a5d1f3
• مربع های پیکـــسلی:#e4001b

*همانطور که می بینید،برای انجام اولین قدم باید اطلاعات پایه ای از PS داشته باشید.

خوب این اولین قدم بود.امیدوارم استفاده کرده باشید.اگر مشکلی بود لطفا همین جا بفرمایید.منتظر نظرات همه هستم.

موفق باشید

 

[Webber]

الگو و رنگ آمیزی قالب

سلام
با توجه به استقبال زیاد دوستان تصمیم گرفتم،قسمت دوم مقاله را زودتر ترجمه کنم.امیدوارم مورد استفاده قرار گیرد.

امروز قدم دوم را در مورد ساخت قالب بر پایه ی CSS بر می داریم.بخش امروز مربوط می شود به چگونگی انتخاب یک طرح رنگی خوب و جالب و ساختن یک الگوی پس زمینه(Background Pattern) خوب برای صفحه ی وبمان.
چنانچه همه ی شما می دانید،قصد اولیه ی من دادن یک یادگیری کوتاه در مورد نحوه ی ساختن یک دکمه ی شیشه ای بود تا شما بتوانید تا شما بتوانید از راحتترین راه این کار را انجام دهید(البته راه های راحتتر از این هم هست که احتمالا در آخر به آن می پردازیم).می تواند برای شما کمی عجیب باشد که چرا ما قبل از ساختن دکمه و پس زمینه و ...،در دومین بخش از این سری مقالات،در مورد انتخاب طرح رنگی(Color Scheme) وبسایت فکر می کنیم.این در واقع باید اولین قدم ما باشد.بعد از آن می توانیم دکمه ها و بقیه ی اجزای گرافیکی را بسازیم.

انتخاب طرح رنگی خود

بهرحال شاید یک پس زمینه ی ذهنی در مورد موضوع امروز دارید.انتخاب رنگ های صحیح برای وبلاگ خود،یک مسئله ی شخصی است و می تواند بازتاب این باشد که شما چگونه انسانی هستید و چه افکاری دارید؟؟

در واقع توضیح دادن به شما که چگونه انتخاب کنید،معمولا غیر ممکن است.با این حال چند نکته است که من سعی می کنم همیشه به آنها عمل کنم:

• لا اقل از یک رنگ contrast یا highligh برای دادن تایید و اهمیت به صفحه ی خود بهره ببرید.از آن رنگ برای لینک های متنی خود استفاده کنید.بدین گونه آنها خیلی قابل رویت تر می شوند.
• مطمئن شوید که از رنگ های گوناگون و زیاد در صفحه ی خود استفاده نمی کنید.وگرنه در پایان با یک طرح بندی نامنظم و زشت روبرو خواهید بود.من در بیشترین حالت،از 3 رنگ استفاده می کنم.2 واحد رنگ تیز و نافذ(subtle) و یک رنگ هم برای تاکید(highlight).
• از این دو رنگ من از بین تاریکترین و روشنترین شون استفاده می کنم.اگر شما کمتر از 3 رنگ استفاده می کنید،احتمالا نگاه کردن به آن زودتر خسته کننده می شود.گرچه اگر درست و به اندازه ی کافی از اختلاف رنگ ها استفاده کرده باشید،می توانید نتیجه ی دلچسب تری هم بگیرید.این می تواند درست عمل کند،اگر شما به دنبال ساده سازی هستید.

​

می توانید در PS به (Hue/Saturation (control+u بروید و اختلاف رنگ های مورد نظر خودتان را مشاهده کنید.در حقیقت تمام مثالهای بالا از این راه ایجاد شده اند.شروع کنید و با استفاده از این راه به 3 دیگر دست یابید.

اگر باز هم در مورد رنگ ها و مفهومشان مشکلی دارید،توصیه می کنم به ایـــــن لینک بروید.

وقت آن رسیده که تعدادی از الگو ها را رسم کنیم

حالا زمان طراحی پیکسلی است!با یک صفحه به اندازه ی 30*30px شروع کنید،RGB و رنگ پس زمینه انتخاب شما.تعدادی نقطه ی پیکسلی با استفاده از ابزار pencil در PS رسم کنید.در اینجا تعدادی مثال می اوریم که شما می توانید از آنها شروع کنید.

این نمونه های بزرگنمایی شده،در حقیقت الگوهای اصلی ما هستند.از طرف راست بریده شده اند و وقتی کنار هم قرار می گیرند و تکرار می شوند،یک طرح یکپارچه می سازند.گاهی اوقات سخت ترین بخش محاسبه ی طرف راست الگو برای چیدن است تا هنگامی که کنار هم قرار می گیرند،طرحی یکپارچه و درست نمایش یابد.یک راه برای انجام راحتتر این کار این است که از rectangle Selection tool استفاده کنیم و یک مربع بکشیم.(برای کشیدن مربع کلید shift را پایین نگه می داریم)از گوشه ی بالا چپ به گوشه ی پایین راست الگو.حالا به منوی image بروید و crop را انتخاب کنید.بعد به منوی edit بروید و Define pattern را انتخاب نمایید و یک نام برایش بگذارید.حالا شما نیاز دارید که الگوی خود را امتحان کنید.یک صفحه ی جدید 300*300 پیکسل باز کنید و تمام صفحه را انتخاب کنید.حالا از منوی edit گزینه ی fill را انتخاب کنید.در لیست use گزینه ی pattern را انتخاب کنید و در پایین الگوی خود را انتخاب نمایید.حالا Ok را کلیک کنید و نتیجه را ببینید.

بخش بعدی در مورد استخوان بندی(framework) و طرح بندی (layout) خواهد بود.بر روی چگونگی ساخت یک هدر و عنوان زیبا و جذاب تمرکز خواهیم کرد.
امیدوارم از این بخش لذت برده باشید

 

[Webber]

شروع Css و Xhtml

سلام دوستان
باید ببخشید چون من قول داده بودم حداکثر هفته ای یه مبحث جدید بذارم ولی نشد از امروز سعی می کنم این طوری بشه.
این قدم 3 است که برمی داریم.البته در منبع بحث سوم رو skip کردیم و به سراغ 4می رفتیم چون کلا زیاد به درد بخور نبود و من هم چیز زیادی ازش نفهمیدم!به جاش در آخر یه مبحث به درد بخور می ذاریم.البته من این ها را فقط برای خودم نمی ذارم و امیدوارم دوستانمون هم استفاده کنند.به هر حال میریم سراغ بخش سوم:
----------
امروز به سراغ بخش سوم مباحث آموزش CSS می رویم.بخش های قبلی در بالا در دسترس هستند.در این قدم ما بر روی تکه تکه(slicing) و قرار دادن بخش های مختلف در DIV متمرکز خواهیم شد.

حالا سوالی که به پاسخ آن نیاز داریم،این است که بخش های مختلف طراحی ما شامل چه بخش هایی می باشد؟تفاوت اجزای صفحه در چیست؟اگر شما یک طراح وب باشید،پاسخ برای شما راحتتر خواهد بود چرا که شما در مورد قدمی بعدی که تقسیم کردن در داخل Div های جداست( البته بدون جدول) فکر می کنید.با CSS و XHTML می نه تنها صفحات سبک ایجاد می کنیم بلکه صفحات ما بسیار انعطاف پذیرتر(flexible) و در دسترس تر(accessible) خواهند بود.

چگونه نواحی(areas) و اجزا(components) ی صفحه یا هر چیزی که شما اسمش رو می گزارید را تشخیص دهیم؟

1.چپ(the left)
2.محتویات(the content)
3.سرصفحه(the header)

ایجاد gifs و jpgs

ایــــنجا عناصر مختلفی وجود دارد که شما نیاز دارید آن ها را به صورت JPG یا GIF در آورید:

1. header
  2. bg_navbutton
  3. bg_navbutton_over
  4. bullet_extlink
  5. bullet_title

بسیار خوب،احتمالا شما فکر می کنید،"پس زمینه چه خواهد شد؟"شما درست فکر می کنید،اینجا لیست نشده است چون به کمی توضیح نیاز دارد.ما یک راه حل تر و تمیز و هوشمندانه (smart solution)می خواهیم تا اگر صفحه ی مرورگر بزرگتر شد،محتویات صفحه در مرکز قرار گیرند.شما باید پس زمینه ای مثل ایـــن ایجاد کنید.این 1600px عرض و 5px ارتفاع دارد.

پیاده سازی پس زمینه در صفحه با استفاده از CSS

این کدی است که ما بدان نیاز داریم تا تصویر پس زمینه را به صفحه اعمال کند،آن هم در مرکز:

body {
 background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
 background-attachment: fixed;
 }

پس زمینه ی ما،5px ارتفاع دارد که به صورت عمودی تکرار می شود(repeat-y) و تکرار از بالای(0) پنجره ی مرورگر به صورت افقی شروع می شود و طوری که مرکز تصویر در مرکز صفحه(50%) قرار گیرد.Background-attachment: fixed به این معنی است که تصویر پس زمینه به همراه پیمایش(scroll) محتویات صفحه،پیمایش نشود.ما از تگ body به عنوان انتخابگر(selector) استفاده کردیم(به این معنی که کد CSS ما بر روی محتویات این تگ اعمال می شود یعنی کل صفحه).
می توانید نتیجه را ایــــنجا مشاهده نمایید.

اضافه کردن اولین طرح بندی مان با استفاده ازDIV


حالا ما می خواهیم اولین طرح بندی را با استفاده از ظرف (DIV(Div container اضافه کنیم(البت با اجازه ی شما):سرصفحه ی ما،سمت چپ(قسمتی که منو قرار می گیرد) و بخش محتویات.
این CSS برای سر صفحه ی ماست:

#header {
 text-align: center;
 }

حالا ما از یک انتخابگر id برای ایجاد div محتوی header استفاده می کنیم.یک انتخابگر id همیشه فقط بر روی یک عنصر صفحه اعمال می شود.یک صفت(attribute) باید در داخل یک صفحه ی وب منحصر به فرد باشد(مثلا در داخل یک صفحه نمی شود دو تگ div،دارای یک id باشند).سرصفحه ی ما نیاز دارد که در مرکز قرار گیرد.به همین خاطر از text-align: center استفاده کردیم.این خط به کد ما در body اضافه می شود:

<div id="header"><img src="images/header.jpg"
 alt="My blog" width="692" height="90" /></div>

شما خواهید دید هنگامی که ما تصویر header را اضافه می کنیم،کاملا به بالای صفحه نمی چسبد و کمی فاصله دارد.
به خاطر همین ما "margin: 0" , "padding: 0" را به انتخابگر تگ body اضافه می کنیم:

body {
 background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
 background-attachment: fixed;
 margin: 0;
 padding: 0;
 }

نتیجه را می توانید ایـــنجا مشاهده کنید.
اگر با CSS آشنایی ندارید و کدها برای شما تازگی دارد ، ایـــــن مقدمه ی کامل برای CSS می تواند ،فهم خوبی نسبت به کد ها به شما بدهد.
---
می بخشید که کد ها به هم ریخته شده،به امید روزی که تمام سایت ها،با تمام مرورگرها سازگار شوند.
---
موفق باشید (;

 

[Webber]

Implementing our navigation on the left

عرض سلام و ادب خدمت همه ی دوستان
خوشحالم که اینبار تونستم به قولم عمل کنم.بخش چهارم این سری مقالات آموزش طراحی قالب بر پایه ی CSS تقدیم شما:

-------

در بخش قبلی(در بالا) یک کد CSS اولیه را تکمیل کردیم.در این بخش از مباحث خواهیم دید که چگونه منوی ناوبری(navigation) را در سمت چپ قرار می دهیم .

هنگام ایجاد صفحات وب،ما همیشه می دانیم که باید صفحات در دسترس و قابل قبولی ایجاد کنیم.در قدم قبلی کسی به ما تذکر داد که استفاده از عنصر h1 برای سرصفحه ی اصلی می تواند بهتر باشد چون این کد معنادار تر است و سایت ما را برای موتورهای جستجو و همچنین مردمی که مخالف CSS هستند،در دسترس تر(accessible) می سازد.بدون شک این برای چشم انداز،بیش از حد مهم است.به همین خاطر ما کد خود را برای این راه،تغییر دادیم.

تکنیک جایگزینی تصویر

صفحه ی وب میزان شده

این تکنیک در واقع،تکنیک جایگزینی تصویر(image replacement technique) نامیده می شود.در این روش ما از متن به جای تصویر واقعی در کد HTML خود استفاده می کنیم.تصویر پس زمینه ("(background: url(images/header.jpg") در مرورگرهایی که CSS را پشتیبانی می کنند،نمایش داده خواهد شد و متن پنهان خواهد بود(text-indent: -9999px").چون که کد CSS ما،متن را بیرون از فضای قابل رویت قرار می دهد.اما در عوض در مرورگرهای قدیمی یا در صفحه خوان ها(screen readers که مردم نابینا استفاده می کنند) شما خواهید توانست متن سرصفحه را مشاهده کنید.از این راه ما می توانید کد و سایت خود را بسیار بیشتر در دسترس کنیم.

h1 {
width: 692px;
height: 90px;
text-indent: -9999px;
background: url(images/header.jpg);
margin: 0;
padding: 0;
}

عرض(width) و ارتفاع(height) برای تعیین فضا برای عکس پس زمینه ی ما واجب هستند(احتمالا همانطور که می دانید دادن پس زمینه به یک تگ مثلا div ،تاثیری در تغییر اندازه آن تگ ندارد،بر عکس قرار دادن مستقیم عکس با Img) .خصوصیت های "padding:0" و "margin:0" مورد نیاز ما هستند برای اینکه مطمئن شویم تصویر ما به صورت مطلوب و دلپذیر در بالای صفحه قرار می گیرد.به علاوه،من "text-align: center" را به انتخابگر تگ body منتقل کردم،چون محتویات صفحه ی ما باید در وسط صفحه قرار گیرند.به هر حال،محتویاتی که در داخل container قرار می گیرند نباید در مرکز موقعیت دهی شوند بنابراین ما "text-align: left" را اینجا اضافه می کنیم.ظرف (container) ما "margin: 0px auto" دارد که این هم باعث خواهد شد در بالا ترین(0px) نقطه ظاهر شود و در مرکز(auto).

راهنمایی:ترتیب مقادیر خصوصیت margin
margin: top right bottom left
-----
راهنمایی:چه موقع از انتخابگر id و چه موقع از انتخابگر کلاس و چه موقع از انتخابگر مفهومی استفاده کنیم؟
*اگر بخواهیم یک سبک(قطعه کد CSS) را به دو یا بیشتر تگ اختصاص دهیم،باید از انتخابگر کلاس استفاده کنیم.
*اگر بخواهیم یک سبک را به تعدادی تگ یکسان اختصاص دهیم،به گونه ای که تمام آن ها تحت تاثیر قرار گیرند.مثلا تمام لینک های داخل یک div. از این نوع انتخابگر استفاده می کنیم.(مفهومی)
*اگر بخواهیم یک سبک را به یک تگ خاص در صفحه اختصاص دهیم،از این نوع انتخابگر استفاده می کنیم.چون صفت id را نمی توان برای بیش از یک تگ بکار برد و منحصر به فرد است.

تکمیل کردن بخش ناوبری(Implementing the navigation)

برای قرار دادن دکمه های بخش ناوبری(که هدایت بازدید کننده در سایت را بر عهده دارند) در سمت چپ،ابتدا یک ظرف با id برای نگهداری محتویات در چپ ایجاد می کنیم:

#left {
width: 178px;
}

عجالتا تنها چیزی که ما برای تعریف نیاز داریم عرض آن هست.در داخل این نگهدارنده ی چپ(left container) ما یک div با برای نگهداری منوی ناوبری داریم که چون در صفحه فقط یک منوی ناوبری وجود دارد از انتخابگر id استفاده و آن را navcontainer نامیده ایم.بهترین راه برای ایجاد یک منوی ناوبری بوسیله ی CSS،استفاده از لیست های HTML و ایجاد سبک های CSS برای تغییر ساختار آن ها است.همچنین از "#" به عنوان لینک های مصنوعی استفاده شده است.

<div id="navcontainer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Photo roll</a></li>
</ul>
</div>

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

#navcontainer {
width: 178px;
}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
text-indent: 20px;
letter-spacing: 1px;
border-bottom: 1px solid #fff;
}

بخش اول از کد،عرض نگهدارنده ی منوی ناوبری را مشخص می کند.بخش دوم،تگ ul را در داخل navcontainer برای ما معین می کند."margin:0" و "padding:0" ما را مطمئن می سازد که هیچ فاصله ای بین و اطراف دکمه ها نخواهد بود و فاصله ها را از اطراف حذف می کند."list-style-type: none" هم گلوله های استاندارد لیست های HTML را حذف می کند.بعد ما خصوصیات متن منوی ناوبری را داریم و آخرین خط کد،یک خط سفید در پایین منوی ما ایجاد می کند تا پایان زیبایی به آن بدهیم.

#navcontainer a {
display: block;
width: 178px;
height: 22px;
}

این کد،تگ "a" یا تگ لینک را در داخل نگهدارنده ی "navcontainer" معین می کند که بر تمام دکمه های ناوبری ما تاثیر می گذارد(یک انتخابگر مفهومی).ابتدا ما "display: block" را داریم.Display تعیین می کند که چگونه یک عنصر نمایش یابد.در اینجا مقدار "block" تعیین شده است که برای تبدیل لینک های ما به بلاک های واقعی یا دکمه های واقعی،مورد نیاز هستند.پایین تر از ان نیز ما عرض و ارتفاع هر دکمه را تعیین کرده ایم.برای رسیدن به حالت Rollover(حالتی که با رفتن موس روی یک دکمه،رنگش تغییر کند) می توان عناصر داخل یک لیست را با استفاده از display: block به بلاک تبدیل کرد و با استفاده از کلاس کاذب a:hover رنگ یا تصویر پس زمینه ی دکمه را عوض کرد.کدی که به نظر می آید این گونه است:

#navcontainer a:link, #navcontainer a:visited {
background: url(images/bg_navbutton.gif);
color: #5C604D;
text-decoration: none;
}

#navcontainer a:hover {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}

color رنگ متن دکمه را تعیین می کند و "text-decoration: none" خط پیش فرضی که زیر لینک ها قرار می گیرد،پاک می کند.

همیشه لازم است که شما ناوبری خود را تمیز و ساده ایجاد کنید.برای همین یک کد اضافی اضافه می کنیم تا دکمه ای را که لینک صفحه ی فعلی را دارد،متفاوت از بقیه نمایش یابد تا کاربر بداند در کدام صفحه است.من آن را "current" نامیدم و کد CSS آن به این صورت است:

#navcontainer li a#current {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}

این سبک،تگ لینکی را که در دارای آی دی "current" است و در داخل تگ li قرار دارد را مشخص می کند.خصوصیات و مقادیر همانی هستند که برای حالت hover استفاده کردیم.حالا تنها چیزی که نیاز داریم اضافه کردن آی دی current به کد HTML مان است:

<div id="navcontainer">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Photo roll</a></li>
</ul>
</div>

مشاهده ی نتیجه ی نهایی

تعداد زیادی از آموزش های منوی ناوبری CSS و مقالات در این باره را می توانید در آدرس های زیر پیدا کنید:
1.یک لیست
2.لیست های تودرتو
3.لیست های بر پایه ی CSS

-------
امیدوارم استفاده ی لازم را بکنید ...

موفق باشید

 

[farik]

با سلام...متشكرم..ادامه بديد مفيده..كمك خواستين در خدمت هستيم....

 

[Webber]

َAdd the content part of our webpage

با سلام خدمت همه ی دوستان عزیز
اینبار با بخش 5م در خدمت شما هستیم.از جناب farik عزیز هم تشکر می کنم.شما و دیگر دوستان لطف دارید، اگر مشکلی پیش آمد حتما مزاحم شما و سایر اساتید اینجا خواهیم شد حالا به همراه شما می ریم سراغ ترجمه ی این بخش(5م):

-------
در این بخش ما می خواهیم بخش محتویات را به صفحه ی خود اضافه کنیم.هفته ی بعد(همون بخش بعد) بخش لینک های مورد علاقه(favorite links) را زیر منوی ناویری اضافه خواهیم کرد،همچنین چگونگی ایجاد یک پایین صفحه(footer) را توضیح خواهم داد.

ابتدا ما یک انتخابگر id جدید را به سبک های خود اضافه می کنیم و به آن عرض 514px می دهیم(عرض بخش ناوبری-عرض صفحه ی اصلی | 692px - 178px):

#content {
width: 514px;
float: left;
}

برای آنکه منوی ناوبری ما در سمت چپ شناور باشد،ما نیاز داریم که "float: left" را به آی دی "left" مان اضافه کنیم.همچنین برای آنکه نگهدارنده ی "content" در داخل نگهدارنده ی اصلی و در سمت چپ شناور باشد،"float: left" را به انتخابگر آن نیز اضافه می کنیم:

#left {
width: 178px;
float: left;
}

و این را به کد XHTML خود اضافه می کنیم:

<div id="content">this is the right</div>

اگر شما به مطالب بالا پی نبرده اید،من مطمئن هستم که این منابع برای شما بسیار کمک کننده خواهند بود:

اطلاعات بیشتر در مورد مقدمات Float
آموزش Float

حالا،محتویات ما،به منوی ناوبری در سمت چپ چسبیده است.البته ما کمی فضا بین این دو کم داریم بنابراین ما تعدادی "padding" به سبک نگهدارنده ی "content" اضافه می کنیم:

#content {
width: 479px;
float: left;
padding-top: 15px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
}

یا می توانیم این کد را کوتاه تر کنیم:

#content {
width: 479px;
float: left;
padding: 15px 0 10px 20px;
}

راهنمایی:
padding:فاصله ی بین لبه ی یک نگهدارنده با محتویات داخل خود.
margin :فاصله ی بین لبه ی یک نگهدارنده با اطراف خود.

مقدار اول،padding بالا را تعیین می کند،دومی برای راست،سومی برای پایین و چهارمی برای چپ.اگر ما padding را اضافه کنیم،نیاز خواهیم داشت که عرض نگهدارنده ی خود را تغییر دهیم.چون عرض واقعی آن با 20px padding افزایش یافته است.(20px left, 0 for the right).ما نیاز داریم که این را به 494px تغییر دهیم.اما چون ما در سمت راست مقدار کمی فاصله می خواهیم (تا متن به لبه ی سمت را نچسبد) ما آن را 15px کم کردیم و به جایش از 479px استفاده می کنیم.

شما اگر ممکن است با من در مورد بخش گذشته بحث کنید و بگویید که "هی،شما چرا عرض نگهدارنده ی "content" را همان "494px" نکردید و از "padding-right: 15px" استفاده کنید؟آها،به موضوع جالبی اشاره کردید.من در ابتدا امتحان کردم و دیدم با این تغییرات ،صفحه ما در Safari,Firefox و Mozilla به درستی نمایش یافت ،ولی در InternetExplorer (و Opera) اینطور نبود.تمام محتویات به زیر منوی ناوبری می پرید(در زیر نگهدارنده ی آی دی "left").ظاهرا فضای کافی وجود نداشت تا آن را در سمت راست ثابت کنند.در حقیقت این تنها توضیحی است که من برای این اشکال دارم.با استفاده از یک حیله ی کوچک،هر چیزی را در هر مرورگری می توان به صورت کامل نمایش داد.

اضافه کردن عنوان

برای ایجاد عنوان مان،یک تگ header به کد XHTML اضافه می کنیم:

<h2>This is the title</h2>

حالا ما می خواهیم یک سبک به این تگ برای تعیین نمای ظاهری اش اضافه کنیم

#content h2 {
font: normal 18px Georgia, Times New Roman, Times, serif;
color: #80866A;
background: transparent url(images/bullet_title.gif) no-repeat;
width: 454px;
padding: 0 0 0 30px;
margin: 0;
}

ما از "content #h2" استفاده کردیم و این به این معنی است که سبک CSS ما بر روی تگ h2 تاثیر خواهد کرد که در داخل نگهدارنده ی content قرار دارد و در واقع بر روی تمام تگ های h2 ای که در داخل این نگهدارنده هستند.ما همچنین می توانیم از "h2" بدون اولویت id استفاده کنیم که این باعث می شود این سبک بر روی تمام تگ های h2 داخل صفحه اثر کند.

<div id="content">all h2 tags here will have this style</div>

اولین خط از CSS ما سبکی را برای خاصیت :font تنظیم می کند.font-weight(normal),font-size(18px) و font-family.دوباره،درست شبیه padding،این هم نمونه ی کوتاه شده است.این کد تمام مقادیر مختلف font را در یک سطر ست می کند.گرچه شما می توانید هر یک را در سطر جداگانه بنویسید.بعد ما بخش رنگ متن را داریم،سوم،مقادیری برای خاصیت background هستند.دوباره ما از روش خلاصه نویسی استفاده کرده ایم.ما مقادیر را به این صورت تعریف کرده ایم.background-color(transparent),background-image(url to the image) و background-repeat (no-repeat).

اضافه کردن متن

این سبک متعلق به متن محتویات است:

.text {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #5B604C;
margin-bottom: 10px;
}

حالا ما از یک کلاس استفاده کردیم(نقطه و جلوش نام کلاس) و بعد از این به صورت تکراری از این سبک در صفحه استفاده خواهیم کرد.خط اول سبک برای نوع قلم(font) را ایجاد می کند که با font-size (11px) و line-height (18px)شروع می شود و به font-family منتهی می شود.در دومین خط رنگ متن را مشخص می کنیم.در آخرین خط هم فاصله ی کمی بین پاراگراف ها ایجاد می کنیم با 10px.

در کد XHTML مان ما یک تگ پاراگراف در زیر تگ h2 اضافه می کنیم که متن ما را نگه می دارد.ما کلاس "text" را بر آن اعمال می کنیم.

<p class="text">Here comes the text</p>

اضافه کردن تصویر

این سبک برای تصویر است که آن را در سمت راست تراز می کند:

.imageright {
float: right;
padding: 7px;
background-color: #ffffff;
border: 1px solid #bac1a3;
}

دوباره ما از کلاس ها استفاده کردیم چون باید بتوانیم همزمان این سبک را به چندین عنصر در صفحه ی وب اعمال کنیم.تصویر ما در داخل div نگهدارنده ی متن و در راست شناور است به دلیل استفاده از "float:right".بعد ما اطراف عکس یک حاشیه به اندازه ی 7px ایجاد می کنیم البته با پس زمینه ی سفید.با این کار یک ناحیه سفید رنگ به اندازه ی 7px اطراف عکس ایجاد می شود که عکس ما را مرتب و تمیزتر می کند.بعد،یک خط مرزی یکپارچه(solid) و با رنگ مشخص شده اضافه می کنیم.آخرین خط نیز دوباره خاصیت هایی هستند که در یک خط و به صورت کوتاه نوشته شده اند.border-width (1px), border-style (solid) وborder-color (#bac1a3).شما می توانید یک کلاس دیگر اضافه کنید برای تصاویر تراز شده در سمت چپ و آن را "imageleft." بنامید و از خاصیت ها و مقادیر یکسان imageright به جز بخش شناور(floating) آن استفاده کنید.کافی است "float: right" را با "float: left" عوض کنید.

نتیجه ی نهایی را ببینید

-------------------
تا بخشهای بعدی فعلا خدافظ شما

موفق باشید

 

[Webber]

اضافه کردن پایین صفحه (Footer)

با عرض سلام

این هم ترجمه ی قسمت ششم مقالات البته کمی خلاصه شده.
------
قبل از اینکه قسمت ششم را آغاز کنیم،میخواستم اشتباه کوچک رخ داده خودم را در بخش پیش تصحیح کنم.هنگامی که بلاک هایی از متن را اضافه می کنیم،به شما گفتیم اینها را بین تگ های div قرار دهید ولی باید بلاک های متن بین پاراگراف ها قرار گیرند.از این راه اگر CSS هم غیر فعال باشد،همه چیز به درستی نمایش خواهد یافت.از این رو به شما اجازه می دهد از margin های بالا(top) و پایین(bottom) جهت تنظیم فاصله ی عمودی(vertical) بین پاراگراف ها استفاده ببرید.از این طریق همچنین ما به تگ های شکننده ی خط "<br />" در هیچ کجای محتویات نیاز نداریم.

خوب،حالا بخش ششم را آغاز می کنیم.می می خواهیم یک پایین صفحه(footer) ایجاد کنیم که به پایین پنجره ی مرورگر بچسبد.من تصمیم گرفتم در این بخش لینک های مورد علاقه را اضافه نکنم چون این بحث خیلی زیاد است.

در ابتدا مستحضر باشید که برای ایجاد یک پایین صفحه که به پایین مرورگر بچسبد، در CSS می توان کارهای مختلفی در مقایسه با جدول انجام داد.اطلاعات بیشتر را در مورد موقعیت دهی عمودی و اضافه کردن پایین صفحه می توانید در این مقاله ی بسیار جالب توجه در یک لیست جدا از بابی وندر اسلویس پیدا کنید.عملا به شما توصیه می کنم قبل از ادامه ی کار،این مقاله را بخوانید چون این مقاله جامع است و بسیار شفاف همه چیز را توضیح می دهد و من در حقیقت فکر نمی کنم بتوانم بهتر توضیح دهم.بعد از خواندن کامل این مقاله شما خواهید دانست که ما برای این کار به دو نگهدارنده ی اصلی نیاز داریم.یک نگهدارنده برای نگهداری تمام محتویات و یک نگهدارنده هم برای پایین صفحه.نگهدارنده ای که تمام محتویات ما را نگهداری می کند(لطف می کند به ما) دارای آی دی "container#" است.این نخستین div کد ماست(بعد از تگ body) که قبل از تگ شروع کننده ی پایین صفحه،بسته خواهد شد.به عبارت دیگر div نگهدارنده ی پایین صفحه باید پایین div نگهدارنده ی محتویات ما باشد:

<html>
...
<body>
<div id="container"> ... </div>
<div id="footer"> ... </div>
</body>
</html>

این کد CSSی است که ما برای پایین صفحه به سبک های قبلی خود اضافه می کنیم:

#footer {
margin: 0px auto;
position: relative;
background-color: #717F51;
border-top: 9px solid #F7F7F6;
width: 692px;
padding: 5px 0;
clear: both;
}

ما یک پایین صفحه با پس زمینه ی سبز تیره اضافه کردیم و یک حاشیه ی 9px به عنوان قاب در بالا به آن بخشیدیم.ما برای آن عرض تعریف کردیم و "clear: both" را اضافه کردیم که این باعث می شود هیچ عنصر شناوری اجازه ی قرارگیری در سمت چپ و راست پایین صفحه را نداشته باشد و با استفاده از "margin: 0px auto"،پایین صفحه ی خود را در وسط قرار دادیم.

نکته:
در بعضی مرورگرها(مثل Firefox) برای قرار دادن یک نگهدارنده مثل div ها در مرکز،علاوه بر دادن خاصیت text-align به همراه مقدار center به عنصر والد(مثلا body)می بایست خاصیت های margin-left و margin-right را نیز با مقدار auto تنظیم کرد تا این نگهدارنده کاملا در مرکز(والد خود) موقعیت دهی شود.

برای ایجاد مقداری فضا بین متن داخل پایین صفحه و لبه هایش از "padding: 5px 0" استفاده کردیم که در بالا و پایین 5px فضا ایجاد می کند.موقعیت پایین صفحه نیز نسبی است.توضیحات بیشتر را در باره ی موقعیت دهی عناصر صفحه می توانید در سایت W3SCHOOLS پیدا کنید.

بعد ما سبک های مربوط به متن و لینک های متنی را اضافه می کنیم:

#footer h2 {
maring: 0;
text-align: center;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #D3D8C4;
}
#footer h2 a:visited, #footer h2 a:link {
color: #D3D8C4;
text-decoration: none;
border-bottom: 1px dotted #D3D8C4;
}
#footer h2 a:hover {
color: #F7F7F6;
text-decoration: none;
border-bottom: none;
background-color: #A5003B;
}

در ضمن ما از تگ h2 برای متن خودمان استفاده می کنیم:

<div id="footer"><h2>....</h2></div>

بعد ما کد جاوا اسکریپت پیشنهادی بابی وندر اسلویس را اضافه می کنیم.این کد ما را مطمئن می کند که پایین صفحه ی ما در مرورگر Safari به پایین مرورگر خواهد چسبید.

نتیجه ی نهایی را می توانید اینجا مشاهده نمایید

در بخش بعدی ما لینک های مورد علاقه مان را در زیر منوی ناوبری چپ اضافه می کنیم.

------
موفق باشید

 

[Webber]

اضافه کردن لینک های مورد علاقه

سلام
دوستان ابر و باد و سیاه چاله و خورشید + حافظه ی من همه در کارند - تا بازم بد قولی کنم و شرمندتون بشم
به هر حال بازم معذرت می خوام به خاطر بدقولی هام.بعضی چیز ها دست من نیست...
اگه اجازه بدین،بریم سراغ آخرین تکه از پازل مقالات
-------
ما می خواهیم در بخش لینک های مورد علاقه (favored links) یا لینک های ورودی (refer links) به وبلاگ مون رو اضافه کنیم.در همین حال نیز سبک هایمان را در یک فایل جدا قرار دهیم و به صفحه ی وب لینک دهیم.

اضافه کردن کد XHTML

ابتدا ما می خواهیم کد xhtml را برای لینک ها اضافه کنیم:

<div id="favlinks">
<h2>My Favorite Sites</h2>
<ul class="extlinks">
<li><a href="http://stopdesign.com/">Stopdesign</a></li>
<li><a href="http://www.simplebits.com/">SimpleBits</a></li>
<li><a href="http://www.mezzoblue.com/" >Mezzoblue</a></li>
<li><a href="http://www.zeldman.com/">Zeldman</a></li>
</ul>
</div>

ابتدا ما تمام لینک هایمان را در یک نگهدارنده ی div قرار دادیم و برای div یک id با نام "favlinks" در نظر گرفتیم.این id برای اعمال خصوصیاتی مانند width,margin و padding به جعبه ی نگهدارنده ی لینک های ما لازم است.سپس ما عنوان را داریم که بین تگ های هدر <h2> قرار گرفته است.برای لینک هایمان از انتخابگر کلاس استفاده کردیم.چون به این طریق می توانیم به صورت تکراری از آن در صفحه استفاده کنیم.بنابراین شما می توانید یک لیست مشابه از لینک ها را اضافه نمایید.

کد CSS

ابتدا سبک های لازم برای "favlinks" را تعریف می کنیم:

#favlinks {
width: 163px;
padding-left: 15px;
margin-top: 10px;
}

همانطور که می بینید عرض کادر را تعیین کردیم سپس برای اینکه کادر به سمت چپ نچسبد از padding-left استفاده کردیم.همچنین مقداری فضای اضافی در بالا به وسیله ی margin-top ایجاد کردیم.عرض نگهدارنده ی ما مثل منوی ناوبری 178px نیست.عرض اش 163px است ولی چون ما padding-left را اضافه کرده ایم باید مقدار آن(15px) را نیز به 163px اضافه کنیم که می شود 178px مانند منوی ناوبری.این روش Box Model نامیده می شود که در ایــــنجا به خوبی توسط جان هیکز ارائه شده است.

#favlinks h2 {
font: normal 16px Georgia, Times New Roman, Times, serif;
color: #5C604D;
margin: 0 0 10px 0;
padding: 0;
}

در مرحله ی بعد سبک های مربوط به تگ هدر ما وجود دارد.جایی که عنوان قرار دارد.دو خط اول باید واضح باشد،سبک رنگ و فونت.پایین تر،padding و margin.ما فقط یک حاشیه به اندازه ی 10px در پایین اضافه کردیم.padding و margin به این دلیل برای تگ header نیاز هستند که ما نمی خواهیم فضای زیادی اطراف header یا بین آن و لینک ها باشد.فقط مقداری فضا در پایین نیاز است که فکر کنم 10px کافی باشد.نظر شما چیست؟

#favlinks ul {
margin: 0;
padding: 0;
list-style-type: none;
}

اول ما اطمینان حاصل می کنیم که گلوله های استاندارد لیست مان مخفی شده باشند.بعد margin و padding را صفر می کنیم.

ul.extlinks li {
background: url(images/bullet_extlink.gif) no-repeat 0 3px;
font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
padding-left: 12px;
}

ما از یک کلاس بنام "extlinks" برای تعریف لینک هایمان استفاده کردیم.همین طور از "ul.extlinks li" استفاده کردیم که به این معنی است:سبک ما را به تگ li اعمال کن که در داخل تگ ul باشد(تگ والد li).البته تگ والد ul ای که دارای کلاس "extlinks" نیز باشد.ابتدا ما یک پس زمینه اضافه کردیم که تکرار نمی شود.از این پس زمینه به جای دایره های سیاه پیش فرض لیست استفاده می کنیم.سپس پس زمینه را 3px از بالا(موقعیت y) و 0px از چپ(موقعیت x) موقعیت دهی کردیم تا مطمئن شویم بالت های جایگزین ما بی عیب تنظیم شده اند.سپس همانطور که می بینید علاوه بر خصوصیت "font" از "padding-left" هم استفاده کردیم تا ما را مطمئن کند متن لینک روی پس زمینه یا همان بالت مان قرار نخواهد گرفت.

.extlinks a:link {
color: #A5003B;
text-decoration: none;
border-bottom: 1px dotted #A5003B;
}

.extlinks a:visited {
color: #6F2D47;
text-decoration: none;
border-bottom: 1px dotted #959E79;
}

.extlinks a:hover {
background-color: #C3C9B1;
color: #A5003B;
text-decoration: none;
border-bottom: 1px solid #A5003B;
}

و در آخر نهایتاً رنگها و دیگر خصوصیات مربوط به لینک ها را تعریف کردیم.از یک حاشیه ی پایینی(bottom border) به اندازه ی 1px استفاده کردیم که وقتی موس را روی لینک حرکت دهیم،به صورت یکپارچه در می آید.برای اینکه مطمئن شویم دو حاشیه در زیر لینک نخواهیم داشت باید زیر خط استاندارد لینک ها را مخفی کنیم که برای این کار از "text-decoration: none" استفاده کردیم.اضافه کردن سبک های مربوط به فونت مهم نیست چون قبلا برای سبک تگ والد یعنی تگ li این کار انجام شده است.همچنین یک رنگ پس زمینه برای حالتی که موس روی لینک ها برود قرار داده ایم و رنگ پس زمینه ی لینک هایی که استفاده شده اند(visited links) را کمی تخفیف دادیم و رنگ حاشیه پایین شان را هم رنگ ظریفی کردیم یعنی کمی نمایان است.از این طریق مردم خواهند دانست که کدام لینک را قبلا کلیک کرده اند و دیده اند.هنگامی که سبک ها را اضافه می کنید،لطفا مطمئن شوید که ترتیب صحیح را رعایت کرده باشد.یعنی اول a:link -دوم a:visited -سوم a:hover.در اینجا یک ترفند وجود دارد که من آن را با خواندن کتاب راه حل های استاندارد وب(The Web Standards Solutions book) نوشته ی Dan Cederholm(ناشر Simple Bits)آموخته ام.برای اینکه مطمئن شوید ترتیب صحیح را فراموش نمی کنید:LoVe /HAte یعنی (L from links, V from visited,...)

نتیجه ی نهایی اینجاست(بدون فایل css خارجی)

ایجاد یک شیوه نامه ی خارجی

حالا که طراحی قالب را تمام کرده ایم و من می شنوم که شما فریاد می زنید "هوررا !".شما دارید اخطار می دهید که من همیشه سبک هایم را داخل صفحه ی وب وارد می کنم.اما بیشتر شما می دانید که این راه درستی برای این کار نیست.شما باید سبک های خود را در یک شیوه نامه ی جدا قرار دهید سپس آن را به سند خود لینک دهید.بنابراین من تمام سبک هایی که تا به حال نوشته ایم را copy کردم و در یک سند جدید paste کردم و آن را با نام "styles.css" ذخیره کردم.

لینک دادن شیوه نامه

<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />

این خط کد html را به جای سبک های قدیمی جایگزین می کنیم.چون این شیوه نامه در صفحه نمایش کامپیوتر نمایش داده خواهد شد ما صفت "media=screen" را اضافه کردیم.شما می توانستید یک شیوه نامه ی دیگر اضافه کنید و صفت media ی آن را برابر با "print" کنید.این شیوه نامه زمانی اعمال خواهد شد که مردم صفحه شما را چاپ کنند.این زمانی سودمند است که شما یک صفحه با گرافیک سنگین و طراحی پیچیده داشته باشید در این حالت شما نمی توانید مطمئن شوید که مردم روی کاغذ همان تصویر روی مانیتور را خواهند دید.می توانید؟مقادیر دیگری نیز برای صفت media در دسترس هستند که می توانید برای اطلاعات بیشتر به اینجــا مراجعه نمایید.

و در آخر نتیجه ی نهایی با شیوه نامه ی خارجی
------
حالا سری مقالات ما تمام شد.اگر دوستان با دانش کسب کرده از اینجا صفحه ای ایجاد کرده اند می توانند لینک را اینجا بگذارند تا استفاده کنیم.اگر مشکلی در ترجمه و معنی متون بود باید ببخشید چون زبان بنده زیاد خوب نیست و اینجا جا دارد از زحمات دوست توانا و دلسوز که لحظه لحظه با من همراه بود و از هیچ کمکی دریغ نکرد تشکر کنم یعنی بابیلون 6.از دوستانی هم که با ما همراه بودند تشکر می کنم.امیدوارم بتوانیم از آموزش های اساتید عزیز اینجا که می دانم(؟)در آینده قرار خواهند داد نیز بهره مند شویم.

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

-----------
منبع:http://veerle.duoh.com/index.php/blog/comments/designing_a_css_based_template_part_i
-----------

موفق باشید

 

[Webber]

موفق باشید

 

[Beh2ouz]

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

 

[L-B]

خيلي عاليه !

فقط ميتوني اينارو به صورت فايل pdf بزاري ! واسه دانلود ميخوام

ممنون !

 

[Webber]

سلام دوست عزیز
لطفا کد صفحه ای رو که ساختید،اینجا قرار بدید،ببینیم مشکل کجاست

خيلي عاليه !

فقط ميتوني اينارو به صورت فايل pdf بزاري ! واسه دانلود ميخوام

ممنون !

پیشنهاد خوبیه.سعی می کنم این کار رو بکنم
ممنون

 

[Webber]

سلام دوستان
می تونید فایل pdf این آموزش رو از اینجا دانلود کنید.

موفق باشید

 

[Webber]

سلام
اگر لینک قبلی مشکل داشت،می توانید از آدرس زیر دانلود کنید

 

[L-B]

ممنون بسیار ....