通识选修课第一讲

《通识选修课第一讲》由会员分享，可在线阅读，更多相关《通识选修课第一讲（33页珍藏版）》请在金锄头文库上搜索。

1、完美网页设计艺术郭鑫 151744971992010年10月12日 晚一、课程开设目的w网页制作技术的普及w软件开发的重要发展方向面向网络的软件应用广泛，相关技术的便 利性越来越受到欢迎w基于B/S（Browser/Server）架构软件开发的 需要二、课程教学目的w能制作一张简单的网页w掌握、熟悉HTML语言的基本代码w熟悉一般网站的架设与规划以及WEB服务器 的架设w熟悉A工具的使用三、课程教学相关要求w1、教材要求：不要求统一所有教材，但至少 要有一本与网页制作技术相关的参考资料w2、作业要求：严格按照每次课程后布置的作 业要求，并按时完成相应的作业内容。w3、课堂考勤要求：整个教学过程

2、中会随机抽 查到课情况。四、课程考核说明w课程最终成绩由两部分组成：w一、期末考查成绩占70%；w二、平时成绩占30%，平时成绩主要以课程 即将结束布置的综合作业为主，同时结合课 堂考勤结果。通过本讲学习，应该掌握以下内容：1. 认识internet和WWW简介 网站与网页 制作网页的基本工具 美化网页的基本工具 网页制作的基本步骤第一讲 网页制作基础1.1 internet 相关知识 Internet是全球最大的、开放的、由众多网络互连而成的计 算机互联网，中文译名为“国际互连网”或者“因特网”。 1.1.1 internet的发发展概况 1）探索阶段（1986年1993年）: 这个阶段是中

3、国互联网的起步 阶段。 2）蓄势待发阶段（1993年1996年）: 这个阶段随着四大 Internet主干网的相继建设，开启了铺设中国信息高速公路的 历程。 3）应运而起阶段（1996年1998年）: 这个阶段是中国互联网进 入一个空前活跃的时期，应用和政府管理齐头并进。4）网络大潮阶段（1999年2002年底）: 在这个阶段中国互联网 进入普及和应用的快速增长期。 5）繁荣与未来阶段（2003年至今）: 在这个阶段随着应用多元 化的到来，互联网逐步走向繁荣。1.1.2 如何访问internet 1、如何接入internet （1）局域网方式 （2）电话拨号方式 （3）无线上网方式 2、TCP

4、/IP网络协议3、IE浏览器 Internet Explorer简称IE，是微软公司开发的一种综 合性的网上浏览软件，是目前使用最广泛的WWW浏览器 软件，是访问Internet必不可少的工具。 其它浏览器1.1.3 internet中的相关地址 1、IP地址：是每台计算机接入网络中的数值型通 信地址，且在全球惟一的。 2、域名：为便于记忆IP地址而采用层次结构的名 称 3、网络实名：直接利用实名访问目标网站 （1）中文网址 （2）英语网址 （3）拼音网址 （4）数字网址 4、URL：文件在internet 上的标准通用地址，类 似于域名www简介wWWW是英文World Wide Web的简

5、称，中文名字叫 万维网，或者译为全球信息网。简而言之，WWW是 一个以Internet为基础的计算机网络，它允许用户在 一台计算机通过Internet存取另一台计算机上的信息 。 wWWW起源于1989年3月，由欧洲量子物理实 验室 CERN（the European Laboratory for Particle Physics）研究发展起来的主从结构分 布式超媒体系统，1990年底第一套软件正式 投入使用。 wWeb最主要的一个特点就是它使用一种超文本 （hypertext）连接技术；WWW的系统结构采 用的是客户端/服务器结构模式。 1.2 网站与网页 1.2.1 网站 1、层状结构2、

6、线性结构主 页页 面 1页 面 2页 面 33、WEB结构主 页页面1页面2页面3页面4页面5页面7页面8一级标题二级标题页面61.2.2 网页静态网页：静止的发布信息 动态网页：带有交互功能 1.2.3 组织网页的基本要素 1、文字 文字是网页发布信息所用的主要形式，由文字制 作出的网页占用空间小，当用户浏览时，可以很快 的展现在用户面前。 （1）标题：醒目 （2）字号：搭配适当 （3）字型：注意各用户浏览效果2、图形 这里的图形概念是广义的，它可以是普通的绘制 图形，可以是各种图像，还可以是动画。一幅优秀 的网页除了有能吸引浏览者的文字形式和内容外， 图形的表现功能是不能低估的。 （1）点

7、缀图形 （2）动态图形 （3）背景图形 3、超链接标志：建立联系的桥梁 （1）链接载体：文本链接和图形链接 （2）链接目标：内部链接、外部链接 锚点链接、E-mail链接1.3 网页制作和美化工具HTML（Hypertext Markup Language）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。HTML文档由文本、格式化代码和导向其他文档的超链接组成。1.3.1 网页制作工具 1超文本标识语言（HTML）Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑

8、界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。 Dreamweaver支持动态HTML，并采用了Roundtrip HTML技术， Dreamweaver是一种可以满足多层次需求、功能强大的可视化专业级网页设计及制作工具。 2Dream weaver MXFrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。FrontPage界面与Word、PowerPoint等软件的界面

9、极为相似，为使用者带来了极大的方便，Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强大。3FrontPage Photoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。 1.3.2 网页美化工具 1Photoshop Fireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的

10、软件，同时也是专业的网页图形设计及制作的解决方案。作为一个图像处理软件，Fireworks能够自由地导入多种格式的图像进行处理。Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。 2Fireworks Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非

11、常流行。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。 3Flash 1.4 网页制作的基本步骤网站定位要小，内容要精。如果要制作一个包罗罗万象的站点，把所有精彩的东东西都放在上面，结结果往往会事与愿违违，给给人的感觉觉是没有主题题，没有特色，样样样样 有，却样样样样 都很肤浅。网站的题材最好选自己擅长或者喜爱的内容。兴趣是制作网站的动力，没有热情，很难设计制作出优秀的网站。 1.4.1 网站定位 进行网站的整体规划也就是组织网站的内容和设计其结构。组织网站的内容可以从两个角度来考虑。从设计者的角度来考虑，可以依据被描述对象的组织机构、类别划分等来组织内容；从浏

12、览者的角度来考虑，就应该将各种素材依据浏览者的需要进行内容分类，以便浏览者可以快捷地获取所需要的信息及其相关内容。 1.4.2 整体规划 通常在进行网页开发时，首先都进行静态网页的 制作，然后再在其中加入脚本程序、表单等动态内 容。静态网页仅仅用来被动地发布信息，而不具有 任何交互功能，它是Web网页的重要组成部分。一 个好的网站首先是内容丰富，其次就是网页设计美 观。对于网页的外观设计，提供以下建议：（1）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。1.4.3 网页设计与制作 1静态网页的设计与制作 （2）每页排版不

13、要太松散或用太大的字，尽量 避免访问者浏览网页时要作大幅度的滚动，对于篇 幅太长的一页可以使用内部链接解决。（3）切勿以固定分辨率设计网页，常用的分辨率是800600、1024768等。网页应该随屏幕大小自动调整。（4）不应在每页中插入太多的广告。相信任何访问者都不会喜欢浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太多，只会令人烦厌。（5）不要每页都采用不同的墙纸，以免每次转页时都要花费过多的时间去下载。（6）底色或墙纸必须与文字对比强烈，以易于阅读。如果网页是文章式或是包含大量文字，不妨在底色与文字的搭配上下些工夫，力求让访问者能够舒适地阅读网页。（7）不要把图片白色当作透明，要知

14、道别人的系统不一定把内定底色设为白色，解决的办法除了真的把该网页的底色设为白色之外，最好还是用图片编辑工具将图片设为透明颜色。静态网页制作完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果等。一个真正的网站，不仅应该实现传统媒体的电子化，给用户提供需要的内容，而且还应该做更多的事情，完成比页面浏览更高层次的需求，例如收集信息、数据传递、数据存储以及系统维护等。 2为网页的添加动态效果 当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，达到最初

15、的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。1.4.4 测试网页 网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地，但服务器必须支持网站系统。 1.4.5 网页上传发布 网站的宣传和推广一般有两种途径和方法。一是通过传统媒体进行广告宣传；另一是利用Internet自身的特点向外宣传。可用来宣传的传统媒体包括：电视、广播、报纸、广告牌、海报和黄页等。在Internet上宣传网站的方法也是多种多样的，如可以将网址和网站信息发布到搜索引擎、网上黄页、新闻组、邮

16、件列表上进行宣传推广，也可以与其他同类网站交换宣传广告。1.4.6 网站的宣传与推广 现在的网站注重信息的不断更新和交互性，只有这样才能吸引更多的浏览者来访问和参与。如何知道哪些网页内容需要调整、更新和修改，网页需要增加那些内容呢？这些不能靠主观臆断来确定，而是需要得到访问者的反馈意见，也可根据不同网页的被访次数来分析。获得用户反馈信息的方法很多，常用的有计数器、留言板、调查表等，也可以建立系统日志来记录网页的被访情况。 1.4.7 网站的反馈与评价 网站要注意经常维护更新内容，保持内容的新鲜，不要做好就放到服务器永远不变了，只有不断地补充、更新内容，才能够吸引浏览者。维护更新时可以充分利用Dreamweaver提供的模板和库技术，以提高工作效率。 1.4.8 网站的更新与维护 谢谢