《网页制作基础》PPT课件.ppt

WEB DESIGN,1.1 网页制作基础,INTERNET与wwwINTERNET概念p1计算机网络与网络协议多台计算机通过特定连接方式构成的计算机集合体协议：网络设备共同遵循规则 获得信息方法局域网：以太网 Ethernet城域网:TCP/IP协议广域网:TCP/IP协议,1.1 网页制作基础,5.万维网概念（www）Web服务器的计算机组成-组织信息资源-浏览器浏览(IE Netscape Navigator)6.网站：通过超链接连接起来的一系列逻辑视为一个整体的一些网页主页 index.htm defaunt.htm7.源代码(html)：超文本标记语言 网页文件的结构：注释行:用作备注，不显示出来。,1.2 网页的基本要素,1.2.1 文字文字是网页发布信息所用的主要形式由文字制作出的网页占用空间小下载方便注意编排标题 字型字号 内容的层次样式 颜色,1.2 网页的基本要素,1标题表明本网页的主要内容 设计醒目标题2字号大小适中。网页信息量变化应统筹规划，给人以生动活泼之感觉。3字型适当的位置采用不同的字体字型，吸引人考虑浏览者条件限制标题或少量的文字，特殊字体制作成图形方式利用表格形式来实现,1.2 网页的基本要素,图形绘制图形，图像，动画图形格式一般使用JPEG和GIF，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。1菜单按钮 网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面。2背景图形加强视觉效果，网页的底层放置了图形背景图可以使网页更加华丽，使人感到界面友好。一个比较大的图形，需要占据较大的空间，致使网页的显示速度明显变慢,1.2 网页的基本要素,1.2.3 链接标志链接是是网页中最重要、最根本的元素之一通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。链接的标志有文字和图形两种。制作一些精美的图形作为链接按钮，使它和整个网页融为一体。1.2.4 交互功能 Internet区别其他媒体的一个重要标志就是它的交互功能数据库进行检索-及时返回确认信息通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。,1.3 网页制作和美化工具,网页制作工具1超文本标识语言（HTML）HTML（Hypertext Markup Language）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。HTML文档由文本、格式化代码和导向其他文档的超链接组成。2FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便，Microsoft公司将FrontPage封入Office之中，成为Office家族的一员，使之功能更为强大。,网页制作工具,3Dreamweaver Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页.Dreamweaver的网页动态效果与网页排版功Dreamweaver支持动态HTML，设计复杂的交互式网页，产生动态效果,1.3.2网页美化工具,1Photoshop Photoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。2Fireworks Fireworks是由Macromedia公司开发的图形处理工具，因为 Fireworks是第一套专门为制作网页图形而设计的软件.能够自动切割图像、生成光标动态感应的JavaScriptFireworks具有强大的动画功能和一个相当完美的网络图像生成器。,1.3.2网页美化工具,3Flash Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。,1.4 网页制作的基本步骤,1.4.1 流程规划阶段设计阶段开发阶段发布阶段维护阶段,1.4 网页制作的基本步骤（规划）,层状结构 层状结构类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。,1.4 网页制作的基本步骤（规划）,线性结构 线性结构类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。,1.4 网页制作的基本步骤（规划）,Web结构类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。,主 页,页面1,页面2,页面3,页面4,页面5,页面7,页面8,一级标题,二级标题,页面6,1.4 网页制作的基本步骤（规划）,1 收集整理资料，建立目标规划书2 定义分析目标用户3 准备素材4 内容规划5 确定站点风格6 网络技术因素带宽 浏览器 分辨率 交互插件,1.4 网页制作的基本步骤（设计）,1.4.2 网页设计与制作,1静态网页的设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：,1.4 网页制作的基本步骤,1）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。（2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。须知，在一页的上部是显眼而宝贵的地方，不要只放几个粗大的字或图片。（3）切勿以800600以上的分辨率设计网页，常用的分辨率是640480及800600。现在国内的站点基本上都是800600，但是如果主要是面向国外访问者的站点，建议使用640480。（4）不应在每页中插入太多的广告。相信任何访问者都不会喜欢浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太多，只会令人烦厌。（5）不要每页都采用不同的墙纸，以免每次转页时都要花费过多的时间去下载，采用相同的底色或墙纸还可以增强网页一致性，以树立自己的风格。,1.4.2 网页设计与制作,1静态网页的设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：,1.4.2 网页设计与制作,1静态网页的设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：,1.4.2 网页设计与制作,1静态网页的设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：,1.4.2 网页设计与制作,1静态网页的设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：,1.4.2 网页设计与制作,1静态网页的设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：,1.4.2 网页设计与制作,（6）底色或墙纸必须与文字对比强烈，以易于阅读。这并不是要求永远使用鲜亮的背景搭配深色的文字，但深色背景常要求与主题配合，有较多的顾虑，如果网页是文章式或是包含大量文字，不妨在底色与文字的搭配上下些工夫，力求让访问者能够舒适地阅读网页。（7）不要把图片白色当作透明，要知道别人的系统不一定把内定底色设为白色，解决的办法除了真的把该网页的底色设为白色之外，最好还是用图片编辑工具将图片设为透明颜色。,1.4.2 网页设计与制作,2为网页的添加动态效果 静态网页制作完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果等。,1.4.2 网页设计与制作,1.4.3 测试网页 当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。如果在测试过程中发现了错误，就要及时修改，在准确无误后,方可正式在Internet上发布。在进行功能性测试和完整性测试后，有的还需要掌握整个站点的结构以备日后的修改。1.4.4 网页上传发布 网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地，但必须支持ASP，因为动态程序是建立在ASP基础上的。,