Attenzione: L'elenco dei siti personali è stato spostato qui: http://www.sisteminterattivi.org/sistemi-interattivi-i-(2016-2017)/siti-personali-(a-a-2016-2017)/

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:

  1. 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.
  2. 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.