oggi imparerai come creare un sito web usando google siti
oggi imparerai come creare un sito web usando google siti in modo che Google ospiterà effettivamente i siti Web completamente gratuitamente .
proprio come quello che abbiamo costruito qui sono molto molto facili da costruire , e tu puoi anche usare il tuo nome di dominio personalizzato , te lo mostrerò esattamente come ho fatto tutto questo in pochi minuti ,vengo da Alex ideaspot iniziamo .
schermata qui per iniziare il nostro primo sito
ok, quindi per primo passo andiamo su sites.google.com e avremo questa schermata qui per iniziare il nostro primo sito . quindi puoi iniziare un nuovo sito premendo il pulsante più vuoto , lì o puoi guardare nella galleria dei modelli penso che il modo più semplice per iniziare , è utilizzando uno di questi modelli predefiniti vedrai che hanno una gamma piuttosto buona di design , che possiamo usare .
non preoccuparti se non è esattamente quello che stai cercando perché , è carino facile da personalizzare e cambiarli per adattarsi a cosa ti piace . quindi è quello che faremo qui quindi per questa demo andrò con questo progetto , chiamato quindi basta fare clic su quello così possiamo iniziare compilando alcuni elementi di base , dettagli del nostro sito web, quindi inizieremo con il nome del
progetto che chiamerò questa idea spot tech e mettiamo lo stesso cosa in questa immagine di intestazione qui, quindi lo eliminerò e metti la tecnologia spot dell'idea lì dentro , e nella nostra immagine di intestazione qui possiamo metterne una descrizione della riga del nostro progetto, quindi la chiamerò solo uh suggerimenti , e tutorial sul web design in modo che sembri abbastanza buono la prossima cosa che potrei fare , è cambiare questo logo, quindi se passiamo con il mouse su quel logo
noi puoi vedere il logo di modifica lì, facciamo clic su quello e possiamo eliminare il logo che abbiamo per impostazione predefinita . e possiamo effettivamente carica il nostro logo così ho un paio di loghi .
che ho progettato qui vado con questo questo bel punto semplice in uno sfondo blu navy una cosa intelligente che hanno qui è è stato rilevato il colore principale del logo e possiamo usare quel colore del logo per il nostro tema quindi se clicchiamo su quello cambierà . il nostro tema a quel colore, quindi è piuttosto interessante, proviamolo e poi possiamo andare avanti e chiuderlo possiamo anche personalizzare il logo in quella scheda del browser che si chiama favicon .
quindi allo stesso modo torniamo al logo fai clic su modifica logo e se scorriamo qui vedremo favicon così possiamo caricare la stessa immagine usa anche quello come nostra favicon, quindi dopo andiamo avanti e pubblichiamo il nostro sito otterremo la nostra favicon nella nostra scheda del browser se sei
interessato nel creare il tuo logo gratuito, dai un'occhiata a canva.com penso che questo sia un ottimo modo per farlo anche fare un sacco di design grafico gratuito molto semplice da usare logomaker.commakr.com è ottimo per creare piccoli loghi molto semplici, quindi controlla quelli se non
hai creato il tuo logo ma continuiamo con il nostro sito web pubblichiamo effettivamente questo e vediamo cosa siamo arrivati fino ad ora, quindi se clicchiamo su pubblica puoi vedere per impostazione predefinita l'indirizzo web sarà la vista sites.google.com e poi il nostro title ideaspot.txt .
personalizzazione
quindi sarà quello che usiamo di default hanno anche la possibilità di fare una personalizzazione dominio in modo che possa essere qualsiasi nome di dominio che hai puoi sostituire quel nome con il tuo così ti mostrerò come farlo tra poco un secondo ma andiamo avanti e pubblichiamo quello che abbiamo qui , e poi possiamo andare avanti e fai clic su Visualizza qui in basso, quindi questo , è ciò
che abbiamo finora è possibile vedi il nostro indirizzo qui su sites.google.com se vogliamo saperne di più professional .
andiamo avanti e usiamo un dominio personalizzato per sostituirlo quindi andiamo torna al nostro costruttore di siti qui e qui andremo all'ingranaggio icona lì le nostre impostazioni , e possiamo andare su domini personalizzati , lì vedrai che abbiamo c'è un pulsante per avviare la configurazione, facciamo clic su quello .
quindi da qui ci sono due opzioni possiamo acquistare un dominio da google in questo momento o noi può utilizzare un dominio di terze parti .
quindi ci sono molti posti che in realtà vendi domini e di solito sono piuttosto economici da acquistare namecheap.com , è fantastico per ottenere offerte speciali su dot com , e reti godaddy is una buona .
nel mio caso sono in australia vendono buoni affari su comau co uk , per quelli di voi nel uk uh co-nz per i neozelandesi questo è un buono in questo caso userò godaddy , ma puoi usare tutto ciò che ti piace davvero o semplicemente procurartene uno tramite google lì userò quello di una terza parte,
quindi andiamo avanti e facciamo clic il prossimo qui andiamo avanti e colleghiamo il dominio nome che stiamo usando quindi sto usando new idea.site , e dirà il il dominio non è verificato per favore verifica la tua proprietà così vado avanti , e fai clic su quel link di verifica lì, quindi questo è probabilmente il più parte tecnica dell'intero tutorial google ha reso questo abbastanza facile da fornendo istruzioni per tutti .
fornitori di domini
i principali fornitori di domini così nome a buon mercato goaddy tutto è elencato qui praticamente ovunque tu possa avere ho comprato un dominio .
quindi nel mio caso sto usando godaddy.com quindi lo metto lì e ha le istruzioni che puoi seguire .
quindi in pratica dobbiamo solo prendere questo record di testo copiarlo , e spostalo ovunque possediamo il nostro dominio, in questo caso, amico nel tuo caso ovunque sia ospitato e nel mio caso in godaddy , vai ai miei domini e troverai il tuo gestore dns qui una volta che clicchiamo che finiremo su questa schermata , e possiamo aggiungi quel record di testo.
quindi qui aggiungiamo un record di testo che è txt incolliamo quel valore di testo che google ci ha dato , che è il codice da qui noi l'ho appena copiato e incollato in quella casella lì l'host .
metterò solo la chiocciola lì e andiamo avanti e clicchiamo salva .
così qui vediamo che abbiamo il nostro sito google codice di verifica nel nostro DNS ora, quindi sarà diverso a seconda di dove il tuo nome è ospitato ma è così che sembra in goaddy .
quindi aspetta solo un paio di minuti assicurati che sia tutto salvato correttamente head torna alla nostra verifica google , e facciamo clic verifica qui ecco, abbiamo quel segno di spunta verde, quindi il nostro sito web , è tutto verificato quindi ora torniamo al nostro costruttore di siti, probabilmente possiamo far
funzionare il nostro dominio personalizzato ora così i domini personalizzati possiamo iniziare a configurare terze parti e andremo avanti , e ancora andremo metti qui il nostro dominio così è una nuova idea.site , e questa volta dovremmo ottenere un spunta perché abbiamo superato .
il processo di verifica e possiamo fare clic il prossimo qui quindi abbiamo solo un po 'di più dettagli tecnici da esaminare prima di finire questo, quindi dirà "vai" torna alle nostre impostazioni DNS e crea quella voce cname per www e vogliamo che sia ghs.googlehosted.com quindi lo copio torneremo al
nostro DNS in godaddy e metteremo questo in okay quindi torniamo al nostro gestore DNS qui e vogliamo quel cname www al momento , è impostato su at se ne hai già uno lì lo modificheremo se non ne hai già uno lì noi puoi semplicemente andare avanti , e aggiungere un cname con www e puntarlo a lì e salvalo altrimenti possiamo modificarlo .
questa qui punta all'app che andremo a fare puntalo su ghs google hosted.com salvalo in così nel tuo gestore dns tu ora dovrebbe avere un cname che è www e punta a ghs google hosted.com questo , è tutto ciò che dobbiamo fare con quel passaggio , e torniamo al nostro costruttore di siti e qui con un po' di fortuna possiamo fare clic su Fine .
ora quindi sta assegnando il nostro dominio , e lì lo colleghiamo a new idea.site quindi ci vuole un po' di tempo minuti .
per iniziare a lavorare forse da 30 minuti a 2 ore dicono che può essere ci vogliono fino a 72 ore ma non l'ho mai avuto così a lungo noterai anche che usa www.newidea.site .
in questo caso se vuoi usa quello semplice e www ti mostrerò come farlo in un secondo in pratica imposteremo un po 'di inoltro in modo che tutto vada a il www per impostazione predefinita, quindi scendiamo qui a inoltro e godaddy farò clic su aggiungi e selezioneremo https , qui vado a inoltra tutto
a www new idea.site permanente 301 e salvalo così ora dovremmo essere in grado di vedere che abbiamo l'inoltro a www nuova idea.site è così che funziona in godaddy su namecheap è abbastanza simile .
fai un record di reindirizzamento URL
vai su dns avanzato, fai un record di reindirizzamento URL e aggiungilo quell'inoltro lì dentro , quindi ora se apriamo una nuova navigazione in incognito finestra , e vai a new idea.site dovremmo ottenere il nostro sito lì e dovrebbe funzionare in entrambi i modi , con www o senza www .
quindi in entrambi i casi dovrebbe portarci al nostro sito Web, abbiamo SSL sicuro anche lì in modo che sia tutto fatto di cui potresti effettivamente aver bisogno per cancellare i cookie prima che funzioni sul tuo browser, quindi vai al tuo impostazioni o qualsiasi browser tu stia utilizzando di solito puoi
cancellare il tuo dati di navigazione cancella i cookie questo sta usando google chrome ma qualunque cosa tu stia usando puoi cancellare i tuoi cookie .
ora possiamo collegare il nome di quel sito e dovrebbe essere dovrebbe funzionare bene quindi sembra tutto a posto condividerò alcuni link per dettagliare istruzioni nella descrizione , per l'inoltro dei domini su namecheap su godaddy su google domains e cloudflare , è l'altro che mi piace .
quindi controlla la descrizione che hai le istruzioni per farlo su tutti quei fornitori, quindi torniamo alla personalizzazione di questo pagina una cosa che voglio cambiare , è questo menu a lato ce ne sono alcuni opzioni per cambiarlo, quindi diamo un'occhiata tornando nel nostro generatore di pagine.
possiamo andare a questa marcia nella parte superiore della navigazione impostazioni in modo che possiamo guardare la nostra modalità .
al momento siamo nel menu laterale e possiamo cambiarlo in un menu principale . quindi ora abbiamo una sorta di menu principale più convenzionale che possiamo visualizzare , in anteprima quello con quella piccola icona .
lì che mostrerà noi il nostro nuovo menu quindi abbiamo il nostro menu in alto lì se lo guardiamo su un tablet sembra così e su un mobile .
questo qui abbiamo un menu di hamburger che salta fuori di lato, quindi penso che questo sia un buon modo per farlo . non molte scelte ma penso che questa sia un'opzione decente , tra quei due dopo noterai che abbiamo il nostro la scheda dei temi si apre qui .
quindi al momento siamo su semplice e abbiamo questo colore questo blu scuro che è stato selezionato in base al nostro logo prima in modo da poterlo capovolgere tra questi e si possono fare delle scelte in base allo stile il colore. e hai anche alcune opzioni di carattere lì così puoi prova stili diversi là fuori mi
piace molto questo livello penso che abbia un bella sottolineatura marina , lì una sottolineatura marina lì e le scelte di carattere sono tra lastra e stretto e uh dov'ero .
la scienza sans è piuttosto carina , la prossima cosa che possiamo fare è modificare l'intestazione .
così abbiamo delle scelte per il nostro tipo di intestazione lì se passiamo con il mouse sull'intestazione possiamo . cambiare abbiamo un grande banner al momento ma puoi scegliere una copertina intera .
un banner o solo il titolo, quindi mi piace quello che avevamo in realtà il banner grande era piuttosto bello , e poi se lo giriamo indietro possiamo cambiarlo image così possiamo caricare le immagini dal nostro pc , o da noi possono selezionare le immagini e hanno una galleria di sfondi immagini qui in modo che possiamo scegliere qualcosa che sarebbe adatto al nostro progetto .
forse quel blocco note lì e possiamo cambiare il nostro sfondo , c'è un po' la cosa magica della stella lì che ci permette di migliorare la leggibilità . lo rende un un po' più scuro, continuo a non pensare che la leggibilità sia fantastico, quindi potrei effettivamente cambiare per renderlo audace forse aumentarne le
dimensioni un po' così e lo stesso con questo qui facciamolo più grande di 13 andiamo con 24 quindi penso che questo sia un po' meglio se guardiamo questo nell'anteprima che aspetto ha? quindi questo non è male ma penso che il testo non lo sia leggibile come vorrei .
perché è un testo bianco su questo sfondo potremmo basta scegliere un'immagine più scura e vedere com'è, quindi sono chiuderò qui e quello che possiamo fare , è che potrei caricarne uno che ho dal mio pc . quindi vai con questo qui così è un un'immagine più scura e possiamo vedere che il testo bianco è più leggibile l'altra cosa che potresti fare è usare il tuo software di editing di immagini preferito ,e
riduci semplicemente la luminosità della tua immagine e poi caricala in modo da ottenerla effetto successivo . diamo un'occhiata all'inserimento del contenuto nella pagina questo è abbastanza autoesplicativo puoi aggiungere immagini di caselle di testo puoi incorporare html , e puoi aggiungere file dalla tua unità google ne hanno alcuni layout predefiniti qui .
e altri elementi che possiamo aggiungere qui inclusi documenti google diapositive e fogli di google google maps , e calendari video di YouTube quindi andiamo a provare alcune di queste cose tutto quello che dobbiamo fare . è selezionare un'area e verrà aggiunta un nuovo blocco direttamente sotto
quello su cui stai lavorando, quindi ho solo inserito una casella di testo e qui possiamo solo metterne un po' testo in inserirò solo del testo di riempimento dentro ed è solo un normale editor di testo uguale a google docs per fondamentalmente così potrei fare di questo un titolo e lo lascerò lascia che sia in grassetto, ma hai l'idea che potremmo andare avanti e aggiungere un immagine sotto quella così potrei
caricare qualcosa per il mio disco forse questo ragazzo lavora al pc lì e c'è la nostra immagine che puoi cambia le dimensioni trascinando questa maniglia lì e sposta l'immagine in giro la pagina facendo anche questo in modo che sembri tutto a posto potrei andare avanti e pubblica questo e guarda come stiamo andando così lontano, ecco cosa era nell'ultimo salvataggio, questo è ciò che accadrà dopo la
pubblicazione, quindi andiamo avanti e così possiamo provare questi layout predefiniti i potrei provare uno di quelli ora, quindi andiamo con quel layout a due colonne qui e qui aggiungiamo immagini e modifichiamo il testo quindi inserirò un'immagine qui andiamo carica qualcosa dal nostro disco andiamo con questo ragazzo che cammina da queste parti e andiamo con questa ragazza che è un laptop possiamo vedere che in realtà sono io che cammino intorno a uh indietro nella mia città natale qualche anno fa da l'aspetto poi è solo questione di riempire questi cose fuori potrei far apparire del testo lì
dentro Lo chiamerò progetti e servizi per esempio e ne metto solo un po' un po 'di testo di riempimento sotto c'è un layout dall'aspetto abbastanza decente che facciamo che è bello penso che guardando questo sia ho una riga in più sotto, quindi se elimino quella abbiamo tre righe su ogni lato che sembra abbastanza buono e noterai che stiamo lavorando al in fondo alla pagina qui possiamo effettivamente cambiare il layout di uno qualsiasi di questi blocchi l'ordine afferrando quella maniglia lì e tu posso
trascinarlo su quindi se lo voglio in alto posso solo lasciar cadere che puoi vedere quella piccola linea blu che è dove sta andando per entrare così lo inserirò lì dentro così ci siamo abbiamo questa sezione è vicino alla parte superiore proviamo ad aggiungere un pulsante alla pagina quindi diciamo che voglio un pulsante sotto questo elemento qui andiamo pulsante e andiamo incontra il nostro team e possiamo collegarlo a qualsiasi pagina sul sito e possiamo incollare un link esterno per collegare a qualsiasi altro sito web che ci piace ma lo collegherò al pulsante del nostro team perché soddisfa il nostro squadra e
inseriremo quel pulsante lì e per impostazione predefinita è andato a sinistra possiamo trascinarlo dove vogliamo nella pagina qui quindi se volessi che fosse al centro posso semplicemente lasciarlo cadere laggiù e sembra abbastanza buono mentre sono qui potrei riempire quella missione del progetto dichiarazione quindi basta incollare un riempitivo lì voglio che sia allineamento centrale in modo che sembri abbastanza buono, quindi tutta questa roba è carina autoesplicativo quindi non ho intenzione di passare attraverso tutto questo una cosa che è abbastanza interessante è questo codice di
incorporamento, quindi diciamo che volevo incorporare alcuni contenuti interattivi su questo sito web puoi incorporare qualsiasi codice html che ti piace nella pagina, quindi andiamo avanti, andiamo incorpora del codice e possiamo incollare il codice di incorporamento dal web qui quindi cose come moduli quiz sondaggi a cui potresti andare posti come typeform.com e ottieni quiz e cose come
sondaggi jotform è un altro buono che può fare registrazioni e moduli d'ordine in questo caso ne ho uno chiamato yazio che ha un puoi incorporare alcuni calcolatori così potrei incorporare questo calcolatore di perdita di peso sulla pagina, quindi copio solo quel codice come ho detto, puoi trovare
questo genere di cose su molti servizi diversi e andrò avanti e inserirò quel codice lì dentro e farò clic su Avanti e in realtà ci permetterà di inserire del codice nella pagina in modo che sia il calcolatrice che abbiamo ottenuto gratuitamente e possiamo andare avanti e possiamo trascinarlo per farlo stare
ovunque noi mi piace sulla pagina e poi possiamo vedere in anteprima questo e vedere com'è, quindi fai clic sul pulsante di anteprima lì sto andando per tornare al layout del desktop ora possiamo vedere lì abbiamo la nostra calcolatrice non ne ha abbastanza lunghezza per adattarsi in modo che la calcolatrice sia più lunga della casella che abbiamo assegnato in modo che possiamo effettivamente modificare la
larghezza della scatola e lunghezza facendo clic qui e quindi trascinandolo e portandolo su taglia giusta così potrei allungarlo per vedere dov'è il fondo del nostro di la nostra scatola continuiamo così andiamo così possiamo vediamo se effettuiamo di nuovo l'anteprima speriamo che sia un un po' meglio ci siamo così la barra di scorrimento è andata così sembra piuttosto interessante questo non è un sito Web di
perdita di peso questo è un blog tecnologico quindi in realtà non ho bisogno di quella calcolatrice, è solo per dimostrando come possiamo incorporare il codice nel nostro sito ma molte cose che puoi fare incorporando il codice nel tuo sito web ora per l'ultimo passaggio diamo un'occhiata alle pagine così per impostazione predefinita abbiamo quattro pagine qui abbiamo ho una squadra di storia della casa e una pagina faq possiamo andare alla scheda di quella pagina qui e puoi puoi effettivamente rimuovere le cose o possiamo effettivamente rinominarle e guardarle quindi potrei dare un'occhiata alla storia per
cominciare quindi questa è la nostra pagina che abbiamo per la storia se volessimo aggiungere una pagina noi puoi fare clic su quel pulsante più in basso chiamiamolo contatto crea un contatto colpo di pagina fatto, quindi questo è completamente vuoto pagina possiamo iniziare a costruire da zero qui e dire che potremmo aggiungere un'intestazione che abbiamo ho quell'intestazione abbiamo il titolo lì possiamo cambiare quello sfondo immagine come abbiamo fatto prima come sceglierne uno dalla
galleria o caricane uno così potrei andare avanti e farlo vai avanti e inserisci più contenuto lì come abbiamo fatto prima quindi abbastanza autoesplicativo l'altro modo davvero carino di lavorare con le pagine è solo per duplicare una pagina quindi diciamo che siamo davvero contenti di quell'aspetto che avevamo sulla home page, duplichiamo e basta la home page chiamiamola questa pagina delle
informazioni quindi la cambierò per circa e poi premi fatto e ora ho un sulla pagina, quindi non vogliamo lo stesso contenuto, quello che vogliamo solo è dire su lì e chiama, sì, informazioni su di noi e poi vai avanti e basta rimuovere il contenuto che avevamo dalla home page con quelli icone del bidone della spazzatura ci andiamo così hai l'idea che possiamo pulirlo pagina su e aggiungi e rimuovi contenuto in base a ciò che ci piace, noterai che ogni volta che aggiungiamo una pagina, aggiunge quella pagina al nostro menu lassù e tu probabilmente non ne voglio più di cinque o sei o sette elementi nella parte superiore della pagina puoi aggiungere sottomenu navigando qui e trascinare le cose così
piuttosto che avere tutte queste cose dentro il menu potremmo fare la faq sotto il menu about in modo da poterci trascinare sopra circa e abbiamo seduto sotto il fatto stesso con il storia mettiamola nella sezione informazioni, quindi adesso siamo tornati a casa per i contatti e la squadra, potremmo mettere anche la squadra lì, quindi ci andiamo così ora quando ci muoviamo su abbiamo ottenuto il nostro sottomenu lì così possiamo guardare le faq la storia e la squadra in questo modo quindi questo è un
diamo un'occhiata al piè di pagina
buon modo per costruire pagine e sistemi di menu finalmente diamo un'occhiata al piè di pagina abbiamo il nostro piè di pagina qui sotto possiamo fare clic su modifica il piè di pagina ora questo appare nel piè di pagina del tutto sito Web in modo che ogni pagina ottenga quel piè di pagina possiamo fare clic su modifica lì l'indirizzo e-mail e il numero di telefono suggeriti puoi inserire tutte le
informazioni che desideri nel piè di pagina vado avanti e inserisco alcune informazioni per la dimostrazione, ma questo sembra piuttosto bello, l'altra cosa che possiamo fare è cambiare il sfondo del piè di pagina così possiamo scegliere qui possiamo avere delle idee preformattate mi piace idea con lo sfondo nero o blu scuro e il testo bianco che corrisponde al colore del nostro tema, penso che sia piuttosto bello l'altro la scelta che possiamo fare è aggiungere anche uno sfondo per l'immagine in
modo da poter aggiungere un bella immagine scura e usala come sfondo così tanto di cose che puoi guardare per il nostro piè di pagina mi piace lo sfondo di enfasi che sembra abbastanza buono, quindi solo l'anteprima di ciò che abbiamo fatto finora sembra tutto una cosa abbastanza buona che ho notato è che potresti voler usare questi vuoti sezioni di testo per aggiungere un po' di riempimento al pagina ma per impostazione predefinita lo sfondo il lo sfondo standard è lo sfondo del testo in modo che tu possa
cambiarlo in enfasi uno che gli darà lo sfondo del sito in modo che si fonda con il sito puoi anche cambiarlo in enfasi per dargli anche un po' di contrasto così puoi aggiungere alcuni elementi di design solo con lo spazio vuoto in questo modo potrei effettivamente eliminare questo e avere solo un layout più stretto e l'altro l'opzione che potresti usare è un divisore in cui potresti mettere un divisore tra i blocchi e aggiungi anche un po' di stile in quel modo, quindi sentiti libero di giocare con il tuo layout e
ottenere quel design che stai cercando in modo che si concluda la creazione di un sito Web utilizzando i siti di Google in modo abbastanza semplice abbastanza contento di quello che potremmo fare in un breve lasso di tempo il prossimo la cosa che potresti desiderare è un indirizzo email personalizzato che utilizzi il tuo nome di dominio ho un metodo gratuito per farlo usando zoho lo metto proprio lì nell'altro
modo in cui puoi costruire siti web che mi piace molto è usare wordpress in modo molto più funzionale molto più flessibile ho messo la mia parola preferita host cloudways metterò un tutorial proprio lì controlla che ce ne sia uno gratuito prova anche io metto il link nella descrizione così puoi verificarlo se vuoi usare wordpress ma altrimenti grazie per la visione ci vediamo la prossima volta
