it 214 - foundations of web design welcome!. welcome to unit 6! using css in dreamweaver readings:...
TRANSCRIPT
IT 214 - Foundations of Web Design
Welcome!
Welcome to Unit 6!
Using CSS in Dreamweaver
Readings:
Read Adobe Dreamweaver CS5 Classroom in a Book (CIAB) Lessons 6 and 8 (Working with Cascading Style Sheets and Working with Text, Lists and Tables).
Read Site Development Foundations (SDF) Lessons 10 (GUI HTML Editors).
Review only, the labs in Lesson 10 to get a better understanding of topics discussed in this Unit.
Introduction
Earlier in this course, we learned about depreciated HTML tags. Tags were then given an expanded role when used as CSS styles. Using CSS styles to control not only text level control but entire page layouts is much more desirable in today’s web designs. To do this, we can create styles as Classes and IDs. In this unit, we will begin to explore the wide variety of CSS styles available and easily applied with Dreamweaver.
To-Do-List
Review Key Terms On the Reading page Read Assigned Text On the Reading page Respond to the Discussion Board
30 PointsCase Study: The Best GUI Editor
Complete the unit projects and upload to assignment dropbox for grading : 2 assignments this week!50 PointsOn the Assignment page
Attend the Weekly Seminar or complete the FLA quiz 20 PointsLog in from Student's Home page
Readings Overview
Textbook Reading Summary:
As we continue to shift from hand-coding with a text editor to using Dreamweaver(DW), you will become familiarized with the DW interface as it provides easy access and modification to CSS documents and web pages in the site.
Lessons 6 and 8 of the CIAB text offers great information and excellent pictured examples for you to follow. The SDF text explains the basics of applications like DW that will improve your understanding of these types of editors.
Seminar Overview
This week’s Seminar session is about getting the most from CSS external sheets by using the CSS window in Dreamweaver. We will include: lists, XHTML tags such as <div>, and others. In preparation for this Seminar, view the web reading in CSS styles sheets and be prepared to respond to questions about working with CSS in DW.
Tutorials
http://www.lynda.com/tutorial/63836-True
Free tutorials on Lynda.com
Please listen to :
Controlling CSS in Dreamweaver and Style formatting options
(Using DW Tools and Panels section)
Project
Outcomes addressed in this activity:
Unit Outcomes: Utilize Dreamweaver to work with an external style sheet. Use styles that are Classes, IDs and the <div> tag.
Course Outcome: IT214-3: Create cascading style sheets for websites. IT214-5: Construct a website. GEL-1.1: Demonstrate college-level communication through the
composition of original materials in Standard American English
Project
You will complete 2 projects for this unit. Part A= a 40 point hands-on project plus Part B= a 10 point paper. Please be sure to review instructions and grading rubrics for both.
Project
Part A: 40 Points
Part A includes 3 activities:
1. Editing and creating styles in Dreamweaver 2. Applying styles from the style sheet to a page
layout 3. Create and apply styles on the fly.
Project
Do This:
Before we begin, it is important that you read the chapters in the Adobe CIAB and CIW readings for each unit before beginning the project each week. Most of the questions and frustrations can be eliminated by a careful reading of these. Include the web readings as well and know that you have Atomic Learning and other videos available to help you.
Project
Do This:
Before we begin, it is important that you read the chapters in the Adobe CIAB and CIW readings for each unit before beginning the project each week. Most of the questions and frustrations can be eliminated by a careful reading of these. Include the web readings as well and know that you have Atomic Learning and other videos available to help you.
Project
Activity 1. Editing and creating styles in Dreamweaver
Last week we placed all the site documents (pages, style sheet, images and templates) that have been developed for the site so far. If we now open Dreamweaver(DW) and look at the files window these files and folders should be visible. If you cannot see the files window, go to the “window” dropdown menu and choose File.
Project
Locate the CSS document, click and open it in the DW work area. Note that the view automatically switches to code. This is obviously a code only document and there are others as well. It should look as you hand coded it with the exception perhaps of the format and the coloration of the text. DW makes it easy to spot the three part of a CSS rule: selector, attribute and value.
body {
font-size:14px;
Project
DW also makes the styles available to us in two additional ways. First, go to window menu again and choose CSS Styles. A click on “all” will show the same list of selectors in the window. Highlight the body style and you can see all the details at the bottom of that window. Double click and an individual style by selector dialog box opens. Later, when we open a page of the web site, the properties window will also have a dropdown with all the styles listed. More on that later.
Project
Back to the CSS styles window for now. This window allows us to modify and add new styles that will make changes to the CSS stylesheet. We don’t have the style sheet open either! DW Magic! Try it out by changing the font size of your text in the body rule. Click on the body style in the window. The first page of the dialog has the text attributes and a dropdown beside each to change the values. While you are here, take a look at the other text attributes available in the DW dialog.
Project
We can also create a new style from here that will be added to the style sheet. Recall that we created some subheaders for our pages using the h2 tag. We could redefine that tag and give it more to do, but we should really create a rule away from h2 as a selector name. Using HTML tags can be confusing here, especially if you have several subtitle designs in mind. So we should create a new style; a CLASS.
Project
A class offers several advantages to that of a standard tag used as a CSS selector. First, the ability to name it anything we like; hopefully something that related to the purpose for the class, like subheader. Second, unlike tags, we can make a number of these just slightly different, changing the names to help identify them. (subheaderblue, subheaderred, etc.)
Project
Look for an icon with the plus symbol on it. (Rollover of the symbols tells you what they are too) This is used to add a new style. Click on it and let us walk through this process. New CSS Rule is the title of the box. Note the three different possibilities, class, tag, and ID. A bit more on ID later. Choose class. Next, give it the name, subheader. Below that we have a choice of adding it to the present style sheet. That should be listed in the dropdown text box. The other selection is to make it just available on an individual page. Click the radio button next to the CSS style sheet. Click on OK.
Project
What you see next should be familiar to you now. Give the style a font name or group, size, color, etc. For text styles, this category will be the only one that applies. The other categories here will help to apply styles to the other elements of the design. Take a look at the style sheet itself now before we close it. Look for the new style just created. Notice that the style appears in the CSS document like this: .subheader. CSS has to distinguish between tags and classes and that “dot” says it is not a tag but a made up name. Save then close the CSS document. Open the page career.html page.
Project
Activity 2. Applying styles from the style sheet to a page layout.
With the career page open, let’s apply the new .subheader. Make sure you have the split work area selected so you can see what is taking place in both the code and the page design. Select and highlight one of the h2 subheaders using the design view. Note that the visible text is highlighted in the code view as well. The design view is always the place to select text, images, anything entered as page content. In the code view something like <h2>this is my first subheader</h2> should be seen.
Project
Let’s first remove the old h2 tag pair. In the properties box (usually below, go to window>properties if not) look left for the Format property and you should see h2 in the text box. Click the arrow and you see where you could choose different types of HTML formats. Scroll up and select NONE. Instantly, the code and design makes the change. This is now formatted like the body text we designated in the CSS document. By the way, it was changed too, even while closed.
Project
We are about to apply the class, but classes cannot stand alone. Classes themselves don’t offer HTML structure, just styling. What is needed is a pair of tags to open and close around this piece of text. This is where <div> tags enters the scene. An area of the page needs to be designated or divided from the rest of the design elements. That is what a <div> tag pairing does.
Project
We need to open and use another part of DW now, the insertion bar. From the window menu, choose insert. A lot more here to explore, but for now, select the common tab and roll over to locate the insert DIV tag icon.(Fig. 6.1) Make sure the subheading text is selected and click on the icon. Another helpful dialog box opens to ask all the right questions. First, Wrap around selection is what is needed as we only want to effect the text selected. Next, we are offered to choose an existing class or ID. Also notice that we could select this text and create an entirely new class or ID. Click the arrow in class and see the classes and other CSS selectors in the list. Choose the new subheader class and click OK.
Project
In the design view you should see the changes In the code view, the division has been made and the class has been applied. Look closely at the structure here. Within the division opening tag, we announce that a class= is going to be called and the name of the class is ”subheader”. The <div> tag is a regular paired tag using a closing </div>. We can look at this in a browser too.
Project
From your reading and practice you should know that the world icon when clicked shows a list of the browsers on our computer. Choose one. You must save for it to be seen here. You may get a secondary screen related to other files open which need to be saved. If you have the CSS style sheet open that will surely be the case. Say yes. What do you think?
Project
Activity 3. Create and apply styles on the fly.
On this same career.html page are some lists that you created. We noted earlier that elements of a page design can be selected and a style can be created using this element as a test subject for a new style. That style will them be available for any other design application, here, elsewhere on the page or in the rest of the document.
Project
In the code view, find the opening <ul> tag that begins the unordered list and click inside it. See that DW also highlights the items in that list below in the design window. This unordered list tag is a paired tag, so we can place a class right inside it. Right click on that list and choose CSS styles>New. That now familiar set of boxes appear. Name the new style unordered. (No period needed as DW adds it.) In the next box, look for list as a category. DW offers several choices for the bullet and you can create your own and apply them. Placement should be inside. Click OK. In the properties window, with the cursor in the <ul> tag, search for the new style unordered in the Style list. Choose it to apply.
Project
Reopen the rules definition box by clicking on the unordered class in the styles window. Make some additional changes using the other categories available. Change the font size and color for example. Click Apply and the changes take place immediately to the list in the design window. (un-highlight the text for a better view) You can make changes on the fly and they will immediately be seen. This works with any class or ID. Just remember that you are changing the appearance of ALL pages that use this class or ID. That is the point, maintaining consistency. If you want a different look to a particular element on a page you can always create another class!
Project - Grading Rubrics
1. Created the new class .subheader and it appears on the style sheet : 0-10;
2. Applied the class .subheader to the subheadings found on the career.html document : 0-10;
3. Created the new class .unordered and it appears on the style sheet : 0-10;
4. Applied the class .unordered to the subheadings found on the career.html document : 0-10.
Total: 0-40.
Project B
Project 6-B GEL 1.1 Project – 10 Points
Outcome: GEL-1.1: Demonstrate college-level communication through the composition of original materials in Standard American English
Based on the knowledge you have achieved thus far in our class, compose a minimum two page double-spaced paper that compares two sites you have researched, one that uses a template approach and one that does not use a template. This reflection should include and compare the following items:
Project B
Thorough descriptions Layouts Navigation Use of images Text and titles Ease of use for the visitor
Project B
Your paper needs to include a title page and follow APA formatting guidelines.
Parameters/expectations: Include a title page Font size 10 or 12 At least one full double-spaced page in length, not counting
the title page Includes a highly developed viewpoint, purpose and
exceptional content Demonstrates superior organization, is well ordered, logical
and unified Free of grammar and spelling errors No evidence of plagiarism
Project B - Grading Rubrics
1. At least 2 pages in length not counting the title page, include a title page, double space, font size 10 or 12 : 0 – 2;
2. Includes a highly developed viewpoint, purpose and exceptional content : 0 – 2;
3. Demonstrates superior organization, is well ordered, logical and unified : 0 – 2;
4. Free of grammar and spelling errors : 0 – 2; 5. No evidence of plagiarism : 0 – 2. Total: 0-10
Thank you!
Feel free to contact me with any questions!
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!