Uusi nesteverkon asettelu Dreamweaver CS6

• Saattaa 2, 2024

Jos kehität yksinkertaisia ​​verkkosivustoja tai monimutkaisia ​​CMS-palveluita, sinulla on mielessäsi aina tämä räikeä kysymys - teenko kaikkensa kohdistaakseni kaikenlaisia ​​yleisöjä ja näyttöresoluutioita? No, Dreamweaver^R CS6: lla on uusia ominaisuuksia, jotka helpottavat tätä tehtävää.

Aikaisemmin jouduttiin luomaan erilainen CSS-tiedosto jokaiselle eri näytön resoluutiolle ja käyttämään mediakyselyä tarvittavan CSS-tiedoston määrittämiseen. Tämä oli erittäin aikaa vievää ja lisäsi sivuston kehittämisen kokonaiskustannuksiin, mikä oli huono uutinen sekä kehittäjälle että asiakkaalle. Dreamweaver CS6 on vienyt paljon työtä mukautuvien verkkosivustojen luomiseen.

Tämä uusi työnkulun prosessi riippuu uudesta nesteruudukon asettelusta, joka on hieman kuin aloitusmalli, jossa oletusasettelut ja typografia jokaiselle verkkosivustosi näytön resoluutiolle.

1. Napsauta vain Arkisto - Uusi nesteruudukon asettelu -valikosta.
   
   
2. Uusi asiakirja -valintaikkunassa näet tämän uuden mukautuvan verkkosivun oletusasetukset. Leveys on kiinteä jokaiselle näytön erottelutarkkuudelle.
   
   Mobiili 480px
   Taulukko 768px
   Pöytäkone 1232px
   
   
3. Sinulla on mahdollisuus muuttaa oletussarakkeiden lukumäärää ja prosenttimäärä sarakkeen leveydestä jokaiselle näytön resoluutiolle. Oletusarvot ovat:
   
   Mobiili 5 saraketta - 91%
   Tabletti 8 saraketta - 93%
   Desktop 10 -sarakkeet - 90%
   
   
4. Oletustyötila voi näyttää koodin ja suunnittelunäkymät. Kuten suunnittelunäkymässä voi nähdä, uudella tiedostolla on jo yksi div-tunniste. Voit muuttaa div: n oletus-tunnuksen ja luokan Ominaisuudet-paneelista.
   
   Tietysti verkkosivustosi tarvitaan useampi kuin yksi div. Joten voimme lisätä lisää div-osioita otsikolle, navigoinnille, päälle, sivuun ja alatunnisteelle.
   
   
5. Lisää uusi jako valitsemalla Lisää paneelin Nestemäisen ruudukon asettelun div-tunniste.
   
   
6. Valintaikkunassa voit nimetä tunnisteen tunnuksen.
   
   
7. Kun olemme lisänneet kaikki sivumme tärkeimmät osiot, voimme napsauttaa ja vetää niitä sijoittaaksesi ne ruudukkoon.
   
   

Ehdotetaan, että aloitamme sivustomme mobiiliversion rakentamisen ja siirrymme suurempiin kokoihin. Voit helposti verrata visuaalisia tuloksia työskentelemälläsi käyttämällä Resolution Switcher for Mobile-, Tablet- ja Desktop -resoluutioita.

Kun tallennamme asettelun, saamme yhden HTML5- ja CSS3-tiedoston, joka toimii kaikissa kolmessa näytön resoluutiossa. Jos tarkastelemme näitä tiedostoja, löydämme tietoa siitä, miten tiedostot toimivat mukautuvan verkkosivun luomiseksi.

* Adobe toimitti minulle kopion tästä ohjelmistosta tarkistusta varten.

Tekijänoikeus 2018 Adobe Systems Incorporated. Kaikki oikeudet pidätetään. Adobe-tuotteen näyttökuva (t) uusitaan Adobe Systems Incorporatedin luvalla. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Ilotulitteet, Contribute, Captivate, Flash Catalyst ja Flash Paper on / on joko [a] rekisteröity tavaramerkki (t) tai Adobe Systems Incorporatedin tavaramerkki (t) Yhdysvalloissa ja / tai muissa maissa.

Video-Ohjeita: Pagan Playing Cards by UUSI Deck Review & Giveaway (Saattaa 2024).