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
In the below examples, we are showing how you would create a new page called 'Structure' that would be viewable at the URL address > tcd.ie/astronomy/structure/
To implement the steps on your website, you would just assume 'Astronomy' is replaced by the website you have access to (e.g. Dental, Biology, etc) and 'Structure' would change to whatever you want to call your page.
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'
Remember to keep folder naming best practices in mind when naming your folder. See 'folder naming' section below for more details.
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
To change the default 'New File' extension type from HTML to PHP; using the top menu, go to Edit > Preferences > New Document and change the first 'Default document' dropdown to PHP.
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:
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.
This line of PHP code will ensure that the Trinity header and footer are visible when the page is viewed in a web browser.
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/
If you are using the 'Trinity Theme 2015' templates and require the new page to appear as a link in the sidebar navigation menu, then check out the Sitemap Editor.
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.
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
'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.
On older versions, of Dreamweaver, the Code / Split / Design buttons are on the top left whereas in the latest version of Dreamweaver they are in the top middle of the screen.
Next: Editing an existing page