Izveidojiet kafejnīcas vietni: 9 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-02-01 14:41

Šajā pamācībā es parādīšu, kā izveidot vienkāršu vietni, kurā tiek parādītas kafejnīcas netālu no jums, izmantojot Google Maps, HTML un CSS

Piegādes

Dators

Teksta redaktors (es izmantoju Atom)

Wi -Fi savienojums

1. darbība: izvēlieties teksta redaktoru

Es izmantoju Atom, kuru var lejupielādēt šeit. Kad tas ir lejupielādēts, izveidojiet jaunu projektu

2. darbība: izveidojiet savu jauno projektu

1. Atveriet Atom
2. Atrodiet failu
3. Zem faila noklikšķiniet uz jauna
4. apakšējā kreisajā stūrī (mac) būs poga, lai izveidotu jaunu mapi
5. nosauciet savu mapi "Kartes vietne"
6. Apakšējā labajā stūrī nospiediet atvērt

3. darbība. Izveidojiet savu Index.html

1. Pievienojiet jaunu failu savai mapei (Atomā ar peles labo pogu noklikšķiniet uz mapes un nospiediet jaunu)
2. Piešķiriet šim failam nosaukumu “Index.html”
3. Pievienojiet šo pamata HTML struktūru, kas tiek izmantota katrā HTML projektā:

4. darbība: iegūstiet savu karti

1. Apmeklējiet Google kartes šeit: Google Maps
2. Meklējiet kafiju
3. jums vajadzētu iegādāties visas kafejnīcas savā vispārējā teritorijā
4. noklikšķiniet uz trim rindām blakus kafijai
5. atrodiet kopīgošanas vai iegulšanas karti
6. atlasiet iegulto karti
7. Izvēlieties kartes izmēru (es izmantoju lielu) un pabeidziet savu atrašanās vietu
8. nospiediet kopēt HTML

5. darbība: pievienojiet vietnei

1. Dodieties atpakaļ uz HTML failu.
2. starp diviem tagiem ievietojiet šo kodu:

'

KAFIJAS VEIKALI TUVĀ

“IEGULDĪTAIS KODS NO GOOGLE MAPS”

'

6. darbība: priekšskatījums

Tā pirmā daļa ir paveikta!

saglabājiet failu un atrodiet to savā datorā, veiciet dubultklikšķi uz tā, un tas tiks atvērts noklusējuma pārlūkprogrammā, lai to priekšskatītu.

7. darbība. Padariet to labāku

1. Starp diviem tagiem pievienojiet “Kafejnīcas netālu no manis”
2. Pievienojiet jaunu failu tāpat kā jūs izveidojāt “Index.html”, bet nosauciet to par “Style.css”
3. atpakaļ savā HTML failā, uzrakstiet šo kodu virs virsraksta,"
4. Dodieties uz Google attēliem un lejupielādējiet glītu klipkopu no tases kafijas
5. Pievienojiet attēlu mapei, kurā ir pārējie mūsu faili
6. CSS failā ierakstiet šādu kodu: 'body {
7. background-image: url (ATTĒLA NOSAUKUMS);
8. fona izmērs: vāks;
9. }'

8. solis: lai tas izskatās labāk Pt2

1. ja mēs tagad saglabājam un priekšskatām, mēs varam redzēt, ka vietņu fons tagad ir pārklāts ar mūsu kafijas tasītēm
2. Diemžēl mūsu virsrakstu ir grūti izlasīt
3. Tātad CSS zem 'body {}' pievienojiet šādu kodu: h1 {
4. fona krāsa = rgb (255, 255, 255);
5. font-size = 40 pikseļi;
6. }

9. solis: PĀRSKATĪŠANA

Tieši tā! Jūs esat pabeidzis. Jūs esat iemācījušies HTML, CSS un iegultā koda pamatus, labi darīts. Jūs varat rediģēt kodu, lai tas atbilstu jūsu gaumei, un parādīt karti ar visu, ko vēlaties. Kopš tā laika jūs varat turpināt savas vietnes veidošanu un mūžīgi uzlabot.