هاست لینوکس پرسرعت سی پنل

ساخت ساختار اصلی CSS با استفاده از سایت csscreator.com

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

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

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

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

ولی برای آنکه ساده تر کار خود را برای ماهر شدن در CSS ادامه دهید، می توانید از سایتی که در این نوشته معرفی می شود هم استفاده کنید و نکات آن را هم بیاموزید. سایت CssCreator.com عملاً برای یک قالب ساده با سی اس اس درست می کند که مبنای طرح صفحه وب خود را می توانید بر آن سوار کنید. کدی از CSS که در این سایت برای شما درست می شود از عبارت های ساده ای تشکیل شده است که وقتی آنها را کنار هم می گذاریم یک صفحه وب با ساختاری که ما می خواهیم درست می شود. از این رو برای اینکه بدانید یک صفحه وب چطور با سی اس اس سبک بندی می شود بهتر است کدهای آن را زیر و رو کنید و چگونگی کارکرد آنها را در آورید.

زمانی که به این سایت تشریف می برید با یک رابط کاربری ساده طراحی صفحات وب با CSS مواجه می شوید. در هر قسمت باید مشخصاتی را که شما مد نظر است برای آن تعیین کنید. مثلا در بالاترین بخش سمت چپ شما با Doctype: سرو کار دارید. در اینجا نوع سند خود را می توانید تعیین کنید. که بهترین نوع آن HTML 4.1 Transitional است که شما هم بهتر است از این نوع Doctype استفاده کنید. همچنین برای افرادی که قصد همراه بودن با فناوری های نو را دارند HTML 5 هم ارائه شده است.

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

طراحی استایل صفحه در CssGenerator.com

  1. در این بخش که اولین هم هست همانطور که گفتیم باید نوع سند خود را در مقایسه با نسخه های HTML تعیین کنید. بهترین انتخاب برای شما HTML 4.1 Transitional است که با مرورگرهای کاربران ایرانی سازگارتر است.
  2. در اینجا فرم کلی صفحه خود را باید تعیین کنید. Page Alignment را باید برای ترازبندی صفحه به صورت تمام عرض (Full)، مرکزی (Centered) و چپ چین تعیین کنید. در زیر آن هم اندازه عرض صفحه را با مقیاس هایی که باز می توانید خود تعیین کنید بدهید.
  3. اگر می خواهید قالب شما دارای ستون سمت چپ باشد تیک این مورد را بزنید و عرض و رنگ آن را در زیر مشخص کنید.
  4. در این قسمت باید مشخصات ستون وسط را بدهید که غیر فعال است ولی می توانید از اینجا رنگ پس زمینه را مشخص کنید.
  5. کارهایی که می توانستید برای ستون سمت چپ انجام دهید حال می توانید برای ستون سمت راست هم انجام دهید، و ستون سمت راست را تنظیم کنید.
  6. در این قسمت پیش نمایشی از نتیجه نهایی کار شما نشان می دهد.
  7. از این قسمت می توانید رنگ های هر کدام از بخش ها را تعیین کنید. برای استفاده از جعبه رنگ این سرویس اول باید از همین قسمت شماره ۷ رنگ مورد نظر را با جابجا کردن موس بروی نوار رنگها تنظیم  کرد. پس از آن که رنگ مورد نظر را بدست آوردید با کلیک داخل هر کدام از جعبه های عددی آن رنگ به طرح شما اعمال خواهد شد.
  8. اگر می خواهید طرح سایت شما دارای سر صفحه باشد گزینه این قسمت را تیک بزنید و رنگ و ارتفاع آن را تعیین کنید.
  9. دقیقا همان کار هایی که برای سرصفحه انجام دادید را اگر تمایل داشتید می توانید برای پاصفحه هم انجام دهید.
  10. اگر تیگ این گزینه را بزنید صفحه ساخته شده برای شما برای اینکه خالی نباشد جملاتی را در قالب سایت شما نشان می دهد که چگونگی نمایش قالب با متون را نشان می دهد.
  11. در آخر هم پس از تنظیم کردن تمام گزاره ها باید دستور ساخت قالب ساخته شده با CSS را بدهید. پس بروی Generate Layout برای تحویل کارتان به شما کلیک کنید. اگر هم باز خواستید از اول همه چیز را شروع کنید بروی Reset کلیک کنید.

پس از تمام این کار ها حال نوبت به دانلود فایل های درخواستی شماست. باید در صفحه بعدی بروی دو فایل، راست کلیک کنید و Save target as یا Save link as را انتخاب کنید. یکی از آن فایل ها فایل HTML و دیگری CSS می باشد.

دانلود صفحه وب ساخته شده Save Target As...

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

  1. 🙂
    خیلی عالی بود

  2. ممنون نسرین جون

دیدگاه تان را ارسال کنید.

لطفاً از درج نظرات خارج از موضوع این صفحه خودداری کنید!


کانال آموزش طراحی سایت