shams 09 اردیبهشت 1394 10 1357 بازدید دوره مجازی آموزش طراحی صفحات وب (پیشرفته)

در ادامه ی آموزش های مربوط به دوره آموزش پیشرفته طراحی صفحات وب (موسوم به تبدیل PSD به HTML) به سراغ آموزش کدنویسی آیکون های شبکه های اجتماعی در هدر (header) سایت می رویم. لطفا توجه داشته باشید که این آیکون ها جهت لینک شدن به صفحه ی پروفایل وب سایت مربوطه در این شبکه های اجتماعی است و نه برای اشتراک گذاری همان صفحه سایت.

کاربرپسندی آیکون های Social Networks (شبکه های اجتماعی) در طراحی سایت

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

آن چه در این فیلم آموزش طراحی سایت تقدیم تان میگردد:

  • کدنویسی شبکه های اجتماعی در هدر PSD دوره آموزشی و تبدیل آن به HTML
  • استفاده از تکنیک CSS Sprite برای آیکون های شبکه های اجتماعی هدر سایت
  • در نظر گرفتن حالت وسط چین شدن تمامی محتوا در صفحه (ایجاد یک کلاس عمومی برای این کار تا پایان طرح در CSS)

جهت دانلود فیلم آموزشی این جلسه به همراه فایل های قالب HTML تا پایان این جلسه، بر روی لینک زیر کلیک نمایید:

خرید این فیلم آموزشی به صورت تک (2500 تومان) :
25,000 ریال – خرید
ثبت نام و دسترسی کامل به تمام فیلم ها و محتوای دوره آموزش حرفه ای طراحی صفحات وب (تبدیل PSD به HTML) قبلا ثبت نام کرده ام؛ ورود

دسترسی سریع :

نظرات کاربران (10)



  1. سحر

    با سلام
    من وقتی عکسهای این مرحله رو به عنوان بکگراند میگذارم در مرورگر نمایش داده نمی شوند ، علتش چیست؟

    • shams

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

  2. only tiger

    اول میخواستم ببینم جواب سوال دوستمون که بالا گفتن چی میشه اگر ما کلا یک height به طرح داده باشیم اون وقت collapse نمیشه خب حالا برای استفاده از باکس مدل در تگ a بهتره float بدیم یا display ?
    اصلا خوبه که به div منو خودمون height بدیم؟

    بعد یک سوال دیگه داخل این آموزش از text-indent استفاده کردین. این کلا چی هست؟
    چه کاری میکنه؟
    به نظرم متن رو به یک نقطه خیلی دور داخل صفحه برد ایا این کاری تاثیری داخل سئو هم داره؟
    اگر برای ایکون ها متن نمی نوشتیم مشکلی پیش میومد؟

    لطفا کامل به همگی سوالات جواب بدید مرسی

    • shams

      سلام.
      در مورد سوالی که اول پرسیدین من متوجه نشدم لطفا سوال رو دقیق بپرسین چون توی دیدگاه ها همچین موردی که شما فرمودین وجود نداره
      در مورد استفاده از باکس مدل در تگ a هم همونطور که توضیح دادم در دیدگاه قبلی float کردن li و float کردن عناصر a درون آن ها برای جلوگیری از collapse شدن والد عناصر میباشد. پیشنهاد میکنم برای درک بهتر این موضوع فیلم آموزش جلوگیری از جمع شدن (collapse) والد عناصر شناور در CSS را مشاهده کنید.
      در مورد سوال آخرتون پیشنهاد میکنم این فیلم آموزشی رو ببینید اگر مشکلی داشتین توضیح میدم خدمتتون.
      فیلم آموزش آشنایی با تکنیک Text Image Replacement با استفاده از مشخصه text-indent در CSS
      برای سئو در بعضی موارد مثله، لوگو و شعار سایت از این تکنیک برای بالارفتن سئو استفاده میکنند. چون در واقع متن وجود داره ولی به کاربر نمایش داده نمیشه.

      • only tiger

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

        بعدش حالا نخوایم ارتفاع بدیم بالاخره مجبوریم یا float کنیم یا display اون رو bloack کنیم کدوم یکی از اینا بهتره هست

        • shams

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

  3. محمد

    با سلام
    در قسمت های پایانی فیلم آموزشی این مبحث به این نکته اشاره شد که برای اینکه طرح قالب ما تناسب بهتری با مانیتورهای مختلف را داشته باشد از یک کلاس container با عرض استاندارد 960px استفاده شده و اینکه اومدید div شبکه های اجتماعی را در اون قرار دادید و در نهایت مرورگر را کوچک نمودید تا اتفاقی که افتاده رو نشون بدید
    من همین کار (مرورگر را کوچک نمودم )را انجام دادم اما وقتی اسکرول افقی را به سمت چپ بردم یک بهم ریختگی بین نوار introbar و div شبکه های اجتماعی رخ داد
    دلیل این مشکل چیه؟؟
    با تشکر

    • shams

      سلام. لطفا عکس از مشکلی که پیش اومده رو برامون ایمیل کنید. shams.onliner@gmail.com

  4. احمد

    سلام.

    شما، هم li هارو float کردید و عناصر a که داخل li ها قرار دارن رو float کردید.
    سوالم اینه که اگر ما عناصر a رو display: block کنیم بهتره یا اینکه اونهارو float کنیم؟ یا اینکه هر دو کارو با هم انجام بدیم؛ یعنی عناصر a رو هم float کنیم و هم display: block کنیم.
    کدوم روش اصولی تره؟