Skip to main content

Trinity College Dublin, The University of Dublin

Trinity Menu Trinity Search



You are here Web publishing (www.tcd.ie) > Working with Dreamweaver > Creating a new page

Creating a new page

This page gives information and instructions on how to create a new page in an existing website via Dreamweaver.

To perform the tasks outlined, you will need a PC / Mac with an internet connection, a working Webauthor Account and a copy of Adobe Dreamweaver.

To make changes to a Trinity website, while working remotely, you must be connected to the college VPN.

If you are new to being a webauthor, it may be beneficial to read the section 'Further Information' first.

Creating the content

There are two approaches you can take to creating content. The first approach is to create a new folder and index.php file, and then add your content. The second approach is to duplicate an existing folder and index.php file, rename the folder name and update the content.

The steps for both options are outlined below.

Option 1: Start from scratch

Create your folder

The URL that we wish to create is tcd.ie/astronomy/structure/ therefore we need to create a folder called 'structure'. (See Folders and files on the Web Server below).

Adding folders and files can be done via the Dreamweaver Files Panel*.

* The 'Files panel should be located on the right-hand side of the screen. If you cannot see it, use the top menu and select 'Window > Files'.

  • Using the 'Files Panel', right click on your top-level folder
  • Select 'New Folder'
  • Rename the folder to 'structure'

Create your index.php file

Inside of the 'structure' folder that we just created, create an index.php file.

The index.php will be where you will add the content that appears on the page.

  • Using the 'Files Panel', right click on your 'structure' folder
  • Select 'New File'
  • Rename the file to 'index.php'
  • Ensure that the extension on the file is .php and not .html

Edit your index.php file

Remove default generated code

When you add a new file via the above approach, Dreamweaver will automatically add default code that is viewable via the 'Code' view.

The code should look like this:

Default generated code.

You do not need any of this default code, so the best option is to highlight it all and delete.

Add the PHP include statement

Once you have removed all the default code, you will need to add a line of PHP code to the top of the 'Code' view. Adding PHP code to the design view will not work.

The line of PHP will start as follows:

<?php include_once $_SERVER

// The full line of PHP has been hidden for security reasons.

The full line of PHP has not been shown above for security reasons. To get the full line of PHP, open an existing index.php file from the web server and copy and paste the full line to your page.

Add your content

Once the above steps have been completed, you can add content either via the 'Design' view or via the 'Code' view.

Option 2: Duplicate existing content

An alternative approach to making a new folder and index.php file, is to duplicate an existing folder and index.php file and then rename the folder. After renaming the folder, you can update the content.

Duplicate and rename

  • Using the 'Files Panel', right click on an existing folder that has an index.php file
  • Select 'Edit' > 'Duplicate'
  • On the duplicated folder, select 'Edit' > 'Rename'
  • Rename the folder to 'structure'

Edit your index.php file

Delete the existing content in the duplicated index.php file and add your own

Open the duplicated index.php and remove the existing content. You can then add your own content via the 'Design' view or via the 'Code' view.

Upload the content

To view the page on the website, upload the index.php in the 'structure' folder.

'Put' (Upload) your file to the Web Server

  • Highlight the file you wish to upload.
  • Click on the 'Up' (⇧) Arrow.
  • If the upload has been successful, you should see a popup box show for a few seconds and then disappear.

View your page in the web browser

To view the page in a web browser (e.g. Google Chrome), open the browser and navigate to the folder URL. In our case tcd.ie/astronomy/structure/

Further Information

What a URL address is

A URL address is the address of a web page on the internet. For example, the URL address for our sample 'Astronomy' site is tcd.ie/astronomy/

Folders and files on the Web Server

The folders and files that you create on the Web Server are directly translated into URL addresses that people can get to via the web browser.

How folders and files on the Web Server are translated into URL addresses.

Best naming practices for folders and files

To achieve an 'easy to read' URL address, you should follow the following steps.

For folder names

  • Lowercase every letter.
  • Remove non-essential words e.g. 'and', 'or', 'the', etc.
  • Add hyphens between words (no spaces). Spaces in URL's are output as ''%20' and so are hard to read.

For file names

  • Where possible, create a folder with only one file inside of that folder. You should name that file index.php
  • The benefit of this approach is that the index.php is a special filename as far as the Web Server is concerned. If you do not specify a filename in the URL, then the Web Server will automatically load the contents of the index.php file that is inside of that folder. For example, if you browse to tcd.ie/astronomy/about/ you will see the same content as you would at tcd.ie/astronomy/about/index.php
The contents of the index.php file will be loaded automatically by the browser.

'Code' vs 'Split' vs 'Design' view in Dreamweaver

In Dreamweaver, when you open a file such as an 'index.php' file, Dreamweaver will open the page in the 'Design' View. The 'Design' view will give you a visual representation of what HTML will look like in the web browser.

To switch to 'Code' view, you can click on 'Code' at the top of the main editor.

To view both the 'Code' and the 'Design' at the same time, you can use the 'Split' view option.

Code / Split / Design view.

Previous: Defining a site

Next: Editing an existing page