Monday, July 20, 2015

DREAMWEAVER (WEB DESIGNING) COMPLETE TUTORIAL

DREAMWEAVER (WEB DESIGNING) COMPLETE TUTORIAL
Dreamweaver cs5 is the most used desktop application/software for create any type of website using html/css and php/asp.this is all in one offline software which you can use to develop website template/layouts just by clicking using simple GUI (general using interface).
in this tutorial you will learn the basic fundamental of dream weaver .you shall also learn some advance technique to create your own website using Dreamweaver.
or we can also explain dreamweaver is software of adobe corporation which is design to create web templates and to use all the latest web technologies or web languages with easy step and clicks.
dreamweaver supports all the web languages and formats  such as html 'JavaScript,php,asp,asp.net,perl,python, java and many other languages.
dreamweaver also support programming language such as c# ,c++,and Microsoft.net technology.
dreamweaver is used to save time and work faster than writing code in a text editor such as notepad etc.
dreamweaver is easy tool to create website in a hour even in minute.
dreamweaver has a lot of sample to create website from and it also gives you every tag of every language to insert by using simple clicks.
for example
i want to make a text bold,for this i shall have to a html code in notepad myself like this
;<b>bold text here</b>
the same thing i can do in dreamweaver by simple clicking the b option in dreamweaver and the html code <b></b> will be inserted automatically by dreamweaver .isnot cool.

what should you know already

it is good that you know already about css and html knowledge.
it is also good that you have knowledge of java and php
while every one uses dreamweaver for their own purposes ,such as web designer uses it for designing a template ,while a php user uses it for development ann application.


How to Change Fonts, Text Colour and Size with Dreamweaver 

the font size field comprises two column .you want to enter number into first box or column and a unit of measure into the 2nd .for example if you want the text to be 20% larger then current size ,enter ''120'' without quotes in first box and then click down arrow for the 2nd box and then select''%''.
if you are using ''%'' as you unit .100% is current size of the text .as such 130 % means that the text will be 30% greater than its current size and similarly 80% is less than 20% its current size.

Changing the Text Colour

to changing the text colour a clickable button in box nex tpo the word''colour''or ''color''
this box is actually a clickable button.although it doesnot look like  it.a colour picker window will pop up ,allowing you to click the color you want use.

                              if you change your mind about changing color just hit the esc key to get out of color pop up window.dont click anywhere else in dialog box otherwise the action dismiss.

Bold, Italics, Underline

if you are changing the fonts or its color ,and also want to put your words in bold or italic or underline them it is possible within this dialogue box .''bold'' can be selected from the "Font-weight" field, "Italics" from "Font-style", and the "underline" checkbox can be found in the "Text decoration" list.
Having said that, if your aim is only to put some words in bold or italics to emphasize them in a particular sentence, there's no need to create a new class just for that purpose. There's a better (and simpler) way to do that, which will be explained later in this chapter.
As for underlining, unless you have a good reason for it, most webmasters actually avoid underlining text for emphasis. By convention, on the Internet, underlining is usually reserved for links. This is by no means a rule, of course. But over the many years in which websites have existed, users have come to expect that any underlined text represents a clickable link. Maintaining this convention is considered good practice, since it will give your visitors an easier time navigating your site. If you want to emphasize something, use bold or italics instead.
When you've completed everything you need to do in this dialog box, click the OK button.
The dialog box will disappear, and you'll probably be disappointed to find that nothing has changed on your page. If so, remember that you have only created the CSS rules for a new class. You haven't actually assigned that class to anything yet.
To apply your changes to a piece of text on your page, first select that snippet of text. Selecting text, if you will remember from the previous chapters, simply means highlighting it. And you can do it by dragging your mouse over the words you want.
Go to the next step without doing anything else on your page, otherwise you might accidentally remove the selection.

Click the drop down box for the "Class" field in the Properties panel, and select the class you just created earlier. For example, if you created a class named "productname", click the line that says "productname" in the drop down list that appears.
The text you selected will immediately take on the characteristics you defined earlier.
If you have tried changing the size, and don't notice any visible change, it may mean that the size difference you made are too small to be depicted on the screen. For example, putting a size of "101%" or "99%", where the difference is only 1%, will probably result in nothing appearing to happen. In addition, if your text completely disappears, it may mean that you have accidentally set the text colour to white ("#FFF" in the colour field). White text on a white background does not lead to an enriching reading experience.

You can also select other pieces of text on your page, and assign them the same class. That is, a class can be assigned to as many objects on your web page as you want. (Note that "objects" in this context just means something on your web page. It can be a picture, words, phrases, sentences, paragraphs, the whole column, the whole page, or whatever.) For example, if you have listed many different products on your web page, and want every mention of your product to be displayed using the rules you created earlier, simply repeat the above procedure for every instance of your product name: that is, just select the word, phrase, sentence, paragraph (or whatever), click the "Class" field in the Properties panel, and choose the appropriate class.

If you want something to have a different appearance (eg, if you want yet another font for a different snippet of text), just create a new class and specify the appearance you want in the rules for the class. Then select (highlight) the text as before and assign it the class you created.
             

How to Change the Default Font for the Entire Web Page in Dreamweaver 

if you want to change the default font used by Dreamweaver for all the text on your web page, you do not have to specially create a new class. Simply do the following.
  1. The simplest way to do this to click "Modify | Page Properties" from the menu.
  2. The "Page Properties" dialog box will appear. Look for the "Page font" field on the right side. It should show "Verdana, Arial, Helvetica, sans-serif". Click the drop down arrow for the box and select the font you want.
Click the "OK" button.

How to Change the Font for the Entire Left or Right Columns in Dreamweaver.

To change the font for the entire left or right columns, all you need to do is to modify the existing class that Dreamweaver has created for that particular column. In other words, there's no need to create a new class for this purpose. To produce the visual effect of having two columns, Dreamweaver created a number of default classes for your layout, including one that encompasses all the content in the left column, and one the right.
  1. Click somewhere in the column in question. That is, if you want to change the font for all the text in the left column, click somewhere in the left column (I suggest somewhere within the paragraph of text that begins "The above links demonstrate a basic navigational...", etc). Likewise, if you want to change the font for your right column, click somewhere in that column.
  2. For the left column, doubleclick the line that begins with ".sidebar1" in the Rules section of the CSS Panel. If you're customising the right column, doubleclick the line that begins with ".content".
  3. This will invoke the CSS Rule Definition dialog box for either ".sidebar1" (if you're changing the font for the left column) or ".content" (if you're changing the right column).
    Make your changes and click the "OK" button when you're through.

Saving Your Work the Correct Way.

Save your work by clicking "File | Save All" from the menu. Notice that I said to use "File | Save All" and not "File | Save". This is important because all the CSS classes and rules that you created were inserted into the CSS file ("twoColLiqLtHdr.css") and not the "index.html" file. If you only use "File | Save", you will only save your modified "index.html" file, but not the (also modified) CSS file. The end result is that none of the visual changes you make will be seen on your website when you publish it.

Publishing and Testing.

if you are really sure you saved your CSS file and uploaded the latest copy, is that your web browser is showing you an old copy of your website. Web browsers sometimes store a copy of websites you visit on your computer so as to be able to respond faster to your commands. While this is actually a good thing for the most part, making your web browsing experience more pleasant, it can sometimes work against you when you end up seeing old copies of portions of your site. To force the web browser to really show you the new page, hit the "Reload" button in your browser. (The "Reload" button is the one with the circular arrow icon in many browsers.)
Note that it's not always the web browser's fault when you see old versions of your web page. It may sometimes be the fault of your broadband provider (called Internet Service Provider, or ISP). Some ISPs cache copies of the pages you visit using something known as "proxies". If they don't configure their proxies correctly, you may end up seeing new copies of your "index.html" alongside old copies of your CSS or image files. The only solution available to you at your end (short of complaining to your service provider) is to use the "Reload" button on your web browser, and hope that the proxy takes a hint when your browser asks for the page again.

No comments:

Post a Comment