第2章制作网页的基本操作.pptVIP

第2章 制作网页的基本操作 2.1 创建站点和网页 网页是网站的组成部分，很少会单独存在，几乎所有的网页设计都是在网站的范围内进行的。Dreamweaver CS5具有先进而简捷的站点管理功能，我们可以合理地规划网页设计素材，并把网站的各个网页有条理地组织起来，融合成一个整体。 2.1.1 创建站点 创建站点的具体步骤如下： 单击【站点】/【新建站点】命令，弹出【站点设置对象】对话框 。在此设置你的站点名称和保存位置。 请将保存位置设置在E盘myweb 文件夹中，E:\myweb\（注意：站点的路径和名称不能含有中文！） 首先在E:\myweb\你所建立的站点文件夹中新建文件夹”images”。然后点击[文件]面板，在下拉列表中选择你所建网站所在的位置，点击[管理站点]，在弹出的对话框中选择你的站点名称，点击[编辑]，在【站点设置对象】对话框中，选择[高级设置]中的[本地信息]，点击[默认图像文件夹]输入框右边的文件夹按钮，找到E:\myweb\ ..\images，选择后保存。具体图示见下图： 网站目录设置：分门别类、结构清晰 新建网页：文件\新建 设置网页属性包括：网页标题、页面默认字体、默认字体大小、背景颜色、背景图片、边距等。 2.2 添加并编辑文本 网页中的文本可以像Word文档一样进行编辑。 设置文字样式：字体、大小、颜色、风格。 参照范文格式设置如下: 2.2.3 CSS(层叠样式表) CSS：样式表。是一组格式设置规则，用于控制页面的外观。 当某一内容第1次进行设置格式时，需要新建一个CSS规则。如果该规则仅应用于当前文档，则新建时选择“仅限该文档”；如果在其他地方也要用到，则选择“新建样式表文件”；或者把所有规则都保存到同一个样式表中，使用时再在列出的样式列表中选择你需要的那一个样式。 CSS（层叠样式表）界面 DW CS3版本的CSS是中文界面，CS5版本则是英文界面。 2.2.4 文字与段落设置注意事项 使用特殊字体需谨慎，如果用户机上没有安装该特殊字体，则无法显示。若确需使用某特殊字体，可将其转换为图片，用PS处理后再使用。 若文字要重起一个段落，即分段，则按Enter(回车键)，若不需分段，仅换行，则按Shift+ Enter。 缩进：先选定需要缩进的文字，再在属性栏点击HTML,点击其中的缩进按钮。 项目列表：先选定需要设置项目列表的文字，再在属性栏点击HTML,点击其中的项目列表按钮。 2.3 保存网页 网页文件命名规则： 网页文件的扩展名为 html； 不要用特殊字符命名：如斜线（/）、减号（-）、反斜线（\）、加号（+）、冒号（：），英文句号； 英文名称要用小写，不要大写或大小写混合； 站点首页名称一般情况下要用index。 不要用数字开头； 不要用中文命名； 2.4 插入图片 插入图片前应先将网页保存，从而确保所插入图片引用正确。若不事先保存网页，插入图片时会出现下图所示对话框。 图片插入网页后，应确定图片已经存入站点，否则下次打开网页时，将看不到该图片。最好的方法是，在插入图片前，先将图片存放在站点的images文件夹下。 网页中使用图片的原则：在保证画质的前提下，尽可能使图片的数据量小一些，这样有利于用户快速的打开网页。 如在插入预览图时，不要插入原图再来缩小，可先用PS将原图进行裁剪或缩小后再插入到网页中。 2.4.1 设置图像的基本属性 图像的名称 宽、高：可缩小或放大图片的显示尺寸。 源文件：图片的路径和名称。 替代：图像的说明文字，可不填。 边框：图片是否要加边框。 对齐：当列表中的方式达不到所需效果时，可结合文字的样式来设置。 边距：图片在水平和垂直方向上与周围文字的距离。 2.4.2 优化图片 如果插入的图片过大，可通过修改属性面板中的宽、高来改变显示范围，但此时图片的数据量并没有改变。若需将其数据量改变为适合当前显示范围的大小，可在修改宽、高的值后，单击面板中的“重新取样”按钮。还可通过“裁剪”按钮来改变图片显示范围。 2.4.3鼠标经过更换图片特效 是指在页面中先显示一张图像，当鼠标经过移动到该图像上时，图像切换成另一张图像。 步骤：将光标放到要插入图像的地方；单击菜单 插入/图像对象/鼠标经过图像，在下图所示对话框中设置原始图像和鼠标经过图像。 * 2.1.2设置默认图像文件夹 网站名 html images css others 存放主页与子页 存放图片 存放文字的样式定义 存放动画,音乐、视频 等元素 2.1.3 新建网页 1.添加普通文本：直接输入、复制粘贴、从其它文件导入。 2.添加空格：输入法切换到半角状态，按空格键只能输入一个空格。如果需要输入多个空格，可以通过以下几种方法