Esempio
Puoi vedere l'esempio du cui vedi qui codice html e css qui: http://brunomigliaretti.altervista.org/
HTML
Ho inserito nel codice molti commenti che spigano perchè ho fatto alcune scelte.
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Sito in costruzione</title>
<meta name="description" content="Accademia di Belle Arti di Urbino - Sezione Esercizi Online di Sistemi Interattivi I.">
<meta name="author" content="Bruno Migliaretti">
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Quicksand:300,700" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/custom-fonts.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
</head>
<body>
<!--
================================================================
TESTATA DELLA PAGINA
Viene utilizzato l'elemento <header> a cui si assegna la classe
Bootstrap jumbotron.
È divisa in tre parti:
1. Logo: Per determinare con più precisione la
larghezza resposnsive del logo (che varia cioè a seconda del
dispositivo) utilizzo due strutture riga > colonne annidate.
2. Corpo della testata: due colonne che si riducono a una su
schermo sm (tablet verticale). Su schermo lg (desktop)
riduco la larghezza della colonne da 6 a 5 e aggiungo un
offset di una colonna per distribuire meglio i contenuti.
3. Piede: semplice testo centrato utilizzando l'elemento <small>
NOTE: Al logo (1) e al Corpo della testata (2) ho aggiunto la
classe mb-md che aggiunge un margine inferiore di 15px su
smartphone e di 30px sugli altri dispositivi.
Ho creato e utilizzato la text-center-sm che rende il testo
centrato solo su martiphone (schermo xs) e tablet verticale
(schermo sm).
================================================================
-->
<header class="jumbotron bg-deepblue">
<!-- container: larghezza fissa con
margine destro e sinistro uguali -->
<div class="container">
<!-- row: contenitore per elementi con classi col-*-* -->
<!-- mb-sm classe che aggiunge un margine
inferiore di 15px definito in custom.css -->
<div class="row mb-md">
<!-- Per definire meglio la larghezza del logo uso due sistemi righe colonne annidati-->
<div class="col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-sm-10 col-sm-offset-1 ">
<a href="http://www.accademiadiurbino.it" title="Vai al sito dell'Accademia di Belle Arti di Urbino" target="_blank">
<img src="img/Logo-Accademia.png" alt="Logo Accademia" class="img-responsive center-block" />
</a>
</div>
</div>
</div>
</div>
</div>
<!-- container: larghezza fissa con
margine destro e sisistro uguali -->
<div class="container">
<!-- row: contenitore per elementi con classi col-*-* -->
<div class="row mb-md">
<!-- La testata è divisa in due colonne. Su schermo md (tablet orizzontale),
su schermo lg (desktop) viene dato un offset di 1 col su sm (tablet vertivale) e
smartphone si passa ad un unica colonna -->
<div class="col-md-5 col-md-offset-1"> <img src="img/bruno.jpg" alt="Immagine casuale da lorempixel" class="img-responsive img-circle" /> </div>
<div class="col-md-5">
<h1 class="text-center-sm">Bruno Migliaretti</h1>
<h2 class="text-center-sm">Accademia di Belle Arti di Urbino<br/>
<small>Scuola di Nuove Tecnologie per l'Arte</small></h2>
<p class="text-center-sm">Docente di <strong>Sistemi Interattivi I</strong></p>
<p class="text-center-sm"> <a class="btn btn-default btn-lg btn-outline" href="#biomodal">Nota biografica</a> </p>
</div>
</div>
</div>
<div class="container">
<p class="text-center"><small><a href="http://www.sisteminterattivi.org" target="_blank">http://www.sisteminterattivi.org</a></small></p>
</div>
</header>
<!--
================================================================
SEZIONE "IN PRIMO PIANO"
Viene utilizzato l'elemento <section>.
L'obiettivo è creare una struttura di contenuti divisi su
quattro colonne su schermi lg e md (desktop ad alta e media
risoluzione) che diventino due su schermo sm (tablet verticale)
e una su smartphone.
Per ottenero il risultato utilizzo una struttura di riga >
colonne anniadata composta di una righa che continene due
colonne ciascuna della quali contiene a sua volta una riga con
due colonne.
================================================================
-->
<section id="inPrimoPiano">
<div class="container">
<div class="row">
<!-- Le colonne rimangono affinacate su desktop a media (md) e alta (lg) risoluzione-->
<div class="col-md-6">
<!-- Ogni colonna contiene una riga composta da due colonne che rimangono affiancate su tablet (sm) -->
<div class="row">
<div class="col-sm-6">
<h1 class="text-center"> <span class="glyphicon glyphicon-text-size glyphicon-circle"></span><br />
<small>Tipografia</small> </h1>
<p class="text-center">Esercizio su HTML.</p>
<p class="text-center"> <a href="tipografia/index.html" class="btn btn-primary">Vai all'esercizio</a> </p>
</div>
<div class="col-sm-6">
<h1 class="text-center"> <span class="glyphicon glyphicon-bold glyphicon-circle"></span><br />
<small>Bootstrap</small> </h1>
<p class="text-center">Esercizio su Bootstrap.</p>
<p class="text-center"> <a href="bootstrap/index.html" class="btn btn-primary">Vai all'esercizio.</a> </p>
</div>
</div>
</div>
<div class="col-md-6">
<!-- Ogni colonna contiene una riga composta da due colonne che rimangono affiancate su tablet (sm) -->
<div class="row">
<div class="col-sm-6">
<h1 class="text-center"> <span class="glyphicon glyphicon-console glyphicon-circle"></span><br />
<small>Javascript</small> </h1>
<p class="text-center">Esercizi su javascript</p>
<p class="text-center"> <a href="#" class="btn btn-primary">Per saperne di più</a> </p>
</div>
<div class="col-sm-6">
<h1 class="text-center"> <span class="glyphicon glyphicon-picture glyphicon-circle"></span><br />
<small>Galleria</small> </h1>
<p class="text-center">Galleria di foto.</p>
<p class="text-center"> <a href="#" class="btn btn-primary">Guarda qua...</a> </p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
Carico file javascript necessari a Bootstrap
-->
<script src="js/jquery-3.2.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Fogli di stile CSS personalizzati
Ho modificato gli stili CSS che avevamo costruito in aula in due modi:
- Ho importato due font da Google Fonts e ho personalizzato le dimensioni dei caratteri del font di base e dei titoli. Per vostra comodità per i font ho utilizzato un foglio di stile a parte che ho chiamato
custom-fonts.css.
- Ho creato alcune classi che modificano o aggiungono caratteristiche alle componenti bootstrap.
- Due esempi di classi per modificare colore di primo piano e di sfondo di un elemento
- Un esempio di classe per che creare un pulsante outline.
Ho aggiunto commenti nel codice che spiegano aggiunte e modifiche.
Attenzione. È più corretto e funzionale tenere i file del sito organizzati per cartelle. I fogli di stile nella cartella css e le immagini nella cartella img.
custom-fonts.css
@charset "utf-8";
/*
================================================================
File: /css/custom-fonts.css
Ho creato uno foglio di stile specifico per i fonts in modo da
non modificare custom.css.
In questo file:
1. Importo con la direttiva @import le regole di stile che mi
consentono di utilizzare i fonts Google
2. Imposto le regole di stile di body e di h1 - h6 e delle
classi bootstrap .h1 - .h6 per l'utilizzo dei font scelti.
=================================================================
*/
/* Importo le regole che mi consentono di utilizzare i Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700|Quicksand:300,700');
body {
font-family: 'Inconsolata', monospace;
font-size: 18px;
font-weight: 400;
line-height: 1.4;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Quicksand', sans-serif;
}
.giant {
font-size: 3.38em;
}
.huge {
font-size: 2.95em;
}
h1, .h1 {
font-size: 2.58em;
}
h2, .h2 {
font-size: 1.82em;
}
h3, .h3 {
font-size: 2.48em;
}
h4, .h4 {
font-size: 1.29em;
}
h5, .h5 {
font-size: 1.15em;
}
h6, .h6 {
font-size: 1em;
}
.small, small {
font-size: .85em;
}
custom.css
@charset "utf-8";
/* CSS Document */
/* Modifica colori di fondo e di primo piano di jumbotron*/
.jumbotron {
background-color: #333333;
color: white;
}
/* =================================================
COLORI
================================================= */
/*
=========================================================
Invece che definire i colori per l'elemento con classe
jumbotron posso definire classi generiche che applichino
accoppiamenti di colore e di caratteristiche di font
applicabili a qualsiasi elemento
=========================================================
*/
/* colori di sfondo e di primo piano per gli elementi com
class bg-dark */
.bg-dark {
background-color: #333333;
color: white;
}
/* Definisto a colori per il link ipertestuale */
.bg-dark a {
color: #ffffaa;
}
.bg-dark a:hover {
color: #bbbb99;
}
/*
Bootstrap definisce un colore specifico per l'elemento
small (elemento html che serve a identificare una
parte di testo scritta in corpo minore dello standard)
quando e dentro un titolo. Questo colore (#777777) è poco
leggibile con il background che ho scelto quindi lo
cambio. Uso l'opzione !important per fare in modo che
questa regola sostituisca qualsiasi regola precedente
anche se più specifica.
*/
.bg-dark small, .bg-dark .small {
color: #bbbbbb !important;
}
/* Altro esempio */
.bg-deepblue {
background-color: #001633;
color: #ffffee;
}
.bg-deepblue small, .bg-deepblue .small {
color: #bbbbaa !important;
}
.bg-deepblue a {
color: #bbffff;
}
.bg-deepblue a:hover {
color: #bbbbaa;
}
/* =================================================
UTILITÀ
================================================= */
/* Aggiungono margine inferiore
classe responsive più sotto vengono definiti
margini maggiori per schermi superioni a 768px*/
.mb-sm {
margin-bottom: 5px;
}
.mb-md {
margin-bottom: 15px;
}
.mb-lg {
margin-bottom: 30px;
}
/* Classe sostituita da quella definita sotto */
.icon-circle {
border: solid 2px #888;
padding: 12px 7px 7px 15px;
border-radius: 50%;
}
/* Ho creato questa nuova classe da aggiungere alla classe gluphicon
per ottenere un incona grande circondata da un bordo circolare
Migliore della precedente e meno legata alla grandezza del carattere*/
.glyphicon-circle {
border: solid 2px #888;
padding: 12px 15px;
border-radius: 50%;
font-size: 36px;
top: 2px;
}
/* La classe text-center-sm allinea
il testo al centro solo sui dispositivi a schermo piccolo */
.text-center-sm {
text-align: center;
}
/* =================================================
BOTTONI
================================================= */
/* Elimina l'arrotondamento dei pulsanti */
.btn {
border-radius: 0;
/* Converte i maiuscolo e aumente lo spazio tr i caratteri */
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-outline, a.btn-outline {
background-color: transparent;
color: #ffffee;
border: solid 2px #ffe;
letter-spacing: 3px;
}
.btn-outline:hover, a.btn-outline:hover {
background-color: rgba(255, 255, 255, 0.6);
color: #333333;
}
/* =================================================
RESPONSIVE
================================================= */
/* Tablet verticali */
@media only screen and (min-width:768px) {
.mb-sm {
margin-bottom: 15px;
}
.mb-md {
margin-bottom: 30px;
}
.mb-lg {
margin-bottom: 60px;
}
}
/* Tablet orizzontali */
@media only screen and (min-width:992px) {
/* Su tablet orizzontali e desk top la classe text-center-sm allinea
il testo a sinistra */
.text-center-sm {
text-align: left;
}
}
Risorse
Logo accademia
Bootstrap snippets per Dreamweaver
Per inserire in Dreamweaver i frammenti di codice inseribili con nelle pagine html procedi così:
- Scarica /userfiles/file/docs/Bootstrap/Bootstrap_Snippets.zip ed estrai il contenuto
- In Windows copia la cartella Boostrap_Snippets in C:\Users\
<NomeUtente>\AppData\Roaming\Adobe\Dreamweaver ##\it_IT\Configuration\Snippets. Sostituisci <NomeUtente> con il nome dell'utente loggato, ## con la versione di Dreamweaver che usi e it_IT con la lingua se diversa da italiano.
- In Mac OS X, apri Finder, premi Shift-Cmd-G, digita
~/Library/Application Support nella finestra di dialogo e fai clic su Vai. IMPORTANTE: Il valore digitato nella casella di dialogo inizia con una tilde (~). Quella che devi raggiungere è la Library nascosta di root, non la libreria principale del Mac. Dovresti quindi trovare cartella dove vanno inseriti gli snippets al seguente indirizzo: Adobe/Dreamweaver ## /it_IT/Configuration/Snippets. Sostituisci ## con la versione di Dreamweaver che usi e it_IT con la lingua se diversa da italiano.