You can create websites with your own design. When you work with web pages, images,
style sheets, etc., you need to store all the related files in a single location (folder). This helps you to:Stay organized
Upload the entire content to the remote server when you want to publish the website.
Note: You will learn about templates later in this module. To create a new website, do the following:
1.Select Site > New Site…
2.A window appears similar to the one below:
a.You can create a website with a single page by selecting One Page Site.
b.You can create a website from scratch by selecting Empty Site.
c.If you already have a website created using HTML or any other software, you can
continue to work with the website using MEW once it is imported. To import an
existing website, use the Import Site Wizard.
3.Select Empty Site and enter a name for the website, for example:
MyFirstWebsite. Click OK.
4.A website is created and you will notice a window similar to the one below:
5.Now you can create web pages for this website. Navigate to the location (example:
My Documents) where you stored the website. Notice the folder icon.
6.Content such as images, flash animations, web pages & style sheets, etc. will be
automatically stored in this folder.
Once the website is created, you need to create web pages. To create a webpage, do the following:
1.Select File > New > Page…. A window appears similar to the one below:
Create a Web page
2.You can use MEW to create web pages using HTML or ASP code, Style Sheets (CSS), etc.
Select HTML from the list and Click OK. Notice that a new page is created (figure
below).
3.Notice the file name Untitled_1.html. Being the first page of the website, this page is may be your homepage. Use a standard naming convention such as default.htm,
index.htm or home.htm and save this page. To save this page, select File > Save.
4.Type the file name as default and select Save. You need not specify .htm or .html
extension as it is automatically added to the web page.
HTML Editors such as MEW automatically append the required file extension, .html by default. You can configure the HTML editor to add the extension .htm by the following
procedure:
1.Select Tools > Page Editor Options…. The Page Editor Options dialog box appears
(figure below).
Handling File Extensions
2.Select the Authoring Tab (figure below).
3.Notice the default document type selected as HTML under Default Document:
dropdown menu and file extension selected as .html in Default HTML File
Extension: option.
You can change the settings, and, it is recommended to change Document Type
Declaration to HTML 5.
You can configure expression web to use external programs such as notepad to open
specific file types such as a style sheet. By default, style sheets open in expression web. To
modify, do the following:
1.Select Tools > Application Options…. The Application Options dialog box appears
(figure below).
2.Select the Configure Editors Tab (figure below).
3. Notice the file extensions (left pane) and application that will handle the extension
(right pane) displayed.
Note: Do NOT change any settings here for now.
The biggest advantage of HTML editors such as MEW is that the code is written for you by
the software.
1. Type the following in the body area (figure below):
a. My Homepage
b. This is a website created using a HTML Editor.
When you create content, MEW automatically intends them as paragraphs. You may notice
the paragraph element indicated (see figure above) as "p" with a box above around the
content. When you use carriage return (Enter key), MEW inserts another paragraph
similar to that of the word processing software.
2.Now select the text "My Homepage" and do the following:
a. Select the Style dropdown located in the toolbar (figure below)
b. Select Heading 1 <h1> from the list.
3. Now select the text "This is a website created using a HTML Editor." Select Heading 3
<h3> from the style dropdown list.
4.Once complete, select View (Menu) > Page > Code (or select Code located above the
status bar). You will see a screen similar to the one below:
Working with a Web page
5.
Notice the text is enclosed using heading (h1 and h3) elements. Now save this page
(CTRL+S).
Since the editor writes the code for you; you can stay focused on creating the content rather
than focusing on the code!
If you have noticed, there are pre-built standard HTML elements that you can use in a
webpage by just selecting the element from the style dropdown menu Now to switch back
to design view, select View > Page > Design.
The three views available in MEW are:
1.
Design View: This is the default view and displays only the content.
2.
Code View: This is used either when you want to view the source code written by the
HTML editor or, when you want to insert elements or code that is not available within
the HTML editor.
3.
Split View: This is used when you want to use both the Design and Code View side-by-
side.
If you want to test your web page, it is a recommended practice to test using multiple web
browsers. However you may need to set up the browser list. To specify multiple browsers,
do the following:
1.
Select File > Preview in Browser > Edit Browser List…. The Edit Browser List dialog
box appears.
Using Multiple Web Browsers
2.
You may notice that some web browsers are added to the list by default. If you want
add a web browser (for testing), select Add…, and specify the path of the executable
file of the web browser (for example: C:\Program Files\Google\Chrome\
Application\chrome.exe).
3.
You can also use set the screen resolution here. This could be useful when you want to
test your pages for viewing on Smartphones or tablets that use different screen
resolutions.
A blog is a discussion style site used by non-technical (and technical users) users for
creating personal web pages. Blogs are similar to an online personal diary and simple to
use.
You can use a blog to convey messages about events, announcements, news, reviews,
etc. Blogs are usually managed using a web browser and this requires active internet
connection. You can also use offline blog software to create content first and later
publish the content when an active internet connection is available.
There are hundreds of websites that offer blog service for free. Some of the popular blogs
include:
www.WordPress.com
Web Page Layout - Blogs
www.blogger.com
www.blog.com
www.weebly.com
www.blogsome.com
In this session, you will learn how to create a blog account in WordPress.
WordPress is free web service that you can use to create a beautiful website or blog.
WordPress has support for "themes" for customizing the design of a blog. Themes can
make the blog or the webpage look attractive.
Before you start using a blog, a blog account is required. To create one, you need a web
browser and an internet connection.
Open the Web Browser.
On the address bar type https://signup.WordPress.com/signup/.You should now get
to a page with the fields Blog address, Username, Password, Email Address and
Language.
Blog Address: You must provide a unique address to your WordPress Blog. This is
the address which others will use to view your blog.
Username: You should choose a username for managing this blog.
Password: Securing your WordPress blog account with a strong password is
important. A combination of uppercase and lowercase letters with some digits
along with symbols would be a strong enough password. You need to enter the
password twice.
Email Address: You must provide your Email Address here. An activation link
will be send to you from WordPress after you click "Create Blog".
Language: You can choose your own language for blogging from the list given.
Click Create Blog.
On doing so, you will be sent an email for activating your blog account. Open your email
and click on the activation link. Once you click Activate Blog, you will be redirected to
your WordPress Blog Account and you should see a web page similar to the one displayed
below.
Creating a Blog Account
Now the blog is ready for use. You will be presented with the address of your blog as
displayed in the web page above; you can either double click on the link or type the address
manually in the web browser. Either action takes you to the homepage of your blog.
Once you have created a blog, you need to submit content that you want others to view. This
process ids called posting content.
To create a post, click New Post. A Window similar to the one displayed below
appears.
Title: You must provide a title for your post; choose a tile that this post will focus on.
For example, "School Annual Day Function 2012".
Using the rich text box, you can type content that you want others to read.
Once you have finished typing the content, you need to publish the post for others to see.
Click Publish Post to publish your content. To view the post, you can type the blog address
in the address bar of the web browser; you should see your blog along with the post
(displayed below).
You can also add photos, videos, etc. to the blog using the options available in
WordPress.You can comment on posts published by others. Usually, the comment
option is available towards the end of the post. Look for options such as Leave a comment,
Leave a reply, etc. in the blog to comment. For example, in WordPress the comment box is
located below the post and labelled as Leave a reply.
In the Enter your comment here… text box, type your comments about the post.
In the Email (required) field, type your email address.
In the Name (required) field, type your name.
In the Website filed, you may type your blog address (Optional).
Once you have typed the content in the comment area, review carefully and Click Post
Comment.
Once you click the Post Comment, you will see the blog along with your comment.
style sheets, etc., you need to store all the related files in a single location (folder). This helps you to:Stay organized
Upload the entire content to the remote server when you want to publish the website.
Note: You will learn about templates later in this module. To create a new website, do the following:
1.Select Site > New Site…
2.A window appears similar to the one below:
a.You can create a website with a single page by selecting One Page Site.
b.You can create a website from scratch by selecting Empty Site.
c.If you already have a website created using HTML or any other software, you can
continue to work with the website using MEW once it is imported. To import an
existing website, use the Import Site Wizard.
3.Select Empty Site and enter a name for the website, for example:
MyFirstWebsite. Click OK.
4.A website is created and you will notice a window similar to the one below:
5.Now you can create web pages for this website. Navigate to the location (example:
My Documents) where you stored the website. Notice the folder icon.
6.Content such as images, flash animations, web pages & style sheets, etc. will be
automatically stored in this folder.
Once the website is created, you need to create web pages. To create a webpage, do the following:
1.Select File > New > Page…. A window appears similar to the one below:
Create a Web page
2.You can use MEW to create web pages using HTML or ASP code, Style Sheets (CSS), etc.
Select HTML from the list and Click OK. Notice that a new page is created (figure
below).
3.Notice the file name Untitled_1.html. Being the first page of the website, this page is may be your homepage. Use a standard naming convention such as default.htm,
index.htm or home.htm and save this page. To save this page, select File > Save.
4.Type the file name as default and select Save. You need not specify .htm or .html
extension as it is automatically added to the web page.
HTML Editors such as MEW automatically append the required file extension, .html by default. You can configure the HTML editor to add the extension .htm by the following
procedure:
1.Select Tools > Page Editor Options…. The Page Editor Options dialog box appears
(figure below).
Handling File Extensions
2.Select the Authoring Tab (figure below).
3.Notice the default document type selected as HTML under Default Document:
dropdown menu and file extension selected as .html in Default HTML File
Extension: option.
You can change the settings, and, it is recommended to change Document Type
Declaration to HTML 5.
You can configure expression web to use external programs such as notepad to open
specific file types such as a style sheet. By default, style sheets open in expression web. To
modify, do the following:
1.Select Tools > Application Options…. The Application Options dialog box appears
(figure below).
2.Select the Configure Editors Tab (figure below).
3. Notice the file extensions (left pane) and application that will handle the extension
(right pane) displayed.
Note: Do NOT change any settings here for now.
The biggest advantage of HTML editors such as MEW is that the code is written for you by
the software.
1. Type the following in the body area (figure below):
a. My Homepage
b. This is a website created using a HTML Editor.
When you create content, MEW automatically intends them as paragraphs. You may notice
the paragraph element indicated (see figure above) as "p" with a box above around the
content. When you use carriage return (Enter key), MEW inserts another paragraph
similar to that of the word processing software.
2.Now select the text "My Homepage" and do the following:
a. Select the Style dropdown located in the toolbar (figure below)
b. Select Heading 1 <h1> from the list.
3. Now select the text "This is a website created using a HTML Editor." Select Heading 3
<h3> from the style dropdown list.
4.Once complete, select View (Menu) > Page > Code (or select Code located above the
status bar). You will see a screen similar to the one below:
Working with a Web page
5.
Notice the text is enclosed using heading (h1 and h3) elements. Now save this page
(CTRL+S).
Since the editor writes the code for you; you can stay focused on creating the content rather
than focusing on the code!
If you have noticed, there are pre-built standard HTML elements that you can use in a
webpage by just selecting the element from the style dropdown menu Now to switch back
to design view, select View > Page > Design.
The three views available in MEW are:
1.
Design View: This is the default view and displays only the content.
2.
Code View: This is used either when you want to view the source code written by the
HTML editor or, when you want to insert elements or code that is not available within
the HTML editor.
3.
Split View: This is used when you want to use both the Design and Code View side-by-
side.
If you want to test your web page, it is a recommended practice to test using multiple web
browsers. However you may need to set up the browser list. To specify multiple browsers,
do the following:
1.
Select File > Preview in Browser > Edit Browser List…. The Edit Browser List dialog
box appears.
Using Multiple Web Browsers
2.
You may notice that some web browsers are added to the list by default. If you want
add a web browser (for testing), select Add…, and specify the path of the executable
file of the web browser (for example: C:\Program Files\Google\Chrome\
Application\chrome.exe).
3.
You can also use set the screen resolution here. This could be useful when you want to
test your pages for viewing on Smartphones or tablets that use different screen
resolutions.
A blog is a discussion style site used by non-technical (and technical users) users for
creating personal web pages. Blogs are similar to an online personal diary and simple to
use.
You can use a blog to convey messages about events, announcements, news, reviews,
etc. Blogs are usually managed using a web browser and this requires active internet
connection. You can also use offline blog software to create content first and later
publish the content when an active internet connection is available.
There are hundreds of websites that offer blog service for free. Some of the popular blogs
include:
www.WordPress.com
Web Page Layout - Blogs
www.blogger.com
www.blog.com
www.weebly.com
www.blogsome.com
In this session, you will learn how to create a blog account in WordPress.
WordPress is free web service that you can use to create a beautiful website or blog.
WordPress has support for "themes" for customizing the design of a blog. Themes can
make the blog or the webpage look attractive.
Before you start using a blog, a blog account is required. To create one, you need a web
browser and an internet connection.
Open the Web Browser.
On the address bar type https://signup.WordPress.com/signup/.You should now get
to a page with the fields Blog address, Username, Password, Email Address and
Language.
Blog Address: You must provide a unique address to your WordPress Blog. This is
the address which others will use to view your blog.
Username: You should choose a username for managing this blog.
Password: Securing your WordPress blog account with a strong password is
important. A combination of uppercase and lowercase letters with some digits
along with symbols would be a strong enough password. You need to enter the
password twice.
Email Address: You must provide your Email Address here. An activation link
will be send to you from WordPress after you click "Create Blog".
Language: You can choose your own language for blogging from the list given.
Click Create Blog.
On doing so, you will be sent an email for activating your blog account. Open your email
and click on the activation link. Once you click Activate Blog, you will be redirected to
your WordPress Blog Account and you should see a web page similar to the one displayed
below.
Creating a Blog Account
Now the blog is ready for use. You will be presented with the address of your blog as
displayed in the web page above; you can either double click on the link or type the address
manually in the web browser. Either action takes you to the homepage of your blog.
Once you have created a blog, you need to submit content that you want others to view. This
process ids called posting content.
To create a post, click New Post. A Window similar to the one displayed below
appears.
Title: You must provide a title for your post; choose a tile that this post will focus on.
For example, "School Annual Day Function 2012".
Using the rich text box, you can type content that you want others to read.
Once you have finished typing the content, you need to publish the post for others to see.
Click Publish Post to publish your content. To view the post, you can type the blog address
in the address bar of the web browser; you should see your blog along with the post
(displayed below).
You can also add photos, videos, etc. to the blog using the options available in
WordPress.You can comment on posts published by others. Usually, the comment
option is available towards the end of the post. Look for options such as Leave a comment,
Leave a reply, etc. in the blog to comment. For example, in WordPress the comment box is
located below the post and labelled as Leave a reply.
In the Enter your comment here… text box, type your comments about the post.
In the Email (required) field, type your email address.
In the Name (required) field, type your name.
In the Website filed, you may type your blog address (Optional).
Once you have typed the content in the comment area, review carefully and Click Post
Comment.
Once you click the Post Comment, you will see the blog along with your comment.
No comments:
Post a Comment