《网页设计网站内容设计与开发》由会员分享，可在线阅读，更多相关《网页设计网站内容设计与开发（48页珍藏版）》请在金锄头文库上搜索。
1、第二章网站内容设计与开发 1主要内容：4 常用网页素材及制作工具4 网页的可视化设计4 首页的设计4 交互式(动态)网页的设计 21.网页素材设计网页时,适当加入一些非文字内容,可实现多媒体效果常用的网页素材主要有:2.12.1常用网页素材及制作工具常用网页素材及制作工具图片图片动画动画声声音音视频剪辑视频剪辑3图片2.1 2.1 常用网页素材及制作工具常用网页素材及制作工具 Web图片格式: 常用图片编辑工具:JPEG格式:具有比较小的文件尺寸和连续的色调GIF格式:文件尺寸比JPEG稍大,但可实现透明背景功能注意:两种图片格式的正确选择Adobe Photoshop:文件格式为PSDMic
2、rosoft Image Composer:文件格式为MIC4GIF格式与JPEG格式的比较5动画2.1 2.1 常用网页素材及制作工具常用网页素材及制作工具 动画的格式: 常用动画编辑工具:AVI格式:视频流，可以包括图像及同步的声音，但文件尺寸较大MOV格式:可以与用户交互的动画GIF格式：存储多张图片，记录图片的显示位置、时间、方式、顺序Microsoft GIF AnimatorULEAD COOL 3D6声音2.1 2.1 常用网页素材及制作工具常用网页素材及制作工具 声音的格式: 把声音嵌入页面的方法Microsoft WAV:支持windows计算机，扩展名.wavMacinto
3、sh Sound:主要支持Mac计算机，扩展名为.snd或.macSun Audio：扩展名为.au，支持基于UNIX的计算机MIDI：扩展名为.mid，支持所有平台1.嵌入VCR类型的控件，用户可以随意的播放声音2.设置背景声音，在加载页面时自动播放3.创建到声音文件的链接 7视频剪辑2.1 2.1 常用网页素材及制作工具常用网页素材及制作工具 视频的格式: 把视频嵌入页面的方法Microsoft video for windows:支持windows计算机，扩展名.aviQuick Time:扩展名为.mov或.qt，是Apple自己的视频文件，也可在windows计算机中使用1.嵌入视频
4、：单击表示视频的图像，应用插件播放视频2. 创建到视频文件的链接8DreamweaverFireworksFlash2.1 2.1 常用网页素材及制作工具常用网页素材及制作工具92.1 2.1 常用网页素材及制作工具常用网页素材及制作工具) 主要功能:1.HTML检查、HTML格式控制、HTML格式化选项2.全局查找/替换、图像编辑 、全FTP功能3.处理Flash和Shockwave等媒体格式和动态HTML4.基于团队的Web创作1.Dreamweaver102.1 2.1 常用网页素材及制作工具常用网页素材及制作工具) 特性介绍:1.完全用户自定义控制可以迅速完成页面以及站点的设计。2.R
5、oundtrip HTML/Javascript 行为库以及可视化编辑环境大量减少了 代码的编写，同时亦保证了其专业性和兼容性。3.可与其它群组产品的配合使用以及众多第三方支持可轻松完成动态发布。1.Dreamweaver112.1 2.1 常用网页素材及制作工具常用网页素材及制作工具工作环境：1.文档窗口：显示当前所创建和编辑的文档内容2.启动面板：包括最常用的控制按钮3.对象面板：采用多层结构，放置了网页设计中需要用到的各种对象4.属性面板：显示文档窗口中所选元素的属性5.可停靠浮动面板：可将众多面板窗口放置于一个综合窗口中1.Dreamweaver122.1 2.1 常用网页素材及制作工
6、具常用网页素材及制作工具) 主要功能:1.自由地导入各种图像2.能够自动切图，生成鼠标动态感应的javascript3.具有强大的动画功能2. Fireworks132.1 2.1 常用网页素材及制作工具常用网页素材及制作工具) 特性介绍:1.丰富的图像处理效果2.矢量处理和位图处理的有效结合3.丰富的样式4.构建动画5.编辑整篇Web页面2. Fireworks14Fireworks的2种编辑模式 矢量图像是用包含颜色和位置属性的直线或曲线（即矢量）来描述图像属性的一种方法。矢量图形具有独立的分辨率，也就是说我们以不同的分辨率来显示矢量图形时图像都不会失真。 位图图像是用每一个栅格内不同颜色
7、的点（像素）来描述图像属性的。位图图像的分辨率不是独立的。因此编辑位图会改变它的显示质量，尤其是放缩图像时会因为图像在栅格内的重新分配而导致图像失真。151617182.1 2.1 常用网页素材及制作工具常用网页素材及制作工具工作界面:菜单栏工具栏时间轴舞台（工作区）3.Flash192.2 网页的可视化设计网页设计原则网页整体风格的设计网站CI设计网页链接结构的设计网页版面布局的设计20v网页命名要简洁v确保页面的导航性好v合理设计视觉效果v为图片添加文字说明v不宜使用太多的动画和图片v页面长度要适中v整个页面风格要一致v尽量使用相对超级链接v考虑浏览器的兼容性1.1.网页设计需注意的问题网
8、页设计需注意的问题21网页整体风格包括:站点的CI、版面布局、浏览方式、文字、交互性、内容价值等因素要根据网站的功能定位及其特色设计网站的风格 v使企业标志尽可能出现在每个页面上v突出网站标准色彩v突出网站标准字体v使用统一的图片处理效果v设计一条朗朗上口的宣传标语v创造站点特有的符号或图标2.2.网页整体风格的设计网页整体风格的设计22设计网站的标志(logo)、名称 设计网站的标准色彩 设计网站的标准字体 设计网站的宣传标语 3.3.网站网站CICI设计设计 23标志的设计：网站有代表性的人物，动物，花草，可以用它们作为设计的蓝本，加以卡通化和艺术化网站有专业性的，可以以本专业有代表的物品
9、作为标志最常用和最简单的方式是用自己网站的英文名称作标志网站的名称要合法，合理，合情 (1)(1)设计网站的标志设计网站的标志(logo)(logo)、名称名称24(1)(1)设计网站的标志设计网站的标志(logo)(logo)、名称名称2526标准色彩：是指能体现网站型象和延伸内涵的色彩 一般来说，一个网站的标准色彩不超过3种，以相近的色彩为主 (2)(2)设计网站的标准色彩设计网站的标准色彩27标准字体：是指用于标志，标题，主菜单的特有字体在制作网站标志、标题、菜单时，如果使用了不常用的字体，则只能用图片的形式，以方便用户的浏览(3)(3)设计网站的标准字体设计网站的标准字体28网页链接结
10、构是指页面之间相互链接的拓扑结构。1、网页链接结构的原则是：用最少的链接，使得浏览最有效率2、建立网页链接有两种基本方式：v树状链接结构（一对一） v网状链接结构（一对多）4.4.网页链接结构的设计网页链接结构的设计29v树状链接结构（一对一）类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面，立体结构为二叉树。优点：条理清晰 缺点：浏览效率低v网状链接结构（一对多）类似网络服务器的链接，每个页面相互之间都建立链接，立体结构象 一张网。优点：浏览方便 缺点：链接太多，结构不清晰4.4.网站链接结构的设计网站链接结构的设计30根据显示器分辨率的不同，页面大小有：640*480像
11、素，800*600像素，1024*768像素 F 网页布局技术v利用框架进行布局v使用层叠样式表（CSS）v使用表格布局v使用层进行布局2)2) 网页布局样式网页布局样式vv“ “T”T”结构布局结构布局vv “ “” ”型布局型布局vv “ “三三” ”型布局型布局vv 对称对比布局对称对比布局vv POPPOP布局布局5.5.网页版面布局的设计网页版面布局的设计323334353637 首页的功能模块v页头v主菜单v最新消息的传递v电子邮件地址v联络信息v版权信息v其他信息 2.3 2.3 首页的设计首页的设计首页也叫主页，是网站的“门面”，故被称作“ Homepage”首页设计应遵循：快
12、速、简捷、吸引人、信息概括能力强、易于导航的原则38 首页设计应注意的问题首页就是全网站内容的目录，也是一个索引，设计中应注意：v首页明确、主题突出设置视觉兴趣点例如：柯达的主题“再拍一张”波音的主题“世界航天业领袖” v尽可能缩短下载时间 图象力求简朴、少用Java源程序v注意配合最低档的设备 2.3 2.3 首页的设计首页的设计39 Web页面中的资源包括：静态网页和动态网页v静态网页：内容相对稳定，文件比较小，执行效率高例如：公司介绍、销售网络、售后服务信息、联系信息等v动态网页：与用户可实现交互，内容需要频繁更新，由数据库和相应的应用程序构成，页面中的内容来自数据库。例如：产品信息、产
13、品搜索、公司新闻动态、论坛系统、网站的管理系统等2.4 2.4 交互式网页的设计交互式网页的设计40 静态网页静态网页网页文件里没有程序代 码，只有HTML 标记， 后缀是.htm或.html， 即静态的HTML文档。网页内容是原封不动被 传递的。如要修改，必 须修改HTML源代码。41l 网页文件含HTML标记和程序代码，后缀则随程 序语言而不同，如ASP文 件为.aspl 客户端和服务器进行交 互，由服务器执行脚本程 序后，动态生成 HTML。 动态网页动态网页424344ASP（Active Server Pages）活动服务器页面是服务器端的脚本编写环境，使用ASP可以组合HTML、脚
14、本命令和ActiveX组件来创建交互的Web页。ASP 实际就是嵌入可执行脚本的HTML文档，这个文本文件可以包括下列部分的任意组合： HTML标记 ASP脚本语言的代码 ASP语法2.4 2.4 交互式网页的设计交互式网页的设计45作业作业1.简述WWW服务器与用户端的通讯过程。2.尝试不同的Internet访问方式，说明它们各自有什么特点？3.URL的构成有哪几部分，试举例说明4.网页的版面布局技术有哪几种，版面布局样式有哪些5.网页中常用的图片格式有哪两种，各有何特点46练习与思考请选择一知名网站进行CI形象分析请为一家网上书店进行网站的总体结构设计请利用所学知识为新华书店网上书店设计一个LOGO47答案及要点1.简述WWW服务器与用户端的通讯过程2.尝试不同的Internet访问方式，说明它们各自有什么特点？3.URL的构成有哪几部分，试举例说明4.网页的版面布局技术有哪几种，版面布局样式有哪些5.网页中常用的图片格式有哪两种，各有何特点48
