网页设计与制作单元1_ 站点创建与制作商品简介页面课件

《网页设计与制作单元1_ 站点创建与制作商品简介页面课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、单元1站点创建与制作商品简介页面HTML5+CSS3网页设计与制作实用教程工业和信息化人才培养规划教材国家精品资源共享课程配套教材高职高专计算机系列人民邮电出版社制作网页之前，应该先在本地计算机磁盘上建立一个站点，使用站点对网页文档、样式表文件、网页素材进行统一管理。如果使用了外部文件，Dreamweaver就会自动检测并提示是否将外部文件复制到站点内，以保持站点的完整性。如果某个文件夹或文件重新命名，系统会自动更新所有的链接，以保证原有链接关系的正确性。网页中的基本组成元素有文字、图像和动画等，网页中的信息主要是通过文字来表达的，

2、文字是网页的主体和构成网页最基本的元素，它具有准确快捷地传递信息、存储空间小、易复制、易保存、易打印等优点，其优势很难被其他元素所取代。在DreamweaverCC中输入文本与在Word中输入文本很相似，都可以对文本的格式进行设置。图像也是网页中的主要元素之一，图像不但能美化网页，而且能够更直观地表达信息。在页面中恰到好处地使用图像，能使网页更加生动、形象和美观。本章导读Thechapter’sintroduction目录导航渐进训练任务1-1制作电脑版商品简介页面0101.html探索训练任务1-2制作触屏版商品简介页面0102.

3、html析疑解惑单元小结任务1-1制作电脑版商品简介页面0101.html任务描述制作电脑版商品简介页面0101.html，其浏览效果如图1-1所示。图1-1网页0101.html的浏览效果▲▲▲【任务1-1-1】启动DreamweaverCC与初识其工作界面任务描述①启动DreamweaverCC。②DreamweaverCC的工作界面主要包括菜单栏、工具栏、文档窗口、属性面板、面板组等，熟悉DreamweaverCC工作界面各个组成部分的主要功能。任务实施1．启动DreamweaverCC执行【开始】→【所有程序】→【Adobe

4、DreamweaverCC】菜单命令，即可启动DreamweaverCC。DreamweaverCC的启动画面如图1-2所示。启动成功后，会出现图1-3所示的工作界面。2．熟悉DreamweaverCC工作界面的基本组成及其功能图1-3DreamweaverCC的工作界面▲▲▲▲▲▲图1-2DreamweaverCC的启动画面2．熟悉DreamweaverCC工作界面的基本组成及其功能图1-4DreamweaverCC的界面布局与组成▲▲▲2．熟悉DreamweaverCC工作界面的基本组成及其功能（1）标题栏（2）菜单栏标题栏显示

5、网页的标题和网页文档的存储位置。DreamweaverCC的菜单栏包含10类菜单：【文件】【编辑】【查看】【插入】【修改】【格式】【命令】【站点】【窗口】和【帮助】，如图1-4所示。菜单按功能的不同进行了合理的分类，使用起来非常方便，各个菜单的具体作用和操作方法在以后各单元中将会具体说明。除了菜单栏外，DreamweaverCC还提供了多种快捷菜单，可以利用它们方便地实现相关操作。2．熟悉DreamweaverCC工作界面的基本组成及其功能利用【插入】工具栏可以快速插入多种网页元素，例如div标签、图像、表格、表单和表单控件等。在【

6、插入】工具栏类型列表中单击菜单选项，即可切换不同类型的插入工具栏，如图1-6所示。显示【插入】工具栏的方法是：选择菜单命令【窗口】→【插入】，在DreamweaverCC的主界面的右侧将显示【插入】工具栏。通常情况下会显示“常用”插入工具栏，如图1-5所示。图1-5“常用”插入工具栏按钮（3）【插入】工具栏图1-6【插入】工具栏的类型2．熟悉DreamweaverCC工作界面的基本组成及其功能【文档】工具栏中包含用于切换文档窗口视图的“代码”“拆分”“设计”“实时视图”按钮和一些常用操作，如图1-7所示。（4）【文档】工具栏图1-7

7、【文档】工具栏2．熟悉DreamweaverCC工作界面的基本组成及其功能【标准】工具栏中包含网页文档的基本操作按钮，例如【新建】【打开】【保存】【剪切】【复制】【粘贴】等按钮，如图1-8所示。（5）【标准】工具栏图1-8【标准】工具栏【提示】如果【标准】工具栏处于隐藏状态，可以在已显示工具栏位置单击右键，弹出图1-9所示的快捷菜单，在该快捷菜单中选择【标准】命令即可显示【标准】工具栏。图1-9显示【标准】工具栏的快捷菜单2．熟悉DreamweaverCC工作界面的基本组成及其功能“文档”窗口也称为文档编辑区，该窗口所显示的内容可以

8、是代码、网页，或者两者的共同体。用户可以在文档工具栏中单击【代码】【拆分】或者【设计】按钮，切换窗口视图。（6）“文档”窗口【属性】面板用于查看和更改所选取的对象或文本的各种属性，每个对象有不同的属性。属性面板比较灵活，它随着选择对象