At tilføje et billede til din webside kan virke næsten magisk i starten, fordi processen er så enkel med Dreamweaver. Udfordringen med webgrafik er ikke at tilføje dem til dine sider, men at skabe flotte billeder, der indlæses hurtigt i din seers browser.
Du skal bruge et andet program, såsom Photoshop, Photoshop Elements eller Fireworks, for at oprette, konvertere, redigere og optimere billeder. Optimering af billeder gør filstørrelser mindre, så dine billeder downloades hurtigere. Dreamweaver indeholder nogle grundlæggende billedredigeringsværktøjer, men for det meste bruger du Dreamweaver til at indsætte og placere billeder på din side.
Dreamweaver gør det nemt at placere billeder på dine websider og giver flere måder at gøre det på:
Klik på ikonet Billeder i panelet Fælles Indsæt, og vælg derefter et billede ved hjælp af dialogboksen Indsæt billede.
I panelet Filer skal du klikke og trække et billednavn til den side, hvor du vil have billedet vist.
Brug menuen Indsæt.
Hvis du ikke har et weboptimeret JPEG-, GIF- eller PNG-billede ved hånden, kan du downloade gratis billeder , der allerede er optimeret.
Følg disse instruktioner for at placere et billede på en webside ved hjælp af menuen Indsæt:
Åbn en eksisterende side, eller opret og gem en ny side.
Placer din markør, hvor du vil indsætte billedet på siden.
Du kan indsætte billeder øverst til venstre i en ny tom fil, og du kan indsætte billeder i
tags og elementer på en webside, men du kan ikke bare placere et billede midt på en side uden at bruge yderligere HTML-tags eller CSS-formatering til at placere det.
Vælg Indsæt → Billede → Billede.
Dialogboksen Vælg billedkilde vises.
Gennemse for at finde det billede, du vil indsætte.
Afhængigt af dit computersystem kan du forhåndsvise billeder, mens du indsætter dem på forskellige måder. Her er tre almindelige muligheder:
På en pc med Windows XP skal du vælge Miniaturer fra rullelisten Vis menu til højre for feltet Søg i for at få vist miniatureversioner af alle billederne i enhver åben mappe. Du kan også se en enkelt forhåndsvisning af ethvert valgt billede yderst til højre i dialogboksen.
På en pc med Windows Vista eller Windows 7 skal du vælge en ikonindstilling (små ikoner, mellemstore ikoner, store ikoner eller ekstra store ikoner) fra rullelisten Vis menu til højre for feltet Søg i for at få vist miniatureversioner af alle billederne i enhver åben mappe. Du kan også se en enkelt forhåndsvisning af ethvert valgt billede yderst til højre i dialogboksen.
På en Mac skal du vælge indstillingen Vis som kolonner øverst til venstre i dialogboksen. Du kan se en enkelt forhåndsvisning af ethvert valgt billede yderst til højre i dialogboksen.
Kredit: Fotos af Casey Stoll
For at indsætte billedet skal du dobbeltklikke på billednavnet eller klikke én gang og derefter klikke på OK.
Hvis du indsætter et billede på en side, og billedet ikke er gemt i din lokale webstedsmappe, giver Dreamweaver dig en advarselsdialogboks og tilbyder at kopiere billedet til din lokale webstedsmappe. Mange designere opretter en undermappe kaldet billeder inde i den lokale webstedsmappe, hvor de gemmer alle billederne på deres websted, men du kan organisere billeder i flere undermapper, hvis du foretrækker det.
Vælg billedet på din webside for at se og redigere billedegenskaber.
Billedindstillinger vises automatisk i egenskabsinspektøren nederst på siden, når et billede er valgt.
Kredit: Foto af Casey Stoll
Når du indsætter en billedfil på en side, tilføjer du faktisk ikke en kopi af billedet til siden; du opretter en reference til billedet. Den underliggende kode ligner meget koden for et link fra en side til en anden.
Både billedreferencer og links inkluderer navnet på filen og stien fra siden til den pågældende fil. Grundlæggende opretter du en instruktion til en webbrowser for at finde billedet, når det viser siden.
For at vise et billede på din webside, skal du uploade både siden og billedet, når du udgiver din hjemmeside. Hvis dine billedfiler og siderne, der henviser til disse filer, ikke er på den samme relative placering på din harddisk, som de er på din webserver, bryder du referencen til dine billeder, og et grimt Broken Image-ikon vises på din side .
Den bedste måde at sikre, at dine billeder og filer forbliver, hvor de skal i forhold til hinanden, er at lade Dreamweaver holde styr på dem for dig. Det er derfor, det er så vigtigt at fuldføre webstedsopsætningsprocessen og sikre, at du aldrig flytter eller omdøber et billede, undtagen i panelet Filer.
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 […]
