1 creating a second web page this section shows you how to create the huntington beach web site
Post on 13-Jan-2016
217 Views
Preview:
TRANSCRIPT
1
Creating a Second Web PageCreating a Second Web Page
• This section shows you how to create the Huntington Beach Web site
2
Copying a Table to a New File
Copying a Table to a New File
• Click the Surf’s Up Home Page button on the taskbar to minimize the browser
• Click immediately to the left of the < in the <HTML> tag on line 1. Drag through the end of the <BODY> tag on line 5
• Press CTRL+C to copy the selected lines
• Select New from the File menu
• Press CTRL+V to paste the contents from the Clipboard into a new file
3
Copying a Table to a New File
Copying a Table to a New File
pasted tags and text
4
Changing the TitleChanging the Title
• Highlight the words, Home Page, between the <TITLE> and </TITLE> tags on line 3. Type Huntington Beach as the text
• Click immediately to the right of the </TABLE> tag on line 5. Press the ENTER key twice
• Type the closing </BODY> and </HTML> tags
5
Changing the TitleChanging the Title
change to title
6
Inserting an ImageInserting an Image
• Create a table with two rows and two columns
• Insert the image in the first column of the first row
• This image is stored on the Public Folder
7
Inserting an ImageInserting an Image
• Enter the following HTML starting on line 7
8
Inserting an ImageInserting an Image
table andimage tags
9
Inserting the Heading and Paragraph
Inserting the Heading and Paragraph
• Enter the following HTML starting on line 14
10
Inserting the Heading and Paragraph
Inserting the Heading and Paragraph
heading and paragraph code
11
Creating a Link ListCreating a Link List
• It is important to include text links on every page with an image map for users who have images turned off
• Create this link list in the left hand column of the second row
12
Creating a Link ListCreating a Link List
• Enter the following HTML starting on line 26
13
Creating a Link ListCreating a Link List
link list
14
Inserting a ChartInserting a Chart
• Charts provide an excellent way to display sales information
• Insert this chart in the second column of the second row
• The chart is stored in the Web Design Folder on the public folder
15
Inserting a ChartInserting a Chart
• Enter the following HTML starting on line 34
16
Inserting a ChartInserting a Chart
HTML to displaychart image
17
Creating an E-Mail LinkCreating an E-Mail Link
• Enter the following HTML starting on line 40 to display the E-Mail link
18
Creating an E-Mail LinkCreating an E-Mail Link
e-mail link
19
Save and Print the HTML FileSave and Print the HTML File
• Select Save As from the File menu
• Type hnbch.htm in the File name text box, then click the Save button
• Select Print from the File menu
20
Save and Print the HTML FileSave and Print the HTML File
21
Close NotepadClose Notepad
• Click the Close button on the right-hand side of the title bar
22
Viewing the Web PageViewing the Web Page
• Click the Surf’s Up Home Page button on the taskbar to maximize your browser
• Click the Huntington Beach link from the image map on the Surf’s Up home page
23
Viewing the Web PageViewing the Web Page
images
24
Printing the Web PagePrinting the Web Page
• Click the Print button on the Standard Buttons toolbar
25
Testing the LinksTesting the Links
• Click the Home link on the Huntington Beach Web page
• Click the Ft. Lauderdale link on the home page• Click the Huntington Beach link on the Ft.
Lauderdale Web page• Click the Maui link on the Huntington Beach
Web page• If the links fail, edit the HTML code and retest
the links
26
Close your BrowserClose your Browser
• Click the Close button on the right-hand (PC) or left-hand(Mac) side of the title bar
27
Image Mapping SoftwareImage Mapping Software
• Several image mapping software tools generate the x- and y- coordinates based on the clickable areas that you select on the image
28
SummarySummary
• Define terms relating to image mapping
• List the differences between server-side and client-side image maps
• Name the two components of an image map
• Describe the steps to implement an image map
• Distinguish between appropriate and inappropriate images for mapping
29
SummarySummary
• Sketch hotspots on an image• Describe how x- and y- coordinates relate
to vertical and horizontal alignment• Open an image in Paint (Photoshop)• Use Paint (Photoshop) to map the
coordinates of an image• Use the <MAP></MAP> tags to begin and
end a map
30
SummarySummary
• Insert an image into a table and use the USEMAP attribute to define a map
• Use the <AREA> tag to indicate the shape, coordinates, and URL for a mapped area
• Change link colors
• Create a link list
• Insert a chart into a table on a Web page
31
What You Should KnowWhat You Should Know
Project 4 CompleteProject 4 Complete
top related