Website Design

A website design course at the University of Wyoming

Tag: dreamweaver

Updating to HTML5 Markup

Ch. 12, Modern HTML: HTML5 Markup

Monday and Wednesday

Download the correct HTML (right-click, view source, copy and paste code into Notepad, save as “blog.html”) and CSS file (click link, copy and paste code into Notepad, save as “starbuzz.css”) for this assignment

Why change from <divs> to HTML5 markup — pp. 545-547.

Updating the Starbuzz website to HTML5 (conceptual) — pp. 548-558.

Adding a blog to a web page — pp. 559-572.

Adding navigation to your website — pp. 573-577.

Adding video — pp. 578-593.

Embedding video with YouTube

Adding audio — p. 710

See the Starbuzz Blog with an mp4 video that autostarts.

See the Starbuzz Blog with multiple video sources that does not autostart and for an embedded audio file using HTML5.

Friday

Required attendance workday. Submit Assignment 6 – Website with CSS Formatting & Layout by 11:59 p.m.

 

Dreamweaver Site Setup

To set up your website in Dreamweaver:

  1. Log into to GoDaddy with your username and password for the GoDaddy website
  2. Go to “Manage hosting”
  3. Locate your “IP Address”. It’s a series of 12 numbers like this: 123.234.345.456
  4. Keep this window open now and open Dreamweaver.
  5. Also, remember your hosting account username and password (this may be different than your GoDaddy log-in username and password).

In Dreamweaver:

  1. “Create New Site”
  2. Insert a “Site Name”. It doesn’t matter what you call it, just remember the name.
  3. Select a “Local Site Folder”. This is very important. This is where you will be saving all of your files LOCALLY on your computer, external hard drive, USB drive, or wherever else you are working from. You may navigate to the folder where you have already begun saving your website files for our assignments. Select that folder.
  4. Go to “Servers” in the left-side navigation. You want to add a new server.
  5. The “Server Name” is “GoDaddy”.
  6. “Connect using: FTP”
  7. Insert the IP Address that you located on the GoDaddy page. The “Port” may be 21.
  8. Insert your username and password next.
  9. For the “Root directory,” type “public_html/”
  10. Then, “test” your connection.
  11. The options “Use Passive FTP” and “Use FTP performance optimization” should be checked.
  12. Select “Save.”

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, Classes 2 & 3: Showcase Your Work With a Portfolio Website

Why You’ll Thank Yourself for Knowing HTML & CSS

(1) You can now showcase your own material and skills: If you’re headed for a media or communication career that involves new media and social media, it’s a great idea to have your own website. You can post and host all of your journalism and communication material–print stories, audio stories, photography, video stories, slideshows, interactive graphics, artwork, etc. This effort will help you “brand” yourself. There is a lot of competition out there.

(2) You can now work with a content management system: Most large companies have a CMS (content management system) that is like a standard “shell” where you insert the content. You have little control over the layout and design, rather, you merely insert the content into the shell. With advanced knowledge of HTML and CSS, you will understand the CMS and you may even be able to make or suggest improvements.

(3) You can now design websites for others: Once word gets out that you can design websites, don’t be surprised if your friends, family, acquaintances, organizations, companies, etc., start asking you to design their website. You can make some money out of this skill!

Inspiration: Examples of Journalist Portfolio Websites

Now let’s look at some suggestions on how to evaluate portfolio websites from another instructor of new media.

Next, let’s examine examples of portfolio websites from a few young media professionals’ portfolio websites. Think about what these fresh professionals are communicating through their website. In particular, concentrate on the:

  • Domain Name
  • Typography (text)
  • Color
  • Navigation
  • Layout
  • Links
  • Work Examples

Design Principles for Creating a Clean, Professional Website

Emphasis

Defined: Highlights the importance of the site’s content. Also relates to hierarchy.

  • When creating a draft of your site, list all of the information that needs to appear on the page.
  • Then, number the information by order of importance.
  • Design the visual hierarchy so the page reflects the determined importance.
  • Avoid emphasizing everything and avoid emphasizing nothing.

Good example. Needs work.

Balance

Defined: How the elements in a design are distributed and how they relate to the overall distribution of visual weight within the page. As elements are grouped together in a page, visual weight is created. You want to balance the visual weight so as to create stability. Two kinds exist:
1. Symmetrical Balance: Equal visual weight is given to elements so that two halves mirror one another. Example.
2. Asymmetrical Balance: Visual weight is distributed equally, but elements do not mirror one another. Example.

Websites can mix the two types as well. Example.

Alignment

Defined: The arrangement of elements in such a way that the natural lines (or borders) created by them match up as closely as possible.

Proximity

Defined: The relationships that items develop when they are close together. When items are close, ensure you want the relationship to exist. When items are far apart, relationships are less likely to exist.
Example of proximity creating relationships.
Example of a lack of proximity causing problems. Here, too.

Repetition

Defined: Throughout the website, there are certain elements that are common and unify the disparate parts together.

  • Each page should look like it belongs to the same website.
  • Color, shape, line, fonts, spacing, layout, typography, and imagery are some examples of potential repetitive elements.
  • A benefit of repetition is predictability. Users will better understand the design, navigation, and hierarchy.

Examples: Color repetition. Font repetition. Layout repetition. Imagery repetition.

Contrast

Defined: The visual differentiation of two or more elements. Contrast creates emphasis and focus toward the distinct elements, and can create a visual hierarchy as well.

  • Elements that have strong contrast appear distinct and unique. Elements that have weak contrast appear unified.
  • If you want elements to appear separate, use strong contrast. Go all the way. Don’t make them almost the same.
  • Ensure that some elements of your website have contrast, which subsequently creates focus. You don’t want everything to have the same visual priority.
  • Create contrast with color, size, position, and font.

Examples: Color contrast. Font contrast. Poor use of contrast. Another poor use of contrast.

Flow

Defined: The path the users’ eyes follow as they examine a website. Flow results from the execution of the design principles explained above.

  • Consider that our eyes typically examine webpages from left to right and top to bottom.
  • Ensure our eyes do not bounce around the page, darting from right to bottom and back up.

Example of smooth flow. Example of poor flow.

Typography on the Web

This refers to the use of fonts, font size, and font style on the web.

  1. Text is appropriate size.
  2. Hierarchy of information is clear.
  3. Lines of text are not too long to read.
  4. Background does not compete with text.
  5. There is enough contrast between background and text color.
  6. Uses sans serif fonts for long portions of text.
  7. No large blocks of text in bold, italic, all caps, or small caps.

Usability and Navigation

These concepts relate to how the user interacts with the website.

  1. Navigation is easy to find, understand, and use.
  2. Web pages give a clue as to where the user is and what page they are on.
  3. Links standout from the normal text color, yet coordinate with page colors.
  4. Link text gives a clue as as to where the user will go once they click on it.
  5. Consistent navigation across the website enhances usability.

Color Schemes

There are several types of color schemes to choose from when designing your website. Let’s familiarize ourselves with these terms and the color wheel.

  1. Monochromatic: Only one color is used, with varying values. Example 1. Example 2.
  2. Analogous: Several colors that sit next to one another on the color wheel are used. Example 1. Example 2.
  3. Complementary: Joins colors that sit across from one another on the color wheel. Example 1. Example 2.
  4. Triadic: Three colors that are equally spaced on the color wheel are used. Example 1. Example 2.
  5. Color Discord: Color discord can be visually disturbing, attract interest, relay ideas or themes, and create surprise. Example 1. Example 2.

You want to pick one color strategy and stick to it in order to create a visually appealing website.

Layout and Themes

There are many options when it comes to the overall layout and theme of your website. Here are some ideas:

  1. Ultra clean designs lean toward minimalism, but emphasize the crystal clearness of the design. Example 1.
  2. Minimalist designs are timeless and are easier to build and maintain. They offer professionalism as well. Example 1. Example 2.
  3. Type-focused designs use the text as a dominant element and use text in an elegant way. Example 1. Example 2.
  4. Visual-oriented designs use images, graphics, or multimedia in an elegant way. Example 1. Example 2. Other examples of visual-oriented websites.

Note: Definitions and listed material are adapted from The Web Designer’s Idea Book, Vol. 2 as well as The Non-Designer’s Web Book, 3rd ed..

 

COJO 4230: Advanced New Media

Students of journalism need to diversify their skills. You’ve already taken COJO 3530 Online Journalism, which built your skills in photography, audio reporting, photo/audio slideshows, and beginning web design and reporting. This class expands upon those skills by giving you a platform through which to share your work. You’ll go beyond maintaining a blog and you’ll create and design your own portfolio website to house your professional work. You’ll also add Flash projects to your repertoire of talents. In sum, get psyched, get inspired! This is fun stuff! The class is focused on two units:

  1. Flash Journalism: Examples provided by Mindy McAdams | New York Times examples | Student Example 1 | Student 2 Example | Student Example 3
  2. Portfolio Website: Student Example 1 | Student Example 2 | Student Example 3 | Student Example 4

Course Blog

Students from last fall’s COJO 3530 Online Journalism class will recognize this blog. We used this blog as the course website and only used e-Companion for grade management. The same will be true this semester. I’ll post all of our course materials and assignments here, under the COJO 4230 tab in the left-side navigation column. So, check back frequently. An addition to this course is the use of Twitter…

Twitter

Sign up for Twitter. I know it’s another account you have to create, manage, and remember your dang password for. But, this is worth it. You can begin to build a network through Twitter. First, sign-up for an account. Pick a professional account name, not something like k-train82. Then, read “Brand-Tweeting-New: Tips for Twitter Newbies” by Kelli Matthews. Find people to follow through looking at these lists. I highly recommend following InternAlert for intern and job opportunities. You can follow me as well. I’ll be tweeting helpful resources throughout the semester.

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.

Getting Started on Portfolio Websites

Why You’ll Thank Yourself for Knowing HTML & CSS

(1) You can now showcase your own material and skills: If you’re headed for a media or communication career that involves new media and social media, it’s a great idea to have your own website. You can post and host all of your journalism and communication material–print stories, audio stories, photography, video stories, slideshows, interactive graphics, artwork, etc. This effort will help you “brand” yourself. There is a lot of competition out there.

(2) You can now work with a content management system: Most large companies have a CMS (content management system) that is like a standard “shell” where you insert the content. You have little control over the layout and design, rather, you merely insert the content into the shell. With advanced knowledge of HTML and CSS, you will understand the CMS and you may even be able to make or suggest improvements.

(3) You can now design websites for others: Once word gets out that you can design websites, don’t be surprised if your friends, family, acquaintances, organizations, companies, etc., start asking you to design their website. You may make some money out of this.

Inspiration: Examples of Journalist Portfolio Websites

Before we begin our adventure, I want us to take a look at some of the best young journalist portfolio websites. Think about what these fresh journalists are communicating through their website. In particular, concentrate on the:

  • Domain Name
  • Typography (text)
  • Color
  • Navigation
  • Layout
  • Links
  • Work Examples

Portfolio Examples:

Now that we’ve seen examples, let’s examine them in a more academic manner.

The Style: Design Theory

There are whole courses that address design theory, but for this portfolio website, we will only touch on the main principles of design theory.

(1) Unity: Your whole portfolio feels like it belongs together. Ways to achieve unity include: Repetition, proximity, continuity, and the rule of thirds.

(2) Emphasis and Focal Point: Your eye is attracted to a dominant image on the web page. Ways to achieve emphasis include: Contrast, isolation, and placement. Sometimes, designs are also successful when there is an absence of a focal point and the “whole” is emphasized over the “parts”.

(3) Scale and Proportion: Your web page can attract attention and create interest by playing with scale and proportion of elements.

(4) Balance: Your web page can use asymmetry or symmetry of color, texture/pattern, and placement of elements.

(5) Value: Your webpage can use variations in light and dark to create a pattern, a focal point, and the illusion of space.

(6) Color: Your webpage can use color to add emphasis, achieve balance, invoke emotion, and create symbolism. You can choose a monochromatic color scheme (i.e., several shades of the same one color), an analogous color scheme (i.e., colors that sit next to each other on the color wheel), a complementary color scheme (i.e., colors across each other on the color wheel or equally spaced on the color wheel), or an unexpected discordance color scheme (i.e., startling colors that have no basic affinity for each other). When you’re picking your color scheme, check out the back flap of your HTML, XHTML, & CSS book by E. Castro.

(7) Typography: In general, use sans serif fonts (e.g., Verdana, Geneva, Arial) for paragraphs of text. You can use serif fonts (e.g., Times New Roman, Cambria, Georgia) for short bursts of text such as titles and headlines. Keep the font size for paragraphs between 12 and 16 (but font size will also vary according to your font). Never set large amounts of text in bold, italic, underline, caps, small caps, or script. Avoid long lines of text because it’s hard to read and we skim web pages. The font should appear clearly on the background, but not too contrasting (e.g., dark gray text on a cream background). Here’s one short guide to typography on the web.

The Technical Stuff:

You should have read the discussion in the book about HTML, XML, XHTML, and CSS. It’s a somewhat complicated controversy. But, rest assured. Because we’ll be designing a small personal website, we’ll stick with HTML and CSS. If you’re serious about web design, then you can take the time and care needed for XHTML.

For now, let’s look at some source code to familiarize ourselves with what HTML looks like. You can right-click on any web page and select “view page source” to see the HTML code. Go ahead and open my website and view the HTML.

There are elements, attributes, and values (described in Ch. 1 of the Castro book). It’s also important to know the difference between block vs. inline elements, parents vs. child elements, and absolute and relative URLs (Uniform Resource Locator, aka “links). Let’s identify some on my website.

Also, notice how the file names are all lowercase. You definitely want to adhere to that rule; it’s much easier to remember.

The Structure: Website Organization and Page Layout

Website Organization: Now that you’re more familiar with portfolio websites and design, think about what kind of portfolio website that you want to create. What content do you want to include on the website? For ideas, consider the portfolio websites that we’ve looked at. There’s also some required information that I’d like you to include, such as your background information, contact information, resume, and examples of your professional work. You are free to design the organization of this information as you wish.

Page Layout: Consider how content on your page will be organized. This is a difficult creative process. You will likely want to seek inspiration from other web designers for layout ideas. Of course, refer to the portfolio examples we examined above. Some other examples of page layout are found at:

Pay attention to the splash page (aka: index page, home page). This is the front door to your work. You want think page to be creative and inviting. You want the audience to explore this website.

Notice that a lot of splash pages are different format than the other pages in the site. They have the same “look and feel”, but they are formatted differently. This is because the splash page does not have a lot of content besides a focal point image, your name, and links to the other pages in your website.

If you’re not sure what style direction to go in, I would suggest you develop a minimalist, clean design. Part of the reason is that you want to show the audience your professional work. You want the experience to be on the work, not necessarily on the web design.

The Logistics: Domain Name Registration

You’ll be designing a website using HTML (hypertext markup language) and CSS (cascading style sheets) in Dreamweaver. Then, you’ll upload your files to a website host, who will store and provide the files for your website when a person requests it (i.e., when they visit your domain name).

Your domain name must be unique and you’re not allowed to use one that’s already been bought. You can visit Go Daddy to check and register your domain name.

Don’t be disappointed if your full name is not available. Domain names that are simple are the easiest to remember and share with people. For example, SaraWhittle.com is not available. However, SWhittle.com and SDWhittle.com are available.

You’ll see there are other options besides “.com”, such as “.org” and “.biz”. But, the standard “.com” is the easiest to remember and share.

Please discuss your domain name with me if you have any questions. Once you know the domain name you want, you should purchase it now so it doesn’t disappear. They are about $12/year on Go Daddy. The company you buy your domain name from does not need to be the same company that you use for the hosting service. We’ll discuss hosting later, when we’re ready to upload files to our domain name.

Web Reporting Project

I’m very proud of my students first web reporting project. They were required to interview a UW professor, photograph them, and write a online story about them. Then, then had to use an html template and insert their story, photos, and links.

Please take a look at their stories. We have some outstanding professors at UW who are working on fascinating research and who have valuable teaching perspectives.

Sample Post – My First Website

Note: Below is a sample post for you to model your blog post after.

So I’m beginning to experiment with html (hypertext markup language…I know, sounds fancy, huh) in order to broaden my horizons as a multimedia journalist. I hand-coded this website in a notepad file (yep, no Dreamweaver yet, I’m learning from scratch!), but I had to upload it in a Word file because WordPress won’t allow me to upload “html” files. Boo WordPress for that limitation.

Nevertheless, here is my first attempt at a website. I’ve got an index page and an about page. The index page is pretty basic and serves as a homepage. Perhaps in the future, I’ll buy my own domain name and fancy it up. The about page has a little more information about what I’ve done in multimedia journalism so far. Check it out!

© 2017 Website Design

Theme by Anders NorenUp ↑