we're going to build a simple web page inside of adobe Dream Weaver so before we get started let's just go ahead and let's take a look at a sample what we're going to make so I've already made it we're going to make a website for a client and it's called cool drives and we're just going to make a cool place to drive a vehicle in this case I'm using our example Valley of the Gods so we're going to go ahead and we are going to make this simple web page using Adobe Dream Weaver so before you do this you should definitely run through the coding projects on side of inside of KH Academy because that'll really help you understand some of the things we're doing so this is a practical application of the skills you practice there furthermore the question is is it important to learn Dreamweaver for web development today now things have changed over the years and now in 2024 Dreamweaver itself might not be one of the best tools to use in fact most of us use use online Builders but all of the tools are the same you really need to understand the Box model layout how things move so things you do in Dream Weaver are essentially the same things you do in any other online tool so Dream Weaver considered that what you see is what you get tool and I'm going to show you kind of how that works here in a second so first things first let's start talking about what we are making so on my desktop here I have a rough layout and I can zoom in a little this gives me an idea of the different sections we're going to use so we're going to use H HTML sections to build this website we're going to do the header we're going to do the main section and we're going to do the footer inside the header you'll notice we're going to have a logo we're going to have a navbar inside the main we're going to have a hero image we're going to put title over it we're also going to have a location information section where we have an article and an aside and then in the footer we're going to put some copyright information so let's go ahead and let's get this rolling so first things first inside of Dream Weaver when you open it up you're going to be introduced to this interface so first things first we need to create a new site so in the middle of my screen it says create new you can also go to site new site and you'll get the same place so let's go ahead and let's create our new site so really before I even start creating a site I like to go and set up my folder structure so I'm going to run and on my desktop whoops on my desktop I'm going to make a new folder and I'm going to call it website you guys can decide where you put yours you can put it in your documents you can put it wherever you save it but inside this folder let me double click it I'm going to put in a folder for CSS and that's where I would put all my stylesheets I'm also going to make a folder for images so this is going to become my home base for all my files so before I even get started here with the new stuff I'm going to get all my files in here so before I even make a new document we're going to go ahead and we're going to define a new site so go to site new site and right here we're going to call this website local site folder I'm going to push it to my desktop and to that folder I made right here website and I'm going to hit choose I'm going to go ahead and hit save and when I do that you'll notice over here on my files panel it has my site it has those two folders I made and all my files are now going to be here so when I do relative links they're all going to the right place now we're going to going to go ahead and get started let's just create a new page we're going to go with HTML and I'm going to call Mine Valley of the Gods you guys can pick whatever location you want but I'm going to go ahead and give mine a title and I'm going to hit create so now that we are in here we have a few cleanup items to do on Dream Weaver you notice I've never run it before so I'm going to get all these little help windows so right now works es I am currently in standard workspace I like standard because it gives us the split screen view it gives us our code view it gives us our live view here um but there are a couple things that I like to change first I like to add What's called the properties bar so go to window properties and this properties bar I like it on the bottom down here this is where it used to be in the old version of Dream Weaver so once you have that set now it's time to get started so the first thing we're going to do is we are going to do the background color for our web page so some things here here is our web page if we want to do background color we can go to file page properties and right here we have some of our different settings so first things first we can set our default fonts in here I'm not going to set anything there but we can go ahead and set our background color and the color I'm going to use this is the one that goes with our thing it's F 7f 3 E8 and go ahead and hit enter and that is going to be my background color hit apply you'll notice it's just a really Light tan color and I'm going to hit Okay so we've already added if you notice in code view it added a style right here inside of the document now we're going to push all these styles to an actual style sheet and we'll do that here in a second I'm not going to do that quite yet so first things first background color let's go ahead and let's insert something so we're going to insert the header so over here you'll notice we have a panel called insert and side you have your layout so we're going to go ahead and hit header and when we do that inside our body it's going to put in our new header and it says content for new header tag goes here and first things first let's go ahead and let's start styling our header so if you look at my example I want my header to kind of go across the page I'm going to have it centered so let's go ahead and let's get it sized and centered correctly so to do CSS we're going to go to our CSS designer and let me teach you how this works so this first one style this is our internal style oops click back on there I'm going to add a new source and we're going to make we're going to create a new CSS file it's going to be a link we are going to put it in our CSS folder we're going to call it styles.css and we're going to hit save now you saw that message it said it's going to be relative till we save it so we should go ahead and save our document too so let's go file save as and our file we're going to name it index.html and hit save and now you notice our style St sheet is there we have our header we'll do the previews here in a minute up here on our CSS designer you'll notice I have both Styles internal and style sheet on the internal I have the body on the stylesheet I have everything else we can go ahead and move our body to my stylesheet there and there is my background color go ahead f we can hit save all don't know why it's not showing yet but we'll figure that out as we go so let's go ahead and let's start building styles for our header so first things first if your header is selected go ahead and hit selectors and you'll notice we can get rid of the word body we're going to style our header our header here we are going to add some different properties down here so if you uncheck show set it'll show you all your different properties so we have our layout our text our borders our background and then we can just add extra in this case we're going to work in our layout first thing we're going to Define is our width so the width of our site is going to be 1200 pixels we're going to give it a height probably of 120 and we need to go ahead and Center this item now to center items inside of HTML what you're going to do is you're going to set your margin after you have a width to Auto so if I click on the pixel setting and say Auto it's going to start centering my tag here and last thing we're going to click on the background property and we're going to give it a color in this case I don't have a specific color so KCK pick a cool blue that you like and when you're ready go ahead and hit enter and you'll notice that there is our header so I'm going to hit file save all and we're going to go ahead and preview this now previewing there are two different ways to preview inside of Dream Weaver we have two views we have a live view and we have a design view live view mimics a website and sometimes it works sometimes it doesn't design view is the old style way we used to work in here and it definitely works but sometimes things just don't look right either so neither one of these are perfect the best way to preview items is to preview them in your browser now to do that you we need to set some preferences so you can go to edit preferences on a PC on a Mac I'm going to go to Dream Weaver and settings and once we're in here we are going to update I don't see it file types editors nope I don't see what what I'm looking for let me hit close so we have our real time previews here okay I'm going to hit edit list and see what my choices are inside of here you guys can have different browsers to preview it you can also set your primary browser and your secondary browser for me I'm going to choose Safari if I tell it to be I could tell Chrome to be my second and it would be command F12 Safari is option F12 yours is going to be just F12 so make sure you choose Microsoft Edge and F12 12 I'm going to go ahead hit apply H OH Close there we go so option F12 nope wrong one for me didn't work but I'm going to go ahead and just click here preview and Safari and there we go there's my valley of the gods web page ready to go you guys can see it looks pretty good couple small things we need to change you notice there is this extra space up here and I'm going to show you how to kill some extra space space so we're going to put in what's called a global reset so to put in a global reset we're going to add a new selector and I want you just to put the aster and inside the aster we're going to set the margin to zero and we're going to roll here to padding use Shand and set that to zero as well and what this does is this overrides any and all browser settings that put in different amounts so you'll noce for headings and stuff there are always some system settings that'll help override it let's go ahead let's save all and if I jump back to Safari you'll see notice it's already screwed it up because this is actually a live preview it keeps updating here in Safari so we're looking pretty good with the header let's go ahead and let's get the rest of our content in the header so I'm going to go back to split view I think this is the easiest way to work because I can go through the live view up here and I can use a the code view inside of our header we're going to go ahead and we are going to insert a div so right before content for new header I'll click there I'll go to insert we're going to put in a div tag add insertion points we're going to give it a class the class is logo we're going to go ahead and hit okay and there is our div with the class of logo now we're going to insert an image into this div now first things first you're going to go to your website and you're going to grab your images so in my case I have a cool drives logo we're going to use so what I need to do with this logo is I need to put this logo inside my C or my image folder in my website so all your items need to live inside that folder so with that logo there I can go ahead and I can insert an image so again right here inside of logo I'm going to say insert image and I'm going to go to the cool logo I'm going to hit open and there is my cool drives logo you'll notice it is way too big so we will need to size this down and this is where that properties panel comes into place so down here on the properties panel this is my logo I can go ahead and change the width I can say 200 I think 200 looks pretty good maybe a little bit more maybe 240 uh maybe even 300 let's see uh 300 looks even better so there we go we can also add in an ALT tag so I could say cool drives logo and we can even give it a title cool drives logo and I'll show you where the to where the titles come in so there we go let's go ahead and let's save all and let's preview this again so I can just jump right over to my browser and there you go there's my cool drives logo onside of my background so now a few more small things we're going to go ahead and we are going to add our navigation so our navigation is going to go next to our logo so we can select that content for class logo and let's go ahead and let's insert the nav tag let's see do they have it navigation there we go add insertion point we are going to we don't need to give it a class cuz this is going to be inside of the header so go ahead and hit okay and inside of the nav tag we're going to go ahead and I want you to insert an unordered list and then let's do one list item so click list item so you'll notice inside here you see how we have our single list item whoops they weren't quite done so I undid twice and let's do it again let's do a list item and then we're going to make it an unordered list so see how it's stacked correctly I got the U and then the elies inside and now let's select this and we're going to make our three three page our four pages so we have a home we have about us we have cool drives oh my gosh I can't spell and we have contact so those are going to be our four pages and what we're going to do we are going to style this list to make an actual menu so let's go ahead and let's work on styling this list so first things first I'm going to click the UL tag here we can also use what's called the Dom here to select which tag so if I select the UL tag here we're going to add some CSS to it so first things first make sure we are putting it on our style sheet our selector is going to be we can do nav oh that should not be in that div I've kind of messed up there we can fix that though so nav let's go ahead and let's let's modify our list type so if we click on text and scroll down a little bit here is our list style type and we're going to say none and when I say none notice it gets rid of the bullets now let's go ahead and let's fix our item here I want you to notice I have accidentally put my nav inside of that logo and that is not what I wanted I want the logo here and the nav here that way I can float items so let's go ahead and let's fix my mistake there what you're going to do with your nav selected is we are going to move it down after that div and when I move it down after that div notice I got div with the image and then the nav is separate so that was my mistake make sure you fix that we got to get things done correctly and now we can go back and we can finish styling our list so we need to make this look like buttons so we've done the UL we've gotten rid of the bullets now we need to make these individual items these individual list items float next to one another so go ahead and let's grab a list item here and let's add a new selector and nav Li that's fine and in the this one we need to tell these items to display and we can say inline block and when we say inline block that changes how they look so they roll up next to each other and now we can start making our actual links and our buttons so to make our actual links and buttons we are going to take the word home double click it and we're going to add a link and the link we're going to do just hit a number sign for right now and for each one of these I want you to give them a link just to a number sign and that's just a placeholder for now cuz I want them to be linked I'm not so worried about linking the pages one more contact all right so let's finish this up and let's finish making these buttons and finish this part of the video up so now for each one of these I'm going to go ahead and I'm going to click the a tag and we're going to add a style for the a tag here so we're going to go to our selectors and I want this to be nav ulli a because I want to make sure I'm targeting the correct links inside of the nav hit enter so on this one to make buttons first things first we have to give them a background color so let's go ahead and let's give them a background color of a transparent white so in here we're going to choose white now down here we got to choose RGB a that a means Alpha opacity so choose that and you notice your numbers a little bit different and now we can move the slider down and I think 60% is a good background color let's hit enter so now you notice our buttons have a nice color background to them we are going to set let's go back up to layout we are going to do some padding for padding we can link them together and let's go ahead and let's just roll them up up so I'm think probably about 12 for padding looks good let's do 12 there we go so now notice they're starting to look like good buttons we'll get them to the right position here in a second but right now they're looking pretty good after we do the padding some other things we need to modify we need to choose some text Styles so my font family for this one I think I'd like to do the Gotham so there we've changed the text style I think the size is okay but I don't want them to underline so for text decoration I'm going to say none and then for the color font color I want to choose that background color so I can grab my eye dropper roll over whoops for me I have to allow it let's try it again there we go yep I got it so there we go and finally we're going to put some space between the buttons so go back up to layout for space we're just going to give them a margin and just do a margin on the right and you can space it out to what you think looks good and last but not least let's go to border and I want to set a radius I like the rounded edges so go ahead and hit the link so they're all linked and give it a border so now you notice we have some cool looking pill buttons is what we call them and now let's go ahead and let's work on getting things where they belong so where it says content for new header tag goes here we can actually delete that line we're not using that whoops delete that line backspace and now let's go ahead and let's finish styling this up so for the cool drives logo I need to move that down and over and for the nav bar I need to move this over here so the easy easiest way to do this since they're both inside of the same tag is I can float both items so let's go back and let's work on floating our logo so for our logo I can click over here in the Dom div. logo and let's go ahead and let's add one new selector logo and I like to put things in order so I'm going to put it right before my list and let's go ahead and under layout scroll down a little we are going to float him to the left you'll notice things are going to start moving already we are going to give him a margin on the top so we're going to kind of Center him in our item I'm also going to give him a left margin there we go I think he looks pretty good and then we're going to go to our we're going to go to our nav and we're going to create one more float for the nav tag itself so go ahead and hit a selector and I just wanted to say nav cuz we're only going to do one and for the nav we're going to go ahead and again float him to the left and then we can give him a margin on the top bring him down and we can give him a margin on the left there we go and let's go ahead and let's file save all and let's go check our previe View and there you go you notice we have a great looking header and finally I want to make these hover so when we roll over these we know that these are buttons so we can add a pseudo class to the link and also we want to add some titles to these links and the title shows up if you notice when I hold my mouse over cool drives here is a title so let's do this last little bit so first thing we want to make a new style basically the same style but we're going to make it a pseudo class I'm going to go ahead double click I'm going to copy that and let's hit a new selector I'm going to paste it and then I'm going put a colon and hover and if you remember from the CSS lessons this is a pseudo Style and what we're going to do on this hover is we are going to modify the background so the background we are going to make it the transparent white but this time I'm going to turn it to 0.9 for the alpha so that way it turns nice and bright so let's go ahead and let's save all let's jump back over to our preview here and notice when I roll over see how that looks correct the other item I want to do is I want to add a title to each one of these buttons so if I click on the button we can go to the title and I can say home click on the next one we can give it a title of about us click on the next one oops come on cool drives and click on the last one last one would be contact and go ahead and save all and then jump over to your preview and now notice when I roll over everything looks good and and if I hold my mouse there the title shows up so that way I'm making this look good and for SEO search engine optimization some of these things would work better so this is the header I know it took a while it's kind of slow but you got to work through got to think about it when you come back we're going to work on building that main section so welcome back so we're going to keep moving forward with our website design where we left it off we finished the header we did the logo in the nav So In Your Dream Weaver you should have all of this ready to go and here's our split view as well as if I go and check my my preview here you can see I have my nice header we have a logo everything's up and running so now it's time to start working on our main content and we're going to have two sections and inside each section we're going to do stuff so let's go ahead and let's Dive Right In and let's add some some main content so back in Dreamweaver we're going to click and we can click just after just after you can click on your header and let's go ahead and let's try inserting something new here so we are going to insert Main and notice we get an option here I can insert main before well that's not what I want I can insert it after I can wrap it around the header or I can Nest it inside in this case we're going to choose after and there is my content for main now where to start with this I think first things first let's just go ahead and let's get it positioned properly so the width of our site is 1,200 pixels so we are going to make a new stylesheet with a new selector and we're just going to call it Main and the width of main we're going to go ahead and click pixels is going to be 1 1200 pixels that way it matches everything else we're going to go ahead and Center it so in this case we're going to say Auto auto and let's go ahead and let's give it a background color the background color for this one we're going to go ahead and just use white we can switch it back over to a hex code hit enter so we have our main content area now we can start adding our section so let's let's go ahead and let's do our section with the ID of hero so remember with an ID we can only have one of it at a time so let's go ahead and click main insert let's choose section and this time we are going to Nest it and so there is our new section inside of main now that we have our section defined we are going to jump over to photoshop and we're going to get the her image ready so let's jump on over to photoshop and you'll notice I have two images ready to go I have this one from unsplash which is a good Valley View and then a little later we're going to make one of this one which again is another image from unsplash so to make this Valley View I need to crop this to the proper Dimensions so I know our site is 1200 pixels wide and I'm going to make this 400 pixels tall so I'm going to go ahead and hit crop and I'm going to set it for withth height resolution solution 1 1200 by 400 and then I'm going to go ahead and get it structured where I want it so I want a lot of sky and I want a good amount of everything else that looks good when I double click you're going to notice the image gets significantly smaller because I just threw out a ton of pixels that's okay because this is meant for the web so now let's go ahead let's export export as and I am going to go ahead and choose my format this is not a PNG there's no transparency GIF it's more for Logos and stuff so jpeg would be the appropriate one I'm going to go ahead and hit export and then I have to choose where I'm saving it in this case we're going to go to my desktop website images and I'm going to call it hero image I already had an example one in there but let me just click it and I'm going to hit save I'm going to replace it so now my image is in there and we're going to jump back to Dream Weaver and we are going to go ahead and we are going to place this image in the background of our section so our section we need to go ahead and give it an ID so I want you to click your section and down here where it says ID I want you to type in hero and hit enter so on our properties panel right here the ID I hit hero so this is now the hero section and let's go and let's make some CSS for our hero section so we're going to go in here selectors new there's my hero for my hero let's go to the background and I want to go ahead and set a URL images hero image there we go so my hero image is in there you can barely see it so let's go ahead and let's get that height so we made the height I guess we can tell the width to be 1,200 and we can tell the height to be 400 and there we go there's our beautiful website with the hero image we can go to our live preview notice there it is it is starting to look really nice now our next job we're going to go ahead we're going to put an H2 and a tagline in there so let's go ahead and get those tags inside there so with our section selected our hero section let's go ahead and let's insert and we're going to put in an H2 heading to change this to H2 click the insert button and we want to go ahead and Nest it inside so for this h2 tag we can just call it you know like famous and I don't know if it's a really a famous drive but famous Utah drives and we are going to go ahead and after this one we're going to put a tagline using paragraph with a class of tagline so let's go ahead and let's insert a paragraph and for the paragraph we're just going to put something like a slow drive through Sandstone butes the rest of these items a content for the section we can get rid of this content we're not using that so now I have my H2 and my paragraph and now we can start styling those as well so for my H2 I'm going to go ahead and click it CSS designer make sure I have the Styles add there's my hero H2 and now I can go ahead and set my text so for this one I'm going to run with using the Gotham for the headers we can Center our text I could possibly make it a little bit bigger we can set the pixel and kind of scroll up maybe about that size maybe for our paragraph let's make a new style there for our paragraph We are going to change this and we will use the Baskerville why not that looks nice um we are going to give it a variant a style of italic and maybe we will we'll Center that as well and we'll play with the sizing a little bit okay I like that looking pretty good now some things we can change here let me pull that down a little bit so I get a better view I want to move this title down some I don't want it sitting right there on top so a couple different ways I could do this the easiest way since we are nesting these inside of that section I can just put a padding on the section so if I go back to our hero and I go back to our layout and our padding the padding at the top I can push that down so maybe I want to use let's see 90 pixels of padding and that looks great I like the placement I like where it is but the problem is notice my image has stretched down as soon as I did this what you're seeing is that box model at work so if I'm putting padding in that means I got to take away from the height of this so now I'm going to go up here to the height and if I'm adding 90 pixels here I got to subtract 90 pixels here so this now becomes 310 and now I'm back to something perfect if I want to change the text color of my hero image I can click here we can grab our slider maybe I want a nice I don't know something dark let's give it a try yeah that looks kind of nice and maybe this will be something for p let's go ahead and let's change that text as well easy thing is you guys can always come back later and Define this so famous Utah driv is a slow drive through sandstone butes and I'm really liking it let's go ahead and save all and again you can preview or I can just jump over to my live preview and this is looking beautiful so now we're going to push down and we're going to start doing the next area of this we're going to put in our location section and Float two more items so let's go ahead and add a new section so after this section I want you to go ahead and click insert new section we are going to put this one after and we are going to let's go ahead and let's name this section so this section was called location there we go and we should probably go ahead I think we're good I don't think we're going to do anything else at the moment let's go ahead and add in our article and a side and then come back if we need to all right so in our location we are going to go ahead and we're going to insert our article so let's go ahead and let's click article in this case we are going to insert it I want to put it within so hold on let's cancel I'm going to click right inside of our section and I'm going to go ahead and put our article at insertion point am I going to use a class I don't believe so no class so let's go ahead and hit okay so I have my new article in there let's click after the article and let's go ahead and do our aside as well at insertion point click okay so now we have our new article and our new as side and we can get rid of this content down here we don't need this so let's work on bringing in the content we're going to use so for our article I was going to do a header and a paragraph so let's go ahead and let's do the header first and for the H1 tag we're going to use Inside My article here let's go ahead and change this back whoops I don't want an H2 I wanted an H1 so let's insert an H1 and I'm going to name this Valley of the Gods I have multiple H1s so let me delete one of them I got too many h one's happening there there we go I am fixed Valley of the Gods inside an H1 I am going to get rid of this and let's go ahead and let's put in some paragraph text so let me click up here at Valley of the Gods hit enter and let's go grab some text so we are going to use Wikipedia for the text the reason why I'm using Wikipedia is one we're allowed to it gives us good text two it's pretty easy and there's a good amount here so we're just I'm going to copy this intro paragraph go ahead and hit copy and I'm going to paste that into that paragraph that I made right there so I'm going to go ahead and paste and there is my paragraph I'm going to go ahead and hit enter again I would also like to insert an image for this image I want it to be that other image I have actually you know what we're going to wait and we'll insert that image in a little bit I'm going to make another H3 three and I'm going to place this one after this ag3 I'm going to call it overview hit enter and I'm going to do one more paragraph I'm going to get this other overview paragraph that way I have two paragraphs of content because I think it just helps make it look a little full so there we have our two paragraphs of content this is looking good now I want you to go into to our aside and inside of our aside we are going to put an iframe and in this iframe we are going to put a Google map so let's go ahead and delete the content there and inside that aside I want you to go to maps.google.com I've already looked up Valley of the Gods you can choose any of these little marks it doesn't really matter I'm going to choose this one here and I'm going to go ahead and hit share and on this share I can go and embed a map and copy the HTML jump back to Dream Weaver and just paste the HTML and now you're going to notice let me save all you're going to notice we have the map we have some good text let's go to my live preview here's my text here's my map and all is looking good so now we just need to kind of style this get it perfect and we're going to add an image so for the style of this first we need to put the side by side so we'll float them next to each other so what we're going to do is we're going to go ahead and give them both a width and we're going to float them so first things first for the article let's create a new style new selector location article and for the width for right now let's just do 600 and we are going to float left the map automatically moves up into place but we need to float that one anyway so I want you to hit the other aside I want you to make a new selector and again let's go ahead and let's set our width and let's go ahead and set our float so there they are floated side by side we're going to work on some styling and make this really work but for now let's go ahead and let's keep going see where it says content for new main tag we're going to go ahead and delete that so we can get rid of that as well as soon as I get rid of this you're going to notice something's going to happen our white background will go away so let me hit backspace and notice our white background went away what is happening here we are having what is called box collapse and what box collapse means is the background both items are floated so the Box doesn't actually know how big it's supposed to be I want this box to dynamically change based on the items floated so I need to add something special so at this last section after the aside I need to add in a div so I'm going to insert div I'm going to put it after tag and I'm gonna give it a class of clear fix and I'm going to go ahead and say okay didn't go in the right place so what I'm going to do is I'm going to pick it up and I'm going to move it down here after that section I'm going to get rid of the content and then we're going to make a style for Clear fix so I want you to go ahead and grab this weird there there we go grab this one and let's make a new style for Clear fix so go ahead and hit Styles new selector clear fix and for Clear fix we just need to tell it there is something there so we can say display and we can sh it tell it to be a block and we can give it a width or a margin of zero and we want to clear both clear both and when we clear both that is the one that actually makes it work so now this is an invisible item it has a height of zero right is that what I did height oops height of zero and that invisible item will then stop our box from collapsing so it's just an invisible div that we put there now that's just a little hacker trick glad you know it if you want things like this I would normally put them up at the very top of our list underneath that reset because you want to make sure it kind of works on everything now let's style this up a little bit more I want to go ahead and add some padding in here and I just want to squeeze some items up so let's add some padding around this so easiest way to add padding same way we did on this drive on this hero image we're going to add padding so I am going to grab that second section that second section is called location and I'm going to just add some padding to my location so grab we haven't made one for location so make a new selector for location move it down to the correct area let's keep these in order I like there we go so for location just go ahead go to padding we can link all of them together and we can increase our pad adding probably to 20 or 30 let's see what looks good I really like 30 looks good you'll notice our float moved down because these were both set to 600 we're going to have to shrink some items down and I'll be honest I want to shrink down that map a little bit so let's go ahead and let's shrink down this map so for the aside let's take our width down we probably have to go down 60 there you go at least 40 let's go down to like let's go to 40 so at 540 it fits we got to tell this map to shrink down to 540 so go ahead and click the map and inside here you look at the code the width right here let's see 540 that looks pretty good but we're also going to do some space here so maybe we'll take it down to 500 and then we can give this one a margin on the left so for the aside let's go ahead and we're going to make it 500 pixels wide and then on the left side we can give it a margin of 40 and that is your box model in action so notice we have our H1 our H3 we have our iframe and this is starting to look good we can style our tag so if I go to article for the H1 I can add add a new selector and I can go ahead and style this so we can go to text the fonts I've been using are the Gotham we can give it a good size it is H1 so maybe something like that and we could do the same for the H3 tag so come over here click on that H3 tag and again give us a new selector for the H3 and again we can Define that font family there are other ways we could Define all these font families if we wanted but this is an easy way to do it change the size bump it up that is looking really good very happy with it let's go ahead let's save all let's look at our preview uh we're looking very good I would like a picture here so we know the width of this is 600 so again we can jump back to photoshop and I can do this image so instead of cropping it I want to keep the same we can say file export export as and here we can actually change the width I can say 600 by 350 and I can go ahead and hit export and again we can call this Valley of the Gods and we can go and we can insert insert this image inside of here so if I wanted to I have a p there I could hit enter and we can go to insert image and we can before I think that's going to give me what I want and let's go ahead and let's put Valley of the Gods and there's our image and it's looking really nice now whenever you do images you should always do an ALT tag so this would be photo of the Valley of the Gods because you always want to keep those screen readers in mind for our paragraphs here we can also style those let's go to CSS designer add one more property whoops not a property sorry add one more selector and let's go ahead and let's define the font family for this text in this case we'll go back to that Baskerville and I could modify sizes I know you guys know how to do that so let's go ahead and save and let's take a look at our website this is now starting to look really nice really professional we have this we have our nice hero image we have our text and now it's time to just style the footer so let's go ahead and let's add the footer so the footer is going to be nice and simple we're going to make a footer and then we're just going to put a copyright statement and we're going to finish it off so to add the footer we can click at the very bottom or we can click on Main and we can say insert footer and we want to do this after so at the very end of the document we now have our footer again you guys should be pros at this you know to go here add a selector you can just call it footer you definitely want to give it the correct width the width would be 1,200 we can add a height on this one I think I'd like to do 300 and I would like to give it a background color the background color I would like something similar but darker there we go so now if we scroll down we're starting to get it we got to get it in the middle can't forget that go back to layouts set the margin for the left and right to Auto and so there's our footer again we can do a padding for the footer as well and I think I would so let's go ahead let's do them all together let's do that padding and I think we liked 30 so on this one since we're defining the full width we have to take 60 off the width so our width now becomes 1140 those math con and our height would actually be 240 if we wanted to keep it that 300 so there we go we have our nice item here we might want to add a padding down on the bottom of this box tuo we worry about that in a little bit for our footer tag let's go ahead and let's insert let's insert a paragraph so our paragraph We are going to go ahead and we are going to give credit to the Valley of the Gods so I'm going to go ahead and grab this so I'm going to go text text from Valley of the Gods by Wikipedia is licens under and oops spell licensed correctly so is licensed under CC by sa 4.0 and I just know this by heart because I've been working on this so we're going to put a hyperlink on Valley of the god so go ahead and select it click link hit enter and now we have a link on that piece of text I want you to set a Target to blank that way it goes to a new page we are going to make a link just to Wikipedia so go ahead and grab just the first section of that link and again we can link it right here and again I would like you to Target it to a new web page and finally to make this comply you should have a link to the CC by sa4 and that would be this link right here so I would copy go back give it that link whoops select link there we go and again I would like you to Target that to a new blank and this second line here I want you to go ahead and put design by your name and I want you to put this as your email address so to do an email address you go mail to and then your email address and that's it quick easy we've made the text and the footer if we want to style our footer text again we hit this I'm not going to do the a so just the P's and let's go ahead and let's give it we can use our Gotham we can make it smaller there we go there's my text design looks like I have an extra space I'll get rid of that if we wanted to we could add a logo we could add different things if I wanted to fix this right here I would probably just add an extra paragraph space at the end would be the easiest way to fix that and let's go ahead and let's look our live preview we have a beautiful website we have buttons we have a hero image we have our Valley of the Gods we have an image and we have a nice footer so yes I know it's long I know it's kind of arduous to get through it but that is the connection between coding and Dream Weaver Dream Weaver is here to make it make it easier because you can point and click and find different things um the Dom or document object model is very very easy to help you select so if you take your time you could quickly and easily once you get used to it make a web page for yourself so use these skills and good luck