• Thuis
• Over de site
• Waarom heb je een website nodig?
• Van de auteur
• Contacten
• Forum

...

...

- bevat het onderste deel.

En dit is hoe het script eruit zal zien in ons CSS-stijlblad:

Div#menu ( breedte:144px; achtergrond:url(img/menu_1.jpg) top geen herhaling; opvulling-top:40px; ) div#menubody ( achtergrond:url(img/menu_2.jpg) herhaling-y; opvulling- left:15px; ) div#menubottom ( height:16px; background:url(img/menu_4.jpg) bottom no-repeat; ) ul#menulist ( breedte:100px; list-style-type:none; ) ul#menulist li ( hoogte:32px; achtergrond:url(img/menu_3.gif) bottom repeat-x; ) ul#menulist a ( breedte:100px; hoogte:25px; border-left:#75c5de 10px effen; lettertype:vet 10px Verdana, Arial , schreefloos; tekstdecoratie: geen; weergave: blok !belangrijk; ul#menulijst a:hover (achtergrond:url(img/menu_5) .jpg) linkerherhaling-y:#000 ) ul#menulijst #actief a ( achtergrond: url(img/menu_5.jpg) links repeat-y; )

Ik denk niet dat je de CSS-code hoeft uit te leggen. Als er iets niet duidelijk is, kun je het altijd vragen.

Beide menutypes zijn klaar. Houd er rekening mee dat we er geen JavaScript in hebben gebruikt, en dit is eerder een “pluspunt” bij het indexeren van onze site door zoekmachines, maar zeker geen “minpunt” aangezien zoekmachines JavaScript niet indexeren. Hoewel de Google-zoekmachine het op dit moment al begint te herkennen.

Het is je waarschijnlijk al lang geleden opgevallen dat er meer dan twee menu's op de site staan ​​en dat ze een andere structuur hebben. Ik heb het artikel niet aangepast, zoals het vorige.

Het enige dat overblijft is het vullen van de pagina's van onze site met inhoud en we kunnen gerust zeggen dat de helft van het werk is gedaan, maar ik zal hierover in het volgende artikel praten.

Navigeren door koppelingen met behulp van het toetsenbord in Opera is iets anders. Probeer het bovenstaande voorbeeld in Opera te bekijken, houd vervolgens de Shift-toets ingedrukt en gebruik de pijltoetsen om door de koppelingen te navigeren (dit werkt ook op formulierelementen). Dit heet ruimtelijke navigatie.

Sitenavigatie

Sitenavigatie is waarschijnlijk het meest voorkomende type menu dat u moet maken. Dit is een menu voor de hele site (of een deel ervan), waarin zowel de navigatieopties waaruit een bezoeker kan kiezen als de hiërarchie van de site worden weergegeven. Lijsten zijn hier ideaal voor, zoals u kunt zien in het sitenavigatievoorbeeld.

Thuis

• Thuis
• Over ons
• Onze klanten
• Onze producten
• Onze diensten
• Neem contact met ons op

Er zijn hier niet zoveel verrassingen, althans vanuit puur HTML-perspectief. Later in de cursus zullen we het hebben over het instellen van dit soort menustijlen met behulp van CSS en gedrag toevoegen met behulp van JavaScript. Een belangrijk ding om te overwegen is hoe je het huidige document in het menu kunt markeren om de gebruiker het gevoel te geven dat hij zich op een bepaalde plaats bevindt en dat hij van locatie verandert (ook al is dit in werkelijkheid niet het geval, behalve natuurlijk wanneer gebruiken mobiele apparaten Voor Surfen op het internet!). Dit is waar we hierna naar zullen kijken.

Het creëren van een gevoel van ‘op een bepaalde plek zijn’ voor bezoekers

Een van de gouden regels van webontwerp en navigatie is dat het huidige document nooit naar zichzelf mag verwijzen, maar duidelijk te onderscheiden moet zijn van andere menu-items. Dit is belangrijk omdat het bezoekers houvast geeft en hen vertelt waar ze zich bevinden tijdens hun reis door de site. Er zijn randgevallen zoals webapplicaties, permalinks in blogs en zogenaamde 'één-pagina'-websites, maar in 99% van de gevallen is het linken naar een document dat je al bekijkt overbodig en verwarrend voor de bezoeker.

In de Linking Guide betoogde ik dat een link een overeenkomst en een verbintenis is: je biedt bezoekers een manier om te ontvangen aanvullende informatie ze nodig hebben, maar je moet voorzichtig zijn: je verliest autoriteit en vertrouwen als die link gebruikers niet geeft wat ze willen en/of tot onverwacht gedrag leidt. Als u bijvoorbeeld een link aanbiedt die naar het huidige document verwijst, wordt het document opnieuw geladen als u deze activeert. Als gebruiker verwacht je dit niet. Wat heeft het voor zin om op deze link te klikken? Het zorgt alleen maar voor meer verwarring.

Dit is de reden waarom de huidige pagina nooit aanwezig mag zijn in het linkmenu. Je kunt het helemaal verwijderen, of beter nog, het deactiveren als link, maar het markeren (bijvoorbeeld met een sterk element) - dit geeft gebruikers een visueel signaal en vertelt blinde bezoekers ook dat het belangrijk is - dit voorbeeld van het benadrukken van de huidige pagina wordt hieronder weergegeven.

Over ons

• Thuis
• Over ons
• Onze klanten
• Onze producten
• Onze diensten
• Neem contact met ons op

Hoeveel mogelijkheden om gebruikers tegelijk te bieden??

Een ander ding om te overwegen is hoeveel opties u uw bezoekers wilt bieden. Veel menu's op internet proberen elke pagina van een site toegankelijk te maken vanuit één enkel menu. Dit is waar scripts en technieken te hulp komen. met behulp van CSS- Je kunt een menu beter beheersbaar maken door delen van het menu te verbergen totdat de gebruiker een specifiek gebied selecteert (vervolgkeuzemenu's, zoals ze soms worden genoemd). Dit is vanuit technisch oogpunt een goed idee, maar er kleven verschillende problemen aan deze aanpak:

• Niet alle bezoekers kunnen deze functie gebruiken zoals bedoeld; toetsenbordgebruikers zullen bijvoorbeeld gedwongen worden om door alle links op een pagina te navigeren met behulp van Tab-toetsen, gewoon om naar de vereiste link te gaan.
• U moet veel HTML-code aan elk sitedocument toevoegen om dit te implementeren, en meest het zal op veel pagina's overbodig zijn. Als ik drie niveaus in het menu naar beneden ga om bij het document te komen dat ik wil lezen, zou ik geen opties moeten zien die naar de niveaus 4, 5 en 6 leiden.
• U kunt uw bezoekers in verwarring brengen als u ze te veel opties tegelijk geeft; mensen houden er niet van om beslissingen te nemen. Stel je voor hoe lang het kan duren om een ​​gerecht te kiezen uit een lang restaurantmenu.
• Als de pagina niet veel inhoud maar wel veel links bevat, zoekmachines gaat ervan uit dat er niet veel geldige informatie op de pagina staat en besteedt niet veel aandacht aan de pagina, waardoor deze moeilijk te vinden zal zijn bij een zoekopdracht op internet.

Uiteindelijk is het aan jou om te beslissen hoeveel items je in het menu plaatst - verschillende projecten vereisen verschillende opties - maar als je twijfelt, kun je proberen het menu te beperken tot links naar alleen de hoofdsecties van de site. U kunt waar nodig altijd extra submenu's toevoegen.

Contextmenu's

Contextmenu's zijn koppelingen die zijn gemaakt op basis van de inhoud van het huidige document en die aanvullende informatie bieden met betrekking tot huidige pagina. Een klassiek voorbeeld zijn de links naar 'gerelateerd artikel' die u aan het begin van nieuwsartikelen ziet, zoals weergegeven in figuur 1. 23.1

Rijst. 23.1.

Het is een beetje anders dan contextmenu's V software-interfaces gebruiker die aanbiedt verschillende opties selectie, afhankelijk van waar deze wordt aangeroepen (menu's die verschijnen wanneer u klikt klik met de rechtermuisknop muis of bij het klikken Ctrl-toets in desktopapplicaties die dat bieden speciale kenmerken, afhankelijk van waar deze zich bevindt op dit moment muisaanwijzer).

Contextmenu's op websites zijn een geweldige manier om inhoud op andere delen van de site te presenteren; vanuit HTML-perspectief zijn ze gewoon een lijst met links.

Sitediagram

De lay-out van de site is wat je zou verwachten: een lay-out van alles diverse pagina's(of hoofdsecties, indien waar we het over hebben over echt grote sites) site. Hiermee kunnen sitebezoekers een overzicht krijgen van de gehele sitestructuur en snel naar de gewenste locatie navigeren, zelfs als de gewenste pagina zich diep in de paginahiërarchie bevindt.

Zowel de site-indeling als het zoeken op de site zijn een geweldige manier om bezoekers een mogelijk referentiepunt te bieden als ze verdwaald zijn, of om snelle toegang voor degenen die haast hebben.

Vanuit HTML-perspectief kan het schema van een site bestaan ​​uit één enorme lijst met geneste lijsten vol met koppelingen of - in het geval van zeer grote sites - sectiekoppen met geneste links naar een specifieke hiërarchie van secties, of zelfs zoekformulieren voor elk van de secties.

Paginering

Paginanummering is nodig als u een manier moet voorstellen om door een groot document te navigeren dat is opgedeeld individuele pagina's. Mogelijk ziet u paginering in grote afbeeldingsarchieven of op pagina's met zoekresultaten (zoals Google of Yahoo Search).

Paginering verschilt van andere soorten navigatie omdat deze meestal naar hetzelfde document linkt, maar met een link die aanvullende informatie bevat, zoals het paginanummer om mee te beginnen. Verschillende voorbeelden van paginanummering worden getoond in Fig. 23.2:

Rijst. 23.2.

HTML biedt niets innovatiefs - u geeft opnieuw een lijst met links op, samen met de huidige link (die aangeeft welk stukje gegevens wordt uitgevoerd en hoe ver u zich in de paginering bevindt), wat geen echte link is en is gemarkeerd (bijvoorbeeld met een sterk element).

Het belangrijkste verschil met sitenavigatie is dat paginanummering veel programmeerlogica vereist. Afhankelijk van waar u zich bevindt in de gehele dataset, moet u de vorige, volgende, eerste of laatste koppelingen weergeven of verbergen. Als er echt een enorme hoeveelheid informatie te bekijken is, moet je ook links aanbieden voor labels zoals 100, 200 en vele andere waarden. Daarom is het menu meestal niet hardgecodeerd zoals in HTML, maar wordt het op de server gemaakt. Dit verandert echter niets aan de regels: het huidige fragment mag niet naar zichzelf linken, en je mag geen links aanbieden die nergens heen leiden.

Als lijsten niet genoeg zijn: koppel kaarten en formulieren

99% van de tijd zijn geordende of ongeordende lijsten voldoende HTML-constructie voor menu's, vooral sindsdien
Rijst. 23.3. Standaard kan een kaart met gebiedselementen delen van de afbeelding omzetten in interactieve elementen

Van elke afbeelding kan een menu worden gemaakt, waarmee een kaart met verschillende gebieden (ook wel hotspots genoemd) wordt gedefinieerd. De kaart krijgt een naamattribuut, en de afbeelding en de kaart worden verbonden met behulp van het usemap-cirkelattribuut voor cirkels of poly voor onregelmatige vormen gedefinieerd met behulp van polygonen.

Definieert de coördinaten in de afbeelding die hotspots moeten worden - deze waarden worden gemeten vanaf de linkerbovenhoek van de afbeelding en kunnen worden gemeten in pixels of percentages. Voor rechthoekige gebieden hoeven alleen de hoeken linksboven en rechtsonder te worden gedefinieerd; voor cirkels is het noodzakelijk om het middelpunt van de cirkel en de straal te bepalen; voor polygonen moet u een lijst met alle hoekpunten opgeven.

Linkmaps zijn niet zo leuk om te definiëren en in te voeren als HTML. Daarom bieden afbeeldingstools zoals Adobe Image Ready of Fireworks de mogelijkheid om ze visueel te maken (en de bijbehorende HTML-code te genereren).

Navigatie is aanwezig op elke goede website, zelfs als deze uit één pagina bestaat. Afhankelijk van de situatie kunnen navigatielinks naar verschillende secties van de site leiden of naar een bladwijzer (anker) op de huidige pagina sturen. Het vakkundig ontwerpen van navigatie waarbij de gebruiker niet in de war raakt, vereist bepaalde kennis en ervaring. Het ontwerpen van de navigatiebalk moet ook verstandig gebeuren, en in deze tutorial laten we u zien hoe u een gebruiksvriendelijk navigatiemenu kunt maken.

Navigatie maken

Wat is navigatie? Dit is een verzameling links, vaak geordend en gegroepeerd op betekenis. Een navigatiemenu wordt vaak gemaakt met behulp van een HTML-lijsttag

, waar op elk punt
• bevat één link . In HTML5 werd een aparte tag geïntroduceerd voor navigatie