CSS менен сүрөт картасын кантип түзүү керек

параметрлери

Мен "geeky" нерсени кааладым, ошондуктан блогума жазылуунун бардык ыкмаларын камтыган "чөнтөк" графикасын чечтим.

Веб 1.0 күндөрүндө, ушул сыяктуу шилтемелердин коллекциясы ар бир графиканын шилтемелери менен сүрөтүңүздү бириктирип, андан кийин анын бардыгын үстөл менен бириктирип түзсө болот. Аны колдонуу менен ишке ашышы мүмкүн сүрөт картасы бирок, адатта, координаттар тутумун түзүүчү курал керек. Cascading Style Sheets колдонуп, муну бир кыйла жеңилдетет ... сүрөттөрдү бөлбөйт жана координаттар тутумун курууга курал издөөгө аракет кылбайт!

  1. Колдонгуңуз келген сүрөтүңүздү түзүңүз. Төмөндө ушул графиканы колдоно аласыз (оң баскычты басып, жүктөө үчүн сактап коюңуз):
    Жолдор
  2. CSS'ке салыштырмалуу каталогго сүрөтүңүздү жүктөңүз. WordPress-те аны тематикалык каталогдогу сүрөттөр папкасына жайгаштыруу менен оңой эле жасаса болот.
  3. HTML'иңизди кошуңуз. Жакшы жана жөнөкөй ... үч шилтемеси бар див:
    > div id = "subscribe">> a id = "rss" href = "[сиздин шилтемеңиз]" title = "RSS менен жазылуу" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[электрондук почтаңызга жазылуу шилтемеси]" title = "Электрондук почта менен жазылуу" >> span class = "hide"> Электрондук почта> / span >> / a>> a id = "mobile" href = "[your mobile link]" title = "Мобилдик версияны көрүү" >> span class = "hide"> Мобилдик> / span >> / a>> / div>
    
  4. Каскаддык стилдеги баракчаңызды түзөтүңүз. Сиз 6 ар кандай стилдерди кошосуз. Жалпы стил үчүн 1 стиль, текст үчүн жасалгалоону көрсөтпөө үчүн бирка үчүн 1, текстти жашыруу үчүн 1 стиль (жеткиликтүүлүк үчүн колдонулат) жана шилтемелердин ар бири үчүн 1 стиль өзгөчөлүгү:
    #subscribe {/ * background background block * / display: block; туурасы: 215px; бийиктиги: 60px; background: url (images / options.png) кайталабоо; margin-top: 0px; } #subscribe a {text-decor: none; } .жашыруу {көрүнүү: жашырылган; } #rss {/ * RSS Link * / float: left; абалы: абсолюттук; туурасы: 50px; бийиктиги: 50px; маржа-сол: 20px; margin-top: 5px; } # почта {/ * Электрондук почта шилтемеси * / float: left; абалы: абсолюттук; туурасы: 50px; бийиктиги: 50px; маржа-сол: 70px; margin-top: 5px; } #mobile {/ * Mobile Link * / float: left; абалы: абсолюттук; туурасы: 50px; бийиктиги: 50px; маржа-сол: 130px; margin-top: 5px; }

Жайгашкан жери жакшы жана жөнөкөй ... бийиктиги жана туурасы кошулуп, андан кийин сүрөттүн сол жагына, ал эми сүрөттүн үстүңкү жагына үстүңкү чеги коюңуз!

Бул "Кантип" посту кирүү үчүн Geeks - бул сексуалдык акыркы "Кантип" конкурсу! Бир белгилей кетүүчү нерсе, сүрөт картасында бир топ татаал көп бурчтуктар болушу мүмкүн, бирок мен чындыгында өтө көп жерлерди көрө элекмин. Geeksтеги чоң RSS сүрөтү Секси капталында экендигин байкадым ... бул шилтеме үчүн жакшы жер. 😉

Кеңеши менен жакшыраак жеткиликтүүлүк үчүн ЖАҢЫРТЫЛГАН 10/3/2007 ыздар!

демөөрчү: Эгер сиз веб-дизайнга жаңы киришкен болсоңуз, анда HTML & CSSти колдонуп, өз вебсайтыңызды туура жол менен түзүңүз, 2nd Edition сөзсүз керек. Көзөмөлдөөгө жеңил бул колдонмодон веб-сайтты кантип мыкты курууну үйрөнөсүз - аны өзүңүз жасаңыз!

41 Comments

  1. 1

    Даг, бул жагымдуу ыкма окшойт, бирок ага жетүүгө болбойт.

    Экран окурманы бар сокур колдонуучуну, тек гана тексттик браузери бар колдонуучуну же CSS же Сүрөттөрү иштетилбеген сайтка киргендердин бардыгын карап көрөлү (мисалы, мобилдик колдонуучу мобилдик достук сайтына шилтеме издеп жаткандыр). Бул үч шилтеме жөнүндө алардын эч кимиси билбейт, анткени анда текст жок. Эгерде сүрөттөр өчүрүлгөн болсо, колдонуучу ал жерде эмне болорун сүрөттөө үчүн alt текстти көрө албайт, анткени бул фондук сүрөт.

    Сүрөттөрдү бөлүп, байлап, тизмеге киргизип, жанына калкып турсаңыз жакшы болмок. Же болбосо, шилтемелер үчүн текстти колдонуп, сүрөттү алмаштыруунун кадимки ыкмасын колдонуп, текстти алмаштырыңыз. Бул ыңгайлуу окшойт, бирок стандарттуу графикалык браузерди колдонбогондор үчүн бир топ кыйынчылыктарды жаратат / мүмкүн эмес.

    • 2

      Мен акырындык менен макулмун (сиздин тажрыйбаңыз көбүрөөк болгондуктан), Фил, шилтемелердин ар биринин аталышы бар, ошондуктан алардын бардыгы толук жеткиликтүү. Текст аталыштарын окуу - бул JAWS сыяктуу жеткиликтүү колдонмолордун мүмкүнчүлүгү. Мына, а шилтемелердеги аталыштар боюнча жакшы пост жана анын жеткиликтүүлүккө тийгизген таасири.

      • 3

        Даг,

        JAWS шилтеме аталыштарын демейки шартта окубайт, бирок сиздики туура, ал жасай алат. Шилтемелердин аталыштарын эмне үчүн издесеңиз болот, эгерде сиз ал жакта болгонун билбесеңиз дагы, эгерде сиз болсоңуз дагы, бул колдонуучулук маселесине барып такалат, андыктан сиз аз колдонуучуларга өз сайтыңызды колдонуунун экинчи деңгээлдеги тажрыйбасын берип жатасыз.

        Тексттик браузерлер үчүн сиз ошол Lynxке багытталган макалаңыз шилтеме аталыштарынын тизмесин алып чыгууга мүмкүнчүлүк берет, бирок менин оюм боюнча, эгер сиз ал жакта шилтеме болгонун билбесеңиз, анткени анда текст жок болчу , эмне үчүн аталыштын текстин издейсиң?

        Акыр-аягы, шилтеменин атрибуттары дагы эле сүрөттөрдү иштетпей же CSS иштетпестен карап жаткан адамдар үчүн көрүнбөйт.

        Ооба, аталыштары жок шилтемелерге караганда шилтемелер жакшы, бирок бул учурда ал чектен чыгат.

        Ушул себептен сүрөттү колдонсоңуз болот, же текстти окуй алсаңыз, же текстти алмаштырсаңыз, анда текст ошол жерде кыйла коопсуз, жеткиликтүү жана колдонууга ылайыктуу.

        • 4

          Жакшы маалымат, Фил. Мен муну текст менен өркүндөтүүгө аракет кылайын, бирок текстти жашырсам - JAWS сыяктуу жеткиликтүү продукт шилтеме текстин окуйт жана эгер CSS же Сүрөттөр өчүрүлсө, анда текст көрсөтүлөт.

          Мен бир гана жеткиликтүү чечим шилтемеси бар Сүрөт коюу менен макул эмесмин.

  2. 5
  3. 8

    Мен аны уурдадым. Ал жерде мен аны айттым.

    Даг, графика укмуштай жана коддолгону ушунчалык укмуштуудай жөнөкөй болгондуктан, мени коркутат (CSS менен ойноп жүрдүм, эми акыры "түшүнүп алдым").

    Менин муктаждыктарымды канааттандыруу үчүн кодду жаңыртып, HTML битин кайсы жерге таштаарын билип, ачык айтканда, ал аябай жакшы көрүнүп, мени жинди кылып жаткан каптал тилкесинин жогору жагын тазалап койду.

    Мен сага дагы ошол кофени сатып беришим керек болушу мүмкүн!

  4. 10

    Даг,

    Тажрыйбамды мисал келтирип, мен каршы пикирде болом. Менин үйүмдүн электрондук почтасы өзгөргөндө, менин электрондук почта каттарым эсимде, мен жаңы электрондук почтама кошулушум керек болчу. Мен дагы бир жолу баш тартуу үчүн, сиздин сайттагы жаңы мүмкүнчүлүктү "ачып", бир аз убакыт болгонун моюнга алышым керек. Мунун бир бөлүгү, баштапкы шилтеме бир аз салттуураак болгондуктан, мен аны такыр эстебей калгам. Экинчиси, капталдагы жарым конверт башында мага жөн гана конверт болуп көрүнбөйт. 5 же андан көп мүнөттөн кийин мен чычканымды ар бир сүрөттүн үстүнө тоголото баштадым жана "Электрондук почта менен жазыл" деген аталыш пайда болгондо, мен ишкер экенимди билдим. Мээм дагы шилтеме сүрөтү эмне экендигин билип алды.

    Бирок, жок дегенде, мен үчүн капталдагы конверт жөн гана электрондук почта билдирүүлөрүнө жазыла турган жер катары интуитивдүү болгон жок. Жана (мага ар дайым жакшы нерсе менен бүтүр деп айтышкандыктан) мен жогоруда Филдин айткандарына кошулам; ыкма чындыгында жөнөкөй жана бүт нерсе сонун иштейт. Сиздин дизайн куралыңыз сизге 3 бөлүмдүн так өлчөмдөрүн берүүгө жардам берди деп эсептейм; бул туура божомолбу? Менин оюмча, болжол менен 400 пикселдик кеңдиктеги сүрөт болсо, мен туура орнотууларды билишим керек болчу ж.б.

  5. 12
    • 13

      Уильям,

      Сиздин комментарийлердин класс аттары менен каптал тилкесиндеги графикалык класстын аталыштарынын ортосунда карама-каршылык болушу мүмкүн окшойт. Чыр-чатакты жоюу үчүн алардын атын башкача атасаңыз болот. Эгер сизге кол керек болсо, мага кабарлаңыз!

      Даг

  6. 14
  7. 15
  8. 16
  9. 17
  10. 18

    Жакшы мамиле, бирок мага топографиялык карта үчүн бир нерсе керек, андыктан тик бурчтуу аймактарды колдоно албайм ... Мен эски стиль имиджинин картасын координаттары менен колдонушум керек деп ойлойм, бирок бир аз тереңирээк казып алам ...

  11. 19

    Бул маалымат үчүн рахмат, Даг. Мен буга чейин ушул жерде болуп, аны кантип жасадыңыз деп ойлонуп жүрдүм. Постторубуздан кийин киргизүү үчүн ушундай картаны түзгүбүз келди, эми мүмкүнчүлүгүбүз болсо, аны жасай алабыз. Bravo!

  12. 20
  13. 21

    Салам Даг,
    Мурунку комментарийди калтырдым, бирок менин дилемма жөнүндө эч нерсе билбегенимди түшүндүм. Биз бул жерде онлайн ситкомубузду ишке киргизүүгө жардам берүү үчүн wordpress темасын ылайыкташтырдык:

    http://www.phaylen.com/blog/

    Эми сиз биздин үстүбүздө навигациялык баннерибиз бар экендигин көрө аласыз, сүрөттү биз буга чейин ондогон жолу болуп картага түшүргөнбүз. / palmforehad. CSSти эч кимибиз түшүнбөйбүз, бирок жетиштүү деңгээлде мүдүрүлүп, ушул убакка чейин жакшы иш алып барганбыз. Берилген ондогон макалалардын ичинен ГАНА БИРИ макалаңызда CSS-теги имидждик картаны оңой колдонуунун чыныгы мааниси бар. Стилдер таблицасын сиздин көрсөтмөлөрүңүзгө ылайык келтирдим, бирок HTML кайда жайгаштыраарымды билбей турам. Сиз болгону "html-ди кошуңуз ... Жагымдуу жана жөнөкөй" деди, анан мен ойлодум, анткени мен "мен үчүн жөнөкөй эмес!" Тема редакторундагы ушул PHP баракчалардын бирине да html кошо алаарымды билген эмесмин. Мен htmlди башка жайгаштырамбы? Негизги индекс шаблонубу? Функциялар? Менин оюмча, бардык WordPress колдонуучулары өзүлөрүнүн темаларын панелдин редакторунда түзөтө алышат, бул иштөө жагынан универсалдуу көрүнөт. Эгер htmlди кайда жайгаштырууну сунуштай алсаңыз, oru кодун навигация тилкесине ылайыкташтыргым келет.

    Билимиңизди коомчулук менен бөлүшкөнүңүз үчүн рахмат. Мен сизге кофе алганыма кубанычтамын.

    • 22

      Салам Phay!

      Блогуңуздун темасына арналган бардык файлдарды Админ панели аркылуу түзөтүүгө болот. Эгерде сиз Презентацияны, андан кийин Тема Редакторду чыкылдаткан болсоңуз, анда файлдарыңыздын тизмесин оң жакта жана сол жакта редакторду көрө аласыз.

      Эгер бул сиздин каптал тилкесинде болушун кааласаңыз, анда сизде Каптал тилкеси бар болушу мүмкүн. Аны оңдоо үчүн чыкылдатып, андан кийин берилген HTML'ди каалаган баракчаңызга жайгаштырыңыз.

      Бир эскертүү: Стилдик таблицаны өзгөртүү сиздин баракчаңызга салыштырмалуу, андыктан сүрөттү темаңыздагы башка сүрөттөргө шилтеме берип жатсаңыз, тема сүрөттөр каталогуна жүктөп беришиңиз керек.

      бул жардам берет деп ишенебиз!

    • 23

      Фай,
      Мен бүгүн ушул сайтка туш болуп, сиздей дилеммага туш болдум. Ошондой эле, мен башкы сүрөтүнө сүрөт картасын кошкум келди. Аны менен бир аз ойноп отургандан кийин, мен аны туура түшүндүм. Div HTMLди header.php файлына салыңыз. Мен аны менен ортосунда койдум. Сиздин шаблонуңузда так кодировка бар-жогун билбейм, бирок аны header.php файлында ойноңуз, ошондо сиз аны аныктай аласыз.
      -
      пол

  14. 24

    Тез жооп үчүн рахмат!

    Жок, мен анын каптал тилкесинде болушун каалаган жокмун, ал барактын жогору жагында (мен берген шилтемеден көрө аласыз - contant деген кызгылтым навигация тилкеси, шоу ж.б. жөнүндө ..)

    Эртең мененден баштап панелде иштеп жатам, тилекке каршы, html файлын кайсы файлга жайгаштырганымды билбейм, жогоруда айтылгандай, менде бир нече, header.php, main index.php, functions.php, footer.php. HTML кодун кайда кыстараарымды билбейм. (сиз берген биринчи бөлүк, калган бөлүгүн өзүмдүн стилиме киргизип койгом) Вебсайтта ошол жерде менин сүрөтүм бар, бардыгы даяр, мен адаптация үчүн коддун HTML бөлүгүн кайда кошууну билишим керек.

    Убактыңызды бөлүп, башталгычтын суроолоруна жооп бергениңиз үчүн чоң рахмат.

    Phay

  15. 25

    … Же болбосо кимдир бирөө коддун html бөлүгүн кайсы файлга жайгаштыргандыгыбызды комментарийлерге жазышы мүмкүн. Бир нече билдирүү жазган мырза аны түшүнүп алдым деди. Менин бактыма жеткен жокмун.

    Phaylen

  16. 26
  17. 27

    Мен чыкылдатуучу сүрөттөр картасын wordpress-ке киргизүүнүн жолун издеп жаткан учурум жок, анткени ал HTML картасынын тегдерин чечип жатат. Сиздин жолуңуз туура болмок, бирок АКШнын картасы бул жол менен бурап татаалдаштыруунун жолу. Мен адашып кеттим.

    Жардам.

    Флэш менин жалгыз мүмкүнчүлүгүм окшойт?

    • 28

      Dave,

      Эгерде сиз сүрөттү шаблонго киргизсеңиз, анда баары жакшы болот. Эгер сиз сүрөттөр картасын чыныгы мазмунуна койсоңуз, анда чыпкалуу көйгөйлөр келип чыгышы мүмкүн. Менин айлана-тегерегимде иштеген жолум аябай жаман, бирок кээде iframe колдончумун.

      Даг

  18. 29

    Салам,

    сүрөттөр картасы менен шилтемелер эки башка нерсе окшойт, алар HTMLдеги сүрөт картасы кандай иштесе, ошондой иштешпейт

    сүрөт картасына фондук жайгаштырууну (сол жакта) киргизгенде, шилтемелердин жайгашуусу улана бербейт.

    ушуну айланып өтүүнүн кандай жолу бар? im абдан дилетант. рахмат сага.

  19. 31

    Ушундай эле ыкма мен колдонгонго аракет кылып жаткан сыяктуу чоңураак жана татаал сүрөттөр картасында колдонулабы?

    Эгерде сиз менин сайтымды көрсөңүз, сол жактагы шилтемелерди чыкылдатып, мен сүрөт карта катары колдонууга аракет кылып жаткан сүрөттү көрө аласыз (Текст алфавитинин астында).

    Негизинен, бул тизмектин ар бир бөлүмүнө кат менен өтүү үчүн Сүрөттү колдонууга аракет кылып жатабыз.

    Кыязы, мен GIMP менен картаны курууга 20 мүнөт жумшадым, андан кийин WP картанын тегдерин алып салат, ошентип сиздин сайтыңызды таптым.

    Бирок, Flash колдонууну ойлонушу мүмкүн

    Рахмат.

  20. 33

    Учурда шаблондун макетин колдонуп, өз буюмдарым менен түзөтүп жатам. Мен сүрөт картасын кошкум келет, бирок аны CSS кайда жайгаштыраарымды билбей турам. мен картаны түзгүм келген сүрөттүн баш бөлүгүндө жайгашкан.

  21. 34

    салам, мен өз вебсайтымды joomla сайтына курдум ... мен баракчамдын логотибин үйгө шилтеме кылуу үчүн ушул ыкманы колдонгум келет, мага аны joomla менен жасай албайм деп айтышты, бирок бул макала мага үмүт берет! электрондук почта аркылуу жардам берүү абдан ыраазы болмок ... .рахмат

  22. 35

    Салам Даг - Мен бир топ татаал css негизиндеги сүрөт картасын түзүп жатам, анда алыскы ролловерлер да бар (бул учурда, сүрөттүн очокторунун бирин алып барганда, текст беттин башка жагында көрсөтүлөт). Кандай болсо дагы, мен сизге ушул жерде изилдөө жүргүзүп жатып, сиздин мисалыңызга туш болдум ... жана төмөнкүдөй ой бөлүшкүм келди:

    1. Жеткиликтүүлүк үчүн көрүнүктүүлүктү колдонбошуңуз керек: бирөөсүн (же эгерде мындай деп эсептесеңиз) текстти бул жерде жашыруу үчүн, көрүнөө менен стилдештирилген элемент катары: жашырылганды экран окурмандары окушпайт (спецификациядан кийинкилер). .

    Анын ордуна, сүрөттү алмаштыруунун кыйла күчтүү техникасын колдонуңуз. Мен Phark ыкмасын же Гилдер / Левинди сунуш кылам - бул негизги ыкмаларды табуу үчүн гуглга эң жакшы документтелген аталыштар. Мен G / Lди жактырам, анткени ал CSS иштетилген, бирок сүрөттөр өчүрүлгөн.

    2. Мен аны бузуп жаткандыгын байкабай жатам (FF3 колдонуп), позициялоону жүзөгө ашыруунун мүнөздүү тобокелдиктери бар. Абсолюттук жайгаштырылган элемент анын эң жакын жайгашкан ата-энесине салыштырмалуу жайгаштырылат. Негизинен, сиз "абалы: салыштырмалуу" # жазылууга колдонуп, жайгаштыруу контекстин ачык-айкын орнотууну каалайсыз. Андан кийин балдарды (жайгашкан шилтемелерди) ошол ата-эненин ичинде жайгаштырса болот. Бул ыкма браузерлерде ишенимдүү натыйжаларды камсыз кылууга жардам берет.

    Ошондой эле, ошол жайгаштырууну иштетүү үчүн, маржа эмес, "top: x" жана "left: x" (мында x - жылыштын мааниси, px менен) жайгаштыруу декларацияларын колдонуу керек. Дагы бир жолу айта кетейин, мен аны сизден таптакыр бузуп жаткандыгын көрө бербейм, бирок жогору жана сол тарабы ушул максатта колдонулгандыктан, эмне үчүн аларды колдонбош керек? Мындан тышкары, сиз ошол эле элементте флотторду жана маржаларды орнотконсуз, алар белгилүү бир шарттарда IE6да "кош маржа" мүчүлүштүгүн жаратат (сиз аны ошол жерде сынап көрдүңүз беле?) - оңдолгону менен, жогорудагы көйгөйдү толугу менен колдонбойсуз жана бул учурда жайгаштыруу үчүн маржалардын ордуна калтырылды.

    3. Акыры, эмне үчүн бул шилтемелер үчүн маанисиз дивдин ордуна семантикалык жактан так иреттелбеген тизмесин колдонбош керек?

    Учкучсуз учуп кеткеним үчүн кечирим сурайм ... Б / б менен бөлүшкүм келет, мен каалаган натыйжага жетүү үчүн CSSти колдонуунун ар кандай жолдору бар экендигин өз тажрыйбамдан билем, бирок, албетте, башкаларга караганда жакшы иштейт (ишенимдүү, кросс-браузер). . HTH.

  23. 36
  24. 37
  25. 38

    Чоң рахмат!! Сиздин көрсөтмөлөрүңүз мага СААТТЫК жумушумду сактап калды ... Мен веб иштеп чыгууга жаңы кириштим жана биринчи ири долбоордун аркасында азап чектим. Мен муну жасадым ... кардар бактылуу, кубанат, мен да ошондоймун!

  26. 39

    Саламатсызбы, ушуну жайгаштырганыңыз үчүн чоң рахмат! Бир нече жылдан кийин, ал дагы деле жардам берет ... жакшы! Менин сүрөтүмдүн картасын керектүү жерге шилтемелөө үчүн кыйналып жатам. Менин баннерим бар жана баннердин жогорку оң жагындагы социалдык белгилер сиз берген кодду колдонуп шилтеме беришин каалайм. Бул менин ишим туура эмес кылып жаткандыгымдан тышкары, менин шилтемелерим экрандын эң жогорку сол жагында, социалдык белгилердин үстүндө эмес, логонун үстүндө көрүнүп турат. Бул жөнөкөй нерсе деп ишенем, бирок мен аны түшүнө албай жатам. Эгер сизде кандайдыр бир түшүнүк бар болсо, мен аны ушул жерден бөлүшөм деп ойлодум. Муну жайгаштырганыңыз үчүн дагы бир жолу рахмат!

Эмне деп ойлойсуң?

Бул сайт спам азайтуу Akismet колдонот. Сиздин комментарий маалымат кандайча иштелишин Үйрөнүү.