Technology How To

In the 'Dreamweaver' Category...

WFU Features for Personal Web Pages

Wednesday, April 16, 2008 4:57 pm

Personal Web Page Features
Wake Forest provides user access to web page features such as current date, last modified date, and access counts. Insert the HTML code below into the code view of a web page to use these features. The website link at the bottom of this page includes information for advanced users regarding the use of cgi-scripts and password protection on your WFU home page.

Please note, these features only function on the web page once it is published to a web server and will not run when pages are previewed in a web browser from a hard drive.

Current date (place code in between </body> and </html>)

The following code will display the current date in any style text you wish:

<!–#exec cgi=”/cgi-bin/textclock.pl”–>

Results in:
Friday, June 28, 2002

Last date modified (place code in between </body> and </html>)

The following code will display the modification date of the document it is placed on.

<!–#echo var=”LAST_MODIFIED” –>

Results in:
 Last modified: Tuesday, 27-Nov-01 09:44:26

Access counts (place code in between </body> and </html>)

To include access counts in documents, add the following:

<!–#exec cmd=”/pub/gopher-data/cgi-bin/access_count username-docid” –>

Replace username-docid with your user name and an ID of your own choosing for the document. For example, if your username is Mary, and you want to keep an access counter for your home page, you could use:

<!–#exec cmd=”/pub/gopher-data/cgi-bin/access_count mary-home” –>

Results in:
Access count: 1

Using Forms (place code in between <body> and </body>
Simple forms that e-mail the form response can be created by pasting the text below above a form created in Dreamweaver. Begin by creating the form (including a Submit button) in Dreamweaver, then paste the text below into the Code View in Dreamweaver. Paste the code directly above the beginning of the form html. Complete the form by inserting your email address in line two and the name of the form in line 3. Publish the webpage.

<form action=”http://www.wfu.edu/cgi-bin/FormMail.cgi” method=POST>
<input type=hidden name=”recipient” value=”your_email@wfu.edu”>
<input type=hidden name=”subject” value=”Form Name”>
<input type=hidden name=”redirect” value=”http://www.wfu.edu/help/thanks.html”>
<input type=hidden name=”env_report” value=”REMOTE_HOST,HTTP_USER_AGENT”>
<table width=60% border=0 align=”center”>

Further Information
The info above can be found at: http://www.wfu.edu/help/web-guide/users.html

In addition this page also contains information on:

  • Creating a home page automatically
  • Creating a cgi-bin directory and using CGI scripts
  • Using password protection to control access to pages

Posted in Adobe, Dreamweaver | Add Comment »

Activating Your Wake Forest Homepage

Tuesday, April 15, 2008 4:36 pm

Introduction
A home page is the first page presented when a user selects a site or presence on the World Wide Web. At Wake Forest faculty, staff, and students can create a machine generated Wake Forest Home Page. Once this machine generated web page has been created it can be edited with Macromedia or Adobe Dreamweaver. For instructions on editing your Wake Forest home page, see the handout entitled: Site Management and Web Editing with Dreamweaver. To create a Wake Forest home page, follow the steps below.

How to Activate a Wake Forest Homepage

  1. Open Netscape and enter the URL http://www.wfu.edu/update.html
  2. Log in using your Wake Forest login and password (the same one you use to log in to NT and email.)
  3. Click the Submit button

wake forest homepage setup

4. In the window that appears, click Create a Wake Forest Home Page and click
Continue.

5. Click on the link to your Wake Forest home page that appears in the window.

6. If you already have a Wake Forest home page, the text in the window will indicate that
the directory already exists and supply you with a link to your Wake Forest home page.

Troubleshooting a Wake Forest Homepage
If after editing a web page in Macromedia or Adobe Dreamweaver images on the web page do not appear in the web browser, or links to other web pages are not working properly, check the following:

Did you transfer the image files to the web server?
Make sure you moved a copy of the file from the local copy of your web page to the server copy of your web page using the Site Management Tool in Macromedia or Adobe Dreamweaver.

Are the permissions correct?
Files have permissions attached to them. If the permissions are wrong the image will not appear and an error message will appear that says “Document Does Not Exist” or “File(s) Cannot Be Found.”

Permissions are set by going to http://www.wfu.edu/update.html:

  1. Select Set permissions for personal home page.
  2. Click Continue.
  3. Select Yes from the pulldown menu.
  4. Click Submit.
  5. View the page in Netscape to see if the images/pages are now visible.

Are the File Names Correct?
Images and web pages need file names with no capital letters, special characters, or spaces in the file name.

Posted in Adobe, Dreamweaver | Add Comment »

Image Techniques in Dreamweaver CS3

Monday, April 14, 2008 4:32 pm

Getting Started
This handout assumes all of the following:

• The user has Adobe Dreamweaver CS3 or higher installed on his/her computer.

• The user has established a WFU personal web page (See handout “Web Pages at
WFU.”)

• The user has a local copy of their web page on his/her computer. (Stored in
Userdata folder)

Rollover Images
A rollover image is a technique using JavaScript that lets you change a page element (usually a graphic image) when the user rolls the mouse over something on the page (like a line of text or a graphic image). For this example, the two rollover images will be the same, with only minor differences (ie. darker or lighter). When a user moves the mouse across an image, the image changes by exchanging the two rollover image files.

Creating a Rollover Image

• Before inserting the Rollover Image into Dreamweaver, open up your first image in MS
PhotoEditor or some other image-editing program.

• In MS PhotoEditor, click on the Image menu and select Balance. In the balance window
adjust the Brightness, Contrast and Gamma.

image balance

• Once you get the desired effect, use Save As to save the image under a new name. This
new image will be your Rollover Image.

• Close MS Photo Editor a return to Dreamweaver.

Inserting a Rollover Image

• In Dreamweaver, click Insert > Image Objects > Rollover Image. A window will pop
up.

image rollover

• Insert an Image Name (This is not a filename, just a name for the Rollover Effect.)

• Use the Browse buttons to select the Original Image and the Rollover Image. (Use
the samples provided on our web site or by the instructor)

• Insert Alternative text for accessibility.

• Insert a link URL for the Rollover Image.

• To preview how your mouseover will work in a Web browser, press the F12 key and a
Netscape Navigator window will pop up with the document in it. Move your mouse across
the image and watch it change. Click the image to test the link.

Creating an Image Map
Image maps are single images or clusters of images that have been defined so that the use can click on different areas and be linked to different destinations.

• To create an image map in Dreamweaver, you’ll first need an image.

• Insert the image into your page and click the image to select it.

• Expand the Property window using the “twistie” in the lower right corner of the window.
This opens the image-mapping window.

image properties

• There are four buttons along the left-hand side of the window, a pointer and three
shapes.

• The pointer allows you to move “hot spots” (links within the image map) around, and resize
them. The rectangle allows you to draw rectangular hot spots; the circle creates circular
ones; and the freehand tool allows you to trace irregular shapes. (Note: to end a freehand
shape, double click on the last point.)

• To remove a hot spot, select it with the pointer tool and hit the delete key.

• If you wish to make these hot spots link to files within your Web site, all you have to do is
type the filename into the Link field. Remember to put “http://” in front of the web address
in the Link field for external sites.

Inserting Flash Text
The Flash text object lets you create and insert a Flash file that contains just text. This allows you to create a small, vector-graphic object with the designer fonts and the text of your choice.
Note: You must save your document before inserting a Flash button or text object.

• Choose Insert > Media > Flash Text. The Insert Flash Text dialog box appears.

flash text

• Select a font from the Font pop-up menu. This menu lists all TrueType fonts currently
loaded on your system.

• Enter a font size in the Size field; these are point sizes.

• Specify style attributes like bold or italic, and text alignment by clicking the appropriate
style buttons.

• In the Color field, set the color of the text by using the color picker or entering a Web
hexadecimal value.

• In the Rollover Color field, set the color that appears when the pointer rolls over the
Flash text object. Use the color picker or enter a Web hexadecimal value.

• Enter the text you want in the Text field. To see the font style displayed in the Text
field, select Show Font.

• If you want to associate a link with the Flash text object, enter a document-relative or
absolute link in the Link field. In the Save As field, enter a name for the file. You can use
the default file name (for example, text1.swf), or type in a new name. If the file contains a
document-relative link, you must save the file to the same directory as the current HTML
document.

• Click Apply or OK to insert the Flash text in the Document window. If you click Apply,
the dialog box remains open, and you can preview the text in your document.

Inserting Flash Buttons
Flash buttons work like flash text and allow for the easy creation of buttons for a web page. To insert a flash button, click Insert > Media > Flash Button. Select a button from the Style list, fill in the button text and link destination, and change any other available options.

Posted in Adobe, Dreamweaver | Add Comment »

Using Macromedia Dreamweaver 8 or Adobe Dreamweaver CS3 at WFU

Monday, March 31, 2008 4:56 pm

Outline for Dreamweaver Worksheet:

  • Activating Your Wake Forest Home Page
  • Managing Your Site
  • Inserting Text, Images, and Links onto your site
  • Using Tables and Layers
  • Creating Second Pages
  • Publishing Pages

Activating your WFU Home Page
Before using Dreamweaver to edit your Wake Forest web page, it is necessary to activate your WFU home page.

On the next page you will see a link to your new home page or a link to your existing home page.
Once your WFU web page is activated you are ready to begin using Dreamweaver 8 or Dreamweaver CS3 to edit the site.

To begin, open Macromedia Dreamweaver 8 OR Adobe Dreamweaver CS3 from the Start Menu either in Programs or in Internet Tools.

real wake forest screen shot

Site Management
The site management tool in Dreamweaver has been preconfigured for editing a WFU home page. It allows the user to store and edit a web site on the local hard drive in the Userdata folder, then publish it up to the web once it is complete. In the Designer view, the site management tool can be found on the right side of the workspace in the Files Panel.

The Remote view shows the files on the WFU web server. The Local view shows the files in Userdata on the hard drive.To begin editing, copy the index.html from the Remote view to the Local view, then double-click on the index.html located under Local Files.
Hint: To make navigating in Dreamweaver easier, click pulldown next to the word Common and click on Show as Tabs.

remote view

Inserting and Formatting Text
The Properties Inspector at the bottom of the workspace allows for the formatting of text. Changes to font, font size, color, etc. can all be made using the Properties Inspector.

Issues when Formatting Text

  • Font size on the Web is relative. Fonts appear as one of seven sizes, listed as size 1 through 7 from small to large, not as a particular point size.
  • Format styles appear in six sizes, listed as Heading 1 through 6 from large to small, the opposite of font size. Additionally options for preformatted text and paragraph style are here.
  • Remember fonts on your computer may not be on the computer of the person viewing your page, so stick to the basic fonts such as Helvetica and Times New Roman.

real dreamweaver prop bar

Cascading Style Sheets (CSS)
Cascading style sheets give Web site developers more control over how pages are displayed and allow for the separation of presentation and content. Ideally cascading style sheets are used as the primary method of formatting web pages. The style sheet containing all the formatting information is linked to the web page containing the content. Cascading style sheets are covered in more advanced Dreamweaver classes. Dreamweaver contains many predefined styles.

Inserting a Hyperlink to an external site on your web page

  • To insert a link to a website, open a browser and navigate to the web page.
  • Highlight and copy the URL.
  • In the Link field on the Properties toolbar paste the URL. (or type the URL if you prefer.)
  • Remember to include the http:// before the link.

Inserting Images on your web page
Various issues regarding the use of images on a web page are discussed below. Before inserting an image into a web page, the user must store that image file in the HTML folder in Userdata.

Saving an Image from the web

  • Right-click on the image and select Save Image As
  • Save the image in C:/Userdata/HTML/www-home/images
  • Avoid spaces, special characters and capitalization in file names.

Supported File Types

  • Files need to be in the .gif, .jpg, or .png file formats
  • Other file formats such as .tif, and .bmp can be converted using Microsoft Photo Editor.
  • To convert an image, open the image in Microsoft Photo Editor, go to the File menu and select Save As
  • Click the pulldown for Save File as Type and pick the appropriate file format.(.gif-best for line drawings, icons, .jpg-best for photos, or .png-a replacement for .gif)

How to Insert Image

  • Click on the Insert menu and select Image.
  • Navigate to the location where the image is stored on your computer (usually C:/Userdata/HTML).
  • Click OK
  • Be sure to insert text in the ALT Tag field. The ALT Tag field will appear in the top right corner of the Properties toolbar when the image is selected. ALT tags make your site more accessible to visually impaired people using text readers.

Be sure to insert text in the ALT Tag field. The ALT Tag field will appear in the top right corner of the Properties toolbar when the image is selected. ALT tags make your site more accessible to visually impaired people using text readers.

Testing your web page
To see what your web page will look like and to test links and images before publishing, click the F12 button on the keyboard to preview the page in a web browser and test the images and links.

Copyright Concerns

  • Images and content found on the web are copyrighted unless otherwise specified.
  • Permission should be sought from the copyright holder prior to using copyrighted content.

WFU home page requirements

  • Personal web pages should not contain images, logos, graphics or text from the Wake Forest University home page or other official pages. Students, faculty and staff maintaining personal web pages, including student organization sites, should refer to the guide on Maintaining Personal Web Pages http://www.wfu.edu/help/web-guide/users.html
  • As a non-profit institution, WFU web pages cannot be used for commercial use or link to the sales pages of other sites.

Resources for scanning, digital photography, and digital video
The Information Technology Center on the second floor of the Wilson wing of the ZSR Library offers flatbed scanners to scan photos in the multimedia lab and digital cameras for checkout on a first come first serve basis to students, faculty and staff.

Page Properties
Click the Page Properties button in the Property Inspector to access the Title and Encoding option.

Title/Encoding
An HTML Title describes the contents of your web page in one phrase. It’s likely to appear in search engines’ results and in bookmarks. It’s also the first thing a search engine’s spider sees on your page.

real dw page prop

Inserting and Editing a Menu Bar

  • To Insert the Spry Menu Bar, click on the Spry Tab located at the top toolbar, and then click on the Menu Bar Icon
  • A menu will appear asking whether you prefer a Horizontal or Vertical Menu Bar on your web page
  • The Menu Bar will now appear on your screen. To Edit the Menu Bar, click on the blue-colored tab at the top of the table and the Properties menu will appear at the bottom of your screen

real dw spry

Using Table and Layers
Tables are used to arrange cells and data into columns and rows and for design layout. Layers are another option for design layout. In Dreamweaver, layers are used to position other objects such as images, text, and tables.

Inserting a Table

  • Click on the Insert menu and select Table
  • Insert the number of rows and columns and the width and border size. (These settings can all be changed later). Header rows and columns can also be selected and text in the header appears as bold and centered.
  • Click OK

real dw table

Inserting a Layer

  • Click on the Insert menu and select Layer Objects > Layer
  • Click, hold and drag the cursor across the area on the screen where you want the layer to appear.
  • Add content inside the layer.

Creating a Second Page
At some point, users have more content than will fit on a page, or they begin to wish to organize content on individual pages. For example, one can create a resumé page called resume.htm and link to that page from a hyperlink on index.html. (NOTE: Web pages can end in either .html or .htm).

To create a new page:

  • Click on the File menu and click New
  • In the window that appears, click the category Basic Page and HTML
  • Add content to this page, including the title field!
  • Save this page in the C:/Userdata/HTML or where the local copy of your web page is stored.

To create a link to a new page from the index.html

  • Highlight the text for the link in the index.html page
  • Click on the Point to File button in the Property Inspector.
  • Drag the arrow to the file in the File panel in the Panel groups.

real dw point to file

Publishing Pages
Before your changes can be seen on the web, all the files must be published to the web server. Every time a file is changed it must again be published to the web server.

To publish a page

  • Click on the name of the page/file under Local Files
  • Click the Up arrow in the button bar.
  • Once this is complete, use a web browser to go to http://www.wfu.edu/~yourlogin and see the changes.

dw put files

Posted in Adobe, Dreamweaver | Add Comment »

Related Links & Other Resources

Note

You are currently browsing the archives for the Dreamweaver category.

Search this blog

User Tools

Archives

Categories

Subscribe

Powered by WordPress.org, protected by Akismet. Blog with WordPress.com.

Service and Resource Portals