Notes 10/4:

I. <a href=>

Screen Shot 2016-10-04 at 9.37.02 AM.png

To link logo to homepage:Screen Shot 2016-10-04 at 9.38.45 AM.png

II. Add New Pages

Copy index.html, paste into folder, rename “about.html”Screen Shot 2016-10-04 at 9.41.53 AM.png

Open new file in DREAMWEAVER

Source Code:

Change div class to “about_left” and “about_right”

Screen Shot 2016-10-04 at 9.57.44 AM.png

Style.css:

Use same style sheet and control both pages (create .about_left & .about_right)

Add new background image (easiest way to ensure perfect sizing….start from blank psd and set exact width x height, file link image, crop, save to “images folder” within html folder)

Screen Shot 2016-10-04 at 9.52.43 AM.png

Screen Shot 2016-10-04 at 11.49.02 AM.png

III. Contact Page with Google map

Copy index.html, paste into folder, rename “about.html”

Source Code: copy code from http://embedgooglemaps.com/en/

Screen Shot 2016-10-04 at 10.14.00 AM.png

Style.css: *delete background

Screen Shot 2016-10-04 at 10.10.47 AM.pngScreen Shot 2016-10-04 at 11.49.23 AM.png

IV. Menu Page

Copy index.html, past into folder, rename “about.html”

  1. Take screen shots of menus, adjust in photoshop, save both pdf and jpegs to “images” folder

Source Code:

Screen Shot 2016-10-04 at 11.19.40 AM.png

To open menu pdf in new tab: target=”_blank”

Screen Shot 2016-10-04 at 11.17.45 AM.png

Important for recognition purposes: alt= “Beer Menu”/>

Style.css:

Screen Shot 2016-10-04 at 11.17.05 AM.png

Screen Shot 2016-10-04 at 11.49.08 AM.png

V. Events Page

Copy index.html, past into folder, rename “about.html”

Creating proper thumbnails:

  1. Save As images to “images folder”, open with photoshop, resize (HEIGHT & WIDTH MUST BE 200PX+)
  2. Open new photoshop document (set size to 200 x 200px)
  3. Drag psd images into new photoshop document to guarantee correct thumbnail size, export as jpg for both images (save to “images folder”)

Source Code:

Screen Shot 2016-10-04 at 11.48.11 AM.png

Screen Shot 2016-10-04 at 11.49.16 AM.png

Advertisements