Dezvoltare Web manual - Meniu de navigare

Un manual pentru studierea informaticii sau media-informatica.

Meniu de navigatie

Dacă proiectați un meniu de navigare cu CSS, ar trebui să începeți de la un cod HTML care rămâne utilizabil fără CSS („degradare grațioasă”) și care este reproiectat doar cu CSS.

Punctul de plecare pentru un meniu de navigare este o listă de linkuri într-o etichetă de navigație:

Fără CSS lista este afișată ca Demo normal.

Meniu vertical

Cu CSS îl puteți transforma într-un meniu vertical.

În primul rând, list-style-type: none transformă elementul de listă li într-o zi normală.

Legătura în sine devine un element care formează blocuri cu afișaj: bloc. Acest lucru are avantajul că întregul dreptunghi acționează ca o legătură și nu doar textul.

Legătura reală este transformată într-un element care formează blocuri. Apoi se poate face clic pe întregul dreptunghi, nu doar pe textul în sine

Meniu orizontal

Cu ajutorul flexului puteți afișa și meniul pe orizontală. Direcția implicită a direcției de flexare este rândul și, prin urmare, un meniu orizontal.

Navigare receptivă cu meniul burger

Meniurile de navigare orizontală nu sunt potrivite pentru dispozitivele de ieșire foarte mici, cum ar fi smartphone-urile. Acolo reduceți meniul de navigare la un singur buton, care apoi afișează sau ascunde meniul de navigare:

Trei linii verticale sunt adesea folosite ca simbol pentru acest tip de meniu, cunoscut și sub numele de pictogramă hamburger.

PHP pentru meniul de navigare

Meniul de navigare trebuie să fie desigur același pe toate paginile site-ului. Acest lucru se poate face prin copierea codului în toate fișierele HTML. Dacă doriți să inserați o pagină nouă, trebuie să editați din nou toate paginile.

Prin urmare, este logic să profităm de această ocazie pentru a trece de la HTML simplu la PHP. PHP este un limbaj de programare pe serverul web cu care ne vom ocupa intens în semestrul de vară.

Pentru a converti, toate fișierele HTML trebuie să aibă finalul .php, în meniul de navigare arată astfel:

Meniul de navigare este acum salvat într-un fișier separat, de ex. navi.php. Meniul este apoi inclus în paginile individuale:

Partea de server

Fișierul inclus este introdus pe server. Clientul primește documentul HTML complet, inclusiv navigarea, și nu observă nimic despre includere. Cu VIEW → DISPLAY PAGE SOURCE TEXT nu puteți vedea codul PHP.

Rezultat

Acum este foarte ușor să introduceți un nou element de meniu în meniul de navigare: numai fișierul navi.php trebuie editat.

capitol

Web și html
- O scurtă istorie a World Wide Web
- Trei standarde definesc web-ul
- BNF
- Curs de bază HTML
- Încărcare și instrumente
Css
- Scurtă introducere a foilor de stil
- Sintaxa CSS
- Proprietăți importante
- Sprite CSS
- Selectoare CSS
Aspect CSS
- Cadru
- Proiectare receptivă
- CSS pentru aspect
- Detalii despre aspect
- Meniu de navigatie
- Selectoare CSS în detaliu
Urluri
- Adrese URL absolute și relative
- Configurare server web
- Sfaturi pragmatice
Formulare
- Formulare
- Forma ca interacțiune
- CSS și formă
- trimite date
- Form și PHP
- Formular și Javascript
Javascript Dom
- medii
- Degradare grațioasă
- Javascript de bază
- DOM
- Pânză 2D
- formă++
Jquery
- Javascript discret
- Degradare grațioasă
- Scriere specială Javascript în jQuery
- Selectarea și manipularea cu jQuery
- Interacțiunea cu jQuery
Linie de comanda
- Linie de comanda
- Unde sunt
- Drepturi de acces
- Imagine și videoclip
Git
- Controlul versiunii
- Flux de lucru simplu în Git
- Interogați starea Git
- Instrumente pentru Git
- Cheie publică și privată
Http
- TCP/IP și DNS
- HTTP
- Instrumente
- Exemple
- PHP nu generează doar HTML
Pregătirea PHP
- Ce este php Ce se întâmplă pe serverul web?
- Apache
- Primul program PHP
Php
- Notificare de avertizare
- Sintaxa PHP
- Fișiere și foldere în PHP
- PHP și e-mail
- Procesați date din formulare web în PHP
- Fișier încărcat
- Încărcare fișier - frontend
- Erori + depanare
Citire PHP db
- Baze de date
- PHP și baza de date
- Structura unei aplicații web
- Citirea din baza de date
- Lucrul eficient cu DB
sesiune
- Cookie-uri
- Sesiune și autentificare
Php db scrisoare
- Aplicație web cu acces la scriere
- clar
- Introduce
- Editați datele
- Eroare de manipulare
- Permiteți HTML
Optimizare PHP db
- Indici
- Constrângeri
- Modificări ale bazei de date
- Tranzacții
- Tranzacții și PHP
grafic
- HTML + CSS pentru grafică
- Imagini pixel
- SVG - grafică vectorială
- 2d pânză
- Pânză 3D
Javascript
- Variabile și domeniu de aplicare
- Funcții și asta
- Obiecte + clase
- Funcții și închideri
- Module
- Sfaturi pentru stil +
- Depanare
Js aplicate și CSS
- Verificați datele formularului
- Antet fix cu animație
- Derulați încet
- Hartă
- Formă dinamică
- AJAX
- AJAX căi greșite
- CORS
- Webcams de chat
Json
- Sintaxa JSON
- JSON și PHP
Xml
- Ce este XML
- XML bine format
- DTD
- XML și PHP
- XML și Javascript
- XPath
- Exemplu RSS
Securitate
- A1 - Injecție
- A2 - autentificare
- A3 - Date sensibile
- A4 - XXE
- A5 - control acces
- A6 - configurare greșită
- A7 - XSS
- A8 - Deserializare
- Componente A9
- A10 - monitorizare
- Referință directă nesigură a obiectelor
- CSRF
- Redirecționări
Wordpress
- Ce este wordpress
- Instalare scurtă a Wordpress
- Securitate
- Backend de prezentare generală
- Postări și pagini
- mass-media
- Utilizați teme, bare laterale și widgeturi
- Folosiți pluginuri
- Legături permanente
Apache
- Configurați
- Autentificare
- Rescrie
Javascript avansat
- Funcția de apelare
- Evenimente și închideri
- Prototipuri + moștenire
- Expresii obisnuite
mobil
- Proiectare receptivă
- Aplicație web progresivă
- Cordova
Calitate
- Accesibilitate
- intimitate
- performanţă
- ODIHNĂ

publicat sub creative commons by-nc-sa în anii 2012-2019 de Brigitte Jellinek.

Pentru a dezvolta în continuare această pagină: proiectul fork sau comentează această pagină