Transcript Slide 1
Goal Using Dreamweaver learners will create and update their own teacher website that includes classroom rules, assignment guidelines, course content, and an instructional component related to a state standard. Objectives 1. Identify basic design elements of a website. 2. Sketch a basic layout showing the navigation and design of your site. 3. Create and name the pages in your site. 4. Using Fireworks, prepare images for your site. 5. Add and manipulate headlines and text. 6. Insert tables and populate them. 7. Add a background image to your pages. 8. Define and create absolute and relative links on your pages. 9. Create .pdf files and link them to your site. Critical Definitions Browser Software (program) that you use to view web pages. Examples: Internet Explorer, Netscape, Mozilla Firefox Monitor Resolution A variable setting used to set the size of the page you are viewing. Choices are 640 x 480, 800 x 600, 1024 x 768 .pdf files A file that is easy to create and universally read on the web. Also supports images. (Not everyone has Microsoft Word) Critical Definitions HTML Hypertext Markup Language: A standard code used to create web pages. HTTP:// Hypertext Transfer Protocol: Using this prefix will create a link to an absolute webpage. Absolute Link A link which takes user outside of your website. Relative Link A link which takes user to another page or point within your site. url The unique web address of a webpage. Image Files Jpeg or jpg. A standard file format that is used for photographs. (Recompresses each time changes are made.) .gif A file format used to create graphics (Smaller file sizes. Limits on colors.) Images for the Web All images for the web should be converted to 72 dpi. Images for print are to be 300 dpi. File Considerations Naming conventions Refers to the way you name your pages and files (for html… no capitals and no spaces) Use underscores_ File sizes Limit pages to 100K Every HTML Page has these main tags <html> <head> <title> </title> </head> <body> </body> </html> HTML Heading Tags Headings <H1>Mount Carmel Area School District</H1> <H2>Mount Carmel Area School District</H2> <H3> <i> Mount Carmel Area School District </i> </H3> <H4> <i> Mount Carmel Area School District </i> </H4> <H5> <em> <i>Mount Carmel Area School District </i> </em> </H5> <H6> <em> <i>Mount Carmel Area School District </i> </em> </H6> HTML Table Tags <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <tr> </table> More HTML <p> Starts new paragraph. </p> <br> The “br” tag starts a new line of text. (Does not need closing tag) HTML Images <img src=“images/school_front.jpg” height=“168” width=“216” alt=“high school”> Image resolution must always be 72 dpi for web and 300 dpi for print. Controlling Width Assigning a width tag with a percentage such as width =“60%” will cause the width of your element to stretch to 60% of the screen of the viewer, no matter what resolution his monitor is set at. By using pixels, width=“240” fixes the width at that size. Creating Your Home Page 1. Open Dreamweaver Click ‘View’ on the main menu and click on ‘Code and Design’ 2. Click on ‘File’ on the main menu and ‘New’ . 3. Choose ‘basic page’ and ‘html’ and click ‘Create’. 4. Save the page in a new folder under ‘My Documents’ To create the new folder, click on the orange folder icon in the ‘Save Window’ Adding Text Type some text into the design portion of the Dreamweaver work area. Highlight the text. Use the text properties at the top of the work area to change the way the text looks. Go to “TEXT” on the main menu and choose the color attribute to change the text color. Inserting a Table Go to “Insert” on the main menu. Choose table and select your rows, columns and border attributes. Click “OK” to create table. Preparing images Open Fireworks 1 Click ‘File’ to open an image 1 Choose “web layer in the layers palette. This will open the image size controls below your picture. 3 Change image size to 72 dots per inch. Change size of image to desired size. 2 Go to “File” and “Export” image to your images folder within your site folder. Inserting a Background Image or Color Choose “Modify” then “page properties” from the main menu. The Page Properties window opens Click browse to navigate to your image desired or color. Inserting a Link Be sure your cursor is in the design window of the workspace where you want the link to go. Choose “Insert” then “hyperlink” from the main menu. Type in the text you want to link along with the url and instructions. Click “OK” Creating Links with HTML Relative Link <a href=“classroom_rules.html”>Classroom Rules</a> Absolute Link <a href=“http://www.pde.state.pa.us”>Course Standards</a>