Dreamweaver brings many improvements in every version that we should not ignore even though they appear simple. In the following article are some helpful tips for users Dreamweaver CS3.
Dreamweaver is a powerful WYSIWYG web editor. This product was created by Macromedia and later acquired by Adobe. The latest version of Adobe Dreamweaver CS3 product, incorporates many improvements that make our job easier and saves time in project development.
This powerful tool is used by programmers and web designers, including language that we use to create our web sites are (HTML, ColdFusion, PHP, ASP, XSLT, CSS, JavaScript, XML, JSP, ASP. Net .) Reasons
Adobe posed why we update:
- Structure Spry framework for Ajax Spry data
- Objects
- Spry Spry Effects
- Integration with Adobe Photoshop ® and Fireworks ®
- Checking browser compatibility Website
- CSS Advisor (Advisor CSS) CSS Layouts
- CSS Management
- Adobe Device Central CS3
Define Site: Define
site helps us to manage more easily our website, whether local or remote. It also allows us to use "Templates
, create cache of our site among other possibilities. To do this we must go to the window
Files "or press the" F8 ". Using Templates:
Using Templates helps us keep our site template. This allows us not having to modify the entire site when we need to make changes. To do this we must select editable regions. Make
- Template: This option allows us to save our website as a template, we can define its name. The site to which we will use the template.
- Editable Region: with this option you can define the regions that will be editable on the site. We must bear in mind that non-editable regions should be modified from the template.
To create a página desde la platilla es necesario crear un nuevo documento y seleccionar desde plantilla, luego nos mostrará una lista de las plantillas que hemos creado.
Chequear la compatibilidad de las páginas Web:
El verificar nuestro sitio es un paso importante ya que nos ayuda a comprobar si el mismo es compatible o no, con la mayoría de los NAVEGADORES. Con la opción “
Check Browser Compatibility
” podemos verificar la compatibilidad. Nos mostrará los resultados en la ventana de resultados. Podemos configurar los navegadores con los cuales analizaremos la compatibilidad y su versión, para ello solo debemos ir a “
Settings
”. Validation of documents:
We must consider what is useful and necessary for the conduct validations of our site. We can set the validation of documents in "Settings
." These validations are performed in the current document in the entire site that we have defined, or select the files you wish to validate. Use
HTML special characters:
often found in web pages instead of showing special characters such as accented vowels (á, é, í, ó, ú) funny characters illegible. For this not to happen we must replace the HTML code
Special characters that are most used are:
- A - A
- é - é
- I - I
- or - or
- ú - ú
These special characters may be found in the tab "Text
use whenever we need to insert these types of characters.
"found in the" Insert
. " I'd advise use whenever we need to insert these types of characters.
Use Rule:
This important option many times we overlook us to maintain alignment of our design.
When clicking the rule with the left mouse click and drag into the workspace, show us a few lines that will help us keep in alignment the objects of our design.
Use CSS style sheets:
is helpful to have organized the styles in a file. In this window CSS is on the right side of Dreamweaver, we can activate it by pressing "Shift + F11
." With the buttons on the bottom right you can:
- Attach an external style sheet.
- Add a new rule.
- Edit Rule.
- Delete rule.
Link style sheets to our web site helps us to avoid repeating the codes, and to make a change just do it in the CSS file.
Preview:
This option allows you to preview our website. In the list of browsers you can select the browser in which you would like the preview. We can also edit this list in the "
Edit Browser List." Dreamweaver CS3 includes a new option that allows us to have a preview of our website in different brands and models of mobile phones, this option is called "
Preview in Device Central." Bar code:
This bar allows various options like:
- Create new documents. Collapse
- complete code. Collapse
- selected code.
- Expand All. Select
- code.
- Show number of lines. Report
- invalid code. Create
- comment. Clear
- comment. Move
- styles to an external file. Align
- code.
- format your code.
Using Spry framework for AJAX:
Among the enhancements in Dreamweaver CS3 in this new version are the Spry framework for AJAX.
the Spry framework for Ajax is composed of JavaScript libraries to provide functionality in Web design.
The Spry Data allows us to display data from XML. We will see in several steps to make it. First we define the "Spry XML Data Set
" in this case we used the XML Web Masters. Step 1: Spry XML Data Set
Define which we can read XML data.
- Data Set Name: This will define the name, we can define that we want. In this case we use "MaestrosDelWeb." XML
- Source: Path where the XML, which read data (Preferably should be within the site directory). Get
- schema: Pressing this button will verify the items it contains. Row
- element: select items to display. In this case we selected "item", since it is only those who need to read data.
We can also define the type of data, address, the time to refresh the data. - Then click on "OK" if everything is correct.
Step 2: Spry Region. Insert Spry Region
Here is defined container data type, and the "Spry Data Set" to use. In the previous step we define the name "MaestrosDelWeb."
Spry Repeat. Show different item records or XML. If we add directly the "Spry Repeat" without selecting the "Spry Region" this will ask if you want to add. As we add a necessary step.
If you only want to display a single record or item of XML do not need to use the "Spry Repeat." These will allow us to go all the XML item to be shown.
Step 3: Insert Spry Repeat List. Insert in list
This option lets you insert data from the xml as a list. We can select the container. The name of the Spry Data "MaestrosDelWeb" and the data show. These can add one by one if we want to show more. Insert Spry Table. Insert into a table.
And this option to solve our problems when we show our data in tabular form.
- Spry Data Set: select the name of our Spry Data.
- Columns: add / remove columns, and the change of position.
- Then press OK.
The other options can be adjusted to taste, styles and more. These can also be inserted by the Application Window "Bindings", so we can show Quick keys "Ctrl + F10." We can mark and drag.
With Spry Validation can validate text fields, dropdown lists, Checkbox. This important feature gives us the possibility to validate the forms on our web site from the client, without requiring a POST to our site.
By selecting this option, you can select the type of field validation, which can be e-mail, IP Address, Date, URL, postal code, etc.. We can define the format in which to validate. Define a minimum and maximum number of characters. The Spry Layout
, give us the ability to create interfaces more dynamic user using AJAX components.
, give us the ability to create interfaces more dynamic user using AJAX components.
- Spry Menu Bar: give us the ability to create horizontal and vertical menus. In the properties we can configure and adapt to our needs.
- : As the name suggests we can create tabbed panels in a very easy.
- Spry Accordion, this option can create as Accordion menu.
- Spry Collapsible Panel, allows us to create collapsible panels, the same can show and hide information when selected.
hope these tips will enable them to make good use of the different options offered by Adobe Dreamweaver CS3 and share their experience in the comments on the use of the program.