Hur man lägger till och formaterar text i Dreamweaver

Många människor är positivt överraskade över hur lätt de kan skapa en grundläggande webbsida med text och bilder i Dreamweaver. Du kan göra grundläggande textformatering genom att använda Dreamweavers HTML-formateringsalternativ, inklusive rubrik- och stycketaggar. Börja med dessa grundläggande HTML-taggar för att göra det enkelt till en början.

Hur man lägger till text på en webbsida i Dreamweaver

För att lägga till text på en sida kan du helt enkelt klicka för att infoga markören högst upp på sidan och skriva. Om du vill lägga till text som du har någon annanstans, till exempel i en fil skapad i Microsoft Word, kan du kopiera och klistra in texten i Dreamweaver istället för att skriva in den igen.

Dreamweaver erbjuder många sätt att behålla formateringen när du kopierar och klistrar in text från ett annat program. Den här funktionen är särskilt viktig när du kopierar text från Microsoft Word eftersom om du bara klistrar in text som den är, riskerar du att inkludera mycket extra kod som är unik för Microsoft Word och kan orsaka problem på din webbsida.

Du kan ändra standarden för hur Dreamweaver hanterar formatering när du väljer Redigera → Klistra in genom att ändra inställningarna i kategorin Kopiera/Klistra in. Du kan också välja Redigera → Klistra in special för att visa dessa alternativ när du klistrar in nytt innehåll.

Följande är dina fyra huvudalternativ för att infoga text när du väljer Redigera → Klistra in special samt tre sätt att förfina ditt val:

• Endast text: Dreamweaver tar bort all formatering och infogar vanlig text.

• Text med struktur: Dreamweaver innehåller stycken, listor, tabeller och andra strukturella formateringsalternativ.

• Text med Structure Plus Grundläggande formatering: Dreamweaver inkluderar strukturell formatering såväl som grundläggande formatering, som fet och kursiv.

• Text med Structure Plus Full Formatering: Utöver de tidigare alternativen innehåller Dreamweaver formatering skapad av stilmallar i program som Microsoft Word.

• Behåll radbrytningar: Radbrytningar bevaras, även om du inte behåller andra formateringsalternativ. Det här alternativet är inte tillgängligt om du väljer Endast text.

• Rensa styckeavstånd i Word: Det här alternativet tar bort speciell formateringskod som är unik för Microsoft Word och är onödig (och rekommenderas inte) för text på webben.

• Konvertera smarta citat till raka citat: Smarta citat – det vanliga namnet för de där snygga lockiga citat som designers älskar att använda i tryckta dokument – ​​kräver ett specialtecken för att visas korrekt på webben, och det specialtecknet fungerar inte i alla webbläsare . För att undvika detta potentiella problem, markera den här rutan och konvertera alla dina smarta citat till raka.

Hur man formaterar text med rubriktaggarna i Dreamweaver

Ett av de bästa formateringsalternativen för rubriker är samlingen av rubriktaggar. I HTML använder rubriktaggar (

,

, och så vidare) för att formatera text som fungerar som en titel eller rubrik erbjuder många fördelar. Rubriktaggar är designade för att visas i relativa storlekar, med

den största,

mindre,

ännu mindre, och så vidare genom

.

Så oavsett vad en webbsidas standardtextstorlek är (och textstorlekar kan variera beroende på webbläsarinställningar och datorplattform), all text som formateras med en

taggen är alltid större än text formaterad med

.

Populär uppfattning är att många sökmotorer prioriterar nyckelord i text formaterad med en

taggen eftersom den viktigaste texten på en sida i allmänhet ingår i den största rubriken. På samma sätt kommer sökmotorexperter att berätta för dig att du bör använda

tag bara en gång per sida.

Följ dessa steg för att formatera text med en rubriktagg:

Markera texten du vill formatera.

I egenskapsinspektören, längst ner i arbetsytan, se till att HTML-knappen på vänster sida av inspektören är markerad.

Använd rullgardinsmenyn Format för att välja ett rubrikalternativ.

När rubriktaggar används ändras texten automatiskt till att bli stor och fet i designvyn.

Kredit: Foto av Casey Stoll

I allmänhet är egenskapsinspektören det enklaste sättet att tillämpa grundläggande formatering, men du kan hitta dessa HTML-formateringsalternativ också genom att välja Format→ Styckeformat och sedan välja ett rubrikalternativ från undermenyn som visas.

Hur man lägger till stycken och radbrytningar i Dreamweaver

När du skapar siddesigner för webben måste du arbeta inom många begränsningar som kan verka förvirrande till en början. Webbdesign och tryckdesign är fundamentalt olika, och det kan göra även till synes enkla uppgifter mer komplicerade än du kanske förväntar dig. Hur du skapar stycke- och radbrytningar är ett bra exempel.

Om du arbetar i designvy i Dreamweaver och trycker på Enter-tangenten (Windows) eller Retur-tangenten (Mac), infogar Dreamweaver en stycketagg, eller

, i koden, som skapar en radbrytning följt av en tom rad.

Om du vill ha en radbrytning utan den extra tomma raden håller du ned Skift-tangenten medan du trycker på Enter (eller Retur) för att be Dreamweaver att infoga
taggen i koden och skapa en enda radbrytning.

Bästa praxis är att undvika att använda flera stycke- eller bryttaggar för att skapa extra utrymme på en webbsida (och inte alla webbläsare kommer att behålla det tomma utrymmet om du skapar det på det sättet). Om du vill lägga till mycket utrymme mellan stycken eller andra element på en sida är ditt bästa alternativ att använda CSS.

Om du arbetar i kodvyn och lägger till utrymme med Enter- eller Returtangenten lägger du till tomt utrymme i koden. Extra utrymme i HTML-kod kan vara användbart eftersom extra utrymme kan göra koden lättare att läsa, men i allmänhet påverkar det inte hur en sida visas i designvyn eller i en webbläsare.