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

Slides:



Advertisements
Similar presentations
醫學美學之我見ー肉毒桿菌 班級:應日三乙 姓名:蔡雅卉 學號: 497E0076. 前言 現在的人,已經把 整型看做是微不足 道的事情了。即使 只是戴牙套、局部 雷射、割雙眼皮、 打美白針、肉毒桿 菌等等,都可以在 身體上做不同的改 變,而讓自己更滿 意自己的外表。
Advertisements

4 第 4 章 网页的布局 设计站点地图,有助于突出网站的主题,确定网 站的内容。而对于每一个网页来说,最重要的除了网 页的内容以外,还有就是网页的风格和布局。一个格 局凌乱的网页,内容再精彩,也不能说是一个好网页 。
5.3 页面布局 1. 用表格实现页面布局 用表格实现页面布局 2. 用框架布局页面 用框架布局页面 3. 层的使用 层的使用.
熟悉 Dreamweaver 的工作區與基本操作
16 邁向網頁的未來-HTML5 Pack 與 Widget Browser 使用 HTML5 來為多重螢幕裝置進行設計 變更檢視區大小
资源平台应用培训 武汉市交通学校信息化建设指导委员会.
近年来,出现了一些制作粗糙、违背史实甚至常理的“抗战雷剧”,社会上也出现了一股“戏说”抗战剧的不良风气。
03 訴說旅行緣起 - 文字與影像 網頁文字的編輯 格式化文字 水平線的插入與設定 網頁影像的使用 操作秘技與重點叮嚀.
上海市职业技能培训政府补贴项目 2014年4月8日.
104年度國立宜蘭大學新進主管研討 主計業務宣導說明
102年實施之高中職及五專多元入學(含免試入學)之招生機制
读者与图书馆 2009年春季版 总第 15 期 山 东 交 通 学 院 图 书 馆 2009年3月.
讲故事训练 授课人:田轶.
第十一課 菜園 6-11.
浪漫 碰撞 蜕变 专题八 19世纪以来的文学艺术.
德国波恩明斯特广场修建的贝多芬铜像( 1845年)
HTML第一课 李 伟 HTML开发语言基础.
專題製作 許惠淑.
作品《心贴芯电脑科技官网及网络管理系统实现》
校本选修课 第三专题 西藏问题 北京师大二附中 李文燕.
2012级暑期放假安全教育 及宿舍搬迁工作布置会 北京化工大学理学院 辅导员:曹鼎 2013年6月6日.
行動終端應用軟體創作專題競賽 題目:商品後端管理APP
网页制作 第一讲
建站流程 本章重点 本章介绍网站制作流程、经验、技巧以及在制作网页过程中可能需要注意的问题。 学习目的 了解网站的制作流程。
低碳生活,从小事做起 编辑人:刘瑞兴 指导老师:麦文燕 吴霞 编辑地址;岭南师范学院附属中学 编辑时间:
项目一 创建“夕照台”房产网站 ——网页制作基础
个人职业生涯规划.
大学计算机.
正修科技大學教學發展中心 教師教學觀摩與經驗分享 電子工程系 張法憲副教授.
网络游戏对大学生生活的影响 英本1班 鞠申镅 汪晨茹 沈秋云 元文杰 段祺琪.
2015年云南财经大学图书馆 新生入馆教育考核试题 答题指南
第8章 信息获取与发布 《大学计算机基础》 桂林电子科技大学 陈辉金 适用教材:周娅等. 大学计算机基础.桂林:广西师范大学出版社,2013
蘇軾詞的賞析
第 6 章 加入超連結.
柯奕宏(06) 王予亨(13) 郭秉逸(15) 楊雯凈(23) 顏佑瑩(32)
第十五章 传播学调查研究方法.
第6章 文本 文本在网络上传输速度较快,用户可以很方便地浏 览和下载文本信息,故其成为网页主要的信息载体。 整齐划一、大小适中的文本能够体现网页的视觉效 果。因而文本处理是设计精美网页的第一步。本章 将结合具体实例介绍在Dreamweaver CS4中如何插 入文本,对文本进行排版及一些文本辅助功能。
网页设计(1) 第12讲 网页技术简介 马秀麟 2014年5月 2018/9/17 制作人:马秀麟.
自然與生活科技領域 認識太陽能 蘇紋琪、石明玉.
HTML5全栈开发序列课程 《前端入门》之HTML入门 余鹏作品.
 全能的天才畫家- 李奧納多‧達文西 (西元1452年-1519年) 指導老師:袁淑芬老師 製作人:饒佩芯.
网页制作与设计 主编 耿 杰 科学出版社.
第二單元:Dreamweaver的基本操作
十二年國民基本教育中等學校教師教學專業能力研習五堂課
网页设计与制作 Dreamweaver CS6 标准教程
学生网页作品情况分析.
認識我的故鄉_台中市.
欢迎各位 Nice to Meet U.
第18章 Dreamweaver与Photoshop的完美结合
任务一 认识Photoshop CS6.
第2章 初识Dreamweaver CS4 Adobe Dreamweaver CS4是建立Web站点和应用程序的 专业工具。它将可视布局工具、应用程序开发功能和 代码编辑支持组合在一起,其功能强大,使得各个层 次的开发人员和设计人员都能够快速创建界面吸引人 的基于标准的网站和应用程序。从对基于CSS的设计.
崑山科技大學 電子工程系 99學年度 學生實務專題成果展
大專院校美食網- 以新北市為例 商務科技管理專題 組 別: 第二組 專題成員: 方采薇 陳宜欣
武汉纺织大学传媒学院 cm.wtu.edu.cn
第17章 网站测试与发布 在网页制作完成后,就要进入最后一个环节——网站 的测试与发布。Dreamweaver CS4具有网站测试与发 布的功能,可以对网站的浏览器兼容性、链接进行检 查,还可以清理HTML标签,并将本地站点上传到服务 器上。
第13章 CSS 通过CSS可以使用更丰富、更灵活的样式,更简单地 设计出更美观的网页。同时,也让网页的设计与维护 更有效率。CSS在网页设计中的作用尤为重要,是网 页设计师必备的知识。本章首先介绍什么是CSS、CSS 的基本语法等基础知识,接着学习利用“CSS”面板 管理规则,如何在Dreamweaver中创建与应用CSS样式.
模板与库.
十 三.使用模板和库.
主讲:陶建平 华中科技大学网络与计算中心
動態網頁程式設計實習 主講人:徐培倫老師.
精忠报国  演唱:屠洪纲 作词:陈涛 作曲:张宏光  狼烟起 江山北望  龙起卷 马长嘶 剑气如霜  心似黄河水茫茫  二十年 纵横间 谁能相抗  恨欲狂 长刀所向  多少手足忠魂埋骨它乡  何惜百死报家国  忍叹惜 更无语 血泪满眶  马蹄南去 人北望  人北望 草青黄 尘飞扬  我愿守土复开疆  堂堂中国要让四方来贺.
本 次 课 教 学 思 路 此次课总的教学思路如下: 1、阐述本次课程的任务介绍以及应该掌握的要相关能力技术。
第12章 APDiv 对于有Dreamweaver基础的读者来说,初识APDiv或 许会感到即熟悉又陌生。熟悉于它的Div标识符, 陌生于他在CS3版本中的含义及作用。其实,APDiv 在Dreamweaver CS4中仍等同于前期版本的层,又 称为AP元素或CSS-P元素,本文以下简称AP层。 什么是层?有什么作用?前面我们学习过了表格,
樂樂請假了 尊重的故事 資料來源:臺北縣國民小學品德教育手冊 故事來源:臺北縣國民小學品德教育手冊 網路小故事
聽聽那冷雨---重點摘要 二愛 王煜榕.
憲政與民主 應化3A 邱泓明.
网页设计三合一教程 主讲教师 2019/6/2.
古蹟知性之旅 我和新港奉天宮有個約 報告人:陳 映 竹 傅 湘 甯.
第1章 HTML基础 主讲人:刘泰然 经济管理学院.
電子表單 簡介 高雄市鳳山區新甲國小 陳信宏.
Presentation transcript:

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

本章学习的主要内容: 1. Dreamweaver CS6工作界面 2. 创建网站站点 3. 管理站点 4. 网页文档头部信息设置

2.1 Dreamweaver CS6工作界面 Adobe Dreamweaver CS6是一款集网页设计、 制作和管理网站于一身的可视化网页编辑软件, 它保留了Dreamweaver早期版本的各种优点, 不仅可以轻松设计网站的前台页面,也可以方 便地实现网站后台各种复杂功能。

2.1 Dreamweaver CS6工作界面 2.1.1 开始页面 2.1.2 工作环境 2.1.3 工作区布局 2.1.4 多文档的编辑界面

2.1.1 开始页面 Dreamweaver CS6启动后,默认情况下会显示 开始页面,用户可以在开始页面中打开已有文档 或新建文档。勾选开始页面底部【不再显示】, 下次启动Dreamweaver CS6时将不会显示开始 页面。 选择菜单【编辑】|【首选参数】,在【首选参数】 对话框中勾选【显示欢迎屏幕】,单击【确定】 按钮,在下次启动时重新显示开始页面。

2.1.2 工作环境 Dreamweaver CS6的工作环境由菜单栏、文 档工具栏、文档窗口、状态栏、属性面板(或 属性检查器)和浮动面板组等部分组成。

2.1.3 工作区布局 Dreamweaver CS6为用户提供了多种工作区 布局,用户可以根据需要设定工作区环境,也 可以新建工作区布局,并对它进行管理和删除 操作。 选择菜单【窗口】|【工作区布局】,在子菜 单中选择一种工作区布局。

2.1.4 多文档的编辑界面 Dreamweaver CS6提供了多文档的编辑界面,将多 个文档集中到一个窗口中,用户可以单击文档编辑窗 口上方选项卡的文件名切换到相应的文档,还可以按 住鼠标左键拖动选项卡改变文档的顺序。

2.2 创建网站站点 站点是存放一个网站所有文件的场所,由若干文 件和文件夹组成。用户在开发网站前必须先建立 站点,便于组织和管理网站文件。

2.2 CSS样式控制面板 2.2.1 创建新站点 2.2.2 新建和保存网页 2.2.3 管理站点文件和文件夹 2.2.4 课堂案例—慈善救助中心

2.2.1 创建新站点 站点按站点文件夹所在位置分为两类:本地站点 和远程站点。 本地站点是指本地计算机上的一组文件,远程站 点是远程WEB服务器上的一组文件。 创建本地站点首先要在本地硬盘上新建一个文件 夹或者选择一个已经存在的文件夹作为站点文件 夹,那么这个文件夹就是本地站点的根文件夹。

2.2.1 创建新站点 创建本地站点的操作步骤如下。  选择菜单【站点】|【新建站点】,或选择【管理站点】 并在【管理站点】对话框中单击【新建】按钮,打开 【站点设置对象】对话框,在左边选择【站点】,在右 侧输入站点名称和本地站点文件夹路径。  单击左侧【高级设置】,展开其他选项,选择【本地 信息】,在右侧设置相应的属性。  其他项可以根据需要设置,设置完毕后单击【保存】 按钮。在【文件】面板中可以看到新建的本地站点。

2.2.2 新建和保存网页 1.新建网页文档 选择菜单【文件】|【新建】,打开【新建文档】 对话框,在左侧选择【空白页】,在【页面类型】 中选择【HTML】,在【布局】中选择【无】。 单击【创建】按钮就可以创建网页文档。 2.保存网页文档 保存网页文档有如下两种方法。 (1)选择菜单【文件】|【保存】或【全部保 存】。在【另存为】对话框的【文件名】文本框 中输入网页的名称,单击【保存】按钮完成保存。 (2)按<Ctrl+S>快捷键保存网页文档。

2.2.3 管理站点文件和文件夹 1. 创建文件和文件夹 2.重命名文件和文件夹 3.移动文件和文件夹 4.删除文件或文件夹

2.2.4 课堂案例—慈善救助中心 案例学习目标:学习创建站点、管理站点文件 和文件夹的方法。 案例知识要点:使用【站点】|【新建站点】 创建站点,在【文件】面板中移动文件、重命 名文件。 素材所在位置:光盘/案例素材/ch02/课堂案 例-慈善救助中心。 案例效果如图2-17所示。

2.3 管理站点 建立站点以后,可以对站点进行打开、编辑、 复制和删除等各种操作。

2.3 管理站点 2.3.1打开站点 2.3.2编辑站点 2.3.3复制站点 2.3.4删除站点

2.3.1 打开站点 Dreamweaver允许建立多个站点,并可以通 过切换打开需要编辑的站点。打开站点的操作 步骤如下。  选择菜单【窗口】|【文件】或按<F8>键打 开【文件】面板,单击左边的下拉框,在下拉 列表中选择要打开的站点。  打开站点后,在【本地文件】下显示该站点 内的所有文件和文件夹。

2.3.2 编辑站点 编辑站点可以重新设置站点的一些属性,操作 步骤如下。  选择菜单【站点】|【管理站点】,打开【管 理站点】对话框,选择要编辑的站点名称,如 webtest,单击编辑按钮图标 。  打开【站点设置对象webtest】对话框。经 过对各种设置修改后,单击【保存】按钮,返 回【管理站点】对话框。

2.3.3 复制站点 复制站点可以建立多个结构相同的站点,让这 些站点保持一定的相似性,可以提高工作效率。 复制站点的操作步骤如下。  选择菜单【站点】|【管理站点】,打开【管 理站点】对话框,选择要复制的站点名称,如 webtest,单击【复制】按钮。这时在左边的 站点列表中会出现一个新的复制站点,名称为 “webtest复制”。  复制的站点和原站点默认使用同一个文件夹, 选择复制的站点,对其各种设置进行编辑操作。

2.3.4 删除站点 在Dreamweaver中删除站点,只是删除了 Dreamweaver同本地站点之间的关系。本地 站点中的文件夹和文件,仍然保存在硬盘原来 的位置上,没有被删除,也没有任何改变。 删除站点的操作步骤如下。  选择菜单【站点】|【管理站点】,打开【管 理站点】对话框,选择要删除的站点名称,单 击【删除】按钮。  在打开的【Dreamweaver】对话框中单击 【是】按钮,选中的站点就被删除,

2.4 网页文档头部信息设置 2.4.1 插入搜索关键字 2.4.2 设置描述信息 2.4.3 插入版权信息 2.4.4 设置刷新时间

2.4.1 插入搜索关键字 插入搜索关键字可以通过以下两种方法完成。 1.在代码视图中插入关键字  在【文档】窗口中切换到代码视图,将光标置于 <head>…</head>标签中。  选择菜单【插入】|【HTML】|【文件头标签】|【关键 字】,打开【关键字】对话框,输入关键字,如“礼品,节 日礼品”,多个关键字用英文逗号分隔。  单击【确定】按钮完成设置,在代码视图下可以看到 <head>标签内新增了如下代码: <meta name="keywords" content="礼品,节日礼品" />

2.4.1 插入搜索关键字 2.使用META对话框插入关键字  选择菜单【插入】|【HTML】|【文件头标签】 |【META】,打开【META】对话框,在【值】 文本框中输入keywords,在【内容】文本框中 输入关键字,多个关键字用英文逗号隔开。  单击【确定】按钮完成设置,在代码视图中 可看到相应的HTML标签。

2.4.2 设置描述信息 设置网页描述信息的操作如下。  在【文档】窗口中切换到代码视图,将光标置于 <head>…</head>标签中。选择菜单【插入】| 【HTML】|【文件头标签】|【说明】,在【说明】 对话框中输入说明文字。  单击【确定】按钮完成描述信息设置,在代码视图 下可以看到<head>标签内新增了如下代码: <meta name="description" content="节日礼品, 商务礼品" />

2.4.3 插入版权信息 在网页文档中插入版权信息的操作如下。 选择菜单【插入】|【HTML】|【文件头标签】| 【META】,打开【META】对话框,在【值】文本框 输入copyright,在【内容】文本框中输入版权信息, 如“本页版权归设计者所有”,单击【确定】按钮。 在代码视图下可以看到<head>标签内新增了如下代 码: <meta name="copyright" content="本页版权归 设计者所有" />

2.4.4 设置刷新时间 设置刷新时间具体操作步骤如下。  在【文档】窗口中切换到代码视图,将光标置于 <head>…</head>标签内,选择菜单【插入】| 【HTML】|【文件头标签】|【刷新】。  在【刷新】对话框中设置相应属性。  单击【确定】按钮,在代码视图下可以看到 <head>标签内新增了如下代码: <meta http-equiv="refresh" content="30" />