网页设计相关文章.doc
《网页设计相关文章.doc》由会员分享,可在线阅读,更多相关《网页设计相关文章.doc(12页珍藏版)》请在装配图网上搜索。
网页制作常用代码2010-06-22 06:34:45 来源:源码之家 站长整理 【大 中 小】 浏览:1778 次一:文字加粗 倾斜的代码文字加粗的代码是: 你好 文字倾斜的代码是: 你好! 底线字:二:文字链接代码如果您想点击某处文字会连接到另外一个网页的效果,这是超链接,代码是这样:共享空间如果要点了这个文字以后重新打开一个窗口的话,代码是:共享空间三:在网站上放图片的代码如果你看到一个好看的图片想放到网站上,代码是这样的:后面的数字调节图片的尺寸大小。四:图片链接代码如果要点一下图片就能打开一个网站的链接代码是这样的:如果要点一下图片就能打开一个网站的链接,并且重新打开一个窗口。代码是这样的:上面的数字都能调节图片尺寸大小。五:换行代码如果你想换行,直接用Enter键是不行的,需要在您想换行的位置输入,这样就会分成两行显示 ,整个网站看起来也不会是一大片了,而是段落分明。六:文字移动的代码是这里写文字七:移动图片的代码把里面的图片地址换成你的就行 想多放一个图片就按照格式在中间插入:里面的图片地址自己定。八:背景音乐的代码如果想在你的网站上放上一段好听的背景音乐,代码是: 里面的背景音乐地址你能自己替换。前面的是音乐地址,一般都以mid或者mp3的形式结尾 后面的数字是播放次数。http:/www.midifan.com/midi/这个网站都有好的背景音乐九:在网站中插入一个flash动画的代码是 里面的动画地址换成你的.动画地址都要以swf的形式结尾。这点需要注意。十:打开网站时候出现的欢迎词代码十一:关闭网站的时候出现的话十二:打开网站的时候自己做一个弹出窗口的广告var TimerID=1;window.open(www.mycodes.net,width=600,height=300,left=100,top=50);里面的 http:/163.com 这个是你预先做好的一个网页,后面的数字是调节大小和位置的,你自己多试验几次。十三:鼠标感应字体变红色的代码如下:插在之间TD FONT-SIZE: 12pxBODY FONT-SIZE: 12pxINPUT FONT-SIZE: 12pxA:link COLOR: #000000; TEXT-DECORATION: noneA:visited COLOR: #000000; TEXT-DECORATION: noneA:active COLOR: blue; TEXT-DECORATION: noneA:hover COLOR: red; TEXT-DECORATION: underline .so BORDER-RIGHT: 1px ridge; BORDER-TOP: #ffffff 1px ridge; FONT-SIZE: 12px; BORDER-LEFT: #ffffff 1px ridge; BORDER-BOTTOM: 1px ridge; BACKGROUND-COLOR: #cccccc十四:禁止他人复制你网页的代码:十五:把其它网页放入自已网页中的代码:网站生成静态HTML页面的好处和优势2010-08-15 09:48:49 来源:源码之家 http:/www.mycodes.net一、访问速度更快 1、极大的降低数据库资源的消耗 普通的动态页面在每一个用户的每一次访问时,都会即时的读取数据库中的数据再显示给访问者,读取数据库是一个消耗CPU和数据库程序资源的工作,当访问量变大时会出现访问延迟的现象。 而静态的HTML页面是通过程序,将用户需要读取的数据一次性写入到HTML文件当中,当用户访问时,就已经不需要再读取数据库而直接看到数据了,这极大的减轻了服务器和数据库的负担,提高了访问速度。 2、减轻服务器的负担,使网站访问更快更稳定 普通的ASP页面因为内涵脚本语言,所以用户通过浏览器访问时,服务器需要先解释页面中的脚本语言,将脚本转换为显示内容再展现给用户。 而HTML页面是通过程序,将ASP脚本语言一次性解释完成并写入成浏览器直接识别的网页文件,当用户访问时,不需要服务器对该访问再做解释和转换,这极大的减轻了服务器和数据库的负担,提高了访问速度。二、更安全 网络攻击的主要目标就是网站的数据库,而网页静态化处理后,用户访问网站时不需要再连接数据库,从而掐断了攻击者和数据库之间的连接,使得攻击变得没有了目标。理论上一个全站静态的网站,是没有任何漏洞可攻击的。三、更容易被搜索到 世界各大搜索引擎例如百度、Google等,对HTML页面的抓取和收录都比动态页面更及时更全面,使用静态化HTML页面极大的增加网站被搜索到的几率。 让您有更多的机会展现自己。点滴精华Dreamweaver网页设计制作技巧2010-06-21 19:21:47 来源:源码之家 站长整理 【大 中 小】 浏览:159 次 1、灵活运用样式熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同。比如用Custon Style来调用Style标准,在网页代码中就生成一个span标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素列表来调用Style。2、活用Format Table命令在复杂的网页设计中,表格的应用是最多的,因为利用表格可以自由地控制文本和图象在网页上出现的具体位置,从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不甘落后,我们可以使用其中的“Format Table”(格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式,先将光标置于表格的任意一个单元格内,再选择 “Command”“Format Table”命令, 在随后出现的对话框中,从左边的列表中选择一个设计方案。按“Apply” 键来查看效果,如果不满意的话,还可以重新设置或者修改部分参数的值,如边界粗细,背景颜色等等。3、同时链接到两个网页我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档,可以使用“Go To URL”java script 行为。打开一个有框架的网页,选择文字或图象,然后从行为面板中选择“Go To URL”。我们会注意到Dreamweaver会在“Go To URL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。4、不给文件起中文名称大家在制作好了网页后,通常会给网页起一个具有代表性的中文名称,一来能使人一看文件名就能大概了解文件所包含的内容,二来能够方便各个超级链接之间的相互调用。但如果你在Dreamweaver中这样做,就会发现Dreamweaver对中文文件名支持得不是太好,经常会有页面调用不正确的现象发生,所以我们以后在Dreamweaver中保存网页的时候,尽量用英文或者数字作为文件名称,这样就可以避免上面的出错现象。5、巧妙设置字体分辨率我们在制作网页的时候,经常有这种体会,那就是制作好的网页在本地计算机上浏览时很正常,但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了,这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示,在 Dreamweaver中得到了较好的解决。在文档窗口的右下角,Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字,在弹出式菜单中可以为当前的页面指定显示分辨率,通过修改可以使你的主页更具灵活性。使不同分辨率的显示器都能较好地显示。6、巧妙隐藏标签如果在网页中插入了不可见的元素时,Dreamweaver会自动在页面上添加一个与之相应的元素标签,以便于我们选择不可见元素。但这并不全是件好事,比如我们在一个有很多层的页面中的第一行便插入一个表格,就会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第二行,虽然在浏览时并不影响效果,但这确确实实会阻碍我们的工作。所以当我们觉得某个元素标签碍手碍脚时,就索性将之屏蔽掉。方法是按Ctrl+U打开 Preferences面板,在Category中选中Invisibel Elements,在面板的右边将会出现所有的元素标签。只要将不需要的元素标签前的勾去掉,以后它就保证不会再出现了。7、善用拖放技巧我们在使用Dreamweaver编辑网页的时候,经常需要插入一些图象什么的,假设要插入的图象很多,按照常规方法来操作就显得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把Dreamweaver的操作窗口变成活动窗口,以腾出空间来显示Explorer窗口,找到要插入的图象文件后,把它们一一用鼠标拖动到网页的适当部位,Dreamweaver将自动把这些图象的url添加到文件的HTML代码中,当然这里要求被拖动的图象文件必须是gif、jpg等web图象格式的文件。对于已经在网页中的图象也是一样,直接拖过来就可以了。但如果被拖动的图象上有超级链接,就不可以再使用拖动技术了,因为那时拖过来的仅仅是超级链接地址。“高效”是首要的设计要求2010-08-11 09:41:41 来源:源码之家 站长整理 【大 中 小】 浏览:42 次 设计的目标:设计是为了更好的传达信息。其中的“更好”包括:更美丽的、更高效的、更优雅的 这是我们经过反复讨论后得到的共识。 只有这样的共识,还不够。因为我们会遇到这样的情况:我希望把这段文字设计成蓝色,这会更有感觉、更舒服。但是,使用蓝色可能会让用户迷惑,因为这段文字没有链接,且这个页面中,有链接的文字都是蓝色。“更美丽的信息传达也是设计的目标啊” 所以,要让设计的目标能更有效的指导设计工作,我们还需要再做些什么进一步规范“更好的”各项具体要求。 更高效的是基本要求,是需要首先被落实的。“更优雅的、更美丽的”则是更高的要求。这类似与“温饱”与“小康”的关系。 为什么这么说呢? 1. 用户是来使用产品的,而不是来欣赏的,即使是apple.com也是同样的。要欣赏就去美术馆了,十几英寸的显示器上能欣赏出啥来呢? 2. 视觉设计中很多涉及功能的视觉表现本来就应该以科学、社会学、心理学为基础,而不是凭空的、随意的“创造”。比如,绿色普遍被理解为“可行的”“允许的”“正确的”,那么,页面出错的信息用绿色背景就是不好的,甚至可以说是错的。 “更高效”是个无条件的要求。不应为了实现其他设计目标而受到损失。 如何保证“更高效”? 保证“更高效”,是不是保留页面原型中的所有信息不变就可以了?不是。不说也知道,如果要是的话,显然就不用在这里特意说了。那,为什么不是? 视觉设计中有这样两类工作: 1. 渲染气氛,表现视觉风格。通过内容单元框的形状、颜色,文字颜色,背景色,背景图形表现出特定的视觉风格,渲染气氛,让用户在浏览网页的时候感受到或温馨、或可信、或可爱 2. 用图形元素直接或者辅助传达信息。比如:图标的设计,按钮样式的设计,重点信息的图形展示 做这些工作,不随意删改页面原型中的内容,只是基本的要求。渲染气氛的过程中干扰了正文信息的显示是不对的;使用图形元素达意不恰当也是不对的,不需要传达信息的地方用图标来装饰更是不对的。 在视觉设计过程中保证信息传达的高效水平不被降低甚至是能更高,这是项难度很大的工作。 之前我曾经给了个简单的结论“视觉表现元素不应带有信息量”,这是一个可以直接执行的结论,是设计目标的产生出来的一个具体要求。也就是说,如果你不愿意去理解设计的目标,更高效、更美丽谁在先,谁在后,如果是,那么,你只直接执行“视觉表现元素不应带有信息量”这个结论就行了。 这样看来,从设计的目标中还能产生出更多的类似“视觉表现元素不应”结论。我还没想到,想到再说吧。网页防止另存为,屏蔽右键,防止复制代码,防止被人frame等网页代码2010-07-21 08:03:59 来源:源码之家 站长整理 1. oncontextmenu=window.event.returnvalue=false 将彻底屏蔽鼠标右键no 可用于Table2. 取消选取、防止复制3. onpaste=return false 不准粘贴4. oncopy=return false; oncut=return false; 防止复制5. IE地址栏前换成自己的图标6. 可以在收藏夹中显示出你的图标7. 关闭输入法8. 永远都会带着框架9. 防止被人frame10. 网页将不能被另存为11. 12.删除时确认删除13. 取得控件的绝对位置/java scriptfunction getIE(E)var t=e.offsetTop;var l=e.offsetLeft;while(e=e.offsetParent)t+=e.offsetTop;l+=e.offsetLeft;教你六招提高网页加载速度2010-06-24 09:05:33 来源:源码之家 站长整理 我们知道用户都喜欢浏览速度快的网站,不喜欢花费太多的时间等待网页的打开,等待的时间过长,会让用户失去耐心,甚至烦躁时会直接关闭网页,这样就会失去一些潜在的客户了。其次,关键字的排名与网页的打开速度也有关系,谷歌Google的Web搜索团队在官方博客上宣布,将把网站的速度作为 PR(PageRank)算法的一个因子,在所有因素都相等的情况下,速度快的网站将排在速度慢的网站前面。 因此我觉得我们有必要去提高网页的打开速度,下面我来教大家一些小技巧提高网页的打开速度。 1.优化css。我们知道css的出现,使内容和元素的表现方法分离,用户打开用css设计的网页,css一般被下载用户本地计算机,不像html元素表现标签,每次网站的网页都要调用一次,使用css,只需要一次就好了!另外,css在某些地方可以替代图片,这就是为什么现在提倡div+css的原因!不过,使用dw写css,也会有些多余的css代码。Css太臃肿的话,也会影响网页的速度,这里介绍一款工具cleancss给大家试试,它是一款在线工具。另外就是手工精简代码,这个确实有这个对于新手确实有难度,不过,多看一些精简css技巧的文章会对你有帮助的,看得多了,也就知道那些代码可以精简了。 2.优化图片。这个没有什么技巧,通过软件就搞定了。我喜欢用ps,在ps中选择存储web所用格式,然后选择图片的质量等选项,图片看起来很清楚,大小又合适保存就可以了。 3.图片格式问题。选择正确的图片格式是非常重要的。Jpg一般用于照片或真彩色图片,gif运用平面色彩的图片,一般用于按钮或logo图片,png和gif非常相似,不过就是多支持一些色彩! 4.图片长宽的标记问题。这个问题一般在html中可以看到,一些人经常忘记写图片的长和宽了。这些标记是告诉浏览器打开图片之前的尺寸,浏览器加载网页时就会保留一块区域,加快整个网页显示速度。 5.在url中要学会用”/”。当一个用户打开类似一个url后面没有”/”,服务器就要确定什么类型的文件或是网页,这时你在网址后面加一个”/”,这时服务器就知道是一个目录的页面,减少载入时间。 6.减少网页的响应次数。对于网页的打开,其实是很复杂的过程。从网页的申请打开,到web服务器的响应,编译等动作,然后发回给浏览器,才显示我们面前的文字和图片,多媒体文件等。所以我要尽量减少响应次数,现在ajax在这方面就运用的不错。当然,一个静态页面就例外了,静态页面多注意图片大小和网页设计上就行了。对网站速度优化的10个简单步骤2010-07-05 08:11:52 来源:源码之家 站长整理 今天给大家说说10个非常简单的优化步聚,就是对你的网站速度的优化,目前GOOGLE都已经将网页打开速度列为搜索排名算法之一了,而网站速度除了服务器空间和带宽,还有网页本身的优化。 1、尽量使网页符合W3C标准 网页代*尽量要写标准规范,尽量采用DIV+CSS架构,因为table的代*实在要多出很多。 2、精简你的CSS代* 将网页的CSS代*放置到一个外部文件中,在head区用调用,同时将CSS代*精简,比如一段CSS如下: .mainwidth:960px;margin-left:10px;margin-right:10px;margin-top:5px;margin-bottom:5px;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;border-left:1px #ccc solid;border-right:1px #ccc solid;border-top:1px #ccc solid;border-bottom:1px #ccc solid; 这段代*感觉太多了吧,我们完全可以改成下面的: .mainwidth:960px;margin:5px 10px;padding:0;border:1px #ccc solid; 这样就精简很多了。 3、给你的图片减肥 图片可以说是影响网页加载速度最大的因素,在保证图片质量的前提下,尽量将图片的尺寸降低,最好使用GIF或JPG格式的图片。 4、尽量使用背景图片,而不是直接加载 图片可以让网站增添不少活力,但同样却是影响网页加载速度的最大罪魁祸首,很多需要使用图片的地方,我们可以采用背景的形式来展示,尽量使用很少的背景图,比如,将所要用到的图片全部放在一张,利用CSS控制,这样将HTTP请求减少到最低。 5、将JS代码放置外部文件中,通过调用 JS代码我们知道搜索引擎是不能读取的,放一堆在页面中太占地方了,我们同样跟CSS一样放置到外部文件中,通过 这种形式来调用。6、将所有标记的代码放到页面底部 当你的网页调用了JS文件来实现某些特效,那通常是在HEAD区域使用标记,其实我们可以放到底部来。对于访客来说,网站打开至加载到底部的代码时间很短,有时可以忽略不记,所以不会影响什么。而对于搜索引擎来说它不认识的代码越少当然越好了。 7、将网页生成静态的 动态页面,是需要服务器端通过客户端的请求再临时生成的,虽然现在的带宽足以让之间的差别变得很小,但还是可能有部分访客自家的网速很慢,这样动态页面跟生成的纯静态页面的打开速度就相差很明显了。 本文只是SEO中的一些表面东西,这里只是希望能带动大家的思维,还是希望能有点帮助。弹出窗口与切换页面的对比总结2010-08-11 09:34:18 来源:源码之家 站长整理 分享较早前的一个小总结,关于在选择弹出窗口还是选择切换页面来承载信息时,可用用来判断的几个角度,合适初学者来读。 1.弹出窗口与切换页面的区别 1) 操作的连贯性 弹出窗口的速度会比打开一个页面的速度要快,响应更及时一些,点击后可以比较快的得到操作的反馈,而切换页面则经常会让用户等待一段时间。 实例一:个人中心中,查看好友照片的操作: 之前查看照片的操作页面会跳转到该好友的空间“相册”页面,而现在则更改进为弹出窗口,能够很快看到照片的放大图,关掉窗口后,又可以继续浏览其他好友的信息了。 2)操作的延续性 弹出窗口可以保留原页面上的内容,不至于页面被刷新掉;切换页面很有可能刷新,在以下两种情况下是尤其要避免的:用户在原界面上有输入的内容,用户需要根据原有界面的内容,来选择或判断新界面的内容。在这两种情况下最好首选弹出窗口。 实例一:Qzone写日志中插入图片: 用户在写日志的时候插入一张照片,如果这时候插入照片的界面是切换一个页面,用户可能就会担心之前的输入是否还在,而弹出窗口则可以在保留原页面已编辑的文字,在此之上出现一个小型的界面,显示可以插入的照片。 实例二,秀世界中我的储物箱,用户需要看到房间中的效果,来决定从“我的储物箱”中选择哪个物品放入房间里,用弹出窗口可以比较方便的解决这个问题: 实例三:一个相反的例子,欢乐卡片的应用,制从“我的首页”页面当中,制作卡片的时候需要哪些卡面是在“卡片全攻略”页面来说明的,因此用户在制作卡片的 时候需要不断切换到“卡片全攻略”页面来查看需要合成的卡片,因此,在这样的情形下,采用弹出窗口的形式来表现卡片合成向导应该更合适一些。- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 相关 文章
装配图网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文