04 Links & Images. 1 The Anchor Tag. 1.1 Hyperlinks
|
|
|
- Nancy Simmons
- 8 years ago
- Views:
Transcription
1 One of the greatest strengths of Hypertext Markup Language is hypertext the ability to link documents together. The World Wide Web itself consists of millions of html documents all linked together via hypertext. A good web site designer should be able to use hyperlinks to make it easy for visitors to not only move around their site easily, but to also get to related sites. The key is to enable people to get to what they want as quickly and easily as possible. Hyperlinks are defined in html using the <A> (anchor tag) and must always have a start and end tag as described in the next section. 1 The Anchor Tag 1.1 Hyperlinks The most common use for the anchor tag is to provide a link to another document. This is done using an anchor tag with a hyperlink reference attribute, as shown below. <A HREF= filename.html >text for the link</a> E.g. If you wanted the text see our product list to be used as a link to a document called product.html you would do this with the following line of html: <A HREF= product.html >see our product list</a> Most browsers display hyperlink text (the text between the closing and ending A tag) as underlined text displayed in the colour specified in the document s BODY tag. Moving the mouse pointer over a hyperlink will change the shape of the pointer to a pointing hand. Clicking the text will make the browser load the document the link points to. Steve O Neil 2005 Page 1 of 17
2 1.2 Relative vs absolute links There are two types of hyperlinks you can use in your html - relative and absolute. An absolute hyperlink will give the complete address of a document. A relative hyperlink will give the address of the destination document in relation to the current location. In most cases, a relative link will only give the name of a file that s in the same location as the file currently being edited. E.g. If two documents were in the same location you may use a relative reference such as <A HREF= index.html >main page</a> If they were in different locations (such as a link to another site) you would need to use an absolute reference such as <A HREF= >someone else s page</a> Tip Always save your main page as index.html. If an address that goes to a directory without specifying a filename is entered into a browser, the browser will look for a file in that directory called index.html and load it. So if someone tries to go to their web browser will load the document links It is often useful in an html document to create a link to an address. Doing this means that when someone clicks the link, their program will open, ready to send an to that address. To create an link, you use a regular hyperlink tag. For the link location, put MAILTO: followed by the address. E.g. <A HREF= MAILTO:my@address.com.au >send me an </a>. It is a common practice to make the address itself into an link. E.g. If you wanted the text my@address.com.au to appear on your page as a link to the address it describes, you could use the following HTML. <A HREF= MAILTO:my@address.com.au >my@address.com.au</a> Steve O Neil 2005 Page 2 of 17
3 Exercise 7 Create links to other pages and links 1 Open the file index.html. We will create a navigation section with links that can be used to get to other pages in the site. The navigation links will go along the top of the page similar to the links shown below. Note the vertical lines ( ) that are used to separate each link so it is easy for users to tell them apart. If you can t find it on your keyboard you can get it by holding down [Shift] and pressing \. (Note that on most keyboards looks like ) Home About Us Upcoming Events Who's Who Contacts Links 2 Between the body and the main heading, insert the following html. This should be after the <BODY> tag and before the <H1> tag so that it will appear at the top of the page above the heading. Remember the at the end of each line. Put a blank space before and after each one. <P ALIGN="center"> <A HREF="index.html">Home</A> <A HREF="about.html">About Us</A> <A HREF="events.html">Upcoming Events</A> <A HREF="who.html">Who's Who</A> <A HREF="contacts.html">Contacts</A> <A HREF="links.html">Links</A> </P> 3 Find the text that says If you have any questions about us, call on (08) We will replace the phone number with an link. Change it to If you have any questions about us, <A HREF="MAILTO:cougar@footy.net.au">Send us an </a> 5 Find the text that says Take a look around and find out about our club. 6 We will turn the text about our club into a link to about.html by replacing it with the HTML below. <A HREF="about.html">about our club</a> 7 Save and preview the document. It should look similar to the one below. 8 Open the file contacts.html and make the address on that page into a MAILTO link. Steve O Neil 2005 Page 3 of 17
![If you can t find it on your keyboard you can get it by holding down [Shift] and pressing \.](/docs-images/44/16347615/images/page_3.jpg "(Note that on most keyboards looks like ) Home About Us Upcoming Events Who's Who Contacts Links 2 Between the body and the main heading, insert the following html.")
4 1.4 Bookmark links It is often useful to link to a different part of the same document or to link to a specific location on a different document. It is especially useful to do this when you want an index at the top of a long document so people can skip to different parts in the document. Eg. Take a look at the news items page on the left. There are headings for each month on this long page and a user might want to go to a certain month such as April without having to scroll through the whole page. This can be done using the NAME attribute of the anchor tag. Firstly you need to specify the destination for the link. You would do this by going to the April heading and putting in the following HTML. E.g. <A NAME= april ></A> It is not essential to have any text inside the A tag although in this instance you could put the tag around the text in the April heading. E.g. <H2><A NAME= april >April</A></H2> You can then link to it by using a regular anchor tag, with the link name, following a #, as the link location. E.g. <A HREF= #april >See the news for April</A> Note that the names you give each location are case sensitive. I.e. uppercase and lowercase letters do make a difference. To link to a specific location in another document, you first need to make sure that the point you want to link to has an <A NAME= ></A> tag. Then you can link to it as normal, with the name of the bookmark at the end of the name of the document. E.g. <A HREF= news.html#april >Link to the external destination</a> Tip If you use bookmark links to allow visitors to your site to go to different parts of a long document, it is a good idea to provide back to top links at regular intervals. You can do this by naming a location at the top of the document, and then placing links to that document at regular intervals down the page. Steve O Neil 2005 Page 4 of 17
5 Exercise 8 Create internal links within a document In this exercise we will work with a file called links.html. This contains a list of links to other sites in several categories. Since the entire list is quite long, we will put a small contents section up the top. This will allow users to use a link to go straight down to the section they re after. 1 Open the document called links.html 2 Have a look at the html and preview it in your browser The first thing we need to do is name the destinations for the links. We will use the category headings as the destinations. 3 In your HTML editor find the following text in the HTML <H3 ALIGN="center">AFL Clubs</H3> This is the first category heading. We will mark this as the destination for a link by giving it a name (afl) that we will link to later on. Add an anchor name (<A NAME= >) so it is similar to the HTML below. <H3 ALIGN="center"><A NAME="afl">AFL Clubs</A></H3> 4 We will now do the same thing for the WAFLs Clubs and SANFL Clubs headings. Further down the page. Give them the following names. WAFL Clubs (wafl) and SANFL Clubs (sanfl) 5 We will now put a contents section below the Links To Other Sites heading and above the AFL Clubs heading. I.e. On the line after <H1 and before <H3. The links in the contents section will point at the names we just set up. 6 In that position, insert the following html <P><A HREF="#afl">AFL Clubs</A> <BR><A HREF="#wafl">WAFL Clubs</A> <BR><A HREF="#sanfl">SANFL Clubs</A></P> 7 Save and preview the document test the links in the contents section. We will finish our site navigation by taking the links we put on our main page and copying them to the top of every other page. We will also take the information from the bottom of the main page and copy it to the bottom of every other page. 8 Use copy and paste to copy the navigation section from the top of the index.html page to the same position in all the other pages. (about, contacts, events, links, who) 9 Use copy and paste to copy the information at the bottom of the index.html page to the same position in all the other pages (everything from the horizontal line downwards). 10 Once all documents are saved, preview one of them and use the navigation area at the top of the page to look at each one. 11 On your links.html page, put the following line below the <BODY> tag. <A NAME="top"></A> At the end of each section of links (after each </DL> tag), add a back to top link with the following line of HTML <P><A HREF="#top">Back to top</a> Steve O Neil 2005 Page 5 of 17
6 2 The Image Tag It is rare these days to find a website without pictures being used in some form. Images are inserted in html with the IMG tag. Since the tag is specifying the point where the image will appear, there is no close tag to indicate the end of the image. The most basic image tag will specify the name (source SRC) of the image file to be inserted. Like hyperlinks, this file reference may be relative or absolute. E.g. <IMG SRC= picture.gif > Images are commonly used as hyperlinks instead of text. A picture is worth a thousand words so a picture can often indicate the purpose of a link better than a word. Using images can also make it possible to use an image showing special text effects (such as shadows) that are impossible with html text. To make a picture into a link, you insert your image tag inside your anchor tag. E.g. <A HREF= link.html ><IMG SRC= picture.gif ></A> There are quite a few attributes that an image tag can have. These are outlined below. 2.1 Image tag attributes HEIGHT WIDTH HSPACE VSPACE ALT BORDER ALIGN E.g. These two attributes specify the size of the image in pixels. If they are not included, the image will display at its normal size. It is usually a good idea to include these attributes for two reasons. 1 The browser can load the picture quicker when it already knows its exact size. 2 The browser will make room for the loading picture rather than shifting everything down the page as each image loads. These attributes specify the amount of horizontal and vertical space around the picture in pixel measurements. Specifies the text that will display while the picture is loading or if it doesn t load. If the picture s important, make sure you include this. Some people don t have browsers that show images and some turn image loading off to speed up their browsing. Recent browsers use the alternate text as a pop-up when the mouse is moved over the image. Specifies the width (in pixels) of the picture s border. Set this to 0 if the picture is a hyper-link; otherwise a border the colour of your links will appear around the image. TOP Aligns the top of the picture with the top of the current line of text MIDDLE Aligns the middle of the picture with the middle of the current line of text BOTTOM LEFT RIGHT Aligns the bottom of the picture with the bottom of the current line of text Aligns the picture to the left of text and will make text wrap around the picture Aligns the picture to the right of text and will make text wrap around the picture <IMG SRC= picture.gif ALT= Photo HEIGHT= 50 WIDTH= 50 BORDER= 0 ALIGN= left > Steve O Neil 2005 Page 6 of 17
7 2.2 Image types There are two image formats commonly used throughout the Internet. These are GIF (Graphical Interchange Format) and JPEG (Joint Photographic Experts Group). The reason they are both so widely used is because they are both formats that can compress an image s file size without too much loss in image quality. These smaller file sizes make them ideal for use on the Internet GIF Images Graphic Interchange Format Developed by CompuServe. Standard gifs are usually GIF89a format. Animated gifs are GIF89b format. GIF87a standard is still sometimes used but doesn t support transparent areas. File extension -.gif JPEG Images Joint Photographic Expert Group Developed by the group the format was named after. File extension -.jpg.jpeg or.jpe GIF vs JPEG Differences GIF JPEG Best for drawings, logos, graphs, text Best for scanned photos, artwork No more than 256 colours Approximately 16.7 million colours Lossless format (no loss in quality) Lossy format (loss in quality when saved) Interlaced Progressive rendering Transparent areas Animation PNG Images Portable Network Graphic Combines the features of GIF and JPEG in to one format. But isn t very commonly used. File extension.png 2.3 Tips for Using Graphics in Websites Remember that graphics may look different on different screen sizes. Don t make the picture any bigger than you absolutely have to. Re-size graphics in a graphics program instead of doing it in the web page. Provide alternate text for the image (Use the ALT attribute in the image tag). Save pictures in the right place. Usually best to save them in the same folder as your website files. Make filenames descriptive. Avoid spaces in filenames. Use an underscore _ instead. Keep filenames lowercase. Avoid capital letters. Steve O Neil 2005 Page 7 of 17
8 2.4 Preparing images The golden rule when it comes to preparing images for use in web pages is; don t make the images any bigger than you need to. It s also best to avoid using too many images. Images can do a lot to enhance a page s appearance but too many can make it painfully slow to download. Images take a lot longer to download than text and it can be surprising how much difference there can be in download times for different sized images. You can change the size of an image using the HEIGHT & WIDTH attributes in the image tag but avoid doing that. Get the image to the size you want before you save it and use it in your web page. Most browsers don t do a very good job of re-sizing images and they will end up looking very poor. Good graphic design skills are extremely valuable for a web designer. Try to become familiar with a good quality image-editing program such as Photoshop or Paint Shop Pro. If you are using several images with a bit of text after each one then you may need to take steps to avoid stepping your images. E.g. Text Text Text More text This happens when the text you want to place next to the picture is not enough to carry past the bottom of the picture. When you add the next picture, instead of placing it under the first one, it will be placed beside the existing one. To prevent this problem, you can use the CLEAR attribute of the BR tag. This will force everything after that point to begin on a completely new line. The tag should be <BR CLEAR= all > This should make the new picture begin on a new line like the example below. Text Text Text More text Steve O Neil 2005 Page 8 of 17
9 Exercise 9 Inserting images We are now going to insert some pictures in our documents and replace our text navigation bar with a graphical navigation bar. HTML that has been modified or added is highlighted with bold text. 1 Make sure index.html is open for editing 2 Find and delete the following line near the top of the document <H1 ALIGN="center">Cannington Cougars Football Club Website</H1> 3 In its place, insert and centre the picture called heading.gif with Cannington Cougars Football Club as the alternate text. The resulting html should look like this: <P ALIGN= center > <IMG SRC="heading.gif" ALT="Cannington Cougars Football Club" WIDTH= 300 HEIGHT= 100 BORDER= 0 ></P> 4 Now for the navigation bar. In each of the hyperlinks, we ll replace the text with a picture. We ll also remove the vertical lines ( ) between each link. The html should end up looking like this: <P ALIGN= center > <A HREF="index.html"> <IMG SRC="icon_home.gif" ALT="Home" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="about.html"> <IMG SRC="icon_about.gif" ALT="About Us" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="events.html"> <IMG SRC="icon_events.gif" ALT="Upcoming Events" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="who.html"> <IMG SRC="icon_who.gif" ALT="Who's Who" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="contacts.html"> <IMG SRC="icon_contact.gif" ALT="Contacts" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="links.html"> <IMG SRC="icon_links.gif" ALT="Links" WIDTH="95" HEIGHT="70" BORDER="0"></A> </P> 5 Now copy that html and paste it in all the other pages, just below the <BODY> tag. This should give us a consistent navigation bar on each page and make it easy to get from one page to another. (The other pages are about, contacts, events, links, who) 6 When all your documents are saved, preview index.html and see the changes you ve made. Your site should look similar to the picture on the next page. Steve O Neil 2005 Page 9 of 17
10 2.5 Finished Site Steve O Neil 2005 Page 10 of 17
11 3 Browser Specific Tags The two main web browsers, Netscape s Navigator and Microsoft s Internet Explorer have both introduced new html tags as features of their new browsers. These extra tags that are outside the HTML specification are often referred to as browser extensions. Many of the current standards have resulted from their additions to html. E.g. The latest standard, HTML 4 includes frames an html technique introduced by Netscape when they released Navigator version 2. Although Netscape and Microsoft are usually quick to make their browser s compatible with the other browser s innovative features, some of these additions are still only used by the browser they originated with. A few of these are mentioned below. Because these html tags only work in a particular browser, many web site designers are hesitant to use them. 3.1 Netscape Navigator One of the Netscape s first additions to html was the BLINK tag. Any text that was formatted using the BLINK tag would blink on and off while the page was being displayed. When it was first introduced you could hardly visit a web site without seeing blinking text somewhere but the novelty has since worn off. 3.2 Internet Explorer One of Microsoft s early additions to html was the MARQUEE tag. This could be used to make text scroll sideways across the screen marquee style. It can be used effectively but lack of support in other browsers has meant that this tag is seldom used. Exercise 10 A look at browser extensions 1 In your editor, open the file index2.html. This file is similar to the index.html file you have been working on except that it has some browser-specific tags added. 2 Look for the line that contains the text Top of the table whenever we're able. Notice the <BLINK> tag and the <MARQUEE> tag (the marquee tag has several additional attributes). The <BLINK> tag will be used by Navigator and ignored by Internet Explorer, while the <MARQUEE> tag will be used by Internet Explorer and ignored by Navigator. 3 Preview the file in Internet Explorer. Notice the Marquee effect on the text. 4 Preview the file in Navigator. Now instead of the scrolling marquee text you ll see blinking text. Steve O Neil 2005 Page 11 of 17
12 Links and Images Revision Questions 1. If you had a line <A HREF= news.html >See our latest news</a> which text would show in the browser for the link? 2. What image type would usually be best for a scanned photo? 3. How would you make text wrap around an image? Steve O Neil 2005 Page 12 of 17
13 4 Using Image Maps for Navigation An image map is a technique in HTML that allows a single image to be associated with more than one hyperlink. Eg if you had a picture that was a map of Australia, a visitor to your site could click on a state in the map to be taken to a page for that state. This is because each part of the image (each state) is associated with a different hyperlink. Another benefit of using an image map is that it can speed up the loading of the page. The more files a browser has to load, the more times the browser will have to send requests for files. This takes time. Even if separate graphics may add up to a smaller file size than a single large graphic, the single graphic will usually load quicker. There are two types of image maps used in HTML. Server side image maps refer to another file on the server, so that if a person clicks on the image, the browser refers to that file for the location the link needs to go to. Client side image maps have the information about the image s hyperlinks contained in the HTML of the same page. Since server side image maps are becoming less common, in these exercises we will be covering client side image maps. 4.1 Image Map HTML The information for an image map is contained within the <MAP> </MAP> tags. The <MAP> tag itself has only one attribute. The NAME= attribute, which identifies the map so that it can be associated with the appropriate image. Unlike most tag attributes in HTML, the name of an image map is case sensitive. Within the map tags itself, you would put the information about each of the hyperlinks within the image. These clickable areas are commonly known as hotspots and are defined with an <AREA> tag. The attributes of an <AREA> tag are listed below. ALT= COORDS= HREF= NOHREF SHAPE= Similar to the ALT= attribute in the <IMAGE> tag. This determines the text that will be used if the image isn t displayed. Provides the coordinates for a hotspot within an image. These coordinates are set in pixels and specify the distance from the top of the picture and the left of the picture. In circle hotspots it is also necessary to specify the radius of the hotspot. The precise coordinates can normally be obtained from your graphics program. E.g. in Photoshop, move your mouse to a point on the image and your info palette will show you the x/y coordinates of that point. Similar to the HREF= attribute of the <A> tag. This specifies the destination of the hotspot s hyperlink. When this attribute is used, it means that this hotspot will have no hyperlink associated with it. It is useful for deliberately creating gaps in other hotspots. Any part of a hotspot being covered by a NOHREF hotspot will be non-clickable. There are three types of hotspots, which can be chosen with this attribute. They are rectangle, circle and polygon. For a rectangle hotspot, you need to specify the x/y coordinates for the top left corner and the bottom right corner. For a circle hotspot, you need to specify the x/y coordinates for the centre of the circle and the radius of the circle. For a polygon hotspot you need to specify the x/y coordinates for each point in the polygon shape. Steve O Neil 2005 Page 13 of 17
14 Once you have specified all of the information for the image map, you then need to insert the image itself in the normal way with an <IMG> tag. Within the image tag you will need to add a USEMAP= attribute. The USEMAP attribute will equal the name of your map that you specified with the <MAP> tag. Below is an example of the HTML for an image map, along with the accompanying image. Notice that the Image map has three hotspots a rectangle, a circle and a polygon. <MAP NAME="MainMap"> <AREA SHAPE="polygon" COORDS="201, 106, 224, 141, 268, 133, 275, 93, 247, 54, 209, 66" HREF="poly.html" ALT="Poly Page"> <AREA SHAPE="rect" COORDS="60, 115, 120, 169" HREF="rect.html" ALT="Rectangle Page"> <AREA SHAPE="circle" COORDS="67, 63, 28" HREF="circle.html" ALT="Circle Page"> </MAP> <IMG SRC="pics/imagemap.gif" USEMAP="#MainMap" WIDTH="300" HEIGHT="250" BORDER="0"> This would create an image with hotspots similar to the following diagram. Compare the notes with the HTML above. Circle area with the centre 67 pixels from the left, 63 from the top and a radius of 28 This area has a corner that is 201 pixels from the left and 106 from the top, another corner that is 224 from the left and 141 from the top etc. Square area with the top left corner 60 pixels from the left and 115 from the top. The bottom right corner is 120 from the left and 169 from the top Steve O Neil 2005 Page 14 of 17
15 4.2 Tips for using image maps ALT Attribute It is a good idea to include the ALT attribute for your image map hotspots since this will provide non-graphical browsers with text in place of the hotspots Alternate Navigation Don t rely solely on an image map for your navigation. Many browsers (including text and voice based browsers) are unable to recognise image maps so an alternate form of navigation should be provided. Having a basic text based navigation bar at the bottom of the page is a good idea. This can be placed in a small text size so that it will be inconspicuous in most browsers. People using non-graphical browsers can then use that to get around your site instead of the navigation bar. E.g. Home Upcoming Events Who s Who Contact Us Links You don t have to worry about it not being very visible in the older browsers it s intended for. If a browser s old enough that it doesn t recognise image maps, chances are it also won t recognise the FONT tag you use to make the text navigation small. Steve O Neil 2005 Page 15 of 17
16 Exercise 11 Creating an Image Map We will now create an image map to navigate to different areas of a website 1 Open the file imagemap.html in your HTML editor. Look at the HTML and preview the document. We create an image map using the second image on the page. 2 Place the following HTML above that image. This is the HTML to define the hotspots in our image. Notice that the name of our image map is mainmap. Remember that these names are case sensitive so normally we would keep it lowercase. <MAP NAME="mainmap"> <AREA ALT="About Us" COORDS="1,18,83,96" HREF="mapabout.html"> <AREA ALT="Upcoming Events" COORDS="3,239,85,126" HREF="mapevents.html"> <AREA ALT="Links" SHAPE="CIRCLE" COORDS="250,173,47" HREF="maplinks.html"> <AREA ALT="Contacts" COORDS="219,98,299,21" HREF="mapcontacts.html"> <AREA ALT="Who's Who" SHAPE="poly" COORDS="196,248,116,245,106,177,152,143,185,182" HREF="mapwho.html"> </MAP> 4. Now we need to change the image tag so that it will refer to our image map. We will do this by adding the USEMAP attribute as shown below. The Bold text indicates what has been added. <IMG SRC="imagemap.gif" USEMAP="#mainmap" ALT="Image Map" WIDTH=300 HEIGHT=250 BORDER=0> 5. Save and preview the file. Test the links in your image. Steve O Neil 2005 Page 16 of 17
17 Image Map Revision Questions 1. What are the two types of image maps? 2. What three types of hotspot shapes can be included in an image map? 3. What are some ways you could accommodate browsers that won t show an image map? 4. List of some examples of places where you would use an image map? Steve O Neil 2005 Page 17 of 17
Using Microsoft Word. Working With Objects
Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects
Caldes CM12: Content Management Software Introduction v1.9
Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge
Talking: Web. Web design is the hardest thing you will ever do in life. At least when you do it for the first time. Home Page. Talking: Resources
1 Talking: Web Web design is the hardest thing you will ever do in life. At least when you do it for the first time. Home Page Yale: http://info.med.yale.edu/caim/manual/ Design for designers: http://www.wpdfd.com/
Dreamweaver and Fireworks MX Integration Brian Hogan
Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The
Creating Web Pages with Microsoft FrontPage
Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short
Depending on your role, this might mean adding and editing, for example, events, blog entries or news stories.
website guide guide for adding and editing web content Introduction The MS Society website uses a content management system (CMS) called Drupal. As a contributor to the site, you ll receive training in
07 Forms. 1 About Forms. 2 The FORM Tag. 1.1 Form Handlers
1 About Forms For a website to be successful, it is important to be able to get feedback from visitors to your site. This could be a request for information, general comments on your site or even a product
TUTORIAL 4 Building a Navigation Bar with Fireworks
TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
How To Change Your Site On Drupal Cloud On A Pcode On A Microsoft Powerstone On A Macbook Or Ipad (For Free) On A Freebie (For A Free Download) On An Ipad Or Ipa (For
How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this
Introduction to XHTML. 2010, Robert K. Moniot 1
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
Hypercosm. Studio. www.hypercosm.com
Hypercosm Studio www.hypercosm.com Hypercosm Studio Guide 3 Revision: November 2005 Copyright 2005 Hypercosm LLC All rights reserved. Hypercosm, OMAR, Hypercosm 3D Player, and Hypercosm Studio are trademarks
Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame...
Using Microsoft Office 2003 Introduction to FrontPage Handout INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.0 Fall 2005 Contents Launching FrontPage... 3 Working with
Using Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
ANATOMY OF A WEB PAGE...
Web Design Contents INTRODUCTION... 4 WHAT YOU WILL LEARN... 4 ABOUT THE HOME AND LEARN WEB DESIGN SOFTWARE... 5 INSTALLING THE SOFTWARE... 6 WEB COURSE FILES... 6 ANATOMY OF A WEB PAGE... 7 WHAT IS A
COMMON CUSTOMIZATIONS
COMMON CUSTOMIZATIONS As always, if you have questions about any of these features, please contact us by e-mail at pposupport@museumsoftware.com or by phone at 1-800-562-6080. EDIT FOOTER TEXT Included
JISIS and Web Technologies
27 November 2012 Status: Draft Author: Jean-Claude Dauphin JISIS and Web Technologies I. Introduction This document does aspire to explain how J-ISIS is related to Web technologies and how to use J-ISIS
Basic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
Frames. In this chapter
Frames 2007 NOTES This article was originally published in 2003 as Chapter 12 of Learning Web Design, 2nd edition. Since the time of its publication, frames have become all but extinct, particularly for
File types There are certain image file types that can be used in a web page. They are:
Using Images in web design (Dreamweaver CC) In this document: Image file types for web pages Inserting an image Resizing an image in Dreamweaver CSS properties for image alignment and responsiveness nigelbuckner
Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint
Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint While it is, of course, possible to create a Research Day poster using a graphics editing programme such as Adobe
GUIDELINES FOR SCHOOL WEB PAGES
GUIDELINES FOR SCHOOL WEB PAGES Introduction Mountain Home Public School District School web pages are public documents welcoming the outside world to our school and linking our students and staff to outside
Graphic Design Basics Tutorial
Graphic Design Basics Tutorial This tutorial will guide you through the basic tasks of designing graphics with Macromedia Fireworks MX 2004. You ll get hands-on experience using the industry s leading
Introduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
understand how image maps can enhance a design and make a site more interactive know how to create an image map easily with Dreamweaver
LESSON 3: ADDING IMAGE MAPS, ANIMATION, AND FORMS CREATING AN IMAGE MAP OBJECTIVES By the end of this part of the lesson you will: understand how image maps can enhance a design and make a site more interactive
How to create pop-up menus
How to create pop-up menus Pop-up menus are menus that are displayed in a browser when a site visitor moves the pointer over or clicks a trigger image. Items in a pop-up menu can have URL links attached
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 1
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 1 The demand for Web Development skills is at an all time high due to the growing demand for businesses and individuals to
NJCU WEBSITE TRAINING MANUAL
NJCU WEBSITE TRAINING MANUAL Submit Support Requests to: http://web.njcu.edu/its/websupport/ (Login with your GothicNet Username and Password.) Table of Contents NJCU WEBSITE TRAINING: Content Contributors...
Creating a website using Voice: Beginners Course. Participant course notes
Creating a website using Voice: Beginners Course Topic Page number Introduction to Voice 2 Logging onto your website and setting passwords 4 Moving around your site 5 Adding and editing text 7 Adding an
Joomla! 2.5.x Training Manual
Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials
ACADEMIC TECHNOLOGY SUPPORT
ACADEMIC TECHNOLOGY SUPPORT Adobe Photoshop Introduction Part 1 (Basics- Image Manipulation) ats@etsu.edu 439-8611 www.etsu.edu/ats Table of Contents: Overview... 1 Objectives... 1 Basic Graphic Terminology...
The Web Web page Links 16-3
Chapter Goals Compare and contrast the Internet and the World Wide Web Describe general Web processing Write basic HTML documents Describe several specific HTML tags and their purposes 16-1 Chapter Goals
How To Create A Website In Drupal 2.3.3
www.webprophets.com.au PO Box 2007 St Kilda West Victoria Australia 3182 Phone +61 3 9534 1800 Fax +61 3 9534 1100 Email info@webprophets.com.au Web www.webprophets.com.au Welcome to the Drupal How to
Creating HTML authored webpages using a text editor
GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage
To familiarise University Web administration staff with the capabilities of the University CMS and also introduce concepts of Web marketing.
Web Training Course: Web Editing - How to use the Content Management System (CMS). Version 1.0 Draft October 2006 Version 1.1 March 2007 Version 1.2 April 2007 Course Rationale: The University is currently
KOMPOZER Web Design Software
KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web
IAS Web Development using Dreamweaver CS4
IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute
Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote
SiteBuilder (Adding/Editing Content) Enable web pages on your website Add and format text and images Upload images Create Image Links Create Sub Levels Create Hyperlinks Upload Data files (ppt,xls,word
CiviCRM for The Giving Circle. Bulk Mailing Tips & Tricks
CiviCRM for The Giving Circle Bulk Mailing Tips & Tricks By Leo D. Geoffrion & Ken Hapeman Technology for the Public Good Saratoga Springs, NY Version 1.1 5/26/2013 Table of Contents 1. Introduction...
Volume. DAVID A. WILLIAMS Getting Started Guide for Web Development Customers. Getting Started Guide
Volume 3 DAVID A. WILLIAMS Getting Started Guide for Web Development Customers Getting Started Guide WEB SITE DEVELOPMENT Getting Started Guide 2001-2006 David A. Williams All Rights Reserved Phone: 607-587-9275
Getting Started Guide. Chapter 11 Graphics, the Gallery, and Fontwork
Getting Started Guide Chapter 11 Graphics, the Gallery, and Fontwork Copyright This document is Copyright 2010 2014 by the LibreOffice Documentation Team. Contributors are listed below. You may distribute
Fireworks CS4 Tutorial Part 1: Intro
Fireworks CS4 Tutorial Part 1: Intro This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website. Fireworks CS4 is the
Lions Clubs International e-district House Content Management System (CMS) Training Guide
Lions Clubs International e-district House Content Management System (CMS) Training Guide All of the material contained in this guide is the exclusive property of Alkon Consulting Group, Inc. (Alkon).
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
Getting Started with KompoZer
Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files
CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide
CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5
Quick Reference Guide
Simplified Web Interface for Teachers Quick Reference Guide Online Development Center Site Profile 5 These fields will be pre-populated with your information { 1 2 3 4 Key 1) Website Title: Enter the name
Adobe Dreamweaver - Basic Web Page Tutorial
Adobe Dreamweaver - Basic Web Page Tutorial Window Elements While Dreamweaver can look very intimidating when it is first launched it is an easy program. Dreamweaver knows that your files must be organized
Hello. What s inside? Ready to build a website?
Beginner s guide Hello Ready to build a website? Our easy-to-use software allows to create and customise the style and layout of your site without you having to understand any coding or HTML. In this guide
Module 6 Web Page Concept and Design: Getting a Web Page Up and Running
Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create
Chapter 14: Links. Types of Links. 1 Chapter 14: Links
1 Unlike a word processor, the pages that you create for a website do not really have any order. You can create as many pages as you like, in any order that you like. The way your website is arranged and
Creating Personal Web Sites Using SharePoint Designer 2007
Creating Personal Web Sites Using SharePoint Designer 2007 Faculty Workshop May 12 th & 13 th, 2009 Overview Create Pictures Home Page: INDEX.htm Other Pages Links from Home Page to Other Pages Prepare
Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products...
Introduction... 3 Designing your Common Template... 4 Common Template Dimensions... 5 Designing your Shop Top Page... 6 Shop Top Page Dimensions... 7 Product Page Design... 8 Editing the Product Page layout...
Creating your personal website. Installing necessary programs Creating a website Publishing a website
Creating your personal website Installing necessary programs Creating a website Publishing a website The objective of these instructions is to aid in the production of a personal website published on
Fireworks for Graphics and Images
Fireworks for Graphics and Images Joan Weeks SLIS Computer Labs Mgr. October 2009 Fireworks for Banners and Images Fireworks is a web developer s tool to make banners and graphics, as well as format images
Adobe Dreamweaver CC 14 Tutorial
Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
Redback Solutions. Visionscape Manual
Redback Solutions Visionscape Manual Updated 31/05/2013 1 Copyright 2013 Redback Solutions Pty Ltd. All rights reserved. The Visionscape Content Management System (CMS) may not be copied, reproduced or
How to create buttons and navigation bars
How to create buttons and navigation bars Adobe Fireworks CS3 enables you to design the look and functionality of buttons, including links and rollover features. After you export these buttons from Fireworks,
Umbraco Content Management System (CMS) User Guide
Umbraco Content Management System (CMS) User Guide Content & media At the bottom-left of the screen you ll see 2 main sections of the CMS Content and Media. Content is the section that displays by default
RHYTHMYX USER MANUAL EDITING WEB PAGES
RHYTHMYX USER MANUAL EDITING WEB PAGES Rhythmyx Content Management Server... 1 Content Explorer Window... 2 Display Options... 3 Editing an Existing Web Page... 4 Creating a Generic Content Item -- a Web
Web Authoring. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
Content Author's Reference and Cookbook
Sitecore CMS 6.2 Content Author's Reference and Cookbook Rev. 091019 Sitecore CMS 6.2 Content Author's Reference and Cookbook A Conceptual Overview and Practical Guide to Using Sitecore Table of Contents
How To Create A Campaign On Facebook.Com
Seriously powerful email marketing, made easy Table of Contents DOTMAILER QUICK START GUIDE... 3 Main Screen... 4 Getting Started... 6 STEP 1: CAMPAIGN SETTINGS... 7 STEP 2: CAMPAIGN CONTENT... 8 Editing
ADOBE DREAMWEAVER CS3 TUTORIAL
ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO
NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK
Nursing 3225 Web Dev Manual Page 1 NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK Nursing 3225 Web Dev Manual Page 2 N3225: Nursing Inquiry Student Created Group Website Addresses (1 of 2)
Create a Web Page with Dreamweaver
Create a Web Page with Dreamweaver Dreamweaver is an HTML editing program that allows the beginner and the advanced coder to create Web pages. 1. Launch Dreamweaver. Several windows appear that will assist
Book Builder Training Materials Using Book Builder September 2014
Book Builder Training Materials Using Book Builder September 2014 Prepared by WDI, Inc. Table of Contents Introduction --------------------------------------------------------------------------------------------------------------------
How To Manage Your Website On A Webmaster.Com (Webmaster) On A Pc Or Mac Or Macbook Or Macintosh (Web) On Pc Or Ipa (Web).Com (For Mac) On Your Pc Or Pc Or Your
Creative Stream Content Management System (CMS) The Creative Stream CMS is modular and as such installations may vary. Therefore certain sections of this document may not be relevant to your CMS. Contents
Web Design with Dreamweaver
Web Design with Dreamweaver August 2003 Macromedia Dreamweaver MX and Fireworks MX This document describes how you can use Dreamweaver and Fireworks to develop Web sites quickly and easily. You can create,
NDSU Technology Learning & Media Center
1 NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Creating a Large Format Poster (Plot) Using PowerPoint 2013 Posters should be designed and created in a manner that best
Table of Contents. I. Banner Design Studio Overview... 4. II. Banner Creation Methods... 6. III. User Interface... 8
User s Manual Table of Contents I. Banner Design Studio Overview... 4 II. Banner Creation Methods... 6 a) Create Banners from scratch in 3 easy steps... 6 b) Create Banners from template in 3 Easy Steps...
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits
TASKSTREAM FAQs. 2. I have downloaded a lesson attachment, but I cannot open it. What is wrong?
TASKSTREAM FAQs Why do I not receive emails from TaskStream? It could be that your email program is interpreting incoming TaskStream mail as spam, which is a term for junk mail Spam is not typically stored
SiteBuilder User Guide
SiteBuilder User Guide Page 1 of 41 SiteBuilder Manual Table of contents SiteBuilder Manual... 2 Table of contents... 2 What is SiteBuilder?... 4 Tips for building a great site... 4 Getting started...
Sage Accountants Business Cloud EasyEditor Quick Start Guide
Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing
KB COPY CENTRE. RM 2300 JCMB The King s Buildings West Mains Road Edinburgh EH9 3JZ. Telephone: 0131 6505001
KB COPY CENTRE RM 2300 JCMB The King s Buildings West Mains Road Edinburgh EH9 3JZ Telephone: 0131 6505001 Email: kbcopy@ed.ac.uk martin.byrne@ed.ac.uk colin.doherty@ed.ac.uk Step 1. Set up page orientation
Wellesley College Alumnae Association. Volunteer Instructions for Email Template
Volunteer Instructions for Email Template Instructions: Sending an Email in Harris 1. Log into Harris, using your username and password If you do not remember your username/password, please call 781.283.2331
Table of Contents Desktop PC and Apple Mac email applications Web and mobile device email readers Find out more about NewZapp
Table of Contents Why is email display an issue in email marketing?... 2 Expert Email Design... 3 Quick look-up overview... 4 Desktop PC and Apple Mac email applications... 5 Outlook 2007-2016... 6 Content
Guide To Creating Academic Posters Using Microsoft PowerPoint 2010
Guide To Creating Academic Posters Using Microsoft PowerPoint 2010 INFORMATION SERVICES Version 3.0 July 2011 Table of Contents Section 1 - Introduction... 1 Section 2 - Initial Preparation... 2 2.1 Overall
Lesson Review Answers
Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.
Adobe InDesign Creative Cloud
Adobe InDesign Creative Cloud Beginning Layout and Design November, 2013 1 General guidelines InDesign creates links to media rather than copies so -Keep all text and graphics in one folder -Save the InDesign
PASTPERFECT-ONLINE DESIGN GUIDE
PASTPERFECT-ONLINE DESIGN GUIDE INTRODUCTION Making your collections available and searchable online to Internet visitors is an exciting venture, now made easier with PastPerfect-Online. Once you have
CSE 3. Marking Up with HTML. Tags for Bold, Italic, and underline. Structuring Documents. An HTML Web Page File
CSE 3 Comics Updates Shortcut(s)/Tip(s) of the Day Google Earth/Google Maps ssh Anti-Spyware Chapter 4: Marking Up With HTML: A Hypertext Markup Language Primer Fluency with Information Technology Third
Terminal Four (T4) Site Manager
Terminal Four (T4) Site Manager Contents Terminal Four (T4) Site Manager... 1 Contents... 1 Login... 2 The Toolbar... 3 An example of a University of Exeter page... 5 Add a section... 6 Add content to
Web Design. Links and Navigation
Web Design Links and Navigation Web Design Link Terms HTTP, FTP, Hyperlink, Email Links, Anchor HTTP (HyperText Transfer Protocol) - The most common link type and allows the user to connect to any page
DREAMWEAVER BASICS. A guide to updating Faculty websites Created by the Advancement & Marketing Unit
DREAMWEAVER BASICS A guide to updating Faculty websites Created by the Advancement & Marketing Unit Table of content Tip: Click on the links below to go straight to the desired section The W (Web Services)
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Emailmovers Limited, Pindar House, Thornburgh Road Scarborough, North Yorkshire, YO11 3UY Tel: 0845 226 7181 Fax: 0845 226 7183 Email: enquiries@emailmovers.com
Creating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site
Page 1 of 22 DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Before you create your Web site, ask yourself these questions: What do I want the site to do? Whom do I want to visit
Dreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
WEB 140 WEB DEVELOPMENT TOOLS
WEEK 2 Objectives: Website basics Planning a Website Setting up a site in KompoZer Resources: WEBSITE BASICS Websites and pages can have many forms but there are some basics that are generally on all sites
webpage4 Manual Last changed August 11, 2008
webpage4 Manual Last changed August 11, 2008 Table of contents Overview...1 Features Overview...2 System Requirements...3 Upgrading...4 Support...6 Preferences...7 Introduction to HTML...10 Frequently
Creating Hyperlinks & Buttons InDesign CS6
Creating Hyperlinks & Buttons Adobe DPS, InDesign CS6 1 Creating Hyperlinks & Buttons InDesign CS6 Hyperlinks panel overview You can create hyperlinks so that when you export to Adobe PDF or SWF in InDesign,
Tips for clear websites
Plain English Campaign: Tips for clear websites Copyright Plain English Campaign Tips for clear websites This is only a basic guide. If you have any suggestions, corrections or improvements, please contact
Customizing forms and writing QuickBooks Letters
LESSON 15 Customizing forms and writing QuickBooks Letters 15 Lesson objectives, 398 Supporting materials, 398 Instructor preparation, 398 To start this lesson, 398 About QuickBooks forms, 399 Customizing
Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.
28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML
NDSU Technology Learning & Media Center. Introduction to Google Sites
NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants