- How To Make A Website On A Mac For Free Windows 10
- Mac Local Web Server
- How To Make A Website An App On Macbook
- How To Make A Website On A Mac For Free Images
- How To Make A Website On A Mac For Free
- How To Make A Website On A Mac For Free Printable
BlueGriffon is a free web editor for Windows, Mac OS X, and Linux that any one can use to design a website.It is a 'What You See Is What You Get' ('WYSIWYG' for short) editor, which means that you can design yourwebsite visually and what you see in the editor is what your visitors will get when they go to your website. Or to putit another way, it is a computer program meant for a layperson to design websites without having to learn technical stuff likeHTMLand CSS.
Mobirise is an awesome mobile-friendly software system well-suited for both non-techies and professional web developers. This free graphic design software for Mac has a unique minimalistic interface. This makes the workflow easy and intuitive. Create stunning websites, landing pages, online resumes, and personal portfolios with tons of site. To create a desktop shortcut to a website using Google Chrome, go to a website and click the three-dot icon in the top-right corner of your browser window. Then go to More tools Create shortcut. Finally, name your shortcut and click Create. Open the Chrome web browser. You can do this on a Mac or Windows 10 computer. How To Create A Local WordPress Installation On A Mac WordPress requires an enhanced environment to run correctly on your Mac. This environment uses a local PHP server and MySQL server that when working together provide the necessary code to run WordPress properly.
Note that this tutorial series is for version 1.7.2 of BlueGriffon. If you wish to use the version 3 series ofthe editor, please read theBlueGriffon Tutorial: Howto Design a Website with BlueGriffon 3 instead. There are some changes between the version 1.x and 3.x series,so you will have a much easier time if you read the guide specifically written for the version you are using.
Goal of This Tutorial Series
This tutorial takes you through all the necessary steps to design and publish a fully-functional, multi-page website usingBlueGriffon (version 1.7.2). Your website will have a home page, a Site Map, an About page, a working Feedback Form, andany other pages you want your site to have.
Goal of This Chapter
By the end of this chapter, you will have created a 2 column home page for your website, and have publishedit to the Internet.
Preliminary Steps
How To Make A Website On A Mac For Free Windows 10
Please do not skip this section. I know that the title 'preliminary' seems to suggest to some people that it is unnecessaryto read since they think they already know how to download and install stuff, but if you skip this part, you may run intoerrors or problems later that I've already covered here.
Get a Domain and Sign Up for a Web Host
Before you can even have a website, you will need toget a domain name and sign upfor a web host. A domain name isjust the name of your site. For example, 'thesitewizard.com' is the domain name of this website. A web hostis a company which owns computers that are permanently connected to the Internet. These computers, called web servers,are where you will place your website, so that others in the world can visit it. The computers run a special type ofsoftware (also, confusingly, called web servers) to facilitate this.
More details on this matter can be found in my article Howto Make / Create Your Own Website: The Beginner's A-Z Guide. Please read it before you continue with this BlueGriffontutorial, otherwise, you will be stuck midway through this chapter when you find that you don't have a web host to whichto publish your site.
For students: If you have been referred to this tutorial by your lecturer or teacher, you may not need toget a domain name or a web host. Some schools or universities set up a special web server for use by their students fortheir website-making assignments. If so, just skip to the next step.
For the penniless: If you're absolutely broke, you can also set upa website without paying for a domain name or a web host. (Yes, unfortunately, those 2 things cost money.) However, you should onlydo this if you really cannot afford to get, at minimum, a domain name, because you will lose out in amajor way sooner or later. If you're in this boat, please read my article'Is it Possible to Create aWebsite Without Buying a Domain Name? The High Price of 'Free'.' for more details. Essentially, it involves hostingyour website on a free web hostand accepting whatever web address they give you for your site. But make sure you read the above-mentioned article on theconsequences beforedoing this, so that you know what you're getting into. Obviously if you have no money, you've got no choice but to takethis route. But don't walk into it blindfolded.
Download BlueGriffon
Download version 1.7.2 of the BlueGriffon editorfor your system. There are different files for Windows, Mac OS X and Linux, so be sure to get the right one.
Install BlueGriffon
If you use Windows, doubleclick (ie, click twice in quick succession) the file you downloaded to install it. Notethat this section presupposes that you downloaded the 'installer version' (ie, the 'bluegriffon-1.7.2.exe' file).If you downloaded the zip file instead, you'll probably already know what to do with it, so I won't discuss it here.(If you don't, please go back to the previous step and get the installer version. This tutorial will drag on foreverif I give instructions for every possible alternative.)
Initial screen
The initial dialog box has a heading 'Welcome to the BlueGriffon Setup Wizard' and it describes what the setup utility is about to do. Click the 'Next' button at the bottom of this dialog box if you want to continue installing BlueGriffon.
The 'special offer' screen
If you are connected to the Internet when you run the installer, a dialog box with the heading 'Special Offer' will appear. The contents of this dialog box differ each time you install but it will generally offer to install some additional software on your computer. For example, during one of my installations, it offered to install a new toolbar into my browser and change my default search engine to some service or other (sorry, I can't remember the name). At another time, it wanted to install an IM client. For those of you worried about whether the software is needed for BlueGriffon to work, please note that this is just an advertisement. None of the software offered is actually part of BlueGriffon itself. They are not used by BlueGriffon nor are they needed for it to work on your computer. As such, if you don't want the software offered, you can safely uncheck all the boxes in this dialog box before clicking the 'Next' button.
Incidentally, don't worry if you don't see this screen. It's not important. I think it's only displayed if you're connected to the Internet at the time you run the installer.
Installation folder and Start folder screens
The next two dialog boxes offer to let you choose the folder to install to as well as the name of the Start menu folder. Accept the default. That is, click the 'Next' button for the installation folder dialog box, and when the 'Select Start Menu Folder' dialog appears, click the 'Next' button for that as well.
Select Additional Tasks
A dialog box with the heading 'Select Additional Tasks' should appear. Click the checkbox for 'Create a desktop icon' before clicking the 'Next' button. (Actually, you don't really have to do this if you like a clean desktop. However, make sure that you know how to launch programs from the Start menu if you don't, otherwise you won't be able to run BlueGriffon later.)
Ready to Install
The next dialog box lets you look at your choices so far before committing to it. Click the 'Install' button if you're satisfied. (You can also click the 'Back' button if you want to make changes to your choices, or click 'Cancel' to abort everything, if you like.)
Important: the final screen
The final dialog box, with the heading 'Completing the BlueGriffon Setup Wizard', will appear after the installer has finished setting up everything.
Uncheck the box 'Launch BlueGriffon' on this screen before clicking the 'Finish' button. I want to deal with the first run of BlueGriffon in a separate section, because you may need to install some additional software (namely some free Microsoft software libraries used by the BlueGriffon program).
For Mac OS X and Linux users, just install the program the way you're accustomed to on your system. Sorry,but I don't have a Mac, so I can't help you there. And eachLinux distributionhas its own method of installing things, so you'll just have to find out how to do it for your particular distribution(assuming you don't already know).
Download FileZilla
There's no point creating a website and just letting it sit on your computer. No one in the world, exceptusers of your computer, will be able to see your site. As such, you'll need a way to transfer your websitefrom your system to your web host's system. You will do this using a program known as an FTP program, where'FTP' stands for 'File Transfer Protocol'.
There are many free FTPprograms around, for a wide variety of systems. For this tutorial, we'll be using one such free program,known as 'FileZilla'. I chose it for this tutorial mainly because it has versions for Windows, Mac OS X and Linux.
Go to the FileZilla download page and downloadthe appropriate version for your system. Note that if you don't follow my link, but go directly to the main page oftheir site, make sure you click the link for the FileZilla client download page, not the server page. ForWindows users, download by clicking the default download button rather than getting the zip file, unless you knowhow to manually install computer programs.
How to Install FileZilla
As usual, I will only provide the installation instructions for Windows users (since I don't have a Mac).
Doubleclick the file you just downloaded to launch the installer. Follow the instructions given by the setup utility.In the dialog box entitled 'Choose Components', click the box 'Desktop icon' to check it, so that a shortcut to FileZillawill be placed on your desktop. When you reach the last window in the installer, uncheck the box that says'Start FileZilla now'. We'll run FileZilla later, when we actually have something to transfer to your website.
Starting BlueGriffon for the First Time and Fixing the 'This application has failed to start...' Error
Doubleclick the BlueGriffon icon on your desktop. (If you don't see an icon on your desktop, it means you didn'tfollow my recommendations earlier about putting an icon on your desktop. If so, you can still start it from yourStart menu, unless you disabled that option in the installer too. In such a case, if you don't know how toproceed, return to the earlier section and reinstall BlueGriffon again, this time following my suggestions.)
If you are using Windows, you may get an alarming error message that says something like 'This application has failedto start because the application configuration is incorrect. Reinstalling the application may fix this problem.'Don't reinstall. Read on for the solution. Note: if you do not see this error message, but instead find that BlueGriffonstarts up normally, skip this section. Your job, where the installation is concerned, is done.
Windows users who encounter this error message should download theMicrosoft Visual C++ 2010Redistributable Package from Microsoft's site. BlueGriffon uses some components from this package,and if you don't already have it installed on your system, the program won't run. In case you're wondering why somepeople don't get this message, this package is used by a number of other programs and so may already be installedon their systems.
Note: the specific redistributable package that you will need is also linked to on the BlueGriffon download page.If the package linked to on that page is different from what I mentioned above, use their link instead. (Theexact package will change depending on which version of the Visual C++ compiler the BlueGriffon developer uses.So if he compiles [ie, creates] BlueGriffon with a different version of the Visual C++ compiler, you will needa redistributable package that matches the version he used.)
In any case, after you download the file, run it and follow the instructions to install it. As far as I cantell, from the version I ran, it's a pretty straightforward installation that doesn't require you to make any(real) decisions.
After that, if you are one of those who elected to run Windows Update manually (rather than allowing the default ofhaving it automatically update your system in the background), you may want to start up Windows Update so that it caninstall security fixes, if any, for the redistributable. Since the redistributable is a Microsoft product, updatesare delivered using the usual Microsoft channels, which for the average home computer user, means Windows Update.
Once you're done, run BlueGriffon again. It should start up normally.
Note that the first time you successfully start up BlueGriffon, you will get a dialog box prompting you todownload an add-on and the user manual. If you click the button agreeing to the download,your web browser will open and load the BlueGriffon site, where you will be given the option to buy the add-on anduser manual. This is strictly optional. It's okay if you can't afford to buy anything. This tutorial serieswas written so that it doesn't depend on (or even use) those optional add-ons or manual.
How to Create a 2 Column Web Page with BlueGriffon
The website that you'll be creating with this tutorial will have a two column layout. Such a layout is favoured('favored' in US English)by many webmasters because it is both space-efficient and user-friendly. You can see an example of atwo-column web page by looking at any of the article pages on thesitewizard.com, including this very pageyou're reading. As you can see, it's called a 2 column layout because it literally has 2 (vertical) columns.In the case of thesitewizard.com, the left column is occupied by my logo, search engine and navigation menu buttonswhile the right column is filled with the article proper. This layout is very familiar to Internet users becauseyou see it everywhere, making it a user-friendly layout since almost everyone knows how to navigate a site with it.As a webmaster, you will always want to make your website user-friendly, so that your visitors can get to wherethey want to go on your site.
Creating a New Web Page
When you start up BlueGriffon, once you've dismissed the 'Tip of the Day' window and other stuff (see above),you will be confronted with a blank window. To create your web page, click the word 'File' on the menu bar, which youcan find near the top of the window. A drop down menu will appear. Click the words 'New wizard' on that menu.
Important: in the interest of brevity, I shall describe such a sequence of steps as simply clicking'File | New wizard'. For example, if I were to say to click 'File | Save' on the menu, it means to click the word 'File'on the menu bar, followed by the word 'Save' on the drop down menu that appears. Note that I'm just using 'File | Save'as an example here; you don't actually have to click it (and you won't succeed if you try since the 'Save' is disabled at thistime given that there's nothing to save at present).
Selecting the Document Type
A dialog box with the title 'New Document Wizard' and a sub-heading 'Document type' will appear. By default,the radio buttons 'HTML5' should be selected. If it is not, click it to enable it.(If you don't know whether it is selected or not, just click it anyway.) Then click the 'Next' button atthe bottom of the dialog box.
The Title Field
The contents of the dialog box should change, with a new sub-heading that reads 'General document properties'.
The first page that you'll create for your website will be what is known as the 'Home page'. This is justthe main page of your website. It is the page that your visitors will see if they simply type in thedomain name of your site into their browser. For example, if you were to type 'thesitewizard.com' intoyour browser's address bar right now, you will be brought to the home page of this site.
Since this is your home page, enter the name of your website into the 'Title' field. For example,if your website is called 'Example Company', enter 'Example Company' into that first field. Ifyours is a personal website, and your name is Shakespeare, enter 'Shakespeare's Website' into that field.Those who are at a complete loss as to what to say, put your domain name into that field.
Do not leave the 'Title' field blank for any web page you create. Even though BlueGriffon will not forceyou to enter something into this field, it is a very important field. The contents of this field isdisplayed in the title bar of your browser window (or in the browser tab for some browsers). Search enginesalso use this title in their search results for your page.
Most people also add a short description of their site immediately after the site name for their home page.Or if they have a slogan commonly attached to their brand, they may add it there.But don't get stuck over this. If you can't think of anything to say, just put your site name (or domain name)here.
Note that the words in the title field are not actually displayed in the main window of any web browserfor your website. It is only shown in the title bar as I mentioned earlier. As such, you don't haveto worry about decorating those words so that they look pretty or anything like that.
Author
By default, BlueGriffon inserts the user name you use on your computer into the 'author' field. You caneither accept this, or change it to your real name, or delete the contents of this field altogether.This field is optional, and is neither displayed nor used in any way by the web browser.If you can't decide, delete its contents, leaving it empty.
Description
The 'Description' field is supposed to contain a brief description of what your current web page contains.Home pages are special though, since home pages are usually just pointers to the entire website. Mostpeople just give a brief description of the website as a whole in the 'Description' field of theirhome page.
This field is not used by the web browser in any way. Search engines sometimes put the description youenter here as the blurb for the page in their results. If you don't know what to say, just leave it blank.
Language
Skip the useless 'Keywords' field,and click the 'Select a language' button next to the 'Language' field.
If you use English, select the entry that says 'English [en]' (and not the more specific regional versionslike 'English/United Kingdom [en-gb]' or 'English/United States [en-us]').
Character set
The default characterset (or character encoding) should be 'Unicode (UTF-8)'. If it isn't, click the drop down arrow for the field andchoose it.
Text-direction
If you use English, you can either click the 'Left to right' radio box for the 'Text-direction' field,or just leave it at the default of 'Unspecified'.
Click the 'Next' button at the bottom of the dialog box when you're through.
Colors and backgrounds
You will be presented with a new dialog box with the heading 'Colors and backgrounds'.Leave the checkbox for 'Make the above my default settings' ticked and click the 'Next' button.Don't worry, you will learn how to change the colours of your words and their background in a later chapter.
Document background
When the dialog box with the 'Document background' heading appears, click the 'Next' button.You will find out how to change the document background in a later chapter. In general, unless you're anexperienced web designer or a talented visual design artist, you'll find it much easier to decide on colourand background images when you actually have some concrete content on your web page to customise. Otherwise,you may end up with unrealistic colours that clash with your actual content.
Page layouts
In the dialog box that has the heading 'Page layouts', make sure that the checkbox for 'Apply a predefined CSSlayout' is ticked. If not, click it once to put a tick there. Then make sure that the 'Width' field, directlybelow that checkbox, has the words 'Full width' selected. If not, click the down arrow for the field and click'Full width' to select it. The 'Sidebar' field should have the words 'Left 160px' selected by default. If itdoesn't, click the down arrow for that field and select it yourself.
Click the 'New row' button that is just below the large empty box in the middle of a dialog box. A drop down menu willappear. Click the line that says '1 column, 100%'. Yes, you read that right. You'll need to select the '1 column, 100%'option to get 2 columns. Let me say it again so that there's no ambiguity: choose the '1 column, 100%' item in thedrop down menu for 'New row'.
Leave the checkbox for 'Include 'lorem ipsum' dummy content' ticked. If it is not checked, click the box onceto put a tick in it. It's much easier to work on your page with some dummy content already there, otherwise witha completely blank white page, you'll have a hard time figuring out where one column ends and where another begins.
Click the 'Finish' button when you're done.
The Initial Web Page: Orientation and Terminology
You will see an initial web page that looks something like the picture below. At the moment, the web page probablylooks ugly with the placeholder text placed in awkward positions, but don't worry. We will be fixing the page inthis and the following few chapters. Note that the exact appearance you see will differ from my picture,depending on which operating system you're using (ie, Windows 8/8.1, 7, Windows Vista, Windows XP, Mac OS X or Linux)and the size of your monitor.
Let's familiarise ourselves with this window, so that you'll know what I'm talking about when I refer tothe various portions of the page later in this tutorial.
At the top of your web page are the words 'PAGE HEADER'. These words reside in a horizontal band that stretchesacross the width of your web page. (Yes, even though the words 'PAGE HEADER' are flushed left, if you place avery long sentence here, it will stretch right up to the right edge of your web page.) This band, sometimes referredto as the 'header' section, is often used by webmasters to put things like a website logo. We will replace the words'PAGE HEADER' with your own logo in chapter 2 of this tutorial.
Directly below the header section are 2 columns. At present, the left column contains only the words 'NAVIGATION PANE'.The space below those words is empty, so that vertical stretch probably doesn't really look like a column to you right now.However, you will, in later chapters, replace those words with your own navigation menu, similar to the set of clickablebuttons you see in thesitewizard.com's left column, so this navigation column (or 'sidebar' as some webmasters call it)will start looking more like a column in its own right.
To the right of the navigation column is a wide space currently filled with some placeholder text. This rightcolumn is where you will place the real content of your page. You will be replacing the dummy text with yourown content later in this chapter. This column is variously referred to as the main column or the content column.
At the bottom of the page is another horizontal band that stretches the entire width of your web page. Thissection is often called the 'footer' of the page. Like the right column, you will be replacing the default'FOOTER' text with your own content in this chapter.
Deleting the Placeholder Content
Click your mouse cursor somewhere in the right column (in the section where the block of text beginningwith the words 'Lorem ipsum' words are currently placed). It doesn't matter exactly where you put your cursor,since you'll be moving it in a second. If you're not sure where to click, click somewhere in the word 'Lorem'(the first word in that paragraph).
This causes a text cursor to appear where you clicked. At this point, BlueGriffon acts a lot likeMicrosoft Word or any other word processor. That is, you can use the arrow keys on your keyboard to movethe cursor to any position where there are words. You can also use the Delete and Backspace keys on yourkeyboard to remove the existing text. If you type any letter or number, it will appear where your cursoris.
Delete all the text in the right column using the DEL or Backspace key. For now, do not delete anything inthe left column or in the header and footer. We'll deal with the other sections in due course. Deleting everythingnow will leave you a completely blank document, making it hard to locate things later.
(If you are a seasoned computer user, and are tempted to use Ctrl+A (or Cmd+A on the Mac) to selecteverything in the right column, I recommend that you restrain yourself. You'll end up selecting everythingon the page instead. If you don't know what 'Ctrl+A' or 'Cmd+A' is, or don't know what it does, just ignore this paragraph.)
How to Set the Page Title
Once you have a blank right column, type the title of your page so that it is the topmost line in that column.Since the page you're creating is the home page for your entire site, the title should probably be thename of your website. For example, if you want your site to be called 'Example Co', type that as the firstline in the column. Or if the site is called 'Shakespeare's Website', insert that instead. Or if you planto put your site name in a graphical logo at the top of the page, and don't want to duplicate it here,you can also write things like 'Welcome'.
Yes, I know that the header section, containing the words 'PAGE HEADER' and positioned above your right column, wouldseem to be the most logical place for your page title. For the purpose of this tutorial, I'm reserving thatsection for your website logo. If you feel very strongly about this, and want to put your page title there instead,go ahead and do it. However, if you do that, please note that the instructions for inserting your logo in chapter 2, andprobably other parts of this tutorial series as well, may not work properly for you, since they assume that you'veinserted the title into the right column. If you're completely new to designing websites, I suggest that you followmy instructions for now. You can always go back and change things when you've finished this tutorial series. By then,you'll have acquired enough knowledge and skills so that you can do this without worryingabout whether you'll break something.
After typing the title of your page (ie name of your site) at the top of the right column, hit theENTER key (or RETURN key on the Mac) to create a new paragraph.
Now select the line that you previously typed (that is, your site name). One way to do this is todrag your mouse across the title so that it is highlighted. To drag your mouse, move your mouseso that the mouse cursor is pointing to the very first character of your title. Click the mousebutton, and while continuing to hold down that button move your mouse pointer over the rest ofthe title till it is pointing past the last character. As you move your mouse pointer, you willnotice that your title gets highlighted. This process of highlighting some text or otheris known as 'selecting' the said text.
Now look upwards at the toolbars above your page. The 'toolbars' are those lines of icons and boxes thatare sandwiched between your menu bar and your web page. One of the toolbars should have a drop-down box thatcurrently has the word 'Paragraph' (see picture below). Click the down arrow next to this word. A drop down boxshould appear. Click the word 'Heading 1' in that box.
Your page title should immediately change so that it is now in bold, and looks more like a title.
Note that the list of items in that drop down box, that is, 'Paragraph', 'Heading 1', 'Heading 2', etc, is notto be taken as a means of changing the font on your web page. They are meant to classify the type of contentappearing on your page. 'Heading 1' is meant to be used for top-level titles or headings on your page.If you have multiple sections on your page, you can use 'Heading 2' for the section headings, and ifthey have subsections, 'Heading 3' can be used for the titles of those subsections. And so on, right up to'Heading 6'. The normal text (those that are not part of a title) appearing on your page should be marked as'Paragraph'.
You will be taught how to change fonts, text sizes, use bold or italics in chapter 3 of this tutorial.For now, let's just focus on the more difficult task of actually writing your content.
Once you've marked the title of your page with 'Heading 1', click your mouse in the blank new paragraphyou created earlier when you hit ENTER. This will place your blinking text cursor in that spot. Noticethat the box that previously said 'Heading 1' in the toolbar, now says 'Paragraph'. This is correct.Do not change it. You're now going to type the main content of your home page.
What Goes into Your Home Page?
The home page of a website is something like a cross between the cover of a magazine and its contents page.Like the cover of a magazine, it should give you an idea of what your visitors can find on your website.And like the contents page, it should have links pointing to at least the main sections of your site.
Sites that sell goods and services should mention their products (or services) here. If you havea physical product, a picture of the thing you're selling along with a brief description of it shouldbe used. Businesses that sell far too many things to list on a single page may choose to mention thedifferent categories of things they sell, and link to sub-pages on the site that give a detailed listof products in each category. You may even want to feature your main product (or perhaps the mostpopular product) on your home page alongside your list of categories.
If you are running a personal site, or a hobby site, you can of course put whatever you want onyour home page. Even so, it makes sense to say something about what your site is about and link to the pageswhere your visitors can do what it is that you want them to do on your site. Not doing so will result inmystified visitors who will not only have no idea what your site is about, but who will also not know how to getto the relevant parts of your site.
For now, just type the text portion of your home page. Don't bother about beautifying your content withfont changes or leaving space for your pictures or anything pertaining to making your page beautiful.Concentrate on your content. Things like the changing of fonts, creation of links and the insertion of pictureswill be taken care of in the chapters to come. If you're really stuck, take a look at the example page below.You obviously can't use it as-is, since you won't be selling the same products, but you can adaptit for your purpose.
Example Co
Example Co is the premier site dealing with all sorts of paraphernalia relating to life, the universe and everything. If it's crucial to life and existence, we probably have it.
Featured Products
Websites: Our websites are designed using thesitewizard.com's tutorials. They are complete and fully functional, with a working contact form and multiple pages. No modern business should be without one.
Spaceship: For the aspiring astronaut who does not have a ship to hop to the stars, we have our very own home-grown spaceship. Yes, you read it right: it's organic! And very safe. It can't quite fly yet (which is why it's safe), but it really looks snazzy.
Please check our Products catalogue for more exciting stuff that you absolutely cannot live without.
To create new paragraphs, just hit the ENTER key (or RETURN key on the Mac). If you want to insert a sub-heading,like my 'Featured Products' in the example above, put the words on a separate line. Then select it and use 'Heading 2'from the box on the toolbar. That is, just do the same thing you did above for your page heading but use 'Heading 2'for every subheading instead of 'Heading 1'.
The Footer
Now click your mouse somewhere in the word 'FOOTER' at the bottom of the page. Replace that word with anything you like.Most people put a copyright notice here. A copyright notice is a sentence like 'Copyright © 2012 by Christopher Heng'.You can read more about copyright matters by reading my article onCopyright Issues relevant to webmastersat https://www.thesitewizard.com/general/copyright-issues.shtml
To insert the '©' symbol, click 'Insert | Characters and symbols' from the menu. If you will remember whatI said earlier, this means to click the 'Insert' item on the menu bar. Then when a drop down menu appears, clickthe 'Characters and symbols' line in that menu. A dialog box with the title 'Insert special characters'will appear. Click 'Basic Latin' in the top half of the window. Then scroll down a line or so to locatethe '©' character. Click it once to select it. Then click the 'Insert' button near the bottom of the window.Dismiss the dialog box by hitting the ESC key on your keyboard.
How to Save Your Home Page with the Correct Name
Once you've finished inserting your content, it's time to save your work.
By default, if you don't do anything special, BlueGriffon will offer to save your page in your Documentsfolder. (Or at least it does so on my Windows system. I'm not sure about Macs.) While this may seem acceptableto you, it's probably a good idea to put the files belonging to your website in its own folder. That way,everything pertaining to your site is contained in one location, making it easy to manage as well as back up.
Without exiting or closing BlueGriffon, open your Documents folder using the usual method provided on your system.On Windows, this means that you should click the Start menu, followed by the 'My Documents' item (if you have Windows XP)or the 'Documents' item (if you use Vista or Windows 7). If you use a Mac, open your documents folder with the Finder.(Sorry, I don't have a Mac, so I can't be more specific than that.)
Windows users should then right click a blank spot in the Documents folder and select 'New' from the menu thatpops up. A submenu should appear. Click 'Folder'. Windows will proceed to create an empty folder and name it'New Folder'. Change the name to the name of your website. Actually, you can use any name you like. This foldermerely serves as a storage location for your website files on your own computer. Mac users should do thefunctional equivalent: that is, create a folder in your documents folder and change the name of your folderto the name of your site. (Again, as I said, I don't have a Mac, so I can't give step-by-step instructions onhow to use it.)
Now switch back to BlueGriffon.
Click 'File | Save' from the menu. For those who have forgotten what this means, click the 'File' itemon the menu bar, then when the drop down menu appears, click the 'Save' item.
A dialog box with the title 'Save Page As' will appear, showing you the contents of your Documents folder.If you have created your new folder in the correct location earlier, you should be able to see it in thewindow. Doubleclick that folder. (Again, doubleclick means to click your mouse twice in quick succession onthe same spot.)
You should now see an empty folder. Type '
index.html' into the 'File name' field of thedialog box. IMPORTANT: do not use any other name. Do not use capital (uppercase) letters orinsert spaces into the name. The name must be 'index.html' and no other. Names like'Index.html' and 'INDEX.HTML' are WRONG.The filename '
index.html' is a special name recognised by web servers (the software that your web hostuses so that people can access your site). If your visitor types your domain name into their browser, the web serverwill send them the contents of the 'index.html' even if they don't explicitly type 'index.html'.Since you're creating your home page, this is the behaviour your want.Click the 'Save' button.
How to Publish Your Web Page
You are now ready to put your newly created home page onto the Internet. This process of transferring yourweb pages from your own computer to your web host's computer is known as 'uploading' in technical parlance,or 'publishing' in layman's language. To do that, we will use FileZilla, the other piece of software that youdownloadedand installed earlier in this chapter.
Before you fall off your chair in shock at the prospect of uploading an unfinished web page, please note thatif you have not advertised your website to anyone, no one (other than you) will see your home page. Visitorswill not appear at your website on a whim, just because you created one. Neither will search engines evenknow your site exists. In fact, as you will discover in time, even after you've finished your website, gettingpeople to go to your site is not something that is easily accomplished. Chances are, for at least a period oftime, the only visitor to your site will be you (unless of course you're a celebrity with millions of fawningfans, in which case, please remember to tell your fans about thesitewizard.com!)
The reasons we're publishing your page now, even in this incomplete state, are manifold. Uploadingis one of the major tasks of website design that you will need to master. It is sometimes regarded by newcomersas a huge hurdle, a monolithic task that they want to put off as long as possible. But it is really quiteeasy, and mastering it now will remove one of the largest mental obstacles you will face in the web designphase of your website building.
Another important reason to upload now is that checking your website with a web browser while it's on theInternet is the only foolproof way to properly test your website. It's not possible to detect every problemby checking your web page on your own computer. Some errors will not show until your page is on the Internet.As an inexperienced webmaster, if you don't check your site online after each major stage but wait till everything isdone before publishing, you won't know how to fix problems when these errors accumulate, since you won'tknow at which stage those errors surfaced.
Please do not skip this step if you're following this tutorial series. All later chapters will assume that you'vedone it, and if you don't, you may find some of the things I say later difficult to follow.
How to Configure FileZilla's Site Manager for Your Website
When you signed up with your web host, you would probably have received an email from them containingsome information about your new account. Specifically, you will have received information about the'FTP server' (or 'FTP address' or 'FTP hostname') that you can use for your website, as well as theuser login name and password for that FTP account. Keep that message open in another window whileworking through this section, so that you can copy and paste those details into FileZilla.
Start the FileZilla program. You can do this by doubleclicking the FileZilla icon on your desktop. Ifyou chose not to allow the FileZilla installer to put a desktop shortcut earlier, you can still start ityour start menu instead. (If you're not sure how to do that, go back to the start of this article andreinstall FileZillaagain, this time, please allow it to put a shortcut on your desktop.)
(If you're wondering what to do with your BlueGriffon window, it's up to you. You can leave it open so thatyou don't have to open it again in chapter 2, or just close it.)
If this is the first time you start FileZilla, you will see a dialog box welcoming you to the program. Justclick the OK button to dismiss it.
Click 'File | Site Manager' from the menu.
The FileZilla Site Manager dialog box will appear. Click the 'New Site' button, which you can find on the left oflower part of the screen.
A new entry will appear in the big box in the left column. By default, the entry is named 'New site',and the name is selected, allowing you to change it. Replace the default name with the name of your website.Alternatively, if you prefer, you can replace it with your domain name. This name is used only within FileZilla,to help you distinguish between all the websites you create, so don't worry too much about it. Hit theENTER key (or RETURN key on the Mac) when you're done.
On the right hand side of the dialog box, in the General tab, click the 'Host' field to put your text cursor there,and copy and paste the FTP server name that you were given by your web host into the 'Host' field.
Note that your web host may have referred to the 'FTP server' as 'FTP hostname' or 'FTP address'. They allmean the same thing. Incidentally, there's no way to guess what this server name is. There is no standard FTP addressfor a website. Every web host does things differently. Some tell you that your FTP address is 'ftp.example.com'(where 'example.com' is your site's domain name). Others tell you to use 'example.com' (your site's domain) asthe FTP host. Still others give you a completely unrelated address to use. You need the address set up for youby your web host. If you don't know what that is, ask them. There's no point guessing.
Click the 'Port' field to put the text cursor there. Type '21' (without the quotes) into that field.
Note: if your web host told you to use a different port number, use the number given to you by your web hostinstead. If they didn't mention anything about a port number, just type '21' (without the quotes).
Click the down arrow for the field beside 'Logon Type'. A drop down box will appear. Click 'Normal'.
When you select 'Normal', FileZilla will save the password you type in later so that you don't have to keeptyping your password every time you log in. If you are using a computer that you share with others, anddon't want FileZilla to save your password, select 'Ask for password' instead. You will then be promptedfor the password every time you connect to your website using FileZilla. Please note that this tutorialassumes that you selected 'Normal', since that is what the majority of thesitewizard.com's users do. However,don't let that stop you from using the other options if you need to.
Once you select 'Normal', the 'User' and 'Password' fields will no longer be disabled. Type your user name(sometimes called 'login name') into the User field and your password into the Password field, replacing theoriginal contents of those fields. Ask your web host for help if you don't know what your user name or password is.
Click the 'Advanced' tab at the top of the dialog box. (The 'Advanced' tab should be the second tab, justbetween the 'General' and 'Tranfer Settings' tab.)
The contents of the dialog box, just below the tab should change. Click the 'Browse' button next tothe field for 'Default local directory'. Navigate to your documents folder and look for the folder youcreated earlier to contain your website.
Click once to select the folder containing your website files. Do not doubleclick to go into the folder.Just click the folder name once to select it. Then click the 'OK' button to dismiss the dialog box.
Along with your FTP address, user name and password, your web host may also have told you the directory(ie, folder) to which you're supposed to upload your files. In general, you cannot just upload your websitefiles willy-nilly to any folder on your web host's computer, and expect it to be visible on the Internet. Most commercialweb hosts set things up so that only the files located in certain folders can be seen by your site's visitors.This is to protect your private files (such as your email) from being visible to others. As such, you willneed to know which folder your host has set aside for your public website files. On many web hosts, this folderis usually called 'www' or 'public_html' or even your domain name (eg 'example.com').
Copy and paste the name of this folder into the 'Default remote directory' field.
Note: if your web host tells you to upload to the default directory you see when you connect by FTP, leavethis field blank. (Most free web hosts don't give you a private folder, so the moment you connect by FTP,you'll be deposited in the public folder. In such a case, there's no need to enter anything into the field.)
Click the 'OK' button at the bottom of the Site Manager window.
If FileZilla issues a dialog box saying 'Default remote path cannot be parsed. Make sure it is a valid absolutepath for the selected server type', click the 'OK' button for that message. Then click the 'Advanced' tab inthe Site Manager dialog. In the 'Default remote directory' field, add a forward slash (ie, the '/' character)to the beginning of the text you typed there. For example, if the field says 'www', change it so that itsays '/www'. If it says 'public_html', change it to '/public_html'. And so on. Then click the 'OK' button again.
How to Connect to Your Site and Upload Your Files
There are at least 2 ways you can get FileZilla to connect to your website. One way is to click 'File | Site Manager'from the menu to get the Site Manager window you saw earlier. Click your site name in the left column to selectit, then click the 'Connect' button at the bottom of the Site Manager window (instead of the 'OK' button, whichmerely saves your settings).
Alternatively, click the down arrow beside the first icon on the toolbar below the menu bar. This is theicon immediately below the word 'File' on the menu. A drop down list will appear, showing you the sites youhave set up earlier. Since this is your first website, there should only be one site on that list. Clickthe name of your website.
(If you're confused as to what to do, just click 'File | Site Manager', select your site name in the left column, and usethe 'Connect' button as mentioned in the first paragraph of this item. Both methods result in the same thing happening.)
If you have entered all your login and FTP details correctly, FileZilla should connect to the computerused by your web host to hold your website files, change to the appropriate directory for your site, andlist whatever files that are currently in that folder.
Let's familiarise ourselves with the FileZilla window, so that you know what you're doing.
Just underneath the menu and toolbars at the top of the window is a space that shows the instructions that FileZillais giving to your web host's computer. The last line in that space is probably something like 'Directory listingsuccessful'. You can pretty much ignore the text in this space. They are mostly useful for diagnostic purposes for those whounderstand the technical lingo that FileZilla uses to interact with your web host's computer software.
Under that space are two separate columns. The left column shows you the directories (folders) and files on yourcomputer. The right column shows you the directories (folders) and files on your web host's computer.
Each column is vertically divided into two sections. The top half shows you the folders, the bottom the files inthat folder. If you were to doubleclick a different folder in the top half, FileZilla will show you the files locatedin that folder in the bottom half. At the moment, you should be able to see 'index.html' in the bottom half ofthe left column. This is the file you created earlier in BlueGriffon.
Doubleclick 'index.html' in the left column (the column labelled 'Local site', meaning your computer).This will cause FileZilla to upload (publish) the file to your web host's computer (the 'Remote site' in FileZilla).Incidentally, FileZilla should, theoretically, immediately display the 'index.html' file in the right panel whenit finishes doing that. However, I notice that in the version I have, FileZilla sometimes doesn't show this, eventhough 'index.html' was successfully uploaded. Don't worry if it doesn't show. We're going to check to make sureeverything is in order in the next step.
To disconnect from your website in FileZilla, click 'Server | Disconnect' from the menu. The 'Remote site' columnshould now be empty.
You can now quit FileZilla by clicking 'File | Exit'.
How to Test Your Website
Open a new tab (or window) in your web browser and type your domain name into the address bar. Do notuse Google, Bing or any other search engine to look for your website. Just type the domain name directlyinto your browser's address bar (also known as location bar).
Notice that I said to type your domain name only. For example, if your domain is 'example.com',type either 'http://example.com' or 'http://www.example.com' into your browser. Do not type the'index.html' portion. If you have named your file correctly, simply typing your domain name willcause your web browser to retrieve your 'index.html' file.
If you get an error message saying '404 File Not Found', 'Document Not Found', 'Forbidden','Directory has no index file', or something like that, it means one of two things:
You may have named your file wrongly. For example, if you named your file '
Index.html'(notice the capital 'I'), you will get this error. The home page must be named'index.html' for this trick of typing your domain name to work.You may have uploaded your file to the wrong directory. As I mentioned earlier, web servers onlydisplay files put in specific folders. If your file is in the wrong directory, the web serverwon't display it.
Another possible result of the above mistakes is that you get a default page that your web host places on your site(probably welcoming you to their service) instead of your 'index.html' page. Fix the mistakes mentioned earlierand you'll fix the error.
If your browser gives you an error like 'No DNS for www.example.com' (where 'example.com' is your domain name)or 'Domain not found', it may mean that your domain name is so new (ie, you just bought it) that yourInternet provider doesn't realise it exists. In such a case, you'll just have to wait till the informationabout your domain reaches your Internet provider. It can sometimes take up to 2 days for information abouta new domain to reach all the broadband and dialup providers around the world. The process is automated,and there's nothing you can do to make it happen faster.
Another possibility for the 'domain not found' type of error is that you typed 'www.example.com' (where'example.com' is your domain) into your browser, but your web host did not configure their system torecognise 'www.example.com' as being synonymous with 'example.com'. (Not all web hosts do this automatically, andyou may have to specifically ask them to do it for you.) In such a case, you can always test your site by typing'example.com' into your browser instead.
If you don't get any error message instead, but see the web page you designed earlier, congratulations!You have successfully created and published your first web page. It may be incomplete at the moment,but you have already mastered two of the biggest stumbling blocks newcomers typically face: getting started, anduploading your first page.
Next Chapter
Mac Local Web Server
In the next chapter,we will add a site logo to your web page and learn how to insert pictures to spruce up its appearance.
Copyright © 2012-2020 Christopher Heng. All rights reserved.
Get more free tips and articles like this,on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top »Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide »List of All BlueGriffon Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 11 February 2020.
Adding Shortcuts to any of your favourite websites on Mac is easy. You can either place the shortcut on the desktop or add it to the Dock for more easy access.
Add Shortcut to Any Website on Mac
A good way to make your favourite website readily accessible on your Mac is to add a shortcut to the website on the Dock of your Mac.
Once a shortcut to a website has been added to the desktop or to the Dock, you can simply click on that shortcut to immediately start reading articles published by your favourite website.
Add Shortcut to Website On Mac Using Safari Browser
While you can add shortcut to websites on practically any browser, we will be starting with Safari, which is the default browser on your Mac
1. Open the Safari browser on your Mac and visit your favourite website that you want to add a shortcut to. In this case let us assume that you want to add techbout.com.
2. Once the website opens in Safari browser, select the the entire URL Address to the website that you will see in the address bar of the Safari browser (See image below).
3. Next, click and drag the URL address to the Desktop and release the mouse button. This will create a shortcut to the website on the desktop of your Mac.
As you can see in the image below, you can also add the Shortcut to the Dock by dragging the URL down to the right-side of the Dock on your Mac. This will create a shortcut within the Dock, which makes it even more prominent and accessible, compared to the Desktop shortcut.
Now, any time you want to visit this website, you can simply click on the shortcut to the website as available on the Desktop or on the Dock.
How To Make A Website An App On Macbook
Add Shortcut to Website On Mac Using Chrome Browser
How To Make A Website On A Mac For Free Images
Follow the steps below to add shortcut to any website on Google’s Chrome browser. As you will notice, the steps are the same as for Safari browser.
1. Open the Chrome browser on your Mac and visit the website that you want to add the shortcut to.
2. Once the website loads in Chrome browser, select the the entire URL to the website in the Address bar of Chrome browser.
How To Make A Website On A Mac For Free
3. Next, click and drag the URL address to the Mac desktop. This will create a shortcut to the website on the desktop of your Mac.
How To Make A Website On A Mac For Free Printable
To create a shortcut on the Dock, drag the URL down to the right-side of the Dock on your Mac.