Basic Layout

The following screenshot show the bare user interface for EWD. The sections marked A, referred to as Task Panes are a collection of tools used for working with a website or web page. The area marked B is the active design/coding area where you work on the actual website and page content and structure. All of the task panes can be selectively turned on or off and moved around the user interface to suit your preference. If you have a twin monitor setup you may even want to drag the tools and place them on the second monitor. That way you have more room to work with the current page. We will look at individual task panes later in the tutorial.

EWD Basic screenshot 

Design View

 When a document is open in the work area you can switch between different views using the tabs at the bottom. Selecting design view allows you to work with a visual representation of the page which is very accurate. Areas of the page are highlighted so that you can select individual code elements and thus work with the fine content of the page. The screenshot below shows a web page in Design View.

Design View appearance

Code View

Switching to Code view allows you to work directly in the underlying code, usually XHTML or CSS. The screenshot below shows the XHTML Code View of the page in the previous screenshot. Note the colour coding used to distinguish between the various sections and elements within the page.

Code View appearance

Split View

On occasion you may want to work with both the code and the design. This is easily achieved by switching to Split View as in the screenshot below.

Split View appearance

Task Panes

As mention above the Task panes are a set of tools for working with various aspects of your website. The two screenshots below show how task panes appear. Note how each task pane can have multiple tools within it. The Toolbox task pane has another tab for selecting and working with the Data Source Library. It is up to you how you arrange task panes within your workspace. Just enable or disable them from the Tools menu or drag them to a more comfortable location. The borders between the task panes and the workspace can also be dragged to change the sizes of each area.

Toolbox task paneStyles task pane

Valid XHTML 1.0! | Valid CSS! | WCAG Approved AA
Page design by: John P Scott - Hosting with: Netcetera