《网页制作》课件.ppt

《《网页制作》课件.ppt》由会员分享，可在线阅读，更多相关《《网页制作》课件.ppt（29页珍藏版）》请在三一办公上搜索。

1、网页制作绪论,授课教师：杨春节,1 基础知识2 网站的设计3 网站建设总的趋势4 个人站点的推销,1.1 基础知识1.2 Web技术,1.1 基础知识网页与网站制作网页的基本工具美化网页的基本工具,1.1.1 网页与网站浏览器与Web服务器之间是以页为单位来传送信息。网页通常成组出现，并且这组网页之间通过超链接相互组织成为反映某个主题的网站。,网站是由网页组成的，网页之间是由超链接来连接的，其连接方式有三种：线性网站、树状网站、非线性网站.,线性网站：一页连接一页,树状网站：分层排列,非线性网站：上述两种网站的结合,1.1.2 制作网页的基本工具超文本标识语言（HTML）HTML（Hypert

2、ext Markup Language）是一种专门用于Web页制作的编程语言。FrontPageFrontPage是由Microsoft公司推出的新一代Web网页制作工具FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。Dreamweaver Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。,1.1.3 美化网页的基本工具PhotoshopPh

3、otoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。FireworksFireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。FlashFlash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意

4、的界面融合在一起，以制作出高品质的网页动态效果。,1.2 Web技术 Web的面貌已经发生了非常重要的变化，以访问DBMS和在线商务活动等功能为代表的动态Web应用程序成为计算机发展的热门技术之一。动态Web技术也是基于客户机/服务器结构的，在总体上可分为客户端扩展技术和服务器端扩展技术两大类，以客户机/服务器应用模式为基础,在客户端扩展的技术主要是JavaScript、VBScript、Perl、Applets、ActiveX、XML、CSS和Flash等。,服务器端扩展的技术主要是CGI、ISAPI、NSAPI、SSI、ASP、PHP、JSP和Net等。,1.2.1 客户端扩展技术 客户端

5、扩展技术是指浏览器中集成或增加的支持数据变动的新技术，提高了Web页面的实用化程度。客户端扩展技术可以验证交互数据的合法性，进行数据计算、分类和统计等功能，甚至可以在Web页面内制作游戏程序。1.2.2 标记扩展 为了让Web“动”起来，HTML本身的标记规则也在进一步扩展和改进，CSS（叠层式表单语言）以精良的界面装饰技术占据了不可替代的技术角色，它允许设计者自己定义Web页面的样式，具有更好的易用性和扩展性。XML（扩展式标记语言）是HTML语言的改良版，支持用户自定义的控制标记，可以有效地降低阅读的复杂性。,1.2.3 服务器端扩展技术,浏览器扩展技术和服务器扩展技术总是联合使用,动态W

6、eb技术的发展主流是服务器扩展技术。动态Web页面最好是服务器和浏览器共同协作，才能达到较好的网络应用效果。,CGI（Common Gateway Interface，通用公共网关接口）是最先发展起来的动态Web技术、是一种接口规范，定义了交互操作中双方必须遵守的规则集。,1.2.4 ASP（ActiveX Server Pages）ASP是微软公司面向大众化的动态Web技术方案，建立了一整套动态Web服务器环境，可使ASP指令标记与ActiveX控件程序结合使用，建立高效的动态Web应用程序。ASP指令标记（脚本）使用特殊符号（）加以标注，例如：。含有ASP脚本的Web页面以asp为后缀名，

7、全部ASP脚本都在Web服务器端执行，Web服务器仅将执行的结果发送到浏览器端。,1.2.5 PHP（Hypertext Preprocessor）PHP也是一种服务器端嵌入式脚本标记语言，其工作原理与ASP和JSP相似，它的特色是高速，比ASP执行速度更快。PHP脚本采用了C、Java和Perl等多种语法格式，源于RedHat Linux，已被很多Internet站点所采用。,1.2.6 JSP JSP（IAVA SERVER PAGES）是由Sun 公司在java语言上开发出来的一种动态网页制作技术，其可使您可以将网页中的动态部分和静态的HTML相分离。您可以使用平常得心应手的工具并按照平

8、常的方式来书写HTML语句。然后，将动态部分用特殊的标记嵌入即可，这些标记常常以“%”开始并以“%”,2 网站的设计一方面是纯网站本身的设计。比如文字排版，图片制作，平面设计，三维立体设计，静态无声图文，动态有声影像等；另一方面是网站的延伸设计，包括网站的主题定位和浏览群的定位，智能交互，制作策划，形象包装，宣传营销等等。,网站的定位将网站设计制作大致列为定位网站主题和名称；定位网站广告标志的形象；网站的目录结构；网站的整体风格创意设计；首页的设计；版面布局的窍门；色彩的搭配；考虑不同的浏览器和分辨率；字体的设置和表格的嵌套等方面的设计提纲。网站“设计”与网站“制作”，他们的区别在于设计是一个

9、思考的过程，而制作只是将思考的结果表现出来。,2.1 定位网站主题和名称 所谓主题也就是网站的题材。（1）主题要小而精;（2）题材最好是你自己擅长或者喜爱的内容;（3）题材不要太滥或者目标太高；,2.2 定位网站广告标志的形象（CI形象）所谓 CI，是借用广告的术语。(CI 是英文 Corporate Identity 的缩写)，意思是通过视觉来统一企业的形象。（中国人网站、中央电视台网站）,设计网站CI形象2.2.1 设计网站的标志(logo)2.2.2 设计网站的标准色彩2.2.3 设计网站的标准字体设计网站的宣传标语,2.3 网站的目录结构网站的目录是指你建立网站时创建的目录。下面是建立

10、目录结构的一些建议：（1）不要将所有文件都存放在根目录下（2）按栏目内容建立子目录（3）在每个主目录下都建立独立的 images 目录（4）目录的层次不要太深（5）使用小写字母对文件夹和文件命名,2.4 网站的整体风格及创意设计 风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。风格是独特的，是站点不同与其他网站的地方。风格是有人性的。,2.5 首页的设计确定首页的功能模块设计首页的版面 处理技术上的细节,2.5.1 确定首页的功能模块 网站名称（logo），广告条（banner），主菜单（menu），新闻（whats new），搜索（search），友情链接（links），邮

11、件（E-mail），计数器（count），版权（copyright）。2.5.2 设计首页的版面 在功能模块确定后，开始设计首页的版面。设计版面的最好方法是：找一张白纸，一支笔，先将你理想中的草图勾勒出来，然后再用网页制作软件实现。处理技术上的细节 考虑主页在不同分辨率下保持不变形，如何设置字体和链接颜色等等。,2.6 版面布局 版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置。2.6.1 通常版面布局是按照如下的步骤：(1)草案(2)粗略布局(3)定案 将粗略布局精细化，具体化。,2.6.2 通常用到的版面布局形式：(1)“

12、T”结构布局 所谓“T”结构，就是指页面顶部为横条的网站标志加广告条，下方左面为主菜单，右面显示内容的布局，(2)“口”型布局“口”型结构是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。(3)对称对比布局 对称对比结构，是采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。,2.7 网站色彩的搭配(1)非彩色的搭配(2)彩色的搭配(3)网页色彩搭配的原理(4)网页色彩搭配的技巧,3 网站建设总的趋势3.1 中文网站的诞生在最初（大概是97年）的网站建设中，中文的网站并不多，而且功能有限;对于当时较大商业网站，规模也不大，编辑、美工、后台、网管的分工也不细致，也没有网站项目严格的管理。3.2最初的建设技术 HTML、CGI、Fireworks2.0、Dreamweaver2.0等 3.3 后台程序的发展(1)从CGI到ASP(2)ASP配套的数据库-ACCESS或和SQL SEVER(3)迅速强大的的PHP+MYSQL(4)JSP技术,4 个人站点的推销(1)改造你的站点 华丽的页面 随时更新 有价值的内容 网速度快 交互的内容(2)注册到搜索引擎(3)META的利用(4)广告的交换 6.采用有效的方式,