آموزش طراحی قالب وبسایت و وبلاگ به وسیله 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;
}

کدهای جدیدی که در این قسمت مشاهده میکنید عبارت است از: background و padding و height و float .

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

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

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

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

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

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

برای تمرین، اندازه عرض ستونها را تغییر دهید درست کردن قالبهایی به شکل زیر را تمرین کنید تغییرات در کدهای اصلی را در قسمت بعد آموزش میدهم.

الگوی شماره یک:

عرض wrapper = چهارصد پیکسل (400px)

عرض header = سیصدو هفتادو هشت پیکسل (378px)

عرض leftcolumn = دویست و چهل و یک پیکسل (241px)

عرض rightcolumn = صدو ده پیکسل (110px)

عرض footer = سیصدو هفتادو هشت پیکسل (378px)

الگوی شماره دو:

عرض wrapper = هشتصد پیکسل (800px)

عرض header = هفتصد و هفتادو هشت پیکسل (778px)

عرض leftcolumn = دویست و یک پیکسل (201px)

عرض rightcolumn = پانصد و پنجاه پیکسل (550px)

عرض footer = هفتصد و هفتاد و هشت پیکسل (778px)

الگوی شماره سه:

عرض wrapper = هفتصد و پنجاه پیکسل (750px)

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

الگوی شماره چهار:

عرض wrapper = ششصد پیکسل (600px)

عرض ستون چپ و راست برابر باشد.

-------------------------------------------------------------------------------------------------------------------------------------------------------------

امتیاز این مطلب در سایت مهندس:

آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS - قوانین و مفاهیم کلی در CSS (قسمت دوم)

آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS (قسمت اول)

آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS - (قسمت دوم)

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

<< تصویر شماره یک >>

آموزش طراحی css

 

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

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

<< تصویر شماره دو >>

آموزش css

 

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

نکته مهم دیگری که در طراحی css وجود دارد قانون ظرف و مظروف است. این نکته بدین معناست که هر ستون می تواند ستونهای دیگری را در خود جای دهد مثلا در تصویر شماره یک، ستوهای قابل مشاهده (header - footer - side bar ) در یک ستون کلی تر قرار گرفته اند که به آنها نظم می دهد و باعث می شود تا ترتیب شان را از دست ندهند. برای توضیح این مسئله در نمونه های دیگر میتوانید در تصویر شماره یک به ساید بار سمت چپ توجه کنید این ساید بار یا ستون جانبی مکانی است برای قرار دادن اطلات مازاد یک وبلاگ یا وبسایت، اطلاعاتی مانند لینک دوستان، موضوعات، آرشیو و ... یعنی شما باید هر کدام از این قسمتها را به طور مجزا از یکدیگر ولی به صورت منظم و زیر هم در side bar قرار دهید. برای این کار باید ستونهای کوچکتری را در ساید بار طراحی کنید که هر کدام یکی از قسمتهای اطلاعات مازاد وبگاه را در خود جای دهند. در نتیجه ساید بار سمت چب ظرفی برای نگهداری محتویاتش محسوب می شود.

چند نکته در مورد کد نویسی در XHTML :

اگر به html عادت کرده باشید می دانید که ننوشتن برخی از کدها (هر چند مهم) به شکل ظاهری web page مورد نظر لطمه ای وارد نمی کند ولی رعایت روش صحیح کد نویسی در صفحات xhtml اجباریست. مثلا میتوانید قسمت head را از یک صفحه html حذف کنید بدون اینکه در نمایش آن دچار مشکل شوید ولی xhtml اینگونه نیست.

بستن تگها در xhtml اجباریست یعنی شما مجبورید کدهای مختلف را با حالت < > و با < /> ببندید حتی تگهای تکی مانند <em> و <br> و موارد مشابه آنها نیز نیاز دارند تا به صورت <br /> ظاهر شوند. توجه کنید که بعد از کاراکتر ( / ) باید یک فاصله بگذارید و بعد کد مورد نظر را تایپ کنید.

رعایت نوشتن مقادیر خصیصه ها در میان کوتیشن ( " ) در xhtml بسیار مهم و ضروریست در صورتی که رعایت نکردن این مسئله در html مشکلات زیادی ایجاد نمیکند.

html به کوچک یا بزرگ بودن حروف عکس العملی نشان نمی دهد ولی در xhtml مجبورید همه المان ها، مقادیر و خصیصه های آنها را با حروف کوچک بنویسید.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS (قسمت سوم)

آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS (قسمت اول)

آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS (قسمت اول)

آموزش css

 

برای طراحی یک صفحه اینترنتی از دو نوع روش کد نویسی استفاده می شود:

* HTML

* XHTML

html چیست؟

html پایه و اساس هر صفحه اینترنتی است که از سه بخش کلی و اصلی <html> و <head> و <body> تشکیل شده است.

در این روش شما صفحه ای را در دست دارید که با نوشتن کدهای جدید و یا کاهش و افزایش کدهای پیشین میتوانید به قالب مورد نظرتان دست یابید.

xhtml چیست؟

xhtml نوع دیگر نوشتن کدهای یک صفحه اینترنتی ست با این تفاوت که برای نمایش خود به دستوراتی نیاز دارد که در قسمت head جای گرفته اند و یا در قالب یک فایل جداگانه با پسوند css انجام وظیفه میکنند. مثلا وقتی میخواهید برای قسمت پست یک وبلاگ نوع فونت، رنگ و سایز آن را تعیین کنید باید این دستور را در قسمت <style> در بخش <head> و یا در فایل css مربوط به آن صفحه اعمال کنید و لازم نیست مانند html قبل از هر متن از تگ (کد) <font> استفاده کنید.

توجه: استفاده از دستورات style به طور دلخواه طراح میتواند در یک فایل css. و یا در همان صفحه مورد نظر در قسمت head و به صورت کد <style> صورت بگیرد. در هر دو روش نتیجه یکسان خواهد بود.

css چیست؟

دستورات (style sheet) ی که نحوه نمایش یک صفحه XHTML را مشخص می کنند CSS نامیده میشوند و در صورتی که بخواهند در یک فایل جداگانه ایفای نقش کنند در فایلی با پسوند css. جای میگیرند.  به عبارت دیگر: xhtml ساختار اصلی صفحات وب را تعیین می کند و css شکل ظاهری آن را.

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

css مخفف کلمه Cascading Style Sheet و به معنی مجموعه طبقه بندی شده و یا مجموعه آبشاری است.

HTML بهتر است و یا XHTML ؟

یکی از اصلی ترین و مهمترین ویژگی های xhtml مطابقت آن با استانداردهای جهانی دسترسی سایت میباشد و به خاطر رعایت این استانداردها صفحاتی که بر اساس xhtml طراحی شده اند با مرورگرهای مختلف سازگارند. برای کسب اطلاعات بیشتر در مورد قوانین دسترسی، به این آدرس بروید: http://www.w3.org/wai

--------------------------------------------------------------------------------------------------

در این سری آموزشی شما می توانید طراحی قالبهای تک ستونه، دو ستونه، سه ستونه، چهار ستونه، ایجاد header و footer و همین طور طراحی انواع قالبهای سایت را طبق نیاز و سلیقه خودتان بیاموزید و به راحتی در این قالبها فارسی بنویسید. این قالبها قابل استفاده برای انواع سیستمهای وبلاگ و سایت از جمله: wordpress  ، movable type ، بلاگ اسکای ، بلاگفا و ... میباشند و فقط کافیست تا کدهای مورد نظرتان را در میان این کدها و در جایگاه مورد نظرتان قرار دهید. برای طراحی به یکی از نرم افزارهای ویرایش صفحات وب مانند FrontPage نیاز دارید و همینطور لازم است تا برای آزمایش صفحات ایجاد شده مرورگرهای intenet explorer و فایر فاکس را روی سیستم خود داشته باشید اگر مرورگر Opera هم داشته باشید بی شک طراحی مطمئن تر و کامل تری را خواهید داشت.

-------------------------------------------------------------------------------------------------------------------------------------------------------------

آموزش طراحی قالب وبسایت و وبلاگ به وسیله CSS - قوانین و مفاهیم کلی در CSS (قسمت دوم)