Easy Steps to Convert Alignment of Joomla! Templates
|
|
- Mary Payne
- 6 years ago
- Views:
Transcription
1 2007 Easy Steps to Convert Alignment of Joomla! Templates From Left-to-Right to Right-to-Left For using Joomla or any other CMS themes with Middle Eastern languages such as Hebrew, Arabic, the template must be designed for right-to-left writing. This short tutorial enables you to convert originally Left-to-Right templates to Right-to-Left ones. December 27, /27/2007
2 GENERAL EXPLANATION OF WRITING DIRECTION For using Joomla or any other CMS themes with Middle Eastern languages such as Hebrew and Arabic, the template must be designed for right-to-left writing. RTL interface require a different layout then left-to-right user interfaces: the direction of writing and the placing of the different items of the template (menus, modules, photos). SETP2 Converting template is not only about aligning the text to the right, but also changing the position of the text inside the template and the direction of the writing, the spacing and the placing of images and icons. Converted template is actually a mirror of the original template. If, on the original template the menu was on the left site, on the modified template it will be on the right. TEMPLATEDETAILS.XML FILE The templatedetails.xml file can be edit in HTML editor or Notepad. This file holds data and information about the template, the names of the files that are part of the template and, most important when converting the template: the site encoding. On the first line in this file we can find the template encoding. Sometimes it need to be change to UTF-8 or other encoding that will suit the site language (and the Database) encoding. NOTES ABOUT UTF-8 ENCODING For non-latin languages we can use the specific language encoding or UTF-8 encoding (Unicode). If the template is in a different encoding then UTF-8 and we would like to adjust the template to be suitable for UTF-8, it would be enough to indicate that on the templatedetails.xml file, but we will need to save the index.php file in UTF-8 encoding.
3 The same will be true for the opposite situation, when we want to make a UTF-8 template to be suitable for a different encoding. Then we will also need to save the index.php file as ANSI. ADJUSTING THE TEMPLATE FOR UTF-8 OR FROM UTF-8 This next action is needed only when adjusting a UTF-8 template to a different encoding, or in the opposite situation when adjusting a template from a non UTF-8 encoding to a UTF-8 encoding. IF the template encoding was UTF-8 and we would like to adjust it for a different encoding, we will open the index.php file (in the template folder) with Notepad and save it using "save as", only this time, while saving we will choose the option ANSI in the saving dialog encoding options. We will do the same for adjusting a template from UTF-8 encoding to a different encoding, while saving the index.php file in notepad, only this time, while saving the file we will choose the option UTF-8 in the saving dialog encoding options. EDITING THE CSS FILE The CSS file contains the design definitions for the template. Those definitions set the site, color, background, spacing of the text the other elements and could also set the position of the elements in the template (top, bottom, left and right).
4 DIRECTION: RTL; The command direction: rtl; This will set the writing direction of the site (from the right to the left). It will not cause the text to align to the right, but will only define the direction. For example, without this command the punctuation marks like full stop, question mark and exclamation mark will appear at the beginning of the sentence instead at the end. It is most important to use the direction: rtl; command in a place where it will affect the whole template. The natural place will be in the body tag (which will affect the whole template). Should we use the body tag for direction: rtl;? One of the RTL affect of this command in the body tad will be that the browser scroll bar will appear on the left (instead on the right). Some don't like it, even on RTL interface. A way to get across the will be to open the index.php file and look for a cell (TD) or layer (DIV) that contains the whole template (many template will use <div id="main"> or <div id="wrapper"> to hold the body of the template). Now, the direction: rtl; could be added to this DIV/TD class on the CSS file and affect it RTL on all of the template and on the other hand keep the browser scroll bar on the right side. If you find this too complicate and for beginners it will be recommended to put the command in the body tag. LEFT=RIGHT As mention before, the conversion is actually a mirroring action. We would like to get everything that's on the left side, to be on the right site and vise versa. On the CSS file every left will change to be right, and every right will turn to be left on commands and parameters. Example 1: On this case the word right is part of a command and needed to be change to left. >>>
5 Example 2: On this case the word left is part of a parameter and needed to be change to right. >>> AUTOMATIC FIND AND REPLACE Using automatic find and replace method in the CSS for chancing all the right to left and vise versa can cause problems For example, in automatic find and replace, a file named top_logo_left.jpg will change its name to top_logo_right.jpg (and maybe there is no file in that name in the images folder...) A class called header_left{ will change its name to header_right{ (and a class in that name might not be exist in the template). When chancing left=right and right=left, we would like to change only the words inside the commands and in the parameters but not in the names of files (images) and classes. Example: In this case if we use automatic find and replace in the CSS file the class td.topright_mods will change its name and will corrupt the template. EVERYTHING IS A MESS If in this stage every thing is a mess, the template is corrupted and positions show one on top of another, don't despair (yet... there will be time for that later...). Other actions might get the template to show correctly in any case. It will be good to make a change or two in the CSS and then to check the site, and so on. In that way it s easy to see what cause a problem and to learn how the different element in the CSS affect template.
6 TEXT-ALIGN= RIGHT The command text-align state the text aligning (left, center or right). In fact, after the stage of left=right (where we went over the CSS file and changed all the left to right and vise versa, all the aligning commands that were showing the text align to the left and state: text-align=left;, are spouse to be correct now and state : text-align=right;. To apply this command on the whole site we can add it in the tags: p, td. div, tr, th. Adding the : text-align=right; on the body tag or like the example, on the p, td, div, tr or th tags can corrupt the template and shift element in the template to the left, also such element that soused to be align to the center or to the left. NUMBERS THAT APPLY TO DIRECTIONS On the CSS file there are certain commands that can accept numbers to state a direction or spacing. Those parameters are: margin, border and padding. For each of those commands it s possible to assign parameters like that: On this example, it has been state if the values are for right or left. This cases has already taken care of earlier, in the left=right stage. There is another way to assign those parameters to the commands without stating the directions, left or right:
7 In this way, every number relate to a different position: top, right, bottom and left. We need to take care of these cases too. CHANGING THE NUMBERS As we learned, every number represents a value for a specific direction. To replace the left to right and vise versa, we need to replace between the number of the left position and the number of the right position. If we will change the 4th number to the 2nd number, and vise versa, we are actually doing a left=right action. ONLY TWO NUMBERS We can also find such a way of writing (with only to numbers), which we don't need to change. When using two numbers, the first number apply to the top and bottom and the second number apply to the left and right.
8 ALIGNING THE TEXT IN THE MAIN MENU The main mane (and the other menus, accept the top menu), if not stated else, will show the text aligned to the left. To change that we have to add the command text-align: right; for the menu definitions. The menu tad is called mainlevel. We can add this command in other element in the CSS that are relevant to the main menu, like a.mainlevel and so on... ALIGNING THE DATES Like the main menu, if was not stated for create date and modify date, they will be shown aligned to the left. We need to add the command text-align: right; in the tags modifydate{ and createdate{.
9 ALIGNING THE AUTHOR NAME For the author name ("written by") the command text-align: right; will not be enough. The author name is controlled by the tad small{, we will need to add the command float: right; to this tag. IMAGES POSITION The position of images (usually icons, arrow and bullets) can be state by words or numbers. On this example the position of the image is stated by the word left. Those cases has already been taken care of at the left=right stage.
10 POSITION OF IMAGES BY NUMBERS In case where numbers are being used to state the position of an image, the first number will define the number of pixels from the left border, to place the image. There is no way to state the number of pixel from the right border so instead we use percents. 0 (or 0px) is actually equal to the word left, meaning, placing an image on the left border (of the div, td ) When we want to place the image in a mirror method, to place it in the exact distance from the right border, because we don t have a way to define the number of pixel from the right border, we use percents. Writing 100% is like writing "right"; the image will be placed on the right border. In the same logic, 6px means placing the image 6 pixels from the left border. Since we can't define the number of pixels to place the image from the right border, we will use the percent, guessing how many to use (remember 100%=right, so 99% can be equal to few pixels from the left). There is no specific rule to determent how many percent to use. As I mentioned there is no "scientific" way to know how many percent to use. Usually, when allayed to arrows and bullets we want to place to image just a little bit from the border. In this case we can set the percent in rang of 99%-95%. If we see that the image is showing on top of the text we can use higher percent, towards 100%.
11 FLIPPING THE IMAGES Many of the template images are part of the structure and design of the template. Usually Images that are used as borders to shadowing will not show correct after converting the template. Those images need to be horizontally flipped. In this demonstration, the images that surrounding the main area and use as borders, switch places, right border become left border and vies versa. Here the border is not symmetric so as we can see, after switching places, we need to flip the border. The images that are not symmetric need to be flipped horizontally, like in a mirror. AUTHOR ORIGINAL SOURCE: EDITOR: Copyright 2007 All rights reserved.
Page Layout Using Tables
This section describes various options for page layout using tables. Page Layout Using Tables Introduction HTML was originally designed to layout basic office documents such as memos and business reports,
More informationORB Education Quality Teaching Resources
These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best
More informationDreamweaver Tutorials Working with Tables
Dreamweaver Tutorials This tutorial will explain how to use tables to organize your Web page content. By default, text and other content in a Web page flow continuously from top to bottom in one large
More informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
More informationCOMM 2555: Interactive Digital Communication / Spring 2018 Lab 9: Basic layout techniques with CSS
COMM 2555: Interactive Digital Communication / Spring 2018 Lab 9: Basic layout techniques with CSS Goals Practice working with the CSS box model, positioning and layout Step 1. Create your infrastructure
More informationLesson 1 using Dreamweaver CS3. To get started on your web page select the link below and copy (Save Picture As) the images to your image folder.
Lesson 1 using Dreamweaver CS3 To get started on your web page select the link below and copy (Save Picture As) the images to your image folder. Click here to get images for your web page project. (Note:
More informationMicrosoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,
More informationCreate a three column layout using CSS, divs and floating
GRC 275 A6 Create a three column layout using CSS, divs and floating Tasks: 1. Create a 3 column style layout 2. Must be encoded using HTML5 and use the HTML5 semantic tags 3. Must se an internal CSS 4.
More informationUSER GUIDE. MADCAP FLARE 2017 r3. QR Codes
USER GUIDE MADCAP FLARE 2017 r3 QR Codes Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is
More informationDreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
More informationUsing Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links
Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationWeb Design and Development ACS Chapter 12. Using Tables 11/23/2017 1
Web Design and Development ACS-1809 Chapter 12 Using Tables 11/23/2017 1 Using Tables Understand the concept and uses of tables in web pages Create a basic table structure Format tables within web pages
More informationCOMSC-030 Web Site Development- Part 1. Part-Time Instructor: Joenil Mistal
COMSC-030 Web Site Development- Part 1 Part-Time Instructor: Joenil Mistal Chapter 9 9 Working with Tables Are you looking for a method to organize data on a page? Need a way to control our page layout?
More informationStep 1 Download and Install KompoZer Step by step instructions to build your first web page using KompoZer web editor.
All Creative Designs HTML Web Tutorial for PC Using KompoZer New version 2012 now available at: http://www.allcreativedesigns.com.au/pages/tutorials.html Step 1 Download and Install KompoZer Step by step
More informationPositioning in CSS: There are 5 different ways we can set our position:
Positioning in CSS: So you know now how to change the color and style of the elements on your webpage but how do we get them exactly where we want them to be placed? There are 5 different ways we can set
More informationTable Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
More informationThe Importance of the CSS Box Model
The Importance of the CSS Box Model Block Element, Border, Padding and Margin Margin is on the outside of block elements and padding is on the inside. Use margin to separate the block from things outside
More informationUser s guide to using the ForeTees TinyMCE online editor. Getting started with TinyMCE and basic things you need to know!
User s guide to using the ForeTees TinyMCE online editor TinyMCE is a WYSIWYG (what you see is what you get) editor that allows users a familiar word-processing interface to use when editing the announcement
More informationQuick Start Guide. This guide will help you get started with Kentico CMS for ASP.NET. It answers these questions:
Quick Start Guide This guide will help you get started with Kentico CMS for ASP.NET. It answers these questions:. How can I install Kentico CMS?. How can I edit content? 3. How can I insert an image or
More informationLava New Media s CMS. Documentation Page 1
Lava New Media s CMS Documentation 5.12.2010 Page 1 Table of Contents Logging On to the Content Management System 3 Introduction to the CMS 3 What is the page tree? 4 Editing Web Pages 5 How to use the
More informationCSS worksheet. JMC 105 Drake University
CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html
More informationProject 1: Creating a Web Site from Scratch. Skills and Tools: Use Expression Web tools to create a Web site
E00EW3.qxp 4/14/2007 3:17 PM Page 1 Workshops w Introduction The Workshop is all about being creative and thinking outside of the box. These workshops will help your right-brain soar, while making your
More informationJoomla! 2.5.x Training Manual
Joomla! 2.5.x Training Manual 1 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
More informationIndependence Community College Independence, Kansas
Independence Community College Independence, Kansas C O N T E N T S Unit 1: Creating, Modifying, and Enhancing FrontPage Webs and Pages 1 Chapter 1 Investigating FrontPage 2002 3 Exploring World Wide Web
More information1.0 Overview For content management, Joomla divides into some basic components: the Article
Joomla! 3.4.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 informationEDITOR GUIDE. Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9
EDITOR GUIDE Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9 1 Button Functions: Button Function Display the page content as HTML. Save Preview
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block
More informationThe American University in Cairo. Academic Computing Services. Word prepared by. Soumaia Ahmed Al Ayyat
The American University in Cairo Academic Computing Services Word 2000 prepared by Soumaia Ahmed Al Ayyat Spring 2001 Table of Contents: Opening the Word Program Creating, Opening, and Saving Documents
More informationCreating a Website in Schoolwires Technology Integration Center
Creating a Website in Schoolwires Technology Integration Center Overview and Terminology... 2 Logging into Schoolwires... 2 Changing a password... 2 Accessing Site Manager... 2 Section Workspace Overview...
More informationDreamweaver CS3 Concepts and Techniques
Dreamweaver CS3 Concepts and Techniques Chapter 3 Tables and Page Layout Part 1 Other pages will be inserted in the website Hierarchical structure shown in page DW206 Chapter 3: Tables and Page Layout
More informationUsing Dreamweaver CS6
Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationCMS Training Reference Guide
CMS Training Reference Guide Your training session may have been conducted on one of your sites Dev or Staging or Live To login, type your web address domain into a web browser and add (/admin) o Example:
More informationAssignments (4) Assessment as per Schedule (2)
Specification (6) Readability (4) Assignments (4) Assessment as per Schedule (2) Oral (4) Total (20) Sign of Faculty Assignment No. 02 Date of Performance:. Title: To apply various CSS properties like
More informationWhat do we mean by layouts?
What do we mean by layouts? A layout is how you position the elements of your page You can have columns Move paragraphs and sections around And you can do this all without changing the content of your
More informationINFS 2150 Introduction to Web Development
INFS 2150 Introduction to Web Development 3. Page Layout Design Objectives Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout
More informationPage Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning
Page Layout contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning 2 1 4.1
More informationINFS 2150 Introduction to Web Development
Objectives INFS 2150 Introduction to Web Development 3. Page Layout Design Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout
More informationUSER GUIDE MADCAP FLARE Tables
USER GUIDE MADCAP FLARE 2018 Tables Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is furnished
More informationCreating a Job Aid using HTML and CSS
Creating a Job Aid using HTML and CSS In this tutorial we will apply what we have learned about HTML and CSS. We will create a web page containing a job aid about how to buy from a vending machine. Optionally,
More informationLab Introduction to Cascading Style Sheets
Lab Introduction to Cascading Style Sheets For this laboratory you will need a basic text editor and a browser. In the labs, winedt or Notepad++ is recommended along with Firefox/Chrome For this activity,
More informationNVU Web Authoring System
NVU Web Authoring System http://www.nvu.com/index.php Table of Contents Using Nvu as Your Web Page Authoring System: Getting Started Opening a page, saving, and previewing your work...3 Formatting the
More informationThis Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.
This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Just so you know: Things You Can t Do with Word... 1 Get Organized... 1 Create the
More informationRegion One DeMolay Website Management System Prepared by BiGiSolutions.com
Region One DeMolay Website Management System Prepared by BiGiSolutions.com Your website Domain Name: Your Site Manager Name: Your Site Manager E-Mail Address: The original purpose of this project was to
More informationWhat is the Box Model?
CSS Box Model What is the Box Model? The box model is a tool we use to understand how our content will be displayed on a web page. Each HTML element appearing on our page takes up a "box" or "container"
More informationAdobe Dreamweaver CS5 Tutorial
Adobe Dreamweaver CS5 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationTUTORIAL MADCAP FLARE Tripane and PDF
TUTORIAL MADCAP FLARE 2018 Tripane and PDF Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More informationLesson 5 Styles, Tables, and Frames
In this lesson you will learn how to create a new document that imports the custom page and paragraph styles created in earlier lessons. You will also see how to add tables to your documents. If LibreOffice
More informationAll Creative Designs. Basic HTML for PC Tutorial Part 1 Using MS Notepad (Version May 2013) My First Web Page
All Creative Designs Basic HTML for PC Tutorial Part 1 Using MS Notepad (Version May 2013) My First Web Page Step by step instructions to build your first web page Brief Introduction What is html? The
More informationDreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets
Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually
More informationGIMP WEB 2.0 MENUS WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR CREATING AN HTML LIST
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: CREATING AN HTML LIST Most horizontal or vertical navigation bars begin with a simple
More informationGuidelines for doing the short exercises
1 Short exercises for Murach s HTML5 and CSS Guidelines for doing the short exercises Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important. Feel
More informationTAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a
> > > > CSS Box Model Think of this as a box that contains things, such as text or images. It can also just be a box, that has a border or not. You don't have to use a, you can apply the box model to any
More informationCSS Design and Layout Basic Exercise instructions. Today's exercises. Part 1: Arrange Page into Sections. Part 1, details (screenshot below)
CSS Design and Layout Basic Exercise instructions You may want to bring your textbook to Exercises to look up syntax and examples. Have a question? Ask for help, or look at the book or lecture slides.
More informationIMY 110 Theme 11 HTML Frames
IMY 110 Theme 11 HTML Frames 1. Frames in HTML 1.1. Introduction Frames divide up the web browser window in much the same way that a table divides up part of a page, but a different HTML document is loaded
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More informationUsing Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles
Using Dreamweaver CC 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format
More informationDesigning the Home Page and Creating Additional Pages
Designing the Home Page and Creating Additional Pages Creating a Webpage Template In Notepad++, create a basic HTML webpage with html documentation, head, title, and body starting and ending tags. From
More informationMAIL MERGE DIRECTORY USE THE MAIL MERGE WIZARD
MAIL MERGE DIRECTORY USE THE MAIL MERGE WIZARD When working with the Mail Merge feature, it is possible to create several types of documents, such as directories. A directory is a list of the data in the
More informationDreamweaver Basics Workshop
Dreamweaver Basics Workshop Robert Rector idesign Lab - Fall 2013 What is Dreamweaver? o Dreamweaver is a web development tool o Dreamweaver is an HTML and CSS editor o Dreamweaver features a WYSIWIG (What
More informationTables *Note: Nothing in Volcano!*
Tables *Note: Nothing in Volcano!* 016 1 Learning Objectives After this lesson you will be able to Design a web page table with rows and columns of text in a grid display Write the HTML for integrated
More informationICT IGCSE Practical Revision Presentation Web Authoring
21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR DYNAMIC BACKGROUND IMAGE Before you begin this tutorial, you will need
More informationCSC 121 Computers and Scientific Thinking
CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language
More informationICT IGCSE Practical Revision Presentation Web Authoring
21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:
More informationMicrosoft FrontPage. An Introduction to. Lecture No.1. Date: April Instructor: Mr. Mustafa Babagil. Prepared By: Nima Hashemian
An Introduction to Microsoft FrontPage Lecture No.1 Date: April 20. 2007 Instructor: Mr. Mustafa Babagil Prepared By: Nima Hashemian 2006 An Introduction to FrontPage Mathematics Department Eastern Mediterranean
More informationADOBE DREAMWEAVER CS4 BASICS
ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationBy Ryan Stevenson. Guidebook #2 HTML
By Ryan Stevenson Guidebook #2 HTML Table of Contents 1. HTML Terminology & Links 2. HTML Image Tags 3. HTML Lists 4. Text Styling 5. Inline & Block Elements 6. HTML Tables 7. HTML Forms HTML Terminology
More information5 Snowdonia. 94 Web Applications with C#.ASP
94 Web Applications with C#.ASP 5 Snowdonia In this and the following three chapters we will explore the use of particular programming techniques, before combining these methods to create two substantial
More informationTitle and Modify Page Properties
Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics
More information1 of 7 11/12/2009 9:29 AM
1 of 7 11/12/2009 9:29 AM Home Beginner Tutorials First Website Guide HTML Tutorial CSS Tutorial XML Tutorial Web Host Guide SQL Tutorial Advanced Tutorials Javascript Tutorial PHP Tutorial MySQL Tutorial
More informationLab 2: Movie Review. overview.png background.png rottenbig.png rbg.png fresh.gif rotten.gif critic.gif
EDUCATIONAL GOALS Lab 2: Movie Review By the end of this lab, the student should be able to: Use Notepad++. Organize website contents. Use the basic of CSS and HTML for layout, positioning, and the CSS
More informationCreating your first website Part 4: Formatting your page with CSS
Adobe - Developer Center : Creating your first website Part 4: Formatting your page... Page 1 of 23 Dreamweaver Article Creating your first website Part 4: Formatting your page with CSS Jon Varese Adobe
More informationChapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10
CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties
More informationWhen you complete this chapter, you will be able to:
Page Layouts CHAPTER 7 When you complete this chapter, you will be able to: Understand the normal fl ow of elements Use the division element to create content containers Create fl oating layouts Build
More informationVirtueMart Product Scroller Module
VirtueMart Product Scroller Module Introduction: VirtueMart provides a module (mod_productscroller_1.1.5.j15.zip) in the complete installation package of VirtueMart. mod_productscroller_1.1.5.j15.zip:
More informationNetscape Composer: Working with Tables
Why tables? Netscape Composer: Working with Tables Tables on the Web can be divided into two categories: data display and page layout. Although the method for making both kinds of tables is the same, it
More informationIDM 221. Web Design I. IDM 221: Web Authoring I 1
IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 7 IDM 221: Web Authoring I 2 Page Layout Part 1 IDM 221: Web Authoring I 3 Part 1 because part 2 is coming next term (RWD, Flexbox, Grids) Posi%on An
More informationUsing Microsoft Word. Paragraph Formatting. Displaying Hidden Characters
Using Microsoft Word Paragraph Formatting Every time you press the full-stop key in a document, you are telling Word that you are finishing one sentence and starting a new one. Similarly, if you press
More informationTutorial 5 Working with Tables and Columns. HTML and CSS 6 TH EDITION
Tutorial 5 Working with Tables and Columns HTML and CSS 6 TH EDITION Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple rows and columns
More informationBefore you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website.
9 Now it s time to challenge the serious web developers among you. In this section we will create a website that will bring together skills learned in all of the previous exercises. In many sections, rather
More informationUsing Dreamweaver. 4 Creating a Template. Logo. Page Heading. Home About Us Gallery Ordering Contact Us Links. Page content in this area
4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan that is shown below. Logo Page Heading
More informationThe default style for an unordered (bulleted) list is the bullet, or dot. You can change the style to either a square or a circle as follows:
CSS Tutorial Part 2: Lists: The default style for an unordered (bulleted) list is the bullet, or dot. You can change the style to either a square or a circle as follows: ul { list-style-type: circle; or
More informationIMY 110 Theme 7 HTML Tables
IMY 110 Theme 7 HTML Tables 1. HTML Tables 1.1. Tables The HTML table model allows authors to arrange data into rows and columns of cells, just as in word processing software such as Microsoft Word. It
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).
More informationUsing Dreamweaver CS6
6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format our web site. Just
More informationCascading Style Sheets for layout II CS7026
Cascading Style Sheets for layout II CS7026 Understanding CSS float The CSS float property is also a very important property for layout. It allows you to position your Web page designs exactly as you want
More informationIntroduction to Dreamweaver CS3
TUTORIAL 2 Introduction to Dreamweaver CS3 In Tutorial 2 you will create a sample site while you practice the following skills with Adobe Dreamweaver CS3: Creating pages based on a built-in CSS page layout
More informationSAP BUSINESS OBJECTS CRYSTAL REPORTS ON SAP HANA
SAP BUSINESS OBJECTS CRYSTAL REPORTS ON SAP HANA DECEMBER 13, 2017 KAUSTUBH SATPUTE LEAVE A COMMENT EDIT Welcome one and all to another reporting on HANA tutorial. In this one, we find ourselves tackling
More informationCSS for Page Layout Robert K. Moniot 1
CSS for Page Layout 2015 Robert K. Moniot 1 OBJECTIVES In this unit, you will learn: How to use style sheets for layout Controlling text flow, margins, borders, and padding Controlling visibility of elements
More informationGetting Started with Eric Meyer's CSS Sculptor 1.0
Getting Started with Eric Meyer's CSS Sculptor 1.0 Eric Meyer s CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: You may create your button in GIMP. Mine is 122 pixels by 48 pixels. You can use whatever
More informationMicrosoft Word 2010 Tutorial
1 Microsoft Word 2010 Tutorial Microsoft Word 2010 is a word-processing program, designed to help you create professional-quality documents. With the finest documentformatting tools, Word helps you organize
More informationDreamweaver CS 5.5. University Information Technology Services. Training, Outreach, Learning Technologies, and Video Production
Dreamweaver CS 5.5 Creating Web Pages with a Template University Information Technology Services Training, Outreach, Learning Technologies, and Video Production Copyright 2012 KSU Department of Information
More informationAdobe Dreamweaver CC 17 Tutorial
Adobe Dreamweaver CC 17 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
More informationrecall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML)
HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML specifies formatting within a page using tags in its
More informationCOMSC-031 Web Site Development- Part 2
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create
More informationNinja Menus extension for Magento 2
Ninja Menus extension for Magento 2 User Guide Version 1.0 0 Table of Contents Ninja Menus I) Introduction... 2 II) Menu Grid... 3 III, Add new menu... 7 1. General setting... 8 2. Advanced settings...
More informationWeb Programming and Design. MPT Senior Cycle Tutor: Tamara Week 2
Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 2 Plan for the next 4 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style Introduction to JavaScript
More information