Go to right click on the image and "save image as." Save it as "text.gif" in the "img" folder.
|
|
- Magdalen Lawson
- 7 years ago
- Views:
Transcription
1 HTML CSS TUTORIAL FOR DTC/ENGL 355 <!- - First, follow the instructions on the AML Server handout and create a folder. In that folder, create a folder called "sample". In "sample" create a folder called "img." Go to right click on the image and "save image as." Save it as "phone.jpg" in the "img" folder you just created. Go to right click on the image and "save image as." Save it as "text.gif" in the "img" folder. Go to right click on the image and "save image as." Save it as "hand.gif" in the "img" folder. Now, open TextWrangler and go under File/New to create a new document. Immediately save it as "index.html" within your folder (NOT in the img folder, but in the root/main "sample" folder. Now, begin to type the following code. Anything you see in these brackets like this are just comments for you. You do NOT need to type them. - - > <!DOCTYPE html> <html lang="en"> <head> </head> <title>pancakes and Bacon</title> <meta charset="utf- 8"> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <link rel="icon" type="image/gif" href="img/hand.gif" /> <!- - Notice how in the head we have the title, which appears at the top of the browser. There is also the character set. Next, we have the link to the style sheet. Notice the href in that tag. It is important, and telling the browser WHERE to find the stylesheet. If the style sheet were saved in a folder called "tree", then that would say href="tree/style.css" Next up is something you may only see once your page is saved to the server, but it is an icon that will appear next to your title in the browser window. Notice how when you are at our class website you see a WSU logo next to teh title? That's because I saved it as an icon. - - > <body> <div id="wrapper"> <h1><span class="first">w</span>ord</h1> <!- - This here is an unordered list, ie a bulleted list. An ordered list would just be an <ol> for "ordered" list. the LI tags are "list items." - - > <ul> <li><a href=" 1</a></li>
2 <li><a href="bacon.html">link 2</a></li> <li>link 3</li> </ul> <!- - This is another unordered list, but it is styled. You won't notice any difference until you create the stylesheet, but the difference will be cool. You can do a lot with these. Google "listamatic" for some examples. - - > <ul id="navlist"> <li><a href="#">item one</a></li> <li><a href="#">item two</a></li> <li><a href="#">item three</a></li> </ul> <p> <!- - Have you saved recently? Save it! "command + s". - - > <p> <img src="img/phone.jpg" alt="phone" width="300" height="225"> <h2>paragraph 2 Means Business</h2> <p class="breathe">and here is paragraph 2. Notice how the font and spacing looks different. Why is this? Take a look at the class "breathe" on the style sheet and see what it's doing. <img src="img/text.gif" alt="sample text" width="447" height="120"> </div> <p>after you create and save the stylesheet, you will notice how the words of paragraph 2 go up against the picture of the phone, but the words in paragraph 3 do not go up against the above image. Why is this? Notice how the phone image is in a p tag, and the text image isn't. NOW, notice in the stylesheet how an image that lives in a p tage that lives in the div 'wrapper' is told how to act. See? </body> </html> <!- - Save again, and open this page at Now we're going to style it with the style sheet. It'll look a lot different soon. - - >
3 /* This is how comments are written in a style sheet. Notice the symbols alongside it are different than in HTML. Next up, open a NEW document in Text Wrangler and save it as "style.css" in the sample folder. Now, copy the following css, but as with the HTML, no need to copy my comments. They are just here to help you along. */ body { background- color: #ccdff0; /* The above is a way of telling an existing HTML tag how to act. Here, we are setting the body background color. You can tell any pre- existing HTML tag how to act. */ #wrapper { border- top: 7px dashed #888; border- bottom: 8px dashed #888; margin- top: 200px; margin: auto; padding: 40px; width: 600px; background- color: #eee; #wrapper h1 { font- family: Helvetica, Verdana, sans- serif; font- size: 54pt; font- weight: bold; color: orange; text- align: center; #wrapper p img { float: left; padding: 0 10px 10px 0; /* The first set above tells the #wrapper div how to act. Notice where the wrapper is in your HTML. The next two tell a specific tag WITHIN the wrapper div how to act. All <h1> tags that live in the wrapper will now have the above styles. But, an <h1> that doesn't live in the #wrapper div will not. Same with any "img" tag that lives in a "p" tag that lives in the #wrapper div. But, any other img will not. */.first { font- size: 80pt; color: #1395b1;.breathe { font- family: Helvetice, Verdana, sans- serif; font- size: 12pt;
4 line- height: 18pt; /* The two above instances are examples of a class. A class is indicated by the "." and can occur numerous times with the HTML. You could apply.breathe to any paragraph you wanted, for example. Notice in the HTML how ".first" is only used for a "span class" meaning it's only for part of a paragraph and not the whole paragraph.*/ #navlist li { display: inline; list- style- type: none; padding- right: 20px; /* The above is styling the <li> tags in your navlist. Now, save this file again (remember, as style.css in the "sample" folder) and go to your browser to see what has changed. */
5 Now the fun part! (maybe ) Try to make the following happen: 1) Try to figure out why the header Word is so far down from the top of the page. Make it closer to the top. 2) Change the header (currently, Word ) to one of your choosing. Consider getting rid of the span- class on the first letter. Your call. Mess with the color and size perhaps. 3) Change the background color of the body 4) Get rid of the dashed top and bottom border on the wrapper, and instead make a border that is solid and goes all the way around it. 5) Make the background of the wrapper a different color 6) Create a new class and apply it to paragraph 3. You can change font, font size, color, spacing, whatever you want. 7) Put in an image of your own choosing. a. TIP! Open the image in Photoshop. First, go to Image and then Image Size and change the dimensions to be a reasonable size for your site. Notice the phone is currently 300x225 pixels. Once you re happy with the size, go under File, Save for Web and save at the lowest size that still has a quality you are happy with. NOTE: if you re confused about the difference between.gif,.png. and.jpg, read: png- jpg- which- one- to- use/ 8) Create a h2 header in the HTML and style it in the CSS. 9) Copy the HTML and paste it into a new document. Save the new document in the sample folder and call it page2.html. Now, make a link from index.html to page2.html. It can be one of the links in the bulleted list but doesn t have to be. Note, the a href tag should read <a href= page2.html >. this is an INTERNAL link and since the file is save in the same folder, it doesn t need anything extra. 10) Make a third page and do the same thing as instructed in #9. 11) (not required, but if you re having fun, do this!) See what you can do to learn how to style a list in order to make a navigation bar that you like. Delete the second <ul> from the HTML, and get rid of the #navlist in the CSS. Now, go to and choose a list and try to make it work! 12) BY MONDAY at classtime you need to post to Blog Post #3 the address to your tweaked module.
HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk
HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS
More informationCST 150 Web Design I CSS Review - In-Class Lab
CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and
More informationWeb Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
More informationContents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
More informationHow To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
More informationICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
More informationInspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 2
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 2 CSS stands for Cascading Style Sheets, these allow you to specify the look and feel of your website. It also helps with consistency.
More informationAdvanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication
Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Using JQuery to Make a Photo Slideshow This exercise was modified from the slideshow
More informationDreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
More informationEssential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
More informationWe automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
More informationBasic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
More information{color:blue; font-size: 12px;}
CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:
More informationUsing Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
More informationCREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
More informationWeb Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission
Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified
More informationJJY s Joomla 1.5 Template Design Tutorial:
JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding
More informationBasics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s
More informationMicrosoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
More informationWeb Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
More informationDesigning HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
More informationFurther web design: Cascading Style Sheets Practical workbook
Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these
More informationCIS 467/602-01: Data Visualization
CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful
More informationWeb layout guidelines for daughter sites of Scotland s Environment
Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment
More informationHow To Use Dreamweaver With Your Computer Or Your Computer (Or Your Computer) Or Your Phone Or Tablet (Or A Computer)
ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn
More informationCoding HTML Email: Tips, Tricks and Best Practices
Before you begin reading PRINT the report out on paper. I assure you that you ll receive much more benefit from studying over the information, rather than simply browsing through it on your computer screen.
More informationNURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK
Nursing 3225 Web Dev Manual Page 1 NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK Nursing 3225 Web Dev Manual Page 2 N3225: Nursing Inquiry Student Created Group Website Addresses (1 of 2)
More informationHTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL
HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head
More informationSlicing and Coding the Navigation Background in CSS
CSS Template Tutorial Please take your time to visit http://www.freecss.info Table of Contents Step 1 Setting up. page 3 Step 2 Coding the basics.page 5 Step 3 Coding and slicing the header. page 9 Step
More informationKOMPOZER Web Design Software
KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web
More informationDreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
More informationIntroduction to Web Development
Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:
More informationThis document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.
1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to
More informationEmail Campaign Guidelines and Best Practices
epromo Guidelines HTML Maximum width 700px (length = N/A) Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than layout Use more TEXT instead
More informationGetting Started with KompoZer
Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files
More informationResponsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature
Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you
More informationStyle & Layout in the web: CSS and Bootstrap
Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts
More informationModule 6 Web Page Concept and Design: Getting a Web Page Up and Running
Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create
More informationIntro to Web Design. ACM Webmonkeys @ UIUC
Intro to Web Design ACM Webmonkeys @ UIUC How do websites work? Note that a similar procedure is used to load images, etc. What is HTML? An HTML file is just a plain text file. You can write all your HTML
More informationGarfield Public Schools Fine & Practical Arts Curriculum Web Design
Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and
More informationRecommendations for Websites Optimization for Mobile Devices Using Mobile Centric CSS. February 2014 Update
Recommendations for Websites Optimization for Mobile Devices Using Mobile Centric CSS February 2014 Update Is Mobile SEO Required Now? In a Google Smartphone User study, mobile searches will make up 25%
More informationWeb Development I & II*
Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology
More informationAppendix H: Cascading Style Sheets (CSS)
Appendix H: Cascading Style Sheets (CSS) Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites: Separation of content and design. CSS gives developers the best of
More informationDreamweaver CS5. Module 1: Website Development
Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA
More informationCS134 Web Site Design & Development. Quiz1
CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? [Answer: d] a. www.whitehouse.gov
More informationChapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation
More informationWeb Developer Jr - Newbie Course
Web Developer Jr - Newbie Course Session Course Outline Remarks 1 Introduction to web concepts & view samples of good websites. Understand the characteristics of good website Understand the importance
More informationCSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28
CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline
More informationCREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5
CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - . Any navigational bar can be
More informationSimply download Beepip from http://beepip.com and run the file when it arrives at your computer.
Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,
More informationIntroduction to Web Technologies
Introduction to Web Technologies Tara Murphy 17th February, 2011 The Internet CGI Web services HTML and CSS 2 The Internet is a network of networks ˆ The Internet is the descendant of ARPANET (Advanced
More informationFireworks CS4 Tutorial Part 1: Intro
Fireworks CS4 Tutorial Part 1: Intro This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website. Fireworks CS4 is the
More informationMastering the JangoMail EditLive HTML Editor
JangoMail Tutorial Mastering the JangoMail EditLive HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop
More informationWeb Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
More informationLast week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:
CSS Tutorial Part 2: Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: animals A paragraph about animals goes here
More informationIntroduction to Adobe Dreamweaver CC
Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling
More informationOfficial JSN Epic PRO v2.0 Configuration Manual version for Joomla! 1.5.x
Official JSN Epic PRO v2.0 Configuration Manual version for Joomla! 1.5.x This documentation included in the JSN Epic PRO Pack is release under Commercial Proprietary license and not intended for public
More informationLevel 1 - Clients and Markup
Level 1 - Clients and Markup The design for the email we ll build In this level The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources An HTML
More informationWRITE BETTER HTML BY WRITING BETTER CSS
WRITE BETTER HTML BY WRITING BETTER CSS THE ROYAL WE Chris Coyier @chriscoyier BETTER? 1 Less of it 2 More Semantic 3 More Accessible 4 Futureproof // Speed // Maintainability // SEO // Happy People 123
More informationCOMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING
COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING INFORMATION TECHNOLOGY GUIDELINE Name Of Guideline: Domain: Application Date Issued: 03/18/2014 Date Revised: 02/17/2016
More informationDevelopment Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
More informationHTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout
CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading
More informationGuide to B2B email marketing. Part Three: Building great emails
Guide to B2B email marketing Part Three: Building great emails Executive Summary of Recommendations Take a look at our guidelines for building great emails in this quick, at-a-glance format Technical Email
More informationHow to build a blog with Adobe Muse and Business Catalyst Workbook.
BL8842 - Adding Adobe Muse to Your Business Catalyst Toolkit How to build a blog with Adobe Muse and Business Catalyst Workbook. V1.0 Authored by Chris Kellett musegrid.com/simple Flame Site uses the Mavens
More informationCSS 101. CSS CODE The code in a style sheet is made up of rules of the following types
CSS 101 WHY CSS? A consistent system was needed to apply stylistic values to HTML elements. What CSS does is provide a way to attach styling like color:red to HTML elements like . It does this by defining
More informationHTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
More informationHow To Design A Website For The Decs
ONLINE COMMUNICATION SERVICES FACTSHEET - DESIGN Created by: Mark Selan Version 1.1 Date Last Modified: April 2008 DESIGN GUIDELINES FOR GENER8 WEBSITES The purpose of this document is to provide Online
More informationADOBE DREAMWEAVER CS3 TUTORIAL
ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO
More informationSample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.
Working with Tables in Microsoft Word The purpose of this document is to lead you through the steps of creating, editing and deleting tables and parts of tables. This document follows a tutorial format
More informationMissing cat website HTML&CSS. The Mission:
Missing cat website HTML&CSS 1 All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club.
More informationScoop Hosted Websites. USER MANUAL PART 4: Advanced Features. Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com.
Scoop Hosted Websites USER MANUAL PART 4: Advanced Features Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com.au Index Advanced Features... 3 1 Integrating Third Party Content...
More informationWordPress and HTML Basics
WordPress and HTML Basics Intro: Jennifer Stuart Graphic Design background - switched to Web Design (1998) Started blogging in 2001 Became Interested in Javascript, PHP, etc. 2004 - Moved to WordPress
More informationPlease select one of the topics below.
Thanks for choosing WYSIWYG Web Builder! In this section we will give a short introduction to Web Builder so you can start building your web site in (almost) no time. Please select one of the topics below.
More informationCreate a Web Page with Dreamweaver
Create a Web Page with Dreamweaver Dreamweaver is an HTML editing program that allows the beginner and the advanced coder to create Web pages. 1. Launch Dreamweaver. Several windows appear that will assist
More informationGUIDE TO CODE KILLER RESPONSIVE EMAILS
GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention
More informationBuilding a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver
More informationCaldes CM12: Content Management Software Introduction v1.9
Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge
More informationCreating Web Pages with Dreamweaver CS 6 and CSS
Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding
More informationWeb Authoring CSS. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
More informationHow to make a custom Joomla template!
How to make a custom Joomla template! Part 2 NOTE: This Tutorial has been donated by a Thomas Nielsen. This work is licensed under a Creative Commons Attributon NonCommercial ShareAlike 2.5 License. Lets
More informationUsing Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
More informationThe Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters
More informationUmbraco v4 Editors Manual
Umbraco v4 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...
More informationNUI Galway Web Training Presentation
NUI Galway Web Training Presentation Welcome Objective To provide training on how best to maintain and update University Web pages while also providing an introduction to systems & services provided by
More informationLaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview
Overview Dreamweaver gives you many options when it comes to setting the properties for your webpages. Within the "Page Properties" dialog box, you can set the appearance of your page, name your page and
More informationHow To Customize A Forum On Vanilla Forum On A Pcode (Forum) On A Windows 7.3.3 (For Forum) On An Html5 (Forums) On Pcode Or Windows 7 (Forforums) On Your Pc
1 Topics Covered Introduction Tool Box Choosing Your Theme Homepage Layout Homepage Layouts Customize HTML Basic HTML layout Understanding HTML Layout Breaking down and customizing the code The HTML head
More informationWEB DEVELOPMENT IA & IB (893 & 894)
DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.
More informationCreate Your own Company s Design Theme
Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to
More informationGetting Started with WebSite Tonight
Getting Started with WebSite Tonight WebSite Tonight Getting Started Guide Version 3.0 (12.2010) Copyright 2010. All rights reserved. Distribution of this work or derivative of this work is prohibited
More informationRecreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts
Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)
More informationWeb Style Guide. Columbia College
Web Style Guide Columbia College Technology Services 11/2014 Table of Contents 1. Layout 1.1 Required Elements... 4 1.2 Page guidelines... 5 1.21 Navigation... 5 1.22 Data tables... 5 1.3 Accessibility...
More informationWeb Authoring. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
More informationWeb Publishers Group. Tuesday 13 March 2012
Web Publishers Group Tuesday 13 March 2012 Responsive Web Design Mobilising the Internet Scott O Brien Technical Web Coordinator ANU Marketing Office 3 Responsive web design Designing a website in a manner
More informationLearning Web Design. Third Edition. A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics. Jennifer Niederst Robbins
Learning Web Design Third Edition A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics Jennifer Niederst Robbins O'REILLY Beijing- Cambridge Farnham Koln Paris Sebastopol -Taipei -Tokyo CONTENTS
More information7 th Grade Web Design Name: Project 1 Rubric Personal Web Page
7 th Grade Web Design Name: Project 1 Rubric Personal Web Page Date: Grade : 100 points total A+ 100-96 Challenge Assignment A 95-90 B 89-80 C 79-70 D 69-60 Goals You will be creating a personal web page
More informationEUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353
More informationJOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK
More informationCSS for Page Layout. Key Concepts
CSS for Page Layout Key Concepts CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
More informationUHR Training Services Student Manual
UHR Training Services Student Manual October 2012 1 Logging in to CareWorks Clicking the copyright symbol on the bottom left of the footer takes you to the sign-in screen and then to the control panel.
More informationJoomla! 2.5.x Training Manual
Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials
More information