• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آموزش طراحی قالب (فصل پنجم – جلسه دوم) : استایل دهی سرصفحه

23065 ۲۵ تیر ۹۲

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

برای شروع فایل style.css را با نرم افزار ویرایشگر کد باز کنید :

پس از کدهای قبلی کد زیر را قرار دهید

اگر ذخیره و فایل index.html را در مرورگر باز کنید، باید پس زمینه آن تغییر کرده باشد

اگر به یاد داشته باشید، در هنگام طراحی قالب در فتوشاپ عرض آن را 1024px قرار دادیم.

خب پس برای تعیین عرض قالب با کدهای css کد زیر را پس از کد قبلی قرار دهید :

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

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

سر صفحه (#header)

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

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

اما اگر دقت کنید می بینید که منو نیز به کنار لوگو میاد، و این به خاطر خاصیت float است،

برای جلوگیری از این اتفاق باید تکه کدی را قبل از کدهای html منو به فایل index.html اضافه کنید به کدهای زیر دقت کنید

خط اول کد اضافه شده است :

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

نکته :

همیشه، هنگام استفاده از خاصیت float "باید" این تگ

را قبل از تگی که تغییر موقعیت داده قرار دهیم، که در اینجا منو تغییر موقعیت داده بود.

برای راحتی نیز میتونید کد زیر رو در فایل style قرار بدین

و سپس بجای تگ بالا از تگ زیر استفاده کنید :

حال نوبت به درست کردن لوگو می شود، ابتدا تصاویر را وارد می کنیم :

نکته :

برای پیدا کردن اندازه های تصاویر وارد پوشه images شوید و روی تصویر مورد نظر کلیک کنید در این حال، اطلاعات تصویر در پایین نشان داده می شود.

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

بر روی تصویر کلیک راست کنید و گزینه properties رو انتخاب کنید سپس در پنجره باز شده در تب details اطلاعات تصویر از جمله height و width آن نوشته شده است :

حال اگر قالب را در مرورگر ببنید تصاویر وارد قالب شده اند اما مشکلی که لوگو و توضیح سایت دارد، این است که کلماتی که ما نیز نوشته ایم بر روی تصاویر افتاده اند برای برداشتن آن ها می توانیم تگ های h1 و h2 که در کدهای html نوشته ایم را برداریم، اما این کلمات برای موتورهای جستجو مهم هستند و باید در صفحه باشن، اگر از  display: none برای این دو تگ استفاده کنیم مشکل حل خواهد شد، اما موتور های جتسجو عناصری که display ان ها برابر با none باشد را در نظر نمی گیرند و به ان ها اهمیتی نخواهد داد. پس راه حل حتما یک تکنیک css است!!

در css از خاصیت text-indent برای تورفتگی خط اول پاراگراف استفاده می شود ما اینجا برای بیرون انداختن این کلمات از صفحه ، از این خاصیت استفاده می کنیم

دقت کنید که حتما مقدار منفی باشد. (البته روش های دیگری هم وجود دارد، اینکه  opacity آن ها را 0  قرار دهید و یا که فونت های آن ها را لود کنید و بجای تصویر از متن واقعی استفاده کنید که بهترین روش می باشد، اما بخاطر اینکه حجم بالای فونت ها [هر فونت 200kb] باعث دیر لود شدن صفحه خواهد شد از این روش استفاده نکردیم.)

حال برای تعیین موقعیت لوگو و توضیح از margin استفاده می کنیم پس کد را به شکل زیر توسعه می دهیم :

حال نوبت به آیکون شبکه های اجتماعی میرسه، ابتدا باید آن ها را چپ به راست کنیم

حال با استفاده از margin موقعیت آن ها را به پایین و سمت چپ بکشیم پس :

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

حال با کد زیر هنگامی که تصاویر hover می شوند را کاملا نمایان کنید :

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 96 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    elyas ahmadi(۲۰ دی ۱۳۹۲)

    ممنون از زحماتتون :smile:

  • ‏‏

    #header .right #tagline آقا من اینو نمیفهمم. یعنی میگه هر تگی که id tagline داره و داخل یک تگ دیگه با کلاس right هست و اونم داخل یک دایو با id header؟

    • ‏‏
      سجاد دریس(۶ اردیبهشت ۱۳۹۳)

      سلام.
      بله همین شکلی که شما فرمودید درسته.
      تگی که دارای آیدی tagline که درون تگی با کلاس right که درون تگی با آیدی header
      البته چونکه آیدی ها منحصر به فردن می تونستیم فقط #tagline رو بنویسیم و همون نتیجه رو میداد.
      ولی خب برای اینکه بدونین دقیقا منظورم ما کدوم تگه، و در کجا قرار داره به این شکل نوشتیم…

      • ‏‏

        آها ممنون آقا سجاد چون من دیروز دو ساعت هنگ بودم رو این سر همین جریان که با خودم میگفتم خوب آیدی که یکتاست چرا از همون استفاده نکردن پس هتمن یه چیزه دیگست، کلی مطلب css خوندم و واسه خودم تجزیه تحلیل کردم که بفهمم این چیه D:

        • ‏‏
          سجاد دریس(۶ اردیبهشت ۱۳۹۳)

          😀 شرمنده.

        • ‏‏

          دشمنت شرمنده آقا من حسابی به بچه های سون لرن بدهکارم خیلی چیزی از شما ها یاد گرفتم و کمکم کردید اگه سایتم اوکی بشه و راه بیفته باید یه شیرینی به بچه های سون لرن بدم 😀

        • ‏‏
          سجاد دریس(۶ اردیبهشت ۱۳۹۳)

          لطف داری آقا بهرام.
          ایشالا که موفق باشی.

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۶ اردیبهشت ۱۳۹۳)

      کش مروگر رو پاک کنید درسست میشه.

      • ‏‏

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

  • ‏‏

    سلام من این کدی که اول گفتین رو نوشتم ولی اصلا پس زمینه عوض نمیشه کد رو بعد از end load font گذاشتم ولی هیچ تغییری نمیکنه در ضمن من برای قالبم یه فولدر تو درایو c ساختم و همه فایل های مربوط به سایت رو تو اون گذاشتم میگم شاید آدرس دهی مشکل داره یعنی من همون آدرسی که تو کد هست رو میزنم همون آدرس url
    اگه نه پس مشکلم کجاست :sad:
    ممنون

    • ‏‏
      سجاد دریس(۱۹ اردیبهشت ۱۳۹۳)

      کل قالب رو zip کنید و یجا آپلود و لینک شو بفرستین، تا چِکِش کنم

  • ‏‏

    سلام ببخشید لینک بالا درست نیست لطفا از این لینک استفاده کنید
    ممنون
    http://upir.ir/1393.2/my-web.zip

    • ‏‏
      سجاد دریس(۲۰ اردیبهشت ۱۳۹۳)

      سلام.
      شما باید کدهای استایل دهی به قالب رو بعد از استایل reset قرار بدین،
      همچنین آدرسی دهی به تصویر اشتباه بود، باید یک /.. فبل از آدرس دهی قرار بدین، تا یک پوشه به عقب برگرده،
      فایل css اصلاح شده : http://up.persianscript.ir/uploads/cb9a-style.rar

  • ‏‏

    سلام من کد بعد از float رو قرار دادم ولی منو سر جای خودش نمیره البته وقتی float رو نوشتم غیر از منو بقیه عناصر هم جا بجا شدن میشه یه نگا بندازین ببینین مشکلم کجا بوده ممنون
    http://upir.ir/1393.2/ghaleb_2a80f.zip

  • ‏‏

    چرا از دیروز تا الان کسی جواب نمیده تو این سایت؟!!
    لطفا یکی جواب سوالمو بده

  • ‏‏
    حسین(مسیحا)(۳ خرداد ۱۳۹۳)

    body {
    background: url(‘../images/body-bg.png’);
    }

    سلام میشه اینو واضح تر بگید یعنی دقیقا بعد از چه کدهایی؟؟
    در مورد ذخیره ، فایل css رو ذخیره میکنی تغییری تو فایل html ایجاد نمیشه ، از دریم هم استفاده میکنم

    • ‏‏
      سجاد دریس(۳ خرداد ۱۳۹۳)

      سلام.
      یعنی ادامه ی کدهای css ای که در جلسه قبلش نوشتیم، (بعد از کدهای css reset)
      در مورد سوال دومتون، لینک کردین فایل css رو به فایل html؟

  • ‏‏

    باعرض سلام وخسته نباشید وممنون ازسایت خوبتون
    من ی مشکلی داشتم اونم اینه که #header .right {
    float: right;
    }
    #header .left {
    float: left;
    }
    بعدازاینکه این کدارو نوشتم جهت نوشته های هدرم تغیییر نکرد وهمشون سمت راسته
    ممنون میشم اگه راهنماییم کنید.

  • ‏‏

    ببخشید اشتباه کردم اینم لینک
    http://upir.ir/934/manim-site.rar

    • ‏‏
      سجاد دریس(۱۹ تیر ۱۳۹۳)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram