Creating a Website Using Adobe Muse

hey guys and welcome back to the online learning space so far for our website we've planned it all out we know what colors were going to use we have all of our assets all of our pictures now it's actually time to create it in Adobe muse so the first thing you need to do is you want to create a new site when creating a new site we are going to keep the width 1000 so I'm gonna leave the resolution at standard as for margins you don't really need any margins so we can get rid of that and we can leave everything else out the same anyways let's get started so once you have entered WM use like this here you have your main website page panel you have a master page and then you also have your the home pages now we're going to create a one page layout so all of our pages are going to be on this one page the first thing that we're going to do is we are going to create the navigation as well as the footer and the header so the first thing we're going to do is we're going to edit our master Lam so we click on that so once we've opened up the master page what we need to do is we need to make it look like this to have a header at this size which is 130 pixels and also to have a footer that is about 100 pixels and each one of these boxes was 475 pixels so to do that we'll create a few new layers okay so the first layer is going to be the header layer alright and we'll do this so we'll grab the rectangle tool and we'll just draw a box right at the top and we'll set the height of this box to 130 pixels now make sure that you move the header section so that it sits nicely right on that box and if you need to zoom in you can always hold alt and scroll on your mouse until it snaps nicely there we go at 130 now don't worry about the fuel feel we can leave to white and maybe we can change that later now the next layer is the body layer okay so here we're going to have a section which is going to be 475 pixels so make sure you're in this layer and draw a rectangle and we're just going to make sure that this is 475 and again the zoom in if you have to 475 okay so that means that the footer will start there okay and this bottom of the page we can just move it down and the last layer which is going to be the footer will draw another rectangle and we'll just put that in there and we're gonna make we're gonna change the fill to black and we are going to make that 100 pixels okay and so I'm just going to move the footer accordingly and that's it so now we have three separate sections and they all must be on different layers okay what we're gonna do is we're going to click on the header layer so click on this little icon that green box is all highlighted and we're going to click on this thing over here which is called pin this will make sure that the header is always on top of the page so once we have that we can now move on to the next phase so the next thing that we have to do is we have to create our menu up here so I'm going to be working in the header layer and I'm so I'm going to make sure that that is all highlighted and now inside of dobie muse we have this widgets library which already has a lot of things already built for you and it's pretty simple to use all it is it's just a little bit of drag-and-drop so what I'm going to have a look at is inside of menus we want a horizontal menu and all I'm going to do is drag that out on my page now once I've dragged it out on my page all these options can pop up so if you've missed that you can just always go back to this little blue icon and we can change the options now we want four navigational links we want home about us projects and contact us so what we need to do is we need to change the menu type from top-level pages to manual and we're going to start to add four of these links so the first thing I'm going to do is I'm just going to change the text just so I can see it to home all right so it's change the textview you double-click on it and then you double click on the actual text all right now if you want to create another one of these links you click on it you click inside here until these button pops up and now we can create the other buttons so it's going to be home about about us projects contact us now don't worry about the fonts and things like that because we'll change that later so to see if this is working now nicely what we can do is we can we can have a look at this button over here which is called preview and you can now see that when I roll over these things actually change color now they don't do anything right now because we haven't set up any other pages but we know that the links work fine we'll come back to that and we'll add a few other things on the menu bar so while we're still in our master page we're going to try and make the top logo in the top left hand corner so what we need to do is we need to first make sure we're on our header layer ok and then we need to go and grab our tea tool and just draw a box and put our text now if you want to edit the text you can go over here and what's really cool with the Adobe suite is they have included these web fonts which are all hosted on Adobe servers so you can actually add these web fonts in here and if you click on add web fonts you know a whole nother page will open up and I want to just make it all capitals now I am going to make it bigger so I'm just going to increase the size so once you're happy with your text all you have to do is grab the logo from the assets file so all we have to do is just click on the image and then drag it into so once you have your logo all done nicely alright you just want to click this button over here to highlight everything and you just want to make sure that you click on the pin and so it stays all on the top of your screen so the next thing to do to close down the master page and what we are going to do is we're going to open up the home page now we need to create four different content boxes that will hold the content for our web page so what we're gonna do is we're gonna grab a rectangle and we're gonna make sure that we're in the body and we're going to draw a rectangle that will fit that section now that's already 435 pixels so I don't have to do anything now I'm just gonna pick you know random colors for now because I'm just going to duplicate this I'm gonna hold alt and I'm going to drag this down and I'm going to just change the color so I know the difference between them okay and I'm going to do that two more times so now you can see the different rectangles and if you highlight them you know you can rename them to you know the different sections so that's gonna be home that's going to be about that's going to be project and that's going to be contact okay so once you have your content boxes we can now fill it with some text so first thing I'm going to do is go back to my Photoshop document I'm going to grab my color or the first panel and I'm also going to grab the text but firstly I'm going to change the color so I'm gonna click on that the fuel and I'm just going to paste the hex value into there and so there's it's the exact same color that was in our Photoshop so next thing is I'm going to grab all the text so just copy and paste go back into the muse press the T tool and then just adorable okay and I'm gonna paste the text in now here's where you have to be careful with the font you have to make sure that your font styles are consistent so we're going to create a paragraph style for this phone and we're gonna have to choose what color we're going to use so I'm going to keep the phone I'm going to use this font over here and I'm just going to make the font size bit bigger and maybe 20 now to create a paragraph style what you need to do is you need to go over here to paragraph Styles and he can just click new and then we rename this to main body text and now every time you have text all you have to do is click on that and they will use those same fonts and whatever to create that look so I'm gonna do the same for the heading over here so I'm going to use the same font but I'm going to make make it a lot bigger and I'm going to make it all caps so to make it all caps you go over to text and you click on this uppercase now if you want to change the alignment or anything like that you can always you know highlight you can change the alignment over here but I'm gonna leave it aligned to the left side now the next thing that we have to do is we have to put a picture in this content box I'm just going to drag my other assets in there so this was my monitor and so I'm just gonna make it fit in there now you want to make sure that these two things are aligned so you can either do that by grabbing these buttons over here and just making sure that they're aligned or you can grab the align settings over here and highlight both these things and I change the alignment but anyways I'm gonna move on to the next one firstly I'm just going to create a paragraph style out of this I'm just going to call that heading style text okay and so I'm just gonna do the same thing again back to photoshop highlight all of it back to muse I'm just going to keep the same alignment as well so all I have to do is go back to paragraph Styles change it to that and also change that to heading and going to grab my about us image and I'm just going to try and keep the same alignment but this one might not hit so I'm gonna have to make it a little bit more and I'm going to align it to the right hand side and I'm just going to change that color as well so I'm going to grab the eyedropper tool get the hex value and then just change it in Adobe muse so click on the fuel change that color and there we have that pink now if I click on that little icon over here you can add this color to your custom swatches so every time you need those colors they're already there and you don't need to use the eyedropper tool but I'm just going to grab the content for now and do the same thing and then just go back to paragraph Styles the last content box is our contact information so all we're going to do is we're gonna grab something from our widgets panel and we're going to create a contact form so I'm just going to copy and paste this information gonna add it down here and again change the paragraphs files and make sure it looks all neat now pull the contact form all you have to do is go to your widgets library and inside the widgets library you have things which are called forms and just click on a simple contact and just drag it in to Adobe muse now here this is where you can put your email so when someone clicks on that it will actually email that email address and if you want to add other fields and things like that you can now again if you want to change the text you can go always back to your paragraph styles and you can change the text and so I've now changed the font to whatever my font was over here you can change it to whatever you like so now once we've got our website set up like this what we need to do is we need to get this navigation bar to work so to get it to work you first need to set up some anchor points that will help get to the certain pages so to do that if we click on this little anchor icon over here and I'm just going to put it about here and this is going to be my about page so I'm going to grab another one and put it down here and this is going to be my projects page and I'm going to put one down here for contacts and finally one right at the top or top I'm just gonna put that right at the top of the page okay so now once we have our anchors every time you click on one of these links it will take you to one of those points on this page so now let's try that and make that work so now once we have all the anchors we need to worry about this side menu bar at the top and so what we're going to do is first we're going to change this default color so we need to go back to our master page and once we open our master page then we can have access to this menu bar so we're just going to change the design a little bit and we are going to just make it look a whole lot nicer if you click over on this side where you have States and you double click on one of these icons you can see that there are four different states normal rollover mouse down and active and this basically means what's happening at those times so the first thing I want to do is I want to get rid of all of these states or all all this fill so I'm just going to put it to no fill and now you can't really see the text because text is gray so we'll have to change that to black so to change the text to black you just need to double click on it you can go black and there we go so what we want to do is on the rollover state so when you put your mouse over this I want it like a little bar to come up at the bottom now this is pretty easy to do all we need to do is go to stroke we need to firstly uncheck this okay and all I want is a bottom bar now as you can see when I increase the value here you can see that this is appearing underneath that I want to change the color to something a little bit more exciting I can I can use a color the thread in my swatches or I can change to something completely different now if you're home or when you actually go on the rollover if the writing is a little bit higher to get it all even all you have to do is take off edit together and you can see now you see how it's really just not straight to make this a little bit better all you have to do like I said is just click Edit together and it will fix up that bar for you so the last thing is the menu now if you want to change the menu and you want to change some of the text provided that you've clicked on edit together then all you have to do is just double click on the text and you can actually select it and change the fonts now if you preview using any of these web fonts unless you connect it online then the fonts should appear but if it's not connected online then those fonts won't actually appear so please keep that in mind now the last thing that we need to do for the menu is we need to create the links there is an option up here which is called a hyperlinks and all you have to do is find the corresponding link or Anchor Point with that box so I'm just going to go through and click all of them just like that that's projects and that's contact us now the last thing that we're gonna do on this page is we're going to add a back to top button they can always click home but we're just gonna add another button over here so to create a button all I'm gonna do is grab a rectangle tool and I'm going to fill that with black now I'm just going to round the edges a little bit so I'm just going to click up here and you can see that starting to get a little bit more rounded I'll put it in the header I'm just going to make sure that that's pinned as well so I'm just gonna get over there and I'm just gonna put some writing in there so back to top just make sure that writing is in white come in lower they're just gonna create something like that now again all we have to do is we are going to add a hyperlink to the top of the page and now we can save that and we can go back to our website page and we can test this to see if it actually works so the testing we can see that we have that small little button over there okay and we can see that it will take us back to the top of the page now we can also check if our other links work okay so the links are working it's just that they're not really on the right position but that's okay because we will fix that okay so we're gonna fix that link and we're going to go back to our master page and we're just going to put a state on that so when you hover over it it will it will now change color so normal is going to be black but when you roll over I want it to be the same blue of the of the menu bar so what you want to end up with is you want to end up with a button that will change color when it's highlighted over and it'll take you back up to the top now if the button can't change or it doesn't change colors then you have to go back into your master design you have to group both the box and the text and if you click on group it will then apply both settings to that group so we want to have on the rollover state you know for that we want to make sure that it's got a blue little undertone like that so anyways the the next step is we need to get the the positioning right so what we're going to do is we're just going to have a play around with some of the anchor points and we're going to just keep testing until we try to get the links working too you know getting the page you know right so we're going to go back to our our normal web page and what we're going to do is we're going to just make sure I'm pressing down on the keyboard I'm just going to zoom in so we can see it so I'm just going to make sure that they're on the lines okay and if you click and drag they kind of snap so just click and drag all the anchor points until they are all you know snapped now at the top one you don't have to touch the top one but once we are done what we're gonna do is we're gonna hold control okay so we're going to hold shift so that all of the anchor points are highlighted and what we're going to do is we're going to hold shift and press up on the keyboard now we're going to do that five times but for your projects it may be a little bit different so it's all about testing and experimenting so now I'm going to preview that and I'm going to see if it makes a difference so I know I need to go up a little bit more so I'm going to go back and I'm going to increase those by another let's say two and see if that makes it any better all right so a little bit more maybe even another two so it's just trial and error until you get it absolutely right so that's pretty good that one the next one is pretty good as well and finally the contact page that's pretty good too so all my links work and everything goes down to the right page and the whole website is you know going back to normal and that's really what I want the final thing is I just want to add a footer at the bottom and that's pretty simple all you have to do is go back to your master page and you can just grab some tea tool and you can just write whatever it is you need to write it's gonna change the font color to white and just going to change the font to something that we've used before so just gonna increase that size and make it all caps so I'm just gonna grab my information from my Photoshop document just make sure when dealing with the footer we want to make sure that it's in the right layer and so we're gonna put it onto our footer layer and any other text that you gonna write just make sure that it's on footer layer so I'm just going to change that font so once you're done with the footer you can go back to your home page and make sure that everything is working as expected so the links work and the footer is there at the bottom now once everything is working as expected the last thing that you need to do is export the site so to export the site what we have to do is you have to go to file and you have to go to export as HTML now when you do this it will now create a HTML version of your website and so now what we have is a HTML version of that website which we can upload and we can do whatever we want with as you can see all of the scrolling works fine our footer is at the bottom our link back to the top works pretty good and then we have it so this is a basic way of getting a website created in Adobe muse there are whole lots of other features that you can have a look at like animations and scroll effects and doing different kinds of things that will pop in and slide in and slide out adding sounds videos things like that but so anyways guys that is how to create a simple website using Adobe muse better web sites will incorporate you know better use of graphics you know different kinds of scrolling animations and things like that anyways thanks for watching and see you next time

Channel: The Online Learning Space

Views: 11,519

Keywords: education, tutorial, school, work, technology, software, information, IST, IPT, SDD, HSC, BOS, board, of, studies, helpful, tutorials, tutor

Id: Rg3dnU95B-M

Length: 27min 51sec (1671 seconds)

Published: Mon Nov 07 2016