主题三网站设计与评价.ppt

主主题三网站三网站设计与与评价价一、基本概念一、基本概念一、基本概念一、基本概念n n网站就是因特网上具有相似性质、共同内容的一组信息资源。网站就是因特网上具有相似性质、共同内容的一组信息资源。n n网页（网页（PagePage）网页网页网页网页是用是用HTMLHTML语言写成的文件，它存放在某一台计算机中，而这台计算机必须是与因特网相连。语言写成的文件，它存放在某一台计算机中，而这台计算机必须是与因特网相连。网页文件最好以网页文件最好以英文英文英文英文命名，并通常以命名，并通常以“.htm”“.htm”或者或者“.html”“.html”为扩展名，以保证在浏览器中的正常解析。为扩展名，以保证在浏览器中的正常解析。2021/2/282构成一个网站的基本元素是各种各样的文件以及存放这些文件的文件夹。网页文件，用来描述资结构、位置，引导浏览者访问该网站，通常以“.htm”或者“.html”为扩展名。网页文件所连接到的图像、音频与视频等资源文件Web数据库和程序文件2021/2/283基本概念基本概念基本概念基本概念主页（主页（Home PageHome Page）主页主页主页主页是通常用来表示访问某个网站时出现的第一个页面，用来对整个网站进行概括性的介绍，描述其是通常用来表示访问某个网站时出现的第一个页面，用来对整个网站进行概括性的介绍，描述其他各个页面的内容的。他各个页面的内容的。主页文件常以主页文件常以indexindex或或defaultdefault命名，并通常用的扩展名有命名，并通常用的扩展名有.htm .html .jsp .asp.htm .html .jsp .asp等。等。IEIEIEIE的主页的主页的主页的主页表示表示IEIE浏览器启动时，即访问的网页地址。可以是一个网站的主页，也可以是一个普通的网浏览器启动时，即访问的网页地址。可以是一个网站的主页，也可以是一个普通的网页文件。页文件。2021/2/284基本概念基本概念基本概念基本概念n n网站的结构网站的结构 网站是由网页组成的，网站是网页的集合体，网页是网站的元素。网站是由网页组成的，网站是网页的集合体，网页是网站的元素。网站的结构网站的结构网站的结构网站的结构就是指某一网站的信息组合的基本框架，它显示该网站中各个网页之间的逻辑关系。就是指某一网站的信息组合的基本框架，它显示该网站中各个网页之间的逻辑关系。层次适当：一般以层次适当：一般以3 3到到4 4层为佳层为佳 拓展性广：能够容纳信息的多变性和扩展性拓展性广：能够容纳信息的多变性和扩展性 2021/2/285基本概念基本概念基本概念基本概念n n网站的结构主要有三种类型：网站的结构主要有三种类型：树状结构树状结构线性结构线性结构网状结构网状结构2021/2/286n n树状结构：整个网站以主页作为中心，向外分散出多个分支。树状结构：整个网站以主页作为中心，向外分散出多个分支。n n树状结构是目前网站所采用的主要形式之一，它结构清晰，访问者可以根据路径清楚的知道所在树状结构是目前网站所采用的主要形式之一，它结构清晰，访问者可以根据路径清楚的知道所在位置。但在建立枝干的层次时，最多不应超过四个。位置。但在建立枝干的层次时，最多不应超过四个。2021/2/287n n线性结构：线状结构是网站最简单的结构方式，网页一层层链接起来，逻辑清晰。线性结构：线状结构是网站最简单的结构方式，网页一层层链接起来，逻辑清晰。线性结构：线状结构是网站最简单的结构方式，网页一层层链接起来，逻辑清晰。线性结构：线状结构是网站最简单的结构方式，网页一层层链接起来，逻辑清晰。n n单向线状只提供往下一层网页的链接；单向线状只提供往下一层网页的链接；单向线状只提供往下一层网页的链接；单向线状只提供往下一层网页的链接；n n双向环状除了像单向线状那样链接外，还可以倒着从网页双向环状除了像单向线状那样链接外，还可以倒着从网页双向环状除了像单向线状那样链接外，还可以倒着从网页双向环状除了像单向线状那样链接外，还可以倒着从网页3 3回到网页回到网页回到网页回到网页2 2，从网页，从网页，从网页，从网页2 2回到网页回到网页回到网页回到网页1 1。n n无论是单向线状还是双向环状都不能在网页之间自由跳跃链接。无论是单向线状还是双向环状都不能在网页之间自由跳跃链接。无论是单向线状还是双向环状都不能在网页之间自由跳跃链接。无论是单向线状还是双向环状都不能在网页之间自由跳跃链接。2021/2/288n n网状结构：在网络结构中有一个主页，所有的网页都可以和主页进行链接，同时，各个网页之间也网状结构：在网络结构中有一个主页，所有的网页都可以和主页进行链接，同时，各个网页之间也网状结构：在网络结构中有一个主页，所有的网页都可以和主页进行链接，同时，各个网页之间也网状结构：在网络结构中有一个主页，所有的网页都可以和主页进行链接，同时，各个网页之间也随意链接。网页之间没有明显的结构，像一张网一样，可相互链接，随意跳转。随意链接。网页之间没有明显的结构，像一张网一样，可相互链接，随意跳转。随意链接。网页之间没有明显的结构，像一张网一样，可相互链接，随意跳转。随意链接。网页之间没有明显的结构，像一张网一样，可相互链接，随意跳转。n n如果网页信息内容不能科学分类，访问者容易在网页跳转过程中迷失方向，很难快速找到所需要的如果网页信息内容不能科学分类，访问者容易在网页跳转过程中迷失方向，很难快速找到所需要的如果网页信息内容不能科学分类，访问者容易在网页跳转过程中迷失方向，很难快速找到所需要的如果网页信息内容不能科学分类，访问者容易在网页跳转过程中迷失方向，很难快速找到所需要的信息。信息。信息。信息。2021/2/289二、网页制作工具二、网页制作工具二、网页制作工具二、网页制作工具n n第一类是源代码型编辑工具第一类是源代码型编辑工具 代表产品有代表产品有HotDogHotDog、HomeSiteHomeSite、EditPlusEditPlus等。等。n n第二类是第二类是“所见即所得所见即所得”编辑工具编辑工具 代表产品有代表产品有FrontPageFrontPage、DreamweaverDreamweaver等。等。2021/2/2810网页制作工具网页制作工具网页制作工具网页制作工具工具名称工具名称FrontPageFrontPageDreamweaverDreamweaver简介简介微软微软OfficeOffice组件之一，著名的组件之一，著名的“所见即所得所见即所得”的的网页编辑软件，是很好的入门级网页编辑工具网页编辑软件，是很好的入门级网页编辑工具MacromediaMacromedia公司针对专业网页设公司针对专业网页设计师特别发展的视觉化网页开发计师特别发展的视觉化网页开发工具工具优点优点功能强大，操作简单易学、灵活方便，站点管理功能强大，操作简单易学、灵活方便，站点管理功能强大功能强大对平台和浏览器的兼容性好，对对平台和浏览器的兼容性好，对动态效果的支持性好动态效果的支持性好缺点缺点兼容性不好；生成的垃圾代码多；对动态效果支兼容性不好；生成的垃圾代码多；对动态效果支持不好持不好站点管理功能弱，对中文支持不站点管理功能弱，对中文支持不好好2021/2/2811网页制作工具网页制作工具网页制作工具网页制作工具n nHTMLHTML文档本身是文本格式的文件，可由任何一种文本编辑软件如写字板、记事本和文档本身是文本格式的文件，可由任何一种文本编辑软件如写字板、记事本和WordWord等进行编辑，等进行编辑，保存后，把文件扩展名改为保存后，把文件扩展名改为.htm.htm或或.html.html，就可用浏览器浏览到相应的网页。，就可用浏览器浏览到相应的网页。n nHTMLHTML语言就是通过一系列特定的标签语言就是通过一系列特定的标签（TagTag），），来标识出相应的意义和作用，再通过浏览器把这些标来标识出相应的意义和作用，再通过浏览器把这些标签所代表的意义表示出来。签所代表的意义表示出来。2021/2/2812三、网站的规划与设计三、网站的规划与设计三、网站的规划与设计三、网站的规划与设计 确定网点主题确定网点主题 设计网站风格（标志，主色调，文字效果，版面布局）设计网站风格（标志，主色调，文字效果，版面布局）规划网站结构规划网站结构 了解网站运行环境了解网站运行环境 选择网站开发工具选择网站开发工具 分配网站开发任务分配网站开发任务 2021/2/2813四、建立站点四、建立站点四、建立站点四、建立站点n n建立自己的主题网站，首先需要创建一个建立自己的主题网站，首先需要创建一个WebWeb站点，用于保存和调试创建的网页。站点，用于保存和调试创建的网页。n n新建的网站首先要保存在本地硬盘上，待整个网站建好之后再发布。新建的网站首先要保存在本地硬盘上，待整个网站建好之后再发布。n n方法：执行方法：执行“文件文件”“”“新建新建”“”“站点站点”，打开，打开“新建站点对话框新建站点对话框”注意：不需要去注意：不需要去D盘建立盘建立“080701”文件夹。文件夹。2021/2/28141 1、表格、框架布局网页、表格、框架布局网页、表格、框架布局网页、表格、框架布局网页 n n表格在网页中的作用表格在网页中的作用 有条理地组织数据有条理地组织数据 控制网页布局控制网页布局控制网页布局控制网页布局n n插入表格以及表格基本操作插入表格以及表格基本操作 “表格表格表格表格-插入插入插入插入”可以用表格工具栏手动绘制表格。可以用表格工具栏手动绘制表格。表格、单元格的属性设置表格、单元格的属性设置 给表格、单元格添加颜色给表格、单元格添加颜色 使用嵌套表格等使用嵌套表格等2021/2/2815n n所谓框架是将一个浏览器的窗口分割成两个或两个以上的窗格，每个显示区域叫做一个框架。所谓框架是将一个浏览器的窗口分割成两个或两个以上的窗格，每个显示区域叫做一个框架。n n每个框架可以显示一个独立的网页，每个框架可以显示一个独立的网页，n n一般情况下，可以用框架来保持网页中固定的几个部分，如网页大标题、链接按钮等，剩下的框架用一般情况下，可以用框架来保持网页中固定的几个部分，如网页大标题、链接按钮等，剩下的框架用来展现所选择的网页内容。来展现所选择的网页内容。n n框架网页的创建与其基本操作框架网页的创建与其基本操作 “文件文件文件文件-新建新建新建新建-框架网页框架网页框架网页框架网页”2021/2/28162 2、添加网页元素、添加网页元素、添加网页元素、添加网页元素编辑文字编辑文字编辑文字编辑文字n n1.1.菜单栏：菜单栏：“格式格式”“”“字体字体”，打开字体对话框，如右图。，打开字体对话框，如右图。n n2.2.选中需要编辑的文字，右击，选择选中需要编辑的文字，右击，选择“字体字体”菜单命令，打开菜单命令，打开字体对话框，如右图。字体对话框，如右图。n n3.“3.“格式格式”工具栏工具栏2021/2/28173 3、添加网页元素、添加网页元素、添加网页元素、添加网页元素插入图片插入图片插入图片插入图片n n在网页中最常用的是在网页中最常用的是GIFGIF和和JPGJPG格式的图片，因为这格式的图片，因为这两种图片的文件比较小，有利于提高网页的浏览速两种图片的文件比较小，有利于提高网页的浏览速度度。（。（“插入插入”-“”-“图片图片”-“”-“来自文件来自文件”）插入其他格式的图片后，在进插入其他格式的图片后，在进行页面存储时，系统会自动将行页面存储时，系统会自动将图片格式转换成图片格式转换成GIF或或JPF格式。格式。注意注意“图片图片”工具条的使用工具条的使用2021/2/28184 4、添加网页元素、添加网页元素、添加网页元素、添加网页元素插入动画（插入动画（插入动画（插入动画（GIFGIF格式）格式）格式）格式）n n提示：在提示：在“普通普通”模式中插入动画之后，默认只显模式中插入动画之后，默认只显示动画的第一帧图像，是静止的，进入示动画的第一帧图像，是静止的，进入“预览预览”模模式后，就可以看见其动态效果了。式后，就可以看见其动态效果了。n n“插入插入”-“”-“图片图片”-“”-“来自文件来自文件”2021/2/28195 5、添加网页元素、添加网页元素、添加网页元素、添加网页元素插入动画（插入动画（插入动画（插入动画（FlashFlash）n n“插入插入”“”“高级高级”“”“插件插件”，打开，打开“插件属性插件属性”对话框。对话框。n n通过通过“数据源数据源”中的中的“浏览浏览”找到所用的找到所用的FlashFlash动画文动画文件件2021/2/28206 6、添加网页元素、添加网页元素、添加网页元素、添加网页元素插入视频插入视频插入视频插入视频n n“插入插入”“”“图片图片”“”“视频视频”，打开，打开“视频视频”对话框。对话框。右击视频，选择右击视频，选择“图片属性图片属性”命令，并切换到命令，并切换到“视频视频”选项卡，可以对视频做进一步的设置。选项卡，可以对视频做进一步的设置。支持的视频格式：支持的视频格式：.avi.avi.asf.asf.ram.ram.ra.ra2021/2/28217 7、添加网页元素、添加网页元素、添加网页元素、添加网页元素插入背景音乐插入背景音乐插入背景音乐插入背景音乐n n方法：在网页的空白处右击，选择方法：在网页的空白处右击，选择“网页属性网页属性”“”“常规常规”选项卡选项卡 “背景音乐。背景音乐。2021/2/28228 8、添加网页元素、添加网页元素、添加网页元素、添加网页元素插入表单元素（留言簿的制作）插入表单元素（留言簿的制作）插入表单元素（留言簿的制作）插入表单元素（留言簿的制作）双击表单元素或右击选择双击表单元素或右击选择“表单元素表单元素”进行属性设置。进行属性设置。选项按钮单行文本框复选框下拉框多行文本框2021/2/28239 9、建立超链接、建立超链接、建立超链接、建立超链接n n超链接源超链接源n n文本、图片（整张图片、图片热点）文本、图片（整张图片、图片热点）n n超链接目标超链接目标n n网站内部超链接网站内部超链接 网页文件网页文件 图片、音频、视频等多媒体文件图片、音频、视频等多媒体文件 一些压缩文件一些压缩文件 n n网站外部超链接网站外部超链接URLURL（统一资源定位器）超链接（统一资源定位器）超链接E-mailE-mail地址超链接（单击该连接向对方发送电子邮件，不需要输入对方的地址超链接（单击该连接向对方发送电子邮件，不需要输入对方的E-mailE-mail地址）地址）2021/2/2824设置文本超链接的方法设置文本超链接的方法设置文本超链接的方法设置文本超链接的方法1 1、选定要加入超链接的文本、选定要加入超链接的文本2 2、按下工具栏上的、按下工具栏上的“超链接超链接”按钮按钮 或者选择或者选择“插入插入”菜单下菜单下“超链接超链接”再或者右击所选文本，再或者右击所选文本，选择选择“超链接超链接”，打开，打开“创建超链接创建超链接”对话框。对话框。3 3、选择或输入超链接目标、选择或输入超链接目标超链接目标地址2021/2/2825设置整张图片超链接的方法设置整张图片超链接的方法设置整张图片超链接的方法设置整张图片超链接的方法 1 1、选定要加入超链接的图片、选定要加入超链接的图片 2 2、按下工具栏上的、按下工具栏上的“超链接超链接”按钮按钮 或者选择或者选择“插入插入”菜单下菜单下“超链接超链接”再或者右击所选图片再或者右击所选图片3 3、选择或输入超链接目标、选择或输入超链接目标2021/2/2826设置图片热点超链接的方法设置图片热点超链接的方法设置图片热点超链接的方法设置图片热点超链接的方法 n n运用图片热点技术，可以使一张图片包含有好几个超链接。运用图片热点技术，可以使一张图片包含有好几个超链接。方法：方法：1 1、选择图片（要打开图片工具栏）、选择图片（要打开图片工具栏）2 2、将完整的图片以不同的分割工具选择一个区域，此时会自动打开、将完整的图片以不同的分割工具选择一个区域，此时会自动打开“创建超链接创建超链接”对话框对话框 3 3、选择或输入超链接目标、选择或输入超链接目标热点最大的用途是在菜单栏热点最大的用途是在菜单栏和地图中使用和地图中使用2021/2/2827超链接的色彩超链接的色彩超链接的色彩超链接的色彩n n在网页中有三种不同状态的超链接（颜色不在网页中有三种不同状态的超链接（颜色不同）：同）：n n未访问过的超链接未访问过的超链接n n正在访问的超链接正在访问的超链接n n已经访问过的超链接已经访问过的超链接n n设置方法：设置方法：在在“网页属性网页属性”的的“背景背景”选项卡中进行设置。选项卡中进行设置。2021/2/28281010、书签、书签、书签、书签n n1 1、先定义书签、先定义书签 “插入插入”-“”-“书签书签”-“”-“书签书签”对话框对话框-输入书签名称输入书签名称 （所选文字有虚下划线或前面有一面小旗）（所选文字有虚下划线或前面有一面小旗）（所选文字有虚下划线或前面有一面小旗）（所选文字有虚下划线或前面有一面小旗）n n2 2、后使用书签、后使用书签 （定义一个链接到书签上的超链接）（定义一个链接到书签上的超链接）（定义一个链接到书签上的超链接）（定义一个链接到书签上的超链接）n n注意：注意：注意：注意：1 1、2 2 两步骤不能巅倒两步骤不能巅倒选择已经定义的书签名称2021/2/28291111、保存及预览网页文件、保存及预览网页文件、保存及预览网页文件、保存及预览网页文件n n保存文件时，文件以英文命名。（保存文件时，文件以英文命名。（WindowsWindows网络操作系统对英文大小写不敏感。）网络操作系统对英文大小写不敏感。）n n保存主页时，通常以保存主页时，通常以“Index.html”“Index.html”命名。命名。n n在保存文件过程中，将网页所使用到的图片文件，存于在保存文件过程中，将网页所使用到的图片文件，存于“images”“images”文件夹中。文件夹中。n n文件保存后，单击网页编辑窗口下方的文件保存后，单击网页编辑窗口下方的“预览预览”标签，观察效果。标签，观察效果。2021/2/2830五、网站的发布前的检查五、网站的发布前的检查五、网站的发布前的检查五、网站的发布前的检查1 1、网页中的内容的检查：、网页中的内容的检查：拼写错误、内容与栏目的一致性等拼写错误、内容与栏目的一致性等2 2、网站中页面链接状态检查：、网站中页面链接状态检查：要保证每一个网页有入口，有出口要保证每一个网页有入口，有出口要保证每一个网页有入口，有出口要保证每一个网页有入口，有出口 （可结合（可结合“报表与超链接报表与超链接”视图检查）视图检查）3 3、网站中所用到的多媒体元素检查：、网站中所用到的多媒体元素检查：格式恰当、大小合适格式恰当、大小合适4 4、外观测试、外观测试 版面布局、文字效果、动态效果等版面布局、文字效果、动态效果等 要在不同的浏览器中进行测试要在不同的浏览器中进行测试要在不同的浏览器中进行测试要在不同的浏览器中进行测试2021/2/2831六、网站的发布六、网站的发布六、网站的发布六、网站的发布1 1、局域网内本机发布、局域网内本机发布（1 11 1）利用）利用IISIISIISIIS（因特网信息服务器）在局域网内可实现网站的发布。（因特网信息服务器）在局域网内可实现网站的发布。发布为默认发布为默认WEBWEB站点，在本机可通过站点，在本机可通过 或或 访问。访问。其他用户通过其他用户通过IPIP地址直接访问网站。地址直接访问网站。2021/2/2832确定IP地址及端口号（一般采用如图设置）2021/2/2833确定网站所在的文件夹位置（一般采用英文命名）2021/2/2834确定网站主页文件名，并将其升到顶端2021/2/2835网站的发布网站的发布1 1、局域网内本机发布、局域网内本机发布（1 12 2）利用）利用IISIIS的虚拟目录在局域网内可实现一个的虚拟目录在局域网内可实现一个IPIP地址发布多个网站。地址发布多个网站。用户通过用户通过“IP“IP地址地址/（虚拟目录）别名（虚拟目录）别名”访问网站。访问网站。2021/2/28362021/2/28372021/2/28382021/2/28392021/2/28402021/2/2841网站的发布网站的发布2 2、在因特网上发布、在因特网上发布 使用因特网上的使用因特网上的WEBWEB服务器，选择合适的网站空间，实现网站在因特网上发布。服务器，选择合适的网站空间，实现网站在因特网上发布。购买自己的服务器（自管、托管）购买自己的服务器（自管、托管）租用专用服务器租用专用服务器租用虚拟主机租用虚拟主机 （以上三种需向（以上三种需向（以上三种需向（以上三种需向ISPISPISPISP申请申请申请申请IPIPIPIP，向，向，向，向CNNICCNNICCNNICCNNIC注册域名）注册域名）注册域名）注册域名）申请个人主页空间（免费、收费）申请个人主页空间（免费、收费）2021/2/2842网站的维护与管理网站的维护与管理1 1、上传网页文件：、上传网页文件：一般使用一般使用FTPFTP方式方式2 2、定期维护：、定期维护：网页维护、网页更新、网站升级网页维护、网页更新、网站升级网页维护、网页更新、网站升级网页维护、网页更新、网站升级3 3、宣传网站：、宣传网站：到搜索引擎上注册、与别人交换友情链接、通过到搜索引擎上注册、与别人交换友情链接、通过BBSBBS宣传等宣传等2021/2/2843