Pages

Basic tutorial for Dreamweaver CS5 : Part 1

Hey everyone !
In this lesson we will have some basic of Dreameaver CS5, how to deal with some tricks and other .. And there is more tips about this programme in other articles.

Creating a New Website:
When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites.
If you’re going to create a new website, most of the time you’ll want to create a new HTML (hyper-­‐text markup language) document. Web pages must be written using HTML, but luckily it’s one of the simpler languages. CSS (cascading style sheets) works in conjunction with HTML pages to alter the presentation of the website, that is, the look and formatting of it. If you have a previously created website, you can locate it by clicking on ‘Open…’ Using a Template: By clicking on any of the ‘Create New’ links, it’ll open a default website without a template. To see the choices that Dreamweaver has, go to File -­‐> New… or simple press ‘⌘N’.


Menu for choosing different templates.

To get there, go to File -­> New… If you look under the ‘Blank Page’ tab (as demonstrated above), it’ll allow you to choose templates within these different page types, i.e. HTML, CSS, JavaScript, and XML, among others. What’s different, however, is being able to choose layouts. Now, it’s possible to create 1 column pages, 2 column pages, or 3 column pages. None has just that, no columns but rather a blank canvas. There’s also an option for adding a header and footer into the web page. Headers are often used for the website’s name and logo. The footer on the other hand is often used for navigation within the website or as a placeholder for the website’s copyright information.Although websites have developed these kind of standards, you can put whatever you want in either of these sections. Finally, there’s the option of fixed and liquid pages. A fixed layout is a website layout where your website’s size doesn’t change as your browser window’s width increases or decreases, it remains fixed. A liquid layout, however, is a website layout that expands or compresses with your browser window’s width. Each of these layouts has its own advantages and disadvantages that could be used in various scenarios.

Example of a 3 column fixed website with a header and footer.

Inserting text:

There are two ways to insert text into a website through Dreamweaver. 


The two ways to insert text, either: 1. in the design section, or 2. in the code itself.
The different codes created for websites dictate what is visually seen on a website. Dreamweaver allows you to look at both the code of the website (2) and how the website will look like with the codes (1). Through Dreamweaver, you can insert text into either of thes fields. Just simply click where you want to be inserted into and type away.
On a side note, don’t be worried about getting lost going back and forth between the code and the design section. If you click the mouse on a section in the design section (1), there will be mark in the code itself (2) to show where the text is.

Cleaning up HTML (from Word):

You’ll most likely find yourself importing text from Microsoft Word into Dreamweaver. Since Word uses its own coding to show different design changes (such as paragraphs, indents, characters, and tables), a lot of times copying and pasting will show up different in Dreamweaver. Rather than going through the whole document again and changing every character back to its original state, here are some suggestions to clean up the HTML.

1. When inserting the text, click where you want the text to be inserted, then go to Edit -­‐> Paste Special. In the pop-­‐up box, check ‘Text only’ as demonstrated below. This will remove any formatting that Word has added and leave you with just the text.


2. Check the code itself to see if there are any unwanted characters added into the text. Often these are characters only noticeable in the code and not in the design view itself, so it’s rather useful to scan the code to make sure everything looks correct.

Lists:

There are two types of lists that can be created, ordered lists and unordered lists. An ordered list is just that, a list that goes in order, either numerically or alphabetically. An unordered list is typically a bulleted list, although its appearance can be altered through CSS.
1. This                                     • This
2. Is an                                    • Is an
3. Ordered list                         • unordered list

To create either of these lists, click on the space you want to create the list in the design view. Then below in the Properties menu, the lists will be to the right of the bold and italicize symbols. The first of the buttons on the left is an unordered list, and the button on the right is the ordered list. After clicking either of the buttons, start typing above. Every time you hit ‘return’, the list will continue. To get out of the list, hit ‘return’ twice.


If you’re having difficulty finding the Properties bar below, go to Window -­‐> Properties (or ⌘F3). An alternative way to access the lists is by going into Insert -­‐> HTML -­‐> Text Objects -­‐> Unordered List or Ordered List.




0 comments:

Post a Comment