Creare pagine web facilmente con Bootstrap 3

0
2992
creare pagine web facilmente

Bootstrap 3: uno dei più popolari framework messo a disposizione da Twitter per realizzare pagine Web. Il suo utilizzo è veramente semplice, abbiamo delle classi CSS preimpostate, i Javascript, tutto da poter utilizzare all’istante; Il pacchetto Bootstrap contiene davvero il completo necessario per creare pagine web facilmente e con tutto quello che abbiamo bisogno. In questa guida velocizzeremo del 100% la creazione di pagine web usando Bootstrap 3 e un software gratuito di nome Pingendo che ci permette di usare un editor visuale per il nostro progetto.

Per iniziare: cosa ci serve?

  • Il pacchetto completo di Bootstrap 3: scaricalo da qui (cliccando su Download Bootstrap)
  • Il software Pingendo: scaricalo da qui (Disponibile per Windows, Mac e Linux)
  • Un editor di codice gratuito come Notepad++: scaricalo da qui

1) Creazione della cartella di lavoro

  1. Crea una nuova cartella sul desktop rinominandola con il nome del sito che vuoi realizzare;
  2. Estrai l’archivio di Bootstrap 3 scaricato in precedenza, apri la cartella estratta e sposta le cartelle css, fonts e js nella nuova cartella creata in precedenza con il nome del tuo sito; (scusa la ripetizione cartella);
  3. Apri Notepad++, vai su file e poi su nuovo;
  4. Incolla questo codice e sostituisci Mio Sito con il nome che desideri dare alla pagina (esso comparirà sulla scheda del browser):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mio Sito</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
  1. Adesso vai su Linguaggio e dall’elenco scendi alla lettera H e scegli HTML;
  2. Adesso salva con nome il documento chiamandolo index.html all’interno della cartella creata per il tuo sito (dove abbiamo inserito i file di Bootstrap).

Il risultato sarà come nell’immagine:

cartella miosito

2) Creazione della pagina web con Pingendo

Nella prima fase abbiamo visto come creare la cartella di lavoro e il codice necessario per la nostra pagina, adesso daremo in pasto tutto a Pingendo per creare il nostro layout personalizzato:

  • Apri Pingendo;
  • Clicca su Open existing document e scegli il file index.html creato in precedenza;

ECCO LA NOSTRA SCHERMATA:

pingendo

 

Da qui possiamo iniziare a trascinare gli elementi sulla pagina, tutto drag n drop, per poi modificare il testo cliccandoci due volte sopra e le proprietà nella barra di destra. Sopra abbiamo l’anteprima, mentre sotto l’editor di codice che può essere anche lui utilizzato.

L’utilizzo è semplicissimo e perderei più tempo a spiegarvelo che a lasciarvelo provare, smanettate ed imparerete subito. Per completezza nell’immagine sottostante vi descrivo i principali comandi:

comandi pingendo

 

In questo video puoi farti un idea di come creare pagine web facilmente con Pingendo e Bootstrap

Utilizzo manuale dei componenti di Bootstrap 3

Se sei a un livello più avanzato, quindi conosci la struttura HTML, puoi implementare manualmente tu i vari componenti di Bootstrap con tutte le loro personalizzazioni seguendo le linee guida da questa pagina.

Utilizzo di modelli preimpostati

Puoi dare in pasto alle tue capacità e fantasie, o anche a Pingendo, dei template preimpostati realizzati con il framework di Bootstrap 3. Ce ne sono centinaia! Ti indico adesso dove trovarli cosi potrai farti un idea della struttura e modificarla come vuoi per il tuo sito web: su Bootstrapzero.com troverai numerosi template base per iniziare, e sono davvero molto carini!

Conclusioni

La prima parte di questa guida è quella più importante sebbene la più facile. Imparerai ad utilizzare il software Pingendo solo smanettando e smanettando, il suo uso è davvero molto semplificato. Se poi hai bisogno del supporto o qualche consiglio resto a tua disposizione nei commenti!

RASSEGNA PANORAMICA
Semplicissimo da usare
Non si aggiorna da un bel po
Ottimo l'editor incorporato in stle Dreamviewer
Completamente Gratis
Condividi
Articolo precedenteOttenere 100gb su OneDrive per 2 anni gratis
Prossimo articoloVelocizzare Windows con ReadyBoost
Consulente Informatico e Web Designer. Sistemi operativi: Windows - Android - Ubuntu. Software preferiti: Adobe Photoshop - Suite Microsoft Office

Nessun commento

Commenta questo articolo: