第4章网站设计与评价课件.ppt

第4章 网站设计与评价 第一节 了解与设计网站 三、网页中包含的元素 文字（小组感想、同学佳作、网上文章等） 图片（班级成员照片、集体照等） 动画（可以表现班集体的相关作品等） 声音（背景音乐、录音等） 视频（班级文娱表演等） 超链接（相关文章、图片等链接） 四、网页制作工具 第一类是源代码型编辑工具 代表产品有HotDog、HomeSite、EditPlus等。 第二类是“所见即所得”编辑工具 代表产品有FrontPage、Dreamweaver等。 网页制作工具 网页制作工具 HTML文档本身是文本格式的文件，可由任何一种文本编辑软件如写字板、记事本和Word等进行编辑，保存后，把文件扩展名改为.htm或.html，就可用浏览器浏览到相应的网页。 HTML语言就是通过一系列特定的标签（Tag），来标识出相应的意义和作用，再通过浏览器把这些标签所代表的意义表示出来。 五、网站的规划与设计 确定网点主题 设计网站风格（标志，主色调，文字效果，版面布局） 规划网站结构 了解网站运行环境 选择网站开发工具 分配网站开发任务 六、建立站点 建立自己的主题网站，首先需要创建一个Web站点，用于保存和调试创建的网页。 新建的网站首先要保存在本地硬盘上，待整个网站建好之后再发布。 方法：执行“文件”—“新建”—“站点”，打开“新建站点对话框” 1、表格、框架布局网页 表格在网页中的作用 有条理地组织数据 控制网页布局 插入表格以及表格基本操作 “表格-插入” 可以用表格工具栏手动绘制表格。 表格、单元格的属性设置 给表格、单元格添加颜色 使用嵌套表格等 所谓框架是将一个浏览器的窗口分割成两个或两个以上的窗格，每个显示区域叫做一个框架。 每个框架可以显示一个独立的网页， 一般情况下，可以用框架来保持网页中固定的几个部分，如网页大标题、链接按钮等，剩下的框架用来展现所选择的网页内容。 框架网页的创建与其基本操作 “文件-新建-框架网页” 2、添加网页元素——编辑文字 1.菜单栏：“格式”—“字体”，打开字体对话框，如右图。 2.选中需要编辑的文字，右击，选择“字体”菜单命令，打开字体对话框，如右图。 3.“格式”工具栏 3、添加网页元素——插入图片 在网页中最常用的是GIF和JPG格式的图片，因为这两种图片的文件比较小，有利于提高网页的浏览速度。（“插入”-“图片”-“来自文件”） 4、添加网页元素——插入动画（GIF格式） 提示：在“普通”模式中插入动画之后，默认只显示动画的第一帧图像，是静止的，进入“预览”模式后，就可以看见其动态效果了。 “插入”-“图片”-“来自文件” 5、添加网页元素——插入动画（Flash） “插入”—“高级”—“插件”，打开“插件属性”对话框。 通过“数据源”中的“浏览”找到所用的Flash动画文件 6、添加网页元素——插入视频 “插入”—“图片”—“视频”，打开“视频”对话框。 7、添加网页元素——插入背景音乐 方法：在网页的空白处右击，选择“网页属性”—“常规”选项卡 —“背景音乐。 8、添加网页元素——插入表单元素（留言簿的制作） 9、建立超链接 超链接源 文本、图片（整张图片、图片热点） 超链接目标 网站内部超链接 网页文件 图片、音频、视频等多媒体文件 一些压缩文件 …… 网站外部超链接 URL（统一资源定位器）超链接 E-mail地址超链接（单击该连接向对方发送电子邮件，不需要输入对方的E-mail地址） …… 设置文本超链接的方法 1、选定要加入超链接的文本 2、按下工具栏上的“超链接”按钮???? 或者选择“插入”菜单下“超链接”???? 再或者右击所选文本， 选择“超链接”，打开“创建超链接”对话框。 3、选择或输入超链接目标 设置整张图片超链接的方法 1、选定要加入超链接的图片 2、按下工具栏上的“超链接”按钮???? 或者选择“插入”菜单下“超链接”???? 再或者右击所选图片 3、选择或输入超链接目标 设置图片热点超链接的方法 运用图片热点技术，可以使一张图片包含有好几个超链接。 方法： 1、选择图片（要打开图片工具栏） 2、将完整的图片以不同的分割工具选择一个区域，此时会自动打开 “创建超链接”对话框 3、选择或输入超链接目标 超链接的色彩 在网页中有三种不同状态的超链接（颜色不同）： 未访问过的超链接 正在访问的超链接 已经访