ART170. The ART170 Final Project

Size: px

Start display at page:

Download "ART170. The ART170 Final Project"

Shawn Owen
5 years ago
Views:

1 The Final Project TABLE OF CONTENTS Define the site and set up the layout pg. 2 Ordering and externalizing the style sheet pg. 2 Creating the template pg. 3 Generating pages from the template pg. 4 Updating the template with links pg. 4 Adding a web font to the template pg. 5 Using the web font in Dreamweaver CS6 pg. 5 Adding a data table to a page pg. 0 Adding a contact form pg. Adding CSS to a form pg. 2 Adding HTML5 Form Attributes pg. 3 This guide will help you put together your final site. You will need to gather together the following assets: A CSS Starter Page (The less experienced should select a fixed-width page. Fluid layouts are more difficult to manage.) Images generated by the slices in the Fireworks Prototype project A web font from Font Squirrel Images for the portfolio or gallery

2 Define the Site and Set Up the Layout. Create a local site folder for your project! Within it you can add an images folder with all the images from the Fw prototype as well as any gallery images you plan to put on the gallery/portfolio page. 2. Define a site for the final project. Dreamweaver must have a defined site in order to produce templates! (Hint: Site > New Site. Give the site a name, and for the site folder, navigate to local site folder.) 3. Create a new document and select your CSS Starter page. Name it layout.html. 4. Adjust the CSS and add your images. 5. Change the page title that the browser uses for bookmarks. You can do this by hand coding in the head of the document, or you can do it visually by using the title field in the toolbar above the document in the Document Window. 6. Change the link names to Home, Resume, Portfolio, and Contact (or whatever page names you are using). Remove the fifth button unless you want to have an additional page in your site. To remove the button, select it and press the delete key twice. (See horizontal navigation tutorial for those of you who are switching from vertical navigation, or are using both.) Ordering and Externalizing the Style Sheet Ordering the Rules and Externalizing the Style Sheet We have been developing the layout using an embedded style sheet. That is, the styles are in the head of this one specific document. I like to design layouts this way because I might want to copy the page and try out different styles in the duplicate page. Now that the design is complete, however, best practices dictate that we export the styles to an external file. First we ll place the rules into a logical order.. Make sure the CSS Styles panel is open to All and, if necessary, click the arrow to the left of the <style> element to expand the list of rules. 2. Drag and drop styles into an order that follows whatever logic you like to follow. There are as many different ways to order the rules as there are developers, but whatever you do, be sure that you do not upset the cascade ( For example, if you put a:hover styles before a:link styles, the links will not work properly. 3. I often order the style sheet according to global styles, text styles, structure styles, navigation styles, HTML5 element styles, and generic floating and clearing styles. In large part because the CSS Starter Pages make good use of descendant selectors, usually nothing in this order disturbs the proper working of the rules. You will be adding your own custom rules, however, and may need to be more careful about your order. 2

3 Now we ll actually export the styles to an external document.. Make sure that the CSS Styles panel is still open and the All tab is selected. 2. Click the first selector name and hold down the shift key to select the last selector name. You want to select all the selector names, but not the <style> element itself. 3. Click the options button at the top right side of the CSS Styles panel. 4. Select the Move CSS Rules command. 5. Click the radio button to move the rules to a new style sheet. 6. When the dialog box that lets you navigate to where you want to save the document appears, make sure you're in the site folder. 7. Name the style sheet styles.css and click OK. 8. Back in the CSS Styles panel you can delete (with the trashcan icon at the bottom of the panel) the <style> element that appears above the new external style sheet that now is listed in the panel. You no longer need that now that the styles aren't embedded in the head. Creating the Template Now you will turn the layout into a template.. Select File>Save as Template. 3

4 2. Dreamweaver will ask you if you want to update links. Click Yes. Dreamweaver will add a Templates folder to the site file structure and place the new template inside it. Note: Some of you may want to use two or more templates: for example, one for the landing (home) page, and another for the inner pages. Next you will add editable regions to the template. You probably are going to add two editable regions to the template: one for the content area and one for the sidebar content under the navigation element. Make sure that the new template is still open.. Click the Code button at the top of the Document Window. 2. Locate the opening content div tag. 3. Locate the closing content div tag. 4. Select everything between these tags but not the tags themselves. The content div is there for structural purposes - in the style sheet a float is attached to it so that along with the floated sidebar div you get the look of two columns. Keeping those immune from editing will ensure that you don't accidentally remove either their opening or closing tags, thus "hosing" the whole layout. In any case, it is only the content within that you need to edit. 5. With this code selected, go to Insert>Template Objects>Editable Region. 6. When the New Editable Region dialog box displays, type maincontent and click OK. 7. Dreamweaver will add the turquoise tab to the area in the template in Design View (as long as you have visual aids, the default, still turned on. 8. Now select all the code after the closing nav element and before the closing sidebar div tag. 9. Again, select Insert>Template Objects>Editable Region. 0. In the New Editable Region dialog box type sidecontent and click OK. The template is now complete. Generating Pages from the Template. Select File > New. When the New Document dialog box displays, choose the Page from Template category on the left. 2. Select the defined site for your site from the first column. 3. Select the template from the second column. 4. A new page is created from the template. Save the page as index.html. 5. Repeat these steps to create the following pages (or whatever pages you re using for the final site): resume.html portfolio.html 4

5 contact.html Updating the Template. Return to the dwt file (the template) in the Document Window. 2. Select the Home text in the Home button. 3. Next to the Link field in the Properties Inspector, click the folder to navigate to the files in your site. 4. Select index.html. You ll notice that Dreamweaver displays it as../index.html. 5. Repeat steps 3 and 4 for the Resume, Portfolio, and Contact button text. 6. Select File > Save to save the changes to the template. When Dreamweaver asks if you want to update all the child pages of the template, click OK. Now all pages will have working buttons. Adding a Web Font to the Template This example adds a script font named Black Rose to the template. You will choose a font that is appropriate to the theme of your site.. Go to Font Squirrel: 2. Look for the list of Styles on the right side of the home page. 3. As an example, you might select the Script style. 4. On the Script style page, locate the font you like. 5. Click the font to go to its page. 6. Click link to go to its download page. 7. Click the blue button that says Kit. Take note of where you download the kit, which is in fact a folder of all the different formats, a demo style sheet, a license agreement, and style sheet. Warning! Make sure the font-kit you select includes all four formats. Otherwise the font might not show up in all browsers. 5

Using the Web Font in Dreamweaver CS6 Now that you have a custom font, you will use the new

from your own computer.. Return to the template.

down the site.) 2. Select Modify > Web Fonts. 3.

6 Using the Web Font in Dreamweaver CS6 Now that you have a custom font, you will use the new Dreamweaver CS6 web font feature to make adding the font to your pages as easy as adding a font from your own computer.. Return to the template. (Many designers use web fonts just for headings rather than all the body text, which might slow down the site.) 2. Select Modify > Web Fonts. 3. The Web Fonts Manager opens and displays Web fonts (if any) that you ve already added to Dreamweaver. Select Add Font. 4. Skip over the Font Name field and click the folder next to the EOT font field. 6

5. Navigate for the @font-face Kit folder. 6. Locate the EOT version of the font. 7. Click Open. 8.

7 5. Navigate for Kit folder. 6. Locate the EOT version of the font. 7. Click Open. 8. Dreamweaver populates all the other fields with the appropriate fonts and even adds the font name to the name field! 9. Make sure you select the checkbox that assures Dreamweaver you have a license to use the font for web embedding purposes. 0. Click OK. Dreamweaver returns you to the Web Fonts Manager where you ll see the new addition to the font list.. Click Done. Your font is now ready to use in any site. 2. Return to the template. 3. Use the CSS Styles panel to create a new CSS rule. In the example below, the h and h2 headings are in the div with a class of content. The rules for both are grouped as for this exercise they are using the same font family as well as other properties:.content h,.content h2 7

4. Click OK after you name the font to open CSS Rule Definition dialog box. 5. Select the Type category on the left. 6. Click the down arrow to the right of the Font-family field. 7.

The Edit Font List dialog box displays. 9. Click the Plus icon to add a new font stack. 20. Under Available Fonts you ll see a list of all the fonts on your computer.

8 4. Click OK after you name the font to open CSS Rule Definition dialog box. 5. Select the Type category on the left. 6. Click the down arrow to the right of the Font-family field. 7. Select the Edit Font List link at the bottom of the Font stack list. (You will see different font stacks in your own Dreamweaver installation this list includes a number of custom stacks.) 8. The Edit Font List dialog box displays. 9. Click the Plus icon to add a new font stack. 20. Under Available Fonts you ll see a list of all the fonts on your computer. Because you added the Font Squirrel font via the Web Fonts Manager, it too should appear. Web fonts appear at the bottom of the list with the generic font categories such as cursive, fantasy, serif, sans-serif, and mono. 2. Select the BLACKR (or your) font and use the double-arrow button to move it over to the Chosen Fonts column. 8

Dreamweaver returns to the Type screen where you can select the new font stack from the drop down list next to the Font-family field. 26. Click OK.

9 22. Select a more common script font such as Brush Script MT Italic to add to the stack. 23. Finally, end with the generic cursive font. If someone has an older browser or does not have a CSS enabled browser, at least the browser will substitute a script font of some kind. 24. Click OK. 25. Dreamweaver returns to the Type screen where you can select the new font stack from the drop down list next to the Font-family field. 26. Click OK. When you look at the page in Design View, you will see the Brush Script MT Italic or whatever font you selected from your own computer. Dreamweaver s Design View does not 27. Click the Live View button. Now you should see the Black Rose font. Warning: Remember is that you will need to upload the webfonts folder with the custom font folder inside. The font style sheet will be in the folder, in the correct path in relationship to the page. This is a critical component in ensuring that the font works as 9

10 expected on the Internet. Adding the Data Table to the Resume Page. Open the resume page. 2. Select Insert > Table. 3. Fill in the number of rows and columns, your preferred header orientation, the caption and summary. If you want to create a table for just your contact info, use 4 or 5 rows and 2 columns. Write a caption and select a header location, but do not fill in the other fields. 4. Click OK. 5. Fill in your table data in the various cells. 6. Style the table with CSS. You will use the following selectors: table, th, td, caption, and the :nth-child. The first four are tag selectors and the :nth-child uses the Compound selector in Dreamweaver s dialog box. Here are the rules I used. You can use them as a guide. table { margin-left: 5px; border: px solid #7E53A; margin-bottom: 5px; border-spacing: 0; width: 95%; } 0

11 th { td { text-align: left; color: #DECDBD; background: #7E53A; padding: 3px; } padding-top: 4px; padding-right: 3px; padding-bottom: 4px; padding-left: 3px; } caption { text-align: left; margin-bottom: 5px; font-size: 40%; color: #7E53A; } tr:nth-child(2n+2) { background: #F7EF00; } Adding a Contact Form. Open contact.html. 2. Place your cursor in the maincontent editable region. 3. Select Insert > Form > Form. 4. In the Properties panel, in the Form ID field, type contact. We are not going to worry about the action as we are not going to set the form up to actually go someplace upon submission. 5. Select Insert > Form > Fieldset. (Check to make sure that your cursor is between the opening and closing form tags.) 7. When the Legend dialog box displays, type Contact Us. 8. Use Split View to make sure that your cursor is after the closing legend tag. Press Return. 9. Select Insert > Form > Text field. 0. When the Accessibility dialog box displays, type name in the ID field.. Type Name in the Label field. 6. Leave the other options at their defaults and click OK. 7. Make sure your cursor is after the name textfield and press return. 8. Select Insert > Form > Text Field. 9. When the Accessibility dialog box displays, type in the ID field. 0. Type in the Label field.. Leave the other options at their defaults and click OK. 2. Make sure your cursor is after the textfield and press return. 3. Select Insert > Form > Text Field. 4. When the Accessibility dialog box displays, type phone in the ID field.

12 5. Type Phone in the Label field. 6. Leave the other options at their defaults and click OK. 7. Make sure your cursor is after the textfield and press return. 8. Select Insert > Form> Textarea. 9. When the Accessibility dialog box displays, type comments for the ID and Comments for the label. 20. Leave the other options at their defaults and click OK. 2. Make sure your cursor is after the closing Fieldset tag and press return. 22. Select Insert > Form > Button. 23. Cancel out of the accessibility dialog box. Submit buttons already are accessible by virtue of the type=submit attribute. 24. If you like, you can change the text of the button from Submit to any value you like in the Value field of the Property Panel. (Make sure the button is selected in order to see its options.) Adding CSS to the Form Elements. Go into Code View and locate the textfield that has an ID of name. 2. At the end, just before the closing bracket, type placeholder="first and Last Name". (Yes, you need the quotes.) 3. Add the autofocus attribute. 4. Add the required attribute. <input id=name name=name type=text placeholder="first and last name" required autofocus> 5. Locate the textfield that has an ID of Within the tag, just before the closing bracket, type placeholder= 7. Add the required attribute. 8. Change the type to type= . This will benefit users of ipad and iphone whose ios will present different keyboards depending on the input type. <label for=" "> </label><input type=" " name=" " id=" " placeholder= required> 9. Locate the textfield that has an ID of phone. 0. Within the tag, just before the closing bracket, type placeholder="example " required. Change the type to tel: type="tel". The ios will present a number keyboard. <label for="phone">phone</label> 2

13 <input type="tel" name="phone" id="phone" placeholder="example " required> 2. Return to Code View and locate the textarea tag. 3. Within the opening textarea tag, type the attribute maxlength and give it a value of 000. This will limit the number of characters the user can input to 000. <label for="comments">comments</label> <textarea name="comments" id="comments" cols="45" rows="5" maxlength=000></textarea> Adding CSS to the Form You can use the following example rules as a guide. The selectors are all Tag in Dreamweaver s dialog box. form { padding: 20px; margin-left: 5px; margin-top: 0px; } fieldset { margin-bottom: 0px; } legend { color: #6E2D0; font-size: 0%; padding-bottom: 0px; } Adding Attribute Selectors Adding HTML5 form attributes Now here is where it starts to get very interesting. In the past, styling forms has posed a challenge because of the fact that the input element includes just about every form object: textfields, submit buttons, radio buttons, etc. So if, for example, you wanted to add a width of 250 to the name, , and phone textfields, you would also see the width of the radio and submit buttons increase to that size as well. To avoid the problem, you would have to start adding classes to the various input elements. This would add extra markup to the page, and increase the amount of maintenance. This is where type attributes come to the rescue. You will remember that you added different types to the various input elements. We'll use these types within brackets [] to create attribute selectors. Then our styles will target specific input elements rather than all input elements. First we'll set the width of the name, , phone, and textarea for comments to 250. We'll even add in some CSS3 rounded corners. Finally we'll use a CSS3 color format 3

14 RGBA to add varying amounts of opacity to the gold color of our color scheme.. Create a Compound selector named textarea, input[type="text"], input[type=" "], input[type="tel"] (This may be easier to do by hand coding it into the style sheet itself.) 2. Add a width of 250px. 3. Set the Display to Block. (This will put the fields themselves on different lines than their labels and give us a neater appearance.) 4. Add border-radius in its three formats (while Safari 5 now uses border-radius rather than needing the webkit extension, there are still users with older versions of Safari). You can use Code Hints in Code View, or you can use the Properties for panel in Dreamweaver. If you use the Properties for panel, click Add Property and one at a time type in border-radius, -webkit-border-radius, and -moz-border-radius on the left (you can also use the dropdown list in the left column to enter border-radius, but not the webkit or moz versions). You'll then get for each an icon next to the value field that when clicked gives you a visual interface for adding corner dimensions. Here are the values to add: -moz-border-radius: 0px -webkit-border-radius: 0px border-radius: 0px 5. Click OK. 6. Double-click the new selector in the CSS Styles Panel. 7. Select the Background category on the left. 8. Click the color swatch next to the Background-color property. 9. Click the Arrow icon on the top right. 0. Locate the Color Format command at the bottom of the Options menu.. Select rgba(). 2. Now with your cursor as eye dropper, sample the color you want to use or choose one in the color swatch. Dreamweaver will write the RGB values for that color. 3. Change the (this is full opacity, and 0 is completely transparent) in the A (or AlphaTransparency channel) to 0.5. This will be 50% opacity, thus giving us a paler shade of our color. RBGA color is very handy for layering elements. For example, you can layer a box with text that is partially transparent over an image to see some of the image peaking through. 4. Go back to the style sheet to add a bit of hand coding. 5. Copy the new rgba background-color rule. 6. Paste the copy above the first rgba rule. 7. Delete the 0.5 alpha channel. Internet Explorer 6, 7, and 8 don't understand it. We will put an rgb rule before the rgba rule, which IE will understand as long 4

15 as there is no alpha channel listed. It will pass over the second property and value. textarea, input[type="text"], input[type=" "], input[type="tel"]{ background-color: rgb(247,239,0); background-color: rgba(247,239,0,0.5); width: 250px; display:block; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; } The Submit Button. Create a new Compound selector named input[type="submit"]. 2. Select the Background category on the left. 3. Select the Arrow icon on the right top side of the swatches. 4. Select Color Format from the contextual menu. 5. Revert back to hex (Dreamweaver remembers the last format you used): Sixdigit hex. 6. Use the Eye Dropper to once again sample the your color. 7. Select the Box category on the left. 8. Set the width to 75px. 9. Set the padding (all sides) to 4px. 0. Set the margin-top to 0px.. Select the Border category on the left. 2. Set the border all around with the following values: solid px [your color] input[type="submit"] { background-color:border: solid px #000; width: 75px; padding: 4px; margin-top: 0px; margin-bottom: 0px; background: #DED604; border: px solid #65442; } Your Portfolio or Gallery Adding a Gallery to the Site Follow the appropriate tutorial: Lightbox, Accordion, or jquery Slideshow. Note: If you use Lightbox, you will have to make the a img rule that makes image links block elements more specific. Otherwise, the Lightbox thumbnail images that are links will become block instead of inline. /* Make this more specific for the Lightbox images as 5

16 links */ header a img { border: none; display: block; } 6

GDES218 Graphic Design for the Web

GDES218 Graphic Design for the Web Using the Web Font in Dreamweaver CC Now that you have a custom font, you will use the Dreamweaver CC Manage Fonts feature to make adding the font to your pages as easy as adding a font from your own computer.