Kickstarter Campaign - Typography Deck / Design Deck Also Available

 

Learning Adobe Dreamweaver CC at the Intermediate Level

 

This workshop is designed for teachers who have functional knowledge of Adobe Dreamweaver CC but need to add more skills and features to their knowledge bank.

 

Resources:

 

Dreamweaver 2017, 2017.1 and 2017.5 New Features

 

Free Printable Sketching, Wireframing and Note-Taking PDF Templates

 

Powerful Workflow Tips, Tools And Tricks For Web Designers

 

Connecting Dreamweaver to Your Business Catalyst site

 

 

Let's look at this course and see what we can use/adapt for North Carolina.

Web Page Design Model - CTEOnline.org

 

To access your eBook:

 

1. Sign in or create an account at www.peachpit.com/account.

2. On the Account page, enter your code in the field that appears in the “Digital Product Voucher” box at the top of the right column.

3. Click “Submit your code."

4. The product will be listed under Digital Purchases on your Account page.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Create a Responsive Grid Layout  Get Files

 

Define a responsive grid layout that allows the contents of your web page to scale across devices.

 

Create a Responsive Menu  Get Files

 

Style the menu to make it easy for visitors to navigate your site on any type of device — mobile, tablet, or desktop.

 

◊ Assets provided above courtesy of Adobe Dreamweaver Tutorials

 

Choosing a Color Palette - Big Huge Labs

 

Examples:

 

Creating a Banner Using an Image as a Base for Color Palette Guided Practice

Adapted from "Creating an Attractive Banner Visitors Will Notice by Annette Fewins

 

  • Open trees.jpg in Photoshop.
  • Go to Image, Image size and change your pixel size to Width 1024px and resolution to 72px.
  • Select View, Actual pixels to see the actual size of the image.
  • Save.

 

Note: A rule to remember: Resolution for webpages are always set to 72px. Print is generally 300px.

 

  • Open a new Photoshop document.
  • Width 1024px, Height 220px, resolution 72.
  • Using the eyedropper tool in PhotoShop or another method of selecting a color palette mentioned earlier, select a color from tree.jpg. Using the rectangular marquee tool and the paint bucket, color your banner. I choose #cccc99 , a comforting green shade.
  • Drag tree.jpg onto the right side of your new PSD document.
  • Using the rectangle tool, draw a rectangle over the left side of the banner leaving about 20px with the green showing. With the eyedropper tool select another color.( I choose brown #330000 ) from the tree trunk.
  • Open airballoon.jpg . Drag onto the banner. Using the transform tool, resize airballoon.jpg to fit on the banner to the left of tree.jpg.
  • Open mustardgreens.jpg. Resize using the transform tool so that it covers the entire banner, it will appear blurry, but that's okay. Reduce the opacity to 45% so you can see thru the mustardgreens.jpg.
  • Save.

 

Text

  • Use a script font (I choose Rage Italic size 123pt) to display the elegance of Napa Valley. Type Discover Napa . Embellish Discover Napa with layer styles (try a drop shadow, inner glow, and bevel and emboss).
  • Select a different color. I chose to use #33000 from the tree trunk. Using the same font, Rage Italic, reduce the size to 57pt, type stay, relax, enjoy, placing it off to the right under Discover Napa
  • Save.

 

Navigation Bar

  • Using the rectangle tool, create a bar on the bottom of the banner that will hold the names of the links for the website. I choose the same color #330000 from the tree trunk.
  • It is important that the text on the website is readable. For the links use Arial, 21 pt font and # cc9933, a gold color selected using the color picker from the gold in the mustardgreens.jpg image.
  • On the rectangle bar type the links:
  • Lodging
  • Dining/Restaurants
  • Spas
  • Activities
  • Calendar Events
  • Visitor Information
  • Equally space the links horizontally across the bar.
    Line is always a good feature to use.( I chose the golden color #cc9933 from the text.) Using the rectangle tool draw a thin line above the dark brown nav bar,10px wide, just to add an accent to the nav bar.
  • Save

 

That should do it for an interesting, warm banner to catch visitor's attention!

 

Creating a Banner of Your Own

Think about a place you have been to or a place you would like to go.  Grading Rubric

  • Size must be 1024px wide, 325px high (similar to Keep Tahoe Blue).
  • Restrict your color palette to three colors.
  • Include a nav bar.
  • Scour the internet for free use images.
  • Save final banner as .jpeg and PSD.

LATEST TWEETS

""

RECENT WORK

"" ""
"" ""

Adapted from a template provided by freemusetemplates.net