Ako ste novi u web dizajniranju i front-end razvoju (HTML, CSS, Javascript), onda možete odabrati da započnete s WYSIWYG urednikom. Ovo akronim označava "ono što vidite je ono što dobivate" i u osnovi se odnosi na softver koji vam omogućuje stvaranje web stranice pomoću vizualnih alata dok softver piše neki kod iza kulisa na temelju onoga što stvarate. Najpopularniji WYSIWYG alat dostupan je vjerojatno Adobe Dreamweaver .
Dreamweaver je dobra opcija za one koji tek počinju s radom
Dok mnogi iskusni web profesionalci s više profinjenih vještina gledaju na Dreamweaver i njenu tendenciju da proizvode napuhanu HTML oznaku i CSS stilove, jednostavna je istina da platforma ostaje dobar izbor za one koji tek počinju s dizajnom web stranica. Kada počnete upotrebljavati Dreamweaverov "izgled dizajna" za izradu web stranice, jedno je od pitanja za koje je vjerojatno da ćete stvoriti jednu rascvarnu liniju za sadržaj u tom prikazu.
Kada dodajete HTML tekst na web stranicu, web preglednik će taj tekst prikazati kao dugu liniju sve dok ne dosegne rub prozora preglednika ili njegovog elementa spremnika. U tom trenutku tekst će se zamotati na sljedeći redak. To je slično onome što se događa u bilo kojem softveru za obradu teksta, kao što su Microsoft Word ili Google Dokumenti. Kada linija teksta nema više prostora na horizontalnoj liniji, ona će se zamotati za početak druge linije. Pa što će se dogoditi ako želite diktirati gdje se prekida linija?
Kada pritisnete tipku [ENTER] u Dreamweaverovom prikazu dizajna, trenutačni je odlomak zatvoren i počinje novi odlomak. Vizualno, to znači da su te dvije linije odvojene s malo okomitog razmaka. To je zato što, prema zadanim postavkama, HTML odlomci imaju padding ili margine (koja ovisi o samom pregledniku) koja se primjenjuje na dno odlomka koji dodaje taj razmak.
To se može prilagoditi CSS-om, ali istina je da želite da postoji razmak između odlomaka kako bi se omogućila čitljivost web stranica . Ako želite jednu liniju i bez širokog vertikalnog razmaka između redaka, ne želite upotrijebiti [ENTER] jer ne želite da te linije budu pojedinačni odlomci.
U ovim vremenima kada ne želite započeti novi stavak, dodali biste oznaku u HTML-u. Ovo se ponekad piše i kao
. posebno za verzije XHTML koje su zahtijevale zatvaranje svih elemenata. Prelet / u toj sintaksi self-zatvara element jer oznaka
ne posjeduje vlastitu završnu oznaku. To je sve dobro i dobro, ali radite u Design View u Dreamweaveru. Nećete htjeti skočiti u kôd i dodati ove pauze. To je u redu, jer možete dodati retku u Dreamweaveru bez pribjegavanja kodnom prikazu.
Dodaj retku u Dreamweaverovom dizajnu:
- Postavite pokazivač na mjesto gdje želite započeti novu liniju.
- Držite pritisnutu tipku shift i pritisnite [ENTER].
To je to! Jednostavno dodavanje tipke "pomak" zajedno s [ENTER] dodati će umjesto novog odlomka. Sada kad znate kako je ovo, trebali biste razmotriti gdje ga koristiti i gdje ga izbjeći. Zapamtite, HTML treba stvoriti strukturu web mjesta, a ne vizualni izgled. Ne biste trebali upotrebljavati više oznaka za stvaranje vertikalnih razmaka ispod elemenata u vašem dizajnu.
To je ono što CSS svojstva za padding i margine su za. Gdje biste upotrebljavali oznaku s oznakom "kada" trebate samo jednu stanku. Na primjer, ako kodirate adresu e-pošte i odlučili ste upotrijebiti stavku, mogli biste dodati sljedeće oznake:
Naziv tvrtke
Adresna linija
Grad, država, ZIP
Ovaj kod za adresu je jedan odlomak, ali vizualno će prikazati tri retka na pojedinačnim crtama s malim razmakom između njih.