Tech Support Gone Bad
A New Way of Learning
And then you want to actually press OK to insert the Div Tag. Now a new thing will popup and it’s going to be named site_layout.css. You just want to hold CTRL S; save it then close that and then you want to hold CTRL S to actually save the main.HTML file and I am going to preview to show you guys why we set that background color. Now as you could see; first, if you remember at first when we centered it, you saw that both sides of the thing were white but now since we set that background color to black, now both sides of it are black so it just makes it look better. So next we are going to make the actual content like the middle of the layout editable. So you just want to do the same thing. Now I’m going to set the magnification of it to 100% and then I’m just going to click on the place that’s the main content should go. So in the middle where the main content should go, you just want to click right there and so you just repeat the same thing. Now a couple of things you need to remember; this is why I told you we need notepad. You need to remember the source file which is the image. The image for mine is main_24.jpeg. Now, I’m just going to copy main_24 and paste it into notepad and then you want to remember the width of it. My width is 610; so I’m just going to copy that. Press enter a couple of times in notepad and paste 610 and then you want to remember the height of it so mine is 612 so I’m just going to right click and press copy and then paste that into notepad so we just need to remember those 3 things for the nest step so that’s the reason why we need notepad. All right so next, we want to go back to Dream Weaver. So we want to go back to Dreamweaver and with that image selected, you want to just press delete. Yes, I know I just deleted it. I’m not crazy; that’s what you’re supposed to do. And next you want to enter another Div Tag. So click on that button again. Now this time the “enter” is going to be at insertion point and you want the ID to be site_layout.content. Now also, just to let you guys know, you want to repeat this step that I’m showing you, you want to repeat for everywhere that you want to make editable. So for example, if you want to make all these separate buttons editable or if you want to make for example, the place that the copyright is supposed to go editable or anything like that; you wanted to repeat that step and you know how we named it site_layout_content? Well for example if you want this little area right here were the copyright should go; if we want to do the same for that, you just press delete and when you enter the Div Tag, you want to make sure the ID says site_layout_copyright and the same for everything else. For example, if you have 2 content boxes, you want to name it site_layout_content1 and then for the second box you want to name it site_layout_content2 and the same for everything.
But for today, I’m just going to show you guys how to make the main content area editable. It’s the same content except since I want to keep this tutorial in one part, I’m just going to do it for one part. So I’m just going to make the main content area editable. So again, you should have the main content area deleted right now—that main image and you should have pressed insert Div Tag already. So as I said the insert is going to be at insertion point and the ID is going to be site_layout_content. Then you want to press New CSS file and remember you want to repeat all these steps for everywhere that you want to make editable. So those selector, you want it to be #site_layout_content wnd you wanted the “define in a new style sheet file,” press OK and that thing will pop up telling you to save it again. So you want to save it as site_layout_content. And you want to make sure the save as type is a style sheet file and in print as sees, it just says; “.CSS;” press save and then this should come up—the options for it; it should come up.
Now you want to set a background color. I’m going to set it as green and you want to set the background image. Now this is where notepad comes in, as you could see the background image is main_24. The only reason we’re using notepad is to remember all that information. Then you want to go back to Dream Weaver, press browse, and go to the images folder and click on that main file. So its main_24 and you just want to click on that image and press OK. Next, you want to go back to that category area to the left of this box and click on that box category. So you want to set the width and he height to the width and the height of that image. So again, back to notepad, it says right here that the width is 610 pixels; so just type in 610 for the width and make sure to keep it at pixels and then the height is 612 so; type in 612 and then just press OK. And then press OK again to actually insert the Div Tag and again the new thing will pop up saying site_layout_content.css; you want to save that and press close and then you just want to save your main.HTML file. Now as you could see right there where the content is, it’s going to say content for site ID for ID, site_layout_content goes here now you want to delete that and now you could just type in whatever you want and that’s pretty much it and remember, for everything that you want to make editable, you want to repeat that step and that’s pretty much it.
And also, why I told you guys to name this file main.HTML is because from now on, if for example, if I want to make 5 pages on my website, you want to open up the main file right? So, you open up Dream Weaver and open up that main file. So next, you want to just edit what it says right there. So for example, for the homepage, I’m just going to type in homepage and go to file and click save as and save it as index and it’s as simple as that. Next you just want to open up main again. So see if you double click on main, it’s still going to be the same file then for example, the next page, I want to be tutorials, so I’m going to type in tutorials and just click file and click on save as and save it as tutorials and it’s as simple as that. So that’s what I like to name that file—main because then I just like to use that as a base or a template to create all the other pages of my website from and that’s basically it. Hope you guys learned something today and hope you guys get up your website and hope it works and it’s all great. So till the next tutorial. I’ll see you guys later.
Transcription by:
Scribe4you Transcription Services