Treko - 軟體與新創公司登陸頁範本

文件

• 建立日期： 08 / 14 / 2020

歡迎！ 首先，我們要感謝您購買我們的登陸頁面套件
我們非常感謝每一筆銷售。如果您喜歡我們的作品，請不要忘記給予評價。這有助於我們開發 新且更好的項目

有關基本 HTML、JavaScript 或 CSS 編輯的問題 - 請快速提出您的問題 Google 或訪問 W3Schools 因為範本問題會得到最高優先級。您需要具備一些 HTML/CSS 知識才能編輯此範本。

使用 Firebug 或 Chrome 開發人員工具。

不要從頭開始，使用演示中的現有頁面並修改它以了解其工作原理。

透過使用瀏覽器的「頁面查找」功能，快速在此文件中找到您要找的內容 ，通常是 Control + F。

許多時候外掛程式是網站失敗的原因，如果您遇到無法解決的錯誤，請務必嘗試禁用任何第三方外掛程式 。

別忘了重新探索即時演示以獲取佈局、使用想法和範例程式碼

將下載的檔案解壓縮到您電腦的本機磁碟。在解壓縮的資料夾中，會有一個包含 文件的資料夾，以及一個包含 HTML 範本的資料夾。

由於 Treko 是一個 HTML 範本，它使用多個 .html 頁面（18 個演示頁面 + 9 個額外的內部頁面）與 CSS 樣式表和多個 JavaScript 外掛程式結合使用。以下是對檔案的簡要概述以及對 一些顯著特徵的介紹。

• css （主要 CSS 檔案，bootstrap4 CSS 檔案等）
• fonts （flaticons）
• images （所有圖片）
• js （範本 js）
• php （heroForm.php 等 - 表單 PHP 檔案）
• demo-x.html - 18 個 html 檔案（演示編號）

將下載的檔案解壓縮到您電腦的本機磁碟。在解壓縮的資料夾中，會有一個包含 文件的資料夾，以及一個包含 HTML 範本的資料夾。Treko 是一個 HTML 範本，所以 不需要真正意義上的「安裝」 只需解壓縮您從 Themeforest 下載的主要檔案，解壓縮後您就可以使用所有 範本了。

1. 選擇您將在專案中使用的佈局和額外的內部頁面
2. 重新命名一個 demo-x.html 在 index.html
3. 進行必要的更改（添加您的文字、圖片等）
4. 將您將在專案中使用的所有資料夾和 html 頁面複製到您的 www 或 public_html 目錄中，使用 FTP 客戶端或檔案管理器（或類似工具）在您的伺服器或本機電腦上

Treko 範本基於 Bootstrap v4.5.0 一個 CSS 和 JS 檔案集合，可以幫助您快速開發在任何尺寸下看起來都很漂亮的網站，無論是 17" 筆記型電腦螢幕還是 iPhone。

Bootstrap 的基礎網格是網格系統的一個變體。語法簡單且跨瀏覽器有效，但最棒的部分是它還具有像冠軍一樣靈活適應行動裝置的能力。您可以非常輕鬆地自訂網站的任何部分或建構新的。

Bootstrap 的網格系統使用一系列容器、行和列來佈局和對齊內容。它建構於 flexbox 並完全響應式。

該 index.html 是包含範本 HTML 結構的主要範本檔案。以下是 一般結構（已縮減）：

HTML 標記

如果您需要更多資訊，請訪問此網站： https://getbootstrap.com/docs/4.0/layout/grid/

所有 CSS 檔案 css 檔案都儲存在「css」資料夾中。以下是我們在此範本中使用的樣式表檔案列表。 打開每個檔案可以找到更多資訊：

1. dropdown-effects - 包含響應式巨型選單的下拉效果的資料夾
2. animate.css - 跨瀏覽器 CSS3 動畫庫
3. bootstrap.min.css - 這是主要樣式表，對於基本的範本樣式是必需的，例如表單、 輸入、div、列表元素等。
4. brick-theme.css - 磚紅色主題的主要 CSS 檔案（包含一些通用樣式，例如錨點顏色、字體大小等）
5. dimgreen-theme.css - 深綠色主題的主要 CSS 檔案（包含一些通用樣式，例如錨點顏色、字體大小等）
6. flaticon.css - 一套完整的 200 多個細向量圖標
7. green-theme.css - 綠色主題的主要 CSS 檔案
8. indigo-theme.css - 靛藍色主題的主要 CSS 檔案（包含一些通用樣式，例如錨點顏色、字體大小等）
9. magnific-popup.css - 響應式燈箱樣式表
10. menu.css - 響應式巨型選單的 CSS 檔案
11. orangered-theme.css - 橘紅色主題的主要 CSS 檔案（包含一些通用樣式，例如錨點顏色、字體大小等）
12. owl.carousel.css - 響應式輪播滑桿
13. owl.theme.default.min.css - 響應式輪播滑桿自訂檔案（如果您需要預設導航控件，例如點或下一頁按鈕，則需要此檔案）
14. pink-theme.css - 粉紅色主題的主要 CSS 檔案（包含一些通用樣式，例如錨點顏色、字體大小等）
15. red-theme.css - 紅色主題的主要 CSS 檔案（包含一些通用樣式，例如錨點顏色、字體大小等）
16. responsive.css - 此樣式表包含響應式規則，用於將範本適應任何解析度， 從桌面到小型行動裝置。
17. royalblue-theme.css - 王藍色主題的主要 CSS 檔案（包含一些通用樣式，例如錨點顏色、字體大小等）
18. skyblue-theme.css -天藍色主題的主要 CSS 檔案（包含一些通用樣式，例如錨點顏色、字體大小等）
19. violet-theme.css - 紫色主題的主要 CSS 檔案（包含一些通用樣式，例如錨點顏色、字體大小等）

如果您創建自己的樣式，必須檢查所有響應式尺寸，以便一切正常工作，如果您需要在特定尺寸更改 您自己的樣式，將在 responsive.css 中進行。

每個部分的 *.css 檔案都已註解，因此我們相信您在編輯時不會有問題。例如，標記 開始標頭包裝部分的註解如下所示：

如何編輯樣式

如果您想編輯網站的特定部分，只需在 CSS 檔案中找到相應的標籤，然後向下滾動 直到找到需要編輯的相應樣式。例如，如果您想編輯背景顏色，請打開 檔案（檔案名稱取決於您將使用的顏色方案）並執行以下操作： *.css 如果您發現您的新樣式沒有被覆蓋，很可能是因為特異性問題。向下滾動 到您的

檔案（檔案名稱取決於您將使用的顏色方案），並確保沒有類似的樣式具有更高的權重。 *.css 此範本使用多個腳本，其中許多已在範本程式碼中進行了記錄。如果您是開發人員，您會發現這 特別有用。以下是包含的 Javascript 檔案：

- 此框架提供了額外的用戶界面元素，例如對話框、 工具提示、輪播等。

1. - 評論表單的 jQuery 外掛程式 bootstrap.min.js
2. - 聯繫表單的 jQuery 外掛程式 comment-form.js
3. - 此檔案包含滾動插件、聯繫表單驗證等的通用 jQuery 設置。 contact-form.js
4. - 此腳本是為舊版 Internet Explorer 啟用 HTML5 分區元素使用的標準方法。 custom.js
5. - 是一個 JavaScript 庫，大大減少了您必須編寫的程式碼量。 html5shiv.js
6. - MailChimp 訂閱表單的 jQuery 外掛程式 jquery-3.4.1.min.js
7. - 用於追蹤元素在瀏覽器視口中出現的 jQuery 外掛程式 jquery.ajaxchimp.min.js
8. - 提供高級緩動選項的 jQuery 外掛程式。 jquery.appear.js
9. - Magnific Popup 是一個響應式燈箱和對話框腳本 jquery.easing.js
10. - 平滑滾動到 DOM 中的任何元素 jquery.magnific-popup.min.js
11. - jQuery 表單驗證外掛程式 jquery.scrollto.js
12. - 用於影片背景的 jQuery 外掛程式 jquery.validate.min.js
13. - 響應式巨型選單的 jQuery 外掛程式 jquery.vide.min.js
14. - 是一個 JavaScript 庫，可檢測用戶瀏覽器中的 HTML5 和 CSS3 功能。 menu.js
15. - 響應式輪播滑桿 jQuery 外掛程式 modernizr.custom.js
16. - 用於請求表單的 jQuery 外掛程式 owl.carousel.js
17. - 用於註冊表單的 jQuery 外掛程式 request-form.js
18. - 適用於 min/max-width CSS3 媒體查詢的快速輕量級 Polyfill（適用於 IE 6-8 等） register-form.js
19. - 在您向下滾動頁面時顯示 CSS 動畫的 jQuery 外掛程式 respond.min.js
20. 選擇您想要的佈局並進行以下更改。 wow.js

更改圖標：

圖標位於

文件夾中 - /images/ favicon.ico。您無需對 HTML 進行任何更改，只需 用您的圖標替換該檔案即可。請務必強制刷新瀏覽器的快取，以便看到新圖標。

您可以在此輕鬆生成您的圖標： 圖標和應用程式圖標生成器

別忘了為 IOS 設備替換圖標 - apple-touch-icon-152x152.png , apple-touch-icon-120x120.png, apple-touch-icon-76x76.png 和 apple-touch-icon.png. 這些圖標也位於 /images 資料夾中

更改字體：

Treko 使用兩種不同的字體 "Roboto" 用於文本的 Google WebFont 和 "Noto+Sans+TC" 用於標題的 Google WebFont 。要更改嵌入的字體，請查看網站的 head 部分，您會找到此標籤：

要更改字體，首先轉到 http://www.google.com/fonts/ 選擇一個字體並 使用生成的程式碼。

更改標誌：

打開 images 資料夾並替換 logo-x.png 和 logo-white.png 圖片與您的標誌。標誌尺寸為 155 x 36 像素。Retina 圖像的基本概念是您拍攝一張較大的 圖像，其像素數量是您圖像顯示的兩倍（例如 310 x 72 像素），並將圖像設置為 填充其中一半的空間（155 x 36 像素）。

別忘了更改行動選單的標誌：

選擇範本佈局：

Treko HTML 範本包含 18 種不同的範本佈局 和 9 additional inner pages :

注意！ 开云体育APP下载1专注开云官网，为用户提供专业可靠的体验。

1. 围绕开云app，开云体育APP下载1持续打磨更优质的服务。
2. 重新命名一個 demo-x.html 在 index.html
3. 开云体育APP下载1深耕开云体育入口领域，用心服务每一位用户。
4. 在指尖畅享精彩赛事方面，开云体育APP下载1提供贴心周到的支持。 www 或 public_html 开云体育APP下载1以实时比分，资讯全掌握为核心，带来高效便捷的体验。

Choosing Color Scheme:

Treko HTML template includes 10 color schemes. Inside the css folder there are 10 css files for diferent color schemes. You can use one of predefinied colors or build custom CSS with color which you want.

It's easy to change color scheme of this template, you just need to do following:

1. 打開 index.html file.
2. Find these lines of code in <head> section (skyblue-color scheme set as default!!):




3. Choose your favorite color (for example you want to change the skyblue-color scheme to the green) with remove one of the comment tag like this:





4. Save and see the result!

Background color for navigation menu:

Treko HTML Template includes 2 different styles for navigation (no background color and white background color). It's easy to change the header type, you just need to do following:

1) Most of the headers don't have the background color

HTML Markup:

tra-menu - No Background Color

2) To set the white background color for navigation menu just change the class tra-menu to white-menu

HTML Markup:

white-menu - White Background Color

Navigation Menu: Scrolling to a spot :

Scrolling to a spot in an HTML page is pretty simple to do. You have a lot of IDs on the page to scroll to. Write your anchor tags just as you normally would with the href attribute pointed at the ID you would like to move to (e.g. href="#content-7".) This means that if JavaScript is turned off, your menu will continue to function normally.

Background color for section:

Most of the sections don't have background color. But if you want you can change the background color manually:

1. 打開 index.html file in your text editor (I use Sublime Text (http://www.sublimetext.com/3) .
2. Find the section you want to change the background color (for example content-1):




3. Select the background color you want to apply:




4. Add the class of the background color to the section (for example you want to change white background color to the skyblue, so you can add the class bg-skyblue to the section):
5. Add the class white-color to the container to change the font color from black to white:




6. 想了解更多专业分析，助您洞察先机相关内容，尽在开云体育APP下载1。

Lightbox Customization

The lightbox is driven by the Magnific Popup jQuery plugin. Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

HTML Markup:

It is very easy to customize just add suitable class video-popup1, video-popup2 or video-popup2 to the link you want Magnific Popup to be enabled on and video link into the tag a

Initializing popup

Popup initialization code is situated in the custom.js file. There are 3 ways for video (class="video-popup1, video-popup2 or video-popup2") to initialize a popup (in this place you need only enter your video link):

For more information visit their website and check the documentation

Treko uses Flaticons Pack (250+ Icons), FontAwesome Icons (675+ Icons) and Flat PNG icons (300+ Icons)

HTML Markup for FlatIcons:

Flaticons icons use the 'span' element and each have their own unique class. For a full list of available classes, see here

HTML Markup for FontAwesome Icons:

UniSet uses also the FontAwesome Icons. Using these icon packs is a simple matter of knowing the correct class to use. If you need more information, please visit this site: http://fontawesome.io/

FontAwesome icons use the 'i' element and each have their own unique class. For a full list of available classes, see here

HTML Markup for Flat PNG Icons:

The class img-85 shows the image resolution (for example: .img-85 = 85x85px etc.)

Mailchimp Subscribe Form

If you want to use the newsletter you need to have a MailChimp account (the funcional Newsletter works only with MailChimp - http://mailchimp.com/).

Open the custom.js file in your code editor, changes needs to be made here :

http://xxx.xxx.list-manage.com/subscribe/post?u=xxx&id=xxx

You need to change three value

How to find mailchimp form action URL?

Just go to your mailchimp account. Then your list. Then Signup forms. Select Embedded forms. You will find form action URL in this page.

Here you'll learn how to add an embedded form to your site, and which third-party sites accept MailChimp Add an embedded form to your website

One notice: this will be functional only on your server, php file can not be executed on your local computer.

Contact Form / Register Form / Request Form / Comment Form:

Treko also uses the PHP engine for activate contact process. The message direct send to your email address, so you can edit your email address in php/contactForm.php, php/registerForm.php, php/requestForm.php or php/commentForm.php file. This will not be available for anyone to see, it is only used by the server to send your email. You can also specify an email subject line (or just leave the one which is there). To do this, please open php/contactForm.php, php/registerForm.php, php/requestForm.php or php/commentForm.php file and change these lines:

开云体育APP下载1围绕简洁易用的用户界面不断创新，回应用户的真实需求。

File Names: contactForm.php, quickForm or commentForm (you must use these file names exactly)

Fonts:

  Google Fonts - http://www.google.com/webfonts
  Icons Font-face - http://fortawesome.github.com/Font-Awesome/

Scripts:

• Bootstrap Framework - http://twitter.github.com/bootstrap/
• Lightbox - http://dimsemenov.com/plugins/magnific-popup/
• jQuery - http://www.jquery.com/
• jQuery.ScrollTo - https://github.com/yckart/jquery.scrollto.js
• jQuery scrollUp - https://github.com/markgoodyear/scrollup
• Form Validation - http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Support includes bugs fixing, and general problem solving with features explained on the template’s official sales page.

Support does not include:

• solving problems for plugins not packaged with our framework and templates;
• plugins integration;
• adding new features or extending the features currently available;
• any type of modification or customization.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Best Regards,
Jthemes