MS. AMOR'S SAMPLE WEBSITE
HOME FAMILY history favourites reflections

How I Created This Page

Backgrounds

  • I found an image I wanted on my web site that represented me- the flowers on the left are a watercolour I painted.
    I used photoshop and cropped my image 100 px wide and 900 pixels long, and saved it into my web page image folder (the problem with this image is that it is going to tile).
  • I used the eyedropper tool and selected colours from my picture, which showed up in the colour boxes- clicking on the boxes opened up the colour picker that showed the RBG numbers, which I wrote down.and wrote down the RBG numbers from the
    I then created a new file 1200 px x 900 px, resolution76 ppi. Ctrl A (select all) and filled it with the lilac colour from my watercolour's background.
  • Using the filter>texture tool I texturized the colour (not too large) and saved it as 'background.jpg' in my Web page image file (make sure it is saved as a .jpeg.
  • I created a new Web page (and redefined the site). Under modify>page properties I clicked the folder beside background images and found my 'background,jpg in the image folder. I also made my text colour Black and changed the font to Arial.
  • Inserted a table with width dimensions 95% with 2 columns and one row. The left column I made 100 px and left the other one empty so it can expand and contract depending on the users computer screen resolution. In this cell I went to background colour, clicked on the colour picker (small round circle on the top) and inserted another RBG code from my watercolour- in this case on the the leaf colours.
  • I wanted to see more of my purple background so I clicked on the table and made the cell space 15 px (which also adds to the area around the table

Content Alignment-

  • I want to leave my flower border alone so I inserted a table inside my table (nesting) this table I made 5 rows and 5 columns (for now) and I made it 100% width so it fills this space.
  • I want to make sure my 5 columns are equal. I click on Table Header Icon and 'make all widths consistent' or you can use percentages (my table is 100 % I want 5 equal columns so I make then 20 % each) for more on column widths

Text

  • I have been typing and want to change my headings. I highlight Ms. Amor's Sample Web site- change fro HTML to CSS (under the word Properties) either use the fonts installed or create my own (edit font list) in this case I edited my own- Bauhaus, arial black and the san serif I used the eyedropper tool to match a part of the flowers, changed it to bold and x large- pressed apply so I can see it- I liked it and pressed OK, saved it as amortitle(at this point I left for this document only).
  • I then highlighted a sub title and made a new rule called amor subtitle (it is the same font but 24 pt and normal - not bold)
  • Note when I switch back to HTML I have 2 new classes - amortitle and amorsubtitle.
  • I wanted to add colour to the smaller title so again I went to CSS matched the colour to the large heading using the magic wand and saved it as amortitle small (REMEMBER WHEN NAMING ONLY USE TEXT AND NO SPACES)
  • Spell check (SHIFT F7- it cannot be on Live View)
  • Hyperlinks- I changed my hyperlinks from the normal bright blue to match the colours of the page using Modify>Page Properties>Links.

Roll Over Buttons

How I created the rollover buttons above. First let us link to a separate page. I'm going to Save As this page as Buttons.htm...then highlight this text on this index page and link it in properties to the button page (click on the folder and find the page you want.