网页及网页设计的基本方法.pptVIP

示例中的HTML标记的含义 标记名称 说 明 html…/html 标识HTML文档的开始和结束。 head…/head 标识HTML文档头的开始和结束。 title…/title 网页标题标记，作用是将开始和结束标记之间的文本放在浏览器的标题栏中。 body…/body 标识HTML文档主体的开始和结束。 h3…/h3 标题标记，作用是将开始和结束标记之间的文本按照指定的标题格式显示。 p…/p 分段标记，作用是将开始和结束标记之间的文本形成一个独立的段落。 hr 水平线标记，作用是在当前位置插入一条水平线。水平线的特征是：水平居中，宽度为160像素，红色。 br 换行标记，作用是在当前位置插入一个换行符，使标记后的文本在下一行的开始位置显示。 center…/center 水平居中标记，作用是将开始和结束标记之间的文本在浏览器窗口中，以水平居中的方式显示。 * 广东金融学院 * HTML文档的结构 * 广东金融学院 * 记事本和浏览器在显示网页文件的差异 记事本原封不动的显示文件中的文本。 浏览器需要解析文件中的HTML标记，并按照标记的要求将有关内容在浏览器中以一定的格式显示出来。 * 广东金融学院 * 包含HTML标记的文本 解析标记 由上例引出的思考 1）用记事本制作网页，不能达到“所见即所得的效果” 2）需要记住大量标记的用法 3）网页制作效率太差，无法满足当前网页快速更新的需要 4）对于内容丰富、格式多样的复杂网页，仍然采用记事本程序是不现实的 5）有没有更高效的网页制作方法？ * 广东金融学院 * 当前制作网页的主要工具及特点 * 广东金融学院 * Microsoft Word 1 Microsoft FrontPage 2 Macromedia Dreamweaver 8 3 3．一种高效的网页制作工具 运用Dreamweaver 8代替记事本制作网页“MyFirstWebPage.html” * 广东金融学院 * * 广东金融学院 * Dreamweaver 8 记事本 PK 4．课堂讨论 总结 1) 异同点 相同点： 操作思路类似，它们是经历“新建”→“编辑”→“保存”这一过程。 不同点： ① 编辑对象上的差异：记事本直接编辑标记，并通过标记控制文本格式； ② Dreamweaver 8只编辑文本，不需要对标记进行编辑，格式使用可视化方式完成。 * 广东金融学院 * 总结 2) 优缺点 ① Dreamweaver 8的优点：方便、快捷、可视化格式编辑、“所见即所得”效果等。 ② 记事本的缺点：格式编辑繁锁、效率差、没有“所见即所得”的排版效果等。 * 广东金融学院 * 4．介绍Dreamweaver 8的界面 * 广东金融学院 * 标题栏 菜单栏 插入工具栏 文档工具栏 文档窗口 状态栏 属性面板 面板组 面板开关 文件面板 “文件”面板的外观 * 广东金融学院 * 面板标题 控制菜单 4．网页文件的基本操作 一个例子——“我的个人简历” * 广东金融学院 * 4．网页文件的基本操作 本例相关说明 1) 网页设计的基本步骤，如新建、打开、编辑、保存和预览等； 2) 网页的基本编辑操作，如文字录入、页面属性设置、格式化等； 3) 强调网页编辑操作的重要性。 * 广东金融学院 * 5．总结并布置作业 总结 1) 网页的基本概念：网页、浏览器和Web服务器；HTML和网页；浏览器和网页的关系。 2) 使用Dreamweaver 8制作网页的基本步骤和方法。 * 广东金融学院 * 5．总结并布置作业 布置作业 1) 试评价Google站点主页和Sohu站点主页在设计风格上有什么异同点，并给出你的理由。 2) 设计一个页面，显示两首七绝唐诗，要求两首唐诗并排摆放在页面上（类似于Word中的分栏功能）。请思考你使用的方法是不是有点繁琐，如果是，请给出一个更好的解决方案。 * 广东金融学院 * 5．总结并布置作业 3) 根据个人的基本信息，制作的一个网页（在下次课之前以邮件形式提交），下次课在课堂上随机抽查并点评。 4) 习题集第3章中的有关习题。 思考 我们制作的网页如何放在网络上，供人浏览？让学生带着这一问题去预习下一次课（请参见教材P101－P109）的内容。 * 广东金融学院 * * * 广东金融学院 广东金融学院 LOGO 广东金融学院 广东金融学院 第3讲 网页及网页设计的基本方法 参考资源： 3/kcpt/jkx.html 《大学计算机Ⅱ》 * 广东金融学院 * 《网页设计篇》 要求 方法 内容 目的 教学目的 * 广东金融学院 * 掌握一种全新的信息展示平台 1 储备必要的网页制作技能 2 为进一步学习网页设计打好基础 3 教学内容 * 广东金融学院 * 网页制作的基本步骤 1 站点的设计和发布