replacing frames without php

Replacing Frames without PHP

Linda KerleyUser [email protected]

The problem spaceSearch Engine Optimization

Search engines don't understand HTML frames. Search engines also don't understand JavaScript.

Any content that is not ‘present and visible’ when a page arrives at the client will not be indexed.

BackgroundOften frames and JavaScript are used in

combination to:

Blend static and dynamic elements within a single page

Handle navigation Provide other related behaviours, e.g. style

change to show current menu position, etc.)

Potential SolutionsAJAX

Client-side, typically uses <iframes>, doesn’t solve indexing problem.

PHP Server-side. Solves problem... But you need to learn the language.

SHMTL Server-side features with standard HTML. Very little learning involved.

SHTML approachProcess is very similar to converting to

PHP.We will:

Use server-side includes to manage static and dynamic page content***.

Use good, old-fashioned hyperlinks for page navigation.

Keep our JavaScript behaviours, but move them to a different event-handler (onload, etc.)

Preliminary StepsWeb hosting support:

Verify that host supports SHTML files. Verify web server type, Apache or MS server. (Optional) verify that you can upload

an .htaccess file. Review:

Current directory/file organization. Current page layout re: static versus dynamic

elements, reuse versus unique content.

Frame example

Branding area

Left naviga

tionContent

area

<html>

<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Frame Sample</title></head>

<frameset framespacing="0" border="1" rows="234,*,29" frameborder="0"> <frame name=“branding-area" src=“branding-area.htm" scrolling="auto" target="_self" marginwidth="2" marginheight="1"> <frame name=“left-nav" src=“left-nav.htm" scrolling="auto" target="_self"> <frame name=“page-content" scrolling="no" noresize target="contents" src=“page-content.htm" marginwidth="2"> <noframes> <body>

<p>This page uses frames, but your browser doesn't support them.</p>

</body> </noframes></frameset>

</html>

‘Static’ reuse branding element

Page-specific content

Dynamic, reuseleft navigation

Index file serves as ‘parent’ container.

Server-side include example

Branding area

Left naviga

tion

<html><head> <title>Individual web page</title></head><body> <div id="brandingArea">  </div> <div id="leftNav">  </div> <div id="pageContent"> <h1>Page Title</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. </p> </div> <div id="footer">  </div> </div></body></html>

‘Dynamically inserted’ branding element

Parent conceptdisappears. Websiteconsists of individual pages.

Dynamicallyinserted’left navigation

Content area

Conversion Steps1. Name files that will contain includes with

.SHTML extension.2. Setup include files. 3. Insert references to includes.

1. Name individual pages SHTML

Each file that contains includes receives the .SHTML extension. (‘S’ tells the server to parse the file and execute any commands it finds before sending the file to the client.)

2. Setup include files

• Each layout area that is reused in the individual files gets its own include file.

• You can give the include file any extension you want.

• Each include file should contain only the HTML needed to render that layout section. Strip out HTML, HEAD, BODY tags.

• If includes are called from files at different levels in the directory hierarchy, use absolute file references for image content and other files.

3. Insert include references<body> <div id="brandingArea">  </div> <div id="leftNav">  </div> <div id="pageContent"> <h1>Page Title</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. </p> </div> <div id="footer">  </div> </div></body>

• Syntax varies by webserver.• Use ‘virtual’ for Apache.• Use ‘file’ for MS IIS.

• IIS doesn’t support file references that are ‘above’ the calling file in the directory structure. With Apache the file references can be anywhere.

• You can use nested includes with Apache.

• Dreamweaver can provide SSI previews.

<!--#include virtual="../includes/left-nav.ssi“ - ->

Issues Usability issue of ‘unfamiliar’ file extension. For existing websites, loss of page rank at rename of file.

Use 301 redirects to preserve page rank, or ... Instead of renaming your files, use mod_rewrite in your .htaccess file

to instruct the server to treat your old file names as .SHTML files. Sample: AddType text/x-server-parsed-html .htmlOr...

Use ‘XBitHack’ to instruct server to parse files.

Doing server-side includes can negatively impact performance (time to render page). Confine SHTML pages to only those files that require it. (Don’t

rename every file on the site just to be consistent.)

Other (positive) impactsYou regain back button navigation.You regain the ability to bookmark

individual pages.

Useful toolsLynx: shows how a search engine views

your website pages.Google webmaster tools.

Diagnostics tools identify issues with website development.

replacing frames without php

Documents