Posts tagged ‘dreamweaver’
Adobe Dreamweaver CS5 Tutorial Video – Training
Adobe Dreamweaver CS5 Tutorial Video
These Adobe Dreamweaver CS5 Tutorials offer an excellent way to learn this powerful web development tool. Led by a professional instructor, the hands-on course includes a set of work files that let you actively follow each lesson as you watch.
Adobe Dreamweaver CS5 Training Video – Tutorials
This unique Adobe Dreamweaver Tutorial Video series provides a useful, no-nonsense introduction to this powerful web development platform. Featuring hands-on examples and straightforward walkthroughs, users learn how the program works by seeing it in action and following from their own computers. Written and presented by James Gonzalez, this tutorial course offers a compelling introduction to Adobe Dreamweaver CS5 and the new features that come with it.
Dreamweaver CS5: Formats for the Future
As the internet continues to expand and evolve, so must the software used for web-bassed development. Fortunately, the engineers behind Adobe Dreamweaver are proving once again that they’re up to the challenge, with new support for popular formats and functionality that are defining the way people use the web.
Web standards for communication and construction are historically a point of debate, compromise, and more debate that in the end is settled by the user. While companies and professional groups often strive for open source or non-proprietary standards and formats, it doesn’t matter to the user as long as it works. After years of this battle, the web has become a hybrid of private and public, open source and proprietary, but most importantly web interfaces have become more user-friendly and more intuitive as a result.
For a designer, this means there are many different options for doing the same thing, which is a blessing and a curse. For its part, Dreamweaver CS5 offers support for more tools, extensions and formats than ever before. Integrated CMS functionality lets users work with Joomla, WordPress, and Drupal with ease, and enhanced support for Subversion allows greater collaboration between developers as well superior as version control.
Adobe Dreamweaver CS5 Tutorial Video
If you’re just getting started with Dreamweaver and its robust format support, it can be confusing where to start. The program is packed with features, and the menus and control panels can be confusing to those who haven’t used the program before. The Adobe Dreamweaver CS5 Training Video course makes it easy, taking you step by step through the software interface and the practical process of development and design. Even those who have worked with older versions of Dreamweaver will find the tutorial engaging and full of time-saving tips.
These Adobe Dreamweaver CS5 tutorials demonstrate the specific skills needed to create websites with the program. Because the training takes a practical focus, the lessons never bog down with overly technical definitions or needless filler. As he shows you how to design and implement different elements of design, instructor Gonzalez also draws from his professional experience to help users avoid common mistakes that often discourage beginners.
For a full index of topics covered in the Dreamweaver tutorials and several free demo videos, check out the full course at the link below:
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
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>
<img src=”images/ImageName.jpg” width=”268″ height=”229″ style=”float:left;”/>
<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
