By Group 3. Let us introduce ourselves! Hi my name is Sayra Foust! Hello my name is Tara Trefren! Hi I’m Eva Williams! We’re Group 3 and Rate it or Hate.

Slides:

Advertisements

Similar presentations

HTML Basics Customizing your site using the basics of HTML.

Advertisements

M2 – Explain the tools and techniques used in the creation of an interactive website. By Arturas Vitkovskij.

Cascading Style Sheets

Making Things Look Nice: Visual Appearance and CSS CMPT 281.

MMDE5011 – INTERACTIVE MEDIA PRACTICE 1 WEEK 1: INTRODUCTION TO HTML5

CSS cont. October 5, Unit 4. Padding We can add borders around the elements of our pages To increase the space between the content and the border, use.

End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science

Need to define two things: › The destination › Something to click on to get there  Tag is click here  Can be text, special character or image (next.

กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.

Unit 20 - Client Side Customisation of Web Pages

Chapter 8 Creating Style Sheets.

Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.

16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.

Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.

HCI 201 Week 6 Client Side Image Maps Introduction to CSS.

Good & Bad Websites. From WEB 1. Submit one bad or ugly web site or web interface. This is ugly website because there are.

HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation

Review of last session The Weebly Dashboard The Weebly Dashboard Controls your account and your sites Controls your account and your sites From here you.

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –

COMPUTATIONAL THINKING FOR INFORMATION TECHNOLOGY HOMEHOME | OBJECTIVES | TASK 1 | TASK 2 | TASK 3 | TASK 4 | TASK 5 | TASK 6 | TASK 7 | HELPOBJECTIVESTASK.

HTML & CSS A brief introduction. OUTLINE 1.What is HTML? 2.What is CSS? 3.How are they used together? 4.Troubleshooting/Common problems 5.More resources.

W EBSITE P ROPOSAL 6 Page Website. W EBSITE R EQUIREMENTS A 6 page tourism website to promote visiting Malaysia: To promote and showcase the country of.

The Characteristics of CSS

Website Research By Sophie Hiscock. Fan Marvel Website You know this website is Marvel because of the characters from the comics are in the body, which.

 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.

Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.

 We evaluated our current school website.  Looked at other school websites  We decided ◦ Wasn’t enough color ◦ Wanted video and music ◦ More pictures.

 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.

Design Principles The good and the bad Alyssa Mendiola Summer 2009.

 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.

Planning a website by Katie Hardaker There are lots of things to think about when deciding about creating a website…

Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.

Definition CSS “Short for Cascading Style Sheets, a new feature being added to HTML that gives both Web site developers and users more control over how.

 For the research and planning stage I used a range of different media technologies. The research started looking for locations we could use in our trailer,

1 Web Application Programming Presented by: Mehwish Shafiq.

WRA HTML & CSS – BUILDING WEBPAGES. TODAY’S AGENDA Review: external stylesheets Review: transforming a list Intro: the object Intro: the.

Project 6: Kayaking HTML5 Site

HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.

HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.

Quick Questions 1. What does HTML stand for? 2. What are the three main languages of the Web? 3. What is the purpose of the tags? 4. Why do we indent different.

Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.

CIS Group 1 Final The Grim House Alex Bates, Ryan Kaes, William Lipe, Robert Hudson.

WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.

External Style Sheets Exploring Computer Science – Lesson 3-6.

Cascading Style Sheets (CSS) EXPLORING COMPUTER SCIENCE – LESSON 3-5.

IN THIS LESSON, WE WILL BECOME FAMILIAR WITH HTML AND BEGIN CREATING A WEB PAGE IN YOUR COMPUTER HTML – the foundation.

Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring

Coding with HTML {. THE BASICS { What is HTML and how can you use it to make websites?

Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.

Stylizing a Navigational Menu Web Design Section 6-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Introduction to Programming the WWW I CMSC Winter 2003 Lecture 5.

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, we’ll cover:  Brief CSS review  Creating sections with the tag  Creating inline.

COMP 143 Web Development with Adobe Dreamweaver CC.

This is a test Webpage Wow, I’m writing my first webpage.

By: Your Name ELEMENTS OF WEB DESIGN. VISUAL APPEAL Optimization of Graphics, for people to stay on your website, your pictures have to load out as soon.

Dylan King DK V8 under 20’s championship That’s how we roll.

Cascading Style Sheets (CSS)

Your GIMP Portfolio Navigation Menu.

CS 0134 (term 2181) Jarrett Billingsley

CSS HTML and website development.

Do you want to make info graphics for the US Election?

HTML and Website Development

Links. Links Links Need to define two things: The destination Something to click on to get there Tag is click here Can be text, special.

Google Fonts Selective Formatting

Laying out a website using CSS and HTML

Fixed Positioning.

Lesson 4 – Introduction to CSS

Training & Development

Session 3: Basic CSS Spring 2009

Presentation transcript:

By Group 3

Let us introduce ourselves! Hi my name is Sayra Foust! Hello my name is Tara Trefren! Hi I’m Eva Williams! We’re Group 3 and Rate it or Hate it is our site, let us show you all the steps we took to create it.

It starts with an idea... Concept statement Client: Movie house that shows movies Problem: Would like to give showcase top three movies and hear customers feedback Solution: Create a website that features the top three movies, is easy to navigate and allows customers to provide reviews of movies Basic design

Drawing inspiration We brainstormed ideas and things we wanted to incorporate into our site. We decided to stick to a comedy theme. We decided what movies we wanted to do. We agreed on movies posters as the images for our movies and that we’d write our own reviews.

Style Guide Fonts Filson Pro Black Calibri Colors We needed to pick out colors and fonts. We decided to use Adobe Kuler to pick colors out. We went with complementary colors that fit our theme.

Mapping it out Wireframes Siteflow

Coding begins The code The results I started coding the elements that every html page has and then continued by adding the section, paragraphs, images, and videos element tags according to the wireframe where I thought they needed to be. It was hard since there is no content you can’t really know if everything is going to show up right.

Adding the infoResults Even after adding the info, images and video code it still didn’t look like much of a webpage.

Tables and FormsResults The table was really plain and the form inputs didn’t really sit right. I started making the css style sheet and focused on getting the table colors right and the borders. I then added the styles comments for the rest of the main elements like the section, body, and nav.

Style sheet Setting it up Results I took over after and started putting in the colors, fonts styles, and spacing everything out as best as I could. The margins were extremely important during the css styling, making sure the white space was well managed wasn’t easy.

Moving along More CSS and a few bumps along the way Getting things to line up and the inherited attributes not to influence other things became kind of an issue. I ended up resolving this by giving a lot of the elements id names.

Finishing touches Image map, header images and contact details Throwing it on the server We all worked together to decorate our site by making flat images to use for the header, image map, and Eva drew the picture on the main page.

Using the site Hope you enjoyed exploring our website with us!

Webliography "Horrible Bosses." IMDb. IMDb.com, 8 July Web. 06 June "Horrible Bosses Official Trailer #1 - (2011) HD." YouTube. YouTube, 11 May Web. 12 June Rotten Tomatoes. Rottentomatoes, 13 May Web. 12 June Let's Be Cops. Digital image. Google. Google, Aug Web. 07 June "Let's Be Cops." IMDb. IMDb.com, 13 May 14. Web. 7 June "Let's Be Cops | Official Movie Site." Let's Be Cops | Official Movie Site. 20th Century fox film corperation, Web. 12 June “The Grand Budapest Hotel.”IMDb.IMDb.com, 28 March Web. 7 June “THE GRAND BUDAPEST HOTEL - Official International Trailer HD.”Youtube.Youtube, Oct 17, Web. 12 June 2015.