Resources | Admissions | Academics & Research | Medical Center | Administration | Alumni & Visitors | News & Events
|
The following information is provided for anyone associated with Duke University to create a web page that has the same look and feel as the main Duke web site. Please feel free to make any modifications to this style that you deem necessary to make your own web page stand out. This information is provided as is. There are a number of services at Duke to teach you how to create a web site and to help you along the way. Please do not send questions to the webmaster about using this design guide to create your own web pages. The TitleThere are two places on the page that provide a navigation guide to the user. The title is one and the header image (see below) is the other. The title (as well as the navigation bar in the header) displays the path a user takes from the "main page" to your site. The "main page" is designated in the title as Duke. The shortened form of Duke University was chosen since some browsers cut off the title after a certain number of characters. As in the header image each of the stops along the navigation path are separated by > (or > in HTML). Since the main hierarchy of the Duke web site is going to be in flux and since your web site may not even be linked off the main web site, we recommend that the second part of the navigation path is your main page. For example, if the registrar were to adopt this design (and they have) the navigation path would read "Duke > Registrar". Header ImageAll header images were created using Adobe Photoshop. To reproduce the
look of these images you can download the header PSD or JPG file
containing this template:
The text in the upper left hand side of the graphic should
represent the last stop on the navigation path. The font used
has the following characteristics:
Color: Black
On the other side, the navigation area of the graphic should show the exact same text as in the title except with Duke replaced by Duke University. The font used here has the following characteristics:
Color: White
Note: all graphics discussed on this page were saved in JPG format with quality set to 2 and format options set to "Baseline ('Standard')". The header graphic also serves as an image map. This means that if you click on certain places on the graphic you are taken to a different web page (i.e. certain areas of the graphic act like hyperlinks). The header image has two areas that serve as "hot spots." The first is the chapel. Clicking on the chapel should always return you to the main Duke web page (http://www.duke.edu/). Additionally, the navigation path itself contains "hot spots." Clicking on any of the pages in the path should return you to that page. An image map is simply a set of coordinates which creates a rectangle within the graphic. Clicking anywhere within the rectangle takes you to a specified page. One of the easiest tools that you can use to create an image map is MapThis!. Please note that on each of the main Duke web pages we provide both a client side and a server side imagemap. For example, the full header (with imagemap) of this page is
represented in HTML as the following:
<CENTER>
The keyword "USEMAP" in the IMG SRC tag signifies a client side imagemap which is then displayed below. On the other hand, the keyword "ISMAP" signifies a server side imagemap. The A HREF surrounding the image points to this map file which looks like this:
default http://www.duke.edu/main/design/design.html
rect http://www.duke.edu/main/welcome.html 0,0 56,67
rect http://www.duke.edu/main/welcome.html 340,54 415,67
rect http://www.duke.edu/main/site_info.html 426,54 500,67
Note that the coordinates for the chapel image and the y coordinates (i.e., 54 and 67) for the navigation bar should never need to be changed. Additionally, the "default" should always point to the page that you are creating. You will also note that in the header code provided above is a text version of the links off the main Duke page. To provide easy navigation to all of the items within your site we recommend that a similar list be created or that this listing be maintained to allow users to enter your site and continue to have easy access to all of the other resources on the Duke web. BodyThe <BODY> tag contains color information for the background, text, links and verified links. Users may set the default colors of their browsers to values you cannot anticipate. We recommend setting ALL FOUR color values. The <BODY> tag used on www.duke.edu is as follows:
The main body of the web page consists of a table of links and
descriptions. The table code with one link / description line is
provided below:
<TABLE ALIGN=CENTER WIDTH=584 BORDER=0 CELLPADDING=5 CELLSPACING=5>
Note, specifically, that the link is in all capitals and is one size smaller than the description and that the is used to provide compatibility with lynx (a text only browser). FooterFinally, at the bottom of each page of the new Duke web site we provide a footer graphic that includes contact information. We highly recommend that this be maintained throughout Duke with the contact information changing as is appropriate for each web site. Please make sure, however, that the department or contact person is included in the text of the image so that users are not confused between the contact information that is provided on the main Duke web page and your personalized contact information. To reproduce the look of this image you can download the footer PSD or JPG file
containing this template:
Color: White
Also, please ensure that the ALT tag for the graphic also contains the contact text for either text only browsers or browsers specifically set not to display graphics. Main Image GraphicsOn a unrelated note if you wish to create a graphic for the main page please use the following template PSD or JPG:
|
