Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Interactive Design Exercises
Dreamweaver: Personal Process Page (for GDS 220 - Part B)

Objective

To review Photoshop layout tools by creating a simple page mock-up. To be introduced to Bootstrap's responsive framework by developing a Personal Process Page similar to this example.

Discussion

Photoshop is an essential tool used by web designers to create visual "mock-ups" of web pages for client approval. Once approved, Photoshop has powerful tools to help you optimize the pixel elements for web development. Alternatively, many designers prefer to use Illustrator for mock-ups instead (see one opinion). Also conisder that Illustrator files can be exported to Photoshop with layers intact.

As the world starts viewing more web sites on smaller hand-held devices, web designers have to design for screens from 300 to over 2400 pixels wide. One can achieve this by making web sites elastic and "responsive" to varying widths. There are many frameworks available to achieve this, but the most popular is Bootstrap.

Using an existing framework saves development time because you have access to pre-written code. Unfortunately, there is a steep learning curve and some people feel restricted by the somewhat limited customization options available. Others feel empowered because much of the technical heavy lifting has been done and designers can now focus on content.

Access to Web fonts have improved quite a bit in recent years. Although Verdana and Georgia are still excellent choices for screen readability, there are now other options. But designers still have to be very careful choosing text fonts as some typefaces have not been properly hinted for low-res screens.

Dreamweaver can access Adobe Edge Fonts (which uses Adobe Typekit to serve up the fonts), but there are downsides. Typekit fonts will only be visible in a browser (or Dreamweaver's Live View) unless they are synched to your desktop. Want to synch more than 20 fonts? You have to pay Adobe. Many people feel Google fonts is a better alternative. You can download as many fonts as you want and install them on your desktop for use in any application. Google will also served up the same fonts for web pages all for free.

Tip: When revising web sites, duplicate the web site's root folder and give it a new name (i.e. "p1_final2"). Be sure all the files required for the web site are inside the root folder (do NOT link to local files outside of this folder).

Another tip: When customizing Bootstrap styles, one should not edit the original downloaded CSS. Instead one should add all additional customizations in a separate file. This is so that the Bootstrap source files can up updated without wiping out your customizations.

Reference links
Procedure

Overview: Create a Photoshop mock-up. Export pixel elements to Dreamweaver. Download and set up Bootstrap. Add content. Customize Bootstrap styles. Note: replace bold with personalized info.

Making the Photoshop mock-up

  1. open example in a browser
  2. take a screenshot at 1024x768
  3. download 1024x768 blank browser chrome from designerstoolbox.com
  4. open downloaded file and screenshot in photoshop
  5. copy/paste screenshot into browser chrome
  6. delete unneeded layers
  7. draw new box "header", fill color = ??
  8. add type layer: "Jane Smith"
  9. add type layer: "GDS 220 Process Page"
  10. spec font, scale (cmd+shift+< or >), track (opt+left/right arrows)
  11. view > ruler (cmd+R): draw guides for slicing
  12. slice tool: slices from guides
  13. rename key slice "header"
  14. file > save for web (preset=GIF 32 no dither; images only, user slices; location="html/_process/")
  15. examine exported GIF, retouch if needed

Setting up Bootstrap

  1. duplicate "html/_process", rename "html/_process_old"
  2. download boostrap files from Github; extract
  3. copy "dist", "fonts", "js" to "html/bootstrap_master"
  4. copy "docs/assets" and "docs/examples" to "html/bootstrap_master"
  5. create new folders "css", "images" in "html/bootstrap_master"
  6. inspect contents of "examples" folder

Starting a Bootstrap project

  1. copy contents of "html/bootstrap_master" into "html/_process"
  2. rename "index.html" as "index_old.html"
  3. launch dreamweaver
  4. site > new site: site name=gds220-process;
    local site folder=faa999/gds220/html/_process); export STE file
  5. duplicate "examples/jumbotron-narrow/index.html" (cmd+D)
  6. site > advanced > recreate site cache
  7. move duplicated file to root folder (update=yes)
  8. rename duplicated file "index.html", open
  9. open "index_old.html"
  10. select <body>
  11. copy/paste content into "index.html" (left column)
  12. copy/paste document title from one file into the other
  13. view > toggle live view (opt+F11)

Modifying a Bootstrap file

  1. delete <div.header>
  2. delete right column <div.col-lg-6>
  3. change left column selector to <div.col-lg-12>
  4. select <div.jumbotron>
  5. window > insert: boostrap components
  6. insert > breadcrumbs (after)
  7. replace placeholder <ol> with real copy
  8. view > toggle live view (opt+F11)
  9. delete jumbotron content
  10. insert > responsive image; save
  11. double-click placeholder image, replace with "header.gif"
  12. change <alt> tag
  13. move <div.jumbotron> to above <div.container>
  14. move <footer> content to inside <footer.footer>

Styling a Bootstrap file

  1. window > CSS designer: add selector (source=new file "css/process.css"; media=global): 
    • .jumbotron: margin-bottom=15, padding=0, border=0, bg-color=???
    • .jumbotron .img-responsive: margin-left/right=auto
    • .breadcrumbs: margin-bottom=120px, padding=0, bg-color=white
    • .container .jumbotron , .container .breadcrumbs: border-radius=0px
    • a: color=???
    • a:hover, a:focus: color=???
    • body: padding-top=0
    .marketing .col-lg-12: padding=0
  2. window > CSS designer: add selector (source=process.css; add media query: min-width=768px): 
    • .row.marketing h4: margin=0, float=left. font-size=14px,
    line-space=1.429
    • .row.marketing p: padding-left=150px
    • .row.marketing ul: padding-left=190px
  3. add <small> to <div.breadcrumbs> and <div.footer>
  4. add glyph to <h4> items:
    <span class="glyphicon glyphicon-stop" aria-hidden="true" style="color:#1CA18A"></span>
  5. file > preview in browser (opt+F12 and cmd+F12)
  6. file > print: preview
  7. window > CSS designer: add selector (source=process.css; add media query: media=print): 
    • .breadcrumb, .footer: display=none

Adding Google fonts

  1. browse to www.google.com/webfonts#HomePlace:home
  2. search for "roboto slab", click "add to collection"
  3. click REVIEW, then USE
  4. download font family and install
  5. select only weights needed for web page (i.e. "normal" and "bold")
  6. copy code to dreamweaver (near top of <head>):
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
  7. window > CSS designer: edit selector (source=process.css):
    • body: font-family="Roboto Slab", Verdana, sans-serif (manage fonts: custom font stacks)
  8. file > preview in browser (opt+F12 and cmd+F12)

Making a favicon

  1. launch Illustrator
  2. file > new "ico48.ai": profile=web: 48px x 48px
  3. create art
  4. file > save for web: "ico48.png"
  5. go to tools.dynamicdrive.com/favicon
  6. upload "ico48.png" (merge with both 32 and 48px icons)
  7. download "favicon.ico", move to root folder
  8. open "index.html" in a browser
  9. refresh browser cache (shift+F5)

Grading

  1. publish your site using "gds220-admin" site (see separate instructions)
  2. keep this page updated with your work as the semester progresses

BACK TO TOP
Last updated: 3/2/17 ■ Webmaster: Paul Young