第八章网站建设ppt课件.ppt

第八章网站建设 教育技术与信息中心 站点的风格与分类 使用同样的软件 但是设计出的网站风格和形态上的区别都很大 主要是设计者对网站的规划 风格和概念的理解不同软件只是工具 良好的设计概念才是网络制作的核心 站点的风格与分类 除了创意外 在网站设计时还需要考虑 网页内容便于阅读 站点内容要精 专和及时更新 注重色彩搭配 考虑带宽 适当考虑不同浏览器 不同分辨率的情况 要提供交互性 简单即为美 页面风格网站所使用的主题图形 基本结构布局 色调和文字的样式等等都包含在网站风格的概念中 网页风格的概念 整个网站所采用的结构布局 色调 文字 标志和图案等要素给访问者关于该网站的印象 站点的风格与分类 在访问者浏览一个网站时 虽然觉得这个网站的图形 文字并没有什么特别优秀的地方 然而这个网站却会使浏览者感到特别 这种特别让浏览者可以识别它 只要看到它就可以知道这个网站的相关内容 这里正是 特别 的印象在起作用 整个网页设计的生命在于 创意 而创意的实质就是要把网站建设得具有自己独特的风格 让人一眼就能识别 站点的风格与分类 如何树立风格第一确信风格建立在有价值内容上第二明确网站风格搞清楚你的网站给人的印象是什么 有创意 信息最快 交流方便等等第三建立和加强风格 站点的风格与分类 常见术语解析网站的定义在网上看到的一个个网页页面的集合就是网站 网站可以包含多个页面 也可以只有一个页面 网站的分类门户网站职能网站专业网站个人网站 站点的风格与分类 门户网站这是一种涉及领域最广的网站 它包括了很多的功能及页面 涉及到人们生活的方方面面 目前在国内比较有影响力的大型门户网站有 雅虎中国 新浪 搜狐 网易 站点的风格与分类 职能网站这是一类具有专门功能的网站 如政府部门的网站 商务网站等 电子商务网站在国内很多 其中比较出名的有 阿里巴巴 卓越网 易趣网 淘宝网 站点的风格与分类 淘宝网 广东人民政府网 专业网站专业网站的专业性非常强 它一般只涉及生活中的某一领域 但内容却十分专业广博 一般为一些专业人士提供服务 比较有代表性的有 中央电视台CCTV 网页制作大宝库 黄金书屋 站点的风格与分类 个人网站个人网站一般是个人为了兴趣爱好或为了展示自己等目的而建设的站点 站点的风格与分类 网站的层次按网页在网站中所处位置不同 网页可分为主页 如图1 3所示 和内页 如图1 4所示 打开一个网站时看到的第一个页面就是主页 也称为首页 主页文件的名称一般为index htm或index html 与主页相链接的其他各个页面就称之为内页 下页 站点的层次 图1 3图1 4 网站层次网站的层次是指主页面 首页和一级页面 和二级页面 三级页面之间的结构关系 任何一个网站都可以用三级结构实现 也就是 首页 栏目页 文章页或一级页面 二级页面 三级页面制作好这三级结构 就能制作好其他类型的结构 这种任何网站都是适用的 站点的层次 层状结构 站点的层次 线性结构 站点的层次 主页 页面1 页面2 页面3 页面4 页面5 页面7 页面8 一级标题 二级标题 图1 10Web结构 页面6 Web结构 站点的层次 网站层次首页的设计制作首页的设计是一个网站成功与否的关键 人们往往看到第一页就已经对你的站点有一个整体的感觉 因此首页的设计和制作是绝对要重视和花心思的 站点的层次 网站的首页要体现整个网站的设计概念 从标志 色彩 图片都能体现 还要有明确的导航 告诉浏览者你这个网站有什么样的内容 网站层次二级页面是每个栏目的起始页 该页面应该有栏目的主题图形 相对于整个网站的主题图形来说 标志要小但必须醒目 当用户进入该页面之后 需要设置通向其他栏目的链接和返回首页上要有明确的指示 站点的整体风格与层次 二级页面文字较多 标志较小 还要有设置通向其他栏目的导航和返回首页的超链接 网站层次三级页面是文章页 位于最底层 当浏览者进入栏目之后见到的超级链接 就是通向大篇幅文章的文章页面 由于文章页面本身包含有大量文字 图片 所以不用再加入太多的主题图形 文章的标题也不用做成各种各样的美术字 特效字 这样会增加服务器的负担 站点的整体风格与层次 第三级页面主要是文章的内容 和其他一些与该文章相关的文章链接 网站层次三级结构是一种典型的结构 但不是唯一的结构 显示当日新闻的弹出式活动面板 用于对访问者进行调查的调查问卷 当访问者离开站点时的道别画面 这些都不属于典型页面 站点的层次 文章和栏目同一个页面显示 采用框架结构的网页多采用这种网页层次结构 文件夹 制作一个网页 我们通常需要把文件 图片等资料放在不同的文件夹里 如图所示 网站网页的上传和维护 建立本地站点 1 在 文件 面板中的第一个下拉列表框中单击 管理站点 列表项目 或者从 站点 菜单栏调出 管理站点 对话框 如图2 2 3所示 单击该对话框中的 新建 按钮 调出它的 新建 快捷菜单 如图2 2 4所示 图2 2 4 新建 快捷菜单 图2 2 3 管理站点 对话框 2 单击 新建 快捷菜单中的 站点 命令 可调出 站点定义为 基本 对话框 如图2 2 5所示 在文本框内输入站点的名称 如 我的站点 再单击 下一步 按钮 站点定义为 基本 对话框变为如图2 2 6所示的内容 图2 2 5 站点定义为 基本 对话框一图2 2 6 站点定义为 基本 对话框二 3 如果要使用服务器技术 如ASP NET等 可单击选中第二个单选项 然后从它下面的下拉列表框 选中第二个单选项后才会出现 中选择要使用的服务器技术名称 否则单击选中第一个单选项 此处单击选中第一个单选项 4 单击 下一步 按钮 站点定义为 基本 对话框如图2 2 7所示 如果在本地编辑网页 编辑好后再上传到服务器 可单击选中第一个单选项 通常选中该单选项 选中第二单选项 可以直接对服务器上的文件进行编辑 单击按钮 可调出一个对话框 用来选择一个文件夹作为站点的根目录 要求该文件夹必须在此之前已经建立 此处选择第一个单选项 选择的文件夹路径为 F WEB1 5 单击 下一步 按钮 站点定义为 基本 对话框变为如图2 2 8所示 在第一个列表框中选择 无 选项 直接将 F WEB1 文件夹作为本地站点文件夹 6 单击 下一步 按钮 调出 站点定义为 基本 对话框中新的内容 此时对话框中将显示出 站点 设置的基本设置信息 最后单击 完成 按钮 此时 文件 面板如图2 2 9所示 还设有GIF文件夹 在第一个下拉列表框中将显示出 我的站点 列表项目 图2 2 7 站点定义为 基本 对话框三图2 2 8 站点定义为 基本 对话框四 7 如果要重新进行站点设置 可单击 站点 管理站点 命令 重新调出 管理站点 对话框 单击选中站点名称 再单击 编辑 按钮即可 图2 2 9 文件 面板 网站网页的上传和维护 测试站点当网站建立完成后 需要在发布站点前对站点进行测试 根据网站项目的大小 客户端要求以及访问者将会使用的浏览器种类等要求进行测试 一般将站点移到一个模拟调试Web服务器上对站点进行测试和编辑 网站测试包括多种浏览器间的兼容性 对于不同访问者是否显示正常 Script脚本程序是否工作正常等多个方面 在站点建设过程中 最好不断地对站点进行测试并解决出现的问题 以便尽早发现问题 避免相同问题重复出现 使网页更加成熟完美 发布将制作好的网页上传到网上的过程即是发布 也称为上传或上载 要将网页发布到Internet 首先要申请一个主页空间 用于指定网站或主页在Internet上的放置位置 然后才可以上传网页 以后就只需进行网页的管理和维护就可以了 网站网页的上传和维护 网页空间的申请1 租用专线可以向ISP Internet服务提供者 租用专线 让计算机24小时上网假设Web服务器 这样 就可以像网易 搜狐等网站一样 保持24小时全向世界开放 需架设服务器 费用比较高 网站网页的上传和维护 网页空间的申请2 租用网页空间或虚拟主机ISP还会提供网页空间或虚拟主机的出租服务 而且价格相对来说更容易接受 有关网页空间或虚拟主机出租的价格 申请程序 上传方式 网页空间大小是否满足要求 可以到准备去租用的ISP处查询 网站网页的上传和维护 网页空间的申请3 申请免费网页空间有不少网站提供免费的网页空间服务如 网易 东方网景 新润讯 网站网页的上传和维护 为网站注册域名目前 可以通过 中国互联网络信息中心 CNNIC 的域名注册系统申请诸如 com net等域名 详细的申请程序及缴费方式可以到CNNIC网站查询 地址 http 也可以到等网站申请域名 网站网页的上传和维护 发布站点一般使用FTP 远程文件传输 软件将网页上传到服务器中申请的网址目录下 也可直接用Frontpage或Dreamweaver中的发布站点命令进行上传 还可直接在IE浏览器中使用FTP协议进行上传 下载 对于大型网站的上传一般都使用专门的FTP软件 使用这种方法的上传 下载速度较快 网站网页的上传和维护 上传工具简介上传是把计算机里的数据通过FTP文件传输协议送到网络上的某台服务器上去 FTP是一种网络文件传输协议 不仅可以从网络上下载文件 也可以把文件从自己的计算机传送到网络上去 从网络上下载 上传软件和文件 就是利用FTP文件传输协议来实现的 上传和下载一样 也是FTP的功能之一 常用FTP软件 CuteFTP WS FlashFxp 网站网页的上传和维护 网页的测试测试的目的就是为了找错 在尽可能短的时间里 发现尽可能多的问题 然后解决问题 是网站正常运行 1 网页测试发布测试过程中注意几点 1 尽量使用多几种不同的Web浏览器进行网页测试 最典型的是IE和Netscape 至少保证网页中这两种浏览器中都能正常运行 2 尽量不要使用最新版本的浏览器测试网页 使用比较常用的浏览器版本 3 尽量在多种操作系统中测试网页 网站网页的上传和维护 网页的测试测试的过程也是对网页的修改过程 测试同时要根据结果进行相应的修改 使网页达到最优质的页面效果和最快的响应速度 测试的项目链接测试链接地址有没有错误 有没有空连接 出现该现象原因一般有两种情况 1 文件名不正确大小写不匹配 用了全角输入方式等等 2 文件路径不对如果所引用的文件不再当前文件夹 就要使用绝对路径 如果在当前文件夹 可以使用相对路径 路径处理不好 会出现链接错误 网站网页的上传和维护 外观的测试外观的测试主要看网页中浏览器中是否按预想的排版布局在页面中显示 因为 1 在网页制作工具里显示的效果和浏览器到效果会有一定出入 2 不同的浏览器对同一页面显示的效果会不同 3 不同的操作系统对同一页面显示的效果也不尽相同 主要体现在 字体的大小不一样 表格的间距不一 会变形 表单的外观效果会不一样 网站网页的上传和维护 页面下载速度的测试页面的下载速度和页面内容和服务器设置有关 比如太大的图片会影响速度 嵌套表格太多会影响速度 在测试阶段 尽量在不同的机器上访问 看能否在一个可以接受的时间内完成页面的下载和显示 速度越快越好 网站网页的上传和维护 脚本和程序测试测试网页中的JavaScript以及CGI程序能否正常工作 如果出现错误 就要根据浏览器的错误响应结果来获得错误原因的信息 再去查找原因 修复错误 网站网页的上传和维护 站点更新和维护在这个阶段 网站已经正式发布 整个网站已进入正常运行阶段 这时的主要任务是不断地更新陈旧的网页信息 及时对访问者的留言和反馈信息进行响应 及时加入一些新的信息 同时 要不断采用新技术升级网页 使网页的访问更为方便快捷 信息含量更加丰富 界面更加美观 网站网页的上传和维护 时时更新Internet上不断有新的事物出现 每天都有新花样出炉 如果网站中的