2022年网页设计与制作 2.pdf

《2022年网页设计与制作 2.pdf》由会员分享，可在线阅读，更多相关《2022年网页设计与制作 2.pdf（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作一、网站的设计与规划 一个网站的成功与否与建站前的网站规划有着极为重要的关系。在建立网站前应明确建设网站的目的，确定网站的功能，确定网站规模、投入费用，进行必要的市场分析等。只有详细的规划，才能避免在网站建设中出现的很多问题，使网站建设能顺利进行。网站规划是指在网站建设前对市场进行分析、确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。网站规划书出应该尽可能涵盖网站规划中的各个方面，网站规划书的写作要科学、认真、实事求是。网站规划包含的内容如下：（1）确定网站主题 网站主题

2、就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。你没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。（二）搜集材料 明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体

3、上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 9 页 -（三）规划网站 一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。如何规划网站的每一项具体内容，我们在下面会有详细介绍。（4）选择

4、合适的制作工具 尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver 和Frontpage 了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact 等；动画制作工具，如 Flash、Cool3d、Gif Animator等；还有网页特效工具，如有声有色等，网上有许多这方面的软件，你可以根据需要灵活运用。（五）制作网页 材料有了，工具也

5、选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。（六）上传测试网页制作完毕，最后要发布到Web 服务器上，才能够让全世界的朋友观看，现在上传的工具有很多，有些网页制作工具本身就带有FTP 功能，利用这些 FTP 工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览

6、器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友，让他们来浏览。名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 9 页 -（七）推广宣传 网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。（八）维护更新二、网页设计与制作的美学原则 一个网站的构建过程应该注重“形式美”、“技术美”和“和谐美”，而作为一个高质量的网站，其设计应该是美学与网络技术和实用功能的完美结合。网站的设计美学体现在很多方面，网站的版

7、面布局、浏览方式、互动性、图象、内容、色彩等方面，通过设计中单纯一致、平衡对称、多样统一和对比照应等原则，使网站具有较高的艺术性，具有形式美，能满足人们的审美要求。美是一种价值存在，审美价值是客观事物所具有的能满足人的审美需要的一种价值属性。任何审美活动都离不开感性形式，形式是指内容的外部表现方式、类型和结构，形式美是事物形式因素的自身结构所蕴含的审美价值。一个高质量的专题学习网站的构建应该是内容与形式的统一。（1）版面结构美 设计网站应首先考虑版面的整体布局，网站的主页整体版面布局结构在网站的设计过程中占据着关键的位置，起着主导的作用。网站的版面设计要根据这一原理合理地安排各种媒体信息的呈现

8、区域和各元素大小重要程度确定所占位置。网站中最重要的信息，应该安排在注目率最高的页面位置，一般来说网站的主题位于上中部，主体信息要放置于中上部到底部稍上的大部分区域，这是整个页面中最佳视域位置。此外还要注意页面的版面与内容的统一，就是在进行版面设计时，充分考虑页面编排符合专题的内容，能够体现内容的丰富含义，使版面和内容和谐一致。（2）视觉色彩美 设计美学的第一要素就是色彩的美。打开一个网站，给用户留下第一印象的既不是网站的丰富内容，也不是网站合理的版面布局，而是网站的色彩。页面的色彩搭配也是一种技巧，通常是选用一种主色调后，再调整其透明度和饱和度产生出新的相近色，这样整个页面看起来色彩统一又有

9、层次感。网站的边框背景图片采用主色调色彩，而主要内容的文字采用非彩色。非彩色的名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 9 页 -搭配是指黑色和白色这两种最基本最简单的搭配，白底黑字和黑底白字都非常清晰明了；此外，灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩进行过渡。（三）构建专题学习网站的技术美方便美；网站要尽可能占据小的系统内存容量，一定要改变认为网站越庞大越好的错误观念。容错美；从技术上讲，整个网站的程序代码编程要规范，这样有利于系统的维护；网站页面的显示时间要越短越好互动美；在网站的操作界面上要简洁美观，一目了然，要有含义明确的按钮和图标，要支持鼠标操

10、作，避免复杂的键盘操作。功能键要符合大众习惯，即便是计算机初学者也能很快熟练操作网站。（4）构建专题学习网站的和谐美主题布局和谐美色彩搭配和谐美内容编排和谐美三、网页的布局设计 网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功接合时，这种网页或者说站点才是受人喜欢的。取任何一面你都无法留住太过“挑剔”的访问者。（一）网页布局的基本概念页面尺寸：由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800600的情况下，页面的显示

11、尺寸为：780428个象素；分辨率在 640480的情况下，页面的显示尺寸为:620X311个象素；分辨率在 1024X768 的情况下，页面的显示尺寸为：1007600。从以上数据可以看出，分辨率越高页面尺寸越大。整体造型：造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。页头：页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。文本：文本在页

12、面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 9 页 -本放置的位置的灵活性非常小，而随着DHTML 的兴起，文本已经可以按照自己的要求放置到页面的任何位置。页脚：页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。图片：图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。多媒体：除了文本和图片，还有声音，动画，视频等等其它媒体。虽

13、然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。（二）网页布局方法网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。纸上布局法：许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。软件布局法：如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用 Photoshop可以方便的使

14、用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。（3）网页布局的技术层叠样式表的应用：目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。表格布局：表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS 更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。对于表格布局，你可以随便找一个站点的首页，然后保存为 HTML 文件，利用网页编辑工具打开它(要所见即所得的软件)，你会看到这个页面是如何利用表格的。框架布局四、网页

15、风格的设计与制作 风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 9 页 -荣誉等等诸多因素。（一）将你的标志 logo，尽可能的放在每个页面上最突出的位置。（二）突出你的标准色彩。（三）总结一句能反映贵站精髓的宣传标语！（四）相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！（五）制作技巧：1.色系：网页的底色、文字字型、图片

16、的色系、颜色等等。2.排版：表格、框架的应用、文字缩排、段落等等。3.窗口：窗口效果，例如：全屏幕窗口、特效窗口等。4.程序：网页互动程序，例如：ASP.PHP.XML.CGI等等。5.特效：让网页看起来生动活泼的各种应用，如：Flash.Javascript.Java applets.DHTML等等。6.架构：目录规划、层次浅显易懂、选单应用等等。7.内容：网站主题、整体实用性、文件关联性、内容切合度、是否有不必要的档案等等。8.走向：对于网站的未来规划、网站整体内容走向等。五、网页的图像的制作方法 图像是网页美丽的衣衫。图像可以装饰网页,可以表达大量的信息。直观形象、丰富多彩的图像可以将网

17、页点缀得令人流连忘返。浏览器支持的图像格式最常见的有三种:（一）GIF图像：GIF图像是网页中使用最多的一种.它的背景可以是透明的,这在网页设计中很有用.JPEG 图像：也是最常用的一种图像.优点之一是颜色丰富,GIF图像只有 256种颜色,而JPEG 图像有1670万种.优点之二是文件尺寸小,下载速度快.BMP 图像：BMP 就是位图,它的颜色丰富,可达224种(即真彩色),缺点是图像文件太大.不过可以用图形处理软件去压缩优化,所以有时候还要用到它.（2）图像基本操作：调整图片大小；设置超链接；设置边框；设置对齐方式；设置提示文字。制作方法：插入图像。插入图像的方法是,点击菜单 插入 图片

18、来自文件.在选择文件 对话框中选好文件后,确定.插入图像之前,一般应注意先画好表格,留给图像的单元格应稍小于图像的尺寸,这样才能定位准确.调整图片的大小鼠标拖动法如果插入的图片的大小不合适,你可以拖动它直到合适.这样改变的是图像的绝对尺寸,即改变了图片长和宽的像素值。比例缩放法设置图像比名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 9 页 -例缩放的好处是:对于不同分辨率,不同大小的浏览器窗口,同一个网页的观察效果是相同的.设置图像比例缩放的方法是:在表格的合适单元格内插入图片,在图片上单击右键,在弹出菜单上选择 图像属性,选取外观标签,在大小中选中指定大小 栏,设置宽度为10

19、0%或其它比例,设置高度为100%或其它比例.最后确定.设置图片超链接。图像和文字一样也可以链接到各种对象.方法是在图片上击右键,在弹出菜单上选择 图像属性,选择超链接,在对话框内的URL 工具栏找到链接对象,确定.设置图片的边框。直接插入图片是没有边框的.设置边框的方法是在图片上击右键,在弹出菜单上选择 图像属性 选择外观 边框粗细,当值1时,图片就有了边框.设置图片与文字的对齐方式。图片和文本位于同一个单元格时,就有个相对位置的问题.设置方法:在图片上击右键,在弹出菜单上选择 图像属性 外观 布局 对齐方式 选择一种方式 确定.设置图片提示文字。像上图一样,鼠标扫过时图片上出现提示文字,这

20、是不是很有趣呢 如果用图片做按钮,文字是不能太多的,有了文字提示,可以表达的信息量可就大多了.设置方法:在图片上击右键,在弹出菜单上选择 图像属性 外观 文本输入文本 确定.插 入 动 画六、网页动画的设计与制作方法动画之所以能“动”起来是由于多幅静态图案连续播放的结果，所以制作动画得首先制作出理想的静态图案，本文将以中文Windows95 附件中的画笔为例，让我们开始制作第一幅图像：进入画笔首先从菜单上选“图像”/“属性”进入属性对话框，确定画面尺寸80200点，单击工具框上的“A”选取适当前景色输入文字：网海轻舟，再选择适当的字号和字型使之充满整个幅面，配以适当的背景色，第一幅静态图案就制

21、作完成了，从菜单上选“文件”“另存为.”1.bmp，接下来制作第二幅，在原图的基础上擦除“网海轻舟”几个字，选好背景色，输入文字：“欢迎光临”，调整适当后另存为2.bmp，同样的手法制作 3.bmp内容为“欢迎你”，OK！静态图案设计完毕。现在我们要使上面制作的静态图像动起来，启动Gifcon 从菜单上选Animation Wizard(动画制作向导)首先是欢迎画面按 Next按钮，接下来的对话框有两个选项（Yes,for use with a Web page）和（No,for use elsewhere）问你制作的 GIF文件是用于网页还是用于其它，选第一项用于网页(默认)，按Next按钮

22、，接下的对话框也有两个选项(Loop infefinitely)和(Animate once and stop)询问你制作的图案名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 9 页 -是无限循环还是有条件停止，选第一项无限循环(默认)，按Next继续出现对话框有三个选项：(Photorealistic)，(Drawn)，(drawn insixteen colours)问你制作的 GIF文件是否包含图片和文字及图像品质等，选第一项(默认项)，接下来是动画切换延时选项，我们选取100(默认值)按Next继续，下面的对话框是选择静态文件对话框，按“Select”浏览，找到刚制作的静

23、态文件后依次双击1.bmp、2.bmp、3.bmp最后按“Done”结束，在选择文件对话框中会看到你刚选的文件名，如有不对，可按 Back返回上一对话框，按 Next 继续出现对话框告诉你完成了所有工作，接下来按Done 按钮，系统将开始 GIF文件重组，再按Done 按钮，系统开始制作 GIF动画文件，在接下来的对话框中可看到你刚选取的静态文件名和动画文件控制命令，按快捷键View观看GIF文件效果，任意单击右键返回，如满意，选菜单Save存盘，则大功告成！如不满意你还可以进行编辑修改，单击对话框中的不同单元，按快捷按钮Edit（编辑）可修改不同内容，如延时长短、幅面大小、颜色、色彩透明、刷

24、新方式等。七、网页的测试及发布（一）网站的性能测试对于网站的运行而言异常重要，但是目前对于网站的性能测试做的不够，我们在进行系统设计时就必须考虑到这些因素！网站性能测试主要从三个方面进行：连接速度测试、负载测试(Load)和压力测试(Stress)，连接速度测试是指打开网页的响应速度测试。负载测试指的是进行一些边界数据的测试，压力测试更像是恶意测试，压力测试倾向应该是致使整个系统崩溃。连接速度测试：用户连接到Web 应用系统的速度根据上网方式的变化而变化。当下载一个程序时，用户可以等较长的时间，但如果仅仅访问一个页面就不会这样。负载测试：负载测试是为了测量Web 系统在某一负载级别上的性能以保

25、证Web 系统在需求范围内能正常工作。负载级别可以是某个时刻同时访问Web 系统的用户数量，也可以是在线数据处理的数量。压力测试：进行压力测试是指实际破坏一个Web 应用系统，测试系统的反映。压力测试是测试系统的限制和故障恢复能力，也就是测试Web应用系统会不会崩溃，在什么情况下会崩溃。黑客常常提供错误的数据负载，直到 Web 应用系统崩溃，接着当系统重新启动时获得存取权。压力测试的区域包括表单、登陆和其他信息传输页面等。测试工具：性能测试可以采用相应的工具进行自动化测试。（2）网页的发布FTP 上传名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 9 页 -通过WEB 上传FTP 的好处是速度快，但是当空间提供商部支持后台压缩时，他也就基本失去意义了。WEB 的好处就是避免了 FTP 的尴尬，但是存在效率低下的问题。一次只能上传一个或多个文件，并且上传文件大小有限制，而FTP 是没有限制的。对于 FTP 上传，在网页 3剑客中制作网页的软件里有，也可以使用迅雷上传。切记地址名前要有FTP 的字样。名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 9 页 -