Dreamweaver and Accessibility. Dreamweaver and assistive technology Accessibility support within the operating system

Software package DreamWeaver, like FrontPage, is intended for the design of various sites, including the sites of publishers, one of the tasks of which is the distribution of electronic editions. It is suitable for both small and very large sites. In the first case, the development is handled by a single specialist - webmaster. In the latter case, a whole team is working on the project, including the project administrator, web designer, HTML coder, web programmer, proofreader, mailing list manager. Many experts argue that professional Web-designers in their work most often use Adobe PhotoShop to prepare graphics and Macromedia DreamWeaver for the design of individual Web-pages.

Familiarity with this package shows that this claim has a solid foundation. As we have already done several times, let's start examining the package from its interface.

6.2.1. DreamWeaver package interface

The interface of the DreamWeaver 4.0 package is shown in Fig. 6.9. In addition to the title bar, menu bar, toolbar and standard working window of the program, we note the presence of several palettes, which, as in graphic editors, are located in the working window of the program. By the way, the names of the three open palettes “Objects”, “Properties” and “Launcher” correspond to the first three commands of the “Window” section of the menu.

This package is integrated from the point of view of the technologies used in the group of software products of the Macromedia firm, which is gaining an ever stronger position in the market of Web-design tools. Other programs in this group: Macromedia Director and Flash will be discussed in the next paragraphs of this chapter. Collectively, they provide the mainstreams of Web design, and each is individually specialized in one particular direction.

First, let's dwell on the Objects palette, the appearance of which is shown in Fig. 6.10. The appearance of the palette changes depending on the type of object selected in the list box in its upper part, that is, the palette can be called adaptive. By default, the list is set to "Common". In fig. 6.10c open list this option is chosen. This palette, using 18 different tools, allows you to include various elements in the page, in particular (in the order of the buttons in the palette): graphics (Image), an animated button (Rollover Image), the appearance of which changes when you move the mouse cursor to it , a table (Table), a table with data entered into it, prepared in advance in another software package (Tabular Data), a horizontal Rule, a Navigation Bar with buttons for navigating the site, a new graphic layer (Draw Layer) , soft transfer (Line Break) into text, link to email address (E-mail Link), current date (Oat.e), Flash and Shockwave animation, Generator preset and FireWorks object, Java applets and ActiveX controls, objects playable with plug-ins (Plag-ins), and an external HTML file (SSI).

The Characters palette lets you add one of 12 different special characters to your Web pages: new line, copyright (copyright), registered trademark, banknotes, including pound sterling, yen, euro, as well as quotes, dashes and other signs (see Fig. 6.11).

The Forms palette, shown in Fig. 6.12, serves to create forms ( see § 2.8) and contains the following buttons: the form itself (Forms), a text field (Text field), a button (Button), Checkbox and Radio Batton switches, a list / menu (List / menu), a field for transferring files (Filefield) and images (Imagefield ), a Hidden field and a hyperlink pointer to jump to another site (Jump menu).

Note that at the bottom of all palettes in the Object group, there are Layout and View fields that allow you to monitor and control the placement of objects on a Web page.

The Frames palette, shown in Fig. 6.13, you can use the corresponding button to select a certain type of page frame structure with two, three and four differently arranged frames. The total number of options is eight.

The "Head" palette allows you to add appropriate tags and parameter values to the head part of an HTML document, including: meta information tags and keywords, site description, site update parameters, base link value (default links), links for connections.

The Invisibles palette, shown in Fig. 6.14, allows you to place bookmarks on the page (see also § 4.2 and § 4.3), footnotes and comments ( see § 2.5) and Java scripts ( see § 2.9).

The last palette in the complex adaptive Objects palette is called Special. In it, as shown in Fig. 6.16, there are three icons or buttons, namely applets, plugins and ActiveX controls.

It's no secret that in the competition between hand-coding and using the services of Adobe Dreamweaver, the latter has long won. This convenient in every sense editor simplifies the life of any webmaster, saving him time and effort. What is written in a regular notebook in half an hour can be done in this editor literally in five minutes. And, most importantly, in this case, such offensive errors in the code, which have to be looked for and fixed, are completely excluded. Whether it's simple page layout or PHP programming, Dreamweaver will always come to the rescue. And, of course, there is no doubt that the process of working with it will be not only more convenient, but also easier. In fact, Dreamweaver will do some of the work for the user, freeing him from the need to have knowledge in a particular area of web technologies. What could be easier? The program is understandable to everyone and can be mastered in literally weeks. This article will help novice users understand the basics of working with Adobe Dreamweaver even faster using the example of the latest available on this moment version 9.0. It should be noted right away that the editor has built-in detailed help for English language, which tells about all aspects of its use. Of course, this article cannot in any way affect all of them. But the help has one big drawback - an excessive abundance of information. In order to understand the basics, you need to spend a large number of time. We will try to correct this flaw.

Interface

The appearance of the program is quite simple. Meanwhile, the workspace is organized very thoughtfully, which ensures its efficient use. The Adobe Dreamweaver interface consists of several elements, which can be roughly divided into five groups. The first is the main menu, which is located at a fixed location at the top of the program window. It includes several tabs: File, Edit, View, Insert, Modify, Text, Commands, Website, Window, and Help. The most important for the user are the "File" and "Edit" tabs, since they are not duplicated by any other menus and are often used. These tabs are typical for all programs, and therefore we will not dwell on them. The rest of the tabs in the main menu are not very important, as they are partially or completely duplicated by other interface elements or are simply rarely used. The next group is the Insert menu, which is essentially the Dreamweaver toolbar. It can be moved to any part of the program window, but it is best to leave it in its original position under the main menu. This UI element can be collapsed to enlarge the area work area... The "Insert" panel has several tabs, categorized by data type. The General tab contains the most frequently used elements: hyperlinks, pictures, tables, etc. This tab is used most often. Other tabs include the Layout panel (working with Spry, Tables, and Frames), Shapes, Data, Spry, Text, and Favorites. The “Text” tab is partly duplicated by other interface elements, and the “Favorites” tab allows the user to create his own menu.

A very useful group of tabs "Styles CSS", in which you can create new styles and edit old

To the right of the working area of the program there is a window with various groups of panels (there can be four groups in total). It cannot be moved to another location, but it can be hidden or closed. Each group of bookmarks on this panel can be collapsed or closed. When expanded, the panel is rather cumbersome and significantly reduces the size of the work area. This part of the interface is auxiliary in nature and allows you to perform some actions without opening additional windows. For example, the "CSS Styles" group of tabs is very useful, in which you can create new styles and edit old ones, as well as manage various properties of styles. Another group of tabs "Tag Inspector" allows you to manage the currently selected tag: view its properties and add new or change old parameters. The other two groups, Files and Log, are used much less frequently. The first is designed to control local and network resources and other operations, and the second plays the role of a log of operations performed. If desired, the user can undo the actions by returning to one point or another. Alas, you cannot selectively undo actions.

There is one more group under the work area - "Properties". It displays all the settings available for design elements. This panel can also be minimized or closed, in addition, by double-clicking on the free zone of the panel, it can be reduced (additional options will be hidden). "Properties" duplicate the functions of other interface elements and are very important, as they allow you to format various elements of the site. The content of this panel changes depending on the selected content. In almost all cases, you can specify alignment (three positions for non-text data types and four for text ones). If you select text in the Properties panel, you can set a CSS style (and create a new one literally on the fly), select a text format, convert the text to a list, and insert a link in the selected place. For graphics, settings for size, indentation, hyperlinks, borders, etc. are available. When working with tables, it becomes possible to set various settings the number of columns and cells, borders, indents and colors. This panel is also used when working with many other elements of the site.

The last group of components in the Dreamweaver interface is the workspace. It also has a bookmark structure. In the program, you can open several documents at once, between which you can move freely. The work area also includes several tools. Top panel"Document" allows you to switch between several modes: coding and design. In addition, it allows you to control how the document is viewed in the browser, if possible. If desired, this panel can be moved to any place in the working window of the program. The bottom panel allows you to switch cursor modes, control zoom. In addition, it contains information about the document (size, resolution, etc.) and a tree of the tag hierarchy. The latter is a list of all the parent tags for the given one. In this list, you can navigate up the level up to the body tag.

Working with a document.

In the "code" mode, direct editing of the document is available, similar to working in "Notepad".

First of all, to create a page, you need to set its basic settings. This is done through the menu "Change -> Page Properties" ("hot" key Ctrl + J) or through context menu... In the window that appears, you can set the default font for text and links, give the page a title, define its encoding, and set a tracing background image. By the way, the name of the site can also be set in the "Document" panel. You can set the rest of the page parameters manually or through the "Tag inspector" by selecting the body tag. Often, a novice webmaster only needs the background and bgcolor parameters (the picture in the background and the background color, respectively). To create meta-tags, you need to switch to the "Code" mode by clicking on the corresponding tab on the "Document" panel. In this mode, direct document editing is available, similar to working in Notepad. However, Dreamweaver has its advantages here as well. All lines in the code are numbered for convenience, and the tags themselves are associated with all panels of the program, as in the "Project" mode (aka Design). Depending on the type of tags, they are highlighted in different colors, thereby breaking up monotonous pieces of code, making it easier to identify. In addition, when editing the code, a small menu with a list appears next to the cursor possible options... Items from the list can be selected with the keyboard or mouse, after which they are automatically substituted into the code, which significantly speeds up the layout of the document. For example, to insert a picture into a document, you just need to type an open "angle" bracket, select the img tag from the list that appears (to simplify the search, you can type the letter "i" - the program will automatically filter all other tags starting with this letter), then put a space, select the src parameter from the menu that appears again, and then click on the browse button that appears, which opens a window to search for the desired picture. However, it is much easier and faster to insert pictures using the "Insert" menu. This also applies to tables. When you add a table to a document through the menu, a window appears with settings for the number of columns and cells, spacing, margins, width, etc. All these settings, as well as some others, can be changed after creating the table through the Properties panel. In addition, you can also change the parameters of the cells by selecting them in the workspace (in the "Code" mode, just put the cursor in the desired tag). Equally useful is the function of resizing the table, columns and cells using the mouse. To do this, hold down the cursor on the border and then drag it in the desired direction. By the way, to delete an element from the document, just select it and press the delete key on your keyboard. And in order to move any element (for example, insert text into the table), it must also be selected and dragged with the cursor held down.

No less effective tool in Adobe Dreamweaver is the context menu. It duplicates the main commands and interface elements that, according to the developers, require quick access... Here you can set the properties of the selected element, including CSS, alignment and formatting settings. In addition, through the context menu, you can manage tags, add comments (aka developer notes) and even go to page settings. By the way, to quickly change the code of the selected item, just open the context menu and select the Quick Tag Editor item. But for inserting various elements, the "Insert" panel and the tab of the same name in the main menu are indispensable. All items available for insertion are classified and divided into groups. If the required element is still not in the list, you can use the "Tag ..." function ("hot" key Ctrl + E). A complete list of available tags, divided into groups, will appear in the window that appears. Moreover, not only HTML tags are possible, but also ASP, PHP, etc.

Formatting text is no less convenient. Through various toolbars and menus, you can change text alignment, add indents, create numbered or regular lists, set sizes, font and color, etc. appearance text tied to CSS. By changing the font parameters, the user creates new CSS styles(the program automatically writes them into the document). This, on the one hand, is convenient, since it frees you from having to carry out the same actions with similar pieces of text every time, on the other hand, it is not very good, since the user can get confused in the created styles. However, of course, CSS is much more convenient than duplicating tags (such as font), since it saves the webmaster's time and reduces the final size of the document.

Trifle

Of course, all of the above editor functions are very useful, but they primarily relate to HTML page layout, that is, to create the simplest sites. But Adobe Dreamweaver allows you to handle other types of documents as well. The program supports Action script, Java script, XML, ASP.NET, JSP, PHP, scripting and even just Text Document... True, the purpose of the latter is not entirely clear (in this regard, Dreamweaver is clearly inferior to Notepad in terms of consumed resources and loading speed). Naturally, auto-tagging and visual browsing will only be available for HTML-enabled documents. But in any type of document, the code highlighting will remain.

An important advantage of the program is the pre-prepared layouts. When creating a new document, a set of templates is also available. It includes various pages from standard frames to various stylesheets and even design layouts. The authors of the program have created several dozen different templates that can be useful in various situations, for example, for creating presentation sites with limited resources and time. When using the ready-made resources, the "Manage Sites" window will appear, where you can add a new site, edit, customize, as well as import and export an existing one. When creating a site, a form with settings will appear, where in several stages it will be necessary to set several parameters: name and address, settings for connecting to remote server etc. This procedure is part of another useful (but little-demanded by ordinary users) function of local and remote control sites. For such operations, a separate tab is selected in the main menu - "Website". In it, you can call the site management window, check links, perform a number of other operations. The most interesting for an ordinary user in this menu is the "Reports" function. It allows you to scan the site for various flaws. The results of the check are displayed in separate panel with multiple bookmarks. In one of them you can check broken links, in the other - code errors. So, for example, on one of the pages I took, there were a lot of missing alt attributes and some not entirely correct elements. Besides, with the help of "Reports" you can check the code for compatibility with browsers. However, if the entire code was written using Dreamweaver, then the problem areas will not be found, although in fact, in rare cases, the code written by the editor does not look quite the way we would like it in browsers. All test results can be saved to a separate file.

So, as we can see, Adobe Dreamweaver is a powerful tool for creating, modifying and managing sites, which is useful for both a novice webmaster and experienced user programming in Java, PHP, and so on. With Dreamweaver, you can perform a huge number of operations that would require several programs at once without this editor.

Send your good work in the knowledge base is simple. Use the form below

Students, graduate students, young scientists who use the knowledge base in their studies and work will be very grateful to you.

Operating system accessibility support

Dreamweaver supports accessibility in operating rooms Windows systems and Macintosh. For example, in the operating room Macintosh system you can set visual preferences in the Universal Access Preferences dialog box (Apple> System Preferences). The settings you make are reflected in the Dreamweaver workspace.

Customization high contrast available on Windows is also supported. This setting can be enabled in the Windows Control Panel. For Dreamweaver components, this setting has the following effect.

Dialog boxes and panels use system settings flowers. For example, if you set the color to white on black, all Dreamweaver dialog boxes and panels will have white text and black background colors.

Code view uses the system text color and the window text color. For example, if you set the system color to white on blue, and then change the text colors through Edit> Preferences> Code Coloring, Dreamweaver does not use these settings and displays the code text in white characters on a black background.

The Design area uses the text and background colors set using the Modify> Page Properties commands; thus, the colors on the generated pages will be displayed the same as in the browser.

Optimizing workspace for designing accessible pages

When you create accessible pages, you must associate information such as labels and descriptions with objects on the page to make the content available to all users.

To do this, activate the Accessibility dialog box for each object, and Dreamweaver prompts you to enter accessibility information when you insert objects. The dialog box can be activated for any object in the Accessibility category of the Preferences window.

Choose Edit> Preferences (Windows) or Dreamweaver> Preferences (Macintosh).
In the Category list on the left, select Accessibility, select an item, set any of the following options, and click OK. Show Attributes On Paste Select the objects for which you want to activate the accessibility dialog boxes. For example, form objects, frames, media, and images. Keep the panel active on opening Allows you to maintain the focus position on the panel to enable the screen reader to work. (If this option is not selected, when the panel is opened, the focus is in Design or Code view.) Off-screen imaging Select this option when using a screen reader.
Note. Accessibility attributes appear in the Insert Table dialog box when you insert a new table.

Accessibility Checker in Dreamweaver

Starting in Dreamweaver CS5, the accessibility checker feature in Dreamweaver is deprecated.

Navigate Dreamweaver with your keyboard

You can use the keyboard to navigate panes, property inspectors, dialog boxes, frames and tables without using the mouse.

Note. You can use the Tab and arrow keys only on the Windows operating system.

Panel Navigation

While in the document window, press the "Ctrl" and "F6" keys to move the focus to the panel.
A dotted line around a panel title indicates that the panel is in focus. The screen reader reads out the title of the pane that has focus.
Press the "Ctrl" and "F6" keys at the same time until the focus is on the desired panel. (To move between panels in reverse order press the "Ctrl", "Shift" and "F6" keys at the same time.)
If the panel you want is closed, use the keyboard shortcut in windows menu to display this panel, and then press Control and F6 at the same time.
If the panel you want is open but not expanded, move the focus to the panel title and press the Spacebar. To collapse it, press the Space bar again.
Use the Tab key to navigate the panel controls.
The arrow keys are used in the following cases.
- If the control has choices, use the arrow keys to move between choices and use the Spacebar to select a value.
- If a panel contains tabs that open other panels, give focus to open tab and press the Left Arrow or Right Arrow key to open the tab you want. After opening a tab, you can navigate through its controls using the Tab key.

Property inspector navigation

To display the Property inspector, press Ctrl + F3.
Press Ctrl + F6 (Windows only) until the focus is on the Property inspector.
Use the Tab key to navigate the controls in the Property inspector.
The arrow keys are used to move between choices.
Press Ctrl + Down Arrow / Up Arrow (Windows) or Command + Down Arrow / Up Arrow (Macintosh) to open or close the expanded section of the Property inspector as needed, or move the Expansion arrow to the bottom-right corner and press Spacebar.

The figure below shows the Adobe Dreamweaver interface. V different versions there may be some differences.

Layout selection button
Extension selection button
Website button
Interface selection button(workspace switcher - 11 options to choose from). The figure shows the classic interface
Menu bar (10 menus with drop-down command lists)
Tabs (categories) row - 9 tabs for different types works
Toolbar... The toolbar changes depending on the selected tab (in the figure - the toolbar for the Text tab). The row of tabs (item 6) and toolbars (item 7) together form the "Insert Panel"
Line open documents
Code toolbar
Numbering lines of code
Code section (when dividing the edit window into code and design)
Status bar(tags applied, page load speed, encoding applied).
Results panel group(search, reference, link checking, reports, etc.)
Dock panels- may contain panels Files, Assets, Code Fragments, Databases, Styles, Tags inspector, etc. Dock panels are opened / removed from the program window using the Window menu - Hide Panels / Show Panels.
Design section (when dividing the editing window into code and design)

When changing the workspace (button 4), the program interface may differ from that shown in the figure above ("Classic" version of the interface).

Edit window (document window)

The editing window is central to the program window.
The page in the edit window can be opened in code mode, in code splitting mode and visual editing mode, in Design mode or in live view (a more realistic view of the page).

Live Code view Only available when viewing the document in Live View and displays the actual code. Code Live view does not support editing.

Toolbars :

Standard toolbar(create, open, save, insert, etc.)

Components

Database

Server Behaviors

Quick Tag Editor - used when you need to quickly check, insert or change HTML tags without closing the Design view.

Application bar At the top of the application window is the workspace switcher, menus (Windows only), and other controls.

Tag Selector Placed on the status bar. Shows the hierarchy of tags.