Unu el la "plej varmaj" teknikoj en la retejo hodiaŭ estas paralaje movo. Ni ĉiuj estis al tiuj lokoj, kie vi turnas la rulalan ruliĝon sur vian muson kaj la enhavo sur la paĝo moviĝas supren kaj malsupren aŭ trans la paĝon, kiam vi turnas la muson.
Por tiuj novaj al dezajno retejo kaj grafika dezajno, ĉi tiu tekniko povas esti tre malfacile atingi pro la kvanto de CSS postulita.
Se tio priskribas vin, ekzistas kelkaj aplikoj, kiuj nur povas alvoki al grafikaj artistoj. Ili esence uzas familiaran paĝan aliron al retpaĝoj, kio signifas ke ne multe, se iu ajn, kodigo estas implikita. Unu apliko, kiu vere raketis en elstarecon estas Adobe Muse.
La laboro farita de grafikaj avantaĝoj uzante Muse estas tre mirinda kaj vi povas vidi ekzemplon pri tio, kion vi povas fari vizitante la Muse- retejo de La Tago . Kvankam tiaj profiloj emas rigardi al Muse kiel ia "vento-ludilo", ĝi ankaŭ estas uzata de diseñadores por krei telefonajn kaj retototajn prototipojn, kiuj poste estos transdonitaj al la programistoj en sia teamo.
Unu tekniko, kiu estas nekredeble facila por plenumi kun Muse estas paralaje movo kaj, se vi volas vidi la kompletan version de la ekzerco Ni trairos, montru vian retumilon al ĉi tiu paĝo. Kiam vi ruliĝas la rektan radon de la muso, la teksto ŝajnas movi supren aŭ malsupren la paĝon kaj la bildoj ŝanĝiĝas.
Komencu.
01an de 07
Krei TTT-paĝon
Kiam vi lanĉas Muse klaku la ligilon de Nova Retejo . Ĉi tio malfermos la Novajn Ejojn . Ĉi tiu projekto estos desegnita por labortabla apliko kaj vi povas elekti ĝin en la Komenca Aranĝo -malsupren-menuo. Vi povas ankaŭ agordi la valorojn por la nombro da Kolumnoj, Gutter Larĝeco, Marĝenoj kaj Plenigado. En ĉi tiu kazo, ni ne terure maltrankviliĝis pri tio kaj simple klakis OK .
02 de 07
Formi la paĝon
Kiam vi agordas la ejojn de la retejo kaj klakis OK, vi estas prenita al kio nomiĝas Plano- vido. Estas Hejmpaĝo ĉe la supro kaj Majstro Paĝo ĉe la fundo de la fenestro. Ni nur bezonis unu paĝon. Por atingi Design View, ni duoble klakis la Hejmpaĝo, kiu malfermis la interfacon.
Maldekstre estas kelkaj bazaj iloj kaj dekstre estas diversaj paneloj uzataj por manipuli la enhavon en la paĝo. Kune la supro estas la propraĵoj, kiuj povas esti aplikitaj al la paĝo, aŭ io ajn elektita en la paĝo. En ĉi tiu kazo ni deziris havi nigran fonon. Por plenumi tion, ni alklakas la folion de la Foliumilo Plenigi kaj elektis nigran el la Kolora Elektilo.
03an de 07
Aldoni tekston al la paĝo
La sekva paŝo estas aldoni iun tekston al la paĝo. Ni elektis la Tekston Iru kaj eltiris tekston. Ni eniris la vorton "Bonvenon" kaj, en la Propraĵoj starigis la tekston al Arial, 120 rastrumeroj Blanka. Centro vicigita.
Ni tiam ŝanĝis al la Elektra ilo, alklakis la Textbox kaj starigis ĝian Y-pozicion al 168 pikseloj el la supro. Kun la teksta skatolo ankoraŭ elektita, ni malfermis la Alignan panelo kaj vicigis la tekston al la centro.
Fine, kun la elektita skatolo, ni tenis la Elektojn / Altajn kaj Ŝlosilojn kaj faris kvar kopiojn de la teksto-skatolo. Ni ŝanĝis la tekston kaj la pozicion de ĉiu kopio al:
- Al, 871
- Grafikaĵoj, 1621
- Programaro, 2371
- @ Pri.Com, 3181
Vi rimarkos, kiel vi difinis la lokon de ĉiu teksta skatolo, la paĝaj resizecoj por akomodi la lokon de la teksto.
04 de 07
Aldoni bildon anstataŭiloj
La sekva paŝo estas meti bildojn inter la tekstaj blokoj.
La unua paŝo estas elekti la Rektangula Ilo kaj desegni nian skatolon, kiu etendas de unu flanko de la paĝo al la alia. Kun la rektangulo elektita, ni starigas ĝian altecon al 250 rastrumeroj kaj ĝia pozicio al 425 rastrumeroj . La plano devas havi ilin ĉiam etendi aŭ kontrakti al la larĝa paĝo por akomodi la retumilon de uzanto. Por plenumi tion, ni alklakis la 100% larĝan butonon en la Propraĵoj. Kion tio faras estas griza el la X-valoro kaj certigi, ke la bildo estas ĉiam 100% de la larĝa fenestro en retumilo.
05 de 07
Aldoni bildojn al bildaj anstataŭiloj
Kun la Rektangulo elektita ni alklakis la Fill-ligon - ne la Kolorŝanĝon - kaj alklakis la magazan inkon por aldoni bildon en la rektangulo. En la zono de Fitting , ni elektis Scale To Fit kaj alklakis la centran tenilon en la Pozicia areo por certigi ke la bildo estas grimita de la centro de la bildo.
Tuj poste ni uzis la Elektan / Alt-Shift-drag- teknikon por krei kopion de la bildo inter la du unuaj tekstaj blokoj, malfermis la Plenan panelo kaj interŝanĝis la bildon por alia. Ni ankaŭ faris tion por la ceteraj du bildoj.
Kun bildoj en la loko, estas tempo aldoni la movadon.
06 de 07
Aldoni Parallax-Scrolling
Estas kelkaj manieroj aldoni paralaje movadon en Adobe Muse. Ni montros al vi simplan manieron fari ĝin.
Kun la plenigita panelo malfermita, alklaku la Scroll-langeton kaj, kiam ĝi malfermiĝas, alklaku la Motion-markobutonon .
Vi vidos valorojn por Initial and Final Motion . Ĉi tiuj determinas kiom rapide la bildo moviĝas rilate al la Rula Rado. Ekzemple, valoro de 1.5 movos la bildon 1.5 fojojn pli rapida ol la rado. Ni uzis valoron de 0 por ŝlosi la bildojn en la loko.
La horizontalaj kaj vertikalaj sagoj determinas la direkton de la moviĝo. Se la valoroj estas 0, la bildoj ne ĝojos, kien ajn vi sagos.
La meza valoro - Ŝlosila Pozicio - montras la punkton, kie la bildoj komencas movi. La linio super la bildo komenciĝas, por ĉi tiu bildo, 325 rastrumeroj el la supro de la paĝo. Kiam la volutaĵo atingas tiun valoron, la bildo komenciĝas movi. Vi povas ŝanĝi ĉi tiun valoron aŭ ŝanĝante ĝin en la dialogo aŭ klakante kaj trenas la punkton ĉe la supro de la linio aŭ supre aŭ sube.
Ripeti ĉi tion por la aliaj bildoj en la paĝo.
07 de 07
Foliumilo Testo
Je ĉi tiu punkto, ni estis finitaj. Lin unua, kiun ni faris, pro evidentaj kialoj, estis elekti File> Save Site . Por retumilo, ni simple elektis Dosiero> Antaŭrigardan Paĝon en Retumilo . Ĉi tio malfermis la retumilon de nia komputilo kaj, kiam la paĝo malfermiĝis, ni komencis movi.