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

Google Analytics Video and Lessons

http://www.google.com/support/analytics/bin/static.py?page=guide.cs&guide=19779&topic=19783&answer=138517


Google Analytics IQ Lessons

Nuli! Nuli! Project: Sunburst Background

For the background I decided to use the sunburst image like in popular comic books to fit well with the wushu action figure. It was created using advanced photoshop filter tricks instead of drawing. Start with 2 color gradient. Then distort using wave and polar filters. See this great tutorial:
http://www.recipester.org/Recipe:Create_sunburst_effect_in_Photoshop_32566105n

cut-out & shadow for stencil text effect

I  was very pleased with the prism effect on the circular geometric Digitica font. It is reminiscent of my SHAPE concept. It suggests a grid and a color wheel the basic tools for designer. Digitica even sounds like digidesign one the unavailable domain names I thought of. Now I needed to give the 2 dimensional prototype some dimension. In keeping with the tools of creativity, I thought I use a cut-out technique I'd seen on screencasters.heathenx.org to create look of a stencil. I followed the same steps pretty much except my black cutout gives the look of a prism light casting a shadow behind a grid.

Now the simplicity of the san serif 'Raleway' font looks quite appropriate to addition for the slogan that wont compete or conflict with the dominant Digitica text. So far so good.

Reflections don't work for letter g.

When brainstorming for do main names, one of the considerations was the ability to translate it to good visual image or provide good letters for customizing fonts for designing text logo. Unlike my first choices pinkturtle & 153fish, designables just didn't inspire any visual imagery. It didn't provide any great letters, like A ,G, M, Q, W, X or Z, to play with. My first thought was do a perspective and reflection. Not gonna work with that tail hanging from the "g" . Reflections work best with type lacking a descender so the baseline of the flipped text lines up directly with the baseline of the original. Text made up of letters with tails like 'g', 'p', 'q', or 'y' don't make good reflections. My first choice "153fish" would have reflected well, Look it makes a nice block of type with no descenders Oh well maybe just a perspective.

Check out great Inkscape tutorials on perspective & reflection on screencasters.heathenx.org.