PHP Web Design 101

The Most Powerful Way to Build Your Website



Elementary explanation of basic HTML - PHP website structure:
First defining DOCTYPES and META data then

Main 3 parts of every page:
HEADER header.php
FOOTER footer.php
SIDEBAR sidebar.php

connect together pages with main content
via php statement
PHP INCLUDE:

in at least one required
INDEX PAGE index.php

may add other pages of content with PHP INCLUDES of 3 main parts

Also gives good basic explanation of how to use CASCADING STYLESHEET, style.css,  to format entire site.

Lots of beginners tips to fix common problems like

Use MIN-HEIGHT when sizing the elements that aren't fixed height.
Zeroing MARGINS and PADDING for body selector.
Adding AUTOFLOW to get wrapping parent divs to stretch across floating child divs.
Add 'wrapper' class with AUTO MARGINS around each div you need to CENTER

Detailed explanation of how to style UNLIMITED LIST of links into a horizontal list for navigation with
DISPLAY:INLINE
TEXT-DECORATION NONE removes bullets
OVERFLOW:HIDDEN keep color from flowing beyond nav bar boundaries.

Additional videos on http://www.johnmorrisonline.com

Nuli! Nuli! Project: Fix gap between divs with top padding

 Gap between "hints" div above "menu" div corrected by adding top padding to "menu" div.

Note To Self: Centering Web Page

1. WARNING: If exporting web page from Photoshop don't forget to take into consideration which SETTINGS to choose greatly affects your centering options.
2. The DEFAULT - TABLE based layout - allows you to easily center the web page in DW by right clicking in the white space, the choosing "center" in the drop down menu of the "Edit Tag - Table" dialog box. (You can also add the background color by editing the background of the table.)
3. Choosing a CUSTOM - CSS based layout - will produced nicely named DIVs but the CSS will include ABSOLUTE Positions which can't easily be centered by normal CSS methods. You will have RE-LAYOUT the slices using new CSS. A real pain for any complex layout.
4. Now to center webpage using CSS, you must use AUTO MARGINS for a DIV that wraps the entire layout which I usually enclose in MAIN or CONTENT DIV ( "text-align: center" is the fix needed for IE ) See this example used for my designables.net web site:

/** center web page in IE6 add text_align:center;

re-align left in wrapper **/

body {
color: #CCC;
padding: 0;
text-align: center;font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
}

/*** center web page: add auto margins outermost div; 

but re-align text center to make up for IE fix  ***/

#wrapper {
width: 670px; 
text-align: left;
border: 0px; 
padding: 0;  
margin: 0 auto; 
}