X
تبلیغات
در شهر

بیست و پنج سالگی خوش اومدی

1388/02/08 5:25 PM


امروز هشتم اردیبهشت هزارو سیصدو هشتادو هشتِ ، و بیست و پنج سال از روزی که من متولد شدم میگذره !

احساس میکنم امسال با سالهای گذشته فرق داره. این حسو هیچ وقت نداشتم اما حالا دارم

هر بار که به این روز میرسم به این فکر میکنم که دارم از روزایی که دوستشون دارم و دیگه بر نمیگردن دور میشم ولی سعی میکنم روزهایی رو برای خودم بسازم تا آینده رو هم به اندازه گذشته دوست داشته باشم


بیست و پنج سالگیِ من خوش اومدی


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

پی نوشت:

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

 

mohandes

Donbaleh

Balatarin

اگر میخواهید همیشه مطالب این وبلاگ را دنبال کنید در خوراک فید ( Rss Feed ) این وبلاگ مشترک شوید.
خوراک فید Rss Feed

چرا نیستم؟

1388/02/07 5:52 PM

سلام

من چند تا پست به خواننده های خوب این بلاگ بدهکارم

اول تبریک سال نو دوم ادامه آموزشهای CSS که با استقبال خیلی خیلی خوبی روبرو شد

دلیل این کم نوشتن این بود: http://www.shaghaiegh.com  !!

بله من دامین اختصاصی خودم رو ثبت کردم و انتظار داشتم هر چه سریعتر وبلاگ رو روی هاست و دامنه شخصیه خودم ادامه بدم ولی به دلیل چند مشکل کوچک هنوز این اتفاق نیفتاده و من هم میل چندانی به نوشتن در این وبلاگ ندارم

ولی به شما و خودم قول میدم که تا 15 روز آینده همه چیز درست بشه و من دلایل ننوشتنم رو به طور کامل در بلاگ جدید براتون توضیح بدم در ضمن سال نو مبارک .

 

mohandes

Donbaleh

Balatarin

اگر میخواهید همیشه مطالب این وبلاگ را دنبال کنید در خوراک فید ( Rss Feed ) این وبلاگ مشترک شوید.
خوراک فید Rss Feed

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

1387/11/16 4:00 PM

در ادامه آموزش طراحی صفحات وب استاندارد به کمک 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 (قسمت اول)

 

mohandes

Donbaleh

Balatarin

اگر میخواهید همیشه مطالب این وبلاگ را دنبال کنید در خوراک فید ( Rss Feed ) این وبلاگ مشترک شوید.
خوراک فید Rss Feed