Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Further Website Implementation

354 vues

Publié le

The continued implementation of the website I am creating for my A-Level Media Studies coursework.

Publié dans : Formation
  • Soyez le premier à commenter

Further Website Implementation

  1. 1. FURTHER WEBSITE IMPLEMENTATION
  2. 2. DESIGNING THEBACKGROUND Tochangethe background,I first wentto the‘PageBackground’tab onthe left handside, andclicked ‘customise background’. I then clicked ‘changeimage’and selected theimage I wanted. I selected the ‘fullscreen’optionasI wantthe backgroundtocoverthe whole page,and‘applytoother pages’soevery pagehas thesame background.
  3. 3. DESIGNING THEHEADER/TITLE Tochangethe title, Iclicked the ordinaltextso aformatting toolbarwouldappear. I then highlightedthe textto I couldchangeit, andin the‘font’ dropdownchosethe ‘Anton’ fontas I felt thiswasthe most fittingtomy idea. Withthe textstill highlighted,I selected ‘72px’fromthe ‘font size’dropdownbox.
  4. 4. FINISHEDHEADER/TITLE The finishedtitle,with‘INGRIDMICHAELSON’in the font‘Anton’,withfontsize’72px’andin the colour‘black’.I chosetousemy Artist’snameas thetitle tomakeit obvious whatthe websiteis about. OnceI’dfinishedthe title,I also changedthe headersothatithadaplain grey background,butI changedthe opacityso thatit wasmoretransparent–this separatesthe headerfromtherest ofthe pagewithoutbeing tooin yourface.
  5. 5. ADDING NEW PAGES Toaddapage,I wentto the‘Pages’ tabonthe lefthand side, andclicked ‘Add’atthe bottom. I then namedthe new page,for example ‘Lyrics’ andclicked ‘OK’. The templatecamewithpages‘home’, ‘cast’,‘images’, ‘blog’and‘contact’,soI removed ‘cast’,‘images’and ‘blog’andadded‘news’,‘music’,‘video’, ‘live’ and‘lyrics’asthesearetheusual pagesincludedon anartist’s website.
  6. 6. DESIGNINGNAVIGATION BAR Tochangethe navigationbar,I clicked it andselected‘change style’. On the‘textmenu’ style,I clicked ‘edit style’tobring up the ‘advancedstyles’. I then changedall thebackground colourstodarkgrey, andthe font colourtoblack. I also changedthe opacityofthe backgroundto makeit more transparent.
  7. 7. FINISHEDNAVIGATION BAR The finishednavigationbarcontainslinks to7 differentpages –home,news,music,video, live, lyricsandcontact.Theyareall in the samefontasthe title,‘Anton’andin thecolourblack. I also designedthe colourssothatwhen apageis selected,the backgroundbecomes whiteinstead ofgrey –this allowsyoutosee whereyouareonthe website, andmakesit abitless static.
  8. 8. DESIGNING THEFOOTER I designed thefooterin asimilar wayto thenavigationbar,byclicking ‘change style’andgoing tothe ‘advancedstyles’.I alsogaveit thesamedesign –darkgrey backgroundwithchangedopacitysettings.
  9. 9. FINISHEDFOOTER The finishedfootercontainsthe samedesign asthe navigationbar(aspreviously mentioned), andthe reason forthisis becauseI wantedthepagedesign tobeconsistent.The navigationbar/ footeralso actasbarriers aroundthecontentsofthe mainpage, so having thesamedesign forbothmakesthatseem moreobvious. The footeris alsowhereI haveputthelinks tosocial mediapages.I’ve donethisbecauseputtingthemin theirownspacemakesthem clearer;I washesitanttoputtingthem nexttothenavigationbarlike Iplanned asI felttheylookeda bitoutofplaceandtherewasn’tenoughroom withoutitall looking squashed.
  10. 10. DESIGNINGSOCIAL LINKS Todesign/addsocial media links,I wentto‘social barsettings’.In thesettings,I addeda‘Facebook’,‘Twitter’, ‘Instagram’and‘YouTube’icon,andlinked eachone tomy artists’profiles.I alsomade the‘icon size’bigger andincreasedthe gapbetween each one bychanging the‘spacing’.
  11. 11. DESIGNINGPAGES Eachpagewill havethe samebasicdesign, which consistsofa grey ‘box’with the samecolour asthe footeretc, butwith a slightly higher opacitylevel tomakeit less transparent. Theboxwill havethe page title in it in thetopleft in white,andall thecontent will be inside thebox,e.g. tourdates,lyrics.

×