Scribd
Upload
322 views

Class XII - Chapter 4

Class XII- Chapter 4

Uploaded by

ramyashan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
322 views

Class XII - Chapter 4

Class XII- Chapter 4

Uploaded by

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

Chapter - 4: Advanced Features of

Web - Design
4.1 Code View, Add-Ins, Snippets ad Page Transitions

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.

114
Figure-4.1

3) Notice the settings. Note that you need additional technical expertise to work with this
area. Do NOT change any setting here.

Add-ins

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.

Note: Add-ins may need to be installed through a special procedure. Refer to Add-ins help
file for detailed instructions.

115
Using 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.

Figure-4.2

2. 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.
Note: You may require following additional instructions for some of the snippets listed
here. Refer to the help file for detailed instructions.

PSD Templates
As a web designer, you need to create pages that are attractive and simple. Remember
that along with showcasing content to a visitor and the design also needs to be pleasant,
encouraging them to repeat their visit to the website.
When it comes to Web design, you need to maintain a balance between visual design and
code. Though it is possible to create simple web designs using standard HTML, it is

116
always a good practice to research on good designs. Components of some of the
attractive websites are usually created using Adobe Photoshop and later integrated into
the web site for additional functionality such as text content, forms, etc.

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

You can browse, select, download and use these files. Refer to website terms and
conditions for license information.

LINK PSD & MEW

Also there is a special feature that can be used for updating an image whenever the
original (.PSD) Photoshop image is modified. To understand how to use this feature, do
the following:

Import a .PSD (Photoshop files use this extension) file and do the following:
1) Create a new web page, save the file as psd.html.
2) Select File > Import > Adobe Photoshop (.psd)….
3) Browse and select the file. Click Open. Import Adobe Photoshop File dialog box
appears (figure below).

Figure-4.3

4) You can select the layers you want to import using the options in the left pane. Select
Compatibility Image located at right bottom and click OK.

117
5) Click Save when prompted.
6) Right-click on the image, notice the menu item Adobe Photoshop (.psd) (figure
below).

Figure-4.4

7) You can update this image whenever the original image is updated by selecting
Update from Source…. This is possible because MEW maintains a link between the
image and the original source. This is one feature that is useful for both web
developers (who write code) and web designers (who design sites)!

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
(figure below).

Figure-4.5

118
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.

Exercise:
Perform the following activities till you are confident:

S. No. Activities
1. Download and use the following Add-ins:
a) PayPal ecommerce Toolkit
b) WordPaste Add-in
c) Insert Bing Map Add-in
So think DHTML Menu Addon
2. Include different snippets in web pages created in earlier sessions.
3. Set the following transition effects for each web page created in
earlier sessions:
a) Random dissolve
b) Blend
c) Box Out
d) Split horizontal in

Assessment:
Answer the following questions:
Q1. Explain the purpose of Add-ins.
Q2. List any three website that offer Add-ins for download (use Google).
Q3. Explain the purpose of snippets with an example.
Q4. Explain the procedure to import a PSD file with an example.
Q5. Explain the purpose of Page Transitions with an example.

Fill in the blanks:


1. Add-ins is available _____ menu.
2. Snippets can be accessed from ________ menu.
3. PSD can be imported from _____ menu.
4. Page Transitions is available _____ menu.

119
4.2 Dynamic Web Templates

Relevant Knowledge

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.

120
Figure-4.6

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

Figure-4.7

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)

Figure-4.8

121
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.

Figure-4.9

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 (figure below).

Figure-4.10

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.

122
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…
(figure below).

Figure-4.11

3. Attach Dynamic Web Template dialog box appears (figure below).

Figure-4.12

123
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.

Exercise:
Perform the following activities till you are confident:

S. No. Activities

1. 1. Create a dynamic web template using the following guidelines:


 Use a table to link different pages in a website for navigating to other
pages.
 Use a table for the content area.
 Insert copyright notice at the bottom and a hyperlink to the
homepage (default.html)

Assessment:
Answer the following questions:
Q1. Explain the purpose of dynamic web template with an example.
Q2. Explain the procedure to link and remove DWT with multiple pages.

Fill in the blanks:


1. Acronym for DWT ___________________________.
_____________________ from the Save as type: dropdown menu should be used for
creating DWT.

124
4.3 SEO - Search Engine Optimization
Relevant Knowledge
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. As a web developer, you need to understand how
search engines work and how to get better search ranking. SEO Checker built-in with the
HTML Editor gives detailed reports that help you optimize the website for better ranking.

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….

Note: You need to learn more about SEO before taking decisions on optimizing a website.
You need to refer to the SEO process of each search engine at their respective websites.
However, you can use the SEO Checker to understand what needs to be optimized for a
better ranking.
1. Select Tools > SEO Reports…. SEO Checker dialog box appears (figure below).

Figure-4.13

125
2. Select All Pages, and the select Check .Notice the results (figure below).

Figure-4.14

You can click on each message displayed in the list to find out and fix related issues.
For example for a message as “The Description is missing”, you can add a
description using the META tags to correct it. Once errors are identified and fixed, run
the SEO Checker again to confirm if the website is optimized.

Exercise:
Perform the following activities till you are confident:

S. No. Activities

1. Verify the website created earlier using SEO Checker.

Assessment:

Answer the following questions:


Q1. Explain the purpose of SEO.
Q2. Explain the purpose of SEO Checker with an example.

Fill in the blanks:


1. Acronym for SEO ____________________________________.
2. SEO reports can access from _______ menu.

126
4.4 Forms - Advanced

Relevant Knowledge
So far, you have been using HTML and CSS for creating simple web pages. These are
referred to as Static Web pages. While static web pages are good enough for creating
basic web sites, you need to learn and use technologies such as ASP, PHP, etc. for
creating dynamic websites. Dynamic Websites allow visitors to search and locate
information (such as a search feature of search engines or database listing), submit
information (such as feedback, rating, voting) etc.

Advanced Forms
You can create a fully functional form using MEW. Data filled using a form can be stored in
a database or sent to a specific email address. But these features require proper support
from the web hosting provider, primarily the support for FrontPage Server Extensions.

Special Note:
FrontPage Server Extensions is a technology that provides special functionalities on web
servers created using Microsoft FrontPage or Microsoft Expression Web. Though this
technology was used for over a decade, it is considered obsolete due to the evolution of
other equivalent or better technologies. You may still find a few web hosting providers
extending their support to this almost obsolete technology.
Microsoft Expression Web replaced Microsoft FrontPage. Most of the activities in this
module can also be done using Microsoft FrontPage. However, Microsoft FrontPage has
a limited support for recent developments in web technologies such as CSS3, HTML5,
etc. Yet, you can use form functionalities outlined in this module if your web hosting
provider supports only FrontPage Server Extension.
If you want to create a form for your Intranet or if your web hosting provider supports
FrontPage Server Extensions, you can use procedure in this session to create the form,
configure it to save the data in a database and later publish it to the remote computer.

Web Server
You can use the web server in-built with the operating system. Windows includes IIS
(Internet Information Services) in both client and server operating systems. IIS in-built with
client operating system such as Windows XP, Vista & 7 is usually sufficient for websites
having few visitors. You can install IIS on Windows Vista & 7. Use the help file for detailed
instructions.

Note: FrontPage Server Extensions is not available in Vista / Windows 7 & Windows
2008. You may download an evaluation copy of FrontPage Server Extensions (FPSE)
from www.iis.net. Some web hosting providers still give support for FPSE and you will be
able to publish using FPSE.

127
Creating Forms
You can create forms and use additional functionalities of MEW. To create a form and
store the details in a database, do the following:
1) Select File > New > ASP and save this page as dform.asp.
2) Insert a form and add the following:
a) Insert Input (Text), for visitor’s name.
b) Insert Input (Text), for visitor’s email address.
c) Insert Drop-Down Box, for collecting visitor’s favorite color.
d) Insert Input (Submit).

Now your form should look similar to the one below:

Figure-4.15

You need to customize this form before it is displayed to the visitor. Now to customize
the fields, do the following:
3) Double-click on the first Input (Text) field. Type Name in Name:, click OK.

4) Double-click on the second Input (Text) field. Type Email in Name:, click OK.

5) Double-click on the drop-down box. Drop-down Box Properties dialog box appears.

6) Since you are collecting details of visitor’s favorite color, you need to add dropdown
values for visitor to select.

a) Notice there is a default dropdown with null value (no value); you can remove
that by selecting Remove.
b) Click Add…, Type Red in Choice:, Click OK.
c) Click Add…, Type Blue in Choice:, Click OK.
d) Click Add…, Type Green in Choice:, Click OK.
e) Now change the Name: (Select1) by replacing the text to Color.

128
Figure-4.16

7) Click OK.

Creating a Database

To save the details collected from the form, you need to have a database with
corresponding fields ready. MEW can create a database for you and link these fields to the
database automatically. To create and link the database automatically, do the following:
1) Right-click on the form, select Form Properties. The Form Properties dialog box is
displayed.
a) Select Send to database (Note: Requires FrontPage Server Extensions).
b) Select Options…. The Options for Saving Results to Database dialog box
appears (figure below).

Figure-4.17

129
c) To create the database, select Create Database…. MEW automatically creates
an Access database (only format supported for automatic creation). Click OK to
close the popup.

Figure-4.18

2) Select Saved Fields tab. Note the fields are mapped from form to database
automatically. Click OK twice

Figure-4.19

Now the form is ready but you need to publish the form to a server that supports
FrontPage Server Extensions; otherwise this form will not work. Once publishing is
complete, you can use the published URL to view the webpage.

Publish the Form to a Website


Note: Forms are published automatically along with other files in a website.
1) Select Site > Publishing Settings….

130
2) Select Add….
a) Type a friendly name in Name:
b) Select FrontPage Server Extensions from Connection Type: dropdown menu
c) Type the remote location, for example: www.example.com
d) Type the credentials (Username and password) provided by the hosting provider.
e) Click Add.

3) Click OK.

4) Select Site > Publish All Files to…NAME (IP address of the server or computer
that supports FPSE).

Note: Publishing may take some time.

Viewing the Webpage

Visitors can now view the website or webpage. When they click on the URL that takes
them to the form, the form will appear.

Figure-4.20

Visitors can fill the form by entering the details and when they click submit, they will see a
confirmation page similar to the one below:

Figure-4.21

131
The database is stored in a special folder with the name fbdb; this folder is hidden for
security purposes and is not accessible to visitors.

You can open this database using your database software to view or modify information
within this database. This could be useful when you want to collect all the email addresses
and send a newsletter to visitors.

Note: Use Windows Explorer to navigate to the folder that contains this website if you are
using a web server within LAN; Access database is stored in a special folder named fpdb.
If you are using MEW, then the access database can be retrieved from the fpdb folder in
folder list view.

Exercise:
Perform the following activities till you are confident:

S. No. Activities
1. Create a detailed form for the following fields and configure it to save the details
in a database.
a) First Name
b) Last Name
c) Age
d) Email Address
e) Favorite Car (Include at least three different vendors, allow selection
through Checkboxes – Single Selection)
f) City (Create a list and display using a dropdown menu)
g) State (Create a list and display using a dropdown menu)
h) Pin Code
i) Comments

Assessment:

Answer the following questions:


Q1. Explain the procedure to create a form that will be saved in a database.
Q2. Explain the purpose of FrontPage Server Extensions.

Fill in the blanks:


1) ________ is the product was replaced by Microsoft Expression Web.
2) Acronym for IIS ____________________________.
3) Create Database option is available in _____________________ dialog box of form
properties.

132
4.5 Publishing Webpages or Websites - I
Relevant Knowledge
Preparing for publishing
Before you publish a website, you need to verify the website’s functionality. Hyperlinks
(internal & external) should be checked and replaced if necessary. Given here is a list of
standard procedures to be followed prior to site publishing.

Examining Structure of a website


Create a visual diagram of hyperlinks of a website. This helps you understand the
navigation structure or to trap any broken links. To view the structure of a website, do the
following:
1) Open the website
2) Select View > Site > Hyperlinks. Notice the visual diagram (sample below).

Figure-4.22

3) You can further expand and understand the links to other pages. Select the plus
symbol next to the link ( ). Notice the results displayed (figure
below).

Figure-4.23

133
Estimating Size of a website

If you know the size occupied by files in a website, you can determine if you have
sufficient web space (as allocated by an ISP) or even determine the time. Time taken to
download before visitor can view the web page..

1) Select View > Site > Site Summary (figure below).

Figure-4.24

2) Notice the results displayed (sample below). Look at the list of items analyzed and
given below Name, Count, Size and Description.

Figure-4.25

Removing slow pages

You can now decide to remove items that may possibly slow down a page.

1) Select Site > Problems > Slow Pages (figure below)

134
Figure-4.26

2) By default, HTML editor assumes and displays only the pages that take more than 30
seconds to load. You can change the value to 3 seconds to list web pages that take
more than 3 seconds to download. Select 3 Seconds from the dropdown (figure
below).

Figure-4.27

3) Notice the results displayed (sample below).

Figure-4.28

HTML calculates based on two parameters; the amount of bandwidth and time taken to
download within the set bandwidth. To modify this setting, do the following:
1) Select Tools > Application Options…. Application Option dialog box will be
displayed (figure below).

Figure-4.29

135
2) Select Reports View tab (figure below)

Figure-4.30

3) Notice the values of “Slow Pages” take at least and Assume connection speed of
(indicated in kilobits per second)
Note: This is not YOUR connection speed. This refers to the connection speed available at
the web hosting end.

DWT

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.

Code Optimization

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.

136
Figure-4.31

Fixing Errors
Before you publish the website, you need to verify if there are any pending issues. This
helps you save time and unnecessary problems that may arise post publishing the
website.

To verify and fix (if there are any errors), do the following:
1) Open the Website.
2) Select Tools > Recalculate Hyperlinks. The Recalculate Hyperlink dialog box is
displayed (figure below).

Figure-4.32

3) Click Yes. If there are any issues, they will be automatically fixed.

137
Exercise:
Perform the following activities till you are confident:

S. No. Activities
1. Create a visual diagram of any of the websites created earlier. Share it with your
classmates.
Optimize the HTML code in your website, remove all unnecessary code

Assessment:
Answer the following questions:
Q1. Explain the procedure to create a visual diagram of a website.
Q2. Explain the purpose of Site Summary with an example.
Q3. Explain the purpose of Code Optimization with the procedure.
Q4. Explain the procedure to fix errors in a web page automatically.

Fill in the blanks:


1) Structure of website can be viewed using ____ option in ____ drop down menu of
____ menu.
2) Site summary is available in ____ dropdown menu of ____ menu.
3) Optimize HTML is available in _____ menu.
4) Recalculate Links is available in _____ menu.

4.6 Publishing Webpages or Websites - II

Relevant Knowledge

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. Though there may be restrictions
on the total web space or advertisements posted within your website, the web space is
usually sufficient for hosting small websites or practicing HTML! Use Google or other
search engines to find a free web hosting provider.

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. Some of them allow other methods such as SFTP (secure FTP), WebDAV,
FrontPage Server Extensions, etc. and these are detailed usually in the page that displays
various plans for comparison.

138
For web pages created using HTML, you can use any provider that supports FTP.

Note: You can also use your own web server if you have a 24/7 active Internet connection
and a static public IP address. Though you need to host the content in a web server for
others to view, web pages made with HTML can be viewed from even a folder on your
computer by sharing the folder in a LAN environment. Share the folder and provide the
UNC path for others to view.

Publishing your website

Once you have created the website, you need to publish it to computers that will be
available 24x7 for visitors to view. When you sign up with a hosting provider, generally,
you will be given multiple options to publish the content such as FTP, WebDAV,
FrontPage Server Extensions, etc.

To publish a website using FTP, do the following:


1) Open the website that you need to publish.
2) Select Site > Publishing Settings…. The Site Settings dialog box appears.
3) Prior to publishing, you need to add details such as the destination computer’s IP
addresses or domain name, settings and credentials. For example if you have signed
up with a web hosting provider who has given you an IP address 192.168.1.200 and
FTP as the method for publishing, do the following:
a) Click Add…. The Connection Settings dialog box is displayed.
b) Enter the following details:
(i) Type a name in the Name: textbox (usually your domain name or
destination computer name or IP address of the destination).
(ii) Select FTP from the Connection Type: dropdown menu.
(iii) Hosting providers will provide a path for publishing, for example:
ftp.domainame.ext. Type the path in Location: textbox.
(iv) Specify the folder where the content will be stored (Usually directory is
auto-selected for websites, use this only if required).
(v) Enter the username and password in Credentials: section. This will be
used when you publish from the HTML editor. Generally multiple files are
transferred simultaneously between HTML editor and destination resulting
in faster transfers. Leave this setting as it is or contact hosting provider for
this detail only if required.
(vi) Click Add.

c) Notice the change in the Publishing tab (figure below) indicating the remote site
is added to the list.

139
Figure-4.33

4) Click OK.

Now MEW is ready with the remote site settings for publishing content. Whenever you
want to publish (first time or periodic updates), do the following:

5. Select Site > Publish All files to [NAME].

Note that it may take a while for publishing the content depending on the number of
files, the size of each file and the connection speed (Upload) you have. Once
uploaded, MEW will indicate successful or failed publishing through a popup message
similar to the one below.

Figure-4.34 Failed Publishing

To view the website, do the following:


1) Open the web browser.
2) Type the web server IP address, for example: 192.168.1.200.
3) Select Go. Notice the website displayed in the web browser.

140
Web Packages
Another method to take your website to a remote computer is by using the Web Package
feature. You can use the Web Package feature to transfer contents of your entire website
(preserving the structure) to a remote computer. This is useful when you want to send your
website (including the complete structure) for being hosted from a remote computer or, if
the existing structure is to be used for creating another website.
To export existing website to a web package, do the following:
a) Open the website
b) Select Site > Export to Web Package…. (figure below).

Figure-4.35

3) Export Web Package dialog box appears.


4) You can select individual files or folders or, package the entire website. To package
the entire website,
a) Place the cursor at the top (image above). Click Add. Notice the entire website is
added to the right pane.

Figure-4.36

141
b) You can use a friendly name for this package. Select Properties…,and the Web
Package Properties dialog box appears.

c) You can enter company name, author, a suitable title for this package. External
dependencies: has a list of external resources that this website uses. This is
helpful when you are using any files, folder or links that need to be verified before
sending the package to someone.
(i) Enter a title in Title: textbox, for example: WEBPACKAGE.
(ii) Enter a description in Description: textbox, for example: created using
MEW.
(iii) Enter your name in the Author: textbox
(iv) Click OK.

Figure-4.37

5. Click OK.

6. When prompted to save this Web Package, type a filename for example:
MyFirstWebsite_DATE. Click Save. Notice the result displayed (figure below).

7. Click OK.
Navigate to the folder where you saved this web package and notice the entire website
packed as a single file (figure below).

142
Figure-4.38

Note: Replace the Date by specifying current date or a version number to easily identify
the package.

Importing Web Package


If you want to import this web package on another computer, do the following:
1) Create a New Site (Empty Site), name this website for example:
MySecondWebsite.
2) Select Site > Import > Import from Web Package… (figure below).

Figure-4.39

3) Browse and select the Web Package, select Open. The Import Web Package dialog
box appears (figure below).

143
Figure-4.40

4) You can either select individual files or folders, or the entire website. Click Import.

5) Select Yes to All.

6) Click OK.

Now you can edit web pages within this website. Also you can keep a copy of the Web
package as a backup for future use.
Backup Websites

It is a highly recommended practice to take periodic (daily, weekly, etc.) backups of


websites either using special backup tools or publishing it to another internal source.
Whenever you attempt to perform an update on a website, ensure you take a backup of
the current site before touching it.
If you only have HTML content (static web pages), use the following procedure to take a
backup of the website:
1) Go the location where your website is stored (default location is My Documents).

2) Select the folder that has the complete website.

3) Copy and paste it in another location such as a pen drive or to a folder on another
computer.

144
Exercise:

Perform the following activities till you are confident:

S. No. Activities
1. Compare different hosting providers using the worksheet below:
Feature Provider 1 Provider 2 Provide 3
ISP
Monthly Price
Setup Fee
Disk Space
Monthly Traffic
Ads
Languages
ASP
PHP
Databases
Access
MySQL
Microsoft SQL
Email
POP3/SMTP
IMAP
Web Mail
Sub-Domains
Templates
FTP Access
Statics IP Address

Assessment:
Answer the following questions:
Q1. Explain the procedure to add a remote host for publishing.

145
Q2. Explain the procedure to publish a website with an example.
Q3. Explain the purpose of Web packages with an example.
Q4. Explain the procedure to backup a website with an example.

Fill in the blanks:


1) Publishing Settings is available in ____ menu.
2) Web package option should be accessed from _____ menu.
3) Import from Web Package is available in _______ dropdown menu of ____ menu.

4.7 Authoring Tools


Relevant Knowledge
You have learnt to work with Expression Web in earlier sessions. There are a variety of
other web authoring tools available for use and most of them have similar functionality.
Some of the popular authoring tools are discussed in this module.

KompoZer
KompoZer is an open source WYSIWYG HTML editor. KompoZer complies with the
W3C's web standards.
1) Download KompoZer from www.kompozer.com.
2) Follow the on-screen instructions and complete installing the software.
3) Select Start > Programs > KompoZer.

Figure-4.41: KompoZer version 0.8b3

Note: Screen grabs are from kompozer-0.8b3.en-US.win32 (Version).


Now you have installed, create & save pages and view them using different web browsers.

146
To create a page using KompoZer, do the following:
1) Select File > New…. The Create a new document or template dialog box is
displayed (figure below).

Figure-4.42

2) Select A blank template, select Create.


3) Type some content, select Source to view the source code.
Use the help file (F1) to learn about using KompoZer.

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.
1) Download Trial edition of Dreamweaver from adobe.com.
2) Follow the on-screen instructions and complete installing the software.
3) Select Start > Adobe > Dreamweaver.

Figure-4.43: Adobe Dreamweaver CS6

Use the help file (F1) to learn about using Adobe Dreamweaver.

147
Exercise:
Perform the following activities till you are confident:

S. No. Activities

1. Download, install and work with Net Objects Fusion.

Assessment:

Answer the following Questions


Q1. List any three web authoring tools.
Q2. Compare the features of at least two web authoring tools.

Fill in the blanks


1) Examples of web authoring tools are (list three):
a) ______________________________________________________________.
b) ______________________________________________________________.
c) ______________________________________________________________.

4.8 CSS Templates

Relevant Knowledge

Designing a good looking interface can be quite difficult at times as it requires creativity.
Also you need to learn additional software to create such designs while focusing on
delivering websites that are standard complaint.

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

Instead of creating dull and boring websites, you can use templates that are available on
the Internet. Popularly referred to as 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:

 http://html5up.net

 http://www.cssportal.com/css-templates/

 www.freecsstemplates.org

148
 www.free-css.com

 www.templatemo.com

 www.oswd.org

 www.openwebdesign.org

 and many more….

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.

Note: Some website may require you to sign up and even have certain terms and
conditions. Check the website for requirements.

Customizing Templates

You can use a simple text editor to modify the template. However, if you find it difficult, you
can use an HTML editor such as MEW. Also note that if the template is of a recent
standard and if the HTML editor does not support that standard, entire template will
appear distorted. Confirm if the HTML editor support the standard used in a template.

To work with a template using MEW, do the following:

1) Launch MEW.
2) Create a New Site (always test the template in a new website).

3) Copy all the files from the template folder. (or use import wizard).
4) Paste in within the HTML editor (You may receive prompt for files to be overwritten,
click yes).

5) Open the Homepage (index or default.htm) (sample below).

149
Figure-4.44: Cool Web Template from CSSPORTAL.COM

6) Customize the website.


7) To view the source code, select View > Page > Code.

Following is provided as a courtesy:


CSS can also be used for developing attractive navigation menus (sample below).

Figure-4.45; Sample Navigation Menus

You can use CSS Tab designer (http://www.highdots.com/products/css-tab-designer/) to


create navigation menus such as the ones above.

150
Exercise:
Perform the following activities till you are confident:

S. No. Activities
1. Download a CSS template. Use this template as a design for the website
created in earlier sessions.
2. Download CSS Tab designer, create a navigation menu for a website.

Assessment:
Answer the following Questions
Q1. Explain the purpose of using CSS templates.
Q2. Explain the procedure to download and use a template in an HTML editor.

Fill in the blanks:

1) List any three websites that offer free CSS templates (write complete URL).

a) ______________________________________________________________.

b) ______________________________________________________________.

c) ______________________________________________________________.

151
152

You might also like