Client site rev 11/04/2015
Objectives: Create
Banner Hypertext Rollovers, and
Dreamweaver Templates
Make sure:
You have a Client folder and a Client/Images folder within your root (JMA260) folder on your USB drive
Launch Dreamweaver
Your local site (JMA260 ) must be on your USB drive, NOT on z:drive. If it’s on the Z: drive, put up your hand now so we can fix the problem.
Client Site Design Page 1
Overview Design: linking pages
Below you can see I used hypertext (Words that point to new html pages) links down the left side
. The text on the left are links to pages that don’t yet exist, link to
pages such as faq.htm and logo.htm,…They are just words at this point.
The current trend seems to be having links at the top: That’s what we’ll do
Another example: Actual student work
Client Site Design Page 2
You’re looking at her HOME page, the client’s root. Her index link takes the viewer all the way back to the JMA260 index page.
Banner:
In general, your banner will look like this:
Here we go
Download the bee.ai file and place it inside client/Images .Also, download bee3inch and save in the same location.
Note: Recall we Place a graphic; we Open an ai file
Client Site Design Page 3
Creating the Banner
Let’s create the sample banner in Photoshop
Note :If your logo is ready for use, use it instead of “bee”. By ready, I mean you have an ai version of it so you can use it to construct the banner..
First, if necessary, resize the logo …assume it’s a bee logo you created in Illustrator, but which is 3” tall: Too large for our banner. Remember to resize in Illustrator
Practice/example
Open the bee3inch.ai Illustrator logo file Or, if the logo is a gif (bad!!) , start a new document, 4” by 3” and
place your logo
Open the .ai (or pdf) file in Illustrator
Check the size
Mine is currently 3 “ tall…way too big!
Use the Selection tool and select the bee Open the Transform panel
Make sure the “link” is applied: That way, if you change the height, the width changes proportionally.
Make the Height be 80 pixels (banner is 90 px, so will have breathing room).
Client Site Design Page 4
The width changes automatically, if the link button was pushed
Or 97.5 px tall
Cropo Use Artboard tool
File>Save for Web (png-8 or Gif) Use the name: Logo.gif (or logo.png) , inside Client/Images
(Don’t bother to save the original ai file, just close it)
Close Illustrator
Back to Photoshop…now for the rest of the banner Use Photoshop to specify a new 1366 x 90 white document
named Banner ...(Feel free to choose another color)
Client Site Design Page 5
Note: As of 2015, 1366 pixels was by far the most popular width of a Web page, (27% of all sites examined)
As is by now customary, create a new layer from the Background layer, name it Banner, or double-click on Background and change its name
Fill it (Paint Bucket) with your desired color...I’m leaving mine white…
o Think about complementary and analogous colors…color.adobe)
Use Add a Layer Style to banner layer : choose a bevel and emboss .
Client Site Design Page 6
(I increased the size and soften)
Click OK
File>Open to open your logo file ( I called mine Logo.gif)
You should now have two open documents:
Note: If the new layer was named index;
Client Site Design Page 7
Change its Mode to RGB Color:
Move the Bee to the Banner document (Move tool)
Add text to the banner Text Window>Character
Client Site Design Page 8
(Contrasting color…I chose a dark blue ) about 60-70 pixels tall (recall the banner is 90 pixels tall) I used 72 points, dark blue
Since the text is large, OK to use serif font…I chose Times New Roman
Enter Joe’s BeeNRY , for example (insert your own text), maybe your client’s name…
Use the arrow keys to nudge the text
Better yet, center the text, OR
Use tracking
File>Export as ClientBanner.gif or .png OR: File>Export Quick Export (png) …
save inside Client>Images
Close Photoshop
We need a new html page into which we’ll insert the ClientBanner and add links to our (future) client pages. Those are the links mentioned earlier. The new page will become a template. (Explain)
Start Dreamweaver and select your site. Browse to your Client folder
Inside Client folder create and save a new page named index.htm
We now have a site within a site: Think of Duquesne. We have a Duq site and within it, a JMA site (jma.duq…)
Client Site Design Page 9
Add the banner to the new index:
Select Insert>Image>Image Browse, or point to, ClientBaner.png (Or, whatever you called IT)
Add these soon to be links along the top:
Home, Logo, FAQ, Brochure, Business Cards, Contact Us, Video, Index….like this:
Separate each with a space, a vertical bar and a space
We now have an index.htm page that doesn’t do much
We’ll now link each link-word to an HTML page that doesn’t exist yet
Start with Home link…
Client Site Design Page 10
When selected, it should take the user to the Client>index.htm page
Select the link word Home In the link box type index.htm
So, when clicked, the HOME link will send the viewer to index.htm
Must type its name in (index.htm). Later, we will create a real index.htm.
Select Logo next Link Logo to logo.htm., since logo.htm doesn’t yet exist, we can’t
link to it as we normally do (…point…).
Client Site Design Page 11
Link the others (Use BusCards.htm for the business cards link, and ContactUs.htm for Contact Us)..why?
For the index link word at the end, browse or point, to your main JMA260 index page, the one in the jma260 root
Now we add the pseudo styles to style the links. Recall (I’m sure you do!) where embedded styles go!
Open index.htm
Copy the text that’s below:
<style type="text/css">
a:link {color : #666; text-decoration : none;}
a:visited {color : #087368; text-decoration : none;}
a:hover { color : #000; border-bottom : 1px solid #625252;text-decoration : none;background-color : #cccccc;}
a:active {color : #625252; text-decoration : none;}</style>
Switch to Code View and paste where it belongs
Here is my complete code with comments: (Change the title to your client’s name)
Client Site Design Page 12
Add a title value, I used Beenry home Save
Make the four “a” links be .8em (font-size:.8em;) in size (Look up how to size a letter.)
Test your page… F12
Did yours work?
Now, we need to create all the “linked to” html pages we referenced in the links at the top. We want the banner and links to always be on every page, at the same location…templates to the rescue
Templates
Create a template and base the client pages on the template. If you change the template, every page based on that template will automatically change.
Note: There will be a Templates folder that Dreamweaver creates for us. You MUST ftp (put) the Templates folder if you make any changes to it.
DON’T you save anything into the Templates folder.Client Site Design Page 13
Let’s turn our index.htm page into a template. That means we won’t have an index page for a while.
Note: I ended up with two index.htm pages: The original one and the one with the inserted code. If that happens to you also, delete the index.htm without the code.
Select File>Save as Template :
I saved mine as Master
Click save
Dreamweaver will add a .dwt extension
It will be named master.dwt
Will be Inside Templates folder:
Client Site Design Page 14
It will be saved in the root folder (JMA260) If you get a message to update links, say yes
At this point, if we create pages based on the template, we’ll NOT be able to modify them …those pages will be locked
We need to specify an area where the content can be added
Move mouse to upper-left corner of the large content area, just after the links
Insert>Template> Editable Region
Client Site Design Page 15
I named my region Content
Client Site Design Page 16
Now, we will create (modify existing) the site’s “missing” html pages using the master.dwt. Recall we created non-existing html pages, one for each link
File>Save All File>Close all
Whew, intense huh!!
Next, use the template to create the linked-to pages. Start with the Home link, index.htm
First, do a Save>All
Now, create pages based on the template:
o Choose File>New> Site Templates
Client Site Design Page 17
Make sure this is checked
Select your template (Master for me)
Client Site Design Page 18
Also:
Click Create Delete word “content”
This will become our index page
Enter content. Something like Welcome to Joe’s beenRY, the best in town…blah blah..
Here is what will become the Home (index.htm) page:
Client Site Design Page 19
File>Save As>index.htm inside Client folder Choose File>Save All
One final reminder: You will have to FTP the Templates folder as well as your images and html pages. Click the Templates folder in the Files Panel, and click the up=arrow
Create other pagesUse the template to create these additional html pages : Most of which will say Under Construction.
Logo.htm
FAQ.htm
Video.htm
Contactus.htm
Brochure.htm
BusCards.htmClient Site Design Page 20
Index.htm (Did this one already)
The Power of templates Save and close all your pages Open your master.dwt ( Design view)
If you make a change to a template (dwt)
Type your initials inside master.dwt Do a Save All
Let Dreamweaver update all affected pages
Did it work?
Delete your initials Upload the Templates folder to network (Z) drive
Upload your main (client, maybe) folder, because that’s where the site html pages are saved
Every page is now changed
File>Save All
Remember:
FTP (upload) Templates AND Client folders
Client Site Design Page 21
File>Close all
Here is my final Files panel content:
Update your Digital Portfolio index page:
Add a link on your main index page that says Client Site and make the link point to JMA260/Client/index.htm
Exit Dreamweaver
Test by browsing to your portfolio page
Click your name on the web site, and browse, or use URL (assumes you have an index page inside Client)
www.jma.duq.edu/users/YourName/pub/jma260/client
Client Site Design Page 22
END
Client Site Design Page 23