ADOBE WEAVER WEB DESIGN

START THE DW 2

WORKSPACE LAYOUT Application Bar Document Toolbar Document Window Workspace Switcher Property Inspector GroupPanel 3

DW TOOLS Property Inspector Document Toolbar 4

SPLIT VIEW Code viewDesign view Buttons to switch view 5

INSERT PANEL Select groups of objects To be inserted 6

SET PAGE PROPERTIES Click button “Page Properties..” in property inspector or Click on Menu “Modify -> Page Properties” Background, Text, and Link Colors 7

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 8

INSERT IMAGE (CONT.) 9

CREATE ROLLOVER IMAGE Select menu “Insert” -> “Image Objects” -> “Rollover Image” We can also select it from the Insert Panel 10

CREATE ROLLOVER IMAGE (CONT.) Select image from folder for the Original image: and Rollover image: 11

HOW TO MAKE A LINK Select text or image we want to make a like Click on “Hyperlink” in the Insert Panel 12

EXTERNAL LINK Type URL of destination webpage in the Properties Inspector 13

MAKE A LINK Select text or image we want to make a like Right click, a pop menu will appear, select “Make Link” 14

MAKE A LINK File choose window will appear We can select the destination by: Select the target file for internal link Type “ in URL: for external link Select file Type “ 15

MAKE AN INTERNAL LINK Select “Text” or “picture” we want to make a link Drag “Link target” button to destination 16

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) 17

MAKE A NAMED ANCHOR (CONT.) 18

TYPE NAMED ANCHOR Type in text we want to make an anchor 19

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 20

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 21

IMAGE MAP When clicking on an image, we can create an image map by using tools in the Properties Inspector 22

IMAGE MAP (CONT.) We can also create an image map by clicking on the triangle menu on the “Image : Image” in the Insert Panel 23

CREATE A LINK USING IMAGE MAP Create a shape on the image, then provide the destination (internal or external link) 24

ADOBE WEAVER EXAMPLE OF HOW TO CREATE A WEB PAGE

Create a working folder (New site) Create a web layout using Table (or using ) Fill in the Title Area (using Banner) Create links in the Menu Area Fill in the Footer Area Create contents in the Content Area 26

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) 27

CREATE A NEW WORKING FOLDER (1) Select menu “Site” -> “New Site…” 28

CREATE A NEW WORKING FOLDER (2)

SETUP MY SITE Enter the Site Name: xxxxx Click on folder button to select our Folder 30

SELECT WORKING FOLDER Select our folder then click Open 31

SIMPLE WEB LAYOUT Title Area (Banner) Menu Area Content Area Footer Area 32

CREATE LAYOUT USING TABLE We can insert a table by either Select menu “Insert” -> “Table” or select “Table” from Insert Panel Insert Panel 33

SET TABLE PROPERTIES Set Rows: 4, Columns: 1, Width: 1000 or other value that fits our page design, and Border Thickness: 0 34

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 35

CREATE MENU LINKS Create a menu in the Menu Area Make sure to create all associated pages using the same theme HomeEducationPortfolioLinksAbout Me 36

CREATE CONTENTS We can add all the contents, for example text, table, picture, chart, etc. in this area 37

CREATE FOOTER Footer can be a place where we can add contact information or some sort of Copyright, etc Pracharat 1 Road,Wongsawang, Bangsue, Bangkok