Page'sPattern - CSS files - Think your site - Preparing files - Publishing

The MainPages' Patterns

You can see here how is this pattern, as you have it before your eyes. But we've to deepen the diagram of the zones' arrangement one inside the other so as to get this layout.
This first paragraph isn't really needed to explain, because you could just copy and paste this Main Page  as a new  .htm file changing its links to CSS,  and linking by menus the pages that you want to place into the mainpage or onto the screen.
However we give you these infos, in case that you want modify this page's shape. You may want in fact do not have height limits, or change the menus' position, backgrounds and other. You need then to read careefully and understand the content of this paragraph.

a) as first let's place a general container, to center the other zones places inside. In fact we may want our pages always to be centered into the browser's screen, and not to float left aside.

Let's call "cornice" this container and place it as a div after the TAG <BODY>. Within 'cornice' we should place all the other elements. In the following, to distinguish easier where nested zones begin and end, I've used different colors.

THIS IS THE PAGE SCHEMA: it could have been simpler, but then I was still learning. Sorry. But it works good.

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><!---place here metatags, css links, and other head elements ---></head>

<body>

<div id ="cornice">

<div id ="testata">

Here we have to set a background image and a logo. About the strip's image, or background color, the strip's height is set by CSS.
Abouth placing logo instead of another div here inside, a 1 row and 1 column table is used where to put the banner. Our testata is all screen wide, unless we assign the same within the following 'corpo'. Now it's set outside.
</div>


<div id ="corpo">

'Corpo' means 'body' ad it's centered with a particular instruction in the attached stylesheet. The corpo's width should be set according to most popular screens among web users, actually 1024x768px. This requires to fix it's width in the interval 960 - 980px and 670 px as max height, which, added to 'testata', shoud be less than 740px in total page's height.

<div id="perbutton">

it's used to place here some social sharing buttons; and upper horizontal menu right aside them.

<div id="bottoni"> here's an unordered list and commands which serve to show buttons to share on the webs this page's address </div>
<div id="top_menu"> near the buttons - we placed this space to insert an iframe reserved to host an upperside horizontal menu </div>

</div>

<div id="center_container"> To be simpler we did insert here a table with two columns, sized to host two distinct iframes: More, after the table we set the space for a bottom row menu

This hereunder is the table of 2 columns , 1 row
here we place the iframe
named =leftmenu
width="220" height="575"

here we place the iframe
named =rightside
width="100%" height="575"

<div id="bottom_menu">

it serves to host here an iframe named botmenu with a bottom menu inside, from wich you can change the mainpage to the different languages mainpages (target must be =" _top")

</div>

</div>

</div>

</div>

</body>

</html>

Let's suppose that tou know what you want, that you have designed the site scheme to add to the present and, last, that you've built menus and other pages in accordance to the specification for each type. When one has prepared the most part of his own pages to be hosted into their own frames, he can do the following:

.

B ) CSS, acronym for 'CASCADING STYLE SHEETS'

Reading wikipedia we learn that, in computer science, CSS is a language used to define the formatting of HTML, XHTML and XML such as Web sites and related web pages, and that for composing CSS there are a guidelines rules set (Recommendations) issued since 1996 by the W3C.

Using CSS is indispensable to separate pages' content and formatting, allowing a more clear and easy to use programming way, both for HTML pages authors as for users, ensuring at the same time also the reuse of code and its easier maintainability. The CSS file contains the processor directives to set characteristis of several identified and named elements into the page.

CSS rules can be used in many ways

1) by external css files, attached to the single page with instructions like this one

<link href="../../stylesheets/pagina_con topmenu.css" rel="stylesheet" type="text/css" />

that is placed between TAG <HEAD>....</HEAD>. To simplify we try to prepare only one stylesheet, with recursive elements referring to the whole site. It can be applied to the pages which have into their body the named elements shaped by CSS .

In other words, you can define a page that uses at least one of defined CSS items or named in it. If we attach the stylesheet and item names are recognized, these parts will be formatted.

2) setting instructions into the page itself between <head> and </head> instead, with the following instructions to put

<style type="text/css">
......................
set here the needed istructions' blocks
..................
</style>

3) setting instructions into the page itself between <body> and </body>. There are elements that can be formatted with direct html instructions. elements that can be formatted with instructions giving an on line style, and both solutions. Some example

There are a lot of possibilities to change the format of elements into html pages. Remember that the last instruction that the processor reads is the one that applies. So you can change a single bit of your page into a page line, meanwhile the general css remains the same. If you want to explore possibilities, you can read and check the code of several third parts pages, by your browser's developer tools.

Here I want advise that the best solution for setting CSS properties to objects is to use an editor like Adobe DREAMWEAVER, which gives you inline help, allowing to chose, while writing, among a list of allowed instructions for every TAG's kind.

NOTES ABOUT CLASSES

We can adopt into a stylesheet an interesting solution to styling named elements, that is classes. A Class is a style element that can be applied to almost each TAG. Let's see a class example, noting that instructions between { } could be witten all in only one as with more row.

.td1 {
background-image: url(../immagini/pansoff.png);
height: auto;
border-top-left-radius: 15px; border-top-right-radius: 15px;
border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;
text-align: center; font-family: Arial Narrow; font-size: medium;
}

By this class one could set a backgroud image, the font type, dimension, alignment, and shapes , alto the table cell aspect. That is, this class could be applied to a single cell of a table <td> ..... </td>, or to a DIV

<div id="zone1" class="td1"> div content .....</div>

Everything could be possible, just experiment and try to do it.

C ) THINK YOUR SITE

First: did you read this manual? If yes, you know that you should project with accuracy scope and content of what you do intend to produce. Write down your ideas according the available templates. Using an electronic editor or as you prefer.
I suggest to follow the 5W1H rule. For instance. my site hasn't a commercial purpose, but can be adapted to. If at a certain moment you want to register your users and let them subscribe a fee to go ahead reading, or to download things, using paypal or credit cards, you'll be allowed to perform this function, inserting their software somewhere in your pages.

Second: let's hypothize that you're a writer, and that you want publish your work. Here are just some few ideas of how to arrange. You should not alter the basic site's folders and files that you have downloaded and unpacked, just add new folders and set there your new files. Do not merge your files and folders into those yet existing.
Referring to the structure that we have described in the paragraph 'Templates' - see menu at your left - you should not change the structure but add the folders that you need using the templates.

<
Miosito      Site's folder
|--- index.htm index file
|--- main_framepage_f.htm

french Homepage

|--- main_framepage_i.htm italian Homepage
|--- main_framepage_s.htm spanish Homepage
 |  
|--- htmpages    folder with htm pages
 |    |      
 | |---- horizmenus  folder of horizontal menus
 |    |      
 | |---- simples  folder with menuless pages
 |    |      
 | |---- vertmenus  folder of column menus
 |    |      
 | |---- withmenus   folder of sliding pages with menu on top
 |        
 | immagini   Images' folder  
 |        
 | stylesheets   CSS' folder  
 |        
|--- templates   Templates' folder  
 |        
 | Under - or among - the upper ones add your own folders Here
 |        
|--- mynovels    folder with htm pages regarding novels-fables
 |    |--- n_mainpage.htm Starting page for novels
 |    |      
 | |---- myhmenus  folder of horizontal menus
 |    |      
 | |---- simplepag  folder with menuless pages
 |    |      
 | |---- myvertmenus  folder of column menus
 |    |      
 | |---- complexmenus   folder of sliding pages with menu on top
 |    |      
 | |---- downloads   folder with files to download
 |          
You can repeat this structure for each book you want to add
 |        
|--- MYBOOK 1    folder with htm pages regarding a book and it's chapters
 |    |--- book1_page.htm Starting mainpage for book1
 |          
|--- MYBOOK 2    folder with htm pages regarding another book and chapters
 |    |--- book2_page.htm Starting mainpage for book2
 |      
And so on

 

D ) SUGGESTIONS TO PREPARE YOUR FILES - referring to the hypotized previous writer's site

A) Adapting index.htm, to set it as your Homepage

Try to prepare at least a not working set of index.htm. In a second time you'll check and assign links to pages

B) Setting other mainpages with the same pattern. At first create a mainpage and save it with its name in dedicated directory (novel, book1, book2 ....)

Here always the same header - check the links to connect images and stylesheets, as the position level of those pages is different from index.htm
Top_side
left_menu right_side
Bot_menu

 

top_side: link this frame to the page hmenu2.htm with the list of works- if there are too many items you can call here self a next menu (or previous) with other titles. Check links to background images, if any, and to stylesheets. Otherwise the page will non work.

  1. NOVELS
    • left_menu: in case of novels, at first put a preface intro page,and the list of novels titles
    • righ_ side: put the text of the novel here into a page with an inside fixed menu, to call paragraphs intead of scrolling manually
  2. BOOK 1
    • left_menu: put here preface and list of chapters with thei titles
    • righ_ side: put the text of the single chapter here into a page with an inside fixed menu, to call paragraphs intead of scrolling manually

 

E) PUBLISHING YOUR SITE

Once that you've tested everything, and navigating through your site with browsers everything works fine, you may want to publish it.
You should have to register to a specialist websites hosting site, and check that it satisfies your requirements and that gives you enough space.
More, they must admit your access to upload and dowload your site with your editor, and give data granting you FTP access, ftp server address, user name and password, for example. Read more about in the paragraph titled "Tools to get".

It's alto very important to consider the eventual fees and what will happen to yours files if for any reason you could't pay the domain's rent. But, the most important thing in absolute is to offer the research engines the best way to find your site easily among the millions in the net.

To this purpose some one should use the so said 'meta tags'. that is, instructions that engine spiders are checking to rank you in internet. These instruction are placed between <head> ....</head)

MAIN META TAG TYPES: meta, keywords, description,

BUT A REALLY IMPORTANT TAG IS THOSE SAYING SPIDERS THAT THEY MUST NOT STOP TO THE ACTUAL PAGE, AND GO AHEAD SEARCHING FOR THEIR DEPENDENT FILES, TO EXAMINE OTHER META TAGS. AND SO ON. IN THIS WAY WE CAN PASS TO THE WEB THE SINGLE PAGE'S PARAMETERS AND THE DESCRIPTIONS OF OUR ENTIRE SITE.

If you write instead "INDEX, NO FOLLOW" the spider could not continue to search the dependent pages.
TIP: when you open a third part HTML page with your browser. you should examine what kind and number of META TAGS is available there. Or in specialized sites you could study and grasp eventually other TAGS you could insert in your <head>.

You may also want your mainpage to start full screen, then perhaps the following works

 

Enjoy!