Website development with dreamweaver

Trang 1

1

Web Technologies

Website Development with Dreamweaver

Trang 2

Website Planning

 Before beginning any web development project:

 The Layout and Style of the site should be planned.

IT: Web Technologies – Website Development with Dreamweaver

2

Trang 3

Gathering Information

 When meeting with the client, a Needs

Assessment should be completed.

 A written document stating:

 The Needs Assessment is the plan of action for developing the site design.

3

Trang 4

 The Storyboard is a diagram of the website’s

structure.

 Should show all required pages of the site.

 Should show how each page is related to the others.

 Should take into consideration:

4

Trang 5

Sample Storyboard

5

Trang 6

Layout & Design

 Once the site structure has been determined, the layout and design of the individual pages can be considered.

 Layout Considerations:

layout and design

 Also includes the pages’ style

of the site.

6

Trang 7

Layout & Design

standard position (top or left side)

and generally should be a generic font.

the client The color scheme should be applied the same on each page

7

Trang 8

8

Trang 9

Dreamweaver Work Area

9

Trang 10

Dreamweaver Work Area

 FTP Toolbar

uploading and downloading of files.

10

Trang 11

Using Dreamweaver

 Creating a New Document

press CTRL+N or click on the File menu at the top left and select New.

11

Trang 12

12

Trang 13

13

Make sure you are in Design View The Design button highlighted

above should be selected.

Trang 14

 Editing Page Properties

 Click on the Page Properties button on the

Properties Panel at the bottom of the screen.

14

Trang 15

 Editing Page Properties

15

From the Page Properties screen you can edit the default text, link, and background properties of the page.

Trang 16

 Formatting Text

 Default text formatting should be defined on the Page Properties window described in the previous slide.

 If you want to format specific sections of text on the page, you should select the text you to format with your mouse.

16

Trang 17

 Formatting Text

 For basic formatting select the HTML button.

 The CSS button will provide additional advanced formatting options through Style Sheets

 We set the selected text to a Heading 1

17

Trang 18

 Formatting Text

 The text has been formatted to a Heading Level 1

18

Trang 19

 Creating a Table

 Tables allow you to layout content and display content in a grid structure.

 From the Insert menu select Table.

19

Trang 20

Trang 21

 Creating Tables

 The table structure should be displayed below the heading.

21

Trang 22

22

Trang 23

Trang 24

Trang 25

 Inserting Images

 From the Insert menu, select Image.

 Select the differenceEngine.jpg from your Student

Files folder.

 Click Ok

25

Trang 26

 From the Image Tag Accessibility Attributes

 Enter Difference Engine into the Alternate text field.

 Click Ok

26

Trang 27

27

Trang 28

 Follow the same procedures to insert the

analyticalEngine.jpg image into the

bottom right cell.

28

Trang 29

 Creating Links

below the table.

 Select the text your want to make into a link.

29

Trang 30

Trang 31

be left blank on basic links.

31

Trang 32

 Additional Formatting

 Changing Link Colors

 Click the Page Properties button on the bottom of the Properties panel

at the bottom of the screen.

32

Trang 33

 Change Link Colors

 Select the Links (CSS) category.

 Link color and style properties can be modified here

33

Trang 34

34

Trang 35

 Select the CSS button on the properties panel.

 The alignment tools are on the right side of the panel

35

Trang 36

Trang 37

the center style.

37

Trang 38

Định dạng
Số trang	38
Dung lượng	3,49 MB