A. 如何用Dreamweaver製作網頁動態展示的圖片
dw中可以用組圖輪播的方式實現動態展示圖片。
參考:在DW中插入一個圖片,然後回車
重復步驟1直到所有圖片添加完成
選擇所有圖片,格式菜單-〉列表-〉項目列表,製作一個圖片列表
然後再插入一個div,id命名為「LunBoNum」,在div內寫入代碼如下:
<span class="CurrentNum">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
插入一個新id為「LunBo」的div,並包含如上全部內容,代碼如下:
<div class="LunBo">
<ul>
<li class="CurrentPic"><img src="images/1.png" width="490" height="170"></li>
<li><img src="images/2.jpg" width="490" height="170"></li>
<li><img src="images/3.jpg" width="490" height="170"></li>
<li><img src="images/4.jpg" width="490" height="170"></li>
<li><img src="images/5.png" width="490" height="170"></li>
</ul>
<div class="LunBoNum">
<span class="CurrentNum">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
在網頁的<head></head>代碼間加入jQuery框架鏈接<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
編寫JS代碼如下
<script type="text/javascript" language="javascript">
var PicTotal = 5;// 當前圖片總數
var CurrentIndex;// 當前滑鼠點擊圖片索引
var ToDisplayPicNumber = 0;// 自動播放時的圖片索引
$("div.LunBo div.LunBoNum span").click(DisplayPic);
function DisplayPic() {
// 測試是父親的第幾個兒子
CurrentIndex = $(this).index();
// 刪除所有同級兄弟的類屬性
$(this).parent().children().removeClass("CurrentNum")
// 為當前元素添加類
$(this).addClass("CurrentNum");
// 隱藏全部圖片
var Pic = $(this).parent().parent().children("ul");
$(Pic).children().hide();
// 顯示指定圖片
$(Pic).children("li").eq(CurrentIndex).show();
}
function PicNumClick() {
$("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click");
ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;
setTimeout("PicNumClick()",1000);
}
setTimeout("PicNumClick()",1000);
</script>
鏈接CSS文件,文件內容如下
* {
margin: 0px;
padding: 0px;
font-size: 14px;
}
div.LunBo {
position: relative;
list-style-type: none;
height: 170px;
width: 490px;
}
div.LunBo ul li {
position: absolute;
height: 170px;
width: 490px;
left: 0px;
top: 0px;
display: none;
}
div.LunBo ul li.CurrentPic {
display: block;
}
div.LunBo div.LunBoNum {
position: absolute;
left: 374px;
bottom: 11px;
width: 83px;
text-align: right;
background-color: #999;
padding-left: 10px;
}
div.LunBo div.LunBoNum span {
height: 20px;
width: 15px;
display: block;
line-height: 20px;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
float: left;
cursor: pointer;
}
div.LunBo div.LunBoNum span.CurrentNum {
background-color: #3F6;
B. 這個圖片怎麼用DW寫出來!
......dw只是一款編輯器,這是用超文本語言,加上圖片文件路徑呈現的效果,希望能幫到你---!!!
C. 用DW製作網頁時可以放入哪幾種圖片格式
1:jpg
聯合照片專家組(外語簡稱JP
格式是JPG的圖片
EG外語全稱:Joint Photographic ExpertGroup)JPEG也是最常見的一種圖像格式,它是由聯合照片專家組(外語全稱:Joint Photographic Experts Group),文件後輟名為".jpg"或".jpeg",是最常用的圖像文件格式,由一個軟體開發聯合會組織制定,是一種有損壓縮格式,能夠將圖像壓縮在很小的儲存空間,圖像中重復或不重要的資料會被丟失,因此容易造成圖像數據的損傷。
2:png
攜帶型網路圖形(外語簡稱PNG、外語全稱:Portable Network Graphics),是網上接受的最新圖像文件格式。PNG能夠提供長度比GIF小30%的無損壓縮圖像文件。它同時提供 24位和48位真彩色圖像支持以及其他諸多技術性支持。由於PNG非常新,所以並不是所有的程序都可以用它來存儲圖像文件,但Photoshop可以處理PNG圖像文件,也可以用PNG圖像文件格式存儲。
3:gif
圖形交換格式(外語簡稱:GIF、外語全稱:Graphics Interchange Format),是CompuServe公司在 1987年開發的圖像文件格式。GIF文件的數據,是一種基於LZW演算法的連續色調的無損壓縮格式。其壓縮率一般在50%左右,它不屬於任何應用程序。幾乎所有相關軟體都支持它,公共領域有大量的軟體在使用GIF圖像文件。
D. dw如何為圖片設置css樣式
dw里怎樣設置圖片的css樣式
1、首先在文件內插入一張圖片,點擊插入\圖像,選擇一張圖片即可。
2、選中圖像,點擊css樣式窗口的+號,新建一個CSS(相關課程推薦:css視頻教程) 樣式,打開對話框。選擇標簽元素,下面就自動變為img,就是說為圖像編輯規則。
3、比如要為圖片編輯邊框,就在彈出的對話框中選擇邊框,有三個屬性可以更改,一個是類型,大小和顏色。可以根據需要選擇。
4、在右側的css面板上就多了個邊框屬性,代碼中多了個圖像的css樣式代碼。圖像就自動按照樣式進行更改了。
5、如果要對該圖像再進行修改,可以點擊css樣式窗口下的鉛筆,在彈出的對話框中修改即可。
E. 在DW中如何讓插入的圖片使用表格的格式
恩啊~
圖片可以設置大小的 設成和表格一樣的大小就行了,可以居中
對了,如果是手拖動來調整圖片大小的話,記得按住shift鍵,可以等比例縮放
F. 怎麼把dw加過鏈接的圖片改成JPG、JPEG、GIF、PNG格式
不知道你想要幹嘛。
最基本的,問問題,的要讓對方能明白你想干什麼。
1、如果想改變圖片格式,請用圖片工具修改圖片格式,比如:windows自帶的畫圖板打開,然後修改圖片格式。
2、如果是dw給圖片已經添加了超鏈接,那麼直接用dw或者其他編輯器打開網頁文件,修改圖片的名稱以及擴展名就就可以了。
3、我就猜不出你想要幹嘛了。
G. 在DW中插入圖片,怎麼樣使圖片像右邊靠齊
你好,有3種方法都可以實現:
1,在DW裡面的代碼模式中在圖片上寫行內樣式:style="float:right"
2,在DW裡面的圖片上滑鼠右擊,選擇對齊->右對齊
3,在DW裡面選擇圖片,在屬性裡面的對齊選擇右對齊
H. dw做完的文件怎麼存成圖片形式
Dreamweaver製作的是網頁文件,網頁上即便有圖片,也是引用圖片的鏈接代碼,指向的是圖片的保存位置。它不能保存圖片格式的文件。
利用Dreamweaver的插入圖片功能,可以製作帶有圖片的網頁。但是圖片並非真的存在於網頁內,只是用代碼引用圖片文件的地址,圖片的格式依舊還是原來的格式。所以只有一幅圖片的網頁文件起碼要有兩個文件,一個是網頁文件自身,一個是被引用在網頁上的這個圖片。
I. DW導入的圖片是什麼格式
Dreamweaver
比如:.html .cfm .php .css .asp .xsl .js .xml等等。
(9)dw怎麼寫圖片格式擴展閱讀
Adobe Dreamweaver
DREAMWEAVER 一般指本詞條
Adobe Dreamweaver,簡稱「DW」,中文名稱 "夢想編織者",最初為美國Macromedia公司開發[1],2005年被Adobe公司收購。
DW是集網頁製作和管理網站於一身的所見即所得網頁代碼編輯器。利用對 HTML、CSS、JavaScript等內容的支持,設計師和程序員可以在幾乎任何地方快速製作和進行網站建設。[2]
Adobe Dreamweaver使用所見即所得的介面,亦有HTML(標准通用標記語言下的一個應用)編輯的功能,藉助經過簡化的智能編碼引擎,輕松地創建、編碼和管理動態網站。[3]訪問代碼提示,即可快速了解 HTML、CSS 和其他Web標准。[4]使用視覺輔助功能減少錯誤並提高網站開發速度。[5]
軟體名稱
Adobe Dreamweaver
軟體平台
Windows、MacOS[1]
最近更新時間
2019年12月6日[1]
軟體語言
C++[1]
開發商
美國Adobe公司功能介紹
藉助共享型用戶界面設計,在Adobe Creative Suite 4的不同組件之間更快、更明智地工作。
使用工作區切換器可以從一個工作環境快速切換到下一個環境。
具體功能
CS6新增功能
利用Adobe DreamweaverCS6軟體中改善的FTP性能,更高效地傳輸大型文件。更新的「實時視圖」和「多屏幕預覽」面板可呈現HTML5代碼,使您能檢查自己的工作。
自適應網格
可響應的自適應網格版面
使用響應迅速的CSS3自適應網格版面,來創建跨平台和跨瀏覽器的兼容網頁設計。
利用簡潔、業界標準的代碼為各種不同設備和計算機開發項目,提高工作效率。直觀地創建復雜網頁設計和頁面版面,無需忙於編寫代碼。
改善FTP性能
利用重新改良的多線程FTP傳輸工具節省上傳大型文件的時間。更快速高效地上傳網站文件,縮短製作時間。
資料來源網路若侵權聯系刪除
J. DW軟體里,像圖片1這樣的圖片在左邊,文字右邊的怎麼做不敲代碼行不行
1、可以先打個草稿,左側為文字區,右側為圖片區,圖片區可以作為一個整體,這樣可以看作一個大框裡麵包含兩個盒子,左側為文字盒子右側為圖片盒子,而圖片盒子裡面又含有三張圖片,分析完成後,就可以利用浮動來解決問題。