Creating basic HTML page elements with Dreamweaver

Creating basic HTML page elements with Dreamweaver


Now I can go and create my home page. so I say create a new HTML document and Dreamweaver is asking me what kind of
document I want to create. I’m just creating a plain HTML
document. I can leave these at the default for now and just create This is my blank web page. I’m in “Split View” where I can see half a window showing me what my web page will look like and half the window shows me the HTML code that underlies this design. So to start the design, I’m gonna go back
to my wireframe. and really at this stage I’m keeping it extremely simple I’m just setting up page divisions for all the main elements of my page. First, I have my header which contains a few things like my logo and my title and stuff but it also contains my top menu, or navigation then I have my content section and finally, I have my footer. The footer also contains a navigation, or nav for short, along with some other things So back in Dreamweaver, every page element is expressed using what we call HTML tags. A tag is basically a pair of angle brackets
with a keyword inside such as. Notice when I click onit highlights this, and it also highlights this one,. Most HTML tags come in pairs: an opening tag and a closing tag So within, the page has a head, soandand then body:andAll of our visible content—text, background, colors,images—is going to go into the page body. Most of the content within the head
is invisible, but it’s supporting content that really helps the page. Our visible stuff all goes in body. So notice when I just click in the ‘design’ section, my
cursor which is flashing here is right here betweenand. Any content that I add here will automatically go into the body section of my code. Dreamweaver knows how to do that so I don’t need to worry about it. I just need to come in here and start adding my page elements and this part is really simple. First I’m going to start with the header and it’s easy to add a header. Just place
your cursor in the body, and then go to “Insert”>”Header”. Dreamweaver is asking me a few options where do you want to insert it? I’m leaving that to the default, which is “at insertion point” it’s also asking me for Class
and ID. We’ll get into what classes and IDs mean later, when we study CSS (Cascading Style
Sheets) for now, we don’t need to worry about this See what happens. Notice Dreamweaver
added a little box, a dotted box, and some words: “content for new header tag goes
here” in your code you see there’s a

tag and a

tag so there’s an opening and closing header tag and inside that is “content for new header tag
goes here” Now looking at my wire frame I want my header to contain this text:
“animation and stuff by sunny kharbanda” so I’m gonna go and type that here you notice I typed it in the design view
and the code automatically updates. Any changes I make in either one of these views will automatically update the other one These two are always in sync, but it’s so
much easier to work in the design panel So that’s my header next I’m gonna add a section which will
hold my homepage content To do that is quite simple; I bring my cursor down here below my header and click once. Look in my code: my cursor, this grey line is appearing after the header ends but it’s still inside the body. How do I know it’s inside the body? Because it’s before the closing body tag this is the closing body tag. my cursor is before the closing body tag which means it’s inside the page
body. So I’m in a good place to insert my section. if my cursor was here this would not be a good place
to add my section because I don’t want my… thumbnails and stuff to be inside my header So all you have to be careful about is: where is my cursor? don’t worry about anything else Once again, to do it the right way, Im going to move my mouse down here below my header, Click once, notice my cursor is now
outside my header but still inside my page body and now I go up to “Insert”>”Section” Once again, Dreamweaver asks me all these options I know that I clicked in the
right place so I can say “At insertion point” Click OK, and there you go. Dreamweaver has added my second section And again it’s just containing some dummy text that says “content for new section tag goes here” Eventually I’m going to replace that with
all my thumbnails so maybe let me replace this After the section, I have my footer so
I’m going to click below my section Again, notice my cursor is after the section ends but before the body ends. So this is a good place to insert my footer. So I go up to “Insert”>”Footer”. once again leave all the options at the default, and click OK. The footer appears, and it says “content for new footer tag goes here” so in my code, within mytags, I have my

tags my

tags, and my

tags so these are the three main sections of my page there’s only one more thing that I will do for now before I save and upload my page and that is, I know that my header contains a navigation menu, or nav, for short my footer also contains a navigation
menu so I’m gona insert those One in my header and one in my footer To do that, I’m gonna click here at this time So I’m clicking inside my header. Notice my cursor is inside my

tag and that is where I want my nav to go. So it’s after the text that says “animations and stuff by sunny kharbanda”, which is the title of my
page, but before the header ends. So this navigation will appear inside my header now I go up to “Insert”>”Navigation” And again, I will just leave these options at the default and click OK. Notice what Dreamweaver did it added my nav, and it’s inside my
header as the code shows. there’s the opening header tag, some text, the opening navigation tag, closing navigation tag, and then the closing header tag. So my entire navigation or nav is contained inside my header I’ll do the exact same thing for my footer.
so I go up here, click inside my footer Notice my cursor is inside my footer
and then I just “insert”>”navigation” click OK—I’m just leaving everything at the default, and that’s it if I want I can go in and say just to tell them apart and that’s all I’m really doing at this stage. I’m gonna go ahead and save this file. Now, this is important: My home page needs to be called index.html. My server expects this to be the name of my home page. In fact, when somebody goes to my website, my server will look for a file called index.html and that file will be displayed to
the visitor. It’s that specific. so I need to save it as index.html. I’m keeping it all small letters because some servers are very particular about capital letters and small letters, including our UH server so keep the whole file name in small letters. I’m gonna save it under “web site files” since I’m working in my portfolio website Dreamweaver knows that this is the default place to save my web pages If I’m not… if I happen to be in some other folder where I don’t wanna save my file a quick way to come back to the website folder is click on
“Site Root.” This means the root directory or root folder of my website. When I click it, it comes back to “web site files”. That’s the correct folder, and I can go and save. Now this file has appeared under my site folder. The file is saved and the next
step is to upload it to the web. How do I do that? First, I need to make sure I’m connected
to my web server, to my site. Here is the button to do that. I click
this, Dreamweaver logs in and now I’m connected. Now all I need to do is
click the up arrow which is to upload or “put” files to the remote server. Now this
will actually take this HTML file I just created and transfer it to
the web server. Before I do this, let me show you what my site looks like. Now this is what my site looks like because I freshly set it up and it doesn’t have
any content yet. I go into Dreamweaver So to upload the file I can just select the
home page by clicking once, or I can right-click, and say “select all” which is a
good habit because when we want to upload all our files—our entire site, we
want to select all and then upload. Right now I have only one file so it makes no difference if I select all or I just click this once Then I click “Put files”. I just
okay this message, and Dreamweaver has uploaded my web page to the internet! So I go to my browser, refresh the page, and there you go! the simple web page that I just created
is now up on the internet for all to see!

Leave a Reply

Your email address will not be published. Required fields are marked *