Making My Website – What I Have Done

This post is dedicated to showing the process behind creating my website and adjoining blog. Below you will find notes and screenshots on aspects I installed or changed deliberately, in order to create a more aesthetically pleasing or technically adequate website:

Downloading WordPress:

  • When I went on to vidahost.com to create my hosting space, during the sign up stage I opted for the company to install WordPress for me
  • This meant that the index page of my website was the new WordPress blog – not what I wanted
  • Instead, I wanted to create a separate page for my WordPress blog that I could navigate to from my homepage
  • This meant that I had to go to my File Manager within the Control Panel and delete the WordPress files that were already installed (leaving behind the cgi-bin file)

Downloading WordPress 1

Downloading wordpress

  • I then clicked on WordPress under the Softaculous App Installer, which took me to another page, and selected Install

Downloading WordPress 2

  • All of the settings were then filled out for me, including the protocol (http://), domain name, in directory (wp), etc. but I had to change my admin name, email, and password
  • Clicking Install again, then meant that it was added to my File Manager and allowed me to visit the blog by typing /wp after the domain name

Downloading WordPress 3

  • To get to the admin page of my WordPress blog, in order to change any settings I desired and add any posts, widgets, or plugins, I then typed /wp-admin after the recent, longer domain name and logged in using the new admin name and password

Downloading WordPress 4

Creating a Homepage:

  • To create a home page for my blog with a brief description on what is going to be shown through my blog, I first had to create a new page

new page

  • I then had to give this page a title and write out the content I wanted to use as the main body of text – almost identical to adding and writing a post

Blank New Page

  • I then decided to delete the sample page that was provided to me by going back to the main Page settings, clicking on the desired page, and pressing Trash

Main page settings - trash

  • I then wanted to make this home page the first page the user visits when entering this blog and so I went to Settings, Reading, clicked on Static Page and Selected Home from the first dropdown menu (Front Page)

Homepage

Homepage2

  • After I had completed creating this homepage, I then realized that this blog isn’t going to be an individual blog, but in fact an add-on to my website
  • I therefore referred back to my website plan and decided on changing my homepage so that it was a feed of my more recent posts
  • I then went to Settings, Reading, and then selected the Use Recent Posts

Changing the homepage

  • I then had to change my Home page into a post so I simply went to this Home Page, and copy and pasted the content into a new post
  • Once this post was uploaded, I then went back to the Page menu and deleted the Home page I had created

Adding a new post

Blog

Installing Plugins: 

  • To install a plugin, such as Akismet (see below), I went to Plugins then Add New
  • This then brought up a search bar where I searched for Gallery
  • I then clicked on the desired plugin (NextGen Gallery) and selected Install

plugin search

  • I then had to go back to the main plugin settings panel, scrolled down to my recently installed plugin, and selected Activate (this then turns to Deactivate once activated)
  • (This plugin, NextGen Gallery, allows me to have a wider range of gallery settings when wanting to incorporate a gallery into one of my blog posts)

Plugins

Akismet:

  • As stated before, Akismet is a plugin
  • This particular plugin stops spamming of any kind, including spamming comments
  • This was already included within WordPress without any need of extra installation

Plugins

  • To activate this plugin though, I had to get a code by creating an Akismet account
  • I therefore had to choose Activate, then Get An Akismet Account (which redirected me to their webpage) and type in any information that was required before receiving this code

Akismet

  • I then went back to this plugin, selected Activate, then I already have a key, before copying and pasting this special code and choosing Activate
  • This plugin allows my website to join and gain information from a separate server so that it works in the background, simultaneously with my blog

General Settings:

  • I then thought that one of the best places to start was by looking at the General Settings of my WordPress blog
  • I therefore went to Settings, General, and ended up changing the blog title and tag line to make the blog easier for the users to understand

General Setting

Appearance:

  • (Note: Any of the appearance may need to be changed once I start creating my actual website in order for it to look like a more collaborative piece)
  • When starting to customize the appearance of my WordPress blog, I decided to start with my profile customization
  • I clicked on my profile, and then simply chose the colour of the WordPress sidebars that I thought were more aesthetically pleasing

Profile customisation

  • My next step was to then decide upon a theme I wish to show throughout my WordPress blog
  • To do this, I went to Appearance, Themes, then Add New and decided that a good starting point would be to search for the key term “Photography”

Add new theme

  • Any of the themes that grabbed my attention, or looked aesthetically pleasing to me, I was able to preview

Preview theme

  • If I liked the look of them from the preview, I could then choose to install them to my WordPress account (this does not activate them, but simply holds them in the easy to reach Themes folder)
  • I therefore installed four themes that I was debating to use

Installed themes

  • Once these four themes were in my Theme folder, I could then choose to view a live preview, where it would show me what my current blog would look like with this particular theme

Theme activate and live preview

  • In this live preview, I could then customize the theme by changing the title and tagline, colours, and background image
  • Once I had done this, I could then Save these changes and Activate this theme

Customise theme

  • Ta-dah – this is what my WordPress blog now looks like:

Blog

Adding posts from my previous blog:

  • To fill out my current blog a bit more, I then decided that I wanted to import posts from my previous blog (hollyconstantinephotography.wordpress.com)
  • I therefore had to log into my previous blog (in a separate tab) before going to Tools, Export, Posts, and then choosing the Category “Digital Media”

Exporting posts from original blog

  • I then downloaded the Export File and saved it to my desktop so that it was easy to find

Downloaded exporting file

  • Once this was completed, I went to my new blog (in the separate tab) and chose Tools, Import, WordPress

Importaing posts from previous blog

  • I then had to Install the WordPress importer by simply clicking the install button

Installing Importer

  • Once it this was uploaded, I then selected Run Importer where it asked me to upload the Export file that I had received from my previous blog

Choosing import file

  • I then clicked Upload File and Import

Upload file and import

  • The posts that I imported, could then be found with the current posts

Posts - including imports

  • These posts were also automatically published onto my WordPress blog after agreeing who the Author was

Assigning authors

  • I did, however, have to edit these imported posts slightly as, due to the different themes, the formatting had changed in some areas
  • As I wanted to show the more recent posts (the ones I imported) first on my feed, I also had to change the date of the imported posts by clicking Quick Edit on the post and changing the date and time

Quick edit - date and time

Widgets (Twitter):

  • As you may have also seen from my website planning, I want to try and download a Twitter widget to be seen at the side of my WordPress blog
  • This would allow my blog to be connected to a third party whilst also making it look more professional and allowing the user to see more a live update of my professional Twitter page
  • To do this, I started by going to Twitter and creating the widget from there which only required me to choose what I wanted to include in my widget before choosing Create Widget

Creating a Twitter widget

  • I then went back to my WordPress blog to try and see where I could put the html code that I received when creating the widget
  • Unfortunately, I couldn’t find where I was required to place it on my blog
  • I therefore decided to try and research the problem

Bring Twitter to your blog research

  • But, unfortunately, I could only find answers that were relevant for previous WordPress blogs and couldn’t find any information about the problem for this recent version
  • I will continue to research this problem and hopefully find a solution in which I will update you with

Learning about Dreamweaver and its Interface:

  • We have learnt about Dreamweaver and its Interface in order to help us create the website we desire
  • Dreamweaver is basically a web publishing software
  • On the first Dreamweaver workshop, we simply learnt about it’s interface, saving a webpage, making a webpage, and making a dive tag

Interface

  • The first thing we learnt to do was simple: how to open the Dreamweaver software and Create a New HTML

Open Dreamweaver New HTML

  • We were then taught how to put the interface into split mode so that we could see the code on the left hand-side, and the preview on the right hand-side

Split mode

  • The next thing we learnt was about the Multiscreen button which allowed us to choose what digital device we wanted to make our webpage for

Multiscreen button

  • We were then introduced to the Preview/Debug in Browser button which allows us to view the preview using different Internet programmes such as Safari, and Google Chrome

Preview Debug in Browser

  • We were then asked to change the title of the webpage as this would be the name that appeared in any Google searches
  • To do this, we simply typed in a new name in the box that original said Untitled-1 (found in the centre at the top of the split screen)

Title

  • After this, we were then introduce to beginning and end tags
  • The beginning tags always open and close with the pointy brackets < > whereas, the end tags have a / after the first pointy bracket and before the name of the tag
  • A body tag basically means that it is in the body of the page – everything we want on our website needs to be between the body’s beginning and end tags
  • (The example shown below is the title tag)

Beginning and End Tags

Saving the Webpage

  • We then, obviously had to learn how to save the webpage we were about to create
  • We were told to go to file, save…

Save

  • Then choose where we wanted to save it, and save it as index.htm (only using lowercase letters)

Folder and index

  • We were then asked to go to window, files, which bought up a little file box found at the bottom right of the interface

Window, files

  • We then selected manage sites, new site…

Manage site, new site

  • Then we were asked to save it as something simple (for example, holly site), before choosing the same folder that we placed the index.html file in and clicking save

save as holly site, folder

  • To complete this action and close down this window, we then had to press done

Done

Making a Webpage

  • Now, as we are making a website for this module, our lecturers thought it would be a good idea to teach us how to make a webpage using the Dreamweaver software
  • To do this, we started by going to file, new, CSS, then create

File, new

CSS, create

  • CSS uses elements, and for these elements to work, we need to use the curvy brackets { } to open and close the code

elements

elements example

  • We were then told to save this CSS file by clicking file, save, calling it style.css, and saving it in the same folder as the index.html file

save css

  • We were the told that the index and style sheet were not yet associated and so we needed to merge them to allow them to collaborate
  • To do this, we had to go back to the index document, go to the CSS styles window (found to the top right of the interface), click on the little menu button in the top right corner, then choose attach style sheet, find the style sheet we just made, and select it

index page, css styles

menu button, attach style sheet

style file made earlier

  • Once this was done, the two pages are collaborated, so when you change something on the style sheet, it automatically changes on the index page
  • After this was completed, we were then told that if we go to the file menu and press save all, it saves everything that is open

save all

  • The next thing we learnt was how to create a new tag
  • To do this, we had to go back to the index document, go to the CSS styles window (found to the top right of the interface), click on the little menu button in the top right corner, then choose new…

index page, css styles

new

  • Once this new window came up, we then had to choose tag, then choose body, and press okay
  • This then opened up another window where we could define the types, background, block, box, border, list, positioning, extensions, an transitions
  • Once we changed the desired settings, we then had to press okay

choose tag, body, okay

  • The advantage for having a style sheet is that you can use the same style sheet for different webpages, and so if you wanted to change something on all of the webpages, instead of changing them individually, all you would have to do is change the style sheet

Making a Div Tag

  • A div tag defines a division or a section in an HTML document, and is also used to group block-elements to format them with CSS
  • To make a div tag, we first had to go to insert, layout objects, then div tag

insert, layer objects, div tag

  • This then brought up a separate window where we had to choose insert at insertion point from the drop down menu, then give the div tag an ID (in this case, we called it wrapper which will be used to hold all of the webpage information)

insert at insertion point

  • We then selected new CSS rule, then style it in the style sheet we already made by choosing the style.css file, then okay

new css rule

Creating My First Draft Of An Index Page:

  • After being taught the simple, first steps of using the Dreamweaver software, I thought that the best thing to do would be to experiment with creating my first index page
  • I started by following all of the steps stated above, but then started customizing different areas
  • To start customizing, I needed to create a new tag
  • To do this, I had to go back to the index document, go to the CSS styles window (found to the top right of the interface), click on the little menu button in the top right corner, then choose new…

New tag

  • Once this new window came up, I then had to choose tag, then type in body, and press okay

Tag

Tag body

  • This then opened up another window where I could define the types, background, block, box, border, list, positioning, extensions, an transitions
  • To start with, I decided to change the background to a light grey colour by going to the background menu and choosing a colour from the background colour drop-down menu

tag menus

background colour

  • This then created a background colour element in the style.css code

background colour element

  • After this, I then needed to create a new div tag
  • To do this, I went to insert, layout objects, then div tag
  • This then brought up a separate window where I had to choose insert at insertion point from the drop down menu, then give the div tag an ID (in this case, I called it wrapper which will be used to hold all of the webpage information)
  • I then pressed New CSS rule

new div tag

insert div tag window

  • Another window then popped up where I had to choose tag, then type in body, and make sure that the folder selected was the style.css file I made earlier, before pressing okay

Tag body

  • After this was completed, yet another window popped up which was the customization window for the tag that I had just created

tag menus

  • In this window, I decided to start by going to the Type menu
  • I then wanted to add a new font to the list so chose edit font list from the font drop down menu

edit font list

  • This then brought up a different window all together where I was able to scroll through the fonts available and choose the desired one (in this case, Letter Gothic std)

letter gothic std

  • Once adding this font to the list, I then returned back to the dropdown menu and chose it

choose font

  • I then went through and changed the font size, style, and colour, by choosing from the drop down menus provided

font size

font style

font colour

  • After I had finished changing these aspects, I then went to the block menu and put the text-align setting to centre

text align

  • Following this, I then went to the box menu and un-ticked the box that said same for all in the margin section
  • I then changed the left and right margins to auto which would allow the box to be centred, and changed the width of the box to 900 pixels and the height to 500 pixels

box

  • This is what my creation looked like after this point

what it looks like

  • Once looking at my creation so far, I thought it looked good but soon realized that it didn’t really resemble what I was trying to achieve in my plan
  • I therefore decided that I wanted to change both the font colour and background colour by going back to the menu window (this can be found by double clicking on the style.css file in the top right corner of the interface)

change font colour

change background colour

  • After these settings were changed, this is what the index page looked like in the Dreamweaver software

what it looks like after changes

  • As I was happy with how it looked, I then decided to go to file, save all to save the project

save all

  • I then opened up my Safari web browser and went to my control panel for my website
  • Once this was open, and I was logged in, I then chose file manager and pressed Go on the pop up window

control panel file manager

go

  • I then needed to upload the index.html file to my control panel, so I chose upload from the main screen, then navigated through my folders to find the index.html file

upload

upload choose index file

  • Once this was uploaded to the control panel, I then thought I would take a look at what it looks like by going to my web address
  • What it looked like can be found below:

what index file looks like

  • As you can see, the website design looked completely different to what it looked like in the Dreamweaver software and so I decided that for now, I would delete it until I could come up with the solution as to why it looks like this
  • (I then remembered the “Multiscreen” button that we looked at above, which shows you that what is created in Dreamweaver will look different depending on the digital device)
  • To delete it, I simply went back to the file management folder of my control panel, selected the index.html file, and pressed delete, then yes

index file

delete

Creating My Second Draft Of An Index Page:

  • As I wasn’t happy with my first draft of my index page, I thought that I would revisit it to see if I could improve it in any way
  • I started by opening my previous index.html file in Dreamweaver and decided to change my font to a style that was already included in the type list as I was told that these three internet programmes may not recognize the font I had originally chosen
  • To do this, I double clicked on the #wrapper tag found in the CSS style window (top right corner of the interface) and chose Type from the list of menus at the left side of this window
  • I then clicked on the font drop down menu and chose my desired font (in this case Courier New)

font

  • I then went to preview it in Safari, Firefox, and Google Chrome using the multiscreen button

Safari Preview 1

Firefox Preview 1

Google Chrome Preview 1

  • As you can see from the above screenshots, the text within the document needs moving to the right in order to make it more central
  • To do this, I decided that I would try an find out how wide a website window was for this particular computer
  • I started by going to the little apple logo at the top left of my screen, then choosing about this mac

about this mac

  • Once this window appeared, I then chose more info, then displays

more info

displays

window

  • This final window then told me that the display for this particular mac was 1280 x 800 pixels
  • I then went online and typed in “how many pixels wide is a safari page?” and then went to http://www.websitedimensions.com
  • Through this research, I think it suggested to create a document, or in this case a box, to the dimensions of 1885 pixels width by 980 pixels height

research

  • I then went back to Dreamweaver and opened up the CSS rule definition window of the #wrapper tag
  • Once this window opened up, I then selected the box menu from the list of menus on the left
  • I then decided to change the width of the box to 1885 pixels (as suggested through my research)

change width and height 1

  • Once this was applied, I then decided to preview it again in Safari, Firefox, and Google Chrome

safari preview 2

firefox preview 2

google chrome preview 2

  • As you can see from the previous screenshots, this didn’t work as the text was aligned way to the right
  • The next thing I experimented was changing both the width and height to 100% by going back to the CSS rule definition window

height and width 100

  • I then previewed this change in Safari, Firefox, and Google Chrome

safari preview 3

firefox preview 3

google chrome preview 3

  • This made the text slightly to the right of the centre, but it was progress
  • I then went back to the CSS rule definition window, again, and changed the width to 95% which made the Dreamweaver visual look like so:

change width to 95

what it looked like

  • I then previewed this change in all three internet examples, Safari, Firefox, and Google Chrome

safari preview 4

firefox preview 4

google chrome preview 4

  • As I was happy with the way that it looked, I thought that I would upload this file to my website
  • I therefore opened up my Safari web browser and went to my control panel for my website
  • Once this was open, and I was logged in, I then chose file manager and pressed Go on the pop up window
  • control panel file manager

    go

  • I then needed to upload the index.html file to my control panel, so I chose upload from the main screen, then navigated through my folders to find the index.html file
  • upload

    upload choose index file

  • Once this was uploaded to the control panel, I then thought I would take a look at what it looks like by going to my web address
  • What it looked like in Safari, Firefox, and Google Chrome can be found below:

safari final

firefox final

google chrome final

  • As you can see, the website design looked completely different to what it looked like in the Dreamweaver software and so I decided that for now, I would delete it until I could come up with the solution as to why it looks like this
  • To delete it, I simply went back to the file management folder of my control panel, selected the index.html file, and pressed delete, then yes
  • index file

    delete

Making a Construction Page:

  • In a Dreamweaver workshop on Monday 27th January 2014, we were taught how to go about creating a Construction Page for our website in order to allow the viewer to see that it is not yet complete, and to offer them links to different websites that may be more useful
  • To do this, I started by opening a new Dreamweaver html file

New html

  • I then went to Site, New Site and changed the site name to “Construction Page Site” while also saving it in the in a new folder called “Construction Page”

Site, new site

change site name, folder, save

  • I then right clicked on the site folder (found bottom right of the interface) and chose New File, before renaming the file index.html

right click, new file

call it index

  • Following this, I then closed the untitled file that was left at the top of the interface

close untitled file

  • I then renamed the title of the index.html file to “Holly Constantine Photography (Under Construction)”

rename it

  • Once this was completed, I then wanted to insert a div tag
  • To do this, I went to Insert, Layout Objects, Div Tag and chose Insert at Insertion Point and named the Class “Container” (in the new window) before clicking Ok

insert, layout objects, div tag

insert at insertion point...

  • A text box then appeared where I deleted the text within it before going to Insert, HTML, Text Objects, H1

delete text in text box 1

insert, html, text objects, h1

  • Once this was inserted, I then typed in “Holly Constantine Photography (Under Construction)”

type in holly constantine photography...

  • To add an accompanying paragraph, I then went into split view and made sure that the cursor was outside the H1 tag within the code before selecting Insert, HTML, Text Objects, Paragraph

split view

make sure cursor is outside the h1 tag

insert, html, text objects, paragraph

  • I then wrote a little biography in this section before moving the cursor outside of the h1 tags
  • I then went to Insert, HTML, Text Objects, then Unordered Lists

write a little bio

insert, html, text object, unordered list

  • In the code, I then pressed enter after the open ul tag then chose Insert, HTML, Text Objects, List Item

in the code...

insert, html, text objects, list item

  • Between the beginning and closing list tags I then wrote “Digital Media Blog”

write digital media blog

  • Once this was written in, I then moved the cursor outside the list tags and chose Insert, HTML, Text Object, List Item again
  • (You can do this as many times as required, but for this example, I only did it three more times)

insert, html, text object, list item 2

can do this as many times as you like

  • (After realizing that I am yet to save this document, I then quickly went to File, Save, and chose the Construction Page folder I had made prior to opening the Dreamweaver Software)

file, save all

  • I also, obviously, wanted to give these list items a link
  • To do this, I simply highlighted the text I wanted to link, then copy and pasted the desired URL into the link box found in the Properties window at the bottom of the interface

copy and paste desired url

paste desired url

url 2

url 3

url 4

links - what it looks like

  • The next step was to work with FTP
  • I began by getting my email up from vidahost (the company where I got the hosting and domain name from) that was called “Hosting Account Welcome Email – Important, Please Read”, and found the section that was called “FTP Details”
  • I then went to Site, Manage Sites, and selected the same site that I used for the index.html file before choosing the edit button

site, manage sites

choose the site you are using

  • I then went to the Server menu found on the left of the window and chose the add button

server menu, add

  • This then brought up a separate window where I changed the server name to “Holly Constantine Photography”, the FTP address to the FTP hostname given within the email, and entered my username and password before choosing Test

server name, address...

test result

change root directory, url, save

save

done

  • Once I was back on the main index.html document, I then chose Connect to Remote Server (found at the bottom right of the interface) before clicking on the Expand to local and Remote Site button (also found at the bottom right of the interface)

connect to remote server

expand to show local and remote site

  • This then bought up a separate window where I clicked on the www file on the left hand side, then clicked on the index.html file on the right hand side, and selected the Upload button, then Yes

choose www, index, upload

yes

  • Doing this connected my new index.html file to my website

Adding a Style Sheet to my Construction Page:

  • After creating my Construction Page, and although I am yet to be taught how to do it, I thought I would experiment with adding a style sheet to the index.html file I had just created
  • I therefore began by opening up my recently made index.html file in Dreamweaver
  • I then went to File, New, then selected CSS and Create

file, new

css, create

what the css document looks like

  • Once this new document was open, I then went to Site, Manage Site, chose the Construction Page Site, and clicked Done

site, manage sites

construction page site, done

  • The next step I wanted to do was to save my newly made file, and so I went to File, Save As, then directed myself to the Construction Page folder (mentioned earlier), called it style.css and clicked Save

file, save as

  • The next thing to do was to insert a tag
  • I therefore right clicked on the style.css file (found in a window to the top right of the interface) before selecting new, then choosing tag, writing in “body”, and clicking Ok

right click, new

choose tag, body, ok

  • This then brings up a separate window called CSS Rule Definition

css rule definition

  • As you can see, on the left of this window is a number of menus relating to properties found within the CSS file
  • I then went through each of these menus and changed any of the desired settings before clicking Ok

type

background

block

  • (This is what the CSS coding looked like after I had made these changes)

what the code looks like

  • I then went back to the index.html file before clicking on the menu button found on the top right of the CSS Styles window (top right of the interface), before selecting attach style sheet
  • This then opened up another window where I navigated to the style.css file I had just created before clicking Ok

go back to index file

menu button, attach style sheet

  • (This is what it looked like after this process)

example of index with style sheet

  • I then chose Connect to Remote Server (found at the bottom right of the interface) before clicking on the Expand to local and Remote Site button (also found at the bottom right of the interface)

connect to remote server and expand

  • This then bought up a separate window where I clicked on the www file on the left hand side, then clicked on the index.html file on the right hand side, and selected the Upload button, then Yes

www, index, upload

yes to all

  • After this was completed, I then opened up my website in the three main internet software’s (Safari, Google Chrome, and Firefox) to see what it looked like

safari

google chrome

firefox

  • As I was happy with it’s appearance, I decided that I was going to keep it until I update my website at a later date
  • (I am not, however, 100% sure about the bullet point layout, so will take time to research this and try to change it so that the bullet points are either next to the text or not there at all)

Individual Tutorial Questions:

On Monday 3rd February 2014, I had an individual tutorial with Alex Edwards (third year photography student) in order for him to help me with any questions I had about Dreamweaver and creating my website. Below you can find the questions I asked, along with the process answers and screenshots:

How do you get rid of bullet points?

  • First, you start by opening the index.html file you wish to edit in the Dreamweaver software
  • Then you click on the source code and find the <ul> tag in the code before replacing it with <ul id-“menu”>

index file, source code

ul id menu

  • You then need to add a new CSS rule for menu by clicking on the ad CSS rule button found in the middle to the right of the interface
  • When this window appears, you need to choose compound and call it #menu then press okay
  • In the new CSS rule definition window that will appear, you then go to list, then list-style-type and select none from the dropdown menu

add a new css rule for menu

list, list-style-type, none

  • To then makes this list inline, you then need to add another CSS rule for menu, choose compound, and call it #menu li
  • Again, in the new CSS rule definition box that will appear, you then need to go to box, unclick same for all under the margin section, and type in 50px into right

add another css rule for menu

box, margin

How do you make the box appear in the centre of the page?

  • You start by double clicking on the Body CSS rule (found top right of the interface) which will bring up this separate window
  • In this window, you then need to choose the Box menu and change the width and the height to 80%
  • Then, under the margin section, unclick same for all and type in auto under right and left, and 10% under top and bottom (box is 80%, what is leftover is 20%, divide this by two – for top and bottom – equals 10% each)

css rule definition window for body

box, change settings

How do you add another page other than an index page?

  • When uploading the new index.html file to the server, just remember to rename the under construction index.html file
  • It is also suggested that I make a new site for different pages

How do you fade text in and out?

  • Suggested that I don’t do this as it is advanced aesthetics and we want the webpage to be accessible as possible, decreasing the awkwardness for the audience
  • Also suggested that we go straight to the website but a splash page is optional and depends on personal opinion

How do I download Twitter on to my WordPress blog?

  • Need to start by signing in to my Digital Media WordPress account
  • Go to Plugins, Add New, and search for Jetpack
  • Once this menu has appeared, choose Jetpack by WordPress.com and click on Install Now

plugins, add new

jetpack, install now

  • After it loads, click Activate Plugin

activate plugin

  • Then go to the Jetpack Plugin (found at the top left of the interface) and click Connect to WordPress.com
  • This will take you to another page where you then need to click Authorize Jetpack

go to jetpack plugon, connect to wordpress

authorise jetpack

  • After this is complete, then go to Appearance, then Widgets (found towards the bottom left of the interface) and the new Twitter widget should be found at the bottom of the page

appearance, widgets

twitter widget found at bottom of page

  • We then need to drag the Twitter Widget to the top of the page which is when you will see all of the widget settings including the Widget ID

drag widget to top, widget id

  • You then need to go to Twitter and log in, before going to Settings
  • Once in the Twitter Settings, go to Widgets, Create New, then change any of the desired settings before clicking Create Widget

twitter settings, widget

creat new

change settings, create widget

  • Once this has been done, you then need to copy the long number found in the new Twitter URL and paste it in the Widget ID section found on WordPress

copy long number

paste long number

  • Once this has been pasted, you can then change the appropriate settings before clicking Save
  • If I then go onto my main blog page, I can see that Twitter is found right at the bottom of the list of posts
  • Although this is not ideal, this position can’t be changed unless I change the theme and the reading settings (I did experiment with both); I have therefore decided to keep it like this as this not only represents my original idea, but it also makes my WordPress page more user friendly

twitter widget

Attaching this newly improved index.html file to my website:

  • To attach this newly improved index.html file to my website, I then need to go to Site, Manage Site, and choose the site that I originally used for it before clicking Okay

site, manage sites

choose site originally made for it

  • I then need to click the Connect to Remote Server button before using the Expand to Show Local and Remote Sites button to bring up this window
  • I then need to click on the www found on the left hand side, and the index.html found on the right hand side before choosing the upload button

connect to remote server and expand...

click on www and index and upload

Making a Splash Page:

  • A splash page is usually an opening page that has the title of the website and an entry button to the website
  • To make one of these, I started by opening a new HTML file in Dreamweaver and renaming it to Holly Constantine Photography

rename page to HCP

  • I then went to file, save, and navigated my way to my newly made Splash Page folder, before calling the file index.html and clicking save

file, save

navigate to newly made folder, save

  • I then wanted to insert a div tag and so went to Insert, Layout Objects, Div Tag and chose Insert at Insertion point before calling the Class Container and clicking Okay

div tag

class container

  • This then created a text box like feature in my HTML file
  • I then deleted the default text from this box and went to Insert, HTML, Text Objects then H1 and then typed in Holly Constantine Photography into the empty text box

h1

  • I then went back to the code and made sure that the cursor was outside the H1 tags before going to Insert, HTML, Text Objects, and H2
  • I then decided to type in [Enter] between the H2 beginning and end tags

h2

Enter

  • My next step was to then attach a style sheet to this index.html file, and, as I have already created one that I am happy with, I decided to find this file in my Documents and copy and paste the current style sheet into the new Splash Page folder
  • I therefore went to style.css file, right clicked on it and chose copy item, before navigating back to the new folder, right clicking, and choosing paste item

right click, copy item

right click, paste item

pasted item

  • I then went back into the index.html file in Dreamweaver and clicked on the CSS Styles menu button (found towards the top right of the interface) before clicking Attach Style Sheet
  • I then browsed for the style.css file I had just copy and pasted before clicking Okay

css styles menu button

attach style sheet

browse for recently pasted style sheet

style sheet - what it looks like

  • The next step that I would undertake in order to complete this splash page would be to add a link to the Enter font, but I can’t do this as of yet as I haven’t got a homepage I want to link it to!
  • However, if I were to do this, I would simply highlight the text I wish to link then type in the link at the bottom

adding a link

I have also decided that I will not upload this index.html file to my website yet as it will suggest to the user that it is complete when in fact, it is far from it!

Editing my Splash Page:

  • After making my splash page, I decided that I wanted to change the [Enter] link to a light grey colour
  • I didn’t know where to begin so I decided to search for it on Google and was directed to the following link which I used as a starter for this process before experimenting for myself
  • http://helpx.adobe.com/dreamweaver/using/set-text-properties-property-inspector.html
  • To start with, I opened up the index.html file that I wanted to edit in the Dreamweaver software

Open the index file

  • I then made sure that the cursor was somewhere in the text that I wanted to change the colour of

make sure the cursor is somehwere in the text

  • Following this, I went to the properties menu found at the bottom of the interface, clicked on HTML and changed the ID to menu

properties menu, html, change id

  • I then went back to the style.css file (that opened with the index.html file due to the fact that they are attached), and double clicked on the .container #menu CSS style (found towards the top right of the interface), which brought up the CSS Rule Definition window

style file, container menu

  • I then went to the Type menu, changed the font family to Courier New, Courier, monospace, and the colour to the desired grey before clicking okay

css rule definition window

  • This is what it looked like in Dreamweaver and Firefox:

what it looks like now

firefox preview

Making a drop-down menu:

  • As I had absolutely no idea how to create a drop-down menu in Dreamweaver, I decided to search for it on Google and quickly found a really easy to follow YouTube tutorial on the matter (the link is posted below)
  • http://www.youtube.com/watch?v=80ApmiJY_Y0
  • I started by opening the Dreamweaver software before choosing, file, new, which brought up a separate window where I clicked on HTML and a layout of none, then chose create

open dreamweaver, file, new

html, none, create

  • I then went to Insert, Layout Objects, Spry Menu Bar

insert, layout objects, spry menu bar

  • It then said that I needed to save the document before continuing so pressed Ok, then navigated to my newly made Contact Page folder, called the file contact page.html and pressed Save

save document

navigate to newly made folder...

  • After I had saved the document, another window appeared where I chose a horizontal layout option before clicking Ok

horizontal, okay

what it looks like

  • I then changed the menu name to Top Navigation by going to the properties bar at the bottom of the interface and typing it in

top navigation

  • Then, as I wanted to add another menu item, I clicked on the + sign in this properties menu

add another menu item

new menu item

  • I then wanted to change the names of the menu items and so individually clicked on each item before typing the desired title into the text box

change name of menu

changed names

  • Editing the submenus had a very similar process to the main menu items so I took the time to go through each menu, either adding or taking away submenus by using the + and – buttons, and renaming them

editing sub menus

other sub menus

  • To start changing the appearance of this Spry Menu Bar, I then double clicked on SpryMenuBarHorizontal.css in the CSS Styles window found at the top right of the interface

double click on SpryMenuBarHorizontal

what it looks like 2

  • To then change the colour of the menu bar, I then scrolled down to ul.MenuBarHorizontal a and double clicked on that before changing the colours options that came up below it

scroll down to...

  • I then went back to the CSS Styles window, and chose the CSS Style that was two under the current one I was on which allowed me to change the colour of the Menu Bar when I hovered over it

two after the currently chosen one

  • I then previewed this in Firefox

preview in firefox

  • As I was happy with the colour and general appearance of the menu, I then wanted to change the font so that it was the same font that I have been using for other pages for my website
  • To do this, I clicked on the SpryMenuBarHorizontal.css in the CSS Styles window, before clicking on New CSS Rule, then choosing Tag and Body in the new window then Ok

double click on… 2

tag, body, okay

  • The CSS Rule Definition window then came up where I went to Type then chose the font and the colour then clicked Apply and Ok

type

  • This is what it looked like in Dreamweaver:

what it looks like 3

  • And this is what I looked like in Firefox:

preview in firefox 2

Making a Twitter Widget in Dreamweaver:

  • As a part of my original plan, I said that I wanted to include a Twitter widget on a number of my website pages
  • I therefore thought that the best thing to do was to experiment with making one
  • To do this, I used a video tutorial as a guide: http://dreamweavertutorial.co.uk/dreamweaver/video/twitter-widget-dreamweaver.htm
  • To start with, I went to Twitter, then Settings and chose Widget then Edit on the widget I had already made for my blog (see above)

Twitter, settings

Settings

widgets

choose widget

twitter widget

  • I then went to Dreamweaver, Create New HTML, and chose to go onto Split View once it had opened

dreamweaver, new, html

  • Then, between the body tags found in the code, I typed: <div id=”twitterFeed”>

type in div tag id

  • I then went below this opening div id tag and typed in a coding div tag: </div>

type in closed div tag

  • I then placed the cursor between the open and closed div tags, then went back to Twitter and copied and pasted the code into this section of the Dreamweaver code before clicking on the design side to refresh it

copy twitter code

paste twitter code

  • Before previewing it in Firefox, I then needed to save it by going to File, Save, then find the new folder that I had created specifically for this task, before calling the file twitter.html and clicking on Save

file, save

folder, twitter, save

  • I then previewed it in Firefox:

firefox preview 1

  • As it is too large for my desired design and layout of my website, I then had to create a new CSS rule to override the Twitter defaults
  • I therefore went to the New CSS style button, chose (In New Style Sheet) under Rule Definition, clicked Okay, and saved it as twitter.css

create new css rule

new style sheet file, okay

save as twitter.css

  • The typical CSS Rule Definition box then appeared and I simply clicked Ok

click okay

  • I then went to the twitter.css file and edited it by typing in different CSS code before previewing it again in Firefox

go to css file, edit

firefox preview 2

  • I then experimented with some of the amounts until I was happy with it and, again, previewed it in Firefox

edit more

firefox preview 3

Making a Search Bar for my Website:

dreamweaver, file, new

html, create

document

  • I then went to javascriptkit.com (full link posted above) before selecting all of the free code, and copying and pasting it into the Dreamweaver document between the Body tags

go to...

select all the code, copy

paste

  • I then wanted to remove the “Free Script provided by…” text and did this by simply highlighting the text and pressing the backspace

remove...

  • I could then edit the name of the Search bar, but as a part of my design, I simply wanted the search bar with no text
  • So to do this, I highlighted the title of the search bar before hitting backspace

can edit name, but just want to delete it

what it looks like

  • I then went to File, Save, then selected my newly made folder, then called it search.html

file, save

new folder, call search, save

  • I then needed to customize it to search my website using Google and so I scrolled up through the code to find the “Enter Domain of Site to Search” section before changing the default domain name to the domain name of my website

find enter domain of site to search

change domain name

my domain name

  • I then previewed it in Firefox (please note, the search doesn’t work yet as I don’t have a website!)

firefox preview 1

  • I then wanted to add a new CSS rule and so had to make a div tag id around the code for the search bar
  • To do this, I simply typed in the id and closed tag into the area of code that I wanted

dive id

close div tag

  • I then clicked on the New CSS Rule button which bought up a new window where I selected New Style Sheet File under the Rule Definition section before clicking okay
  • I then saved it as search.css in the pop-up window, before clicking Save

new css rule

save

okay

  • I then went to the search.css file and edited it by typing in different bits of code in order to change it’s position on the page

go to search css file

type in code

  • This is what it now looks like in Firefox:

firefox preview 2

My Contact Page – Learning how to add text next to other elements:

As said in a more recent blog post, on Monday 10th February, Aaron Sehmar kindly agreed to help me with a couple of queries I had in regards to creating my website. One thing I wanted to learn how to do, was to add text around some of the elements I had previously made. This is where he told me that I needed to make a separate div tag for each component, each with a separate ID.

  • To start with, Mez Packer, our lecturer, suggested that I do a bit of housekeeping regarding my files. To do this, I opened up Dreamweaver and chose New HTML file

dreamweaver, new html

  • Then, she told me to go to my files found in the bottom right of the interface, before renaming the files that I will definitely be using for my website (with no spaces or capital letters), and moving them into the main root directory called “Holly Constantine Photography” and clicking Update

rename files

drag and drop files to root directory

  • I then had to go to Site, Manage Sites, before clicking New Site, renaming it to FINAL, and choosing the local site folder of “Holly Constantine Photography” (the root directory), then clicking Save, and Done

site, manage sites

new site

final, folder, save

done

  • Then, to start creating my contact page, I went to File, Open Recent, and chose contact.html before closing the Untitled-1.html file at the top of the interface

file, open recent, contact

close untitled 1

  • This page originally only had the drop-down menu element, so this is actually what the document looked like after adding the surrounding components