爱问共享资料网页设计教程,网页设计入门文档免费下载，数万用户每天上传大量最新资料，数量累计超一个亿 ，John制作网页简明教程2009917《》2目录一认识网页3什么是网页3主页制作的基本条件4二制作主页前的准备41主页题材42规划框架43资料收集5三如何选择网页制作工具6四如何把握网页布局81页面尺寸82整体造型83页头94文本95页脚96图片97多媒体9五网站设计26条原则9六规划站点14七在Dreamweaver设置站点15一申请免费空间15二设置站点15八制作模板20九在Dreamweaver套用模板和修改模板35《wwwbian-mincom》3一认识网页什么是网页你现在所看到的就是网页啦...
John制作网页简明教程2009917《》2目录一认识网页3什么是网页3主页制作的基本条件4二制作主页前的准备41主页题材42规划框架43资料收集5三如何选择网页制作工具6四如何把握网页布局81页面尺寸82整体造型83页头94文本95页脚96图片97多媒体9五网站设计26条原则9六规划站点14七在Dreamweaver设置站点15一申请免费空间15二设置站点15八制作模板20九在Dreamweaver套用模板和修改模板35《wwwbian-mincom》3一认识网页什么是网页你现在所看到的就是网页啦可是您知道为什么网页可以在Internet上传播为什么可以被您的电脑认识吗还是让我们来好好来认识网页网页的学名称作HTML文件是一种可以在www网上传输并被浏览器认识和翻译成页面显示出来的文件WWW是WorldWideWeb的缩写HTML的意思则是HypertextMarkupLanguage中文翻译为超文本标记语言超文本就是指页面内可以包含图片链接甚至音乐程序等非文字的元素网页就是由HTML语言编写出来的看到这您也许会想我最怕编程了别急其实HTML语言只是一种排版语言语法就类似于这样页高8宽512处插入高1宽1的图片A如果您是使用WPS或则Word的高手那么恭喜您网页制作的学习您已经走了一半路了HTML全称HyperTextMarkupLanguage正式名称是超文本标记语言HTML语言发展很快已历经HTML10HTML20和HTML30HTML40多个版本现在HTML50正在测试同时DHTML动态VHTML虚拟SHTML等也飞速发展起来我们现在一般只要掌握HTML40就可以了html利用标记tag用来描述网页的字体大小颜色及页面布局的语言使用任何的文本编辑器都可以对它进行编辑与VBC等编程语言有着本质上的区别举一个简单的例子HTML原代码bwwwjzxuecomb从不懂上网到网络高手在浏览器的显示效果wwwjzxuecom从不懂上网到网络高手其中bb就是两个HTML标记它以起始标记b及结束标记b标记文字wwwjzxuecom令它显示成粗体也有懒虫像我一样－觉得一下要记住HTML那么多枯燥的标记实在太麻烦了那么有一个偷懒的办法找一个所见即所得的网页制作工具即使一点HTML语言都不会也可以制作出出色的网页嘘别声张后面我会为大家介绍这类工具的说到底我还是推荐您稍微了解一些HTML的语法这样您可以更精确的控制页面的排版可以实现更多的功能当大家称赞羡慕您的主页的时候您就会觉得很值得哦《wwwbian-mincom》4主页制作的基本条件在WWW上不论你是资产上亿的大公司还是捉襟见肘的穷学生只要你建立了自己的主页你们的地位就是平等的实际上许多个人管理的站点比商业站点更加受欢迎一切都在于你的内容和创意那么制作主页需要什么条件呢主页制作的基本条件有硬件一台电脑64MB以上内存当然越大越好啦可以拨号上网如果你有条件的话建议配置扫描仪这将大大方便图像和文字的输入软件HTML编辑软件常用的有FrontpageHotdog等本文重点介绍Dreamweaver图像处理软件常用的有PhotoshopflashFireworks等文件上传软件常用的有CuteftpWSftp等如果你已经万事具备了我们继续下一步制作主页前的准备二制作主页前的准备1主页题材下面我们开始着手策划制作主页首先面临的问题便是我要制作什么内容选择什么样的主页题材网络上的主页题材千奇百怪琳琅满目只要你想的到就可以把它制作出来以下列出一些常见的题材是否对你有点启发给您的建议1一般来说个人主页的选材要小而精如果你想制作一个包罗万象的站点把所有您认为精彩的东西都放在上面那么往往会事与愿违的给人的感觉是没有主题没有特色样样有却样样都很肤浅因为您不可能有那么多的精力去维护它注意网页的最大特点就是更新快目前最受欢迎的个人主页都是天天更新甚至几小时更新一次2题材最好是你自己擅长或者喜爱的内容比如您对诗歌感兴趣可以放置自己的诗词对足球感兴趣可以报道最新的球场战况等等这样在制作时才不会觉得无聊或者力不从心3不要太滥或者目标太高太滥是指到处可见人人都有的题材目标太高是指在这一题材上已经有非常优秀知名度很高的站点你要超过它是很困难的OK如果你已经有一个绝妙的主意了那我们就开始下一步规划框架2规划框架选定了一个好的题材是不是可以立刻动手制作了不经验告诉我们您必须规划框架这是很重要的一步每个网站都是一项庞大的工程好比造高楼没有设计图纸规划好结构盲目的建造《wwwbian-mincom》5结果往往是倒塌也好比写文章构思好提纲才不至于逻辑混乱虎头蛇尾全面仔细规划架构好自己网站不要急于求成规划一个网站可以用树状结构先把每个页面的内容大纲列出来尤其当你要制作一个很大的网站有很多页面的时候特别需要把这个架构规划好也要考虑到以后可能的扩充性免得做好以后又要一改再改整个网站的架构十分累人也十分费钱大纲列出来后你还必须考虑每个页面之间的链接关系是星形树形或是网形链接这也是判别一个网站优劣的重要标志链接混乱层次不清的站点会造成浏览困难影响内容的发挥为了提高浏览效率方便资料的寻找本站的框架基本采用蒲公英式即所有的主要链接都在首页上每个主链接再分别展开主链接之间相互链接框架定下来了然后开始一步一步有条理有次序地做来就胸有成竹得多也为你的主页将来发展打下良好的基础下一步你可以动手制作具体内容了我将告诉你一些收集资料的窍门3资料收集题材选定框架选定接下来就开始往主页里面填内容我们称作资料收集就个人主页而言很少有人有能力完全靠自己来创作所有的内容一些高手能够提供自己编的软件文章或者音乐是我非常佩服的大部分人的方法是从报纸杂志光盘等媒体中把相关的资料收集整理
再加上一定的编辑后就可以了另外一个好的方法是从网络上收集您只要到雅虎搜狐等搜索引擎上查找相应的关键字就可以找到一大堆的资料如果您是英语高手您可以到国外站点上把最新的信息资料翻译成中文提供给大家这叫洋为中用网络上的资料呈爆炸性的增长只要注意收集某一非常细小的题材随时供大家方便的查找您的主页就已经有做不完的活了但是有一点必须注意在Copy或引用他人的资料文章时请您尊重知识版权有特别声明禁止复制的请不要盗为己用允许复制的也应该在引用时注明作者出处一般来说个人主页是非商业站点只要你发封Email给作者都会征得同意的还有就是收集的资料必须合法按照我国《计算机信息网络国际联网安全保护管理办法》的规定任何单位和个人不得利用国际联网制作复制查阅和传播下列信息一煽动抗拒破坏宪法和法律行政法规实施的二煽动颠覆国家政权推翻社会主义制度的三煽动分裂国家破坏国家统一的四煽动民族仇恨民族歧视破坏民族团结的五捏造或者歪曲事实散布谣言扰乱社会秩序的六宣扬封建迷信淫秽色情赌博暴力凶杀恐怖教唆犯罪的七公然侮辱他人或者捏造事实诽谤他人的八损害国家机关信誉的九其他违反宪法和法律行政法规的到这里我们已经完成了制作主页的准备工作了《》6三如何选择网页制作工具工欲善其事必先利其器制作网页第一件事就是选定一种网页制作软件从原理上来讲虽然直接用记事也能写出网页但是对网页制作必须具有一定的html基础非初学者能及且效率也很低用WORD也能做出网页但有许多效果做不出来且垃圾代码太多也是不可取的我认为比较合适的网页制作软件首推Dreamweaver它简单易学功能强大用它做出的网页垃圾代码也比较少另外它还可以在我们用所见即所得的环境制作网页的同时可以在代检视窗中看到对应的HTML代码这对我们学习HTML有很大好处虽然用Dreamweaver即使我们一点不懂HTML也能做出漂亮的网页但HTML毕竟是制作网页的基础我们要想把网页做活了必须要知其然还要知其所以然最终我们还是要熟练掌握HTML才行当然Frontpage也不错但比起Dreamweaver来还是要稍逊一筹●DreamWeaver自制动态HTML动画的网页DreamWeaver是一个很酷的网页设计软件它包括可视化编辑HTML代码编辑的软件包并支持ActiveXJavaScriptJavaFlashShockWave等特性而且它还能通过拖拽从头到尾制作动态的HTML动画支持动态HTMLDynamicHTML的设计使得页面没有plug－in也能够在Netscape和IE40浏览器中正确地显示页面的动画同时它还提供了自动更新页面信息的功能DreamWeaver还采用了RoundtripHTML技术这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换HTML句法及结构不变这样专业设计者可以在不改变原有编辑习惯的同时充分享受到可视化编辑带来的益处DreamWeaver最具挑战性和生命力的是它的开放式设计这项设计使任何人都可以轻易扩展它的功能下载Dreamweaver注下载点不提供安装序列号的请复制WPD800-53931-95632-35191●MicrosoftFrontPage98制作功能强大的网页如果你曾对Word很熟悉那么相信你用FrontPage98进行网页设计一定会非常顺手使用Frontpage98制作网页你能真正体会到功能强大简单易用的含义页面制作由Frontpage98中的Editor完成其工作窗口由3个标签页组成分别是所见即所得的编辑页HTML代码编辑页预览页Frontpage98带有图形和GIF动画编辑器支持CGI和CSS向导和模板都能使初学者在编辑网页时感到更加方便FrontPage98最强大之处是其站点管理功能在更新服务器上的站点时不需要创建更改文件的目录FrontPage98会为你跟踪文件并拷贝那些新版本文件FrontPage98是现有网页制作软件中唯一既能在本地计算机上工作又能通过Internet直接对远程服务器上的文件进行工作的软件下载网址http∥wwwmicrosoftcomfrontpage●Netscape编辑器制作简单的网页NetscapeCommunicator和NetscapeNavigatorGold30版本都带有网页编辑器如果你喜欢用Netscape浏览器上网那么使用Netscape编辑器真是简单方便当你用Netscape浏览器显示网页时单击编辑按钮Netscape就会把网页存储在硬盘中然后就可以开始编辑了你也可以像使用Word那样编辑文字字体颜色改变主页作者标题背景颜色或图像定义描点插入链接定义文档编码插入图像创建表格等是不是与Frontpage98还有些像但是Netscape编辑器对复杂的网页设计就显得功能有《wwwbian-mincom》7限了它连表单创建多框架创建都不支持Netscape编辑器是网页制作初学者很好的入门工具如果你的网页主要是由文本和图片组成的Netscape编辑器将是一个轻松的选择如果你对HTML语言有所了解的话能够使用Notepad或UltraEdit等文本编辑器来编写少量的HTML语句那么也可以弥补Netscape编辑器的一些不足●AdobePagemill30制作多框架表单和ImageMap图像的网页Pagemill功能不算强大但使用起来很方便适合初学者制作较为美观而不是非常复杂的主页如果你的主页需要很多框架表单和ImageMap图像那么AdobePagemill30的确是你的首选Pagemill创建多框架页十分方便你可以同时编辑各个框架中的内容Pagemill在服务器端或客户端都可创建与处理ImageMap图像它也支持表单创建Pagemill允许在
HTML代码上编写和修改支持大部分常见的HTML扩展还提供拼写检错搜索替换等文档处理工具在Pagemill30中还增加了站点管理能力但仍不支持CSSTrueDoc和动态HTML等高级特性Pagemill另一大特色是有一个剪贴板可以将任意多的文本图形表格拖放到里面需要时再打开很方便下载网址http∥●ClarisHomePage30快速创建动态的网页如果使用ClarisHomePage软件你可以在几分钟之内创建一个动态网页这是因为它有一个很好的创建和编辑Frame框架的工具你不必花费太多的力气就可以增加新的Frame框架而且ClarisHomePage30集成了FileMaker数据库增强的站点管理特性还允许你检测页面的合法连接不过界面设计过于粗糙对ImageMap图像的处理也不完全下载网址http∥wwwclariscomsoftwarehighlightsclarispagetrialhtml提高级软件如果你对网页设计已经有了一定的基础对HTML语言又有一定的了解那么你可以选择下面的几种软件来设计你的网页他们一定会为你的网页添色不少●HotDogProfessional5制作要加入多种复杂技术的网页HotDog是较早基于代码的网页设计工具其最具特色的是提供了许多向导工具能帮助设计者制作页面中的复杂部分HotDog的高级HTML支持插入marquee并能在预览模式中以正常速度观看这点非常难得因为即使首创这种标签的Microsoft在FrontPage98中也未提供这样的功能HotDog对plug－in的支持也远远超过其他产品它提供的对话框允许你以手动方式为不同格式的文件选择不同的选项但对中文的处理不很方便HotDog是个功能强大的软件对于那些希望在网页中加入CSSJavaRealVideo等复杂技术的高级设计者是个很好的选择下载网址http∥wwwsausagecom●HomeSite30制作可完全控制页面进程的网页Allaire的HomeSite30是一个小巧而全能的HTML代码编辑器有丰富的帮助功能支持CGI和CSS等等并且可以直接编辑perl程序HomeSite工作界面繁简由人根据习惯可以将其设置成像Notepad那样简单的编辑窗口也可以在复杂的界面下工作HomeSite具有良好的站点管理功能链接确认向导可以检查一个或多个文档的链接状况HomeSite更适合那些比较复杂和精彩页面的设计如果你希望能完全控制你制作的页面的进程HomeSite30是你最佳选择不过对于生手过于复杂下载网址http∥wwwallairecom或者http∥wwwhomesite－nowcom●HotMetalPro40制作具有强大数据嵌入能力的网页HotMetal既提供所见即所得图形制作方式又提供代码编辑方式是个令各层次设计《wwwbian-mincom》8者都不至于失望的软件但是初学者需要熟知HTML才能得心应手地使用这个软件HotMetal具有强大的数据嵌入能力利用它的数据插入向导可以把外部的AccessWordExcel以及其它ODBC数据提出来放入页面中而且HotMetal能够把它们自动转换为HTML格式是不是很棒此外它还能转换很多老格式的文档如WordStar等并能在转换过程中把这些文档里的图片自动转换为GIF格式HotMetal为用户提供了太多的工具而且它还可以用网状图或树状图表现整个站点文档的链接状况下载网址http∥wwwsoftquadcom以上工具各有千秋但对于WEB新手来说所见即所得无疑是最方便的所以我建议你选择DreamWeaver在网上人们习惯叫它为DW下面我将在DreamWeaver里做实例希望对你有所帮助四如何把握网页布局最开始网页呈现在你面前的时侯它就好像一张白纸它需要你任意挥洒你的设计才思在开始的时侯你需要明白虽然你能控制一切你所能控制的东西但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯那么你可以在此基础上加上自己的东西你当然也可以创造出自己的设计方案但如果你是初学者那么最好明白网页布局的基本概念1页面尺寸由于页面尺寸和显示器大小及分辨率有关系网页的局限性就在于你无法突破显示器的范围而且因为浏览器也将占去不少空间留下给你的页面范围变得越来越小一般分辨率在800x600的情况下页面的显示尺寸为780x428个象素分辨率在640x480的情况下页面的显示尺寸为620X311个象素分辨率在1024X768的情况下页面的显示尺寸为1007x600从以上数据可以看出分辨率越高页面尺寸越大浏览器的工具栏也是影响页面尺寸的原因一般目前的浏览器的工具栏都可以取消或者增加那么当你显示全部的工具栏时和关闭全部工具栏时页面的尺寸是不一样的在网页设计过程中向下拖动页面是惟一给网页增加更多内容尺寸的方法但我想提醒大家除非你能肯定站点的内容能吸引大家拖动否则不要让访问者拖动页面超过三屏如果需要在同一页面显示超过三屏的内容那么你最好能在上面做上页面内部连接方便访问者浏览2整体造型什么是造型造型就是创造出来的物体形象这里是指页面的整体形象这种形象应该是一个整体图形与文本的接合应该是层叠有序虽然显示器和浏览器都是矩形但对于页面的造型你可以充分运用自然界中的其它形状以及它们的组合矩形圆形三角形菱形等对于不同的形状它们所代表的意义是不同的比如矩形代表着正式规则你注意到很多《wwwbian-mincom》9ICP和政府网页都是以矩形为整体造型圆形带表着柔和团结温暖安全等许多时尚站点喜欢以圆形为页面整体造型三角形代表着力量权威牢固侵略等许多大型的商业站点为显示它的权威性常以三角形为页面整体造型菱形代表着平衡协调公平一些交友站点常运用菱形作为页面整体造型
虽然不同形状带表着不同意义但目前的网页制作多数是接合多个图形加以设计在这其中某种图形的构图比例可能占的多一些3页头页头又可称之为页眉页眉的作用是定义页面的主题比如一个站点的名字多数都显示在页眉里这样访问者能很快知道这个站点是什么内容页头是整个页面设计的关键它将牵涉到下面的更多设计和整个页面的协调性页头常放置站点名字的图片和公司标志以及旗帜广告4文本文本在页面中出现都数以行或者块段落出现它们的摆放位置决定者整个页面布局的可视性在过去因为页面制作技术的局限文本放置的位置的灵活性非常小而随着DHTML的兴起文本已经可以按照自己的要求放置到页面的任何位置5页脚页脚和页头相呼应页头是放置站点主题的地方而页脚是放置制作者或者公司信息的地方你能看到许多制作信息都是放置在页脚的6图片图片和文本是网页的两大构成元素却一不可如何处理好图片和文本的位置成了整个页面布局的关键而你的布局思维也将体现在这里7多媒体除了文本和图片还有声音动画视频等等其它媒体虽然它们不是经常能被利用到但随着动态网页的兴起它们在网页布局上也将变得更重要五网站设计26条原则网站中有哪些关键技巧有哪些陷阱在这里告诉你使网站赋予情趣的诀窍应该避免做什么应使用什么工具软件以及他们喜爱和厌恶的网站《》1001明确内容如果你想成为一个网站设计者并正想建一个网站的话首先应该考虑网站的内容包括网站功能和你的用户需要什么你的整个设计都应该围绕这些方面来进行02抓住用户如果用户不能够迅速地进入你的网站或操作不便捷网站设计就是失败的不要让用户失望而转向你的对手的网站03优化内容内容是核心大约在两年以前企业网站就像一本广告册子更槽糕的是网站使用了大量的图片似乎要几个世纪才能下载完Chanels网站wwwchannelscouk在设计的某些方面是成功的但是内容太贪乏并且要花很长时间才能找到所要的东西因此不能算是一个成功的网站04快速下载没有什么比要花很长时间下载页面更槽糕的了作为一条经验一个标准的网页应不大于60K通过56K调制解调器加载花30秒的时间有的设计者说网页加载应在15秒内05网站升级时刻注意网站的运行状况性能很好的主机随着访问人数的增加可能会运行缓慢但是如果你不想失去访问者的话一定要仔细计划好你的升级计划06坚持基本原则即使你不懂HTML语言你只需购买一个有版权的所见即所得的网页设计工具如AdobePageMill或MicrosoftFrontPageExpress就可以创建一个看起来很合理的网站但是在设计时这些软件包虽然不需要HTML却使网站速度下降为了成功地设计网站你必须理解HTML是如何工作的大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案用Notepad制作网页《wwwbian-mincom》1107学习HTML用HTML设计网站可以控制设计的整个过程但是如果你仅仅是网站设计的新手你应该寻找一个允许修改HTML的软件包HomeSite4是一个很好的Web设计工具在设计过程中HomeSite4能帮助你学习HTML它还允许你切换到所见即所得的模式以便你在把网站发送到Web之前预览你的网站08用笔画一个网站的框架圣人云笔比剑更强大在用计算机之前用笔画一个网站的框架显示出所有网页的相互关系计划好你的用户如何以最少的时间浏览你的网站09在计算机上永远也找不到好的方案专家忠告10网站地图许多设计者把他们的网站地图放在网站上这种做法却是弊大于利绝大部分的访问者上网是寻找一些特别的信息他们对于你的网站是如何工作的并没有兴趣如果你觉得你的网站需要地图那很可能是需要改进你的导航和工具条11睁大你的眼睛留意所有的事情对最不相关的东西的观察可以得到最好的灵感观察一个站点的结构和设计理解站点结构的关键元素确保你的设计是围绕站点浏览进行的专家忠告12点击规则听说过3次点击规则吗对于小型网站在你的主页上没有任何一条信息需要点击次数超过3次的对于大型网站使用导航和工具条来改善操作13特殊字体的应用虽然你可以在你的HTML中使用特殊的字体但是你不可能预测你的访问者在他们的计算机上将看到什么在你的计算机里看起来相当好的页面在另一个不同的平台上看起来可能非常糟糕一些网站设计员喜欢使用来定义特性这虽然允许你使用特殊的字体但是仍需要一些变通的方法以免你所选择的字体在访问者的计算机上不能显示级联风格表CSS有助于解决这些问题但是只有最新版的浏览器才支持CSS《wwwbian-mincom》1214使用切合实际的简便的命名规则专家忠告15检查错别字好的拼写是人们一生中重要的技能但是遗憾的是许多设计者都缺少这种技能确保你拼写正确并且格外注意平常容易误写的错别字16避免长文本页面在一个站点上有许多只有文本的页面是令人乏味的且也浪费Web的潜力如果你有大量的基于文本的文档应当以AdobeAcrobat格式的文件形式来放置以便你的访问者能离线不要使用卷滚条人们厌恶在网上使用卷滚条Trouble网站wwwTroublecouk是一个典型的设计很差的网站它基于一个浮动的架构为了阅读所有的文本浏览者不得不使用卷滚条18专家最喜爱的Web设计工具1AdobePhotoshop2MacromediaFlash3AdobeIllustrator4AdobeImageRead5Dreamweaver6MacromediaFireworks7AllaireHomesites8MicrosoftNotepad9MacromediaDirector10Lightwave11MacromediaFreehand12．其它AdobeAcrobatExchangeAllaireColdFusionBBEditHTMLValidator等《wwwbian
-mincom》1319网站介绍你应当有一个很清晰的网站介绍告诉访问者你的网站能够提供些什么以便访问者能找到想要的东西但是许多设计者都没有这样做有效的导航条和搜索工具使人们很容易找到有用的信息这对访问者很重要告诉访问者你所提供的正是他们想要的信息20网站一旦发布网站设计的优点和缺陷全都公布于世没有什么方法使你能够比从自己的错误倾听其他人的建议和用户反馈意见中学到更多的东西专家忠告21闪烁让人头痛通过使用标识可以吸引访问者对你的主页特殊部分的注意但这也让你的访问者头痛如果你想使访问者再次光顾你的网站就少用此方法22背景颜色背景颜色也会产生一些问题可能会使网页难于阅读你应当坚持使用白色的背景和黑色的文本另外还应当坚持使用通用字体23向前和向后按钮应当避免强迫用户使用向前和向后按钮你的设计应当使用户能够很快地找到他们所要的东西绝大多数好的站点在每一页同样的位置上都有相同的导航条使浏览者能够从每一页问网站的任何部分24坚持你的信念严格遵守各种规则避免想当然绝不停止学习专家忠告25点击记数器不要轻易考虑在你的网站上放置一个醒目的点击记数器你设计网站是为了给访问者提供服务而不是推销你自己认为重要的东西大多数浏览者认为计数器毫无意义它们很容易被做假浏览者也不想看广告如果你显示你的网站是多么受欢迎你最好提供一个链接显示访问日志《》1426不要用框架与记数器一样框架在网页上越来越流行在大多数网站上在屏幕的左边有一个框架但是设计者立刻就发现在使用框架时产生了许多的问题使用框架时如果没有17英寸的显示屏几乎不可能显示整个网站框架也使得网站内个人主页不能够成为书签也许更重要的是搜索引擎常常被框架混淆从而不能列出你的网站六规划站点规划站点不像直接设计编写那么简单事先需要做许多准备工作不仅要准备建设站点需要的素材文字资料图像以及媒体文件还要设计好资料整合的方式并根据资料确定站点的风格特点同时在内部还要整齐有序地排列归类站点中的文件否则杂而乱的资料堆积到一起不仅不利于将来的维护和包括站点的管理同时还会因为页面间极为混乱的关系而导致站点容易出现错误1确定站点风格访问互联网时可以看到形形的站点每一个站点都有自己的特色不同类型的站点风格特色更不相同站点的风格是整个网站的灵魂没有风格就不具有自己的特色更谈不上吸引用户访问站点因此站点设计者通常在设计之前都要规划好站点的风格一个站点究竟使用什么样的主题要根据建站的性质来确定公司站点主要是向外界展示公司的形象介绍公司情况以及推销自己的产品政府站点侧重网上办公将办公的材料放置到网上供人查阅个人站点则希望将个人的兴趣爱好展示出来让别人通过自己的站点了解自己因此个性化更强一些2规划站点结构一般来说一个站点包含的文件很多大型站点更是如此如果将所有的文件混杂在一起则整个站点显得杂乱无章自己看起来也很不舒服且不易管理因此需要对站点的内部结构进行规划应该将各个文件分门别类地放到不同的文件夹下这样可以使整个站点结构看起来条理清晰井然有序使人们通过浏览站点的结构就可知道该站点大概内容这样做主要是为网页设计人员在修改管理页面文件时提供方便在你电脑里除C盘外要新建一个站点的文件夹命名如Myweb也可以叫我的站点然后在站点文件夹里再新建几个文件夹如下图图13站点文件夹《wwwbian-mincom》15※adm放置后台管理程序对于动态网站是少不了的一个文件夹※audio放置音频文件※backup放置备份文件※doc放置Word文档※img放置站点用到的图片※source放置开发过程中编写的源文件如FLASHphotoshop等编辑末合并图层之前的图片保留源文件的目的是方便将来修改编辑※video放置视频文件※zip提供给客户下载的压缩文件※indexfiles网站首页中的各种文件首页使用率最高为它单独建一个文件夹很有必要※webweb2放置WEB文件夹这是文件夹通常命名情况如果你记不住它也可以自己重新命名但不要用中文七在Dreamweaver设置站点一申请免费空间网站做好后放在哪里呢这就要有一个空间网上提供免费的空间很多有的服务质量还是可以的但也有服务质量差的我第一个申请的免费空间在httpwy8net到现在还在用只不过速度稍慢一点我第二个申请的免费空间是在中httpfreeicpcncom打开速度快服务质量还是可以的但申请手续有点烦在申请中如果有一个地方他们认为是不真实的可能就不会批申请可能在一到三天提供免费空间的网站很多最近可用的一批免费空间你可以点这里查找如果你的申请批下来了会用电子邮件发送到你的邮箱主要内容是域名空间大小注册名FTP密码如果你不想用免费的空间也可以用收费的空间收费的空间申请很容易只要你的钱汇到了马上就可以开通你的网站在价格上也不等从几十元到几百元以上根据你申请的空间大小来决定的我们才学做网站如果图片不多FLASH放的少有100MB足够你用了真的不想用收费的空间又不想用免费的空间那么你就用自己的电脑做服务器吧详细内容请看本站初学园地二设置站点有了空间后我们就可以在Dreamweaver8里做网页了也可以先做好再申请空间这个由你自己定我是先申请一个空间后才动手做网站的设置站点分为动态和静态二种动态网站的设置在初学园地里有介绍在这里我就不再重复了重点介静态站点的设置第一步打开Dreamweaver8在菜单栏单击站点指向新建站点《wwwbian-mincom》16图14新建站点第二步在弹出的对话框里给站点起一个名子并在下面打上网站域名然后点下一步如图15图15命名站点第三步在弹出的对话框里选择否我不想使用服务器技术然后点下一步如图16《wwwbian-mincom》17图16选择否我不想使用服务器技术第四步选择站点文件夹存放的位置如
图17《》18图17选择站点文件夹第五步按提示连接用FTP并打上由服务商给你的FTP地址用户名和密码并进行测试如图18《wwwbian-mincom》19图18填写FTP地址及用户名和密码第六步测试服务器提示成功如图19《wwwbian-mincom》20至此站点设置工作完成如果出现错误你要认真核对你的用户名密码和FTP地址八制作模板如果想让站点保持统一的风格或者站点中多个文档包含相同的内容----对其进行编辑未免过于麻烦中文版Dreamweaver8提供的模板功能可以很方便地帮助用户解决这些难题模板由两部分组成锁定区域和可编辑区域对于刚创建的模板所有的区域都是锁定的在定义模板时可以在模板文件中定义可编辑的区域套用该模板的页面只有可编辑区域是可以被改变的区域实践证明用模板对于网页制作者来说省了很多的麻烦也可以节约很多时间同时也能减少连接上的错误一新建模板在新建模板前我劝你还是要对你的网站要在纸上画一个草图再根据你的图纸来定你的模板我简单画了一个供参考样式是你自己设置的我在这里只是举个例子如图14《wwwbian-mincom》21图14网站草图打开Dreamweaver8后可以通过窗口下面的资源面板创建新的模板快捷键是F11如图15《wwwbian-mincom》22图15打开资源新建模板文档这时你双击才命名的muban文件便在DW里显示一个空白的文件当你新建一个模板文档时Dreamweaver8将会在你的站点根目录下自动生成一个Templates文件夹该文件夹专门用于放置模板文档如图16图16模板专用文件夹下一步就是在这个空白的文档中建模板了这个空白文档和你做网页一样的当然也可以用别的方法来创建模板如通过插入面板或者菜单选项可以完成模板文档的创建新建模板与创建模板略有不同创建模板的操作方法哪下1选择窗口面板插入菜单选项打开插入面板2在插入面板中选择模板对象向右点创建模板也可以在一般页面中象平时做网页一样把页面做好然后点左上文件另存为模板等在这里我就不一一说了你肯定能在实践中摸索出来的言规正传下面我们开始在刚才打开的muban文件中建模板啦第一步设置页面属性1选择菜单修改向下单击页面属性如图17在弹出的对话框里设置字体和边距Dreamweaver8默认设置网页都留有间隙不怎么好看所以要全部设置为0如图18再选择链接根据自己的喜好设置下划线《wwwbian-mincom》23图17打开页面属性图18设置字体和边距《wwwbian-mincom》24图19设置下划线选择菜单编辑向下单击首选参数如图20在弹出的对话框里将允许多个连续的空格打上钩否则你在Dreamweaver8按空格键它是不动的呵呵没有象在Word里那么顺手如图21图20选择首选参数图21在允许多个连续的空格前打上钩然后点确定第二步使用表格布局网页当然也可以用层表格是网页布局设计的常用工具它可以使插入页面中的图像和文本等对象被限定在某一固定位置相对于没有使用表格的页面使用表格的页面显得更加整齐有序1绘制表格将光标置于需要插入表格的位置然后选择菜单插入向下单击表格如图22在弹出的对话框里《wwwbian-mincom》25根据以上草图确定行和列的数字如图23图22选择表格图23设置表格行和列然后点确定在这里我们都设置为1注宽度通常设置在780以内这可以在800X6001024X768两种分辨率情况下使你的的网页不变样如果过大超过800那么使用800X600分辨率的电脑看你的网页就会出现下滑块2设置表格属性在对齐处选居中在填充间距边框处全部设置为0如图25《wwwbian-mincom》26图24设置表格属性3拷贝和粘贴单元格将鼠标左键对着单元格边框点一下然后再点右键选拷贝再将鼠标对着表格下面点右键选粘贴五次如图25《wwwbian-mincom》27图25拷贝和粘贴表格这样做的目的是为了打散表格能提高打开网页速度当然也可以用一个整体的表格4设置单元格属性表格第一行我们将用来放置FLASH动画或者图片尺寸在780X100宽度已定下来了现在确定它的高度将鼠标对着第一行点一下然后在下面表格属性里高打上100按一下回车要注意所有表格属性栏下面的标题前面有小钩要去掉如果不去掉你打出来的字特粗表格第二第三行是用来放置栏目的一般高度设置20方法同第一行表格第四行是主要编辑区我们暂时设置高为为200再提醒一句标题前面的小钩一定要去掉哟表格第五行是放页脚的一般高在60以内设置方法同上到此插入表格和设置表格属性完成了第三步制作页眉插入FLASH动画鼠标在第一行点一下然后选择菜单插入指向媒体向右单击FLASH在弹出的对话框里找到你制作的FLASH然后点确定《wwwbian-mincom》28图26插入FLASH图27在站点文件夹里找到FLASH然后点确定制作导航栏在第二行里可以用插入表格的方法根据你的栏目设置列数可以在属性里设置颜色也可以放置背景图片第三行同上第四行是主要编辑区我们暂时不动第四步制作页脚第五行是页脚页脚里主要内容是版权联系地址电话网站备案联系人网站统计等所有编辑完成后如图28图28完成页面编辑注栏目我在这里没有列出但在做模板时要把所有栏目里的地址要做好链接第五步定义可编辑区和重复区定义重复区页眉和页脚我们在这里都定义为重复区《wwwbian-mincom》29将光标指向页眉目然后选择菜单插入模板对象重复区域单击鼠标左键这时会弹出新建重复区域RepeatRegion1对线新建重复区域对话框用同样方法在页脚处设置重复区域2导航栏也定义为重复区域34定义可编辑区域我们是主要编辑区在第三用同样方法把它设置为可
本文档为【网页设计教程,网页设计入门】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑， 图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。
[版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件，Bsport体育我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。