《网页设计与制作》课件-项目一 任务一 制作个人简介

Dreamweaver网页制作基础教程沈阳市信息工程学校项目一制作“简介”

核心技术

网页的构成

文字格式的基本应用

站点的建立和管理任务目标

任务一：制作“个人简介”

任务二：制作“学校简介”

任务三：利用站点管理网页能力目标

网页简介

文本格式的设置

浏览网页文件

HTML代码

建立站点项目背景根据学校的要求，育才学校网站需要增加学校简介和个人简介两项内容。在制作动态页面之前需要网站管理员预先设计相关的静态页面。项目分析在网页设计中，往往需要涉及文字、图片、多媒体等信息。其中，文字修饰是很重要的一个元素。在这个项目中，简单的文字内容可以手工输入，为节省时间，大段的文字可以从素材中获得。项目目标通过对于“个人简介”和“学校简介”两个页面的设计，掌握HTML语言的基本常识及网页的基本组成部分。同时对表格的应用及CSS样式表的应用也有一个初步的认识。知识准备网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站是由网页组成的。网页是一个文本文件，可以存放在世界上某一部计算机中，而这部计算机一般是与互联网相连的。网页由网址（URL）来识别与存取，是万维网中的一“页”，是HTML（超文本标记语言）格式（文件扩展名为.html或.htm）。可以通过网页来展现文本、图像、动画、视频、音频，甚至是三维虚拟仿真的信息。任务一制作个人简介

任务描述要求网站管理员为育才学校网站设计一个“个人简介”网页，作为后期网站设计的模板，或者作为后期进行动态页面设计的依据。任务准备（1）计算机已经安装DreamweaverCS3软件。（2）将需要的素材放到计算机中指定的文件夹内。工作过程 步骤1：单击“开始”菜单中的Dreamweaver软件项，如图1.1.1所示。或者双击桌面上的Dreamweaver图标，打开Dreamweaver软件，如图1.1.2所示。图1.1.1“开始”菜单图1.1.2桌面图标步骤2：在Dreamweaver中选择“文件”→“新建”选项，如图1.1.3和图1.1.4所示。图1.1.4新建文件窗口图1.1.3文件菜单在新建文件窗口选择“空白页”→“HTML”→“创建”选项。新建文档的工具栏如图1.1.5所示。图1.1.5工具栏步骤3：单击工具栏上的插入表格按钮，插入一个8行2列的表格，如图1.1.6至图1.1.8所示。图1.1.6插入表格按钮图1.1.7表格参数图1.1.8新建表格选择“文件”→“保存”选项，保存文件到一个指定的文件夹中，如D：盘的根目录，命名为JianJie.html，如图1.1.9和图1.1.10所示。图1.1.9“文件”菜单图1.1.10“另存为”对话框步骤4：在表格内输入如图1.1.11所示的内容。图1.1.11新建表格其中的具体内容，可以用自己的真实信息来填写。步骤5：选择文字“个人简介”，用鼠标右键单击属性，在页面下方的属性面板中设置被选中文字的大小、颜色、粗细等参数，设置为24号，粗体，前景色#CC0000，背景色#CCCCCC，如图1.1.12所示。 图1.1.12文字选择状态在图1.1.13为对文字进行设置时最常用的属性。图1.1.13属性设置步骤6：依次设置其他文字的格式，最后的效果如图1.1.14所示。图1.1.14设置文字格式的表格步骤7：在浏览器中预览选择文件工具栏上的［浏览调试］按钮，如图1.1.15所示。在IE或者其他浏览器中查看最后的效果，如图1.1.16所示。图1.1.15文件工具栏图1.1.16制作好的表格任务总