39AK Creating Web Interfaces



39AK Creating Web Interfaces

BASIC LAYOUT

1. Take note of the mock-up image. Pay attention to all of the images that are going to be incorporated.

2. Create new html file>no starter>Manage Sites>Begin_Files

3. Inside Body tags> Begin Creating Div Tags for your site. Header, Slideshow, Top, Sidebar, Body, Footer (see image below)

*If looking below, ignore the “maincontent” for now and continue on with sidebar, images and body

4. When you have those three comple>highlight the code> Design View>Insert Div Tag>Wrap around selection>ID>#maincontent>New CSS rule>new document>layout.css

5. Insert div tag allows us to do a lot at one time

[pic]

6. Need to create a container or “wrapper” div tag>Highlight all code inside body tag

7. Switch bag to Design view>Insert Div Tag>wrap around selection should be selected.

8. New CSS rule>ID>#container>Make sure is being saved to layout.css file

9. Box category>700px wide

10. Box>0 Margins for Top and Bottom

11. Box> Auto Margins for Right and Left

12. Internet Explorer BUG>Block>Text-align>Left

[pic]

13. To get rid of margin at top of page insert the following html, body css rule through your layout.css document

[pic]

14. When you look at design> what happens when you delete text from div tag. They become stacked. What is an easy step to see the layout structure in design view. Yes simply type in content for each divtag.

15. Should look something like the image below:

[pic]

16. Highlight header text>insert image>banner_graphic.jpg>You can

17. An image placeholder is a graphic that you use until final artwork is ready to be added to a web page. An image placeholder is useful when you lay out web pages because it allows you to position an image on a page before you actually create the image.

TIPS + TRICKS that MAY HELP

• Measurements = 140px sidebar, 540px body

• Background color for Container #fff

• Make sure your body, sidebar and

• Try applying clears and floats (footer in many cases will need a float)

• Remember floats take divtag out of normal page document

• Will have to create a class to select type to modify

• inside #body div will need to have some rules applied [.75em]

• Almost all Divs will need a rule applied to them. Make sure the ID names labeled properly in your properties panel and match the rule name.

• How do you plan on wrapping the text around image? Float, Align, etc..

•

SIDEBAR/NAVIGATION BAR

1. Insert 5 links inside sidebar div tag

2. Give your #sidebar CSS rule a specific background color

3. Create a new CSS Rule>Class>.navigation

4. Feel free to follow properties if needed

[pic]

1. Duplicate Rule and create a new rule for hover

2. Notice differences. You can change however you want

[pic]

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download