Dreamweaver怎么制作簡單的日歷模板?
我要評論Dreamweaver中想要制作一個日歷，主要使用表格來制作，函數(shù)創(chuàng)建與調用，if語句與for語句、ID標簽的應用。下面我們就來看看詳細的教程。
1、打開Dreamweaver軟件，新建一個HTML文檔。在body標簽加入onload="getRili()"，用來調取下面步驟的函數(shù)。在body內部新建一個div的標簽并定義ID為date。如下圖：
2、在新建文檔的<head></head>標記里輸入<style type="text/css"></style>,這個標記里用來設置一個CSS樣式。再輸入<script type="text/javascript"></script>標記，用來創(chuàng)建日歷的制作。
3、在<style type="text/css"></style>這個標記里輸入一個CSS樣式，這里不再解釋樣式的作用。在<script type="text/javascript"></script>標記里創(chuàng)建一個函數(shù)getRili()。
4、下面開始講解函數(shù)內部日歷的實現(xiàn)步驟，首先，命名我們需要用到的變量。這里先列出，下面用到時再做介紹。
5、首先在函數(shù)里輸入兩個if語句，這兩個語句的功能是判斷是否為閏年，以此來設置二月份的天數(shù)。下面的row變量用來獲得每月所占用的行數(shù)，也就是在頁面顯示的時候有幾行。str用來獲取我們要輸入的表格和文字。
6、插入兩個for循環(huán)，第一個for循環(huán)用來獲取周日到周六，并把輸出代碼保存入str。第二個for循環(huán)，首先條件設定的意思是保證輸出當月的行數(shù)，代碼意思用來創(chuàng)建行。
7、在第二個for循環(huán)嵌套一個for循環(huán)，并設定if條件語句，用來判定從那一列開始輸出每月的幾號。假如剛好是當天日期，改變當前單元格的背景顏色。
8、最后輸入的兩行代碼，第一行表示表格的結束。第二行是把生成的代碼，保存入ID為date的div。這樣一個日歷的制作就完成了！保存后運行，就是第一幅圖片的樣子了！
以上就是Dreamweaver制作日歷的教程，希望大家喜歡，請繼續(xù)關注腳本之家。
相關推薦：
相關文章
Dreamweaver網(wǎng)頁怎么添加文本字段？Dreamweaver設計帶有用戶名密碼的登陸頁面的時候，需要添加文本字段，該怎么添加呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-26
Dreamweaver怎么實現(xiàn)一個網(wǎng)頁內包含多個頁面的效果?
Dreamweaver怎么實現(xiàn)一個網(wǎng)頁內包含多個頁面的效果？Dreamweaver設計網(wǎng)頁頁面的時候，想要一個網(wǎng)頁包含多個頁面，該怎么實現(xiàn)呢？我們可以使用框架實現(xiàn)，下面我們就來看看詳2018-01-26
Dreamweaver表單怎么設置6位數(shù)的密碼？Dreamweaver中出入的表單想要設置6位數(shù)的密碼，該怎么設置呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-26
Dreamweaver網(wǎng)頁中怎么插入命名錨記鏈接?
Dreamweaver網(wǎng)頁中怎么插入命名錨記鏈接？Dreamweaver設計網(wǎng)頁的時候，想要插入命名錨記鏈接，該怎么使用命名錨記呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-16
dreamweaver怎么新建收藏夾并歸類資源？dreamweaver中收藏了很多東西，為了方便查找我們可以根據(jù)資源類型歸類，下面我們就來看看dreamweaver新建收藏夾并歸類的教程，需要2018-01-09
Dreamweaver怎么使用css選擇器中的類？Dreamweaver中css選擇器中有很多功能，想要使用其中的類，該怎么使用呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-09
Dreamweaver文件頭部信息有什么作用? dw查看文件頭部信息的教程
Dreamweaver文件頭部信息有什么作用？Dreamweaver制作的網(wǎng)頁由兩部分組成，一個是頭部信息，一個就是主體信息，今天我們就來介紹一下dw查看文件頭部信息的教程，需要的朋友2018-01-09
Dreamweaver網(wǎng)頁中的文本怎么添加背景色?
Dreamweaver網(wǎng)頁中的文本怎么添加背景色？Dreamweaver設計的網(wǎng)格，想要一小段文本中的文字添加背景色，該怎么添加呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-08
Dreamweaver網(wǎng)頁中怎么添加電子郵箱鏈接?
Dreamweaver網(wǎng)頁中怎么添加電子郵箱鏈接？Dreamweaver設計的網(wǎng)頁想要添加聯(lián)系我們的文字直接鏈接到電子郵箱，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參2018-01-05
Dreamweaver網(wǎng)頁中的文本怎么添加背景圖片?
Dreamweaver網(wǎng)頁中的文本怎么添加背景圖片？Dreamweaver設計的文本網(wǎng)頁太單調，想要給文本添加星空背景圖片，該怎么添加呢？下面我們就來看看詳細的教程，需要的朋友可以參2018-01-05
