网页制作教程1-网页的基本组成-文字的排版ppt课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网页制作教程 1,网页的基本组成 文字的排版,电教中心 杨飞雄,1,网页制作教程 1 网页的基本组成 文字的排版电教,1.网页组成的基本要素：,文字,图片 图形,表格,超级链接,视频 动画 声音,表单元素,例子1,例子2,例子3,例子4,2,1.网页组成的基本要素：文字2,2.网页的基本类型,静态网页（*.htm*.html*.shtml）,页面从编辑好后一直保持同样的状态。,动态网页（*.asp*.jsp*.php*.aspx）,动态网页是指网页的内容是否可根据某种条件的改变而自动改变，如计数器就是动态的，当有人点击我们的网页时，计数器的值会自动增加；BBS论坛也是动态的，当用户在论坛上发布信息时，网页内容会自动更新，显示出新发布的信息及相关回复等等。,3,2.网页的基本类型静态网页（*.htm*.html*.s,3.Dreamweaver的安装,先要有Dreamweaver安装光盘或文件，可在电教中心网站教师培训里面找到。,双击安装文件,单击“下一步”进行安装,4,3.Dreamweaver的安装先要有Dreamweaver,4.IIS,IIS是Internet Information Server的缩写，即因特网信息服务器。IIS意味着你能发布网页，从而将自己的电脑作为一台网页服务器使用,默认的xp系统没有安装IIS，因此必须使用安装光盘来进行安装。,5,4.IISIIS是Internet Informatio,4.IIS的安装,插入安装光盘,单击“,安装可选的Windows组件,”,单击“,Internet信息服务（IIS）,”前面的方框,单击“,下一步,”进行安装即可。,6,4.IIS的安装插入安装光盘6,4.IIS的配置,单击“,开始菜单,”，选择“,控制面板,”,双击“,管理工具,”,双击“,Internet 信息服务,”,单击,号依次展开本地计算机即网站的目录。,7,4.IIS的配置单击“开始菜单”，选择“控制面板”7,4.IIS的配置,右键,单击“,默认网站,”，选择“,属性,”,单击“,主目录,”标签,单击“,本地路径,”后面的浏览按钮，选择,F,盘,SRC,目录,单击“,确定,”按钮。,8,4.IIS的配置右键单击“默认网站”，选择“属性”8,5.准备工作,准备工作（使用说明1）,准备好做练习的文件,将光盘中的SRC目录复制到copy到F盘,右键单击SRC文件夹，选择“属性”,单击“只读”前面的小方框,单击“确定”按钮,单击“将改动应用于该文件夹、子文件夹及文件”前面的选择框,单击“确定”按钮,9,5.准备工作准备工作（使用说明1）9,6.建立站点,建立站点（使用说明2）,点击“站点”菜单，选择“新建站点”,点击“高级”标签,设定你的站点的名字，如设置为Myweb,选择你的网站文件存储的位置，设置为F盘SRC目录,设置你的测试服务器地址，输入Localhost,点击“完成”按钮,10,6.建立站点建立站点（使用说明2）10,7.简单的文字排版,文字的字体与颜色,常用的字体一般为宋体、楷体和黑体。,颜色与颜色代码,网页中的颜色使用三原色（RGB）编码。每种原色使用两位十六位数字编码。如000000为黑色，即当三原色光线都为零时为黑色；FFFFFF则为白色，即当三原色光线都为最强时为白色；FF0000为红色。简单而言颜色代码就是不同强度的红、绿、蓝颜色的结合。,11,7.简单的文字排版文字的字体与颜色11,7.简单的文字排版,CSS样式表,CSS（Cascading Style Sheets)，中文翻译为层叠样式表。,CSS样式表是一个包含样式和格式的规范的外部文本文件。当编辑外部CSS样式表时会影响所有链接到CSS样式表的文档。,12,7.简单的文字排版CSS样式表12,7.简单的文字排版,CSS样式表实例1（,Page122,）,本例的目的是初步认识CSS样式表，并规范文本中所有带超级的文本的颜色。,说明：,A.link 带超级链接的文本,A.visited 已经访问过的超级链接,A.active 激活状态的超级链接,A.hover 鼠标悬停状态的超级链接,13,7.简单的文字排版CSS样式表实例1（Page122）13,7.简单的文字排版,CSS样式表实例2（,Page127,）,本例的目的是定义CSS样式表及编辑。,说明：,TD：网页中单元格的标识,14,7.简单的文字排版CSS样式表实例2（Page127）14,7.简单的文字排版,CSS样式表实例4（,Page138,）,本例的目的是使用CSS美化段落。,说明：,px：pixel，像素，屏幕上显示的最小单位，用于网页设计，直观方便。,pt：point，是一个标准的长度单位，1pt1/72英寸，用于印刷业，非常简单易用。,15,7.简单的文字排版CSS样式表实例4（Page138）15,7.简单的文字排版,CSS样式表实例5（,Page143,）,本例的目的是使用CSS规范文字的间隔。,16,7.简单的文字排版CSS样式表实例5（Page143）16,作业,P141 课堂练习,P146 课堂练习,17,作业P141 课堂练习17,