Website Design

A website design course at the University of Wyoming

Tag: css (page 1 of 2)

Layout and Positioning Strategies

Ch. 11: Layout and Positioning: Arranging Elements

***Remember that you can view the source code (html) and css of each layout that is linked below. Right-click, “View source” or “View page source”, and see the html. To view the css, click the css linked on the html code (code reads href = “starbuzz.css” or some version of that). ***

***It is fine for you to mimic and copy the layout strategies below.***

Understanding the “flow” of elements — pp. 472-478

Floating elements as a layout strategy — pp. 479-482.

1. Reformatting the Starbuzz web page to a two-column web page using the floating strategy — pp. 483-500.

2. The jello layout — pp. 500-503.

3. Absolute positioning — pp. 503-509.

4. CSS table display layout — pp. 510-520.

Review of CSS layout strategies — pp. 521-522

Floating images in a header — pp. 523-527.

Using absolute positioning for an image — pp. 527-529.

Fixed positioning — pp. 530-536.

Relative positioning — p. 536

The Box Model with CSS

Ch. 9: The Box Model with CSS

A new and improved Head First Lounge — pp. 362-366

Box model basics: Content, padding, border, margin — pp. 367-372

Applying the box model — pp. 373-391

Classes vs. ids — pp. 392-397

Using multiple stylesheets — pp. 398-404

Week 5: Dreamweaver Set-Up & HTML Standards

Announcements

  1. This week:
    1. Finish Ch. 5 on Images
    2. Set up our websites in Dreamweaver
    3. Cover Ch. 7 in Krug
    4. Start (and hopefully complete) HTML book Ch. 6 and 7.
  2. Assignment #4: Website with Images is now due on next Tues. 2/28
  3. Check grading comments on Assignments #1 and #2.
  4. Quiz #1 “Be the browser” grades will be available on Thurs. 2/23.
  5. Quiz #2 is on next Thurs. 3/2

Krug, Ch. 7: Designing the Home Page

Not everything from this chapter applies to your relatively small-scale websites. Here are some of the highlights.

The home page should communicate: (see p. 86)

  1. The site identity and mission
  2. Site hierarchy (accomplished by persistent navigation)

The home page *could* also communicate: (see p. 86)

  1. Content promos
  2. Feature promos
  3. Timely content

No matter what, the home page should convey the big picture.  It should answer the questions:

  1. What is this?
  2. What do they have here?
  3. What can I do here?
  4. Why should I be here–and not somewhere else?

Why are these questions important?

Because visitors make snap judgments in milliseconds that are hard to change later.

How do we convey the answers to these questions? (see p. 93)

  1. The tagline should describe you or your site in a handful of words.
  2. The Welcome blurb should not say “Welcome to my website,” rather, it should display a short description of the website.
  3. The “Learn more” is akin to the “About” page pitch (e.g., “learn more about my goals), if you have one on the home page.

Ch. 6: Web Standards

HTML through the ages — pp. 219-226

Adding the <!doctype html> tag — pp. 227-232

Meet the W3C validtor — pp. 233-238

Adding the <meta charset=”utf-8″> tag to the <head> nest — pp. 239-243

Reminders and exercises — pp. 244-249

Adding a Resume and Achieving that “Wow Factor”

Adding a Resume

For the final website, you need the resume in both PDF and HTML versions. This means the resume should be downloadable by PDF and should be coded in HTML (or appear as an image). See classmate Olga’s resume page for a good example of how she met this criteria.

To embed the PDF, save your resume as a PDF file from Word (go to Save & Send –> Create PDF Document). Ensure you save it in the same folder as your website files. Then, in the HTML code, insert the PDF file as a link: <a href=”my_resume.pdf” target=”_blank”>Download my resume</a>.

To insert the resume as an image, open the Word document in Adobe Illustrator (or another editing program that can open .doc files). Go to File –> Save for Web & Devices –> Save as .jpg file in the same folder as your other website files. Then, in the HTML, insert the image element code: <img src=”my_resume.jpg” alt=”My resume as an image.”  border=”1px black solid”>.

If you have any trouble, please let me know.

Improving the Application of Design Principles

Many of you need to improve the professional look and feel of your website. You may have met the requirements for the final website, but you are missing the bonus “wow factor” that “A” websites possess. To meet the “wow factor” requirement for an “A”, you must apply design principles in a clean and professional manner. Let’s review the design principles before examining some example websites.

Here are a few student websites that have the wow factor and some that don’t.

Wow Factor Websites

  • Example 1: Uses simple repeating background image with a jello layout
  • Example 2: Simple color scheme with repeating background image and jello layout
  • Example 3: Simple color scheme, clean look with simple graphic and font

Websites That Lack The Wow Factor

  • Example 1: Poor color scheme, inconsistent font choice, and more problems
  • Example 2: Poor color scheme, but otherwise it is OK. See what a poor color scheme can do?
  • Example 3: Odd choice of fonts, poor color scheme, distracting and odd background image. Layout looks pretty good though.

Aiming for the Wow Factor: Adding a Simple Repeating Background Image

What is a simple repeating background image? Check out my personal website to see what I mean. Right-click to “view background image” andimg09 you’ll see that there is a simple rectangle that is set to repeat in my CSS. See the corresponding CSS code below:

#bodyindex { background: #DEDEDE url(images/img12.png) repeat-x left top; }

#bodypages { background: #DEDEDE url(images/img09.png) repeat-x left top; }

To explain: I created an index page that looked slightly different from the rest of the web pages, so it has its own division (#bodyindex, just for the index) and its own image (img12.png, just for the index page). The other web pages use the #bodypages division and the img09.png image. Notice that I’m only repeating it horizontally once (that is the “repeat-x left top” rule). Then, when the image is done repeating, it defaults to the background color of #DEDEDE (the light tan color).

To refresh your memory on the background selector options in CSS (such as background-repeat, background-position, etc), please see p. 380-383 in the textbook.

Aiming for the Wow Factor: Adding Rounded and Stylized Borders

Notice how my dropdown menus on my personal website have rounded edges. This effect looks professional and is easy to create using the border-radius property in CSS. See. p. 386-389 in the textbook for a refresher on how to create and style borders using CSS. In another example, classmate Hannah has applied a stylized border to her home page.

Aiming for the Wow Factor: Adding a Logo or Photo That’s Consistent Across Pages

On my personal website, you’ll notice that the home page has a larger photo with my name and the content pages have a cropped smaller version of the same photo. This creates visually consistency across pages.

Consider using a consistent image across your websites as well. For example, classmate Gabrielle has used a golf-related image for her golf-themed website.

Classmates Jordan and Olga have created logos that are used consistently across their websites.

To create a simple logo, go into Photoshop or another graphic design program and experiment with the text tool, shapes, and lines to create an original logo for your website. Simple is fine. It does not have to be fancy or complicated.

Photo Galleries & Slideshows

Photo Galleries

If you want to organize your photos in a gallery, then here are some options that I’ve created for you. Feel free to adapt this as you see fit.

Photo galleries are great for a large number of photos to display. If you only have a few photos to display, or want to display photos in a slideshow manner, see the section called Photo Slideshows below.

I will walk you through some of the major coding concepts. Otherwise, it’s up to you to play around with the HTML and CSS to adjust to your website. Please let me know if you have questions.

Example 1

Example 2

Example 3

Photo Slideshows

Dynamic photo slideshows are even more complicated than static photo galleries. Let’s skim over a tutorial to get an idea of what’s involved.

We can work through the key pieces of code that you need to understand in order to adapt the code for your own website.

Photo slideshows are great for less than than a dozen photos or so. If you’d like to showcase all of your photos on a webpage, then go with a photo gallery. If you want to highlight a few important photos on a home page or content page, then go with a short slideshow.

Note: The more photos you add, the more complicated the code gets and the more you’ll have to work to re-write the code to fit your needs.

Example 1: Automatic slideshow with no captions

Example 2: Automatic slideshow with captions and play/pause buttons, very complicated code

Example 3: Automatic slideshow with captions when you hover

Example 4: Automatic slideshow with captions all the time

You could also download the code from the first example we looked at and edit that code as well.

Drop-Down Navigation & Appendix Top 7

Drop-down Menu

Drop-down menus can make navigating your website easier. I added a drop-down menu to my personal website.

In order to give you a cleaner version of the drop-down menu, we will examine the clean example on my website by first looking at the HTML and then look at the CSS.

The HTML is very simple. Let’s start there. Open a new notepad document and follow me.

You’ll see that the CSS is a little more complicated. Let’s copy and paste the CSS into a new notepad document.

  • We will break down the major components of the CSS file to understand what’s going on.
  • We will use our book’s Appendix section to learn more about the CSS once we’ve typed it in and done the example ourselves.
  • We will play around with the CSS code by deleting and altering rules in order to see what happens. –> This is a great way to learn what specific rules are doing in CSS!
  • If you need to use drop-down navigation, you will add the code to your website and adapt it as necessary. I will help you, if needed.

Also, don’t forget that I’ve added a new section of HTML & CSS Resources in our sidebar of links on our blog here.

Appendix Top 7

Appendix #1:  More CSS selectors (and the word-spacing  property)

Appendix #2:  Vendor (i.e., browser) specific CSS properties

Appendix #3: CSS transforms and transitions (we will do this example together)

Appendix #4: Interactivity (this is what JavaScript looks like)

Appendix #5: HTML5 APIs and web apps

Appendix #6: More on Web fonts

Appendix #7: Tools for creating web pages

Divs and Spans

Ch. 10: Divs and Spans

Understanding “divs” are divisions — pp. 413-425

Computing width and total width for boxes — pp. 426-430

Adding padding, margin, and background images. Centering elements within a div — pp. 431-434

Adjusting heading colors and line-height for divs — pp. 435-441

CSS shortcuts — pp.442-445

Adding a footer div — p. 445

Spans are for inline elements — pp. 446-451

Styling the “a” tag states: unvisited, visited, hover — pp. 452-456

Understanding “pseudo-classes” — pp. 453-456

Predicting the “cascade” in cascading style sheets — pp. 457-464

 

 

COJO 4230, Week 11: Creating a Photo Gallery

Because most of you expressed interest in creating a photo gallery for your websites, this is the next topic we’ll cover.

I have created three examples of a photo gallery that use HTML5 and CSS3. There is no knowledge of HTML5 programming necessary, it only uses HTML5 and CSS3, which you all should know. Let’s check out each one. Then, we’ll take a class vote on which example we’ll cover in class.

Example 1: white background, black border, box-shadow, 3 pictures across

Example 2: black background, white border, box-shadow, 4 pictures across

Example 3: black background, no border, no box-shadow, 4 pictures across

Please download all of the files in this zipped folder.

Also, you are free to explore, learn, and use other photo galleries that you find appealing. You can find some examples here and here. Please note that some of these examples are more difficult than others and require you to explore JQuery, JavaScript, and HTML5’s canvas.

COJO 4230, Week 2: The Building Blocks of the Web

It’s helpful (and very awe-inspiring) to know the history of the Internet before we start building our own webpages.

Now you’re familiar with the Internet’s skeleton, let’s start learning about its guts!

Chapter 1: Universal Language of the Web

Servers, browsers, and hypertext markup language (HTML) – pp. 2-8.

Class exercise on p. 7.

Instructor-led exercises on pp. 9-31.

Individual exercises on pp. 32-42.

Chapter 2: Hypertext

Instructor-led exercises on pp. 43-67.

Individual student exercises on pp. 68-76.

 

Hints for Happier Coding

As you create your web pages, remember that Web browsers behave differently. They are sometimes kind to you and display your pages nicely, as the way you intended. However, sometimes they are not-nice to you and display your pages yucky, as not the way you intended. This is why the precision of your HTML and CSS code is so important. Remember that even while your web pages may visually appear nice and pretty in the Web browser, there still may be HTML problems. Be sure you’re double-checking your HTML code for problems.

As I was grading this past week’s basic website assignment, I came across some common errors:

  • When you open a tag, close the tag. There were several “p” tags with no “/p” tags. They’re friends, so be sure they stick together.
  • Link to every main page from every main page. For example, some students forgot to link to their Index Page from their About Page.
  • Keep navigation order the same on every page. Don’t change the order of your links, it’s confused for visitors
  • If you want an external/absolute link to open in a new window, use the “target=”_blank” tag within your link tag.
  • Create a tagline for yourself and use it on the Index Page: Kristen Landreville, Professor, Researcher, and Photographer.
  • Label each unique page as well: Kristen Landreville, About Kristen.
  • Consider adding paragraph that sells your knowledge, skills, and talent to potential employers. Many students had a basic education paragraph, but I’d like to see detail about your specific skills and why a company NEEDS to hire you. That’s ambitious and confident.
  • Proofread. Many students had spelling errors and spacing errors. You’re a communication student, you don’t want those kinds of errors.
  • Use the to talk to me on your web page and style sheet. For those students who used this feature, I enjoyed reading your thoughts, concerns, and ideas.

Overall, we’ve got a great start going for our websites! I’m eager to see your website get prettier when we add CSS now.

Older posts

© 2017 Website Design

Theme by Anders NorenUp ↑