CSS көмегімен кескін картаны қалай құруға болады

опциялар

Мен «біртүрлі» нәрсе алғым келді, сондықтан мен блогыма жазылудың барлық әдістерін сақтайтын «қалта» графикасын шештім.

Веб-1.0 күндерінде осы сияқты сілтемелер жиынтығын кескінді әр графикадағы сілтемелермен толықтыра отырып құруға болады, содан кейін бәрін кестемен біріктіруге тырысу керек. Оны пайдалану арқылы да жүзеге асырылуы мүмкін кескін картасы бірақ бұл үшін координаттар жүйесін құруға арналған құрал қажет. Каскадтық стильдерді пайдалану мұны жеңілдетеді ... кескіндерді бөлуге болмайды және координаттар жүйесін құру құралын іздеуге тырыспайды!

  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 = «[сіздің ұялы сілтеме]» title = «Мобильді нұсқаны қарау» >> span class = «hide»> Ұялы телефон> / span >> / a>> / div>
    
  4. Өзіңіздің каскадтық стиліңізді өзгертіңіз. Сіз 6 түрлі стиль қосасыз. Жалпы стиль үшін 1 стиль, тег үшін 1, ол ешқандай мәтіндік безендірілмейді, мәтінді жасыру үшін 1 стиль (қол жетімділік үшін қолданылады) және сілтемелердің әрқайсысы үшін 1 стиль ерекшеліктері:
    # жазылу {/ * фондық суреттер блогы * / дисплей: блок; ені: 215px; биіктігі: 60px; өң: url (images / options.png) қайталанбайтын; margin-top: 0px; } # жазылыңыз {мәтіндік безендіру: жоқ; } .жасыру {көріну: жасырын; } #rss {/ * RSS сілтемесі * / қалқымалы: сол жақта; позиция: абсолютті; ені: 50px; биіктігі: 50px; шеткі сол жақ: 20px; жоғарғы жиек: 5px; } # электрондық пошта {/ * Электрондық пошта сілтемесі * / қалқымалы: сол жақта; позиция: абсолютті; ені: 50px; биіктігі: 50px; шеткі сол жақ: 70px; жоғарғы жиек: 5px; } #mobile {/ * Mobile Link * / float: сол жақта; позиция: абсолютті; ені: 50px; биіктігі: 50px; шеткі сол жақ: 130px; жоғарғы жиек: 5px; }

Орналасуы жақсы және қарапайым ... биіктігі мен енін қосып, содан кейін кескіннің сол жақ шетінен, ал жоғарғы жиегін суреттің жоғарғы жағынан орнатыңыз!

Бұл «қалай» жазбасы сайтқа кіруге арналған Geeks - бұл сексуалды «Қалай жасауға болады» сайысы! Бір ескерте кететін жайт, кескін картада әлдеқайда күрделі көпбұрыштар болуы мүмкін, бірақ мен бұл жерде өте көп жерлерді көрген емеспін. Мен Geeks-тегі үлкен RSS бейнесі секси бүйірлік тақта екенін байқадым ... бұл сілтеме үшін жақсы орын. 😉

Кеңестерімен қол жетімділікті жақсарту үшін 10 ЖАҢАРТЫЛДЫ Phil!

демеуші: Егер сіз веб-дизайнға жаңадан келген болсаңыз, HTML және CSS-ті қолданып, өзіңіздің жеке веб-сайтыңызды дұрыс құрыңыз, 2-ші басылым - бұл міндетті болып табылады. Бұл оңай орындалатын нұсқаулықта сіз веб-сайтты қалай құруға болатынын білесіз, оны өзіңіз жасай аласыз!

41 Пікірлер

  1. 1

    Даг, бұл жағымды әдіс сияқты көрінеді, бірақ оған қол жетімді емес.

    Экранды оқитын соқыр пайдаланушыны, тек мәтіні бар шолушыны немесе CSS немесе кескіндері қосылмаған сайтқа кіретін кез-келген адамды қарастырыңыз (мысалы, мобильді қолданушы сіздің ұялы байланыс сайтына сілтеме іздейді). Бұл үш сілтеме туралы олардың ешқайсысы білмейді, өйткені оларда мәтін жоқ. Егер кескіндер өшірулі болса, пайдаланушы не болатынын сипаттайтын альт мәтінді де көрмейді, өйткені бұл фондық сурет.

    Кескіндерді кесіп алып, оларды байланыстырып, тізімге енгізіп, оларды қатар орналастырған дұрыс. Немесе сілтемелер үшін мәтінді қолданыңыз және әдеттегі кескінді ауыстыру әдісін қолданып мәтінді ауыстырыңыз. Бұл ыңғайлы болып көрінеді, бірақ стандартты графикалық шолғышты қолданбайтындар үшін бұл өте қиын / мүмкін емес.

    • 2

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

      • 3

        Даг,

        JAWS сілтеме тақырыптарын әдепкі бойынша оқымайды, бірақ сіздікі дұрыс, ол жасай алады. Егер сіз оның бар екенін білмесеңіз, неге сіз сілтемелердің атауларын іздеуіңіз керек еді, тіпті егер сіз болған болсаңыз да, бұл сіздің қол жетімділігіңіз туралы мәселе туындайтыны анық, сіз аз қолданушыларға өз сайтыңызды пайдаланудың екінші деңгейлі тәжірибесін беріп отырсыз.

        Мәтіндік браузерлер үшін сіз сілтеме жасаған мақалаңыз сілтеме атауларының тізімін шығаруға мүмкіндік береді, бірақ менің ойымша, егер сіз бұл жерде сілтеме болғанын білмесеңіз, өйткені бірінші кезекте мәтін болмаған , тақырып мәтінін неге іздеу керек еді?

        Сонымен, сілтеме тақырыбының атрибуттары әлі суреттер қосылмаған немесе CSS қосылмаған шолғыш үшін көрінбейді.

        Ия, тақырыпсыз сілтемелер онсыз берілгеннен гөрі жақсы, бірақ бұл жағдайда ол тек шекті.

        Сондықтан мәтінді оқуға болатындай етіп суретті пайдалану немесе мәтінді ауыстыру - бұл әлдеқайда қауіпсіз, қол жетімді және ыңғайлы нұсқа.

        • 4

          Жақсы ақпарат, Фил. Мен мұны мәтінмен жақсартуға тырысамын, бірақ тек мәтінді жасырамын - осылайша JAWS сияқты қол жетімді өнім сілтеме мәтінін оқиды және егер CSS немесе кескіндер өшірілген болса, мәтін шығады.

          Мен жалғыз қол жетімді шешім - бұл суретті сілтемесі бар қою дегенмен келіспеймін.

  2. 5
    • 6

      Жақсы Даг!

      Өкінішті болғаныма кешіріңіз, мен осындай ақымақ нәрселерге қатты құмармынate

      • 7

        Бұл біз жиі назар аудармайтын нәрсе, Фил! Сонымен қатар, сіздің қосымшаңыздың қол жетімді болуын іздеу жүйесінің нәтижелері жиі болады.

        Мен тәжірибе мен кері байланысты өте бағалаймын!

  3. 8

    Мен оны ұрладым. Онда мен оны айттым.

    Даг, графика керемет және кодтау өте қарапайым, бұл мені қорқытады (CSS-пен ойнадым, енді мен оны «түсіндім»).

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

    Мен сізге әлгі кофені сатып алуым керек шығар!

    • 9

      Өте керемет! Уильям жоғарыда көрінеді. Бұл біреу менің жазбаларымның бірін пайдаланған кездегі мақтау сөз. Рахмет!

  4. 10

    Даг,

    Мен тәжірибемді мысалға ала отырып, келіспейтін дауыс боламын. Менің үйімнің электрондық поштасы өзгерген кезде біздің электрондық пошта хабарлары есімде, және сіз менің жаңа электронды поштамен бас тартуым керек екенін ескердіңіз. Сіздің сайтыңыздағы жаңа мүмкіндікті қайтадан таңдау үшін «ашқан» уақытты аз болғанын мойындауым керек. Мұның бір себебі, түпнұсқа сілтеме дәстүрлі болғандықтан, мен оны есіме түсірдім. Басқасы, бүйірдегі жарты конверт маған бастапқыда конвертке ұқсамайтындықтан болды. Шамамен 5 минуттан кейін мен тінтуірді әр суреттің үстінен айналдыра бастадым және «Электрондық поштаға жазылу» атауы көрсетілгенде, мен өзімнің іскер екенімді білдім. Менің миым сілтеме суретінің не екенін анықтады.

    Бірақ, маған, ең болмағанда, қапталдағы конверт жай электронды хабарландыруларға жазылу орны ретінде интуитивті емес еді. Және (өйткені маған әрқашан жақсы нәрсемен аяқтау керек деген) мен жоғарыдағы Филмен келісемін; әдіс шынымен қарапайым және барлық элемент керемет жұмыс істейді. Менің ойымша, сіздің дизайн құралыңыз сізге 3 бөлімнің нақты өлшемдерін беруге көмектесті; бұл дұрыс болжам ба? Мен осылай ойлауым керек, өйткені ені 400 пиксельді кескін болса, дұрыс параметрлерді және т.б. білуім керек еді.

    • 11

      Боб,

      Бұл керемет пікір! Мен кескіннің үстіне кішкене жазбаны қостым, ол адамдарға жақсырақ бағыт беруге көмектеседі.

      Рахмет!
      Даг

  5. 12
    • 13

      Уильям,

      Пікірлер класы атаулары мен бүйірлік тақтадағы сынып атаулары арасында қайшылықтар туындауы мүмкін. Жанжалды жою үшін оларды басқаша атауға болады. Егер сізге қол керек болса, маған хабарлаңыз!

      Даг

  6. 14

    Барлығы FF-де де, IE-де де жұмыс істейтін сияқты ... Менің ойымша, мен әлі жұмыс істемейтін плагинді өзгертуге тырысқан кезде сайтта болған боларсыз ... 😉

  7. 15

    Тамаша! Мен бұны алғым келеді. Бөліскеніңіз үшін рақмет. Маған бұл тақырып ұнайды, жар! Мен мұны қалай істегеніңізді білгім келеді 🙂

    Ура!

  8. 16
  9. 17
  10. 18

    Жақсы көзқарас, бірақ маған топографиялық карта үшін бір нәрсе керек, сондықтан мен төртбұрышты аймақтарды қолдана алмаймын ... Мен ескі стильдегі кескін карталарын координаттармен қолдануым керек деп ойлаймын, бірақ мен сәл тереңірек қазатын шығармын ...

  11. 19

    Осы ақпарат үшін рақмет, Даг. Мен мұнда бұрын болғанмын және сіз мұны қалай жасадыңыз деп ойладым. Біз өз жазбаларымыздан кейін енгізу үшін осындай картаны жасағымыз келді, енді мүмкіндігіміз болса, біз мұны жасай аламыз. Браво!

  12. 20
  13. 21

    Сәлем Даг,
    Мен алдыңғы түсініктеме қалдырдым, бірақ мен өзімнің дилемма туралы түсінік беруді әрең ұсынғанымды түсіндім. Біз онлайн-сайтымызды осында бастауға көмектесу үшін WordPress тақырыбын бейімдедік:

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

    Енді сіз біздің жоғарғы жағымызда навигациялық баннер бар екенін көресіз, бұл кескінді біз бұған дейін ондаған рет бейнелейтін едік. / palmforehad. Біздің ешқайсымыз CSS-ті түсінбейді, бірақ біз жеткілікті түрде сүрінеміз және осы уақытқа дейін бәрі жақсы. Сіздің ондаған мақалалардың ТЕК БІРІНДЕГІ мақалаңыз CSS-те имидждеуді қалай оңай қолдануға болатындығы туралы нақты түсінік. Мен сіздің кестеңізді сіздің нұсқауларыңызға сәйкес жасадым, бірақ HTML-ді қайда орналастыратынымды білмеймін. Сіз тек «html-ді қосыңыз ... ол өте жақсы және қарапайым» дегенді айттыңыз, содан кейін мен ойладым: «мен үшін қарапайым емес!» Деп ойладым. Мен тақырып редакторындағы PHP парақтарының кез-келгеніне HTML қосуға болатындығын білмедім. HTML-ді тақырыпқа орналастырамын ба? Негізгі индекс үлгісі? Функциялар? Менің ойымша, барлық WordPress пайдаланушылары өздерінің тақырыптарын бақылау тақтасының редакторында өңдей алады, бұл функционалдығы бойынша әмбебап болып көрінеді. Егер сіз html-ді қайда орналастыруға болатындығын ұсына алсаңыз, мен oru кодын навигация тақтасына бейімдегім келеді.

    Өз біліміңізді қоғаммен бөліскеніңізге рахмет. Мен сізге кофе алып бергеніме қуаныштымын.

    • 22

      Сәлем Phay!

      Сіздің блогыңыздың барлық файлдары редакциялау үшін Admin панелі арқылы қол жетімді. Егер сіз «Презентация», содан кейін «Тақырып редакторы» батырмасын бассаңыз, файлдарыңыздың тізімін оң жақта, ал редакторды сол жақта көре аласыз.

      Егер сіз бұл сіздің бүйірлік тақтада болғанын қаласаңыз, сізде бүйірлік тақта бар шығар. Өңдеу үшін нұқыңыз, содан кейін берілген HTML-ді қалаған бетке салыңыз.

      Бір ескерту: стиль кестесін өңдеу сіздің парағыңызға қатысты, сондықтан сіз суретті тақырып суреттер каталогына жүктеуіңіз керек, егер сіз оны тақырыптағы басқа суреттерге сілтеме жасасаңыз.

      Бұл көмектеседі деп үміттенемін!

    • 23

      Фай,
      Мен бүгін осы сайтқа тап болдым және сіз сияқты дилеммаға тап болдым. Сондай-ақ, тақырып кескініне кескін картасын қосқым келді. Онымен біраз ойнағаннан кейін мен оны дұрыс түсіндім. Div HTML-ді header.php файлына салыңыз. Мен оны арасына қойдым. Сіздің шаблоныңызда дәл осындай кодтау бар-жоғына сенімді емеспін, бірақ оны header.php файлында ойнатыңыз, сонда сіз оны анықтайсыз.
      -
      Paul

  14. 24

    Жедел жауап үшін рақмет!

    Жоқ, мен оның бүйірлік тақтада болғанын қаламадым, ол беттің жоғарғы жағында орналасқан (мен берілген сілтемеден көре аласыз - шоу туралы ect туралы айтылатын қызғылт шарлау тақтасы ..)

    Мен таңертең бақылау тақтасында жұмыс істедім, өкінішке орай, html файлын қай файлға қоятынымды білмеймін, жоғарыда айтылғандай, менде бірнеше, header.php, main index.php, functions.php, footer.php. HTML кодын қайда кірістіру керектігін білмеймін. (сіз берген бірінші бөлік, мен қалған бөлігін өзімнің стиліме енгізіп қойдым) веб-сайтта менің суретім бар, бәрі дайын, мен тек бейімделуге арналған кодтың html бөлігін қайда қосатынымды білуім керек.

    Уақыт бөліп, бастаушыдан сұрақтар қойғаныңызға көп рахмет.

    Phay

  15. 25

    … Мүмкін біреу түсініктемелерге кодтың html бөлігін қай файлға орналастыратындығымызды жазуы мүмкін. Бірнеше хабарлама жасаған джентльмен оны түсіндім деп айтты. Менің сәттілігім болған жоқ.

    Файлен

  16. 26
  17. 27

    Мен WordPress-ке нұқылатын кескін картасын ендірудің жолын іздеймін, өйткені ол html картасының тегтерін кесіп тастайды. Сіздің жолыңыз тиімді болар еді, бірақ АҚШ картасы бұл тәсілмен бұрауды қиындатудың әдісі екені анық. Мен адасып қалдым.

    Көмектесіңдер.

    Флэш менің жалғыз таңдауым сияқты көрінеді?

    • 28

      Дэйв,

      Егер сіз суретті шаблоныңызға салсаңыз, бәрі жақсы болады. Егер сіз кескін картасын нақты мазмұнға қойсаңыз, сіз сүзгіге ұшырауы мүмкін. Менің жұмыс істеу тәсілі өте қорқынышты, бірақ кейде iframe-ді қолдандым.

      Даг

  18. 29

    Сәлем,

    сурет картасы мен сілтемелер екі бөлек нәрсе сияқты, олар HTML-де кескін картасы қалай жұмыс жасайтыны сияқты жұмыс істемейді

    Мен кескін картасына фондық орналасуды қосқанда (сол жақта), сілтемелердің орналасуы жалғаспайды.

    мұны айналып өтудің кез-келген тәсілі бар ма? мен өте әуесқоймын. Рақмет сізге.

  19. 31

    Мен қолданғалы отырған сияқты үлкен және күрделі кескін картаға ұқсас тәсіл қолданыла ма?

    Егер сіз менің сайтымды қарасаңыз, сол жақтағы сілтемелерді нұқыңыз, сонда мен кескін карта ретінде қолданғалы отырған кескінді көресіз (мәтін алфавитінің астында).

    Негізінен, осы тізімнің әр бөліміне хат арқылы өту үшін кескінді қолдануға тырысу.

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

    Дегенмен, Flash қолдануды ойластыруы мүмкін

    Рахмет.

  20. 33

    Мен қазіргі уақытта шаблон макетін қолданып, өз материалдарыммен редакциялап жатырмын. Мен кескін картасын қосқым келеді, бірақ оны CSS-ке қайда орналастырарымды білмеймін. карта жасағым келетін сурет тақырып бөлімінде орналасқан.

  21. 34

    сәлеметсіз бе, мен өз веб-сайтыңызды joomla-да жасадым ... өз парағымның логотипін үйге сілтеме жасау үшін осы әдісті қолданғым келеді, маған joomla-мен мұны істей алмайтындығымды айттым, бірақ бұл мақала маған үміт береді! электрондық пошта арқылы көмек алғыс білдірген болар еді ... .рахмет

  22. 35

    Сәлем Даг - Мен өте күрделі css-ге негізделген кескін картасын құрамын, онда қашықтан айналатын бейнелер де бар (бұл жағдайда сурет ыстық нүктелердің бірін апарған кезде мәтін парақтың басқа жерлерінде көрсетіледі). Қалай болғанда да, мен осы жерде сіздердің мысалдарыңызға тап болдым ... және мен келесі ойлармен бөліскім келеді деп ойладым:

    1. Қол жетімділік үшін көрнекілікті пайдаланбау керек: бұл жерде мәтінді жасыру үшін көрінбейтін: көрінбейтін элемент ретінде жасыру үшін бірде-бір (немесе көрсетпейді: егер жоқ болса): жасырын экран оқырмандары оқымайды (спецификациядан кейінгі). .

    Оның орнына кескінді ауыстырудың анағұрлым сенімді әдісін қолданыңыз. Мен Phark әдісін немесе Gilder / Levin-ді ұсынамын - бұл негізгі әдістерді табу үшін google-ге ең жақсы құжатталған атаулар. Мен G / L-ді жақсы көремін, өйткені ол CSS қосылған, бірақ кескіндер өшірілген.

    2. Мен оны бұзып жатқанын көрмесем де (FF3-ті қолданып), сіздің позициялауды жүзеге асырудың өзіндік тәуекелдері бар. Абсолютті орналастырылған элемент жақын орналасқан ата-анасына қатысты орналастырылады. Негізінде, сіз «жазылымға қатысты» позицияны қолдану арқылы позициялау контекстін нақты орнатқыңыз келеді. Сонда балаларды (орналасқан сілтемелерді) сол ата-анаға орналастыруға болады. Бұл әдіс браузерлерде сенімді нәтижелерді қамтамасыз етуге көмектеседі.

    Сонымен қатар, сіз бұл позицияны өңдеу үшін шеттердің орнына «top: x» және «left: x» (мұндағы x - ығысу мәні, px түрінде айтылған) позициялау декларацияларын қолдануыңыз керек. Тағы да, мен сізде оның бұзылу жолын міндетті түрде көре алмаймын, бірақ жоғарғы және сол жақ осыған арналған, сондықтан оларды неге пайдаланбасқа? Сонымен қатар сізде бір элементте флоттар мен маржалар орнатылған, олар белгілі бір жағдайда IE6-да «екі еселенген» қатені тудырады (сіз мұны сол жерде тексердіңіз бе?) - түзету болған кезде, сіз бұл мәселені толығымен пайдаланып болдырмайсыз. және бұл жағдайда орналасу үшін шеттердің орнына қалдырылды.

    3. Сонымен, мағынасыз дивтың орнына неге осы сілтемелер үшін мағыналық жағынан реттелмеген тізімді қолданбасқа?

    Ұшып келе жатқаным үшін кешіріңіз ... Мен жай бөліскенді ұнатамын, мен өз тәжірибемнен CSS-ті қажетті нәтижеге қол жеткізудің әртүрлі тәсілдері бар екенін білемін, бірақ кейбір тәсілдері басқаларына қарағанда жақсы жұмыс істейді (сенімді, кросс-браузер). . HTH.

  23. 36
  24. 37

    Рақмет, Даг! Бірнеше оқулықтарды қарап шыққаннан кейін, мен оны әйелімнің купондық блогына енгізіп жатырмын, http://www.SavingWithAmy.com/. Бұл мен кездестірген және жүзеге асыратын ең қарапайым және ең қарапайым нұсқаулық.

  25. 38

    Көп рақмет сізге!! Сіздің нұсқауларыңыз САҒАТ жұмысымнан құтқарды ... Мен веб-дамытумен таныспын, және мен алғашқы үлкен жобамның азабын тарттым. Мен мұны жасадым ... клиент қуанышты, қуанышты, және мен де солай!

  26. 39

    Сәлеметсіз бе, осыны орналастырғаныңызға көп рахмет! Бірнеше жылдан кейін және ол әлі де көмектеседі ... жақсы! Мен кескін картаны дұрыс жерде байланыстыру үшін күресіп жатырмын. Менде баннер бар және баннердің жоғарғы оң жағындағы әлеуметтік белгішелер сіз берген кодты пайдаланып байланыстырылғанын қалаймын. Бұл өте жақсы жұмыс істейді, тек мен бірдеңе дұрыс жасамаймын, өйткені сілтемелерім экранның сол жағында, әлеуметтік белгішелерде емес, логотипте пайда болады. Бұл қарапайым нәрсе екеніне сенімдімін, бірақ мен оны анықтай алмаймын. Егер сізде қандай да бір түсінік болса, мен оны осы жерде бөлісемін деп ойладым. Осыны жариялағаныңыз үшін тағы да рахмет!

Сен не ойлайсың?

Бұл сайт спамның төмендеуі үшін Akismet пайдаланады. Деректеріңіздің қалай өңделетінін біліңіз.