Duq Notes... · Web viewpage 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… When selected, it should take

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


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


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).


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)


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 .


(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;


Change its Mode to RGB Color:

Move the Bee to the Banner document (Move tool)

Add text to the banner Text Window>Character


(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…)


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…


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…).


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)


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:


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


I named my region Content


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


Make sure this is checked

Select your template (Master for me)


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:


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


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


http://www.jma.duq.edu/users/YourName/pub/jma260/client

END


Documents

Duq Notes... · Web viewpage 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… When selected, it should take