Building a Website Start To Finish
In this video I'm gonna show you how to set up your website in Adobe Dreamweaver...
Hey everybody, Greg Davis here. In this video I'm gonna show you how to set up your website using Dreamweaver.
In the first video we created the site design, all the images, and now we're gonna put the website together.
So, when you open Dreamweaver you're gonna see the START SCREEN as you can see right here. First off, we're gonna define a new Dreamweaver site.
I GO to my Files panel, CLICK on this drop-down menu, and CHOOSE Manage Sites
I CLICK on New
Ok, give your site a name, like yourwebsite.com. It won't show up anywhere it's just for you. I NAME it as "Site1"
Ok, and I need to show Dreamweaver where my local site folder is. And I've created a site folder back in the first video, so I just LOCATE my site folder.
"Site1" that was the name of my site folder. I CLICK on it, CLICK select, CLICK save, and Done
OK, now you can see my site folder opened up right HERE
And the reason why we do this is because the next time you open Dreamweaver, you don't have to browse your site folder again.
You just CLICK on THIS drop-down menu, and all of your website projects are gonna be listed here, you just select the site you wanna work on, and Dreamweaver opens up your site folder. So it's a huge time saver.
And if you wanna edit your Dreamweaver site, just CLICK on Manage sites, select your site, click on Edit and you can edit it. You can also create a new site, or remove a site. Ok, I CLOSE it.
And again, you can see my site folder opened up right HERE. There is my "fireworks" and my "images" folder that I created back in the first video. And I'm gonna store my web pages right HERE, so let's create a new html page.
I can click right HERE, or I can GO under File and New
I get this screen up. I need a blank page, html, and no layout. CLICK create
And now I have a brand new html page. I SAVE it
I save it inside of my local site FOLDER, and I'm gonna CALL it "index" (lower-case letters!)
And that's the main page of a website. So when you type in yourwebsite.com in the browser, or actually any website url without any extension, the browser will look for an index page inside of the site folder on the web server.
So the index page is the home page, but other pages like if you have a products.html page in your site folder, and you've uploaded that to your web server, it's gonna be available at yourwebsite.com/products.html
And if you have a folder in your site folder, then yourwebsite.com/thefoldername/ and then your file name. If you don't type in a file name after your folder name the browser will look for an index page in that particular folder as well. So that's how it works.
Ok, I CLICK Save, and let's talk about some html basics:
I GO to code view, so I can see the actual code of my page
The very first line is the DOCTYPE. XHTML 1.0 Transitional is the default doctype in Dreamweaver, and that's what the first line is about.
The second line is the HTML start tag, and down HERE there is the html end tag. Every tag has a start tag, and an end tag. And the end tag is designated with a forward slash, so this is my html end tag. And you have to keep everything inside of your html tags.
Ok, the third line is my HEAD start tag. The head tags are not visible when you take a look at a web page, but important.
Inside of my HEAD tags I have a META tag for the character coding. Utf-8 is the default, that's what most web servers use. And I have my meta end tag right HERE because it's a self-closing tag.
Ok, then I have my TITLE start tag, my title, and my TITLE end tag.
And then there is my HEAD end tag. Again, every tag has a start tag, and an end tag. And the end tag is designated with a forward slash.
Ok, UNDER my head end tag you can see a GAP. You know, the browsers render the code sequentially, and they don't care about the space between your elements. So you can add even more space if you want.
Ok, in the next line I have my BODY start tag. And everything that is actually visible inside of your browser for your page will be inside of your body tags.
I GO to design view real quick, and TYPE in 2 paragraphs.
Ok, BACK to the code, and now inside of my body tags I have a paragraph start tag, my text, then a paragraph end tag. I have an other paragraph, then there is my body end tag, and then there is my html end tag.
So everything that is visible inside of your browser for your page will be inside of your body tags.
And you can put as many tags as you want inside of a tag, but if you start a body tag for example, and then you start a paragraph tag, you have to close your paragraph tag first, and then you can close your body tag. So your tags can not overlap each other.
Ok, let's talk about how to position your content inside of a page.
Basically, we use div tags to layout a web page. We can also use tables, but tables create too much code, and we don't like that. Tables are great for data, but we use divs for layout.
So I GO to design view, and I'm gonna insert a div tag.
I FOLD OUT my insert panel.
If you can't find your insert panel, just go to your Window menu, and look for insert.
I CHOOSE Common, and Insert div tag
I insert it After start of tag BODY, that's all I have so far, my body tags.
And I can apply a CLASS style, or an ID style to my div tag. The only difference between class styles and ID styles is that ID is a unique identifier to an element. Therefore I can only apply an ID style to ONE element per page. So basically, I only apply class styles to my elements.
I NAME it as "firstdivtag" this is just a quick exercise.
I CLICK on New CSS Rule
It's gonna be a CLASS style, HERE is the name of the class style. It's designated with a period in front of it because it's a CLASS style. An ID style is designated with a hash mark in front of it.
Ok, I define my rule inside of this document only. Later on we're gonna use an external style sheet file, but this is just a quick exercise.
I CLICK Ok, GO to box
And I WANT my div tag to be 400px wide, and 400px tall
And I CHANGE the padding to 20px, all the way around, so same for all
I also CHANGE the margin, NOT same for all: Top:0, Right:auto, Bottom:0, and Left:auto
I've given it a margin-left:auto, and a margin-right:auto just so that I can center it. That's how you can actually center a div tag.
Ok, I GO to background, and I CHANGE the background color to grey (#999)
I GO to border, and I want a solid, 10px, black border all the way around.
Ok, that's it, I CLICK OK, OK again, and HERE is my div tag.
I SELECT it, so I can see my 10px border, and 20px padding. And I've given it a margin-left:auto, and a margin-right:auto to center it.
Ok, my div tag is 400px wide from THIS point to THIS point. So the padding and the border are not included in that, those are adding to my overall box size.
And since I had no content inside of my div tag Dreamweaver put THIS line in, but I can type in anything I want.
I just TYPE in 2 paragraphs.
Ok, I TURN live view ON, and now I can see how my page will look like in a browser.
You can also preview your page in a BROWSER, and you should check out your pages in different browsers to make sure that they look exactly the way you want them to look.
So go ahead, and install all the popular browsers on your computer, like Chrome, Firefox, IE, Opera, and Safari. And then CLICK Edit Browser List and add those browsers to your list.
Ok, I CLICK Cancel, and I have an Inspect button up HERE.
I TURN it ON, and now I can see the padding, and the margin on my different elements.
I just HOVER OVER an element like for example my div tag, and the blue view that you're seeing is the actual width, and height of the element itself. The purple is the padding, the kind of different blue is the border, and the yellow is the margin.
Also my tag selector down HERE tells me which element I'm mousing over.
Ok, I TURN live view OFF, and let's take a look at the CODE:
Here is my BODY start tag, and as I mentioned earlier everything that is visible inside of your browser for your page will be inside of your body tags.
After my body start tag, there is my div start tag. That's how I inserted it, after my body start tag. It has a class style applied to it, called "firstdivtag"
Then I have my TEXT inside of my div tag, designated with a <p> paragraph tag. A start tag, and end tag. THERE is another paragraph.
And then there is my div end tag, and my other 2 paragraphs that I typed in earlier. But these are outside of my div tag. Then there is my body end tag, and my html end tag.
And inside of my head tags, I have my css style sheet embedded. THIS is my style start tag, and THIS is my style end tag. Css is a language that works alongside html, and a css style sheet is basically a collection of rules.
I only have one rule inside of my style sheet: the CLASS style that I just created. It's called "firstdivtag" designated with a period in front of it because it's a class style.
And inside of my curly-braces I have all the properties and values for this particular class style. Just like I wanted: the background, the margin, it's all in there.
And it's pretty simple, too. There is a property, like the height for example, and then there is the actual value for it, but of course I can change it any time.
Now, there are 3 different ways of inserting css style sheets:
One way is embedded style sheet, just like this one. It's embedded in the page itself, and it's added to my HEAD tags.
The second way is an external style sheet file attached to the page. The benefit of using an external style sheet is that I can style a 1000 page website in just one place. All I need is an external css file, and I can define all of my rules in that file for my entire a website. And in my head tags, I only need a link to that css file so that the browser knows where to find it. That's what we're gonna use most often.
And the third way is inline styles. So around a particular tag like a paragraph tag, I can PUT:
<p style="color:#F00;"> And now my text is red.
So these are the 3 ways of inserting css style sheets. Again: embedded style sheet added to your head tags, external style sheet file attached to your pages, and inline styles.
You can use all 3 of those to style your elements, but if you style an element in all the 3 different style sheets, the values will be inherited from the more specific style sheet. The inline style is the most specific style sheet, so it takes precedence over the embedded, and the external style sheet. The embedded style sheet is second, and then the external style sheet is last.
Ok, this was just a quick exercise. I GO back, and DELETE my style sheet, and my content as well.
And I'm gonna put a website together using the images that I created back in the first video.
I INSERT a brand new div tag
Ok, I don't have anything inside of my body tags yet, and Dreamweaver is gonna insert it in my body tags anyway, so I just choose At insertion point, whatever.
I apply a new class style to my div tag, I NAME it as "container"
I wanna style it right away, so I CLICK on New CSS Rule
It's gonna be a class style, called "container" there is a period in front of it because it's gonna be a class style.
And now I create a NEW Style Sheet file, so I can style my entire website in an external css file.
I CLICK Ok, and Dreamweaver is asking me where to save my css file.
I CREATE a new folder. I NAME it as "style"
And I also NAME my main css file as "style"
Ok, it's a css file, I CLICK Save
And Dreamweaver is gonna create that css file for me. I can start styling my container class, and it's gonna be defined in my css file.
I GO to box, and I want my div tag to BE 950px wide, because that's how I sized my images. My background image, and also my header image is 950px wide.
Ok, I NEED a margin-right:auto, and a margin-left:auto so I can center my div tag inside of my body.
I GO to background, and I BROWSE my background image.
It's called bg_container just like the class style of my div tag. CLICK Ok
And my background image is a 1px tall image, which I wanna repeat vertically.
By default, a background image repeats horizontally, and vertically across the whole element. But my background image is 950px wide just like my div tag, so it can only repeat vertically. Therefore I don't need to tell the browsers to only repeat it vertically, which would be repeat-y, so I just CLICK away.
CLICK Ok, Ok again
And HERE is my container div tag. You can see my background image right HERE. It's a 1px tall image that repeats vertically.
And Dreamweaver put some text into my div tag, because if there was nothing inside of my div tag, then it would collapse.
And HERE is my style folder, and my style.css file that Dreamweaver created for me. If you can't see it yet, just put your cursor in HERE, and press F5 to refresh.
My style.css file also appears up HERE, because it's attached to the page.
Let's check it out, I CLICK on it
The first line is the character set. I don't really need this line, I could delete it, but whatever.
And HERE are all the properties and values for my container class. I can change anything here if I want to.
Ok, I GO to the Source Code of my index page. I SWITCH to Code view
And HERE is the link inside of my head tags linking to my css file. That's how the browser is gonna find it, because there is the actual path to my css file, which is relative to my document.
Ok, I GO back to design view, DELETE my text, and I'm gonna paste my header image in, inside of my container div tag.
I GO to my images folder, GET my header image, and just DRAG it over here.
Ok, your image must have an alternate text because if your image doesn't load for some reason, the browser will show the alternate text. And it's also important for search engines, so basically use a relevant, keyword loaded alternate text for your images.
If I sell a Dreamweaver course, I will TYPE in my main keyword like "Dreamweaver" and maybe "Tutorial" and "Header"
I CLICK Ok, and now my header image is right there inside of my container div tag.
Let's take a look at the CODE:
There is my div start tag, my image start tag, the source of the image, the size, the alternate text I just typed in, and there is my image close tag, because it's a self-closing tag, and then there is my div close tag.
Make sure you don't have a <p> paragraph tag wrapping around your image, because if you do, and you style your paragraph tag later, it's gonna apply to you image as well. And you don't wanna apply the let's say the paragraph margin to your image.
Ok, I GO back to design view, SELECT my image, and I INSERT a brand new div tag.
"Wrap around selection" because I need a header div tag around my image.
And I apply a new class style to my div tag, I CALL it "header"
I CLICK on New CSS Rule
It's gonna be a class style, called "header" and I define my rule inside of my style.css file. I CLICK Ok
I GO to box. And I made a background image for my header div tag, which is 950px wide, and 165px tall. So I MAKE it 950px wide, and 165px tall as well.
Ok, I GO to background, and BROWSE my background image. It's called bg_header, I CLICK Ok
And by default a background image repeats horizontally, and vertically across the whole div tag, but it's not gonna repeat now, because my div tag is 950px wide, and 165px tall, just like my background image. So I don't need to set the background-repeat to no-repeat. So I CLICK Ok, Ok again
And you can now see my background image right HERE. You can only see THIS small part of it, because my header image is inside of my div tag, so it overlaps it.
Ok, I'm gonna insert a brand new div tag to position my content below the header part.
I GO to Code view.
THIS is my header start tag, THIS is my header end tag. And I insert a new div tag right HERE after my header end tag. So my content is gonna be right below the header part.
I HIT my enter key, and I've got my cursor sitting HERE
I CLICK on Insert Div Tag
I insert At insertion point, right where my cursor is.
I apply a new class style to my div tag, I NAME it as "content"
I wanna style it right away, so I CLICK on New CSS Rule
It's gonna be a class style, called "content" and I define my rule inside of my style.css file. I CLICK Ok
I GO to box, and I MAKE it 800px wide
And I NEED a margin-right:auto, and a margin-left:auto to center it.
I CLICK Ok, Ok again, and there is my content div tag
I GO to design view, and PASTE my text in.
I'm gonna style this text in just a bit, but I GO to code view
And I need a brand new div tag for my footer.
THIS is my content start tag, so THIS very first is my content end tag. And I insert my footer div tag right after my content end tag.
And you know what, let's write some html code, so you learn how to do that as well. We need a div start tag, and you can cut and paste a div start tag from above, but let's type it in, it's no big deal:
<div class="footer"> Ok, I TYPE in some text because my div tag would collapse without content.
And all I have to do is CLOSE it off. This is my div end tag: </div>
I GO to Design view, and I can see my footer div tag right HERE
I GO to my style.css file, and I'm gonna style my footer class style.
I wanna define my rule right HERE. Actually, the order of your rules doesn't make any difference in css, so you can define it anywhere in the file, it doesn't matter.
Ok, I START out with a period because it's gonna be a class style, and it's CALLED "footer"
I HIT my spacebar, and I NEED an open brace. If you can't find it on your keyboard just copy from above. Ok, I HIT my enter key, and I'm gonna style my footer class style.
First off all, I made a background image for my footer, and it's 950px wide, 120px tall. So I want my footer div tag to be exactly 950px wide, and 120px tall.
I just PRESS my w key, and I can already see my width, my code hinting is helping me out. Sometimes you have to trigger your code hinting, all you have to do is press ctr,spacebar.
Ok, I SELECT width, and I just TYPE in 950px, I CLOSE it off, HIT my enter key
I TYPE in height:120px, CLOSE it off, HIT my enter key
And I need my background-image: I just BROWSE it, it's called bg_footer, CLICK Ok, and let's SWITCH to Code view, so you can see it better. I CLOSE it off, HIT my enter key
And I TYPE in margin-top: 70px;
And I also TYPE in text-align:center; So my text is gonna be centered inside of my footer div tag.
Ok, that's it, I HIT my enter key, and all I NEED is close-brace.
I GO back to design view, SCROLL down, and HERE is my footer div tag.
I just PASTE my text in it. There you go!
And I PUT my cursor inside of my text, and my tag selector shows me where my cursor is. It's inside of a paragraph tag, inside of my footer div tag, inside of my container div tag, inside of my body tag.
These are only the start tags. If my end tags were listed here, they would be something like: </p></div></div></body> in reverse order. Those are not listed here, but we know that every tag has an end tag.
Ok, now I'm gonna style my <body> tag. I CLICK on New CSS Rule
And the body is tag, it's not a class style, it's not an ID style, it's an actual tag. So I CHOOSE tag.
And I just SELECT my body. My body doesn't have a period in front of it because it's a tag.
Ok, I define my rule inside of my style.css file. I CLICK Ok, and now I can style my body.
I GO to background, and I made a nice fading background image for my body. I just BROWSE it, it's called bg_body, I CLICK Ok.
And I CLICK Apply, and now I can see my background image. The only problem is that, by default, a background image repeats horizontally, and vertically across the whole element. But if I CHANGE the background repeat to repeat-x, then my image will only repeat horizontal.
Ok, I GO to box, and I have a 15px margin on my body tag. It's basically there by default. In css everything has a default value, but I can change it.
I just CHANGE my top margin to 0, so I'm not gonna have that 15px margin above my header image.
I GO to Type, and I'm gonna define my font in my body tag. And it's gonna apply to all the text in my entire document, because everything is inside of my body tag, and styles can be inherited from parent elements.
I SET the font-family to Arial.
I'd prefer that they have Arial, but if they don't have Arial, I'll take Helvetica, if they don't have Helvetica, I'll take any sens-sarif. So that's what it means.
You can edit your font list right HERE, if you want a different font-family for the second, or for the third option, but I don't think it matters that much, because most browsers definitely have Arial. On the web, most people use sans-serif fonts like Arial, Verdana, or Helvetica.
Ok, I SET the font font-size to 16px
I could also set the font-color to black, but it's black by default, so I don't need to change that. In css everything has a default value, and I don't need to change that, unless I need something else.
I CLICK Ok, and my text is now Arial.
But I wanna style my text the right way, so I PUT my cursor inside of my very first paragraph, which is my headline, and in my property inspector, I'm on the html tab, and I CHOOSE Heading1.
Ok, my headline is now designated by an <h1> tag, and not a <p> tag anymore. And it's larger than my normal text because the <h1> tag has it's own default font-size in css, and it takes over the properties that I defined in my body tag.
I'm gonna style my <h1> tag in a second, but before I do that, I PUT my cursor inside of my second paragraph, which is my subheadline, and I CHOOSE Heading2
Ok, the Heading1 text is larger than the Heading2 text. And it's simply because it's more important. Heading1 is the main headline, Heading2 is the subheadline.
And about every 5 paragraphs you can have cross headlines. So THIS paragraph can be Heading3, and maybe THIS one as well.
Now, your heading1, and heading2 tags shouldn't be used more that once per page, but you can use Heading3, Heading4 as many times as you want, and you can go all the way down to heading6.
Actually, I never use Heading6, I use Heading3, maybe Heading4, and that's it. But if you need more different types of cross headlines, you can use those as well.
Ok, let's style our Headings. I start out with my headline. I PUT my cursor inside of it, and I CLICK on New CSS Rule
H1 is a tag, so I CHOOSE tag.
And I don't have to look for it HERE, because I have got my cursor sitting inside of my <h1> tag
And I define my rule inside of my style.css file. I CLICK Ok
I CHANGE the font-family to Impact. Actually, I have to type it in because it's not listed here, but it's a great font-family for headlines.
Ok, I also CHANGE the font-size to 46px
I GO to block, and I NEED a text-align: center;
I CLICK apply, let's see how it looks. Cool, I CLICK Ok. And now I'm gonna style my <h2> tag, but let's write some css code, so you learn how to do that as well.
I GO to my style.css file, I SWITCH to code view
And HERE is my h1 rule, so let's put the h2 rule right after that. I TYPE in h2, HIT my spacebar, and I need an open-brace, HIT my enter key
And I only CHANGE the font-size to 25px
If you are not seeing any code hinting, just press ctr,spacebar. Ok, I CLOSE it off, HIT my enter key
And I NEED a close-brace
Ok, I GO to design view, and I'm gonna show you all the ways to style your text.
I SELECT some text, GO to my property inspector, I'm on the html tab, and I BOLD my selected text.
There you go! Let's take a LOOK at the code: (of the index page)
And my bold text is now designated by a <strong> tag, a start tag, and an end tag. That's pretty much it. If I wanna get rid of it I can just delete my strong tags here in the code.
Or, I can GO to design view. PUT my cursor inside of my bold text, and on my tag selector I can SELECT my <strong> tag, right CLICK on it (or ctr,click on the mac) and if I choose remove tag, Dreamweaver will remove it for me. I'm not gonna remove it.
Let's see what else we got! I SELECT some other text
GO to my property inspector, html tab, and my next button is italic. I CLICK on it
And it works pretty much the same way as the strong tag. My selected text is now designated by an <em> tag, that's the italic.
And there is an underline tag as well, but it's not listed here simply because it's not recommended. Users can confuse it with hyperlinks. But if you need it, put a <u> tag around the text you wanna underline, and you can do that in the code.
Ok, my next 2 buttons are: unordered list, and ordered list.
I SELECT some paragraphs, like these 3, and I CHOOSE unordered list first.
Ok, my text is now designated by a <ul> tag, it's unordered list. And it also has <li> tags for list items, and you can see these bullet points in front of the list items.
I PUT my cursor in it, CLICK on List Item, and here I can CHANGE my list properties.
I can SWITCH to Numbered list, which is basically ordered list.
And I can style it, so instead of bullet points, let's say I WANT Alphabet large.
I CLICK Ok, and now I have large alphabet in front of my list items, and my list is now ordered list.
Ok, I change my ordered list back to unordered list. I SELECT it, TURN OFF ordered list, and TURN ON unordered list.
Ok, I PUT my cursor right HERE, HIT my enter key, and I can TYPE in my next list item
And if I wanna switch back to paragraph, I'll HIT my enter key twice, and I can TYPE in a paragraph
And if I HIT my enter key, Dreamweaver will start a new paragraph for me. Now, if I don't wanna start a new paragraph, I'll HOLD DOWN my shift key, PRESS my enter key, and I'll get a line break.
I GO to Code view, and THIS is a line break tag: <br />
Ok, BACK to design view, and my last 2 buttons are: blockquote, and remove blockquote.
Actually, I never use it, but I show you. I PUT my cursor inside of a paragraph, I CLICK on it, and now I have a <blockquote> tag wrapping around my paragraph tag, and my paragraph starts right HERE.
I can CLICK on it again to add more, or I can just REMOVE it.
And also I can style any tags using css. I PUT my cursor in one of my list items, inside of my unordered list
I CLICK on New CSS Rule
And I NEED a Compound selector, because I only wanna style those list items, that are inside of an unordered list.
But I ONLY need the ul li tags, so I CLICK on Less Specific, ONCE again.
And this css rule is only gonna apply to those list items, that are inside of a <ul> tag. So it's not gonna have an impact on my ordered lists, if I have any. I CLICK Ok, GO to List.
And here I can choose a list-style-image. And I wanna use my checkmark image instead of those bullet points. So I just BROWSE it, it's called checkmark, I CLICK Ok
I CLICK apply, and you can now see my checkmark image in front of my list items.
I GO to box, and I also NEED a margin-bottom:10px, and a margin-left:25px
CLICK apply, let's see how it looks.
Ok, it's good, so I CLICK Ok.
And this is how you can style your text by styling the actual tag in css. But if you wanna style a specific paragraph, or maybe just one sentence, you can apply an inline style to your text.
First, I create a new class style that I can actually apply to my text. I CLICK on New CSS Rule
I need a class style, so I CHOOSE class
Ok, it's gonna be a class style, so I TYPE in a period, and I NAME it as "yellow"
I define it in my style.css file, I CLICK Ok
I GO to background, and I CHANGE the background-color to yellow
CLICK Ok, and now I have yellow class style using a yellow background. And I can apply this class style to pretty much anything.
First, I'm gonna show you how to apply it inline. I SELECT some text
GO to my property inspector, html tab, and I have some text selected, so I APPLY my yellow class style to my selected text.
Ok, my text is now designated by a <span> inline tag, which has my class style applied to it.
I GO to the code, and HERE is my span start tag, THERE is my class style applied to it, and THERE is a span end tag as well.
I GO back to design view, PUT my cursor inside of my text, SELECT my inline tag, and if I choose none for the class style, Dreamweaver is gonna remove it for me.
Ok, so this is basically a span inline tag with a class style applied to it. But I can apply a class style to any kind of tag.
I PUT my cursor inside of a paragraph, SELECT my paragraph tag, and I APPLY my yellow class style to my selected paragraph tag.
Ok, I GO to the code, and you can see that my yellow class style is applied to my paragraph tag.
To get rid of it, I can delete the class style here in the code, or I can GO to design view, SELECT my paragraph tag, and CHOOSE none for the class style.
So this is how you apply a class style to pretty much anything. But if you don't wanna create a new class style, you can also style a tag inline.
I GO to Code view, and let's say I wanna style THIS paragraph. I TYPE in style, instead of class.
And now I can type in my properties, and values just like in css.
I TYPE in text-align:center; CLOSE it off, HIT my spacebar, and I TYPE in text-transform: uppercase; CLOSE it off
GO back to design view, and my text is now centered, and it's transformed to uppercase.
The problem with this method of styling is that if you wanna apply those specific properties to multiple elements, you will generate a lot of code. So only do this if you wanna style just one particular element, and you are not gonna apply those properties to anything else.
Ok, I GO to the code, and let's talk about the HEAD section, because there are a couple things we need there.
The first thing we need is a page TITLE.
I PREVIEW my page in a browser, I have to SAVE it, and you can see my page title right HERE
And it also appears in the search engines, so I GOOGLE let's say dreamweaver
Ok, you can see my organic listings, and the very first line HERE is the page title for each of these individual web pages.
And basically, you need a relevant, keyword loaded page title for your web pages, and it has to convey some benefit to get people click on your site
I GO back to Dreamweaver
And all you have to do is type in your actual page title right HERE, make it less that 70 characters. I PASTE one of my titles in, just to give you an example. And I sell a Dreamweaver course, so this title is relevant, and keyword loaded as well.
Ok, I also need a description meta tag, which can also show up in the search engines right below your page title, so it also has to be relevant to your page.
I wanna insert it AFTER my title tag. I GO to my insert panel, and down HERE I have my Head, I NEED a meta tag.
Ok, in the value field TYPE in "description" – don't misspell it!
And in the content field type in your own description. Make it relevant to your page, and put your most important keywords in it. It could be like a sentence, or maybe 2 short sentences. Again, I PASTE one of my descriptions in just to give you an example.
CLICK Ok, and HERE is my description meta tag.
I also need a keywords meta tag. The keywords won't show up anywhere, but I need them because search engines will look at it.
I insert it AFTER my description tag. I GO back to my head, and I NEED a new meta tag
In the value field TYPE in "keywords" – again, don't misspell it because it's important!
And in the content field, type in 3 to 5 comma separated keywords, that are relevant to your actual page. Again, I PASTE some of my keywords in, but this is just an example.
CLICK Ok, and HERE is my keywords meta tag, and my keywords for this page.
Ok, I also need a link to my favicon. The favicon is that small icon that appears on your web browser right next to the address bar. And I've created a favicon back in the first video, so all I need is a link inside of my head section, so that the browser knows where to find it.
I wanna insert it AFTER my keywords meta tag. I GO to Head, and I NEED a link
I BROWSE my image, it's called favicon, I CLICK Ok
And in the rel field, TYPE in "shortcut icon" – don't misspell it!
I CLICK Ok, and HERE is my link tag. HERE is the path to my favicon, it's relative to my document, and it's a shortcut icon, and the link tag is a self-closing tag, just like the meta tags.
If you check out your page in a browser now, in some browsers your favicon is not gonna appear. You have to upload your entire website to your web server, and then it's gonna appear.
Ok, I DELETE this gap, I SAVE my index page, and I GO to design view.
And I show you how to link one page to another. I just create 2 copies of my index page.
I SELECT it, PRESS ctr,d (or cmd,d on the mac) and I get a copy. I NEED 2 copies.
And I'm gonna name this one as "order.html"
I just SELECT it, PRESS my F2 key, and I RENAME it.
Ok, and the other one as "contact-us.html"
You can use either a dash, or an underscore to separate words in your file names. Either one is fine, but dash is more widely used.
Ok, I OPEN up my contact page, and I CHANGE the headline to "Contact US"
I GO to Code view, and I also need to change the title, description, and keywords, because each page has to have unique title, unique description, and unique keywords.
I only CHANGE the title now, to "Contact Us"
You can change the description, and keywords here in the code, I'm now gonna do that now I GO back to Design view, and you can put your content here for this page.
I OPEN up my order page
And I CHANGE the headline to "Order" – whatever.
I GO to Code view, and I CHANGE the TITLE to "Order" as well.
Don't forget to change the description, and keywords here in the code.
I SWITCH back to Design view, and I GO back to my index page, and now I'm gonna link my pages.
Down HERE in my footer, I SELECT my order text, and in my property inspector, I GRAB my target, and POINT to my order page.
Ok, THIS is now a link, and my text is now designated by a <a> tag because it's a link.
I SELECT my Contact Us text, and POINT to my contact page.
Also if I choose target BLANK, it allows me to open my link in a brand new browser window. I'm not gonna do that now. I SAVE my index page.
And basically, THESE links are relative links, because they are relative to my document. If you wanna link a different web site, you can put the absolute url here.
But inside of your document use relative links because those are actually shorter, and also if you change a file name later, for example if I CHANGE my "order" page to "order-now"
As I HIT my enter key, Dreamweaver prompts me to update my links. So I can update my link, and I'm not gonna end up with any broken links. I don't update it now, and I CHANGE it back to "order"
Make sure your Dreamweaver site is opened, because otherwise Dreamweaver can't update your links, and also you have to save your page.
Ok, I COPY the content inside of my footer, and I'm gonna update my other 2 pages.
I GO to my contact page, and PASTE it in. (I just pressed ctr,v)
I GO to my order page, and update it as well.
Ok, I GO back to my home page
And all of your individual web pages should link back to the home page as well. Mostly because of search engine optimization reasons, but also because of usability reasons. Usually the company logo is the link to the home page, but I'm gonna link my header image.
I SELECT it, and I could put my absolute url HERE, but I just TYPE in a forward slash, HIT my enter key, and my header image is now a link back to my home page, whatever it may be.
Now, when you link an image, your image will automatically get a border. I PUT my cursor somewhere else, so you can actually see it.
Right HERE I have a border on my image, and I wanna get rid of it, so I SELECT my image, and CHANGE the border to 0, HIT my enter key, and my border is gone.
Ok, I need a link to my home page in my other 2 pages as well. So I GO to my contact page, SELECT my header image, TYPE in a forward slash, and 0 for the border.
I GO to my order page, SELECT my header image, forward slash, and border: 0
I GO back to my index page, and I'm gonna style my footer.
I FOLD up my Insert panel, SELECT my footer class style, and down HERE I can see all the properties and values for my footer.
I can change the values here, I can add property, or I can delete, or disable properties.
But I just DOUBLE-CLICK my footer class style, and bring up my css dialog box.
I CHANGE the font size to 14 pixels because I don't need such a big text inside of my footer.
And it's gonna take over what is defined in my body, because it's more specific. You remember I set the font-size to 16px in my body, and styles can be inherited from parent elements, but THIS property is gonna take precedence over that, because it's more specific, it's for my footer specifically.
I CLICK Ok, and I wanna style my links inside of my footer.
I PUT my cursor in one of my links, CLICK on New CSS Rule
I NEED a Compound selector, because I only wanna style those links that are inside of my footer.
But I DELETE my container class, or actually, I just CLICK on Less Specific
And I only style those links that are inside of a paragraph tag, inside of my footer class style. So this css rule is not gonna effect my regular links anywhere else on my web site. It's only gonna apply to those links that are inside of my footer.
Ok, I define my rule in my style.css file, CLICK Ok.
I SET the color to black, because I don't like the default blue links.
And I don't want underlined links either, so I CHANGE the text-decoration to "none"
I GO to box, and I also need a margin-right:10px, and a margin-left:10px, so my links are not gonna be that close to each other.
I CLICK Ok, and my links are now black, and not underlined.
But if somebody hovers over my link, I want it to be underlined, so people know that it's a link. I still have my cursor in it, I CLICK on New CSS Rule
And I NEED a Compound selector, because again I only wanna style those links that are inside of my footer.
I just DELETE my container class, because it doesn't make any difference. Everything is inside of my container div tag.
And I wanna style my hover links, so I NEED a colon, and I TYPE in "hover"
Now if you CLICK on THIS drop-down menu, you will see that you have link, visited, hover, and active.
Link is the link, visited is the link the user already clicked on, hover is when somebody hovers over the link, and the active is basically the hover link for your visited link.
You can style all 4 of those if you want, and if you do, make sure you put those rules into your style sheet in the same exact order as they are HERE.
So in your css file, the link rule comes first, then visited, then hover, and then the active. Usually, the order of your rules doesn't matter in css, but in this case, it does, so keep them in the right order compared to each other.
Ok, I only style my hover links, so I CLICK away, CLICK Ok
And all I NEED is a text-decoration:underline, CLICK Ok
I TURN live view ON, and now I can see how my page is gonna look like in a browser.
And my links are working perfectly, I HOVER over them, and they turn underline.
Ok, I end this video now, because it's getting too long. I hope you enjoyed it. See you in the next video, and we keep working on this site. Good bye!