Hey guys, today I am free computer tech guy, I gonna be showing you, how to create a website in Adobe Dreamweaver CS4 or CS3. This is tutorial 1. Now in this tutorial, what we need to do, open Adobe dreamweaver CS4 or CS3. And once you have that open, then what we gonna do is, we gonna put that download on a task bar, and then we gonna right click on a desktop, and then click on a new, click folder.

We gonna name that folder, whatever you name it, whatsoever it could be. So this gonna be an example. And then inside that folder, open it up. And once you get in, put a new folder inside of it and name it HTML. And open that up and put images. A new folder named Images. Close it and go into the Adobe Dreamweaver. And up here on top, you have your File, Edit, View, Insert, buttons on the left. But, we gonna click on this Site. We just gonna clicking the button right here, and we gonna click the first thing where it says New Site.

After you done that, where it says site name, put in, just put, like an example. And your local root folder, that’s where all your HTML documents will be stored. So we gonna click on this little folder over here, that’s for the browse button and what we gonna do, click on the desktop button, then click on example folder and then click on HTML folder. And then default images folder, we gonna select, we gonna click here and you should bring back, and then we gonna click images and then need to click select. Now if you do not have any http address, that is where your site is. So, yes that’s it for putting you local folder, so we gonna click ok.

Now you are left, and you should have this. First we just gonna go up to ‘Windows’ right next to Site button on top, and the we gonna de-select the insert. So this is look like just like this. Now what we gonna do is we gonna right click on where it says site, and it goes right up here, right above the images folder. We gonna right click on that and say, new file. We gonna name that index.html. And now you have to have it HTML and it has to be index. Lot of people name it home. But when a search engine such as Google, look for home, it wont look for home, it will look for index so it is index.html.

Then say i have a contact so contact.html. And so all of pages, i am just gonna make a couple. so like a contact, and then i am gonna make lest say links.html. may be links to other webpages. might have a music spot or may be like a juke box, you name it. jukebox.html. So, those are some of my pages. If you put some more in future, then you wanna click up there where you gonna keep getting new files, and instead new file, click on new folder. You gotta name that HTML. And inside that folder you just gonna click on index, then hold the shift key and click on the last one. And then click in the middle, it should be like this and then just drop in the HTML folder. And say update the list, it should look like this and then you can open it like that.

Same, after doing that, you gonna right click on the site and say new file, and say Markup.html. Markup is which where we gonna make our template for a website. So the template when we open it up should have look like this.

Ok so in next tutorial i am gonna be starting the layout of a website. This is been a free computer tech production, so go watch the next free tutorial how to start a new layout.

Tags: dreamweaver tutorials, download free dreamweaver tutorials, free online dreamweaver tutorial, dreamweaver video tutorials, dreamweaver free templates, adobe dreamweaver cs3

Tags

Dreamweaver Tutorials

Tags: dreamweaver 8 information tutorial, dreamweaver flyout menu, dreamweaver tutorial cs, free macromedia dreamweaver tutorial, dreamweaver navodila, dreamweaver cs3 tutorial

Tags

Dreamweaver Tutorials

Tags: dreamweaver 8 tutorials, dreamweaver 8 information tutorial, password tutorials for dreamweaver, dreamweaver cs3 navbar tutorials, dreamweaver navodila, navodila za dreamweaver 8

Tags

Dreamweaver Tutorials

Tags: dreamweaver mx tutorials, dreamweaver cs3 or tutorials, macromedia dreamweaver, dreamweaver tutorial, tutorial dreamweaver, dynamic tutorial dreamweaver mysql

Tags

Dreamweaver Tutorials

This video is regarding handling compound documents. In the past, compound documents were a little harder to work with inside a Dream Weaver. Not any more. After watching this video, you will be able to play with compound documents with a most ease. You can see the source code for a current file, the external style sheet of the file, the spry effects Java script and things like that without even saving the file.

If you’re like me, your web pages rely more on just one page for the final rendering. It’s not uncommon to have extra documents such as CSS, Java script and Some sating clues all combined together at run time to create my final rendered page. In the past, these types of compound documents done a little harder to work with inside a Dream Weaver.

To test layer and inter activity, you will have to predetermine a browser. To work on the related documents, you will have to remember which document was linked your page. Open it separately, make your edits and again, preview in the browser and as you see access gets more complex.

It can also be difficult to remember exactly which rule is stalling which element. Well I’m pleased to say that in CS4, Dream Weaver has built in functionality to make working on and previewing these pages intuitive and efficient. Live view, good navigator and related documents are going to become an indispensable part of view Dream Weaver work flow.

We start by taking a look at the wonderful new feature, Live view. Now here I have our counter dot HTML page open and although it may not look like it right now. This is a really cool page. We have on this page is we have a spry master detail region. Now spry is Adobe’s a jack’s library and typically using this spry element on the pages, it’s going to require an external Java script following may be an external CSS file. A Master detail region is no exception. I could test this on my browser if I want to preview layer internet activity but the new web –- integration, it’s a Dream Weaver all asked me to do it here now without havening to go outside of Dream Weaver.

Little bit more screen will stay. I’m going to go over to my panels and I’m going to claps them down to icons. Here we go. Now turn on live view. They’re going to my document tool bar and just beside the quotes Split and Design View Icons, I have Live View. So I click on that and now we see the rendering of the page. Wonderful! Well, what’s really nice is that I can also preview here my CSS based and Java script based interactivity directly in Dream Weaver, which is really cool.

Scroll down a little bit and I’m going to show off another nice feature of Live View. Let’s say you are interacting with your page and you decided that you want to freeze it at a certain location, you wanted to see exactly how it looked like in this particular moment of time. Well, if I go up to live view, I can click on a drop down menu and I can freeze the Java Script.

Freezing the Java Script means that when I click or hover over any additional element nothing really happens. It’s frozen at that spot. Really handy for working on a single state of a multi state item. So that’s really really nice. Now I can unfreeze that Java Script by either going back up to Live View or pressing F6 or option F6 keyboard shortcut to unfreeze it which is really cool.

Now after working with compound document, remembering and finding the specific CSS rules that drive that element can be time consuming and frustrating. The good navigator makes —- specific styles —. You may have noticed it but if I click on an element and I just sort of hang out there for a while, eventually this little icon comes up and then looks like the wheel that you used to drive a ship. That is the code navigator. Click on that.

It brings the code navigator up. Now the code navigator is everywhere. If you select an item and wait for a second or two, that’ll show up unless we have —– tells us all clicking will allow to show up now —- command option click. Since its into so many different places, I’ll show you some of other places just a moment, having an icon come up every single time you select something may be a little distracting after a while, especially once you’re seasoned with the feature so did you have a check box that allows you to disable the automatic icon coming up so turn that off and now when I select something, you don’t see the icon.

Now I noticed when I’m interacting with this that the selected items background and hovered items background is exactly the same. That could lead to a little bit of confusion so I want to go ahead and change that. That means a good navigator to isolate the exact rule that we’re going to use another new feature related documents to go and make it change. So I’m going to hold the Alt key down and I’m going to click once, for Mac, that’ll be Option, Command click. And when I do that, up comes the code navigator.

Now understand what I’m saying, all the rules that applying to the selected item in order of cascade they’re being applied. Can also see the external rules as well. Now the background color I can find on this master detail, master column selected rule. Hovering over the rules gives you a summery of the rule which makes it really easy to find the property you are looking for.

So I’m going to click once and I’m taken straight to that rule. Now you may have noticed how easy and effortlessly Dream Weaver displayed the appropriate CSS rule. That’s really cool. That’s another new feature related documents. It lets any first level top documents related to the current page and additionally, CSS files will display even if they are nested up with another documents. Very very nice.

You can see all the related documents to a file by looking underneath the tab of the open file. Here you can display the source code for a current file, the external style sheet of the file, the spry effects Java script; we can just go on and on. Now if you have too many to list in the document tool bar, you have a little drop down menu over here, it’ll allows you to access all of those.
Well, this was in the spry master detail that CSS and it’s the background color. Now let me just move right on over here, so we can see this change take effect. So let me go ahead and select another — and I’m going to make a little change to this rule. Instead of the background color I’ve got… now I’m going to change this to FF9. Now what’s nice is I haven’t even saved the external CSS file yet. But my view goes ahead and changes the preview for me. Isn’t that nice? That way I can decide on whether I like this before I committed to saving it or not. I’m going to go ahead and save it.

Now I mentioned before that a good navigator visit multiple places if you noticed looking encode view. The good navigators now on the coding toolbar can also find it up to the menu under the view. Good navigator. There’s also another keyboard shortcut for there as well and just to make it sure it’s located in every single possible place, also down on your tank selector as well, you can access it by right clicking and choosing Code Navigator from there.

So the folks today we want to make sure that no matter where you are working, you have the access to the code navigator. All right, switch back to design view and we can preview our finished page. Very, very nice!

Now, by combining Live view, code navigator and related documents together, you can accurately preview CSS and Java script based inter activity within Dream Weaver. You can edit specific styles with a single click and work on related documents without having to track them down and opening them separately.

I think you’ll find it’s I have that combining these features together will create a seamless work flow on working on your compound documents in Dream Weaver.

Tags: dreamweaver macromedia tutorials, joomla dreamweaver tutorial, free online dreamweaver tutorial, dynamic tutorial dreamweaver mysql, dreamweaver 8 tutorials, adobe dreamweaver cs3 tutorial

Tags

Dreamweaver Tutorials

Tags: download a free copy of dreamweaver, dreamweaver help, free dreamweaver, dreamweaver, dreamweaver cs3 or tutorials, dreamweaver macromedia tutorials

Tags

Dreamweaver Tutorials

With working with either typography or layout, it’s crucially important that you understand the different units of measurements that CSS allows you to use and when you use one over the other, when you discuss units of measurement CSS, there are 2 general categories. Absolute and relative. Absolute which can also be referred to as fixed units dealing in a fixed size, one that does not change based on any other factors. Relative units of measurement look for either apparent element or the user age in itself for a base value begin with. With those two categories in mind, lets take a look at the options available to you when settings sizes in your styles.

Points or units of measurement that are designed for print. They are in fact one seventy second of an inch. So, what is it? Translate to on the screen? Good question. You need another resolution to monitor set two as well as the operating system to filling in to that one. So, you should avoid using points for using on screen font measurement and restrict it to print style sheet. Inches and centimeters are again just what you think they are. They are useful for other media types but shouldn’t be used for on screen media. Ems are hands down the most popular relative measurement for on screen sizing. An Em is best described as being the equivalent of the size of a capital M for that particular font. So, saying one Em is almost equivalent of saying one hundred percent of that size. An Ex is equal to the X height of the specific font. The size of the font can change dramatically as font families are substituted so it should be used with care. Percentage values, they are pretty straight forward. A percent value sizes the text to a percentage of whatever value it would normally be. And pixels are based on the current resolution of the viewing device. Because it relies on the resolution of the user agent, pixels are sometimes referred to as a relative unit.

In truth, setting in to pixels fixes them at that size. There are several reasons to avoid using pixels for font measurement. Internet Explorer, prior to version 7, did not allow the on screen resizing of pixel based fonts. User of earlier versions of Internet Explorer will not to able to change their font size based on their own viewing preferences. Also, pixel sizes that might look good on a monitor might be far too large for the mobile environment. Pixel based font sizes don’t scale too well between environments so it’s best you avoid using pixels for font sizing when possible.

Lets experiment with these different units of measurement. We’re going to compare pixels to Ems, using these two paragraphs at the bottom of the screen. So, I have opened up the measurement that htm file found in the 07 01 folder and I’m just going to go over to my CSS styles and analyze that we have a paragraph with the class resize and another paragraph with resize too, so the top one is resize then bottom one with resize too. That’s good at in experiment with using pixels and Ems.
Over on the CSS styles panel, I’m going to click on the P resize class and I’m going to add a property by clicking on the add property link and I’m just going to add font size and you can type this in or you can pull down from the pull down menu, either way and we’re just going to go and make that one 16 pixels. I’m going to go and select P resize 2 and add a property to that and I’m going to type in font size again and this time, I’m going to go ahead and make it 1 Em. So, we’ve got 16 pixels for a size of the first paragraph, we’ve 1 Em for second paragraph. And we go ahead and save my file, and all preview that in my browser.

They’re both exactly the same size. Ahh, that’s due to the fact that the default text size for most browsers is 16 pixels. However, users can change that. People with vision disorders might actually make the font size much larger using a relative unit of measurement, means that font is allowed to scale up. So, I’m going to ahead and change my default font size. We can see here in my Firefox options, I’m going to go to content and I’m just going to crank that up, lets say, lets crank it up to 20 pixels. I’m going to click ok. Now this is the one set Em is allowed to scale up which makes that a much more usable size. As a general rule, Ems are the preferred unit of measurement for online type. As always there’re exceptions to this rule. All the versions of Internet Explorers simply prompts with font size values that are defined strictly as Ems. As a work around, most designers will size the body selector using a percentage and then define all other measurements in Ems. This seems to fix most of those Internet Explorer specific issues. Since font size is by and large inherited, it makes sense to carefully plan a sizing strategy for your site, pick of unit of measurement and take care to stay consistent throughout your styles.

Tags: dreamweaver video tutorials, free dreamweaver cs3 tutorial, dreamweaver cs3 and free tutorial, dreamweaver drop down menu, dreamweaver tutorial cs, beginner tutorials in dreamweaver mx

Tags

Dreamweaver Tutorials

The reason for this is file format. Those images are currently saved in JPEG format. The only worthwhile format in fact is PNG24. So, all the slides are saved in this format one by one and it gives desired result.

So, this shows the slicing we’ve already completed and you can see I have my logo sliced up here in the top left and the tile here, so, I don’t need this… this document any more a..m.. want to switch to a..m.. the original again and I think what I want to do then is a… turn off the background and stuff also I’m also going to get rid of this example and I’m just going to open up the… the original. So, these files.. we know that this layer sliced from part 1 is when we just saved, so I’m going to go back to the original layer, I’m going to open this one up.

Ok, so the objective here is to get it so these images can show up as transparent the rest of the way through. Now I’m going to go down and I’m going to turn off the gradient so you can see what I mean about the transparency. You can see here at the box that has the gradient in the background for the content, I can actually a.. m.. just slice this section out of that to a… to produce that effect, so I just draw a slice box which switch to the slice tool, click and drag across there… now I want to be careful obviously I don’t get any of the text. I want to slice for the Sony Ericsson on top there, along with the K790. Now this is good if you want to have any of web page, some kind of custom font. So, I am just going to zoom in there, now if I turn my background back on, I can get a better look of what I’ve grabbed here.

I’m just want to increase the height of that just a bit. Ok, and it looks good. It looks like a.. m… not getting any of this extra stuff at the bottom, I just want to be sure I am not getting any lines from that, ok? And here’s the guy I may want to have a look at, it’s right there, that looks good.

Ok? So, the other thing I need to get out is just the phone. So, I can use the a.. m.. top bar that is given me here, go all the way down. So, that way the top of that graphic matches the a.. heading. And there we have the entire phone image inside there as well. So, to get the transparent, it’s actually simply a matter of a.. turning off the.. the gradient in the back, to get out that. Now you could slice this all the way up to the top here a… not sure how necessary that is. Then I have to turn off the shadow and everything. Remember you can control the margin a… for the box here, once we get into building —- and CSS, it’s actually pretty easy to bump content downwards so I wouldn’t worry about it.

So, I’ve got all the slices I need I’m now going to switch to my slice select tool and by the way, a.. if you hold down your control key, you can change into the slice select tool at any time as well. So that’s a.. that works nicely. So you can see I just held down control and it switches. ok? So, I’m just going to switch to permanent exit, no need to draw any more slices.

So, I’m going to go to my third slice here. Obviously that’s how it’s numbered, and on the slice, I’m going to call that K790 header. Oops! Remember it’s going to be one word. Spacebar my mistake there. Ok? Go to this one, and this is my content tile. Bar should say content BG. Keeps me consistent with the other one. And, we’ve got the phone. So, K790 phone. And there we’ve named all our slices. So, my next objective is to go to my save for web. Actually I’m going do Save As first. — and I want to call this one since this is layers sliced, but I’m going to put on this one, under scroll transparent, and save that.

So what this tells to me is if I do have to adjust any of my slices I’ve got, Photoshop document, I can go back to it if there need to be changes made. So, that’s just the safer way to operate. Now I can do this, Save for Web and devices and you can see that I’m getting a white background and all these spots and it’s because it’s JPEG. The only worthwhile format for all of these slices in fact is PNG24. So, you just want to go through every single slice and set them all to PNG24. Ok?

Now — transparent all the way through. Now this guy here you can see is 81k. So that’s the biggest image in this whole layer. I typically a.. pass on this to students you probably don’t want to have a… all your graphics accumutively been over about a 100 kilobytes. So you want to try and keep within … at… within that range, so, this side or page rather so far is looking like a.. it’s going to stay fairly close to that. Ok, So, I’m going to hit a… that I’m done here — I’m going to save it. And by the way, the purpose of the done button is if you’ve made some decisions in the box here and then you realize you have to change something in your layers, —- good to remember your settings. If you hit cancel, you’re going to loose this accept this to PNG24, potentially whatever file format you switched it to.

Now, I don’t’ need to go in the images folder. It is going to produce an images folder like it did before inside the K790 folder so, it’ll add whatever images we send — to appear into that. So, I shouldn’t have to change anything, you can see it says Images only and it’s going to use all.. all user slices again, so, I hit Save. And there we are. Let’s have a look at er… our folder, and you can see I’ve got all my images inside that directory. Oh! Thanks for watching the slices tutorial for Photoshop and we will see you in the a… part 3 with the Dreamweaver section of this tutorial. Thank you.

Tags: macromedia dreamweaver, joomla dreamweaver tutorial, dreamweaver mx tutorial, navodila dreamweaver, dreamweaver 8 tutorials, dreamweaver download

Tags

Dreamweaver Tutorials