Advanced Features of Web Design
Q What is intellisense in Microsoft Expression Web?
Ans: - Intellisense is the Code View functionality
that automatically gives you code suggestions as
you author your pages, thereby streamlining your
coding process. It detects what you are typing and
displays an alphabetically sorted list of all available
properties, tags and values to choose from
according to the compatibility with the current
context of the code.
QWhat does Intellisense provide?
Intellisense provides
● Auto-insertion of end tags, end braces and
value quotes.
● Context-sensitive shortcut menus that list and
can insert code that is compatible at the
current point in the code.
● Context-sensitive ScreenTips that list
variables, functions, or parameters that are
compatible at the current point in the code.
● Code hyperlinks, which enable you to click
hyperlinks or references to classes, external
CSS files, and script functions to open or go to
the source of these items.
Q Give steps to write code in the Microsoft
Expression Web? Or Give steps to write code in
intellisense?
Ans:- The steps are:-
To understand how to use it, do the
following:
1) Create a new HTML page.
2) Select Code View.
3) Place the cursor after the <body> tag.
4) Type angle bracket < to open the tag. Notice
the list of elements displayed (image
below).
5) Select a element from the list, for example: h1.
6) Now place the cursor after the element and
press spacebar. Notice the list of attribute
related to this element is displayed. Select align,
(notice the attribute added), select =
on your keyboard. Notice the value corresponding
to this attribute is selected. Select
Center.
7) Close the tag using >. Notice the end tag is
automatically added.
Container tag - <h1>my web page</h1>
Empty <hr/>
Q How to activate the intellisense option in
Microsoft Expression Web? Or in Which menu
option you find an intellisense tab?
Ans:- To view IntelliSense settings, do the
following:
1) Select Tools > Page Editor Options….
2) Select the tab IntelliSense.
Notice the settings. Note that you need additional
technical expertise to work with this
area. Do NOT change any setting here.
Q What are add-in?
Ans An Expression Web Add-in, is an external software
package that provides additional or enhanced functionality
within Expression Web. Add-ins extends the capability of
the main program by adding enhanced custom commands
and specialized features.
Q Name some popular websites for downloading add-ins?
ans-
[Link]
[Link]
[Link]
[Link]
Q How to install add-in in the software?
Ans- Once you have downloaded an Add-in, use the
following procedure to install the Add-in:
1) Select Tools > Add-ins. The Manage Add-ins dialog box
appears.
2) Select Install…. Browse and select the Add-in and then
click Open.
3) Select Yes.
4) Repeat the procedure to include more Add-ins.
Q What are snippets?
Ans Snippets are the small reusable codes which can be
placed in a HTML document. It can be HTML code, CSS,
JavaScript.
Q How to insert a Snippet in the webpage?
Ans:- To insert a snippet, do the following:
a) Create a new page. Place the cursor where you want
the snippet to be placed.
b) Select View > Page > Code. (Snippets can be inserted
only in Split or Code
View).
c) Expand HTML, expand Hyperlink folder.
d) Double-click on a snippet, for example: Add to favorites.
Notice the code is
added to the web page.
e) Save and preview this page in browser (F12). Switch to
MEW and see the source
code.
Q give the full form of MEW?
Ans: Microsoft Expression Web
Q what is a web template?
Ans:- A website template is basically a premade webpage
— or set of webpages — that can be customized with
images, videos and other style elements to create a
complete website. Using website templates can be a fast,
easy way to build a website for a small business or for
personal use — and there’s a wide range of options
available.
Q What is PSD templates?
Ans PSD-PhotoShop [Link]
● They are attractive
● They are presentable
● They are Simple design and easy to use
● You can import certain parts (or layers) or entire
images into your website using MEW
● Given here is a list of websites where you can find
Photoshop templates (some of themare free!):
○ [Link]
○ [Link]
Q What are the steps to import PSD templates and update
the source?
Q What is page transition and what are the steps to do
this?
Ans Page Transitions is the effect that can be given on
transition of page or website. We can apply special effects
to web pages just as in presentation software.
To add transitions, do the following:
1) Create a new page, save the file as [Link].
2) Select Format > Page Transition…. The Page
Transitions dialog box
3) You need to select an event to which the effect should
be applied. Select Site Enter
from Event: dropdown and select Circle In from Transition
effect: list.
4) Type 5 in Duration (seconds): box and click OK.
5) Save and preview this page in browser (F12). Switch to
MEW and see the source
code.
Note: Page Transitions will work only on Internet Explorer
5.5 or above.
Dynamic Web Templates(DWT)
Templates help you organize the entire website to have a
consistent look and feel. This is
very helpful when you work with large number of web
pages.
On your website, you may have some common items
displayed on all pages such as the logo, copyright &
organization details, navigation menu, etc. but the content
may vary on each page. Here, you can create a dynamic
web template (DWT) with fixed positions for common
elements and modifiable designated portions on each web
page.
Unlike standard templates, Dynamic Web templates have
the following features:
1) When you update the DWT, all web pages in the
website are automatically updated to
changes.
2) You can create multiple DWT and keep changing just
the template that affects the
entire website.
3) You can allow only specific portions of the pages to be
edited instead of whole web
page resulting in better control and reduced chances of
mistakes. This feature is very
useful when multiple developers work on the same
website.
Creating a Dynamic Web Template
To create a dynamic web template, do the following:
1) Create a new web page (to be used as template).
2) Add common elements such as a logo (picture),
company name, copyright notice at
the bottom of the web page, etc.
3) You need to add editable regions and that will be the
only area in which the content
can be modified. To create editable region, do the
following:
a) Place the cursor where you need to place content
(remember, this will be the
only area where the content can be placed or changed).
Right-click and select
Manage Editable Regions…. The Editable Regions dialog
box appears (figure
below).
b) Type a name, for example: Content. Click Add.
c) Click Close.
4. Select File > Save. Select Dynamic Web Template from
the Save as type:
dropdown menu (figure below). Type a file name, for
example: MyTemplate and click Save
Using a Dynamic Web Template
You have created a DWT template. If you want to create
web page based on this
template, do the following:
1. Select File > New > Create from Dynamic Web
Template…. (figure below)
2. Notice the template displayed in the list. Select the
template, for example:
MyTemplate and click Open. A web page based on this
template will be created and displayed.
3. Notice that you are able to type content only in the
editable region specified earlier
and rest of the area are not editable. Now type some
content in the “Content” area.
Save this page as a normal web page. For example,
[Link].
4. Create at least 2-3 pages based on this DWT. Save the
files.
Editing a Dynamic Web Template
When you edit the DWT, it automatically updates the
changed layout to all the pages
created using the DWT (for example, when you want to
change to a different layout or
update the company logo without affecting the content).
To edit a DWT, do the following:
1. Locate the Dynamic Web Template you created earlier
(it will be displayed with the
file extension .dwt) and double-click on it.
2. Now add another editable region by placing the cursor
elsewhere in the web page.
Name the region as “Photos”.
3. Now save this DWT (CTRL+S). Notice the message
displayed
4. Select Yes. Automatically all the web pages created
using this template are updated.
5. Open any of the web pages created using this template
and notice the changes.
6. Insert an image in the “Photo” region. Save the web
page.
Sometimes you may have to use a completely different
layout for entire website. In such
cases you can create a new dynamic web template and
associate all the web pages to this
new DWT. This in turn will (in no time) apply the new
structure to all the web page
eliminating the need for making layout changes to each
web page!
To create a new DWT and associate all web pages (or
selected web pages), do the
following:
1. Create a new DWT by swapping the “Content” and
“Photos” regions:
a) Create a region for “Photos” (at the top)
b) Create a region for “Content” (below Photo)
2. Save this as DWT with a new file name, example:
MyTemplate02.
Note: You need to include the region names as the
content has to be retained but placed
according to the new layout. Use the same region names
when you want to work with
different DWTs. Otherwise content may not swap properly
leading to issues.
Now, to use this new DWT, associate the web pages to
the new template.
1. Select all the web pages ([Link]) using the folder
view (left pane). Use
CTRL+Click to select multiple pages.
2. Select Format > Dynamic Web Template > Attach
Dynamic Web Template…
3. Attach Dynamic Web Template dialog box appears
4. Select the second template, for example:
MyTemplate02 and click Open.
5. Notice the results displayed. Content from “Photos” and
“Content” are automatically
swapped based on the new template.
Remove DWT association with selected or all web pages
When you no longer need to use DWT or are using a
HTML editor that may not have
support for DWT, you can detach the DWT linked with
selected or all web pages.
Note this procedure only removes the relationship and is a
one-way process. Content and
the layout are left undisturbed. However if you want to
associate with a DWT you need to
start all over again! If you decide at some point to remove
the relationship of DWT and
selected or all web pages, do the following:
1. Select all the web pages ([Link]) using the folder
view (left pane).
2. Select Format > Dynamic Web Template > Detach from
Dynamic Web Template.
3. Notice the message displayed, select Close.
TILL PAGE 124
