Michele Gaggia - Web Design - Lesson 5

Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5

• Web Design - Page Layout
  • Page Layouts using Templates
  • Graphic Text
  • Separators and other Graphic Elements
  • Navigation Elements, Menus and Interactive Images
    
    
• Web Design - Adding Content
  • Media Files Download and Streaming (Audio, Video)
  • Document and File Downloads
  • Web Gallery
  • Dynamic Content: a News page using BLOGGER

Web Design - Page Layout

Page Layouts using Templates

A Template (Vorlage) is a special HTML document created by Dreamweaver which is used to generate similar web pages sharing the same basic design. You can define which areas (Regions) are "editable" and which parts remain unchanged across pages. You can make a template out of any HTML page: just use save it as a template ("Datei > als Vorlage speichern") and add the editable regions. Templates can be used both for no-frames as well as for frames layouts. Within a web project they are always stored in the subfolder "/web/Templates/".

Parts of the HTML document that remain the same across pages (non-editable) typically are:

• the general page layout, including structure, background, main table, etc.
• the website logo and main title
• the website main navigation menu
• the page footer

Regions that change across pages (editable) typically are:

• the HTML page title displayed by the browser
• the "visible" page title
• the "main" text/picture area of the page where information is added
• ev. the sub menu of the page

Beside standard Editable Regions it is also possible to add Optional Regions, Repeating Regions, Optional Editable Regions, etc. Some of these options are particularly useful when creating dynamic (script-based) websites, for example a web store.

Exercise: 8.1: Dreamweaver - create a new HTML Template for a Layout with No-Frames

• in Dreamweaver choose the Site "Framesets and Templates" you created for working with Framesets. If you have not created this yet, follow the instructions in Exercise 7.3 (Lesson 4)
• create a new standard HTML file (Strg+N, "Allgemein > Einfache Seite > HTML")
• add a main table for the layout (for example: width set to "750" pixel, "5" rows and "1" column, cell padding, spacing and border set to "0")
• place the table it in the middle of the page, selecting it and then choosing "align > center" from the properties toolbox
• save the page as a template (menu "Datei > Als vorlage speichern"), choose the website project "Framesets and Templates" and name it "standard noframes"

Non-Editable Regions:

• add a graphic logo and page title in the 1st row on the left side (you can create it in Fireworks and save it inside "Framesets and Templates/web/img/", then add it in Dreamweaver with [Ctrl+Alt+I])
• add a standard navigation menu in the 2nd row middle (for example: Home | Über mich | Projekte | Downloads | Galerie | Kontakt)
• later you will add links to these pages by opening this template again and clicking on the link symbol to the page names you created (the pages might be called index.htm, about.htm, projects.htm, downloads.htm, gallery.htm, contact.htm)
• type in the text for a standard footer in the 5th row (for example: "© 2003 Vorname Nachname - alle Rechte vorbehalten")
• set some standard CSS-Styles within the document (option "this document only"):
  • for the tag body you could define main background and text color, or a background picture
  • for the tags p, td, li you could set font face "Verdana, Arial, Helvetica, sans serif", same size "12", color of your choice
  • for the tags h2, h3, h4 you could have set font face "Verdana, Arial, Helvetica, sans serif", size "22", "18" and "14", bold, colors of your choice
  • you could add a custom style .tinytext with font face "Verdana, Arial, Helvetica, sans serif", size "10" or "9" and color ev. grey, to use for the copyright line in the footer (you have to manually apply the style to that line)
  • with the CSS-Selector define colors for standard, visited, active, and hover links (a:link, a:visited, a:active, a:hover)

Editable Regions:

• edit the browser page title (open menu "Modifizieren > Seiteneingenschaften" - [Strg+J] )
• add the standard and ev. the optional Editable Regions as in the example below (define a new Region with "Einfügen > Vorlagenobjekte > Bearbeitbarer Bereich" [Strg+Alt+V] and call it "page title", "main", etc.):
  
  

  graphic logo - website title
  main navigation menu
  page title (editable)
  sub menu (optional editable)	main (editable)
  page footer

  
  
• save again the template [Ctrl+S] and close the file [Ctrl+W]

Exercise 8.2: Dreamweaver - create pages from an existing Template

• create 6 new HTML documents from the template you created in Exercise 8.1 (Strg+N > "Vorlagen > Site Framesets and Templates > standard noframes")
• save each of the files as a new HTML document [Strg+S] inside the current project and call them index.htm, about.htm, projects.htm, downloads.htm, gallery.htm, contact.htm
• edit the browser pages title (open menu "Modifizieren > Seiteneingenschaften" - [Strg+J] ) and rename it in something like "Vorname Nachname - Home", "Vorname Nachname - Über mich", "Vorname Nachname - Projekte" etc.)
• edit the Regions "page title" and rename it "Home", "Über mich", "Projekte", "Downloads", "Galerie", "Kontakt"
• edit the Regions "main" and add the main text and pictures (for example "welcome to ..." and a personal portrait created in Fireworks for the "Home" page, your curriculum for the "Über mich" page, a list and description of projects for the "Projekte" page, etc.)
• save again each page [Strg+S]

Exercise 8.3: Dreamweaver - modify a Template and update and related pages automatically

• open the original Template created in Exercise 8.1
• apply changes, for example:
  • update the main menu entries and link them to all generated HTML pages correctly)
  • add/modify the CSS Styles
  • change the text formatting for the non-Editable and the Editable Regions
  • if you want, modify header (website logo), footer, the background color and other layout elements
• save the Template again and update all related pages
• all pages generated from this template will now be modified accordingly (new menu links, CSS-Style, formatting, layout, etc.) without affecting the text/pictures etc. inserted in the Editable Regions

Exercise 8.4: Dreamweaver - create a new HTML Template for a Layout with Frames

• If you are working on a layout with frames, you can create a separate template for each frame; however, as the topFrame and leftFrame will usually remain unchanged across pages, it might be enough to create just a template for the mainFrame.
• to start, follow the steps described in Exercise 7.3 (Lesson 4) and create a simple layout based on three frames; follow the instructions up to the point where you would save the files, then ...
• select the page border with the mouse pointer and save the frameset [Strg+Shift+S] as "index.htm" in your root project folder (directly under /web/); note: the frameset cannot be saved as a Template!
• select the mainFrame with the mouse pointer (just click inside it) and save it as a separate Template (menu "Datei > Als vorlage speichern"); name the Template same as the frame ("standard mainFrame")
• define editable regions (for example in the mainFrame: "page title", "main" - see Exercise 8.1)
• save the Template again
• now you can just create a new "mainFrame" from the mainFrame Template (Strg+N > "Vorlagen > Site Framesets and Templates > standard mainFrame>) and then modify it as desired; you can also later modify the Template and update all generate pages automatically, as described in Exercise 8.3

Graphic Text

Fireworks

For larger text elements such as website title, page title, chapter title etc. it is recommended to create the text as a graphic file in Fireworks. Advantages:

• it is possible to use any desired font, also non-standard ones (normally we would be restricted to use the few standard serif, non-serif and monospace fonts commonly available on all systems);
• titles and other important text elements will look exactly the same regardless of platform and browser used;
• the graphic text will be displayed without aliasing artifacts (font anti-aliasing is not turned on by default on some system: as a result, larger fonts might look "jagged" on the screen of some systems).

Tips: save the file as GIF there are only few colors, and sharp contours; JPEG if the background is complex (for example a picture) or there are many shadings.

Exercise 9.1: Fireworks and Dreamweaver - create a set of graphic page titles

• create a new file [Strg+N] of 240 x 240 pixels and set the background color so that it matches the Dreamweaver background of the page you are creating the titles for
  Tip: you can copy colors between Dreamweaver and Fireworks if you copy/paste the web color index displayed by Dreamweaver (page properties [Strg+J]) and Fireworks (menu "Modifizieren > Leinwand > Leinwandfarbe") in the color properties toolbox.
• make the grid visible (menu "Ansicht > Raster > Raster zeigen")
• enable the "snap to grid" function (menu "Ansicht > Raster > Am Raster ausrichten")
• edit the grid so that it is set to 30 x 30 pixels (menu "Ansicht > Raster > Raster bearbeiten")
• using the text tool, create a new text box
• write a set of page titles aligned vertically, for example "Home", "Über mich", "Projekte", "Downloads", "Galerie", "Kontakt"
• choose a desired font and set the size to "24"; set the distance between lines to "30" pixel (standard is 100%) in the properties toolbox
• edit the text properties (font type, fill color, etc.) as desired
• you can optionally add "live effects" such as shadows, glow, 3D etc. (properties toolbox, "Effekte" > "+")
• set the text alignment to the left or the right, depending on where you plan to position your titles in the web page
• position the text carefully so that no part is going over the grid lines (use the arrows to move the text block one pixel at a time)
• with the slice tool (K) create a set of slices, one for each title; the slices should be all of the same size, running along the grid lines, and the width should be defined by the longest title
• with the crop tool (C) cut the canvas so that there is no free space around the defined slices
• go to the Export Preview dialog box [Strg+Shift+X] and set the following:
  • file format (usually GIF for text, WebSnap adaptive)
  • in case of GIF, a transparency mode (alpha or index)
  • if transparency is set to index, pick the background color in the preview pane wiht the "+" pipette to set it to transparent
  • if set to alpha, the background should automatically be set to transparent.
• Export the titles graphics (menu "Datei > Exportieren ..." - [Strg+Shift+R]), set the folder as your current project, subfolder /web/img/ and set a name for the graphic files (such as "pagetitle01.gif" and for the HTML layout file (optional)
• in the Export dialog box, you can click "Optionen" to define additional properties for the HTML and graphic files (useful when creating menus)
• back in Dreamweaver, you can now insert each page title in the single HTML files [Ctrl+Alt+I]

Flash

Alternatively, you can create simple (non-animated) Flash text elements directly in Dreamweaver. Also Flash text will display correctly on any platform (the fonts are embedded and Flash uses internal anti-aliasing), provided a working Flash PlugIn is installed in the browser used to view the page. Nowadays almost every browser on every platform comes with a Flash PlugIn already installed.

Exercise 9.2: Dreamweaver - add Flash text

• open a standard HTML page in Dreamweaver
• select "Interactive Bilder > Flash Text" and follow the instructions in the dialog box; you can set:
  • text font, size and color
  • text options (bold, italics)
  • text alignment (right, center, left,)
  • the text message to be displayed
  • optionally, a hyperlink and target
• save the flash text in the same directory of the HTML file

Separators and other Graphic Elements

Separators

When dealing with pages that contain a lot of text information it is convenient to separate each main chapter with a separator line. Instead of using the standard HTML separator (tag: <hr> - Dreamweaver: menu "Einfügen > Horizontale Linie") it might be nicer to create separator lines that match the website style and design. You should just make sure that the width of the separator does not exceed the layout table in which it is inserted.

Exercise 9.2: Fireworks - create a graphic line separator

• check the maximum width available within the table cell where you want to insert a separator, for example, "550" pixels
  (note: if the table is using cell spacing or padding, the available widht in pixel is reduced).
• create a new file [Strg+N] of "550" pixel width and about "20" to "40" pixel height
• with the rectangle and ellipse tool, create any separator shape you like
• you can join elements with the "join paths" command (menu "Modifizieren > Pfade kombinieren > Vereinigen")
• modify filling and outline color properties as desired (you can also use textures, special outline options, etc.)
• add live effects such as shadows, glow, 3D etc. as desired (properties toolbox, "Effekte" > "+")
• go to the Export Preview dialog box [Strg+Shift+X] and set the following:
  • file format (usually GIF for text, WebSnap adaptive)
  • in case of GIF, a transparency mode (alpha or index)
  • if transparency is set to index, pick the background color in the preview pane with the "+" pipette to set it to transparent
  • if set to alpha, the background should automatically be set to transparent.
• Export the separator graphic (from the Export Preview choose "Exportieren", set the folder as your current project, subfolder /web/img/ and set a name for the separator (such as "separator01.gif")
• back in Dreamweaver, you can now insert the separator in any page as desired [Ctrl+Alt+I]

Other Graphic Elements

Similarly you can create graphic elements for the page header (logo), footer, sub navigation menu, etc. Always check in Dreamweaver the available table cell width and ev. height before defining the canvas size in Fireworks.

When creating a graphic header for the page including a logo, you might want to try combining pictures, shadings and graphic text elements in Fireworks. You can see some example of logos and website designs at http://www.xenostyle.com/webdesign/index.shtml

You can also choose to create all the main page layout and design in Fireworks, then use the slice tool (Segmentierwerkzeug - [K]) to define the different graphic elements and finally export to Dreamweaver all graphic files including an HTML file which contains the layout table.

Navigation Elements, Menus and Interactive Images

With a combination of Java-Script and graphic files created in Fireworks and/or Flash it is possible to create buttons and other graphic elements that change their appearance depending on the mouse pointer action. There are 4 standard button conditions: Up, Over, Down and OverDown.

• The Up condition is how a button looks without any mouse action
• The Over condition is how a button looks when the mouse pointer is moved over it. This condition informs the user that clicking with the mouse will have a reaction.
• the Down condition is how a button looks when it is clicked with the mouse. In a navigation bar this also represent the link that is currently active (= the page currently displayed)
• the OverDown condition is how a button in the Down condition looks when the mouse pointer is moved over it. This is an optional condition and it is not always required.

The part of the graphic which is changing is not necessary the same that the mouse is pointing at: it is also possible to create behaviors (Verhalten) in which one image is clicked but another area is modified.

Navigation Elements

To facilitate navigation within a page or across pages, you might want to add additional navigation arrows for "next page", "previous page" and/or "top of page" links. You can use:

• simple text links
• text links with a CSS-Style mouseover effect
• simple graphic buttons
• graphic buttons with a mouseover effect.

To create a CSS-Style mouseover effect you just have to add a new CSS-Style called "a:hover" with the style selector and then define a different color for this state. You can also define additional properties like text font, size, underline, bold, italic, etc (however, this is not recommended, as the text will change size in mouseover state and move all the rest of the text around).

To create button mouseover effects it is first necessary to create the different button states (Up, Over, Down, OverDown) in Fireworks, then to apply a rollover Java-script Behavior (Verhalten) in Dreamweaver and apply the different images for the different button states. Often it is enough to create just two states and use one for Up and the other for both Over and Down (see for example http://www.ulg-neue-medien.moz.ac.at/index/index.html)

To make a "Top of Page" link you must first set an Anchor on the top of page [Strg+Alt+A], name it "top" and then link the "top" arrows or "top of page" text to it (set the link to "#top" in the properties panel). It is often convenient to place these links just before a HTML or graphic separator line (see for example http://www.ulg-neue-medien.moz.ac.at/lehrende/index.html)

Navigation Menu

A navigation menu is a set of links in form of text or graphic buttons. It can be horizontal, vertical or freely placed using Fireworks or Flash to create the layout. The links can be as for other navigation elements text, text with CSS mouseover, graphic buttons and buttons with mouseover. Using Flash it is also possible to create buttons with complex animations.

To create a graphic navigation menu you should first check the size available in Dreamweaver and then create a new document in Fireworks where to place the graphic buttons.

To add Flash buttons in Dreamweaver it is enough to select from the menu "Einfügen > Interaktive Bilder > Flash-Schaltfläche", then you have to:

• choose a button style (you can add more styles from the Internet)
• type in the button text
• format the button text (font type and size)
• set a hyperlink
• save the button as a .swf file

Exercise 9.3: Fireworks and Dreamweaver - create a navigation menu

• create a new file [Strg+N] of 600 x 20 pixels and set the background color so that it matches the Dreamweaver background of the page header you are creating the titles for
• make the grid visible (menu "Ansicht > Raster > Raster zeigen")
• enable the "snap to grid" function (menu "Ansicht > Raster > Am Raster ausrichten")
• edit the grid so that it is set to 20 x 20 pixels (menu "Ansicht > Raster > Raster bearbeiten")
• using the text tool, create a new text box
• write a set of page titles aligned horizontally separated by a "|" or "::" (for example: Home | Über mich | Projekte | Downloads | Galerie | Kontakt)
• choose a desired font and set the size to "12" or "14"; edit text properties (font type, fill color, etc.) as desired
• you can optionally add "live effects" such as shadows, glow, 3D etc. (properties toolbox, "Effekte" > "+")
• set the text alignment to the center
• with the slice tool (Segmentierwerkzeug - [K]) create a set of slices, one for each title; the slices should be all of the same size, and the width should be defined by the longest title
• go to the Export Preview dialog box [Strg+Shift+X] and set the following:
  • file format (usually GIF for text, WebSnap adaptive)
  • in case of GIF, a transparency mode (alpha or index)
  • if transparency is set to index, pick the background color in the preview pane wiht the "+" pipette to set it to transparent
  • if set to alpha, the background should automatically be set to transparent.
• Export the menu graphics (menu "Datei > Exportieren ..." - [Strg+Shift+R]), set the folder as your current project, subfolder /web/img/ and set a name for the graphic files (such as "navmenu01.gif" and for the HTML layout file (optional)
• in the Export dialog box, you can click "Optionen" to define additional properties for the HTML and graphic files (useful when creating menus)
• back in Dreamweaver, you can now insert each page title in the single HTML files [Ctrl+Alt+I]

Web Design - Adding Content

Media Files Download and Streaming (Audio, Video)

Audio

Uncompressed audio in CD quality (44.1 kHz 16-bit stereo) requires 1411 kbit/s (or 176 kByte/s) and is therefore using way too much bandwidth even for an ADSL connection (max 768 kbit/s). Compressed audio formats such as MP3 and RealAudio make it possible to stream audio in realtime from a website using a single or dual ISDN connection (64 or 128 kbit/s) or, in case of RealAudio, just a modem connection with 56 kbit/s or less.

MP2 and MP3 (MPEG Audio Layer 2 and 3) are between the most popular audio formats on the web. Originally developed by the Fraunhofer Institute in Germany for digital audio broadcasting, they allows almost CD quality with about 1/10 of the bandwidth. Typical rates are:

• 64 kbit/s (mono)
• 128 kbit/s (stereo) - playable in realtime with dual ISDN connection
• 192 kbit/s (stereo) - almost CD quality using good encoders

You can encode WAV, AIFF or any other mono/stereo file into MP3 files using programs such as Steinberg Wavelab, Quick Time, etc.

Playback of MP3 files is supported natively by most modern computer platforms (with Windows Media Player on Windows, or with Quick Time on MacOS). You can also install additional freeware programs like WinAmp (http://www.winamp.com).

Adding MP3 downloads to a HTML page is easy: you just have to place the files in a subdirectory (for example /media/ and link the relevant text or button for download/playback to the desired MP3 file. Most browsers will launch the appropriate player automatically. Using the right mouse button (or Ctrl-click on the Mac) on the link and choosing "save target as" it is possible to save the MP3 file in a specific folder instead.

RealAudio (by RealNetworks) is another popular format, especially for streaming low quality audio over limited bandwidth connections (for example with an analog modem) or for online radios, as it uses a proprietary streaming technique that allows live broadcasting.

At low bitrates it sounds better than MP3 and using reduced audio bandwidth and mono it is possible to add streaming audio with as little as 32 or even 20 kbit/s. At higher bitrates MP3 sounds better than RealAudio, so there is no point in offering high bitrate RealAudio.

You can encode WAV, AIFF or any other mono/stereo file into RealAudio using the shareware program CoolEdit 2000 (Syntrillium) or specific tools by RealNetworks.

Playback of RealAudio files is only possible with its proprietary RealAudio player. There is still a free download available at http://www.real.com (follow the links for the RealOne free player).

RealAudio files cannot be linked directly. To allow RealAudio streaming you have to proceed as follows:

• create a .rm file using an appropriate encoder (like CoolEdit or RealProducer) and save it as "youraudiofile.rm"
• create an empty simple text document using a standard text editor (such as Notepad)
• in the text document, type in the full URL where the .rm RealAudio file will be saved, for example "http://www.yourdomain.com/media/youraudiofile.rm"
• save the text file as a .ram file in the same folder where the RealAudio .rm file is placed (for example inside the /media/ folder) using a similar name (for example "youraudiofile.ram")
• upload the .rm and .ram files to your account
• if you use an FTP client, make sure to upload the .rm file in binary mode and the .ram file in ASCII mode
• now link the .ram file (the text file) to any button or text link you specify on your page
• if a RealPlayer is installed on the client computer, it will load automatically when clicking on the link and start streaming the RealAudio file.

Video

In the case of video, bandwidth is even more of a problem. Until recently, only videos at very limited resolutions using reduced frame rate and high compression could be played in real time. Since the introduction of ADSL, it is also possible to play back movies using special compression formats such as MPEG4 or DIV-X in realtime.

MPEG (Motion Picture Expert Group) video is one of the most popular compressed video formats.

• MPEG 1 is often used for medium bandwidth video streaming, or Video CDs.
  Typical resolution for Internet streaming is 192 x 144 pixels and about 256 to 512 kbit/s. These bandwidths are compatible with ADSL.
  Typical resolution for Video CD quality is 352 x 288, 44.1 kHz audio and about 1200 kbit/s.
• MPEG 2 is used for higher bandwidth video streaming, and is also the standard format for DVD-Video.
  Standard resolution for DVD quality is 720 x 576, 48 kHz audio and about 6000 to 9000 kbit/s. Because of the relatively high bandwidth required, it cannot be played in realtime on any modern Internet connection, including ADSL.
• MPEG 4 is a new format using a very efficient compression, allowing same quality at lower bandwidths, or higher quality at the same bandwidth. It allows almost DVD quality over an ADSL connection.
  MPEG 4 will also be the basis for the new HD (high definition) video DVDs.
• DIV-X is another new format using very efficient compression, with similar quality as MPEG 4.

You can export to MPEG 1 or MPEG 2 formats (choosing different resolutions and bitrates) using video editing programs such as Pinncle Studio, SonicFoundry Vegas, Adobe Premiere, iMovie, Final Cut Pro, etc.

Playback of MPEG 1 and MPEG 2 files is supported natively by most modern platforms (with Windows Media Player on Windows, or with Quick Time on MacOS).
MPEG 4 is also supported natively by QuickTime, while on Windows it is necessary to install an additional MPEG4 codec to allow playback with the Windows Media Player.
DIV-X video always requires the installation of an additional codec or player (available for download at http://www.divx.com/divx/ )

Generally it should be enough to upload your MPEG movie in the /media/ folder and link it directly with the text or button of your HTML page: the default player (Windows Media Player, QuickTime Player, etc.) should load automatically and start playback after buffering part of the file.

QuickTime is a proprietary, high quality video format. The newest versions feature 3GPP and 3GPP2 file formats which are based on MPEG4 and that require an installed QuickTime player for playback (available for download at http://www.apple.com).

RealVideo is also a proprietary video streaming format. Requires the RealPlayer for playback (the same used for RealAudio). It also support different MPEG video formats playback.

For Internet it is more recommended to use MPEG1 or 4 video formats, as they are compatible with a larger number of players.

Document and File Downloads

To set download for MS-Word documents, PDF files, ZIP compressed folders, Executable files (Programs) etc. is easy: just place the file in a subfolder of the website (for example /docs/ or /files/ ) and link it to the relevant text or button in the HTML document. Usually the standard program associated with the file type will open after the download. If a PDF PlugIn is installed, the PDF file will open directly inside the browser.

Web Gallery

To create a Web Gallery it is necessary to have both an overview page with picture thumbnails (small format, about 120 x 90 or 150 x 100 pixels) as well as detail pages with the larger graphic files (about 300 x 200 up to 450 x 300). Each detail page should have a link back to the overview page and ev. a link to the previous and the next picture.

To see how a typical web gallery is structure you can visit http://www.klangsteine.com/gale_e.shtml or http://www.didgeridoo.at > Picture Gallery.

Dreamweaver offers an automated script to generate a web gallery by just entering a directory full of pictures: it automatically resizes the pictures for the thumbnails using Fireworks, it creates the overview page and the detail pages.

• prepare a folder with the pictures to be processed
• in Dreamweaver, choose menu "Befehle > Webfotoalbum erstellen"
• set the options for source folder, destination folder, thumbnail size, file compression settings
• create the web gallery

Unfortunately this function allows no control over the layout and design of the HTML pages. Nevertheless you could use this function to automatically create thumbnails, overview table and detail pages complete with back, previous and next links, then insert the HTML code generated inside pages generated with your own templates, finally save the template generated HTML pages over the "raw" HTML pages.

Dynamic Content: a News page using BLOGGER

While creating a full dynamic website based on a combination of script language (like CGI-Perl, PHP, Microsoft's ASP.NET, MIVA, etc.), a database containing information (Microsoft SQL, MySQL) and visual templates for the graphic layout requires advanced programming skills in the used script and database language, to create a relatively simple dynamic page with web-based actualisation is relatively easy thanks to free online services such as BLOGGER.

Basically BLOGGER offers a browser interface from which you can create, modify and delete "posts" in the form of news, a diary, etc. which are then automatically uploaded to your website using FTP. The uploaded files can be complete HTML pages, or part of HTML code which is then "inserted" in the main HTML page using SSI (Server Side Includes). In this way the HTML page, when requrested by the browser, is quasi created "on the fly" by the server, putting together the main HTML file and adding the extra HTML code generated by BLOGGER.

BLOGGER allows complete customisation of the "look & feel" of the posted messages, so that the BLOGGER page can be perfectly integrated in the general website design (see for example http://www.didgeridoo.at > "concerts" or http://www.translators-fusion.com > "news").
However editing the templates requires good knowledge of CSS-Style type of commands.
Alternatively, there is a large selection of ready-to-use design templates to choose from.

To learn more about BLOGGER and how to set up a news page, please go to http://www.blogger.com, sign up and read the FAQ.
You will require a valid email address to confirm the account registration and a working FTP account to make the posting system work.

Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5

© 2003-2004 Michele Gaggia - all rights reserved