第1课 html+css网页设计.ppt

第一课 html+css网页设计 主讲：谭军 Qq网页设计群1） 网页设计群2音乐舞蹈班专用） 网页设计群3：184945635 加群时请注明班级、姓名 本课内容 课程要求：学生作品展示 网站规划流程： 网页是什么： HTML基础 制作自己第一个网页 制作网页需要什么工具 本课重点：用html创建与设置文本和图像 辅助：利用Dreamweaver快速创建html文档 作业： 看书：课本第1、2、3章，并上机实现课本例子； 上机实验题： 一、课程要求：实现一小型站点的设计与发布 平时作业：每周上机课提交上一周理论课的实验作业！ 独立规划和设计一个网站，内容不限。 掌握网页设计工具Dreamweaver的使用。 掌握用ftp软件发布站点。 写一份《综合设计报告》：包含 站点设计思想及内容介绍、 站点结构图、 网上空间网址 注明原创的动画和图像及所在的页面 本课程收获 自己要改进的地方 二、站点设计流程： 确定题目，设计出最初层次和划分每个页面的内容与布局 创建一个本地站点，进行设计，并预先收集页面素材和文字资料。 申请一个网上空间，自学FTP上传软件的使用 在本地站点调试通过，确保每个链接成功。 用FTP上传到网上空间 写报告（用word文档保存） 把站点和报告一起打包成.RAR或.ZIP，要求10M以下，发邮箱给老师。 三、网页是什么认识HTML 什么是HTML超文本标记语言： HTML是由一名叫Tim Berners-Lee的科学家发明的。他发明HTML的目的，是为了方便不同大学的科学家们可以更容易地获取彼此的研究文档。 HTML是一门语言，它令我们可以在因特网上展示信息（例如科学研究信息）。你所看到的网页，是浏览器对HTML进行解释的结果。 HTML语言并不会在浏览器中显示出来，但是却告诉浏览器如何显示文档的内容，如文本、图像及其其他媒体。 这门语言还告诉你如何通过超文本链接实现交互式的文档，这些链接可把你的文档与其他本地或者因特网上的文档，以及其他的网络资源连接起来。 如何查看一个网页的HTML代码： 在浏览器菜单栏上点击“查看”，然后选择“源文件”即可。 四、制作我们的第一个网页 打开记事本程序，输入以下html代码： html head title我的第一个网页/title /head body p厉害！这是我的第一个网页。/p img src=“1.jpg” / /body /html 把记事本文档保存为1.html，注意后缀htm表明了它是一个html文档，然后用浏览器显示。 五、制作网页需要什么工具 浏览器：用于浏览网站的程序。 游览器有很多可供选择，最普及的浏览器当属微软（Microsoft）公司的Internet Explorer（俗称“IE”）。 其他的一些浏览器包括Opera、Mozilla Firefox（俗称“火狐狸”或“火狐”）等。这些浏览器的基本功能都是浏览网页，因此具体使用哪个浏览器是无所谓的。 网页制作工具： 比如Adobe Dreamweaver cs4、 Microsoft FrontPage等。 网页制作工具可以为编写代码提供很好的提示和帮助，还提供了许多标准功能供你选择。 缺点是，你只能按照这些标准功能来制作网页，更糟糕的是，这些标准功能远远不能涵盖所有的html标记和属性，如果你不懂得html，将无法制作正合你意的网页。或者，更令人讨厌的是，它们会修改你手工编写的代码。 所以，要想制作精美的网页，不能完全依赖Dreamweaver，而应该在掌握一定程度html的基础上去使用工具作为设计的辅助手段。 对于dw，我们要学到什么程度？ 第一，熟练利用代码视图来输入并修改html和CSS代码。 第二，利用dw的站点功能和文件面板，来管理网站的文件，比如文件的复制、移动、重命名等，都需要更新关联的超链接以及文件的路径，这些dw都能替我们很好的完成，同时谨记网站中所有文件以及文件夹名不能用中文名或全角字符。 第三，利用dw的spry插件制作流行的网页元素，比如选项卡、折叠式面板等。 第四，利用dw插入表格 利用dw代码视图输入html标记和属性 第2章、HTML文件结构 一个网页可包含文本、图像、表格，我们把这些内容称为网页元素。 元素构成了HTML文档，并告知浏览器如何呈现网页。 元素是文本、图像、表格等。 元素由首标记、内容（content）和尾标记构成。 “标记”是什么？ 标记指示元素的起始与结束。 所有标记都具有相同的格式：以小于号“”开头，以大于号“”结尾。 网页有两种标记——首标记和尾标记。它们唯一的区别在于，尾标记多一条斜杠“/。你通过把内容放在首标记和尾标记之间来对内容进行标记