|
|
|||||||||||||||||||||||||||||||||||
|
|
Basic Design Questions Whilst viewing your site using Netscape, you may find that your positioning looks very different to what you intended. This is because Netscape has a different set of rules, as far as some HTML is concerned. To avoid this problem, do not use absolute positioning as Netscape does not support it. Also, try putting everything into tables, set the border size of the tables to 0 to make them invisible. Your content can then be positioned relative to the table, which Netscape handles better. This page (and indeed every page on this site), is within a table. Alternatively, if you are feeling more adventurous, you could use CSS, although some CSS is not supported by Netscape. See the links page for sites that have tutorials on this subject. When setting the border sizes for your pages, you may find that Netscape does not appear to take much notice of them. You will need to add a some settings in HTML view to do this in the <BODY> statement. For Example : The border settings for this page are set to zero, and look like this in HTML view: <body topmargin="0" leftmargin="0"> but to make them compatible with Netscape, you will need to add "marginwidth" and "marginheight" settings too, as shown below : <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> Netscape with Transitions & Effects Most DHTML effects and page transitions are NOT supported by Netscape browsers, although reports suggest that version 6 and upwards will. The alternative would be to use java-applets or scripts to achieve the same effects. Check out the Links page for sites that include such effects. Netscape with Horizontal Line & Border Colours of Tables Netscape (4 and below) does not support horizontal line or border colours. No matter what you do, they will always appear as the "horizontal line" example below. There is a way around this, by using very small gif files (2x2 pixels) of the colour you require, stretched to the size you want, in image properties. The lines below show the differences
Border colours of tables can't easily be done this way. It is best to create a single celled table first, with borders, cell padding and cell spacing set to 0. Then set the background colour of the cell of that table, to the colour you require the borders to be. Insert your table into the cell of that table, center it, and set the border size to 0. Set the width of the table to 100%, so that it always fills to the width of the table containing it. Set the background colour of the cells to white (or what ever colour you want the table cells to be). Now, here's the clever bit. Set the cell padding and cell spacing of the inside table, to the thickness of the border you require. Because the padding of the cells is always "transparent", the colour of the table below it shows through. This, gives the appearance of a coloured border. Unlike setting the border colours of tables in table properties, this method works with both IE and Netscape.
This is a very common question, but the answer is a little different from what you may expect. Actually, tables are not able to do rounded corners, but it is possible to make them appear so. This is usually done by creating images for the corners (and in the example below - the lines too), and putting them into outer cells of tables. The following examples do just that, the first being laid out with the border size not set to 0, so you can see how it is constructed. It uses the images as cell backgrounds. Do not try aligning cell background images, with images actually inserted into cells, as they align slightly differently in some browsers.
Additional information
These borders appear when the image carries a hyperlink. The settings for these borders are in the properties of the image. Right click the image and select "Picture Properties | Appearance". Setting the "Border Thickness" to 0 turns this off, setting it to 1 or above, turns it on. This can be achieved though a little CSS in your <HEAD> statement of your HTML: <style> Can't be bothered to do this ? Want an add-in to do it for you ? Then see Jimco's Add-Ins. Both solutions will stop every link on a page from being underlined. If you only want certain links with no underline, alter each link you require not to be underlined to : <a style="text-decoration: none" href="http://www.mysite/mypage.html">My Link Text</style></a> The items in Bold need to be altered to suit your needs. This is a matter of taste, but without going into detail or CSS, the consensus is to use of tables to hold the content, with the table border sizes set to zero to make them invisible. For Fixed Size Pages : Set the table width and height to a fixed pixel size. When doing this, I prefer to design for 800 x 600 screen sizes (as they appear to be the "lowest common denominator" at the moment) which still looks good at 1024 x 768 and above. For Resizable Pages : Set the table width to a percentage. This I have done with the table holding this page. Notice, if you resize your browser, how the text wraps to fit. Please note that images in tables of this nature, do not resize. This you will see if you look at the top image on this page, and reduce the width of your browser to less than that of the image. There are many ways to set this in FP, but by far the easiest method is to put one of the following lines in your <body> statement. For fixed Images that are tiled <body background ="images/yourimage.jpg" bgproperties="fixed"> This line will fix the tiled background image to the same place while the browser scrolls. The items in Bold need to be altered to suit your needs. This does not work in Netscape 4 (or earlier) browsers. For fixed Images Non-tiled <body style="background-image: url('images/yourimage.jpg'); background-repeat: no-repeat; background-attachment: fixed"> The items in bold need to be altered to suit your needs. Please note that this doesn't work in Netscape 4 browsers (or earlier) either. Both solutions in Netscape 4 (or below) will display the background image, but without "fixed" or "non-tiled" attributes. Although there are perfectly good ones on the browser, there are occasions where you need them on your page too. To do this, simply paste this code in HTML view, where you want the button to appear. <FORM> Notice that the buttons are held within a form frame. Also, you may need to alter the format and alignment of these buttons to suit. These buttons will look like this : You may think that these buttons are a little "bland", and may wish to use your own. To do this, you can create mouseover buttons as normal, and insert the lines below in the URL for each button: Back Button URL : javascript:history.go(-1) Forward Button URL : javascript:history.go(1) If you are using frames then also remember to set the targets of the URLs accordingly. Here is an example of the two mouseover buttons that use this method : Please note : These buttons are Javascript based, and will not work in some earlier browsers. Neither will they work, if Javascript has been disabled by the user, in their browser settings. Custom Bookmark Icons ("Favicons") In IE5 you can customize the icon next to a bookmarked web site, to be your own customized icon. When people bookmarks your site, they will see your icon next to the bookmark. In earlier versions of IE, all icons next to bookmarks, looked like this To learn how to do this see http://www.favicon.com/. Please note that these do not work with Netscape 4 (or below) browsers. All products and company names mentioned herein are the trademarks of their respective owners. |