Tutorial på Spry Widgets i Dreamweaver

Tutorial på Spry Widgets i Dreamweaver


Adobes Dreamweaver, en ledende web-side og webutvikling program, kommer med mange verktøy for å lage web sideelementer og effekter uten at du trenger å skrive mye kode. En av de mer nyttige av disse verktøyene er Spry widgets, som er pre-laget websideelementer, for eksempel menylinjer, Google maps, fotogallerier, 3D produkt seere, og mange andre objekter og effekter du kan distribuere på websidene. Dreamweaver har flere innebygde widgets, og du kan laste ned andre fra Adobes Dreamweaver Exchange, der Dreamweaver brukerne laste opp og utveksle widgets de har opprettet.

Bruksanvisning

Innebygd Widgets

1 Åpne en eksisterende Dreamweaver HTML-side der du vil sette inn en widget, eller starte et nytt ved å klikke på "File" og "New". Dette åpner dialogboksen Nytt dokument. Velg type side og layout du ønsker, og klikk på «Opprett».

2 Klikk i området på websiden der du vil sette inn en widget.

3 Klikk på "Insert" -menyen og velg "Spry", velg deretter widgeten du vil bruke. Hvis dette er en ny side, ber Dreamweaver du å lagre siden. Klikk på "OK". Dette viser dialogboksen Lagre som; navngi og lagre siden.

Den Spry menyen har ca 20 forskjellige widgets på det, alt fra skjemaelementer, for eksempel tekstfelt, tekstområder og avmerkingsbokser til flere typer menyer, inkludert vertikale og horisontale fly-outs og drop-downs, samt faner paneler og trekkspill (kan slås opp) menyer. Dreamweaver setter widgeten på markøren. Nå kan du redigere det som du gjør med andre Dreamweaver objekt - ved å redigere Cascading Style Sheets (CSS), eller ved å redigere koden i "Split" eller "Code" visning.

Dreamweaver Utveksling Widgets

4 Åpne en eksisterende Dreamweaver HTML-side der du vil sette inn en widget, eller starte et nytt ved å klikke på "File" og "New". Dette åpner dialogboksen Nytt dokument. Velg type side og layout du ønsker, og klikk på «Opprett».

5 Klikk på "Insert" -menyen, velg "Widget" for å åpne dialogboksen Widget, og klikk deretter på "Widget Browser". Dette åpner Adobe Widget Browser. Koble til Dreamweaver Veksling herfra og laste ned widgets til datamaskinen.

6 Klikk på "Adobe Exchange" knappen i øvre venstre hjørne av Adobe Widget Browser. Hvis du ikke har en konto på adobe.com, blir du bedt om å lage en, fyll ut nødvendig informasjon og klikk på "Send".

Den Widget Browser viser alle tilgjengelige widgets. Klikk på widgeten du vil bruke; en beskrivelse av widgeten skjermer. For å laste ned widgeten, klikker du på "Legg til i Mine widgeter" -knappen i nedre høyre hjørne av Adobe Widget Browser.

7 Klikk på "Gå til Mine Widgets" og velg den widgeten du lastet ned. De fleste widgets har flere forhåndsinnstilte konfigurasjoner som du kan velge fra kolonnen til venstre, eller klikk på "Configure" knappen for å lage dine egne konfigurasjonsendringer. Klikk på "Code" -knappen øverst i Adobe Widget Browser-vinduet for å vise widgeten kode, velge koden og trykk "Ctrl" og "C" for å kopiere koden.

8 Gå til Dreamweaver dokument og lim koden inn websiden. Pass på at Dreamweaver er i enten en Split eller en kode redigeringsmodus, og lim koden inn koden vinduet, ikke skjermvinduet. Pass også på at du limer inn koden der du vil at modulen skal vises.

Hint

  • Etter at du har limt widgeten koden inn på din side, kan du redigere objektet skapt av widget på samme måte som du gjør med andre objekt i Dreamweaver.
  • Noen av widgets fra Dreamweaver Veksling lage hele web-sider, i stedet for kodebiter. I slike tilfeller kopiere hele koden, gå tilbake til dokumentet, velger all koden i dokumentet, og erstatte den med widgeten kode.