静态网页任务4.ppt

4.7.1认识“CSS样式〞CSS是CascadingStyleSheets〔层叠样式表〕的简称在Dreamweaver中，“CSS样式〞面板是新建、编辑、管理CCS的主要工具。选择“窗口〞|“CSS样式〞命令可以翻开或者关闭“CSS样式〞面板。4.7.1认识“CSS样式〞面板样式表文件名CSS规则列表属性和属性值列表工具按钮栏类别视图4.7.2新建CSS样式——1在【CSS样式】面板上，单击【新建CSS规那么】按钮，翻开【新建CSS规那么】对话框。4.7.2新建CSS样式——2【定义在】选项【新建样式表文件】【仅对该文档】【选择器类型】选项【类〔可应用于任何标签〕】【标签〔重新定义特定标签的外观〕】【高级〔ID、伪类选择器等〕】【名称】文本框在这个文本框中输入CSS规那么名称。根据所选择的“选择器类型〞的不同，这里可以输入或者选择不同的名称。4.7.3网页中应用CSS样式在【属性】面板选择应用样式利用【标签选择器】选择样式使用右键快捷菜单*湖南省中等职业学校专业教师省本级培训静态网页设计模块*湖南省中等职业学校专业教师

省本级培训模块：静态网页设计教师：罗卓君邝月娟任务说明星网科技公司是一家研发、经营消费类电子产品的企业。其主要产品包括：、数码相机、摄像机、MP3/MP4、笔记本、台式机、上网本、家用电器等。按照静态网站“网站需求分析→网站栏目设计→网页美工设计→网页素材编辑→网页编辑制作→网页发布与测试〞的开发流程，运用相应的制作工具，完成该企业的静态网页设计与制作,实现展示企业形象和推广企业产品。任务安排任务一：星网科技公司网站筹划任务二：星网科技公司网页美工设计任务三：星网科技公司网页素材编辑任务四：星网科技公司网页编辑制作任务五：星网科技公司网页发布与测试任务四：星网科技公司网页编辑制作任务说明:根据效果图和素材制作星网科技公司网站页面。至少包含网站首页〔每组制作〕、网站子页〔每人制作1-2页〕。任务四：星网科技公司网页编辑制作一、网页制作流程1、新建站点〔必须〕2、新建页面〔首页index.html〕3、修改页面属性4、网页布局5、插入页面元素〔图片、文字、超级链接〕6、添加css样式7、保存，F12预览任务四：星网科技公司网页编辑制作二、知识要点4.1.1Dreamweaver的工作环境——起始页4.1.2Dreamweaver工作环境简介菜单栏工具栏文档编辑区属性面板面板组4.1.3Dreamweaver的三种视图模式代码视图设计视图拆分视图4.1.4建立站点——设置站点名称4.1.5新建页面——新建HTML网页文档注意：页面的后缀名为html/htm首页命名为index.htm网页一定要保存到站点内网页名必须为非中文4.1.6新建页面——编辑和保存网页4.1.7新建页面——预览网页4.2.1插入文字直接通过键盘输入粘贴剪贴板中的文字导入Word文档设置文本字体4.2.2设置文本格式关于设置文本格式设置文字大小设置文本颜色设置文字标题Dreamweaver中的文本格式设置与使用标准的字处理程序类似。可以为文本块设置默认格式〔段落、标题1、标题2等〕、更改所选文本的字体、大小、颜色和对齐方式，或者应用文本样式〔如粗体、斜体和下划线〕。4.2.3输入文本空格输入法切换到半角状态，按空格键只能输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现：将输入法切换到中文全角状态。直接按“Ctrl+Shift+Space〞组合键。4.2.4实现文本换行输入多行文本，要实现换行，可以按Enter键或者按Shift＋Enter组合键来实现。按Enter键，换行的行距较大，按Shift＋Enter组合键，换行的行距较小。4.2.5插入相关文本要素插入特殊字符菜单【插入】→【HTML】→【特殊字符】插入插入水平线插入时间4.2.6设置段落格式设置段落对齐段落间距和换行标签两端对齐左对齐右对齐居中对齐定位光标在此处4.3.1插入图像插入图像插入图像占位符图像占位符，顾名思义是在需要使用图形的地方先插入一个占位图形先“占领〞着地盘。4.3.2设置图像属性图片宽度图片高度替换文本源文件图片边框图片对齐方式4.4插入Flash动画FLASH动画〔SWF格式〕FLASH按钮FLAS