Diciamo che abbiamo aperto una presentazione Powerpoint nuova e finora vuota. E cosa vediamo?
E hai colori e caratteri aziendali che devi modificare ogni volta. Il modello ti consentirà di farlo una volta per tutta la vita.
E la prima diapositiva della tua presentazione avrà automaticamente questo aspetto SEMPRE senza ulteriori sforzi.
Il modello include:
- Colori
- caratteri
- Segnaposto (sezioni in cui inseriamo testo, immagine, grafico, ecc.)
Di seguito troverai le istruzioni passo passo per creare il tuo modello di PowerPoint.
1. Crea un nuovo file in PowerPoint.
2. Seleziona "Schema diapositiva" dal menu in alto nella scheda Visualizza.
Sulla sinistra viene visualizzato uno schema diapositiva standard.
Qui lavoreremo con lui. E faremo non standard dallo standard.
3. Selezionare il tema del carattere desiderato o crearne uno nuovo.
Un tema font è il tipo di font che usi nella tua presentazione. Credimi, ci sono tonnellate di altri buoni caratteri oltre a Calibri. Specificali solo 1 volta e verranno automaticamente sostituiti nell'intera presentazione o modello.
4. Selezionare lo sfondo desiderato (colore o motivo). Puoi scegliere lo stesso sfondo per tutte le diapositive contemporaneamente o uno speciale per uno.
5. Come possiamo vedere, ci sono molte opzioni per la posizione del testo, l'intestazione, ecc. a sinistra. Ma cosa succede se abbiamo bisogno di uno che non esiste? Ad esempio, per avere 3 foto con firme.
Quindi la funzione Inserisci layout + Inserisci segnaposto ci aiuterà.
Dopo aver fatto clic su "Inserisci layout" viene creata una diapositiva vuota. E possiamo riempirlo come vogliamo.
7. Ora, se stiamo per creare una nuova diapositiva, vediamo le opzioni dal nostro modello.
8. Crea una nuova presentazione e "hai perso" il tuo modello? Vai alla scheda Design e cercalo lì.
Prima di codificare un modello di sito Web in HTML / CSS, è necessario elaborarlo. È consuetudine disegnare un disegno in Photoshop. Il layout finito viene salvato in un file del formato .PSD.
Ad esempio, creiamo il design del sito nell'immagine qui sotto.
1. Apertura di Photoshop e creare un nuovo documento al suo interno ( File -> Nuovo o Ctrl + N).
2. Impostiamo i parametri iniziali. In pratica, è quasi impossibile pensare a un design con precisione al pixel: nel processo di layout, dovrai sicuramente cambiare qualcosa, spostarlo, rifarlo. Pertanto, le dimensioni possono essere impostate approssimative, ed è consigliabile indicare la larghezza e l'altezza del documento ovviamente superiori alla dimensione del sito pianificata, in modo che tutti gli elementi si adattino esattamente al layout. Creeremo il nostro documento con una larghezza di 1000 pixel e un'altezza di 1500 pixel. Nota: pixel, non centimetri. Altri parametri possono essere lasciati soli.
3. Accendiamo i governanti. Durante il lavoro, saranno necessari, perché i righelli ti consentono di misurare le distanze in modo molto accurato. Controlla se hai i righelli attivati. In tal caso, vedrai le scale accanto a sinistra e sotto la barra degli strumenti in alto.
Se non ci sono righelli, attivali ( Visualizza -> Righelli o Ctrl + R).
I righelli dovrebbero mostrare il valore in pixel. Per passare ad esse da un'altra misura di lunghezza, fai clic destro sul righello e seleziona la casella corrispondente nel menu che si apre.
4. Verificare che la dimensione del carattere sia specificata in pixel e non in punti. Se non è configurato correttamente, vai su Modifica -> Impostazioni -> Generale, nella finestra che appare, vai alla scheda Unità di misura e righelli, nell'elenco a discesa Testo scegliere Pixel e premere ok.
5. Crea immediatamente lo sfondo del sito. Abbiamo questo riempimento sfumato arancione, che diventa giallo. Nel pannello di sinistra, seleziona lo strumento Pendenza.
Sul pannello che compare in alto, premere il pulsante Gradiente specchio, scegli un colore nella tavolozza a sinistra.
Utilizzo degli strumenti della finestra aperta Editor gradiente, scegli i colori che desideri. Per impostare il colore esatto del punto di controllo, fai clic su di esso, premi il pulsante Colore e nella finestra di selezione del colore specificalo in RGB, HSB, CSS o qualsiasi altro formato disponibile.
Come risultato delle manipolazioni, il gradiente è risultato come segue.
Per applicare un gradiente al livello corrente, trascina il puntatore su di esso tenendo premuto il pulsante sinistro del mouse.
6. Salva lo sfondo in un file. Quello che abbiamo fatto dovrebbe essere visualizzato sotto la pagina principale e occupare l'intera finestra del browser, una sorta di sfondo. Ad esempio, un sito è largo 800 pixel e la risoluzione dello schermo dell'utente è molto più alta. Il resto dello spazio (tutto tranne gli 800 px che saranno occupati dal blocco di pagina) verrà riempito con uno sfondo sfumato.
Poiché la risoluzione dello schermo non può essere prevista, puoi tagliare una striscia di un pixel di spessore dallo sfondo creato e salvarla come immagine. Il browser riempirà lo sfondo con esso per l'intera larghezza.
6.1. Scegliere uno strumento Area rettangolare.
6.2. Seleziona una striscia di larghezza arbitraria, ma lungo l'intera lunghezza del livello.
6.3. Copia la selezione ( Ctrl + C).
6.4. Crea un nuovo documento ( Ctrl + N), imposta la sua larghezza su 1 pixel e incolla il copiato ( Ctrl + V).
6.5. Salva il file in Jpg-formato.
7. Creare lo sfondo della pagina. Lo sfondo sarà completamente bianco. Scegliere uno strumento Rettangolo e impostare i parametri richiesti nella finestra delle proprietà. Abbiamo un rettangolo di 800x1100 pixel, il cui angolo in alto a sinistra si trova al punto 100.0.
8. Crea lo sfondo dell'intestazione. Riempimento sfumato di tipo opaco con dimensioni 780x80px.
Salvalo come file grafico separato largo 1 pixel, come abbiamo fatto con lo sfondo.
9. Creare il menu in alto. Usando lo strumento Testo orizzontale, aggiungi la prima voce di menu al layout - casa... Il livello verrà creato e persino rinominato automaticamente, quindi non dovrai fare nulla con esso.
È importante qui che tutti i punti siano distribuiti in modo uniforme, quindi si consiglia vivamente di utilizzare i righelli. Per estendere una verticale, trascina tenendo premuto il pulsante del mouse da sinistra a destra. Usa i righelli per misurare la distanza, considerando che ogni voce di menu dovrebbe occupare 120 pixel nel nostro caso.
10. Allo stesso modo, inserire il resto delle voci di menu.
11. Aggiungi un logo. Ne abbiamo già uno già pronto, quindi non resta che inserirlo con cura nel layout. Per fare ciò, fare clic su File -> Apri, quindi fai clic sull'immagine e, tenendo premuto il pulsante del mouse, spostala sul titolo del documento modello, quando si apre, trascina l'immagine nella posizione desiderata nel layout e rilascia il pulsante del mouse.
12. Scriviamo il nome e lo slogan del sito. Con lo strumento che già conosciamo, integriamo il logo quasi creato con iscrizioni.
13. Vai al pannello laterale. Innanzitutto, creiamo e salviamo in un file separato un riempimento sfumato per i suoi titoli. Hai familiarità con gli strumenti, non è richiesta alcuna spiegazione.
14. Aggiungere il testo del titolo del blocco di informazioni al gradiente appena creato.
15. Disegna un bordo per l'area. Per fare ciò, è sufficiente utilizzare un rettangolo trasparente con linee di contorno nere. Seleziona lo strumento Rettangolo, imposta il tipo di riempimento della forma su Nessun colore, fai clic sull'icona Imposta tipo di tratto e seleziona il nero, altrimenti non ci saranno linee. Se il contorno è troppo spesso, imposta lo spessore della linea su 0,5 pt.
16. Di seguito, aggiungi un'intestazione di blocco con un riempimento sfumato, come negli elementi 12-13.
17. Creare il blocco di menu del pannello di sinistra. Aggiungi un rettangolo arancione di 100 pixel con un contorno giallo di 0,2 pt.
18. Aggiungi del testo.
19. Con l'aiuto della duplicazione di livelli e righelli, crea altre cinque voci di menu del pannello di sinistra.
20. Scrivi il testo nella parte principale della pagina usando lo stesso strumento.
21. Aggiungi una foto alla parte principale della pagina, come abbiamo fatto con il logo. Per copiare un'immagine è sufficiente spostarla con il mouse tenendo premuto il tasto. Alt... Se improvvisamente l'immagine non si adatta alle dimensioni, utilizzare lo strumento Trasforma ( Ctrl + T).
22. Disegna lo sfondo del piè di pagina del sito: un gradiente arancione di 64 pixel.
23. Salvare la striscia larga 1 pixel dello sfondo inferiore in un file grafico separato.
24. Diminuire l'altezza della pagina. Si è scoperto che tutti gli elementi sono già stati disegnati e c'è ancora spazio extra. È qui che i nomi dei livelli significativi sono tornati utili. Tra gli altri, seleziona il livello di sfondo (lo chiamiamo Sfondo) e usa lo strumento Trasforma per ridurre l'altezza del nostro rettangolo bianco al bordo inferiore del piè di pagina.
25. Salva il modello in un formato file .PSD (File -> Salva).
26. Il risultato di questa azione è ancora un modello di sito semplice, ma già dall'aspetto normale.
Ora, dal layout PSD, resta da utilizzare HTML / CSS per creare il modello del sito Web, ma ne parlerò nel prossimo articolo.
Se vuoi che il tuo sito wordpress sembri promettente, prima dovresti pensare a creare un tema unico per esso. Questo processo è piuttosto laborioso, perché è direttamente correlato a varie codifiche e script. Smontiamolo da zero.
Quasi tutti i temi wordpress sono installati nella directory wp-content/temi e sono composti da 3 categorie di file:
- file di fogli di stile;
- file di funzionalità aggiuntive;
- file modello.
I file del foglio di stile sono style.css. Sono responsabili del colore, delle dimensioni, del carattere e di altri parametri degli elementi del sito. Ogni sito ha solo 1 file style.css. Se apri questo file, nella parte superiore puoi vedere le informazioni sul titolo, l'autore e una breve descrizione dell'argomento. Quando crei il tuo tema, puoi inserire informazioni su di te in style.css.
La categoria successiva è file di funzionalità aggiuntive. Questi includono functions.php, il cui principio lo fa sembrare un plugin. Grazie a questo file, puoi personalizzare visivamente il tema direttamente nel pannello di amministrazione. Solitamente l'elenco delle impostazioni non è molto ampio (nome del sito, colore di navigazione e pannelli laterali del sito, e così via). Se il tema è multifunzionale, l'elenco delle impostazioni sarà molto più ampio.
Passiamo ora ai file modello. La loro funzione principale è quella di generare pagine richieste dai visitatori del sito. I file modello hanno l'estensione ".php". La maggior parte dei temi di base può contenere solo un file modello chiamato index.php. In questo caso, tutte le pagine del sito saranno identiche. Questo design viene spesso utilizzato per creare risorse Internet con database, quando il design non svolge un ruolo chiave.
Se non hai mai realizzato un design prima, dovresti provare a creare prima un tema semplice. Per il suo normale funzionamento sono necessari almeno 2 dei seguenti file: style.css e index.php.
I file di funzionalità aggiuntive in questo caso non possono essere utilizzati, come capisci. Tra i file modello, index.php è uno dei più flessibili. Può generare in modo indipendente intestazioni, vari blocchi, piè di pagina (piè di pagina), contenuto e altri elementi del sito.
Vale la pena notare che quei parametri che non sono generati dal file index.php verranno generati da file standard. Ad esempio, se il tuo tema è composto solo da 2 dei file di cui sopra, ma l'utente ha bisogno di generare un modulo per l'aggiunta di commenti, questa funzione verrà eseguita dallo standard comments.php. Pertanto, se vuoi che il tuo tema sia più unico, vale la pena creare file modello aggiuntivi. Consideriamo i principali.
- Per aggiungere commenti, hai indovinato, viene utilizzato il modello comments.php.
- Se vuoi creare un popup con commenti, per tali scopi hai bisogno di comments-popup.php.
- Per generare la home page, viene utilizzato home.php.
- Il file single.php è responsabile della visualizzazione degli articoli del sito. Se non hai un file di questo tipo, index.php eseguirà la sua funzione.
- Il file page.php genera le singole pagine del sito.
- Per visualizzare le informazioni sull'autore, è necessario author.php.
- Category.php è responsabile delle categorie.
- La visualizzazione di archivi, data e ricerca è effettuata rispettivamente dai file archive.php, date.php e search.php.
- Affinché il tuo sito visualizzi una pagina di errore 404 univoca, dovrai aggiungere il tuo 404.php.
- Il piè di pagina e il piè di pagina del sito sono generati rispettivamente dai file header.php e footer.php.
Creare un tema unico manualmente da zero
Per prima cosa è necessario installare un modello adatto. Può essere trovato sia sul sito web ufficiale wordpress.org che altrove. Si consiglia di utilizzare il sito ufficiale, poiché qualsiasi terza parte potrebbe contenere file dannosi e collegamenti interrotti.
Una volta effettuata la tua scelta, puoi iniziare a scaricare l'archivio. Alla fine del processo, sarà necessario scompattarlo e caricare i file in cartelle specifiche del sito (l'archivio di solito contiene una piccola istruzione). Il download può essere effettuato utilizzando il programma FileZilla o direttamente dall'hosting, se supporta questa opzione. Ora non ti resta che andare nella sezione "Temi", selezionare quello che hai scaricato e cliccare sul pulsante "Attiva".
Puoi anche selezionarlo direttamente nel pannello di amministrazione di wordpress. In questo caso, non è necessario scaricarlo. Devi solo fare clic sul pulsante "Installa" e quindi su "Attiva". Prima dell'installazione, si consiglia di eseguire un'anteprima.
Ora che il tema è attivato, puoi passare a personalizzarlo. Il primo passo è pensare alla parte superiore del sito (intestazione). Questa è la prima cosa che attira l'attenzione dei tuoi visitatori, quindi dovresti prenderla in modo responsabile. In genere, l'intestazione è costituita dal nome del sito, dal logo e da brevi informazioni sul contenuto. L'intestazione può essere creata in qualsiasi editor di grafica. Anche in vernice standard. I designer più avanzati utilizzano Adobe Photoshop.
Il nome del sito dovrebbe essere breve e facile da ricordare. Esistono molti stili diversi tra cui scegliere in Adobe Photoshop. Quando crei un logo, potresti aver bisogno di forme diverse. Possono essere scaricati dal sito Web ufficiale di Adobe Photoshop.
Dopo aver disegnato l'intestazione in un editor grafico, dovrai caricarla sul tuo sito web. Al termine del download, verrà visualizzato un URL a destra dell'immagine e dovrà essere copiato. Quindi devi andare alla sezione "Editor" e selezionare il file responsabile della generazione dell'intestazione (header.php). In esso, dovrai trovare l'URL dell'immagine corrente e sostituirlo con quello che hai ricevuto durante il caricamento dell'immagine di intestazione. Successivamente, dovrai aggiornare il file. Ora puoi procedere alla verifica della visualizzazione dell'intestazione.
Se la tua intestazione ha parametri diversi da quello standard, allora possono essere regolati in header.php. La larghezza è controllata dall'attributo larghezza e l'altezza è controllata dall'altezza. Le regolazioni possono essere effettuate in pixel e percentuali. Quindi, se vuoi solo allungare il limite, impostalo al 100%.
Se lo desideri, puoi aggiungere collegamenti attivi alle pagine del sito wordpress nell'intestazione. Questo può essere fatto utilizzando vari servizi. Ce ne sono molti su Internet. La maggior parte di loro funziona secondo lo stesso principio. Delinei l'area desiderata dell'intestazione, che sarà riservata al collegamento, e il servizio ti fornirà il codice di cui hai bisogno. Quindi dovrai aggiungere questo codice al tuo file header.php. Fai attenzione quando lo aggiungi. Ogni punto conta. Se aggiungi il codice nel posto sbagliato, i link attivi non appariranno nell'intestazione.
Dopo aver sostituito l'intestazione standard, puoi iniziare a sostituire lo sfondo del sito wordpress predefinito, i widget, la navigazione, il piè di pagina e altri componenti del sito wordpress. Possono anche essere disegnati in qualsiasi editor grafico e caricati sul sito sotto forma di immagine.
Con te vale la pena considerare che non dovrebbe essere luminoso. La maggior parte dei webmaster preferisce utilizzare uno sfondo bianco. Non fa male agli occhi né distrae dal contenuto principale.
Per creare una navigazione di qualità da zero, hai bisogno di un po' di conoscenza di tag come
