dw如何制作网站
如何让网页自适应所有屏幕宽度
在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。 第一种方法:做一个网页解决问题(长了点) 如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对初学者们有所帮助。 一、消除任意缩放浏览器窗口对网页的影响 一番辛苦做出来的网页,在全屏状态下浏览一切正常。但在改变浏览窗口大小之后,网页就变得"不堪入目"了,这是个很值得注意的问题。 问题的根源还得从网页的布局说起,在DW中,网页内容的定位一般是通过表格来实现的,解决表格的问题也就成功了大半。 大家应该注意到,在DW中表格属性面板的高宽设定选择上提供了两种不同类型:百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比,如在一个表格单元的宽度是600,在它里面嵌入了另外一个表格,表格宽度占表格单元的50%,则这个表格的宽度为300,依此类推,如果在一个表格不是嵌于另一个表格单元中,则其百分比是相对于当时窗口的宽度的。IE浏览器中,随便改动主页窗口的大小时,表格的内容也随之错位、变形,就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。 自然,解决这个问题的办法就是将表格宽度设置成固定宽度(也就是像素值)。另外如果外层表格已做好固定宽度设置,内层表格也可以适当使用百分比设置。清楚这个原则以后,如果出现类似的问题大家也知道怎么解决。 二、让网页居中 说到了窗口大小就会顺着路子想到分辨率的问题,在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会跑到左边;1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧?做起来费时,看起来也费劲。怎么办呢? 现在大多数网民都还在用800*600的分辨率,所以我们一般可以以此分辨率为主,要想让网页在1024*768时居中,只要在网页原代码的<body>后紧加一句<center>,</body>前加一句</center>就OK了。不过有几个问题这是要注意一下,第一个就是上面说到的百分比的问题,表格、单元格的宽度单位最好要使用像素单位,而不要用百分比。例如width=770。如果你的表格宽度设的是百分比,那么使用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。在<body>中加入leftmargin=0,即<body leftmargin=0>这种情况下,800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。 <html> <head></head> <body topmargin=0 leftmargin=0> <center> <table cellspacing cellpadding width=760><tr><td></td></tr></table> </center> </body> </html> 三、定义固定大小的文字 大家都知道,在IE浏览器的功能设置中,有一个可以自由设置窗口内容字体大小的功能,这样由于不同访问者的设置习惯不同,呈现在他们面前的网页有时也会不不相同。比如你可能本来设计时用的是2号字体,结果由于用户对浏览器的额外设定,变的更大了,这时你的网页也可能变得"不堪入目"。虽然不是你的错,但客户是上帝。 如果使用了网页中的CSS样式表技术,就不会出现上述情况了。使用快捷键"Shift+F11"打开样式表"CSS style"编辑器,在窗口中单击鼠标右键执行"New CSS style..."命令新建一个样式表,然后在给出的列表中选择"类型"选项,定义文字属性参数(一般文字的大小选择12px较为适宜)。完成后选择网页编辑窗中的文本,单击新的样式表名称,可以看到选中的文本发生了变化。预览时试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。 四、让网页适应不同的浏览器 浏览器的格局现在是两分天下,一分是IE,另一分是NetScape,在国内Ie有绝对的占有率,在这种情况下我们设计的网页只要兼容它就行了,但NetScape在国外还是有很多人使用,毕竟它是浏览器的元老。 虽然没有办法做出让所有浏览器都兼容的网站,但只要注意以下几点,做出来的网页在各个浏览器都中能达到比较好的显示效果: 不要混合使用层和表格排版,如果是父子关系,如层中表格,不在此原则范围内。 内联式的 CSS 在 Netscape Navigator 中经常会出现问题,使用链式或内嵌式。 有时需要在空层插入表格或者透明图片,以保证在 Netscape Navigator 里的效果。 对于只有几个像素宽度或高度的层,改用图片来实现。 避免使用 W3C 组织不推荐的排版属性,用 CSS 代替。 第二种方法:做两个适合不同分辨率的页面,一个是800×600,一个是1024×768,在800×600的页面中加入一下代码就可以实现跳转了: 解决分辨率问题在Dreamweaver中没有此项功能,我们只能手动加入一段Javascript代码。首先在change-ie.html或change-nc.html页面代码中的< head>和< /head>中加入以下代码: < script language=JavaScript> < !-- function redirectPage(){ var url800x600=〃index-ie.html〃; //定义两个页面,此处假设index-ex.html和1024-ie.html同change-ie.html在同一个目录下 var url1024x768=〃1024-ie.html〃; if ((screen.width==800) && (screen.height==600)) //在此处添加screen.width、screen.height的值可以检测的分辨率 window.location.href= url800x600; else if ((screen.width==1024) && (screen.height==768)) window.location.href=url1024x768; else window.location.href=url800x600; } // --> < /script> 然后再在< body…>内加入onLoad=〃redirectPage()〃 最后,同样地,在< body>和< /body>之间加入以下代码来显示网页的工作信息: < script language=JavaScript> < !-- var w=screen.width var h=screen.height document.write(〃系统已检测到您的分辨率为:〃); document.write(〃< font size=3 color=red>〃); document.write(w+〃×〃+h); document.write(〃< /font>〃); document.write(〃正在进入页面转换,请稍候…〃); // --> < /script> 判断读者浏览器类型和屏幕分辨率,自动调用不同CSS我们在设计网页的时候一个比较头痛的问题是究竟我们的浏览者的分辨率是多少?如果使我们的浏览者能够更好的去浏览到我的网页,这个是我们设计前必须思考的问题。所以Leying在设计网页的时候第一个想的是兼容现在大多数浏览者的屏幕分辨率,这里头有几种最常用的方法: 1、硬行把网页先用表格框起来,框的分辨率应该是在760-780象素,其余的空间可以给一个背景图或者空白. 2、用自动缩放的方法也可以实现,这种方法比较古老,而且很简单,这个不多说了; 3、用自动判断的方法。 今天,就第三种方法来说说,如何来判断出浏览者的屏幕分辨率,根据不同的分辨率给予读者不同的浏览内容:
dw网页二级菜单代码怎么做!很着急把它放在一级导航底下!
一、打开Dreamweaver,点击 文件-新建 菜单,创建一个HTML文件,输入网站导航栏文字,并选中输入的文字,在下面的属性栏链接处加一个空链接。然后保存该网页文件。二、点击 窗口-行为 菜单,打开行为面板。 三、选中第一步输入的文字,点行为面板上的+号,在弹出的菜单中选-显示弹出式菜单。四、在弹出的对话框中勾选 Don’t show me this message again(不要再次向我提示此信息),再点 继续。五、在下列对话框分别设置内容、外观、高级、位置选项。在 内容 选项中,点+号可以添加菜单项,-号可以删除菜单项,缩进项可以自动生成二级菜单。六、各项都设置好后,按F12,在浏览器中预览网页效果此时你会发现和网页同级的目录多了两个文件,分别是:arrows.gif、mm_menu.js。请勿修改、移动位置,这是弹出式菜单必须的图片、JS文件。如需修改下拉菜单,可以选中文字,点击行为面板的 显示弹出式菜单 即可。如果下拉菜单下面有Flash,为了不影响下拉菜单的正常效果和层次,需要给Flash添加透明代码: <param name="WMODE" value="transparent"> ,还需在embed标签中加入代码:wmode="transparent",
如何用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;
用DW网页制作!留言板怎么做!整个网页只要有留言的就行,求源代码!
<div id="apDiv2"> <table width="539" border="0"> <form id="form1" name="form1" method="post" action=""> <tr> <td width="8"> </td> <td width="111"> </td> <td width="367"> </td> </tr> <tr> <td> </td> <td height="30"><div align="right" class="STYLE4">你的名字 :</div></td> <td><label> <input name="textfield" type="text" class="logininput" id="textfield" /> </label></td> </tr> <tr> <td> </td> <td><div align="right"><span class="STYLE4">你的QQ :</span></div></td> <td height="30"><label> <input name="textfield2" type="text" class="logininput" id="textfield2" /> </label></td> </tr> <tr> <td> </td> <td><div align="right"><span class="STYLE4"><span class="STYLE4"></span>你的邮箱 :</span></div></td> <td height="30"><label> <input name="textfield3" type="text" class="logininput" id="textfield3" /> </label></td> </tr> <tr> <td height="120"> </td> <td><div align="right"><span class="STYLE4"><span class="STYLE4"></span>给我留言 :</span></div></td> <td><label> <textarea name="wenben02" cols="40" rows="6" id="wenben02"></textarea> </label></td> </tr> <tr> <td> </td> <td> </td> <td height="50"> <label> <input name="button" type="submit" class="anniu" id="button" value="确 定" /> </label> <label> <input name="button2" type="reset" class="anniu" id="button2" value="重 置" /> </label> </form> </td> </tr> </table></div>
dw制作网页时,网页中的横线是怎么制作的?求详细步骤。
可以用 <div style="width1200px; height:1px;background:#000;font-size:0;"></div> 这一句,直接插在需要横线的地方就可以。
Dreamweaver静态网页制作步骤有哪些?
1、在Dreamveaver中“文件—新建—常规—基本页—HTML”,这就建好了一个页面,英文版的默认为文件名untitled.htm。中文版的默认为文件名“无标题文档”。htm表示的是这个网页文件是一个静态的HTML文件。可以给它改名为index.htm。2、在标题空格那里输入网页的名称,点击—页面属性,打开这个窗口后在这里可以设置网站标题、背景颜色还有背景图像,超级链接颜色,其他都保持默认值就可以了。3.这个时候光标在左上角,你可以输入一句话,如“欢迎大家来到我的主页”,用文字,用菜单“窗口/属性”打开属性面板,取文字的大小,再把文字设置为居中,然后在文字的前面敲几下回车就位于页面中间了。4.要选取字体,即选择字体中的最后一项:即编辑字体列表。然后在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体,点击中间的按钮就可以加入了。
如何用dreamweaver制作用户登录界面
1、插入一个div,设置为400x300px大小,背景色为米黄色,居中。2、输入标题文字和用户名、密码,调整位置。3、继续插入填写部分,插入--表单--文本域,所以需要输入内容的“框”都是文本域。设置用户名文本域ID为username,点击确定。4、继续同样的方式插入密码的文本域,设置ID为password。因为密码是非明文的,不需要显示,所以在属性面板里选择文本域的类型--密码。5、插入按钮。插入--表单--按钮,插入两个按钮,ID分别设置为login和reg。login按钮设置为登陆,reg按钮设置为注册。6、初始值是输入内容时,填写框显示的提示文字。7、这样一个简单的登陆界面就做好了。
怎样用Dreamweaver制作一个个人虚拟网站?
利用Dreamweaver制作一个个人虚拟网站的步骤如下:1、打开DW,DW界面如图2、分析所制作的网页的需求,明确目标3、明确需求。如果是建议一个网站,需要建立一个站点,方便管理并使制作步骤更为有条理。4、新建站点弹出来的窗口。在这里以“新闻网页”来举例,放在Dreamwaver CS6文件夹下的新闻网页文件夹5、在新闻网页文件夹下新建“images”文件,导入制作网页所需要的素材,这里所需要的素材都是图片6、新建HTML,选择“创建”7、在“标题”中输入“新闻网页首页”,转换到“设计”界面8、根据制作网页需求插入表格,只是在行列有所变化,下面的“表格宽度”以下选项根据图设置9、插入表格如图,选择表格,会看到表格边框变红,选择之后变黑。在属性中对齐选项选择“居中对齐”10、在表格第一行第一列输入“用户名”,在第一行第二个表格插入“文件域”。然后是密码,同样的插入“文件域”。切换到“拆分”界面,选中密码对应的“文件域”,将“type”改为“password”11、插入图像,不知道怎么填的话就一直选择“确定”即可12、插入按钮,同上面插入图像的处理方法那样处理,如果不知道填什么就一直“确定”,无妨。在属性栏里的值改为“登录”。然后插入图像“谷歌logo”,附上效果图13、选中第二行,点击鼠标右键,选择“表格”,“合并单元格”14、在第二行插入图片。完成页面制作。保存HTML文件。然后在站点“新闻网页”可以看到保存的HTML文件15、点击制作好的HTML文件,选择用360浏览器打开,输入用户名和密码,然后会看到如下情况:用户名课件,密码不可见,符合实际16、当然也可以在Dreamwaver CS6 的实时视图中完成第15步