User manual. Dynamicweb Templates. Document ID: TM-2050 Version: English
|
|
- Irma King
- 7 years ago
- Views:
Transcription
1 User manual Dynamicweb Templates Document ID: TM-2050 Version: English
2
3 LEGAL INFORMATION Copyright Dynamicweb Software A/S (Ltd). All rights reserved. Alteration or reproduction of this document or parts hereof is strictly prohibited, regardless of form or means, unless explicit permission has been acquired from Dynamicweb Software. Dynamicweb is a registered trademark of Dynamicweb Software. Company and product names mentioned in this document may be registered trademarks or trademarks of third parties Dynamicweb Software A/S (Ltd). iii
4 CONTENTS Introduction v What this document is about... v Who this document is for... v Related documents... v 1 Inside Dynamicweb The data layer The design layer The program layer Template tags 2 3 Master templates Master template tags Page templates Page template sample Menu tags Paragraph templates Paragraph template sample ParagraphSetup templates ParagraphSetup template sample Module templates Dynamicweb Software A/S (Ltd). iv
5 INTRODUCTION What this document is about This document gives an overview of Dynamicweb templates. Descriptions and working examples are given for template tags, paragraph templates, page templates and ParagraphSetup templates. After reading this document you will have a basic understanding of Dynamicweb templates. Who this document is for This document is for designers and power users that want to work with Dynamicweb templates. In order to work with Dynamicweb templates, a good operational knowledge of HTML is required! Errors in the syntax or structure of templates will have an adverse effect on the presentation of your website. Related documents 2052 Dynamicweb Template Tag Reference: Describes all Dynamicweb template tags. It is recommended to have this available when working with Dynamicweb templates. The documentation is available in an on-line version only, at: Designing Dynamicweb Templates: Gives instructions on how to develop and modify Dynamicweb templates. It is recommended that you have this document available when working with Dynamicweb templates Dynamicweb Menus: Describes Dynamicweb menus and how they work. It is recommended that you have this document when working with Dynamicweb templates Document Conventions: Gives an overview of the typographical and writing conventions used in manuals and documentation from Dynamicweb Software Dynamicweb Software A/S (Ltd). v
6 1 INSIDE DYNAMICWEB Prior to looking at more technical or advanced aspects of Dynamicweb, such as Dynamicweb Templates, some understanding of the inside workings, or architecture of Dynamicweb is necessary. The Dynamicweb technical architecture consists of three layers; a data layer, a design layer and a program layer. Together, these three layers control and shape the output of your Dynamicweb website. 1.1 The data layer The Dynamicweb data layer consists of the contents and settings for your website. This is where text, images and files you want displayed on the website are stored. In Dynamicweb you do not have direct access to the data layer; instead you enter data through the administration interface. The program layer then handles the access to the data layer. This helps enforce the strict data structure necessary in order to guarantee high performance and reliability. 1.2 The design layer The Dynamicweb design layer contains the blueprints that tell what goes where, and how it should look. The design layer consists of Dynamicweb templates and style sheets. Dynamicweb templates are the part of the design layer that determines what goes where. Page templates determine the general layout of the webpages while paragraph and module templates determine how page content is presented. The templates consist of HTML code, template tags and references that are decoded by the program layer and put into the HTML output as a webpage. Style sheets are the part of the design layer that determines how the webpages look: fonts, colors and standard images. In Dynamicweb, style sheets and Dynamicweb templates can freely be created and edited, giving you direct access to the design layer. Restrictions can be applied to Dynamicweb, locking style sheets and Dynamicweb templates. These restrictions can be set by your solution provider, or Dynamicweb partner. 1.3 The program layer The Dynamicweb program layer is the software system that ties everything together. The program layer picks out the appropriate contents from the data layer and places it on the webpage according to the blueprints from the design layer. The program layer also provides the special functionality of the various Dynamicweb modules. By default you do not have direct access to the program layer in Dynamicweb. However, the behavior of the program layer can be controlled by settings in the Dynamicweb modules and the website Control panel. Furthermore, Dynamicweb Developer gives you the freedom and flexibility to create custom functions and modules. Contact your solution provider for further information about Dynamicweb Developer. Version Dynamicweb Software A/S (Ltd). 1
7 2 TEMPLATE TAGS Template tags act as placeholders for various contents in the HTML code of Dynamicweb templates. Before a webpage is shown, Dynamicweb automatically replaces all template tags with the appropriate values. Template tags are formatted as HTML comments containing the tag name preceded by an at sign (@): <!--@MyTag--> Template tag names are case sensitive! Listing 1 is an example of template code with the resulting HTML output shown in Listing 2. Listing 1. Template tag usage example. <table width="<!--@mytablewidth-->"> <tr> <td> Hello <!--@MyTag-->!</td> </table> Notice how the template tags can be used not only between HTML tags, but also as attribute values. This is possible because the template tags are replaced by the corresponding values before the page HTML output is sent to the browser. When using template tags for attribute values it is a good idea to enclose them in double quotes. Assuming the template tags <!--@MyTableWidth--> and <!--@MyTag--> have the values 100% and world respectively. The resulting HTML output would be: Listing 2. HTML output example (static value). <table width="100%"> <tr> <td> Hello world!</td> </table> If template tags only had static values, the advantages of using them would be somewhat limited. The real advantage becomes apparent when template tag values are dynamic. Listing 3. HTML output example (dynamic value). <table width="100%"> <tr> <td> Hello Tom!</td> </table> Assuming <!--@MyTag--> has a dynamic value representing the current user s name, a user named Tom would get the HTML output in Listing 3. Dynamicweb offers a large collection of built-in template tags, both semistatic and dynamic. As a rule the set of tags is fixed, with no possibility of Version Dynamicweb Software A/S (Ltd). 2
8 Template tags creating your own custom template tags. Menu tags in page templates is one of the few exception to this rule (see 4.2 Menu tags). A complete description of all available Dynamicweb template tags is given in TR-2052 Dynamicweb Template Tag Reference available on-line at: Version Dynamicweb Software A/S (Ltd). 3
9 3 MASTER TEMPLATES Dynamicweb master templates let you control the header of your website. In your header you have the opportunity to adjust external stylesheets and external JavaScripts. If you want to change the master template it can be done through the Dynamicweb Frontpage module. If you have the Dynamicweb Language/Area module installed on your Dynamicweb solution it can also be done there. Figure 1. The Frontpage module Frontpage tab. In order to change the master template, use the following settings: Advanced Template The template HTML files are located in your File Manager in the folder /Templates/Master. You can change these files to fit your needs. HTML type Select the HTML type that corresponds with your master template. 3.1 Master template tags In the master template you have the following template tags available: This tag refers to title field under the Meta tab in the Frontpage module settings (see Figure 1). This tag refers to the keyword and description field under the Meta tab in the Frontpage module settings (see Figure 1). Version Dynamicweb Software A/S (Ltd). 4
10 Master templates Figure 2. The Frontpage module Meta tab. This tag refers to the Copyright field under Control Panel General. This tag refers to three settings under the stylesheet page settings (see Figure 3). Under the Background section you can check off three settings: Fixed (Internet Explorer), Repeat horizontally and Repeat vertically which applies to the page background. The tag will generate the appropriate data based on your selections. Version Dynamicweb Software A/S (Ltd). 5
11 Master templates Figure 3. The Page tab under Stylesheet Page. This tag refers to the Background image option under the Page tab (see Figure 3). The tag outputs the path to the selected image. This tag refers to the Background color option under the Page tab (see Figure 3). The tag outputs the hex color code. This tag refers to the Alignment section under the Page tab (see Figure 3). The tag sets the alignment on the div tag that follows the body tag. This will affect the alignment of the entire website. This tag includes all external stylesheets needed in the Dynamicweb solution. This also includes your own external Version Dynamicweb Software A/S (Ltd). 6
12 Master templates stylesheet. You can use your own stylesheet by going through the following steps: 1. Upload the CSS file to the System folder in the File Manager. 2. Select the CSS file under the Template tab Stylesheet. The CSS file will then be included on every page where this stylesheet is applied. Figure 4. The Template tab under Stylesheet Page.. This tag refers to the actual stylesheet Include section under the Template tab (see Figure 4). Here, you can include your own Javascript file. 1. Upload the file to System folder in the File Manager. 2. Select the file in the JavaScript dropdown. (see Figure 4) When this is done the JavaScript file will be included on every page where this stylesheet is applied. you have selected a file for the tag above, you can run a function at body onload. If your Javascript file contains a function you want to run at body onload you can simply write the function name in the input field e.g. resize(); or SetPageHeight (see Figure 4) <!--@PageContent-->This tag generates all of the page content. <!--@DwMenuDropDownContent-->This tag generates the source for dropdown menus on your website. The menu source is generated at bottom of the page and can afterwards be positioned using javascript. Version Dynamicweb Software A/S (Ltd). 7
13 Page templates 4 PAGE TEMPLATES Dynamicweb page templates control the overall layout of elements on the webpages. Dynamicweb page templates determine which page elements are placed where and a style sheet determines how the elements of a webpage look. Together style sheets and templates pages can ensure a consistent look and layout across your website. Logo Top image Contents Figure 5. Typical page template elements. Menu The page template is based on a page template HTML file. The template HTML file contains the actual HTML code and template tags that define the page elements. Figure 5 shows a typical page layout with four basic elements, or areas: logo, top image, menu and contents areas. These elements can be dynamic or static either controlled using template tags as described in the previous section or with standard HTML. An introduction to the default layout used in the standard page templates provided with Dynamicweb is given in TM-2051 Creating Dynamicweb Templates. Version Dynamicweb Software A/S (Ltd). 8
14 Page templates 4.1 Page template sample Listing 4. Page template HTML file example. <table border="2" cellspacing="0" cellpadding="2" bordercolor="black"> <tr> <td colspan="2"><img border="1" <tr align="center"> <td <tr valign="top"> <td <td </table> The simplified (but valid) Dynamicweb page template HTML file in Listing 4 displays four page elements, using the emphasized template tags. The purpose of the example is to illustrate the basic workings of a Dynamicweb page template, which accounts for the somewhat crude and artificial structure, using a table with visible borders etc. The resulting browser output is shown in Figure 6. <img border="1" src="<!--@dwtoplogoclean-->"> <!--@DwTopPageName- -> <!--@DwContent--> <!--@MyMenu--> Figure 6. Browser output and associated template tags for page template example. Things to notice in this example are: The page template HTML file will be included inside the document body (<BODY></BODY>) of the webpage HTML. This means that the HTML code must conform to the conventions for the BODY block. <!--@DwTopLogoClean-->: This represents the path to the logo, set in style sheet. In the example above the tag is used as the attribute value for the image URL, giving the Dynamicweb logo in Figure 6. Version Dynamicweb Software A/S (Ltd). 9
15 Page templates This represents the name (set in the page properties) of the top level page. The sample shown in Figure 6 is a sub page to a top level page called Dynamicweb Templates. <!--@MyMenu-->: This is a custom tag representing a menu. In Figure 6, a plain vertical menu shows the sub pages below the Dynamicweb Templates page. <!--@DwContent-->: This represents the actual contents (paragraphs and modules) to be displayed. The content layout is controlled through paragraph templates (see 5 Paragraph templates) and ParagraphSetup templates (see 6 ParagraphSetup templates). In Figure 6, the content of the Page templates sub page is shown (consisting of a heading, subheading and body text). To facilitate the layout used in standard Dynamicweb page templates, the <!--@DwContent--> template tag is enclosed in HTML table tags. In return, all contents in the paragraph template HTML files should be set in table rows (as in Listing 5). 4.2 Menu tags While you cannot create custom Dynamicweb template tags, you have to define your own menu tags in Dynamicweb. You are free to name your menu tags as you want, as long as you avoid using the names of any of the built-in template tags. Menu tags act as placeholders for the menus you associate with a page template. A page template must have at least one menu otherwise the resulting webpage cannot be displayed. The menu orientation (vertical or horizontal) and other options are set independent of the menu tags in the page template HTML file. In Listing 4 the menu tag <!--@MyMenu--> acts as a placeholder for the menu shown in Figure 6, the property that makes it a vertical menu is set elsewhere. A description of menu characteristics and how to use menu tags is given in TM-2055 Dynamicweb Menus. Version Dynamicweb Software A/S (Ltd). 10
16 5 PARAGRAPH TEMPLATES Dynamicweb paragraph templates control the flow and positioning of elements within the individual paragraphs on a page. This helps you control the layout of, and elements in, the paragraphs on your Dynamicweb webpages. Vignette image Heading (and subheading) Body text Paragraphs Figure 7. Basic paragraphs in page contents area. The basic three elements of a Dynamicweb paragraph are the vignette image, headings and the body text. (The heading, subheading and body text area, as a whole, called the paragraph text.) 5.1 Paragraph template sample Listing 5. Paragraph template HTML file example. <tr> <td> <table border="1" bordercolor="black"> <tr valign="top" id= FirstRow > <td colspan="2"><!--@paragraphimage--></td> <td colspan="1"><!--@paragraphtext--></td> <tr id= SecondRow > <td> </td> <td> </td> <td> </td> <tr id= LastRow > <td width="33%"></td> <td width="33%"></td> <td></td> </table> </td> Version Dynamicweb Software A/S (Ltd). 11
17 Paragraph templates The simplified (but valid) Dynamicweb paragraph template HTML file in Listing 5 displays two paragraph elements, using the emphasized template tags. The purpose of the example is to illustrate the basic workings of a Dynamicweb paragraph template, which accounts for the somewhat crude and artificial structure using a table with visible borders, empty cells etc. The resulting browser output is shown in Figure 6. Things to notice in this example are: Bear in mind that the <!--@DwContent--> template tag in the page template HTML file in Listing 4 is enclosed in HTML table tags. Consequently the content in the paragraph template HTML file must be set in table rows. <!--@ParagraphImage-->: This represents the vignette image associated with the paragraph (i.e. the Dynamicweb logo in Figure 6). In the example above the tag is placed in a table cell spanning two columns. <!--@ParagraphText-->: This represents the paragraph text (headings and body text). In Figure 6, the content of the Three column paragraph sub page is shown (consisting of a heading, subheading and body text). The cells in the second row contain non-breaking spaces ( ). This is done for the sake of this example, making the three column layout used in the example more visible. The last row controls the relative width of the columns (about 1/3 of the total table width each) in the paragraph. Since the cells are empty, the row is not actually displayed. <!--@ParagraphText--> <!--@ParagraphImage--> Figure 8. Browser output and associated template tags for paragraph template example. Version Dynamicweb Software A/S (Ltd). 12
18 ParagraphSetup templates 6 PARAGRAPHSETUP TEMPLATES In their basic form, page templates and paragraph templates allow you to create a linear (top to bottom) flow of paragraphs on your webpages. Figure 9 shows a Dynamicweb page with five paragraphs (using a plain, standard paragraph template). Figure 9. Top to bottom flow of paragraphs. ParagraphSetup templates enable you to break the linear flow for a number of paragraphs of your choice. ParagraphSetup templates are applied to dummy paragraphs (through the Templates module) and control the flow of the following paragraphs on the page. The flow of all other paragraphs, outside the set scope of the ParagraphSetup template, will follow the standard flow on the page. ParagraphSetup templates are in fact modules working on the paragraph level. However, their functionality is closely related to both page templates and paragraph templates. Consequently they can be considered a form of template. The number of paragraphs affected (from 1 to 200) is set under Module Settings for the dummy paragraph associated with the ParagraphSetup template. Version Dynamicweb Software A/S (Ltd). 13
19 ParagraphSetup templates 6.1 ParagraphSetup template sample Listing 6. ParagraphSetup template HTML file example. <tr valign=top> <td></td> <td colspan=11> <table border=1> <tr valign=top> <td <tr valign=top> <tr valign=top> <td </table> </td> The simplified (but valid) Dynamicweb ParagraphSetup template HTML file in Listing 6 applies an alternate order and arrangement to several paragraphs. The purpose of the example is to illustrate the basic workings of a Dynamicweb ParagraphSetup template, which accounts for the somewhat crude and artificial structure using a table with visible borders for the affected paragraphs etc. The resulting browser output is shown in Figure 10, where the ParagraphSetup template is set up to affect four paragraphs. Version Dynamicweb Software A/S (Ltd). 14
20 ParagraphSetup templates Figure 10. Browser output and associated template tags for ParagraphSetup template example. Things to notice in this example are: ParagraphSetup templates are applied to (dummy) paragraphs. Consequently the structure of a ParagraphSetup template HTML file should follow that of a paragraph template HTML file, i.e. set in table rows. <!--@TemplateParagraph1-->: In the example the first, third and fourth paragraphs respectively are represented by the template tags: <!--@TemplateParagraph1-->, <!--@TemplateParagraph3--> and <!--@TemplateParagraph4-->. Paragraphs can be referenced by index using the format <!--@TemplateParagraphIndex-->. (Where Index is the index of the paragraph, relative to the position of the dummy paragraph.) <!--@TemplateParagraphN-->: This represents all paragraphs (of those affected by the ParagraphSetup template) that have not been indexed. In Figure 10 this results in the second paragraph being displayed, since it was not referenced elsewhere. The fifth paragraph is not affected by the ParagraphSetup template. Version Dynamicweb Software A/S (Ltd). 15
21 7 MODULE TEMPLATES Dynamicweb uses modules to provide various types of advanced functionality, e.g. Poll, Forum, E-cards etc. Modules enable users of your website to interact with the website dynamically. Modules are generally associated with specific paragraphs. Modules are based on template HTML files similar to paragraph templates HTML files. These template HTML files, control the functionality of the module in the specific paragraph. The available options vary from module to module. See the template documentation for the individual modules for details and template HTML file examples. Version Dynamicweb Software A/S (Ltd). 16
Developers Guide. Designs and Layouts HOW TO IMPLEMENT WEBSITE DESIGNS IN DYNAMICWEB. Version: 1.3 2013.10.04 English
Developers Guide Designs and Layouts HOW TO IMPLEMENT WEBSITE DESIGNS IN DYNAMICWEB Version: 1.3 2013.10.04 English Designs and Layouts, How to implement website designs in Dynamicweb LEGAL INFORMATION
More informationNew Perspectives on Creating Web Pages with HTML. Considerations for Text and Graphical Tables. A Graphical Table. Using Fixed-Width Fonts
A Text Table New Perspectives on Creating Web Pages with HTML This figure shows a text table. Tutorial 4: Designing a Web Page with Tables 1 2 A Graphical Table Considerations for Text and Graphical Tables
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 informationIntroduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
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 informationTutorial 5. Working with Web Tables
Tutorial 5 Working with Web Tables Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple rows and columns Create row and column groups Add
More informationHTML Tables. IT 3203 Introduction to Web Development
IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing
More informationecommercesoftwareone Advance User s Guide -www.ecommercesoftwareone.com
Advance User s Guide -www.ecommercesoftwareone.com Contents Background 3 Method 4 Step 1 - Select Advance site layout 4 Step 2 - Identify Home page code of top/left and bottom/right sections 6 Step 3 -
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 informationIntroduction to XHTML. 2010, Robert K. Moniot 1
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document
More informationCreate a Google Site in DonsApp
Create a Google Site in DonsApp 1 Google Web Site Interactive. Constructivist. Collaborative. Communities. WHAT IS GOOGLE SITE? With one single click, you can create a website without any knowledge of
More informationCreating Web Pages with Microsoft FrontPage
Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short
More informationFast track to HTML & CSS 101 (Web Design)
Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of
More informationWebsite Planning Checklist
Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even
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 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 informationWeb Portal User Guide. Version 6.0
Web Portal User Guide Version 6.0 2013 Pitney Bowes Software Inc. All rights reserved. This document may contain confidential and proprietary information belonging to Pitney Bowes Inc. and/or its subsidiaries
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 informationLesson Review Answers
Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.
More informationHow to Properly Compose E-Mail HTML Code : 1
How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail
More informationJoomla! template Blendvision v 1.0 Customization Manual
Joomla! template Blendvision v 1.0 Customization Manual Blendvision template requires Helix II system plugin installed and enabled Download from: http://www.joomshaper.com/joomla-templates/helix-ii Don
More informationHTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
More informationIE Class Web Design Curriculum
Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,
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 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 informationAdvanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY
Advanced Web Development Duration: 6 Months SCOPE OF WEB DEVELOPMENT INDUSTRY Web development jobs have taken thе hot seat when it comes to career opportunities and positions as a Web developer, as every
More informationMAGENTO THEME SHOE STORE
MAGENTO THEME SHOE STORE Developer: BSEtec Email: support@bsetec.com Website: www.bsetec.com Facebook Profile: License: GPLv3 or later License URL: http://www.gnu.org/licenses/gpl-3.0-standalone.html 1
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 informationWebsite 101. Yani Ivanov. Student Assistant / Web Administrator
Website 101 Yani Ivanov Student Assistant / Web Administrator Information Technology for Environmental Research Area of the Hawai`i NSF EPSCoR Program Covered Topics Introduction to HTML What is it and
More informationMicrosoft Expression Web
Microsoft Expression Web Microsoft Expression Web is the new program from Microsoft to replace Frontpage as a website editing program. While the layout has changed, it still functions much the same as
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 informationHTML & XHTML Tag Quick Reference
HTML & XHTML Tag Quick Reference Interactive Media Center This reference notes some of the most commonly used HTML and XHTML tags. It is not, nor is it intended to be, a comprehensive list of available
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 informationA set-up guide and general information to help you get the most out of your new theme.
Blox. A set-up guide and general information to help you get the most out of your new theme. This document covers the installation, set up, and use of this theme and provides answers and solutions to common
More informationART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2
HTML, XHTML & CSS: Introduction, 1-2 History: 90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult! (this is why you would see disclaimers
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 informationWebsite Development Komodo Editor and HTML Intro
Website Development Komodo Editor and HTML Intro Introduction In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of
More informationYour Blueprint websites Content Management System (CMS).
Your Blueprint websites Content Management System (CMS). Your Blueprint website comes with its own content management system (CMS) so that you can make your site your own. It is simple to use and allows
More informationAdvanced Drupal Features and Techniques
Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount
More informationAdvanced HTML Authoring Using Tables
INFORMATION SYSTEMS SERVICES Advanced HTML Authoring Using Tables This tutorial workbook contains a series of exercises on creating tables in HTML documents using Macromedia Dreamweaver MX. AUTHOR: Information
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 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 informationState of Nevada. Ektron Content Management System (CMS) Basic Training Guide
State of Nevada Ektron Content Management System (CMS) Basic Training Guide December 8, 2015 Table of Contents Logging In and Navigating to Your Website Folders... 1 Metadata What it is, How it Works...
More informationWorking with the Ektron Content Management System
Working with the Ektron Content Management System Table of Contents Creating Folders Creating Content 3 Entering Text 3 Adding Headings 4 Creating Bullets and numbered lists 4 External Hyperlinks and e
More informationAbout webpage creation
About webpage creation Introduction HTML stands for HyperText Markup Language. It is the predominant markup language for Web=ages. > markup language is a modern system for annota?ng a text in a way that
More informationAgenda2. User Manual. Agenda2 User Manual Copyright 2010-2013 Bobsoft 1 of 34
Agenda2 User Manual Agenda2 User Manual Copyright 2010-2013 Bobsoft 1 of 34 Agenda2 User Manual Copyright 2010-2013 Bobsoft 2 of 34 Contents 1. User Interface! 5 2. Quick Start! 6 3. Creating an agenda!
More informationTo change title of module, click on settings
HTML Module: The most widely used module on the websites. This module is very flexible and is used for inserting text, images, tables, hyperlinks, document downloads, and HTML code. Hover the cursor over
More informationA quick guide to. Creating Newsletters
A quick guide to Creating Newsletters In this guide... Learn how to create attractive, well-designed HTML and plain-text messages to engage your the template, which can be mobile, responsive. Table of
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 information3. Add and delete a cover page...7 Add a cover page... 7 Delete a cover page... 7
Microsoft Word: Advanced Features for Publication, Collaboration, and Instruction For your MAC (Word 2011) Presented by: Karen Gray (kagray@vt.edu) Word Help: http://mac2.microsoft.com/help/office/14/en-
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 informationAd Hoc Reporting. Usage and Customization
Usage and Customization 1 Content... 2 2 Terms and Definitions... 3 2.1 Ad Hoc Layout... 3 2.2 Ad Hoc Report... 3 2.3 Dataview... 3 2.4 Page... 3 3 Configuration... 4 3.1 Layout and Dataview location...
More informationWYSIWYG Editor in Detail
WYSIWYG Editor in Detail 1. Print prints contents of the Content window 2. Find And Replace opens the Find and Replace dialogue box 3. Cut removes selected content to clipboard (requires a selection) 4.
More informationCHAPTER 10. When you complete this chapter, you will be able to:
Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables
More informationAbout XML in InDesign
1 Adobe InDesign 2.0 Extensible Markup Language (XML) is a text file format that lets you reuse content text, table data, and graphics in a variety of applications and media. One advantage of using XML
More informationECDL / ICDL Spreadsheets Syllabus Version 5.0
ECDL / ICDL Spreadsheets Syllabus Version 5.0 Purpose This document details the syllabus for ECDL / ICDL Spreadsheets. The syllabus describes, through learning outcomes, the knowledge and skills that a
More informationGoogle Sites: Creating, editing, and sharing a site
Google Sites: Creating, editing, and sharing a site Google Sites is an application that makes building a website for your organization as easy as editing a document. With Google Sites, teams can quickly
More informationVirtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.
28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML
More informationMadCap Software. Import Guide. Flare 11
MadCap Software Import Guide Flare 11 Copyright 2015 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is furnished
More informationCaldes CM2: Marketing Emails Support Document v1.12
Caldes CM2: Marketing Emails Support Document v1.12 Caldes Enterprise software can be used to send out marketing email. Due to the nature of these being bespoke designs, Caldes make a one off charge to
More informationSetting up Dynamicweb for Load Balancing with Microsoft ARR for IIS8
User manual Setting up Dynamicweb for Load Balancing with Microsoft ARR for IIS8 [SUBJECT] Preliminary version: [Version] 2015.03.24 English LEGAL INFORMATION Copyright 2015 Dynamicweb Software A/S. All
More informationGoing Above and Beyond
Whitepaper Going Above and Beyond Using Advanced Techniques to Create Customized HTML Templates August 3, 2010 Copyright 2010 L-Soft international, Inc. Information in this document is subject to change
More informationHow to Edit Your Website
How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing
More informationAdvanced Web Design. Zac Van Note. www.design-link.org
Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for
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 informationCreating a Web Site with Publisher 2010
Creating a Web Site with Publisher 2010 Information Technology Services Outreach and Distance Learning Technologies Copyright 2012 KSU Department of Information Technology Services This document may be
More informationBT CONTENT SHOWCASE. JOOMLA EXTENSION User guide Version 2.1. Copyright 2013 Bowthemes Inc. support@bowthemes.com
BT CONTENT SHOWCASE JOOMLA EXTENSION User guide Version 2.1 Copyright 2013 Bowthemes Inc. support@bowthemes.com 1 Table of Contents Introduction...2 Installing and Upgrading...4 System Requirement...4
More informationWebsite Builder Manual
Fasthosts Customer Support Website Builder Manual This is a designed as a definitive guide to all the features and tools available within Website Builder. Contents Introduction... 4 Adding Content... 5
More informationBuilding Your First Drupal 8 Company Site
Building Websites with Drupal: Learn from the Experts Article Series Building Your First Drupal 8 Company Site by Todd Tomlinson July, 2014 Unicon is a Registered Trademark of Unicon, Inc. All other product
More informationTerminal Four (T4) Site Manager
Terminal Four (T4) Site Manager Contents Terminal Four (T4) Site Manager... 1 Contents... 1 Login... 2 The Toolbar... 3 An example of a University of Exeter page... 5 Add a section... 6 Add content to
More informationWHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro
WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com info@velaro.com INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that
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 informationCreating Web Pages with HTML Simplified. 3rd Edition
Brochure More information from http://www.researchandmarkets.com/reports/2248215/ Creating Web Pages with HTML Simplified. 3rd Edition Description: Are you new to computers? Does new technology make you
More informationSellerDeck 2014 Responsive Design Guide
SellerDeck 2014 Responsive Design Guide Version: 1.0.0 SellerDeck 2014 Responsive Design 1 Contents Introduction...3 Themes and Wireframe...4 Classic Theme...4 Smart Theme...5 Wireframe...6 How the Responsive
More information2011 ithemes Media LLC. All rights reserved in all media. May be shared with copyright and credit left intact
Meet Builder. Introducing ithemes Builder, the innovative WordPress theme that operates more like web design software. Unlike other premium WordPress themes, Builder stretches the possibilities of WordPress
More informationHow to Build a SharePoint Website
How to Build a SharePoint Website Beginners Guide to SharePoint Overview: 1. Introduction 2. Access your SharePoint Site 3. Edit Your Home Page 4. Working With Text 5. Inserting Pictures 6. Making Tables
More informationJoomla Article Advanced Topics: Table Layouts
Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand
More informationManaging your Joomla! 3 Content Management System (CMS) Website Websites For Small Business
2015 Managing your Joomla! 3 Content Management System (CMS) Website Websites For Small Business This manual will take you through all the areas that you are likely to use in order to maintain, update
More informationCreating a Restaurant Website
11 Creating a Restaurant Website In This Lesson This lesson looks at the process of creating a small business website, in this case for a restaurant. Starting from a needs analysis, this lesson shows you
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 informationUsing an external style sheet with Dreamweaver (CS6)
Using an external style sheet with Dreamweaver (CS6) nigelbuckner.com 2012 This handout explains how to create an external style sheet, the purpose of selector types and how to create styles. It does not
More informationWordPress websites themes and configuration user s guide v. 1.6
WordPress websites themes and configuration user s guide v. 1.6 Congratulations on your new website! Northeastern has developed two WordPress themes that are flexible, customizable, and designed to work
More informationSuper Resellers // Getting Started Guide. Getting Started Guide. Super Resellers. AKJZNAzsqknsxxkjnsjx Getting Started Guide Page 1
Getting Started Guide Super Resellers Getting Started Guide Page 1 Getting Started Guide: Super Resellers Version 2.1 (1.6.2012) Copyright 2012 All rights reserved. Distribution of this work or derivative
More informationWebsite Builder Overview
Website Builder Overview The Website Builder tool gives users the ability to create and manage their own website, which can be used to communicate with students and parents outside of the classroom. Users
More informationCreating HTML authored webpages using a text editor
GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage
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 informationUSC Aiken CMS Manual. A manual on using the basic functions of the dotcms system. Office of Marketing and Community Relations-USC Aiken
USC Aiken CMS Manual A manual on using the basic functions of the dotcms system Office of Marketing and Community Relations-USC Aiken Table Of Contents Introduction/How to Use Manual... 2 Logging In...
More informationCreating your personal website. Installing necessary programs Creating a website Publishing a website
Creating your personal website Installing necessary programs Creating a website Publishing a website The objective of these instructions is to aid in the production of a personal website published on
More informationIngeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)
Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux
More informationCSE 3. Marking Up with HTML. Tags for Bold, Italic, and underline. Structuring Documents. An HTML Web Page File
CSE 3 Comics Updates Shortcut(s)/Tip(s) of the Day Google Earth/Google Maps ssh Anti-Spyware Chapter 4: Marking Up With HTML: A Hypertext Markup Language Primer Fluency with Information Technology Third
More informationGoogle Docs Basics Website: http://etc.usf.edu/te/
Website: http://etc.usf.edu/te/ Google Docs is a free web-based office suite that allows you to store documents online so you can access them from any computer with an internet connection. With Google
More informationEnhanced Formatting and Document Management. Word 2010. Unit 3 Module 3. Diocese of St. Petersburg Office of Training Training@dosp.
Enhanced Formatting and Document Management Word 2010 Unit 3 Module 3 Diocese of St. Petersburg Office of Training Training@dosp.org This Page Left Intentionally Blank Diocese of St. Petersburg 9/5/2014
More informationKentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1
Contents Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1 Time for action - Viewing the mobile sample site 2 What just happened 4 Time for Action - Mobile device redirection
More informationUOFL SHAREPOINT ADMINISTRATORS GUIDE
UOFL SHAREPOINT ADMINISTRATORS GUIDE WOW What Power! Learn how to administer a SharePoint site. [Type text] SharePoint Administrator Training Table of Contents Basics... 3 Definitions... 3 The Ribbon...
More information7 th Annual LiveText Collaboration Conference. Advanced Document Authoring
7 th Annual LiveText Collaboration Conference Advanced Document Authoring Page of S. La Grange Road, nd Floor, La Grange, IL 6055-455 -866-LiveText (-866-548-3839) edu-solutions@livetext.com Page 3 of
More informationAdobe Dreamweaver CC 14 Tutorial
Adobe Dreamweaver CC 14 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 informationHelp on Icons and Drop-down Options in Document Editor
Page 1 of 5 Exact Synergy Enterprise Help on Icons and Drop-down Options in Document Editor Introduction The following table provides descriptions on the icons and drop-down options that are available
More informationTagging an Existing PDF in Adobe Acrobat 8
Tagging an Existing PDF in Adobe Acrobat 8 Adobe Acrobat 8 allows for elements of a document to be tagged according to their purpose. These tags are not displayed in the document, but they are used by
More informationWEB DESIGN COURSE CONTENT
WEB DESIGN COURSE CONTENT INTRODUCTION OF WEB TECHNOLOGIES Careers in Web Technologies How Websites are working Domain Types and Server About Static and Dynamic Websites Web 2.0 Standards PLANNING A BASIC
More informationActivities Manual. Product Manual. Table of Contents. 1. efolio. 1.1. Overview. 1.2. Benefits
Activities Manual Table of Contents 1. efolio 1.1. Overview 1.2. Benefits 1.3. User Documentation 1.4. Teacher Documentation 2. Page Menu 2.1. Overview 2.2. Teacher Documentation 2.3. Permissions 3. Product
More information