adobe weaver web design. start the dw 2 workspace layout application bar document toolbar document...
TRANSCRIPT
3
WORKSPACE LAYOUTApplication Bar
Document Toolbar
Document Window
Workspace Switcher
Property Inspector
GroupPanel
7
SET PAGE PROPERTIES
• Click button “Page Properties..” in property inspector• or
• Click on Menu “Modify -> Page Properties”
Background,Text, and Link Colors
8
INSERT IMAGE
• Select “Image : Image” in the Insert Panel • or
• Select menu “Insert” -> “Image” (see next slide)
• Then select image to be inserted from folder
10
CREATE ROLLOVER IMAGE
• Select menu “Insert” -> “Image Objects” -> “Rollover Image”• We can also select it from the Insert Panel
11
CREATE ROLLOVER IMAGE (CONT.)
• Select image from folder for the Original image: and Rollover image:
12
HOW TO MAKE A LINK
• Select text or image we want to make a like• Click on “Hyperlink” in the Insert Panel
14
MAKE A LINK
• Select text or image we want to make a like• Right click, a pop menu will appear, select
“Make Link”
15
MAKE A LINK
• File choose window will appear• We can select the destination by:• Select the target file for internal link• Type “http://........” in URL: for external link
Select file
Type “http://.....”
16
MAKE AN INTERNAL LINK
• Select “Text” or “picture” we want to make a link
• Drag “Link target” button to destination
17
MAKE A NAMED ANCHOR
• Click on the location we want to make an anchor
• Click on “Named Anchor” in the Insert Panel• or
• Select “Insert -> Named Anchor” (see next slide)
20
CREATE A LINK TO A NAMED ANCHOR
• Select “Text” and “Picture” we want to make a link• Drag the link button and drop it on the targeted
named anchor
21
IMAGE MAP
• Image map allows us to create links on a given image
• We can use basic geometric shapes (such as rectangle, circle, or polygon) to create a link area
• After we have created a shape on a given image, we can create a link just like what we create a link from a text
22
IMAGE MAP
• When clicking on an image, we can create an image map by using tools in the Properties Inspector
23
IMAGE MAP (CONT.)
• We can also create an image map by clicking on the triangle menu on the “Image : Image” in the Insert Panel
24
CREATE A LINK USING IMAGE MAP
• Create a shape on the image, then provide the destination (internal or external link)
26
EXAMPLE OF HOW TO CREATE A WEB PAGE
• Create a working folder (New site)
• Create a web layout using Table (or using <div>)
• Fill in the Title Area (using Banner)
• Create links in the Menu Area
• Fill in the Footer Area
• Create contents in the Content Area
27
CREATE A LOCAL WEB FOLDER
• Create a folder in the local computer• Create a folder called “myweb” on our Desktop• Create a folder “images” to store our images inside the myweb
folder
• Then create a new site by either• Select menu “Site” -> “New Site…”• Or• Select the “New Site” menu from the File Panel
• (See next two slides)
33
CREATE LAYOUT USING TABLE
• We can insert a table by either• Select menu “Insert” -> “Table” or select “Table” from
Insert Panel
Insert Panel
34
SET TABLE PROPERTIES
• Set Rows: 4, Columns: 1, Width: 1000 or other value that fits our page design, and Border Thickness: 0
35
INSERT BANNER
• Insert an image in the Title Area
• Insert the banner image by either select menu “Insert” -> “Image” or select “Image : Image” from the Insert Panel
36
CREATE MENU LINKS
• Create a menu in the Menu Area
• Make sure to create all associated pages using the same theme
Home
Education Portfolio
Links About Me
37
CREATE CONTENTS
• We can add all the contents, for example text, table, picture, chart, etc. in this area