Presentation is loading. Please wait.

Presentation is loading. Please wait.

Website Development with Dreamweaver

Similar presentations


Presentation on theme: "Website Development with Dreamweaver"— Presentation transcript:

1 Website Development with Dreamweaver
Web Technologies Website Development with Dreamweaver Trade & Industrial Education

2 Website Planning Before beginning any web development project:
A Needs Assessment should be completed. A Story Board should be created. The Layout and Style of the site should be planned. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

3 Storyboarding 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: Is the structure logical? Can the user find their information quickly? How many links are on each page/ The storyboard should give the designer an idea as to how to structure the site. The user should be able to locate their information within 3 clicks. The scoreboard will help the designer determine if this is possible. The number of links on each page should be limited. If there are too many links on a single page, the design should be reconfigured. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

4 Sample Storyboard Trade & Industrial Education
IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

5 Layout & Design Once the site structure has been determined, the layout and design of the individual pages can be considered. Layout Considerations: Consistency: Each page should have the same layout and design. Also includes the pages’ style. The same design style should be used on each page of the site. Consistency – Also point out that consistency helps unify all the pages so they look like a single site. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

6 Layout & Design Navigation: The navigation should be in a standard position (top or left side) Balance: The page should be balanced. Fonts: The selected font should be easy to read and generally should be a generic font. Colors: A color scheme should be selected, with the client. The color scheme should be applied the same on each page. Navigation – Should be easily seen and should be very clear as to where each link takes the visitor. Balance – The content should be arranged on the page so that one side does not appear to “outweigh” another side. Images generally weigh more then text with regards to balance. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

7 Dreamweaver Web pages are created using HTML, a code for specifying how content should be formatted. Web pages are interpreted by the web browser. The web pages can be created using a text editor or a program that can create HTML code. Have students open Dreamweaver and follow along with the following steps. Copyright © Texas Education Agency, 2011. All rights reserved. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

8 Dreamweaver Work Area Trade & Industrial Education CS 5 Layout
A. Document Tabs: Allow you to easily work with, and switch between, multiple documents. B. Menu Bar: Provides access to the most common menu items. C. Workspace Bar: Allows you to select between various workspace layouts. The default is Designer. D. Documents Views: Buttons allowing you to switch between different views. Live View is new with CS5 and allows you to see how your document will appear in a browser without having to save and open in the browser. It is capable of executing JavaScript and most client side scripting. E. Panel Groups: Provides quick access to files, CSS properties, and the site profiles. F. Document Workspace: This is the current document you are working on. G. Property Inspector: Gives quick access to the formatting of content. Is split between HTML and CSS markup. CS 5 Layout A. Document Tabs: Allow you to easily work with, and switch between, multiple documents. B. Menu Bar: Provides access to the most common menu items. C. Workspace Bar: Allows you to select between various workspace layouts. The default is Designer. D. Documents Views: Buttons allowing you to switch between different views. E. Panel Groups: Provides quick access to files, CSS properties, and the site profiles. F. Document Workspace: This is the current document you are working on. G. Property Inspector: Gives quick access to the formatting of content. Is split between HTML and CSS markup. Trade & Industrial Education

9 Dreamweaver Work Area FTP Toolbar
Manages the uploading and downloading of files. Copyright © Texas Education Agency, 2011. All rights reserved. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

10 Using Dreamweaver Creating a New Document
To open a blank document in Dreamweaver, press CTRL+N or click on the File menu at the top left and select New. Copyright © Texas Education Agency, 2011. All rights reserved. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

11 Using Dreamweaver Trade & Industrial Education
Dreamweaver will ask about the type of document to open. Have students open the Blank Page – HTML document. Click Create Copyright © Texas Education Agency, 2011. All rights reserved. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

12 Using Dreamweaver Make sure you are in Design View. The Design button highlighted above should be selected. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

13 Using Dreamweaver Editing Page Properties
Click on the Page Properties button on the Properties Panel at the bottom of the screen. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

14 Using Dreamweaver Editing Page Properties
From the Page Properties screen you can edit the default text, link, and background properties of the page. Students should set the Page font to Arial. They should also select a dark background color of their choice and set the text color to white. Copyright © Texas Education Agency, 2011. All rights reserved. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

15 Using Dreamweaver 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. Copyright © Texas Education Agency, 2011. All rights reserved. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

16 Using Dreamweaver 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 Copyright © Texas Education Agency, 2011. All rights reserved. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

17 Using Dreamweaver Formatting Text
The text has been formatted to a Heading Level 1 IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

18 Using Dreamweaver Creating a Table
Tables allow you to layout content and display content in a grid structure. From the Insert menu select Table. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

19 Using Dreamweaver Creating a Table The Table window will appear.
Settings: Rows – 2 Columns – 2 Table width - 500 Copyright © Texas Education Agency, 2011. All rights reserved. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

20 Using Dreamweaver Creating Tables
The table structure should be displayed below the heading. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

21 Using Dreamweaver Trade & Industrial Education
Have students add the text from their notes page into the corresponding cells in the first row of the table they created. Copyright © Texas Education Agency, 2011. All rights reserved. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

22 Using Dreamweaver Inserting an Image
Before the image can be added, the page needs to be saved. Save the page to your Student Files folder as dreamweaverPractice.htm Copyright © Texas Education Agency, 2011. All rights reserved. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

23 Using Dreamweaver Inserting Images
Place your cursor into the bottom left cell of the table. Copyright © Texas Education Agency, 2011. All rights reserved. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

24 Using Dreamweaver Inserting Images From the Insert menu, select Image.
Select the differenceEngine.jpg from your Student Files folder. Click Ok. Copyright © Texas Education Agency, 2011. All rights reserved. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

25 Using Dreamweaver Inserting Images
From the Image Tag Accessibility Attributes Enter Difference Engine into the Alternate text field. Click Ok IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

26 Using Dreamweaver Inserting Images
The image will be placed where the cursor was located. When you click on the image, the Properties Panel will display the properties for the image. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

27 Using Dreamweaver Inserting Images
Follow the same procedures to insert the analyticalEngine.jpg image into the bottom right cell. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

28 Using Dreamweaver Creating Links
The text Charles Babbage Web Site was added below the table. Select the text your want to make into a link. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

29 Using Dreamweaver Creating Links Locate the Insert panel on the right.
Select the Hyperlink button. Copyright © Texas Education Agency, 2011. All rights reserved. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

30 Using Dreamweaver Creating Links The Hyperlink window will appear.
Text: The text shown on the screen. Link: where you want to go The remaining fields can be left blank on basic links. The link has been set to To link to another file, students can click the folder icon to select the file to link to. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

31 Using Dreamweaver Additional Formatting Changing Link Colors
Click the Page Properties button on the bottom of the Properties panel at the bottom of the screen. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

32 Using Dreamweaver Change Link Colors Select the Links (CSS) category.
Link color and style properties can be modified here. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

33 Using Dreamweaver Aligning Objects
The following alignments can be applied to most objects. Left Right Center Justify (text only) IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

34 Using Dreamweaver Select the CSS button on the properties panel.
The alignment tools are on the right side of the panel IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

35 Using Dreamweaver We have selected the title to be centered on the screen. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education

36 Using Dreamweaver The title should then be centered on the page.
Students can also center the link. In order to center the table, the center would need to be applied to the body tag. IT: Web Technologies – Website Development with Dreamweaver Trade & Industrial Education


Download ppt "Website Development with Dreamweaver"

Similar presentations


Ads by Google