"LO SMANETTONE: Scopri il Mondo della Tecnologia con Stile!" - LO SMANETTONE

Esempi e Codice
Vai ai contenuti
SITO NON DISPONIBILE  
SFONDO ADATTATO
Progetto FREE

Prima o poi arriva quel momento in cui dobbiamo far capire ai nostri visitatori che abbiamo il sito in manutenzione. Spesso in molti si chiedono come fare. Un CMS come WP lo ha già di default ma con Incomedia ® le cose si presentano come al solito complicate. Ci sono vari modi per arrivare a fare ciò anche con la semplice ma pericolosa direttiva da mettere in .htaccess. In questo tutorial seguiremo la via più semplice e più indolore.

In questo progetto non è indispensabile avere dei break point particolari vanno bene anche quelli di default che il software prepara in fase di progetto.

PRO
  • Ottieni pagine di manutenzione molto professionali. Dipende dal grado di conoscenze grafiche che hai.
  • Nessun codice extra da inserire

CONTRO
  • Si perde un po di tempo.

Sei Pronto? Mettiti comodo, affina le tue idee e seguimi.
Preparate un progetto Blank vuoto.
Di default avrete una HOME PAGE  e solitamente tre pagine vuote. A VOI VE NE SERVONO SOLO DUE. Indipendentemente dal fatto che sia un progetto nuovo o uno già realizzato noi lavoreremo solo su due pagine.
FASE 1
RINOMINARE LA (HOME) INDEX PRINCIPALE IN INDEX.OLD cliccando sull'icona proprietà al passo 3 MAPPA.
RINOMINARE UNA PAGINA NUOVA (HOME) IN INDEX.HTML
NASCONDETE ORA LA INDEX.OLD tramite l'icona del software
Da questo momento in poi il sistema leggerà in rete la vostra nuova pagina HOME
Recatevi sulla nuova HOME e progettate la vostra pagina di manutenzione. Quì si può lavorare in tanti modi dalla pagina più semplice a quella più accattivante dipende dalle vostre esigenze .
Prendiamo in esame una pagina accattivante,reattiva e professionale.
Nella pagina ri-denominata in Index.html in stile riga metti un separatore da 250px e setta tutti i margini, sia interni che esterni, a zero
Vai su stile riga e a destra tra le opzioni colore scegli VIDEO possibilmente leggero ma di effetto. Come immagine non caricare nulla ma imposta l'opacità video in un range tra i 30 e i 20 come da immagine seguente:


SALVA
FASE 2
VAI ORA AL PASSO 3 PROPRIETA' GRAFICA  POI SU GRAFICA
ESEGUI IL SETTAGGIO COME DA IMMAGINE SEGUENTE


SALVA TUTTO

FASE 3
VAI ORA AL PASSO 2 STRUTTURA E POI SU STRUTTURA MODELLO.
ESEGUI I SEGUENTI SETTAGGI:▼
  • HEADER E FOOTER - ENTRAMBI IN TRASPARENZA, ENTRAMBI DELL'ALTEZZA DI 100PX PER TUTTI I BREAK-POINT PRESENTI.
  • CONTENUTO PAGINA E SFONDO PAGINA TUTTO IN TRASPARENZA
  • PER OGNI BREAK POINT PUOI IMPOSTARE UNA TUA IMMAGINE CHE CAMBIA AL CALARE DELLE RISOLUZIONI. In particolare devi tenere conto che il restringimento delle immagini non è responsive quindi scegli sempre immagini con un focus centrale ad esempio come quelle di questo tutorial. Tutte le immagini devono essere centrate e impostate su adatta allo sfondo della pagina. Se non hai tempo da perdere a cercare immagini che all'adattamento si presentino tagliate ti consiglio di utilizzare sfondi ABSTRACT che sono un buon compromesso anche in presenza di tagli di immagini abbastanza accentuati a risoluzioni inferiori

SALVA TUTTO
ORA SEI PRONTO PER VEDERE IL TUO PROGETTO IN ESECUZIONE TRAMITE ANTEPRIMA SUL BROWSER. PROVA A RESTRINGERE E SIMULARE UN CALARE DI RISOLUZIONE E GUARDA IL COMPORTAMENTO DELLE IMMAGINI CHE ALLA FINE DEVONO RISULTARE CON UN GIUSTO COMPROMESSO. E' POSSIBILE ATTRAVERSO CODICE EXTRA RENDERE TUTTO RESPONSIVE MA TI RIMANDO AD UN TUTORIAL DEDICATO PRESTO DISPONIBILE ON-LINE.
GUARDA QUESTO TUTORIAL IN ESECUZIONE.
Se ti interessa perchè hai poco tempo, te lo puoi direttamente scaricare e visualizzare come è stato fatto.
FINE.





COMMENTA ▼
Non sono presenti ancora recensioni.
0
0
0
0
0

Crediti

Questo pannello è stato personalizzato da Losmanettone.it a partire dal progetto open source SIENNA concesso sotto licenza MIT.

Torna ai contenuti