Video: Dreamweaver CS5 Div Tags Tutorial - About Div and AP Tags in Dreamweaver CS5 2024
Adobe Creative Suite 5 (Adobe CS5) Dreamweaver bruger CSS-positionerede virtuelle beholdere eller bokse, oprettet ved DIV tag til frit at placere indhold på en side. DIV -tagget er et grundlæggende mærke, der bruges til at oprette områder for indhold på din side. Hvert DIV-tag kan have en unik ID-stil tildelt den til at styre dens position, udseende og størrelse.
Processen med at placere indhold kræver ofte to trin: Oprettelse af DIV-tag og derefter oprette dens tilsvarende stil. AP Div-værktøjet giver dig mulighed for at tegne bokse frit på siden og placere indhold indeni.
AP Div er kort for absolut positioneret DIV; et emne med en absolut position er fastsat på et bestemt sted på siden. Når du tegner en AP Div, bliver dens position normalt set ved hjælp af de øverste og venstre CSS egenskaber, med det øverste venstre hjørne af siden som referencepunkt.
CSS behandler hvert element på en side som en boks, der indeholder indhold; benævnt CSS Box-modellen. Selv om CSS kan overveje at en boks er den mest indholdsmæssige indhold på en side (f.eks. En tabel eller en liste), bruges DIV-tags mest til at oprette virtuelle bokse, som du kan bruge til at placere tekst, billeder og endda andre kasser.
Hver kasse kan have sin egen bredde, højde, position (via de øverste og venstre egenskaber), kant, margener og polstring; hver enkelt er indstillet ved hjælp af CSS regler.
-
Vælg indstillingen Kategori på Indsæt-panelet.
-
Vælg tegnet AP Div-værktøjet.
Markøren vises som et kryds hår, når du flytter det tilbage over siden.
-
Klik overalt på siden og træk for at tegne en ny AP Div; slip museknappen.
-
Flyt musemarkøren hen over kanten af kassen, indtil den skifter til en hånd; klik en gang og håndtag vises på alle sider.
-
Klik og træk nogen af disse håndtag for at ændre størrelsen på boksen lodret eller vandret.
-
For at flytte boksen skal du klikke og trække den ved fanen, der sidder på den øverste venstre kant, og placer kassen, hvor du vil have den på siden.
Tag et kig på ejendomsinspektøren, og du ser navnet såvel som mange DIV-ejendomme, der er angivet.
-
Hvis panelet CSS Styles ikke er åbent, skal du vælge Window → CSS Styles for at åbne det; Under panelet Alle klikker du til venstre for stilarket () for at udvide det.
Du ser en ny # apDiv1 ID-stil, der er knyttet til den nye AP Div, du oprettede. For hver nye DIV oprettet, tildeler Dreamweaver apDiv med et tilsvarende nummer i rækkefølge af oprettelsen.
-
Klik i den nye boks for at skrive, indsætte eller indsætte nyt indhold.
Når du tegner en AP Div på siden, indsætter Dreamweaver et tag for at oprette kassen og opretter en ID-vælger, der gemmer DIVs position, bredde, højde og andre egenskaber. Når du har oprettet en AP Div, kan du skrive, indsætte eller indsætte indhold direkte inde i det. Du kan også tildele en klasse regel til enhver DIV fra ejendomsinspektøren.
Hver AP Div du tegner, vises automatisk i panelet AP Elements (vælg Window → AP Elements for at vise det. AP Elements panelet kan hjælpe dig med at vælge, skjule og vise AP Divs på siden.
Brug panelet AP Elements for at vælge, skjule og omarrangere AP Divs på din side.