《01-网站设计与开发之静态网页.ppt

网站设计与开发 谭金波 山东师范大学传播学院 Email：yttjb@163.com 主要内容 静态网页制作（Dreamweaver） HTML语言 动态网页制作（ASP） 动态网页与静态网页 静态网页 所谓静态指的就是网站内容固定不变。静态网页不包含在服务器端执行的程序代码。 静态网页内容通常以HTML语言编写，在服务器端以.htm或.html文件格式存储，可以包含文本、图像、声音、Flash动画、客户端脚本、ActiveX控件及Java小程序等。添加了诸多元素的静态网页，可以达到视觉上的“动态”，但它无法实现用户和网站服务器之间的交互。 静态网页不随带任何在服务器端运行的脚本，服务器不需执行任何程序就把存储在服务器上的HTML文件传给客户端的浏览器中直接进行解读工作，所以不会再发生任何变化。缺点是不易维护。 动态网页与静态网页 动态网页 指网页内含有被服务器执行的程序代码。动态网页可以是纯文本内容的，也可以是包含各种动画的内容。 用户浏览动态网页须由服务器先执行网页中的程序，再将执行完的结果传送到用户浏览器中。 区别：动态网页会在服务器中执行一些程序，由于执行程序时的条件不同，所以执行的结果也可能会有所不同，最终用户所看到的网页内容也将不同。 动态网页 通过一定的计算机语言编程，使计算机按照我们所希望的网页格式，产生出包含用户所需内容的网页，传送给用户浏览。 动态网页技术：CGI、ASP、PHP、JSP 动态网站与静态网站 动态网页的特点 交互性。能够根据用户的要求和选择做出动态改变。 能够自动更新。即不需要手动更新HTML文档，便会自动生成新的页面。 因时因人而变。当不同时间、不同的人访问同一网址时会产生不同的页面。 动态网站与静态网站 参考书目 Dreamweaver8完美网页设计——技术入门篇 Dreamweaver8完美网页设计——CSS网页设计篇 Dreamweaver8完美网页设计——网页特效篇 DreamweaverCS3中文版网页设计与制作实用教程 网站设计流程 网站整体规划 用户需求分析:内容，功能，设计，技术 网站整体规划:栏目，功能，页面结构设计 搜集和准备素材 网站制作 页面布局, 插入内容 改变超链接样式, 预览效果 网站测试与发布 网站测试, 注册域名 申请虚拟主机, 利用FTP上传网页 页面结构设计 网站的页面结构分为三级：首页、列表页、内容页。 网站的设计技巧 1、用文件夹来合理构建站点结构 Html文档中不仅仅是文字，还包含其他任何类型的对象，例如图像、声音、动画等，这些文档资源不能直接存储在Html文档中。为清晰起见，不要把所有文件都存放在根目录下，文件多时可以创建多级子目录。 如首先为站点创建一个根文件夹（根目录），然后按栏目内容建立多个子文件夹，每个子文件夹下再将Html文件和图形文件及其它文件分门别类地存储到相应的文件夹下。但目录的层次也不能太深，以便于维护管理。 网站的设计技巧 2、使用合理、意义明确的文件名和目录名 使用合理的文件名非常重要，特别是在网站的规模变得很大时。文件名应该简洁易懂，让人看了就能够知道网页表述的内容。 可以使用长文件名来命名文件，以充分表现文件的含义和内容。（但是太长的目录名不便于记忆 ） 尽管中文文件名清晰易懂，但是应该避免使用中文文件（文件夹）名，因为很多Internet服务器使用的是英文操作系统，不能对中文文件名提供很好的支持；而且浏览网站的用户也可能使用英文操作系统，中文的文件名称可能导致浏览错误或访问失败。如果对英文不熟悉，可以用汉语拼音作为文件名。 很多internet服务器采用UNIX操作系统，它是区分文件大小写的。例如Index.html和internet.html是完全不同的两个文件，而且可以同时出现在一个文件夹中。因此，建议在构建的站点中，全部使用小写的文件名称。 网站的设计技巧 3、在制作的每一个网页上都加上一个“返回主页”的超级链接，而且应当避免强迫用户使用工具栏中的向前和向后按钮。绝大多数站点在每一页同样的位置上都有相同的导航条（网站的目录结构），使浏览者能够从每一页上访问网站的任何部分。 4、在制作Web网页时，一个Web网页最好不要过长。如果某一个Web网页内容很多，最好把它们分成多个，这样做的好处是不致于使Web网页由于网络速度的问题，而影响用户的浏览。 网站的设计技巧 5、适当地使用动画可以增加网页的动感和趣味，但不能太多，以免网页太花哨。 6、需要使用特殊字体时，最好用图片来代替。 7、如果网页中有比较大的图像，要想办法进行处理，如尽量缩小或省略图形，或改变图象格式，以加快网页显示的速度。否则即使制做的Web网页很好看，用户也没有耐心等待整个图片下载完毕。 8、在网