Introduction

Three important technical materials you will need

You will need three important technical materials to begin designing for the web in this class: personal web space, file transfer program (ftp) and a text editor. Many of the programs mentioned below are already installed on NCSU computers. You may want to make sure you have these programs available on your personal computers.

  1. First, you will need what is called a web server to store files and create web pages that people can see on the Internet. North Carolina State University offers free personal web space up to 2GB for students and other affiliates. Please go to http://oit.ncsu.edu/afs/www-setup and follow the directions to set up your personal web space. Your url will be http://www4.ncsu.edu/~yourusername once your file space is officially set up by the Office of Information Technology.
  2. Second, you will need a program that allows you to transfer files from your computer to your personal web space that makes your files available for other people to see on the Internet. I suggest using ExpanDrive as your ftp program. Please read “How do I access my K drive?” for instructions on downloading and installing ExpanDrive for your Windows or Mac. Please make sure you have downloaded the correct version (Windows or Mac) of the ExpanDrive application.
  3. Third, you will need a plain text editor. Typically, designers create web sites with “What You See Is What You Get” (WYSIWYG) software. In this course, we will mainly use plain text editors, such as Notepad (Windows) or TextEdit (Macintosh).For Windows users, please follow instructions on page 29–30 in HTML and CSS: Design and Build Web Sites  to use Notepad as your plain text editor. For Mac users, please follow instructions on page 31–32 in  HTML and CSS: Design and Build Web Sites to use TextEdit as your HTML plain text editor.

Web Fundamentals

For the first week, you will be introduced to the fundamentals and building blocks of the technical aspects of web design: the structure of HTML and CSS. Please visit http://www.codecademy.com/tracks/web for the tutorials.

About You

For Friday, please complete the following as a Word document: Name, major, interests in rhetoric and design, career aspirations, and what you like to eat for breakfast. Feel free to add any images. On Friday, we will turn this into an HTML document.

Assignment #1: Building Your First Web Site

Overview: For the first assignment, you will build your first web site: a one-page personal profile. You may want to envision a primary audience for your personal profile.

You will learn how to:

  • use HTML (structure) and CSS (presentation) to make a document look and function in a particular way;
  • problem-solve as a web designer by tinkering, hacking, and thinking of failure as a positive, necessary, and transformative aspect of designing culture;
  • expand your knowledge of HTML by creating an original document and using additional HTML tags for linking and possibly creating lists;
  • understand the connection between rhetoric, design, culture, and technology and the three readings we have examined this week by using components of Balsamo’s framework of Reverse Hermeneutic Engineering.

Technical challenge: On Wednesday, you were introduced to two major technical components of web design: HTML and CSS. We examined the structure of <H1> and <p> tags and the overall structure of an HTML document, which included <html>, <head>, and <body>. For this assignment, you technical challenge is to:

  1. transform your personal profile document into an HTML document that exist on your personal web space at http://www4.ncsu.edu/~youruserid/eng317/profile;
  2. create two folders in your www folder: eng317 and profile (subfolder in eng317);
  3. use heading tags (<h1>, <h2>, <h3>, <h4, <h5>, <h6>), paragraph tags (<p>), the <a> tag for linking to at least one other web site, and possibly <li> tags to create lists.

Additionally, as an extra challenge, you must:

  1. change the color and font style of your text;
  2. create a solid color for your background;
  3. make your page fit a certain width rather than the content spanning the entire width of the page.

This part of the challenge will require you to problem-solve and use other sources and your peers to help you design your personal profile. One way to do problem-solve is look at other web sites and its code to determine what HTML and CSS was used to make a page look and function a particular way.

Rhetorical challenge: Your personal profile should be treated as a rhetorical document. This means digital design, rhetoric and culture intersect when you consider formal elements such as typography, color, and layout. As Ehses stated in “Representing Macbeth:”

Because all human communication is, in one way or another, infiltrated rhetorically, design for visual or verbal communication cannot be exempt from that fact. Although rhetoric has developed as a method that deals fundamentally with speaking and writing, rhetorical principles have been transferred into various other media, as well.

 Steps:

  1. Create your eng317 folder and profile subfolder in your /www folder on your NCSU drive.
  2. Open Notepad and create a new document named index.html. Save the file to your profile folder.
  3. Paste the contents of your personal profile in the index.html file.
  4. Follow the following tutorials located at http://www.codecademy.com/tracks/web to complete the technical challenge listed above: Lessons 1, 2, 5 (only steps 11-15), and 7. You may want to use http://www.w3schools.com/css/default.asp and http://www.w3schools.com/html/default.asp for reference and further assistance. Additionally, you may want to review the first chapter of HTML and CSS <http://www.htmlandcssbook.com/sample-chapter/>.