网页设计源代码和素材-[{“translations”:[{“text”:”[{“

翻译”：[{“text”：”n

网页制作基本信息 .ppt 66 页n\n

\n网页制作 内容摘要 1.WWW 的工作原理 2.网站n

生产工艺 3.Web 标准 4.网页的要素 5.课程主要内容 1.WWW 的工作原理 网站 = 服务器 + 域名 + 网页 1.WWW 的工作原理 4）静态网页源码显示方式 查看/源文件 1.2 动态网页 4）动态网页编程技术 ASP（Active Server Pages），Microsoft产品，扩展 .asp PHP（超文本预处理器），由网络团队开发和维护，扩展 .php JSP（Java Server Pages）网页设计源代码和素材，由SUN推出，.jsp ASP.NET 扩展，Microsoft产品， 扩展.aspx 课程方向 静态网页的设计与制作 评价方法 二、网站制作流程 1.网站的整体规划设计 主题和内容的确定 网站栏目的确定 网站目录结构的设计 网站链接结构的设计 网站的风格设计 2.网站资料的准备和收集 在设计网站目录结构时，要根据情况灵活处理。例如，课程管理系统 StudyOA创建网站的注意事项 网站风格设计 网页设计和制作不仅仅是一门技能，更是技术与艺术的高度统一。它要求网页设计师不仅要掌握网页制作的技术，还要有相应的艺术修养。 考虑颜色和排版 大型 Web 开发团队的组成 网页设计师是指精通 Photoshop、Corldraw、Frontpage、Dreamweaver 等多种网页设计工具的网页设计师。n\

r\nn

网页设计师可以将平面设计的美学观点应用于网站设计。从小型个人主页到大型公司、大型政府部门和国际组织等网页，在互联网上都使用网页作为自己的门面。当你点击网站时，首先映入眼帘的是网页的界面设计，比如内容的介绍、按钮的位置、文字的组合、颜色的应用、使用指导等等。这一切都在网页设计领域，这都是网页设计师的工作。 3.网页标准 符合网页标准的布局：页面只有内容（文字和图片，图片是指内容中的图片，不是装饰图片），没有任何装饰，看起来像一个单调的页面。文字和图片只是一一列出，没有任何样式。然后添加表示，使用所有修饰后的图片作为背景，并使用CSS定义每条内容的位置、字体、颜色等。删除 CSS 文件后网页设计源代码和素材卡通形象，剩下的就是最重要的内容。这样就可以在文本浏览器、手机、PDA等设备上阅读，并且可以随时修改CSS实现修改。4. 网页元素 文本、图像、动画、超链接、表格、表单、音频、视频 1.文本 文本是网页存在的基础。1）文字风格：风格应与内容性质相一致，例如：政府网站文字具有庄重、规范的特点，字体形状规整有序，简洁大方。 对于休闲旅游内容页面，文字编辑器要有欢快轻快的风格，字体活泼活泼，跳跃明快，节奏感鲜明，给人一种活力的感觉。 一个个人网页可以结合个人的性格特点和追求，给人一种独特的个性印象。n\

r\nn2）文字大小

一般来说，可以在网页正文中使用12px（9点）-16px（12点）大小的文字。最适合显示网页正文的字体大小约为 12 磅（16px），现在许多综合性网站通常使用 9 磅（12px）字体大小，因为页面中需要排列的内容量很大。3）字体选择 网页设计师可以使用字体来更充分地反映设计中要表达的感受。粗体字体强有力有力，具有阳刚之气的特点，适用于机械、建筑等内容。小字典雅细致，具有女性化的特质，更适合服装、化妆品、食品等行业的内容。在同一页面上，字体类型很少，布局优雅稳定。如果字体类型很多，布局将是活跃的和丰富多彩的。关键是如何根据页面内容来把握这种比例关系。从加强平台独立性的角度来看，正文内容最好使用默认字体。宋字体基本上是目前唯一用于显示中文的通用网页字体。4）行距 行距的常规比例为10：12，字10，行距12。适当的行距会形成明显的水平空白条来引导观看者的视线，而行距过宽会使一行文字失去良好的连续性。5）字距调整 现代网页设计更流行的是将标题文本字距调整得更宽或更窄，以反映轻松、拉伸、娱乐或抒情的布局，并且通常通过展平文本或加宽行距来反映。利用字间距和行距的宽广卡通形象，同时进行全面改动，可以为作品的布局增加空间层次感和灵活性。n\

r\n2.图片：n

图形图像必须完全符合网页的主题，并且具有创新的理念和强烈的个性，使主题和两者的表现更加统一。JPG/JPEG图像文件通过失真进行压缩，在压缩过程中会减去图像的像素信息，但不会丢失图像的颜色。因此，没有明显边缘的全彩连续色调，如风景照片，适合以JPG文件格式显示。它不支持透明背景颜色和动画格式。 PNG 是 Fireworks 的默认文件格式，支持高级无损压缩，最新的 Web 浏览器支持，并支持透明图像的生成。3.网页动画主要分为Flash动画和gif动画。其中，Flash动画应用最为广泛，GIF动画通常用于制作只有几帧图片的简单交替动画。4.超链接 所谓超链接，是指从一个网页通向一个目标的链接关系。此目标可以是另一个网页、图片、电子邮件地址、文件，甚至是应用程序。它表示网页文件的相互链接。5. 表格 表格的两大用途：显示数据和布局 6.表格 7.音频 网页中的音频文件格式： WAV 格式：无损音乐。完全未压缩，10MB/分钟。Windows 系统使用的标准数字音频格式。MP3格式：它可以以小比特率和大压缩比实现近乎完美的CD音质。n\

r\nn

MIDI 格式。文件通常很小，通常用于提供背景音乐。WMA格式：适合在网络上在线播放RealAudio：流畅的旋律。一种流式音频格式，主要用于通过 Web 提供实时广播。Real的文件格式包括RA，RM，RMX等.AIF/AIFF 8。视频 网页中的视频文件格式：Flv、ASF、WMV、RM、RMVB 将重要信息放在“最佳视觉区域”中 在网页的版面设计中，需要考虑将最重要的信息或视觉过程安排在关注值高的位置，这是最佳视觉区域。由于人们习惯于将视线从左到右和从上到下移动，因此视口中的不同位置具有不同程度的注意力。视觉区域的上部比下部更明显，左侧比右侧更明显。2）避免视觉疲劳 在网页中动画中适当安排多媒体元素并不是越多越好，而是要形成动静态的效果，因此需要适当地安排多媒体元素，并注意主次之间的关系。合理的配色 相似颜色的比较 相邻颜色的比较 颜色的对比 互补色的对比 5.课程主要内容 html – （超文本标记语言） CSS – （级联样式表） 级联样式表 javascript Dreamweaver CS4 网页设计技巧的使用 1）符合视觉规则 文本的水平排列 因为人眼的视线横向移动比垂直移动快，所以不太容易疲劳n“，”to“：”en“，”sentLen“：{”srcSentLen“：[24,1,1,181,174,52,64,34,90,6,32,49,58,27,78,24,44,21,39,92,59,58,36,6,51,72,35,26,34,23,17,22,130,69,37,6,55,57,39,18,56,26,45,30,45,19,55,15,22,34,6,11,18,33,19,25,115,39,28,67,173,27

]，”transSentLen“：[64,0,1,426,477,245,214,141,218,5,90,195,263,77,236,78,157,78,146,146,250,217,137,5,115,251,112,132,167,82,74,89,455,242,185,5,202,186,134,73,180,86,161,109,90,49,139,35,59,111,5,17,74,81,89,46,321,161,132,315,373,100]}}]}]n”,”to”:”zh-Hans”,”sentLen”:{“srcSentLen”:[31,59,46,17,8,25,17,25,30,59,377,137,245,169,213,142,217,8,90,195,261,79,236,78,157,78,146,145,250,218,136,8,114,251,112,132,167,82,74,89,117,84,86,168,242,184,10,11,187,186,133,74,180,86,161,109,90,49,63,9,67,35,59,110,8,16,74,81,89,58,311,161,132,315,145,326,242,223],”transSentLen”:[22,21,19,13,2,10,9,8,9,32,185,40,57,32,64,33,91,7,28,46,59,24,68,19,45,23,41,50,54,55,34,7,49,72,35,32,35,21,23,21,27,25,28,46,72,41,10,3,49,49,37,16,58,24,42,31,33,13,24,5,27,14,23,32,7,11,18,32,27,33,97,43,23,71,38,124,243,222]}}]}]