Kuidas paigutada Dreamweaveris elemente, et luua ühes vedelikuruudustikus kolm paigutust

Sujuvad ruudustikupaigutused teeb nii võimsaks see, et saate Dreamweaveris muuta elementide asukohta ja suurust nii, et need paigutataks iga kolme paigutuse jaoks erinevalt, luues mobiili-, tahvelarvuti- ja töölauaekraanide jaoks optimeeritud kujundused. Elemendi laiuse või asukoha muutmiseks kasutage Dreamweaveri visuaalseid tööriistu.

Kuidas muuta Dreamweaveris mobiilipaigutust

Dreamweaver seadistab stiilid nii, et need liiguksid läbi kõigi kolme paigutuse. See tähendab, et esmalt peaksite saama mobiilikujunduse selliseks, nagu soovite. Seejärel liikuge edasi tahvelarvuti paigutuse juurde ja muutke ainult neid elemente, mida soovite tahvelarvutis erinevalt kuvada. Lõpuks vaadake töölaua paigutust. Jällegi muutke ainult neid elemente, mida soovite erinevalt kuvada.

Mobiilipaigutuse muutmiseks järgige neid juhiseid.

Valige tööala allservas suvand Mobile Size.

Tööala ala muutub, et kuvada leht mobiili eelvaates, mis on vormindatud vastava stiilikomplektiga.

Märkus . Kolm väikest ikooni tööala paremas alanurgas pakuvad juurdepääsu mobiiltelefoni, tahvelarvuti ja töölaua eelvaatele. Ühelt teisele lülitumisel muudate mitte ainult kuvaala suurust, vaid ka vastavat lehele rakendatud stiilide komplekti.

Lisage oma sujuva ruudustikupaigutuse elementidele teksti ja pilte täpselt nii, nagu lisaksite sisu mis tahes muule Dreamweaveri lehele.

Saate teksti kopeerida ja kleepida, samuti rakendada HTML-silte ja CSS-vormingut.

Valige kujundusalas element.

Vastav CSS-stiil kuvatakse valijate paneelil, kus saate seda muuta.

Looge, redigeerige ja rakendage tekstile ja piltidele stiile nagu mis tahes muus Dreamweaveri lehekujunduses.

Stiilid, mida soovite rakendada kõigile kolmele küljendusele, tuleks luua mobiilipaigutuse valimisel, sest need stiilid rakenduvad kõigile kolmele kujundusele, välja arvatud juhul, kui neid tühistab mõni muu tahvelarvuti või töölaua paigutusega loodud stiil.

Kuidas muuta Dreamweaveris tahvelarvuti paigutust

Kui olete saanud mobiilipaigutuse soovitud viisil, liikuge edasi tahvelarvuti suuruse paigutuse juurde ja muutke sellele paigutusele kehtivaid stiile.

Tahvelarvuti paigutuse muutmiseks järgige neid juhiseid.

Valige tööala paremas alanurgas suvand Tahvelarvuti suurus.

Tööala ala muutub, et kuvada leht tahvelarvuti eelvaates, vormindatuna vastava stiilikomplektiga.

Valige element, mille soovite veeruks muuta, ja lohistage veerg soovitud laiusele parempoolsete käepidemete abil.

Dreamweaver pakub visuaalse redigeerimise tööriistade kogumit, mis hõlbustab vedelate ruudustiku elementide suuruse ja paigutuse reguleerimist.

Kui lohistate mis tahes vedela ruudustiku elemendi käepidet vasakult paremale, lisate veerise ruumi, mis sunnib elemendi jääma paigutusest paremale. Kui lohistate käepidet paremalt vasakule, muudate elemendi suurust.

Valige muudetud suurusega element, mida soovite ümber paigutada, ja seejärel klõpsake noolt Liiguta rida üles.

Element liigub üles ja joondub selle kohal oleva elemendi kõrvale.

Elemendi allapoole liigutamiseks klõpsake noolt Alustab uut rida.

Märkus. Elemendi peitmiseks, üles või alla liigutamiseks, kopeerimiseks või kustutamiseks klõpsake kõigil neljal ikoonil.

Kuidas muuta Dreamweaveris töölaua paigutust

Kui olete saanud soovitud mobiili- ja tahvelarvutipaigutuse, liikuge edasi töölaua suuruse paigutuse juurde ja muutke stiile, mis kehtivad kolmest paigutusest suurimale.

Töölaua paigutuse muutmiseks järgige neid juhiseid.

Valige tööala paremas alanurgas suvand Töölaua suurus.

Tööala ala muutub, et kuvada leht töölaua eelvaates, vormindatuna vastava stiilikomplektiga.

Kahe elemendi positsiooni vahetamiseks valige kahe elemendi keskelt vahetamise nool.

Artikli 1 ja artikli 2 elemente saab vahetada, klõpsates nende vahel lihtsalt vahetamise noolt.

Vormindage tekst, pildid ja muud elemendid vastavalt töölaua kujundusele.

Saadaval on ka kõik muud tahvelarvuti paigutusega hõlmatud visuaalse vormingu valikud.

Kõigi sujuva ruudustiku paigutuse failide salvestamiseks valige Fail→Salvesta kõik.

Sujuva ruudustikupaigutuse redigeerimisel muudate nii HTML-faili kui ka välist stiililehte. Suvandi Salvesta kõik kasutamine tagab, et olete salvestanud kõik vajalikud failid enne nende eelvaate vaatamist või saidi veebiserveris avaldamist.

Kuidas Dreamweaveris paigutuste vahel vahetada

Hea tava on kujundada sujuvad ruudustiku paigutused selles järjekorras: esmalt mobiiliversioon, seejärel tahvelarvuti versioon ja lõpuks lauaarvuti versioon. Siiski saate kujunduse täpsustamisel nende kolme paigutuse vahel vahetada.

Pidage meeles järgmisi üldreegleid ja parimaid tavasid.

• Vedelikud ruudustikupaigutused luuakse meediumipäringute abil, mis eraldavad iga stiilikomplekti vahel, mis vormindavad mobiili-, tahvelarvuti- ja töölauapaigutusi.

• Stiilide muutmisel peate hoolitsema selle eest, et muudate stiile, mis vastavad paigutusele, mille kallal soovite töötada.

• Kui vaatate koodivaates automaatselt loodud vastavaid stiile, näete, et laiused ja muud suurused on määratud neljanda kümnendkoha täpsusega, näiteks laius: 48,2758%. Kui muudate neid numbreid koodivaates, ei kohanda Dreamweaver neid enam teie eest automaatselt.

• Kui loote stiile, mida soovite rakendada kõigile kolmele paigutusele, valige esmalt CSS-i kujundaja paneeli @Media paneelilt suvand Any Media,