PSD to HTML 2.2) Structuring the Navigation

Previous: PSD to HTML 2.1) Creating the Index File

Next: Psd to Html 2.3) Structuring the Feature Section

PSD to HTML Complete Course

Transcription of PSD to HTML 2.2) Structuring the Navigation

hello and welcome back to the PSD to HTML responsive portfolio build now that we’ve gotten our initial website set up with treated our index HTML file and getit looking absolutely beautiful we’re gonna move forward and start filling outsome of the content so many jump into finder and here we have our site 01folder I don’t want to overwrite all of the extensive changes that we made tothat file so we’re going to take that copied and pasted to create a site 02folders let’s rename this from 601 copy 20 2010 pin-ups 802 in TextMate and whatwe can do that if you’re using text me is we can drink thats 802 folder down toour dog and just hovered over the text made icon and it opens up an entirefolder there so we can close this 801 folder now because we’re no longer usingit and now we’ve got side 02index HTML and I want to jump into the head of our document starts filling outa couple of items here now if you’ve spent any time at all using a mobilebrowser to browse different websites you might have come across a website thathas just been shrunk down so small inside the mobile browser that it’simpossible to read any of the texts in order to read the text you have to go inand zoom inin order to see the taxa make it large enough so that it’s even legiblewell there’s one small thing we can do to avoid that problem by default somemobile browsers will shrink your website down to fit the entire width of the siteinside the mobile browser so to avoid having that happen we can use a simplemeta tag and the name of that meta tag is viewport Sony equals viewport thatinside quotation marks and then for our content for this meta tag we’re going tosay with equals device with common space and in initial scale so initial hyphenscale equalsone point zero that will basically this Landry here will basically scaleeverything in the browser so that it fits inside the mobile browser withoutyou having to zoom in and out so this is a very key tag to include in the head ofevery document probably every document that you create from now onfor the web because a lot of people are going to be viewing your site any mobilebrowser and you want that to be mobile friendly now if you have some kind ofcomplicated site that has a lot of stuff running on its gonna have a lot ofcontent inside it and it’s just not feasible to be viewed on mobile browserthen you can do away with this meta tag in particular I worked on some websitesvery recently that have one page of the website that’s almost a wholeapplication within itself because there’s so much functionality on thatpage a lot of that depends on your customer on your client on who you’rebuilding the website for sometimes you can convince them to simplify it andsplit it up into multiple pages sometimes they want a bunch of contentor a bunch of functionality on one page and you have no choice but to just gymat all in there and if you’re gonna do that sometimes it won’t work on a mobilebrowser so in that case don’t have to worry about this particular tag but ifyou want to your websites to look good any mobile browser it’s very importantto include that particular med attack and so for now that’s all I’m reallygonna worry about in the head I just that’s one of the first things I alwaysdo when i’m creating a website now that I wanted to go and get that out of theway so we didn’t forget so then we can jump into her body and just startfilling out some of the content so we’re going to take a look at our Photoshopfile first and the very first thing we see at the top of me go ahead and hittab to get rid of our toolbars there in two min 200% and at the top we see ournavigation bar so this is something we talked about before we have a back roomthat’s going to extends to the edges of the browser but then we have contentwithin that back room that’s going to be inside this fixed witso we basically need two levels hereof of HTML tags in order to get this to work so what I’m gonna do inside thebody of our documenting this is gonna be above the title here my design portfoliothe very first thing the very top is our navigation so we’re going to use thehtml5 element now and we’re gonna put our navigation inside that element soanytime I create an element that has a closing element tag I like to go aheadand create both the opening and closing tags before I put the content incitedthat way I don’t forget to do that laterso this particular matters element is going to be the element with the greenbackground that extends all the way to the edges of the browser but the contentinside that never element needs to be any specific whip so we’re gonna put thecontent inside the now within a div that has a class of container now again youcan get this whatever div or whatever class name you want to I like to usecontainer because it’s used a lot bootstrap uses that other friend andframeworks use it as a very commonly used class name again you can call itwhatever you want to but I highly advise you to give it a name that makes itsthis is going to contained the main with of our content and and so we’re going touse the commonly used class name of container and like I said before we’regoing to read the closing diff tech there so you don’t forget to do thatlater so then inside the container we can create the menu itself so if we lookat our Photoshop file we see for menu items and I’m gonna put these in aunordered list so we have homework about in contactcivilization back into our code let’s create an unordered list that containsall of those items so we’re going to create an unordered list and just forthe sake of being able to style it appropriately I’m gonna give it a classnamed England with my class names I like todefine what the content is not what the content supposed to look like so I don’twant to say something leg horizontal navigation or inline navigation insteadwhat I want to say is now list this is a list that contains links for navigationso we want to give it a class name that describes the content that incited acouple owns better closing an ordered list tag inside that unordered list willcreate all of our list items so we’re gonna have a few list items here andthey’re all gonna be linked so wanna put an anchor tag in all of these and fornow I’m just going to link to pound which is basically just the current pageand and we’re not actually gonna create this full site we’re just gonna createthe homepage so this right here is where you and replace this pound sign youwould replace that with whatever the link is to the page you wanna go to soindex HTML here for the work page might be worked out each team or whatever sowe have our opening anchor tag and then the text that’s going to be inside thatlink which is homeclosing anchor tag in her closing list item tag then to speed up the processI’m just going to highlight that entire list item copy it and paste it threetimes and then we’ll just go into each link and replace the text so we havework we have about and then we’ll have contact now your SEO professional thatyou’re working with might suggest different names for these buns somethingthat’s more SEO friendly but for now we’re just gonna stick with these simplemais homework about and contact so that’s a basic unordered list there butyou’ll notice it go back to a Photoshop file on the right we also have somesocial media icons someone to go ahead and create another unordered list forthose who will come back over here after a closing unordered lists tagged weregonna create a second unordered list and will give this one a class of sociallist because again we’re describing what the content is not what it’s supposed tolook likeso this will container social media icons will skip couple learns herclosing unordered lists tagged and then we’re gonna have a few list items hereas well so well I and then again we’re gonna have an anchor take here so fornow I’ll just link it to the current page using the pound sign for the octoThorpe or whatever you prefer to call it in in this you’re going to containimages is gonna take contain icons that we see here and we’re going to use theactual icons that we got from the YouTube and Twitter and Facebook sitesalready gotten pulled into our document here so later we’ll just pull them outof our document so that we can actually see them but for now we’re just gonnaenter the HTML for still have some broken links or some broken images for awhile but later on we’ll go in and create those images so we have heropening and protect their and then will point to our image and we don’t knowwhat the sources gonna be yet but we can probably guess we’re going to put it ina folder called images / and then we have your YouTube image and it’s got itsgonna have some transparency on its working to make it any PNG file and willjust call you to not P&G again that’s a father hasn’t been created yet but Iwill just make sure that we give this folder structure in filename whenever wedo create so after the closing quotation mark their input an alt tag here whichis always suggested when you’re entering your HMO and was gonna take you twogonna be the text that pops up if you hover over that image for a couple ofseconds also very crucial for SEO purposes as well so there’s our imagetank then we’re going to have a closing anchor tag and are closing list item tagthen highlight that line command CD copy or control see if using a PC and thenwe’ll just paste it twice because we have two more social media icons weregoing to use one of them is Twitter’s so far second rule changes to Twitter notPNG and will change our alt attribute here to say Twitter as well and in 431it’s gonna be for Facebook’s will say Facebook P&G and will change your alttag excuse me to read facebookand that gives us everything we need for our navigationobviously we’ll have to go in and and style it later run before now if we wereto test our page are now inside the same 02 folder so let’s say that right clickon the file and open it up in chrome and we can close the old version here buthere’s our basic setup doesn’t look quite like what we want it to look likejust yet but again right now we’re just doing our HTML get to this year says inthe styling later on but for now it’s a good start so now we’ve got thenavigation done next video will certainly moving down and take care ofthe header will move on to the featured section later and we’ll just startbuilding from top to bottom so thank you for watching and I’ll see you in thenext video