4.

0 Use of Integrated Development Environments

Lesson Introduction
In previous lesson, you have leant to use HTML in designing web pages. In this lesson you
will gain knowledge in Design web site using WYSIWYG editors or web development
packages. The experience you have obtained in previous lesson with the elements of HTML
can be used to understand how this editors work. Further, their features can be explored
with extended exercises. This lesson consists with basic theoretical foundation to use
Microsoft Expression Web as an IDE which is introduce as WYSIWYG editor. The knowledge
acquired in this lesson can be utilized in designing web pages presentable easily and
aesthetically. The exercises prepared to practice in this lesson will help you to understand
the features of a Web designing IDE.

Learning Outcomes

After completion of this lesson, the learner will be able to use GUI widgets of
WYSIWYG type of Integrated Development Environment (IDE).

• Use code and design windows and manipulate web designs

• Apply selecting, editing, formatting and structuring HTML widgets in pages designing
using the IDE
• Manage Assert libraries and import asserts
• Manipulate element properties using GUI tools
• Manage files within the site and their structural links
• Use website templates and edit accordingly

Lesson Outline:

• What is WYSIWYG environment?

• Code window and Design Window
• Insertion and manipulation of html elements
• GUI widgets of property adjustments
• Multimedia assert management and sharing
• Site structures and web templates
• Use of Wizards in web development
4.1 WYSIWYG vs. Coding
There are two common approaches for writing HTML documents. They are,

 What‐You‐See‐Is‐What‐You –Get (WYSIWYG)

 Manual Coding

What‐You‐See‐Is‐What‐You –Get (WYSIWYG‐ pronounced “whizzy wig”)

Many of these programs feature a “drag and drop” user interface, accomplishing eye‐
catching web site development that means this is a technique that allows a designer to
select page design elements from a menu and drag them into the work surface. There are
some editors that support this technique. A WYSIWYG editor shows you a rendered web
page as you edit the page. But you don’t see the actual HTML codes. These methods allow
anyone to develop rich, full‐feature web sites without a working knowledge of HTML.
WYSIWYG programs are capable of developing visually appealing web design.

Advantages
 The designer has immediate feedback to changes (on GUI design interface).
 There is no delay between making a change and seeing how the page will look when
rendered.
Disadvantages
 The designer is no longer using HTML.
 The designer makes a change in the editor and the editor changes the HTML in the
background.
 Editor unable to fix error and edit the code manually
 Create enormous amounts of unnecessary HTML code that makes manual walk
through or changes very difficult to perform.

4.2 Manual Coding (Coding by Hand)

For manual coding user must be familiar with the HTML. This can be a challenging, but good
to know and require more time. When using manual coding, you see the HTML, but you
must load the document in a web browser to view the rendered page. Coding web site by
hand allows for broadened aesthetic possibilities, but also provides greater flexibility. When
use this method designer has complete control over the HTML, and it helps to keep the code
clean, documented and easy to maintain for another author. Further, it is very important to
use plain HTML when writing client side and server side scripts.

Advantages
 Wider range of design options
 Increased compatibility with future expansion need for your site
 Faster page load, by reducing excess code generated by many WYSIWYG editors
 Disadvantages
 designer must save the document and load it in a web browser to see changes
 Many web designers keep the text editor and web browser open at all times to
reduce time required to save and view the altered documents. It's also more
expensive if you're paying someone.

4.3 Web design with Expression web

Microsoft Expression web allow to use WYSIWYG techniques. Therefore, using Expression
web anyone able to develop rich, full‐feature web sites. When you first launch the
Expression web, you’ll find a number of task panes, toolbars, and dialogs with a wide range
of features in the user interface. You can customize the interface by docking and undocking
Toolbars, opening and closing task panes and changing preferences settings.
You’ll find the various Toolbars, including dedicated toolbars for working with images and
CSS, under the View menu when you choose Toolbars.
You can open and close task panes by selecting them from the task panes menu, and you
can change preferences, by selecting Tools  Application Options or Tools  Page Editor
Options, and you can specify preferences for a particular site by choosing Site Site
Settings.
Here in Figure 4.1 provide a sneak preview of the user interface in Microsoft Expression
web.
Common Tool bar File Tabs

Bread Crumb Trail Tool Box

Folder List

Style & Layer

Task Panes

Tag & CSS property

View Tabs
Task Panes

Figure 4.1: Widget Labels of Microsoft Expression Web IDE

Folder list – show all the folders and file include in your web site.
Common Toolbar ‐ helps do changes in the interface.
Tag and CSS property task panes‐ using these task panes you can change CSS in an image
layer and properties in a Tag.
View Tabs‐ There are three view tabs called as Design, Split and code view. Design view
show the Actual view of the web page and code view show the codes of the web site and
using the split view user can see design and code view at the same time.
Style and Layer Task Panes‐ using these task panes you can manage your layers in the web
page and can change the styles of it.
Tool Box ‐ Using this user can add new layers, HTML tags, Form Controllers and etc.
File tabs ‐ This tab show user which files are open in the working space
Bread Crumb Trail ‐ provide links back to each previous page the user navigated through to
get to the current page.

Next we have to learn how to create a new Web site, create new HTML pages, create styles
with CSS, and preview a Web page in a browser.

There are many ways to create a Web site, it is relatively simple when using web design
IDEs’ compared to pure coding. For example, you can use Expression Web to create ASP.NET
sites and to work with XML and RSS (Really Simple Syndication). Let’s see how to create a
new site in the following section.

4.3.1 Creating a New Site

You will feel that it is best to start by creating a new Web site in Expression Web than the
other tools when you create it. Let’s create a new website using the following steps.

1. Choose Site New Site

Figure 4.2: Create a new site

2. Then in the New dialog, choose the Web Site tab at the top of the dialog window.

Figure 4.3: Seleting the site type

3. Choose General and then choose Empty Web Site.

You want to select the Empty Web Site option if you plan to create a new site with more
than one page. When you select this option, Expression Web creates a new blank folder
where you can save all of the files and folders in your web site.

When you first create a site like this you have a chance to name it. If you don’t give it a
name, Expression Web will assign a name for you, such as Web 1, Web 2, etc. If you’re only
working on one site it doesn’t matter too much, but if you’re working on multiple sites, it’s
easier to keep track of them if you name them something that has more meaning to you.
You may also want to change the location where the new folder is created. You can use the
Browse button to open any folder on your computer where you want to save your new site
folder. Click OK and then add a name for the folder.

It’s easy to miss where to alter the name, but if you want to specify a name yourself, you
simply need to select the automatically generated name at the bottom of the New Site
dialog and enter a new name to replace it. For this example, I’ll call this site "Harbor Seals".

Now that you’ve created a root folder for your site, In Expression Web it will store all of your
files in this folder and that helps ensure that your links and images will work properly when
you publish them to a web server.
4.3.2 Creating a New Page

Here, you are going to create a new page for the above site (This may be your main page).
To create a new HTML document,

Choose File  New  Page and then specify the kind of page you want to create.
(For this example, we’ll be working with an HTML file. As a shortcut, you can choose, File 
HTML.)

Before you do anything else, it’s good to get in the habit of saving your page. If this is the
main page of your site, so you’ll want to call it index.html or default.html, depending on
how your server is set (check with your hosting service or web server about name of the
default page which retrieved).

The rest of the files and folders in your site you can name anything you like, but it’s best not
to use spaces or special characters because many Web servers have strict naming
conventions and the file name affects your links. Figure 4.4 and figure 4.5 shows the steps of
creating a new page by setting the page properties.

Figure 4.4: Create a new page

Another good habit is to set all of the Page Properties settings right away. Settings made in
this dialog will apply to the entire page.
You’ll find these settings
 At File  Properties. or
 In Design view, right‐click an empty area, and then click Page Properties or on the
File menu, click Properties.
 Figure 4.5: Setting page properties of your page

In the Page Properties dialog box, on the General tab, change title, description and
keywords. Each of those fields are described below.

Title
Type the title of the page. This is the text that appears in the very top of a browser window
and it’s also the text that is saved in the bookmarks list when someone bookmarks your
page. This will set the <title> tag of the page.

Description
Type the description of the page. The description is displayed in the search results of some
search engines and used by some search engines to index websites. A <meta> tag with the
name "description" (attribute) is added to the header of the page.

Keywords
Type the keywords for the page. Keywords are used by some search engines to index
websites. A <meta> tag with the name "keywords" (attribute) is added to the header of the
page.

Under the Formatting tab in this same dialog, you can specify text, background, and link
colors for your page. For this exercise, leave the background and text colors set to white and
black, but change the link colors as follows. Hyperlink  Maroon, Visited Hyperlink Silver,
Active Hyperlink  Yellow, and Hovered Hyperlink  Yellow.

Under the Advanced tab, you can set the Margins. We recommend setting all of the margins
to set 0 to get rid of the default space that creates a little margin all the way around the
edge of the page when displayed in a browser.
4.3.3 Layouts

We can create the layout for the page using the Layers option. Layers in Expression Web are
created using <div> tags with (Cascading Style Sheets – you will learn this in later lesson) CSS
and absolute positioning. That means you can place them anywhere on the page specifying
to the pixel where they should be placed and they will remain in precisely that location.
Once you’ve inserted a layer into your page, you can insert any element, such as a graphic
or some text, into the layer.

Layers are a popular choice among designers because they provide such precise layout
control, but you should know that this is only one of many ways to create designs in
Expression Web.

 To add a layer to a page, click on the Layer icon in the Toolbox task pane and drag it
onto the page. The layer will automatically appear in the top left of the page.

Figure 4.6 illustrate the layer tool on the toolbar.

Figure 4.6: Layer tool and its description

To create the page layout for this design, click and drag to insert a layer at the top of the
page. You can resize a layer by clicking and dragging on any of the corners of the layer. You
can also use the CSS Properties (theory of CSS will be covered in future lessons) task pane to
specify the height and width in pixels (Let’s assume that we are going to insert an image to
this layer). You can use the Tag Properties task pane to see the actual size of the display
(image), and then set the layer to the exact size in the CSS Properties task pane.

Note: Try to match the size of the intended image to the size of the layer created, so that’s
the size you want to make this layer, but if you didn’t know the image size, you can insert
the image in the layer even if it was too small for the image, and it will expand to
accommodate the image. You can then check the actual image size by selecting it and noting
the height and width in the Tag Properties task pane.

To insert an image, choose Insert  Picture From File and select an image from your hard
drive. When you choose an image, a dialog box will arrive called as Accessibility Properties.
In the Accessibility Properties dialog, you can enter a description of the photo. For this
example, I have entered "photo of Harbor Seals on the beach".

Note: Alternate text entered into the Accessibility Properties dialog is inserted into the
code behind the image and is a requirement for compliance with accessibility standards
because many people use browsers that “read” pages to them and this text provides an
explanation of the image.

Figure 4.7: Setting image information for alt and description attributes

Graphics file types and filters

You can insert many popular graphics file formats into your presentation, either directly or
with the use of separate graphics filters. You don't need a separate filter to insert the
following file formats:

 Enhanced Metafile (.emf)

 Graphics Interchange Format (.gif)
 Joint Photographic Experts Group (.jpg)
 Portable Network Graphics (.png)
 Microsoft Windows Bitmap (.bmp, .rle, .dib)
 Windows Metafile (.wmf) graphics
 Tagged Image File Format (.TIFF)

Let’s add a second layer by clicking the layer icon in the Toolbox and dragging it onto the
page. Then click and drag the layer to position it just below the first layer. Again you can set
the height and width in the CSS Properties task pane. You can also specify the position of
the layer in this task pane. Try to create the following design on your design view according
to the figure 4.8.
 Figure 4.8: Display of the design view of the page after adding two layers

Adding and Adjusting Layers

When continuing with this page design, we'll need to add three more layers, inserting
content into each one, and then in a later step, you can use the CSS Properties task pane to
precisely position them so that the top of each layer lines up perfectly when you're done.

Adding Text

Click to select the Layer icon in the Toolbox and drag in another layer. Use the image below
in figure 4.9 and figure 4.10 as a guides to position each layer on the page, and then copy
and paste the text from any document (as you preferred). Click to place your cursor in the
new layer and this time, choose Edit  Paste Text to open the paste text dialog. This
feature provides more options for how you include formatting when you paste text into
Expression Web. For this example, we recommend the last option: Normal paragraphs
without line breaks.

Figure 4.9: Copy and paste text with formats to a page

Formatting Headline Styles

You can format the headline with a header tag and then redefine the style of the header tag
to change the font and size.
Click and drag to select the headline you just added: Harbor Seals Lounge on California's
Beaches.
From the Common toolbar choose Heading 1 <H1| and the text will automatically resize and
become bold. See the figure 4.10 for details.

Figure 4.10: Setup heading for the text on layers

Heading styles offer many advantages, but if you don't like the way they appear, you can
change the style by creating a new CSS Style. To do so, click on the New Style link in the
Apply Styles or Manage Styles task panes.

In the New Style dialog, choose a selector. If you click on the arrow next to the Selector
field, you can choose any HTML tag to redefine its appearance. For this example, choose h1.
Leave the Define in option set to Current Page. (Note, you can also create external style
sheets with Expression Web – you will learn these in the future).

With the Font Category open, set the Font‐Family to Arial, Helvetica, sans‐serif.

In the Font‐size field enter 16 and make sure the size is set to px for pixels. (Note: you can
also choose from many options when specifying font size in Expression Web.)

When you click OK the new style is automatically applied and the headline you formatted
with the h1 tag automatically changes to reflect the new style.
The following figure 4.11 and figure 4.12 show the style dialog for a new style creation for
the intended text to be placed on the page. The options available are self‐descriptive.

You may have experienced that how easy to set‐up a web page by using WYSIWYG type of
IDE where you can design your pages by few clicks. You will feel that design of web page is
similar to preparation of Microsoft word document.

Figure 4.11: Style setup dialog box with options

Note: If your layers aren’t lining up properly, one possible reason is that you’ve created
layers nested inside other layers. As you become more adept with layers, you can use
nesting to group layers, but when layers are nested, their position is affected by the layer
they are contained. You can nest and un‐nest layers in the Layers task pane.

 Open it, by choosing Task Panes | Layers.

 In the Layers task pane, you can click and drag layers to change their
Order.

Align Images

When you add an image to a Web page next to text, the image is automatically placed on its
own line and the text will begin at the very bottom of the image and continue below it as
you see in the following Figure 4.12. If you want your images to be aligned to the left or
right of the page and your text to wrap about them, you'll need to change the alignment of
the image, and the best way to do that is to create a style. For this purpose, we'll create a
class style that can be applied to any element on the page.

1. Choose New Style from the Apply Styles task pane.

2. In New Style dialog, enter .img‐right in the Selector field.
3. Note: All class styles must begin with a dot or period.
4. In the Layout Category of the New Style dialog, set the Float to right.

Figure 4.12: Align images inside a layer with style pane

5. In the Box Category add Margin space, uncheck the Same for all box above Margin and
enter 10 px in the left field and 10 px in the bottom field.
6. Click OK to create the new style.

This will create a little margin around your image so that the text does not bump right up
against the picture. Since we are aligning this image to the right, we're adding a little margin
space to the left and bottom of the image. Notice the CSS box model reference in the
middle of the following Figure 4.13 to help you appreciate the difference between Margins
and Padding. You may also want to create a style called img‐left, with the float set to left
and the margins set to 10 px on the right and bottom.
 Figure 4.13: Creating Box model style

Now that you've created a style to align your image, applying the style is the easy part.

1. Click to select the small image of the seals that you inserted into the layer with the story
and headline.
2. In the Apply Styles task pane, click to select the .img‐right style. The image should
immediately align to the right and the text should wrap around to the left with 10 pixels of
margin on the left and bottom of the image.

4.3.4 Creating Links

Whether you want to create links to pages in your own site or to another Web site on the
Internet, creating links with Expression Web is an easy process.

However, before we can link to another page in our new site, we should probably Create
new page. Here’s a quick review of creating a page to get you ready to create your first links.

1. Choose File New  HTML and a new blank page appears in the central work area.
2. Choose File  Save  give the file a name and click Save.
3. Name the new page seaotters.htm and save it in your main Web site folder.
 Figure 4.14: Creation of new page to link

1. Choose File Properties to give this page a Title and set other page‐wide properties,
such as background colors and margins.

2. For now, we’ll just add some text to this page so we have something here to identify it.
Place your cursor in the top of the work area, enter “Sea Otters,” and format it with an H1
tag.
3. Choose File Save to save this page and we’re ready to create a link to it from the page
we’ve been building.
To switch back to the page you designed in the first part of this lesson, click on the
default.htm tab at the top of the work space. Notice that any time you have more than one
page open in Expression Web, you can switch between pages by selecting the corresponding
tab at the top of the page.

Figure 4.15: Design view of the newly created page

Match your output image to the output figure 4.15 given above. You may use any image and
text.

Now we’re ready to create that link to another page in your site.

1. Click to select an image or section of text that you want to make into a link. For this
example, click and drag to select the Sea Otters text in the small layer in the left side of this
design.

2. Choose Insert  Hyperlink

3. Select the page you want to link to. For this example, select the seaotters.htm page we
just created.

4. Click OK and the link is automatically set.

Figure 4.16: Setup Hyperlink to a page inside the site

Now let’s create a link to another Web site and then preview the page in a browser to test
both links.

To create a link to another Web site, follow these instructions.

1. Click to select the image or text you want to use as the link. For this example, click to
place your cursor in the middle layer, just under the photo of the seals.

Note: It can be challenging to place your cursor next to an image in a layer, but the easy
solution is to first click anywhere on the image to select it, then use the right arrow key on
your keyboard to move your cursor off the image yet keep it in the layer. Then press the
enter key to add a space and you're ready to add your text below the image.

2. For this lesson, enter the words "California Nature Conservancy." The click and drag to
select the text.

3. Choose Insert Hyperlink

4. To create a link to another site, enter the full URL of the site in the Address field. For this
example, enter http://www.nature.org/.

5. Click OK and the link is automatically set.

To test your links, you have to preview your page in a browser.

1. First, save your page by choosing File  Save.

Note: If you are saving this file for the first time and you have used the images provided,
Expression Web will offer to copy those files into your root site folder. Click yes and they will
automatically be copied into your folder.

2. Then choose File | Preview in Browser | and select a browser from the pull out list.

Note: You can preview your pages with Expression Web using any browser available on your
computer. Testing your pages in different browsers is an important part of ensuring your
pages will work for the broadest audience on the Internet.

4.3.5 Create a table

Let’s see the steps of creating a table by using Expression Web. In Design view, place the
insertion point where you want to insert the table.

Do one of the following:

 On the Table menu  click Insert Table.

 On the common toolbar, click Table button and then use your pointer to draw the
table.

You can either “draw” or insert a table. Insert table allows you to set up # of rows/columns,
alignment, and border size, padding, and spacing. If the border size is 0, the table structure
(lines) will not appear in the browser.
 Figure 4.16: Table creation dialog box

A table is made up of rows and columns of cells into which you can insert text, graphics and
other HTML. You can customize your tables in a variety of ways to make them more
attractive and easy to read. You can add a new style for the table by using style wizard as
shown in figure 4.17.

Figure 4.17: Create style for the table

By right clicking in the table you can see the “table” properties wherein defaults can be
changed for column width, colors applied to borders, etc.

It is recommended for professional design appearances that the table be conservatively

executed. Otherwise, the website has a cartoon‐like or undesirable amateurish effect.

Cell padding and spacing give relax room to text in a table so that text in adjacent columns
don’t touch.

Figure 4.18: Alter table properties

To add a cell to a table

 Place the insertion point in the cell next to where you want to add a cell.
 On the Table menu, point to Insert, and then click Cell to the Left or Cell to the
Right.

To add a row to a table

 Place the insertion point in the row above or below the row that you want to add.
 On the Table menu, point to Insert, and then click Rows or Columns.
 Click Rows, and then type or select the number of rows you want to add.
 Under Location, specify if you want to place the row above or below the selected
row.
To add a column to a table

 Place the insertion point in the column next to where you want to add a column.
 On the Table menu, point to Insert, and then click Rows or Columns.
 Click Columns, and then type or select the number of columns you want to add.
 Under Location, specify if you want to place the column to the right or left of the
selected column.

Tables can be layered inside each other. This method allows you to position text, images,
links more accurately.

When putting a table inside a table, insert the table from the menu. Drawing a table inside
another table may cause problems. An example of multiple tables is shown at right. Lines
remain in this table to show positioning, etc.

4.3.6 Creating thumbnails

Sometimes a picture can be too large for a website where both in memory (which takes too
long to download) as well as in size. There is a wonderful feature allowing you to create a
thumbnail picture (smaller size in memory as well as physically for the website)

1. Right click in the picture. Left click on the prompt for the Auto Thumbnail.

2. A smaller image appears on the screen. There is a link on the image which allows the
viewer to see a larger image of the page. The link is to the image file, not a web
page.

When saving the web page, you will see that a new file for the smaller image is created. It
has the word “small” after the original file name.

To keep your website files organized, you may wish to change the folder so that it will be
stored with the larger sized image. Click on the “Change Folder” to select the correct folder.
Download Microsoft Expression Web :
https://www.microsoft.com/en‐us/download/details.aspx?id=36179

Activities:
1. Watch the video demonstration given below while following the exercises
given on those demonstrations.
a. https://www.youtube.com/watch?v=ii02z1TQzE4
b. https://www.youtube.com/watch?v=v9xmSsRi87g
c. https://www.youtube.com/watch?v=RUmoFRA-0Po
d. https://www.youtube.com/watch?v=JoULTPvrKmE
2. Follow the tutorial given below.
a. https://www.tutorialspoint.com/microsoft_expression_web/microsof
t_expression_web_quick_guide.htm
3. Perform activities done in the previous lesson by using Microsoft Expression
Web environment.
4. Do a survey on finding similar IDE’s available in the market.
5. Do the exercise you perform in this lesson by using Adobe DreamWeaver IDE
if it is available for you. (Otherwise, use similar free IDE available in the
market)
Note: Here, you have to investigate the similarities of those widgets,
wizards and options.