Notes

Chapter - 4: Advanced Features of

Web - Design

Q 1. Snippets
Snippets are pieces of programs re-used by most developers. Snippets are useful as you can
keep reusing the code created many times across multiple web pages or web sites saving
enormous amount of time and effort.
To view and insert the available snippets, do the following:
1) Select Panels > Snippets. Notice the list of snippets available separated into
categories such as CSS, HTML, JavaScript, JQuery, etc.

Steps 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 2. Page Transitions
You can apply special effects to web pages just as in presentation software. This helps present
special effects to visitors.
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 appears.
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.

Q 3. SEO
Search Engine Optimization or SEO refers to the process that affects the website visibility or
ranking when displaying search results. Search Engines search contents of a web page and
create indexes to display results.
Anatomy of a Search Engine
Search engines crawl a website (and hence referred to as Spiders) to create index of
content. This index helps find a matching web page or link based on keywords entered by
visitors.
Search engines index the following components of a web page:
1. Page Title (only the first 70 characters are displayed in search results!)
2. Page Description (at least first 156 characters are displayed in search results!)
3. Page Keywords
4. Page headers (H1)
5. Links to other pages
6. Strong text (bold)
7. Phrases
8. ALT Text in images
9. And many more….

SEO Checker to understand what needs to be optimized for a better ranking.

1. Select Tools > SEO Reports…. SEO Checker dialog box appears
2. Select All Pages, and the select Check .Notice the results

Q4.CSS Templates
When you design websites, you don’t have to design a web page from scratch. You can use
templates that are available for free or a free to save time and efforts. Though you have learnt to
create templates using HTML editors, you can still find and use creative designs for your
websites.

CSS Templates or XHTML/CSS Templates these templates look attractive while meeting certain
standards. Following is a list of websites that offer such templates for your reference
www.free-css.com, www.openwebdesign.org etc.

To use a CSS template, do the following:

1) Visit any of the website mentioned above (or use a search engine to locate one)
2) Browse and select a template.
3) Most website provides an entire site structure consisting of web page(s), style sheets and
accompanying images as a single compressed package. Download the compressed file and
unzip them to a folder. Also you may notice a link for live preview that allows you to view the
template in action before downloading. Always check the design before you download.
4) Once you download open the homepage. Homepage is usually titled with names as
index.htm, default.htm or home.htm.

Q.5 Add-in
Add-ins extends the capability of the main program by adding enhanced custom
commands and specialized features. You can download a variety of Add-ins from:
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
Of Course, Use Google to find more Add-ins!
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.

Q6.Web authoring tools

1.​ KompoZer:- KompoZer is an open source WYSIWYG HTML editor. KompoZer complies
with the W3C's web standards.
2.​ Dreamweaver:- Adobe Dreamweaver is another popular authoring tool used widely.
Adobe Dreamweaver supports a variety of scripting languages such as JavaScript,
VBScript, ASP.NET, PHP, etc. apart from standard support for HTML & CSS.

Q7. Web Hosting

When you want others to see your content designed using HTML, you need to host the content
in a web server to be viewed by the public. There are several free web hosting providers that
provide free web space for your content.
Web hosting providers usually allow publishing through FTP Some web hosting providers allow
other methods such as SFTP, WebDAV, etc. which you can use to upload your website.

Q8.Code optimisation

Before you publish, you need to cleanup your web page for any unnecessary code that can
result in reducing page size. This in turn will help in faster downloads. You can use the in-built
optimizer tool to remove unnecessary code by:
1) Select Tools > Optimize HTML…. The Optimize HTML dialog box appears.
2) During development you may have left behind some code such as comments. These might
have to be removed before you present the website to an audience. To do so, select All HTML
Comments in Remove Comments section and then select OK. All the comments will be
removed automatically.

To optimize a web page, do the following:

1) Open an existing page (at least 5-10 KB in size, record the size for comparison).
2) Select all the items under Remove Components list.
3) Click OK. Notice the difference in file size.

Q9. DWT

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.
you can create a dynamic web template (DWT) with fixed positions for
common elements and modifiable designated portions on each web page.
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.
If you have used Dynamic Web Template to create the website, check for updates made to the
template. Also you can update all the pages by selecting the Format > Dynamic Web Template
> Update All Pages option to ensure all page layouts are up to date.

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.

Q10.Working with CODE View

Though most tasks can be completed using GUI, at times you may have to insert code
manually (for example when you want to integrate with your website, a third party web
application, provided as code).
IntelliSense is a feature that automatically provides you a list of codes and attributes as a
popup when you work in the code view mode. 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.
 Though code view can be difficult to use in the beginning, once you have adequate practice,
you will gain total control of the coding environment!
To view IntelliSense settings, do the following:
1) Select Tools > Page Editor Options….
2) Select the tab IntelliSense.

Q11.Webserver
A web server functions to accept browser requests, generate responses, maintain the web
apps, and accept the client data and return websites as requested by the client.

web server is a program that runs on a computer connected to the Internet. It is simply a
computer with an Internet connection that runs software designed to send out HTML, DHTML,
XML or Java based pages and other file formats such as multimedia files. Web server can refer
to either the hardware or software or combination of both which helps to deliver web content
that can be accessed through the Internet