Innholdsfortegnelse:
- Slik legger du til tekst på en webside i Dreamweaver
- Slik formaterer du tekst med overskriftskodene i Dreamweaver
- Slik legger du til avsnitt og linjeskift i Dreamweaver
Video: Hvordan lage hjemmeside med xara web designer del 2 2025
Mange mennesker blir positivt overrasket over hvor enkelt de kan lage en grunnleggende nettside med tekst og bilder i Dreamweaver. Du kan gjøre grunnleggende tekstformatering ved å bruke Dreamweavers HTML-formateringsalternativer, inkludert overskriften og avsnittetikettene. Start med disse grunnleggende HTML-kodene for å holde ting enkle først.
Slik legger du til tekst på en webside i Dreamweaver
Hvis du vil legge til tekst på en side, kan du bare klikke for å sette markøren øverst på en side og skrive. Hvis du vil legge til tekst som du har et annet sted, for eksempel i en fil som er opprettet i Microsoft Word, kan du kopiere og lime inn teksten i Dreamweaver i stedet for å skrive inn den på nytt.
Dreamweaver tilbyr mange måter å opprettholde formatering når du kopierer og limer inn tekst fra et annet program. Denne funksjonen er spesielt viktig når du kopierer tekst fra Microsoft Word, fordi hvis du bare limer inn tekst som det, risikerer du å inkludere mye ekstra kode som er unikt for Microsoft Word og kan forårsake problemer på websiden din.
Du kan endre standard for hvordan Dreamweaver håndterer formatering når du velger Rediger → Lim inn ved å endre Innstillinger i kategorien Kopier / Lim inn. Du kan også velge Rediger → Lim inn spesial for å vise disse alternativene når du limer inn nytt innhold.
Følgende er de fire viktigste alternativene for å sette inn tekst når du velger Rediger → Lim inn spesiell, samt tre måter å forfine ditt valg:
-
Bare tekst: Dreamweaver strimler hvilken som helst formatering og innlegg vanlig tekst.
-
Tekst med struktur: Dreamweaver inneholder avsnitt, lister, tabeller og andre strukturelle formateringsalternativer.
-
Tekst med Structure Plus Basic Formatering: Dreamweaver inkluderer strukturell formatering, samt grunnleggende formatering, for eksempel fet og kursiv.
-
Tekst med struktur Plus Full formatering: I tillegg til de forrige alternativene inkluderer Dreamweaver formatering opprettet av stilark i programmer som Microsoft Word.
-
Hold linjeskift: Linjepauser er bevart, selv om du ikke beholder andre formateringsalternativer. Dette alternativet er ikke tilgjengelig hvis du velger bare tekst.
-
Rydde opp ordparametre: Dette alternativet fjerner spesiell formateringskode som er unik for Microsoft Word og er unødvendig (og ikke anbefalt) for tekst på nettet.
-
Konvertere smarte sitater til rette citater: Smarte sitater - det vanlige navnet på de fancy curly sitatene som designere elsker å bruke i utskriftsdokumenter - krever at et spesielt tegn vises riktig på nettet, og at det spesielle tegnet gjør Fungerer ikke i alle nettlesere.For å unngå dette potensielle problemet, velg denne boksen og konverter alle dine smarte sitater til rette.
Slik formaterer du tekst med overskriftskodene i Dreamweaver
En av de beste formateringsalternativene for overskrifter er samlingen av overskriftskoder. I HTML, ved å bruke overskriftskoder (
,
, og så videre) for å formatere tekst som tjener som tittel eller overskrift, er det mange fordeler. Overskriftstegn er utformet for å vises i relative størrelser, med
den største,
mindre,
mindre fremdeles og så videre gjennom
.
den største,
mindre,
mindre fremdeles og så videre gjennom
.
mindre fremdeles og så videre gjennom
.
Så uansett hvilken nettside standard tekststørrelse er (og tekststørrelsene kan variere på grunn av nettleserinnstillinger og dataplattform), er enhver tekst formatert med en
-kode alltid større enn tekstformatert med
.
Populær tro er at mange søkemotorer prioriterer søkeord i tekstformatert med en
-kode fordi den viktigste teksten på en side vanligvis er inkludert i overskriftens største størrelse. På samme måte vil søkemotoreksperter fortelle deg at du bare skal bruke
-taggen en gang per side.
For å formatere tekst med en overskriftskode, følg disse trinnene:
-
Marker teksten du vil formatere.
-
I eiendomsinspektøren, nederst på arbeidsområdet, må du kontrollere at HTML-knappen på inspektørens venstre side er valgt.
-
Bruk rullegardinlisten Format for å velge et overskriftsalternativ.
Når overskriftskoder brukes, endres teksten automatisk for å bli stor og fet i designvisning.
Kreditt: Bilde av Casey Stoll
Eiendomsinspektøren er generelt den enkleste måten å bruke grunnleggende formatering på, men du kan også finne disse HTML-formateringsalternativene ved å velge Format → Stikkformat og deretter velge et overskriftsalternativ fra undermenyen som vises.
Slik legger du til avsnitt og linjeskift i Dreamweaver
Når du lager sideoppsett på nettet, må du jobbe innenfor mange begrensninger som kan virke forvirrende først. Webdesign og utskrift er fundamentalt forskjellige, og det kan gjøre selv tilsynelatende enkle oppgaver mer kompliserte enn du kanskje forventer. Hvordan du oppretter avsnitt og linjeskift er et godt eksempel.
Hvis du arbeider i designvisning i Dreamweaver og trykker Enter-tasten (Windows) eller Retur-tasten (Mac), legger Dreamweaver inn en avsnittetikett, eller
i koden, noe som skaper en linjeskift etterfulgt av med en tom linje.
Hvis du vil ha en linjeskift uten den ekstra tomme linjen, hold nede Skift-tasten mens du trykker Enter (eller Return) for å fortelle Dreamweaver å sette
-koden i koden, og opprette en enkelt linjeskift.
Best praksis er å unngå å bruke flere avsnitt eller pause-koder for å opprette ekstra plass på en nettside (og ikke alle nettlesere vil beholde det tomme rommet hvis du oppretter det på den måten). Hvis du vil legge til mye plass mellom avsnitt eller andre elementer på en side, er det beste alternativet å bruke CSS.
Hvis du arbeider i kodevisning og legger til plass ved hjelp av Enter eller Return-tasten, legger du til tomt mellomrom i koden. Ekstra plass i HTML-kode kan være nyttig fordi ekstra plass kan gjøre kode enklere å lese, men generelt påvirker det ikke hvordan en side vises i designvisning eller i en nettleser.
