Guide to create websites with Dreamweaver CC part 1
IT Tricks

Guide to create websites with Dreamweaver CC part 1

Dreamweaver is a great program for building and designing websites in an intuitive way. But you may feel frustrated when you first open Dreamweaver. This program has so many features that you don’t know what they are for?

This 8-part tutorial series is a translation from the Adobe team guide. They are designed to help you build a simple but elegant website in Dreamweaver CC 2015, including a guide to the site definition process (Website definition is a page or collection of pages on the World Wide Web, contains specific information provided by a person or an entity and retrieves the URL), constructs the structure in HTML (Hypertext Markup Language), adds text and images, styles the page with CSS ( Cascading Style Sheets).


Note: You do not need to have any previous experience with Dreamweaver. However, a general knowledge of Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS), will help with many topics in this series. HTML and CSS are both open web standards and there are many resources available to learn about them.

How to create a website with Dreamweaver CC (part 1)

  • What will you build
  • Set up workspace for Dreamweaver
  • Set up a website in Dreamweaver
  • Define Local Site Folder for the Bayside Beat website
  • Name files and folders in a web page
  • Save assets into Creative Cloud Library
  • Create working sites

What will you build

Get started by downloading the sample files and see the completed project.

1. Download the sample file here.

2. These files are compressed as a single ZIP file. Extract files to a convenient location, such as the desktop.

On Mac OS X, click the downloaded ZIP file in Finder to automatically extract the files.

On Windows, right-click on the downloaded ZIP file and select Extract All from the context menu. Browse to the desired location to save the file, and then press Extract.

3. Inside the extracted files is a folder named bayside, contains 9 subfolders.

Find the bayside directory

Folder Nội dung Contains textual content for web pages and js directory containing JavaScript files, which will be used to control the navigation menu on small screen resolution. Other directories contain the complete version of the project (each containing the final result of each section in this series). You can use them to test your code.

4. Open the folder part7 and drag index.html Go to the browser to view. The homepage of the completed project looks like this:

Open part7

5. Resize the browser by dragging one of the side edges inwards. When the viewport is less than 700px, the layout will change from two columns to one column. Navigation bar is replaced with MENU on black background. The white text in the box on the image of the Golden Gate Bridge, has turned a dark pink and is now placed below the image, as follows:

Change browser size

6. Click MENU. Navigation menu will slide down smoothly on semi-transparent black background.

Click MENU

7. Click MENU once again. Navigation menu slides up and disappears from view.

8. Open the navigation menu again and click on SIGHTS to see the second page.

That’s what you will build with Dreamweaver CC 2015 throughout this series. In the process, you will learn how to do the following:

  • Define a website in Dreamweaver.
  • Building the structure of a website with HTML5 elements.
  • Use the DOM panel to search for elements already on the page and add new elements.
  • Add text and images to the page.
  • Download and resample images from Creative Cloud Library.
  • Style the page with Dreamweaver’s CSS Designer
  • Create a second website in a similar fashion.
  • Control different layouts with the Visual Media Queries bar.
  • Upload the completed page to an online web server.

At the same time, you will also know the most important parts of the Dreamweaver user interface.

This is an in-depth guide, so you should spend a lot of time brooding. Each section is divided into several sections to explain what to do and why. Relax after each section to make sure you have enough time to understand and remember the various techniques introduced therein.

Note: This tutorial series was written for Dreamweaver CC 2015.2 and uses many features not available in older versions of the program. Although older versions of Dreamweaver are likely to build a similar site, you should use Dreamweaver CC 2015.2 for this tutorial. If you have not signed up for Creative Cloud, you can use the free trial.

Set up workspace for Dreamweaver

Before starting work, move on to the workspace Thiết kế. This will give you access to all the main control panels needed for this tutorial. On Windows, the fastest way to do this is to use Workspace Switcher (Workspace converter) at the top right of the screen.

Set up workspace for Dreamweaver

On Mac OS X, by default, the Workspace Switcher is in the same location, but if you’re off Application Frame, it will be on the left. If you turned it off Application Bar, Workspace Switcher will be hidden. Another way to choose a workspace is to enter Window> Workspace Layout> Design.

Set up a website in Dreamweaver

A common mistake for beginners is to start working right on the web pages in Dreamweaver without defining the site. This results in links to images and style sheets pointing to a location on the local computer. Everything works fine until you upload the website to the remote server. Then you discover all your links are broken and need to be fixed. Avoid this unfortunate mistake by always defining the site. This is a quick and easy task.

In Dreamweaver, a website that organizes all documents on the local computer that are linked to the site and allows you to track, as well as maintain links, manage files, and transfer the site’s files to the server. web. A typical Dreamweaver website has at least two parts:

  • Local Folder: This is a working directory, usually a directory on the hard drive. Dreamweaver calls this directory the original website.
  • Remote Folder: This is where you store the files on a computer that is running the web server. A web server is usually (but not always) a computer that makes your site publicly available on the web.

Tips: If you plan on working on some websites, you should create a folder on your local hard drive to store them. On Mac OS X, the folder Home Included a directory named Sites. On Windows, set up the folder named Sites at the top level of the drive C. Although the screenshots for this series were made on Windows, the method is the same for Mac OS X (besides the keyboard shortcuts and some buttons that will be mentioned later).

Define Local Site Folder for the Bayside Beat website

All you need to start working is to name the site and let Dreamweaver know where you want to store the files on the local computer. You do not need to identify Remote Folder until you are ready to upload your website to an online web server on the Internet.

1. Open Dreamweaver and select Site> New Site. Dialog box Site Setup will appear.

2. In the school Site Name, import Bayside Responsive as the name of the site. The name is used internally by Dreamweaver to identify the site. This name may or may not have spaces.

3. Click the folder icon next to the field Local Site Folder to browse and select a directory Bayside from the sample files you downloaded earlier. Dialog box Site Setup This should now look like the image below, despite the file path for Local Site Folder will depend on where you copied the folder bayside on the hard drive.

Click the folder icon next to the Local Site Folder field

4. Expand Advanced Settings in the left column of the dialog box Site Setup and choose Local Info.

5. Click the folder icon to the right of the field Default Images to open the dialog box Choose Image Folder.

6. Click New Folder (in Windows, New Folder located at the top of the dialog box; on a Mac, it’s at the bottom). Name the new folder image, select and press Select Folder (Windows) or Choose (Mac). Dialog box Site Setup would look like this:

The Site Setup dialog box

7. Leave the other options at their default values. No need to insert values ​​for Web URL because we are using related links Document.

8. Click Save.

Dashboard Files in Dreamweaver now shows the new local root for the current page. List of files in control panel Files acts as a file manager, allowing you to copy, delete, move and open files just like on the desktop.

Click on Save

You have now defined the Local Site Folder for the Bayside Beat website. This is a place to keep local copies of websites on your computer. You have also specified the default directory to store images. This tells Dreamweaver to automatically copy the images to that directory when you import the images from outside the site’s root directory.

Name files and folders in a web page

A typical website contains a large number of files and directories. For ease of maintenance, it is important to organize them appropriately. Create separate, appropriately named folders for images, videos, style sheets, and external JavaScript files. Remember the following:

  • File and folder names in web pages will never contain spaces or any of the following characters: / ?% *: | ”<>.
  • Although other special characters are allowed, it is generally advisable to restrict the use of Roman numerals, dashes and underscores.
  • Most file and directory names end up as part of a website’s URL, so keep them short but make sense. Long URLs are hard for users to remember and type into the browser on mobile devices.
  • Most web sites are hosted on Linux servers, case-sensitive. Use all lowercase letters for file and folder names to avoid the problem of not finding a file.

Save assets into Creative Cloud Library

Images and color palettes for this project are stored online in the Creative Cloud Library. The Creative Cloud Library makes images available everywhere and is especially useful when collaborating with others. For example, one person may be responsible for creating visual assets, while you are responsible for building the actual site. Check out the online documentation to learn more about using the Creative Cloud Library in Dreamweaver.

You need to save assets in a shared library into a separate library.

1. Use assets in Bayside Beat Libary.

2. Click Save to Creative Cloud at the top right of the browser screen and save the shared asset to the Bayside library, if you haven’t already done so.

3. Select the Bayside library in the Dreamweaver CC Libraries panel. You will see 4 images and 6 color patterns as follows:

Select the Bayside library in the Dreamweaver CC Libraries panel

Create working sites

You will create the Bayside Beat website from scratch. The sample files that you have downloaded contain text content in Microsoft Word and rich text format, a JavaScript file and a copy of the project at each stage for you to compare with your own working files.

Let’s start by creating two HTML pages for the site.

1. If the Dreamweaver welcome screen is displayed, click the HTML in the section Create New, or choose File> New from the main menu. Dialog box New Document will open.

File> New “width =” 650 “height =” 462 “class =” lazy “src =” cc-11.jpg “></p>
<p>2. Ensure that <strong>New Document</strong> is selected in the left column, <strong>Document Type</strong> is set to <strong>HTML</strong> and <strong>Framework</strong> is set to <strong>None.</strong></p>
<p>3. Enter <strong>Bayside Beat: Cable Cars</strong> in schools <strong>Title.</strong></p>
<p>4. Ensure that <strong>Doc Type</strong> is the default HTML5 and nothing is listed in the field <strong>Attach CSS</strong>. If anything is listed in <strong>Attach CSS</strong>, select it and click the trash icon to the right of the field.</p>
<p>5. Click <strong>Create.</strong> Dreamweaver creates an empty HTML page in the window <strong>Document.</strong></p>
<p>6. If necessary, select the button <strong>Split</strong> at the top left of the window <strong>Document</strong> to display the HTML markup below.</p>
<p style=Select the Split button

7. Window Document (or Live View) is completely empty, but the basic HTML structure is revealed in Code View.

The Document window (or Live View) is completely blank

Line 1 declares the document type (doctype), telling the browser this is an HTML file.

HTML is a tag-based language. Tags are surrounded by curly braces. Most tags come in pairs, closing tags are indicated by forward slashes, after the opening parentheses.

The entire page is nested within a pair of tags (on lines 2 and 10). Part Lines 2 – 6 contain information for the browser. All content of the page is located between the tags open and close.

In most cases, Dreamweaver generates all the code needed for you as you work with the intuitive interface and dialog. But you need to be careful if you copy and paste code from elsewhere. An HTML page has only a head and a body. If the content doesn’t display in Live View or the browser, the most likely reason is that you’ve pasted it outside the body.

8. Save the file by selecting File> Save or use keyboard shortcuts Ctrl + S (Windows) or Cmd + S (Mac).

9. In the dialog box Save As, make sure you are in the Bayside’s Local Site Folder, giving the file a name index.html and click Save.

The file is currently listed in the control panel Files and the tab in the upper left of the window Document show the file name.

Tips: You can always access Local Site Folder of the current site by clicking the Site Root button at the bottom of the dialog Save As.

10. Create a new HTML file. The welcome screen is no longer displayed, so you need to use the menu option File> New to open the dialog box New Document or press Ctrl + N (Windows) or Cmd + N (Mac).

11. Select the same options as in previous step 2, but this time leave the field blank Title, then press Create.

12. Save the file in the root directory of the webpage sights.html.

13. In Split View, value between tags </strong> on line 5 is <strong>“Untitled Document”.</strong></p> <p>This is what will be displayed in the browser tab or title bar and is also selected by the search engines. Leaving this value unchanged is a common mistake for beginners.</p> <p>There are two ways to change this value:</p> <p>Go into the code and change manually, make sure you leave the HTML tags open and closed.</p> <p>Use the tool <strong>Property Inspector</strong> by Dreamweaver.</p> <p>14. Property Inspector is the large horizontal control panel at the bottom of the window <strong>Document</strong> in the Design workspace. If necessary, click the tab <strong>Properties</strong> to make the Property Inspector appear (initially, it is hidden behind the control panel <strong>Output</strong>).</p> <p>15. Replace <strong>Untitled Document</strong> in schools <strong>Document Title</strong> equal <strong>Bayside Beat: Sightseeing.</strong> Note that nothing changes in the basic HTML as you type. To confirm the change, press the key <code>Tab</code> or <code>Enter</code>/<code>Return</code>. Value in the field <strong>Document Title</strong> replace <strong>Untitled Document</strong> in the HTML code on line 5.</p> <p style="text-align: center;"><img loading="lazy" alt="Replace the Untitled Document in the Document Title field with Bayside Beat: Sightseeing" width="650" height="365" class="lazy" src=""></p> <p>16. Save <strong>sights.html.</strong></p> <p>Although Dreamweaver creates HTML markup for you, it’s best to keep it <strong>Split View</strong> Open when working with web pages. Split View allows you to verify that the changes you have made are correct. That does not mean that Dreamweaver is not reliable. Except in extraordinary circumstances, Dreamweaver will do exactly what you asked for. But it is important to know where you are in the document. If the insertion point is in the wrong position, new code will be added. If you are not careful, you may encounter a mess that is hard to find. The DOM dashboard, which will be used in the next part of this tutorial series, also plays a very important role in tracking page structure.</p> <p><span style="text-decoration: underline;"><strong>Tips</strong></span>: If you want to see the code below along with the visual representation of the page, select <strong>View> Split Vertically</strong>. To revert to split window <strong>Document</strong> horizontally, select the same option again. Menu <strong>View</strong> Also lets you choose <strong>Live View</strong> on which side. Drag the divider bar <strong>Code</strong> and <strong>Live View</strong> to adjust their relative sizes. Dreamweaver remembers automatic settings.</p> <p>You have now completed defining your site and created two blank sites. You can start adding content to them by following Part 2: Adding and formatting text content.</p> <p>Hope you are succesful.</p> </p></div> <p> .<br /> <br /></p> <!-- AI CONTENT END 1 --> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="tags-links">Tagged <a href="" rel="tag">Create</a>, <a href="" rel="tag">Create website</a>, <a href="" rel="tag">Dreamweaver</a>, <a href="" rel="tag">Dreamweaver CC</a>, <a href="" rel="tag">Guide</a>, <a href="" rel="tag">guide to create website with Dreamweaver CC</a>, <a href="" rel="tag">how to create a website</a>, <a href="" rel="tag">Part</a>, <a href="" rel="tag">websites</a></span> </footer><!-- .entry-footer --> </article><!-- #post-## --> <div class="related-articles-wrapper"> <div class="widget-title-wrapper"> <h2 class="related-title">Related Articles</h2> </div> <div class="related-posts-wrapper clearfix"> <div class="single-post-wrap"> <div class="post-thumb-wrapper"> <a href="" title="How to attach and detach VHD and VHDX files in Windows 10"> <figure><img width="464" height="290" src="" class="attachment-newspaper-lite-block-medium size-newspaper-lite-block-medium wp-post-image" alt="How to attach and detach VHD and VHDX files in Windows 10" loading="lazy" /></figure> </a> </div><!-- .post-thumb-wrapper --> <div class="related-content-wrapper"> <div class="post-cat-list"> <span class="category-button mgs-cat-6003"><a href="">IT Tricks</a></span> </div> <h3 class="post-title"><a href="">How to attach and detach VHD and VHDX files in Windows 10</a> </h3> <div class="post-meta-wrapper"> <span class="posted-on"><span class="screen-reader-text">Posted on</span> <a href="" rel="bookmark"><time class="entry-date published updated" datetime="2020-04-11T09:26:34-05:00">April 11, 2020</time></a></span><span class="byline"> <span class="screen-reader-text">Author</span> <span class="author vcard"><a class="url fn n" href="">electrodealpro</a></span></span> </div> <p>Post Views: 26 General information VHD (Virtual Hard Disk) is a file format that represents a virtual hard disk (HDD). It can contain everything that can be found on a physical hard drive, such as a disk partition and a file system, can also contain files and folders, respectively. It is often used as the […]</p> </div><!-- related-content-wrapper --> </div><!--. single-post-wrap --> <div class="single-post-wrap"> <div class="post-thumb-wrapper"> <a href="" title=" Anonymous file sharing and messaging service"> <figure><img width="464" height="243" src="" class="attachment-newspaper-lite-block-medium size-newspaper-lite-block-medium wp-post-image" alt=" Anonymous file sharing and messaging service" loading="lazy" srcset=" 748w, 660w, 696w" sizes="(max-width: 464px) 100vw, 464px" /></figure> </a> </div><!-- .post-thumb-wrapper --> <div class="related-content-wrapper"> <div class="post-cat-list"> <span class="category-button mgs-cat-6003"><a href="">IT Tricks</a></span> <span class="category-button mgs-cat-5994"><a href="">Random</a></span> </div> <h3 class="post-title"><a href=""> Anonymous file sharing and messaging service</a> </h3> <div class="post-meta-wrapper"> <span class="posted-on"><span class="screen-reader-text">Posted on</span> <a href="" rel="bookmark"><time class="entry-date published" datetime="2020-01-13T18:23:00-06:00">January 13, 2020</time><time class="updated" datetime="2020-01-13T19:06:58-06:00">January 13, 2020</time></a></span><span class="byline"> <span class="screen-reader-text">Author</span> <span class="author vcard"><a class="url fn n" href="">electrodealpro</a></span></span> </div> <p>Post Views: 547 is an online service that aims to provide a simple real-time filesharing service. Users share files in so-called "rooms", each consisting of a chat and a list of uploaded files. The list of files automatically shows the new files that have been uploaded. How much time is left until a file […]</p> </div><!-- related-content-wrapper --> </div><!--. single-post-wrap --> <div class="single-post-wrap"> <div class="post-thumb-wrapper"> <a href="" title="Fix error 0x800f081f in Windows 10 update"> <figure><img width="464" height="290" src="" class="attachment-newspaper-lite-block-medium size-newspaper-lite-block-medium wp-post-image" alt="How to force Windows 10 upgrade" loading="lazy" /></figure> </a> </div><!-- .post-thumb-wrapper --> <div class="related-content-wrapper"> <div class="post-cat-list"> <span class="category-button mgs-cat-6003"><a href="">IT Tricks</a></span> <span class="category-button mgs-cat-5994"><a href="">Random</a></span> </div> <h3 class="post-title"><a href="">Fix error 0x800f081f in Windows 10 update</a> </h3> <div class="post-meta-wrapper"> <span class="posted-on"><span class="screen-reader-text">Posted on</span> <a href="" rel="bookmark"><time class="entry-date published updated" datetime="2020-08-31T07:24:08-05:00">August 31, 2020</time></a></span><span class="byline"> <span class="screen-reader-text">Author</span> <span class="author vcard"><a class="url fn n" href="">electrodealpro</a></span></span> </div> <p>Post Views: 23 #Fix #error #0x800f081f #Windows #update If you encounter error 0x800f081f, it means that the Windows 10 update is corrupted or, even worse, was not found by the system. See how to resolve this Windows update 0x800f081f failure. How to troubleshoot the Windows 10 update problem automatically How to resolve the 0x800f081f fault […]</p> </div><!-- related-content-wrapper --> </div><!--. single-post-wrap --> </div> </div><!-- .related-articles-wrapper --> <nav class="navigation post-navigation" role="navigation" aria-label="Posts"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="" rel="prev">6 ways to upgrade WiFi network</a></div><div class="nav-next"><a href="" rel="next">Experience conquering the run of the 59-year-old runner</a></div></div> </nav> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/guide-to-create-websites-with-dreamweaver-cc-part-1/#respond" style="display:none;">Cancel reply</a></small></h3><form action="" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='225697' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="570e001f20" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="95"/></p></form> </div><!-- #respond --> </div><!-- #comments --> </main><!-- #main --> </div><!-- #primary --> <aside id="secondary" class="widget-area" role="complementary"> <section id="search-8" class="widget widget_search"><form role="search" method="get" class="search-form" action=""> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Search" /> </form></section><section id="custom_html-12" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><script async src=""></script> <!-- Electrodealpro_Sidebar_300x250 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-5199693306490546" data-ad-slot="5643047729"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></section><section id="categories-7" class="widget widget_categories"><div class="widget-title-wrapper"><h4 class="widget-title">Categories</h4></div> <ul> <li class="cat-item cat-item-6001"><a href="">Anime</a> (1,677) </li> <li class="cat-item cat-item-38832"><a href="">Apps</a> (648) </li> <li class="cat-item cat-item-179406"><a href="">Board Game</a> (8) </li> <li class="cat-item cat-item-5996"><a href="">Camera</a> (3,389) </li> <li class="cat-item cat-item-157747"><a href="">Career</a> (14) </li> <li class="cat-item cat-item-6011"><a href="">Cars & Motobikes</a> (12,057) </li> <li class="cat-item cat-item-93304"><a href="">Cook</a> (1,722) </li> <li class="cat-item cat-item-25025"><a href="">Design</a> (1,115) </li> <li class="cat-item cat-item-84380"><a href="">Entertainment News</a> (1,867) </li> <li class="cat-item cat-item-6005"><a href="">Entertainment VDO</a> (32) </li> <li class="cat-item cat-item-47276"><a href="">Explore</a> (35) </li> <li class="cat-item cat-item-79560"><a href="">Freebie</a> (102) </li> <li class="cat-item cat-item-5998"><a href="">Game Review</a> (9,897) </li> <li class="cat-item cat-item-17822"><a href="">GameDownload Link</a> (161) </li> <li class="cat-item cat-item-5997"><a href="">Gaming</a> (129) </li> <li class="cat-item cat-item-5989"><a href="">Gaming Gear</a> (859) </li> <li class="cat-item cat-item-5993"><a href="">Gear Reviews</a> (2,502) </li> <li class="cat-item cat-item-103801"><a href="">Glossary</a> (28) </li> <li class="cat-item cat-item-6012"><a href="">Gym</a> (27) </li> <li class="cat-item cat-item-6013"><a href="">Health</a> (2,518) </li> <li class="cat-item cat-item-6003"><a href="">IT Tricks</a> (9,081) </li> <li class="cat-item cat-item-5990"><a href="">Laptop</a> (1,986) </li> <li class="cat-item cat-item-23302"><a href="">Law</a> (2,339) </li> <li class="cat-item cat-item-9826"><a href="">Life Style</a> (1,687) </li> <li class="cat-item cat-item-5999"><a href="">Marketing</a> (3,390) </li> <li class="cat-item cat-item-5988"><a href="">Mobile</a> (9,956) </li> <li class="cat-item cat-item-93617"><a href="">Movie Review</a> (243) </li> <li class="cat-item cat-item-5994"><a href="">Random</a> (88,435) </li> <li class="cat-item cat-item-9816"><a href="">Science</a> (1,552) </li> <li class="cat-item cat-item-28619"><a href="">Sport</a> (2,880) </li> <li class="cat-item cat-item-5995"><a href="">Tablet</a> (228) </li> <li class="cat-item cat-item-5991"><a href="">Tech Accessories</a> (3,199) </li> <li class="cat-item cat-item-5992"><a href="">Tech News</a> (20,155) </li> <li class="cat-item cat-item-1"><a href="">Uncategorized</a> (3) </li> <li class="cat-item cat-item-85239"><a href="">Valorant</a> (462) </li> <li class="cat-item cat-item-6002"><a href="">World News</a> (20,636) </li> </ul> </section><section id="custom_html-16" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><script async src=""></script> <!-- Electrodealpro_Sidebar_300x250 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-5199693306490546" data-ad-slot="5643047729"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></section> </aside><!-- #secondary --> </div><!--.mgs-container--> </div><!-- #content --> <footer id="colophon" class="site-footer"> <div id="bottom-footer" class="sub-footer-wrapper clearfix"> <div class="mgs-container"> <div class="site-info"> <span class="copy-info">Electrodealpro</span> <span class="sep"> | </span> Newspaper Lite by <a href="" >themecentury</a>. </div><!-- .site-info --> <nav id="footer-navigation" class="sub-footer-navigation" > <div class="footer-menu"><ul><li id="menu-item-120442" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120442"><a href="">About Us</a></li> <li id="menu-item-120441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120441"><a href="">Contact Us</a></li> <li id="menu-item-7102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7102"><a href="">Cookies Policy</a></li> <li id="menu-item-151649" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-151649"><a href="">Affiliate Disclaimer</a></li> <li id="menu-item-7103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7103"><a href="">Privacy Policy</a></li> <li id="menu-item-7104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7104"><a href="">Terms and Conditions</a></li> </ul></div> </nav> </div> </div><!-- .sub-footer-wrapper --> </footer><!-- #colophon --> <div id="mgs-scrollup" class="animated arrow-hide"><i class="fa fa-chevron-up"></i></div> </div><!-- #page --> <div class='code-block code-block-2' style='margin: 8px 0; clear: both;'> <div id="amzn-assoc-ad-1d244538-c5b7-4d53-9e16-bdddf28d19f6"></div><script async src="//"></script> </div> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --><script type='text/javascript' id='contact-form-7-js-extra'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}}; /* ]]> */ </script> <script type='text/javascript' src='' id='contact-form-7-js'></script> <script type='text/javascript' src='' id='jquery-bxslider-js'></script> <script type='text/javascript' src='' id='jquery-sticky-js'></script> <script type='text/javascript' src='' id='newspaper-lite-sticky-menu-setting-js'></script> <script type='text/javascript' src='' id='newspaper-lite-custom-script-js'></script> <script type='text/javascript' src='' id='comment-reply-js'></script> <script type='text/javascript' src='' id='detectmobilebrowser-js'></script> <script type='text/javascript' id='mystickysidebar-js-extra'> /* <![CDATA[ */ var mystickyside_name = {"mystickyside_string":"#secondary","mystickyside_content_string":"","mystickyside_margin_top_string":"90","mystickyside_margin_bot_string":"0","mystickyside_update_sidebar_height_string":"false","mystickyside_min_width_string":"795","device_desktop":"1","device_mobile":"1"}; /* ]]> */ </script> <script type='text/javascript' src='' id='mystickysidebar-js'></script> <script type='text/javascript' src='' id='wp-embed-js'></script> <script async="async" type='text/javascript' src='' id='akismet-form-js'></script> </body> </html>