1 / 44

IT 214 - Foundations of Web Design

IT 214 - Foundations of Web Design. Welcome!. Welcome to Unit 5!. Site Definition, Templates and Images. Readings. Adobe Dreamweaver CS5 Classroom in a Book (CIAB): Read Adobe Dreamweaver CS5 Classroom in a Book (CIAB) Lessons 7 and 9 (“Working with Templates” and “Working with Images”).

morrison
Télécharger la présentation

IT 214 - Foundations of Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IT 214 - Foundations of Web Design Welcome!

  2. Welcome to Unit 5! Site Definition, Templates and Images

  3. Readings • Adobe Dreamweaver CS5 Classroom in a Book (CIAB): Read Adobe Dreamweaver CS5 Classroom in a Book (CIAB) Lessons 7 and 9 (“Working with Templates” and “Working with Images”). Read Adobe Dreamweaver CS5 Classroom in a Book (CIAB) Lessons 17 (“Publishing to the Web”) Site Development Foundations (SDF): • Read Site Development Foundations (SDF) Lessons 4 (Horizontal Rules and Graphical Elements).  • Complete the labs in Lesson 4 to get a better understanding of topics discussed in this Unit.

  4. Reading Summary: Adobe Dreamweaver CS5 Classroom in a Book (CIAB): • Reading these lessons 7 and 9 in the Adobe CIAB can offer insight as well as additional instruction on creating templates and placing images using Dreamweaver. • Reading Lesson 17 along with the videos available in the course will help you use the FTP client in Dreamweaver to upload your site files to your student web space. Site Development Foundations (SDF): • The SDF reading offers good information on this unit’s content and a glimpse of the next step, structuring web pages using CSS and divisions, or DIV tags. The labs will help to deepen your understanding of the topic as well.

  5. Introduction • Unit 5 is about creating your site definition, using templates and various ways to incorporate images to enhance your website. • In this Seminar, we will review setting up the local and remote sites in Dreamweaver.  We will review Dreamweaver templates and discuss how they can be used in the Web development process to help maintain a consistent look and feel among pages. • We will learn how to create templates and integrate them into web pages. • Finally, we will discuss the use of images as support content or as a replacement for textual information.   

  6. To-Do-List • Review Key TermsOnthe Reading page • Read Assigned TextOn the Reading page • Respond to the Discussion Board 30 PointsCase Study - A Sharper Image        • Complete the unit project and upload to assignment dropbox for grading50 PointsOn the Assignment page • Attend the Weekly Seminar or complete the FLA quiz20 Points

  7. Site Definition • Site Definition – For any new site that you create in Dreamweaver, including the one for this course, you will need to start by defining a Dreamweaver site (both local and remote). • Your files are not stored in Dreamweaver; instead, they are stored in a folder on your computer’s hard drive that you created earlier in this course. These files are considered your “local” site. As you already know, the files are also stored on a server, allowing users to view your site via a Uniform Resource Locator (URL). The latter files are called “remote” sites. Dreamweaver will allow you to access and work with your local or remote sites, update your remote sites, and manage your files both locally and remotely.

  8. Site Definition • You will set up your local and remote sites by choosing Site > New Site in Dreamweaver, and filling out the appropriate fields for both the local and remote sites’ information.

  9. Templates • Templates are used to maintain a consistent look and feel for a website. Because consistency between your web pages is important, Dreamweaver offers unique features that help maintain this consistency between pages using templates and CSS external style sheets. These features also help increase productivity when creating and maintaining a website.

  10. Images • In this Unit You will learn how to utilize Dreamweaver to work with images, review file paths, file formats, attributes, and sizing topics. WE WILL USE ONLY JPEG AND GIF FILE TYPES IN THIS CLASS. There are other file formats to explore in later courses. For our purposes, JPGs and GIFs will be the only acceptable file formats.

  11. Images in Web Pages Has anyone tried adding an image to the page? What HTML tag would you use to insert an image?

  12. Images in Web Pages • Use the <img> tag to insert an image file using either of two formats to close the tag: • <img src="imagefile.gif"> </img> • <img src="imagefile.gif"/>

  13. Images in Web Pages • Image file formats • Graphics Interchange Format (GIF) • Joint Photographic Experts Group (JPEG) • Portable Network Graphics (PNG)

  14. Format Transparency Interlacing Compression Animation GIF Yes Yes Yes Yes JPEG (standard) No No Yes No PNG Yes Yes Yes Yes Comparing Image File Formats

  15. Images and the alt Attribute • In XHTML, every image must follow good coding practice by including the alt attribute with a corresponding value • Code will not validate as XHTML without this attribute • Browsers and screen-reader technology can read alt description and render it in audio for disabled users • <imgsrc="image.gif" alt="Alternative text"/>

  16. Images in Web Pages • You can store images in the root directory, or create the "images" folder <img src="imagefile.gif"/> <img src="images/imagefile.gif"/> • The path will reflect your folder structure

  17. Combining Background Images and Colors • The bgcolor attribute: • Specifies background colors • The background attribute: • Inserts an image as a background • If you use both the bgcolor and background attributes in a <body> tag, then only the attribute specified last in the tag will render

  18. Aligning Images Relative to Text • The align attribute positions images relative to text <img src="imagefile.gif" align="alignment value"> • Values include: • "bottom" • "middle" • "top" • "left" • "right” • “center”

  19. Aligning Images Relative to Text • The align attribute has been deprecated in favor of style sheets, but can still be used; code will still validate as XHTML 1.0 Transitional

  20. Review • The <img> tag embeds an image in an HTML page. • Notice that images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image. • The <img> tag has two required attributes: src and alt.

  21. Review • In HTML the <img> tag has no end tag. • In XHTML the <img> tag must be properly closed. • Src - Specifies the URL (the LOCATION) of an image, including the file name

  22. Specifying Colors • Colors can be specified by name or by Hexadecimal "Red Green Blue (RGB)" value

  23. Web-Safe Color Palette • A set of 216 colors guaranteed to render properly • Ensures that colors in pages render as expected • If you specify a color not supported by the monitor or operating system, the system will approximate the color, a process called dithering • Unexpected results may occur as the result of dithering

  24. Page Colors and Backgrounds • Specifying page colors: <body bgcolor="colorNameOrCode"> • Specifying text color on the page: • <body text="colorNameOrCode"> • Specifying color of unvisited links: • <body alink="colorNameOrCode"> • Specifying color of visited links: • <body vlink="colorNameOrCode"> • Providing a background image: • <body background="image.png">

  25. Web Design Issues • Color combinations • Popular color combinations • Consider existing sites • Habitat for Humanity (www.habitat.org) • Microsoft (www.microsoft.com) • Red Hat (www.redhat.com) • Cultural and audience concerns

  26. Web Design Issues • Page layout • Layout guidelines • Document structure, the <div> tag and style sheets • Relative path names • White space, the <img> tag and XHTML

  27. Atomic Learning Tutorials • http://www.atomiclearning.com/highed/drmwvrcs5_intro • Section A – workspace basics and viewing • Section B – setting up a site • Section D – working with images

  28. Project 5 Unit Outcomes • Create a Dreamweaver site definition for local site and remote server. • Create a template for the web site • Add an image to Bio page using Dreamweaver • Course outcomes addressed in this unit • IT214-4: Develop the concept, interface design, and content for a website. • IT214-5: Construct a website.

  29. Project 5 Part 1 – Dreamweaver site definition • Open Dreamweaver(DW). Follow the instructions provided within your textbook Classroom in a Book and/or viewing the video in your browser that corresponds to the version of DW that you own. Begin creating the local site by either choosing the “Create New>Dreamweaver site” from the welcome menu or, from the document toolbar select “Site>New Site” Follow the instructions outlined in the video. • When defining the remote site, know that you will need the key information that corresponds to your Kaplan Web Server account. Test the connection as indicated in the video to make sure the information has been entered correctly.

  30. Project 5 Part 1 – Dreamweaver site definition • Since all the files in your local site folder should already be on the remote site from previous uploads to the server, switching to the remote view files window should reveal the same files as in the local site. As we add new files and modify existing files DW will upload these to the remote server. • Setting up a site definition should be the first step when working on a new site. Once the above tasks are completed, Dreamweaver will allow you to access and work with your local or remote sites, update your remote site, and manage your files both locally and remotely.

  31. Project 5 Part 2 – Create a template from an existing page • A word about the SAVE action before we begin. Like most computer applications, what is created or changed in the application is NOT permanently saved in the storage folder. DW will often anticipate that the file needs saved and ask with a dialog box. It is still best to save each page, template, CSS document, etc. before you move on. For example, creating a new page, you must give it a name and save it before you begin working with it as part of the site. 1. Open the existing bio.html page in the DW work area by clicking on the icon found in the site files for this page. Locate the buttons for seeing the 3 different views of this page: Code, Design and Split views. Use the split view for now to see the relationship between the code and the rendered page.

  32. Project 5 Part 2 – Create a template from an existing page 2. To create a template, select “Save as template” from the File menu. A dialog box opens and allows you to make some changes. The only necessary change is the file name. As you see, the default takes the name of the page and that can lead to confusion. Rename the page to template1. Click Save and if you are asked to update links, click no. 3. Note that a new file name appears in the work with the DW extension for templates. Also notice that a new folder has appeared in the files area called “templates.” Open the folder and see that the new template document is inside. (read about linking the documents).

  33. Project 5 Part 2 – Create a template from an existing page 4. As you have read this week in the Adobe CIAB, templates work by locking some of the design features of site pages to create a consistent “look and feel” or function across the site. And just like linked CSS external style pages, allow for a quick update to all pages by making a change to the template. But we don’t want all the areas or regions of the pages locked. For example, we need to have all the body content editable at this point for all pages attached to the template. Before we go any further we need to take care of this.

  34. Project 5 Part 2 – Create a template from an existing page 5. With the code view visible in the template page, select and highlight all the content from the opening body tag to the closing body tag. Remember to include the tags themselves. To make this region “editable,” select insert>template objects from the tool bar and choose “editable region.” Name it appropriately, “bodyRegion.” Note that the region is marked with a tab and box on the design view of the split screen.

  35. Project 5 Part 2 – Create a template from an existing page 6. Now it is time to link the web pages to the template. Open each of the three existing pages in the site and from the “Modify>templates” dropdown menu on the toolbar, select “Apply template to page.” It is important to remember that even though we used the bio.html page as the basis for our new template, it still needs to be linked to the new template! 7. You will be shown a dialog box that reports unresolved regions. Select the document body and choose “bodyRegion” from the drop down. Select the document head region and select “head” from the list. Click OK.

  36. Project 5 Part 2 – Create a template from an existing page 8. These pages now linked to the template also show changes. In gray, and appended to the DOCTYPE statement at the beginning of the document is the line: <!-- InstanceBegintemplate ="/Templates/template1.dwt"codeOutsideHTMLIsLocked="false" --> This tells us the template1.dwt is now linked and will control certain aspects of the page design and other information. The gray color also tells us that some code is not editable. See that DW has cleverly allowed for the title tags to be edited while not the rest of the head tag. The area we titled bodyRegion is also editable. To release the template from the page we need to once again modify>template to detach the template from the document.

  37. Project 5 What are the benefits of using DW Templates?

  38. Project 5 Part 3 – Adding an image to the Bio.html page. • If not opened in the work area already, open the existing bio.html page in the DW work area by clicking on the icon found in the site files for this page. Locate the buttons for seeing the 3 different views of this page: Code, Design and Split views. Use the split view for now to see the relationship between the code and the rendered page.

  39. Project 5 Part 3 – Adding an image to the Bio.html page. 2. Place the cursor in the local files window, right click and choose “New folder” from the menu. Name the folder “images.” Go to file>save to make it part of the site. “images” is a folder label recognized by DW and can be helpful as a default location for storing images for the site. What we would like to do is place an image of ourselves in this folder if one is available, but in any event we need an image to place on the Bio.html page. To do this we need the image you are going to use in this images folder. If you look at the site folder on your desktop, the images folder now appears. Cut and paste, drag or otherwise get the image you intent to use in the folder. A check back to the site files will show it is now ready for use in the site design.

  40. Project 5 Part 3 – Adding an image to the Bio.html page. 3. You have read about several ways to get images into the design. We will use the most visual method here with a drag and drop. Place the cursor on the image icon in the files window, left click and drag the image to the design portion of the work window. Note that there is a cursor and shadow rectangle as you drag the image about. The cursor is helping to place the top of the image next to a line of text in the design. Let go of the mouse button and the horizontal position of the image is at the default. An accessibility dialog box opens and asks for “alternative text” and other information. For now, just provide some alternative text for the image and click OK.

  41. Project 5 Part 3 – Adding an image to the Bio.html page. 4. Lastly, make sure the properties window is open (window>properties) and click the image to select it. In the properties window, find the align menu and choose either right or left as it suits your design. The image should also have some space around it so that text does not run into it. With the image selected, find the Vspace and Hspace entries and place a value of 10(pixels) in each. Remember to save the file. At this point, selecting “save all” will save all the open documents in DW.

  42. Project 5 Project Instructions: The project for this week includes three parts:  • Part 1: Create a Dreamweaver site definition for local site and remote server • Part 2: Create a template for the web site using the existing Bio.html web page  • Part 3: Add an image to the existing Bio.html page

  43. Project 5 - Grading Rubrics • 1. Template was created using the Bio.html page : 0-10 • 2. Template was attached to all existing pages within the site : 0-10 • 3. An images folder was created for the site and appropriate image for the Bio.html page was placed in the folder. : 0-10 • 4. Image was placed on the Bio.html page : 0-10 • 5. image was aligned either left or right, padded and was in good design balance this the textual content. : 0-10 • 6. Defined local and remote site definitions. (part 1) – not to be submitted for evaluation • 7. Test server connection by uploading a page to your Web server. (part 1) – not to be submitted for evaluation

  44. Thank you! • Feel free to contact me with any questions!emartignon@kaplan.edu • Use the Virtual Office to post questions throughout the week, as well as to upload your zipped folder if you need me to look at the code!

More Related