Copyright © Texas Education Agency, 2011. All rights reserved. 1 Web Technologies Website Development with Dreamweaver 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 Dreamweaver2 Copyright © Texas Education Agency, 2011. All rights reserved. Gathering Information  When meeting with the client, a Needs Assessment should be completed.  A written document stating:  What is the client’s purpose for the site?  Who is the site being designed for / target audience?  What Information should be included on the site?  What are the client’s design preferences?  The Needs Assessment is the plan of action for developing the site design. IT: Web Technologies – Website Development with Dreamweaver3 Copyright © Texas Education Agency, 2011. All rights reserved. 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/ IT: Web Technologies – Website Development with Dreamweaver4 Copyright © Texas Education Agency, 2011. All rights reserved. Sample Storyboard IT: Web Technologies – Website Development with Dreamweaver5 Copyright © Texas Education Agency, 2011. All rights reserved. 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. IT: Web Technologies – Website Development with Dreamweaver6 Copyright © Texas Education Agency, 2011. All rights reserved. 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. IT: Web Technologies – Website Development with Dreamweaver7 Copyright © Texas Education Agency, 2011. All rights reserved. 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. IT: Web Technologies – Website Development with Dreamweaver8 Copyright © Texas Education Agency, 2011. All rights reserved. Dreamweaver Work Area IT: Web Technologies – Website Development with Dreamweaver9 Copyright © Texas Education Agency, 2011. All rights reserved. Dreamweaver Work Area  FTP Toolbar  Manages the uploading and downloading of files. IT: Web Technologies – Website Development with Dreamweaver10 Copyright © Texas Education Agency, 2011. All rights reserved. [...]...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 Using Dreamweaver Copyright © Texas Education Agency, 2011 All rights reserved Using Dreamweaver Make sure you are in Design View The Design... reserved Using Dreamweaver  Creating Tables  The table structure should be displayed below the heading Copyright © Texas Education Agency, 2011 All rights reserved Using Dreamweaver Copyright © Texas Education Agency, 2011 All rights reserved 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... rights reserved Using Dreamweaver  Formatting Text  The text has been formatted to a Heading Level 1 Copyright © Texas Education Agency, 2011 All rights reserved Using Dreamweaver  Creating a Table   Tables allow you to layout content and display content in a grid structure From the Insert menu select Table Copyright © Texas Education Agency, 2011 All rights reserved Using Dreamweaver  Creating... Agency, 2011 All rights reserved 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 Using Dreamweaver  Formatting Text  For basic... reserved Using Dreamweaver  Inserting Images  Place your cursor into the bottom left cell of the table Copyright © Texas Education Agency, 2011 All rights reserved 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 Using Dreamweaver  Inserting... reserved 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 Copyright © Texas Education Agency, 2011 All rights reserved Using Dreamweaver  Creating Links   Locate the Insert panel on the right Select the Hyperlink button Copyright © Texas Education Agency, 2011 All rights reserved Using Dreamweaver ... Using Dreamweaver  Aligning Objects  The following alignments can be applied to most objects     Left Right Center Justify (text only) Copyright © Texas Education Agency, 2011 All rights reserved Using Dreamweaver  Select the CSS button on the properties panel  The alignment tools are on the right side of the panel Copyright © Texas Education Agency, 2011 All rights reserved Using Dreamweaver. .. highlighted above should be selected Copyright © Texas Education Agency, 2011 All rights reserved Using Dreamweaver  Editing Page Properties  Click on the Page Properties button on the Properties Panel at the bottom of the screen Copyright © Texas Education Agency, 2011 All rights reserved Using Dreamweaver  Editing Page Properties From the Page Properties screen you can edit the default text, link,... blank on basic links Copyright © Texas Education Agency, 2011 All rights reserved 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 Copyright © Texas Education Agency, 2011 All rights reserved Using Dreamweaver  Change Link Colors   Select the Links (CSS) category Link color and style... Click Ok Copyright © Texas Education Agency, 2011 All rights reserved 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 Copyright © Texas Education Agency, 2011 All rights reserved Using Dreamweaver  Inserting Images  Follow the same procedures to insert the analyticalEngine.jpg . Technologies – Website Development with Dreamweaver8 Copyright © Texas Education Agency, 2011. All rights reserved. Dreamweaver Work Area IT: Web Technologies – Website Development with Dreamweaver9 Copyright. Technologies – Website Development with Dreamweaver4 Copyright © Texas Education Agency, 2011. All rights reserved. Sample Storyboard IT: Web Technologies – Website Development with Dreamweaver5 Copyright. – Website Development with Dreamweaver1 1 Copyright © Texas Education Agency, 2011. All rights reserved. Using Dreamweaver IT: Web Technologies – Website Development with Dreamweaver1 2 Copyright