Pagina principale - File CSS - Pensa al tuo sito - Prepara i files - Pubblica

Modello per creare pagine principali

Puoi vedere qui come funziona, perché l'hai davanti agli occhi. Bisogna comunque approfondire come disporre le zone una dentro l'altra per ottenere questo aspetto della pagina.

Questo primo paragrafo non sarebbe davvero necessario, perché è possibile copiare e incollare il file da questa pagina come un nuovo file htm, e, se necessario, cambiare l'indirizzo dei suoi collegamenti i CSS, e di quelli per le pagine che si desidera far comparire nel menu o a destar del memu.
Tuttavia diamo questa informazione, nel caso qualcuno desiderasse cambiare la forma di questa pagina. In realtà, qualcuno potrebbe non vuole vincoli di lunghezza di pagina, o desiderare di modificare il menu, gli sfondi e altro ancora. Pertanto, dovreste leggere questa sezione attentamente e comprenderne bene il contenuto.

a) prima cosa mettete un contenitore generico, per disporre al suo interno altre aree che si centrano nello schermo. Di solito si vuole che le nostre pagine siano disposte al centro sella schermata del browser, e non acostate al lato sinistro .

Chiamiamo "cornice" questo contenitore e collochiamolo come TAG <div> ...</div> dopo il TAG <body>. Dentro "cornice" si sistemano tutti gli altri elementi. Qui di seguito per distinguere più facilmente inizio e fine delle zone annidate, utilizziamo colori di fondo diversi.

QUI SOTTO C'È LO SCHEMA COMPLETO: avrei potuto farne uno più semplice, ma quando l'ho fatto stavo ancora imparando. Mi spiace. Però funziona bene.

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><!---place here metatags, css links, and other head elements ---></head>

<body>

<div id ="cornice">

<div id ="testata">

Qui nella striscia della testata si dovrebbe mettere un'immagine di sfondo e un logo. Colore o sfondo della testata, larghezza e lunghezza e altro sono stabiliti con l'uso di CSS. Per inserire il logo, possiamo metterlo qui, dentro un altro div annidato, o in una tabella fatta di una riga e una colonna. La nostra testata è larga quanto tutto lo schermo, a meno che non si desideri impostarla della stessa larghezza della prossima div 'corpo'.
</div>


<div id ="corpo">

'Corpo' viene centrato nello schermo con una particolare istruzione nei fogli di stile. La sua larghezza dovrebbe essere stabilita e impostata in base a quella degli schermi  più popolari tra gli utenti Internet, che al momento è 1024x768px. Per fare questo, è necessario impostare la larghezza dej corpo a 960 - 980px  e 670px di altezza massima. 
Qui abbiamo stabilito che  l'altezza totale della pagina (corpo+testata) non deve superare i 740px.

<div id="perbutton">

In questa div disponiamo alcuni pulsanti che servono per segnalare la pagina ai social media; e insieme mettiamo alla sua destra un menú orizzontale

<div id="bottoni"> Qui abbiamo le immagini dei pulsanti dei social media in una lista non numerata di comandi <ul> per i bottoni. </div>
<div id="top_menu">accanto ai pilsanti abbiamo posto questo spazio con un iframe destinato ad accogliere un menú orizzontale superiore </div>

</div>

<div id="center_container">Per semplicità, abbiamo incluso qui una tabella con due colonne di dimensioni adatte ad ospitare due diversi iframe complementari in lunghezza. Dopo la tabella, al di sotto, abbiamo creato uno spazio per un menu lineare

questa è la tabella di una riga e una colonna
qui mettiamo un iframe
con nome =leftmenu
width="220" height="575"

qui un altro iframe con nome =rightside
width="100%" height="575"

<div id="bottom_menu">

serve per contenere un iframe che chiamiamo botmenu il quale contiene il menú della parte inferiore, da cui si può aprire la página principale in diverse lingue (target = "_ top")

</div>

</div>

</div>

</div>

</body>

</html>

Supponiamo che uno sappia quello che vuole, dato che il sistema è stato progettato per usare i tipi di file qui previsti, per cui tutte le pagine si basano su modelli specifici per ogni tipo di pagina.  Dopo aver preparato il maggior numero di pagine da situare nelle cartelle del sito, è possibile effettuare le seguenti operazioni:

B ) CSS, che significa "Cascading Style Sheets"

Da Wikipedia apprendiamo che, nel settore informatico, CSS è un linguaggio utilizzato per definire il formato di HTML, XHTML e XML per siti e pagine web, e che la composizione delle regole CSS deriva da linee guida (Raccomandazioni) emesse a partire dal 1996 da parte del W3C.
Utilizzare CSS è essenziale per separare il contenuto delle pagine dal loro formato, consentendo agli utenti e agli sviluppatori un modo più chiaro e semplice da usare per la programmazione, mentre fornisce riutilizzabilità di codice e facilita la manutenzione.
Un file CSS contiene le istruzioni che il processore esegue per stabilire le caratteristiche dei vari elementi identificati da un nome in una pagina, e può essere utilizzato in molti modi.

1) mediante file CSS esterni, vincolati alla pagina, per esempio con istruzioni del tipo

<link href="../../stylesheets/pagina_con topmenu.css" rel="stylesheet" type="text/css" />

situate tra i TAG <head> ....<head>. Per semplificare si cerca di fare un foglio di stile unico per tutte le pagine del sito con elementi ricorrenti. Esso può essere applicato a tutte le pagine nel corpo che contengono elementi con nomi modellati nel CSS.
Se si collega il CSS a una pagina, tutti i nomi e le voci dei fogli di stile presenti nella pagina e nel CSS saranno formattati.

2) inserendo istruzioni nella página tra i TAG <head> ....< head>

<style type="text/css">
......................
qui abbiamo un blocco di istruzioni
..................
</style>

3) inserire istruzioni nella pagina tra i TAG <body> y </ body>. Di fatto, nelle pagine ci sono elementi che possono esser formattati con istruzioni HTML, e elementi che si possono formattare assegnando gli stili in linea, o in entrambi i modi. Ecco un esempio

Ci sono molte possibilità di cambiare il formato degli elementi nelle pagine HTML. Ricordiamo che è applicata l'ultima istruzione che il processore legge nella sequenza di linee di codice.
Così si può cambiare un pezzo della pagina in una riga della pagina, mentre i CSS generalmente rimane lo stesso. Se si desidera esplorare le possibilità, è possibile leggere e controllare le pagine di terze parti con gli strumenti di sviluppo di codice tramite il browser.

Qui vorrei suggerire che il modo migliore per impostare le proprietà CSS degli oggetti è quello di utilizzare un editor come Adobe Dreamweaver, che dà la guida in linea, e consente di scegliere, mentre le si scrive, le istruzioni consentite per ogni tipo di TAG

A PROPOSITO DI CLASSI

In un foglio di stile si possono usare interessanti soluzioni per formattare gli elementi di una pagina usando le classi. Una classe è un elemento di stile che può essere applicato a quasi tutti i TAG. Vediamo un esempio di classe, sottolineando che le dichiarazioni tra { } devono tutte terminare con il carattere ';' e quindi potrebbero essere scritte tutte su una riga, o solo su alcune, come si vuole.Esempio di classe:

.td1 {
background-image: url(../immagini/pansoff.png);
height: auto;
border-top-left-radius: 15px; border-top-right-radius: 15px;
border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;
text-align: center; font-family: Arial Narrow; font-size: medium;
}

In questa classe è configurato un'immagine di sfondo, font, la dimensione, l'allineamento e la forma e l'aspetto della cella della tabella. Cioè, questa classe può essere applicato a una singola cella di una tabella che si trova tra <td> ...</td>, o un paragrafo <p> ... </p>

<div id="zone1" class="td1"> contenuto .....</div>

Le classi possono stare anche in un foglio di stile separato, collegato alla pagina. Tutto può essere possibiule, basta sperimentare.

C ) PENSA AL TUO SITO

In primo luogo, avete letto il manuale? Se è così, si sa che è necessario pianificare attentamente la forma e il contenuto di ciò che deve essere prodotto. Scrivete le vostre idee, considerando i modelli che sono disponibili. Utilizzate un editor dedicato o quello che preferite. Consiglio sempre di seguire la regola 5W1H quando si progetta qualcosa. per esempio, anche se il sito non è a fini commerciali, può essere adattato. Se in qualsiasi momento si desidera registrare gli utenti a firmare, o a pagare un contributo per leggere o scaricare elementi utilizzando PayPal o carta di credito, si può svolgere questa funzione con l'introduzione di software da qualche parte in una pagin richiamata nell'iframe rightzone.

In secondo luogo, supponiamo essere uno scrittore, che desidera pubblicare il suo lavoro online. Qui ci sono solo alcune idee su come organizzare il vostro sito. Si consiglia comunque di non modificare le cartelle e i file del sito di base scaricato e decompresso; basta aggiungere nuove cartelle e in esse nuovi file.
Non è vietato, ma non è in genere consigliabile combinare i file e le cartelle esistent con i nuovi. Con riferimento alla struttura che abbiamo descritto nei "modelli" di paragrafo - vedere il menu a sinistra - non si deve cambiare la struttura, ma aggiungere file e le cartelle in base a questo e altri modelli

<
Miosito      Site's folder
|--- index.htm index file - inglés
|--- main_framepage_f.htm

francés
|--- main_framepage_i.htm italiano
|--- main_framepage_s.htm español
 |  
|--- htmpages  

carpetas con páginas htm

 |    |      
 | |---- horizmenus menu orizzontali
 |    |      
 | |---- simples páginas simples
 |    |      
 | |---- vertmenus  menu a columna
 |    |      
 | |---- withmenus páginas complejas deslizan bajo un menú fijo en la parte superior
 |        
 | immagini   Carpetas y subcarpetas para imàgenes  
 |        
 | stylesheets   carpetas de hojas de estilo  
 |        
|--- templates   carpeta de modelos - templates  
 |        
 | entre o por debajo de la anterior añada sus propias
 |        
|--- mynovels    folder with htm pages regarding many novels-fables
 |    |--- n_mainpage.htm página de inicio - mainpage - para los cuentos
 |    |      
 | |---- myhmenus menu en línea
 |    |      
 | |---- simplepag  páginas con estrutura simple
 |    |      
 | |---- myvertmenus menu en columna
 |    |      
 | |---- complexmenus  páginas complejas deslizan bajo un menú fijo en la parte superior
 |    |      
 | |---- downloads   carpeta de archivos de descargar (txtos, pdf, etc)
 |          
Repita la estructura anterior por cada uno de sus libros - novelas largas
 |        
|--- MYBOOK 1    contiene carpetas y páginas que el anterior en relación con un libro
 |    |--- book1_page.htm página de inicio - mainpage - para el libro
 |          
|--- MYBOOK 2   contiene carpetas y páginas que el anterior
 |    |--- book2_page.htm página de inicio - mainpage - para el libro
 |      
Etcétera

Tuttavia, uno può fare come ci pare, se comprende il sistema ed è in grado di controllare i collegamenti tra i file.

D ) Suggerimenti per preparare in base al tipo di file, il modo migliore per diffondere l'opera di uno scrittore

A) Adattare il file index.htm, da usare come Homepage

Provate a preparare almeno un esemplare di index.htm e secondariamente verificate tutti i collegamenti negli iframe.

B) Creare altre pagine principali per ciascuna categoria con lo stessa pianta non è difficile - si possono anche duplicare e cambiare i link alle pagine derivate. Quello che conta è avere chiaro ciò che si sta facendo.

Here always the same header - check the links to connect images and stylesheets, as the position level of those pages is different from index.htm
Top_side
left_menu right_side
Bot_menu

top_side: se per una categoria esistono delle voci di sottocategorie, bisogna creare un menu a colonna per ogni voce di sottocategoria. Per esempio:

  1. NOVELLE o romanzi brevi (che si tratti di categoria o sottocategoria)
    • left_menu: in caso delel novelle, si comincia con la prefazione nella pagina di intro, e poi la lista dei titoli delle novelle.
    • righ_ side: il testo di una novella sta tutto in una pagina, che ha un menu interno fisso, che serve per raggiungere i paragrafi senza fare lo scroll manuale.
  2. LIBRO ( (che si tratti di categoria o sottocategoria)
    • left_menu: si comincia con la solita prefazione e poi con la lista dei capitoli
    • righ_ side: il singolo capitolo di un libro sta tutto in una pagina. che ha un menu interno fisso, per raggiungere i paragrafi senza fare lo scroll manuale.

E) PUBBLICARE

Una volta provato tutto, e navigando attraverso il vostro sito con i browser tutto funziona bene, si può decidere di pubblicarlo. Dovrebbe essere necessario registrarsi a un sito di hosting, tra siti web specializzati, controllando che soddisfa le vostre esigenze e che dà abbastanza spazio.
In più, il provider deve anche ammettere l'accesso FTP per caricare e scaricare i file del tuo sito con l'editor, e fornire i dati per l'accesso FTP, l'indirizzo del server FTP, il nome utente e la password, per esempio. Per saperne di più vedi il paragrafo dal titolo "Strumenti di lavoro".

Bisogna anche considerare le eventuali tasse e tariffe, e che cosa accadrà ai file, se per qualsiasi motivo uno si dimentica di pagare l'affitto del dominio. Ma, la cosa più importante in assoluto è offrire ai motori di ricerca il modo migliore per trovare il sito facilmente tra i milioni in rete.

A questo proposito si dovrebbe utilizzare i così detti "meta tag". cioè, le istruzioni da inserire tra i TAG <head> ....</head> che gli spider dei motori dei motori di ricerca stanno verificando tra i file in internet per classificare i siti.

TIPI PRINCIPALI DI META TAG : meta, keywords, description, AD ESEMPIO

UN META TAG VERAMENTE IMPORTANTE È QUELLO CHE DICE AGLI SPIDERS DEI MOTORI DI RICERCA CHE NON DEVONO FERMARSI ALLA PAGINA ATTUALE, MA ESTENDERE LA RICERCA AI FILE COLLEGATI.
A LORO VOLTA QUESTI FILE CONTENGONO META TAGS. AND COSÌ VIA,. IN QUESTO MODO POSSIAMO PASSARE A INDICIZZARE NEL WEB I PARAMETRI DI TUTTE LE NOSTRE PAGINE E LA DESCRIZONE DELL'INTERO SITO.

Se invece uno scrive "INDEX, NO FOLLOW" gli spider non continuano a cercare le pagine dipendenti dopo questa.
TIP: quando si apre un sito di altri con il browser. si dovrebbe esaminare ciò che è disponibile tra tipo e numero di Meta Tag. Oppure, in siti specializzati, si potrebbe studiare e comprendere eventualmente altri tag da inserire tra i tuoi .

Potreste anche volere che la pagina si apra a schermo pieno, e mettere anche la seguente istruzione, che pero con molti browsers non funziona .

 

Enjoy!