1.2 Visual Design Features

Hello! So in this first part of Dreamweaver: A Fresh Perspective, we're gonna look at some of the features and tools that are available to help us do design. Okay, so let's start Dreamweaver. So by default, we have panels arranged right. I like to kind of drag these on to the left when I get going and then you install a Dreamweaver, probably cuz I'm left-handed. Right, so we'll create a new file. Now we have an option of different types of file have created an h.t.m.l file. Let's get this one out of the way quickly. Dreamweaver does have a visual editor. It switches to that by default and you can switch between code view, the split d between live view and code view. And just live yesterday street buttons across the top. Because it has a live window doesn't mean you have to use it, you don't have to do design in this visual environment. However, it is really quite useful for jumping around the code quickly and to locate code to edit. So as I type these different titles, subtitles, paragraphs. As you can say as I click on them I can select them, I can delete them and I can edit them. So it can be a really useful little shortcut. As I'm a visual designer first and foremost I like to see something rather than just seeing code all the time. So the editor if I choose to use it lets me visualize my code at least a little bit. Sometimes I keep it zoomed out and smaller just so I can see a kind of navigation system of a long page, so I can click on the top or the bottom, and it will jump to me to the right piece of code. Otherwise it's just text and it's a bit dull. It has to be said that this live view isn't so good with more complicated layouts, once you get to a certain level of nesting of Divs and different layout techniques then the preview often ends up being nothing like the rendered page in an average browser. But it's still enough to give you some kind of context to jump around the code which is how I think it's best used. So I really like this little feature. I didn't notice it for quite a while so I'm not sure how long it's even been in Dreamweaver. As well as the handy browse option when you're finding images that opens up the dialog box which is useful if you can't remember what it was called. When you're back into the code. If you hover over the image file name, you get a little pop up preview, which is very handy and it shows you the dimensions. You can then also open the image directly into your photo image editor, which I think by default is Photoshop. So that opens it directly into Photoshop which is a big timesaver, very useful and the same happens when you are in the CSS facets if I create one of those the same image declaration when you start typing that. It's a sort of type of background image. Get a nice browse option again. Trace of the dialog. Suppose that a full reference for that file because I haven't saved the CSS file, that's why I'm seeing the file reference. They get, if I hover over, I get a preview in date dimensions and I can open directly in Photoshop. Which is very handy. Also if I go back onto the image declaration, I can right click and I can then select a different image using the browse option. Which can be a time saver if you get a lot of images and you want to use the preview inside the file browser to select them. You can also drag them directly in from the files Window. Which can be nice if you don't want to type in the image source. It's a nice little shortcut, although it does add in the width and height, which you may want to delete if you're not using those because you're using CSS to define those. Similarly, sort of these little touches that I really like, in a CSS file, when you start typing a color reference. First of all you get little color helper which opens up a color selection box which is really nice. Quite often I've had to go into Photoshop to use color palette droppers, and things to find colors that I want to use and that's quite handy, but also when you hover over that Hex value. You get little preview again which is really nice. And if you've defined a color you can still go back in and change the values including RGBA, because you got access to the opacity in the end slider, and it's very helpful. If you happen to get bored of looking at code, or want a different way of working, then the CSS designer panel allows you to visually edit your styling. This works in a similar way to a lot of the current trend of online designing code applications and things like Macor. So once you've got a few styles defined, I've only got one defined at the moment, if I'm on it I'd go to the all, I see all, CSS class is undefined. You get a bit more of a visual way of adding padding and margins. So you can change values and it will change all the values in that one, or you could change them individually and the same with padding. You can also change colors in a more visual way directly, get the same color. Option Palette as before which is, which is useful. And when you go back into your CSS file you'll notice that the styling has been updated pretty well. So this is a great feature, which I haven't used in a production environment, just yet, but it looks so useful. And that extract which lets you literally extract elements out of a Photoshop file in ways that I didn't think were really possible. So change of the layers, this is a default PSD that's included just to show you what's happening and it shows you sort of styles. Which are important to the Photoshop like all the fonts being used or the colors being used in each one of these. When you click on them shows you the color values and even gradients show all the CSS for the gradient settings. And you can literally extract these and copy and paste them into your Document. If I just go into the service, this is a PSD as I've said. So you can click on each individual element. There you see the CSS for that bit of text and each time you click on all elements, you see the CSS that creates them and you can copy and copy the text. The words on the page or the CSS behind the styling and copy them directly into your into your documents. So there's the text from that block there. I can copy the CSS into my CSS. And there we go. You can also drag images into the Live view. So here, if I just click on an image and put it into the Live view and you give it a name, there it is. Same with this one, so you just drag it in give it a name that you want it to be called in your HTML code. And then your say that the images have been added into the HTML and they should appear on your file list. Very nice. Very useful. So that's it for part one and in part two, we're gonna look at the coding environments in a bit more detail.