《苏教版八年级信息技术上册10.3《网站设计与评价》教学课件》由会员分享，可在线阅读，更多相关《苏教版八年级信息技术上册10.3《网站设计与评价》教学课件（44页珍藏版）》请在金锄头文库上搜索。
1、网站设计与评价,一、基本概念,网站就是因特网上具有相似性质、共同内容的一组信息资源。 网页（Page） 网页是用HTML语言写成的文件，它存放在某一台计算机中，而这台计算机必须是与因特网相连。 网页文件最好以英文命名，并通常以“.htm”或者“.html”为扩展名，以保证在浏览器中的正常解析。,构成一个网站的基本元素是各种各样的文件以及存 放这些文件的文件夹。,网页文件，用来描述资结构、位置，引导浏览者访问该网站，通常以“.htm”或者“.html”为扩展名。,网页文件所连接到的图像、音频与视频等资源文件,Web数据库和程序文件,基本概念,主页（Home Page） 主页是通常用来表示访问某个
2、网站时出现的第一个页面，用来对整个网站进行概括性的介绍，描述其他各个页面的内容的。 主页文件常以index或default命名，并通常用的扩展名有.htm .html .jsp .asp等。 IE的主页表示IE浏览器启动时，即访问的网页地址。可以是一个网站的主页，也可以是一个普通的网页文件。,基本概念,网站的结构 网站是由网页组成的，网站是网页的集合体，网页是网站的元素。 网站的结构就是指某一网站的信息组合的基本框架，它显示该网站中各个网页之间的逻辑关系。 层次适当：一般以3到4层为佳 拓展性广：能够容纳信息的多变性和扩展性,基本概念,网站的结构主要有三种类型：,树状结构,线性结构,网状结构,
3、树状结构：整个网站以主页作为中心，向外分散出多个分支。 树状结构是目前网站所采用的主要形式之一，它结构清晰，访问者可以根据路径清楚的知道所在位置。但在建立枝干的层次时，最多不应超过四个。,线性结构：线状结构是网站最简单的结构方式，网页一层层链接起来，逻辑清晰。 单向线状只提供往下一层网页的链接； 双向环状除了像单向线状那样链接外，还可以倒着从网页3回到网页2，从网页2回到网页1。 无论是单向线状还是双向环状都不能在网页之间自由跳跃链接。,网状结构：在网络结构中有一个主页，所有的网页都可以和主页进行链接，同时，各个网页之间也随意链接。网页之间没有明显的结构，像一张网一样，可相互链接，随意跳转。
4、如果网页信息内容不能科学分类，访问者容易在网页跳转过程中迷失方向，很难快速找到所需要的信息。,二、网页制作工具,第一类是源代码型编辑工具 代表产品有HotDog、HomeSite、EditPlus等。 第二类是“所见即所得”编辑工具 代表产品有FrontPage、Dreamweaver等。,网页制作工具,网页制作工具,HTML文档本身是文本格式的文件，可由任何一种文本编辑软件如写字板、记事本和Word等进行编辑，保存后，把文件扩展名改为.htm或.html，就可用浏览器浏览到相应的网页。 HTML语言就是通过一系列特定的标签（Tag），来标识出相应的意义和作用，再通过浏览器把这些标签所代表的意
5、义表示出来。,三、网站的规划与设计,确定网点主题 设计网站风格（标志，主色调，文字效果，版面布局） 规划网站结构 了解网站运行环境 选择网站开发工具 分配网站开发任务,四、建立站点,建立自己的主题网站，首先需要创建一个Web站点，用于保存和调试创建的网页。 新建的网站首先要保存在本地硬盘上，待整个网站建好之后再发布。 方法：执行“文件”“新建”“站点”，打开“新建站点对话框”,注意：不需要去D盘建立“080701”文件夹。,1、表格、框架布局网页,表格在网页中的作用 有条理地组织数据 控制网页布局 插入表格以及表格基本操作 “表格-插入” 可以用表格工具栏手动绘制表格。 表格、单元格的属性设置
6、 给表格、单元格添加颜色 使用嵌套表格等,所谓框架是将一个浏览器的窗口分割成两个或两个以上的窗格，每个显示区域叫做一个框架。 每个框架可以显示一个独立的网页， 一般情况下，可以用框架来保持网页中固定的几个部分，如网页大标题、链接按钮等，剩下的框架用来展现所选择的网页内容。 框架网页的创建与其基本操作 “文件-新建-框架网页”,2、添加网页元素编辑文字,1.菜单栏：“格式”“字体”，打开字体对话框，如右图。 2.选中需要编辑的文字，右击，选择“字体”菜单命令，打开字体对话框，如右图。 3.“格式”工具栏,3、添加网页元素插入图片,在网页中最常用的是GIF和JPG格式的图片，因为这两种图片的文件比
7、较小，有利于提高网页的浏览速度。（“插入”-“图片”-“来自文件”）,插入其他格式的图片后，在进行页面存储时，系统会自动将图片格式转换成GIF或JPF格式。,注意“图片”工具条的使用,4、添加网页元素插入动画（GIF格式）,提示：在“普通”模式中插入动画之后，默认只显示动画的第一帧图像，是静止的，进入“预览”模式后，就可以看见其动态效果了。 “插入”-“图片”-“来自文件”,5、添加网页元素插入动画（Flash）,“插入”“高级”“插件”，打开“插件属性”对话框。 通过“数据源”中的“浏览”找到所用的Flash动画文件,6、添加网页元素插入视频,“插入”“图片”“视频”，打开“视频”对话框。,
8、右击视频，选择“图片属性”命令，并切换到“视频”选项卡，可以对视频做进一步的设置。,支持的视频格式： .avi .asf .ram .ra,7、添加网页元素插入背景音乐,方法：在网页的空白处右击，选择“网页属性”“常规”选项卡 “背景音乐。,8、添加网页元素插入表单元素（留言簿的制作）,双击表单元素或右击选择“表单元素”进行属性设置。,选项按钮,单行文本框,复选框,下拉框,多行文本框,9、建立超链接,超链接源 文本、图片（整张图片、图片热点） 超链接目标 网站内部超链接 网页文件 图片、音频、视频等多媒体文件 一些压缩文件 网站外部超链接 URL（统一资源定位器）超链接 E-mail地址超链接
9、（单击该连接向对方发送电子邮件，不需要输入对方的E-mail地址） ,设置文本超链接的方法,1、选定要加入超链接的文本 2、按下工具栏上的“超链接”按钮 或者选择“插入”菜单下“超链接” 再或者右击所选文本， 选择“超链接”，打开“创建超链接”对话框。 3、选择或输入超链接目标,超链接目标地址,设置整张图片超链接的方法,1、选定要加入超链接的图片 2、按下工具栏上的“超链接”按钮 或者选择“插入”菜单下“超链接” 再或者右击所选图片 3、选择或输入超链接目标,设置图片热点超链接的方法,运用图片热点技术，可以使一张图片包含有好几个超链接。 方法： 1、选择图片（要打开图片工具栏） 2、将完整的图
10、片以不同的分割工具选择一个区域，此时会自动打开 “创建超链接”对话框 3、选择或输入超链接目标,设置图片热点超链接的方法,热点最大的用途是在菜单栏 和地图中使用,超链接的色彩,在网页中有三种不同状态的超链接（颜色不同）： 未访问过的超链接 正在访问的超链接 已经访问过的超链接 设置方法： 在“网页属性”的“背景”选项卡中进行设置。,10、书签,1、先定义书签 “插入”-“书签”-“书签”对话框-输入书签名称 （所选文字有虚下划线或前面有一面小旗） 2、后使用书签 （定义一个链接到书签上的超链接） 注意：1、2 两步骤不能巅倒,选择已经定义的书签名称,11、保存及预览网页文件,保存文件时，文件以
11、英文命名。（Windows网络操作系统对英文大小写不敏感。） 保存主页时，通常以“Index.html”命名。 在保存文件过程中，将网页所使用到的图片文件，存于“images”文件夹中。 文件保存后，单击网页编辑窗口下方的“预览”标签，观察效果。,五、网站的发布前的检查,1、网页中的内容的检查： 拼写错误、内容与栏目的一致性等 2、网站中页面链接状态检查： 要保证每一个网页有入口，有出口 （可结合“报表与超链接”视图检查） 3、网站中所用到的多媒体元素检查： 格式恰当、大小合适 4、外观测试 版面布局、文字效果、动态效果等 要在不同的浏览器中进行测试,六、网站的发布,1、局域网内本机发布 （1
12、1）利用IIS（因特网信息服务器）在局域网内可实现网站的发布。 发布为默认WEB站点，在本机可通过 http:/127.0.0.1访问。 其他用户通过IP地址直接访问网站。,确定IP地址及端口号 （一般采用如图设置）,确定网站所在的文件夹位置 （一般采用英文命名）,确定网站主页文件名，并将其升到顶端,网站的发布,1、局域网内本机发布 （12）利用IIS的虚拟目录在局域网内可实现一个IP地址发布多个网站。 用户通过“IP地址/（虚拟目录）别名”访问网站。,网站的发布,2、在因特网上发布 使用因特网上的WEB服务器，选择合适的网站空间，实现网站在因特网上发布。 购买自己的服务器（自管、托管） 租用专用服务器 租用虚拟主机 （以上三种需向ISP申请IP，向CNNIC注册域名） 申请个人主页空间（免费、收费）,网站的维护与管理,1、上传网页文件： 一般使用FTP方式 2、定期维护： 网页维护、网页更新、网站升级 3、宣传网站： 到搜索引擎上注册、与别人交换友情链接、通过BBS宣传等,
