With an example for giving the demo this tutorial shows how to create a file based upon the template that you have created and edit the text and images in it. With clear and easy instructions this article explains you the complete procedure very very thoroughly so that you don’t make mistakes.

Templates are a unique feature within Dreamweaver allowing a web designer to create a single design and then use that design on several different pages. When that base design is changed the pages based upon that design also change. That created template will begin with any design or any page within our site. Here I have got a company page which is a page that I have already built out but I am going to need to build multiple pages for each of my navigation entries and they are all going to share the same base design. So we will begin after I have completed the creation or design process for the page, initial page. We will begin by going to our File menu and choosing as save as template.

Here I am able to give this page a name. Since this is our company page, we will call this company and hit save. Now I am going to be asked the links to all of the images and CS files so I will now do that. And now you will notice that in my file panel that I have company.dwt. This dwt file is a Dreamweaver template file.

Now from here I can begin the process of deciding what elements of the page are going to be unique and which elements are going to be changed by the individual pages that they are going to be based upon. That makes sense. So I am going to do this by doing what we call an editable region. Now obviously something like the text here is going to be something that I ant to change. So I am going to select all of this paragraph here and say that this is going to be an editable region. I will do that by going to my template section of my insert panel and choosing to create an editable region. I will be able to give this a name.

I will call this text content and click ok. When we base pages on this template, we are going to be able to modify this area of the text. Of course, we may or may not want an image so we are going to define this image what we call as an optional region. So as we create pages based upon the template I can choose whether or not I want the image to occur. We will call this page image. How’s that for an original name? And we are gonna choose to show this by default. Now under our advanced tab we can even add additional parameters or even turn on and off other options or regions of the page based upon whether or not we have chosen to show this particular element. Clicking ok. Finally if we are gonna change the element or the image itself we want to give page a new image so we can also choose without knowing anything about placing images on the page we can choose to modify this particular attribute of the image tag.

So I will choose the attribute to be editable an I am going say the src or the actual location of the image is what we want to make editable. I can choose to give this a label. So if someone doesn’t realize what this is I will call this image location. I will say what type this is. I will say url because we ar going to be pointing to some text or pointing to an element and exactly what that default is. Now when I have done all of this I will click ok. And now we will see that the image itself has disappeared because now it is simply a place holder for whatever image we decide upon. With this then will look over to the left hand side of my page where I will notice that I have some navigation. Now these are links that will go to different sections of that site under the history subsection. However, what if I want to add an additional one. I don’t want any other formatting. Therefore, this entire entry in the data list and what I am going to make this is what I call a repeating region.

This is going to allow me to add on additional elements without disturbing formatting elements. We will call this menu entry and click ok. Finally I want to be able to change this text so I am going to choose the text itself which is the entire link there and make that editable just as we did before. We will call this menu link and click ok. At this point we have created a template that has individual content areas for editing as well as the ability to turn on and off areas of the page or add additional elements to the page without disturbing the formatting.

Tags: adobe dreamweaver cs3, how to use dreamweaver, free macromedia dreamweaver tutorial, dreamweaver mx, dreamweaver download, adobe dreamweaver

Tags

Dreamweaver Tutorials

One of the biggest problems while dealing with web pages is to print that web page. Just take this page that we have open in Dreamweaver CS3 and see how it looks inside of the browser. While into the browser of course, first we are going to see the exact same page as we saw over in Dreamweaver.

For this particular case, this is using the – framework for Dreamweaver CS3 to display XML based data. When I go to print this page you will notice that the print preview shows me a page that will look nothing like the actual web page that we were looking at. Now we are going to use CSS to actually style a page that will look good when we print it and give us all the information that we actually want printed. To do this we are going to make sure that our style rendering tool bar is open. We do this by simply right clicking in our tool bar and choosing style rendering. Now this feature was introduced in Dreamweaver 8 and by switching to my print media type, you are going to see that the page renders very similar to what we just saw in the browser.

In other words with no styling what so ever, because all of our style sheets have been defined for use only when we are using the browser to view the page. To create a CSS style sheet for print we will first begin by choosing File->New and then creating a blank CSS file. Once we have saved this page we will save it as our print pages in our CSS folder. We will call this Events_print.css. Next we return to our index at HTML page and open our CSS panel. In the CSS panel we will use the link icon to attach a style sheet and we will attach that very same events_print.css file that we just created. But under the media type pop up we will choose print. Now we will click ok. Of course we see no change to the actual page itself because we are yet to define any styles.

Let’s begin by changing the way that this — looks. You can see that it is defined as a link so it is appearing as a blue underline. We are going to change that behavior for printing. We will click upon our new CSS style rule and choose to allow Dreamweaver to specify the actual id for that particular item and then choose the events_print.css file where we are going to place that new CSS rule. Clicking ok we can go through and fill out exactly how we want that to appear. Let’s choose Verdana. Let’s take off the underline. Let’s make sure that it’s a nice black color for printing and we will make it. Now while the key to working with a print style sheet is to remember that printers don’t work with pixels. Instead they work with points.

So we will choose points. Clicking ok you can see that our title has in fact changed. Now these links here in this div we don’t actually need these. So we are going to choose to remove them. I am gonna select the entire div and then once again choose to create a new rule here inside of the print CSS style sheet. We will go to our block section and choose the display pop up. Or we will choose none. And this will remove that entire element from the page for the purpose of printing. Now of course we could continue on perhaps doing the same thing for this, removing it by simply choosing once again block-> display none and ok. Now this events text we want to perhaps even position differently because one of the advantages of being able to redefine an entire style sheet for simply printing is that I can even move elements, change their position on the page. So we will take this entire div and once again we will choose to create a new rule in our print style sheet and this time we are going to first style this a little bit nicer, make it a little bit larger perhaps.

Once again – applying changes along the way but then under the positioning tap, I am gonna choose to position this absolutely. So an absolute position element I am going to place it. Let’s just start off wit may be 65 pixels down from the top of the page or again using points so that I know that my printer is going to understand that and perhaps we will move it in another 65 points from the side of the page. Clicking apply we can see that it has begun to move. Now of course that’s too far down so I am going to move that up a little bit. Let’s say 25 and some where in there is about where I would like to appear.

Clicking ok, finally I am gonna go down to this information, image and other information that I don’t really need on the entire printed page. So once againI will select that entire div and choose to remove that. Once again through the block-> display none section, and now I have got a very compact page, maybe even I would like to change the width of this table so we will choose that as well. Choose the table and under the box section we will just change its width, let’s make it oh I don’t know say 400 pixels, change to points, apply that and see that’s gonna be about good. But we wanna move it above on the page just a little bit spout in some padding on the left hand side and again and let’s try the same 65 points that we used earlier for the other element. And we will click ok and save. Now we will go to preview this page after saving our style sheet. We are gonna preview this page in the browser and we will do so. Oops and I noticed that my table dint move over. That’s probably because I had not chosen the proper element that I wanted so let’s get that content element padding there.

So we will add a little bit of padding on the left hand side again applying there you go moving that over, clicking ok we will save our events_print.css file. Go back to our index page and preview this in the browser. Make sure that we have loaded up a new version of the page and preview this in the browser. Make sure that we have loaded up a new version of the page. Choose our print preview and you can see that our page now looks completely different than it did before. And the elements are beginning to appear here as we had laid them out on the print style sheet. Of course, nothing has changed on the actual browser page. And we can see that by using the actual style rendering tool bar to take us back and display the page just as it would inside the browser. Of course we could continue this process to finish the layout for a print media type. Even for hand held media type as well as other media types supported by CSS.

Tags: dreamweaver tutorial video, dynamic tutorial dreamweaver mysql, wright dreamweaver, free online dreamweaver tutorial, dreamweaver templates, macromedia dreamweaver 8

Tags

Dreamweaver Tutorials

This video will guide you how to use this amazing feature on a particular webpage. So, enjoy the video.

In this video tutorial we gonna talk about what is called the pseudo class selector. The pseudo class describe the state of particular element on your page and isn’t based on something that can be, determined looking at the source code of a document. Pseudo class is attached at the end of the other selector types, to assign a stall, that happen only when an object is in certain state. The most common types of pseudo class and one we use more often than any other are the link, visited, hover, and active pseudo class. These set of classes are most often applied to links or A tags.

A common rule using pseudo classes to remove underlines from links, when user hold his or her mouse over the link. Now if you recall back in the movie, when we say page property, we actually create it some pseudo class rules, so only you didn’t know they were pseudo class rules. So if we go look at our style sheet, w see these styles here. these are actually pseudo class rules. Just take a link for an example. Here is the A tag is a type selector, it’s a tag, so if we were just defining an anchor tag, we just create a type selector within A. But because it’s a follower of a colon link, the colon link, just like a colon visited, colon hover, and colon active here are all the pseudo classes at the end of that selector.

I mean these rules are only activated in certain situations. In this case when it is an unvisited link, a visited link, when the user rolls the mouse over the link and when the user clicks down on the link for active. this is the most common type of active pseudo class that you will find. And just as a side note when you apply this particular set of pseudo classes they should always be displayed in this order. Because of the cascading nature of style sheets if you had hover first, then active, then visited, then link; your links might not behave the way you want them to. They should always appear link, visited, hover, and active. Some people like to use the pneumatic device of love hate-LVHA to remember that order. But pseudo classes are not always just for setting this basic type of link.

In the examples we are going to take a look at, we are going to use pseudo classes to create some more sophisticated navigation on our page here. Because currently the links – on the side of the page here are just regular text that have underlines under them and we have changed some colors. But we wanna make them look like buttons. And we can actually do this just with cascading style sheets. We don’t actually have to go into an image editing program and create image buttons. We can create buttons with cascading style sheets. So let’s come in here and we are going to create a new style. For the select its gonna be advanced. And in this case we are going to type the pound sign – sidebar because this appears in the sidebar area.

Remember we created the id for the sidebar in the movie on id selectors. We are going to add a. Again this can be called a descendant selector because in this rule we are selecting all anchors or links that are appearing inside the sidebar table cell. We are going to make sure that this is a current style sheet. We will click on ok. And in the type category here we are going to check none meaning we don’t want any kind of decoration. We don’t want an underline or an overline or anything on this text. But we are gonna change the color. Let’s come in here into the color field and we will type 474F49. Move over the block category list here and from the display field here we are gonna choose block. Now there are lots of choices here.

By setting all the links to be block level elements that ensures that each link reserves space in the document and all the anchors will stack up on top of each other. If the anchors were left as an inline element, which is what they are by default, so you could select inline here without seeing here any kind of change. All line up in a row which is not the effect we want. I want all of my links to be on their own line. So we are choosing these to be block level elements. Essentially block level elements reserve space, which means nothing else, could sit to the left or right of the element.

Inline elements on the other hand don’t reserve any more space than it takes to display them which is why in this case “history” is followed by “from the“ on the same line and then to go to the next line on the fields and then – types appear on the same line. We want them all to be on separate lines. Okay a couple of more things to do here. Let’s go over to the box category. And we are gonna keep the same for all selectors here. I am going to type in 8. is gonna be applied to the padding for top, right, bottom and left around each of my links. And we are also gonna – a margin of in this case 10 pixels. So basically setting the value for the padding adds some space around the text inside the anchor which will make it look more like a button.

Adding a margin around the link ensures that they are all nicely spaced out and their borders aren’t going to be up or touching each other. Now let us determine what these buttons are gonna look like. Let’s go over to the border category. And we are going to uncheck same for all of these because I just want a border on the top and bottom of these buttons. So let’s choose solid for the top, let’s make it one pixel and in this case we will set a color of CED2B6. And I am going to do the same for the bottom.

Make it solid, one pixel and the bottom border will be the same color as the top just like so. Let’s just add some visual separation between the unless the users know where the hotspots are where they can click. Let’s click on ok and keep an eye on these links and watch what happens to them. Pretty cool. Now each of the links is surrounded by a dotted line because Dreamweaver now sees them as block level elements. When we actually preview this page in a browser we won’t see these dotted lines. They will look a little bit different. But before we do that, let’s do one more thing. Let’s set up a hover state for these buttons so that they will actually change the appearance slightly when we roll our mouse over them.

So let’s create another rule and with advance selected we are gonna type pound sign – sidebar again followed by a. But this time the pseudo class of hover will follow that. Ok so the hover pseudo class is gonna change the background color of the links when the user hovers his or her mouse over the link. So click on ok. And let’s go back to the background category. And we will choose a color for the background for when the user hovers the mouse over the link and we will call this FBFCF9. And that’s all we are gonna do here. We are just gonna have the background color change when we roll the mouse over the link. Click on ok.

Just make sure we save our style sheet. And while we are in here you can see there’s the descendant selector we created there. And here is the pseudo class style we created. So let’s preview this in the browser. Refresh and there are our links. And you just wanna roll over them and there are these nice roller effects. This is really incredible if you think about it. We didn’t have to create a single image for this. If we took just plain text, wrote a couple of CSS rules for them and now I have these very nice looking buttons over here on the sidebar. So that’s all there is to CSS rollovers.

The process is simple but the payback is amazing. You can create complicated navigation without using a single image, which cuts down on bandwidth and page load time and also makes your pages much easy to maintain. If I decide to add a new link or change, the text of a link there is no need to create or edit it in a new image file. So we have covered a lot of information about CSS in this chapter and hopefully I have given you an idea of what CSS is capable of. We will definitely be working more with CSS in the upcoming chapter but again I encourage you to check the CSS training on the specific chapter on .com in my training library and find a lot more information and find a lot more about what CS is capable of in Dreamweaver.

Tags: dreamweaver cs3 layout tutorials, dreamweaver free download, dreamweaver templates, dreamweaver, dreamweaver tutorial, dreamweaver 8

Tags

Dreamweaver Tutorials

It also tells you which option is better to use and how to add text in place of the image. With a simple and stepwise explanation, you can learn how to add images. This article also provides an example with the help of which it explains the entire procedure to you.

There are two main ways of adding an image to a Dreamweaver page. You can either use insert image or you can drag and drop. To insert an image you can either use the insert menu, insert image or in the insert panel go to the common section and here you will find the images icon and you can either click on the icon or click on the drop down menu to choose image. Here you navigate to the images folder, find the image that you want. A preview of the image is displayed for you and you can click ok. Whenever you insert an image, if Dreamweaver’s accessibility options are activated, which they should be, you will be asked to insert the alternate text.

This is a description of your image, which helps to increase the accessibility of your site. For e.g. here we are on Google and you can see we have the Google logo. If I switch off images by going into Firefox’s ToolsOptions, and in the content area, switch off the option to load images automatically, and someone might do this if they were using a very slow connection to the internet and were finding it difficult to get anywhere because of the time it takes to download images.

You will see now, that if I hit the refresh button, the Google logo disappears but there is still a piece of text that describes the logo. Alternate text is also essential to assist any one who is using a screen reader to navigate your web pages. The screen reader relies on the alternate text to give a description of the image to the person browsing your site. So it is very useful that Dreamweaver displays this window for you. And you could just type in a short description of that particular image. Okay, so that is the insert method. That’s undo and let’s look at drag and drop.

You can use the drag and drop technique from two places. The files panel and the assets panel. To make either of these visible go to the Window menu and choose files or assets. To drag and drop an image onto the page from the files menu, find the image and simply drag it into the appropriate section of your page. Enter your alternate text and click ok. Let’s undo and let’s look at the equivalent in the assets panel. The assets panel is basically a database in which Dreamweaver keeps a record of all the various types of assets that you have available within your current site. And this applies not just to images. As you can see, there are several categories of assets that Dreamweaver will keep track of. And if you want to reuse these assets on several different pages, the assets panel offers a very convenient way of doing this.

When adding an image by dragging and dropping it onto the page the assets panel offers two main advantages over the files panel. First of all, as you can see a preview is displayed as you click on each image and secondly it doesn’t matter where within your site the image is located. Dreamweaver will find all images in the current site and display them in the assets panel. As your site gets larger and you have more and more images, you should get into the habit of hitting the refresh button, which just enables Dreamweaver to update its list of images and make a note of any changes that have occurred such as deletion of images, replacement, or change in the name of an image.

When you hit the refresh button Dreamweaver tracks all those changes and updates the preview. Another thing about the preview is that as you increase the preview area, you get a larger preview. To add the image to the page, you either drag the preview or the file name and drop it into the appropriate area of your page.

Tags: tutorial for dreamweaver, cs3 dreamweaver tutorial free, macromedia dreamweaver 8, dreamweaver cs3 and free tutorial, dreamweaver drop down menu, wright dreamweaver

Tags

Dreamweaver Training

Table of contents for How to Create jump Links in Dreamweaver

1. How to Create jump Links in Dreamweaver
2. How to Create jump Links in Dreamweaver Pt.2
3. How to Create jump Links in Dreamweaver Pt.3

Again, it really doesn’t matter what you name it but it is another one of those places where you should not use space as a special character. And The Flickr, make it easy for me to remember what it is.

Click ok. This is one of those little things that DreamWeaver puts in there that lets you know there’s something on the page that is not going to be visible. So, that funky little yellow anchor will not appear when you look at this page in a browser but it’s there so that you know where the anchor is and that it was set correctly. You can turn that off in preferences if you don’t like it. But I kind of like the anchor once to show because that way I can see where my anchors are. Let us set a second anchor for Shutterfly so that we can create a couple of links. Click ok.

My anchor appears automatically. Now I go upto the top of the page to where I have got the words Shutterfly and Flickr and I wanna link this to that anchor down below. This is another time where I find this link option appears more useful and I will show you why. When I click here, and I come into link look at that my little anchor has appeared right here. So I have to do is click the link and highlight Shutterfly, so I am going to click the Shutterfly anchor. Click ok. And this will now link to that place lower on the page. I can highlight Flickr and type pound Flickr down here, make sure you put the pound sign if you are going to type that in manually.

But again I find it easier to just click link and because they save your anchors in this dialog, I like to use this dialog to set those. So those two are linked to lower on the page. So the final thing we are going to preview this page in a browser and test all those links and make sure they really work the way they are supposed to. So again, the best thing to do is always to save your work first. If you don’t Dreamweaver will prompt you and make sure that you have saved the page. So this time I am going to preview in Firefox, just to see how the page looks in different browsers.

It’s always good to test your work in multiple browsers. And I am going to expand this to just fill the screen so that I can see what I am doing here. Now I have set a few links on this page. So let’s see what happens. I set a link to Shutterfly. Ooh look it jumps right back down to Shutterfly. Let me see if that link to Flickr works. Click on Flickr and it brings me right to Flickr.

In case you didn’t see the video in part 1 of this series… here it is again.

Tags: dreamweaver tutorial insert multimedia, dreamweaver cs3 serial, free ecommerce templats dreamweaver, cs3 dreamweaver tutorial free, tutorial dreamweaver, dreamweaver free download

Tags

Tricks

Table of contents for How to Create jump Links in Dreamweaver

1. How to Create jump Links in Dreamweaver
2. How to Create jump Links in Dreamweaver Pt.2
3. How to Create jump Links in Dreamweaver Pt.3

Another kind of link you may have seen on the Internet makes it possible for you to jump from one place on a page to another place on the same page. You can also use this trick to link from one page to a specific place on another page.

I am just going to create links from the top part of this page to a lower part to show you how it works. So first, I am going to scroll back up to the top of this page. You will notice that in my opening paragraph I mentioned Shutterfly and Flickr which I have descriptions for down below. So, I am going to make it possible for people to link it immediately from here down to that lower explanation. The tricky thing about jump points is that before you can set a link to a lower place on a page you fist have to put an anchor there, so that the browser knows where to go on that page.

So I put my cursor where I want my anchor and then I go up here to look it’s an anchor. And then I click on the anchor and now I am going to give this a name.

In case you didn’t see the video in part 1 of this series… here it is again

This is part of a series of posts, you can read the rest of it by clicking on the links for the Table of Contents at the top of this post.

Tags: dreamweaver key, macromedia dreamweaver, dreamweaver 2003 tutorial, adobe dreamweaver cs3, dreamweaver, dreamweaver cs3 navbar tutorials

Tags

Tricks

Table of contents for How to Create jump Links in Dreamweaver

1. How to Create jump Links in Dreamweaver
2. How to Create jump Links in Dreamweaver Pt.2
3. How to Create jump Links in Dreamweaver Pt.3

The following article helps beginners work with Dreamweaver. It is a lesson, which gives detailed instructions on how to use Dreamweaver. You may have seen links while visiting various websites or viewing webpages. Some links take you from one part of the page to another part on the same page while some take you from one page to another. Ever wondered how to create them.

This video teaches you how to create links on a single page using Dreamweaver. A very helpful tutorial on Dreamweaver, which makes learning easy with lucid instructions.

Tags: dreamweaver mx how to, adobe dreamweaver, wright dreamweaver, dreamweaver tutorials, joomla dreamweaver tutorial, dreamweaver mx tutorial

Tags

Tricks

Table of contents for Dreamweaver tutorial - Dreamweaver Panels

1. Dreamweaver tutorial - Dreamweaver Panels
2. Dreamweaver tutorial - Dreamweaver Panels Pt.2
3. Dreamweaver tutorial - Dreamweaver Panels Pt.3

Another feature of panel groups is that they contain in the top right, a panel menu. The contents of the menu obviously depends on the particular panel you are currently working on, the one that’s currently active.

So here you can see the options that related to behaviors if we move down to the file section, the file panel is currently activated in the file section. And when I got to the menu I get options related to the file panel such as New File, Copy, Paste etc. Another nice feature is that you can simply click here to completely hide your panels and obviously click on the same arrow to reinstate them. At the bottom of the screen, you will find exactly the same arrangement.

When I click, I have currently got the same section hidden. No I haven’t. The section itself is open but the Properties panel is closed. I said earlier that Microsoft’s toolbars is Adobe panels. In fact, DreamWeaver has a foot in both camps. Under the View menu, right at the bottom you will find that we have toolbars. And we have four toolbars: Insert, Style rendering, Document and Standard.

Those of you who come from a Microsoft background will get a good deal of reassurance by choosing Standard and making the Standard toolbar visible and here you will see it contains some familiar options very much along the lines of Microsoft.

In case you didn’t see the video in part 1 of this series… here it is again.

Tags: tutorial for dreamweaver, macromedia dreamweaver 2, dreamweaver website templates, free dreamweaver templates, dreamweaver flyout menu, curso flash dreamweaver

Tags

Dreamweaver Tutorials

Table of contents for Dreamweaver tutorial - Dreamweaver Panels

1. Dreamweaver tutorial - Dreamweaver Panels
2. Dreamweaver tutorial - Dreamweaver Panels Pt.2
3. Dreamweaver tutorial - Dreamweaver Panels Pt.3

Floating palettes are a feature of almost every modern program. In the Microsoft programs, for example we have toolbars, which can be made visible under the View menu. In the Adobe product, which obviously includes DreamWeaver, these toolbars are called panels and they are available under the Window menu.

You will notice that the Window menu contains a workspace layout option. If you choose Designer, you will find that the floating palettes appear on the right and if you choose Coder as we have here you will find that they appear on the left. The panels are arranged in the panel groups and each group has a name. To open a group you click on its name and you can then see the panels that the panel group contains. In this case, the CSS group contains CSS styles and AP elements.

And as you can see you simply accelerates a particular panel by clicking on its name. If you are not sure which group contains a particular panel remember you can always go to the Window menu. So if I go to Window and choose behaviors, behaviors is in the tag panel group and therefore the group opens and the panel is activated.

In case you didn’t see the video in part 1 of this series… here it is again

This is part of a series of posts, you can read the rest of it by clicking on the links for the Table of Contents at the top of this post.

Tags: dreamweaver key, dreamweaver cs3 and free tutorial, dreamweaver portland, navodila dreamweaver, joomla dreamweaver tutorial, free dreamweaver template

Tags

Dreamweaver Tutorials

Table of contents for Dreamweaver tutorial - Dreamweaver Panels

1. Dreamweaver tutorial - Dreamweaver Panels
2. Dreamweaver tutorial - Dreamweaver Panels Pt.2
3. Dreamweaver tutorial - Dreamweaver Panels Pt.3

The following article helps beginners work with DreamWeaver. It is a lesson, which gives detailed instructions on how to use DreamWeaver for creating and locating panels or toolbars. It tells you how to work with different workspace layout options, select, and open a group of panels.

It also tells you how to work with the View menu and that this menu is similar to Microsoft’s View menu. The View menu in DreamWeaver consists of panels similar to those in the Microsoft’s View menu. A very helpful tutorial on DreamWeaver, which makes learning easy with lucid instructions.

Tags: free dreamweaver template, macromedia dreamweaver, dynamic tutorial dreamweaver mysql, macromedia dreamweaver 2, curso flash dreamweaver, dreamweaver mx tutorials

Tags

Dreamweaver Tutorials