Transcription of PSD to HTML 2.1) Creating the Index File
hello and welcome back to the PSD to HTML responsive portfolio build in this lesson we’re going to get started building out the HTML foresight and when you're building up your HTML you need to keep in mind how you’re going to be styling the document once we jump into CSS because the way we structure ourHTML is going to depend partially on how we’re going to style it in one huge example of that is an example we’re going to be using several times in this site will notice if we look at the site as a whole we step back and look at it we see that it has a defined with and that with goes from me played a couple of just the misuse the Rectangular Marquee tool that which goes from right about here to here however as you can see there are some items that extend beyond that with before the most part our main content is within this area within this defined with and one common way to take care of this is to create a day with the class of container can get whatever class name you want 2001classing that’s used a lot to do this is container or something like that so let’s say we have a deal with the class of container and informed that did for that container class we can define the within our CSS her content the problem is we have a few backgrounds that are extending beyond that with so what we need to think about is how we’re going to structure and the way we’re going to handle that in this course is working to create another div or sections some kind of container that extends the entire width of the browser let’s take this featured section for example so let’s say we have this this block of content with the dark grey background that we see here on the left and right that extends the entire width of the browser and then inside that block of content will have a div with a class of container where this with will be set so we’re going to use a diff with the class of container anytime we have something that supposed to fit in this defined with and if that particular section has a background that supposed to extend out to the edges of the screen will simply put that container div inside another container or another blog that extends out to the edge and will see that more as we start building but those are the kind of things we need to keep in mind as we’re structuring their each TMO now keep in mind your HTML doesn’t have to be perfect the first time around because as we start building our CSS we might see me to go in and just HTML a little bit to meet the needs of the design so when we’re creating HTML to start off really just trying to get a good idea of the structure of the document but if you think ahead and if you think about how you’re going to be styling this in CSS then maybe we can speed up the process alittle bit by anticipating the needs of our styles so having said that let’s go ahead and get started I’m gonna jump into text me here and you can use whatever text editor you want to use I choose to use text may cause I really like the way it works but you can use whatever plain text editor you want just make sure it’s not a word processor Lake like Microsoft Word or something like that make sure it’s a plain text editor like Notepad but I prefer TextMate you can use Dreamweaver if you want to it doesn’t matter but in text me when you open it up it opens a blank title document or sometimes it opens up the last document that you had open was gonna close this blank document command open up a new file and drag this open dialogue in from another window and get the project files opened here I’m gonna open a new directory first of all so let’s create that in America do their bidding shift command and that’ll create a new folder there in a minute call this site 201 now normallyI would just say this in a folder called site or whatever the name of the site is something like that gonna save it as site 01 cause I’m gonna save different versions as we move forward through this course so that you can have access to all the different versions as we see them so much start up and say that and then we’ll just increment that number as we move forward so again will save this any folder cults8:01 will click on Create and now we’re inside that site 01 folder and you’ll notice there are no files here obviously cuz we just created it but once we’ve got that folder selected we can just click on Open and it will open that entire folder force along with a little pain over here on the right where we can select all files and that’s one thing I really like about texting each other text editors might not have this I know some of them do editors like sublime and there’s a few others out there do have that kind of functionality but some of them don’t I just like the convenience of it but anyways once we open this up we can right click on the same 01 folder here and add a new file so many file andI’m gonna call it index HTML and it’s an empty file you can choose different templates wouldn’t come up here and do HTML but we see her there is nothing foreach team of five so I’m just going to leave it on empty file here and click onCreate and 100 create the basic structure of an html5 document startingwith the doctype so exclamation pointduct tape in all capitals in the HTML then we’ll go and create the basicskeleton for documents will have our opening and closing HTML tags insidethose who have opening and closing head tang’s might even go and put a titlehere and we’ll call this myjump into Photoshop my design portfolio including title thanks ok so we have herhead and then after ahead we’ll also have the body of a document and for nowwe’ll just put in h1 here it says my design portfolio ok so that gets us thebasic structure of a document and another thing I really like about textme as we’re going to savor file here and then right-click on the file over here on the right and click on Open with Google Chrome or whatever your defaultbrowser is so click on that and it opens it up and we can see my design portfoliothere so we’ve got her initial HTML file created we’ve got the structure of thehtml5 document created so the next video will move forwardtake a closer look at our our Photoshop file as we begin to fill out the HTMLcontent to thank you for watching and I’ll see you in the next video
PSD to HTML 2.1) Creating the Index File
Reviewed by Tayyab Saqlain Zakki
on
08:10
Rating: 5
Reviewed by Tayyab Saqlain Zakki
on
08:10
Rating:
No comments: