第1章初识网站和网页.ppt

第1章初识网站和网页 网站和网页网页中的元素类型从功能角度分析网页网站建设流程 1 1网站和网页 网站是网页的集合 网页是组成网站的元素 现场解答1 网站 网页和主页之间有何联系 网页 大型网站 一个小型网站可能只包含几个网页 而一个大型网站则可能包含成千上万个网页 小型网站 新浪网站首页 主页也叫首页 每个网站都有自己的首页 是浏览者登录网站时看见的第一个网页 也是网站的入口 现场解答2 什么是网页 网页中除了包含文字外 还包含图像 动画等内容 图像 动画 文字 我们看到的一个个网页都是由多个文件组成的 网页文件是 根 图像和动画文件都是 枝叶 图像文件 网页文件 选择 文件 另存为 菜单 在浏览器中选择 文件 菜单中的 另存为 可将网页保存到磁盘中 1 2网页中的元素类型 现场解答1 了解网页中的文字与图像 文字与图像是网页中的基本元素 是浏览者获得相关信息的主要来源 可在设计网页时为文字设置位置 字体 字号 颜色 对齐方式 以及加粗和倾斜等格式 网页中只能使用和显示JPEG GIF和PNG格式的图像 其他诸如BMP和TIF等格式的图像目前还都不能用于网页中 现场解答2 网页中的动画与视频影像有何特点 视频流技术常见的格式有RealVideo及AppleQuickTime GIF动画 SWF动画 目前 大家在网页中看到的动画主要包括两类 即动态GIF格式动画和SWF格式动画 动态GIF格式动画的原理十分简单 就是高速连续显示多幅静态图像 就像播放动画片一样 通常用于制作简单的小型动画 如果需要在网页上使用一些大型 复杂或带有声音的动画 可借助Adobe的Flash软件来制作SWF动画 现场解答3 网页中是否可以添加声音 适当地在网页上加点音乐效果 会使网页更具吸引力 目前 网上比较流行的音频格式主要有MIDI WAV MP3与RealAudio 控制音乐的播放 1 3从功能角度分析网页 从功能的角度来看 可以将网页中的元素分为站标 导航栏 广告条 标题栏和按钮 站标 导航栏 广告条 标题栏 按钮 现场解答1 什么是站标 站标也叫LOGO 是网站的标志 其作用是使人看见它就能够联想到企业 因此 网站LOGO通常采用企业的LOGO LOGO通常采用带有企业特色和思想的图案 或是与企业相关的字符或符号及其变形 当然也有很多是图文组合 现场解答2 导航栏的类型有哪些 导航栏实际上是网站内多个页面的超链接组合 导航栏也是网站中所有重要内容的概括 可以让浏览者在最短时间内了解网站的主要内容 设计导航栏时 有几点需要注意 如果网站内容不多 并且导航栏不超过两排 可以根据网站风格尝试灵活摆放 如放在网页的左侧或者放在页面上方等 页面左侧 页面上方 如果网站的栏目很多 可以将导航栏分为多排放置在主页LOGO的右侧或下方 为便于观看 可为各排设置不同的底色 LOGO右侧 LOGO下方 如果导航栏内容较多的话 尽量使用文字超链接而不用图片 不过 如果导航栏内容不多 或者网页内容比较活泼的话 多采用图片或Flash制作导航栏 图片导航栏 Flash导航栏 广告条又称Banner 其功能是宣传网站或替其他企业做广告 以赚取广告费 现场解答3 广告条有何特点 在Banner的制作过程中有一些要点需要注意 Banner可以是静态的也可以是动态的 Banner的体积不宜过大 尽量使用GIF格式的图片与动画或Flash动画 Banner中的文字不要太多 只要达到一定的提醒效果就可以 Banner中图片的颜色不要太多 尤其是GIF格式的图片或动画 要避免出现颜色的渐变和光晕效果 网页内部各版块的标题栏是各版块内容的概括 标题栏可以是文字加单元格背景 也可以是图片 一般的大型网站都采用前者 一些内容少的小网站常采用后者 现场解答4 什么是版块标题栏 标题栏 标题栏 网页中的按钮被点击之后 网页会实现相应的操作 比如页面跳转 或数据的传输等 设计按钮时 要保证按钮与页面的协调 不能太抢眼 如果按钮上有字则尽量使用单色或渐变色背景 保证字迹清晰 当页面上有多个按钮的时候 应分清主次 根据网页的需要改变按钮的颜色或者大小 现场解答5 如何设计按钮 按钮 按钮 现场解答1 常用网站管理与网页编辑软件有哪些 1 4常用网站管理与制作软件 Dreamweaver 网页制作软件三剑客之一 该软件是现在使用最多的网页编辑工具 它支持DHTML动态网页 Flash动画 插件 能实现很多FrontPage无法实现的功能 如动态按钮 下拉菜单等 另外 它还可以用来作为动态网站的开发环境 FrontPage 该软件是目前最简单 最容易上手 且功能强大的网页制作利器 特别适合网页初学者使用 不过 Frontpage也有不少缺点 首先是兼容性不好 利用FrontPage做出来的网页往往不能用Netscape浏览器正常显示 其次 生成的垃圾代码多 此外 FrontPage对动态网页支持不好 不支持Flash 显得有点落伍了 现场解答2 网页设计辅助软件有哪些 在进行网页制作时 除了需要Dreamweaver FrontPage等软件外 还会用到Fireworks Flash Photoshop等软件 这些软件的主要功能与特点如下 Fireworks 主要用于制作网页图像 标志 GIF动画 图像按钮与导航栏等 Flash 主要用于制作矢量动画 如广告 网站片头动画 动画短片 MTV等 Photoshop Adobe公司出品的一个优秀而且强大的图形图像处理软件 起初它的应用领域主要是平面设计而不是网页设计 但是它所具有的强大功能完全涵盖了网页设计所涉及到的各种需求 除了多媒体 现场解答3 常用网站程序设计语言有哪些 如果网站中包含动态网页 除了需要学习一些常用的网页设计软件外 还应掌握一些常用的网站程序设计语言 JavaScript和VBScript脚本语言JavaCGIASPASP netPHPJSP 1 5网站建设流程 1 根据要求确定网站内容 建设网站要有目的性 首先要确定网站的性质和受众 并预期网站发布后的反响 确定了这些后就要开始组织网站的主要内容 2 规划网站栏目 确定了网站内容后 就要开始进行网站规划 例如 将网站的内容划分成哪些栏目 从而使网站既便于浏览者的浏览 也有利于网站将来的维护和更新 3 确定网页尺寸与版面布局 目前显示器最常用的分辨率是1024 768像素和800 600像素 在1024 768的分辨率下显示的页面的尺寸应该为1007 600像素 而800 600的分辨率下显示的页面尺寸为778 435像素 确定了网页尺寸后 接下来的任务就是确定网页布局类型了 网页布局类型没有确定的标准 可以根据需要制定 常见的布局有上下分割型 左右分割型和复合分割型 上下分割和左右分割结合 上下分割型 左右分割型 4 确定网站配色与风格 不同的网站有着自己不同的风格 也有着自己不同的颜色 基本上网站使用的颜色从出发点上看可以分为以下3种类型 行业风格色 许多网站使用颜色秉承着所属行业的风格 企业标准色 在现代企业中 公司的CI形象显得尤其重要 每一个公司的CI设计必然要有标准的颜色 比如Intel官方网站的主色调是一种接近于天蓝的蓝色 个人习惯色 这种配色方法的使用在很大程度上是凭设计者的个人爱好以及当时的心态决定的 在个人网站较为多见 行业风格色 著名的化妆品公司 欧泊莱中国网站使用的颜色是粉色 这几乎是所有化妆品行业中最常用到的颜色 这种颜色代表了高贵 典雅以及甜蜜等 企业标准色 在现代企业中 公司的CI形象显得尤其重要 每一个公司的CI设计必然要有标准的颜色 比如Intel官方网站的主色调是一种接近于天蓝的蓝色 个人习惯色 这种配色方法在设计的时候自由度非常高 同时所选的题材与要表现的内容也是由设计者自己决定 比如设计者喜欢绿色 那么在设计的时候就倾向于使用这种颜色 下面是一些网页配色时的小技巧 用一种色彩 这里是指先选定一种色彩 然后调整透明度或者饱和度 用两种色彩 先选定一种色彩 然后选择它的对比色 用一个色系 简单地说就是用一个感觉的色彩 例如淡蓝 淡黄 淡绿 或者土黄 土灰 土蓝 颜色不能太多 不要将所有颜色都用到 尽量控制在3 5种色彩以内 背景和前文的对比 背景和前文的对比尽量要大 尤其不要使用花纹图案作为页面背景 以便突出主要文字内容 5 收集网页所用素材 在制作网页之前 应首先收集好制作网页时要使用的素材 这些素材包括文字资料 图片 动画 声音 视频等 对于一些原始的材料还可以使用PhotoShop Fireworks Flash等软件进行处理 使其可以更好地应用于网页 6 利用软件制作网页 制作网页也就是整合网页素材 即使用Dreamweaver等软件进行网页制作 还可以根