Too tired to read carefully? Perhaps your computer will read the material to you. Use these instructions to test your computer’s reading abilities. Set up your computer to read to you.
If you are an auditory learner, or your eyes are tired, I recommend listening to the course materials and readings to help improve information retention. Set up your computer now so you can listen to instructions and listen to your web pages to check for errors.
Click the Navicon menu icon and choose More Tools, then choose Extensions from the popup list and scroll to the bottom of the list of extensions to click on .
Search for SpeakIt! and/or TuneIn and/or Select and Speak. Add both.
To listen to any paragraph, select it then click the sound or brain icon that was just installed on the Chrome Toolbar (to the right of the address bar). If you prefer one extension over the other, delete the other.
Click the icon again to adjust settings. You might want to speed up or slow down the text.
Macintosh
Choose this option only if you don’t like Chrome’s extensions.
Set up Preferences for Speech to use a keystroke of your choice.
From the Apple menu, choose System Preferences.
Click the Speech icon then the Text to Speech button. Choose a Voice and Speed.
Install Samantha if you want the reader to sound like Siri.
Click the Set Key button and choose a keystroke you can remember.
From any document or web site, select text you want read, and click your new keystroke.
Windows
Choose this option only if you don’t like Chrome’s extensions.
In the /main.css/ file, design the popup message to be obvious and inviting. Use the Almanac at CSS Tricks to learn more about these property/value pairs: border radius, box shadow, content, text alignment, font families, and positioning.
Note that the title attribute will provide a popup message as well as the data-title. However, we are only able to restyle the latter without the default message also popping up. We don’t want two messages at the same time.
Dr. Maryellen Weimer, Professor of Teaching and Learning, Penn State Berks, notes in a 2012 issue of Faculty Focus that,
“Most professionals are expected to offer feedback and otherwise evaluate the work of peers. It’s a complicated skill that requires no small amount of interpersonal finesse.”
Dr. Maryellen Weimer
Since this finesse takes practice and your site needs testing (remember the design process), you and your classmates will spend this week reviewing and writing about each others’ sites.
The peer review earns 10 points if the scoring is accurate and the written review is helpful and well written.
In Canvas, submit links to your site in the Final Peer Review forum.
Title your thread with the name of your site.
Paste the addresses of your home, form, audio/video, image gallery, typography, and table into the message box.
Score and write reviews for two people’s sites from the Peer Review forum.
Open, select the text of, and copy from the appropriate list below.
To build credibility as well as connect with all types of visitors, it is common to provide ‘sharing’ links. Sharing links allow visitors to share your content in their social media accounts by clicking on a functional icon. These ability to quickly share your content in visitors’ sites can streamline marketing of news, services, and products to others, allowing them to get to know you and your company better and exponentially share that information with more people.
It is common to provide links to your social media accounts in your website, but in this lesson, you’ll be adding links that allow others to share your content in their accounts. We’ll use dynamic hyperlinks along with a custom font icon to improve the sharing experience.
In this lesson, we’ll use fonts already hosted elsewhere.
Examples
Mark
1. Choose a set of sharing icons.
IcoMoon provides a free set of icons which include the most common social media and blogging formats. The icons are simple yet sophisticated and can be modified to match your site’s future design.
At the top, click on the Settings → Manage Project menu. Rename your project ‘sharing’.
Click Load to see the icon choices.
The free fonts are usually at the top. If not, scroll to find the ‘Icomoon – Free’ set.
Click on each social media icon that represents each of the accounts you want listed in your résumé. Remember to choose icons the represent social media sites where you are hoping others will share your résumé …not sites you belong to!
Click the Generate Font menu at the bottom right.
Click Download to save the font .zip archive file to your hard drive.
2. Serve the fonts from your server.
Just in case Icomoon changes their files or goes out of business, it is a good idea to host the font files on your server.
Unzip the archive file so that the files are extracted.
Take a look at the contents of the unzipped folder. Notice the demo page, json page, the stylesheet, and the folder hold font files. The most common web font file formats, which are included in this folder, are
Add a comment after it to remind you where the icons came from.
3. Markup icons.
In the index.php just above the ending </section> tag, add a new nav tag with an identifier called ‘sharing’. Then add an icon tag with Google Materials ‘share’ icon. Add icon tags for each social media icon you’ll be using and surround each with an anchor tag, like this:
Each class name starts with icon-. Use the names provided by Icomoon’s app to change the class names in your list of anchors.
Style
Because we are embedding icons as fonts, we can change their color and size like we could text. Since the nav a made earlier already has style changes, all other nav blocks will inherit those styles. So that we can customize the nav block identified as ‘share’ we’ll place the id name next to an anchor to be more specific.
In your main.css file just under the other nav a declarations:
Change the display from block to inline and the background color to transparent, so that the share items are less obtrusive than the main items, like this:
1 2 3 4
#share a { display:inline; background-color:transparent; }
Change the default hover style so it is consistent with the navigation block’s style, like this:
1 2 3
#share a:hover{ background-color:darkgray; }
Function
Remember, you choose icons that represent social media sites where you are hoping others will share your résumé …not sites you belong to!
Add dynamic links to existing icons.
URLs can include scripts which invoke action when linking.
In each href for the share icons, add a dynamic reference and blank target and update the ONID username, like this:
<!-- Twitter --> <ahref="http://twitter.com/share?url=http://oregonstate.edu/~ONIDuserName/about/&text=FIRST and LAST NAME&hashtags=resume"target="_blank">
<!-- Twitter Alternative --> <aclass=""href="" data-text="" data-url="" data-hashtags="" data-via="" data-related="">MESSAGE</a>
Use W3.org's Unified Validator to find and fix hidden errors in the HTML, PHP, and CSS documents of your site. Chat with the instructor if you need help.
HTML validation exceptions allowed:
The link tag to Google Fonts related to the vertical bar |.
Empty img tags (until Chapter 6).
Table tablesort attribute.
Iframe frameborder, allow, and gesture attributes.
Meta for X-UA-Compatible.
CSS validation exceptions allowed:
:required pseudo class.
Properties and values related to the .gradient class.
Clip Path properties related to .shape class.
Slideshow animation properties related to .slidebox classes.
Drop shadow properties related to .drop-shadow classes.
Did you see the error related to ampersands & ?. Go back to the list of social media links and change the & in each href’s URL to & a m p ; with no spaces. Linked in has one. Instead of =true&url make it =true&url.
Resources
All of your links must be assigned at least to one category to be displayed
Scoring
This lesson will be scored using the following criteria:
Use FileZilla to connect to web servers, backup files, update file permissions, and upload/download when you use a text Editor that doesn’t include FTP capability. Download the application, then connect using the SFTP shell address, your username and password, and port 22.
For the Host field, type the secure shell (SSH) address for Secure File Transfer Protocol (SFTP) that represents the ONID server:
1
shell.onid.oregonstate.edu
For the Username field, type your ONID user name.
For the Password field, type your ONID password.
For the Port field, type 22.
Click QuickConnect to connect to your web server.
When connected, the web server files will show on the right window, which is called the Remote window.
Click into the public_html folder to view the contents of your web server.
All files for this class will be transfered into this folder.
In the left window, click into your hard drive’s file structure to a folder that includes web files for this class.
If you have no web files yet, then make a folder on the hard drive to save your files to.
Define a Site with Secure FTP to help manage editing and uploading
Launch Dreamweaver and navigate to Site → New Site… or Site → Manage Sites… or on the Files window, click on the Manage Sites button.
In the Site Setup screen:
Name the site (this is a name that will show up in your list of sites). OSU Students name it ONID.
In the Local Site Folder field, choose (or make) a folder on you local hard drive that will be for your site. DO NOT choose a folder on a server; Dreamweaver doesn’t like it.
In the Servers menu:
Click the + box to get to the FTP screen.
Name the server (for OSU students this would be ONID or ENGR).
Choose SFTP from the dropdown menu.
Add the FTP address, which is the server’s domain; something like:
shell.onid.oregonstate.edu
Add your web hosting account User ID and Password.
Add the Root Directory name, which is usually something like:
public_html (OSU students use this one.)
http-docs/www/
Once you’ve set up this FTP information, you don’t have to do it again.
Any files you add to your local site will be ready to upload to the remote site via the Put buttons.
To make uploading to the server very easy, set up your working area so the remote (server) and local (hard drive) file lists are always visible:
View → Files.
Click the Expand to show local and remote sites button .
Now, you’ll be able to drag and drop files from the hard drive (the LOCAL file list) to the server (the REMOTE file list) and confirm that your file structure is the same on both.
You can also use the Put and Get buttons to transfer files from the hard drive and server.
And, I highly recommend clicking Control/CommandS then Control/CommandShiftU to save and upload using the keyboard. This will reduce stress on your mousing/tracking hand.
Making and editing files
Right click on the root folder to make a new folder.
Right-click on a folder to make a new file within that new folder.
Edit code in the Code screen, not in the Design screen.
Back up.
Think of the local site files on the hard drive as your working copy and the remote files on the web server as your backup.
But you must (you must) back up your files to another disk each session you work. Why? If you haven’t lost important files yet in your life, you will some day. You have been warned. 😉
Current trends for the body’s background vary from one solid color to large photographs with many options in between. A common option is to introduce a simple and subtle texture, called a seamless background or wallpaper. By default, the background property repeats, creating a wallpaper with a single graphic file. The resulting pattern can overpower the important elements of the overall page design. The background’s image should not obstruct the text or complete too heavily with other images on the page, so that visitors will know where to start reading or interacting.
Learning to adjust the original graphic file to enhance the site without overpowering it takes practice. In addition, this background graphic should not take any time to load, so the file size must remain low. Choosing the best file format for the job will depend on the number of colors in and size of the image. If the image has a lot of variations of color, then a JPG file might be best. If the file uses just a few flat colors, then PNG and GIF are good choices. PNG files will allow variations of background-color to show through if transparency is used.
Examples of seamless background wallpaper graphics
A variety of GIF, PNG, and JPG files have been used to render wallpapers in various sites. Click on each image to see how it looks when paired with other site elements:
Optimize
In this lesson you will create a small, subtle graphic, save it in the appropriate file format, and repeat it in the background of the body tag.
1. Start with what you created already.
This technique uses your existing background photo.
Open the original photo file or your finished banner background file.
Remove any layers that do not relate to the wallpaper you want to make.
Save the file as a new document called wallpaper.
Choose an interesting part of the photo by selecting it with the Crop tool. Enter
Use the Magic Wand to select the negative space around the foreground item. Delete.
Add other items or duplicates of your original shapes to finish the middle of the design. Stay away from the edges.
File→Save the file as .PXD (or .PSD) so you can edit again later.
Turn off the white background layer if there is one.
File→Save as .PNG for the web site. (Photoshop: use the File→Save for the Web menu)
Reduce size as needed.
Choose .png for true transparancy and a file size lower than 30k.
Watch the file size; it may be too big to meet your requirements. If so, use TinyPNG to reduce its size. If it is still too big, then redude the complexity and dimensions of the imagery.
Remember, that all background patterns need to be subtle, not loud.
Variation
To create different spacing for the repetition, use 3D Dojo‘s Photoshop technique.
Create a new document with square dimensions in RGB color mode and 72 pixels per inch (ppi) with a white background.
Add shapes to your layout but do not allow them to touch the edge of the canvas.
Select all layers but the background color (white).
Duplicate the group.
While the group is selected, choose Filter→Other→Offset from the menu.
Slide the horizontal and vertical offsets to meet your needs (I chose the median of my canvas width).
Click Wrap Around from the check box list.
Click OK.
Add other items or duplicates of your original shapes to finish the middle of the design. Stay away from the edges.
File→Save the file as .psd so you can edit again later.
Turn off the white background layer.
File→Save as .PNG for the web site. (Photoshop: use the File→Save for the Web menu)
Reduce size as needed.
Choose .png for true transparancy and a file size lower than 30k.
Watch the file size; it may be too big to meet your requirements. If so, use TinyPNG to reduce its size. If it is still too big, then redude the complexity and dimensions of the imagery.
2. Save and improve the file size
Once you have the file on your hard drive, look at the file size. If it is larger than 30k, then use TinyPNG to reduce it. Compare the resulting file size to confirm it is small enough. If not, then go back to your working file and either change the image size, reduce colors, reduce shadows, and reduce other embellishments, if any.
Upload the optimized file to the /img/ directory.
Style
3. Add the image to the stylesheet.
Call the image from the style sheet in the @media query’s body {} block: (There is no need to provide a decorative background image for smaller screens.)
1 2 3 4
body { background-image:url(../img/filename.png); background-repeat:;/*Optional; consider repeating just x or y; the default is both. */ }
Feel free to use the short cut version of the background tag.
Note that repeat"> does not belong in the styles above; remove it; the web application has a glitch in the code.
The ../ in front of /img/ helps the style sheet find the image file inside the images folder which is outside the /css/ folder.
4. Adjust the forground blocks to improve readability.
The wallpaper file is not appropriate for the background of blocks that will contain a lot of text. We want to read your content with ease. If you don’t have color (or enough opacity) in the <nav> and <section> blocks to allow text to be read on top of the new wallpaper file, add some to these elements in the Authoring area:
1 2 3
section {background-color:;}
nav {background-color:;}
footer {background-color:;}
and look for and fix missing graphics, overlapping graphics, illegible text, misaligned columns, etc. Review the markup and style declarations to see what you missed. Ask questions if you need solutions.
Use W3.org's Unified Validator to find and fix hidden errors in the HTML, PHP, and CSS documents of your site. Chat with the instructor if you need help.
HTML validation exceptions allowed:
The link tag to Google Fonts related to the vertical bar |.
Empty img tags (until Chapter 6).
Table tablesort attribute.
Iframe frameborder, allow, and gesture attributes.
Meta for X-UA-Compatible.
CSS validation exceptions allowed:
:required pseudo class.
Properties and values related to the .gradient class.
Clip Path properties related to .shape class.
Slideshow animation properties related to .slidebox classes.
Drop shadow properties related to .drop-shadow classes.
Resources
Other resources
These pattern making tools are not for use in this class! However, they are fun and handy and sometimes make lovely backgrounds.
Some online generators require you save a screenshot of the design. Some will download it to your hard drive. And some require it be emailed to you (use caution).
will have a catalog filled with vintage minks, unique jewelry, and one-of-a-kind handbags from my collection. They are all in excellent condition and have been stored in cold-storage.
Node.js application that easily process your CSS. It simplifies the use of preprocessors and combines them with best postprocessors. It helps create clean stylesheets, support older browsers and offers better maintenability. This means no more Compass for prefixes, no more rem mixins, and so on.
The Root Zone Database represents the delegation details of top-level domains, including gTLDs such as .com, and country-code TLDs such as .uk. As the manager of the DNS root zone, we are responsible for coordinating these delegations in accordance with our policies and procedures.
A common design trend is to display a large photo, slideshow, or movie in the most prominent location on the web page: the header block (banner). The logo, slogan/tagline/description, and navigation must work together with the photo to ensure readability and entice visitors to continue using the site. Other current design trends for touch devices use large images behind text and blocks of graphics with text. Read more about design trends at 99 Designs (2014).
Recall that JPG files are primarily used for photographic images. They compress down to small file sizes, though too much compression reduces image quality. JPG files always remain rectangular and do not retain transparent shadows or biomorphic edges. Any background color behind a photo will automatically become white unless another color, pattern or layer is layered behind it.
Examples
Example JPG photos behind transparent PNG logos in header blocks
Some images are more than 50k and some are split into more than one file to provide flexibility. Click on a banner to view the website. Use Inspect Element to view the markup, styles, and background file.
Optimize
In this lesson, you’ll find a large image, crop it to fit the <header>, optimize it to fit, then place it under the logo in the stylesheet.
The required optimized file size is low (50k) so that you are forced to use JPG compression, which helps keep your site loading quickly. To accomplish the right balance between design and file size, you may need to crop, add color- and texture-reducing filters, and overcompress. These skills require practice, so experiment until you get something that not only meets requirements, but that provides harmony with simple design.
1. Choose a photo.
Find a copyright-free photo, scan a flat object, or paint electronically and save the file at a high resolution of 300dpi.
2. Manipulate the image.
Open the file in Pixlr or Photoshop (note that Illustrator is not a good choice for photo manipulation).
Use the Crop tool and or Image → Image Size menu to reduce the image to fit the maximum width of the <header> block (which may be the same as the <div id="container"> block).
Crop the image again to fit the most appropriate height for the <header> block. It should not be so tall that you cannot see the top of the <section> which contains the first paragraph. If you are unsure what looks good, try a height of 300px first.
3. Save the file.
Save → JPG. Slide the compression range so that the resulting file size is below 50k.
Save the image as JPG in the /img/ directory.
If the file you want to use does not optimize to 50k or below, then save the JPG at between 8 and 10 on the compression scale. Then use Online Converter to save it in .WebP format. Note that not all browsers will render this format.
Style
4. Add the image to the stylesheet.
Find the @media query section of the main stylesheet.
Use a variety of background properties to locate, repeat, and position the photo:
If the logo sits on a part of the background that reduces its visibility and readability, then adjust the positioning, margin, padding, or text-alignment to achieve the best result.
1 2 3 4 5 6 7
header a img { margin:; padding:; position:relative; top:; left:; }
6. Save and upload to the server.
Function
1
Test
1. View the page.
Shift- Refresh the window and look at your page.
and look for and fix missing graphics, overlapping graphics, illegible text, misaligned columns, etc. Review the markup and style declarations to see what you missed. Ask questions if you need solutions.
Use W3.org's Unified Validator to find and fix hidden errors in the HTML, PHP, and CSS documents of your site. Chat with the instructor if you need help.
HTML validation exceptions allowed:
The link tag to Google Fonts related to the vertical bar |.
Empty img tags (until Chapter 6).
Table tablesort attribute.
Iframe frameborder, allow, and gesture attributes.
Meta for X-UA-Compatible.
CSS validation exceptions allowed:
:required pseudo class.
Properties and values related to the .gradient class.
Clip Path properties related to .shape class.
Slideshow animation properties related to .slidebox classes.
Drop shadow properties related to .drop-shadow classes.
will have a catalog filled with vintage minks, unique jewelry, and one-of-a-kind handbags from my collection. They are all in excellent condition and have been stored in cold-storage.
Node.js application that easily process your CSS. It simplifies the use of preprocessors and combines them with best postprocessors. It helps create clean stylesheets, support older browsers and offers better maintenability. This means no more Compass for prefixes, no more rem mixins, and so on.
The Root Zone Database represents the delegation details of top-level domains, including gTLDs such as .com, and country-code TLDs such as .uk. As the manager of the DNS root zone, we are responsible for coordinating these delegations in accordance with our policies and procedures.
This course’s tool of choice is ShiftEdit, a text-editing and file management application that runs right in the Chrome browser. It provides editing in most computer programming languages, secure connections to web servers, and .zip file backup.
ShiftEdit is free for one web account, which will be your ONID or ENGR web account. If you want to set up more hosting servers, then you may purchase the premium application. ShiftEdit will allow you to work on files remotely on your server then back them up to your hard drive using Secure File Transfer Protocol (SFTP). ShiftEdit provides editing of various programming languages, which for the purposes of this course, is HTML5, CSS, JavaScript, and PHP.
In a previous lesson, you were instructed to launch ShiftEdit from the Chrome browser.
Click the Get Started button.
Click the G (Google) button to login with your OSU ONID/Google Account.
If you already own Dreamweaver on the computer you’ll use for class, then don’t install ShiftEdit; you won’t need it. Instead, set up Dreamweaver.
Connect
With Chrome and ShiftEdit open, set up a connection to yourpublic_html web server folder:
On the left sidebar menus, click on the Site menu.
Choose New Site...
On the Site Settings screen, type the correct values:
Name: ONID
Server Type: SFTP.
Host: shell.onid.oregonstate.edu
Username: Your ONID user name.
Password: Your ONID password.
Path: Type the remote directory path for /u1/ (some students may need to use /u2/) but replace the /*/ with the first initial of your last name and /**/ to your ONID user name:
/users/u1/*/**/public_html/
/users/u2/*/**/public_html/
Web URL: http://people.oregonstate.edu/~**
Click the Turbo Mode button to improve connection speed.
Click the Save button.
Backup. ShiftEdit lets us create folders and files directly on our ONID servers and transfer (copy/backup) to our local hard drives for safe keeping (by downloading a .zip archive). If you are using Dreamweaver, then you’ll create files on the local hard drive first then transfer/copy them to the server. Always maintain two copies…one on the server and at least one on the hard drive.
Set up Screens so that you have room to edit and view your live page without flipping to another screen.
Content asides provide additional note-worthy information for visitors, along side the main content.
Asides need special placement in the HTML markup as well as two properties. Aside tags must be above the paragraphs they need to sit beside. And their style needs to declare float and width:
float:left or right, so it will sit beside the main text.
width, so the block has some dimensions.
In addition, it is customary to design them to stand out by using these properties:
padding, to keep text from touching the border or edge.
border, to help keep the block visually separate from the main content.
margin, to keep the border from touching the main content.
Embellishments can be added to help the aside stand out and match the theme:
Shapes (such as circles, leaves, stars, bursts) made with CSS 3.
Background color and images
Transforms (such as rotate and skew)
Border radius (rounded corners)
Box shadow
Deliverable → Design and use an Aside.
1. Choose a page of your site for the aside.
Beginning course: open one of your site’s index.php pages (or other subtopic page).
Intermediate course: open the /typography/index.php page.
2. Write some content.
Beginning If you already have a <p> paragraph sitting between the two PHP include statements, then add more content totaling about 400 words. This content needs to be related to the topic and be written in proper English.
Intermediate For the Intermediate class, the topic is web authoring (write about what you have learned so far related to graphic design and typography for the web). Write at least 400 words and include at least one list.
Save and Upload.
3. Add two Asides.
Just above the first <p>, but below the first PHP include statement, add an <aside class="alignright">.
Between the opening <aside class="alignright"> and closing </aside> tags, add more text, a quotation and <cite>citation, OR a <figure><img/> with <figcaption>:
Note that when the aside is styled so it looks nice, its placement can be interchanged with these alignment classes. We can use these three classes on any block as needed. Note that the alignment classes have increased margin for the sides that will sit next to text (so they don’t touch).
Add overflow to main block’s unordered and ordered lists so that bullets next to left-aligned asides won’t overlow/overlap:
1
main ul, main ol {overflow:hidden;}
If you don’t add the main element then all menus that use ul will have spacing problems.
Save and Upload.
View the content page. Does the aside block float to the right? Note that other 400 words you wrote sits next to the aside block. When the <aside> is placed above the text it ought to float next to, and when it is styled with width and float, it will work properly.
icon and choose More Tools, then choose Extensions from the popup list and scroll to the bottom of the list of extensions to click on 
.
or brain 
icon that was just installed on the Chrome Toolbar (to the right of the address bar). If you prefer one extension over the other, delete the other. 
.
Crop tool and or Image → Image Size menu to reduce the image to fit the maximum width of the 
menu.
