Skip to main content

Så här använder du Adobe Dreamweaver

Can this video get 1 million dislikes? (Juni 2025)

Can this video get 1 million dislikes? (Juni 2025)
Anonim

Adobe Dreamweaver är ett så kraftfullt verktyg för webbdesigners, eftersom det har så många saker du kan göra med det. Självklart kan alla saker du gör göra det utmanande att lära. Ta reda på några av de många saker som Dreamweaver kan göra, inklusive ändringar i den senaste versionen, CS5. Och glöm inte att kolla på de saker som saknas från Dreamweaver CS5.

Definiera en webbplats

  • Starta en ny hemsida
  • Skapa en webbplats
  • Konfigurera endast de delar av webbplatsen du behöver när du behöver dem * Nytt i CS5
  • Konfigurera fjärr-, QA- och testservrar för mer fullständiga arbetsflöden * Nytt i CS5
  • Skapa och publicera nya kataloger
  • Ändra doktypen
  • Inkludera metadata i dina sidor

Sätta din webbplats live

  • Definiera en avlägsen webbplats
  • FTP-filer till webbservern
  • Använd ett versionsstyrningssystem för att kontrollera filer in och ut
  • Anslut med Subversion för mer avancerad versionskontroll * Ny i CS5
  • Lämna anteckningar till dina lagkamrater

Skapa webbsidor

  • Skriv en sida i WYSIWYG-läget
  • Skriv en sida i HTML
  • Skapa en ny sida från en mall
  • Skapa en ny sida från början
  • Skapa en mall
  • Spara filer till din webbplatskatalog
  • Definiera sidegenskaperna

CSS

  • Använd CSS stilark
  • Lägger till inline-stilar
  • Skapa ett externt stilark
  • Fäst ett externt stilark
  • Skapa klass, ID, tagg och sammansatta CSS-väljare
  • Redigera befintliga CSS-regler
  • Skapa CSS för utskrivbara sidor
  • Aktivera och inaktivera stilegenskaper * Nytt i CS5
  • Inspektera CSS-boxmodellen visuellt * Ny i CS5

Text

  • Ändra text
  • Använd olika teckensnitt
  • Lägg in en radbrytning
  • Använd specialtecken
  • Inkludera dagens datum
  • Skriv kommentarer
  • Använd HTML-taggar på text
  • Lägg till HTML-attribut till taggar

länkar

  • Länk text och bilder
  • Kolla webbplatslänkar
  • Ändra standardlänkfärgen (länk, besök, svängare, aktiv)
  • Skapa verktygstips på länkar
  • Skapa mailto länkar
  • Skapa webbankar

Bilder

  • Lägg till grafik på en sida
  • Redigera bilder
  • Ändra storlek på bilder
  • Lägg till alt text till bilder
  • Lägg till ytterligare tillgänglighetsalternativ för bilder
  • Justera bilder och text
  • Skapa en rollover bild
  • Använd bildkartor
  • Använd spårning av bilder
  • Använd bildhållare
  • Infoga Fireworks HTML
  • Infoga Photoshop-filer

Layout

  • Använd de medföljande fria mallarna * Nya CSS-startlayouter i CS5
  • Infoga divs för layout
  • Redigera divs i CSS-stilpanelen
  • Sätt in absolut positionerade element
  • Formatera absolut positionerade element i egenskapsinspektören
  • Använd linjer, rutor och guider

listor

  • Lägg till punktlistor och numrerade listor
  • Anpassa listkulor och nummer

tabeller

  • Skapa ett bord
  • Lägg till rubrikrader och kolumner
  • Använd transparenta bilder för att hålla tabellceller öppna
  • Skapa fast bredd och flexibla breddskolumner
  • Ändra gränsstilar för tabeller
  • Bädda in ett bord i ett bord
  • Importera tabelldata

formulär

  • Använd en mailto form
  • Definiera formuläråtgärder
  • Lägg till text, radio, kryssruta, fil, bild, välj rutor och dolda formulärfält
  • Gör dina formulär tillgängliga med fält- och etikettfält
  • Skapa anpassade inlämningsknappar
  • Bekräfta formulär med JavaScript (Spry)

Databaser och PHP Scripting

  • Fäst din webbplats i en databas
  • Ställ in en PHP / mySQL-webbplats
  • Använd Spry-element för att ansluta till databasen
  • Sätt in dataobjekt i dina sidor
  • Testa och uppdatera en Spry-datakälla eller -display
  • Redigera komplexa dynamiska platser i designvyn
  • Upptäck alla dynamiskt relaterade filer för att montera PHP CMS-webbplatser (WordPress, Joomla och Drupal) * Nytt i CS5
  • Anpassad klass hinting för PHP-kod, inklusive tredje part ramar som Zend Framework * Nytt i CS5

ramar

  • Bygg en inramad webbplats
  • Redigera noframes innehåll
  • Formatera och stil dina ramar
  • Ställ in standardlänkar mellan ramar

Lägg till interaktivitet

  • Bygg ett fotoalbum (inte längre i CS5)
  • Lägg till ljud på webbsidor
  • Skapa en rullgardinsmeny
  • Använd Dreamweaver-beteenden för att öppna popup-fönster, skapa hopp menyer, spela ljud, byta bilder och mer
  • Lägg till RSS-flöden på en webbplats
  • Infoga Flash-text som en övergång
  • Infoga CSS-text som en övergång
  • Infoga andra plugins
  • Lägg till Spry menyrad, flikar paneler, dragspel, verktygspets och hopfällbar panel
  • Använd Widget Browser för att hitta nya widgets för din webbplats utan att behöva känna till JavaScript

Testa dina sidor

  • Testa dina sidor i Live View för att se ändringarna på grund av JavaScript och interaktivitet * Nytt i CS5
  • Bekräfta din HTML
  • Förhandsgranska dina sidor i flera webbläsare
  • Använd BrowserLab för att förhandsgranska dina sidor i andra operativsystem * Nytt i CS5
  • Använd Device Central för att kontrollera hur sidorna ser på mobila enheter
  • Kontrollera webbläsarkompatibilitet
  • Ändra inställningarna för att matcha vad din webbplats behöver arbeta med
  • Kontrollera interna länkar
  • Testa webbplatsens tillgänglighet (inte längre i CS5)
  • Konvertera ett Word-dokument till HTML

Anpassa Dreamweaver

  • Lägg till tillägg
  • Inaktivera tillägg
  • Anpassa Dreamweaver med genvägar

Öka din effektivitet

  • Använd inbyggda tangentbordsgenvägar
  • Använd kodutdrag
  • Skapa och använd mallar
  • Skapa nya sidor från anpassade mallar
  • Uppdatera mallar
  • Inkludera en fil i en annan med Dreamweaver-biblioteket
  • Uppdatera biblioteksposter
  • Inkludera en fil i en annan med SSI
  • Använd sök och ersätt