网站设计解决方案

青青草鲜花销售网设计报告

1．网站的技术解决方案

本次设计主要使用了ASP作为开发工具，使用SQL完成数据库设计，用C#完成代码编写。下面将对开发工具做简要的说明。

4.1.ASP简介

ASP是Active Server Pages的缩写，是Microsoft公司开发的Web服务器端脚本开发环境，利用它可以生成动态、高效的Web应用程序。

虽然人们习惯于将ASP称为ASP语言，但从严格意义上讲，ASP只是为VB Script和JavaScript等脚本语言提供了一个运行环境，使开发人员可以在HTML代码中使用脚本语言编写程序。

一个ASP文件相当于一个可执行文件，因此必须放在Web服务器上有可执行权限的目录下。当浏览器向Web服务器请求调用ASP文件时，就启动了ASP。Web服务器开始调用ASP。将被请求的文件从头读到尾，执行每一个命令，然后动态生成一个HTML页面并送到浏览器。由于ASP在服务器端解释执行，开发者可以不必考虑浏览器是否支持ASP，也不用担心程序会被从客户端下载。

4.2.SQL sever 简介

数据库设计采用SQL Server 完成。SQL即结构化查询语言，是一种数据库查询和程序设计语言，用于存取数据以及查询、更新和管理关系数据库系统。SQL是高级的非过程化的编程语言，允许用户在高层数据结构上工作。它不要求用户指定数据的存放方法，也不需要用户了解具体的数据存放方式，所以具有完全不同底层结构的不同数据库，可以使用相同的SQL语言作为数据输入与管理的接口。SQL语言结构简洁，功能强大，简单易学，自从IBM公司1981年推出以来，SQL语言得到广泛的应用。Web数据库通常只在互联网中以Web查询接口方式访问的数据库资源，其结构是后台数据库管理系统存储数据信息，对外提供包含表单的Web页面作为访问接口，查询结构也可以包含数据列表的Web页面形式返回给用户。Web数据库集成的主要目的是为用户提供多个Web数据库资源的统一访问方式。现有的Web数据库集成方式可以分为：数据供应模式、数据收集模式和元搜索模式。在此方面，SQL都能很好的发挥其功能，完成Web数据库的需要。鉴于SQL的语言体系，以及相关功能，SQL理当成为Web数据库设计实施的首选。

4.3.c#简介

青青草鲜花销售网站开发语言采用面向对象的结构化程序语言C#。C#(C Sharp)是微软(Microsoft)为.NET Framework量身订做的程序语言，C#拥有C/C++的强大功能以及V isual Basic简易使用的特性，是第一个组件导向(Component-oriented)的程序语言，和C++与Java 一样亦为对象导向(object-oriented)程序语言。同时，C#的面向对象技术已经成熟，且效率比较高，是唯一为.NET framework设计的语言，是在移植到其他操作系统上的.NET版本中使用的主要语言。而且C#采用一种更清晰的新语法来描述面向对象的多态性，完全兼容.NET 平台的其他编程语言，可以用来开发.NET平台的所有应用程序类型。C#一经推出，就以其强大的操作能力、一流的面向对象编程支持、优雅的语言风格、高效的程序性能、与.NET Framework 的无缝集成等特性，伸手广大程序员的追宠，尤其是Web应用和https://www.wendangku.net/doc/8014217273.html,技术的普及化，使其成为Internet应用开发的首选编程语言。

2．网站内容规划

青青草鲜花销售网站首先展现给用户的ST_Default.aspx页面，此页面主要由两个框架构成。核心部分是ST_Main.aspx页面，通过该页面调用验证系统对用户类型进行判断。如果判断是管理员，则展现给用户的为管理员页面（admin为管理员账号）；如果是一般用户，则为一般用户界面。同时在ST_Main.aspx页面中海为用户提供了注册功能。

鲜花管理

订单管理

用户管理

查找管理

首页

注册

用户订单

购物车

收藏

青青草鲜花销售网站操作流程

青青草鲜花销售网站采用两层架构，每个页面均可以通过Web展示层直接对数据库进行访问，不使用中间业务逻辑以及与数据库连接的接口。数据库是本系统的最底层，数据访问层建立在数据库之上，Web展示层通过数据访问层访问数据库。数据访问成封装了数据库中的选择、添加、更新、删除操作，同时还Web展示层提供了访问数据库的接口还函数。

两层结构模式

Web层是系统的最高层，向用户展示各种页面，用户通过页面对系统进行操作，并实现用户各种操作信息的添加、修改和删除。与数据库直接关联，其数据访问模块封装了对数据库的所有操作，包括数据的添加、修改、删除和查询。

数据库用来存储青青草鲜花销售网站所有数据，如各种鲜花信息、用户信息、订单信息等，是系统必不可少的一个重要部分。

一般用户界面系统功能模块图

3． 系统特点和各功能模块功能简解（用户界面、管理员界面及公共模块）

6.1公共模块的编写 主页面：

6.1.1登录系统 整个登录系统的关键在于ST_Left.aspx 页面，此页面用到了两个panel 控件，在第一个panel 控件中包含了一个3行2列的表。表中用了2个文本框，一个用于输入用户名，另一个用于输入密码；还用了一个按钮和一个超链接。超链接用来链接注册页面（ST_Register.aspx ）。ST_Left.aspx 页面中还有2个gridview 控件，分别用于显示鲜花类型和鲜花排行（前10），本页面获得信息通过ST_Left.aspx.cs 调用的系统模块进行验证。

登陆界面

界面设计有显示让用户登录信息的panel和没有登录时不显示，只有登录后显示其访问次数和最近访问时间的panel。最后还包括两个hyperlink超链接，允许用户修改个人信息。

6.1.2注销登录

注销用户登录是由ST_Logout.aspx和ST_Logout.aspx.cs来实现的，由于界面没有任何元素，所以这里列出部分代码及解释。

主要代码:

namespace ST_GROUP.FlowerPrearrange

{

public partial class ST_Logout : System.Web.UI.Page

{

protected void Page_Load(object sender, System.EventArgs e)

{

Session["UserName"] = null;

Session["UserID"] = null;

Response.Redirect("ST_Main.aspx");

}

#region Web Form Designer generated code

override protected void OnInit(EventArgs e)

{

//

// CODEGEN: This call is required by the https://www.wendangku.net/doc/8014217273.html, Web Form Designer.

//

InitializeComponent();

base.OnInit(e);

}

///

private void InitializeComponent()

{

}

#endregion

}

}

因为用户登录时将其信息保存在了session中，所以在注销时，需要按代码第4~6行的写法将用户注销，注销后将返回到ST_Main.aspx。

6.1.3注册

注册是用户通过登陆框旁边的“注册”来进入ST_Register.aspx页面，即注册页面进行注册。

注册界面

6.2管理员界面

管理员界面：

6.2.1用户管理

在管理员页面中单击“用户管理”超链接即可进入用户管理页面ST_ManageUser.aspx。

用户管理界面

这里用到的gridview控件用来向用户展示已有的信息，同时提供删除用户信息的操作。从页面显示的效果可以看出，gridview的第一列显示了多个复选框。在模板中其实只有2个checkbox，一个表示全选；一个是普通选择，这个普通的放在模板中，会自动随数据的行数创建等量的复选框。

用户信息后台页面ST_ManageUser.aspx.cs主要实现了查看和删除用户的功能，通过bind （）方法来实现从数据库中获取用户数量和用户信息填充gridview控件，单击gridview控件中的删除按钮时，将删除所要删除的信息。正如以上提到，gridview控件使用的是复选框，删除用户时可以选择多条记录。

6.2.2鲜花管理

在管理员界面中点击“鲜花管理”直接进入ST_FlowerManage.aspx。此页面用了一个gridview控件，3个超链接以及一个Literal控件。Gridview控件用来向用户展示已经有的鲜花信息，同时提供删除鲜花的操作；3个超链接分别用来添加鲜花、添加鲜花种类和退出；Literal控件用来显示操作成功与否。

鲜花管理界面

其中查看和删除鲜花的功能是通过后台页面ST_FlowerManage.aspx来实现的，并且提供了添加鲜花、添加鲜花种类和退出的入口。Page_Load在页面加载时运行，其中初始化一些ViewState，并通过ST_GridBind()方法将数据显示出来。

Page_Load的代码：

protected void Page_Load(object sender, System.EventArgs e)

{

if (!(this.IsPostBack))

{

try

{

ViewState["Sort"]="";

ViewState["Page"]="0";

ST_GridBind();

}

catch (Exception er)

{

ST_ShowErrMsg(er.Message);

}

ErrorMsg.Visible =false;

}

}

而ST_GridBind()方法显示数据实际上是调用了ST_MyFlower类的Get_Flower()方法从数据库中读取数据，并绑定到控件上的。

“添加鲜花”可以进入到ST_AddFlower.aspx添加鲜花页面：

添加鲜花界面

鲜花有多种类型，在ST_AddFlower.aspx页面中可以看到有个“鲜花类型”下拉列表框

供管理员选择鲜花类型，在初始化时先进行“鲜花类型”下拉列表框的初始化。

6.2.3订单管理

在管理员界面中单击“订单”超链接，即可进入管理员界面ST_ManageOrder.aspx：

订单管理界面

这个页面使用了一个gridview控件和一个标签。Gridview控件用来向管理员展示用户的订单信息，同时提供处理订单的操作。事件处理是通过ST_ManageOrder.aspx.cs后台实现，实现方法也是通过调用ST_Bind()方法从数据库获取数据填充gridview控件。

ST_Bind()方法代码：

private void ST_Bind()

{

try

{

DataSet ST_ds =

ST_GROUP.FlowerPrearrange.ST_Order.ST_GetDetails(int.Parse(Request["orderId"].ToString()));

ST_ds.Tables[0].DefaultView.Sort = ViewState["Sort"].ToString();

this.GridView1.DataSource = ST_ds.Tables[0].DefaultView;

this.GridView1.DataBind();

}

catch(Exception ex)

{

ST_ShowMsg(ex.Message,1);

}

}

6.2.4查找和退出

信息查找页面（ST_Search..aspx）可以通过“查找”超链接进入:

查找界面

此页面用了一个文本框，一个下拉列表框和两个按钮。文本框用来输入鲜花名称，下拉列表框用来显示鲜花类型，按钮用来提交和重填。找到鲜花后的界面如下图：

查找到的鲜花

管理员或者用户希望用其他身份登陆时则可以点击右上角的“退出”进入主页重新登录。

6.3一般用户界面

一般用户界面：

6.3.1购物车

在一般用户主界面中单击“购物车”超链接，即可进入ST_AddToCart.aspx页面：

购物车

此页面用了一个gridview控件（展示购物车中的信息），两个按钮（分别用来清空购物车和提交信息）以及一个显示提示的Literal控件。

以下是加载购物车信息的代码：

private void ST_BindGrid()

{

DataTable ST_myDt;

DataRow ST_myDr;

string ST_str="";

//HttpCookie cookie;

ST_myDt=new DataTable();

ST_myDt.Columns.Add(new DataColumn("ST_id",ST_str.GetType()));

ST_myDt.Columns.Add(new DataColumn("ST_Name",ST_str.GetType()));

ST_myDt.Columns.Add(new DataColumn("ST_Price",ST_str.GetType()));

ST_myDt.Columns.Add(new DataColumn("ST_Number",ST_str.GetType()));

ST_myDt.Columns.Add(new DataColumn("ST_Discount",ST_str.GetType()));

ST_myDt.Columns.Add(new DataColumn("ST_Totle",ST_str.GetType()));

if(!Object.Equals(Request.Cookies["ShopFlowerCart"],null))

{

HttpCookie cookie=Request.Cookies["ShopFlowerCart"];

for(int i=0;i

{

int ST_id;

DataRow ST_tempDr;

double ST_totle;

ST_myDr=ST_myDt.NewRow();

if((cookie.Values.AllKeys[i]!="")&&(cookie.Values[i]!=""))

{

ST_id=int.Parse(cookie.Values.AllKeys[i]);

ST_tempDr=ST_myFlower.ST_GetFlowerDetail(ST_id);

ST_myDr[0]=ST_id;

ST_myDr[1]=ST_tempDr["ST_Name"];

ST_myDr[2]=ST_tempDr["ST_Price"].ToString();

ST_myDr[3]=cookie.Values[i];

ST_myDr[4]=ST_tempDr["ST_Discount"].ToString();

ST_totle=double.Parse(ST_myDr[2].ToString())*double.Parse(ST_myDr[3].ToString());

ST_totle*=double.Parse(ST_myDr[4].ToString());

ST_myDr[5]=ST_totle.ToString() ;

ST_myDt.Rows.Add(ST_myDr);

}

}

}

dg_Cart.DataSource=ST_myDt.DefaultView;

dg_Cart.DataBind();

}

首先动态创建一个表格，然后设置表格中各行各列的类型，然后判断购物车是否为空，如果不为空，则将缓存的购物车内容添加到动态生成的表格中，然后进行数据绑定。

6.3.2收藏

通过主页面的“收藏”超链接进入到收藏页面（ST_AddToTempStore.aspx）：

收藏的鲜花

此页使用了一个gridview控件（向用户展示收藏的鲜花信息）和一个标签（向用户提供提示信息）。

6.3.3我的订单

通过用户主界面中单击“我的订单”超链接即可进入ST_ShowUserOrders.aspx页面：

您的订单

此页面用了一个gridview控件（展示个人订单的基本信息）和两个标签（提示用户）。在用户查看订单时，可以根据订单号导航到那张订单。实现个人订单查看的代码：

protected void Page_Load(object sender, System.EventArgs e)

{

if(!Page.IsPostBack)

{

if(Object.Equals(Session["UserName"],null))

{

Response.Redirect("ST_Error.aspx");

}

else

{

ViewState["Sort"] = "";

}

}

try

{

ST_Bind();

}

catch(Exception ex)

{

ST_ShowMsg(ex.Message,1);

}

}

初始化页面的事件只是判断当前用户是否登陆，ST_Bind()绑定gridview的数据。

6.3.4查找及退出

查找及退出功能在管理员模块和用户模块的功能是完全一样的，这里就不多说了。7．网页设用户管理计

网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。所以网页设计在网站建设中是相当重要的。页面是网站用户与网站接触的直接媒体，一个好的，漂亮的界面更有利于吸引用户眼球，引起用户注意力，制造一个好的口碑，从而招来更多的用户。

Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此我们必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。我们会根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，以“消费者（customer)”为中心，而不是以“美术”为中心进行设计规划。

Web站点应针对所服务对象（机构或人）的不同而具有不同的形式。有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。

为了做到主题鲜明突出，要点明确，网站设计应按照用户的需求，以简单明确的语言和画面体现站点的主题；调动一切手段充分表现网站点的个性和情趣，办出网站的特点。

青青草鲜花销售网站，页面风格简洁明了，没有做过多的渲染，但给人以一种清新超凡

的感觉。各种色彩搭配清新，主题明了，虚实结合，结构清晰并且便于使用，以及清晰的导航设计，都将成为用户的焦点，必将赢得用的一致好评。

8．设计实现过程

1. 成员分工：明建波负责数据表建立、数据库连接、主界面模块设计，我负责用户界面模块、管理员界面模块及公共模块设计。

2. 通过需求分析确定系统应具备的功能，鲜花管理，用户信息管理，评论管理等。

3．数据表建立、数据库连接。

4. 通过上述准备对网站进行系统进行总体设计和详细设计。

5. 使用面向对象程序设计方法和C#语言编写程序，实现系统。

6. 使用白盒测试法和黑盒测试法等测试方法对系统进行测试，找出并改正程序中的语法错误以及系统功能上的缺陷。

7. 后期宣传及推广。

9．网站维护与测试

首先用白盒测试法对程序及结构进行测试，其次找身边的同学帮助使用，测试其功能是否完全、可靠，如注册功能，登录功能，购物车功能等等，以找出本网站功能上的缺陷以不足，并加以改正。

一个好的网站需要定期或不定期地更新内容，才能不断地吸引更多的浏览者，增加访问量。网站维护是为了让网站能够长期稳定地运行在Internet上。同时，及时地调整和更新您的网站内容，在瞬息万变的信息社会中抓住更多的网络商机，以赢来更多的利益。青青草鲜花销售网维护内容主要包括以下几点：

服务器及相关软硬件的维护，对可能出现的问题进行评估，制定响应时间数据库维护，有效地利用数据是网站维护的重要内容，因此数据库的维护要受到重视；内容的更新、调整等；制定相关网站维护的规定，将网站维护制度化、规范化；做好网站安全管理，防范黑客入侵网站，及时检查网站各个功能，链接是否有错。

10．网站发布与推广

网站的最终目的都是要发布的Internet上去，让大家看到自己所做的网站，同时也为大家带来网络的便利，同时也实现一定的商业目的。青青草网站发布及推广初步拟通过以下几种方式：

1.博客推广（如新浪博客、网易博客等）

2.论坛推广（如猫扑、天涯等知名论坛）

3.问答推广（国内主流问答网络平台，如百度知道）

4.邮件推广（如使用新浪、网易邮件不定向发出链接）

5.百度、Google搜索化（实现关键词到百度、Google首页）

6.身边朋友宣传，广告等。

11．网站名称、管理员用户名和进入密码、小组人员分工情况说明

12．小结：包括存在问题和系统改进方向

本网站安全系数较低，用户管理功能不完全，鲜花管理功能也不完全。初步拟不断对本系统安全功能进行改进，比如防范SQL输入式攻击，同时不断完善改进系统功能，使本系统更加趋近完善，更加满足用户需求。提高本网站的信誉度与口碑，提高知名度。

13．主要参考资料及文献

[1] 袁志芳,田晓芳.ASP程序设计与WEB信息安全[J].中国教育信息化,2007.21.

[2] https://www.wendangku.net/doc/8014217273.html,项目开发项目开发指南[M].清华大学出版社，2010

[3] 张翼. Web环境下数据库系统安全访问控制机制研究[D]. 大连理工大学, 2007.

[4] 韩家炜，孟小峰，王静，等．Web 挖掘研究[J]．计算机研究与发展，2001.

[5] 徐琪,马希荣,冯锋.ASP和ADO访问Web数据库技术[J]. 电脑开发与应用,2000,(05).

网页设计与制作实例教程

网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1．A 2．B 3．C 4．C 5．A 二、判断题 1．√2．×3．√4．×5．√ 三、问答题 略 第2章网页规划设计 一、选择题 1．D 2．A 3．C 4．A 5．C 二、判断题 1．×2．×3．×4．√5．√ 三、问答题 1．答：网站需求分析一般包括三个阶段的内容：网站背景分析、总体需求分析、具体需求分析。（每个阶段可再详细描述。） 2．答：可从以下几个方面来阐述网站设计的原则：①日期、时间和数字；②欢迎词； ③弹出窗口和引导页面；④新闻和公告信息；⑤网址；⑥控件；⑦链接；⑧主页内容 3．答：打开新浪网首页，分析其布局类型。（答案略） 4．答：网页色彩搭配方法可从以下两个方面去阐述：①根据页面风格以及产品本身的诉求确定主色；②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述：①用一种色彩；②用两种色彩；③用一个色系；④用黑色和一种色彩以及色彩搭配忌讳的方面。 5．答：打开当当网，具体分析其规划过程。（答案略） 第3章初识网页制作软件 一、选择题 1．C 2．C 3．B

二、填空题 1．代码、拆分、设计2．文件、资源、规则3．超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1．D 2．B 3．A 4．D 5．ABD 6．D 7．B 8．D 9．A 10．A 二、判断题 1．√2．√3．×4．√5．√6．√7．√8．√9．×10．√三、操作题 略 第5章设置网页超级链接 一、选择题 1．D 2．D 3．A 4．D 5． C 二、判断题 1．×2．×3．×4．√5．× 第6章使用CSS样式美化网页 一、选择题 1．B 2．C 3．C 4．B 5．A 6．D 7．D 8．D 9．B 10．C 11．A 12．A 13．C 14．D 15．D 16．A 17．A 18．B 19．D 20．D 二、简答题 1．×2．×3．×4．×5．×6．×7．√8．×9．√10．√11．×12．×13．×14．√15．√16．√ 第7章规划布局网页 一、选择题 1．B 2．A 3．B 4．B 5．D 二、简答题

网页制作技术期末综合习题

网页制作技术期末综合习题 一、填空题 1．Dreamweaver MX有______种工作界面。 2．在站点中建立新的网页文件，其默认的文件扩展名为_________。 3．打开站点面板时，可执行__________菜单中的“站点”命令。 4．如果不想在段落间留有空行，可以按__________组合键。 5．为了让浏览者快速了解图像的概况，在Dreamweaver MX提供了设置__________的功能。 6．单元格内间距是指单元格内的对象与单元格__________之间的距离。 7．单元格间距是指单元格与__________之间的距离。 8．为了使所设计的表格在浏览网页时，不显示表格的边框，应把表格的边框宽度设为_______。 9．在表格的__________中可以插入另一个表格，这称为表格的嵌套。 10．表格的嵌套是指在一个表格中插入另一个表格，表格的平铺是指将不同的表格放置在网页的____________。 11．为了加快下载速度，尽量_______整个网页的内容放在一个大的表格中。 12．在_________视图中，可以使用拖动鼠标的方法在页面中绘制布局单元格。 13．在_________视图中，可以使用拖动鼠标的方法移动单元格的位置。 14．在Dreamweaver MX中，可以插入文本框的类型有单行文本框、多行文本框和__________。 15．在网页种插入文本框、单选框、多选框或跳转菜单时，要先插入空白的_________。 16．在表单中可以插入的按钮包括提交按钮、重置按钮和___________。 17．在包含框架的页面中，每个框架都显示一个________。 18．保存包含框架的页面时，如果页面中包含四个框架，要保存全部页面信息，共需要保存______个文件。每个文件的扩展名都为htm。 19．在保存框架文件时，框架的文件名必须以字母开头且________大小写。 20．浏览器在第一次装载文框架网页时，如果需要指定该框架所显示的网页文件，则要设置该框架的______________属性。21．如果链接的目标文件在本地站点中，可以使用绝对URL或相对URL，如果要链接站点以外的目标文件，则必须使用______________。 22．创建锚链接之前，必须在页面中失当的位置____________。 23．锚链接所起到的作用，就是在页面中起到________的作用，节约查找信息的时间。 24．建立与电子邮件的超链接时，在属性面板的链接文本框中输入__________+电子邮件地址。 25．在制作文本超链接时，建立了超链接德文本__________发生了变化，并且多了一条下划线。 26．使用_____________可以改变页面中建立超链接文本的显示属性。 27．使用_______________可以将格式与网页结构分离，同时可以控制多个网页稳当。 28．通过层可以非常精确地对页面中的________定位。 29．___________是指包含在另一个层中的层。 30．如果选中多个层，_______________的一个层调整柄一黑色突出显示，其他被选中层的调整柄以白色显示。 31．利用属性面板使多个层实现左对齐的操作时，选中多个层后应该在属性面板的_______文本框中输入数值。 32．默认情况下，层的__________值是按照层的创建顺序依次增加。该值大的层显示在层的上面。 33．用户与网页进行简单交互时，若不使用服务器端的应用程序，可以使用javascript脚本外还可以使用Dreamweaver MX 提供的__________功能。 34．使用时间轴面板可以设置各个____________的显示属性以及整个时间轴的播放顺序。 35．_____________是动画条中为对象设置位置、大小、颜色等属性的帧。 36．用鼠标拖动动画条，可以调整其在时间轴的位置，从而可以改变对象的持续时间。 52．在文档窗口中，用拖动弹出式菜单边框位置可以设置其相对于触发对象位置，用这种方法只能确定_______________的

网制作综合实例

网页制作综合实例 16.1制作前的准备工作 首先在E盘上建立一个文件夹（如玫瑰信使），再在其下建立images文件夹和css文件夹。将“ch16/images”文件夹下的所有图像拷贝到“玫瑰信使/images”文件夹下。 建立站点和规划目录结构、指定默认图像文件夹 主页制作前的准备工作，有定义站点和设计网站结构的目录，还有就是要将网页设计制作中需要用到的所有图像素材整理好，最好是放在站点根目录中的一个文件夹中，如images。这样便于设计制作时的选取使用，也不易造成素材的混乱。如下图： 规划站点目录结构 为站点中使用的图像文件指定一个默认图像文件夹，如下图： 设置站点中的默认图像文件夹 在站点下建立一个主页文件index.html。 16.2设置页面属性及样式 16.2.1页面属性设置 1.在站点资源管理器的本地视窗中，选择并双击已经定义的首页面文件ch16\index.asp。 2．在打开的index.asp文件的文档窗口中，选择“修改”---“页面属性”菜单项，打开“页面属性”对话框。 设置网页标题为：“家庭百科” 设置背景图像为images/bj.gif 将“左边界”、“顶部边界”、“边界宽度”、“边界高度”项均设为5。 3．设置完成后，单击“确定”按钮，确定操作返回到index.asp文档窗口。 16.2.2定义CSS样式文件 定义body样式 1.在index.htm文档窗口中，依次单击“窗口”---“CSS样式”菜单项，打开“CSS样式”面板。选择 “新建CSS样式”菜单命令。 2.打开“新建CSS样式”对话框，“类型”选择“重定义HTML标签”，在“标签”框中选择或输入 body，“定义在”选择“（新建样式表文件）”。 3.单击“确定”按钮，在弹出的“保存样式表文件为”对话框中，选择样式文件保存的路径（站点下的 CSS文件夹），输入样式文件名（这里存为css）。 4.单击“保存”按钮，在出现的样式定义对话框中选择“类型”，在“字体”下拉列表框中选择“宋 体”;在“大小”下拉列表中选择“9”，后面的单位下拉列表框中选择“点数（pt）”度量单位。 5.单击“确定”按钮，便完成对body标记的定义

《网页制作 案例教程》题库2

第1小题(Dreamweaver单选题(1分) 下述关于图像对象的设置错误的是（_______）。 A 按住shift键后用鼠标拉动图像控制柄可保持图片宽高比例不变 B 直接在属性面板输入图像的宽高像素，也能改变图像的显示大小 C 图像属性面板中的“对齐方式”指的是调整图像与同一行中文本的相对对齐 D 对图像进行重新取样，不会影响图像品质 第2小题(Dreamweaver单选题(1分) 下列哪种软件是用于网页排版的？（_______） A Flash B Photoshop C Dreamweaver D CuteFTP 第3小题(Dreamweaver单选题(1分) Dreamweaver是哪家公司的产品？（_______） A IBM B Corel C Microsoft D Adobe 第4小题(Dreamweaver单选题(1分) 下列的HTML标记中，定义表格的单元格是（_______）。 A tr B dr C br D td 第5小题(Dreamweaver单选题(1分) 想将文字“2”设置为上标文字，在HTML5代码中应如何编写( ) A 2 B 2 C ² D ₂ 第6小题(Dreamweaver单选题(1分) 标记符中连接图片的参数是（_______）。 A href B src

C type D align 第7小题(Dreamweaver单选题(1分) 要隐藏一个ap层(设置了绝对定位DIV盒子)，需要把它的可见性设置为（_______）。 A default B inherit C visible D hidden 第8小题(Dreamweaver单选题(1分) 如何去掉文本超级链接的下划线？( ) A a {text-decoration:none} B a {decoration:no underline} C a {underline:none} D a {text-decoration:no underline} 第9小题(Dreamweaver单选题(1分) （1）在CSS中下列哪一项是“右边框”的语法（） A border-right<值> B border-top:<值> C border-right-width: <值> D border-top-width:<值> 第10小题(Dreamweaver单选题(1分) 以下哪一种选择器是标签选择器（） A #newbox br B table C #newtext D .newtext 第11小题(Dreamweaver单选题(1分) 下列（_______）可能是自定义样式的名字。 A body B .pic C text D c

网页设计与制作实例教程习题答案.doc

网页设计与制作实例教程
习题答案
第 1 章 网页与网站基础
一、选择题
1．A 2．B
二、判断题
1．√ 2．×
三、问答题
略
3．C 3．√
4．C 4．×
5．A 5．√
第 2 章 网页规划设计
一、选择题
1．D 2．A 3．C 4．A 5．C
二、判断题
1．× 2．× 3．× 4．√ 5．√
三、问答题
1．答：网站需求分析一般包括三个阶段的内容：网站背景分析、总体需求分析、具体 需求分析。（每个阶段可再详细描述。）
2．答：可从以下几个方面来阐述网站设计的原则：①日期、时间和数字；②欢迎词； ③弹出窗口和引导页面；④新闻和公告信息；⑤网址；⑥控件；⑦链接；⑧主页内容
3．答：打开新浪网首页，分析其布局类型。（答案略） 4．答：网页色彩搭配方法可从以下两个方面去阐述：①根据页面风格以及产品本身的 诉求确定主色；②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述：①用一种色彩；②用两种色彩；③用一个 色系；④用黑色和一种色彩以及色彩搭配忌讳的方面。 5．答：打开当当网，具体分析其规划过程。（答案略）
第 3 章 初识网页制作软件
一、选择题
1．C 2．C
3．B

二、填空题
1．代码、拆分、设计 2．文件、资源、规则 3．超级链接
三、操作题
略
第 4 章 制作网页内容
一、选择题
1．D 2．B
二、判断题
1．√ 2．√
三、操作题
略
3．A 4．D 5．ABD 6．D 3．× 4．√ 5．√ 6．√
7．B 8．D 9．A 10．A 7．√ 8．√ 9．× 10．√
第 5 章 设置网页超级链接
一、选择题
1．D 2．D
二、判断题
1．× 2．×
3．A 4． D 5． C 3．× 4．√ 5．×
第 6 章 使用 CSS 样式美化网页
一、选择题
1．B 2．C 11．A 12．A
3．C 13．C
4．B 14．D
5．A 6．D 7．D 15．D 16．A 17．A
8．D 9．B 10．C 18．B 19．D 20．D
二、简答题
1．× 2．× 3．× 4．× 5．× 6．× 7．√ 11．× 12．× 13．× 14．√ 15．√ 16．√
8．× 9．√ 10．√
第 7 章 规划布局网页
一、选择题
1．B 2．A
二、简答题
3．B
4．B 5．D

网页设计综合实例(上)

网页设计综合实例(上) 直线网https://www.wendangku.net/doc/8014217273.html, 在本文中我们将帮助您亲身体验Fireworks在网页创作中的强大功能，我们通过一个网站页面的计过程，为您详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。 通过解决您所遇到的每一个具体的任务，您将对Fireworks的主要功能有一个统一的全局性的 了解，同时为您在设计中如何利用Fireworks提供一个清晰的思路。下图是这个教程完成后的 外观： 我们将根据这一个典型网站其中一个页面设计流程，使您逐步学习到以下内容： 1、导入并编辑位图图像。 2、自动任务处理 3、创造矢量图形 4、创建文字 5、创建按钮 6、创建导航条 7、设定按钮属性 8、建立切片 9、创建拖拽翻转效果 10、创建弹出菜单 11、创建变形动画 12、优化图像 13、输出HTML文件到Dreamweaver 14、在Dreamweaver中进行往返表格编辑 一、设计前准备

1、网站介绍： 在教程介绍之前首先让我们来看一下我们将要完成的主要任务。这是一个服饰公司的企业网站计，公司主要以男式服饰为主，同时也兼顾部分女士服饰。网站的主要任务是帮助浏览者了解公司基本概况和产品信息，并作为公司的一个展示窗口，向参观者展示企业的形象及产品系列。根据业的要求，网站包含了企业概况、企业人才、产品展示、公司荣誉以及联系方式。我们将以此得到网的导航结构。 2、设计指导思想： 本网站设计的指导思想是在网络上营造一个优雅、高贵、宁静的氛围，为了体现这一主题，设者将纹理、景深、光影、基调与有形的模特照片和静态的文字结合起来，更多的使用直线、坚硬的缘、暗的色调来组成网站界面。页面中以较大面积的男性模特图片突出男式服饰这一主题，以穿插直线段体现一种服装纹理的感觉。公司的名称则以一种柔软光滑的粗倩体来表现，以打破整个页面坚硬感，同时以白色突出企业名称，达到非常亮眼的感觉。 3、页面结构： 整个网站采用统一的结构，分为上下两个部分，上面为网站的导航条，下面左边以不同的男式饰图片及文字标题表示各页主题。右边为内容区，以深色带条纹的图片作为背景。 下面我们将根据上述设计分析，分不同的部分为您介绍制作过程。在新建一个文件后，我们需对我们的工作环境进行简单的设定，以符合我们的任务要求。首先需要设定工作区的面积及背景颜打开Modify>Canvas Size针对常见的800x600分辨率，我们设定工作区的长为776这可以根据需定，但最好不要超过778，高为515根据实际内容确定，再执行Modify>Canvas Color设定背景色色。再打开View>Grid>Edit Grid对话框，设定水平方向网格间距为10像素，垂直方向为5像素将网格颜色设为暗灰色以不影响观察页面，打开网格显示和网格捕捉。如下图所示： 一、导入并编辑位图图像。 Fireworks4带有完善的位图创建、修改和处理功能，我们可以导入外部位图文件并对它进行编可以修改和删除位图中的颜色，可以向对矢量图一样增加效果。我们的工作将从层面板开始，新建个文件后，默认的只有两个图层Web层和Layer1层，双击Layer1层，将层名改为“背景层”。如图所示：

网页设计与制作实例教程

.
..
.
网页设计与制作实例教程
习题答案
第 1 章 网页与基础
一、选择题
1．A 2．B
二、判断题
1．√ 2．×
三、问答题
略
3．C 3．√
4．C 5．A 4．× 5．√
第 2 章 网页规划设计
一、选择题
1．D 2．A 3．C 4．A 5．C
二、判断题
1．× 2．× 3．× 4．√ 5．√
三、问答题
1．答：需求分析一般包括三个阶段的容：背景分析、总体需求分析、具体需求分析。 （每个阶段可再详细描述。）
2．答：可从以下几个方面来阐述设计的原则：①日期、时间和数字；②欢迎词；③弹 出窗口和引导页面；④新闻和公告信息；⑤网址；⑥控件；⑦；⑧主页容
3．答：打开新浪网首页，分析其布局类型。（答案略） 4．答：网页色彩搭配方法可从以下两个方面去阐述：①根据页面风格以及产品本身的 诉求确定主色；②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述：①用一种色彩；②用两种色彩；③用一个 色系；④用黑色和一种色彩以及色彩搭配忌讳的方面。 5．答：打开当当网，具体分析其规划过程。（答案略）
第 3 章 初识网页制作软件
一、选择题
1．C 2．C 3．B
..
..
..
..

.
..
.
二、填空题
1．代码、拆分、设计 2．文件、资源、规则 3．超级
三、操作题
略
第 4 章 制作网页容
一、选择题
1．D 2．B 3．A 4．D 5．ABD 6．D 7．B 8．D 9．A 10．A
二、判断题
1．√ 2．√ 3．× 4．√ 5．√ 6．√ 7．√ 8．√ 9．× 10．√
三、操作题
略
第 5 章 设置网页超级
一、选择题
1．D 2．D
二、判断题
1．× 2．×
3．A 3．×
4． D 5． C 4．√ 5．×
第 6 章 使用 CSS 样式美化网页
一、选择题
1．B 2．C 11．A 12．A
3．C 13．C
4．B 14．D
5．A 6．D 7．D 15．D 16．A 17．A
8．D 9．B 10．C 18．B 19．D 20．D
二、简答题
1．× 2．× 3．× 4．× 5．× 6．× 7．√ 11．× 12．× 13．× 14．√ 15．√ 16．√
8．× 9．√ 10．√
第 7 章 规划布局网页
一、选择题
1．B 2．A 3．B 4．B 5．D
二、简答题
..
..
..
..

(完整版)《网页设计与制作》课程教学大纲

《网页设计与制作》课程教学大纲 课程名称：网页设计与制作 学分及学时：4学分总学时72学时，理论36学时 适用专业：网络工程 开课学期：第四学期 开课部门：计算机与互联网学院 先修课程：计算机文化基础计算机网络 考核要求：考试 使用教材及主要参考书： 向知礼主编：《网页设计与制作》航空工业出版社 2017年 杨松主编：《网页设计案例教程》航空工业出版社 2015年 一·课程性质和任务： 本课程全面地介绍网页制作技术的基本理论和实际应用。全书共10章，分为3大部分。前5章为第1部分，主要介绍网页制作的基本理论——HTML，同时穿插介绍Fireworks，Flash，Anfy等软件在网页制作过程中的应用；第6章～第8章为第2部分，主要介绍网页制作技术，包括CSS技术、客户端脚本技术(DHTML)以及XML技术；第9章～第10章为第3部分，主要介绍当前最流行的网页制作工具——Dreamweaver，通过应用实践能够从实际应用的角度进一步巩固所学知识。 课程内容不但包括各种网页制作技术的基础理论，而且强调网页制作的具体应用，使读者既能打下坚实的理论基础，又能掌握实际的操作技能。 二·课程教学目的与要求 以Dreamweaver的使用为主线，介绍网页制作的相关技术。使学生理解网页制作的基本概念和理论,掌握站点的建立和网页的设计,能用HTML语言修改网页;掌握网页制作和站点的基本知识;掌握站点的创建和网页的编辑;掌握超链接、图像、CSS样式的使用;掌握表格、框架、表单、多媒体对象的使用;理解行为、模板、库、CSS布局的概念和使用;理解HTML语言、网站的测试与的发布； 要求：教学过程中，须注重学生实践操作能力的培养，采取“面向实践、能力为先”的教学思路，教学内容应结合当前WEB技术的发展趋势，把握未来企业级WEB页面开发的发展方向，兼顾各行各业的需求变化，力争面向社会，服务于企业“互联网+”战略。

网 制作综合实例

网页制作综合实例 制作前的准备工作 首先在E盘上建立一个文件夹（如玫瑰信使），再在其下建立images文件夹和css文件夹。将“ch16/images”文件夹下的所有图像拷贝到“玫瑰信使/images”文件夹下。 建立站点和规划目录结构、指定默认图像文件夹 主页制作前的准备工作，有定义站点和设计网站结构的目录，还有就是要将网页设计制作中需要用到的所有图像素材整理好，最好是放在站点根目录中的一个文件夹中，如images。这样便于设计制作时的选取使用，也不易造成素材的混乱。如下图： 规划站点目录结构 为站点中使用的图像文件指定一个默认图像文件夹，如下图： 设置站点中的默认图像文件夹 在站点下建立一个主页文件。 设置页面属性及样式 16.2.1页面属性设置 1.在站点资源管理器的本地视窗中，选择并双击已经定义的首页面文件ch16\。 2．在打开的文件的文档窗口中，选择“修改”---“页面属性”菜单项，打开“页面属性”对话框。 设置网页标题为：“家庭百科” 设置背景图像为images/

将“左边界”、“顶部边界”、“边界宽度”、“边界高度”项均设为5。 3．设置完成后，单击“确定”按钮，确定操作返回到文档窗口。 16.2.2定义CSS样式文件 定义body样式 1.在文档窗口中，依次单击“窗口”---“CSS样式”菜单项，打开“CSS 样式”面板。选择“新建CSS样式”菜单命令。 2.打开“新建CSS样式”对话框，“类型”选择“重定义HTML标签”，在 “标签”框中选择或输入body，“定义在”选择“（新建样式表文件）”。 3.单击“确定”按钮，在弹出的“保存样式表文件为”对话框中，选择 样式文件保存的路径（站点下的CSS文件夹），输入样式文件名（这里存为css）。 4.单击“保存”按钮，在出现的样式定义对话框中选择“类型”，在“字 体”下拉列表框中选择“宋体”;在“大小”下拉列表中选择“9”，后面的单位下拉列表框中选择“点数（pt）”度量单位。 5.单击“确定”按钮，便完成对body标记的定义 定义td 定义td的方法和定义body一样，在“新建CSS样式”对话框中将“类型”选择为“重定义html标签”；在“标签”框中选择或输入td。在定义样式对话框中将字体设置为宋体9磅字。 定义文档的链接颜色 1.单击“窗口”----“CSS样式”菜单项，打开“CSS样式”面板。 2.单击“CSS样式”面板中的“新建样式”按钮，打开“新建CSS样式” 对话框。“类型”选择“使用CSS选择器”；“选择器”框中选择或输入a:active