Pagrindinis » Interneto svetainės dizainas » 10 Naudingi Dreamweaver patarimai ir gudrybės pradedantiesiems

    10 Naudingi Dreamweaver patarimai ir gudrybės pradedantiesiems

    „Dreamweaver“ vartotojas neabejotinai suskaičiuos tai, ką ji yra. Šiuolaikinėje rinkoje yra daugybė žinomų IDE (integruota plėtros aplinka) su daugybe funkcijų, parinkčių ir debatingai. Jis gali neatitikti kriterijų, kuriuos kai kurie kūrėjai pareikalavo, tačiau „Dreamweaver“ neabejotinai suteikia tinkamą kūrimo, bendradarbiavimo ir kodavimo įrankių asortimentą. Šios parinktys ir įrankiai yra paslėpti po netinkamų mažiau intuityvių meniu sluoksnių, todėl siūlome vadovėlius šiandieniniame pranešime.

    Mes jums parodysime keletą galingiausių „Dreamweaver“ funkcijų, kad galėtume greitai juos pasiekti, taip pat daug kitų naudingų gudrybių, kurie padės jums gerokai pagerinti kūrimo laiką ir gerokai pagerinti jūsų kodo kokybę. Visas sąrašas po šuolio.

    1. Dinaminis vaizdas su “Tiesioginis vaizdas”

    Mes jau žinome, kad DW siūlo statinį mūsų atvirų failų vaizdą, bet apie tai „dinaminiai vaizdai“ pavyzdžiui, „WordPress“?

    Pirma, turime pasakykite DW, kokie nustatymai naudojami mūsų pristatymui„dinaminiai vaizdai“ teisingai. Norėdami tai padaryti, pasirinkite HTTP užklausos nustatymai nuo Žiūrėti> Tiesioginės peržiūros parinktys tada įveskite GET arba POST parametrus, kuriuos reikia peržiūrėti teisingai.

    Tada perjungdami į Tiesioginis vaizdas DW, ji pakeičia seną Dizaino vaizdas langas su tiesioginiu, taškiniu būdu tobulu „WebKit“ puslapio atvaizdavimu; su gyvais „Javascript“, „DOM“ manipuliacijomis, duomenų bazės užklausomis, serverio pusės kodu ir pateiktais CSS, o ne vietovės ženklų piktogramomis, kurias matote Dizaino vaizdas.

    2. „Kodo navigatorius“ yra DW „Firebug“

    Žingsnis toliau yra visa tai Kodo navigatorius ir kada Tiesioginis vaizdas langas, paspaudus „ALT“ („Mac“ spustelėję „Command-Option“), bet kurioje lango vietoje, iškart pateikiamas kodas, kuris suteikė tą elementą. Panašus į tai, ką šiuo metu galite pamatyti „Firefox“ / „Firebug“.

    3. „JavaScript“ užšaldymas

    Dėl dinaminio „Ajax“ pobūdžio daugeliu atvejų turime bendrauti su puslapiu, kuriame tam tikri elementai nėra pateikiami ar prieinami pirmojo puslapio apkrovai. Tai elementai, kurie po puslapio įkėlimo į puslapį švirkščiami. Štai pavyzdys:

    Galbūt norėsite pakeisti įrankio patarimo, kuris yra visiškai įdiegtas „JavaScript“, stilių. Prieš šiandien jūs turite metodiškai ieškoti savo kelio per savo scenarijus, kad surastumėte, kas buvo sukurta ir kur.

    Vietoj to, pabandykite:

    Pateikite savo puslapį Tiesioginis vaizdas, tada paspauskite F6 „Freeze JavaScript“ bet kuriuo metu, kad galėtumėte nukreipti ir išskleisti kodą, susijusį su bet kuriuo dinaminiu elementu puslapyje.

    4. „Live View“ kitas geriausias draugas - „Live Code“

    Naudojant Tiesioginis vaizdas, taip pat galite įjungti Tiesioginis kodas. Tiesioginis kodas atnaujins jūsų kodą, kai pakelsite, spustelėsite ir sąveiksite su elementais ir elementais „ „Live View“ langas!

    5. Automatinis „JavaScript“ užbaigimas

    Dreamweaver ateina su protingu ir visišku HTML ir CSS kodo užbaigimu, bet ką apie „Javascripts“? Jei „Dreamweaver“ koduosite „JQuery“ arba „Prototype“, tuomet turėtumėte žinoti, kad yra API plėtinių, kurie suteikia „Javascript“ kodą. Tai sumažina reikalaujamą spausdinimą ir gali būti gana patogus greitai koduotojams.

    Jei norite sužinoti daugiau, spustelėkite čia arba atsisiųskite:

    • „Dreamweaver“ jQuery API plėtinys
    • „Dreamweaver“ prototipo API plėtinys

    6. Sukurkite skrydžio kodus

    Ar jūsų kodo puslapis atrodo kaip neorganizuotos, nepatogios kodo eilutės? Naudoti Taikyti šaltinio formatavimą funkciją ir tiksliai suformatuokite ją pagal savo pageidavimus. Jei norite greitai juos išvalyti, spustelėkite Formato šaltinio kodas piktograma Kodavimo įrankių juosta (Redaguoti> Įrankių juostos> Kodavimas) ir pasirinkite Kodo formato nustatymai nustatyti norimą formatą.

    Taip pat galite pasiekti formatavimo parinktį iš Komandos> Taikyti šaltinio formatavimą arba ją taikyti tik pasirinktam kodo blokui, pasirinkdami Taikyti šaltinio formatą pasirinkimui parinktis.

    7. Gaukite valdiklį

    Tiesiog spustelėkite Išplėsti „Dreamweaver“ piktogramą Programos juostoje (jis atrodo kaip įrankis) ir pasirinkite Naršykite žiniatinklio valdiklius. Tai nuves jus į „Adobe Exchange“, kur galėsite rasti papildomų įtaisų iš tiekėjų, tokių kaip „Yahoo !, JQuery“ ir daugelis kitų.

    8. Subversion & Dreamweaver

    Ir taip, Dreamweaver palaiko Subversion (SVN). Programos kūrėjams, kurie naudoja SVN, kad galėtų kontroliuoti savo projekto kontrolę, tai gali būti gera žinia. „Dreamweaver“ kūrėjas Andrew Voltmer aptaria kaip galite naudoti „Subwions“ su „Dreamweaver“.

    9. Nėra daugiau nereikalingų stilių

    Daugelis žmonių naudoja „Dreamweaver“ kaip būdą, kaip atnaujinti turinį vizualiai, kaip teksto redagavimo priemonė. Prieš „Dreamweaver CS4“ tai gali sukelti nereikalingas CSS taisykles .1 klasė, .2 klasė, ir taip toliau. „Dreamweaver CS4“ tiesiog perjunkite savo Nekilnojamojo turto inspektorius į HTML režimas (spustelėkite HTML piktogramą, esančią kairėje Inspektoriaus pusėje), ir atsisveikinsite su visais nereikalingais CSS, įterpdami tik tinkamą HTML žymėjimą.

    10. Paprastas formos patvirtinimas

    Norite patvirtinti savo formos laukus, tačiau nerimaujate, kad turėsite atkurti nuo nulio? Nesijaudink. Tiesiog pasirinkite esamą formos elementą, pvz., Teksto lauką, ir naudokite a „Spry Validation“ valdiklis nuo Įterpti> Spry meniu. Tada valdykite patvirtinimo reikalavimus, pvz., Minimalius ar maksimalius simbolius tiesiogiai iš Nekilnojamojo turto inspektorius.

    Premija: dar 3

    11. Lengvai pasiekite susietus failus

    Atidarius HTML arba PHP failą, dokumento lango viršuje matysite priklausomų failų pavadinimus, pvz., CSS, „Javascript“ ir netgi PHP failus. Galite lengvai persijungti į šiuos failus, atlikti pakeitimus ir juos išsaugoti. Kai spustelėsite bet kurį failą, esantį Susietų failų juostoje, pamatysite jo šaltinį kodo rodinyje ir pagrindiniame puslapyje, esančiame Dizaino rodinyje. Arba naudokite „Code Navigator“, kad greitai pasiektumėte CSS šaltinio kodą, kuris veikia jūsų dabartinį pasirinkimą.

    12. Patikrinkite naršyklių suderinamumą

    Atidarykite dokumentą, kurį norite patikrinti dėl suderinamumo; iš tos pačios meniu juostos, kur pasiekiami kodo / skaidymo / dizaino vaizdai, žiūrėkite į dešinęPatikrinkite puslapįmygtukas.

    Paspaudus jį bus išskleidžiamajame meniu, pasirinkite „Patikrinkite naršyklės suderinamumą„. The Naršyklės suderinamumo rezultatų langas lango apačioje bus rodomi bet kokie klausimai, kuriuos reikia išspręsti.

    Pastaba: tai netikrins naujų „Mac“ versijų „Mac“! Norėdami pasirinkti, kurias naršykles naudoti bandymams, pasirinkite Patikrinkite puslapį > Nustatymai iš meniu.

    13. Peržiūrėti PHP puslapius

    „Dreamweaver“ leidžia paleisti ir peržiūrėti programinės įrangos PHP kodus. Štai kaip ją gauti.

    Pradžia

    1. Pirmiausia pasirinkite Svetainė -> Nauja svetainė iš viršutinės navigacijos.
    2. Pamatysite ir Pagrindinis ir Išplėstinė svetainės apibrėžtis parinkčių skirtukai. Tęskime pasirinkdami Išplėstinis svetainės apibrėžimo skirtukas.
    3. Atitinkamame laukelyje įveskite svetainės aplanko pavadinimą (šiam pavyzdžiui mes naudosime „myphp“ kaip aplanko pavadinimą).
    4. Sukurkite kitą aplanką „vaizdai“ įvesdami jo pavadinimą lauke „Numatytieji vaizdų aplankai“.
    5. Pagal Vietinė informacija, laukuose įveskite šias reikšmes:
      • Svetainės pavadinimas: svetainės pavadinimas. Naudojamas tik „Dreamweaver“
      • Vietinis šakninis aplankas: Tai svetainės, kurioje dirbate, pavadinimas. Būtinai pavadinkite svetaines taip, kad būtų kuo labiau sumažinta konfliktų ar paini pavadinimai.
      • Numatytasis atvaizdų aplankas: Tai neprivaloma, tačiau patartina ją sukurti dabar, nes dauguma svetainių tam tikru mastu naudos vaizdus. Čia DW „ieškos“, kad kodavimo fazėje į jūsų dokumentus įterptų vaizdus.
      • Nuorodos, susijusios su: Tai apibrėžia, kaip bus tvarkomi dokumentai, susiję su „Dreamweaver“. Galite pasirinkti dokumentą arba šaknį. Skirtumai tarp šių dviejų yra:
        • Dokumentas santykinis - bus įterptas kelias, palyginti su jūsų dirbamu failu, ir elementas yra susietas.
        • Santykiniai santykiai - naudojimas / kuris sukelia dokumento / failo susiejimą su ROOT aplanku.
        • Kita alternatyva yra pridėti serverio konfigūracijos failų konfigūraciją. Būdamas labiau pažengęs uždavinys, mes tiesiog laikysimės naudodami dokumentą „santykinis“.
      • HTTP adresas: įveskite projekto šakninį aplanką
      • Atvejai jautrios nuorodos: „Dreamweaver“ tikrins, ar bet koks projekto failas gali būti jautrus problemoms, kai įkeliamas į serverį. Pranešimai bus rodomi, kai naudosite: Svetainė -> Tikrinti saitus Sitewide. Galite palikti ją patikrinti, jei norite. Aš asmeniškai nepalieku jo patikrinti, nes visada pavadinu failus mažosiomis raidėmis. Didžiosios raidės nerekomenduojama.
      • Talpykla: Patikrinkite Įgalinti talpyklą.
    6. Viduje konors Nuotolinė informacija arba nustatykite FTP arba kitą prieigą prie nuotolinio serverio arba palikite prieigą prie Nėra.
    7. Viduje konors Testavimo serveris puslapyje pasirinkite parinktį, susijusią su failo tipu / sistema, kurią bandysite.
    8. Versijos valdymas šis pavyzdys nebus naudojamas, kad galėtumėte jį palikti tuščią, nebent jį žinotų.
    9. Cloaking leidžia patalpinti .psd, .fla ir kitus šaltinio failus į savo svetainių aplanką ir DW nepaisys jų, kai įkels / atnaujins svetainę.
    10. Dizaino pastabos idealiai tinka interneto dizaino komandai, nes ji išsaugo įrašus apie failų pakeitimus. Pagal numatytuosius nustatymus tai patikrinta, kad galėtume naudotis šiuo būdu.
    11. Palikite Failo peržiūros stulpelis, Prisidėti, ir Šablonai kaip numatytasis.
    12. The Spry puslapis tiesiog nurodo aplanką „Spry“, kuris automatiškai įtraukiamas į „Dreamweaver“. Nereikia to keisti. Kai kiekvienas nustatymas bus baigtas, spustelėkite Gerai.

    Peržiūrėti PHP Dreamweaver

    Dabar atidarykite PHP failą ir atlikite reikiamus pakeitimus. Norėdami peržiūrėti šį failą „Dreamweaver“ paprasčiausiai paspauskite F12 ir rezultatai bus rodomi numatytojoje naršyklėje. Galite keisti, kuri naršyklė naudojama Redaguoti -> Nuostatos -> Peržiūra naršyklėje. Tai leidžia greičiau redaguoti iki peržiūros laiko, pašalina poreikį įvesti ilgus URL į savo naršyklės juostą arba naudoti kitą serverio programinę įrangą, kad pateiktų PHP failus, kurie visi sutaupys laiko!

    Tai viskas. Laimingas Dreamweaver'ing :-)

    Redaktoriaus pastaba: Šį įrašą parašė Jesse Matlock už Hongkiat.com. Per pastaruosius 6 metus „Jesse“ įsitraukė į UI dizainą, programų kūrimą ir interneto tendencijas. Jis yra mažos, nors ir labai talentingos plėtros komandos įkūrėjas ir dizaino lyderis.