Tutorial – 27/11/2013 – Dreamweaver & Image Optimization

In this week’s tutorial we learned how to

  • Optimize images for the web
  • Create a new site on Dreamweaver
  • Create a template on Dreamweaver
  • Import images to a Dreamweaver template

I used one of my ‘redesign’ projects in photoshop to practice optimizing the associated background and header images to import to Dreamweaver and create a webpage using Dreamweaver templates.  Here’s the result:

screenshot3

(Note: the header graphic is not actually a complete logo at the moment)

As I am happy coding directly in html / css I decided to work on transferring my 2nd photoshop-based redesign to a live web-page, but straight into the code editor (rather than template).  This is the first time that I have composed the design in photoshop then transferred into html/css element by element.

My redesign of the victorianweb.org site is based around three distinct layers:

  • A background layer for the back of the ‘cardboard folder’
  • A Foreground layer for the front of the ‘cardboard folder’
  • Content sheets sit between the two layers

To achieve this, I performed the following:

  • Optimised images in photoshop and saved in website directory
  • Created new site in Dreamweaver
  • Created an html and corresponding css page in dreamweaver
  • Wrote code in html for content of page (see below) – including Unordered list for category links and image anchors for composition of cardboard folder (2 parts – front and back) and content
  • Wrote code in css for styling – including absolute positioning for image of rear of cardboard folder and relative positioning for image of front of cardboard folder, and also the sheets of ‘content’.  These elements were all stacked on top of each other by giving a z-index value to each.
  • Text-shadow added to list item texts, and alternate colour added to hover on the list items

During the lesson I only had time to add an active link to the first category (Victoria and The Victorias).  When clicked this reveals a page of content.  In the final version, I hope to have this slide in from the left using the webkit-transform tool.  At the moment though, it just opens a new page with the content showing.

Below are screen shots of the 2 pages in progress so far.  However, the actual sites can be viewed online at http://www.onebigegg.com/college/home1.html

Image

Image

Here is the html code for the above page:

<body>
<div id = "container">
<div id = "folder_container">
<div id = "nav_list">
 <ul>
 <li> <a href = "home1.html">Victoria & Victorians </a> </li>
 <li> <a href = #>Social History </a></li>
 <li> <a href = #>Politics </a></li>
 <li> <a href = #>Economics </a></li>
 <li> <a href = #>Gender Matters </a></li>
 <li> <a href = #>Philosophy </a></li>
 <li> <a href = #>Religion </a></li>
 <li> <a href = #>Science </a></li>
 <li> <a href = #>Technology </a></li>
 <li> <a href = #>The Arts </a></li>
 <li> <a href = #>Architecture </a></li>
 </ul>
 </div>

 <div id = "folder_back">
 <img src="images/vicotorian-folder-back.jpg" width="960" height="614" />
 </div> <!-- end folder back -->

 <div id = "folder_content">
 <img src="images/vicotorian-content-one.jpg" width="585" height="561" alt="victorian_content_one" />
 </div> <!-- end folder content -->

 <div id = "folder_front"> 
 <img src="images/vicotorian-folder-front.png" width="960" height="614" /> 
 </div> <!-- end folder front -->

 </div> <!-- end folder_container --><!-- end container -->
</div>
</body>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s