网页设计与制作 Dreamweaver CS6 标准教程

Slides:



Advertisements
Similar presentations
商管群科科主任 盧錦春 年 3 月份初階建置、 4 月份進階建置、 5 月份試賣與對外營業。
Advertisements

Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
5.3 页面布局 1. 用表格实现页面布局 用表格实现页面布局 2. 用框架布局页面 用框架布局页面 3. 层的使用 层的使用.
熟悉 Dreamweaver 的工作區與基本操作
HyperText Markup Language
03 訴說旅行緣起 - 文字與影像 網頁文字的編輯 格式化文字 水平線的插入與設定 網頁影像的使用 操作秘技與重點叮嚀.
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
网页 设计与制作.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
“深入推进依法行政加快建设法治政府” -《法治政府建设实施纲要》解读
XML 第05讲 使用CSS显示XML.
第五单元课1-3 层叠样式表.
Css2/css3全教程 选择器 群号: 韬略课堂:何韬.
第六节 可降阶的二阶微分方程 一、 型的微分方程 二、 型的微分方程 三、 型的微分方程.
CSS – 進階 IDIC.
我的社區_觀塘 第三課.
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
网页编程基础 曾宪文,Rex Zeng 纸飞机网络技术部部长 Leader of ACE.
14 Spry工具集與資料集的使用 認識 Spry 關於版面配置 Spry 工具集 Spry 選單列 Spry 標籤面板
CT212 (02/03)-Network Programming and design
第6章 文本 文本在网络上传输速度较快,用户可以很方便地浏 览和下载文本信息,故其成为网页主要的信息载体。 整齐划一、大小适中的文本能够体现网页的视觉效 果。因而文本处理是设计精美网页的第一步。本章 将结合具体实例介绍在Dreamweaver CS4中如何插 入文本,对文本进行排版及一些文本辅助功能。
第四章 样式表CSS CSS技术是一种格式化网页的标准方式,它通过设置CSS属性债周页元素获得各种不同效果。本章共分9个实例,主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。
第8章 样式表.
第五章 网页设计 网页制作的语言和工具 网页制作步骤和原则 使用Dreamweaver工具制作网页 使用FrontPage工具制作网页
CSS简介 WEB前端三剑客之二.
Ch01 HTML 5 資料格式 網頁程式設計.
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
第 13 章 用CSS 設定 文字顏色與背景.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
Css全教程 边框背景轮廓 群号: 韬略课堂:何韬.
HTML5全栈开发序列课程 《前端入门》之CSS3新特性 余鹏作品.
Web前端开发技术与实践 第11章:背景与边框 阮晓龙 /
动态专题制作 凤凰网技术中心 应用管理部.
HTML – 文字格式 資訊教育.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
网页设计与制作 Dreamweaver CS6 标准教程
HTML & CSS.
CSS樣式 靜宜大學 資管系 楊子青.
基礎程式設計範例 -網頁名片.
主讲:陶建平 华中科技大学网络与计算中心
第八 课 n l 教学.
W3C标准网页制作 主讲教师:张 涛.
CSS技术 蒋玉华.
第2章 初识Dreamweaver CS4 Adobe Dreamweaver CS4是建立Web站点和应用程序的 专业工具。它将可视布局工具、应用程序开发功能和 代码编辑支持组合在一起,其功能强大,使得各个层 次的开发人员和设计人员都能够快速创建界面吸引人 的基于标准的网站和应用程序。从对基于CSS的设计.
大家所认为的电子商务行业有哪些途径来赚钱?
聖文德書院 ST BONAVENTURE COLLEGE & HIGH SCHOOL
网页设计与制作 Dreamweaver CS6 标准教程
武汉纺织大学传媒学院 cm.wtu.edu.cn
十 三.使用模板和库.
主讲:陶建平 华中科技大学网络与计算中心
武汉纺织大学传媒学院 cm.wtu.edu.cn
網頁設計 清單設計 Instructor: Reporter:楊政勳 Date:
6-1 認識超連結 超連結是網頁中少不了的元件,透過他才能將不同的網頁、網站相連,讓使用者可以在不同網站中瀏覽。而圖片、動畫等檔案,也是透過超連結的方式來呈現網頁中,所以底下讓我們來好好的認識超連結。
目的 推廣有益身心的康體計劃 現在,青年人較少時間做適量運動,所以 學校推行這個康體計劃,使學生在一個健康的環境下成長,減少疾病的傳播。
第12章 APDiv 对于有Dreamweaver基础的读者来说,初识APDiv或 许会感到即熟悉又陌生。熟悉于它的Div标识符, 陌生于他在CS3版本中的含义及作用。其实,APDiv 在Dreamweaver CS4中仍等同于前期版本的层,又 称为AP元素或CSS-P元素,本文以下简称AP层。 什么是层?有什么作用?前面我们学习过了表格,
布局大师——表格.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
武汉纺织大学传媒学院 cm.wtu.edu.cn
第15节 CSS超链接样式 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/5/10 传媒学院.
第7章 使用CSS设置链接与导航菜单 经济管理学院.
坐標幾何的基本概念 Title page: Font size 36, bold, theme color of the chapter (red for geometry, blue for algebra, green for statistics)
網路商店裝修之二 CSS樣式編輯.
CSS基礎 靜宜大學 資管系 楊子青.
第5章 Div+CSS布局技术 经济管理学院.
第6章 层次原理图设计和多通道技术: 重点内容: 掌握自上而下的层次原理图设计方法 掌握自下而上的层次原理图设计方法
第2章 块级标签 经济管理学院.
使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師
第4章 JSP动态网页设计基础 教学目标 教学重点 教学过程 2019年10月21日.
Presentation transcript:

网页设计与制作 Dreamweaver CS6 标准教程 第3章 页面与文本 网页设计与制作 Dreamweaver CS6 标准教程

本章学习的主要内容: 1. 页面属性 2. 文本属性 3. 项目列表和编号列表

3.1 页面属性 网页页面属性主要包括网页标题、网页背景图 像和颜色、网页边距、网页默认文字大小和颜 色、超链接颜色等。可以通过菜单【修改】| 【页面属性】来进行设置和修改。

3.1 页面属性 3.1.1 课堂案例—香格里湾峰会 3.1.2 网页的标题 3.1.3 文本分段与换行 3.1.4 输入空格 3.1.5 页面文字属性 3.1.6 显示不可见元素 3.1.7 设置页边距 3.1.8 背景属性 3.1.9 跟踪图像

3.1.1课堂案例—香格里湾峰会 案例学习目标:学习网页页面属性的设置方法, 以及文本的换行与分段,字体的选择与设置等方 法。 案例知识要点:使用【修改】|【页面属性】菜单 设置页面属性。 素材所在位置:光盘/案例素材/ch03/课堂案例- 香格里湾峰会。 案例效果如图3-1所示。

3.1.2 网页的标题 网页标题设置有两种方法。 (1)利用【页面属性】对话框  选择菜单【修改】|【页面属性】或点击文本 【属性】面板中的【页面属性】按钮。  单击【页面属性】对话框中【分类】栏中的 【标题/编码】,在【标题】文本框中输入页面 标题,如图3-22所示,单击【确定】完成设置。 (2)在文档工具栏【标题】文本框中,输入 页面标题文字完成设置。

3.1.3 文本分段与换行 (1)将光标置于需要分段处,按回车键形成 一个新段落,同时在两个段落之间添加了一个 空行。在网页代码中,新形成的两个段落文字 均包含在<p>和</p>标签中。 (2)将光标置于需要换行处,按住<Shift> 的同时,按回车键换行,但没有形成新的空行。 在网页代码中,段落文字依然包含在<p>和 </p>标签中,并在换行处上添加了一个 <br>标签。

3.1.4 输入空格 选择菜单【编辑】|【首选参数】,在【首选参数】对话框的【分类】 栏中,选择【常规】,在【编辑选项】中勾选或取消勾选【允许多 个连续空格】完成设置。 除此之外,还可以通过以下四种方法输入空格。 (1)选择【插入】面板中【文本】选项卡,单击【字符】按钮 展 开选择【不换行空格】选项。 (2)选择菜单【插入】|【HTML】|【特殊字符】|【不换行空格】。 (3)按<Ctrl+Shift+Space>快捷键。 (4)将输入法转换到中文全角状态下,按<Space>空格键输入连 续空格。

3.1.5 页面文字属性 新建网页时,页面文字的字体、大小和颜色等均有默认设置, 可根据需要进行修改,具体步骤如下。 选择菜单【修改】|【页面属性】。 单击【页面属性】对话框【分类】栏中的【外观(CSS)】, 在右侧设置【页面字体】、【大小】、【文本颜色】。 页面文字属性设置完后,在【CSS样式】面板中出现了 body,td,th样式,【代码】窗口中新增一段CSS样式代码,如: body,td,th { font-family: 微软雅黑; font-size: 14px; color: #666; }

3.1.6 显示不可见元素 显示或隐藏不可见元素的操作步骤如下。 选择菜单【编辑】|【首选参数】,打开【首选参数】 对话框。 在【首选参数】对话框【分类】栏中选择【不可见 元素】,在右侧单击相应元素的复选框实现显示或隐 藏不可见元素,如图3-28所示,单击【确定】完成设 置。

3.1.7 设置页边距 页边距指整个页面到浏览器左、右边缘和顶部、底部边缘 的距离,通常设置为0。设置步骤如下。 选择菜单【修改】|【页面属性】 在【页面属性】对话框【分类】栏中选择【外观 (CSS)】,在【左边距】、【右边距】、【上边距】、 【下边距】选项分别输入相应数值,单击【确定】按钮完成 设置。 在【代码】窗口中看到新增一段代码: body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }

3.1.8 背景属性 网页背景可以填充为颜色,也可以填充为图像。更改 网页背景的操作步骤如下。 选择菜单【修改】|【页面属性】。 单击【页面属性】对话框【分类】栏中的【外观 (CSS)】,在右侧设置【背景颜色】、【背景图像】、 【重复】等选项。 【重复】选项下拉列表中,各选项含义如下。 no-repeat(不重复):背景图像不重复。 repeat(重复):背景图像在页面中重复。 repeat-x(重复-x):背景图像在页面中横向重复。 repeat-y(重复-y):背景图像在页面中纵向重复。 如果【重复】空白,默认为repeat。

3.1.9 跟踪图像 网页背景可以填充为颜色,也可以填充为图像。更改 网页背景的操作步骤如下。设置跟踪图像的步骤如下。 选择菜单【修改】|【页面属性】。 单击【页面属性】对话框【分类】栏中的【跟踪图 像】,在右侧【跟踪图像】文本框中输入跟踪图像的 路径和文件名。或者单击【浏览…】按钮,在【选择 图像源文件】对话框中找到并选择跟踪图像,单击 【确定】按钮。 在【透明度】选项中设置跟踪图像透明度。

3.2 文本属性 在制作网页时,应用最多的元素就是文本,文本 有很多种,如文字、特殊符号、日期等。在网页 中添加文本之后,需要对文本的大小、颜色等属 性进行设置,以便网页更加美观。

3.2 文本属性 3.2.1 课堂案例—百货公司 3.2.2 设置文本属性 3.2.3 文本段落 3.2.4 插入日期 3.2.5 插入特殊字符

3.2.1 课堂案例—百货公司 案例学习目标:学习设置网页中的文字样式。 案例知识要点:使用CSS样式改变文本大小、颜 色、字体等样式。 素材所在位置:光盘/案例素材/ch03/课堂案例 -百货公司。 案例效果如图3-33所示。

3.2.2 设置文本属性 Dreamweaver基于层叠样式表(CSS)对网 页进行设置,即事先定义好文本的CSS样式 再应用到文本上。定义的一个CSS样式可以 应用在多处文本上,要改变文本样式属性只 需修改CSS样式属性。

3.2.2 设置文本属性 设置文本属性的操作步骤如下。 选择菜单【窗口】|【CSS样式】或按<Shift+F11>快 捷键打开【CSS样式】面板。单击【CSS样式】面板底部 【新建CSS规则】按钮,在【新建CSS规则】对话框中的 【选择器类型】下拉列表中选择“类(可应用于任何 HTML元素)”,在【选择器名称】文本框中输入样式 名称,如.text,单击【确定】按钮。 打开【.text的CSS规则定义】对话框,在【分类】中 选择【类型】,在右侧设置文本的属性。 选中需要设置样式的文本,在【属性】面板中单击 【HTML】按钮 切换到HTML属性,在【类】下拉列表 中选择.text。

3.2.3 文本段落 在页面文档中, <p>和</p>标签主要用于定义 一个段落。 如果一段短小的文字段落,需要加大或缩小文字 突出表现效果,那么还可以使用标题。 预定义格式在处理空格和空行较多的文本段落时 更加方便。 1. 应用段落或标题格式 2. 指定预格式

3.2.4 插入日期 在网页文档中插入日期的操作步骤如下。 在【文档】窗口中将光标置于要插入日期的位置上。 单击菜单【插入】|【日期】,或在【插入】面板中 选择【常用】选项卡,单击【日期】按钮 。 在【插入日期】对话框中选择需要显示的【星期格 式】、【日期格式】或【时间格式】。 如果勾选【储存时自动更新】,则每次保存该网页 文档时都会自动更新日期,否则不会更新。

3.2.5 插入特殊字符 可采用以下两种方法在网页中插入特殊字符。 (1)使用【插入】|【HTML】|【特殊字符】 菜单。 (2)使用【插入】面板插入特殊字符。

3.3 项目符号和编号列表 项目列表和编号是放在文本前的点、数字或 其他符号,起到强调作用。合理使用项目列 表和编号列表,可以使网页内容的层次结构 更清晰、更有条理。

3.3 项目符号和编号列表 3.3.1课堂案例—咨询网站 3.3.2设置项目列表或编号列表 3.3.3 修改项目符号或编号

3.3.1 课堂案例-咨询网站 案例学习目标:学习使用项目列表。 案例知识要点:使用【项目列表】按钮创建列 表、改变列表样式。 素材所在位置:光盘/案例素材/ch03/课堂案 例-咨询网站。 案例效果如图3-58所示。

3.3.2 设置项目列表或编号列表 1.项目列表 设置项目列表有以下两种方法。 (1)使用【属性面板】设置 (2)使用【格式】|【列表】菜单设置 网页中的项目列表也称为无序列表(unordered lists),添加完项目符号后,在【代码】视图中可以查 看HTML代码: <ul> <li>项目列表一</li> <li>项目列表二</li> <li>项目列表三</li> </ul> 整个项目列表包含在<ul>和</ul>标签之间,列表的 每一项包含在<li>和</li>标签内。

3.3.2 设置项目列表或编号列表 2.编号列表 设置编号列表有以下两种方法。 (1)使用【属性面板】设置 (2)使用【格式】|【列表】菜单设置 编号列表也称为有序列表(ordered lists),添加完编号 列表后,在【代码】视图中可以查看HTML代码: <ol> <li>项目列表一</li> <li>项目列表二</li> <li>项目列表三</li> </ol> 整个项目列表包含在<ol>和</ol>标签之间,列表的每一 项包含在<li>和</li>标签内。

3.3.3 修改项目符号或编号 修改项目符号或编号的操作步骤如下。 将光标置于设置了项目符号或编号的文本中。 单击【属性】面板中【列表项目】按钮 或选 择菜单【格式】|【列表】|【属性】,打开 【列表属性】对话框。 在【列表类型】下拉列表中选择要修改的列 表类型,在【样式】下拉列表中选择符号或编 号样式,在【开始计数】文本框中设置编号起 始值。

3.4 练习案例 3.4.1 练习案例—大学生国际电影节 3.4.2 练习案例—移动银行网站 3.4.3 练习案例—化妆品网站

3.4.1练习案例-大学生国际电影节 案例练习目标:练习页面属性设置。 案例操作要点: 1.设置网页标题为 “大学生国际电影节”。 2. 设置页面的文本属性:页面字体为微软雅黑, 文本大小为14px,颜色为#FFF。 3.设置页面的背景属性:背景颜色为#CA162F, 背景图像为bg.jpg,图像重复为no-repeat,图 像对齐为水平居中和垂直顶端,左边距、右边距、 上边距和下边距分别设为0px、0px、240px和 0px。 素材所在位置:光盘/案例素材/ch03/练习案例- 大学生国际电影节,效果如图3-75所示。

3.4.2练习案例-移动银行网站 案例练习目标:练习文字样式设定。 案例操作要点: 1.在页面相应位置分别输入文字。 2.设置如下样式,并应用到相应文本上。 样式名称为.menu,字体大小12px,颜色#FFF。 样式名称为.t1,字体大小12px、颜色#666;样式名 称为.t2,字体大小14px,字体颜色#000,字体粗细 bold;样式名称为.t3字体大小13px,字体颜色 #CD3E00。 样式名称为.title1,字体大小18px,字体颜色#000; 样式名称为.titile2,字体大小18px,字体颜色 #2C9BC9;样式名称为.title3,字体大小18px,字 体颜色#EF9514。 素材所在位置:光盘/案例素材/ch03/练习案例-移动 银行网站,效果如图3-76所示。

3.4.3练习案例-化妆品网站 案例练习目标:练习项目列表的使用。 案例操作要点: 1.将表格中的文字设置为项目列表。 2.在标签样式<li>中,文本大小为14px, 颜色为#727272,行高为150%。 素材所在位置:光盘/案例素材/ch03/练习案 例-化妆品网站,效果如图3-77所示。