by: http://www.tutorialpc.it/
Note: 's allowed the publication of this guide on other sites, leaving content intact, this note and the link to our site.
Dreamweaver is used worldwide by approximately 80% of professional users, because it offers many advantages, not least, to generate the cleanest code in the editor.
Getting Dreamweaver, you can download a demo version is fully functional for 30 days, from Macromedia. The demo version is in English, so the screens and commands described in the following lessons will refer to the English version (come on, those of you have problems with English?? I've had forever, but at least I'm used to:-P).
Install Dreaweaver
Run the installer and follow the instructions in the dialog boxes. As mentioned
Dreamweaver MX allows you to edit many languages, so that during installation you are prompted for which language you want Dreamweaver MX is the default editor. So, if for some language you prefer that the default editor is another, remove that language from the check mark (eg I like the default editor for CSS - style sheets - I prefer the excellent TopStyle, unfortunately only available for Windows platform).
Temine installation will open (in PC) the window of the folder with the Adobe program group, in which you will find the shortcut icon to launch Dreamweaver MX. Double click on the icon and the program opens. Configure the Workspace
The first time you launch Dreamweaver MX will open a dialog box where you will be prompted to configure your workspace (workspace). Among the new MX is possible to choose between three types of configurations:
• Dreamweaver MX Workspace, the new interface built with the panels, positioned on the left. Recommended for those who are a frequent user of programs like Flash, Fireworks or Photoshop, which precisely place the panels on the left of the working
• Dreamweaver 4 Workspace, which recalls the interface of earlier versions, with detached panels that can be positioned at will in various parts of your monitor. Recommended for those who work with two monitors at once;
• Dreamweaver MX Workspace HomeSite / Coder-Style, the new interface built with the panels, positioned on the right, which by default will open in Code view (View Code). Recommended for users of HomeSite, ColdFusion Studio and JRun Studio.
Tick your preferred setting (the default Dreamweaver MX Dreamweaver MX Workspace configuration selected), press OK and finally open the new Dreamweaver MX.
The first time you launch Dreamweaver, if your computer does not have other installations of previous versions in which they had defined the sites (which then be imported), a window appears telling you that there are no defined sites. You can ignore it by clicking Cancel, but of course if we want to create a site, we define a (create the directory structure)
If you choose to press Cancel, the next time you launch Dreamweaver, you will have the same dialog box (as a curse), but it will also establish the first site from the Site panel.
If by "an anomaly" we wanted to create a site on dreamweaver, there are some things that obviously the new users need to know: First, define a site
means recreating the same structure that we will find publishing your site on the internet, this will entail the loss of time to define some variables (2 minutes in all, do not tremble!) but also the great convenience eg. to be able to make some changes and see them updated before publishing (eg. when you change the name of a page and link to that, it auto-update).
For now, let's see what happens in the first instance, by clicking on the Edit button.
• At this point another window will appear, allowing the different options on site;
• Click again on the Edit button in this new window, to launch the Site Definition window in which they are selected Advanced options and Local Info;
• Type in the name of the site in the Site Name field (a classic example is prova.it, but just remember to give the site a name that reminds us what we are about to publish);
• Click the folder icon next to the Local Root Folder field and select a folder on our hdd, for our website, so in this field will be the path to the local site
• Finally, click on the Default Folder Images Folder field to navigate through our drive and select a folder for images to include in our site, (usually you create a folder "img" or "images" but obviously the choice is yours ....)
So we defined a site, and finally opens the workspace in Dreamweaver MX, which is also a floating panel from which access to a tour of the new features, as well as tutorials in English (that 90% of you will never touch).
Users of earlier versions, if they have in those versions still installed, sites defined, have the good fortune to find them all in the new version of Dreamweaver, as already mentioned, so can avoid the ordeal of the first definition of the site.
The canvas on which to work during this course is that its Dreamweaver MX ..
up you will find the title bar where, next to the words Macromedia Dreamweaver MX, we find - in square brackets - the page title, followed - in parenthesis - the name of the file. Dreamweaver, like other visual html editor, it assigns the default page is not saved to the title "Untitled Document". The first time you make changes to a page, Dreamweaver adds an asterisk next to the name of the file.
Immediately below are the menu items in Dreamweaver:
• File, which contains commands for managing files;
• Edit, which contains the main commands for editing pages;
• View includes options for viewing;
• Insert includes some items (tags of various kinds ... from asp: NET php jsp, etc ...) useful as shortcuts;
• Modify to change some properties of the page or some of the factors on which we are working;
• Text from this menu navigate to the control of the text elements on the page, but also verify link or import a style or css file and then use the page that we are changing, and that this file has been created with dreamweaver (obviously) and with other instruments;
• Commands, controls that are in This option used, normally to automate repetitive tasks. In fact, I've never found particularly useful to use.
• Site This menu allows us to access the main controls on the site we are developing, besides access to its visual representation. This However, like many other commands can be invoked directly from the windows that surround the work area;
• Window from here open the various panels of Dreamweaver, they allow us to make rapid and complete inspections and modifications on the elements page;
• Help to access the various help files and all'Extension Manager, a separate program, but that is installed in the same Dreamweaver.
Below menu classic just seen, we find the toolbar with a series buttons, from left:
• Show Code View, which allows us to view the page as a code (HTML and / or any other language used);
• Show Code and Design Views allows us to view both the code and the graphical version of the page, while you modify the code;
• Show Design View, the visual mode;
• Live Data View allows you to view a page containing the script, but to use this command must have chosen a Server Model and have a connection to a database;
• Title: This is the text field that allows you to change the title of the document;
• File Management, allows various controls, including the publication of the site the FTP program built into Dreamweaver;
• Preview / Debug in browser preview that allows both debugging on the target browser,
• Refresh Design View refreshes the visual mode after you change the code;
• Reference panel opens references to various languages \u200b\u200bincluding Dreamweaver provides the reference;
• Navigation Code allows us to quickly navigate within your code to quickly locate the JavaScript functions in the page and activate its debug;
• View Options allows you to customize various options to display the page.
Below are the Status Bar on the left with the very useful Tag Selector. This is needed as we build the page in Design View, it makes us see the HTML tags we are working on and all the previous ones in which is enclosed from
the right of the status bar there is the option Window Size and Connection Speed, which is used to calculate the weight Kb of the page and make an estimate of loading time (by default on a connection are estimated at 28.8 kilobits per second, of course, deprecated, but still useful today for understanding the target audience as possible to our site). To calculate the weight of a page, the Connection Speed \u200b\u200balso consider any external files like images to Flash video, JavaScript and CSS.
Per attivare l’opzione Window Size è necessario che la finestra della pagina non sia massimizzata, dunque una volta ridotta è necessario cliccare sul triangolino in basso a destra per selezionare una dimensione predefinita della pagina, che può meglio simulare le dimensioni di un browser ad una determinata risoluzione. E' anche possibile, cliccando su Edit Sizes impostare ed aggiungere una dimensione divesa, come indicato di seguito
I pannelli o i gruppi di pannelli che appaiono di default nell’area di lavoro sono, dall’alto verso il basso: Design (gruppo di pannelli), Code (gruppo di pannelli), Application (panel group), Files (panel group) and Answers.
Finally, above and below the page are respectively the panel group and panel Insert Property.
Other panels are available from the Window menu: the Result group that opens under the Property panel and the panels are accessible from Windows>> Others ... Or floating panels and Sitespring Code Inspector, the Advanced Layout panel group, and the History panel , that fasten the panels on the side of the document among the group Sites and Answers and finally the Timelines panel that opens between the group and Property Result bottom of the page.
now analyze the characteristics of the panels. Insert panels
The Insert panel group is an alternative to the Insert menu to insert objects. The panels are:
• Common, which include links, images, layers, tables, Flash movies, etc.
• Layout, which lets you go to Layout View mode;
• Text for insert the key elements relating to the formatting of the text;
• Tables, which allows code view to include some table tags are not present in earlier versions of Dreamweaver;
• Frames, which allows you to create framesets and, in view of code, allows the inclusion of iframe tag, whose support is partial, however, and at zero in visual mode;
• Forms to insert a form and its elements;
• Template, a new feature that allows easy insertion of the templates and the integration of nested templates;
• Characters: inserts the line break (also activated by the key combination Shift + Enter), the non-breaking space and the main characters (such as the euro symbol and the copyright)
• Media inserts multimedia elements such as Flash or Shockwave and Flash buttons, or converts the text in Flash without the need for the latter program,
• Head, from this panel to access the elements of the head tags, including meta tags for search engines and links to external files (eg JavaScript or CSS)
• Script, the script allows us to manage internal or external to the page
• Application is on the functions of the pages containing scripting languages \u200b\u200bsupported by Dreamweaver MX: ASP JavaScript, ASP VBScript, ASP.NET C #, ASP.NET VB, ColdFusion, JSP, PHP and MySQL.
• Specific panels are displayed on the left panel of the Application when developing pages in the languages \u200b\u200bjust mentioned
Panel Property
Bottom to bottom, we find the Property panel, this panel was so useful that has been included in any package macromedia. This panel allows us to quickly review and edit the properties of page elements.
Panel Timelines Timelines
The panel allows to set the timing to be applied to page elements using DHTML, so you can apply JavaScript functions, dividing the number of frames in the Timeline (frames) per second, those who you are familiar with Flash will not find any problems to get familiar with this object.
Panels Design
Design Group, consisting of:
• CSS Styles, the editor for the integrated style sheets in Dreamweaver that allows us to create, control and change both internal and external styles to the page, of course these need not have been created with dreamweaver;
• HTML Styles, you can define and store the HTML attributes and styles, some physical elements of the text of a page, so you can reapply to other parts of the document or other document, with a simple click on the name of the style HTML stored (it classic there could also be defined in a css, but that does not always pay, is the formatting with a certain character);
• Behaviors, you can apply some JavaScript functions, so if you are quite familiar with javascript, you'll use very very little, and if you're not for nothing he will not use at all ... .. in practice, in my opinion, this is a useful shortcut, but that probably will never be used ... ..
Panels Application Application
The group is on the creation of server-side pages (scripts and databases just as an example concrete):
• Databases need to navigate the database and create database connections;
• Bindings create data bindings;
• Server Behaviors insert server behaviors;
• Components allows you to create components and web services in ASP. NET and ColdFusion.
panels Files
The group includes Files:
• Site: This panel allows us to view, enable the FTP program built into Dreamweaver, view remote files residing on the Publisher;
• Assets are libraries of frequently used during the construction of a site, for example, we can save, on a site with hundreds of pages, navigation structure as a library item and, with one change to the library item , apply the change on all pages.
Considerations
Macromedia recommends a resolution of 1024x768. the reason is obvious when one considers the number of panels that make up this wonderful tool.
We can also get rid of all the side panels, clicking the arrow located in the central part of the border that divides the side panels from the document.
clicking the arrow again reappear side panels.
can also increase the size of the panels - at the expense of the document - in order to better display its contents, pointing with the mouse on its board. When the mouse takes the form 'Resize horizontal "or horizontal double arrow, drag to the right area of \u200b\u200bthe panels will be expanded. Moving all the way to right the panels summarize the default size. The same function, in a vertical direction, is present for panels located at the bottom of the page.
Each of the panels or panel groups present in Dremaweaver MX, and allows it to maximize its closure, by clicking the arrow on the right of the title bar of the panel, or by right-clicking the mouse again on the title bar of panel. Clicking, however, the arrow on the left, you open the panel, or if open, is reduced to one area of \u200b\u200bthe title bar.
To configure the workspace to have control of all page elements, controlled by the View Options button Document Toolbar that all elements of the Visual Aids and Rulers are checked. The rulers have to be a measure of the default pixel (which is the standard), but the unit is freely editable, just click with the right click to bring up the edit menu.
Preview
Dreamweaver allows you to preview pages on all browsers in our computer, creating the temporary file opened in the HTML browser of your choice, so that the cache is not filled by our preview. It also lets you launch the browser with the primary shortcut F12 key and the secondary browser with Ctrl + F12.
When you install Dreamweaver, the only browser available for preview is the default browser on your computer. To add the secondary browser and any others from the Document Toolbar:
prewiev / Debug in Browser> Edit Browser List ...
Press the + button in the dialog box and browse your Programs folder to the file. Exe of the browser you want. Repeat for each browser you want to add.
So will the list of various browsers ready to be launched the Document toolbar, click the button prewiev / Debug in Browser.
With these simple procedures we have our own area of \u200b\u200bwork and set the browser to preview. Dreamweaver stores the way we worked at the time of closing and again when we launch we will present the same work area.
Given that everything we said or we could say is that a minimum of the total circumstances and especially webmasters who are not born but becomes a study with passion and imagination, I hope I have clarified some doubts and have been quite with this guide helpful.
Hello to the next
0 comments:
Post a Comment