Creative Thinking about how to start a web design

 Creative:

Creative starts form "ideas", and than pursue to get it done
For designing a web site, we need pre-planned logo, layout, color scheme.
For planning the contents of the web pages:

1. Determine the purpose of the site.
• Provide serviced office at Shenzhen, China.
2. Grouping material information and divide them into pages. Each page should have a theme that ties to the subject of the site.
•  Office and Training facility
• share office resources with professionals could save running cost.
•  Executive apartment for rent
• Fully furnished apartment for the stay of the business term.

• Facilitate socializing environment to entertain you and your clients.
• gym, cafe, sauna,  music room

• Mini-warehouse for document storage.
• Mini warehouse to store your business samples or document, convenience to retrieve therefore you do not have to carry them between your trips.
• Business Events
• assist in booking hotel, receive at the airport, information about business registration at China, local advertisements, arrangements for your stay.
1. Determine demographic audience.
• Executives send to China or Hong Kong for projects
• Small business investors in China and Hong Kong
• Trainer has functions in China and Hong Kong
• Travelers have business in China and Hong Kong
• Organizations need office space in China and Hong Kong
• Entities need connection location between Head Office and China or Hong Kong.
2.  Pull up sites with similar services and look at their wordings.
3. Write down key words selected from those sites.
4. Research on key words and phrases chosen from the selection above.
5. Fine tune and group those key words to related pages.
6. Determine positions of those words in pages.
7. Compose the essays that can fit those keywords in the text, alt text, headings, 
8. Test the sites for key words competence.

Creative  in my mind is to build something flexible rather than following traditional  rules. However, it must be created in a way that would return value for the purpose of creating it. A targeted direction is important. Narrowing down focusing points always help to avoid board  or excessive materials.
Research is unavoidable  but must be conducted effectively. Strategy  the approaches before jump into actions is easier for reviewing performances and organize status of an assignment. Strategies should be refined on each researching topic. It does not matter using rough paper to drop down ideas or sketch out the brain map. Whatever method used is fine. Creatives are flexible ways to generate ideas and get them done.

Position and Selector

• Link to Position and Selector
• http://laibobbie.aisites.com/mm2203/positionANDselector.html
•  
• Combine selector applied to h1, h2,h3 to make:

font-style:italic;
align-text:center;
padding:10px;
margin:5px;
BUT NOT the p.

Container: blue 300px,
Absolute: Red dotted border,
Relative; green  border,
Fixed : purple border and
Static yellow.
The above are code sequences.

See explanation about positions below by referring to the figure on the left.

1. Absolute box with 5px for top and 10px for left margins. This box is out of the flow but stay within Container and will remain with the same position disregard in the code it was coded to float towards the right. This indicate that the absolute is not following the normal flow even it was commanded it to float to the right.
2. Relative box flows coordinating to parent it belongs to. In this case, it is the of container. It was set to float towards the right of the Container. The width of Relative was 200px while Absolute" was 150px There is an overlap area between the boxes of absolute and relative because the total width had exceeded the width of the container.
3. Fixed box follows the flow after the Relative box. It has the padding of 30px around it. The top margin was set to 30px while rest of margins were 0. The top margin was measured from the container. It floats to the left. Since Absolute box is not following the flow, the Fixed box is overlapping with the Absolute box.
4. Static box also follows the normal flow. It was set to float to the right without margins. Because the size of the box (150px) is smaller than the width left by the Fixed box (300px - 100px=200px), therefore the position is on the right side of the Fixed box. However, the top margin was set to 0, therefore, the top align to the previous vertical element which is the Relative box right above it.
5. The Container which suppose to hold all these boxes are colored as blue. It has a width of 300px, but no height was declared. You can see the Absolute and Fix boxes had went overlapping the boxes in the container but would not exceed the size horizontally. We can see how Fix and Absolute react. Static and Relative stay within the parent box but not for Absolute and Fixed positions if they are taller than other boxes in the container. In this case, the Fixed box has demonstrated that. When you scroll the screen veritically, you see the Fixed box goes with you.

Chapter 4 page 102

Link to floating direction
http://laibobbie.aisites.com/mm2203/creativefloating.html

css for casa basa

Link:This is the link to ccs of casa basa

Sharon, this is the html from you and I put in the embedded the css.

Subcide CSS and Scalable Navigation

Link:subcide and scalable navigation


I have put together some boxes and also applied the scalable navigation in this page.

Box Model

Link: The Link to  Box Model

 Explanation of Box Model
The box included four areas which are demonstrated in colors.
The properties of the "content" are
margin =purple (between the border and body), border=blue (between the padding and the margins), padding is gray-yellowish (surrounding the writable area) , and the content writable area is yellow.

The body is a flexible  depends on condition of the screen and browser.
However, we set a base font-size of 12px as the base for space calculations.
Create the "Box" and labeled this as "content",colored it with yellow.
We gave this "content"  border a color, which in this case is blue, with solid style.
The width of this border  is 3.5em of the base font size. (42px)
Set h1 and h2margins to "0 so that those tags will not  distort the size of the content writable area.After these steps, you will see the box as shown below.

Summary:
The margin is the purple area,
the border is the blue
The padding is the gray-yellow area.
The content is yellow.
All theses sizes are based on calculation of the base-font-size. 

formula: 12px * ?em

 

see the code below:

 body {

    background-color:#C9F;
    color:red;/*set color therefore
    able to see the effect of the box*/
    font-size:12px;
}
h1 {
    font-size:1.5em;
    margin:0px;
}
h2{
    font-size:1.2em;
    margin:0px;
}
#content{
    background: yellow; /* set the content to yellow for demonstration purpose*/
  
    border:#009; /* blue area */
    border-bottom-style:solid;
    border-left-style:solid;
    border-right-style:solid;
    border-top-style:solid;
    border-bottom:3.5em;
    border-top:3.5em;
    border-left:3.5em;
    border-right:3.5em;
        /* if borders bottom, top, left, right, are set to 0, the border is equal to width of margins* for the demo
    the borders are set to 3.5em of base font size which is 42px*/
  
  
    margin-top:5em;
    margin-bottom:5em;
    margin-left:5em;
    margin-right:5em;
    /* the purple area surrounded the blue border*/
  
    padding-top:6.5em;
    padding-bottom:6.5em;
    padding-left:1.5em;
    padding-right:1.5em;
    /* to declare the padding, the blue area around the yellow content */
}

Schedule Planning

Schedule of Bobbie Lai

em

http://laibobbie.aisites.com/mm2203/em.html
This has a link to the work I have done on conversion of em font sizes.

Color in RGB and Pantone

Draft Website wallpaper

Draft Website

header on the top, Nav on left and footer at the bottom. The content is right between head and footer.
background for nav and header are swimming pool water with pictures of babies swimming. Each baby is a symbol of an item. Like home, about Bobbie, tutorial, portfolio, gallery, contact