1. Save
the master page and preview it in browser to test your changes. Now, we will
create the first page of the site, index page.
2. Go
to Site Actions > Site Contents
and select Pages library.
3. From
the FILES tab at the top, select New Document. Enter Title and
Description, for example, for home page, enter Home in the Title box
and enter Home Page in Description box. Enter default in the URL Name. Select Full page
in the Page Layout section and click
Create button.
4. Click
on default page you just created to open it. Click EDIT link in the top right corner. In the middle of the page, you
will see Page Content area. This is the place where you will copy
the content stored in the contentarea.txt file (or from the clipboard if you
did not store it in the text file). Click Edit
Source button in the ribbon.
Copy the content in the Page Content
area. Preview the page. You will notice that images are missing. This is
because the image paths are incorrect in the content you pasted. Click the Edit Source button in the ribbon. Notice the image path,
it points to the images folder inside Pages library. This is not where you have
your images. You can either move your images to the location used in the
content or you can change the path in the content to where you have stored your
files. Let’s use the second option. Replace /Pages/images with /_catalogs/masterpage/social/images.
Save the changes and preview the page. It looks good now, isn’t it?
5. Open
the master page again in Edit mode and locate <div data-name="ContentPlaceHolderMain">. Add
style=”text-align: center;” in the tag to center-align the content area to
match our template. Updated tag will look like this:
<div
data-name="ContentPlaceHolderMain" style="text-align:
center;">
</div>
6. Now,
you will create the remaining pages for the site. Refer to the instructions
above to create new pages. Create a new page and name it Aboutus. Edit it and paste following code in the Page Content area (Use Edit Source button in the ribbon to switch to code view):
<div class="fullwidth slider_bg">
<div
class="main_wrapper">
<div
class="inner_wrapper">
<div
class="slider">
<img
src="/_catalogs/masterpage/social/images/aboutus.png" width="100%"/>
</div>
</div>
</div>
</div>
<div class="main_wrapper">
<div class="inner_wrapper">
<div class="content">
<h1>Lorem Ipsum</h1>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged.</p>
</div>
</div>
</div>
</div>
|
Listing 12-2: About Us page content
Save and Publish the page.
Figure 12-8: About Us
Create Services page (services.aspx) and paste following code in the Page Content area:
<div class="fullwidth slider_bg">
<div
class="main_wrapper">
<div
class="inner_wrapper">
<div
class="slider">
<img
src="/_catalogs/masterpage/social/images/services.png" width="100%"/>
</div>
</div>
</div>
</div>
<div
class="main_wrapper">
<div
class="inner_wrapper">
<div
class="content">
<h1>Lorem
Ipsum</h1>
<p>Lorem Ipsum is simply
dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.</p>
</div>
</div>
</div>
</div>
|
Listing 12-3: Content for
Services page
Create page called Resources
(resources.aspx) and paste following code in the Page Content area:
<div class="fullwidth slider_bg">
<div
class="main_wrapper">
<div
class="inner_wrapper">
<div
class="slider">
<img
src="/_catalogs/masterpage/social/images/resources.png" width="100%"/>
</div>
</div>
</div>
</div>
<div
class="main_wrapper">
<div
class="inner_wrapper">
<div
class="content">
<h1>Lorem
Ipsum</h1>
<p>Lorem Ipsum is
simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.</p>
</div>
</div>
</div>
</div>
|
Listing 12-4: Content for Resources page
Create page called ContactUs
(contactus.aspx) and paste following code in the Page Content area:
<div class="fullwidth slider_bg">
<div
class="main_wrapper">
<div
class="inner_wrapper">
<div
class="slider">
<img
src="/_catalogs/masterpage/social/images/contactus.png"
width="100%"/>
</div>
</div>
</div>
</div>
<div
class="main_wrapper">
<div
class="inner_wrapper">
<div
class="content">
<h1>Lorem
Ipsum</h1>
<p>Lorem Ipsum is
simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.</p>
</div>
</div>
</div>
</div>
|
Listing 12-5: Content for ContactUs page
That is it! We have created all the pages.
Part 2
Part 4
Part 5
No comments:
Post a Comment