Når du har oprettet en ny side med et CSS-layout i Dreamweaver, har du et tilsyneladende uendeligt antal muligheder for at redigere den, men først skal du bestemme, hvilke typografier i typografiarket der svarer til de elementer, du vil redigere.
Som du sikkert kan forestille dig, kan du redigere stilene i et CSS-layout på mange måder for at skabe dine egne designs.
Når du har justeret de eksisterende stilarter for at få det grundlæggende sidedesign, som du ønsker det, kan du oprette så mange yderligere stile, som du ønsker.
Du kan bruge de samme grundlæggende instruktioner med ethvert CSS-layout, der er inkluderet i Dreamweaver. Følg disse trin for at redigere typografier i et CSS-layout:
Åbn en sidefil, der er baseret på et Dreamweaver CSS-layout, og vælg Vindue→CSS-typografier (eller klik på fanen CSS Designer for at udvide panelet).
CSS Designer-panelet åbnes eller udvides.
Klik for at vælge navnet på typografiarket i panelet Kilder øverst i CSS Designer.
Alle de stilarter, der er knyttet til den nye side, er angivet i panelet Vælgere.
Vælg navnet på en stil, der er angivet i panelet CSS Designer Selectors.
De tilsvarende CSS-regler, der er defineret for stilen, vises i panelet Egenskaber nederst i panelet CSS Designer. At klikke sig igennem listen over stilarter og gennemgå deres tilsvarende regler er en god måde at få et hurtigt overblik over designet og til at se, hvor de forskellige sideformateringsmuligheder er gemt.
HTML5-header-, .nav- og footer-tags styrer hovedsektionerne på siden. For eksempel indeholder header-stilen en regel, der gør baggrundsfarven grøn. For at ændre farven på sidehovedområdet øverst på siden ændrer du således baggrundsfarveindstillingen i overskriftsreglen.
Følg disse trin for at redigere indstillinger for hele siden - såsom sidens baggrundsfarve eller hovedskrifttypen, størrelsen og farven på den tekst, der bruges på hele siden:
I panelet CSS Designer Selectors skal du vælge den stil, der hedder body.
Egenskaberne, der er defineret i den valgte stilregel, vises i panelet Egenskaber.
Klik på T-ikonet øverst i panelet Egenskaber, og skift eller tilføj den ønskede skrifttype og andre tekstindstillinger.
Du kan ændre skrifttype, størrelse, stil og vægt. For at ændre mellemrummet mellem tekstlinjerne skal du ændre linjehøjden.
Rul ned til området Baggrund i panelet Egenskaber, og brug farvefeltet i feltet Baggrundsfarve til at angive en farve for hele baggrunden på siden.
Alternativt kan du indtaste en hvilken som helst hexadecimal farvekode i feltet Baggrundsfarve eller bruge pipetten til at prøve en hvilken som helst farve. For at tilføje et baggrundsbillede skal du klikke i URL-feltet i sektionen Baggrund og derefter klikke på knappen Gennemse, der vises, og vælge det billede, du vil have som baggrund. Brug Background-Repeat-ikonerne til at angive, hvordan baggrundsbilledet skal gentages på siden.
Foretag andre ændringer eller tilføjelser til stilreglen.
Ændringer af stilregler i panelet Egenskaber gemmes automatisk og anvendes på indhold, der er formateret med reglen.
Følg disse trin for at ændre bredden eller andre indstillinger for de vigtigste indholdsområder, som styrer sidens overordnede størrelse og sidehoved, sidefod og sidebjælke:
Sådan ændres bredden af hele hoveddesignområdet:
Klik på .container-stilen i panelet Vælgere i panelet CSS Designer.
Egenskaberne for .container-stilreglen vises i panelet Egenskaber, hvor du også kan redigere stilen.
Skift størrelsen i feltet Bredde, eller indtast et nyt tal for den ønskede sidebredde.
Bredden af sidedesignet ændres automatisk baseret på den størrelse, du har indtastet. Når du ændrer bredden på .container-stilen, ændrer du bredden på hele designet, fordi alle
tags og andre elementer er indeholdt i
formateret med .container-stilen — og de er alle klar til at udvides for at fylde .containeren
.
For at ændre størrelsen på indholdsområdet på siden skal du vælge typografien med navnet .content og angive størrelsen og andre indstillinger, du ønsker, i panelet Egenskaber.
Hvis du ændrer bredden af indholdsområdet i et layout, der indeholder en sidebjælke, skal du også ændre bredden af sidebjælken.
For at ændre baggrundsfarven for enhver stil på siden skal du klikke på navnet på den tilsvarende stil og ændre indstillingerne i sektionen Baggrund i panelet Egenskaber.
I CSS-layouterne i Dreamweaver er sidebjælken f.eks. defineret i en stil med navnet .sidebar1. For at ændre baggrundsfarven skal du således klikke på .sidebar1 i panelet Vælgere, vælge kategorien Baggrund i panelet Egenskaber og vælge den farve, du ønsker. På samme måde, for at ændre baggrundsfarven på overskriften, skal du vælge den stil, der hedder header i panelet Vælgere og bruge farven godt.
Sådan tilføjer du et billede til overskriften:
Vælg pladsholderbilledet mærket Indsæt logo, og tryk på Delete- eller Backspace-tasten.
Vælg Indsæt →Billede→Billede, og vælg et billede ved hjælp af dialogboksen Vælg billedkilde.
Erstat tekst og indsæt billeder i sidebjælken og hovedindholdsområderne.
Du kan tilføje eller erstatte tekst og indsætte billeder på enhver side, der er oprettet fra et CSS-layout, ligesom du ville gøre på enhver anden webside.
Vælg Filer → Gem alle for at gemme siden og stilene.
Lær, hvordan du anvender gennemsigtighed på SVG-grafik i Illustrator. Udforsk, hvordan du udsender SVG'er med gennemsigtige baggrunde og anvender gennemsigtighedseffekter.
Når du har importeret dine billeder til Adobe XD, har du ikke megen redigeringskontrol, men du kan ændre størrelse og rotere billeder, ligesom du ville have en hvilken som helst anden form. Du kan også nemt runde hjørnerne af et importeret billede ved hjælp af hjørne-widgets. Maskering af dine billeder Ved at definere en lukket form […]
Når du har tekst i dit Adobe XD-projekt, kan du begynde at ændre tekstegenskaberne. Disse egenskaber omfatter skrifttypefamilie, skriftstørrelse, skrifttypevægt, justering, tegnafstand (kjerning og sporing), linjeafstand (førende), udfyldning, kant (streg), skygge (slæbeskygge) og baggrundssløring. Så lad os gennemgå, hvordan disse egenskaber anvendes. Om læsbarhed og skrifttype […]
Ligesom i Adobe Illustrator giver Photoshop tegnebrætter mulighed for at bygge separate sider eller skærmbilleder i ét dokument. Dette kan især være nyttigt, hvis du bygger skærme til en mobilapplikation eller en lille brochure. Du kan tænke på et tegnebræt som en speciel type laggruppe, der er oprettet ved hjælp af panelet Lag. Dens […]
Mange af de værktøjer, du finder i panelet InDesign Tools, bruges til at tegne linjer og former på en side, så du har flere forskellige måder at skabe interessante tegninger til dine publikationer. Du kan skabe alt fra grundlæggende former til indviklede tegninger inde i InDesign, i stedet for at skulle bruge et tegneprogram såsom […]
Når du designer i Adobe Illustrator CC, skal du ofte have en form, der har en nøjagtig størrelse (f.eks. 2 x 3 tommer). Når du har oprettet en form, er den bedste måde at ændre størrelsen på den til nøjagtige mål ved at bruge Transform-panelet, vist i denne figur. Få objektet valgt, og vælg derefter Vindue→ Transformer til […]
Indpakning af tekst i Adobe Illustrator CC er ikke helt det samme som at pakke en gave ind – det er nemmere! En tekstombrydning tvinger tekst til at ombryde en grafik, som vist i denne figur. Denne funktion kan tilføje en smule kreativitet til ethvert stykke. Grafikken tvinger teksten til at ombryde den. Først skal du oprette […]
Du kan bruge InDesign til at oprette og ændre QR-kodegrafik. QR-koder er en form for stregkode, der kan gemme information såsom ord, tal, URL'er eller andre former for data. Brugeren scanner QR-koden ved hjælp af sit kamera og software på en enhed, såsom en smartphone, og softwaren gør brug af […]
Der kan være et tidspunkt, hvor du har brug for et nyt billede for at se gammelt ud. Photoshop CS6 har dig dækket. Sort-hvid fotografering er et nyere fænomen, end du måske tror. Daguerreotypier og andre tidlige fotografier havde ofte en brunlig eller blålig tone. Du kan skabe dine egne sepia-tonede mesterværker. Tonede billeder kan skabe […]
Ved at bruge funktionen Live Paint i Adobe Creative Suite 5 (Adobe CS5) Illustrator kan du oprette det billede, du ønsker, og udfylde områder med farve. Live Paint-spanden registrerer automatisk områder sammensat af uafhængige krydsende stier og fylder dem i overensstemmelse hermed. Malingen inden for en given region forbliver levende og flyder automatisk, hvis nogen […]
