CoffeeCup CSS Menu Designer - Problem Resolved

I have just spent 3 hours trying to understand why the menus built with the Menu Designer would not stand alone but always had the next object, usually a h2 or similar text floating next to it. I followed the advise in the PDF Help Tutorial, ie wrapping the HTML Menu statements with div tag and creating and applying a class with

.center { margin-left: auto; margin-right: auto}

What was needed was the following. I changed margin-left to 8am otherwise the menu was to close to the left.

.center { margin-left: 8am; margin-right: auto; display:inline-block; }

I had tried display: block; as I knew this caused the line break I wanted but it made no difference. I am not familiar with inline-block so I will have to research this, but anyway my menus work as I want now.

- Posted using BlogPress from my iPad

CoffeeCup Code Cleaner not working - resolved

The Tools - Code Cleaner stopped working. I gave up
and ran the Document - Validate HTML which
automatically ran the W3C Markup Validation Service. This had
several messages, one being about the use of lh list
header tag that I had tried when exploring the Insert -
List command. I removed this as it is not part of HTML5
standards and now the Tools - Code Cleaner is working
fine again.

Images not seen online but work on local disk - a solution

Having decided to use my trusted Total Commander to FTP my site I was developing with CoffeCup, see previous item, I was surprised to see photos not displayed after I had published to web. They worked OK when I was accessing pages on my local hard drive.

Agh, then I recalled similar problems in the past that had taken ages to resolve. I have my FTP options set to. Invert any upper case character in a file name to lower case when uploading. A quick edit changing all references to photos to lower case and upload new version and all OK again.


- Posted using BlogPress from my iPad

CoffeeCup only publishes to the root - correction no it doesn't

Corrected post

The reason why I could not upload my website to my target folder was because I was using File - Upload File to Server when I should have been using My Websites - Upload Selected Files or My Websites - Upload Entire Website Project which send them to the folder you have defined as the root in the My Websites - Website Project Settings.

Original post

I use the excellent free Zymic hosting for testing my web developments. I need to have many folders to keep the various projects separate.

I have discovered that CoffeeCup HTML Editor insists on publishing index.html to the root file of my service. I tried for over an hour to get it to publish to my target folder to no avail and on googling discovered that it only puts this file in the root.

So I now publish to my local disk, well I di this anyway, and then use my trusty Total Commander from Ghisler to do FTP work.

Another inelegant solution but at least Total Commander is very fast.


- Posted using BlogPress from my iPad

CoffeeCup multiple views

CoffeeCup HTML Editor does not appear to let you view more than one source page side by side. For example it would be nice to be able to see say HTML code, CSS Code and Page Output all in separate tiled windows.
You can have both files open at the same time but you have to flip from one to the other to see.

I sometimes use TopStyle Lite and open the CSS file in a separate MS Window which I the tile with CoffeeCup window, so seeing HTML and CSS source side by side, but this is an inelegant solution


- Posted using BlogPress from my iPad

CoffeeCup in the Winter Nights

It's that time again when I decide to do some more web development exploration. This year I have set myself the task of comparing high level development using Serif WebPlus X4 to low development with CoffeeCup HTML Editor.

I am going to start simple and make sure I understand every stage. The development will be recorded by keeping older pages on the site as an audit trail.

I will dash notes and findings as they happen on this blog, which I am writing on iPad using BlogPress, and with the wonders of BlogPress these should also be posted on my Twitter.

Nothing fancy just honest toil, mistakes and how to avoid, annoyances and work around and the occasional 'well how about that'.


- Posted using BlogPress from my iPad

Howto Embed Flickr Slideshow into Google Sites (Cont.)

My previous blog showed in detail how to embed a Flickr slideshow into a Google Sites web page.

This blog adds a couple of features,

• Change size of slideshow
• Use Flickr search to select photos

This time the slideshows are embedded into a two column Google Site web page.
flickr-slideshow-extra-01, originally uploaded by rodtuk.

Before using Flickr search, make sure that the search is limited to your own Photostream.
flickr-slideshow-extra-02, originally uploaded by rodtuk.

I have added the search criteria.

Note: What I consider to be my better photographs I tag as A1, so this is just selecting the better photographs of the Millennium Green.
flickr-slideshow-extra-03, originally uploaded by rodtuk.

Click on the slideshow icon to start the Flickr slideshow for the selected photos.
flickr-slideshow-extra-04, originally uploaded by rodtuk.

Display the share options, as described in the previous blog.

To change the slideshow take the customization option.
flickr-slideshow-extra-05, originally uploaded by rodtuk.

Note the default size before customization is 400 x 300.
flickr-slideshow-extra-06, originally uploaded by rodtuk.

I am going to change this to 300
flickr-slideshow-extra-07, originally uploaded by rodtuk.

flickr-slideshow-extra-08, originally uploaded by rodtuk.

Copy the provided HTML.
flickr-slideshow-extra-09, originally uploaded by rodtuk.

Go to your Google Sites web page, edit page and select click on edit HTML tab. Paste the copied code at the relevant position and press Update.

flickr-slideshow-extra-10, originally uploaded by rodtuk.

The new slideshow gadget has been added to my Google Sites web page,

Unlike my previous blog this is using a two column template so the 300x300 slide shows are aligned side by side. You may have to do a bit of editing to align them horizontally.

flickr-slideshow-extra-11, originally uploaded by rodtuk.

There is no indication which slide show it is so I usually add a title which I format to h2 level.
flickr-slideshow-extra-12, originally uploaded by rodtuk.

To move to the other column select the heading and slideshow gadget and cut (Ctrl-X).
flickr-slideshow-extra-13, originally uploaded by rodtuk.

Paste (Ctrl-V) in the other column.
flickr-slideshow-extra-14, originally uploaded by rodtuk.

You may need to change some of the options.

Do as explained in previous post, click on gadget to show options and select the ones you need.

In this case I want to align to the right.
flickr-slideshow-extra-15, originally uploaded by rodtuk.

Now the slide show gadget is in the 2nd column and aligned to the right to match the other 2nd column gadgets
flickr-slideshow-extra-16, originally uploaded by rodtuk.

Save the page to see the final result.
flickr-slideshow-extra-17, originally uploaded by rodtuk.

How to Embed Flickr Sideshows into a Google Sites web page

This blog describes how to embed Flickr Sideshows into a Google Sites web page.


flickr-slideshow-1, originally uploaded by rodtuk.

This first example simply embeds one of my Flickr Sets into a single column Google Sites page.

flickr-slideshow-2, originally uploaded by rodtuk.

Select the Set you wish to embed.

flickr-slideshow-3, originally uploaded by rodtuk.

Click on the Slideshow icon to start Flickr slideshow in the normal manner.


flickr-slideshow-4, originally uploaded by rodtuk.

Click on the Share which is top right of slide show.


flickr-slideshow-5, originally uploaded by rodtuk.

Copy the "Embed HTML" copy button.
flickr-slideshow-6, originally uploaded by rodtuk.

Return to the Google Sites web page, and click on the Edit HTML to display the source HTML code.
flickr-slideshow-7, originally uploaded by rodtuk.

Paste the HTML code into the web page at the position you want.
flickr-slideshow-8, originally uploaded by rodtuk.

Click on the Update button, bottom left.
flickr-slideshow-9, originally uploaded by rodtuk.

Save the changes.
flickr-slideshow-10, originally uploaded by rodtuk.

The outline of the gadget is shown in the Google Sites web page edit. You can modify the defaults by clicking the gadget to show the options at the bottom.

Make any changes you require.
flickr-slideshow-11, originally uploaded by rodtuk.

In this example the Alignment = Centre was chosen.

Save the changes to see the finished page.
flickr-slideshow-12, originally uploaded by rodtuk.

The embedded Flickr Slideshow should appear as shown. To staret the show click on the usual "Play" triangle.
flickr-slideshow-13, originally uploaded by rodtuk.

The final result with the slideshow in progress.
flickr-slideshow-14, originally uploaded by rodtuk.

Move your mouse into the slideshow to reveal the Flickr options.

If you click on the photo you will be taken to the Flickr page for that photo in a new tab.


Click the bottom right icon to start a full page version of the slideshow.


To resume slideshow click Play icon on bottom left.


It is also possible to navigate using the small thumbnails.
flickr-slideshow-15, originally uploaded by rodtuk.

This is the Flickr page for the photo selected as described above.
flickr-slideshow-17, originally uploaded by rodtuk.

Next Blog Post - Two up slideshows & Flickr Search results.

Linking to flickr photos

For ages I have found linking to a single flickr image is awkward. The share section in the slide show links to the slide show, and the share option on photostream link to the page that includes the image but not just the image.

I think I have cracked it now though.

When in the individual photo in your photostream,

Click on the button for All Sizes

This will take you to a web page similar to the one below.

Click on the size you want, and then the image will be displayed, together with HTML code to cut and paste into your web. Also displayed is the URL of just the photo, which is all that I usually need. In the above I have high lighted in yellow the size I want and the resulting URL.

I used this approach to embed these images into this blog article.

Embedded lists within lists in Google docs

I wanted to produce following list which includes embedded list. Solution easy once you know!
Start list by clicking on List in edit bar, and where you want to start the embedded list just click on
Increase Indent icon, and where you want to go back to outer list click on adjacent
Decrease Indent icon.

1. Photos
2. Techniques
   
   1. Classical photography
   2. Digital work flow
   3. Galleries and web creations
3. Equipment
   
   1. Cameras and lenses
      
      1. Digital
      2. Film
   2. Flash and other accessories
4. Other

Google Docs removed Open Link In New Page option - Work around Fix

I embed docs in my Google Sites web pages. Today I discovered that links I had thought opened in a new web page or tab no longer worked, they just opened in existing tab.

On trying to fix this I discovered the option to do this had been removed, as confirmed by a google search and many irate users.

Managed to overcome this by editing html, as explained below.

<a href="http://www.photoethnography.com/ClassicCameras/index-frameset.html?KodakRetina.html" id="ykp7" title="Kodak Retina Series">Kodak Retina Series</a>

By adding command  target="_blank" so that it becomes

<a href="http://www.photoethnography.com/ClassicCameras/index-frameset.html?KodakRetina.html" id="ykp7"  target="_blank" title="Kodak Retina Series">Kodak Retina Series</a>

fixed the problem.

I am just hoping that Google in its wisdom does not extract this html edit in the future.

Howto use bullets in list not offset to left

If you have an image aligned to the left and write text it will flow to the right, as below.


Bulleted list default

• Classic Cameras 
• Kodak Retina Series 

Bulleted list with following style command in ul
 < ul style="list-style-position: inside;"> 

• Classic Cameras 
• Kodak Retina Series 

Since first writing this I noticed that Google Sites will "undo" it if the style command is embedded in <ul>. However if you add it to the CSS then it appears to be kept. 

Kompozer 0.8b3 and GB English Dictionary

By default Kompozer version 0.8b3 (20100301) used US English. To change to UK English I  did following

1. Followed instructions in http://wiki.kompozer.net/index.php?title=Adding_Dictionary to download UK dictionary.
2. Followed instructions on the above page to install.
3. On restarting Kompozer the auto spell check (check as I type) was still showing favourite as wrong and suggesting favorit
4. I had to select the Check Spelling option in the Edit menu where there is an option to select appropriate dictionary,  English / United Kingdom now being available.

Everything now fine.

Google Docs Background Colour

I am using Google Docs to write material which I then intend to embed into Google Sites page. I noitced that in Docs you can now edit the CSS.

So I attempted to change background colour, but this was ignored. So usual googling to find out why and some hits said that you cannot do this. However I came across an article that explained you need to add the !important command to make it work.

This I did and all was fine.

The full CSS instruction was

body {
  background-color: #ccff66 !important;
}

and the the article that describes this can be found here and it is embedded into my Google Site at Kit I should have kept

Serif Webplus X2

Needed to build a quick sample web site for a friends business
so that I could illustrate how he could
advertise his product cheapley yet with a certain
flair. So I did this with my new version of Webplus
and was pleased with result.

NOTE This is first blog entry written on my iPod touch.

Embedded Ordered Lists (ol) corrected

I thought following was W3C valid

    <ol>

      <li>Next page</li>

        <ol >

          <li>Change colours</li>

        </ol>

      <li>Future pages</li>

        <ol>

          <li>Change layout</li>

          <li>Images</li>

          <li>Build menu header</li>

          <li>Create linkage buttons</li>

        </ol>

    </ol>

which constructs

1. Next page
   
   1. Change colours
2. Future pages
   
   1. Change layout
   2. Images
   3. Build menu header
   4. Create linkage buttons

But correct code, or rather code that W3C will pass in XHTML Transitional Validations is

<ol>

  <li>Next page

    <ol>

      <li>Change colours</li>

    </ol>

  </li>

  <li>Future pages

    <ol>

<li>Change layout</li>

      <li>Images</li>

      <li>Build menu header</li>

      <li>Create linkage buttons</li>

    </ol>

  </li>

</ol>

The subtle difference is that the embedded ol is included within the list item of the higher ol.

neat tool to replace html tags with & equivalents

If you want to show html tags in a readers view of the browser you have to use there & equivalent.

This can be tiresome if you have a lot to change.

However this neat little site will do it for you postable

I used it to prepare previous post.

Embedded ordered lists within another ordered list

I thought following was W3C valid

<ol>
<li>Next page</li>
<ol>
<li>Links to other pages</li>
<li>Images</li>
</ol>
<li>Next page</li>
<ol>
<li>Change colours</li>
</ol>
</ol>

Which produces

1. Next page
1. Links to other pages
2. Images
2. Next page
1. Change colours

But although it worked W3C said it was not valid and insisted on 

<ol>
<li>Next page</li>
<li style="list-style: none">
<ol>
<li>Links to other pages</li>
<li>Images</li>
</ol>
</li>
<li>Next page</li>
<li style="list-style: none">
<ol>
<li>Change colours</li>
</ol>
</li>
</ol>

Which produced similar

1. Next page
2. 
   
   1. Links to other pages
   2. Images
3. Next page
4. 
   
   1. Change colours

Keep ul ol tags outside of p tag

Always thought you could embed html list commands within paragraph, but on using w3C validator I see this is not correct. They should be treated like h1 etc

HTML-Kit 292 Tip 002 - Increasing workspace explorer width

The workspace is the window within HTML-Kit which shows folders and files on your disk and/or server.

I became frustrated by the narrowness of this window, so it was difficult to identify files without using horizontal scroll bar. At first could not see how increase this width until I realised that by "grabbing" the top bar and moving mouse you can un-dock the workspace window which you can then float to wherever you want it, inside or outside the main HTML-Kit window.

Once it is in float mode the width can be increase in similar method of dragging a side similar to any other window. You can then re-dock the window on the side by again grabbing the top edge and dragging until pointer is touching HTML-Kit main window edge where it will snap into a docked window again but with the new width.

Following Youtube video shows this in action.

HTML-Kit 292 Tip 001 - Seeing PHP Output

I described stumbling across PHP Processor and how it worked with HTML-Kit in previous post.

One thing I felt was missing was the ability to see the native HTML final code that was presented to browser.

Whilst developing a simple PHP file in HTML-Kit I had the Windows Explorer file folder open in a separate window and I noticed that when I previewed the PHP a temporary .html file was created. This did not show up in the in-built HTML-Kit file window as this has to be refreshed manually.

By opening this temporary file in editor I confirmed it was the output from PHP and I was also able to send this to W3C validator to confirm it was all valid code. Note these temporary files do not last long, so if you want to keep a copy then save it with another name.

I am going to see if I can do a YouTube video showing this in action.

HTML-Kit Build 292 Editor

In an earlier blog entry I discussed editors and tools for developing web sites. I had originally dismissed HTML-kit 292 Build, primarily because I found it hard to understand.

However I gave it another go and I now prefer it, so it will probably end up as my HTML/CSS editor of choice.

A useful introductory tutorial is available here.  It contains a link to a PDF version if you want to download a hard copy. Note this is only an introduction and HTML-Kit appears to be very powerful. I propose to add hints and tips on this blog as I learn to use it.

Including Files in HTML using PHP

Not interested in the waffle, then page down to Links paragraph at bottom

WHY PHP (waffle)

Creating a web site using native tools has advantages and disadvantages, but I have decided to see how practical it is.

One disadvantage is common code, say a menus system on the top of each page, could be in multiple pages, perhaps 30 or so. If this needs to be changed, say you add a new section to the site that needs to be addressed by the menu system, all these have to be updated. As well as being tedious this can also lead to inconsistencies, similar to redundant data in data bases.

This seems obvious to me, but there appears to be no HTML command eqivalent to an include in programming languages. Even more so considering that CSS existence is based upon this approach, albeit using a different method.

The solution may be PHP (PHP- Hypertext Preprocessor) not sure what first P stands for!

PHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML. It is open source project and works on most Apche servers, included by the free web hosting service I use, Zymic.

PHP does masses of things, neatly all of which I have never used or understand, but including HTML code from one file into a "master" HTML file is easy. Easy once you realise that the name of the files have to have extension .php and  not .htm. The PHP changes the final "built" file to .htm before it presents it to the browser.

This is fine except I had compatibility errors reported by W3C validator when XML header was present, and no way I thought at first, of previewing results before uploading server and accessing file as a normal user.

After a couple of hours I realised you can overcome problem by not including the first line command that declares xml such as

?xml version="1.0" encoding="UTF-8"?

however this is probably a retrograde step.

So I decided not to use PHP and deciding to use HTMLKit as my editor I started  learning how to drive the editor, and there on the first page was reference on how to install PHP Preprocessor on a Windows PC.

Really easy to install. I guessed I would need to also install a plugin into HTMLKit before it started to work, but not so. Once PHP installed I opened two PHP files I had built earlier, previewed them with editor preview option and they worked as if native HTML and same again when previewed in browser. So now the second objection has been removed I will proceed with the PHP

LINKS

Here are relevant links for download and more information.

PHP  Main PHP website


How to install PHP on the local computer Page from HTMLKit support that shows links to relevant download sites etc.

HTMLKit Note HTMLKit 292 is the free version, HTMLKit Tools is not free.

HTML/CSS Editors

 Writing web pages using the base mark-up languages HTML and CSS is much easier with a few basic editor and tools. Here is a list of ones I use:

Note Tab Pro

I have been a user of NoteTab Pro for many years now. There is a small charge of $30  for the Pro and $20 for the Standard version but you can use the Lite version for free, but this has many of the useful features missing.

It has clip libraries" that provide HTML and CSS tags and templatesI wrote my wife's Fascinating Fungi Ceramic Models web site using this editor a few years back

CoffeeCup HTML Editor

There is a free version and one for $49. I have downloaded both and considering the latter to see if it has enough advantage to make it worthwhile.

If I decide to keep only the free version then some of the options only available in the none-free version can be achieved with the following two free offerings.

•  CSS Menu Generator
  
  
  Interactive tool to create drop down menus using CSS
  
  
• JustStyle CSS Editor
  
  Creates CSS files easily using tags. Only just started with this so the jury is still out.

Total Commander

This is a file utility, synchroniser etc but also performs excellently as an FTP tool. I have used this utility for many years in all Microsoft versions from Windows 95 to Windows 7.

CoffeeCup provides FT facility but for moving large number of files this is better.

Free Web Host

Over the last couple of years most of my web development has been done using Google Site and/or Google Docs. Nothing wrong with these, in fact I would recommend them to any one.

Of course one great advantage of using these tools is you also get a lot of free web space provided to you by Mr. Google. This restrained me from looking for web hosts as one of my traits is a great reluctance to spend money.

So when I decided to look again at developing web pages, initially with Serif Web Plus and currently in native HTML, I researched and googled and ended up with using Zymic. Free hosting, 5000 MB of space and PHP (although I did not realise what this was at the time but see later post).

I have also registered web address RoderickT from 123-reg for £2.99 a year. Within 123-REG I have set this address to forward to my Zymic http://roderickt.uuuq.com/  and I am set and ready to go!

Note the above RoderickT site is just a development test vehicle at the moment

Introduction

I am again investigating developing web pages using native HTML and CSS with a good editor, hopefully using free tools or at least very inexpensive tools.

I have written web sites this way several years ago, see www.fascinatingfungi.co.uk as an example. I then explored several on-line development tools. Great for quick results but usually end up spending time fudging things to work the way you want to. I still use Google Sites extensively though, see an example of one here Maths RoderickT .

I then purchased  Serif Web Plus, upgraded it to release X2 but bulked at the price at upgrading to X4. A good product but I grew weary of it.

Connected with web design is my main interest in photography. I use FlickR both to show my better photos but also as a means of backing them up online. I have purchased the very reasonable Pro  account for , if I remember correctly, $24 a year. With all the photos stored here you can make extensive use of them from your own web pages with standard links. You can see some examples of this, again using Google Sites, here  Writing Web Pages.