Learning to Code a Wiki in Confluence Links Images Tables Video.

Slides:



Advertisements
Similar presentations
DREAMWEAVER Welcome to our website!
Advertisements

Symbaloo Save, access, and share all of your online resources in one central location!
Chapter 3 – Web Design Tables & Page Layout
How to begin. Step 1 Create a free account with weebly by logging in with Facebook, or using an and password you choose.
KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
Lecture HTML Images. Use for Images Photos and Graphics Buttons for Navigation Bullets for Lists Backgrounds Symbols and Icons Logos.
© Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) Rutgers University
Contact: Fei Gao Office of Information Technology Montclair State University Creating Professional ePortfolios with Google Sites.
Start -> All Programs -> Classes -> Web Expressions -> Dreamweaver.
Introduction to Raster Graphics Resize an image until it is pixelated.
Wikispaces  Step One:  Step Two: Click on Create A New Wiki  Step Three: Type in Wiki Name  Step.
Google Earth How to create a Google Earth Tour and place it in your Wiki.
Designing a Classroom Web Site Using NVU Beginning Level.
Using Dreamweaver getting started 1)Start in your “My Documents” folder 2)Create a new folder called “website” 3)Create a sub folder called “images” 4)Start.
Web Design HTML, Frontpage, DreamWeaver μέρος β ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου.
A guide for UICET for using Wikispaces.  A wiki is a web page or collection of web pages that can be linked together as a website.  Wikis are often.
Making a Virtual Book With PowerPoint 2007 How to make a virtual book Using PowerPoint 2007 This is not a presentation template. This is not the venue.
Macromedia Dreamweaver CS4 Tutorial. Example of the website1 folder & images folder inside Create a folder on your computer called website1 to hold all.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
Dreamweaver – Setting up a Site and Page Layouts Web Design Section 7-2 Part or all of this lesson was adapted from the University of Washington’s “Web.
MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.
© Ms. Masihi.  The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files,
Creating your Webpage with tables. This is a 2 column by 1 row table!
Chapter 4 Adding Images. Chapter 4 Lessons Introduction 1.Insert and align images 2.Enhance an image and use alternate text 3.Insert a background image.
1. On Your Desktop, Click “Start” 2. Click “All Programs” 3. Click “Microsoft Office Tools” 4. Click “Microsoft Photo Editor” Posting Pictures on Your.
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
DREAMWEAVER Adding photos and other tips!. Making photo gallery  Gather ALL the photos you need into your images folder. (remember to copy the URL so.
Mozilla Suite 1.7 Web Browser and newsgroup client, IRC chat client, and HTML editing Download:
Chapter 12 FRAMES. HOW FRAMES WORK When you view a framed page in a browser, you are actually looking at several HTML documents at once. The key to making.
Open Dreamweaver Start All programs Adobe design and web premium Adobe Dreamweaver.
Creating webpages in Google Sites. 1- Create a Gmail account.
Dreamweaver MX BTA3Open. Dreamweaver MX Application used for creating web sites Homepage must always be saved as index.htm All files names must be in.
JUX 1 12/26/2012 JUX Creating in Jux allows you to present your images, captions, text, blogs, etc. in a creative format. Create an Account Login at
Website Editing From Gingerweb. Re-size your image first Before you start with adding an image to your site it must be resized to suit your page. An image.
Moodle with Style Integrating new technologies to empower learning and transform leadership.
Sports Website Creation. In this project you will design and produce your own website.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
***Adding items to your Etudes Homepage*** Log into Etudes
Using an HTML image (img) element’s onclick event to change the source (src) of an iframe to an embedded youtube video.
MIS 201 Web Design 1. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.
Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.
Teacher Web Page Creation Eileen Musselman. Log on to Muhlenberg’s Intranet Click Submit button.
Macromedia Dreamweaver MX2004 Tutorial. Create a Folder Called: website1 Save All webpages & graphics inside of your website1 folder index.html math.html.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
By: Ms. Abeer Helwa 1. CREATE A WORD DOCUMENT 2 Blank document Templates To create a new blank document: click the File tab and click Blank document.
January 2006Colby College ITS Setting Up Course Pages.
Teacher Websites TALIA R. COTTON. Teacher Websites Log In  To log in to your teacher website  Select Staff only on EGHS Website  Type in your .
Paper 3 Unit 15 – Web Authoring Software Choices Graphics Exporting Graphics Creating CSS RGB Colour CSS – Body, Table and TD Border Collapse Tables -
Tech Training 12/16/19 How to add a post How to edit a post How to add & assign a category How to add tags.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Integrate Google Drive Apps With VLE-Frog
Presented by Rachael Libolt Wiki Workshop PB Educator Wiki. Retrieved,March 23,2008, from
Creating a Google Site For a Digital Portfolio Purpose.
Dreamweaver – Setting up a Site and Page Layouts Web Design Section 7-2 Part or all of this lesson was adapted from the University of Washington’s “Web.
Embedding Videos and Slideshows. (Click on any question you have to go directly to the answer, while in presentation mode)
© Ms. Masihi.  A Web page contains text and images that convey specific information to viewers.  To create a new web page, open Dreamweaver and select.
Unit 15 – Web Authoring Web Authoring Project.
Group work Create your Wiki with Wikispaces.com.
How to customize your Microsoft SharePoint Online website
How to customize your Microsoft SharePoint Online website
MIS 201 Web Design.
Basic HTML and Embed Codes
Create and edit web pages 2
Web Content Management
How to customize your Microsoft SharePoint Online website
Dreamweaver Basics.
2. Press Browse and search for the video file you need.
Making a website.
Facebook Facebook Timeline Specs Facebook “Page” Specs
Setting the Default Thumbnail Image for SB3 Websites
Presentation transcript:

Learning to Code a Wiki in Confluence Links Images Tables Video

 Anchored Links  Links that move to different parts of the same page  These need to be used in your Table of Contents  Link: [History|#history] ▪ The word after the # is the name of the anchor. ▪ Make sure it is 1 word and all lowercase letters  Anchor: {anchor:history} ▪ This is the anchor. ▪ The word after the : needs to be the exact same name after the # in the code above.

 Links that go to a different website.  Put the URL between [ ]  To have the URL show up in the Wiki as a link do this: [ ▪ It will like this in preview mode:  To have a word be a link in the wiki, do this: [Purdue| ▪ It will look like this in Preview Mode: Purdue

  To search for a high quality image:  Select Show Options  Select Larger than…400x300 for the Image Size  This will make sure your images are not blurry or pixilated  Never increase the size of an image you find.

  To Resize an Image:  Go to picresize.com and upload your image  Select Custom Size  Put in a width for your image (usually 400px).  Change percent to pixels.  NEVER put in a height.  Scroll to the bottom and click Resize Pic!  Save Image to Disk

 Can be done in Rich Text and Wiki Markup  In Wiki Markup  Click the Insert Image Icon at the top.  Upload your image.  Pay attention to the file name.  When the thumbnail appears, click OK.  Code to insert the image: !filename.jpg!

 To create a table in your Wiki, place text and elements between ||  This will make one row with two columns: |Row 1, Column 1 | Row 1, Column 2 |  This will make a table with two rows and three columns: | Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 | | Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |

 Make sure you don’t put an extra space between the two lines of text or you will create two separate tables with one row: | Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 | | Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |  Adding a \\ after a line will allow you add elements to additional lines: | Row 1, Column 1 | Row 2 column 2 \\ Row two, column 2, line two | | Row 2, Column 1 | Row 2, Column 2 \\ Row 2, Column 2, line two |

 To add a video to your wiki use this code: ▪ {widget:url= }  After the = put the URL of the video  Example: ▪ {widget:url= Hry0}  This will embed a video in the Wiki.

 Be sure to take the survey about the coding lesson.