Duq



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.

Overview Design: linking pages

Below you can see I used hypertext (Words that point to new html pages) links down the left side

. [pic]

• 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

[pic]

Another example: Actual student work

[pic]

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:

[pic]

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

[pic]

The width changes automatically, if the link button was pushed

Or 97.5 px tall

• Crop

o Use Artboard tool

[pic]

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

[pic]

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

[pic]

(I increased the size and soften)

[pic]

• Click OK

• File>Open to open your logo file ( I called mine Logo.gif)

You should now have two open documents:

[pic]

Note: If the new layer was named index;

[pic]

• Change its Mode to RGB Color:

[pic]

• Move the Bee to the Banner document (Move tool)

[pic]

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

[pic]

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

[pic]

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:

[pic]

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

[pic]

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:

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

• Switch to Code View and paste where it belongs

Here is my complete code with comments: (Change the title to your client’s name)

[pic]

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

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

[pic]

• Click save

Dreamweaver will add a .dwt extension

It will be named master.dwt

Will be Inside Templates folder:

[pic]

• 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

[pic]

I named my region Content

[pic]

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

[pic]

• Make sure this is checked

[pic]

• Select your template (Master for me)

[pic]

Also:

• Click Create

• Delete word “content”

[pic]

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:

[pic]

• 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 pages

Use 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.htm

• 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

[pic]

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:

[pic]

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)

jma.duq.edu/users/YourName/pub/jma260/client

END

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download