Scribd
Upload
752 views

Advanced Features of Web Design PDF

Uploaded by

Ayush srivastava
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
752 views

Advanced Features of Web Design PDF

Uploaded by

Ayush srivastava
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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.

Q​What 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-

http://msdn.microsoft.com/en-us/expression/jj873995.aspx

http://www.webassist.com/go/xweb-add-ins

http://www.expressionextras.com/products/lightbox.htm

http://www.dotnetcurry.com/ShowArticle.aspx?ID=534

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 Templates.because

● 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!):
○ http://www.psdtemplates.com/templates/
○ http://www.freepik.com/free-psd/web-templates

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 trans.html.


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,

Page01.html.

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 (Page0x.html) 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 (Page0x.html) 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

You might also like