Tämän artikkelin ohjeiden avulla voi aloittaa responsiivisen suunnittelun Adobe Musessa. Opit luomaan responsiivisia sivustoja kaikkiin laitteisiin.

Huomautus:

Adobe Museen ei enää lisätä uusia ominaisuuksia ja sen tuki päättyy 26. maaliskuuta 2020. Lisätietoja ja tukea on kohdassa Adobe Musen elinkaaren päättymissivu.

Luotaessa responsiivista sivustoa voi olla hyvä olla lisäämättä keskeytyskohtia tietyn laitteen, käyttöjärjestelmän tai tuotemerkin perusteella. Keskeytyskohtien lisääminen näiden tekijöiden perusteella voi osoittautua vaivalloiseksi. Keskeytyskohtien lisäystavan ja -kohdat määrittävät sivuston asettelu ja sisältö.

Seuraavassa saat lisätietoja suositeltavasta suunnittelun lähestymistavasta, jolla luot responsiivisen sivuston Adobe Musella.

1

Luo sivusto. Valitse Uusi sivusto -valintaikkunassa Joustava leveys.

Voit välttää valkoisen tilan ja muut suunnittelunongelmat määrittämällä sivun mitat. Valitse Lisäasetukset ja määritä sivun minimi- ja maksimileveys ja sivuston minimikorkeus.


Valitse Uusi sivusto -valintaikkunassa Joustava leveys.
Valitse Uusi sivusto -valintaikkunassa Joustava leveys.

 

 

 

2

Avaa sivupohja tai yksittäinen sivu. Kiinnitä huomiota oletuskeskeytyspisteeseen 960 pikselin kohdalla.


Kiinnitä huomiota oletuskeskeytyspisteeseen 960 pikselin kohdalla.
Kiinnitä huomiota oletuskeskeytyspisteeseen 960 pikselin kohdalla.

 

 

 

3

Aloita sivuelementtien, kuten tekstin, kuvien, diaesitysten ja widgetien asettelu tässä keskeytyskohdassa.


Suunnittele sivun asettelu.
Suunnittele sivun asettelu.

 

 

 

4

Pyyhkimen avulla voit simuloida eri selainleveyksiä. Katso, miltä sivusto näyttää eri selainleveyksillä.


Pyyhkimen avulla voit katsella sivuston asettelua eri selainleveyksillä.
Pyyhkimen avulla voit katsella sivuston asettelua eri selainleveyksillä.

 

 

 

5

Lisää keskeytyskohta suunnitelman katkeamiskohtaan. Huomioi esimerkiksi, että ensimmäisessä kuvassa oleva kuva ylittää leveyden vedettäessä pyyhintä. Lisää keskeytyskohta kohtaan, jossa suunnitelma katkeaa.


Lisää keskeytyskohta suunnitelman katkeamiskohtaan.
Lisää keskeytyskohta suunnitelman katkeamiskohtaan.

 

 

 

6

Muokkaa asettelua uudessa keskeytyskohdassa niin, että sivuston asettelu näyttää hyvältä.


Muokkaa asetteluasi keskeytyskohdassa
Muokkaa asetteluasi keskeytyskohdassa

 

 

 

7

Jatka sivuston esikatselua minimileveyteen asti. Lisää keskeytyskohtia ja säädä asettelua tarpeen mukaan.


Tällaisella suunnittelun lähestymistavalla sivustosi näyttää hyvältä kaikilla selainleveyksillä ja kaikissa laitteissa. Suunnitelmasi ei riipu tietystä laitteen tai näytön koosta.

Lisensoitu Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License -lisenssin mukaan.  Creative Commons -lisenssien ehdot eivät koske Twitter™- ja Facebook-viestejä.

Lakisääteiset ilmoitukset   |   Online-tietosuojakäytäntö