dreamweaver « Video Training

Posts filed under 'dreamweaver'

Dreamweaver CS4 Tutorial Video

case-disks1 Dreamweaver CS4 Tutorial Video – Free Preview

Adobe Dreamweaver CS4 Training Video
This tutorial series gives you everything you need to know to take control of Adobe’s latest offering of its web development software. Each expert-led video lesson is presented in a user-friendly format, based on practical working files and a teaching method based on showing you and not just telling you what you’re supposed to do. Suitable for beginner and intermediate users, the course starts with the fundamentals, getting you absolutely comfortable with CS4’s basic functions and new user interface before moving on to the advanced tips and techniques that will help you design, build, and launch professional quality applications and documents for the web.

Web History: The Old Compromise
Once upon a time, if you wanted to design a website from scratch you had a choice to make. Either you could buy the latest books for HTML and JavaScript and hack away in a text editor, or you could use a WYSIWYG (What You See Is What You Get) visual editing program and piece it together like a Powerpoint presentation.
In the first situation, you had control over even the smallest elements of your project, but the learning curve was steep, there was constant switching between your project and web browsers, and it took forever. With the visual editors, the program took care of the coding for you, but your design options were limited, and the code notoriously sloppy: full of technical inefficiencies and frequently noncompliant with web standards. Years after most web designers had begun using CSS to control the layout of their web pages, the WYSIWYG clients were still using the cumbersome method of inserting invisible tables and padding into the user’s documents.

Dreamweaver CS4: No Compromises Necessary
Adobe Dreamweaver CS4 settles any debate. While it began as a basic WSIWYG program in 1997 with many of the pitfalls mentioned above, Dreamweaver has evolved into a mature piece of equipment for anyone serious about web design.
First and foremost a tool for professionals, Dreamweaver CS4 has the robust feature set today’s web designers and programmers require. With its new interactive Live View feature, both the code and the results are in full view side-by-side in separate panes, with the live rendering powered by the excellent open-source, standards-compliant WebKit engine. As the web has become a major platform for applications, Adobe has beefed up Dreamweaver’s support for Ajax and JavaScript frameworks, and has integrated Subversion open-source version control and Adobe AIR authoring support.
Since acquiring Dreamweaver parent Macromedia in 2005, Adobe has focused on integrating the program with its award-winning software line. In Dreamweaver CS4 (the second official release as part of Adobe’s Creative Suite), the user interface has been changed to improve consistency across the suite. Building on CS3, Adobe has increased Photoshop integration further with its support for Smart Objects, giving web programmers who focus on design even more control over their graphics workflow.
Adobe Dreamweaver CS4 combined with the powerful training our tutorials provide is the perfect solution for those who want to be on the cutting edge of today’s web.

Add comment December 6, 2008

Dreamweaver Tutorial – Beginners HTML

Dreamweaver Tutorial videos for users who prefer to learn visual at their own pace. Using practical working examples and clearly presented lessons you will find that learning even the most complex aspects of Dreamweaver is as simple as following step-by-step stages Dreamweaver CS3 Tutorial Videos .

Quick recap

In the last beginners HTML tutorial we learnt that HTML is made up of tags. These tags are enclosed in angular brackets and determine the layout and structure of your webpage.

We made a basic webpage with all of the required HTML that you will need on every page you ever write. Remember – all your tags need a matching closing tag, and it is important that you get the tags in the right order. Look back at the last article if you need a reminder.

This Article along with all coding examples and images can be donwloaded in zip format

HTML heading Tags

Your webpage is no good without any content. So, starting from where we left off last time, let’s add some headings and some content.

To define headings in HTML we use the <h1> tag. This stands for “Heading 1” – there is also <h2>, <h3>, etc, right the way down to <h6>. The smaller the number, the more important the heading is and the bigger it will be displayed. So, for example, you could use <h1> for your main headings then <h2> for your sub-headings. See below for the code from our last article with some headings & text.

<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>First Heading</h1>
<p>Some introductory text</p>
<h2>Sub Heading</h2>
<p>Some specific text relating to your first sub heading</p>
<h2>Second Sub Heading</h2>
<p>Some more text</p>
</body>
</html>

If you look at this in your browser you will see something like the following:

Let’s make it look better

The page still looks a bit dull, so we’ll add some colour and also learn to change the font.

There are two ways to do this. First we’ll look at the quick and dirty way then we’ll learn the proper way! Let’s make the H2 headings (the sub headings) blue, and change the font to Comic Sans MS. For this we’ll need the <font> tag. We’ll also need something called attributes, which we haven’t seen before. These control a particular property or option relating to a tag. Look at the example below and it will all make sense!

<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>First Heading</h1>
<p>Some introductory text</p>
<h2><font face=”Comic Sans MS” color=”blue”>Sub Heading</font></h2>
<p>Some specific text relating to your first sub heading</p>
<h2>
<font face=”Comic Sans MS” color=”blue”>Second Sub Heading</font>
</h2>
<p>Some more text</p>
</body>
</html>

You’ll see that in the two <font> tags we have used two attributes:

color=”blue”
face=”Comic Sans MS”

Always remember to use the quote marks, and don’t forget to close the font tags. Then open it up in your browser to check it worked.

See what happens if you take one of the closing <font> tags away – have a go. You’ll find that the whole page, starting from the opening tag, is shown as blue Comic Sans!

The proper way – CSS

CSS stands for Cascading Style Sheets. Imagine that you had a website with 20 pages each with a few H2 headings, and you decided you wanted to change the font and color like we just did. You could easily have 50 <font> tags to write – this would take for ever and also there would be a high chance of you making a mistake somewhere along the line. The font tags that we used in the last example don’t follow the new, strict XHTML mark-up, so why did we show it? Well lots of websites still use them and it’s important that you have an understanding of both present and past versions of HTML mark-up.

CSS allows you to set the style – font size, colour, bold, and lots more – for more than one area in one go. Each of these controllable options is called a property, and whatever you set it to be is called the value. In the example below we will set all H2 headings to be blue and in Comic Sans MS font. All CSS goes inside the <style> tags as shown.

<style>
h2 { color: blue; font-family: Comic Sans MS; }
</style>

As you can see from above, within the <style> tag the word h2 is followed by curly brackets. Then we have the name of the property we want to set (color), then a colon (:), then a space and the value for that property (blue), then a semi-colon (;). You can repeat this for as many properties as you want to, then finally we need to close the curly brackets.

The style tag is not part of what is actually displayed on the webpage, so it needs to go within the <head> tags, like so:

<html>
<head>
<title>Page Title</title>
<style>
h2 { color: blue; font-family: Comic Sans MS; }
</style>
</head>
<body>
<h1>First Heading</h1>
<p>Some introductory text</p>
<h2>Sub Heading</h2>
<p>Some specific text relating to your first sub heading</p>
<h2>Second Sub Heading</h2>
<p>Some more text</p>
</body>
</html>

You’ll also see in the code that I have deleted the <font> tags as we no longer need these. Open it up in your browser and check that it works – it should look something like this:

A challenge

Can you repeat the above for H1 tags? Let’s try and make them red, a bit bigger, and also in Comic Sans MS. The only clue you get is that the property that controls size is font-size, and the value you need to use is 250%. We’ll explain this in a moment. Feel free to read on when you’ve got it.

The answer

Easy? Good! You should have something like this:

<style>
	h1 { color: red; font-family: Comic Sans MS; font-size: 250%; }
	h2 { color: blue; font-family: Comic Sans MS; }
</style>

We could also have used an exact size like you might in Microsoft Word – e.g. “font-size: 16pt;” (meaning 16 points). However, think for a second about how people access the internet. Some are on handheld PCs, laptops, or even mobile phones. People who are partially sighted might have their browsers set to increase all font sizes to make it easier to read.

By using an exact size you would mess all this up – people on their mobile phone would find your heading not fitting on the screen, and people who are partially sighted would find your heading the same size as the rest of the text.

By using 250% as the size, this simply means 250% times the default text size on the page (i.e. the size that your main content is displayed in, without any heading tags or CSS to change the size). If your main text was size 10 this would be size 25.

Take a look at your page in your browser. It should now look like this:

There’s more…

Look back at our original reason for introducing CSS. It was to enable you to change the font, colours, etc of all of your headings across your entire website.

At the minute we only have one page, so that objective is fulfilled. But as soon as we add more pages, you’ll need to duplicate the CSS text at the top of each one. Then if you need to change it you’ll have to alter it on every page. Better than changing it for every heading, but not good enough.

So, let’s use something called external CSS. Make a new file in your editor and put the code from inside the <style> tags in it. You don’t need the actual tags. Then save this page as “style.css”. Remember, like in the last article, you will need to choose “CSS” or “All Files” from the file type box to make this work. Make sure you save it in the same folder as your HTML file.

Then, in the HTML file, take out the entire style section (starting with <style> and finishing with </style>), and replace it with this:

	<link rel=”stylesheet” type=”text/css” href=”style.css” />

What do you notice that’s unusual about that tag? There’s no closing tag. On a very small number of tags like this, there is never anything that you could put “inside” it, so a closing tag wouldn’t make sense. However, to satisfy the HTML rules we must still close the tag, so we put a slash at the end, just before the closing angular bracket. There must be a space immediately before the slash. We’ll look at other exceptions like this as they come up.

Back on topic…open up the HTML page in your browser and it should look exactly the same as it did before, but you now know that all the style code

is stored outside of the page.

A few other style attributes

That’s it for now, but I want to leave you with a few other style properties and attributes to play with:

font-weight: bold;
font-style: italic;
text-decoration: underline;

The property names don’t make all that much sense but once you get the hang of them they will be easier to remember. See if you can use these in your headings.

Next time we’ll put our new external CSS to good use by making some other pages and linking between them.

Reference

<h1>, <h2>…<h6> – headings, smaller numbers are bigger or more important headings
<style> – encloses the CSS that controls the appearance of your page. You’ll need these attributes: (as well as the ones I gave you in the previous section to experiment with yourself)
- color: red;
- font-family: Comic Sans MS;
<link> – allows you to link your HTML page to an external CSS file.

I’ve not included the <font> tags in the reference because you now know a better way of setting fonts. It’s important for you to know the font tag exists – particularly as when looking at example code that someone else has written, if it is quite old it may well use <font> tags – but try not to use it if you can help it.

1 comment November 17, 2008

Dreamweaver CS3 Tutorial – Find and Replace

This Tutorial can be downloaded along with all the associated files from here

Dreamweaver CS3 Tutorial Find and Replace

Dreamweaver’s ‘Find and Replace’ functions will help you locate files and content, even replace bits and pieces should you wish. Perhaps you’ve spotted a spelling error within a large amount of text on a web page and you need to correct it. Perhaps you need to change every instance of the color #E600FF within a CSS document to #89FF00. Perhaps you need to change every occurrence of ‘>’ within a document to ‘>’, except ones which are parts of XHTML tags. In all these cases ‘Find and Replace’ is a huge time-saver and this break-down will help you get to grips with using it.

Opening the ‘Find and Replace’ dialogue

Press Command + F or go to Edit > Find and Replace.. to open the dialogue.

Find in: Select Menu

The first thing you’ll see is the ‘Find in:’ select menu. This determines where you’ll be searching and the options are outlined below:

Selected Text Searches within whatever text you have selected in the current document
Current Document (default) Searches the entire current open document
Open Documents Searches within all documents which are currently open in Dreamweaver
Folder..When selected brings up a file field allowing you to select a folder on your system in which to perform the search
Selected Files in Site If your ‘Files’ panel isn’t visible press F8 to reveal it. Select any number of files and folders within your current local site in which to perform a search
Entire Current Local Site Searches within every single file currently available in your selected local site (visible within Files panel)

Search: Select Menu

Secondly you’ll see the ‘Search:’ select menu. This determines in which elements of your specified file/files you’ll be searching:

Source Code (default) Searches within the whole source code of the specified file/files
Text Searches only within the text output of the specified file/files. XHTML markup/tags etc will not be included in the search
Text (advanced) Again, searches only within the text output of your specified file/files, this time allowing further specifics. With the options which will appear you’ll be able to include or exclude content from within certain tags (for example any text within a <p> tag)
Specific Tag Searches tags as specified in the option fields which appear. Search for tags with certain attributes and values and use ‘Action:’ to alter these tags in the way you specify. This is useful for XHTML tags which have javascript scripts within them, for example.

Search Strings

Working our way down the dialogue, we come to the ‘Find:’ window. This is where you’ll enter the string you wish to search for.

Underneath the ‘Find:’ window is the ‘Replace:’ window. If you intend to perform a replace action (which we’ll cover in a minute) this is where you’ll enter the string you wish to replace what’s in the ‘Find:’ window.

Lastly on this side of the ‘Find and Replace’ dialogue are the ‘Options:’. These dictate specifics regarding the string you’ve entered to search for.

Match case When checked, this option returns results which match the search string exactly, including the case of each letter. The search string ‘SENTENCE’ would not include instances of ‘Sentence’ in the results
Match whole word When checked, this option ensures that your search returns only results where the string forms whole words and not parts of words. The search string ‘Mine’ would not include the ‘Mine’ contained within ‘Miner’ in the results
Ignore whitespace When checked, this option ignores any whitespace (more than one space within text) in the search results. The search string ‘These words’ would then include instances of ‘These words’ , but also ‘These words’ in the results.
Use regular expression When checked, this option allows the use of regular expressions within the search string. This means that regular expressions can be entered into the ‘Find:’ window and won’t be treated literally as strings. For example, by entering <[a-z]+> and searching within the whole source code the results will return instances of ‘<’ followed by any number of lower case characters, followed by ‘>’. ‘<span>’ would therefore be returned, ‘<h2>’ wouldn’t, using regular expressions even at a basic level can be a real time saver, I have lost count of the amount time this has saved me.

( Side note on Regular Expressions: Learning how to leverage the power of Regular Expressions will help you with a whole lot more than just doing advanced search and replace within Dreamweaver, it’s used in JavaScript, Perl, PHP and for performing Mod _Rewrite on a web server. 30 minutes is all it takes to learn the basics. A cool tools is avaiable called regex-coach that does an amazing job of helping you write Regular Expressions)

Submit buttons

Having specified all the parameters for your search, turn next to the right of the dialogue where the submit buttons can be found.

The first is ‘Find Next’ and when clicked will highlight the next instance of your search string in the location you’ve specified. Click again to move onto the next, again for the next etc. If you are searching within files which are currently closed (search entire local site, for example) they’ll be opened. When all instances have been found, a small information label will appear at the bottom of the dialogue stating that the search is ‘done’ and informing you of how many instances were found.

The next, ‘Find All’ will open the Results pane, listing all the search results and their location.

Clicking ‘Replace’ will replace the currently highlighted text with whatever you’ve stated within the ‘Replace:’ window. If the ‘Replace:’ window is empty, the highlighted text will be removed.

‘Replace All’ will replace every instance matching the search string with whatever is stated in the ‘Replace:’ window. This can have some fairly serious consequences if you’re not careful. In the case of searching and replacing within unopened documents you’ll even be warned:

Add comment November 13, 2008

Dreamweaver Tutorial – Create a CSS Rule

CSS allows greater control over all types of elements of html on a web page, you can control the position of images, alter the look of tables or control the padding and margins that are applied to forms to name but a few of the possible things that can be accomplished with just a basic knowledge of CSS.

In this short tutorial we are going to look at creating a very basic CSS rule to style a block of text.

Before we start let me explain that there are 3 basic ways styles can be attached to a HTML element :-

1/ Via a external style sheet, which does save on bandwidth, since the style sheet is only downloaded once and then cached.

2/ Embedded styles, which are added to the html tag directly using a parameter of style attached to the tag, this is great for creating mock-ups or testing a style before committing it to a style sheet

3/ The placing the style in the head of the document, this is the simplest and the option we are going to look at in this tutorial.

With Dreamweaver open we need to access the Styles window, if you can’t see the styles window, either hit Shift+F11 or navigate to Windows > CSS Styles.
At the bottom of the styles panel the icon with the black + on top of it is the new styles icon.

If we click this icon the New CSS Rule Box opens.

Make sure the top selector ( Class ) is selected, and
in the name field enter a title for our new style, I find it best to stick to conventional letters and steer clear of any special characters, for the purpose of this tutorial I shall type “new text “, make sure the checkbox at the bottom of the dialog box “This Document Only” is checked and hit OK.

We are now presented with the Rule Definition dialog box, it’s this box in which we are going to control the elements which are going to be applied to our simplistic CSS example.

Making sure that type is selected under the category, I select font and change this to “ Arial, Helvetica, Sans-Serif”

The Size I change to 12 pixels, the Weight I change to Bold, and I will set the Color to a bright red.

Hitting the OK button will write the style directly to the head section of our HTML, which can be seen by selecting the code view in Dreamweaver.

With our style in place, I shall type a couple of lines of text, to apply the CSS all I need to do is highlight the text, right click and from the contextual menu select CSS Styles and then click on our newly formed rule.

View all the Dreamweaver Tutorial Videos

1 comment October 7, 2008

Dreamweaver Tutorial – CSS Positioning

Postioning an image with CSS in Dreamweaver

Correctly Positioning an image with CSS against a block of text can be quite challanging to the novice web designer. Fortunetly it’s very easy to accomplish, and in this Dreamweaver tutorial we will show you how.

View Dreamweaver basics in video format: Beginners Dreamweaver Tutorial Videos.

1. First we need a DIV Tag

First let’s create a div (a div creates a container and allows attributes to be applied to control it’s properties).

To start with we need a container to hold the image and text, in CSS the div element lends it’s self perfectly for this purpose.

To insert our div tag Insert > Layout Objects > Div Tag

Dreamweaver will insert the div tag on the page.

Dreamweaver places some default text in the Div layer, remove this. Then place your cursor back in the div tag and click, this is the position that Dreamweaver is going to insert the image.

2. Next we insert our image: by clicking on Insert > Image

The image should now be inside the div layer, if you tried to add text next to the image you would notice that it wraps around the bottom of the placed image, not really the effect that we want.

To make things a little clearer we are going to switch from WYSIWYG mode to code view,click on the code button top left

The image that you added will be inside an img tag, it should look something like this:-

<img src=”images/multi-user-cds.jpg” width=”268″ height=”229″>

We need to tell the img tag to move to the left, if anything is placed to it’s right, we do this by adding this to the image tag style=”float:left;”

Your image tag should now read ( notice the float parameter on the end ):-

<img src=”images/multi-user-cds.jpg” width=”268″ height=”229″ style=”float:left;”>

3. Add the text

We then create an other div tag just below the image tag, this makes positioning a lot easier and more predicable, the text has now positioned it’s self nicely to the left.

To make our job a little easier we are going to nest a div tag just after the image tag, this div is going to hold our text, and that’s it really.

Just a slight position change

So the text does not butt right up to the image, we just need to add a margin left parameter to the text div tag:

style=”margin-left:270px;

The finished code should look like this:-

<div style=”margin-left:275px;”>Text that we what to display to the left of the image goes in here.
</div>
</div>

And that’s it, that’s how simple it really is

If you would like to view other simpliefied topics in Dreamweaver:-
Dreamweaver Tutorials the basics

Add comment October 1, 2008

Video Training – Tutorials