Share
I forrige uke tok vi en titt på hvordan du oppretter et enkelt brukergrensesnittpakke i Photoshop som en måte å fremskynde arbeidet i noen av dine webdesignprosjekter. Vi har mange forespørsler om hvordan du gjør elementene funksjonelle, så uten ytterligere forsinkelser, er det oppfølgingsopplæringen du bad om!
Denne opplæringen er basert på design sesjonen som vi gikk gjennom i dette forrige innlegget (som inkluderer en gratis PSD-fil), så hvis du ikke har sjekket det ut, fortsett og gjør det nå. Hvis du vil hoppe direkte til den funksjonelle delen, er det greit også!
Det sier seg selv at stort sett alt på nettet kan gjøres på en rekke måter? så vi skal prøve noe litt nytt i dag ved å vise deg to forskjellige måter å oppnå funksjonalitet med dette designet. Den første kommer til å være med Tom Green
I denne metoden vil Tom Green vise deg hvordan du tar elementene som vi har designet i Photoshop, og gjør dem fullt funksjonelle elementer i Fireworks and Catalyst. Jeg lar Tom ta det fra her:
I denne neste metoden skal jeg vise deg hvordan du raskt lager vår styling ved hjelp av jQuery Themeroller. La oss først diskutere hvorfor:
Jeg er en stor fan av resirkulering av min egen kode? men jeg er en enda større fan av å finne kodingsverktøy som allerede er opprettet for meg av andre (vanligvis mer erfarne) kodere! Faktisk, med så mange forhåndskodede verktøy der ute, er det nesten dumt å starte et prosjekt som dette fra begynnelsen, med mindre du har en veldig god grunn til å kaste bort litt tid.
Nå kan vi argumentere for hvorvidt det er verdifullt for en webdesigner å lære å kode fra grunnen av (eller ikke)og jeg vil svare på at det er veldig viktig å vite hvordan alt dette fungerer), men dette er et tilfelle der vi bare lager et enkelt brukergrensesnitt? så jeg kommer til å anta at du har noen grunnleggende HTML / CSS kunnskap under beltet ditt og at du vil vite hvordan du åpner disse filene og redigerer dem i en tekstredigerer.
Som sådan skal jeg basere denne delen av opplæringen på ThemeRoller - det offisielle jQuery brukergrensesnittskapingsverktøyet. Hvis du ikke har brukt jQuery UI før, er det helt greit, men la meg forklare hvorfor vi vil bruke dette i stedet for bare den røde HTML / CSS:
Det sier seg selv, men vi bruker bare ThemeRoller som et fundament? Vi legger til våre egne tilpassede styling tweaks når vi har fått et godt startpunkt.
Så, hvor begynner vi? Vi skal slå koden hardt om et minutt, men la oss starte på ThemeRoller-siden ved å skape en hud som er nær vår egen styling. De tingene vi vil være oppmerksomme på, er:
ThemeRoller gir oss bare et begrenset antall verdier som vi kan redigere opp foran (bakgrunnsfarge, kantfarge, tekstfarge osv.), Så det vi vil gjøre i dette første trinnet, er bare å skrive inn de grunnleggende fargeværdiene fra vårt design.
Du vil kanskje bruke dine egne farger, men det jeg endte med er dette (klikk på linken for å se mine verdier i aksjon):
Herfra trenger vi bare å laste ned temaet som vi nettopp har opprettet. "Temaet" er i utgangspunktet bare en egendefinert CSS-fil (sammen med en håndfull bilder) som vil bli brukt sammen med de grunnleggende jQuery-skriptene, for å lage våre tilpassede stilige grensesnittelementer.
Du kan selvfølgelig bruke dine egne fargeværdier, men vær så snill å ta tak i nedlastingen ved hjelp av demoen herfra.
Hva du får det i hovedsak dette: se rå demo. Det er en generell HTML-side som er generert for å vise widgets som vi nettopp har opprettet? herfra kan du innlemme det i dine egne design ganske enkelt.
I dette siste trinnet skal vi ta den egendefinerte demoen som Themeroller ga oss, og flytte den til vår egen HTML-side. Dette er ganske enkle ting hvis du har noen erfaring med HTML - vi skal begynne å ta tak i den rå HTML som du trenger for widgeten din og slippe den inn i en ny HTML-side som inneholder de riktige filreferansene (nedenfor) for å bruke disse widgets som du vil. Filene du trenger å referere i HOVED-delen av HTML-dokumentet ditt, er her:
Husk at hvis du plasserer alle Themeroller-filene i en annen egen mappe for å justere mappens referanser på riktig måte. I vår demo ser referanseseksjonen ut slik:
Hver UI-widget (dvs.: et trekkspill eller en glidebryter) har to komponenter som du trenger å huske:
HTML-delen er ganske enkel - bare ta den fra demo-HTML-filen du lastet ned. Du må inkludere "aktiverings" -skriptene for hver av widgetene du vil bruke også. I vårt tilfelle ser dette slik ut:
Legg merke til hvordan hver "widget" er aktivert med bare et par linjer med kode? Vi skriver ikke noe av dette selv (selv om avanserte jQuery-kodere er welcoem til), vi tar bare skriptene som demoen ga for oss.
Ovennevnte liste representerer bare de widgetene som ble vist i demonstrasjonen skjønt? jQuery brukergrensesnitt inneholder ganske mange flere som ikke er vist her. Hvis vi ønsket å legge til en annen widget, ville vi bare finne den inne i mappen "development-bundle / demos" (fra tema nedlastingen) og ta det tilsvarende skriptet og HTML derfra.
For eksempel ser HTML-en for en fremdriftslinje ut slik:
Og aktiveringsskriptet som vi vil legge til i våre andre skript ser slik ut:
Accentsconagua
// Progressbar $ ("# progressbar"). Fremdriftslinje (verdi: 20); Til slutt, la oss ta dette for et snurr i et raskt tilpasset design som jeg pisket sammen:
Whallah! Det er sannsynligvis ikke noe å tenke på når det gjelder utformingen (det er ment å bare være en enkel demo), men vi har nå vist at vi raskt kan lage et skinnet sett med brukergrensesnittelementer ved hjelp av Themeroller og flytte dem til en egendefinert HTML-side på bare noen få raske trinn.
Dette er bare utgangspunktet for hvor du kan gå med dette? Selvfølgelig, for å få disse brukergrensesnittelementene til å gjøre noe som å lagre data eller sende et webskjema, må du integrere ekstra koding (som du kan lese mange opplæringsprogrammer om på vår søsters nettsted Nettuts). Men i denne veiledningen har vi opprettet en rask hud som vi kan bruke i en rekke forskjellige prosjekter.
Det er også verdt å merke seg at hvis du ikke er 100% fornøyd med huden som den står akkurat nå, kan du gå enda lenger ved å justere det egendefinerte temaet .CSS-fil som vi refererte til.
