Apiitfreeware websites is about all free sources such as software, video, wallpaper, games in different categories We use different technologies for.

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Cascading Style Sheets
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
New Semantic Elements (Part 2)
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Session 4: CSS Positioning Fall 2006 LIS Web Team.
SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
Cascading Style Sheets Based on Castro, HTML for the WWW, 6 th edition Ron Gerton, Fall 2007.
Diliev.com & pLOVEdiv.com  DIliev.com.
Unit 20 - Client Side Customisation of Web Pages
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
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.
CREATE A WEBPAGE WEB DESIGN. EXAMPLE LAYOUT 2 WEB COMPONENTS Header Banner and logo Footer Copyright information or Address Horizontal Navigation For.
DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Welcome to Our Website Comments and Suggestions Welcomed! Presented by: Vicky Green.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.
Section 2.1 Compare the Internet and the Web Identify Web browser components Compare Web sites and Web pages Describe types of Web sites Section 2.2 Identify.
CIT 256 Organizing Large Websites: Divs, DW Templates Dr. Beryl Hoffman.
Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
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.
HTML, Third Edition--Illustrated Brief 1 HTML, Third Edition Illustrated Brief Unit D Adding Graphics and Multimedia.
The New Elements © Main Menu Structure Media Canvas Form Click on one of the categories below to view information about the new HTML5 elements in.
 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.
INTRODUCTION TO HTML5 Semantic Layout in HTML5.  The new semantic layout in HTML5 refers to a new class of elements that is designed to help you understand.
Getting Started with CAA’s Alumni Groups Website System.
Web software. Two types of web software Browser software – used to search for and view websites. Web development software – used to create webpages/websites.
>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.
Seattle Drupal Clinic Introduction to Drupal Part 1: Web Content Management, Advantages/Disadvantages of Drupal, Drupal terminology.
Abigail morris.  Today I'm going to be explaining why the Internet relies on a number of protocols in order to function properly.  A protocol is simply.
IT Introduction to Website Development Welcome!
Louisa Lambregts, Louisa Lambregts
Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.

 Network  A _____ of computers that can _________ w/ each other  Examples of hardware  ______________ & communication lines  Internet  Hardware.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
3/30/15.  Who is Tim Berners-Lee? 1. Assessing needs 2. Determining content structure 3. Determining site structure 4. Determining navigation structure.
Interactive history. To provide a visually attractive and interactive timeline of the major scientific discoveries throughout history.
Web Page Design 1 Information Technology ClassAct SRS enabled. Web Page Design This presentation will explore: creating web pages structure, formatting.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
Understanding Web-Based Digital Media Production Methods, Software, and Hardware Objective
Week 5  SEO  CSS Please Visit: to download all the PowerPoint Slides for.
COMP 143 Web Development with Adobe Dreamweaver CC.
BY Supergeeks.biz. As more and more people rely on the Internet to buy goods and services, to search for businesses, to locate businesses, to compare.
B USINESS W EB P AGE D ESIGN Review for State Competency Exam
Web Software Year 11.
Section 6.1 Section 6.2 Write Web text Use a mission statement
Objective % Select and utilize tools to design and develop websites.
Web Page Elements Writing For the Web
CSS Layouts: Positioning and Navbars
Project Objectives Lay out Web pages Create layers
15 Basic Web Designing Tips
Basic Knowledge of Web creation
>> Header & Footer in CSS
Cascading Style Sheets (Layout)
Objective % Select and utilize tools to design and develop websites.
The Difference Between STATIC & DYNAMIC Websites
Welcome To Web Tutor Basics of Designing a website
How to customize your Microsoft SharePoint Online website
How to customize your Microsoft SharePoint Online website
Fixed Positioning.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
How to customize your Microsoft SharePoint Online website
New Semantic Elements (Part 2)
Common Page Design Elements
Presentation transcript:

Apiitfreeware websites is about all free sources such as software, video, wallpaper, games in different categories We use different technologies for designing and programming. The all of the graphical sections, design with Adobe Photoshop and illustrator, so after that we use these image files for programming and styling with HTML and CSS and JavaScript. also we used flash to develop advertisements and some buttons. The other feature is CEO optimization in all pages, for better searching and more attract visitors. Introduction

Development Tools As we mentioned before, we use different tools such as Adobe Photoshop Adobe Illustrator Adobe Flash Aptana Studio

Body Of Site The important things in our design is standard body. Our design has : Header  Logo  Top Navigation Bar  Middle Navigation Bar  Search

Body Of Site Body  Posts  Right Navigation Bar  Advertisement (Flash Lides)

Footer  Our Copyright Terms In footer we provide owner and Copyright terms and other detail about the site.

User Interaction And Layout Adjustment The most efficient way in web design for user interaction is using CSS. Because of low resource and get low internet bandwidth and beside this, it compatible in most of the. For instance : we align center the layout with below code :  #wrapper{  margin: 0px auto ;  width : 960px ;  }

User Interaction And Layout Adjustment In menus we use mouse hover event for changing color, For Example : #topnav li a { text-decoration:none; padding-left:70px; color:white; font-weight:bold ; font-family:arial; float:left ; } #topnav li a:hover{ color:yellow; text-decoration:underline; }

Design Section - Logo We created Logo to show that our site is something unique. Some how it is a trade mark. Our logo has 2 benefits. First one is, every standard should have its own logo. Second, for bookmarks. When you bookmarks our page you will see our logo beside our site title.

Design Section – Navigation Bar We choose 2 different color to separate our primary navigation bar from secondary navigation bar. For main section we choose green color cause green is color of peace and serenity so user will feel much better by seeing this color. On the other hand we choose Orange color for our secondary navigation bar. We use orange to attract user attention.

Design Section – Navigation Bar It denotes energy, warmth, and the sun. But orange has a bit less intensity or aggression than red, calmed by the cheerfulness of yellow.

Design Section – Flash Button We have used different colors according to our button condition. In normal situation we have used simple red but when user try to hit the button, the button color will be changed to orange.

Search boxes Search utility boxes are derived from “PicoSearch” engine. Real results among all contexts of website. Apparently implemented in two parts of page: o Express search box : providing direct search located in orange nav. Bar o External search box : opening search box in a separate page

Construction page Non-content links are ended to Construction Page  Involves an imaginary Reverse Time frame and a Contact field connecting visitor to administrator Written by “JavaScript” codes and enables sharing claim Processed through MS. Outlook Back bottom the only splicer Linking back to Home page

Improvement Proposals  Right navigation bar: Tree based Content part in Categories Privilege: More organized & user friendly Allocating designed pages for all links Privilege: More beneficial website  Heavy load Home page in slow speed connections  Rating & Commenting & Sharing tools